@mui/material 5.15.14 → 6.0.0-alpha.0

package/node/useTouchRipple/useTouchRipple.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTouchRipple = props => {
   const {
     disabled,

package/node/utils/createSvgIcon.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Private module reserved for @mui packages.
  */function createSvgIcon(path, displayName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.14",
+  "version": "6.0.0-alpha.0",
   "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.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.40",
-    "@mui/system": "^5.15.14",
+    "@mui/system": "^6.0.0-alpha.0",
     "@mui/utils": "^5.15.14",
     "@mui/types": "^7.2.14",
-    "@mui/core-downloads-tracker": "^5.15.14"
+    "@mui/base": "5.0.0-beta.41",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/CssVarsProvider.js

@@ -8,7 +8,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 const defaultTheme = experimental_extendTheme();
 const {
@@ -36,7 +35,6 @@ const {
       });
     };
     return newTheme;
-  },
-  excludeVariablesFromRoot
+  }
 });
 export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/createGetSelector.d.ts

@@ -0,0 +1,10 @@
+declare const _default: <T extends {
+    attribute: string;
+    colorSchemeSelector: string;
+    colorSchemes?: Record<string, any> | undefined;
+    defaultColorScheme?: string | undefined;
+    cssVarPrefix?: string | undefined;
+}>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
+    [x: string]: Record<string, any>;
+};
+export default _default;

package/styles/createGetSelector.js

@@ -0,0 +1,21 @@
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+export default (theme => (colorScheme, css) => {
+  if (theme.defaultColorScheme === colorScheme) {
+    if (colorScheme === 'dark') {
+      const excludedVariables = {};
+      excludeVariablesFromRoot(theme.cssVarPrefix).forEach(cssVar => {
+        excludedVariables[cssVar] = css[cssVar];
+        delete css[cssVar];
+      });
+      return {
+        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
+        [theme.colorSchemeSelector]: css
+      };
+    }
+    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  if (colorScheme) {
+    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  return theme.colorSchemeSelector;
+});

package/styles/createTheme.js

@@ -67,7 +67,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
 /**
  * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
  */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+declare const excludeVariablesFromRoot: (cssVarPrefix?: string) => string[];
 export default excludeVariablesFromRoot;

package/styles/experimental_extendTheme.d.ts

@@ -289,6 +289,26 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Color schemes configuration
    */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  /**
+   * If provided, it will be used to create a selector for the color scheme.
+   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   *
+   * The callback receives the colorScheme with the possible values of:
+   * - undefined: the selector for tokens that are not color scheme dependent
+   * - string: the selector for the color scheme
+   *
+   * @example
+   * // class selector
+   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   *
+   * @example
+   * // data-* attribute selector
+   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   */
+  getSelector?: (
+    colorScheme: SupportedColorScheme | undefined,
+    css: Record<string, any>,
+  ) => string | Record<string, any>;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -409,10 +429,8 @@ export interface CssVarsTheme extends ColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
-  generateCssVars: (colorScheme?: SupportedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: ThemeVars;
-  };
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Array<Record<string, any>>;
 
   // Default theme tokens
   spacing: Theme['spacing'];
@@ -446,4 +464,4 @@ export interface CssVarsTheme extends ColorSystem {
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+): Omit<Theme, 'applyStyles'> & CssVarsTheme;

package/styles/experimental_extendTheme.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"],
   _excluded2 = ["palette"];
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
@@ -9,6 +9,7 @@ import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safe
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
+import defaultGetSelector from './createGetSelector';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
@@ -51,16 +52,16 @@ const silent = fn => {
 };
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
   const {
       colorSchemes: colorSchemesInput = {},
       cssVarPrefix = 'mui',
-      shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar
+      shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+      getSelector
     } = options,
     input = _objectWithoutPropertiesLoose(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
-      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+      palette: colorSchemesInput.light?.palette
     })),
     {
       palette: lightPalette
@@ -71,9 +72,11 @@ export default function extendTheme(options = {}, ...args) {
   } = createThemeWithoutVars({
     palette: _extends({
       mode: 'dark'
-    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+    }, colorSchemesInput.dark?.palette)
   });
-  let theme = _extends({}, muiTheme, {
+  let theme = _extends({
+    defaultColorScheme: 'light'
+  }, muiTheme, {
     cssVarPrefix,
     getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
@@ -84,8 +87,8 @@ export default function extendTheme(options = {}, ...args) {
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
           switchTrack: 0.38
-        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
-        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
+        }, colorSchemesInput.light?.opacity),
+        overlays: colorSchemesInput.light?.overlays || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
@@ -94,8 +97,8 @@ export default function extendTheme(options = {}, ...args) {
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
           switchTrack: 0.3
-        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
-        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
+        }, colorSchemesInput.dark?.opacity),
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
     })
   });
@@ -290,16 +293,25 @@ export default function extendTheme(options = {}, ...args) {
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
   const parserConfig = {
     prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    getSelector: getSelector || defaultGetSelector(theme)
   };
   const {
-    vars: themeVars,
-    generateCssVars
+    vars,
+    generateThemeVars,
+    generateStyleSheets
   } = prepareCssVars(theme, parserConfig);
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  theme.attribute = 'data-mui-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input?.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/styles/shouldSkipGeneratingVar.js

@@ -1,6 +1,5 @@
 export default function shouldSkipGeneratingVar(keys) {
-  var _keys$;
   return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/transitions/utils.js

@@ -1,14 +1,13 @@
 export const reflow = node => node.scrollTop;
 export function getTransitionProps(props, options) {
-  var _style$transitionDura, _style$transitionTimi;
   const {
     timeout,
     easing,
     style = {}
   } = props;
   return {
-    duration: (_style$transitionDura = style.transitionDuration) != null ? _style$transitionDura : typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,
-    easing: (_style$transitionTimi = style.transitionTimingFunction) != null ? _style$transitionTimi : typeof easing === 'object' ? easing[options.mode] : easing,
+    duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
+    easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
 }