@mui/system 5.10.13 → 5.10.15

package/legacy/cssVars/useCurrentColorScheme.js

@@ -4,92 +4,76 @@ import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './ge
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     var 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, function (mode) {
     if (mode === 'light') {
       return state.lightColorScheme;
     }
-
     if (mode === 'dark') {
       return state.darkColorScheme;
     }
-
     return undefined;
   });
 }
-
 function initializeValue(key, defaultValue) {
   if (typeof window === 'undefined') {
     return undefined;
   }
-
   var value;
-
   try {
     value = localStorage.getItem(key) || undefined;
-
     if (!value) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {// Unsupported
+  } catch (e) {
+    // Unsupported
   }
-
   return value || defaultValue;
 }
-
 export default function useCurrentColorScheme(options) {
   var _options$defaultMode = options.defaultMode,
-      defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
-      defaultLightColorScheme = options.defaultLightColorScheme,
-      defaultDarkColorScheme = options.defaultDarkColorScheme,
-      _options$supportedCol = options.supportedColorSchemes,
-      supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
-      _options$modeStorageK = options.modeStorageKey,
-      modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
-      _options$colorSchemeS = options.colorSchemeStorageKey,
-      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
-      _options$storageWindo = options.storageWindow,
-      storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
+    defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+    defaultLightColorScheme = options.defaultLightColorScheme,
+    defaultDarkColorScheme = options.defaultDarkColorScheme,
+    _options$supportedCol = options.supportedColorSchemes,
+    supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
+    _options$modeStorageK = options.modeStorageKey,
+    modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+    _options$colorSchemeS = options.colorSchemeStorageKey,
+    colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
+    _options$storageWindo = options.storageWindow,
+    storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
   var joinedColorSchemes = supportedColorSchemes.join(',');
-
   var _React$useState = React.useState(function () {
-    var initialMode = initializeValue(modeStorageKey, defaultMode);
-    var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
-    var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
-    return {
-      mode: initialMode,
-      systemMode: getSystemMode(initialMode),
-      lightColorScheme: lightColorScheme,
-      darkColorScheme: darkColorScheme
-    };
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
-
+      var initialMode = initializeValue(modeStorageKey, defaultMode);
+      var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
+      var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
+      return {
+        mode: initialMode,
+        systemMode: getSystemMode(initialMode),
+        lightColorScheme: lightColorScheme,
+        darkColorScheme: darkColorScheme
+      };
+    }),
+    state = _React$useState[0],
+    setState = _React$useState[1];
   var colorScheme = getColorScheme(state);
   var setMode = React.useCallback(function (mode) {
     setState(function (currentState) {
@@ -97,14 +81,12 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-
       var newMode = !mode ? defaultMode : mode;
-
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {// Unsupported
+      } catch (e) {
+        // Unsupported
       }
-
       return _extends({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
@@ -117,9 +99,9 @@ export default function useCurrentColorScheme(options) {
         try {
           localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
           localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
-        } catch (e) {// Unsupported
+        } catch (e) {
+          // Unsupported
         }
-
         return _extends({}, currentState, {
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
@@ -131,17 +113,15 @@ export default function useCurrentColorScheme(options) {
       } else {
         setState(function (currentState) {
           var newState = _extends({}, currentState);
-
           processState(currentState, function (mode) {
             try {
               localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
-            } catch (e) {// Unsupported
+            } catch (e) {
+              // Unsupported
             }
-
             if (mode === 'light') {
               newState.lightColorScheme = value;
             }
-
             if (mode === 'dark') {
               newState.darkColorScheme = value;
             }
@@ -152,36 +132,32 @@ export default function useCurrentColorScheme(options) {
     } else {
       setState(function (currentState) {
         var newState = _extends({}, currentState);
-
         var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
-
         if (newLightColorScheme) {
           if (!joinedColorSchemes.includes(newLightColorScheme)) {
             console.error("`".concat(newLightColorScheme, "` does not exist in `theme.colorSchemes`."));
           } else {
             newState.lightColorScheme = newLightColorScheme;
-
             try {
               localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), newLightColorScheme);
-            } catch (error) {// Unsupported
+            } catch (error) {
+              // Unsupported
             }
           }
         }
-
         if (newDarkColorScheme) {
           if (!joinedColorSchemes.includes(newDarkColorScheme)) {
             console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
           } else {
             newState.darkColorScheme = newDarkColorScheme;
-
             try {
               localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
-            } catch (error) {// Unsupported
+            } catch (error) {
+              // Unsupported
             }
           }
         }
-
         return newState;
       });
     }
@@ -194,29 +170,31 @@ export default function useCurrentColorScheme(options) {
         });
       });
     }
-  }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+  }, [state.mode]);
 
+  // Ref hack to avoid adding handleMediaQuery as a dep
   var mediaListener = React.useRef(handleMediaQuery);
   mediaListener.current = handleMediaQuery;
   React.useEffect(function () {
     var handler = function handler() {
       return mediaListener.current.apply(mediaListener, arguments);
-    }; // Always listen to System preference
-
+    };
 
-    var media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+    // Always listen to System preference
+    var media = window.matchMedia('(prefers-color-scheme: dark)');
 
+    // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
     return function () {
       return media.removeListener(handler);
     };
-  }, []); // Handle when localStorage has changed
+  }, []);
 
+  // Handle when localStorage has changed
   React.useEffect(function () {
     var handleStorage = function handleStorage(event) {
       var 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')) {
@@ -224,19 +202,16 @@ export default function useCurrentColorScheme(options) {
             light: value
           });
         }
-
         if (event.key.endsWith('dark')) {
           setColorScheme({
             dark: value
           });
         }
       }
-
       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);
@@ -244,7 +219,6 @@ export default function useCurrentColorScheme(options) {
         return storageWindow.removeEventListener('storage', handleStorage);
       };
     }
-
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
   return _extends({}, state, {

package/legacy/getThemeValue.js

@@ -39,13 +39,10 @@ export var propToStyleFunction = Object.keys(filterPropsMapping).reduce(function
   });
   return acc;
 }, {});
-
 function getThemeValue(prop, value, theme) {
   var _inputProps;
-
   var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
   var styleFunction = propToStyleFunction[prop];
   return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
 }
-
 export default getThemeValue;

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.13
+/** @license MUI v5.10.15
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,7 +23,7 @@ export { default as sizing } from './sizing';
 export * from './sizing';
 export { default as spacing } from './spacing';
 export * from './spacing';
-export { default as style, getPath } from './style';
+export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
@@ -45,10 +45,10 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
-/** ----------------- */
+export { default as responsivePropType } from './responsivePropType';
 
+/** ----------------- */
 /** Layout components */
-
 export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
 export * from './Container';

package/legacy/memoize.js

@@ -4,7 +4,6 @@ export default function memoize(fn) {
     if (cache[arg] === undefined) {
       cache[arg] = fn(arg);
     }
-
     return cache[arg];
   };
 }

package/legacy/merge.js

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

package/legacy/palette.js

@@ -1,14 +1,11 @@
 import style from './style';
 import compose from './compose';
-
 function transform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
-
   return value;
 }
-
 export var color = style({
   prop: 'color',
   themeKey: 'palette',

package/legacy/propsToClassKey.js

@@ -1,20 +1,17 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { unstable_capitalize as capitalize } from '@mui/utils';
-
 function isEmpty(string) {
   return string.length === 0;
 }
+
 /**
  * Generates string classKey based on the properties provided. It starts with the
  * variant if defined, and then it appends all other properties in alphabetical order.
  * @param {object} props - the properties for which the classKey should be created.
  */
-
-
 export default function propsToClassKey(props) {
   var variant = props.variant,
-      other = _objectWithoutProperties(props, ["variant"]);
-
+    other = _objectWithoutProperties(props, ["variant"]);
   var classKey = variant || '';
   Object.keys(other).sort().forEach(function (key) {
     if (key === 'color') {

package/legacy/sizing.js

@@ -1,11 +1,9 @@
 import style from './style';
 import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
-
 function transform(value) {
   return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
 }
-
 export var width = style({
   prop: 'width',
   transform: transform
@@ -14,16 +12,13 @@ export var maxWidth = function maxWidth(props) {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     var styleFromPropValue = function styleFromPropValue(propValue) {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-
       var breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || breakpointsValues[propValue];
       return {
         maxWidth: breakpoint || transform(propValue)
       };
     };
-
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
   }
-
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];

package/legacy/spacing.js

@@ -21,10 +21,11 @@ var aliases = {
   marginY: 'my',
   paddingX: 'px',
   paddingY: 'py'
-}; // memoize() impact:
+};
+
+// memoize() impact:
 // From 300,000 ops/sec
 // To 350,000 ops/sec
-
 var getCssProperties = memoize(function (prop) {
   // It's not a shorthand notation.
   if (prop.length > 2) {
@@ -34,12 +35,10 @@ var getCssProperties = memoize(function (prop) {
       return [prop];
     }
   }
-
   var _prop$split = prop.split(''),
-      _prop$split2 = _slicedToArray(_prop$split, 2),
-      a = _prop$split2[0],
-      b = _prop$split2[1];
-
+    _prop$split2 = _slicedToArray(_prop$split, 2),
+    a = _prop$split2[0],
+    b = _prop$split2[1];
   var property = properties[a];
   var direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(function (dir) {
@@ -51,31 +50,25 @@ var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingT
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
-
   var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-
   if (typeof themeSpacing === 'number') {
     return function (abs) {
       if (typeof abs === 'string') {
         return abs;
       }
-
       if (process.env.NODE_ENV !== 'production') {
         if (typeof abs !== 'number') {
           console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
         }
       }
-
       return themeSpacing * abs;
     };
   }
-
   if (Array.isArray(themeSpacing)) {
     return function (abs) {
       if (typeof abs === 'string') {
         return abs;
       }
-
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error(["MUI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
@@ -83,19 +76,15 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error(["MUI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
         }
       }
-
       return themeSpacing[abs];
     };
   }
-
   if (typeof themeSpacing === 'function') {
     return themeSpacing;
   }
-
   if (process.env.NODE_ENV !== 'production') {
     console.error(["MUI: The `theme.".concat(themeKey, "` value (").concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
   }
-
   return function () {
     return undefined;
   };
@@ -107,18 +96,14 @@ export function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-
   var abs = Math.abs(propValue);
   var transformed = transformer(abs);
-
   if (propValue >= 0) {
     return transformed;
   }
-
   if (typeof transformed === 'number') {
     return -transformed;
   }
-
   return "-".concat(transformed);
 }
 export function getStyleFromPropValue(cssProperties, transformer) {
@@ -129,27 +114,23 @@ export function getStyleFromPropValue(cssProperties, transformer) {
     }, {});
   };
 }
-
 function resolveCssProperty(props, keys, prop, transformer) {
   // Using a hash computation over an array iteration could be faster, but with only 28 items,
   // it's doesn't worth the bundle size.
   if (keys.indexOf(prop) === -1) {
     return null;
   }
-
   var cssProperties = getCssProperties(prop);
   var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
   var propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-
 function style(props, keys) {
   var transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(function (prop) {
     return resolveCssProperty(props, keys, prop, transformer);
   }).reduce(merge, {});
 }
-
 export function margin(props) {
   return style(props, marginKeys);
 }
@@ -166,11 +147,9 @@ padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce(f
   return obj;
 }, {}) : {};
 padding.filterProps = paddingKeys;
-
 function spacing(props) {
   return style(props, spacingKeys);
 }
-
 spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce(function (obj, key) {
   obj[key] = responsivePropType;
   return obj;

package/legacy/style.js

@@ -4,35 +4,29 @@ import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   var checkVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
   if (!path || typeof path !== 'string') {
     return null;
-  } // Check if CSS variables are used
-
+  }
 
+  // Check if CSS variables are used
   if (obj && obj.vars && checkVars) {
     var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
       return acc && acc[item] ? acc[item] : null;
     }, obj);
-
     if (val != null) {
       return val;
     }
   }
-
   return path.split('.').reduce(function (acc, item) {
     if (acc && acc[item] != null) {
       return acc[item];
     }
-
     return null;
   }, obj);
 }
-
-function getValue(themeMapping, transform, propValueFinal) {
+export function getStyleValue(themeMapping, transform, propValueFinal) {
   var userValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : propValueFinal;
   var value;
-
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
   } else if (Array.isArray(themeMapping)) {
@@ -40,51 +34,39 @@ function getValue(themeMapping, transform, propValueFinal) {
   } else {
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
-
   if (transform) {
     value = transform(value, userValue);
   }
-
   return value;
 }
-
 function style(options) {
   var prop = options.prop,
-      _options$cssProperty = options.cssProperty,
-      cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
-      themeKey = options.themeKey,
-      transform = options.transform;
-
+    _options$cssProperty = options.cssProperty,
+    cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
+    themeKey = options.themeKey,
+    transform = options.transform;
   var fn = function fn(props) {
     if (props[prop] == null) {
       return null;
     }
-
     var propValue = props[prop];
     var theme = props.theme;
     var themeMapping = getPath(theme, themeKey) || {};
-
     var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value = getValue(themeMapping, transform, propValueFinal);
-
+      var value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
+        value = getStyleValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
       }
-
       if (cssProperty === false) {
         return value;
       }
-
       return _defineProperty({}, cssProperty, value);
     };
-
     return handleBreakpoints(props, propValue, styleFromPropValue);
   };
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? _defineProperty({}, prop, responsivePropType) : {};
   fn.filterProps = [prop];
   return fn;
 }
-
 export default style;