@mui/material 5.10.11 → 5.10.13

package/RadioGroup/RadioGroup.js

@@ -65,22 +65,22 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     }
   }), []);
   const handleRef = (0, _useForkRef.default)(ref, rootRef);
+  const name = (0, _useId.default)(nameProp);
+  const contextValue = React.useMemo(() => ({
+    name,
 
-  const handleChange = event => {
-    setValueState(event.target.value);
+    onChange(event) {
+      setValueState(event.target.value);
 
-    if (onChange) {
-      onChange(event, event.target.value);
-    }
-  };
+      if (onChange) {
+        onChange(event, event.target.value);
+      }
+    },
 
-  const name = (0, _useId.default)(nameProp);
+    value
+  }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value
-    },
+    value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, (0, _extends2.default)({
       role: "radiogroup",
       ref: handleRef

package/Select/Select.d.ts

@@ -98,20 +98,20 @@ export interface SelectProps<T = unknown>
    *
    * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.
+   * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange?: SelectInputProps<T>['onChange'];
   /**
    * Callback fired when the component requests to be closed.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
    *
    * @param {object} event The event source of the callback.
    */
   onClose?: (event: React.SyntheticEvent) => void;
   /**
    * Callback fired when the component requests to be opened.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
    *
    * @param {object} event The event source of the callback.
    */

package/Select/Select.js

@@ -270,14 +270,14 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    *
    * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.
+   * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange: _propTypes.default.func,
 
   /**
    * Callback fired when the component requests to be closed.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
    *
    * @param {object} event The event source of the callback.
    */
@@ -285,7 +285,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
 
   /**
    * Callback fired when the component requests to be opened.
-   * Use in controlled mode (see open).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
    *
    * @param {object} event The event source of the callback.
    */

package/Slider/Slider.d.ts

@@ -27,8 +27,11 @@ export type SliderTypeMap<
      */
     color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
     /**
-     * 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?: {
@@ -41,6 +44,15 @@ export type SliderTypeMap<
       ValueLabel?: React.ElementType;
       Input?: React.ElementType;
     };
+    /**
+     * 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?: SliderUnstyledTypeMap['props']['slotProps'];
     /**
      * Override or extend the styles applied to the component.

package/Slider/Slider.js

@@ -609,8 +609,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   .oneOfType([_propTypes.default.oneOf(['primary', 'secondary']), _propTypes.default.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.default.shape({
@@ -625,7 +628,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.default.shape({
     input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

package/StepLabel/StepLabel.d.ts

@@ -38,6 +38,17 @@ export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLD
    * The optional node to display.
    */
   optional?: React.ReactNode;
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    /**
+     * Props applied to the label element.
+     * @default {}
+     */
+    label?: React.HTMLProps<HTMLSpanElement>;
+  };
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */

package/StepLabel/StepLabel.js

@@ -33,7 +33,7 @@ var _stepLabelClasses = _interopRequireWildcard(require("./stepLabelClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "StepIconComponent", "StepIconProps"];
+const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
 
 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); }
 
@@ -135,6 +135,8 @@ const StepLabelLabelContainer = (0, _styled.default)('span', {
   }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
+  var _slotProps$label;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiStepLabel'
@@ -146,6 +148,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     error = false,
     icon: iconProp,
     optional,
+    slotProps = {},
     StepIconComponent: StepIconComponentProp,
     StepIconProps
   } = props,
@@ -176,6 +179,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     orientation
   });
   const classes = useUtilityClasses(ownerState);
+  const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
@@ -194,9 +198,9 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       className: classes.labelContainer,
       ownerState: ownerState,
       children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelLabel, (0, _extends2.default)({
-        className: classes.label,
         ownerState: ownerState
-      }, componentsProps.label, {
+      }, labelSlotProps, {
+        className: (0, _clsx.default)(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
         children: children
       })) : null, optional]
     })]
@@ -249,6 +253,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
    */
   optional: _propTypes.default.node,
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    label: _propTypes.default.object
+  }),
+
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */

package/SwipeableDrawer/SwipeableDrawer.js

@@ -14,6 +14,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _reactDom = require("react-dom");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/utils");
@@ -246,7 +248,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
 
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    setMaybeSwiping(false); // The swipe wasn't started.
+    (0, _reactDom.flushSync)(() => {
+      setMaybeSwiping(false);
+    }); // The swipe wasn't started.
 
     if (!swipeInstance.current.isSwiping) {
       swipeInstance.current.isSwiping = null;
@@ -448,7 +452,9 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    setMaybeSwiping(true);
+    (0, _reactDom.flushSync)(() => {
+      setMaybeSwiping(true);
+    });
 
     if (!open && paperRef.current) {
       // The ref may be null when a parent component updates while swiping.
@@ -504,6 +510,8 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         BackdropProps: (0, _extends2.default)({}, BackdropProps, {
           ref: backdropRef
         })
+      }, variant === 'temporary' && {
+        keepMounted: true
       }, ModalPropsProp),
       hideBackdrop: hideBackdrop,
       PaperProps: (0, _extends2.default)({}, PaperProps, {

package/Tooltip/Tooltip.d.ts

@@ -22,20 +22,26 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    */
   classes?: Partial<TooltipClasses>;
   /**
-   * 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?: {
-    Popper?: React.ElementType;
+    Popper?: React.ElementType<PopperProps>;
     Transition?: React.ElementType;
     Tooltip?: React.ElementType;
     Arrow?: React.ElementType;
   };
   /**
-   * 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?: {
@@ -155,6 +161,37 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * @default {}
    */
   PopperProps?: Partial<PopperProps>;
+  /**
+   * 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?: {
+    popper?: Partial<PopperProps> & TooltipComponentsPropsOverrides;
+    transition?: TransitionProps & TooltipComponentsPropsOverrides;
+    tooltip?: React.HTMLProps<HTMLDivElement> &
+      MUIStyledCommonProps &
+      TooltipComponentsPropsOverrides;
+    arrow?: React.HTMLProps<HTMLSpanElement> &
+      MUIStyledCommonProps &
+      TooltipComponentsPropsOverrides;
+  };
+  /**
+   * 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?: {
+    popper?: React.ElementType<PopperProps>;
+    transition?: React.ElementType;
+    tooltip?: React.ElementType;
+    arrow?: React.ElementType;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Tooltip/Tooltip.js

@@ -50,7 +50,7 @@ var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 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); }
 
@@ -250,7 +250,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 = (0, _useThemeProps.default)({
     props: inProps,
@@ -279,6 +279,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     placement = 'bottom',
     PopperComponent: PopperComponentProp,
     PopperProps = {},
+    slotProps = {},
+    slots = {},
     title,
     TransitionComponent: TransitionComponentProp = _Grow.default,
     TransitionProps
@@ -496,7 +498,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }, [handleClose, open]);
   const handleRef = (0, _useForkRef.default)(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;
   }
 
@@ -614,14 +616,20 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     touch: ignoreNonTouchEvents.current
   });
   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.default;
-  const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
-  const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
-  const popperProps = (0, _base.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, componentsProps.popper), ownerState);
-  const transitionProps = (0, _base.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, componentsProps.transition), ownerState);
-  const tooltipProps = (0, _base.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, componentsProps.tooltip), ownerState);
-  const tooltipArrowProps = (0, _base.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, 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.default;
+  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 = (0, _base.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+    className: (0, _clsx.default)(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 = (0, _base.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+  const tooltipProps = (0, _base.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+    className: (0, _clsx.default)(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+  }), ownerState);
+  const tooltipArrowProps = (0, _base.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+    className: (0, _clsx.default)(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+  }), ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({
       as: PopperComponentProp != null ? PopperComponentProp : _Popper.default,
@@ -641,25 +649,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
-          timeout: theme.transitions.duration.shorter
-        }, TransitionPropsInner, transitionProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
-            className: (0, _clsx.default)(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
-            children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
-              className: (0, _clsx.default)(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
-              ref: setArrowRef
-            })) : null]
-          }))
-        }));
-      }
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+        timeout: theme.transitions.duration.shorter
+      }, TransitionPropsInner, transitionProps, {
+        "data-foo": "bar",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
+          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
+            ref: setArrowRef
+          })) : null]
+        }))
+      }))
     }))]
   });
 });
@@ -693,8 +695,11 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   className: _propTypes.default.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.default.shape({
@@ -705,9 +710,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.default.shape({
@@ -830,6 +838,35 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   PopperProps: _propTypes.default.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.default.shape({
+    arrow: _propTypes.default.object,
+    popper: _propTypes.default.object,
+    tooltip: _propTypes.default.object,
+    transition: _propTypes.default.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.default.shape({
+    arrow: _propTypes.default.elementType,
+    popper: _propTypes.default.elementType,
+    tooltip: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Unstable_Grid2/Grid2Props.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@mui/types';
 import { SxProps, SystemProps } from '@mui/system';
 import { GridBaseProps } from '@mui/system/Unstable_Grid';

package/esm/Alert/Alert.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -128,7 +128,7 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  var _components$CloseButt, _components$CloseIcon;
+  var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
 
   const props = useThemeProps({
     props: inProps,
@@ -148,6 +148,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     onClose,
     role = 'alert',
     severity = 'success',
+    slotProps = {},
+    slots = {},
     variant = 'standard'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -159,8 +161,10 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = (_components$CloseButt = components.CloseButton) != null ? _components$CloseButt : IconButton;
-  const AlertCloseIcon = (_components$CloseIcon = components.CloseIcon) != null ? _components$CloseIcon : CloseIcon;
+  const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton;
+  const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : CloseIcon;
+  const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
+  const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -189,10 +193,10 @@ const 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]
   }));
@@ -243,8 +247,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({
@@ -253,7 +260,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({
@@ -300,6 +312,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.
    */