@mui/material 6.1.1 → 6.1.2

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.2
  *
  * @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/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/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/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/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.2";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("1");
+const patch = exports.patch = Number("2");
 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.2",
   "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.2",
+    "@mui/system": "^6.1.2",
+    "@mui/types": "^7.2.17",
+    "@mui/utils": "^6.1.2"
   },
   "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.2"
   },
   "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

package/styles/ThemeProviderWithVars.d.ts

@@ -40,6 +40,7 @@ export declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<im
             colorSchemeSelector?: "media" | "class" | "data" | string;
         };
     } | undefined;
+    defaultMode?: "light" | "dark" | "system";
     documentNode?: Document | null;
     colorSchemeNode?: Element | null;
     storageWindow?: Window | null;

package/styles/createGetSelector.d.ts

@@ -1,21 +1,16 @@
 declare const _default: <T extends {
+    rootSelector?: string;
     colorSchemeSelector?: "media" | "class" | "data" | string;
     colorSchemes?: Record<string, any>;
     defaultColorScheme?: string;
     cssVarPrefix?: string;
 }>(theme: T) => (colorScheme: keyof T["colorSchemes"] | undefined, css: Record<string, any>) => string | {
-    ':root': Record<string, any>;
+    [x: string]: Record<string, any>;
     "@media (prefers-color-scheme: dark)": {
-        ':root': Record<string, any>;
+        [x: string]: Record<string, any>;
     };
 } | {
     [x: string]: Record<string, any>;
-    ':root'?: undefined;
-    "@media (prefers-color-scheme: dark)"?: undefined;
-} | {
-    ':root': {
-        [x: string]: any;
-    };
     "@media (prefers-color-scheme: dark)"?: undefined;
 };
 export default _default;

package/styles/createGetSelector.js

@@ -1,5 +1,6 @@
 import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
 export default theme => (colorScheme, css) => {
+  const root = theme.rootSelector || ':root';
   const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === 'class') {
@@ -21,33 +22,33 @@ export 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
         }
       };
     }
@@ -55,5 +56,5 @@ export default theme => (colorScheme, css) => {
       return rule.replace('%s', String(colorScheme));
     }
   }
-  return ':root';
+  return root;
 };

package/styles/createTheme.d.ts

@@ -9,6 +9,6 @@ export type { ThemeOptions, Theme, CssThemeVariables } from './createThemeNoVars
  * @returns A complete, ready-to-use theme object.
  */
 export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
-    cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+    cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
 }, // cast type to skip module augmentation test
 ...args: object[]): Theme;

package/styles/createThemeNoVars.d.ts

@@ -63,6 +63,7 @@ type CssVarsProperties = CssThemeVariables extends { enabled: true }
       | 'applyStyles'
       | 'colorSchemes'
       | 'colorSchemeSelector'
+      | 'rootSelector'
       | 'cssVarPrefix'
       | 'defaultColorScheme'
       | 'getCssVar'

package/styles/createThemeWithVars.d.ts

@@ -306,6 +306,13 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
    */
   colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * The selector to generate the global CSS variables (non-color-scheme related)
+   * @default ':root'
+   * @example ':host' // (for shadow DOM)
+   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
+   */
+  rootSelector?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
@@ -430,6 +437,7 @@ export type ThemeCssVar = OverridableStringUnion<
  */
 export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
+  rootSelector: string;
   colorSchemeSelector: 'media' | 'class' | 'data' | string;
   cssVarPrefix: string;
   defaultColorScheme: SupportedColorScheme;

package/styles/createThemeWithVars.js

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

package/styles/shouldSkipGeneratingVar.js

@@ -1,5 +1,5 @@
 export default 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/useAutocomplete/useAutocomplete.js

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

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.1";
+export const version = "6.1.2";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("1");
+export const patch = Number("2");
 export const prerelease = undefined;
 export default version;