@mui/system 5.10.13 → 5.10.14

package/modern/createTheme/createBreakpoints.js

@@ -4,84 +4,72 @@ const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
     return _extends({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-
-    },
-    unit = 'px',
-    step = 5
-  } = breakpoints,
-        other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
-
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
+
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (min-width:${value}${unit})`;
   }
-
   function down(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (max-width:${value - step / 100}${unit})`;
   }
-
   function between(start, end) {
     const endIndex = keys.indexOf(end);
     return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
   }
-
   function only(key) {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1]);
     }
-
     return up(key);
   }
-
   function not(key) {
     // handle first and last key separately, for better readability
     const keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1]);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex]);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-
   return _extends({
     keys,
     values: sortedValues,

package/modern/createTheme/createSpacing.js

@@ -1,33 +1,30 @@
 import { createUnarySpacing } from '../spacing';
-
 /* tslint:enable:unified-signatures */
+
 export default function createSpacing(spacingInput = 8) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
-  } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+  }
+
+  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
   // Smaller components, such as icons, can align to a 4dp grid.
   // https://m2.material.io/design/layout/understanding-layout.html
-
-
   const transform = createUnarySpacing({
     spacing: spacingInput
   });
-
   const spacing = (...argsInput) => {
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {
         console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
       }
     }
-
     const args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(argument => {
       const output = transform(argument);
       return typeof output === 'number' ? `${output}px` : output;
     }).join(' ');
   };
-
   spacing.mui = true;
   return spacing;
 }

package/modern/createTheme/createTheme.js

@@ -5,16 +5,14 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
-
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded);
-
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -31,5 +29,4 @@ function createTheme(options = {}, ...args) {
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   return muiTheme;
 }
-
 export default createTheme;

package/modern/cssGrid.js

@@ -6,14 +6,11 @@ import responsivePropType from './responsivePropType';
 export const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-
     const styleFromPropValue = propValue => ({
       gap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
-
   return null;
 };
 gap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -23,14 +20,11 @@ gap.filterProps = ['gap'];
 export const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-
     const styleFromPropValue = propValue => ({
       columnGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
-
   return null;
 };
 columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -40,14 +34,11 @@ columnGap.filterProps = ['columnGap'];
 export const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-
     const styleFromPropValue = propValue => ({
       rowGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
-
   return null;
 };
 rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {

package/modern/cssVars/createCssVarsProvider.js

@@ -26,23 +26,17 @@ export default function createCssVarsProvider(options) {
     resolveTheme,
     excludeVariablesFromRoot
   } = options;
-
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
-
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
-
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
-
     if (!value) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
     }
-
     return value;
   };
-
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
@@ -59,18 +53,17 @@ export default function createCssVarsProvider(options) {
     shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
   }) {
     const hasMounted = React.useRef(false);
-
     const {
-      colorSchemes = {},
-      components = {},
-      cssVarPrefix
-    } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
-
+        colorSchemes = {},
+        components = {},
+        cssVarPrefix
+      } = themeProp,
+      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
 
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
       mode,
       setMode,
@@ -88,35 +81,29 @@ export default function createCssVarsProvider(options) {
       defaultMode,
       storageWindow
     });
-
     const calculatedMode = (() => {
       if (!mode) {
         // This scope occurs on the server
         if (defaultMode === 'system') {
           return designSystemMode;
         }
-
         return defaultMode;
       }
-
       return mode;
     })();
-
     const calculatedColorScheme = (() => {
       if (!colorScheme) {
         // This scope occurs on the server
         if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'system'
-
-
+        }
+        // use light color scheme, if default mode is 'light' | 'system'
         return defaultLightColorScheme;
       }
-
       return colorScheme;
-    })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-
+    })();
 
+    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
     const {
       css: rootCss,
       vars: rootVars,
@@ -124,19 +111,20 @@ export default function createCssVarsProvider(options) {
     } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    }); // 3. Start composing the theme object
+    });
 
+    // 3. Start composing the theme object
     let theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    }); // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    });
+
+    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
     //    The default color scheme stylesheet is constructed to have the least CSS specificity.
     //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-
-
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -149,28 +137,22 @@ export default function createCssVarsProvider(options) {
         shouldSkipGeneratingVar
       });
       theme.vars = deepmerge(theme.vars, vars);
-
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         theme = _extends({}, theme, parsedScheme);
-
         if (theme.palette) {
           theme.palette.colorScheme = key;
         }
       }
-
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
         }
-
         if (defaultMode === 'dark') {
           return defaultColorScheme.dark;
         }
-
         return defaultColorScheme.light;
       })();
-
       if (key === resolvedDefaultColorScheme) {
         if (excludeVariablesFromRoot) {
           const excludedVariables = {};
@@ -180,37 +162,36 @@ export default function createCssVarsProvider(options) {
           });
           defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
         }
-
         defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
-    }); // 5. Declaring effects
-    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    });
 
+    // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     React.useEffect(() => {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
-    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+    }, [colorScheme, attribute, colorSchemeNode]);
 
+    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
     React.useEffect(() => {
       let timer;
-
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
         const css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
-        documentNode.head.appendChild(css); // Force browser repaint
+        documentNode.head.appendChild(css);
 
+        // Force browser repaint
         (() => window.getComputedStyle(documentNode.body))();
-
         timer = setTimeout(() => {
           documentNode.head.removeChild(css);
         }, 1);
       }
-
       return () => {
         clearTimeout(timer);
       };
@@ -247,69 +228,56 @@ export default function createCssVarsProvider(options) {
       })]
     });
   }
-
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
      * The body attribute name to attach colorScheme.
      */
     attribute: PropTypes.string,
-
     /**
      * The component tree.
      */
     children: PropTypes.node,
-
     /**
      * The node used to attach the color-scheme attribute
      */
     colorSchemeNode: PropTypes.any,
-
     /**
      * The CSS selector for attaching the generated custom properties
      */
     colorSchemeSelector: PropTypes.string,
-
     /**
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: PropTypes.string,
-
     /**
      * The initial color scheme used.
      */
     defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
     /**
      * The initial mode used.
      */
     defaultMode: PropTypes.string,
-
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */
     disableTransitionOnChange: PropTypes.bool,
-
     /**
      * The document to attach the attribute to
      */
     documentNode: PropTypes.any,
-
     /**
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: PropTypes.string,
-
     /**
      * A function to determine if the key, value should be attached as CSS Variable
      */
     shouldSkipGeneratingVar: PropTypes.func,
-
     /**
      * The window that attaches the 'storage' event listener
      * @default window
      */
     storageWindow: PropTypes.any,
-
     /**
      * The calculated theme object that will be passed through context.
      */
@@ -317,7 +285,6 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-
   const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
@@ -326,7 +293,6 @@ export default function createCssVarsProvider(options) {
     defaultDarkColorScheme,
     modeStorageKey: defaultModeStorageKey
   }, params));
-
   return {
     CssVarsProvider,
     useColorScheme,

package/modern/cssVars/createGetCssVar.js

@@ -7,20 +7,16 @@ export default function createGetCssVar(prefix = '') {
     if (!vars.length) {
       return '';
     }
-
     const value = vars[0];
-
     if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
       return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
     }
-
     return `, ${value}`;
-  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
+  }
 
+  // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
   const getCssVar = (field, ...fallbacks) => {
     return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
   };
-
   return getCssVar;
 }

package/modern/cssVars/cssVarsParser.js

@@ -28,11 +28,11 @@ export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
       if (!temp[k]) {
         temp[k] = arrayKeys.includes(k) ? [] : {};
       }
-
       temp = temp[k];
     }
   });
 };
+
 /**
  *
  * @param {Object} obj : source object
@@ -44,7 +44,6 @@ export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-
 export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
@@ -59,29 +58,24 @@ export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
       }
     });
   }
-
   recurse(obj);
 };
-
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
       // CSS property that are unitless
       return value;
     }
-
     const lastKey = keys[keys.length - 1];
-
     if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
       // opacity values are unitless
       return value;
     }
-
     return `${value}px`;
   }
-
   return value;
 };
+
 /**
  * a function that parse theme and return { css, vars }
  *
@@ -105,8 +99,6 @@ const getCssValue = (keys, value) => {
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
  * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
-
-
 export default function cssVarsParser(theme, options) {
   const {
     prefix,
@@ -126,10 +118,10 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
       }
     }
-
     assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
+
   return {
     css,
     vars,