@mui/material 5.11.7 → 5.11.8

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.7
+ * @mui/material v5.11.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -3217,8 +3217,6 @@
     return cache;
   };
 
-  var createCache$1 = createCache;
-
   var FORWARD_REF_STATICS = {
     '$$typeof': true,
     render: true,
@@ -3717,7 +3715,7 @@
   // and we could have a special build just for that
   // but this is much easier and the native packages
   // might use a different theme context in the future anyway
-  typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache$1({
+  typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
     key: 'css'
   }) : null);
 
@@ -3747,7 +3745,7 @@
           // so there will only every be a single render
           // that could change in the future because of suspense and etc. but for now,
           // this works and i don't want to optimise for a future thing that we aren't sure about
-          cache = createCache$1({
+          cache = createCache({
             key: 'css'
           });
           return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {
@@ -5781,10 +5779,13 @@
   var jsxRuntime_1 = jsxRuntime.jsx;
   var jsxRuntime_2 = jsxRuntime.jsxs;
 
-  const cache = createCache$1({
-    key: 'css',
-    prepend: true
-  });
+  let cache;
+  if (typeof document === 'object') {
+    cache = createCache({
+      key: 'css',
+      prepend: true
+    });
+  }
   function StyledEngineProvider(props) {
     const {
       injectFirst,
@@ -8247,14 +8248,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         colorScheme = ctx.colorScheme;
       }
       const calculatedMode = (() => {
-        if (!mode) {
-          // This scope occurs on the server
-          if (defaultMode === 'system') {
-            return designSystemMode;
-          }
-          return defaultMode;
+        if (mode) {
+          return mode;
+        }
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
         }
-        return mode;
+        return defaultMode;
       })();
       const calculatedColorScheme = (() => {
         if (!colorScheme) {
@@ -8647,6 +8648,22 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
+  function isNestedContainer(ownerState) {
+    return ownerState.level > 0 && ownerState.container;
+  }
+  function createGetSelfSpacing(ownerState) {
+    return function getSelfSpacing(axis) {
+      return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+    };
+  }
+  function createGetParentSpacing(ownerState) {
+    return function getParentSpacing(axis) {
+      if (ownerState.level === 0) {
+        return `var(--Grid-${axis}Spacing)`;
+      }
+      return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+    };
+  }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
     const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -8693,6 +8710,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     theme,
     ownerState
   }) => {
+    const getSelfSpacing = createGetSelfSpacing(ownerState);
     const styles = {};
     traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
       let style = {};
@@ -8716,7 +8734,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style = {
           flexGrow: 0,
           flexBasis: 'auto',
-          width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
+          width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
         };
       }
       appendStyle(styles, style);
@@ -8768,11 +8786,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     if (!ownerState.container) {
       return {};
     }
-    const styles = {};
+    const getParentSpacing = createGetParentSpacing(ownerState);
+    const styles = isNestedContainer(ownerState) ? {
+      // Set the default spacing as its parent spacing.
+      // It will be overridden if spacing props are provided
+      [`--Grid-rowSpacing${ownerState.level || ''}`]: getParentSpacing('row')
+    } : {};
     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)
+        [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8784,11 +8807,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     if (!ownerState.container) {
       return {};
     }
-    const styles = {};
+    const getParentSpacing = createGetParentSpacing(ownerState);
+    const styles = isNestedContainer(ownerState) ? {
+      // Set the default spacing as its parent spacing.
+      // It will be overridden if spacing props are provided
+      [`--Grid-columnSpacing${ownerState.level || ''}`]: getParentSpacing('column')
+    } : {};
     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)
+        [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -8811,29 +8839,24 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const generateGridStyles = ({
     ownerState
   }) => {
+    const getSelfSpacing = createGetSelfSpacing(ownerState);
+    const getParentSpacing = createGetParentSpacing(ownerState);
     return _extends({
       minWidth: 0,
       boxSizing: 'border-box'
-    }, ownerState.container ? _extends({
+    }, 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)`
+      margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -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)`
+      margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
+    }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
+      padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 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))`
+      padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
     }));
   };
   const generateSizeClassNames = gridSize => {
@@ -8899,7 +8922,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       useThemeProps = useThemePropsDefault,
       componentName = 'MuiGrid'
     } = options;
-    const NestedContext = /*#__PURE__*/React__namespace.createContext(false);
+    const NestedContext = /*#__PURE__*/React__namespace.createContext(0);
     const OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
     const useUtilityClasses = (ownerState, theme) => {
       const {
@@ -8920,7 +8943,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const theme = useTheme$1();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-      const nested = React__namespace.useContext(NestedContext);
+      const level = React__namespace.useContext(NestedContext);
       const overflow = React__namespace.useContext(OverflowContext);
       const {
           className,
@@ -8937,7 +8960,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
       let disableEqualOverflow = themeDisableEqualOverflow;
-      if (nested && themeDisableEqualOverflow !== undefined) {
+      if (level && themeDisableEqualOverflow !== undefined) {
         disableEqualOverflow = inProps.disableEqualOverflow;
       }
       // collect breakpoints related props because they can be customized from the theme.
@@ -8953,12 +8976,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           other[key] = val;
         }
       });
-      const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : nested ? undefined : columnsProp;
-      const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : nested ? undefined : spacingProp;
-      const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : nested ? undefined : rowSpacingProp;
-      const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : nested ? undefined : columnSpacingProp;
+      const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
+      const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
+      const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : level ? undefined : rowSpacingProp;
+      const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : level ? undefined : columnSpacingProp;
       const ownerState = _extends({}, props, {
-        nested,
+        level,
         columns,
         container,
         direction,
@@ -8980,9 +9003,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         ownerState: ownerState,
         className: clsx(classes.root, className)
       }, other));
-      if (!nested) {
+      if (container) {
         result = /*#__PURE__*/jsxRuntime_1(NestedContext.Provider, {
-          value: true,
+          value: level + 1,
           children: result
         });
       }
@@ -10400,6 +10423,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$28 = ["elementType", "externalSlotProps", "ownerState"];
   /**
+   * @ignore - do not document.
    * Builds the props to be passed into the slot of an unstyled component.
    * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
    * If the slot component is not a host component, it also merges in the `ownerState`.
@@ -10714,7 +10738,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
 
       // Scroll active descendant into view.
-      // Logic copied from https://www.w3.org/WAI/ARIA/apg/example-index/combobox/js/select-only.js
+      // Logic copied from https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js
       //
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
@@ -11377,6 +11401,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
+  /**
+   *
+   * Demos:
+   *
+   * - [Unstyled badge](https://mui.com/base/react-badge/#hook)
+   *
+   * API:
+   *
+   * - [useBadge API](https://mui.com/base/api/use-badge/)
+   */
   function useBadge(parameters) {
     const {
       badgeContent: badgeContentProp,
@@ -15253,6 +15287,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     return cachedSupportsTouchActionNone;
   }
+  /**
+   *
+   * Demos:
+   *
+   * - [Unstyled Slider](https://mui.com/base/react-slider/#hook)
+   *
+   * API:
+   *
+   * - [useSlider API](https://mui.com/base/api/use-slider/)
+   */
   function useSlider(parameters) {
     const {
       'aria-labelledby': ariaLabelledby,
@@ -34680,7 +34724,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
   /**
-   * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/.
+   * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/.
    * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
    * use it separately you need to move focus into the component manually. Once
    * the focus is placed inside the component it is fully keyboard accessible.
@@ -38912,7 +38956,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (!readOnly) {
         const validKeys = [' ', 'ArrowUp', 'ArrowDown',
         // The native select doesn't respond to enter on macOS, but it's recommended by
-        // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+        // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
         'Enter'];
         if (validKeys.indexOf(event.key) !== -1) {
           event.preventDefault();