[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,6 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Accordion from '@mui/material/Accordion';
+import Accordion, { AccordionProps } from '@mui/material/Accordion';
 
 function testOnChange() {
   function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {}
@@ -56,3 +56,29 @@ const AccordionComponentTest = () => {
 <Accordion slotProps={{ heading: { component: 'h4' } }}>
   <div />
 </Accordion>;
+
+function Custom(props: AccordionProps) {
+  const { slotProps, ...dialogProps } = 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);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    >
+      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,6 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Dialog from '@mui/material/Dialog';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
 import { PaperProps } from '@mui/material/Paper';
 
 const paperProps: PaperProps<'span'> = {
@@ -17,3 +17,29 @@ function Test() {
     </React.Fragment>
   );
 }
+
+function Custom(props: DialogProps) {
+  const { slotProps, ...dialogProps } = 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);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    >
+      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,6 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import { Popover, PaperProps } from '@mui/material';
+import { Popover, PaperProps, PopoverProps } from '@mui/material';
 
 const paperProps: PaperProps<'span'> = {
   component: 'span',
@@ -25,3 +25,29 @@ function Test() {
     },
   }}
 />;
+
+function Custom(props: PopoverProps) {
+  const { slotProps, ...dialogProps } = 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);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    >
+      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,5 @@
 import * as React from 'react';
-import Snackbar from '@mui/material/Snackbar';
+import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
 import { expectType } from '@mui/types';
 
 <Snackbar
@@ -36,3 +36,27 @@ import { expectType } from '@mui/types';
     },
   }}
 />;
+
+function Custom(props: SnackbarProps) {
+  const { slotProps, ...dialogProps } = 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);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    />
+  );
+}

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

@@ -5,7 +5,7 @@ import { InternalStandardProps as StandardProps } from '..';
 import { FabProps } from '../Fab';
 import { TransitionProps } from '../transitions';
 import { SpeedDialClasses } from './speedDialClasses';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types';
 
 export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
 export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
@@ -14,17 +14,19 @@ export interface SpeedDialSlots {
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default {}
+   * @default Zoom
    */
-  transition: React.JSXElementConstructor<
-    TransitionProps & { children: React.ReactElement<unknown, any> }
-  >;
+  transition: React.ElementType;
 }
 
 export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<
   SpeedDialSlots,
   {
-    transition: SlotProps<React.JSXElementConstructor<TransitionProps>, {}, SpeedDialOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
+     */
+    transition: SlotComponentProps<React.ElementType, TransitionProps, SpeedDialOwnerState>;
   }
 >;
 

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

@@ -4,7 +4,7 @@ import { CollapseProps, InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { StepContentClasses } from './stepContentClasses';
-import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types';
 
 export interface StepContentSlots {
   /**
@@ -24,7 +24,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwared to the transition slot.
      * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
      */
-    transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
+    transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
   }
 >;
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import StepContent from '@mui/material/StepContent';
+import StepContent, { StepContentProps } from '@mui/material/StepContent';
 import Fade from '@mui/material/Fade';
 import Collapse from '@mui/material/Collapse';
 import Grow from '@mui/material/Grow';
@@ -11,3 +11,29 @@ import Zoom from '@mui/material/Zoom';
 <StepContent TransitionComponent={Grow}>Step Content</StepContent>;
 <StepContent TransitionComponent={Slide}>Step Content</StepContent>;
 <StepContent TransitionComponent={Zoom}>Step Content</StepContent>;
+
+function Custom(props: StepContentProps) {
+  const { slotProps, ...dialogProps } = props;
+  return (
+    <StepContent
+      slotProps={{
+        ...slotProps,
+        transition: (ownerState) => {
+          const transitionProps =
+            typeof slotProps?.transition === 'function'
+              ? slotProps.transition(ownerState)
+              : slotProps?.transition;
+          return {
+            ...transitionProps,
+            onExited: (node) => {
+              transitionProps?.onExited?.(node);
+            },
+          };
+        },
+      }}
+      {...dialogProps}
+    >
+      test
+    </StepContent>
+  );
+}