@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.10

package/modern/Tabs/Tabs.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -11,11 +8,9 @@ import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useTheme from '../styles/useTheme';
 import debounce from '../utils/debounce';
-import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';
 import TabScrollButton from '../TabScrollButton';
@@ -24,6 +19,7 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTabs');
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -101,22 +97,32 @@ const TabsRoot = styled('div', {
     }, styles.root, ownerState.vertical && styles.vertical];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   overflow: 'hidden',
   minHeight: 48,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${tabsClasses.scrollButtons}`]: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none'
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
     }
-  }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollButtonsHideMobile,
+    style: {
+      [`& .${tabsClasses.scrollButtons}`]: {
+        [theme.breakpoints.down('sm')]: {
+          display: 'none'
+        }
+      }
+    }
+  }]
 }));
 const TabsScroller = styled('div', {
   name: 'MuiTabs',
@@ -127,30 +133,49 @@ const TabsScroller = styled('div', {
     } = props;
     return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   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'
-}));
+  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 = styled('div', {
   name: 'MuiTabs',
   slot: 'FlexContainer',
@@ -160,36 +185,60 @@ const FlexContainer = styled('div', {
     } = props;
     return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
   }
-})(({
-  ownerState
-}) => _extends({
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.centered && {
-  justifyContent: 'center'
-}));
+})({
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.centered,
+    style: {
+      justifyContent: 'center'
+    }
+  }]
+});
 const TabsIndicator = styled('span', {
   name: 'MuiTabs',
   slot: 'Indicator',
   overridesResolver: (props, styles) => styles.indicator
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   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
+  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 = styled(ScrollbarSize)({
   overflowX: 'auto',
@@ -211,30 +260,30 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const theme = useTheme();
   const isRtl = 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,
-      scrollButtons = 'auto',
-      selectionFollowsFocus,
-      slots = {},
-      slotProps = {},
-      TabIndicatorProps = {},
-      TabScrollButtonProps = {},
-      textColor = 'primary',
-      value,
-      variant = 'standard',
-      visibleScrollbar = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(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,
+    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';
@@ -242,7 +291,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 = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     allowScrollButtonsMobile,
     indicatorColor,
@@ -258,7 +308,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollableY: scrollable && vertical,
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startScrollButtonIconProps = useSlotProps({
     elementType: slots.StartScrollButtonIcon,
@@ -297,7 +347,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -347,8 +396,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 = {
@@ -356,10 +404,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]);
@@ -386,8 +431,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       scrollValue += delta;
     } else {
       scrollValue += delta * (isRtl ? -1 : 1);
-      // Fix for Edge
-      scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
     }
     scroll(scrollValue);
   };
@@ -432,7 +475,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__*/_jsx(ScrollButtonComponent, _extends({
+    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         StartScrollButtonIcon: slots.StartScrollButtonIcon
       },
@@ -442,11 +485,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: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+    }) : null;
+    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, {
       slots: {
         EndScrollButtonIcon: slots.EndScrollButtonIcon
       },
@@ -456,10 +499,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: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
+    }) : null;
     return conditionalElements;
   };
   const scrollSelectedIntoView = useEventCallback(animation => {
@@ -586,11 +629,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
+  const indicator = /*#__PURE__*/_jsx(TabsIndicator, {
+    ...TabIndicatorProps,
     className: clsx(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
-    style: _extends({}, indicatorStyle, TabIndicatorProps.style)
-  }));
+    style: {
+      ...indicatorStyle,
+      ...TabIndicatorProps.style
+    }
+  });
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -605,17 +652,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, _extends({
+    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;
@@ -656,12 +704,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
   };
   const conditionalElements = getConditionalElements();
-  return /*#__PURE__*/_jsxs(TabsRoot, _extends({
+  return /*#__PURE__*/_jsxs(TabsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
-    as: component
-  }, other, {
+    as: component,
+    ...other,
     children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(TabsScroller, {
       className: classes.scroller,
       ownerState: ownerState,
@@ -682,7 +730,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 ──────────────────────────────┐