@mui/system 5.8.7 → 5.9.2

package/modern/Unstable_Grid/gridClasses.js

@@ -0,0 +1,14 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getGridUtilityClass(slot) {
+  return generateUtilityClass('MuiGrid', slot);
+}
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+export default gridClasses;

package/modern/Unstable_Grid/gridGenerator.js

@@ -0,0 +1,232 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const traverseBreakpoints = (breakpoints, responsize, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsize)) {
+    responsize.forEach((breakpointValue, index) => {
+      iterator((responsizeStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsizeStyles, style);
+          } else {
+            responsizeStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsize && typeof responsize === 'object') {
+    // prevent null
+    // responsize could be a very big object, pick the smallest responsive values
+    const keys = Object.keys(responsize).length > breakpoints.keys.length ? breakpoints.keys : Object.keys(responsize);
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsize is an object
+        const breakpointValue = responsize[key];
+
+        if (breakpointValue !== undefined) {
+          iterator((responsizeStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsizeStyles, style);
+            } else {
+              responsizeStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsize === 'number' || typeof responsize === 'string') {
+    iterator((responsizeStyles, style) => {
+      Object.assign(responsizeStyles, style);
+    }, responsize);
+  }
+};
+export const generateGridSizeStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
+    let style = {};
+
+    if (value === true) {
+      style = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: '100%'
+      };
+    }
+
+    if (value === 'auto') {
+      style = {
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: 'none',
+        width: 'auto'
+      };
+    }
+
+    if (typeof value === 'number') {
+      style = {
+        flexGrow: 0,
+        flexBasis: 'auto',
+        width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
+      };
+    }
+
+    appendStyle(styles, style);
+  });
+  return styles;
+};
+export const generateGridOffsetStyles = ({
+  theme,
+  ownerState
+}) => {
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
+    let style = {};
+
+    if (value === 'auto') {
+      style = {
+        marginLeft: 'auto'
+      };
+    }
+
+    if (typeof value === 'number') {
+      style = {
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+      };
+    }
+
+    appendStyle(styles, style);
+  });
+  return styles;
+};
+export const generateGridColumnsStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {
+    '--Grid-columns': 12
+  };
+  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+    appendStyle(styles, {
+      '--Grid-columns': value
+    });
+  });
+  return styles;
+};
+export const generateGridRowSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    appendStyle(styles, {
+      '--Grid-rowSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
+    });
+  });
+  return styles;
+};
+export const generateGridColumnSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    appendStyle(styles, {
+      '--Grid-columnSpacing': typeof value === 'string' ? value : theme.spacing?.(value)
+    });
+  });
+  return styles;
+};
+export const generateGridDirectionStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+    appendStyle(styles, {
+      flexDirection: value
+    });
+  });
+  return styles;
+};
+export const generateGridStyles = ({
+  ownerState
+}) => {
+  return _extends({
+    minWidth: 0,
+    boxSizing: 'border-box'
+  }, ownerState.container ? _extends({
+    display: 'flex',
+    flexWrap: 'wrap'
+  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
+  }, {
+    margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
+  }, ownerState.disableEqualOverflow && {
+    margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
+  }, ownerState.nested ? _extends({
+    padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+    padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
+  }) : {
+    '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
+    '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
+  }) : _extends({
+    padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
+  }, ownerState.disableEqualOverflow && {
+    padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+  }));
+};
+export const generateSizeClassNames = gridSize => {
+  const classNames = [];
+  Object.entries(gridSize).forEach(([key, value]) => {
+    if (value !== false && value !== undefined) {
+      classNames.push(`grid-${key}-${String(value)}`);
+    }
+  });
+  return classNames;
+};
+export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
+  function isValidSpacing(val) {
+    if (val === undefined) {
+      return false;
+    }
+
+    return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
+  }
+
+  if (isValidSpacing(spacing)) {
+    return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
+  }
+
+  if (typeof spacing === 'object' && !Array.isArray(spacing)) {
+    const classNames = [];
+    Object.entries(spacing).forEach(([key, value]) => {
+      if (isValidSpacing(value)) {
+        classNames.push(`spacing-${key}-${String(value)}`);
+      }
+    });
+    return classNames;
+  }
+
+  return [];
+};

package/modern/Unstable_Grid/index.js

@@ -0,0 +1,5 @@
+export { default } from './Grid';
+export { default as createGrid } from './createGrid';
+export * from './GridProps';
+export { default as gridClasses } from './gridClasses';
+export * from './gridClasses';

package/modern/breakpoints.js

@@ -83,7 +83,7 @@ function breakpoints(styleFunction) {
 }
 
 export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput?.keys?.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/modern/cssVars/useCurrentColorScheme.js

@@ -153,7 +153,7 @@ export default function useCurrentColorScheme(options) {
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
       setState(currentState => _extends({}, currentState, {
-        systemMode: e.matches ? 'dark' : 'light'
+        systemMode: e?.matches ? 'dark' : 'light'
       }));
     }
   }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep

package/modern/getThemeValue.js

@@ -1,7 +1,7 @@
 import borders from './borders';
 import display from './display';
 import flexbox from './flexbox';
-import grid from './grid';
+import grid from './cssGrid';
 import positions from './positions';
 import palette from './palette';
 import shadows from './shadows';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.7
+/** @license MUI v5.9.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,8 +12,8 @@ export { default as compose } from './compose';
 export { default as display } from './display';
 export { default as flexbox } from './flexbox';
 export * from './flexbox';
-export { default as grid } from './grid';
-export * from './grid';
+export { default as grid } from './cssGrid';
+export * from './cssGrid';
 export { default as palette } from './palette';
 export * from './palette';
 export { default as positions } from './positions';
@@ -45,6 +45,12 @@ 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';
+/** ----------------- */
+
+/** Layout components */
+
 export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
-export * from './Container';
+export * from './Container';
+export { default as Unstable_Grid } from './Unstable_Grid/Grid';
+export * from './Unstable_Grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.8.7",
+  "version": "5.9.2",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,11 +44,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.8.6",
+    "@mui/private-theming": "^5.9.1",
     "@mui/styled-engine": "^5.8.7",
-    "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.6",
-    "clsx": "^1.2.0",
+    "@mui/types": "^7.1.5",
+    "@mui/utils": "^5.9.1",
+    "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"
   },