@mui/material 5.14.1 → 5.14.2

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.1
+ * @mui/material v5.14.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -21264,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',
@@ -25612,7 +25610,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -29569,7 +29567,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -34769,7 +34767,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent List component.
@@ -35195,7 +35193,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * The components used for each slot inside.
      *
@@ -36857,7 +36855,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent Menu component.
@@ -48431,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
@@ -48585,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: {
@@ -48597,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;
@@ -48611,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;
@@ -48641,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(() => {
@@ -48677,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);
@@ -48696,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.
@@ -48802,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,