@mui/material 5.15.13 → 6.0.0-alpha.0

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;
@@ -38,7 +39,7 @@ function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -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/rootShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare const rootShouldForwardProp: (prop: string) => boolean;
+export default rootShouldForwardProp;

package/styles/rootShouldForwardProp.js

@@ -0,0 +1,3 @@
+import slotShouldForwardProp from './slotShouldForwardProp';
+const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'classes';
+export default rootShouldForwardProp;

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/styles/slotShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare function slotShouldForwardProp(prop: string): boolean;
+export default slotShouldForwardProp;

package/styles/slotShouldForwardProp.js

@@ -0,0 +1,5 @@
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+export default slotShouldForwardProp;

package/styles/styled.d.ts

@@ -1,9 +1,8 @@
 import { CreateMUIStyled } from '@mui/system';
 import { Theme } from './createTheme';
 
-export function rootShouldForwardProp(prop: string): boolean;
-
-export function slotShouldForwardProp(prop: string): boolean;
+export { default as slotShouldForwardProp } from './slotShouldForwardProp';
+export { default as rootShouldForwardProp } from './rootShouldForwardProp';
 
 /**
  * Custom styled utility that has a default MUI theme.

package/styles/styled.js

@@ -1,10 +1,11 @@
 'use client';
 
-import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
+import createStyled from '@mui/system/createStyled';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
-export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
-export const slotShouldForwardProp = shouldForwardProp;
+import rootShouldForwardProp from './rootShouldForwardProp';
+export { default as slotShouldForwardProp } from './slotShouldForwardProp';
+export { default as rootShouldForwardProp } from './rootShouldForwardProp';
 const styled = createStyled({
   themeId: THEME_ID,
   defaultTheme,

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
   };
 }