[all components] Fix slotProps.transition types (@mj12albert)

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

@@ -58,7 +58,7 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
      */
     transition: SlotComponentProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & AccordionTransitionSlotPropsOverrides,
       AccordionOwnerState
     >;

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

@@ -84,6 +84,16 @@ function Custom(props: AccordionProps) {
   );
 }
 
+// slotProps.transition should reject unknown props
+<Accordion
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+>
+  <div />
+</Accordion>;
+
 function Custom2(props: AccordionProps) {
   const { slotProps, ...other } = props;
   return (

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

@@ -37,7 +37,7 @@ export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
      */
     transition: SlotComponentProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & BackdropTransitionSlotPropsOverrides,
       BackdropOwnerState
     >;

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

@@ -0,0 +1,10 @@
+import Backdrop from '@mui/material/Backdrop';
+
+// slotProps.transition should reject unknown props
+<Backdrop
+  open
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+/>;

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

@@ -68,7 +68,7 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
      */
     transition: SlotComponentProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & DialogTransitionSlotPropsOverrides,
       DialogOwnerState
     >;

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

@@ -14,7 +14,15 @@ function Test() {
   return (
     <React.Fragment>
       <Dialog open />;
-      <Dialog open PaperProps={paperProps} />;
+      <Dialog open slotProps={{ paper: paperProps }} />;
+      <Dialog
+        open
+        slotProps={{
+          // @ts-expect-error — unknown props should be rejected
+          transition: { randomInvalidProp: 'test' },
+        }}
+      />
+      ;
     </React.Fragment>
   );
 }

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

@@ -85,7 +85,7 @@ export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the available props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
      */
     transition: SlotProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & DrawerTransitionSlotPropsOverrides,
       DrawerOwnerState
     >;

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

@@ -14,7 +14,15 @@ function Test() {
   return (
     <React.Fragment>
       <Drawer open />;
-      <Drawer open PaperProps={paperProps} />;
+      <Drawer open slotProps={{ paper: paperProps }} />;
+      <Drawer
+        open
+        slotProps={{
+          // @ts-expect-error — unknown props should be rejected
+          transition: { randomInvalidProp: 'test' },
+        }}
+      />
+      ;
     </React.Fragment>
   );
 }

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

@@ -73,7 +73,7 @@ export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<
      */
     transition: SlotComponentProps<
       // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & MenuTransitionSlotPropsOverrides,
       MenuOwnerState
     >;

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

@@ -1,5 +1,14 @@
 import Menu, { MenuProps } from '@mui/material/Menu';
 
+// slotProps.transition should reject unknown props
+<Menu
+  open
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+/>;
+
 <Menu
   open
   slotProps={{

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

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

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

@@ -13,7 +13,15 @@ function Test() {
   return (
     <React.Fragment>
       <Popover open />;
-      <Popover open PaperProps={paperProps} />
+      <Popover open slotProps={{ paper: paperProps }} />;
+      <Popover
+        open
+        slotProps={{
+          // @ts-expect-error — unknown props should be rejected
+          transition: { randomInvalidProp: 'test' },
+        }}
+      />
+      ;
     </React.Fragment>
   );
 }

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

@@ -69,7 +69,7 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
      */
     transition: SlotComponentProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & SnackbarTransitionSlotPropsOverrides,
       SnackbarOwnerState
     >;

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

@@ -2,6 +2,14 @@ import { mergeSlotProps } from '@mui/material/utils';
 import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
 import { expectType } from '@mui/types';
 
+// slotProps.transition should reject unknown props
+<Snackbar
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+/>;
+
 <Snackbar
   slots={{
     root: 'dialog',

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

@@ -36,7 +36,11 @@ export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the transition slot.
      * By default, the available props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
      */
-    transition: SlotComponentProps<React.ElementType, TransitionProps, SpeedDialOwnerState>;
+    transition: SlotComponentProps<
+      React.ElementType<TransitionProps>,
+      TransitionProps,
+      SpeedDialOwnerState
+    >;
   }
 >;
 

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

@@ -0,0 +1,10 @@
+import SpeedDial from '@mui/material/SpeedDial';
+
+// slotProps.transition should reject unknown props
+<SpeedDial
+  ariaLabel="SpeedDial"
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+/>;

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

@@ -27,7 +27,11 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * Props forwarded to the transition slot.
      * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
      */
-    transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
+    transition: SlotComponentProps<
+      React.ElementType<CollapseProps>,
+      CollapseProps,
+      StepContentOwnerState
+    >;
   }
 >;
 

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

@@ -7,11 +7,21 @@ import Grow from '@mui/material/Grow';
 import Slide from '@mui/material/Slide';
 import Zoom from '@mui/material/Zoom';
 
-<StepContent TransitionComponent={Fade}>Step Content</StepContent>;
-<StepContent TransitionComponent={Collapse}>Step Content</StepContent>;
-<StepContent TransitionComponent={Grow}>Step Content</StepContent>;
-<StepContent TransitionComponent={Slide}>Step Content</StepContent>;
-<StepContent TransitionComponent={Zoom}>Step Content</StepContent>;
+// slotProps.transition should reject unknown props
+<StepContent
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+>
+  Step Content
+</StepContent>;
+
+<StepContent slots={{ transition: Fade }}>Step Content</StepContent>;
+<StepContent slots={{ transition: Collapse }}>Step Content</StepContent>;
+<StepContent slots={{ transition: Grow }}>Step Content</StepContent>;
+<StepContent slots={{ transition: Slide }}>Step Content</StepContent>;
+<StepContent slots={{ transition: Zoom }}>Step Content</StepContent>;
 
 function Custom(props: StepContentProps) {
   const { slotProps, ...other } = props;

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

@@ -56,7 +56,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<
      * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
      */
     transition: SlotProps<
-      React.ElementType,
+      React.ElementType<TransitionProps>,
       TransitionProps & TooltipTransitionSlotPropsOverrides,
       TooltipOwnerState
     >;

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

@@ -3,6 +3,17 @@ import { expectType } from '@mui/types';
 import { mergeSlotProps } from '@mui/material/utils';
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
 
+// slotProps.transition should reject unknown props
+<Tooltip
+  title="Hello"
+  slotProps={{
+    // @ts-expect-error — unknown props should be rejected
+    transition: { randomInvalidProp: 'test' },
+  }}
+>
+  <button type="button">Hover or touch me</button>
+</Tooltip>;
+
 <Tooltip title="Hello">
   <button type="button">Hover or touch me</button>
 </Tooltip>;