@mui/system 5.8.7 → 5.9.0

package/Unstable_Grid/gridClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getGridUtilityClass = getGridUtilityClass;
+
+var _utils = require("@mui/utils");
+
+function getGridUtilityClass(slot) {
+  return (0, _utils.unstable_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 = (0, _utils.unstable_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}`)]);
+var _default = gridClasses;
+exports.default = _default;

package/Unstable_Grid/gridGenerator.d.ts

@@ -0,0 +1,26 @@
+import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+import { GridOwnerState } from './GridProps';
+interface Props {
+    theme: {
+        breakpoints: Breakpoints;
+        spacing?: Spacing;
+    };
+    ownerState: GridOwnerState & {
+        parentDisableEqualOverflow?: boolean;
+    };
+}
+interface Iterator<T> {
+    (appendStyle: (responsizeStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsize: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export {};

package/Unstable_Grid/gridGenerator.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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);
+  }
+};
+
+exports.traverseBreakpoints = traverseBreakpoints;
+
+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;
+};
+
+exports.generateGridSizeStyles = generateGridSizeStyles;
+
+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;
+};
+
+exports.generateGridOffsetStyles = generateGridOffsetStyles;
+
+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;
+};
+
+exports.generateGridColumnsStyles = generateGridColumnsStyles;
+
+const generateGridRowSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    var _theme$spacing;
+
+    appendStyle(styles, {
+      '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+    });
+  });
+  return styles;
+};
+
+exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
+
+const generateGridColumnSpacingStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    var _theme$spacing2;
+
+    appendStyle(styles, {
+      '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+    });
+  });
+  return styles;
+};
+
+exports.generateGridColumnSpacingStyles = generateGridColumnSpacingStyles;
+
+const generateGridDirectionStyles = ({
+  theme,
+  ownerState
+}) => {
+  if (!ownerState.container) {
+    return {};
+  }
+
+  const styles = {};
+  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+    appendStyle(styles, {
+      flexDirection: value
+    });
+  });
+  return styles;
+};
+
+exports.generateGridDirectionStyles = generateGridDirectionStyles;
+
+const generateGridStyles = ({
+  ownerState
+}) => {
+  return (0, _extends2.default)({
+    minWidth: 0,
+    boxSizing: 'border-box'
+  }, ownerState.container ? (0, _extends2.default)({
+    display: 'flex',
+    flexWrap: 'wrap'
+  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
+  }, {
+    margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
+  }, ownerState.nested ? {
+    padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+  } : {
+    '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
+    '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
+  }) : {
+    padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
+  });
+};
+
+exports.generateGridStyles = generateGridStyles;
+
+const generateSizeClassNames = gridSize => {
+  const classNames = [];
+  Object.entries(gridSize).forEach(([key, value]) => {
+    if (value !== false && value !== undefined) {
+      classNames.push(`grid-${key}-${String(value)}`);
+    }
+  });
+  return classNames;
+};
+
+exports.generateSizeClassNames = generateSizeClassNames;
+
+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 [];
+};
+
+exports.generateSpacingClassNames = generateSpacingClassNames;

package/Unstable_Grid/index.d.ts

@@ -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/Unstable_Grid/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  createGrid: true,
+  gridClasses: true
+};
+Object.defineProperty(exports, "createGrid", {
+  enumerable: true,
+  get: function () {
+    return _createGrid.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "gridClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridClasses.default;
+  }
+});
+
+var _Grid = _interopRequireDefault(require("./Grid"));
+
+var _createGrid = _interopRequireDefault(require("./createGrid"));
+
+var _GridProps = require("./GridProps");
+
+Object.keys(_GridProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridProps[key];
+    }
+  });
+});
+
+var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
+
+Object.keys(_gridClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridClasses[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/Unstable_Grid/package.json

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

package/cssVars/useCurrentColorScheme.js

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

package/esm/Unstable_Grid/Grid.js

@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import createGrid from './createGrid';
+/**
+ *
+ * Demos:
+ *
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/system/api/grid/)
+ */
+
+const Grid = createGrid();
+process.env.NODE_ENV !== "production" ? Grid.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   */
+  lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   */
+  mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   */
+  smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   */
+  xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
+   * @default false
+   */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `xs` breakpoint and wider screens if not overridden.
+   */
+  xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
+} : void 0;
+export default Grid;

package/esm/Unstable_Grid/GridProps.js

@@ -0,0 +1 @@
+export {};