[material-ui][StepContent] Add slots and slotProps

docs/pages/material-ui/api/step-content.json

@@ -2,6 +2,14 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -24,6 +32,14 @@
     "import StepContent from '@mui/material/StepContent';",
     "import { StepContent } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "transition",
+      "description": "The component that renders the transition slot.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Collapse",
+      "class": "MuiStepContent-transition"
+    }
+  ],
   "classes": [
     {
       "key": "last",
@@ -36,12 +52,6 @@
       "className": "MuiStepContent-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
-    },
-    {
-      "key": "transition",
-      "className": "MuiStepContent-transition",
-      "description": "Styles applied to the Transition component.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/step-content/step-content.json

@@ -3,6 +3,8 @@
   "propDescriptions": {
     "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -22,10 +24,9 @@
       "nodeName": "the root element",
       "conditions": "<code>last={true}</code> (controlled by <code>Step</code>)"
     },
-    "root": { "description": "Styles applied to the root element." },
-    "transition": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Transition component"
-    }
+    "root": { "description": "Styles applied to the root element." }
+  },
+  "slotDescriptions": {
+    "transition": "The component that renders the transition slot. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

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

@@ -1,11 +1,38 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+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';
 
-export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface StepContentSlots {
+  /**
+   * The component that renders the transition slot.
+   * [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> }
+  >;
+}
+
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepContentSlots,
+  {
+    /**
+     * 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>;
+  }
+>;
+
+export interface StepContentOwnerState extends StepContentProps {}
+
+export interface StepContentProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepContentSlotsAndSlotProps {
   /**
    * The content of the component.
    */

packages/mui-material/src/StepContent/StepContent.js

@@ -10,6 +10,7 @@ import Collapse from '../Collapse';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, last } = ownerState;
@@ -62,6 +63,8 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
     TransitionComponent = Collapse,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -83,24 +86,33 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
     transitionDuration = undefined;
   }
 
+  const externalForwardedProps = {
+    slots,
+    slotProps: { transition: TransitionProps, ...slotProps },
+  };
+
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: StepContentTransition,
+    externalForwardedProps,
+    ownerState,
+    className: classes.transition,
+    additionalProps: {
+      in: active || expanded,
+      timeout: transitionDuration,
+      unmountOnExit: true,
+    },
+  });
+
   return (
     <StepContentRoot
       className={clsx(classes.root, className)}
       ref={ref}
       ownerState={ownerState}
       {...other}
     >
-      <StepContentTransition
-        as={TransitionComponent}
-        in={active || expanded}
-        className={classes.transition}
-        ownerState={ownerState}
-        timeout={transitionDuration}
-        unmountOnExit
-        {...TransitionProps}
-      >
+      <TransitionSlot as={TransitionComponent} {...transitionProps}>
         {children}
-      </StepContentTransition>
+      </TransitionSlot>
     </StepContentRoot>
   );
 });
@@ -122,6 +134,20 @@ StepContent.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-material/src/StepContent/StepContent.test.js

@@ -24,6 +24,12 @@ describe('<StepContent />', () => {
       return { container: container.firstChild.firstChild, ...other };
     },
     skip: ['componentProp', 'componentsProp', 'themeVariants'],
+    slots: {
+      transition: {
+        expectedClassName: classes.transition,
+        testWithElement: null,
+      },
+    },
   }));
 
   it('renders children inside an Collapse component', () => {