@mui/material 5.10.12 → 5.10.14

package/esm/Grid/Grid.js

@@ -23,12 +23,10 @@ import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 function getOffset(val) {
   const parse = parseFloat(val);
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
-
 export function generateGrid({
   theme,
   ownerState
@@ -37,15 +35,12 @@ export function generateGrid({
   return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
     // Use side effect over immutability for better performance.
     let styles = {};
-
     if (ownerState[breakpoint]) {
       size = ownerState[breakpoint];
     }
-
     if (!size) {
       return globalStyles;
     }
-
     if (size === true) {
       // For the auto layouting
       styles = {
@@ -67,18 +62,14 @@ export function generateGrid({
         breakpoints: theme.breakpoints.values
       });
       const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
-
       if (columnValue === undefined || columnValue === null) {
         return globalStyles;
-      } // Keep 7 significant numbers.
-
-
+      }
+      // Keep 7 significant numbers.
       const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
       let more = {};
-
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
         const themeSpacing = theme.spacing(ownerState.columnSpacing);
-
         if (themeSpacing !== '0px') {
           const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
           more = {
@@ -86,24 +77,23 @@ export function generateGrid({
             maxWidth: fullWidth
           };
         }
-      } // Close to the bootstrap implementation:
-      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-
+      }
 
+      // Close to the bootstrap implementation:
+      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
       styles = _extends({
         flexBasis: width,
         flexGrow: 0,
         maxWidth: width
       }, more);
-    } // No need for a media query for the first size.
-
+    }
 
+    // No need for a media query for the first size.
     if (theme.breakpoints.values[breakpoint] === 0) {
       Object.assign(globalStyles, styles);
     } else {
       globalStyles[theme.breakpoints.up(breakpoint)] = styles;
     }
-
     return globalStyles;
   }, {});
 }
@@ -121,22 +111,20 @@ export function generateDirection({
     const output = {
       flexDirection: propValue
     };
-
     if (propValue.indexOf('column') === 0) {
       output[`& > .${gridClasses.item}`] = {
         maxWidth: 'none'
       };
     }
-
     return output;
   });
 }
+
 /**
  * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
  * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
  * @returns [xs, sm]
  */
-
 function extractZeroValueBreakpointKeys({
   breakpoints,
   values
@@ -146,7 +134,6 @@ function extractZeroValueBreakpointKeys({
     if (nonZeroKey !== '') {
       return;
     }
-
     if (values[key] !== 0) {
       nonZeroKey = key;
     }
@@ -156,7 +143,6 @@ function extractZeroValueBreakpointKeys({
   });
   return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
 }
-
 export function generateRowGap({
   theme,
   ownerState
@@ -166,28 +152,23 @@ export function generateRowGap({
     rowSpacing
   } = ownerState;
   let styles = {};
-
   if (container && rowSpacing !== 0) {
     const rowSpacingValues = resolveBreakpointValues({
       values: rowSpacing,
       breakpoints: theme.breakpoints.values
     });
     let zeroValueBreakpointKeys;
-
     if (typeof rowSpacingValues === 'object') {
       zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
         breakpoints: theme.breakpoints.values,
         values: rowSpacingValues
       });
     }
-
     styles = handleBreakpoints({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
       var _zeroValueBreakpointK;
-
       const themeSpacing = theme.spacing(propValue);
-
       if (themeSpacing !== '0px') {
         return {
           marginTop: `-${getOffset(themeSpacing)}`,
@@ -196,11 +177,9 @@ export function generateRowGap({
           }
         };
       }
-
       if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
         return {};
       }
-
       return {
         marginTop: 0,
         [`& > .${gridClasses.item}`]: {
@@ -209,7 +188,6 @@ export function generateRowGap({
       };
     });
   }
-
   return styles;
 }
 export function generateColumnGap({
@@ -221,28 +199,23 @@ export function generateColumnGap({
     columnSpacing
   } = ownerState;
   let styles = {};
-
   if (container && columnSpacing !== 0) {
     const columnSpacingValues = resolveBreakpointValues({
       values: columnSpacing,
       breakpoints: theme.breakpoints.values
     });
     let zeroValueBreakpointKeys;
-
     if (typeof columnSpacingValues === 'object') {
       zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
         breakpoints: theme.breakpoints.values,
         values: columnSpacingValues
       });
     }
-
     styles = handleBreakpoints({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
       var _zeroValueBreakpointK2;
-
       const themeSpacing = theme.spacing(propValue);
-
       if (themeSpacing !== '0px') {
         return {
           width: `calc(100% + ${getOffset(themeSpacing)})`,
@@ -252,11 +225,9 @@ export function generateColumnGap({
           }
         };
       }
-
       if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
         return {};
       }
-
       return {
         width: '100%',
         marginLeft: 0,
@@ -266,37 +237,34 @@ export function generateColumnGap({
       };
     });
   }
-
   return styles;
 }
 export function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
   // undefined/null or `spacing` <= 0
   if (!spacing || spacing <= 0) {
     return [];
-  } // in case of string/number `spacing`
-
-
+  }
+  // in case of string/number `spacing`
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
     return [styles[`spacing-xs-${String(spacing)}`]];
-  } // in case of object `spacing`
-
-
+  }
+  // in case of object `spacing`
   const spacingStyles = [];
   breakpoints.forEach(breakpoint => {
     const value = spacing[breakpoint];
-
     if (Number(value) > 0) {
       spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
     }
   });
   return spacingStyles;
-} // Default CSS values
+}
+
+// Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
 // alignItems: 'flex-start',
 // flexWrap: 'nowrap',
 // justifyContent: 'flex-start',
-
 const GridRoot = styled('div', {
   name: 'MuiGrid',
   slot: 'Root',
@@ -313,16 +281,15 @@ const GridRoot = styled('div', {
       zeroMinWidth,
       breakpoints
     } = ownerState;
-    let spacingStyles = []; // in case of grid item
+    let spacingStyles = [];
 
+    // in case of grid item
     if (container) {
       spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
     }
-
     const breakpointsStyles = [];
     breakpoints.forEach(breakpoint => {
       const value = ownerState[breakpoint];
-
       if (value) {
         breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
       }
@@ -339,7 +306,6 @@ const GridRoot = styled('div', {
   width: '100%'
 }, ownerState.item && {
   margin: 0 // For instance, it's useful when used with a `figure` element.
-
 }, ownerState.zeroMinWidth && {
   minWidth: 0
 }, ownerState.wrap !== 'wrap' && {
@@ -349,18 +315,15 @@ export function resolveSpacingClasses(spacing, breakpoints) {
   // undefined/null or `spacing` <= 0
   if (!spacing || spacing <= 0) {
     return [];
-  } // in case of string/number `spacing`
-
-
+  }
+  // in case of string/number `spacing`
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
     return [`spacing-xs-${String(spacing)}`];
-  } // in case of object `spacing`
-
-
+  }
+  // in case of object `spacing`
   const classes = [];
   breakpoints.forEach(breakpoint => {
     const value = spacing[breakpoint];
-
     if (Number(value) > 0) {
       const className = `spacing-${breakpoint}-${String(value)}`;
       classes.push(className);
@@ -368,7 +331,6 @@ export function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -380,16 +342,15 @@ const useUtilityClasses = ownerState => {
     zeroMinWidth,
     breakpoints
   } = ownerState;
-  let spacingClasses = []; // in case of grid item
+  let spacingClasses = [];
 
+  // in case of grid item
   if (container) {
     spacingClasses = resolveSpacingClasses(spacing, breakpoints);
   }
-
   const breakpointsClasses = [];
   breakpoints.forEach(breakpoint => {
     const value = ownerState[breakpoint];
-
     if (value) {
       breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
     }
@@ -399,7 +360,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
-
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,
@@ -409,38 +369,34 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     breakpoints
   } = useTheme();
   const props = extendSxProp(themeProps);
-
   const {
-    className,
-    columns: columnsProp,
-    columnSpacing: columnSpacingProp,
-    component = 'div',
-    container = false,
-    direction = 'row',
-    item = false,
-    rowSpacing: rowSpacingProp,
-    spacing = 0,
-    wrap = 'wrap',
-    zeroMinWidth = false
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className,
+      columns: columnsProp,
+      columnSpacing: columnSpacingProp,
+      component = 'div',
+      container = false,
+      direction = 'row',
+      item = false,
+      rowSpacing: rowSpacingProp,
+      spacing = 0,
+      wrap = 'wrap',
+      zeroMinWidth = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
-  const columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
+  const columnsContext = React.useContext(GridContext);
 
+  // columns set with default breakpoint unit of 12
   const columns = container ? columnsProp || 12 : columnsContext;
   const breakpointsValues = {};
-
   const otherFiltered = _extends({}, other);
-
   breakpoints.keys.forEach(breakpoint => {
     if (other[breakpoint] != null) {
       breakpointsValues[breakpoint] = other[breakpoint];
       delete otherFiltered[breakpoint];
     }
   });
-
   const ownerState = _extends({}, props, {
     columns,
     container,
@@ -454,7 +410,6 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   }, breakpointsValues, {
     breakpoints: breakpoints.keys
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(GridContext.Provider, {
     value: columns,
@@ -466,68 +421,56 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     }, otherFiltered))
   });
 });
-process.env.NODE_ENV !== "production" ? Grid.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The number of columns.
    * @default 12
    */
   columns: PropTypes.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.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * 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.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-
   /**
    * If `true`, the component will have the flex *item* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
   item: PropTypes.bool,
-
   /**
    * 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).
@@ -538,7 +481,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /**
    * 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).
@@ -549,13 +491,11 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
   rowSpacing: PropTypes.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).
@@ -566,26 +506,22 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
    * @default 0
    */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   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).
@@ -596,7 +532,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /**
    * 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).
@@ -607,7 +542,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /**
    * If `true`, it sets `min-width: 0` on the item.
    * Refer to the limitations section of the documentation to better understand the use case.
@@ -615,10 +549,9 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    */
   zeroMinWidth: PropTypes.bool
 } : void 0;
-
 if (process.env.NODE_ENV !== 'production') {
-  const requireProp = requirePropFactory('Grid', Grid); // eslint-disable-next-line no-useless-concat
-
+  const requireProp = requirePropFactory('Grid', Grid);
+  // eslint-disable-next-line no-useless-concat
   Grid['propTypes' + ''] = _extends({}, Grid.propTypes, {
     direction: requireProp('container'),
     lg: requireProp('item'),
@@ -630,5 +563,4 @@ if (process.env.NODE_ENV !== 'production') {
     zeroMinWidth: requireProp('item')
   });
 }
-
 export default Grid;

package/esm/Grid/GridContext.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
+
 /**
  * @ignore - internal component.
  */
-
 const GridContext = /*#__PURE__*/React.createContext();
-
 if (process.env.NODE_ENV !== 'production') {
   GridContext.displayName = 'GridContext';
 }
-
 export default GridContext;

package/esm/Grid/gridClasses.js

@@ -7,9 +7,13 @@ 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', 'zeroMinWidth', // 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
+const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
+// 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;