@mui/material 6.1.1 → 6.1.3

package/node/LinearProgress/LinearProgress.js

@@ -300,6 +300,13 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     style: {
       backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
     }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
+    style: {
+      backgroundColor: 'currentColor'
+    }
   }, {
     props: {
       color: 'inherit'

package/node/MenuList/MenuList.js

@@ -15,6 +15,7 @@ var _List = _interopRequireDefault(require("../List"));
 var _getScrollbarSize = _interopRequireDefault(require("../utils/getScrollbarSize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
@@ -118,7 +119,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
-        const scrollbarSize = `${(0, _getScrollbarSize.default)((0, _ownerDocument.default)(containerElement))}px`;
+        const scrollbarSize = `${(0, _getScrollbarSize.default)((0, _utils.ownerWindow)(containerElement))}px`;
         listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }

package/node/Modal/Modal.js

@@ -194,12 +194,12 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getSlotProps: otherHandlers => {
       return getBackdropProps({
         ...otherHandlers,
-        onClick: e => {
+        onClick: event => {
           if (onBackdropClick) {
-            onBackdropClick(e);
+            onBackdropClick(event);
           }
           if (otherHandlers?.onClick) {
-            otherHandlers.onClick(e);
+            otherHandlers.onClick(event);
           }
         }
       });

package/node/Modal/ModalManager.js

@@ -14,8 +14,8 @@ function isOverflowing(container) {
   }
   return container.scrollHeight > container.clientHeight;
 }
-function ariaHidden(element, show) {
-  if (show) {
+function ariaHidden(element, hide) {
+  if (hide) {
     element.setAttribute('aria-hidden', 'true');
   } else {
     element.removeAttribute('aria-hidden');
@@ -33,13 +33,13 @@ function isAriaHiddenForbiddenOnElement(element) {
   const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
   return isForbiddenTagName || isInputHidden;
 }
-function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
+function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, hide) {
   const blacklist = [mountElement, currentElement, ...elementsToExclude];
   [].forEach.call(container.children, element => {
     const isNotExcludedElement = !blacklist.includes(element);
     const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
     if (isNotExcludedElement && isNotForbiddenElement) {
-      ariaHidden(element, show);
+      ariaHidden(element, hide);
     }
   });
 }
@@ -60,7 +60,7 @@ function handleContainer(containerInfo, props) {
   if (!props.disableScrollLock) {
     if (isOverflowing(container)) {
       // Compute the size before applying overflow hidden to avoid any scroll jumps.
-      const scrollbarSize = (0, _utils.unstable_getScrollbarSize)((0, _utils.unstable_ownerDocument)(container));
+      const scrollbarSize = (0, _utils.unstable_getScrollbarSize)((0, _utils.unstable_ownerWindow)(container));
       restoreStyle.push({
         value: container.style.paddingRight,
         property: 'padding-right',

package/node/Modal/useModal.js

@@ -20,7 +20,7 @@ function getHasTransition(children) {
 
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
-const defaultManager = new _ModalManager.ModalManager();
+const manager = new _ModalManager.ModalManager();
 /**
  *
  * Demos:
@@ -36,8 +36,6 @@ function useModal(parameters) {
     container,
     disableEscapeKeyDown = false,
     disableScrollLock = false,
-    // @ts-ignore internal logic - Base UI supports the manager as a prop too
-    manager = defaultManager,
     closeAfterTransition = false,
     onTransitionEnter,
     onTransitionExited,
@@ -83,7 +81,7 @@ function useModal(parameters) {
       handleMounted();
     }
   });
-  const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
+  const isTopModal = () => manager.isTopModal(getModal());
   const handlePortalRef = (0, _utils.unstable_useEventCallback)(node => {
     mountNodeRef.current = node;
     if (!node) {
@@ -97,7 +95,7 @@ function useModal(parameters) {
   });
   const handleClose = React.useCallback(() => {
     manager.remove(getModal(), ariaHiddenProp);
-  }, [ariaHiddenProp, manager]);
+  }, [ariaHiddenProp]);
   React.useEffect(() => {
     return () => {
       handleClose();
@@ -152,6 +150,12 @@ function useModal(parameters) {
       ...otherHandlers
     };
     return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
       role: 'presentation',
       ...externalEventHandlers,
       onKeyDown: createHandleKeyDown(externalEventHandlers),

package/node/OutlinedInput/OutlinedInput.js

@@ -53,6 +53,12 @@ const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
     [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
     [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
       borderWidth: 2
     },
@@ -69,12 +75,6 @@ const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
       props: {},
       // to overide the above style
       style: {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-          }
-        },
         [`&.${_outlinedInputClasses.default.error} .${_outlinedInputClasses.default.notchedOutline}`]: {
           borderColor: (theme.vars || theme).palette.error.main
         },

package/node/PigmentGrid/PigmentGrid.js

@@ -122,29 +122,6 @@ process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptype
    * @ignore
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
-   * ```
-   *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
-   *
-   * ```js
-   * <Grid> // level 0
-   *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
-   * ```
-   */
-  unstable_level: _propTypes.default.number,
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.

package/node/Portal/Portal.js

@@ -35,7 +35,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactNodeRef)(children), forwardedRef);
+  const handleRef = (0, _utils.unstable_useForkRef)(/*#__PURE__*/React.isValidElement(children) ? (0, _utils.unstable_getReactElementRef)(children) : null, forwardedRef);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/node/Rating/Rating.js

@@ -233,7 +233,12 @@ function RatingItem(props) {
   const isHovered = itemValue <= hover;
   const isFocused = itemValue <= focus;
   const isChecked = itemValue === ratingValueRounded;
-  const id = (0, _utils.unstable_useId)();
+
+  // "name" ensures unique IDs across different Rating components in React 17,
+  // preventing one component from affecting another. React 18's useId already handles this.
+  // Update to const id = useId(); when React 17 support is dropped.
+  // More details: https://github.com/mui/material-ui/issues/40997
+  const id = `${name}-${(0, _utils.unstable_useId)()}`;
   const container = /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingIcon, {
     as: IconContainerComponent,
     value: itemValue,
@@ -626,7 +631,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name: _propTypes.default.string,
   /**

package/node/Select/Select.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -99,7 +99,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = (0, _useForkRef.default)(ref, (0, _getReactNodeRef.default)(InputComponent));
+  const inputComponentRef = (0, _useForkRef.default)(ref, (0, _getReactElementRef.default)(InputComponent));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/node/Select/SelectInput.js

@@ -354,7 +354,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     let selected;
     if (multiple) {
       if (!Array.isArray(value)) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` : (0, _formatMuiErrorMessage2.default)(2));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : (0, _formatMuiErrorMessage2.default)(2));
       }
       selected = value.some(v => areEqualValues(v, child.props.value));
       if (selected && computeDisplay) {

package/node/Slide/Slide.js

@@ -14,7 +14,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
@@ -113,7 +113,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)((0, _getReactNodeRef.default)(children), childrenRef, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/node/Tooltip/Tooltip.js

@@ -18,7 +18,7 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -522,7 +522,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)((0, _getReactNodeRef.default)(children), setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/node/Unstable_TrapFocus/FocusTrap.js

@@ -21,7 +21,7 @@ function getTabIndex(node) {
   }
 
   // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // https://issues.chromium.org/issues/41283952
   // so if they don't have a tabindex attribute specifically set, assume it's 0.
   // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
   //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -99,7 +99,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactNodeRef)(children), rootRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactElementRef)(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/node/Zoom/Zoom.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -55,7 +55,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.1
+ * @mui/material v6.1.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createGetSelector.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
 var _default = theme => (colorScheme, css) => {
+  const root = theme.rootSelector || ':root';
   const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === 'class') {
@@ -28,33 +29,33 @@ var _default = theme => (colorScheme, css) => {
       });
       if (rule === 'media') {
         return {
-          ':root': css,
+          [root]: css,
           [`@media (prefers-color-scheme: dark)`]: {
-            ':root': excludedVariables
+            [root]: excludedVariables
           }
         };
       }
       if (rule) {
         return {
           [rule.replace('%s', colorScheme)]: excludedVariables,
-          [`:root, ${rule.replace('%s', colorScheme)}`]: css
+          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
         };
       }
       return {
-        ':root': {
+        [root]: {
           ...css,
           ...excludedVariables
         }
       };
     }
     if (rule && rule !== 'media') {
-      return `:root, ${rule.replace('%s', String(colorScheme))}`;
+      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
     }
   } else if (colorScheme) {
     if (rule === 'media') {
       return {
         [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-          ':root': css
+          [root]: css
         }
       };
     }
@@ -62,6 +63,6 @@ var _default = theme => (colorScheme, css) => {
       return rule.replace('%s', String(colorScheme));
     }
   }
-  return ':root';
+  return root;
 };
 exports.default = _default;

package/node/styles/createPalette.js

@@ -221,24 +221,10 @@ function createPalette(palette) {
       color.main = color[mainShade];
     }
     if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
-The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage2.default)(11, name ? ` (${name})` : '', mainShade));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage2.default)(11, name ? ` (${name})` : '', mainShade));
     }
     if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
-\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.
-
-Did you intend to use one of the following approaches?
-
-import { green } from "@mui/material/colors";
-
-const theme1 = createTheme({ palette: {
-  primary: green,
-} });
-
-const theme2 = createTheme({ palette: {
-  primary: { main: green[500] },
-} });` : (0, _formatMuiErrorMessage2.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : (0, _formatMuiErrorMessage2.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);

package/node/styles/createThemeNoVars.js

@@ -30,8 +30,7 @@ function createThemeNoVars(options = {}, ...args) {
     ...other
   } = options;
   if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
-Please use another name.` : (0, _formatMuiErrorMessage2.default)(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : (0, _formatMuiErrorMessage2.default)(20));
   }
   const palette = (0, _createPalette.default)(paletteInput);
   const systemTheme = (0, _createTheme.default)(options);

package/node/styles/createThemeWithVars.js

@@ -119,6 +119,7 @@ function createThemeWithVars(options = {}, ...args) {
     cssVarPrefix = 'mui',
     shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
+    rootSelector = ':root',
     ...input
   } = options;
   const firstColorScheme = Object.keys(colorSchemesInput)[0];
@@ -156,6 +157,7 @@ function createThemeWithVars(options = {}, ...args) {
     ...muiTheme,
     cssVarPrefix,
     colorSchemeSelector: selector,
+    rootSelector,
     getCssVar,
     colorSchemes,
     font: {

package/node/styles/index.js

@@ -351,7 +351,7 @@ var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariabl
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(19));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : (0, _formatMuiErrorMessage2.default)(19));
 }
 
 // The legacy utilities from @mui/styles

package/node/styles/makeStyles.js

@@ -7,7 +7,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = makeStyles;
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 function makeStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
-You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _formatMuiErrorMessage2.default)(14));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: makeStyles is no longer exported from @mui/material/styles.\n' + 'You have to import it from @mui/styles.\n' + 'See https://mui.com/r/migration-v4/#mui-material-styles for more details.' : (0, _formatMuiErrorMessage2.default)(14));
 }

package/node/styles/responsiveFontSizes.js

@@ -41,8 +41,7 @@ function responsiveFontSizes(themeInput, options = {}) {
       lineHeight
     } = style;
     if (!(0, _cssUtils.isUnitless)(lineHeight) && !disableAlign) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
-Use unitless line heights instead.` : (0, _formatMuiErrorMessage2.default)(6));
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Unsupported non-unitless line height with grid alignment.\n' + 'Use unitless line heights instead.' : (0, _formatMuiErrorMessage2.default)(6));
     }
     if (!(0, _cssUtils.isUnitless)(lineHeight)) {
       // make it unitless

package/node/styles/shouldSkipGeneratingVar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = shouldSkipGeneratingVar;
 function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/node/styles/withStyles.js

@@ -7,7 +7,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = withStyles;
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 function withStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is no longer exported from @mui/material/styles.
-You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _formatMuiErrorMessage2.default)(15));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: withStyles is no longer exported from @mui/material/styles.\n' + 'You have to import it from @mui/styles.\n' + 'See https://mui.com/r/migration-v4/#mui-material-styles for more details.' : (0, _formatMuiErrorMessage2.default)(15));
 }

package/node/styles/withTheme.js

@@ -7,7 +7,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = withTheme;
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 function withTheme() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is no longer exported from @mui/material/styles.
-You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _formatMuiErrorMessage2.default)(16));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: withTheme is no longer exported from @mui/material/styles.\n' + 'You have to import it from @mui/styles.\n' + 'See https://mui.com/r/migration-v4/#mui-material-styles for more details.' : (0, _formatMuiErrorMessage2.default)(16));
 }

package/node/useAutocomplete/useAutocomplete.js

@@ -844,6 +844,7 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
+      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -920,7 +921,8 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator
+      onClick: handlePopupIndicator,
+      onMouseDown: event => event.stopPropagation()
     }),
     getTagProps: ({
       index

package/node/utils/memoTheme.js

@@ -3,28 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = memoTheme;
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = {
-  theme: undefined
-};
-
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-function memoTheme(styleFn) {
-  let lastValue;
-  let lastTheme;
-  return props => {
-    let value = lastValue;
-    if (value === undefined || props.theme !== lastTheme) {
-      arg.theme = props.theme;
-      value = styleFn(arg);
-      lastValue = value;
-      lastTheme = props.theme;
-    }
-    return value;
-  };
-}
+exports.default = void 0;
+var _system = require("@mui/system");
+const memoTheme = _system.unstable_memoTheme;
+var _default = exports.default = memoTheme;

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.1";
+const version = exports.version = "6.1.3";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("1");
+const patch = exports.patch = Number("3");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.1.1",
-    "@mui/utils": "^6.1.1",
-    "@mui/system": "^6.1.1",
-    "@mui/types": "^7.2.17"
+    "@mui/core-downloads-tracker": "^6.1.3",
+    "@mui/system": "^6.1.3",
+    "@mui/types": "^7.2.18",
+    "@mui/utils": "^6.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.1.1"
+    "@mui/material-pigment-css": "^6.1.3"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/ThemeProvider.d.ts

@@ -29,6 +29,12 @@ export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderC
      * @default document
      */
     documentNode?: Document | null;
+    /**
+     * The default mode when the local storage has no mode yet,
+     * requires the theme to have `colorSchemes` with light and dark.
+     * @default 'system'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
     /**
      * The window that attaches the 'storage' event listener
      * @default window