diff --git a/docs/pages/material-ui/api/step-content.json b/docs/pages/material-ui/api/step-content.json index 43987734f58189..bfa98afcf13ae4 100644 --- a/docs/pages/material-ui/api/step-content.json +++ b/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
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ transition?: elementType }" }, + "default": "{}" + }, "sx": { "type": { "name": "union", @@ -9,7 +17,12 @@ }, "additionalInfo": { "sx": true } }, - "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" }, + "TransitionComponent": { + "type": { "name": "elementType" }, + "default": "Collapse", + "deprecated": true, + "deprecationInfo": "Use slotProps.transition instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." + }, "transitionDuration": { "type": { "name": "union", @@ -17,13 +30,25 @@ }, "default": "'auto'" }, - "TransitionProps": { "type": { "name": "object" } } + "TransitionProps": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use slotProps.transition instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." + } }, "name": "StepContent", "imports": [ "import StepContent from '@mui/material/StepContent';", "import { StepContent } from '@mui/material';" ], + "slots": [ + { + "name": "transition", + "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.", + "default": "Collapse", + "class": "MuiStepContent-transition" + } + ], "classes": [ { "key": "last", @@ -36,12 +61,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, diff --git a/docs/translations/api-docs/step-content/step-content.json b/docs/translations/api-docs/step-content/step-content.json index e3f3391e657ed8..d570c8d8e5699d 100644 --- a/docs/translations/api-docs/step-content/step-content.json +++ b/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": "last={true} (controlled by Step)" }, - "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. Follow this guide to learn more about the requirements for this component." } } diff --git a/packages/mui-material/src/StepContent/StepContent.d.ts b/packages/mui-material/src/StepContent/StepContent.d.ts index 60213039b3d901..7917a00cb5f25a 100644 --- a/packages/mui-material/src/StepContent/StepContent.d.ts +++ b/packages/mui-material/src/StepContent/StepContent.d.ts @@ -4,8 +4,29 @@ import { 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> { +export interface StepContentSlots { + /** + * The component that renders the transition. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse + */ + transition?: React.JSXElementConstructor< + TransitionProps & { children?: React.ReactElement } + >; +} + +export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps< + StepContentSlots, + { + transition: SlotProps, {}, StepContentOwnerState>; + } +>; + +export interface StepContentProps + extends StandardProps>, + StepContentSlotsAndSlotProps { /** * The content of the component. */ @@ -22,6 +43,7 @@ export interface StepContentProps extends StandardProps } @@ -37,10 +59,13 @@ export interface StepContentProps extends StandardProps; /** diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 528685347c41d0..67a3b930a21bef 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -8,6 +8,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 useThemeProps = createUseThemeProps('MuiStepContent'); @@ -60,6 +61,8 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) { TransitionComponent = Collapse, transitionDuration: transitionDurationProp = 'auto', TransitionProps, + slots = {}, + slotProps = {}, ...other } = props; @@ -81,6 +84,17 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) { transitionDuration = undefined; } + const externalForwardedProps = { + slots: { transition: TransitionComponent, ...slots }, + slotProps: { transition: TransitionProps, ...slotProps }, + }; + + const [TransitionSlot, transitionProps] = useSlot('transition', { + elementType: Collapse, + externalForwardedProps, + ownerState, + }); + return ( {children} @@ -120,6 +133,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. */ @@ -132,6 +159,7 @@ StepContent.propTypes /* remove-proptypes */ = { * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Collapse + * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ TransitionComponent: PropTypes.elementType, /** @@ -153,6 +181,7 @@ StepContent.propTypes /* remove-proptypes */ = { /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. + * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ TransitionProps: PropTypes.object, };