@mui/material 5.10.12 → 5.10.14

package/modern/Tabs/Tabs.js

@@ -21,48 +21,38 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
   }
-
   if (item && item.nextElementSibling) {
     return item.nextElementSibling;
   }
-
   return list.firstChild;
 };
-
 const previousItem = (list, item) => {
   if (list === item) {
     return list.lastChild;
   }
-
   if (item && item.previousElementSibling) {
     return item.previousElementSibling;
   }
-
   return list.lastChild;
 };
-
 const moveFocus = (list, currentFocus, traversalFunction) => {
   let wrappedOnce = false;
   let nextFocus = traversalFunction(list, currentFocus);
-
   while (nextFocus) {
     // Prevent infinite loop.
     if (nextFocus === list.firstChild) {
       if (wrappedOnce) {
         return;
       }
-
       wrappedOnce = true;
-    } // Same logic as useAutocomplete.js
-
+    }
 
+    // Same logic as useAutocomplete.js
     const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-
     if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
       // Move to the next element.
       nextFocus = traversalFunction(list, nextFocus);
@@ -72,7 +62,6 @@ const moveFocus = (list, currentFocus, traversalFunction) => {
     }
   }
 };
-
 const useUtilityClasses = ownerState => {
   const {
     vertical,
@@ -95,7 +84,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTabsUtilityClass, classes);
 };
-
 const TabsRoot = styled('div', {
   name: 'MuiTabs',
   slot: 'Root',
@@ -152,7 +140,6 @@ const TabsScroller = styled('div', {
   // Firefox
   '&::-webkit-scrollbar': {
     display: 'none' // Safari + Chrome
-
   }
 }, ownerState.scrollableX && {
   overflowX: 'auto',
@@ -212,9 +199,9 @@ const TabsScrollbarSize = styled(ScrollbarSize, {
   // Firefox
   '&::-webkit-scrollbar': {
     display: 'none' // Safari + Chrome
-
   }
 });
+
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
@@ -224,31 +211,29 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
-
   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,
-    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,
+      TabIndicatorProps = {},
+      TabScrollButtonProps = {},
+      textColor = 'primary',
+      value,
+      variant = 'standard',
+      visibleScrollbar = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const scrollable = variant === 'scrollable';
   const vertical = orientation === 'vertical';
   const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -256,7 +241,6 @@ 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, {
     component,
     allowScrollButtonsMobile,
@@ -274,15 +258,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     centered: centered && !scrollable,
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   });
-
   const classes = useUtilityClasses(ownerState);
-
   if (process.env.NODE_ENV !== 'production') {
     if (centered && scrollable) {
       console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
     }
   }
-
   const [mounted, setMounted] = React.useState(false);
   const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
   const [displayScroll, setDisplayScroll] = React.useState({
@@ -296,14 +277,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const valueToIndex = new Map();
   const tabsRef = React.useRef(null);
   const tabListRef = React.useRef(null);
-
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
     let tabsMeta;
-
     if (tabsNode) {
-      const rect = tabsNode.getBoundingClientRect(); // create a new object with ClientRect class props + scrollLeft
-
+      const rect = tabsNode.getBoundingClientRect();
+      // create a new object with ClientRect class props + scrollLeft
       tabsMeta = {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
@@ -316,23 +295,17 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         right: rect.right
       };
     }
-
     let tabMeta;
-
     if (tabsNode && value !== false) {
       const children = tabListRef.current.children;
-
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
-
         if (process.env.NODE_ENV !== 'production') {
           if (!tab) {
             console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
           }
         }
-
         tabMeta = tab ? tab.getBoundingClientRect() : null;
-
         if (process.env.NODE_ENV !== 'production') {
           if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
             tabsMeta = null;
@@ -342,13 +315,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
       }
     }
-
     return {
       tabsMeta,
       tabMeta
     };
   };
-
   const updateIndicatorState = useEventCallback(() => {
     const {
       tabsMeta,
@@ -356,41 +327,36 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     } = getTabsMeta();
     let startValue = 0;
     let startIndicator;
-
     if (vertical) {
       startIndicator = 'top';
-
       if (tabMeta && tabsMeta) {
         startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
       }
     } 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);
       }
     }
-
     const newIndicatorStyle = {
       [startIndicator]: startValue,
       // 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
+    };
 
+    // IE11 support, replace with Number.isNaN
+    // eslint-disable-next-line no-restricted-globals
     if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
       const dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
-
       if (dStart >= 1 || dSize >= 1) {
         setIndicatorStyle(newIndicatorStyle);
       }
     }
   });
-
   const scroll = (scrollValue, {
     animation = true
   } = {}) => {
@@ -402,62 +368,50 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       tabsRef.current[scrollStart] = scrollValue;
     }
   };
-
   const moveTabsScroll = delta => {
     let scrollValue = tabsRef.current[scrollStart];
-
     if (vertical) {
       scrollValue += delta;
     } else {
-      scrollValue += delta * (isRtl ? -1 : 1); // Fix for Edge
-
+      scrollValue += delta * (isRtl ? -1 : 1);
+      // Fix for Edge
       scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
     }
-
     scroll(scrollValue);
   };
-
   const getScrollSize = () => {
     const containerSize = tabsRef.current[clientSize];
     let totalSize = 0;
     const children = Array.from(tabListRef.current.children);
-
     for (let i = 0; i < children.length; i += 1) {
       const tab = children[i];
-
       if (totalSize + tab[clientSize] > containerSize) {
         // If the first item is longer than the container size, then only scroll
         // by the container size.
         if (i === 0) {
           totalSize = containerSize;
         }
-
         break;
       }
-
       totalSize += tab[clientSize];
     }
-
     return totalSize;
   };
-
   const handleStartScrollClick = () => {
     moveTabsScroll(-1 * getScrollSize());
   };
-
   const handleEndScrollClick = () => {
     moveTabsScroll(getScrollSize());
-  }; // TODO Remove <ScrollbarSize /> as browser support for hidding the scrollbar
-  // with CSS improves.
-
+  };
 
+  // TODO Remove <ScrollbarSize /> as browser support for hidding the scrollbar
+  // with CSS improves.
   const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {
     setScrollerStyle({
       overflow: null,
       scrollbarWidth
     });
   }, []);
-
   const getConditionalElements = () => {
     const conditionalElements = {};
     conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/_jsx(TabsScrollbarSize, {
@@ -484,17 +438,14 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     })) : null;
     return conditionalElements;
   };
-
   const scrollSelectedIntoView = useEventCallback(animation => {
     const {
       tabsMeta,
       tabMeta
     } = getTabsMeta();
-
     if (!tabMeta || !tabsMeta) {
       return;
     }
-
     if (tabMeta[start] < tabsMeta[start]) {
       // left side of button is out of view
       const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
@@ -520,17 +471,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       } = 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.
-
+        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,
@@ -555,18 +504,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);
     let resizeObserver;
-
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach(child => {
         resizeObserver.observe(child);
       });
     }
-
     return () => {
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
@@ -595,25 +541,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateIndicator: updateIndicatorState,
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
-
   const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
     className: clsx(classes.indicator, TabIndicatorProps.className),
     ownerState: ownerState,
     style: _extends({}, indicatorStyle, TabIndicatorProps.style)
   }));
-
   let childIndex = 0;
   const children = React.Children.map(childrenProp, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
-
     if (process.env.NODE_ENV !== 'production') {
       if (isFragment(child)) {
         console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
-
     const childValue = child.props.value === undefined ? childIndex : child.props.value;
     valueToIndex.set(childValue, childIndex);
     const selected = childValue === value;
@@ -630,54 +572,44 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       tabIndex: 0
     } : {}));
   });
-
   const handleKeyDown = event => {
     const list = tabListRef.current;
-    const currentFocus = ownerDocument(list).activeElement; // Keyboard navigation assumes that [role="tab"] are siblings
+    const currentFocus = ownerDocument(list).activeElement;
+    // Keyboard navigation assumes that [role="tab"] are siblings
     // though we might warn in the future about nested, interactive elements
     // as a a11y violation
-
     const role = currentFocus.getAttribute('role');
-
     if (role !== 'tab') {
       return;
     }
-
     let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
     let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-
     if (orientation === 'horizontal' && isRtl) {
       // swap previousItemKey with nextItemKey
       previousItemKey = 'ArrowRight';
       nextItemKey = 'ArrowLeft';
     }
-
     switch (event.key) {
       case previousItemKey:
         event.preventDefault();
         moveFocus(list, currentFocus, previousItem);
         break;
-
       case nextItemKey:
         event.preventDefault();
         moveFocus(list, currentFocus, nextItem);
         break;
-
       case 'Home':
         event.preventDefault();
         moveFocus(list, null, nextItem);
         break;
-
       case 'End':
         event.preventDefault();
         moveFocus(list, null, previousItem);
         break;
-
       default:
         break;
     }
   };
-
   const conditionalElements = getConditionalElements();
   return /*#__PURE__*/_jsxs(TabsRoot, _extends({
     className: clsx(classes.root, className),
@@ -708,14 +640,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }), conditionalElements.scrollButtonEnd]
   }));
 });
-process.env.NODE_ENV !== "production" ? Tabs.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Tabs.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * Callback fired when the component mounts.
    * This is useful when you want to trigger an action programmatically.
@@ -725,60 +654,48 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * that can be triggered programmatically.
    */
   action: refType,
-
   /**
    * If `true`, the scroll buttons aren't forced hidden on mobile.
    * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
    * @default false
    */
   allowScrollButtonsMobile: PropTypes.bool,
-
   /**
    * The label for the Tabs as a string.
    */
   'aria-label': PropTypes.string,
-
   /**
    * An id or list of ids separated by a space that label the Tabs.
    */
   'aria-labelledby': PropTypes.string,
-
   /**
    * If `true`, the tabs are centered.
    * This prop is intended for large views.
    * @default false
    */
   centered: PropTypes.bool,
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
-
+  indicatorColor: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
   /**
    * Callback fired when the value changes.
    *
@@ -786,19 +703,16 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * @param {any} value We default to the index of the child (number)
    */
   onChange: PropTypes.func,
-
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
   /**
    * The component used to render the scroll buttons.
    * @default TabScrollButton
    */
   ScrollButtonComponent: PropTypes.elementType,
-
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -810,45 +724,36 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * This behavior can be disabled with `allowScrollButtonsMobile`.
    * @default 'auto'
    */
-  scrollButtons: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOf(['auto', false, true]),
-
+  scrollButtons: PropTypes /* @typescript-to-proptypes-ignore */.oneOf(['auto', false, true]),
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
    */
   selectionFollowsFocus: PropTypes.bool,
-
   /**
    * The system prop that 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]),
-
   /**
    * Props applied to the tab indicator element.
    * @default  {}
    */
   TabIndicatorProps: PropTypes.object,
-
   /**
    * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
    * @default {}
    */
   TabScrollButtonProps: PropTypes.object,
-
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'
    */
   textColor: PropTypes.oneOf(['inherit', 'primary', 'secondary']),
-
   /**
    * The value of the currently selected `Tab`.
    * If you don't want any selected `Tab`, you can set this prop to `false`.
    */
   value: PropTypes.any,
-
   /**
    * Determines additional display behavior of the tabs:
    *
@@ -860,7 +765,6 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * @default 'standard'
    */
   variant: PropTypes.oneOf(['fullWidth', 'scrollable', 'standard']),
-
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.