diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts index f2607c1ad32e71..7aea38c61135e9 100644 --- a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts +++ b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts @@ -212,9 +212,14 @@ function getPropsFromVariableDeclaration({ return null; } + let expression: ts.Expression = node.initializer; + if (ts.isAsExpression(node.initializer)) { + expression = node.initializer.expression; + } + if ( - (ts.isArrowFunction(node.initializer) || ts.isFunctionExpression(node.initializer)) && - node.initializer.parameters.length === 1 + (ts.isArrowFunction(expression) || ts.isFunctionExpression(expression)) && + expression.parameters.length === 1 ) { return parseFunctionComponent({ node, @@ -222,10 +227,11 @@ function getPropsFromVariableDeclaration({ project, }); } + // x = React.memo((props:type) { return
}) // x = React.forwardRef((props:type) { return
}) - if (ts.isCallExpression(node.initializer) && node.initializer.arguments.length > 0) { - const potentialComponent = node.initializer.arguments[0]; + if (ts.isCallExpression(expression) && expression.arguments.length > 0) { + const potentialComponent = expression.arguments[0]; if ( (ts.isArrowFunction(potentialComponent) || ts.isFunctionExpression(potentialComponent)) && potentialComponent.parameters.length > 0 && @@ -250,14 +256,12 @@ function getPropsFromVariableDeclaration({ }); } } - - return null; } // handle component factories: x = createComponent() if ( checkDeclarations && - node.initializer && + expression && getJSXLikeReturnValueFromFunction(type, project).length > 0 ) { return parseFunctionComponent({ diff --git a/packages/mui-joy/src/Accordion/Accordion.tsx b/packages/mui-joy/src/Accordion/Accordion.tsx index 963403fd03f6f8..3c62dd8d6f7f92 100644 --- a/packages/mui-joy/src/Accordion/Accordion.tsx +++ b/packages/mui-joy/src/Accordion/Accordion.tsx @@ -170,11 +170,6 @@ Accordion.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, expands the accordion by default. * @default false diff --git a/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx b/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx index 82fc281c7b1b29..65ceab3d52689c 100644 --- a/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx +++ b/packages/mui-joy/src/AccordionDetails/AccordionDetails.tsx @@ -182,11 +182,6 @@ AccordionDetails.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx index 66f57b0845664a..639dd1dd10dda2 100644 --- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx +++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx @@ -139,11 +139,6 @@ AccordionGroup.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the divider between accordions will be hidden. * @default false diff --git a/packages/mui-joy/src/AccordionSummary/AccordionSummary.tsx b/packages/mui-joy/src/AccordionSummary/AccordionSummary.tsx index 0ff84317f9989e..c4959713f713d7 100644 --- a/packages/mui-joy/src/AccordionSummary/AccordionSummary.tsx +++ b/packages/mui-joy/src/AccordionSummary/AccordionSummary.tsx @@ -187,11 +187,6 @@ AccordionSummary.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The indicator element to display. * @default diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx index ae19e140577ce0..10cf0d368946de 100644 --- a/packages/mui-joy/src/Alert/Alert.tsx +++ b/packages/mui-joy/src/Alert/Alert.tsx @@ -217,11 +217,6 @@ Alert.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Element placed after the children. */ diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx index 7d0323b1529abc..90ca39d7d90593 100644 --- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx +++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx @@ -179,11 +179,6 @@ AspectRatio.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * By default, the AspectRatio will maintain the aspect ratio of its content. * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container. diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx index 4170a446629a1a..9ed84ca405bfb6 100644 --- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx +++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx @@ -171,11 +171,6 @@ AutocompleteListbox.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The size of the component (affect other nested list* components). * @default 'md' diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx index 85e4ceba027655..3bfc2491c10f7a 100644 --- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx +++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx @@ -121,11 +121,6 @@ AutocompleteOption.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx index fd2eb21fa1e240..9a999db5fa6ef4 100644 --- a/packages/mui-joy/src/Avatar/Avatar.tsx +++ b/packages/mui-joy/src/Avatar/Avatar.tsx @@ -260,11 +260,6 @@ Avatar.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The size of the component. * It accepts theme values between 'sm' and 'lg'. diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx index a412fd30ebf48e..5a0997349a7d2f 100644 --- a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx +++ b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx @@ -121,11 +121,6 @@ AvatarGroup.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The size of the component. * It accepts theme values between 'sm' and 'lg'. diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx index 3bff899460b790..81bb86f5320025 100644 --- a/packages/mui-joy/src/Badge/Badge.tsx +++ b/packages/mui-joy/src/Badge/Badge.tsx @@ -265,11 +265,6 @@ Badge.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the badge is invisible. * @default false diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx index 597feaa781c1db..31f54bb9235ebc 100644 --- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx @@ -199,11 +199,6 @@ Breadcrumbs.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Custom separator node. * @default '/' diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 98937099ec0141..c9f5d8068ad28e 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -345,11 +345,6 @@ Button.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx index 110e772e5089ed..d406a51035462c 100644 --- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx @@ -291,11 +291,6 @@ ButtonGroup.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, all the buttons will be disabled. * @default false diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 73607123bf9052..d83ee91277dd60 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -210,11 +210,6 @@ Card.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color. * @default false diff --git a/packages/mui-joy/src/CardActions/CardActions.tsx b/packages/mui-joy/src/CardActions/CardActions.tsx index 4c64f1ee966b53..fcc95a39b30ae2 100644 --- a/packages/mui-joy/src/CardActions/CardActions.tsx +++ b/packages/mui-joy/src/CardActions/CardActions.tsx @@ -130,11 +130,6 @@ CardActions.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The component orientation. * @default 'horizontal' diff --git a/packages/mui-joy/src/CardContent/CardContent.tsx b/packages/mui-joy/src/CardContent/CardContent.tsx index d047e8b8200ed7..566ed06bfd6511 100644 --- a/packages/mui-joy/src/CardContent/CardContent.tsx +++ b/packages/mui-joy/src/CardContent/CardContent.tsx @@ -96,11 +96,6 @@ CardContent.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The component orientation. * @default 'vertical' diff --git a/packages/mui-joy/src/CardCover/CardCover.tsx b/packages/mui-joy/src/CardCover/CardCover.tsx index 3ad41c30377d7d..9e93f2acdbbda0 100644 --- a/packages/mui-joy/src/CardCover/CardCover.tsx +++ b/packages/mui-joy/src/CardCover/CardCover.tsx @@ -109,11 +109,6 @@ CardCover.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx index 17ed565de6d0dd..8998c54f8b30f7 100644 --- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx +++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx @@ -180,11 +180,6 @@ CardOverflow.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx index b5930861ddacda..37489920cc70ce 100644 --- a/packages/mui-joy/src/Checkbox/Checkbox.tsx +++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx @@ -407,11 +407,6 @@ Checkbox.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default checked state. Use when the component is not controlled. */ diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx index f35a558d540138..4822da74a4dcf9 100644 --- a/packages/mui-joy/src/Chip/Chip.tsx +++ b/packages/mui-joy/src/Chip/Chip.tsx @@ -351,11 +351,6 @@ Chip.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 72648ede7bb177..20cf1965acb89d 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -158,11 +158,6 @@ ChipDelete.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * If `undefined`, the value inherits from the parent chip via a React context. diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx index d53022c549a2a8..1fe851edce3d03 100644 --- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx +++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx @@ -316,11 +316,6 @@ CircularProgress.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The boolean to select a variant. * Use indeterminate when there is no progress value. diff --git a/packages/mui-joy/src/Divider/Divider.tsx b/packages/mui-joy/src/Divider/Divider.tsx index 78d0e6e7e3579b..050910b1d3ed18 100644 --- a/packages/mui-joy/src/Divider/Divider.tsx +++ b/packages/mui-joy/src/Divider/Divider.tsx @@ -161,11 +161,6 @@ Divider.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Class name applied to the divider to shrink or stretch the line based on the orientation. */ diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx index 73ac96bb0ff231..48ed7b78d636a1 100644 --- a/packages/mui-joy/src/FormControl/FormControl.tsx +++ b/packages/mui-joy/src/FormControl/FormControl.tsx @@ -204,11 +204,6 @@ FormControl.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the children are in disabled state. * @default false diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx index a58a9c7be802b3..222ae17d8ffa74 100644 --- a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx +++ b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx @@ -97,11 +97,6 @@ FormHelperText.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/FormLabel/FormLabel.tsx b/packages/mui-joy/src/FormLabel/FormLabel.tsx index ab6b6b63776d52..8df2c206f7fba7 100644 --- a/packages/mui-joy/src/FormLabel/FormLabel.tsx +++ b/packages/mui-joy/src/FormLabel/FormLabel.tsx @@ -111,11 +111,6 @@ FormLabel.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The asterisk is added if required=`true` */ diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index fe092f39d82baf..7caca00e8864cf 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -221,11 +221,6 @@ IconButton.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx index af9fa127fda8a0..30b8d53345829a 100644 --- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx +++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx @@ -243,11 +243,6 @@ LinearProgress.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The boolean to select a variant. * Use indeterminate when there is no progress value. diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx index d2dfc19f4c69db..abf6a9ab4b2840 100644 --- a/packages/mui-joy/src/Link/Link.tsx +++ b/packages/mui-joy/src/Link/Link.tsx @@ -320,11 +320,6 @@ Link.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx index ecbf7d91597f67..54990c8dca3cd8 100644 --- a/packages/mui-joy/src/List/List.tsx +++ b/packages/mui-joy/src/List/List.tsx @@ -264,11 +264,6 @@ List.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The component orientation. * @default 'vertical' diff --git a/packages/mui-joy/src/ListDivider/ListDivider.tsx b/packages/mui-joy/src/ListDivider/ListDivider.tsx index 23a154a4a151af..6c12d64da90b1c 100644 --- a/packages/mui-joy/src/ListDivider/ListDivider.tsx +++ b/packages/mui-joy/src/ListDivider/ListDivider.tsx @@ -148,11 +148,6 @@ ListDivider.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The empty space on the side(s) of the divider in a vertical list. * diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx index 8378666d75fdd5..5b192289b61ba4 100644 --- a/packages/mui-joy/src/ListItem/ListItem.tsx +++ b/packages/mui-joy/src/ListItem/ListItem.tsx @@ -286,11 +286,6 @@ ListItem.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The element to display at the end of ListItem. */ diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx index 0463696dac13a6..07ff9505d20265 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx +++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx @@ -243,11 +243,6 @@ ListItemButton.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx index 8fea7ddb23c68f..cf7391c7ca8446 100644 --- a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx +++ b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx @@ -74,11 +74,6 @@ ListItemContent.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx index 48b40c30859284..5c7a3275cc9647 100644 --- a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx +++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx @@ -87,11 +87,6 @@ ListItemDecorator.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside. * @default {} diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx index 2994fe22581af7..31204a7c6a0e02 100644 --- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx +++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx @@ -140,11 +140,6 @@ ListSubheader.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * @ignore */ diff --git a/packages/mui-joy/src/MenuButton/MenuButton.tsx b/packages/mui-joy/src/MenuButton/MenuButton.tsx index 4b6522d4cba035..8b83328635382b 100644 --- a/packages/mui-joy/src/MenuButton/MenuButton.tsx +++ b/packages/mui-joy/src/MenuButton/MenuButton.tsx @@ -222,8 +222,7 @@ MenuButton.propTypes /* remove-proptypes */ = { PropTypes.string, ]), /** - * The component used for the root node. - * Either a string to use a HTML element or a component. + * @ignore */ component: PropTypes.elementType, /** diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx index 5e0f46e8c0540b..e12826f4ec8535 100644 --- a/packages/mui-joy/src/MenuList/MenuList.tsx +++ b/packages/mui-joy/src/MenuList/MenuList.tsx @@ -155,11 +155,6 @@ MenuList.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * @ignore */ diff --git a/packages/mui-joy/src/Modal/Modal.tsx b/packages/mui-joy/src/Modal/Modal.tsx index e6740c75483c99..6dbd8015752a36 100644 --- a/packages/mui-joy/src/Modal/Modal.tsx +++ b/packages/mui-joy/src/Modal/Modal.tsx @@ -179,11 +179,6 @@ Modal.propTypes /* remove-proptypes */ = { * A single child content element. */ children: elementAcceptingRef.isRequired, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * An HTML element or function that returns one. * The `container` will have the portal children appended to it. diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx index 9a351bca5503e0..290a25c45875b9 100644 --- a/packages/mui-joy/src/ModalClose/ModalClose.tsx +++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx @@ -159,11 +159,6 @@ ModalClose.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * @ignore */ diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx index d5fb6472ebeacd..7e07027ab71e28 100644 --- a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx +++ b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx @@ -214,11 +214,6 @@ ModalDialog.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The layout of the dialog * @default 'center' diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx index 2787cf251ed04d..5ff846decfe741 100644 --- a/packages/mui-joy/src/Option/Option.tsx +++ b/packages/mui-joy/src/Option/Option.tsx @@ -129,11 +129,6 @@ Option.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx index 3d3705998b0e23..0a79fa2b4e9dcd 100644 --- a/packages/mui-joy/src/Radio/Radio.tsx +++ b/packages/mui-joy/src/Radio/Radio.tsx @@ -438,11 +438,6 @@ Radio.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default checked state. Use when the component is not controlled. */ diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx index 41fbeefff40c30..3175d8ff428081 100644 --- a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx +++ b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx @@ -200,7 +200,7 @@ RadioGroup.propTypes /* remove-proptypes */ = { PropTypes.string, ]), /** - * The component used for the root node. + * The component used for the Root slot. * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx index 091028817abf5f..9684401403f656 100644 --- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx @@ -119,11 +119,6 @@ ScopedCssBaseline.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Disable `color-scheme` CSS property. * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index d27104fec683f5..a023736c39be22 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -654,11 +654,6 @@ Select.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the select will be initially open. * @default false diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx index 98a857b28375d2..7a5ae79bef0c0f 100644 --- a/packages/mui-joy/src/Sheet/Sheet.tsx +++ b/packages/mui-joy/src/Sheet/Sheet.tsx @@ -156,11 +156,6 @@ Sheet.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the children with an implicit color prop invert their colors to match the component's variant and color. * @default false diff --git a/packages/mui-joy/src/Skeleton/Skeleton.tsx b/packages/mui-joy/src/Skeleton/Skeleton.tsx index 5f26b0ea8e9adf..c458c1686d5a2d 100644 --- a/packages/mui-joy/src/Skeleton/Skeleton.tsx +++ b/packages/mui-joy/src/Skeleton/Skeleton.tsx @@ -355,11 +355,6 @@ Skeleton.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Height of the skeleton. * Useful when you don't want to adapt the skeleton to a text element but for instance a card. diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx index 7bd87f18566460..82ea4885ce08a3 100644 --- a/packages/mui-joy/src/Slider/Slider.tsx +++ b/packages/mui-joy/src/Slider/Slider.tsx @@ -691,11 +691,6 @@ Slider.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx index d93f587099e265..aebd1451d282df 100644 --- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx +++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx @@ -161,11 +161,6 @@ SvgIcon.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'inherit', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The theme's fontSize applied to the icon that will override the `size` prop. * Use this prop when you want to use a specific font-size from the theme. diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx index 05e9999496f5e8..c442c295f83c57 100644 --- a/packages/mui-joy/src/Switch/Switch.tsx +++ b/packages/mui-joy/src/Switch/Switch.tsx @@ -409,11 +409,6 @@ Switch.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default checked state. Use when the component is not controlled. */ diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx index c9d8342d03b361..eb44f7e173e661 100644 --- a/packages/mui-joy/src/Tab/Tab.tsx +++ b/packages/mui-joy/src/Tab/Tab.tsx @@ -235,11 +235,6 @@ Tab.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx index 0deee34964e486..c8dfa00f44957c 100644 --- a/packages/mui-joy/src/TabList/TabList.tsx +++ b/packages/mui-joy/src/TabList/TabList.tsx @@ -184,11 +184,6 @@ TabList.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the TabList's underline will disappear. * @default false diff --git a/packages/mui-joy/src/TabPanel/TabPanel.tsx b/packages/mui-joy/src/TabPanel/TabPanel.tsx index 8adf06e5966d37..da59c034763560 100644 --- a/packages/mui-joy/src/TabPanel/TabPanel.tsx +++ b/packages/mui-joy/src/TabPanel/TabPanel.tsx @@ -131,11 +131,6 @@ TabPanel.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Always keep the children in the DOM. * @default false diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx index f194b6536960c8..feae85a3368ad7 100644 --- a/packages/mui-joy/src/Table/Table.tsx +++ b/packages/mui-joy/src/Table/Table.tsx @@ -377,11 +377,6 @@ Table.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the table row will shade on hover. * @default false diff --git a/packages/mui-joy/src/Tabs/Tabs.tsx b/packages/mui-joy/src/Tabs/Tabs.tsx index dcda739ef89c80..ea4ed91907edfd 100644 --- a/packages/mui-joy/src/Tabs/Tabs.tsx +++ b/packages/mui-joy/src/Tabs/Tabs.tsx @@ -166,11 +166,6 @@ Tabs.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx index 3bdf175ee3c3bd..0cc8792bbdc075 100644 --- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -220,8 +220,7 @@ ToggleButtonGroup.propTypes /* remove-proptypes */ = { PropTypes.string, ]), /** - * The component used for the root node. - * Either a string to use a HTML element or a component. + * @ignore */ component: PropTypes.elementType, /** diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx index 5615790bd8a725..709d69b90be6d6 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx @@ -670,11 +670,6 @@ Tooltip.propTypes /* remove-proptypes */ = { * @default 'neutral' */ color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Set to `true` if the `title` acts as an accessible description. * By default the `title` acts as an accessible label for the child. diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index e1485cbbbcf4e6..39d45bd4680fc7 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -269,11 +269,6 @@ Typography.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * Element placed after the children. */ diff --git a/packages/mui-lab/src/Timeline/Timeline.tsx b/packages/mui-lab/src/Timeline/Timeline.tsx index ee173569051da7..b043531452e95e 100644 --- a/packages/mui-lab/src/Timeline/Timeline.tsx +++ b/packages/mui-lab/src/Timeline/Timeline.tsx @@ -78,10 +78,6 @@ Timeline.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, /** * className applied to the root element. */ @@ -91,14 +87,6 @@ Timeline.propTypes /* remove-proptypes */ = { * @default 'right' */ position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']), - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), } as any; /** diff --git a/packages/mui-material-next/src/Badge/Badge.tsx b/packages/mui-material-next/src/Badge/Badge.tsx index d075695c072cc1..b3cecda44023ec 100644 --- a/packages/mui-material-next/src/Badge/Badge.tsx +++ b/packages/mui-material-next/src/Badge/Badge.tsx @@ -306,11 +306,6 @@ Badge.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'tertiary', 'warning']), PropTypes.string, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the badge is invisible. * @default false diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx index 65888394fa55aa..b6e7127181fa31 100644 --- a/packages/mui-material-next/src/Button/Button.tsx +++ b/packages/mui-material-next/src/Button/Button.tsx @@ -471,10 +471,6 @@ Button.propTypes /* remove-proptypes */ = { * @default false */ fullWidth: PropTypes.bool, - /** - * @ignore - */ - href: PropTypes.string, /** * The size of the component. * `small` is equivalent to the dense button styling. diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx index de46813447ad93..aca37184e98946 100644 --- a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx +++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx @@ -229,8 +229,7 @@ ButtonBase.propTypes /* remove-proptypes */ = { */ classes: PropTypes.object, /** - * The component used for the root node. - * Either a string to use a HTML element or a component. + * @ignore */ component: elementTypeAcceptingRef, /** diff --git a/packages/mui-material-next/src/InputBase/InputBase.tsx b/packages/mui-material-next/src/InputBase/InputBase.tsx index 3b162a71ebe9f6..5969cb5bac9c5d 100644 --- a/packages/mui-material-next/src/InputBase/InputBase.tsx +++ b/packages/mui-material-next/src/InputBase/InputBase.tsx @@ -536,16 +536,6 @@ InputBase.propTypes /* remove-proptypes */ = { * @ignore */ 'aria-describedby': PropTypes.string, - /** - * Defines a string value that labels the current element. - * @see aria-labelledby. - */ - 'aria-label': PropTypes.string, - /** - * Identifies the element (or elements) that labels the current element. - * @see aria-describedby. - */ - 'aria-labelledby': PropTypes.string, /** * This prop helps users to fill forms faster, especially on mobile devices. * The name can be confusing, as it's more like an autofill. @@ -556,18 +546,10 @@ InputBase.propTypes /* remove-proptypes */ = { * If `true`, the `input` element is focused during the first mount. */ autoFocus: PropTypes.bool, - /** - * @ignore - */ - children: PropTypes.node, /** * Override or extend the styles applied to the component. */ classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -648,10 +630,6 @@ InputBase.propTypes /* remove-proptypes */ = { * You can pull out the new value by accessing `event.target.value` (string). */ onChange: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * @ignore */ diff --git a/packages/mui-material-next/src/Slider/Slider.tsx b/packages/mui-material-next/src/Slider/Slider.tsx index fb223045d4f321..d227d0f84b59ba 100644 --- a/packages/mui-material-next/src/Slider/Slider.tsx +++ b/packages/mui-material-next/src/Slider/Slider.tsx @@ -16,287 +16,7 @@ import useTheme from '../styles/useTheme'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; import { SliderOwnerState, SliderTypeMap, SliderProps } from './Slider.types'; -import { MD3ColorSchemeTokens, MD3State } from '../styles'; -import useSliderElementsOverlap from './useSliderElementsOverlap'; - -function Identity(x: Type): Type { - return x; -} - -const SliderRoot = styled('span', { - name: 'MuiSlider', - slot: 'Root', - overridesResolver: (props, styles) => { - const { ownerState } = props; - - return [ - styles.root, - styles[`color${capitalize(ownerState.color || 'primary')}`], - ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], - ownerState.marked && styles.marked, - ownerState.orientation === 'vertical' && styles.vertical, - ownerState.track === 'inverted' && styles.trackInverted, - ownerState.track === false && styles.trackFalse, - ]; - }, -})<{ ownerState: SliderOwnerState }>(({ theme, ownerState }) => { - const { vars: tokens } = theme; - - return { - '--md-comp-slider-thumb-size': ownerState.size === 'small' ? '12px' : '20px', - borderRadius: tokens.sys.shape.corner.full, - boxSizing: 'content-box', - display: 'inline-block', - position: 'relative', - cursor: 'pointer', - touchAction: 'none', - color: tokens.sys.color[ownerState.color || 'primary'], - WebkitTapHighlightColor: 'transparent', - ...(ownerState.orientation === 'horizontal' && { - height: 4, - width: '100%', - // 40px touch target - padding: '18px 0', - ...(ownerState.size === 'small' && { - height: 2, - }), - ...(ownerState.marked && { - marginBottom: 20, - }), - }), - ...(ownerState.orientation === 'vertical' && { - height: '100%', - width: 4, - padding: '0 18px', - ...(ownerState.size === 'small' && { - width: 2, - }), - ...(ownerState.marked && { - marginRight: 44, - }), - }), - '@media print': { - colorAdjust: 'exact', - }, - [`&.${sliderClasses.disabled}`]: { - pointerEvents: 'none', - cursor: 'default', - color: tokens.sys.color.outline, - }, - [`&.${sliderClasses.dragging}`]: { - [`& .${sliderClasses.track}`]: { - transition: 'none', - }, - [`& .${sliderClasses.thumb}, .${sliderClasses.valueLabel}`]: { - transition: theme.transitions.create(['border'], { - duration: theme.transitions.duration.shortest, - }), - }, - }, - }; -}); - -SliderRoot.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderRoot }; - -const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', - overridesResolver: (props, styles) => styles.rail, -})<{ ownerState: SliderOwnerState }>(({ theme: { vars: tokens }, ownerState }) => ({ - display: 'block', - position: 'absolute', - borderRadius: 'inherit', - backgroundColor: tokens.sys.color.surfaceContainerHighest, - boxShadow: tokens.sys.elevation[0], - ...(ownerState.orientation === 'horizontal' && { - width: '100%', - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }), - ...(ownerState.orientation === 'vertical' && { - height: '100%', - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }), - ...(ownerState.track === 'inverted' && { - backgroundColor: ownerState.disabled ? tokens.sys.color.outline : 'currentColor', - }), -})); - -SliderRail.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderRail }; - -const SliderTrack = styled('span', { - name: 'MuiSlider', - slot: 'Track', - overridesResolver: (props, styles) => styles.track, -})<{ ownerState: SliderOwnerState }>(({ theme, ownerState }) => { - const { vars: tokens } = theme; - - return { - display: 'block', - position: 'absolute', - borderRadius: 'inherit', - backgroundColor: 'currentColor', - boxShadow: tokens.sys.elevation[0], - transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], { - duration: theme.transitions.duration.shortest, - }), - ...(ownerState.orientation === 'horizontal' && { - height: 'inherit', - top: '50%', - transform: 'translateY(-50%)', - }), - ...(ownerState.orientation === 'vertical' && { - width: 'inherit', - left: '50%', - transform: 'translateX(-50%)', - }), - ...(ownerState.track === false && { - display: 'none', - }), - ...(ownerState.track === 'inverted' && { - backgroundColor: tokens.sys.color.surfaceContainerHighest, - }), - }; -}); - -SliderTrack.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderTrack }; - -const SliderThumb = styled('span', { - name: 'MuiSlider', - slot: 'Thumb', - shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'isOverlapping', - overridesResolver: (props, styles) => { - const { ownerState } = props; - return [ - styles.thumb, - props.isOverlapping && styles.thumbOverlap, - styles[`thumbColor${capitalize(ownerState.color || 'primary')}`], - ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`], - ]; - }, -})<{ ownerState: SliderOwnerState }>(({ theme, ownerState }) => { - const { vars: tokens } = theme; - - function getBoxShadow(state: keyof MD3State) { - return `0px 0px 0px 10px rgba(${tokens.sys.color.primaryChannel} / ${tokens.sys.state[state].stateLayerOpacity})`; - } - - return { - zIndex: 1, - position: 'absolute', - height: 'var(--md-comp-slider-thumb-size)', - width: 'var(--md-comp-slider-thumb-size)', - boxSizing: 'border-box', - borderRadius: tokens.sys.shape.corner.full, - outline: 0, - backgroundColor: 'currentColor', - border: '1px solid currentColor', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: theme.transitions.create(['box-shadow', 'left', 'right', 'bottom', 'border'], { - duration: theme.transitions.duration.shortest, - }), - ...(ownerState.orientation === 'horizontal' && { - top: '50%', - transform: 'translate(-50%, -50%)', - }), - ...(ownerState.orientation === 'vertical' && { - left: '50%', - transform: 'translate(-50%, 50%)', - }), - '&::before': { - position: 'absolute', - content: '""', - borderRadius: 'inherit', - width: 'var(--md-comp-slider-thumb-size)', - height: 'var(--md-comp-slider-thumb-size)', - boxShadow: tokens.sys.elevation[1], - }, - '&::after': { - position: 'absolute', - content: '""', - borderRadius: '50%', - // 40px is the hit target - width: 40, - height: 40, - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - }, - '&:hover': { - boxShadow: getBoxShadow('hover'), - '@media (hover: none)': { - boxShadow: 'none', - }, - }, - [`&.${sliderClasses.focusVisible}`]: { - boxShadow: getBoxShadow('focus'), - }, - [`&.${sliderClasses.active}`]: { - zIndex: 2, - boxShadow: getBoxShadow('pressed'), - }, - [`&.${sliderClasses.thumbOverlap}`]: { - border: `1px solid ${tokens.ref.palette.common.white}`, - }, - [`&.${sliderClasses.disabled}`]: { - boxShadow: 'none', - '&:before': { - boxShadow: tokens.sys.elevation[0], - }, - }, - }; -}); - -SliderThumb.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderThumb }; +import { MD3ColorSchemeTokens } from '../styles'; const SliderValueLabel = styled('span', { name: 'MuiSlider', @@ -394,708 +114,3 @@ SliderValueLabel.propTypes /* remove-proptypes */ = { } as any; export { SliderValueLabel }; - -const SliderMark = styled('span', { - name: 'MuiSlider', - slot: 'Mark', - shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'markActive', - overridesResolver: (props, styles) => { - const { markActive } = props; - - return [styles.mark, markActive && styles.markActive]; - }, -})<{ ownerState: SliderOwnerState; markActive: boolean }>( - ({ theme: { vars: tokens }, ownerState, markActive }) => ({ - position: 'absolute', - width: 2, - height: 2, - borderRadius: tokens.sys.shape.corner.full, - backgroundColor: tokens.sys.color.onSurfaceVariant, - opacity: 0.38, - ...(ownerState.orientation === 'horizontal' && { - top: '50%', - transform: 'translate(-1px, -50%)', - }), - ...(ownerState.orientation === 'vertical' && { - left: '50%', - transform: 'translate(-50%, 1px)', - }), - ...(markActive && { - backgroundColor: - tokens.sys.color[ - `on${capitalize(ownerState.color || 'primary')}` as keyof MD3ColorSchemeTokens - ], - }), - }), -); - -SliderMark.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderMark }; - -const SliderMarkLabel = styled('span', { - name: 'MuiSlider', - slot: 'MarkLabel', - shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'markLabelActive', - overridesResolver: (props, styles) => styles.markLabel, -})<{ ownerState: SliderOwnerState; markLabelActive: boolean }>( - ({ theme, ownerState, markLabelActive }) => { - const { vars: tokens } = theme; - - return { - fontFamily: tokens.sys.typescale.label.medium.family, - lineHeight: `calc(${tokens.sys.typescale.label.medium.lineHeight} / ${tokens.sys.typescale.label.medium.size})`, - fontWeight: tokens.sys.typescale.label.medium.weight, - fontSize: theme.typography.pxToRem(theme.sys.typescale.label.medium.size), - letterSpacing: tokens.sys.typescale.label.medium.tracking, - color: tokens.sys.color.onSurfaceVariant, - position: 'absolute', - whiteSpace: 'nowrap', - ...(ownerState.orientation === 'horizontal' && { - top: 36, - transform: 'translateX(-50%)', - '@media (pointer: coarse)': { - top: 44, - }, - }), - ...(ownerState.orientation === 'vertical' && { - left: 36, - transform: 'translateY(50%)', - '@media (pointer: coarse)': { - left: 44, - }, - }), - ...(markLabelActive && { - color: tokens.sys.color.onSurface, - }), - }; - }, -); - -SliderMarkLabel.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, -} as any; - -export { SliderMarkLabel }; - -const useUtilityClasses = (ownerState: SliderOwnerState) => { - const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState; - - const slots = { - root: [ - 'root', - disabled && 'disabled', - dragging && 'dragging', - marked && 'marked', - orientation === 'vertical' && 'vertical', - track === 'inverted' && 'trackInverted', - track === false && 'trackFalse', - color && `color${capitalize(color)}`, - size && `size${capitalize(size)}`, - ], - rail: ['rail'], - track: ['track'], - mark: ['mark'], - markActive: ['markActive'], - markLabel: ['markLabel'], - markLabelActive: ['markLabelActive'], - valueLabel: ['valueLabel'], - valueLabelOpen: ['valueLabelOpen'], - valueLabelLabel: ['valueLabelLabel'], - valueLabelOverlap: ['valueLabelOverlap'], - thumb: [ - 'thumb', - disabled && 'disabled', - size && `thumbSize${capitalize(size)}`, - color && `thumbColor${capitalize(color)}`, - ], - thumbOverlap: ['thumbOverlap'], - active: ['active'], - disabled: ['disabled'], - focusVisible: ['focusVisible'], - }; - - return composeClasses(slots, getSliderUtilityClass, classes); -}; - -const Slider = React.forwardRef(function Slider< - BaseComponentType extends React.ElementType = SliderTypeMap['defaultComponent'], ->(inProps: SliderProps, ref: React.ForwardedRef) { - const props = useThemeProps({ - props: inProps, - name: 'MuiSlider', - }); - - const theme = useTheme(); - const isRtl = theme.direction === 'rtl'; - - const { - 'aria-label': ariaLabel, - 'aria-valuetext': ariaValuetext, - 'aria-labelledby': ariaLabelledby, - component = 'span', - color = 'primary', - classes: classesProp, - className, - disableSwap = false, - disabled = false, - getAriaLabel, - getAriaValueText, - marks: marksProp = false, - max = 100, - min = 0, - name, - onChange, - onChangeCommitted, - orientation = 'horizontal', - size = 'medium', - step = 1, - scale = Identity, - slotProps = {}, - slots = {}, - tabIndex, - track = 'normal', - value: valueProp, - valueLabelDisplay = 'off', - valueLabelFormat = Identity, - ...other - } = props; - - const propsWithDefaultValues = { - ...props, - isRtl, - max, - min, - classes: classesProp, - disabled, - disableSwap, - orientation, - marks: marksProp, - color, - size, - step, - scale, - track, - valueLabelDisplay, - valueLabelFormat, - } as Partial; - - const { - axisProps, - getRootProps, - getHiddenInputProps, - getThumbProps, - open, - active, - axis, - focusedThumbIndex, - range, - dragging, - marks, - values, - trackOffset, - trackLeap, - } = useSlider({ ...propsWithDefaultValues, rootRef: ref }); - - const ownerState: SliderOwnerState = { - ...propsWithDefaultValues, - marked: marks.length > 0 && marks.some((mark) => mark.label), - dragging, - focusedThumbIndex, - }; - - const classes = useUtilityClasses(ownerState); - - const overlapApi = useSliderElementsOverlap(axis); - const lastActiveThumbIndexRef = React.useRef(-1); - if (focusedThumbIndex !== -1) { - lastActiveThumbIndexRef.current = focusedThumbIndex; - } else if (active !== -1) { - lastActiveThumbIndexRef.current = active; - } - - const RootSlot = slots.root ?? SliderRoot; - const RailSlot = slots.rail ?? SliderRail; - const TrackSlot = slots.track ?? SliderTrack; - const ThumbSlot = slots.thumb ?? SliderThumb; - const ValueLabelSlot = slots.valueLabel ?? SliderValueLabel; - const MarkSlot = slots.mark ?? SliderMark; - const MarkLabelSlot = slots.markLabel ?? SliderMarkLabel; - const InputSlot = slots.input ?? 'input'; - - const rootProps = useSlotProps({ - elementType: RootSlot, - getSlotProps: getRootProps, - externalSlotProps: slotProps.root, - externalForwardedProps: other, - additionalProps: { - ...(shouldSpreadAdditionalProps(RootSlot) && { - as: component, - }), - }, - ownerState, - className: [classes.root, className], - }); - - const railProps = useSlotProps({ - elementType: RailSlot, - externalSlotProps: slotProps.rail, - ownerState, - className: classes.rail, - }); - - const trackProps = useSlotProps({ - elementType: TrackSlot, - externalSlotProps: slotProps.track, - additionalProps: { - style: { - ...axisProps[axis].offset(trackOffset), - ...axisProps[axis].leap(trackLeap), - }, - }, - ownerState, - className: classes.track, - }); - - const thumbProps = useSlotProps({ - elementType: ThumbSlot, - getSlotProps: () => - getThumbProps({ - onTransitionEnd: overlapApi.onThumbMoved, - onPointerMove: overlapApi.onThumbMoved, - }), - externalSlotProps: slotProps.thumb, - ownerState, - className: classes.thumb, - }); - - const valueLabelProps = useSlotProps({ - elementType: ValueLabelSlot, - externalSlotProps: slotProps.valueLabel, - ownerState, - className: classes.valueLabel, - }); - - const markProps = useSlotProps({ - elementType: MarkSlot, - externalSlotProps: slotProps.mark, - ownerState, - className: classes.mark, - }); - - const markLabelProps = useSlotProps({ - elementType: MarkLabelSlot, - externalSlotProps: slotProps.markLabel, - ownerState, - className: classes.markLabel, - }); - - const inputSliderProps = useSlotProps({ - elementType: InputSlot, - getSlotProps: getHiddenInputProps, - externalSlotProps: slotProps.input, - ownerState, - }); - - return ( - - - - {marks - .filter((mark) => mark.value >= min && mark.value <= max) - .map((mark, index) => { - const percent = valueToPercent(mark.value, min, max); - const style = axisProps[axis].offset(percent); - - let markActive; - if (track === false) { - markActive = values.indexOf(mark.value) !== -1; - } else { - markActive = - (track === 'normal' && - (range - ? mark.value >= values[0] && mark.value <= values[values.length - 1] - : mark.value <= values[0])) || - (track === 'inverted' && - (range - ? mark.value <= values[0] || mark.value >= values[values.length - 1] - : mark.value >= values[0])); - } - - return ( - - - {mark.label != null ? ( - - {mark.label} - - ) : null} - - ); - })} - {values.map((value, index) => { - const percent = valueToPercent(value, min, max); - const style = axisProps[axis].offset(percent); - - const isThumbOverlapping = overlapApi.getIsThumbOverlapping( - index, - lastActiveThumbIndexRef.current, - ); - - const isValueLabelOverlapping = - valueLabelDisplay === 'on' && - overlapApi.getIsValueLabelOverlapping(index, lastActiveThumbIndexRef.current); - - return ( - { - thumbProps.ref?.(thumbRef); - overlapApi.setThumbRef(index, thumbRef); - }} - {...(!isHostComponent(ThumbSlot) && { isOverlapping: isThumbOverlapping })} - > - - {valueLabelDisplay !== 'off' ? ( - { - valueLabelProps.ref?.(valueLabelRef); - overlapApi.setValueLabelRef(index, valueLabelRef); - }} - > - - {typeof valueLabelFormat === 'function' - ? valueLabelFormat(scale(value), index) - : valueLabelFormat} - - - ) : null} - - ); - })} - - ); -}); - -Slider.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * The label of the slider. - */ - 'aria-label': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-label'] != null) { - return new Error( - 'MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.', - ); - } - - return null; - }), - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby': PropTypes.string, - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-valuetext'] != null) { - return new Error( - 'MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.', - ); - } - - return null; - }), - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['primary', 'secondary']), - PropTypes.string, - ]), - /** - * The default value. Use when the component is not controlled. - */ - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * If `true`, the component is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. - * @default false - */ - disableSwap: PropTypes.bool, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * This is important for screen reader users. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel: PropTypes.func, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * This is important for screen reader users. - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText: PropTypes.func, - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max: PropTypes.number, - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min: PropTypes.number, - /** - * Name attribute of the hidden `input` element. - */ - name: PropTypes.string, - /** - * Callback function that is fired when the slider's value changed. - * - * @param {Event} event The event source of the callback. - * You can pull out the new value by accessing `event.target.value` (any). - * **Warning**: This is a generic event, not a change event. - * @param {number | number[]} value The new value. - * @param {number} activeThumb Index of the currently moved thumb. - */ - onChange: PropTypes.func, - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event, not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted: PropTypes.func, - /** - * The component orientation. - * @default 'horizontal' - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * A transformation function, to change the scale of the slider. - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - scale: PropTypes.func, - /** - * The size of the slider. - * @default 'medium' - */ - size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['small', 'medium']), - PropTypes.string, - ]), - /** - * The props used for each slot inside the Slider. - * @default {} - */ - slotProps: PropTypes.shape({ - input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), - /** - * The components used for each slot inside the Slider. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - input: PropTypes.elementType, - mark: PropTypes.elementType, - markLabel: PropTypes.elementType, - rail: PropTypes.elementType, - root: PropTypes.elementType, - thumb: PropTypes.elementType, - track: PropTypes.elementType, - valueLabel: PropTypes.elementType, - }), - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step: PropTypes.number, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - /** - * Tab index attribute of the hidden `input` element. - */ - tabIndex: PropTypes.number, - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track: PropTypes.oneOf(['inverted', 'normal', false]), - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), -} as any; - -export default Slider; diff --git a/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts b/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts index 20cb39d63058d9..33be76a163c5ad 100644 --- a/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts +++ b/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts @@ -388,13 +388,22 @@ function createBabelPlugin({ ) { getFromProp(nodeInit.params[0]); } else if (babelTypes.isCallExpression(nodeInit)) { - // x = react.memo(props =>
) - const arg = nodeInit.arguments[0]; - if (babelTypes.isArrowFunctionExpression(arg) || babelTypes.isFunctionExpression(arg)) { - getFromProp(arg.params[0]); - } else if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) { + if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) { // Any components that are created by a factory function, e.g. System Box | Container | Grid. getFromProp(node); + } else { + // x = react.memo(props =>
) / react.forwardRef(props =>
) + let resolvedNode: babel.Node = nodeInit; + while (babelTypes.isCallExpression(resolvedNode)) { + resolvedNode = resolvedNode.arguments[0]; + } + + if ( + babelTypes.isArrowFunctionExpression(resolvedNode) || + babelTypes.isFunctionExpression(resolvedNode) + ) { + getFromProp(resolvedNode.params[0]); + } } } },