@mui/material 6.0.0-beta.1 → 6.0.0-beta.3

package/styles/extendTheme.js

@@ -1,7 +1,8 @@
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
 import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
+import { prepareCssVars, prepareTypographyVars, createGetColorSchemeSelector } 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';
@@ -65,64 +66,102 @@ const silent = fn => {
   return undefined;
 };
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
+function getOpacity(mode) {
+  return {
+    inputPlaceholder: mode === 'dark' ? 0.5 : 0.42,
+    inputUnderline: mode === 'dark' ? 0.7 : 0.42,
+    switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12,
+    switchTrack: mode === 'dark' ? 0.3 : 0.38
+  };
+}
+function getOverlays(mode) {
+  return mode === 'dark' ? defaultDarkOverlays : [];
+}
+function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
+  if (!scheme) {
+    return undefined;
+  }
+  scheme = scheme === true ? {} : scheme;
+  const mode = colorScheme === 'dark' ? 'dark' : 'light';
+  const {
+    palette,
+    ...muiTheme
+  } = createThemeWithoutVars({
+    ...restTheme,
+    palette: {
+      mode,
+      ...scheme?.palette
+    }
+  });
+  colorSchemes[colorScheme] = {
+    ...scheme,
+    palette,
+    opacity: {
+      ...getOpacity(mode),
+      ...scheme?.opacity
+    },
+    overlays: scheme?.overlays || getOverlays(mode)
+  };
+  return muiTheme;
+}
+
+/**
+ * A default `extendTheme` comes with a single color scheme, either `light` or `dark` based on the `defaultColorScheme`.
+ * This is better suited for apps that only need a single color scheme.
+ *
+ * To enable built-in `light` and `dark` color schemes, either:
+ * 1. provide a `colorSchemeSelector` to define how the color schemes will change.
+ * 2. provide `colorSchemes.dark` will set `colorSchemeSelector: 'media'` by default.
+ */
 export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {},
+    colorSchemes: colorSchemesInput = {
+      light: true
+    },
+    defaultColorScheme: defaultColorSchemeInput,
+    disableCssColorScheme = false,
     cssVarPrefix = 'mui',
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
-    getSelector,
+    colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
     ...input
   } = options;
+  const firstColorScheme = Object.keys(colorSchemesInput)[0];
+  const defaultColorScheme = defaultColorSchemeInput || (colorSchemesInput.light && firstColorScheme !== 'light' ? 'light' : firstColorScheme);
   const getCssVar = createGetCssVar(cssVarPrefix);
   const {
-    palette: lightPalette,
-    ...muiTheme
-  } = createThemeWithoutVars({
-    ...input,
-    ...(colorSchemesInput.light && {
-      palette: colorSchemesInput.light?.palette
-    })
-  });
-  const {
-    palette: darkPalette
-  } = createThemeWithoutVars({
-    palette: {
-      mode: 'dark',
-      ...colorSchemesInput.dark?.palette
-    }
-  });
+    [defaultColorScheme]: defaultSchemeInput,
+    light: builtInLight,
+    dark: builtInDark,
+    ...customColorSchemes
+  } = colorSchemesInput;
+  const colorSchemes = {
+    ...customColorSchemes
+  };
+  let defaultScheme = defaultSchemeInput;
+
+  // For built-in light and dark color schemes, ensure that the value is valid if they are the default color scheme.
+  if (defaultColorScheme === 'dark' && !('dark' in colorSchemesInput) || defaultColorScheme === 'light' && !('light' in colorSchemesInput)) {
+    defaultScheme = true;
+  }
+  if (!defaultScheme) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided \`colorSchemes.${defaultColorScheme}\` to the \`extendTheme\` function is either missing or invalid.` : _formatMuiErrorMessage(23, defaultColorScheme));
+  }
+
+  // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
+  const muiTheme = attachColorScheme(colorSchemes, defaultScheme, input, defaultColorScheme);
+  if (builtInLight && !colorSchemes.light) {
+    attachColorScheme(colorSchemes, builtInLight, undefined, 'light');
+  }
+  if (builtInDark && !colorSchemes.dark) {
+    attachColorScheme(colorSchemes, builtInDark, undefined, 'dark');
+  }
   let theme = {
-    defaultColorScheme: 'light',
+    defaultColorScheme,
     ...muiTheme,
     cssVarPrefix,
+    colorSchemeSelector: selector,
     getCssVar,
-    colorSchemes: {
-      ...colorSchemesInput,
-      light: {
-        ...colorSchemesInput.light,
-        palette: lightPalette,
-        opacity: {
-          inputPlaceholder: 0.42,
-          inputUnderline: 0.42,
-          switchTrackDisabled: 0.12,
-          switchTrack: 0.38,
-          ...colorSchemesInput.light?.opacity
-        },
-        overlays: colorSchemesInput.light?.overlays || []
-      },
-      dark: {
-        ...colorSchemesInput.dark,
-        palette: darkPalette,
-        opacity: {
-          inputPlaceholder: 0.5,
-          inputUnderline: 0.7,
-          switchTrackDisabled: 0.2,
-          switchTrack: 0.3,
-          ...colorSchemesInput.dark?.opacity
-        },
-        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
-      }
-    },
+    colorSchemes,
     font: {
       ...prepareTypographyVars(muiTheme.typography),
       ...muiTheme.font
@@ -139,17 +178,18 @@ export default function extendTheme(options = {}, ...args) {
     };
 
     // attach black & white channels to common node
-    if (key === 'light') {
+    if (palette.mode === 'light') {
       setColor(palette.common, 'background', '#fff');
       setColor(palette.common, 'onBackground', '#000');
-    } else {
+    }
+    if (palette.mode === 'dark') {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
     }
 
     // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
-    if (key === 'light') {
+    if (palette.mode === 'light') {
       setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
@@ -158,10 +198,10 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.main)));
       setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
@@ -195,7 +235,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
       const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
@@ -209,7 +249,8 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
       setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
       setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    } else {
+    }
+    if (palette.mode === 'dark') {
       setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
@@ -218,10 +259,10 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.dark)));
       setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
@@ -257,7 +298,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
       const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
@@ -320,16 +361,15 @@ export default function extendTheme(options = {}, ...args) {
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
   const parserConfig = {
     prefix: cssVarPrefix,
+    disableCssColorScheme,
     shouldSkipGeneratingVar,
-    getSelector: getSelector || defaultGetSelector(theme)
+    getSelector: defaultGetSelector(theme)
   };
   const {
     vars,
     generateThemeVars,
     generateStyleSheets
   } = prepareCssVars(theme, parserConfig);
-  theme.attribute = 'data-mui-color-scheme';
-  theme.colorSchemeSelector = ':root';
   theme.vars = vars;
   Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
     theme[key] = value;
@@ -339,7 +379,7 @@ export default function extendTheme(options = {}, ...args) {
   theme.generateSpacing = function generateSpacing() {
     return createSpacing(input.spacing, createUnarySpacing(this));
   };
-  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.getColorSchemeSelector = createGetColorSchemeSelector(selector);
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = {

package/styles/shouldSkipGeneratingVar.js

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

package/utils/getChildRef.d.ts

@@ -0,0 +1 @@
+export default function getChildRef(child: React.ReactElement): React.Ref<any> | null;

package/utils/getChildRef.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export default function getChildRef(child) {
+  if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
+    return null;
+  }
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18
+  // below check is to ensure 'ref' is accessible in both cases
+  return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref;
+}