@mui/system 7.0.0 → 7.0.2

package/modern/cssVars/createCssVarsProvider.js

@@ -1,338 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
-import { useTheme as muiUseTheme } from '@mui/private-theming';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ThemeProvider from "../ThemeProvider/index.js";
-import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-import useCurrentColorScheme from "./useCurrentColorScheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
-export default function createCssVarsProvider(options) {
-  const {
-    themeId,
-    /**
-     * This `theme` object needs to follow a certain structure to
-     * be used correctly by the finel `CssVarsProvider`. It should have a
-     * `colorSchemes` key with the light and dark (and any other) palette.
-     * It should also ideally have a vars object created using `prepareCssVars`.
-     */
-    theme: defaultTheme = {},
-    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    disableTransitionOnChange: designSystemTransitionOnChange = false,
-    defaultColorScheme,
-    resolveTheme
-  } = options;
-  const defaultContext = {
-    allColorSchemes: [],
-    colorScheme: undefined,
-    darkColorScheme: undefined,
-    lightColorScheme: undefined,
-    mode: undefined,
-    setColorScheme: () => {},
-    setMode: () => {},
-    systemMode: undefined
-  };
-  const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-  if (process.env.NODE_ENV !== 'production') {
-    ColorSchemeContext.displayName = 'ColorSchemeContext';
-  }
-  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
-  const defaultColorSchemes = {};
-  const defaultComponents = {};
-  function CssVarsProvider(props) {
-    const {
-      children,
-      theme: themeProp,
-      modeStorageKey = defaultModeStorageKey,
-      colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      disableTransitionOnChange = designSystemTransitionOnChange,
-      storageManager,
-      storageWindow = typeof window === 'undefined' ? undefined : window,
-      documentNode = typeof document === 'undefined' ? undefined : document,
-      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      disableNestedContext = false,
-      disableStyleSheetGeneration = false,
-      defaultMode: initialMode = 'system',
-      forceThemeRerender = false,
-      noSsr
-    } = props;
-    const hasMounted = React.useRef(false);
-    const upperTheme = muiUseTheme();
-    const ctx = React.useContext(ColorSchemeContext);
-    const nested = !!ctx && !disableNestedContext;
-    const initialTheme = React.useMemo(() => {
-      if (themeProp) {
-        return themeProp;
-      }
-      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
-    }, [themeProp]);
-    const scopedTheme = initialTheme[themeId];
-    const restThemeProp = scopedTheme || initialTheme;
-    const {
-      colorSchemes = defaultColorSchemes,
-      components = defaultComponents,
-      cssVarPrefix
-    } = restThemeProp;
-    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
-    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
-    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
-
-    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
-    const {
-      mode: stateMode,
-      setMode,
-      systemMode,
-      lightColorScheme,
-      darkColorScheme,
-      colorScheme: stateColorScheme,
-      setColorScheme
-    } = useCurrentColorScheme({
-      supportedColorSchemes: allColorSchemes,
-      defaultLightColorScheme,
-      defaultDarkColorScheme,
-      modeStorageKey,
-      colorSchemeStorageKey,
-      defaultMode,
-      storageManager,
-      storageWindow,
-      noSsr
-    });
-    let mode = stateMode;
-    let colorScheme = stateColorScheme;
-    if (nested) {
-      mode = ctx.mode;
-      colorScheme = ctx.colorScheme;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (forceThemeRerender && !restThemeProp.vars) {
-        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
-      }
-    }
-
-    // `colorScheme` is undefined on the server and hydration phase
-    let calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-    if (restThemeProp.vars && !forceThemeRerender) {
-      calculatedColorScheme = restThemeProp.defaultColorScheme;
-    }
-    const memoTheme = React.useMemo(() => {
-      // 2. get the `vars` object that refers to the CSS custom properties
-      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
-
-      // 3. Start composing the theme object
-      const theme = {
-        ...restThemeProp,
-        components,
-        colorSchemes,
-        cssVarPrefix,
-        vars: themeVars
-      };
-      if (typeof theme.generateSpacing === 'function') {
-        theme.spacing = theme.generateSpacing();
-      }
-
-      // 4. Resolve the color scheme and merge it to the theme
-      if (calculatedColorScheme) {
-        const scheme = colorSchemes[calculatedColorScheme];
-        if (scheme && typeof scheme === 'object') {
-          // 4.1 Merge the selected color scheme to the theme
-          Object.keys(scheme).forEach(schemeKey => {
-            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-              // shallow merge the 1st level structure of the theme.
-              theme[schemeKey] = {
-                ...theme[schemeKey],
-                ...scheme[schemeKey]
-              };
-            } else {
-              theme[schemeKey] = scheme[schemeKey];
-            }
-          });
-        }
-      }
-      return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
-
-    // 5. Declaring effects
-    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
-    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    useEnhancedEffect(() => {
-      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
-        const selector = colorSchemeSelector;
-        let rule = colorSchemeSelector;
-        if (selector === 'class') {
-          rule = `.%s`;
-        }
-        if (selector === 'data') {
-          rule = `[data-%s]`;
-        }
-        if (selector?.startsWith('data-') && !selector.includes('%s')) {
-          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
-          rule = `[${selector}="%s"]`;
-        }
-        if (rule.startsWith('.')) {
-          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
-          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
-        } else {
-          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
-          if (matches) {
-            const [attr, value] = matches[1].split('=');
-            if (!value) {
-              // for attributes like `data-theme-dark`, `data-theme-light`
-              // remove all the existing data attributes before setting the new one
-              allColorSchemes.forEach(scheme => {
-                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
-              });
-            }
-            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
-          } else {
-            colorSchemeNode.setAttribute(rule, colorScheme);
-          }
-        }
-      }
-    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
-
-    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
-    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-    React.useEffect(() => {
-      let timer;
-      if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        const css = documentNode.createElement('style');
-        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
-        documentNode.head.appendChild(css);
-
-        // Force browser repaint
-        (() => window.getComputedStyle(documentNode.body))();
-        timer = setTimeout(() => {
-          documentNode.head.removeChild(css);
-        }, 1);
-      }
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [colorScheme, disableTransitionOnChange, documentNode]);
-    React.useEffect(() => {
-      hasMounted.current = true;
-      return () => {
-        hasMounted.current = false;
-      };
-    }, []);
-    const contextValue = React.useMemo(() => ({
-      allColorSchemes,
-      colorScheme,
-      darkColorScheme,
-      lightColorScheme,
-      mode,
-      setColorScheme,
-      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
-        if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
-        }
-        setMode(newMode);
-      },
-      systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
-    let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
-      shouldGenerateStyleSheet = false;
-    }
-    const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(ThemeProvider, {
-        themeId: scopedTheme ? themeId : undefined,
-        theme: memoTheme,
-        children: children
-      }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: memoTheme.generateStyleSheets?.() || []
-      })]
-    });
-    if (nested) {
-      return element;
-    }
-    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: element
-    });
-  }
-  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
-    /**
-     * The component tree.
-     */
-    children: PropTypes.node,
-    /**
-     * The node used to attach the color-scheme attribute
-     */
-    colorSchemeNode: PropTypes.any,
-    /**
-     * localStorage key used to store `colorScheme`
-     */
-    colorSchemeStorageKey: PropTypes.string,
-    /**
-     * The default mode when the storage is empty,
-     * require the theme to have `colorSchemes` with light and dark.
-     */
-    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.
-     */
-    disableTransitionOnChange: PropTypes.bool,
-    /**
-     * The document to attach the attribute to.
-     */
-    documentNode: PropTypes.any,
-    /**
-     * If `true`, theme values are recalculated when the mode changes.
-     */
-    forceThemeRerender: PropTypes.bool,
-    /**
-     * The key in the local storage used to store current color scheme.
-     */
-    modeStorageKey: PropTypes.string,
-    /**
-     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
-     * You should use this option in conjuction with `InitColorSchemeScript` component.
-     */
-    noSsr: PropTypes.bool,
-    /**
-     * The storage manager to be used for storing the mode and color scheme
-     * @default using `window.localStorage`
-     */
-    storageManager: PropTypes.func,
-    /**
-     * The window that attaches the 'storage' event listener.
-     * @default window
-     */
-    storageWindow: PropTypes.any,
-    /**
-     * The calculated theme object that will be passed through context.
-     */
-    theme: PropTypes.object
-  } : void 0;
-  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => InitColorSchemeScript({
-    colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultLightColorScheme,
-    defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey,
-    ...params
-  });
-  return {
-    CssVarsProvider,
-    useColorScheme,
-    getInitColorSchemeScript
-  };
-}

package/modern/cssVars/createCssVarsTheme.js

@@ -1,21 +0,0 @@
-import prepareCssVars from "./prepareCssVars.js";
-import { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
-import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-function createCssVarsTheme({
-  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
-  ...theme
-}) {
-  const output = theme;
-  const result = prepareCssVars(output, {
-    ...theme,
-    prefix: theme.cssVarPrefix,
-    colorSchemeSelector
-  });
-  output.vars = result.vars;
-  output.generateThemeVars = result.generateThemeVars;
-  output.generateStyleSheets = result.generateStyleSheets;
-  output.colorSchemeSelector = colorSchemeSelector;
-  output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
-  return output;
-}
-export default createCssVarsTheme;

package/modern/cssVars/createGetCssVar.js

@@ -1,22 +0,0 @@
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-export default function createGetCssVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-    const value = vars[0];
-    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
-      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-    }
-    return `, ${value}`;
-  }
-
-  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-  const getCssVar = (field, ...fallbacks) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
-  };
-  return getCssVar;
-}

package/modern/cssVars/cssVarsParser.js

@@ -1,129 +0,0 @@
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
-  let temp = obj;
-  keys.forEach((k, index) => {
-    if (index === keys.length - 1) {
-      if (Array.isArray(temp)) {
-        temp[Number(k)] = value;
-      } else if (temp && typeof temp === 'object') {
-        temp[k] = value;
-      }
-    } else if (temp && typeof temp === 'object') {
-      if (!temp[k]) {
-        temp[k] = arrayKeys.includes(k) ? [] : {};
-      }
-      temp = temp[k];
-    }
-  });
-};
-
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-  function recurse(object, parentKeys = [], arrayKeys = []) {
-    Object.entries(object).forEach(([key, value]) => {
-      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
-        if (value !== undefined && value !== null) {
-          if (typeof value === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
-          } else {
-            callback([...parentKeys, key], value, arrayKeys);
-          }
-        }
-      }
-    });
-  }
-  recurse(obj);
-};
-const getCssValue = (keys, value) => {
-  if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // CSS property that are unitless
-      return value;
-    }
-    const lastKey = keys[keys.length - 1];
-    if (lastKey.toLowerCase().includes('opacity')) {
-      // opacity values are unitless
-      return value;
-    }
-    return `${value}px`;
-  }
-  return value;
-};
-
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
- *
- * @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 } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * 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)' } } }
- */
-export default function cssVarsParser(theme, options) {
-  const {
-    prefix,
-    shouldSkipGeneratingVar
-  } = options || {};
-  const css = {};
-  const vars = {};
-  const varsWithDefaults = {};
-  walkObjectDeep(theme, (keys, value, arrayKeys) => {
-    if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
-        // only create css & var if `shouldSkipGeneratingVar` return false
-        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
-        const resolvedValue = getCssValue(keys, value);
-        Object.assign(css, {
-          [cssVar]: resolvedValue
-        });
-        assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
-        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys);
-      }
-    }
-  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
-  );
-  return {
-    css,
-    vars,
-    varsWithDefaults
-  };
-}

package/modern/cssVars/getColorSchemeSelector.js

@@ -1,26 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export function createGetColorSchemeSelector(selector) {
-  return function getColorSchemeSelector(colorScheme) {
-    if (selector === 'media') {
-      if (process.env.NODE_ENV !== 'production') {
-        if (colorScheme !== 'light' && colorScheme !== 'dark') {
-          console.error(`MUI: @media (prefers-color-scheme) supports only 'light' or 'dark', but receive '${colorScheme}'.`);
-        }
-      }
-      return `@media (prefers-color-scheme: ${colorScheme})`;
-    }
-    if (selector) {
-      if (selector.startsWith('data-') && !selector.includes('%s')) {
-        return `[${selector}="${colorScheme}"] &`;
-      }
-      if (selector === 'class') {
-        return `.${colorScheme} &`;
-      }
-      if (selector === 'data') {
-        return `[data-${colorScheme}] &`;
-      }
-      return `${selector.replace('%s', colorScheme)} &`;
-    }
-    return '&';
-  };
-}

package/modern/cssVars/index.js

@@ -1,5 +0,0 @@
-export { default } from "./createCssVarsProvider.js";
-export { default as prepareCssVars } from "./prepareCssVars.js";
-export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
-export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
-export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";

package/modern/cssVars/localStorageManager.js

@@ -1,51 +0,0 @@
-function noop() {}
-const localStorageManager = ({
-  key,
-  storageWindow
-}) => {
-  if (!storageWindow && typeof window !== 'undefined') {
-    storageWindow = window;
-  }
-  return {
-    get(defaultValue) {
-      if (typeof window === 'undefined') {
-        return undefined;
-      }
-      if (!storageWindow) {
-        return defaultValue;
-      }
-      let value;
-      try {
-        value = storageWindow.localStorage.getItem(key);
-      } catch {
-        // Unsupported
-      }
-      return value || defaultValue;
-    },
-    set: value => {
-      if (storageWindow) {
-        try {
-          storageWindow.localStorage.setItem(key, value);
-        } catch {
-          // Unsupported
-        }
-      }
-    },
-    subscribe: handler => {
-      if (!storageWindow) {
-        return noop;
-      }
-      const listener = event => {
-        const value = event.newValue;
-        if (event.key === key) {
-          handler(value);
-        }
-      };
-      storageWindow.addEventListener('storage', listener);
-      return () => {
-        storageWindow.removeEventListener('storage', listener);
-      };
-    }
-  };
-};
-export default localStorageManager;