[material-ui] Fix slotProps.transition types

docs/pages/material-ui/api/speed-dial.json

@@ -72,7 +72,7 @@
     {
       "name": "transition",
       "description": "The component that renders the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
-      "default": "{}",
+      "default": "Zoom",
       "class": null
     }
   ],

packages/mui-material/src/Accordion/Accordion.d.ts

@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
 import { AccordionClasses } from './accordionClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ExtendPaperTypeMap } from '../Paper/Paper';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface AccordionSlots {
   /**
@@ -18,9 +18,7 @@ export interface AccordionSlots {
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
-  transition: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<unknown, any> }
-  >;
+  transition: React.ElementType;
 }
 
 export interface AccordionTransitionSlotPropsOverrides {}
@@ -29,14 +27,18 @@ export interface AccordionHeadingSlotPropsOverrides {}
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AccordionSlots,
   {
-    heading: SlotProps<
-      React.ElementType<React.HTMLProps<HTMLHeadingElement>>,
-      AccordionHeadingSlotPropsOverrides,
-      AccordionOwnerState
-    >;
-    transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      AccordionTransitionSlotPropsOverrides,
+    /**
+     * Props forwarded to the heading slot.
+     * By default, the avaible props are based on the h3 element.
+     */
+    heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
+     */
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & AccordionTransitionSlotPropsOverrides,
       AccordionOwnerState
     >;
   }

packages/mui-material/src/Accordion/Accordion.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Accordion from '@mui/material/Accordion';
+import { mergeSlotProps } from '@mui/material/utils';
+import Accordion, { AccordionProps } from '@mui/material/Accordion';
 
 function testOnChange() {
   function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {}
@@ -56,3 +57,48 @@ const AccordionComponentTest = () => {
 <Accordion slotProps={{ heading: { component: 'h4' } }}>
   <div />
 </Accordion>;
+
+function Custom(props: AccordionProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Accordion
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...other}
+    >
+      test
+    </Accordion>
+  );
+}
+
+function Custom2(props: AccordionProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Accordion
+      slotProps={{
+        ...slotProps,
+        transition: mergeSlotProps(slotProps?.transition, {
+          onExited: (node) => {
+            expectType<HTMLElement, typeof node>(node);
+          },
+        }),
+      }}
+      {...other}
+    >
+      test
+    </Accordion>
+  );
+}

packages/mui-material/src/Backdrop/Backdrop.d.ts

@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
 import { Theme } from '../styles';
 import { BackdropClasses } from './backdropClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface BackdropSlots {
   /**
@@ -18,9 +18,7 @@ export interface BackdropSlots {
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
    */
-  transition: React.JSXElementConstructor<
-    TransitionProps & { children: React.ReactElement<unknown, any> }
-  >;
+  transition: React.ElementType;
 }
 export interface BackdropComponentsPropsOverrides {}
 
@@ -29,14 +27,18 @@ export interface BackdropTransitionSlotPropsOverrides {}
 export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
   BackdropSlots,
   {
-    root: SlotProps<
-      React.ElementType<HTMLDivElement>,
-      BackdropComponentsPropsOverrides,
-      BackdropOwnerState
-    >;
-    transition: SlotProps<
-      React.JSXElementConstructor<TransitionProps>,
-      BackdropTransitionSlotPropsOverrides,
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+     */
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & BackdropTransitionSlotPropsOverrides,
       BackdropOwnerState
     >;
   }

packages/mui-material/src/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';
 import { DialogClasses } from './dialogClasses';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface DialogSlots {
   /**
@@ -66,9 +66,9 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the transition slot.
      * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
      */
-    transition: SlotProps<
-      React.ElementType<TransitionProps>,
-      DialogTransitionSlotPropsOverrides,
+    transition: SlotComponentProps<
+      React.ElementType,
+      TransitionProps & DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;
     /**

packages/mui-material/src/Dialog/Dialog.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Dialog from '@mui/material/Dialog';
+import { mergeSlotProps } from '@mui/material/utils';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
 import { PaperProps } from '@mui/material/Paper';
 
 const paperProps: PaperProps<'span'> = {
@@ -17,3 +18,48 @@ function Test() {
     </React.Fragment>
   );
 }
+
+function Custom(props: DialogProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Dialog
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...other}
+    >
+      test
+    </Dialog>
+  );
+}
+
+function Custom2(props: DialogProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Dialog
+      slotProps={{
+        ...slotProps,
+        transition: mergeSlotProps(slotProps?.transition, {
+          onExited: (node) => {
+            expectType<HTMLElement, typeof node>(node);
+          },
+        }),
+      }}
+      {...other}
+    >
+      test
+    </Dialog>
+  );
+}

packages/mui-material/src/Popover/Popover.d.ts

@@ -56,8 +56,8 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
      */
     transition: SlotComponentProps<
       // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-      React.ElementType<TransitionProps>,
-      PopoverTransitionSlotPropsOverrides,
+      React.ElementType,
+      TransitionProps & PopoverTransitionSlotPropsOverrides,
       PopoverOwnerState
     >;
     /**

packages/mui-material/src/Popover/Popover.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import { Popover, PaperProps } from '@mui/material';
+import { mergeSlotProps } from '@mui/material/utils';
+import { Popover, PaperProps, PopoverProps } from '@mui/material';
 
 const paperProps: PaperProps<'span'> = {
   component: 'span',
@@ -25,3 +26,48 @@ function Test() {
     },
   }}
 />;
+
+function Custom(props: PopoverProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Popover
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...other}
+    >
+      test
+    </Popover>
+  );
+}
+
+function Custom2(props: PopoverProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Popover
+      slotProps={{
+        ...slotProps,
+        transition: mergeSlotProps(slotProps?.transition, {
+          onExited: (node) => {
+            expectType<HTMLElement, typeof node>(node);
+          },
+        }),
+      }}
+      {...other}
+    >
+      test
+    </Popover>
+  );
+}

packages/mui-material/src/Snackbar/Snackbar.d.ts

@@ -66,11 +66,11 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<
     >;
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+     * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
      */
     transition: SlotComponentProps<
-      React.ElementType<TransitionProps>,
-      SnackbarTransitionSlotPropsOverrides,
+      React.ElementType,
+      TransitionProps & SnackbarTransitionSlotPropsOverrides,
       SnackbarOwnerState
     >;
   }

packages/mui-material/src/Snackbar/Snackbar.spec.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Snackbar from '@mui/material/Snackbar';
+import { mergeSlotProps } from '@mui/material/utils';
+import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
 import { expectType } from '@mui/types';
 
 <Snackbar
@@ -36,3 +37,44 @@ import { expectType } from '@mui/types';
     },
   }}
 />;
+
+function Custom(props: SnackbarProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Snackbar
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...other}
+    />
+  );
+}
+
+function Custom2(props: SnackbarProps) {
+  const { slotProps, ...other } = props;
+  return (
+    <Snackbar
+      slotProps={{
+        ...slotProps,
+        transition: mergeSlotProps(slotProps?.transition, {
+          onExited: (node) => {
+            expectType<HTMLElement, typeof node>(node);
+          },
+        }),
+      }}
+      {...other}
+    />
+  );
+}