@mui/system 5.10.16 → 5.10.17

package/esm/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
@@ -217,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 == null ? void 0 : 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 = {
     /**
@@ -262,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/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @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/index.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/legacy/colorManipulator.js

@@ -96,6 +96,16 @@ export var colorChannel = function colorChannel(color) {
     return decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? "".concat(val, "%") : val;
   }).join(' ');
 };
+export var private_safeColorChannel = function 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.
@@ -227,6 +237,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.
@@ -246,6 +266,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.
@@ -269,6 +299,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.
@@ -280,4 +320,14 @@ export function lighten(color, coefficient) {
 export function emphasize(color) {
   var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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/legacy/cssVars/createCssVarsProvider.js

@@ -8,6 +8,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';
@@ -68,8 +69,15 @@ export default function createCssVarsProvider(options) {
       _ref$colorSchemeSelec = _ref.colorSchemeSelector,
       colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
       _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
-      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
+      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera,
+      _ref$disableNestedCon = _ref.disableNestedContext,
+      disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
+      _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
     var hasMounted = React.useRef(false);
+    var upperTheme = muiUseTheme();
+    var ctx = React.useContext(ColorSchemeContext);
+    var nested = !!ctx && !disableNestedContext;
     var _themeProp$colorSchem = themeProp.colorSchemes,
       colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
       _themeProp$components = themeProp.components,
@@ -90,13 +98,19 @@ export default function createCssVarsProvider(options) {
         defaultMode: defaultMode,
         storageWindow: storageWindow
       }),
-      mode = _useCurrentColorSchem.mode,
+      stateMode = _useCurrentColorSchem.mode,
       setMode = _useCurrentColorSchem.setMode,
       systemMode = _useCurrentColorSchem.systemMode,
       lightColorScheme = _useCurrentColorSchem.lightColorScheme,
       darkColorScheme = _useCurrentColorSchem.darkColorScheme,
-      colorScheme = _useCurrentColorSchem.colorScheme,
+      stateColorScheme = _useCurrentColorSchem.colorScheme,
       setColorScheme = _useCurrentColorSchem.setColorScheme;
+    var mode = stateMode;
+    var colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     var calculatedMode = function () {
       if (!mode) {
         // This scope occurs on the server
@@ -238,19 +252,31 @@ export default function createCssVarsProvider(options) {
         allColorSchemes: allColorSchemes
       };
     }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/_jsx(GlobalStyles, {
-        styles: _defineProperty({}, colorSchemeSelector, rootCss)
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    var shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    var element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(GlobalStyles, {
+          styles: _defineProperty({}, 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 = {
     /**
@@ -281,6 +307,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/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @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/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
@@ -217,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 = {
     /**
@@ -262,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/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @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.16",
+  "version": "5.10.17",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};