@mui/material 5.15.15 → 6.0.0-alpha.1

package/styles/experimental_extendTheme.js

@@ -1,14 +1,17 @@
 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';
+import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
+import { createUnarySpacing } from '@mui/system/spacing';
+import { prepareCssVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 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;
@@ -41,6 +44,21 @@ function setColorChannel(obj, key) {
     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.`);
   }
 }
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
 const silent = fn => {
   try {
     return fn();
@@ -51,16 +69,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 +89,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 +104,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,10 +114,11 @@ 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
       })
-    })
+    }),
+    spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
@@ -290,16 +311,29 @@ 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.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };
+  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.spacing = theme.generateSpacing();
   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
   };
 }