@mui/material 5.10.8 → 5.10.10

package/esm/Slide/Slide.js

@@ -119,8 +119,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const childrenRef = React.useRef(null);
-  const handleRefIntermediary = useForkRef(children.ref, childrenRef);
-  const handleRef = useForkRef(handleRefIntermediary, ref);
+  const handleRef = useForkRef(children.ref, childrenRef, ref);
 
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {

package/esm/Tooltip/Tooltip.js

@@ -461,9 +461,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleUseRef = useForkRef(setChildNode, ref);
-  const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
-  const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
+  const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
   if (typeof title !== 'number' && !title) {
     open = false;

package/esm/Zoom/Zoom.js

@@ -50,8 +50,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/esm/utils/createSvgIcon.js

@@ -7,12 +7,14 @@ import SvgIcon from '../SvgIcon';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
-  const Component = (props, ref) => /*#__PURE__*/_jsx(SvgIcon, _extends({
-    "data-testid": `${displayName}Icon`,
-    ref: ref
-  }, props, {
-    children: path
-  }));
+  function Component(props, ref) {
+    return /*#__PURE__*/_jsx(SvgIcon, _extends({
+      "data-testid": `${displayName}Icon`,
+      ref: ref
+    }, props, {
+      children: path
+    }));
+  }
 
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/index.js

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

package/legacy/ButtonBase/ButtonBase.js

@@ -313,8 +313,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
     }
   }
 
-  var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-  var handleRef = useForkRef(ref, handleOwnRef);
+  var handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/legacy/CssBaseline/CssBaseline.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +17,7 @@ export var html = function html(theme, enableColorScheme) {
     boxSizing: 'border-box',
     // Fix font resize problem in iOS
     WebkitTextSizeAdjust: '100%'
-  }, enableColorScheme && {
+  }, enableColorScheme && !theme.vars && {
     colorScheme: theme.palette.mode
   });
 };
@@ -36,7 +37,23 @@ var _styles = function styles(theme) {
   var _theme$components, _theme$components$Mui;
 
   var enableColorScheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var defaultStyles = {
+  var colorSchemeStyles = {};
+
+  if (enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(function (_ref) {
+      var _scheme$palette;
+
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          scheme = _ref2[1];
+
+      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
+  var defaultStyles = _extends({
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
@@ -53,7 +70,8 @@ var _styles = function styles(theme) {
         backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
-  };
+  }, colorSchemeStyles);
+
   var themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
 
   if (themeOverrides) {

package/legacy/Fade/Fade.js

@@ -49,8 +49,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
 
   var enableStrictModeCompat = true;
   var nodeRef = React.useRef(null);
-  var foreignRef = useForkRef(_children.ref, ref);
-  var handleRef = useForkRef(nodeRef, foreignRef);
+  var handleRef = useForkRef(nodeRef, _children.ref, ref);
 
   var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
     return function (maybeIsAppearing) {

package/legacy/Grow/Grow.js

@@ -59,8 +59,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   var autoTimeout = React.useRef();
   var theme = useTheme();
   var nodeRef = React.useRef(null);
-  var foreignRef = useForkRef(_children.ref, ref);
-  var handleRef = useForkRef(nodeRef, foreignRef);
+  var handleRef = useForkRef(nodeRef, _children.ref, ref);
 
   var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
     return function (maybeIsAppearing) {

package/legacy/InputBase/InputBase.js

@@ -269,9 +269,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       }
     }
   }, []);
-  var handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
-  var handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
-  var handleInputRef = useForkRef(inputRef, handleInputRefProp);
+  var handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
 
   var _React$useState = React.useState(false),
       focused = _React$useState[0],

package/legacy/Popover/Popover.js

@@ -248,6 +248,11 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+
+  var _React$useState = React.useState(open),
+      isPositioned = _React$useState[0],
+      setIsPositioned = _React$useState[1];
+
   var setPositioningStyles = React.useCallback(function () {
     var element = paperRef.current;
 
@@ -266,6 +271,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   var handleEntering = function handleEntering(element, isAppearing) {
@@ -276,6 +282,10 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  var handleExited = function handleExited() {
+    setIsPositioned(false);
+  };
+
   React.useEffect(function () {
     if (open) {
       setPositioningStyles();
@@ -327,13 +337,19 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className),
+        className: clsx(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: _extends({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/legacy/Rating/Rating.js

@@ -367,8 +367,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       setFocusVisible = _React$useState2[1];
 
   var rootRef = React.useRef();
-  var handleFocusRef = useForkRef(focusVisibleRef, rootRef);
-  var handleRef = useForkRef(handleFocusRef, ref);
+  var handleRef = useForkRef(focusVisibleRef, rootRef, ref);
 
   var handleMouseMove = function handleMouseMove(event) {
     if (onMouseMove) {

package/legacy/ScopedCssBaseline/ScopedCssBaseline.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -27,6 +28,22 @@ var ScopedCssBaselineRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
+  var colorSchemeStyles = {};
+
+  if (ownerState.enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(function (_ref2) {
+      var _scheme$palette;
+
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          scheme = _ref3[1];
+
+      colorSchemeStyles["&".concat(theme.getColorSchemeSelector(key).replace(/\s*&/, ''))] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
   return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -34,7 +51,7 @@ var ScopedCssBaselineRoot = styled('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     }
-  });
+  }, colorSchemeStyles);
 });
 var ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   var props = useThemeProps({

package/legacy/Slide/Slide.js

@@ -120,8 +120,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var childrenRef = React.useRef(null);
-  var handleRefIntermediary = useForkRef(_children.ref, childrenRef);
-  var handleRef = useForkRef(handleRefIntermediary, ref);
+  var handleRef = useForkRef(_children.ref, childrenRef, ref);
 
   var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
     return function (isAppearing) {

package/legacy/Tooltip/Tooltip.js

@@ -484,9 +484,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  var handleUseRef = useForkRef(setChildNode, ref);
-  var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
-  var handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
+  var handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
   if (typeof title !== 'number' && !title) {
     open = false;

package/legacy/Zoom/Zoom.js

@@ -49,8 +49,7 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
   var nodeRef = React.useRef(null);
-  var foreignRef = useForkRef(_children.ref, ref);
-  var handleRef = useForkRef(nodeRef, foreignRef);
+  var handleRef = useForkRef(nodeRef, _children.ref, ref);
 
   var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
     return function (maybeIsAppearing) {

package/legacy/index.js

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

package/legacy/utils/createSvgIcon.js

@@ -7,14 +7,14 @@ import SvgIcon from '../SvgIcon';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
-  var Component = function Component(props, ref) {
+  function Component(props, ref) {
     return /*#__PURE__*/_jsx(SvgIcon, _extends({
       "data-testid": "".concat(displayName, "Icon"),
       ref: ref
     }, props, {
       children: path
     }));
-  };
+  }
 
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/modern/ButtonBase/ButtonBase.js

@@ -295,8 +295,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }
   }
 
-  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-  const handleRef = useForkRef(ref, handleOwnRef);
+  const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/modern/CssBaseline/CssBaseline.js

@@ -15,7 +15,7 @@ export const html = (theme, enableColorScheme) => _extends({
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%'
-}, enableColorScheme && {
+}, enableColorScheme && !theme.vars && {
   colorScheme: theme.palette.mode
 });
 export const body = theme => _extends({
@@ -28,7 +28,17 @@ export const body = theme => _extends({
   }
 });
 export const styles = (theme, enableColorScheme = false) => {
-  let defaultStyles = {
+  const colorSchemeStyles = {};
+
+  if (enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+        colorScheme: scheme.palette?.mode
+      };
+    });
+  }
+
+  let defaultStyles = _extends({
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
@@ -45,7 +55,8 @@ export const styles = (theme, enableColorScheme = false) => {
         backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
-  };
+  }, colorSchemeStyles);
+
   const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
 
   if (themeOverrides) {

package/modern/Fade/Fade.js

@@ -50,8 +50,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
 
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/modern/Grow/Grow.js

@@ -60,8 +60,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/modern/InputBase/InputBase.js

@@ -268,9 +268,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       }
     }
   }, []);
-  const handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
-  const handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
-  const handleInputRef = useForkRef(inputRef, handleInputRefProp);
+  const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
 

package/modern/Popover/Popover.js

@@ -237,6 +237,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+  const [isPositioned, setIsPositioned] = React.useState(open);
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -255,6 +256,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -265,6 +267,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -314,13 +320,19 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className),
+        className: clsx(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: _extends({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/modern/Rating/Rating.js

@@ -350,8 +350,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   } = useIsFocusVisible();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const rootRef = React.useRef();
-  const handleFocusRef = useForkRef(focusVisibleRef, rootRef);
-  const handleRef = useForkRef(handleFocusRef, ref);
+  const handleRef = useForkRef(focusVisibleRef, rootRef, ref);
 
   const handleMouseMove = event => {
     if (onMouseMove) {

package/modern/ScopedCssBaseline/ScopedCssBaseline.js

@@ -29,6 +29,16 @@ const ScopedCssBaselineRoot = styled('div', {
   theme,
   ownerState
 }) => {
+  const colorSchemeStyles = {};
+
+  if (ownerState.enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
+        colorScheme: scheme.palette?.mode
+      };
+    });
+  }
+
   return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -36,7 +46,7 @@ const ScopedCssBaselineRoot = styled('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     }
-  });
+  }, colorSchemeStyles);
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = useThemeProps({

package/modern/Slide/Slide.js

@@ -119,8 +119,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const childrenRef = React.useRef(null);
-  const handleRefIntermediary = useForkRef(children.ref, childrenRef);
-  const handleRef = useForkRef(handleRefIntermediary, ref);
+  const handleRef = useForkRef(children.ref, childrenRef, ref);
 
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {

package/modern/Tooltip/Tooltip.js

@@ -459,9 +459,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleUseRef = useForkRef(setChildNode, ref);
-  const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
-  const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
+  const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
   if (typeof title !== 'number' && !title) {
     open = false;

package/modern/Zoom/Zoom.js

@@ -50,8 +50,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/modern/index.js

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

package/modern/utils/createSvgIcon.js

@@ -7,12 +7,14 @@ import SvgIcon from '../SvgIcon';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
-  const Component = (props, ref) => /*#__PURE__*/_jsx(SvgIcon, _extends({
-    "data-testid": `${displayName}Icon`,
-    ref: ref
-  }, props, {
-    children: path
-  }));
+  function Component(props, ref) {
+    return /*#__PURE__*/_jsx(SvgIcon, _extends({
+      "data-testid": `${displayName}Icon`,
+      ref: ref
+    }, props, {
+      children: path
+    }));
+  }
 
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.10.8",
+  "version": "5.10.10",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@mui/base": "5.0.0-alpha.100",
-    "@mui/core-downloads-tracker": "^5.10.8",
-    "@mui/system": "^5.10.8",
+    "@mui/base": "5.0.0-alpha.102",
+    "@mui/core-downloads-tracker": "^5.10.10",
+    "@mui/system": "^5.10.10",
     "@mui/types": "^7.2.0",
-    "@mui/utils": "^5.10.6",
+    "@mui/utils": "^5.10.9",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",

package/styles/components.d.ts

@@ -480,6 +480,9 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiSvgIcon'];
     variants?: ComponentsVariants['MuiSvgIcon'];
   };
+  MuiSwipeableDrawer?: {
+    defaultProps?: ComponentsProps['MuiSwipeableDrawer'];
+  };
   MuiSwitch?: {
     defaultProps?: ComponentsProps['MuiSwitch'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSwitch'];

package/styles/experimental_extendTheme.d.ts

@@ -193,7 +193,7 @@ export interface PaletteTooltip {
 
 // The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
 export interface ColorSystemOptions {
-  palette?: Omit<PaletteOptions, 'mode'> & {
+  palette?: PaletteOptions & {
     common?: Partial<PaletteCommonChannel>;
     primary?: Partial<PaletteColorChannel>;
     secondary?: Partial<PaletteColorChannel>;