@mui/system 7.0.0 → 7.0.2

package/modern/cssVars/prepareCssVars.js

@@ -1,153 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-import cssVarsParser from "./cssVarsParser.js";
-function prepareCssVars(theme, parserConfig = {}) {
-  const {
-    getSelector = defaultGetSelector,
-    disableCssColorScheme,
-    colorSchemeSelector: selector
-  } = parserConfig;
-  // @ts-ignore - ignore components do not exist
-  const {
-    colorSchemes = {},
-    components,
-    defaultColorScheme = 'light',
-    ...otherTheme
-  } = theme;
-  const {
-    vars: rootVars,
-    css: rootCss,
-    varsWithDefaults: rootVarsWithDefaults
-  } = cssVarsParser(otherTheme, parserConfig);
-  let themeVars = rootVarsWithDefaults;
-  const colorSchemesMap = {};
-  const {
-    [defaultColorScheme]: defaultScheme,
-    ...otherColorSchemes
-  } = colorSchemes;
-  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
-    const {
-      vars,
-      css,
-      varsWithDefaults
-    } = cssVarsParser(scheme, parserConfig);
-    themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap[key] = {
-      css,
-      vars
-    };
-  });
-  if (defaultScheme) {
-    // default color scheme vars should be merged last to set as default
-    const {
-      css,
-      vars,
-      varsWithDefaults
-    } = cssVarsParser(defaultScheme, parserConfig);
-    themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap[defaultColorScheme] = {
-      css,
-      vars
-    };
-  }
-  function defaultGetSelector(colorScheme, cssObject) {
-    let rule = selector;
-    if (selector === 'class') {
-      rule = '.%s';
-    }
-    if (selector === 'data') {
-      rule = '[data-%s]';
-    }
-    if (selector?.startsWith('data-') && !selector.includes('%s')) {
-      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
-      rule = `[${selector}="%s"]`;
-    }
-    if (colorScheme) {
-      if (rule === 'media') {
-        if (theme.defaultColorScheme === colorScheme) {
-          return ':root';
-        }
-        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
-        return {
-          [`@media (prefers-color-scheme: ${mode})`]: {
-            ':root': cssObject
-          }
-        };
-      }
-      if (rule) {
-        if (theme.defaultColorScheme === colorScheme) {
-          return `:root, ${rule.replace('%s', String(colorScheme))}`;
-        }
-        return rule.replace('%s', String(colorScheme));
-      }
-    }
-    return ':root';
-  }
-  const generateThemeVars = () => {
-    let vars = {
-      ...rootVars
-    };
-    Object.entries(colorSchemesMap).forEach(([, {
-      vars: schemeVars
-    }]) => {
-      vars = deepmerge(vars, schemeVars);
-    });
-    return vars;
-  };
-  const generateStyleSheets = () => {
-    const stylesheets = [];
-    const colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(key, css) {
-      if (Object.keys(css).length) {
-        stylesheets.push(typeof key === 'string' ? {
-          [key]: {
-            ...css
-          }
-        } : key);
-      }
-    }
-    insertStyleSheet(getSelector(undefined, {
-      ...rootCss
-    }), rootCss);
-    const {
-      [colorScheme]: defaultSchemeVal,
-      ...other
-    } = colorSchemesMap;
-    if (defaultSchemeVal) {
-      // default color scheme has to come before other color schemes
-      const {
-        css
-      } = defaultSchemeVal;
-      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
-      const finalCss = !disableCssColorScheme && cssColorSheme ? {
-        colorScheme: cssColorSheme,
-        ...css
-      } : {
-        ...css
-      };
-      insertStyleSheet(getSelector(colorScheme, {
-        ...finalCss
-      }), finalCss);
-    }
-    Object.entries(other).forEach(([key, {
-      css
-    }]) => {
-      const cssColorSheme = colorSchemes[key]?.palette?.mode;
-      const finalCss = !disableCssColorScheme && cssColorSheme ? {
-        colorScheme: cssColorSheme,
-        ...css
-      } : {
-        ...css
-      };
-      insertStyleSheet(getSelector(key, {
-        ...finalCss
-      }), finalCss);
-    });
-    return stylesheets;
-  };
-  return {
-    vars: themeVars,
-    generateThemeVars,
-    generateStyleSheets
-  };
-}
-export default prepareCssVars;

package/modern/cssVars/prepareTypographyVars.js

@@ -1,11 +0,0 @@
-export default function prepareTypographyVars(typography) {
-  const vars = {};
-  const entries = Object.entries(typography);
-  entries.forEach(entry => {
-    const [key, value] = entry;
-    if (typeof value === 'object') {
-      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
-    }
-  });
-  return vars;
-}

package/modern/cssVars/useCurrentColorScheme.js

@@ -1,228 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-import localStorageManager from "./localStorageManager.js";
-function noop() {}
-export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
-    if (mql.matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-  return undefined;
-}
-function processState(state, callback) {
-  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
-    return callback('light');
-  }
-  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
-    return callback('dark');
-  }
-  return undefined;
-}
-export function getColorScheme(state) {
-  return processState(state, mode => {
-    if (mode === 'light') {
-      return state.lightColorScheme;
-    }
-    if (mode === 'dark') {
-      return state.darkColorScheme;
-    }
-    return undefined;
-  });
-}
-export default function useCurrentColorScheme(options) {
-  const {
-    defaultMode = 'light',
-    defaultLightColorScheme,
-    defaultDarkColorScheme,
-    supportedColorSchemes = [],
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    storageManager = localStorageManager,
-    noSsr = false
-  } = options;
-  const joinedColorSchemes = supportedColorSchemes.join(',');
-  const isMultiSchemes = supportedColorSchemes.length > 1;
-  const modeStorage = React.useMemo(() => storageManager?.({
-    key: modeStorageKey,
-    storageWindow
-  }), [storageManager, modeStorageKey, storageWindow]);
-  const lightStorage = React.useMemo(() => storageManager?.({
-    key: `${colorSchemeStorageKey}-light`,
-    storageWindow
-  }), [storageManager, colorSchemeStorageKey, storageWindow]);
-  const darkStorage = React.useMemo(() => storageManager?.({
-    key: `${colorSchemeStorageKey}-dark`,
-    storageWindow
-  }), [storageManager, colorSchemeStorageKey, storageWindow]);
-  const [state, setState] = React.useState(() => {
-    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
-    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
-    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
-    return {
-      mode: initialMode,
-      systemMode: getSystemMode(initialMode),
-      lightColorScheme,
-      darkColorScheme
-    };
-  });
-  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
-  React.useEffect(() => {
-    setIsClient(true); // to rerender the component after hydration
-  }, []);
-  const colorScheme = getColorScheme(state);
-  const setMode = React.useCallback(mode => {
-    setState(currentState => {
-      if (mode === currentState.mode) {
-        // do nothing if mode does not change
-        return currentState;
-      }
-      const newMode = mode ?? defaultMode;
-      modeStorage?.set(newMode);
-      return {
-        ...currentState,
-        mode: newMode,
-        systemMode: getSystemMode(newMode)
-      };
-    });
-  }, [modeStorage, defaultMode]);
-  const setColorScheme = React.useCallback(value => {
-    if (!value) {
-      setState(currentState => {
-        lightStorage?.set(defaultLightColorScheme);
-        darkStorage?.set(defaultDarkColorScheme);
-        return {
-          ...currentState,
-          lightColorScheme: defaultLightColorScheme,
-          darkColorScheme: defaultDarkColorScheme
-        };
-      });
-    } else if (typeof value === 'string') {
-      if (value && !joinedColorSchemes.includes(value)) {
-        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
-      } else {
-        setState(currentState => {
-          const newState = {
-            ...currentState
-          };
-          processState(currentState, mode => {
-            if (mode === 'light') {
-              lightStorage?.set(value);
-              newState.lightColorScheme = value;
-            }
-            if (mode === 'dark') {
-              darkStorage?.set(value);
-              newState.darkColorScheme = value;
-            }
-          });
-          return newState;
-        });
-      }
-    } else {
-      setState(currentState => {
-        const newState = {
-          ...currentState
-        };
-        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
-        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
-        if (newLightColorScheme) {
-          if (!joinedColorSchemes.includes(newLightColorScheme)) {
-            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-          } else {
-            newState.lightColorScheme = newLightColorScheme;
-            lightStorage?.set(newLightColorScheme);
-          }
-        }
-        if (newDarkColorScheme) {
-          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
-            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-          } else {
-            newState.darkColorScheme = newDarkColorScheme;
-            darkStorage?.set(newDarkColorScheme);
-          }
-        }
-        return newState;
-      });
-    }
-  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(event => {
-    if (state.mode === 'system') {
-      setState(currentState => {
-        const systemMode = event?.matches ? 'dark' : 'light';
-
-        // Early exit, nothing changed.
-        if (currentState.systemMode === systemMode) {
-          return currentState;
-        }
-        return {
-          ...currentState,
-          systemMode
-        };
-      });
-    }
-  }, [state.mode]);
-
-  // Ref hack to avoid adding handleMediaQuery as a dep
-  const mediaListener = React.useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
-      return undefined;
-    }
-    const handler = (...args) => mediaListener.current(...args);
-
-    // Always listen to System preference
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
-
-    // Intentionally use deprecated listener methods to support iOS & old browsers
-    media.addListener(handler);
-    handler(media);
-    return () => {
-      media.removeListener(handler);
-    };
-  }, [isMultiSchemes]);
-
-  // Handle when localStorage has changed
-  React.useEffect(() => {
-    if (isMultiSchemes) {
-      const unsubscribeMode = modeStorage?.subscribe(value => {
-        if (!value || ['light', 'dark', 'system'].includes(value)) {
-          setMode(value || defaultMode);
-        }
-      }) || noop;
-      const unsubscribeLight = lightStorage?.subscribe(value => {
-        if (!value || joinedColorSchemes.match(value)) {
-          setColorScheme({
-            light: value
-          });
-        }
-      }) || noop;
-      const unsubscribeDark = darkStorage?.subscribe(value => {
-        if (!value || joinedColorSchemes.match(value)) {
-          setColorScheme({
-            dark: value
-          });
-        }
-      }) || noop;
-      return () => {
-        unsubscribeMode();
-        unsubscribeLight();
-        unsubscribeDark();
-      };
-    }
-    return undefined;
-  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
-  return {
-    ...state,
-    mode: isClient ? state.mode : undefined,
-    systemMode: isClient ? state.systemMode : undefined,
-    colorScheme: isClient ? colorScheme : undefined,
-    setMode,
-    setColorScheme
-  };
-}

package/modern/display/display.js

@@ -1,27 +0,0 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-export const displayPrint = style({
-  prop: 'displayPrint',
-  cssProperty: false,
-  transform: value => ({
-    '@media print': {
-      display: value
-    }
-  })
-});
-export const displayRaw = style({
-  prop: 'display'
-});
-export const overflow = style({
-  prop: 'overflow'
-});
-export const textOverflow = style({
-  prop: 'textOverflow'
-});
-export const visibility = style({
-  prop: 'visibility'
-});
-export const whiteSpace = style({
-  prop: 'whiteSpace'
-});
-export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

package/modern/display/index.js

@@ -1,2 +0,0 @@
-export { default } from "./display.js";
-export * from "./display.js";

package/modern/flexbox/flexbox.js

@@ -1,43 +0,0 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-export const flexBasis = style({
-  prop: 'flexBasis'
-});
-export const flexDirection = style({
-  prop: 'flexDirection'
-});
-export const flexWrap = style({
-  prop: 'flexWrap'
-});
-export const justifyContent = style({
-  prop: 'justifyContent'
-});
-export const alignItems = style({
-  prop: 'alignItems'
-});
-export const alignContent = style({
-  prop: 'alignContent'
-});
-export const order = style({
-  prop: 'order'
-});
-export const flex = style({
-  prop: 'flex'
-});
-export const flexGrow = style({
-  prop: 'flexGrow'
-});
-export const flexShrink = style({
-  prop: 'flexShrink'
-});
-export const alignSelf = style({
-  prop: 'alignSelf'
-});
-export const justifyItems = style({
-  prop: 'justifyItems'
-});
-export const justifySelf = style({
-  prop: 'justifySelf'
-});
-const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-export default flexbox;

package/modern/flexbox/index.js

@@ -1,2 +0,0 @@
-export { default } from "./flexbox.js";
-export * from "./flexbox.js";

package/modern/getThemeValue/getThemeValue.js

@@ -1,51 +0,0 @@
-import borders from "../borders/index.js";
-import display from "../display/index.js";
-import flexbox from "../flexbox/index.js";
-import grid from "../cssGrid/index.js";
-import positions from "../positions/index.js";
-import palette from "../palette/index.js";
-import shadows from "../shadows/index.js";
-import sizing from "../sizing/index.js";
-import spacing from "../spacing/index.js";
-import typography from "../typography/index.js";
-const filterPropsMapping = {
-  borders: borders.filterProps,
-  display: display.filterProps,
-  flexbox: flexbox.filterProps,
-  grid: grid.filterProps,
-  positions: positions.filterProps,
-  palette: palette.filterProps,
-  shadows: shadows.filterProps,
-  sizing: sizing.filterProps,
-  spacing: spacing.filterProps,
-  typography: typography.filterProps
-};
-export const styleFunctionMapping = {
-  borders,
-  display,
-  flexbox,
-  grid,
-  positions,
-  palette,
-  shadows,
-  sizing,
-  spacing,
-  typography
-};
-export const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-  filterPropsMapping[styleFnName].forEach(propName => {
-    acc[propName] = styleFunctionMapping[styleFnName];
-  });
-  return acc;
-}, {});
-function getThemeValue(prop, value, theme) {
-  const inputProps = {
-    [prop]: value,
-    theme
-  };
-  const styleFunction = propToStyleFunction[prop];
-  return styleFunction ? styleFunction(inputProps) : {
-    [prop]: value
-  };
-}
-export default getThemeValue;

package/modern/getThemeValue/index.js

@@ -1,2 +0,0 @@
-export { default } from "./getThemeValue.js";
-export * from "./getThemeValue.js";

package/modern/index.js

@@ -1,75 +0,0 @@
-/**
- * @mui/system v7.0.0
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
-export { default as GlobalStyles } from "./GlobalStyles/index.js";
-export { default as borders } from "./borders/index.js";
-export * from "./borders/index.js";
-export { default as breakpoints } from "./breakpoints/index.js";
-export { default as cssContainerQueries } from "./cssContainerQueries/index.js";
-export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from "./breakpoints/index.js";
-export { default as compose } from "./compose/index.js";
-export { default as display } from "./display/index.js";
-export { default as flexbox } from "./flexbox/index.js";
-export * from "./flexbox/index.js";
-export { default as grid } from "./cssGrid/index.js";
-export * from "./cssGrid/index.js";
-export { default as palette } from "./palette/index.js";
-export * from "./palette/index.js";
-export { default as positions } from "./positions/index.js";
-export * from "./positions/index.js";
-export { default as shadows } from "./shadows/index.js";
-export { default as sizing } from "./sizing/index.js";
-export * from "./sizing/index.js";
-export { default as spacing } from "./spacing/index.js";
-export * from "./spacing/index.js";
-export { default as style, getPath, getStyleValue } from "./style/index.js";
-export { default as typography } from "./typography/index.js";
-export * from "./typography/index.js";
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
-// TODO: Remove this function in v6
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatErrorMessage(19));
-}
-export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
-export { default as Box } from "./Box/index.js";
-export { default as createBox } from "./createBox/index.js";
-export { default as createStyled } from "./createStyled/index.js";
-export * from "./createStyled/index.js";
-export { default as styled } from "./styled/index.js";
-export { default as createTheme } from "./createTheme/index.js";
-export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.js";
-export { default as createSpacing } from "./createTheme/createSpacing.js";
-export { default as shape } from "./createTheme/shape.js";
-export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.js";
-export { default as useTheme } from "./useTheme/index.js";
-export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.js";
-export { default as useMediaQuery } from "./useMediaQuery/index.js";
-export * from "./colorManipulator/index.js";
-export { default as ThemeProvider } from "./ThemeProvider/index.js";
-export { default as unstable_memoTheme } from "./memoTheme.js";
-export { default as unstable_createCssVarsProvider } from "./cssVars/createCssVarsProvider.js";
-export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.js";
-export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.js";
-export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.js";
-export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.js";
-export { default as responsivePropType } from "./responsivePropType/index.js";
-export { default as RtlProvider } from "./RtlProvider/index.js";
-export * from "./RtlProvider/index.js";
-export * from "./version/index.js";
-
-/** ----------------- */
-/** Layout components */
-export { default as createContainer } from "./Container/createContainer.js";
-export { default as Container } from "./Container/index.js";
-export * from "./Container/index.js";
-export { default as Grid } from "./Grid/Grid.js";
-export * from "./Grid/index.js";
-export { default as Stack } from "./Stack/Stack.js";
-export * from "./Stack/index.js";

package/modern/memoTheme.js

@@ -1,28 +0,0 @@
-import preprocessStyles from "./preprocessStyles.js";
-
-/* eslint-disable @typescript-eslint/naming-convention */
-
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = {
-  theme: undefined
-};
-
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-export default function unstable_memoTheme(styleFn) {
-  let lastValue;
-  let lastTheme;
-  return function styleMemoized(props) {
-    let value = lastValue;
-    if (value === undefined || props.theme !== lastTheme) {
-      arg.theme = props.theme;
-      value = preprocessStyles(styleFn(arg));
-      lastValue = value;
-      lastTheme = props.theme;
-    }
-    return value;
-  };
-}

package/modern/memoize/index.js

@@ -1 +0,0 @@
-export { default } from "./memoize.js";

package/modern/memoize/memoize.js

@@ -1,9 +0,0 @@
-export default function memoize(fn) {
-  const cache = {};
-  return arg => {
-    if (cache[arg] === undefined) {
-      cache[arg] = fn(arg);
-    }
-    return cache[arg];
-  };
-}

package/modern/merge/index.js

@@ -1 +0,0 @@
-export { default } from "./merge.js";

package/modern/merge/merge.js

@@ -1,10 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-function merge(acc, item) {
-  if (!item) {
-    return acc;
-  }
-  return deepmerge(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
-}
-export default merge;

package/modern/package.json

@@ -1 +0,0 @@
-{"type":"module","sideEffects":false}

package/modern/palette/index.js

@@ -1,2 +0,0 @@
-export { default } from "./palette.js";
-export * from "./palette.js";