@mui/material 5.14.0 → 5.14.2

package/legacy/Tabs/Tabs.js

@@ -286,18 +286,21 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   var _React$useState2 = React.useState(defaultIndicatorStyle),
     indicatorStyle = _React$useState2[0],
     setIndicatorStyle = _React$useState2[1];
-  var _React$useState3 = React.useState({
-      start: false,
-      end: false
-    }),
-    displayScroll = _React$useState3[0],
-    setDisplayScroll = _React$useState3[1];
-  var _React$useState4 = React.useState({
+  var _React$useState3 = React.useState(false),
+    displayStartScroll = _React$useState3[0],
+    setDisplayStartScroll = _React$useState3[1];
+  var _React$useState4 = React.useState(false),
+    displayEndScroll = _React$useState4[0],
+    setDisplayEndScroll = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    updateScrollObserver = _React$useState5[0],
+    setUpdateScrollObserver = _React$useState5[1];
+  var _React$useState6 = React.useState({
       overflow: 'hidden',
       scrollbarWidth: 0
     }),
-    scrollerStyle = _React$useState4[0],
-    setScrollerStyle = _React$useState4[1];
+    scrollerStyle = _React$useState6[0],
+    setScrollerStyle = _React$useState6[1];
   var valueToIndex = new Map();
   var tabsRef = React.useRef(null);
   var tabListRef = React.useRef(null);
@@ -441,7 +444,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange: handleScrollbarSizeChange,
       className: clsx(classes.scrollableX, classes.hideScrollbar)
     }) : null;
-    var scrollButtonsActive = displayScroll.start || displayScroll.end;
+    var scrollButtonsActive = displayStartScroll || displayEndScroll;
     var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
@@ -453,7 +456,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
+      disabled: !displayStartScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -467,7 +470,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
+      disabled: !displayEndScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -496,29 +499,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   var updateScrollButtonState = useEventCallback(function () {
     if (scrollable && scrollButtons !== false) {
-      var _tabsRef$current = tabsRef.current,
-        scrollTop = _tabsRef$current.scrollTop,
-        scrollHeight = _tabsRef$current.scrollHeight,
-        clientHeight = _tabsRef$current.clientHeight,
-        scrollWidth = _tabsRef$current.scrollWidth,
-        clientWidth = _tabsRef$current.clientWidth;
-      var showStartScroll;
-      var showEndScroll;
-      if (vertical) {
-        showStartScroll = scrollTop > 1;
-        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-      } else {
-        var 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.useEffect(function () {
@@ -531,7 +512,6 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     var win = ownerWindow(tabsRef.current);
@@ -550,23 +530,44 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  var handleTabsScroll = React.useMemo(function () {
-    return debounce(function () {
-      updateScrollButtonState();
-    });
-  }, [updateScrollButtonState]);
+  }, [updateIndicatorState]);
+
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.useEffect(function () {
-    return function () {
-      handleTabsScroll.clear();
-    };
-  }, [handleTabsScroll]);
+    var tabListChildren = Array.from(tabListRef.current.children);
+    var length = tabListChildren.length;
+    if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {
+      var firstTab = tabListChildren[0];
+      var lastTab = tabListChildren[length - 1];
+      var observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99
+      };
+      var handleScrollButtonStart = function handleScrollButtonStart(entries) {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      var firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      firstObserver.observe(firstTab);
+      var handleScrollButtonEnd = function handleScrollButtonEnd(entries) {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      var lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+      return function () {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
   React.useEffect(function () {
     setMounted(true);
   }, []);
   React.useEffect(function () {
     updateIndicatorState();
-    updateScrollButtonState();
   });
   React.useEffect(function () {
     // Don't animate on the first render.
@@ -661,7 +662,6 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         overflow: scrollerStyle.overflow
       }, vertical ? "margin".concat(isRtl ? 'Left' : 'Right') : 'marginBottom', visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth),
       ref: tabsRef,
-      onScroll: handleTabsScroll,
       children: [/*#__PURE__*/_jsx(FlexContainer, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,

package/legacy/index.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

package/legacy/useTouchRipple/useTouchRipple.js

@@ -30,7 +30,7 @@ var useTouchRipple = function useTouchRipple(props) {
       keydownRef.current = true;
       rippleRef.current.stop(event, function () {
         var _rippleRef$current2;
-        rippleRef == null ? void 0 : (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
+        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
       });
     }
   });
@@ -41,7 +41,7 @@ var useTouchRipple = function useTouchRipple(props) {
       keydownRef.current = false;
       rippleRef.current.stop(event, function () {
         var _rippleRef$current3;
-        rippleRef == null ? void 0 : (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
+        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
       });
     }
   });

package/modern/Chip/Chip.js

@@ -93,8 +93,6 @@ const ChipRoot = styled('div', {
     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',

package/modern/FormControlLabel/FormControlLabel.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useFormControl } from '../FormControl';
+import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
@@ -149,12 +150,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/_jsxs(AsteriskComponent, {
-      ownerState: ownerState,
-      "aria-hidden": true,
-      className: classes.asterisk,
-      children: ["\u2009", '*']
-    })]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
+        ownerState: ownerState,
+        "aria-hidden": true,
+        className: classes.asterisk,
+        children: ["\u2009", '*']
+      })]
+    }) : label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {

package/modern/Tabs/Tabs.js

@@ -280,10 +280,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   }
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayScroll, setDisplayScroll] = React.useState({
-    start: false,
-    end: false
-  });
+  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
+  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
+  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -434,7 +433,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       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__*/_jsx(ScrollButtonComponent, _extends({
       slots: {
@@ -446,7 +445,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
+      disabled: !displayStartScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -460,7 +459,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
+      disabled: !displayEndScroll
     }, TabScrollButtonProps, {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -490,30 +489,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   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.useEffect(() => {
@@ -526,7 +502,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     const win = ownerWindow(tabsRef.current);
@@ -545,21 +520,44 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  const handleTabsScroll = React.useMemo(() => debounce(() => {
-    updateScrollButtonState();
-  }), [updateScrollButtonState]);
+  }, [updateIndicatorState]);
+
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.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?.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);
   React.useEffect(() => {
     updateIndicatorState();
-    updateScrollButtonState();
   });
   React.useEffect(() => {
     // Don't animate on the first render.
@@ -653,7 +651,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
       },
       ref: tabsRef,
-      onScroll: handleTabsScroll,
       children: [/*#__PURE__*/_jsx(FlexContainer, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,

package/modern/index.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

package/node/Chip/Chip.js

@@ -100,8 +100,6 @@ const ChipRoot = (0, _styled.default)('div', {
     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',

package/node/CssBaseline/CssBaseline.js

@@ -39,7 +39,7 @@ const body = theme => (0, _extends2.default)({
 });
 exports.body = body;
 const styles = (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]) => {
@@ -67,7 +67,7 @@ const styles = (theme, enableColorScheme = false) => {
       }
     })
   }, 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];
   }

package/node/FormControlLabel/FormControlLabel.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _base = require("@mui/base");
 var _FormControl = require("../FormControl");
+var _Stack = _interopRequireDefault(require("../Stack"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -158,12 +159,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
-      ownerState: ownerState,
-      "aria-hidden": true,
-      className: classes.asterisk,
-      children: ["\u2009", '*']
-    })]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
+      direction: "row",
+      alignItems: "center",
+      children: [label, /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
+        ownerState: ownerState,
+        "aria-hidden": true,
+        className: classes.asterisk,
+        children: ["\u2009", '*']
+      })]
+    }) : label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {

package/node/SvgIcon/SvgIcon.js

@@ -44,7 +44,7 @@ const SvgIconRoot = (0, _styled.default)('svg', {
   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',
@@ -54,19 +54,19 @@ const SvgIconRoot = (0, _styled.default)('svg', {
     // 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]
   };

package/node/Tabs/Tabs.js

@@ -287,10 +287,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   }
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayScroll, setDisplayScroll] = React.useState({
-    start: false,
-    end: false
-  });
+  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
+  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
+  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -441,7 +440,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange: handleScrollbarSizeChange,
       className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(ScrollButtonComponent, (0, _extends2.default)({
       slots: {
@@ -453,7 +452,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayScroll.start
+      disabled: !displayStartScroll
     }, TabScrollButtonProps, {
       className: (0, _clsx.default)(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -467,7 +466,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayScroll.end
+      disabled: !displayEndScroll
     }, TabScrollButtonProps, {
       className: (0, _clsx.default)(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
@@ -497,30 +496,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const updateScrollButtonState = (0, _useEventCallback.default)(() => {
     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 = (0, _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.useEffect(() => {
@@ -533,7 +509,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // replaced by Suspense with a fallback, once React is updated to version 18
       if (tabsRef.current) {
         updateIndicatorState();
-        updateScrollButtonState();
       }
     });
     const win = (0, _ownerWindow.default)(tabsRef.current);
@@ -552,21 +527,44 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         resizeObserver.disconnect();
       }
     };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  const handleTabsScroll = React.useMemo(() => (0, _debounce.default)(() => {
-    updateScrollButtonState();
-  }), [updateScrollButtonState]);
+  }, [updateIndicatorState]);
+
+  /**
+   * Toggle visibility of start and end scroll buttons
+   * Using IntersectionObserver on first and last Tabs.
+   */
   React.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.useEffect(() => {
     setMounted(true);
   }, []);
   React.useEffect(() => {
     updateIndicatorState();
-    updateScrollButtonState();
   });
   React.useEffect(() => {
     // Don't animate on the first render.
@@ -660,7 +658,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
       },
       ref: tabsRef,
-      onScroll: handleTabsScroll,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FlexContainer, {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,

package/node/index.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

package/node/useTouchRipple/useTouchRipple.js

@@ -38,7 +38,7 @@ const useTouchRipple = props => {
       keydownRef.current = true;
       rippleRef.current.stop(event, () => {
         var _rippleRef$current2;
-        rippleRef == null ? void 0 : (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
+        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
       });
     }
   });
@@ -49,7 +49,7 @@ const useTouchRipple = props => {
       keydownRef.current = false;
       rippleRef.current.stop(event, () => {
         var _rippleRef$current3;
-        rippleRef == null ? void 0 : (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
+        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
       });
     }
   });