@mui/material 5.10.11 → 5.10.13

package/legacy/Backdrop/Backdrop.js

@@ -44,7 +44,7 @@ var BackdropRoot = styled('div', {
   });
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _components$Root, _componentsProps$root;
+  var _slotProps$root, _ref2, _slots$root;
 
   var props = useThemeProps({
     props: inProps,
@@ -62,10 +62,14 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       _props$invisible = props.invisible,
       invisible = _props$invisible === void 0 ? false : _props$invisible,
       open = props.open,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       transitionDuration = props.transitionDuration,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"]);
 
   var ownerState = _extends({}, props, {
     component: component,
@@ -73,19 +77,21 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
+  var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, {
-      "aria-hidden": true,
-      as: (_components$Root = components.Root) != null ? _components$Root : component,
-      className: clsx(classes.root, className),
-      ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
+    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+      "aria-hidden": true
+    }, rootSlotProps, {
+      as: (_ref2 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : component,
+      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
       classes: classes,
       ref: ref,
       children: children
-    })
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes
@@ -118,8 +124,11 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Backdrop.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -127,7 +136,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Backdrop.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -146,6 +160,29 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   open: PropTypes.bool.isRequired,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Badge/Badge.js

@@ -318,8 +318,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -328,7 +331,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Badge.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/legacy/ButtonBase/TouchRipple.js

@@ -125,7 +125,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
   var start = React.useCallback(function () {
     var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var cb = arguments.length > 2 ? arguments[2] : undefined;
+    var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
     var _options$pulsate = options.pulsate,
         pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
         _options$center = options.center,

package/legacy/Chip/Chip.js

@@ -22,6 +22,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       disabled = ownerState.disabled,
       size = ownerState.size,
       color = ownerState.color,
+      iconColor = ownerState.iconColor,
       onDelete = ownerState.onDelete,
       clickable = ownerState.clickable,
       variant = ownerState.variant;
@@ -29,7 +30,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root', variant, disabled && 'disabled', "size".concat(capitalize(size)), "color".concat(capitalize(color)), clickable && 'clickable', clickable && "clickableColor".concat(capitalize(color)), onDelete && 'deletable', onDelete && "deletableColor".concat(capitalize(color)), "".concat(variant).concat(capitalize(color))],
     label: ['label', "label".concat(capitalize(size))],
     avatar: ['avatar', "avatar".concat(capitalize(size)), "avatarColor".concat(capitalize(color))],
-    icon: ['icon', "icon".concat(capitalize(size)), "iconColor".concat(capitalize(color))],
+    icon: ['icon', "icon".concat(capitalize(size)), "iconColor".concat(capitalize(iconColor))],
     deleteIcon: ['deleteIcon', "deleteIcon".concat(capitalize(size)), "deleteIconColor".concat(capitalize(color)), "deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]
   };
   return composeClasses(slots, getChipUtilityClass, classes);
@@ -41,11 +42,12 @@ var ChipRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     var color = ownerState.color,
+        iconColor = ownerState.iconColor,
         clickable = ownerState.clickable,
         onDelete = ownerState.onDelete,
         size = ownerState.size,
         variant = ownerState.variant;
-    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
+    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(iconColor))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
   }
 })(function (_ref11) {
   var _extends2;
@@ -101,16 +103,17 @@ var ChipRoot = styled('div', {
     height: 18,
     fontSize: theme.typography.pxToRem(10)
   }), _defineProperty(_extends2, "& .".concat(chipClasses.icon), _extends({
-    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
     marginLeft: 5,
     marginRight: -6
   }, ownerState.size === 'small' && {
     fontSize: 18,
     marginLeft: 4,
     marginRight: -4
+  }, ownerState.iconColor === ownerState.color && _extends({
+    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
   }, ownerState.color !== 'default' && {
     color: 'inherit'
-  })), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
+  }))), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
     WebkitTapHighlightColor: 'transparent',
     color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : deleteIconColor,
     fontSize: 22,
@@ -300,6 +303,7 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     disabled: disabled,
     size: size,
     color: color,
+    iconColor: /*#__PURE__*/React.isValidElement(iconProp) ? iconProp.props.color || color : color,
     onDelete: !!onDelete,
     clickable: clickable,
     variant: variant

package/legacy/FilledInput/FilledInput.js

@@ -172,6 +172,8 @@ var FilledInputInput = styled(InputBaseInput, {
   });
 });
 var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
+  var _ref5, _slots$root, _ref6, _slots$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFilledInput'
@@ -188,9 +190,12 @@ var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, re
       inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
+      slotProps = props.slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "type"]);
+      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"]);
 
   var ownerState = _extends({}, props, {
     fullWidth: fullWidth,
@@ -208,12 +213,14 @@ var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, re
       ownerState: ownerState
     }
   };
-  var componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  var componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  var RootSlot = (_ref5 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref5 : FilledInputRoot;
+  var InputSlot = (_ref6 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref6 : FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: FilledInputRoot,
-      Input: FilledInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     componentsProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
@@ -260,8 +267,11 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -270,7 +280,12 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -400,6 +415,31 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/FormControl/FormControl.js

@@ -196,35 +196,35 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, re
     };
   }
 
-  var onFilled = React.useCallback(function () {
-    setFilled(true);
-  }, []);
-  var onEmpty = React.useCallback(function () {
-    setFilled(false);
-  }, []);
-  var childContext = {
-    adornedStart: adornedStart,
-    setAdornedStart: setAdornedStart,
-    color: color,
-    disabled: disabled,
-    error: error,
-    filled: filled,
-    focused: focused,
-    fullWidth: fullWidth,
-    hiddenLabel: hiddenLabel,
-    size: size,
-    onBlur: function onBlur() {
-      setFocused(false);
-    },
-    onEmpty: onEmpty,
-    onFilled: onFilled,
-    onFocus: function onFocus() {
-      setFocused(true);
-    },
-    registerEffect: registerEffect,
-    required: required,
-    variant: variant
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      adornedStart: adornedStart,
+      setAdornedStart: setAdornedStart,
+      color: color,
+      disabled: disabled,
+      error: error,
+      filled: filled,
+      focused: focused,
+      fullWidth: fullWidth,
+      hiddenLabel: hiddenLabel,
+      size: size,
+      onBlur: function onBlur() {
+        setFocused(false);
+      },
+      onEmpty: function onEmpty() {
+        setFilled(false);
+      },
+      onFilled: function onFilled() {
+        setFilled(true);
+      },
+      onFocus: function onFocus() {
+        setFocused(true);
+      },
+      registerEffect: registerEffect,
+      required: required,
+      variant: variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsx(FormControlRoot, _extends({

package/legacy/FormControlLabel/FormControlLabel.js

@@ -70,6 +70,8 @@ export var FormControlLabelRoot = styled('label', {
  */
 
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
+  var _slotProps$typography;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -88,8 +90,10 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
       name = props.name,
       onChange = props.onChange,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       value = props.value,
-      other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
+      other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"]);
 
   var muiFormControl = useFormControl();
   var disabled = disabledProp;
@@ -123,13 +127,14 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
   });
 
   var classes = useUtilityClasses(ownerState);
+  var typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   var label = labelProp;
 
   if (label != null && label.type !== Typography && !disableTypography) {
     label = /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
+      component: "span"
+    }, typographySlotProps, {
+      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
       children: label
     }));
   }
@@ -217,6 +222,14 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    */
   onChange: PropTypes.func,
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Input/Input.js

@@ -106,6 +106,8 @@ var InputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })({});
 var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
+  var _ref3, _slots$root, _ref4, _slots$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
@@ -121,9 +123,12 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
+      slotProps = props.slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"]);
+      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"]);
 
   var classes = useUtilityClasses(props);
   var ownerState = {
@@ -134,13 +139,15 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState: ownerState
     }
   };
-  var componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  var componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  var RootSlot = (_ref3 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref3 : InputRoot;
+  var InputSlot = (_ref4 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref4 : InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: InputRoot,
-      Input: InputInput
-    }, components),
-    componentsProps: componentsProps,
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,
@@ -186,8 +193,11 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -196,7 +206,12 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -318,6 +333,31 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/InputBase/InputBase.js

@@ -206,6 +206,8 @@ var inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
 
 
 var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
+  var _slotProps$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
@@ -250,11 +252,15 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       renderSuffix = props.renderSuffix,
       rows = props.rows,
       size = props.size,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       startAdornment = props.startAdornment,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"]);
 
   var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 
@@ -462,10 +468,10 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  var Root = components.Root || InputBaseRoot;
-  var rootProps = componentsProps.root || {};
-  var Input = components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, componentsProps.input);
+  var Root = slots.root || components.Root || InputBaseRoot;
+  var rootProps = slotProps.root || componentsProps.root || {};
+  var Input = slots.input || components.Input || InputBaseComponent;
+  inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
@@ -557,8 +563,11 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -567,7 +576,12 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -735,6 +749,31 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */