@mui/material 5.14.0 → 5.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.0",
+  "version": "5.14.2",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@mui/base": "5.0.0-beta.7",
-    "@mui/core-downloads-tracker": "^5.14.0",
-    "@mui/system": "^5.14.0",
+    "@babel/runtime": "^7.22.6",
+    "@mui/base": "5.0.0-beta.8",
+    "@mui/core-downloads-tracker": "^5.14.2",
+    "@mui/system": "^5.14.1",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.13.7",
+    "@mui/utils": "^5.14.1",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",

package/styles/components.d.ts

@@ -338,6 +338,11 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiMenuItem'];
     variants?: ComponentsVariants['MuiMenuItem'];
   };
+  MuiMenuList?: {
+    defaultProps?: ComponentsProps['MuiMenuList'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMenuList'];
+    variants?: ComponentsVariants['MuiMenuList'];
+  };
   MuiMobileStepper?: {
     defaultProps?: ComponentsProps['MuiMobileStepper'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMobileStepper'];

package/styles/overrides.d.ts

@@ -66,6 +66,7 @@ import { ListItemTextClassKey } from '../ListItemText';
 import { ListSubheaderClassKey } from '../ListSubheader';
 import { MenuClassKey } from '../Menu';
 import { MenuItemClassKey } from '../MenuItem';
+import { MenuListClassKey } from '../MenuList';
 import { MobileStepperClassKey } from '../MobileStepper';
 import { ModalClassKey } from '../Modal';
 import { NativeSelectClassKey } from '../NativeSelect';
@@ -204,6 +205,7 @@ export interface ComponentNameToClassKey {
   MuiListSubheader: ListSubheaderClassKey;
   MuiMenu: MenuClassKey;
   MuiMenuItem: MenuItemClassKey;
+  MuiMenuList: MenuListClassKey;
   MuiMobileStepper: MobileStepperClassKey;
   MuiModal: ModalClassKey;
   MuiNativeSelect: NativeSelectClassKey;

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.0
+ * @mui/material v5.14.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2131,6 +2131,7 @@
   /**
    * https://github.com/facebook/react/issues/14099#issuecomment-440013892
    */
+
   function useEventCallback(fn) {
     const ref = React__namespace.useRef(fn);
     useEnhancedEffect$1(() => {
@@ -6957,8 +6958,8 @@
   const maxWidth = props => {
     if (props.maxWidth !== undefined && props.maxWidth !== null) {
       const styleFromPropValue = propValue => {
-        var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-        const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
+        var _props$theme;
+        const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
         return {
           maxWidth: breakpoint || sizingTransform(propValue)
         };
@@ -7484,7 +7485,7 @@
       systemProps: {},
       otherProps: {}
     };
-    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+    const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
     Object.keys(props).forEach(prop => {
       if (config[prop]) {
         result.systemProps[prop] = props[prop];
@@ -7611,12 +7612,12 @@
     return variantsStyles;
   };
   const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components, _theme$components$nam;
+    var _theme$components;
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
+    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 => {
         let isMatch = true;
@@ -14805,7 +14806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) {
     var _sliderRef$current, _doc$activeElement;
     const doc = ownerDocument(sliderRef.current);
-    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null ? void 0 : (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
+    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null || (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
       var _sliderRef$current2;
       (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
@@ -14956,7 +14957,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(index);
       }
       setOpen(index);
-      otherHandlers == null ? void 0 : (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
     };
     const createHandleHiddenInputBlur = otherHandlers => event => {
       var _otherHandlers$onBlur;
@@ -14965,7 +14966,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(-1);
       }
       setOpen(-1);
-      otherHandlers == null ? void 0 : (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
     };
     useEnhancedEffect$1(() => {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
@@ -16021,10 +16022,10 @@ 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/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js
-      //
+      // In case of mouse clicks and touch (in mobile devices) we avoid scrolling the element and keep both behaviors same.
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
+      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse' && reason !== 'touch') {
         const element = option;
         const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
         const elementBottom = element.offsetTop + element.offsetHeight;
@@ -16736,7 +16737,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
+    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
     return {
       userSelect: 'none',
       width: '1em',
@@ -16746,19 +16747,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // e.g. heroicons uses fill="none" and stroke="currentColor"
       fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
-      transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-        duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
+      transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+        duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
       }),
       fontSize: {
         inherit: 'inherit',
-        small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-        medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+        small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+        medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+        large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
-      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
-        action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
-        disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
+      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
+        action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
+        disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
         inherit: undefined
       }[ownerState.color]
     };
@@ -21263,8 +21264,6 @@ 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']),
-      // label will inherit this from root, then `clickable` class overrides this for both
-      cursor: 'default',
       // We disable the focus ring for mouse, touch and keyboard users.
       outline: 0,
       textDecoration: 'none',
@@ -27416,7 +27415,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const styles$3 = (theme, enableColorScheme = false) => {
-    var _theme$components, _theme$components$Mui;
+    var _theme$components;
     const colorSchemeStyles = {};
     if (enableColorScheme && theme.colorSchemes) {
       Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
@@ -27444,7 +27443,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       })
     }, colorSchemeStyles);
-    const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
+    const themeOverrides = (_theme$components = theme.components) == null || (_theme$components = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components.styleOverrides;
     if (themeOverrides) {
       defaultStyles = [defaultStyles, themeOverrides];
     }
@@ -30305,6 +30304,66 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var FormControl$1 = FormControl;
 
+  const Stack = createStack({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiStack',
+      slot: 'Root',
+      overridesResolver: (props, styles) => styles.root
+    }),
+    useThemeProps: inProps => useThemeProps({
+      props: inProps,
+      name: 'MuiStack'
+    })
+  });
+  Stack.propTypes /* remove-proptypes */ = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'column'
+     */
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    /**
+     * Add an element between each child.
+     */
+    divider: PropTypes.node,
+    /**
+     * Defines the space between immediate children.
+     * @default 0
+     */
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    /**
+     * The system prop, which 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]),
+    /**
+     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+     *
+     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+     *
+     * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+     * @default false
+     */
+    useFlexGap: PropTypes.bool
+  } ;
+  var Stack$1 = Stack;
+
+  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
+  var stackClasses$1 = stackClasses;
+
   function getFormControlLabelUtilityClasses(slot) {
     return generateUtilityClass('MuiFormControlLabel', slot);
   }
@@ -30445,12 +30504,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label, required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
-        ownerState: ownerState,
-        "aria-hidden": true,
-        className: classes.asterisk,
-        children: ["\u2009", '*']
-      })]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), required ? /*#__PURE__*/jsxRuntime_2(Stack$1, {
+        direction: "row",
+        alignItems: "center",
+        children: [label, /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
+          ownerState: ownerState,
+          "aria-hidden": true,
+          className: classes.asterisk,
+          children: ["\u2009", '*']
+        })]
+      }) : label]
     }));
   });
   FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -43979,66 +44042,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
 
-  const Stack = createStack({
-    createStyledComponent: styled$1('div', {
-      name: 'MuiStack',
-      slot: 'Root',
-      overridesResolver: (props, styles) => styles.root
-    }),
-    useThemeProps: inProps => useThemeProps({
-      props: inProps,
-      name: 'MuiStack'
-    })
-  });
-  Stack.propTypes /* remove-proptypes */ = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'column'
-     */
-    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-    /**
-     * Add an element between each child.
-     */
-    divider: PropTypes.node,
-    /**
-     * Defines the space between immediate children.
-     * @default 0
-     */
-    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    /**
-     * The system prop, which 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]),
-    /**
-     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-     *
-     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-     *
-     * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
-     * @default false
-     */
-    useFlexGap: PropTypes.bool
-  } ;
-  var Stack$1 = Stack;
-
-  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
-  var stackClasses$1 = stackClasses;
-
   /**
    * Provides information about the current step in Stepper.
    */
@@ -48426,10 +48429,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     const [mounted, setMounted] = React__namespace.useState(false);
     const [indicatorStyle, setIndicatorStyle] = React__namespace.useState(defaultIndicatorStyle);
-    const [displayScroll, setDisplayScroll] = React__namespace.useState({
-      start: false,
-      end: false
-    });
+    const [displayStartScroll, setDisplayStartScroll] = React__namespace.useState(false);
+    const [displayEndScroll, setDisplayEndScroll] = React__namespace.useState(false);
+    const [updateScrollObserver, setUpdateScrollObserver] = React__namespace.useState(false);
     const [scrollerStyle, setScrollerStyle] = React__namespace.useState({
       overflow: 'hidden',
       scrollbarWidth: 0
@@ -48580,7 +48582,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onChange: handleScrollbarSizeChange,
         className: clsx(classes.scrollableX, classes.hideScrollbar)
       }) : null;
-      const scrollButtonsActive = displayScroll.start || displayScroll.end;
+      const scrollButtonsActive = displayStartScroll || displayEndScroll;
       const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
       conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
         slots: {
@@ -48592,7 +48594,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         orientation: orientation,
         direction: isRtl ? 'right' : 'left',
         onClick: handleStartScrollClick,
-        disabled: !displayScroll.start
+        disabled: !displayStartScroll
       }, TabScrollButtonProps, {
         className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
@@ -48606,7 +48608,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         orientation: orientation,
         direction: isRtl ? 'left' : 'right',
         onClick: handleEndScrollClick,
-        disabled: !displayScroll.end
+        disabled: !displayEndScroll
       }, TabScrollButtonProps, {
         className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
@@ -48636,30 +48638,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const updateScrollButtonState = useEventCallback(() => {
       if (scrollable && scrollButtons !== false) {
-        const {
-          scrollTop,
-          scrollHeight,
-          clientHeight,
-          scrollWidth,
-          clientWidth
-        } = tabsRef.current;
-        let showStartScroll;
-        let showEndScroll;
-        if (vertical) {
-          showStartScroll = scrollTop > 1;
-          showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-        } else {
-          const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
-          // use 1 for the potential rounding error with browser zooms.
-          showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-          showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-        }
-        if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
-          setDisplayScroll({
-            start: showStartScroll,
-            end: showEndScroll
-          });
-        }
+        setUpdateScrollObserver(!updateScrollObserver);
       }
     });
     React__namespace.useEffect(() => {
@@ -48672,7 +48651,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // replaced by Suspense with a fallback, once React is updated to version 18
         if (tabsRef.current) {
           updateIndicatorState();
-          updateScrollButtonState();
         }
       });
       const win = ownerWindow(tabsRef.current);
@@ -48691,21 +48669,44 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           resizeObserver.disconnect();
         }
       };
-    }, [updateIndicatorState, updateScrollButtonState]);
-    const handleTabsScroll = React__namespace.useMemo(() => debounce$1(() => {
-      updateScrollButtonState();
-    }), [updateScrollButtonState]);
+    }, [updateIndicatorState]);
+
+    /**
+     * Toggle visibility of start and end scroll buttons
+     * Using IntersectionObserver on first and last Tabs.
+     */
     React__namespace.useEffect(() => {
-      return () => {
-        handleTabsScroll.clear();
-      };
-    }, [handleTabsScroll]);
+      const tabListChildren = Array.from(tabListRef.current.children);
+      const length = tabListChildren.length;
+      if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {
+        const firstTab = tabListChildren[0];
+        const lastTab = tabListChildren[length - 1];
+        const observerOptions = {
+          root: tabsRef.current,
+          threshold: 0.99
+        };
+        const handleScrollButtonStart = entries => {
+          setDisplayStartScroll(!entries[0].isIntersecting);
+        };
+        const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+        firstObserver.observe(firstTab);
+        const handleScrollButtonEnd = entries => {
+          setDisplayEndScroll(!entries[0].isIntersecting);
+        };
+        const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+        lastObserver.observe(lastTab);
+        return () => {
+          firstObserver.disconnect();
+          lastObserver.disconnect();
+        };
+      }
+      return undefined;
+    }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
     React__namespace.useEffect(() => {
       setMounted(true);
     }, []);
     React__namespace.useEffect(() => {
       updateIndicatorState();
-      updateScrollButtonState();
     });
     React__namespace.useEffect(() => {
       // Don't animate on the first render.
@@ -48797,7 +48798,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
         },
         ref: tabsRef,
-        onScroll: handleTabsScroll,
         children: [/*#__PURE__*/jsxRuntime_1(FlexContainer, {
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledBy,