@mui/system 5.15.13 → 6.0.0-alpha.0

package/node/cssVars/prepareCssVars.js

@@ -0,0 +1,106 @@
+"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 = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  // @ts-ignore - ignore components do not exist
+  const {
+      colorSchemes = {},
+      defaultColorScheme = 'light'
+    } = theme,
+    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded2);
+  const {
+    vars: rootVars,
+    css: rootCss,
+    varsWithDefaults: rootVarsWithDefaults
+  } = (0, _cssVarsParser.default)(otherTheme, parserConfig);
+  let themeVars = rootVarsWithDefaults;
+  const colorSchemesMap = {};
+  const {
+      [defaultColorScheme]: defaultScheme
+    } = colorSchemes,
+    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
+  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+    const {
+      vars,
+      css,
+      varsWithDefaults
+    } = (0, _cssVarsParser.default)(scheme, parserConfig);
+    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css,
+      vars
+    };
+  });
+  if (defaultScheme) {
+    // default color scheme vars should be merged last to set as default
+    const {
+      css,
+      vars,
+      varsWithDefaults
+    } = (0, _cssVarsParser.default)(defaultScheme, parserConfig);
+    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    colorSchemesMap[defaultColorScheme] = {
+      css,
+      vars
+    };
+  }
+  const generateThemeVars = () => {
+    let vars = (0, _extends2.default)({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = (0, _deepmerge.default)(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]: (0, _extends2.default)({}, css)
+        } : selector);
+      }
+    }
+    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, (0, _extends2.default)({}, rootCss))) || ':root', rootCss);
+    const {
+        [colorScheme]: defaultSchemeVal
+      } = colorSchemesMap,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(colorSchemesMap, [colorScheme].map(_toPropertyKey2.default));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      const {
+        css
+      } = defaultSchemeVal;
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+    }
+    Object.entries(rest).forEach(([key, {
+      css
+    }]) => {
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+    });
+    return stylesheets;
+  };
+  return {
+    vars: themeVars,
+    generateThemeVars,
+    generateStyleSheets
+  };
+}
+var _default = exports.default = prepareCssVars;

package/{esm → node}/cssVars/useCurrentColorScheme.js

@@ -1,9 +1,19 @@
+"use strict";
 'use client';
 
-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) {
+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 && {}.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) {
   if (typeof window !== 'undefined' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
     if (mql.matches) {
@@ -22,7 +32,7 @@ function processState(state, callback) {
   }
   return undefined;
 }
-export function getColorScheme(state) {
+function getColorScheme(state) {
   return processState(state, mode => {
     if (mode === 'light') {
       return state.lightColorScheme;
@@ -49,14 +59,14 @@ function initializeValue(key, defaultValue) {
   }
   return value || defaultValue;
 }
-export default function useCurrentColorScheme(options) {
+function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
@@ -78,13 +88,13 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
         // Unsupported
       }
-      return _extends({}, currentState, {
+      return (0, _extends2.default)({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
       });
@@ -99,7 +109,7 @@ export default function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return _extends({}, currentState, {
+        return (0, _extends2.default)({}, currentState, {
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
         });
@@ -109,7 +119,7 @@ export default function useCurrentColorScheme(options) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = _extends({}, currentState);
+          const newState = (0, _extends2.default)({}, currentState);
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -128,7 +138,7 @@ export default function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = _extends({}, currentState);
+        const newState = (0, _extends2.default)({}, currentState);
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -159,11 +169,19 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => _extends({}, currentState, {
-        systemMode: e != null && e.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return (0, _extends2.default)({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -179,38 +197,42 @@ export default 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 _extends({}, state, {
+  return (0, _extends2.default)({}, state, {
     colorScheme,
     setMode,
     setColorScheme

package/{display.js → node/display/display.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.whiteSpace = exports.visibility = exports.textOverflow = exports.overflow = exports.displayRaw = exports.displayPrint = exports.default = void 0;
-var _style = _interopRequireDefault(require("./style"));
-var _compose = _interopRequireDefault(require("./compose"));
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
 const displayPrint = exports.displayPrint = (0, _style.default)({
   prop: 'displayPrint',
   cssProperty: false,

package/node/display/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _display.default;
+  }
+});
+var _display = _interopRequireWildcard(require("./display"));
+Object.keys(_display).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _display[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _display[key];
+    }
+  });
+});
+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 && {}.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; }

package/{flexbox.js → node/flexbox/flexbox.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.order = exports.justifySelf = exports.justifyItems = exports.justifyContent = exports.flexWrap = exports.flexShrink = exports.flexGrow = exports.flexDirection = exports.flexBasis = exports.flex = exports.default = exports.alignSelf = exports.alignItems = exports.alignContent = void 0;
-var _style = _interopRequireDefault(require("./style"));
-var _compose = _interopRequireDefault(require("./compose"));
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
 const flexBasis = exports.flexBasis = (0, _style.default)({
   prop: 'flexBasis'
 });

package/node/flexbox/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _flexbox.default;
+  }
+});
+var _flexbox = _interopRequireWildcard(require("./flexbox"));
+Object.keys(_flexbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _flexbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _flexbox[key];
+    }
+  });
+});
+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 && {}.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; }

package/{getThemeValue.js → node/getThemeValue/getThemeValue.js}

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.styleFunctionMapping = exports.propToStyleFunction = exports.default = void 0;
-var _borders = _interopRequireDefault(require("./borders"));
-var _display = _interopRequireDefault(require("./display"));
-var _flexbox = _interopRequireDefault(require("./flexbox"));
-var _cssGrid = _interopRequireDefault(require("./cssGrid"));
-var _positions = _interopRequireDefault(require("./positions"));
-var _palette = _interopRequireDefault(require("./palette"));
-var _shadows = _interopRequireDefault(require("./shadows"));
-var _sizing = _interopRequireDefault(require("./sizing"));
-var _spacing = _interopRequireDefault(require("./spacing"));
-var _typography = _interopRequireDefault(require("./typography"));
+var _borders = _interopRequireDefault(require("../borders"));
+var _display = _interopRequireDefault(require("../display"));
+var _flexbox = _interopRequireDefault(require("../flexbox"));
+var _cssGrid = _interopRequireDefault(require("../cssGrid"));
+var _positions = _interopRequireDefault(require("../positions"));
+var _palette = _interopRequireDefault(require("../palette"));
+var _shadows = _interopRequireDefault(require("../shadows"));
+var _sizing = _interopRequireDefault(require("../sizing"));
+var _spacing = _interopRequireDefault(require("../spacing"));
+var _typography = _interopRequireDefault(require("../typography"));
 const filterPropsMapping = {
   borders: _borders.default.filterProps,
   display: _display.default.filterProps,

package/node/getThemeValue/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _getThemeValue.default;
+  }
+});
+var _getThemeValue = _interopRequireWildcard(require("./getThemeValue"));
+Object.keys(_getThemeValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getThemeValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getThemeValue[key];
+    }
+  });
+});
+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 && {}.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; }