@mui/material 5.10.11 → 5.10.13

package/esm/Slider/Slider.js

@@ -583,8 +583,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the Slider.
-   * 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({
@@ -599,7 +602,13 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   }),
 
   /**
-   * @ignore
+   * 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({
     input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/esm/StepLabel/StepLabel.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "StepIconComponent", "StepIconProps"];
+const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -110,6 +110,8 @@ const StepLabelLabelContainer = styled('span', {
   }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
+  var _slotProps$label;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiStepLabel'
@@ -122,6 +124,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     error = false,
     icon: iconProp,
     optional,
+    slotProps = {},
     StepIconComponent: StepIconComponentProp,
     StepIconProps
   } = props,
@@ -154,6 +157,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   });
 
   const classes = useUtilityClasses(ownerState);
+  const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -172,9 +176,9 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       className: classes.labelContainer,
       ownerState: ownerState,
       children: [children ? /*#__PURE__*/_jsx(StepLabelLabel, _extends({
-        className: classes.label,
         ownerState: ownerState
-      }, componentsProps.label, {
+      }, labelSlotProps, {
+        className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
         children: children
       })) : null, optional]
     })]
@@ -227,6 +231,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
    */
   optional: PropTypes.node,
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.object
+  }),
+
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */

package/esm/SwipeableDrawer/SwipeableDrawer.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["BackdropProps"],
       _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
@@ -218,7 +219,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
 
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    setMaybeSwiping(false); // The swipe wasn't started.
+    flushSync(() => {
+      setMaybeSwiping(false);
+    }); // The swipe wasn't started.
 
     if (!swipeInstance.current.isSwiping) {
       swipeInstance.current.isSwiping = null;
@@ -420,7 +423,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    setMaybeSwiping(true);
+    flushSync(() => {
+      setMaybeSwiping(true);
+    });
 
     if (!open && paperRef.current) {
       // The ref may be null when a parent component updates while swiping.
@@ -476,6 +481,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         BackdropProps: _extends({}, BackdropProps, {
           ref: backdropRef
         })
+      }, variant === 'temporary' && {
+        keepMounted: true
       }, ModalPropsProp),
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {

package/esm/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
+const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -215,7 +215,7 @@ function composeEventHandler(handler, eventHandler) {
 
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
 
   const props = useThemeProps({
     props: inProps,
@@ -245,6 +245,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     placement = 'bottom',
     PopperComponent: PopperComponentProp,
     PopperProps = {},
+    slotProps = {},
+    slots = {},
     title,
     TransitionComponent: TransitionComponentProp = Grow,
     TransitionProps
@@ -463,7 +465,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
   const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
-  if (typeof title !== 'number' && !title) {
+  if (!title && title !== 0) {
     open = false;
   }
 
@@ -583,14 +585,20 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
-  const TransitionComponent = (_ref = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref : Grow;
-  const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
-  const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
+  const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
+  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow;
+  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
+  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
+  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+    className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+  }), ownerState);
+  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+    className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+  }), ownerState);
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+    className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+  }), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
       as: PopperComponentProp != null ? PopperComponentProp : Popper,
@@ -610,25 +618,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => {
-        var _componentsProps$tool, _componentsProps$arro;
-
-        return /*#__PURE__*/_jsx(TransitionComponent, _extends({
-          timeout: theme.transitions.duration.shorter
-        }, TransitionPropsInner, transitionProps, {
-          children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
-            className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
-            children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
-              className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
-              ref: setArrowRef
-            })) : null]
-          }))
-        }));
-      }
+      }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
+        timeout: theme.transitions.duration.shorter
+      }, TransitionPropsInner, transitionProps, {
+        "data-foo": "bar",
+        children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
+          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+            ref: setArrowRef
+          })) : null]
+        }))
+      }))
     }))]
   });
 });
@@ -662,8 +664,11 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   className: PropTypes.string,
 
   /**
-   * The components used for each slot inside the Tooltip.
-   * 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({
@@ -674,9 +679,12 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Tooltip.
-   * Note that `componentsProps.popper` prop values win over `PopperProps`
-   * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
+   * 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({
@@ -799,6 +807,35 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   PopperProps: PropTypes.object,
 
+  /**
+   * 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({
+    arrow: PropTypes.object,
+    popper: PropTypes.object,
+    tooltip: PropTypes.object,
+    transition: 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({
+    arrow: PropTypes.elementType,
+    popper: PropTypes.elementType,
+    tooltip: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.11
+/** @license MUI v5.10.13
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Alert/Alert.js

@@ -127,7 +127,7 @@ var defaultIconMapping = {
   })
 };
 var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  var _components$CloseButt, _components$CloseIcon;
+  var _ref4, _slots$closeButton, _ref5, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
 
   var props = useThemeProps({
     props: inProps,
@@ -152,9 +152,13 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       role = _props$role === void 0 ? 'alert' : _props$role,
       _props$severity = props.severity,
       severity = _props$severity === void 0 ? 'success' : _props$severity,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"]);
+      other = _objectWithoutProperties(props, ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -163,8 +167,10 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  var AlertCloseButton = (_components$CloseButt = components.CloseButton) != null ? _components$CloseButt : IconButton;
-  var AlertCloseIcon = (_components$CloseIcon = components.CloseIcon) != null ? _components$CloseIcon : CloseIcon;
+  var AlertCloseButton = (_ref4 = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref4 : IconButton;
+  var AlertCloseIcon = (_ref5 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref5 : CloseIcon;
+  var closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
+  var closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -193,10 +199,10 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
         title: closeText,
         color: "inherit",
         onClick: onClose
-      }, componentsProps.closeButton, {
+      }, closeButtonProps, {
         children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
           fontSize: "small"
-        }, componentsProps.closeIcon))
+        }, closeIconProps))
       }))
     }) : null]
   }));
@@ -247,8 +253,11 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   .oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
 
   /**
-   * The components used for each slot inside the Alert.
-   * 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({
@@ -257,7 +266,12 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   }),
 
   /**
-   * The props used for each slot inside.
+   * 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({
@@ -304,6 +318,31 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
    */
   severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
 
+  /**
+   * 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({
+    closeButton: PropTypes.object,
+    closeIcon: 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({
+    closeButton: PropTypes.elementType,
+    closeIcon: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Autocomplete/Autocomplete.js

@@ -320,7 +320,7 @@ var AutocompleteGroupUl = styled('ul', {
 }));
 export { createFilterOptions };
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
+  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
 
   var props = useThemeProps({
     props: inProps,
@@ -434,8 +434,10 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"]);
+      other = _objectWithoutProperties(props, ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"]);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -550,6 +552,10 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     });
   };
 
+  var clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
+  var paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
+  var popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
+  var popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -574,16 +580,16 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
               "aria-label": clearText,
               title: clearText,
               ownerState: ownerState
-            }, componentsProps.clearIndicator, {
-              className: clsx(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
+            }, clearIndicatorSlotProps, {
+              className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
               children: clearIcon
             })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
               ownerState: ownerState
-            }, componentsProps.popupIndicator, {
-              className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
+            }, popupIndicatorSlotProps, {
+              className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
               children: popupIcon
             })) : null]
           })
@@ -604,13 +610,13 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       role: "presentation",
       anchorEl: anchorEl,
       open: popupOpen
-    }, componentsProps.popper, {
-      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+    }, popperSlotProps, {
+      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
-      }, componentsProps.paper, {
-        className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
+      }, paperSlotProps, {
+        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -1096,6 +1102,17 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/AvatarGroup/AvatarGroup.js

@@ -63,7 +63,7 @@ var AvatarGroupAvatar = styled(Avatar, {
   };
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _componentsProps$addi, _componentsProps$addi2;
+  var _slotProps$additional;
 
   var props = useThemeProps({
     props: inProps,
@@ -78,12 +78,14 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
       _props$max = props.max,
       max = _props$max === void 0 ? 5 : _props$max,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       _props$spacing = props.spacing,
       spacing = _props$spacing === void 0 ? 'medium' : _props$spacing,
       total = props.total,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"]);
+      other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"]);
 
   var clampedMax = max < 2 ? 2 : max;
 
@@ -114,6 +116,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   var maxAvatars = Math.min(children.length, clampedMax - 1);
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+  var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -123,11 +126,11 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
-    }, componentsProps.additionalAvatar, {
-      className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+    }, additionalAvatarSlotProps, {
+      className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
       style: _extends({
         marginLeft: marginLeft
-      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
+      }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
       children: ["+", extraAvatars]
     })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -172,7 +175,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The props used for each slot inside the AvatarGroup.
+   * 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({
@@ -191,6 +199,18 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
     return null;
   }),
 
+  /**
+   * 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({
+    additionalAvatar: PropTypes.object
+  }),
+
   /**
    * Spacing between avatars.
    * @default 'medium'