@mui/material 5.10.11 → 5.10.13

package/modern/OutlinedInput/OutlinedInput.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
+const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -133,6 +133,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     label,
     multiline = false,
     notched,
+    slots = {},
     type = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -158,11 +159,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     type
   });
 
+  const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: OutlinedInputRoot,
-      Input: OutlinedInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
       ownerState: ownerState,
       className: classes.notchedOutline,
@@ -218,8 +221,11 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.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({
@@ -347,6 +353,18 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * 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/modern/PaginationItem/PaginationItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -216,17 +216,13 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     className,
     color = 'standard',
     component,
-    components = {
-      first: FirstPageIcon,
-      last: LastPageIcon,
-      next: NavigateNextIcon,
-      previous: NavigateBeforeIcon
-    },
+    components = {},
     disabled = false,
     page,
     selected = false,
     shape = 'circular',
     size = 'medium',
+    slots = {},
     type = 'page',
     variant = 'text'
   } = props,
@@ -245,15 +241,15 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   const theme = useTheme();
   const classes = useUtilityClasses(ownerState);
   const normalizedIcons = theme.direction === 'rtl' ? {
-    previous: components.next || NavigateNextIcon,
-    next: components.previous || NavigateBeforeIcon,
-    last: components.first || FirstPageIcon,
-    first: components.last || LastPageIcon
+    previous: slots.next || components.next || NavigateNextIcon,
+    next: slots.previous || components.previous || NavigateBeforeIcon,
+    last: slots.first || components.first || FirstPageIcon,
+    first: slots.last || components.last || LastPageIcon
   } : {
-    previous: components.previous || NavigateBeforeIcon,
-    next: components.next || NavigateNextIcon,
-    first: components.first || FirstPageIcon,
-    last: components.last || LastPageIcon
+    previous: slots.previous || components.previous || NavigateBeforeIcon,
+    next: slots.next || components.next || NavigateNextIcon,
+    first: slots.first || components.first || FirstPageIcon,
+    last: slots.last || components.last || LastPageIcon
   };
   const Icon = normalizedIcons[type];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
@@ -315,13 +311,12 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   component: PropTypes.elementType,
 
   /**
-   * The components used for first, last, next & previous item type
-   * @default {
-   *   first: FirstPageIcon,
-   *   last: LastPageIcon,
-   *   next: NavigateNextIcon,
-   *   previous: NavigateBeforeIcon,
-   * }
+   * 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({
     first: PropTypes.elementType,
@@ -361,6 +356,20 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
 
+  /**
+   * 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({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Radio/Radio.js

@@ -42,7 +42,8 @@ const RadioRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: (theme.vars || theme).palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity

package/modern/RadioGroup/RadioGroup.js

@@ -42,22 +42,22 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     }
   }), []);
   const handleRef = useForkRef(ref, rootRef);
+  const name = useId(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 = useId(nameProp);
+    value
+  }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value
-    },
+    value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
       ref: handleRef

package/modern/Select/Select.js

@@ -244,14 +244,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.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.
    */
@@ -259,7 +259,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/modern/Slider/Slider.js

@@ -581,8 +581,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({
@@ -597,7 +600,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/modern/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';
@@ -122,6 +122,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     error = false,
     icon: iconProp,
     optional,
+    slotProps = {},
     StepIconComponent: StepIconComponentProp,
     StepIconProps
   } = props,
@@ -154,6 +155,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   });
 
   const classes = useUtilityClasses(ownerState);
+  const labelSlotProps = slotProps.label ?? componentsProps.label;
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -172,9 +174,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?.className),
         children: children
       })) : null, optional]
     })]
@@ -227,6 +229,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/modern/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/modern/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';
@@ -243,6 +243,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     placement = 'bottom',
     PopperComponent: PopperComponentProp,
     PopperProps = {},
+    slotProps = {},
+    slots = {},
     title,
     TransitionComponent: TransitionComponentProp = Grow,
     TransitionProps
@@ -461,7 +463,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;
   }
 
@@ -579,14 +581,20 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = components.Popper ?? TooltipPopper;
-  const TransitionComponent = components.Transition ?? TransitionComponentProp ?? Grow;
-  const TooltipComponent = components.Tooltip ?? TooltipTooltip;
-  const ArrowComponent = 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 = slots.popper ?? components.Popper ?? TooltipPopper;
+  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
+  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
+  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
+  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, slotProps.popper ?? componentsProps.popper, {
+    className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
+  }), ownerState);
+  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, slotProps.transition ?? componentsProps.transition), ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, slotProps.tooltip ?? componentsProps.tooltip, {
+    className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
+  }), ownerState);
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, slotProps.arrow ?? componentsProps.arrow, {
+    className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
+  }), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
       as: PopperComponentProp ?? Popper,
@@ -606,17 +614,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: clsx(classes.popper, PopperProps?.className, componentsProps.popper?.className),
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
       }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
         timeout: theme.transitions.duration.shorter
       }, TransitionPropsInner, transitionProps, {
+        "data-foo": "bar",
         children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
-          className: clsx(classes.tooltip, componentsProps.tooltip?.className),
           children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
-            className: clsx(classes.arrow, componentsProps.arrow?.className),
             ref: setArrowRef
           })) : null]
         }))
@@ -654,8 +660,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({
@@ -666,9 +675,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({
@@ -791,6 +803,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/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.10.11",
+  "version": "5.10.13",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@mui/base": "5.0.0-alpha.103",
-    "@mui/core-downloads-tracker": "^5.10.11",
-    "@mui/system": "^5.10.10",
+    "@mui/base": "5.0.0-alpha.105",
+    "@mui/core-downloads-tracker": "^5.10.13",
+    "@mui/system": "^5.10.13",
     "@mui/types": "^7.2.0",
     "@mui/utils": "^5.10.9",
     "@types/react-transition-group": "^4.4.5",