@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/Tabs/Tabs.js

@@ -6,21 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
-var _scrollLeft = require("../utils/scrollLeft");
 var _animate = _interopRequireDefault(require("../internal/animate"));
 var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
 var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
@@ -29,7 +26,6 @@ var _tabsClasses = _interopRequireWildcard(require("./tabsClasses"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const nextItem = (list, item) => {
@@ -95,7 +91,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tabsClasses.getTabsUtilityClass, classes);
 };
-const TabsRoot = (0, _styled.default)('div', {
+const TabsRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -108,25 +104,35 @@ const TabsRoot = (0, _styled.default)('div', {
       [`& .${_tabsClasses.default.scrollButtons}`]: ownerState.scrollButtonsHideMobile && styles.scrollButtonsHideMobile
     }, styles.root, ownerState.vertical && styles.vertical];
   }
-})(({
-  ownerState,
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   overflow: 'hidden',
   minHeight: 48,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${_tabsClasses.default.scrollButtons}`]: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none'
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
     }
-  }
-}));
-const TabsScroller = (0, _styled.default)('div', {
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollButtonsHideMobile,
+    style: {
+      [`& .${_tabsClasses.default.scrollButtons}`]: {
+        [theme.breakpoints.down('sm')]: {
+          display: 'none'
+        }
+      }
+    }
+  }]
+})));
+const TabsScroller = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'Scroller',
   overridesResolver: (props, styles) => {
@@ -135,31 +141,50 @@ const TabsScroller = (0, _styled.default)('div', {
     } = props;
     return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   position: 'relative',
   display: 'inline-block',
   flex: '1 1 auto',
-  whiteSpace: 'nowrap'
-}, ownerState.fixed && {
-  overflowX: 'hidden',
-  width: '100%'
-}, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: 'none',
-  // Firefox
-  '&::-webkit-scrollbar': {
-    display: 'none' // Safari + Chrome
-  }
-}, ownerState.scrollableX && {
-  overflowX: 'auto',
-  overflowY: 'hidden'
-}, ownerState.scrollableY && {
-  overflowY: 'auto',
-  overflowX: 'hidden'
-}));
-const FlexContainer = (0, _styled.default)('div', {
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.fixed,
+    style: {
+      overflowX: 'hidden',
+      width: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hideScrollbar,
+    style: {
+      // Hide dimensionless scrollbar on macOS
+      scrollbarWidth: 'none',
+      // Firefox
+      '&::-webkit-scrollbar': {
+        display: 'none' // Safari + Chrome
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableX,
+    style: {
+      overflowX: 'auto',
+      overflowY: 'hidden'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableY,
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    }
+  }]
+});
+const FlexContainer = (0, _zeroStyled.styled)('div', {
   name: 'MuiTabs',
   slot: 'FlexContainer',
   overridesResolver: (props, styles) => {
@@ -168,38 +193,62 @@ const FlexContainer = (0, _styled.default)('div', {
     } = props;
     return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.centered && {
-  justifyContent: 'center'
-}));
-const TabsIndicator = (0, _styled.default)('span', {
+})({
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.centered,
+    style: {
+      justifyContent: 'center'
+    }
+  }]
+});
+const TabsIndicator = (0, _zeroStyled.styled)('span', {
   name: 'MuiTabs',
   slot: 'Indicator',
   overridesResolver: (props, styles) => styles.indicator
-})(({
-  ownerState,
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   position: 'absolute',
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create()
-}, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-}, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: (theme.vars || theme).palette.secondary.main
-}, ownerState.vertical && {
-  height: '100%',
-  width: 2,
-  right: 0
-}));
-const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default)({
+  transition: theme.transitions.create(),
+  variants: [{
+    props: {
+      indicatorColor: 'primary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      indicatorColor: 'secondary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.secondary.main
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      height: '100%',
+      width: 2,
+      right: 0
+    }
+  }]
+})));
+const TabsScrollbarSize = (0, _zeroStyled.styled)(_ScrollbarSize.default)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS
@@ -212,37 +261,37 @@ const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default)({
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTabs'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      action,
-      centered = false,
-      children: childrenProp,
-      className,
-      component = 'div',
-      allowScrollButtonsMobile = false,
-      indicatorColor = 'primary',
-      onChange,
-      orientation = 'horizontal',
-      ScrollButtonComponent = _TabScrollButton.default,
-      scrollButtons = 'auto',
-      selectionFollowsFocus,
-      slots = {},
-      slotProps = {},
-      TabIndicatorProps = {},
-      TabScrollButtonProps = {},
-      textColor = 'primary',
-      value,
-      variant = 'standard',
-      visibleScrollbar = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    action,
+    centered = false,
+    children: childrenProp,
+    className,
+    component = 'div',
+    allowScrollButtonsMobile = false,
+    indicatorColor = 'primary',
+    onChange,
+    orientation = 'horizontal',
+    ScrollButtonComponent = _TabScrollButton.default,
+    scrollButtons = 'auto',
+    selectionFollowsFocus,
+    slots = {},
+    slotProps = {},
+    TabIndicatorProps = {},
+    TabScrollButtonProps = {},
+    textColor = 'primary',
+    value,
+    variant = 'standard',
+    visibleScrollbar = false,
+    ...other
+  } = props;
   const scrollable = variant === 'scrollable';
   const vertical = orientation === 'vertical';
   const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -250,7 +299,8 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const end = vertical ? 'bottom' : 'right';
   const clientSize = vertical ? 'clientHeight' : 'clientWidth';
   const size = vertical ? 'height' : 'width';
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     component,
     allowScrollButtonsMobile,
     indicatorColor,
@@ -266,14 +316,14 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollableY: scrollable && vertical,
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const startScrollButtonIconProps = (0, _utils.useSlotProps)({
+  const startScrollButtonIconProps = (0, _useSlotProps.default)({
     elementType: slots.StartScrollButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,
     ownerState
   });
-  const endScrollButtonIconProps = (0, _utils.useSlotProps)({
+  const endScrollButtonIconProps = (0, _useSlotProps.default)({
     elementType: slots.EndScrollButtonIcon,
     externalSlotProps: slotProps.endScrollButtonIcon,
     ownerState
@@ -305,7 +355,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -355,8 +404,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     } else {
       startIndicator = isRtl ? 'right' : 'left';
       if (tabMeta && tabsMeta) {
-        const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
-        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
+        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + tabsMeta.scrollLeft);
       }
     }
     const newIndicatorStyle = {
@@ -364,10 +412,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // May be wrong until the font is loaded.
       [size]: tabMeta ? tabMeta[size] : 0
     };
-
-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (typeof indicatorStyle[startIndicator] !== 'number' || typeof indicatorStyle[size] !== 'number') {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
@@ -394,8 +439,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       scrollValue += delta;
     } else {
       scrollValue += delta * (isRtl ? -1 : 1);
-      // Fix for Edge
-      scrollValue *= isRtl && (0, _scrollLeft.detectScrollType)() === 'reverse' ? -1 : 1;
     }
     scroll(scrollValue);
   };
@@ -440,7 +483,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }) : null;
     const scrollButtonsActive = displayStartScroll || displayEndScroll;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
-    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButtonComponent, (0, _extends2.default)({
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButtonComponent, {
       slots: {
         StartScrollButtonIcon: slots.StartScrollButtonIcon
       },
@@ -450,11 +493,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
-      disabled: !displayStartScroll
-    }, TabScrollButtonProps, {
+      disabled: !displayStartScroll,
+      ...TabScrollButtonProps,
       className: (0, _clsx.default)(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButtonComponent, (0, _extends2.default)({
+    }) : null;
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollButtonComponent, {
       slots: {
         EndScrollButtonIcon: slots.EndScrollButtonIcon
       },
@@ -464,10 +507,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
-      disabled: !displayEndScroll
-    }, TabScrollButtonProps, {
+      disabled: !displayEndScroll,
+      ...TabScrollButtonProps,
       className: (0, _clsx.default)(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
+    }) : null;
     return conditionalElements;
   };
   const scrollSelectedIntoView = (0, _useEventCallback.default)(animation => {
@@ -517,12 +560,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const handleMutation = records => {
       records.forEach(record => {
         record.removedNodes.forEach(item => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+          resizeObserver?.unobserve(item);
         });
         record.addedNodes.forEach(item => {
-          var _resizeObserver2;
-          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+          resizeObserver?.observe(item);
         });
       });
       handleResize();
@@ -544,11 +585,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       });
     }
     return () => {
-      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
-      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
     };
   }, [updateIndicatorState, updateScrollButtonState]);
 
@@ -582,7 +622,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       };
     }
     return undefined;
-  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);
@@ -597,11 +637,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsIndicator, (0, _extends2.default)({}, TabIndicatorProps, {
+  const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsIndicator, {
+    ...TabIndicatorProps,
     className: (0, _clsx.default)(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
-    style: (0, _extends2.default)({}, indicatorStyle, TabIndicatorProps.style)
-  }));
+    style: {
+      ...indicatorStyle,
+      ...TabIndicatorProps.style
+    }
+  });
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -616,17 +660,18 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     valueToIndex.set(childValue, childIndex);
     const selected = childValue === value;
     childIndex += 1;
-    return /*#__PURE__*/React.cloneElement(child, (0, _extends2.default)({
+    return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
       selected,
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue
-    }, childIndex === 1 && value === false && !child.props.tabIndex ? {
-      tabIndex: 0
-    } : {}));
+      value: childValue,
+      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
+        tabIndex: 0
+      } : {})
+    });
   });
   const handleKeyDown = event => {
     const list = tabListRef.current;
@@ -667,12 +712,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabsRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabsRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
-    as: component
-  }, other, {
+    as: component,
+    ...other,
     children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabsScroller, {
       className: classes.scroller,
       ownerState: ownerState,
@@ -693,7 +738,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         children: children
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐