@mui/system 7.0.1 → 7.1.0

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;

package/modern/cssVars/prepareCssVars.d.ts

@@ -1,16 +0,0 @@
-export interface DefaultCssVarsTheme {
-  colorSchemes?: Record<string, any>;
-  defaultColorScheme?: string;
-}
-declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
-  prefix?: string;
-  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-  disableCssColorScheme?: boolean;
-  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-  getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
-}): {
-  vars: ThemeVars;
-  generateThemeVars: () => ThemeVars;
-  generateStyleSheets: () => Record<string, any>[];
-};
-export default prepareCssVars;

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.d.ts

@@ -1,4 +0,0 @@
-type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
-export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
-export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
-export {};

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.d.ts

@@ -1,56 +0,0 @@
-import type { StorageManager } from "./localStorageManager.js";
-export type Mode = 'light' | 'dark' | 'system';
-export type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-  /**
-   * User selected mode.
-   * Note: on the server, mode is always undefined
-   */
-  mode: 'light' | 'dark' | 'system' | undefined;
-  /**
-   * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-   */
-  systemMode: 'light' | 'dark' | undefined;
-  /**
-   * The color scheme for the light mode.
-   */
-  lightColorScheme: SupportedColorScheme;
-  /**
-   * The color scheme for the dark mode.
-   */
-  darkColorScheme: SupportedColorScheme;
-}
-export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-  /**
-   * The current application color scheme. It is always `undefined` on the server.
-   */
-  colorScheme: SupportedColorScheme | undefined;
-  /**
-   * `mode` is saved to internal state and localStorage
-   * If `mode` is null, it will be reset to the defaultMode
-   */
-  setMode: (mode: Mode | null) => void;
-  /**
-   * `colorScheme` is saved to internal state and localStorage
-   * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-   */
-  setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-    light: SupportedColorScheme | null;
-    dark: SupportedColorScheme | null;
-  }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-  defaultLightColorScheme: SupportedColorScheme;
-  defaultDarkColorScheme: SupportedColorScheme;
-  supportedColorSchemes: Array<SupportedColorScheme>;
-  defaultMode?: Mode;
-  modeStorageKey?: string;
-  colorSchemeStorageKey?: string;
-  storageWindow?: Window | null;
-  storageManager?: StorageManager | null;
-  noSsr?: boolean;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};

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.d.ts

@@ -1,3 +0,0 @@
-import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;
-export default display;

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.d.ts

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

package/modern/display/index.js

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

package/modern/flexbox/flexbox.d.ts

@@ -1,3 +0,0 @@
-import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;
-export default flexbox;

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.d.ts

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

package/modern/flexbox/index.js

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

package/modern/getThemeValue/getThemeValue.d.ts

@@ -1 +0,0 @@
-export default function getThemeValue(prop: string, value: any, theme: object): any;

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.d.ts

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

package/modern/getThemeValue/index.js

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