@mui/material 6.1.1 → 6.1.3

package/styles/ThemeProviderWithVars.d.ts

@@ -40,10 +40,11 @@ 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;
     disableNestedContext?: boolean;
     disableStyleSheetGeneration?: boolean;
-}>) => React.ReactElement<any>;
+}>) => React.JSX.Element;
 export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

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/createPalette.js

@@ -212,24 +212,10 @@ export default 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.` : _formatMuiErrorMessage(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.` : _formatMuiErrorMessage(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] },
-} });` : _formatMuiErrorMessage(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' + '} });' : _formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);

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/createThemeNoVars.js

@@ -21,8 +21,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.` : _formatMuiErrorMessage(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.' : _formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);

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/index.js

@@ -6,7 +6,7 @@ export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export 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.` : _formatMuiErrorMessage(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.' : _formatMuiErrorMessage(19));
 }
 export { default as createTheme, createMuiTheme } from "./createTheme.js";
 export { default as unstable_createMuiStrictModeTheme } from "./createMuiStrictModeTheme.js";

package/styles/makeStyles.js

@@ -1,6 +1,4 @@
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default 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.` : _formatMuiErrorMessage(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.' : _formatMuiErrorMessage(14));
 }

package/styles/responsiveFontSizes.js

@@ -34,8 +34,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
       lineHeight
     } = style;
     if (!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.` : _formatMuiErrorMessage(6));
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Unsupported non-unitless line height with grid alignment.\n' + 'Use unitless line heights instead.' : _formatMuiErrorMessage(6));
     }
     if (!isUnitless(lineHeight)) {
       // make it unitless

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/styles/withStyles.js

@@ -1,6 +1,4 @@
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default 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.` : _formatMuiErrorMessage(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.' : _formatMuiErrorMessage(15));
 }

package/styles/withTheme.js

@@ -1,6 +1,4 @@
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default 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.` : _formatMuiErrorMessage(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.' : _formatMuiErrorMessage(16));
 }

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/utils/memoTheme.d.ts

@@ -1,13 +1,7 @@
-import { CSSInterpolation } from '@mui/system';
 import { Theme } from '../styles/createTheme';
-type ThemeStyleFunction = (props: {
+declare const memoTheme: (styleFn: (props: {
     theme: Theme;
-}) => CSSInterpolation;
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-export default function memoTheme(styleFn: ThemeStyleFunction): (props: {
+}) => import("@mui/styled-engine").CSSInterpolation) => (props: {
     theme: Theme;
-}) => CSSInterpolation;
-export {};
+}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+export default memoTheme;

package/utils/memoTheme.js

@@ -1,24 +1,3 @@
-// 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.
- */
-export default 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;
-  };
-}
+import { unstable_memoTheme } from '@mui/system';
+const memoTheme = unstable_memoTheme;
+export default memoTheme;

package/version/index.js

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