@mui/system 5.15.13 → 6.0.0-alpha.0

package/cssVars/prepareCssVars.js

@@ -1,80 +1,99 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
-function prepareCssVars(theme, parserConfig) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
+import deepmerge from '@mui/utils/deepmerge';
+import cssVarsParser from './cssVarsParser';
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
   // @ts-ignore - ignore components do not exist
   const {
       colorSchemes = {},
       defaultColorScheme = 'light'
     } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
   const {
     vars: rootVars,
     css: rootCss,
     varsWithDefaults: rootVarsWithDefaults
-  } = (0, _cssVarsParser.default)(otherTheme, parserConfig);
+  } = cssVarsParser(otherTheme, parserConfig);
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: light
+      [defaultColorScheme]: defaultScheme
     } = colorSchemes,
-    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
       css,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(scheme, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css,
       vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(light, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(defaultScheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
-  const generateCssVars = colorScheme => {
-    var _parserConfig$getSele2;
-    if (!colorScheme) {
-      var _parserConfig$getSele;
-      const css = (0, _extends2.default)({}, rootCss);
-      return {
-        css,
-        vars: rootVars,
-        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, css)) || ':root'
-      };
+  const generateThemeVars = () => {
+    let vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  const generateStyleSheets = () => {
+    const stylesheets = [];
+    const colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? {
+          [selector]: _extends({}, css)
+        } : selector);
+      }
     }
-    const css = (0, _extends2.default)({}, colorSchemesMap[colorScheme].css);
-    return {
-      css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
-    };
+    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    const {
+        [colorScheme]: defaultSchemeVal
+      } = colorSchemesMap,
+      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      const {
+        css
+      } = defaultSchemeVal;
+      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+    }
+    Object.entries(rest).forEach(([key, {
+      css
+    }]) => {
+      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars
+    generateThemeVars,
+    generateStyleSheets
   };
 }
-var _default = exports.default = prepareCssVars;
+export default prepareCssVars;

package/cssVars/useCurrentColorScheme.js

@@ -1,19 +1,9 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useCurrentColorScheme;
-exports.getColorScheme = getColorScheme;
-exports.getSystemMode = getSystemMode;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function getSystemMode(mode) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
     if (mql.matches) {
@@ -32,7 +22,7 @@ function processState(state, callback) {
   }
   return undefined;
 }
-function getColorScheme(state) {
+export function getColorScheme(state) {
   return processState(state, mode => {
     if (mode === 'light') {
       return state.lightColorScheme;
@@ -59,14 +49,14 @@ function initializeValue(key, defaultValue) {
   }
   return value || defaultValue;
 }
-function useCurrentColorScheme(options) {
+export default function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
@@ -88,13 +78,13 @@ function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
         // Unsupported
       }
-      return (0, _extends2.default)({}, currentState, {
+      return _extends({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
       });
@@ -109,7 +99,7 @@ function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return (0, _extends2.default)({}, currentState, {
+        return _extends({}, currentState, {
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
         });
@@ -119,7 +109,7 @@ function useCurrentColorScheme(options) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = (0, _extends2.default)({}, currentState);
+          const newState = _extends({}, currentState);
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -138,7 +128,7 @@ function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = (0, _extends2.default)({}, currentState);
+        const newState = _extends({}, currentState);
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -169,11 +159,19 @@ function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => (0, _extends2.default)({}, currentState, {
-        systemMode: e != null && e.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event?.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -189,38 +187,42 @@ function useCurrentColorScheme(options) {
     // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
-    return () => media.removeListener(handler);
+    return () => {
+      media.removeListener(handler);
+    };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    const handleStorage = event => {
-      const value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      const handleStorage = event => {
+        const value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
-      return () => storageWindow.removeEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return (0, _extends2.default)({}, state, {
+  return _extends({}, state, {
     colorScheme,
     setMode,
     setColorScheme

package/display/display.d.ts

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

package/{esm → display}/display.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/display/index.d.ts

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

package/display/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './display';
+export * from './display';

package/display/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/display/index.js",
+  "types": "./index.d.ts"
+}

package/flexbox/flexbox.d.ts

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

package/{modern → flexbox}/flexbox.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const flexBasis = style({
   prop: 'flexBasis'
 });

package/flexbox/index.d.ts

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

package/flexbox/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './flexbox';
+export * from './flexbox';

package/flexbox/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/flexbox/index.js",
+  "types": "./index.d.ts"
+}

package/getThemeValue/getThemeValue.d.ts

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

package/{esm → getThemeValue}/getThemeValue.js

@@ -1,13 +1,13 @@
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './cssGrid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import positions from '../positions';
+import palette from '../palette';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/getThemeValue/index.d.ts

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

package/getThemeValue/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './getThemeValue';
+export * from './getThemeValue';

package/getThemeValue/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/getThemeValue/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -1,91 +1,30 @@
-import {
-  ComposedStyleFunction,
-  StyleFunction,
-  PropsFor,
-  SimpleStyleFunction,
-  borders,
-  display,
-  flexbox,
-  grid,
-  palette,
-  positions,
-  shadows,
-  sizing,
-  typography,
-} from './Box';
 // disable automatic export
 export {};
 
-// borders.js
-export const border: SimpleStyleFunction<'border'>;
-export const borderTop: SimpleStyleFunction<'borderTop'>;
-export const borderRight: SimpleStyleFunction<'borderRight'>;
-export const borderBottom: SimpleStyleFunction<'borderBottom'>;
-export const borderLeft: SimpleStyleFunction<'borderLeft'>;
-export const borderColor: SimpleStyleFunction<'borderColor'>;
-export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
-export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
-export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
-export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
-export const borderRadius: SimpleStyleFunction<'borderRadius'>;
-export type BordersProps = PropsFor<typeof borders>;
-
-// breakpoints.js
-type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
+export * from './borders';
 
-/**
- * @returns An enhanced stylefunction that considers breakpoints
- */
-export function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(
-  styleFunction: StyleFunction<Props>,
-): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;
-
-export function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
-
-export type DisplayProps = PropsFor<typeof display>;
-
-// flexbox.js
-export type FlexboxProps = PropsFor<typeof flexbox>;
-
-// grid.js
-export type GridProps = PropsFor<typeof grid>;
-
-// palette.js
-export const color: SimpleStyleFunction<'color'>;
-export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
-
-export type PositionsProps = PropsFor<typeof positions>;
-
-export type ShadowsProps = PropsFor<typeof shadows>;
-
-// * sizing.js TODO
-export const width: SimpleStyleFunction<'width'>;
-export const maxWidth: SimpleStyleFunction<'maxWidth'>;
-export const minWidth: SimpleStyleFunction<'minWidth'>;
-export const height: SimpleStyleFunction<'height'>;
-export const maxHeight: SimpleStyleFunction<'maxHeight'>;
-export const minHeight: SimpleStyleFunction<'minHeight'>;
-export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
-export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
-export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
-
-// typography.js
-export const typographyVariant: SimpleStyleFunction<'typography'>;
-export const fontFamily: SimpleStyleFunction<'fontFamily'>;
-export const fontSize: SimpleStyleFunction<'fontSize'>;
-export const fontStyle: SimpleStyleFunction<'fontStyle'>;
-export const fontWeight: SimpleStyleFunction<'fontWeight'>;
-export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
-export const lineHeight: SimpleStyleFunction<'lineHeight'>;
-export const textAlign: SimpleStyleFunction<'textAlign'>;
-export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
+export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
+
+export { default as compose } from './compose';
+
+export * from './display';
+
+export * from './flexbox';
+
+export * from './cssGrid';
+
+export * from './palette';
+
+export * from './positions';
+
+export * from './shadows';
+
+export * from './sizing';
+
+export * from './typography';
+
+export { default as unstable_getThemeValue } from './getThemeValue';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_getThemeValue(prop: string, value: any, theme: object): any;
 /**
  * The `css` function accepts arrays as values for mobile-first responsive styles.
  * Note that this extends to non-theme values also. For example `display=['none', 'block']`