@mui/system 5.10.15 → 5.10.17

package/modern/colorManipulator.js

@@ -90,6 +90,16 @@ export const colorChannel = color => {
   const decomposedColor = decomposeColor(color);
   return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
 };
+export const private_safeColorChannel = (color, warning) => {
+  try {
+    return colorChannel(color);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+};
 
 /**
  * Converts a color object with type and values to a string.
@@ -220,6 +230,16 @@ export function alpha(color, value) {
   }
   return recomposeColor(color);
 }
+export function private_safeAlpha(color, value, warning) {
+  try {
+    return alpha(color, value);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darkens a color.
@@ -239,6 +259,16 @@ export function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeDarken(color, coefficient, warning) {
+  try {
+    return darken(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Lightens a color.
@@ -262,6 +292,16 @@ export function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function private_safeLighten(color, coefficient, warning) {
+  try {
+    return lighten(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -272,4 +312,14 @@ export function lighten(color, coefficient) {
  */
 export function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+export function private_safeEmphasize(color, coefficient, warning) {
+  try {
+    return private_safeEmphasize(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
+import { useTheme as muiUseTheme } from '@mui/private-theming';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -50,9 +51,14 @@ export default function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
+    disableNestedContext = false,
+    disableStyleSheetGeneration = false
   }) {
     const hasMounted = React.useRef(false);
+    const upperTheme = muiUseTheme();
+    const ctx = React.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
     const {
         colorSchemes = {},
         components = {},
@@ -65,12 +71,12 @@ export default function createCssVarsProvider(options) {
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
-      mode,
+      mode: stateMode,
       setMode,
       systemMode,
       lightColorScheme,
       darkColorScheme,
-      colorScheme,
+      colorScheme: stateColorScheme,
       setColorScheme
     } = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
@@ -81,6 +87,12 @@ export default function createCssVarsProvider(options) {
       defaultMode,
       storageWindow
     });
+    let mode = stateMode;
+    let colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     const calculatedMode = (() => {
       if (!mode) {
         // This scope occurs on the server
@@ -106,15 +118,14 @@ export default function createCssVarsProvider(options) {
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
-      vars: rootVars,
-      parsedTheme
+      vars: rootVars
     } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
 
     // 3. Start composing the theme object
-    const theme = _extends({}, parsedTheme, {
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
@@ -130,8 +141,7 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars,
-        parsedTheme: parsedScheme
+        vars
       } = cssVarsParser(scheme, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
@@ -139,12 +149,12 @@ export default function createCssVarsProvider(options) {
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
-        Object.keys(parsedScheme).forEach(schemeKey => {
-          if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') {
+        Object.keys(scheme).forEach(schemeKey => {
+          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
-            theme[schemeKey] = parsedScheme[schemeKey];
+            theme[schemeKey] = scheme[schemeKey];
           }
         });
         if (theme.palette) {
@@ -219,21 +229,33 @@ export default function createCssVarsProvider(options) {
       setColorScheme,
       allColorSchemes
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: {
-          [colorSchemeSelector]: rootCss
-        }
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: {
+            [colorSchemeSelector]: rootCss
+          }
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -264,6 +286,16 @@ export default function createCssVarsProvider(options) {
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */

package/modern/cssVars/cssVarsParser.js

@@ -86,10 +86,10 @@ const getCssValue = (keys, value) => {
  * }} options.
  *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
  *
  * @example
- * const { css, vars, parsedTheme } = parser({
+ * const { css, vars } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
  *   palette: { primary: { 500: 'var(--color)' } }
@@ -97,7 +97,6 @@ const getCssValue = (keys, value) => {
  *
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 export default function cssVarsParser(theme, options) {
   const {
@@ -106,7 +105,6 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -118,13 +116,11 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
 
   return {
     css,
-    vars,
-    parsedTheme
+    vars
   };
 }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.15
+/** @license MUI v5.10.17
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.15",
+  "version": "5.10.17",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.1",
-    "@mui/private-theming": "^5.10.15",
-    "@mui/styled-engine": "^5.10.14",
-    "@mui/types": "^7.2.1",
-    "@mui/utils": "^5.10.15",
+    "@mui/private-theming": "^5.10.16",
+    "@mui/styled-engine": "^5.10.16",
+    "@mui/types": "^7.2.2",
+    "@mui/utils": "^5.10.16",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",
     "prop-types": "^15.8.1"