@mui/material 5.11.6 → 5.11.8

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.6
+ * @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;
         }
-        return mode;
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+        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
         });
       }
@@ -10216,7 +10239,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const shouldSkipGeneratingVar = keys => {
     var _keys$;
-    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+    // ends with sxConfig
+    keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
   };
   const defaultTheme$1 = extendTheme();
   const {
@@ -10398,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`.
@@ -10585,20 +10611,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onInputChange(event, newInputValue, 'reset');
       }
     }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value]);
-    const prevValue = React__namespace.useRef();
-    React__namespace.useEffect(() => {
-      const valueChange = value !== prevValue.current;
-      prevValue.current = value;
-      if (focused && !valueChange) {
-        return;
-      }
-
-      // Only reset the input's value when freeSolo if the component's value changes.
-      if (freeSolo && !valueChange) {
-        return;
-      }
-      resetInputValue(null, value);
-    }, [value, resetInputValue, focused, prevValue, freeSolo]);
     const [open, setOpenState] = useControlled({
       controlled: openProp,
       default: false,
@@ -10620,6 +10632,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
       getOptionLabel
     }) : [];
+    const previousProps = usePreviousProps$1({
+      filteredOptions,
+      value
+    });
+    React__namespace.useEffect(() => {
+      const valueChange = value !== previousProps.value;
+      if (focused && !valueChange) {
+        return;
+      }
+
+      // Only reset the input's value when freeSolo if the component's value changes.
+      if (freeSolo && !valueChange) {
+        return;
+      }
+      resetInputValue(null, value);
+    }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
     const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
     {
       if (value !== null && !freeSolo && options.length > 0) {
@@ -10710,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' });
@@ -10790,10 +10818,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     });
+    const checkHighlightedOptionExists = () => {
+      var _previousProps$value;
+      if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && (multiple ? previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : getOptionLabel((_previousProps$value = previousProps.value) != null ? _previousProps$value : '') === getOptionLabel(value != null ? value : ''))) {
+        const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
+        if (previousHighlightedOption) {
+          const previousHighlightedOptionExists = filteredOptions.some(option => {
+            return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
+          });
+          if (previousHighlightedOptionExists) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
     const syncHighlightedIndex = React__namespace.useCallback(() => {
       if (!popupOpen) {
         return;
       }
+
+      // Check if the previously highlighted option still exists in the updated filtered options list and if the value hasn't changed
+      // If it exists and the value hasn't changed, return, otherwise continue execution
+      if (checkHighlightedOptionExists()) {
+        return;
+      }
       const valueItem = multiple ? value[0] : value;
 
       // The popup is empty, reset
@@ -11352,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,
@@ -15228,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,
@@ -25755,7 +25824,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onChange,
         onFocus,
         readOnly,
-        required,
+        required = false,
         tabIndex,
         type,
         value
@@ -26095,10 +26164,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     defaultChecked: PropTypes.bool,
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -26140,6 +26211,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -34652,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.
@@ -37726,6 +37798,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -37759,6 +37832,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -38882,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();
@@ -42067,6 +42141,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }));
   let hystersisOpen = false;
   let hystersisTimer = null;
+  let cursorPosition = {
+    x: 0,
+    y: 0
+  };
   function composeEventHandler(handler, eventHandler) {
     return event => {
       if (eventHandler) {
@@ -42304,17 +42382,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (!title && title !== 0) {
       open = false;
     }
-    const positionRef = React__namespace.useRef({
-      x: 0,
-      y: 0
-    });
     const popperRef = React__namespace.useRef();
     const handleMouseMove = event => {
       const childrenProps = children.props;
       if (childrenProps.onMouseMove) {
         childrenProps.onMouseMove(event);
       }
-      positionRef.current = {
+      cursorPosition = {
         x: event.clientX,
         y: event.clientY
       };
@@ -42420,10 +42494,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         placement: placement,
         anchorEl: followCursor ? {
           getBoundingClientRect: () => ({
-            top: positionRef.current.y,
-            left: positionRef.current.x,
-            right: positionRef.current.x,
-            bottom: positionRef.current.y,
+            top: cursorPosition.y,
+            left: cursorPosition.x,
+            right: cursorPosition.x,
+            bottom: cursorPosition.y,
             width: 0,
             height: 0
           })
@@ -45173,6 +45247,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -45209,6 +45284,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -47229,6 +47305,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     direction: PropTypes.oneOf(['left', 'right']).isRequired,
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled: PropTypes.bool,
     /**