@mui/material 5.14.10 → 5.14.12

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.10
+ * @mui/material v5.14.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -1983,7 +1983,11 @@
   }
 
   function isMuiElement(element, muiNames) {
-    return /*#__PURE__*/React__namespace.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+    var _muiName, _element$type;
+    return /*#__PURE__*/React__namespace.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+    // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+    // eslint-disable-next-line no-underscore-dangle
+    (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
   }
 
   function ownerDocument(node) {
@@ -2037,6 +2041,13 @@
     }
   }
 
+  /**
+   * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+   * This is useful for effects that are only needed for client-side rendering but not for SSR.
+   *
+   * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+   * and confirm it doesn't apply to your use-case.
+   */
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -2393,6 +2404,16 @@
   };
   var usePreviousProps$1 = usePreviousProps;
 
+  /**
+   * Gets only the valid children of a component,
+   * and ignores any nullish or falsy child.
+   *
+   * @param children the children
+   */
+  function getValidReactChildren(children) {
+    return React__namespace.Children.toArray(children).filter(child => /*#__PURE__*/React__namespace.isValidElement(child));
+  }
+
   const visuallyHidden = {
     border: 0,
     clip: 'rect(0 0 0 0)',
@@ -7604,40 +7625,48 @@
     }
     return null;
   };
+  const transformVariants = variants => {
+    const variantsStyles = {};
+    if (variants) {
+      variants.forEach(definition => {
+        const key = propsToClassKey(definition.props);
+        variantsStyles[key] = definition.style;
+      });
+    }
+    return variantsStyles;
+  };
   const getVariantStyles = (name, theme) => {
     let variants = [];
     if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
       variants = theme.components[name].variants;
     }
-    const variantsStyles = {};
-    variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
-      variantsStyles[key] = definition.style;
-    });
-    return variantsStyles;
+    return transformVariants(variants);
   };
-  const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components;
+  const variantsResolver = (props, styles, variants) => {
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-    if (themeVariants) {
-      themeVariants.forEach(themeVariant => {
+    if (variants) {
+      variants.forEach(variant => {
         let isMatch = true;
-        Object.keys(themeVariant.props).forEach(key => {
-          if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
         if (isMatch) {
-          variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
         }
       });
     }
     return variantsStyles;
   };
+  const themeVariantsResolver = (props, styles, theme, name) => {
+    var _theme$components;
+    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+    return variantsResolver(props, styles, themeVariants);
+  };
 
   // Update /system/styled/#api in case if this changes
   function shouldForwardProp(prop) {
@@ -7663,6 +7692,29 @@
     }
     return (props, styles) => styles[slot];
   }
+  const muiStyledFunctionResolver = ({
+    styledArg,
+    props,
+    defaultTheme,
+    themeId
+  }) => {
+    const resolvedStyles = styledArg(_extends({}, props, {
+      theme: resolveTheme(_extends({}, props, {
+        defaultTheme,
+        themeId
+      }))
+    }));
+    let optionalVariants;
+    if (resolvedStyles && resolvedStyles.variants) {
+      optionalVariants = resolvedStyles.variants;
+      delete resolvedStyles.variants;
+    }
+    if (optionalVariants) {
+      const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+      return [resolvedStyles, ...variantsStyles];
+    }
+    return resolvedStyles;
+  };
   function createStyled(input = {}) {
     const {
       themeId,
@@ -7729,16 +7781,61 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-            return stylesArg(_extends({}, props, {
-              theme: resolveTheme(_extends({}, props, {
-                defaultTheme,
-                themeId
-              }))
-            }));
-          } : stylesArg;
+          if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+            return props => muiStyledFunctionResolver({
+              styledArg: stylesArg,
+              props,
+              defaultTheme,
+              themeId
+            });
+          }
+          if (isPlainObject(stylesArg)) {
+            let transformedStylesArg = stylesArg;
+            let styledArgVariants;
+            if (stylesArg && stylesArg.variants) {
+              styledArgVariants = stylesArg.variants;
+              delete transformedStylesArg.variants;
+              transformedStylesArg = props => {
+                let result = stylesArg;
+                const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+                variantStyles.forEach(variantStyle => {
+                  result = deepmerge(result, variantStyle);
+                });
+                return result;
+              };
+            }
+            return transformedStylesArg;
+          }
+          return stylesArg;
         }) : [];
         let transformedStyleArg = styleArg;
+        if (isPlainObject(styleArg)) {
+          let styledArgVariants;
+          if (styleArg && styleArg.variants) {
+            styledArgVariants = styleArg.variants;
+            delete transformedStyleArg.variants;
+            transformedStyleArg = props => {
+              let result = styleArg;
+              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+              variantStyles.forEach(variantStyle => {
+                result = deepmerge(result, variantStyle);
+              });
+              return result;
+            };
+          }
+        } else if (typeof styleArg === 'function' &&
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+        // component stays as a function. This condition makes sure that we do not interpolate functions
+        // which are basically components used as a selectors.
+        styleArg.__emotion_real !== styleArg) {
+          // If the type is function, we need to define the default theme.
+          transformedStyleArg = props => muiStyledFunctionResolver({
+            styledArg: styleArg,
+            props,
+            defaultTheme,
+            themeId
+          });
+        }
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
             const theme = resolveTheme(_extends({}, props, {
@@ -7764,7 +7861,7 @@
               defaultTheme,
               themeId
             }));
-            return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+            return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
         if (!skipSx) {
@@ -7776,18 +7873,6 @@
           // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
           transformedStyleArg = [...styleArg, ...placeholders];
           transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-        } else if (typeof styleArg === 'function' &&
-        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-        // component stays as a function. This condition makes sure that we do not interpolate functions
-        // which are basically components used as a selectors.
-        styleArg.__emotion_real !== styleArg) {
-          // If the type is function, we need to define the default theme.
-          transformedStyleArg = props => styleArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
         }
         const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
         {
@@ -8867,11 +8952,11 @@ try {
        */
       disableStyleSheetGeneration: PropTypes.bool,
       /**
-       * Disable CSS transitions when switching between modes or color schemes
+       * Disable CSS transitions when switching between modes or color schemes.
        */
       disableTransitionOnChange: PropTypes.bool,
       /**
-       * The document to attach the attribute to
+       * The document to attach the attribute to.
        */
       documentNode: PropTypes.any,
       /**
@@ -8879,7 +8964,7 @@ try {
        */
       modeStorageKey: PropTypes.string,
       /**
-       * The window that attaches the 'storage' event listener
+       * The window that attaches the 'storage' event listener.
        * @default window
        */
       storageWindow: PropTypes.any,
@@ -19260,12 +19345,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
-    const getRootProps = (otherHandlers = {}) => {
+    const getRootProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseDown: createHandleMouseDown(otherHandlers || {})
+        onMouseDown: createHandleMouseDown(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-      return _extends({
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
+      return _extends({}, externalProps, {
         ref: handleRef
       }, mergedEventHandlers);
     };
@@ -19280,12 +19366,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null || _otherHandlers$onMous3.call(otherHandlers, event);
       setOpen(-1);
     };
-    const getThumbProps = (otherHandlers = {}) => {
+    const getThumbProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseOver: createHandleMouseOver(otherHandlers || {}),
-        onMouseLeave: createHandleMouseLeave(otherHandlers || {})
+        onMouseOver: createHandleMouseOver(externalHandlers || {}),
+        onMouseLeave: createHandleMouseLeave(externalHandlers || {})
       };
-      return _extends({}, otherHandlers, ownEventHandlers);
+      return _extends({}, externalProps, externalHandlers, ownEventHandlers);
     };
     const getThumbStyle = index => {
       return {
@@ -19293,14 +19380,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         pointerEvents: active !== -1 && active !== index ? 'none' : undefined
       };
     };
-    const getHiddenInputProps = (otherHandlers = {}) => {
+    const getHiddenInputProps = (externalProps = {}) => {
       var _parameters$step;
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onChange: createHandleHiddenInputChange(otherHandlers || {}),
-        onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
-        onBlur: createHandleHiddenInputBlur(otherHandlers || {})
+        onChange: createHandleHiddenInputChange(externalHandlers || {}),
+        onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+        onBlur: createHandleHiddenInputBlur(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
       return _extends({
         tabIndex,
         'aria-labelledby': ariaLabelledby,
@@ -19313,7 +19401,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         max: parameters.max,
         step: parameters.step === null && parameters.marks ? 'any' : (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
-      }, mergedEventHandlers, {
+      }, externalProps, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
           direction: isRtl ? 'rtl' : 'ltr',
           // So that VoiceOver's focus indicator matches the thumb's dimensions
@@ -19600,64 +19688,51 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (isEmpty$1(newState)) {
         return;
       }
-      setState(prevState => {
-        return updateState(prevState, newState);
-      });
+      setState(prevState => updateState(prevState, newState));
     }, [getUpdatedState]);
-    const syncHeightWithFlushSync = () => {
-      const newState = getUpdatedState();
-      if (isEmpty$1(newState)) {
-        return;
-      }
+    useEnhancedEffect$1(() => {
+      const syncHeightWithFlushSync = () => {
+        const newState = getUpdatedState();
+        if (isEmpty$1(newState)) {
+          return;
+        }
 
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM__namespace.flushSync(() => {
-        setState(prevState => {
-          return updateState(prevState, newState);
+        // In React 18, state updates in a ResizeObserver's callback are happening after
+        // the paint, this leads to an infinite rendering.
+        //
+        // Using flushSync ensures that the states is updated before the next pain.
+        // Related issue - https://github.com/facebook/react/issues/24331
+        ReactDOM__namespace.flushSync(() => {
+          setState(prevState => updateState(prevState, newState));
         });
-      });
-    };
-    React__namespace.useEffect(() => {
+      };
       const handleResize = () => {
         renders.current = 0;
-
-        // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-        // ResizeObserver's handler that runs because of the change in the layout is trying to
-        // access a dom node that is no longer there (as the fallback component is being shown instead).
-        // See https://github.com/mui/material-ui/issues/32640
-        if (inputRef.current) {
-          syncHeightWithFlushSync();
-        }
+        syncHeightWithFlushSync();
       };
-      const handleResizeWindow = debounce$1(() => {
-        renders.current = 0;
-
-        // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-        // ResizeObserver's handler that runs because of the change in the layout is trying to
-        // access a dom node that is no longer there (as the fallback component is being shown instead).
-        // See https://github.com/mui/material-ui/issues/32640
-        if (inputRef.current) {
-          syncHeightWithFlushSync();
-        }
-      });
-      let resizeObserver;
+      // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+      // in test.
+      // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+      // Also see https://github.com/mui/mui-x/issues/8733
+      let rAF;
+      const debounceHandleResize = debounce$1(handleResize);
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
-      containerWindow.addEventListener('resize', handleResizeWindow);
+      containerWindow.addEventListener('resize', debounceHandleResize);
+      let resizeObserver;
       if (typeof ResizeObserver !== 'undefined') {
         resizeObserver = new ResizeObserver(handleResize);
         resizeObserver.observe(input);
       }
       return () => {
-        handleResizeWindow.clear();
-        containerWindow.removeEventListener('resize', handleResizeWindow);
+        debounceHandleResize.clear();
+        cancelAnimationFrame(rAF);
+        containerWindow.removeEventListener('resize', debounceHandleResize);
         if (resizeObserver) {
           resizeObserver.disconnect();
         }
       };
-    });
+    }, [getUpdatedState]);
     useEnhancedEffect$1(() => {
       syncHeight();
     });
@@ -25728,9 +25803,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-    const getButtonPositionClassName = (index, childrenParam) => {
+    const validChildren = getValidReactChildren(children);
+    const childrenCount = validChildren.length;
+    const getButtonPositionClassName = index => {
       const isFirstButton = index === 0;
-      const isLastButton = index === React__namespace.Children.count(childrenParam) - 1;
+      const isLastButton = index === childrenCount - 1;
       if (isFirstButton && isLastButton) {
         return '';
       }
@@ -25751,14 +25828,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
         value: context,
-        children: React__namespace.Children.map(children, (child, index) => {
-          if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
-            return child;
-          }
+        children: validChildren.map((child, index) => {
           return /*#__PURE__*/jsxRuntime_1(ButtonGroupButtonContext$1.Provider, {
-            value: getButtonPositionClassName(index, children),
+            value: getButtonPositionClassName(index),
             children: child
-          });
+          }, index);
         })
       })
     }));
@@ -28218,7 +28292,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     justifyContent: 'flex-end',
     flex: '0 0 auto'
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   }));
@@ -40180,11 +40254,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$x(ownerState);
     const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
+    const listboxId = useId();
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(SelectSelect, _extends({
         ref: handleDisplayRef,
         tabIndex: tabIndex,
-        role: "button",
+        role: "combobox",
+        "aria-controls": listboxId,
         "aria-disabled": disabled ? 'true' : undefined,
         "aria-expanded": open ? 'true' : 'false',
         "aria-haspopup": "listbox",
@@ -40239,15 +40315,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         MenuListProps: _extends({
           'aria-labelledby': labelId,
           role: 'listbox',
-          disableListWrap: true
+          'aria-multiselectable': multiple ? 'true' : undefined,
+          disableListWrap: true,
+          id: listboxId
         }, MenuProps.MenuListProps),
-        slotProps: {
+        slotProps: _extends({}, MenuProps.slotProps, {
           paper: _extends({}, paperProps, {
             style: _extends({
               minWidth: menuMinWidth
             }, paperProps != null ? paperProps.style : null)
           })
-        },
+        }),
         children: items
       }))]
     });