@mui/material 5.2.5 → 5.3.0

package/node/Autocomplete/Autocomplete.js

@@ -389,7 +389,7 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea;
+  var _componentsProps$clea, _componentsProps$pape;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -607,10 +607,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
-        as: PaperComponent,
-        className: classes.paper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
+        as: PaperComponent
+      }, componentsProps.paper, {
+        className: (0, _clsx.default)(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -641,7 +642,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -742,7 +743,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    clearIndicator: _propTypes.default.object,
+    paper: _propTypes.default.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/node/Backdrop/Backdrop.js

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

package/node/Badge/Badge.js

@@ -27,17 +27,20 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
+var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
+
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _base.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
+const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _base.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
 exports.badgeClasses = badgeClasses;
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -45,10 +48,12 @@ const RADIUS_DOT = 4;
 const extendUtilityClasses = ownerState => {
   const {
     color,
+    anchorOrigin,
+    overlap,
     classes = {}
   } = ownerState;
   return (0, _extends2.default)({}, classes, {
-    badge: (0, _clsx.default)(classes.badge, color !== 'default' && [(0, _BadgeUnstyled.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]])
+    badge: (0, _clsx.default)(classes.badge, (0, _BadgeUnstyled.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _BadgeUnstyled.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _BadgeUnstyled.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]])
   });
 };
 
@@ -176,11 +181,6 @@ const BadgeBadge = (0, _styled.default)('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
-
-const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !(0, _base.isHostComponent)(Slot);
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -189,9 +189,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     name: 'MuiBadge'
   });
   const {
+    anchorOrigin: anchorOriginProp = {
+      vertical: 'top',
+      horizontal: 'right'
+    },
     component = 'span',
     components = {},
     componentsProps = {},
+    overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
@@ -200,7 +205,9 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const prevProps = (0, _utils.usePreviousProps)({
-    color: colorProp
+    anchorOrigin: anchorOriginProp,
+    color: colorProp,
+    overlap: overlapProp
   });
   let invisible = invisibleProp;
 
@@ -209,14 +216,19 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   }
 
   const {
-    color = colorProp
+    color = colorProp,
+    overlap = overlapProp,
+    anchorOrigin = anchorOriginProp
   } = invisible ? prevProps : props;
   const ownerState = (0, _extends2.default)({}, props, {
+    anchorOrigin,
     invisible,
-    color
+    color,
+    overlap
   });
   const classes = extendUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
+    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
     showZero: showZero,
@@ -227,15 +239,17 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+      root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
         as: component,
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
-          color
+          color,
+          overlap
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
+      badge: (0, _extends2.default)({}, componentsProps.badge, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
-          color
+          color,
+          overlap
         })
       })
     },
@@ -306,7 +320,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    badge: _propTypes.default.object,
+    root: _propTypes.default.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/node/FilledInput/FilledInput.js

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

package/node/FormControlLabel/FormControlLabel.js

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

package/node/Input/Input.js

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

package/node/InputBase/InputBase.js

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

package/node/InputLabel/InputLabel.js

@@ -107,6 +107,8 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 }, ownerState.size === 'small' && {
   transform: 'translate(12px, 13px) scale(1)'
 }, ownerState.shrink && (0, _extends2.default)({
+  userSelect: 'none',
+  pointerEvents: 'auto',
   transform: 'translate(12px, 7px) scale(0.75)',
   maxWidth: 'calc(133% - 24px)'
 }, ownerState.size === 'small' && {
@@ -120,6 +122,8 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 }, 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/node/ListItem/ListItem.js

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

package/node/Modal/Modal.js

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

package/node/Select/Select.js

@@ -43,7 +43,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _Input, _FilledInput;
 
-const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,6 +66,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     children,
     classes: classesProp = {},
     className,
+    defaultOpen = false,
     displayEmpty = false,
     IconComponent = _ArrowDropDown.default,
     id,
@@ -119,6 +120,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id
     } : {
       autoWidth,
+      defaultOpen,
       displayEmpty,
       labelId,
       MenuProps,
@@ -173,6 +175,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: _propTypes.default.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.default.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/Select/SelectInput.js

@@ -43,7 +43,7 @@ var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["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"];
+const _excluded = ["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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -143,6 +143,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     autoWidth,
     children,
     className,
+    defaultOpen,
     defaultValue,
     disabled,
     displayEmpty,
@@ -171,6 +172,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     default: defaultValue,
     name: 'Select'
   });
+  const [openState, setOpenState] = (0, _useControlled.default)({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
   const [displayNode, setDisplayNode] = React.useState(null);
@@ -178,7 +184,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const [openState, setOpenState] = React.useState(false);
   const handleRef = (0, _useForkRef.default)(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -193,7 +198,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     },
     node: inputRef.current,
     value
-  }), [value]);
+  }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(() => {
+    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(() => {
     if (autoFocus) {
       displayRef.current.focus();
@@ -329,7 +344,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
 
-  const open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  const open = displayNode !== null && openState;
 
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
@@ -586,6 +601,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: _propTypes.default.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.default.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/Slider/Slider.js

@@ -31,11 +31,13 @@ var _styled = _interopRequireWildcard(require("../styles/styled"));
 
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 
+var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
+
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["components", "componentsProps", "color", "size"];
+const _excluded = ["component", "components", "componentsProps", "color", "size"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -110,6 +112,19 @@ const SliderRoot = (0, _styled.default)('span', {
   }
 }));
 exports.SliderRoot = SliderRoot;
+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.default.node
+} : void 0;
 const SliderRail = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Rail',
@@ -136,6 +151,19 @@ const SliderRail = (0, _styled.default)('span', {
   opacity: 1
 }));
 exports.SliderRail = SliderRail;
+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.default.node
+} : void 0;
 const SliderTrack = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Track',
@@ -173,6 +201,19 @@ const SliderTrack = (0, _styled.default)('span', {
   });
 });
 exports.SliderTrack = SliderTrack;
+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.default.node
+} : void 0;
 const SliderThumb = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
@@ -246,6 +287,19 @@ const SliderThumb = (0, _styled.default)('span', {
   }
 }));
 exports.SliderThumb = SliderThumb;
+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.default.node
+} : void 0;
 const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUnstyled, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
@@ -291,6 +345,19 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   }
 }));
 exports.SliderValueLabel = SliderValueLabel;
+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.default.node
+} : void 0;
 const SliderMark = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -317,6 +384,19 @@ const SliderMark = (0, _styled.default)('span', {
   opacity: 0.8
 }));
 exports.SliderMark = SliderMark;
+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.default.node
+} : void 0;
 const SliderMarkLabel = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
@@ -346,7 +426,9 @@ const SliderMarkLabel = (0, _styled.default)('span', {
   color: theme.palette.text.primary
 }));
 exports.SliderMarkLabel = SliderMarkLabel;
-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"     |
@@ -355,40 +437,8 @@ SliderRoot.propTypes = {
   /**
    * @ignore
    */
-  children: _propTypes.default.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: _propTypes.default.shape({
-    'aria-label': _propTypes.default.string,
-    'aria-labelledby': _propTypes.default.string,
-    'aria-valuetext': _propTypes.default.string,
-    classes: _propTypes.default.object,
-    color: _propTypes.default.oneOf(['primary', 'secondary']),
-    defaultValue: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
-    disabled: _propTypes.default.bool,
-    getAriaLabel: _propTypes.default.func,
-    getAriaValueText: _propTypes.default.func,
-    isRtl: _propTypes.default.bool,
-    marks: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
-      label: _propTypes.default.node,
-      value: _propTypes.default.number.isRequired
-    })), _propTypes.default.bool]),
-    max: _propTypes.default.number,
-    min: _propTypes.default.number,
-    name: _propTypes.default.string,
-    onChange: _propTypes.default.func,
-    onChangeCommitted: _propTypes.default.func,
-    orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-    scale: _propTypes.default.func,
-    step: _propTypes.default.number,
-    track: _propTypes.default.oneOf(['inverted', 'normal', false]),
-    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
-    valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on']),
-    valueLabelFormat: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
-  })
-};
+  children: _propTypes.default.node
+} : void 0;
 
 const extendUtilityClasses = ownerState => {
   const {
@@ -402,10 +452,6 @@ const extendUtilityClasses = ownerState => {
   });
 };
 
-const shouldSpreadOwnerState = Component => {
-  return !Component || !(0, _base.isHostComponent)(Component);
-};
-
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
@@ -416,6 +462,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   const {
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
     components = {},
     componentsProps = {},
     color = 'primary',
@@ -439,25 +487,26 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       MarkLabel: SliderMarkLabel
     }, components),
     componentsProps: (0, _extends2.default)({}, componentsProps, {
-      root: (0, _extends2.default)({}, componentsProps.root, shouldSpreadOwnerState(components.Root) && {
+      root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
+        as: component,
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color,
           size
         })
       }),
-      thumb: (0, _extends2.default)({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+      thumb: (0, _extends2.default)({}, componentsProps.thumb, (0, _shouldSpreadAdditionalProps.default)(components.Thumb) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
           color,
           size
         })
       }),
-      track: (0, _extends2.default)({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+      track: (0, _extends2.default)({}, componentsProps.track, (0, _shouldSpreadAdditionalProps.default)(components.Track) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
           color,
           size
         })
       }),
-      valueLabel: (0, _extends2.default)({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+      valueLabel: (0, _extends2.default)({}, componentsProps.valueLabel, (0, _shouldSpreadAdditionalProps.default)(components.ValueLabel) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
           color,
           size
@@ -531,6 +580,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   components: _propTypes.default.shape({
+    Input: _propTypes.default.elementType,
     Mark: _propTypes.default.elementType,
     MarkLabel: _propTypes.default.elementType,
     Rail: _propTypes.default.elementType,
@@ -544,7 +594,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The props used for each slot inside the Slider.
    * @default {}
    */
-  componentsProps: _propTypes.default.object,
+  componentsProps: _propTypes.default.shape({
+    input: _propTypes.default.object,
+    mark: _propTypes.default.object,
+    markLabel: _propTypes.default.object,
+    rail: _propTypes.default.object,
+    root: _propTypes.default.object,
+    thumb: _propTypes.default.object,
+    track: _propTypes.default.object,
+    valueLabel: _propTypes.default.shape({
+      className: _propTypes.default.string,
+      components: _propTypes.default.shape({
+        Root: _propTypes.default.elementType
+      }),
+      style: _propTypes.default.object,
+      value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
+      valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
+    })
+  }),
 
   /**
    * The default value. Use when the component is not controlled.