@mui/material 5.8.5 → 5.9.0

package/Slider/Slider.js

@@ -579,14 +579,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
@@ -596,7 +596,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
       style: PropTypes.object,
       value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

package/SnackbarContent/SnackbarContent.js

@@ -35,7 +35,7 @@ const SnackbarContentRoot = styled(Paper, {
   const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   const backgroundColor = emphasize(theme.palette.background.default, emphasis);
   return _extends({}, theme.typography.body2, {
-    color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+    color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
     backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
     display: 'flex',
     alignItems: 'center',

package/Tabs/Tabs.js

@@ -541,8 +541,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   React.useEffect(() => {
     const handleResize = debounce(() => {
-      updateIndicatorState();
-      updateScrollButtonState();
+      // If the Tabs 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/33276
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+      if (tabsRef.current) {
+        updateIndicatorState();
+        updateScrollButtonState();
+      }
     });
     const win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);

package/Tooltip/Tooltip.js

@@ -338,12 +338,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
+    } // Workaround for https://github.com/facebook/react/issues/7769
+
+
+    if (!childNode) {
+      setChildNode(event.currentTarget);
     } // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-
-
-    if (childNode) {
+    else {
       childNode.removeAttribute('title');
     }
 
@@ -388,8 +391,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
 
   const handleFocus = event => {
     // Workaround for https://github.com/facebook/react/issues/7769
-    // The autoFocus of React might trigger the event before the componentDidMount.
-    // We need to account for this eventuality.
     if (!childNode) {
       setChildNode(event.currentTarget);
     }

package/Unstable_Grid2/Grid2.d.ts

@@ -0,0 +1,4 @@
+import { OverridableComponent } from '@mui/types';
+import { Grid2TypeMap } from './Grid2Props';
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/Unstable_Grid2/Grid2.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { createGrid } from '@mui/system/Unstable_Grid';
+import { styled, useThemeProps } from '../styles';
+const Grid2 = createGrid({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiGrid2'
+  })
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Grid2;

package/Unstable_Grid2/Grid2Props.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export declare type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1 @@
+export {};

package/Unstable_Grid2/grid2Classes.d.ts

@@ -0,0 +1,5 @@
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export declare type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getGrid2UtilityClass(slot) {
+  return generateUtilityClass('MuiGrid2', slot);
+}
+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 grid2Classes = generateUtilityClasses('MuiGrid2', ['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 grid2Classes;

package/Unstable_Grid2/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/Unstable_Grid2/index.js

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/Unstable_Grid2/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Unstable_Grid2/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -224,6 +224,9 @@ export * from './FormLabel';
 export { default as Grid } from './Grid';
 export * from './Grid';
 
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
+
 export { default as Grow } from './Grow';
 export * from './Grow';
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -106,6 +106,8 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 export { default as Grid } from './Grid';
 export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
 export { default as Grow } from './Grow';
 export * from './Grow';
 export { default as Hidden } from './Hidden';

package/legacy/Alert/Alert.js

@@ -55,20 +55,28 @@ var AlertRoot = styled(Paper, {
     display: 'flex',
     padding: '6px 16px'
   }, color && ownerState.variant === 'standard' && _defineProperty({
-    color: getColor(theme.palette[color].light, 0.6),
-    backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9)
-  }, "& .".concat(alertClasses.icon), {
+    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+    backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
+  }, "& .".concat(alertClasses.icon), theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+  } : {
     color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
   }), color && ownerState.variant === 'outlined' && _defineProperty({
-    color: getColor(theme.palette[color].light, 0.6),
-    border: "1px solid ".concat(theme.palette[color].light)
-  }, "& .".concat(alertClasses.icon), {
+    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+    border: "1px solid ".concat((theme.vars || theme).palette[color].light)
+  }, "& .".concat(alertClasses.icon), theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+  } : {
     color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
-  }), color && ownerState.variant === 'filled' && {
-    color: '#fff',
-    fontWeight: theme.typography.fontWeightMedium,
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-  });
+  }), color && ownerState.variant === 'filled' && _extends({
+    fontWeight: theme.typography.fontWeightMedium
+  }, theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
+    backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
+  } : {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+  }));
 });
 var AlertIcon = styled('div', {
   name: 'MuiAlert',

package/legacy/Autocomplete/Autocomplete.js

@@ -316,7 +316,7 @@ var AutocompleteGroupUl = styled('ul', {
 }));
 export { createFilterOptions };
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$pape;
+  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
   var props = useThemeProps({
     props: inProps,
@@ -477,7 +477,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   if (multiple && value.length > 0) {
     var getCustomizedTagProps = function getCustomizedTagProps(params) {
       return _extends({
-        className: clsx(classes.tag),
+        className: classes.tag,
         disabled: disabled
       }, getTagProps(params));
     };
@@ -577,21 +577,21 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
-              className: clsx(classes.popupIndicator),
-              ownerState: ownerState,
+              ownerState: ownerState
+            }, componentsProps.popupIndicator, {
+              className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
               children: popupIcon
             })) : null]
           })
         }),
         inputProps: _extends({
-          className: clsx(classes.input),
+          className: classes.input,
           disabled: disabled,
           readOnly: readOnly
         }, getInputProps())
       })
-    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
       as: PopperComponent,
-      className: clsx(classes.popper),
       disablePortal: disablePortal,
       style: {
         width: anchorEl ? anchorEl.clientWidth : null
@@ -599,7 +599,9 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: true,
+      open: true
+    }, componentsProps.popper, {
+      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
@@ -638,7 +640,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
           })
         })) : null]
       }))
-    }) : null]
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
@@ -740,7 +742,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   componentsProps: PropTypes.shape({
     clearIndicator: PropTypes.object,
-    paper: PropTypes.object
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
   }),
 
   /**

package/legacy/FilledInput/FilledInput.js

@@ -90,7 +90,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     transform: 'scaleX(1)' // error is always underlined in red
 
   }), _defineProperty(_ref2, '&:before', {
-    borderBottom: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputTouchBottomLine, ")") : bottomLineColor),
+    borderBottom: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")") : bottomLineColor),
     left: 0,
     bottom: 0,
     // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242

package/legacy/Input/Input.js

@@ -43,7 +43,7 @@ var InputRoot = styled(InputBaseRoot, {
   var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
   if (theme.vars) {
-    bottomLineColor = "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputTouchBottomLine, ")");
+    bottomLineColor = "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")");
   }
 
   return _extends({

package/legacy/Modal/Modal.js

@@ -2,9 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
+import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
@@ -125,11 +125,15 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
-        as: component,
-        theme: theme
-      }),
-      backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
+      root: function root() {
+        return _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
+          as: component,
+          theme: theme
+        });
+      },
+      backdrop: function backdrop() {
+        return _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState));
+      }
     },
     onTransitionEnter: function onTransitionEnter() {
       return setExited(false);
@@ -210,8 +214,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    backdrop: PropTypes.object,
-    root: PropTypes.object
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
 
   /**

package/legacy/OutlinedInput/OutlinedInput.js

@@ -141,6 +141,20 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     muiFormControl: muiFormControl,
     states: ['required']
   });
+
+  var ownerState = _extends({}, props, {
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    formControl: muiFormControl,
+    fullWidth: fullWidth,
+    hiddenLabel: fcs.hiddenLabel,
+    multiline: multiline,
+    size: fcs.size,
+    type: type
+  });
+
   return /*#__PURE__*/_jsx(InputBase, _extends({
     components: _extends({
       Root: OutlinedInputRoot,
@@ -148,6 +162,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     }, components),
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
+        ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
           children: [label, "\xA0", '*']

package/legacy/ScopedCssBaseline/ScopedCssBaseline.js

@@ -94,6 +94,11 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */
-  enableColorScheme: PropTypes.bool
+  enableColorScheme: PropTypes.bool,
+
+  /**
+   * 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])
 } : void 0;
 export default ScopedCssBaseline;

package/legacy/Select/Select.js

@@ -301,7 +301,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    * If the value is an object it must have reference equality with the option in order to be selected.
    * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
    */
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.oneOf(['']), PropTypes.any]),
 
   /**
    * The variant to use.

package/legacy/Slider/Slider.js

@@ -590,14 +590,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
@@ -607,7 +607,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
       style: PropTypes.object,
       value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

package/legacy/SnackbarContent/SnackbarContent.js

@@ -34,7 +34,7 @@ var SnackbarContentRoot = styled(Paper, {
   var emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   var backgroundColor = emphasize(theme.palette.background.default, emphasis);
   return _extends({}, theme.typography.body2, _defineProperty({
-    color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+    color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
     backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
     display: 'flex',
     alignItems: 'center',

package/legacy/Tabs/Tabs.js

@@ -552,8 +552,16 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   React.useEffect(function () {
     var handleResize = debounce(function () {
-      updateIndicatorState();
-      updateScrollButtonState();
+      // If the Tabs 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/33276
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+      if (tabsRef.current) {
+        updateIndicatorState();
+        updateScrollButtonState();
+      }
     });
     var win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);

package/legacy/Tooltip/Tooltip.js

@@ -360,12 +360,15 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   var handleEnter = function handleEnter(event) {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
+    } // Workaround for https://github.com/facebook/react/issues/7769
+
+
+    if (!childNode) {
+      setChildNode(event.currentTarget);
     } // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-
-
-    if (childNode) {
+    else {
       childNode.removeAttribute('title');
     }
 
@@ -411,8 +414,6 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
 
   var handleFocus = function handleFocus(event) {
     // Workaround for https://github.com/facebook/react/issues/7769
-    // The autoFocus of React might trigger the event before the componentDidMount.
-    // We need to account for this eventuality.
     if (!childNode) {
       setChildNode(event.currentTarget);
     }

package/legacy/Unstable_Grid2/Grid2.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { createGrid } from '@mui/system/Unstable_Grid';
+import { styled, useThemeProps as _useThemeProps } from '../styles';
+var Grid2 = createGrid({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    overridesResolver: function overridesResolver(props, styles) {
+      return styles.root;
+    }
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: function useThemeProps(inProps) {
+    return _useThemeProps({
+      props: inProps,
+      name: 'MuiGrid2'
+    });
+  }
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Grid2;

package/legacy/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1 @@
+export {};

package/legacy/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,27 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getGrid2UtilityClass(slot) {
+  return generateUtilityClass('MuiGrid2', slot);
+}
+var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+var WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS.map(function (spacing) {
+  return "spacing-xs-".concat(spacing);
+})), _toConsumableArray(DIRECTIONS.map(function (direction) {
+  return "direction-xs-".concat(direction);
+})), _toConsumableArray(WRAPS.map(function (wrap) {
+  return "wrap-xs-".concat(wrap);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-xs-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-sm-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-md-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-lg-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-xl-".concat(size);
+}))));
+export default grid2Classes;

package/legacy/Unstable_Grid2/index.js

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -106,6 +106,8 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 export { default as Grid } from './Grid';
 export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
 export { default as Grow } from './Grow';
 export * from './Grow';
 export { default as Hidden } from './Hidden';