@mui/material 5.2.6 → 5.3.1

package/legacy/Backdrop/Backdrop.js

@@ -123,7 +123,9 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    * The props used for each slot inside the Backdrop.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the backdrop is invisible.

package/legacy/Badge/Badge.js

@@ -5,10 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
@@ -144,11 +145,6 @@ var BadgeBadge = styled('span', {
     })
   });
 });
-
-var shouldSpreadAdditionalProps = function shouldSpreadAdditionalProps(Slot) {
-  return !Slot || !isHostComponent(Slot);
-};
-
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -300,7 +296,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    badge: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/legacy/FilledInput/FilledInput.js

@@ -255,7 +255,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/FormControlLabel/FormControlLabel.js

@@ -156,7 +156,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/legacy/Input/Input.js

@@ -190,7 +190,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputBase/InputBase.js

@@ -561,7 +561,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputLabel/InputLabel.js

@@ -78,6 +78,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(12px, 13px) scale(1)'
   }, ownerState.shrink && _extends({
+    userSelect: 'none',
+    pointerEvents: 'auto',
     transform: 'translate(12px, 7px) scale(0.75)',
     maxWidth: 'calc(133% - 24px)'
   }, ownerState.size === 'small' && {
@@ -91,6 +93,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(14px, 9px) scale(1)'
   }, ownerState.shrink && {
+    userSelect: 'none',
+    pointerEvents: 'auto',
     maxWidth: 'calc(133% - 24px)',
     transform: 'translate(14px, -9px) scale(0.75)'
   }));

package/legacy/ListItem/ListItem.js

@@ -348,7 +348,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.

package/legacy/Modal/Modal.js

@@ -194,7 +194,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * The props used for each slot inside the Modal.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * An HTML element or function that returns one.

package/legacy/Select/Select.js

@@ -36,6 +36,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       _props$classes = props.classes,
       classesProp = _props$classes === void 0 ? {} : _props$classes,
       className = props.className,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$displayEmpty = props.displayEmpty,
       displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
       _props$IconComponent = props.IconComponent,
@@ -57,7 +59,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps = props.SelectDisplayProps,
       _props$variant = props.variant,
       variantProps = _props$variant === void 0 ? 'outlined' : _props$variant,
-      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
+      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
 
   var inputComponent = native ? NativeSelectInput : SelectInput;
   var muiFormControl = useFormControl();
@@ -96,6 +98,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id: id
     } : {
       autoWidth: autoWidth,
+      defaultOpen: defaultOpen,
       displayEmpty: displayEmpty,
       labelId: labelId,
       MenuProps: MenuProps,
@@ -150,6 +153,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/Select/SelectInput.js

@@ -103,6 +103,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       autoWidth = props.autoWidth,
       children = props.children,
       className = props.className,
+      defaultOpen = props.defaultOpen,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       displayEmpty = props.displayEmpty,
@@ -128,7 +129,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       valueProp = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
 
   var _useControlled = useControlled({
     controlled: valueProp,
@@ -139,6 +140,15 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       value = _useControlled2[0],
       setValueState = _useControlled2[1];
 
+  var _useControlled3 = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  }),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      openState = _useControlled4[0],
+      setOpenState = _useControlled4[1];
+
   var inputRef = React.useRef(null);
   var displayRef = React.useRef(null);
 
@@ -153,10 +163,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       menuMinWidthState = _React$useState2[0],
       setMenuMinWidthState = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      openState = _React$useState3[0],
-      setOpenState = _React$useState3[1];
-
   var handleRef = useForkRef(ref, inputRefProp);
   var handleDisplayRef = React.useCallback(function (node) {
     displayRef.current = node;
@@ -173,7 +179,17 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       node: inputRef.current,
       value: value
     };
-  }, [value]);
+  }, [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(function () {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(function () {
     if (autoFocus) {
       displayRef.current.focus();
@@ -313,7 +329,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   };
 
-  var open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  var open = displayNode !== null && openState;
 
   var handleBlur = function handleBlur(event) {
     // if open event.stopImmediatePropagation
@@ -580,6 +596,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/Slider/Slider.js

@@ -6,16 +6,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
-export var SliderRoot = styled('span', {
+var SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -82,7 +83,21 @@ export var SliderRoot = styled('span', {
     transition: 'none'
   })), _extends2));
 });
-export var SliderRail = styled('span', {
+process.env.NODE_ENV !== "production" ? 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
+} : void 0;
+export { SliderRoot };
+var SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
   overridesResolver: function overridesResolver(props, styles) {
@@ -110,7 +125,21 @@ export var SliderRail = styled('span', {
     opacity: 1
   });
 });
-export var SliderTrack = styled('span', {
+process.env.NODE_ENV !== "production" ? 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
+} : void 0;
+export { SliderRail };
+var SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: function overridesResolver(props, styles) {
@@ -147,7 +176,21 @@ export var SliderTrack = styled('span', {
     borderColor: color
   });
 });
-export var SliderThumb = styled('span', {
+process.env.NODE_ENV !== "production" ? 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
+} : void 0;
+export { SliderTrack };
+var SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: function overridesResolver(props, styles) {
@@ -217,7 +260,21 @@ export var SliderThumb = styled('span', {
     }
   }), _extends3));
 });
-export var SliderValueLabel = styled(SliderValueLabelUnstyled, {
+process.env.NODE_ENV !== "production" ? 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
+} : void 0;
+export { SliderThumb };
+var SliderValueLabel = styled(SliderValueLabelUnstyled, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -262,7 +319,21 @@ export var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     }
   });
 });
-export var SliderMark = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderValueLabel.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
+} : void 0;
+export { SliderValueLabel };
+var SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -292,7 +363,21 @@ export var SliderMark = styled('span', {
     opacity: 0.8
   });
 });
-export var SliderMarkLabel = styled('span', {
+process.env.NODE_ENV !== "production" ? 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
+} : void 0;
+export { SliderMark };
+var SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -325,7 +410,9 @@ export var SliderMarkLabel = styled('span', {
     color: theme.palette.text.primary
   });
 });
-SliderRoot.propTypes = {
+process.env.NODE_ENV !== "production" ? 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"     |
@@ -334,40 +421,9 @@ SliderRoot.propTypes = {
   /**
    * @ignore
    */
-  children: PropTypes.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    'aria-labelledby': PropTypes.string,
-    'aria-valuetext': PropTypes.string,
-    classes: PropTypes.object,
-    color: PropTypes.oneOf(['primary', 'secondary']),
-    defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    disabled: PropTypes.bool,
-    getAriaLabel: PropTypes.func,
-    getAriaValueText: PropTypes.func,
-    isRtl: PropTypes.bool,
-    marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.number.isRequired
-    })), PropTypes.bool]),
-    max: PropTypes.number,
-    min: PropTypes.number,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    onChangeCommitted: PropTypes.func,
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    scale: PropTypes.func,
-    step: PropTypes.number,
-    track: PropTypes.oneOf(['inverted', 'normal', false]),
-    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-    valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  })
-};
+  children: PropTypes.node
+} : void 0;
+export { SliderMarkLabel };
 
 var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   var color = ownerState.color,
@@ -380,10 +436,6 @@ var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   });
 };
 
-var shouldSpreadOwnerState = function shouldSpreadOwnerState(Component) {
-  return !Component || !isHostComponent(Component);
-};
-
 var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
@@ -394,7 +446,9 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
 
-  var _props$components = props.components,
+  var _props$component = props.component,
+      component = _props$component === void 0 ? 'span' : _props$component,
+      _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
@@ -402,7 +456,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       color = _props$color === void 0 ? 'primary' : _props$color,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["components", "componentsProps", "color", "size"]);
+      other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "size"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -422,25 +476,26 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       MarkLabel: SliderMarkLabel
     }, components),
     componentsProps: _extends({}, componentsProps, {
-      root: _extends({}, componentsProps.root, shouldSpreadOwnerState(components.Root) && {
+      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+        as: component,
         ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color: color,
           size: size
         })
       }),
-      thumb: _extends({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+      thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps(components.Thumb) && {
         ownerState: _extends({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
           color: color,
           size: size
         })
       }),
-      track: _extends({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+      track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps(components.Track) && {
         ownerState: _extends({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
           color: color,
           size: size
         })
       }),
-      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps(components.ValueLabel) && {
         ownerState: _extends({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
           color: color,
           size: size
@@ -514,6 +569,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   components: PropTypes.shape({
+    Input: PropTypes.elementType,
     Mark: PropTypes.elementType,
     MarkLabel: PropTypes.elementType,
     Rail: PropTypes.elementType,
@@ -527,7 +583,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The props used for each slot inside the Slider.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    mark: PropTypes.object,
+    markLabel: PropTypes.object,
+    rail: PropTypes.object,
+    root: PropTypes.object,
+    thumb: PropTypes.object,
+    track: PropTypes.object,
+    valueLabel: PropTypes.shape({
+      className: PropTypes.string,
+      components: PropTypes.shape({
+        Root: PropTypes.elementType
+      }),
+      style: PropTypes.object,
+      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
+    })
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/StepLabel/StepLabel.js

@@ -209,7 +209,9 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    label: PropTypes.object
+  }),
 
   /**
    * If `true`, the step is marked as failed.