@mui/material 5.14.9 → 5.14.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.9",
+  "version": "5.14.11",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@mui/base": "5.0.0-beta.15",
-    "@mui/core-downloads-tracker": "^5.14.9",
-    "@mui/system": "^5.14.9",
+    "@mui/base": "5.0.0-beta.17",
+    "@mui/core-downloads-tracker": "^5.14.11",
+    "@mui/system": "^5.14.11",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.9",
+    "@mui/utils": "^5.14.11",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.9
+ * @mui/material v5.14.11
  *
  * @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;
 
@@ -2118,7 +2129,8 @@
   }
 
   /**
-   * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+   * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+   * See RFC in https://github.com/reactjs/rfcs/pull/220
    */
 
   function useEventCallback(fn) {
@@ -8866,11 +8878,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,
       /**
@@ -8878,7 +8890,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,
@@ -19599,64 +19611,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();
     });
@@ -21124,6 +21123,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderRadius: 32 / 2,
       whiteSpace: 'nowrap',
       transition: theme.transitions.create(['background-color', 'box-shadow']),
+      // reset cursor explicitly in case ButtonBase is used
+      cursor: 'unset',
       // We disable the focus ring for mouse, touch and keyboard users.
       outline: 0,
       textDecoration: 'none',
@@ -23521,8 +23522,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
         alt: alt,
-        src: src,
         srcSet: srcSet,
+        src: src,
         sizes: sizes,
         ownerState: ownerState,
         className: classes.img
@@ -40236,6 +40237,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         MenuListProps: _extends({
           'aria-labelledby': labelId,
           role: 'listbox',
+          'aria-multiselectable': multiple ? 'true' : undefined,
           disableListWrap: true
         }, MenuProps.MenuListProps),
         slotProps: {
@@ -48912,7 +48914,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      *  - `scrollable` will invoke scrolling properties and allow for horizontally
      *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
+     *  - `fullWidth` will make the tabs grow to use all the available space,
      *  which should be used for small views, like on mobile.
      *  - `standard` will render the default state.
      * @default 'standard'