@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Tabs/Tabs.js

@@ -24,53 +24,11 @@ var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
 var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _tabsClasses = _interopRequireWildcard(require("./tabsClasses"));
-var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
-var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("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
-    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      nextFocus.focus();
-      return;
-    }
-  }
-};
 const useUtilityClasses = ownerState => {
   const {
     vertical,
@@ -280,16 +238,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     indicatorColor = 'primary',
     onChange,
     orientation = 'horizontal',
-    ScrollButtonComponent,
-    // TODO: remove in v7 (deprecated in v6)
     scrollButtons = 'auto',
     selectionFollowsFocus,
     slots = {},
     slotProps = {},
-    TabIndicatorProps = {},
-    // TODO: remove in v7 (deprecated in v6)
-    TabScrollButtonProps = {},
-    // TODO: remove in v7 (deprecated in v6)
     textColor = 'primary',
     value,
     variant = 'standard',
@@ -323,12 +275,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const startScrollButtonIconProps = (0, _useSlotProps.default)({
-    elementType: slots.StartScrollButtonIcon,
+    elementType: slots.startScrollButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,
     ownerState
   });
   const endScrollButtonIconProps = (0, _useSlotProps.default)({
-    elementType: slots.EndScrollButtonIcon,
+    elementType: slots.endScrollButtonIcon,
     externalSlotProps: slotProps.endScrollButtonIcon,
     ownerState
   });
@@ -351,11 +303,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const tabListRef = React.useRef(null);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      indicator: TabIndicatorProps,
-      scrollButtons: TabScrollButtonProps,
-      ...slotProps
-    }
+    slotProps
   };
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
@@ -499,15 +447,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     });
   }, [scrollbarOnChange]);
   const [ScrollButtonsSlot, scrollButtonSlotProps] = (0, _useSlot.default)('scrollButtons', {
-    className: (0, _clsx.default)(classes.scrollButtons, TabScrollButtonProps.className),
+    className: classes.scrollButtons,
     elementType: _TabScrollButton.default,
     externalForwardedProps,
     ownerState,
     additionalProps: {
       orientation,
       slots: {
-        StartScrollButtonIcon: slots.startScrollButtonIcon || slots.StartScrollButtonIcon,
-        EndScrollButtonIcon: slots.endScrollButtonIcon || slots.EndScrollButtonIcon
+        StartScrollButtonIcon: slots.startScrollButtonIcon,
+        EndScrollButtonIcon: slots.endScrollButtonIcon
       },
       slotProps: {
         startScrollButtonIcon: startScrollButtonIconProps,
@@ -662,7 +610,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
   const [IndicatorSlot, indicatorSlotProps] = (0, _useSlot.default)('indicator', {
-    className: (0, _clsx.default)(classes.indicator, TabIndicatorProps.className),
+    className: classes.indicator,
     elementType: TabsIndicator,
     externalForwardedProps,
     ownerState,
@@ -673,20 +621,37 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(IndicatorSlot, {
     ...indicatorSlotProps
   });
-  let childIndex = 0;
-  const children = React.Children.map(childrenProp, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
+  const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
+    const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
       if ((0, _reactIs.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);
+    valueToIndex.set(childValue, index);
+    return {
+      child,
+      index,
+      childValue
+    };
+  });
+  const focusableIndex = valueToIndex.get(value);
+  const {
+    getContainerProps,
+    getItemProps
+  } = (0, _utils.useRovingTabIndex)({
+    focusableIndex,
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const children = validChildren.map(({
+    child,
+    index,
+    childValue
+  }) => {
     const selected = childValue === value;
-    childIndex += 1;
+    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -695,53 +660,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange,
       textColor,
       value: childValue,
-      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
-        tabIndex: 0
-      } : {})
+      ref: rovingTabIndexItemProps.ref,
+      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
     });
   });
-  const handleKeyDown = event => {
-    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
-    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    const list = tabListRef.current;
-    const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(list));
-    // 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();
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     ref,
@@ -767,8 +689,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
+  const mergedRef = (0, _utils.useForkRef)(rovingTabIndexContainerProps.ref, tabListRef);
+  const handleKeyDown = event => {
+    const list = tabListRef.current;
+    const currentFocus = (0, _utils.getActiveElement)((0, _utils.ownerDocument)(list));
+    // 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;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+  };
   const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
-    ref: tabListRef,
+    ref: mergedRef,
     className: (0, _clsx.default)(classes.list, classes.flexContainer),
     elementType: List,
     externalForwardedProps,
@@ -778,6 +713,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
+      },
+      onFocus: event => {
+        rovingTabIndexContainerProps.onFocus(event);
+        handlers.onFocus?.(event);
       }
     })
   });
@@ -864,12 +803,6 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * @default 'horizontal'
    */
   orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-  /**
-   * The component used to render the scroll buttons.
-   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default TabScrollButton
-   */
-  ScrollButtonComponent: _propTypes.default.elementType,
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -907,32 +840,18 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    */
   slots: _propTypes.default.shape({
     endScrollButtonIcon: _propTypes.default.elementType,
-    EndScrollButtonIcon: _propTypes.default.elementType,
     indicator: _propTypes.default.elementType,
     list: _propTypes.default.elementType,
     root: _propTypes.default.elementType,
     scrollbar: _propTypes.default.elementType,
     scrollButtons: _propTypes.default.elementType,
     scroller: _propTypes.default.elementType,
-    startScrollButtonIcon: _propTypes.default.elementType,
-    StartScrollButtonIcon: _propTypes.default.elementType
+    startScrollButtonIcon: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * Props applied to the tab indicator element.
-   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default  {}
-   */
-  TabIndicatorProps: _propTypes.default.object,
-  /**
-   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
-   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TabScrollButtonProps: _propTypes.default.object,
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'

package/Tabs/Tabs.mjs

@@ -17,53 +17,11 @@ import ScrollbarSize from "./ScrollbarSize.mjs";
 import TabScrollButton from "../TabScrollButton/index.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
 import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
-import ownerDocument from "../utils/ownerDocument.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
-import getActiveElement from "../utils/getActiveElement.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { ownerDocument, useForkRef, getActiveElement, useRovingTabIndex } from "../utils/index.mjs";
 import { jsx as _jsx, 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
-    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      nextFocus.focus();
-      return;
-    }
-  }
-};
 const useUtilityClasses = ownerState => {
   const {
     vertical,
@@ -273,16 +231,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     indicatorColor = 'primary',
     onChange,
     orientation = 'horizontal',
-    ScrollButtonComponent,
-    // TODO: remove in v7 (deprecated in v6)
     scrollButtons = 'auto',
     selectionFollowsFocus,
     slots = {},
     slotProps = {},
-    TabIndicatorProps = {},
-    // TODO: remove in v7 (deprecated in v6)
-    TabScrollButtonProps = {},
-    // TODO: remove in v7 (deprecated in v6)
     textColor = 'primary',
     value,
     variant = 'standard',
@@ -316,12 +268,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const startScrollButtonIconProps = useSlotProps({
-    elementType: slots.StartScrollButtonIcon,
+    elementType: slots.startScrollButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,
     ownerState
   });
   const endScrollButtonIconProps = useSlotProps({
-    elementType: slots.EndScrollButtonIcon,
+    elementType: slots.endScrollButtonIcon,
     externalSlotProps: slotProps.endScrollButtonIcon,
     ownerState
   });
@@ -344,11 +296,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const tabListRef = React.useRef(null);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      indicator: TabIndicatorProps,
-      scrollButtons: TabScrollButtonProps,
-      ...slotProps
-    }
+    slotProps
   };
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
@@ -492,15 +440,15 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     });
   }, [scrollbarOnChange]);
   const [ScrollButtonsSlot, scrollButtonSlotProps] = useSlot('scrollButtons', {
-    className: clsx(classes.scrollButtons, TabScrollButtonProps.className),
+    className: classes.scrollButtons,
     elementType: TabScrollButton,
     externalForwardedProps,
     ownerState,
     additionalProps: {
       orientation,
       slots: {
-        StartScrollButtonIcon: slots.startScrollButtonIcon || slots.StartScrollButtonIcon,
-        EndScrollButtonIcon: slots.endScrollButtonIcon || slots.EndScrollButtonIcon
+        StartScrollButtonIcon: slots.startScrollButtonIcon,
+        EndScrollButtonIcon: slots.endScrollButtonIcon
       },
       slotProps: {
         startScrollButtonIcon: startScrollButtonIconProps,
@@ -655,7 +603,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     updateScrollButtons: updateScrollButtonState
   }), [updateIndicatorState, updateScrollButtonState]);
   const [IndicatorSlot, indicatorSlotProps] = useSlot('indicator', {
-    className: clsx(classes.indicator, TabIndicatorProps.className),
+    className: classes.indicator,
     elementType: TabsIndicator,
     externalForwardedProps,
     ownerState,
@@ -666,20 +614,37 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
     ...indicatorSlotProps
   });
-  let childIndex = 0;
-  const children = React.Children.map(childrenProp, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
+  const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
+    const childValue = child.props.value === undefined ? index : child.props.value;
     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);
+    valueToIndex.set(childValue, index);
+    return {
+      child,
+      index,
+      childValue
+    };
+  });
+  const focusableIndex = valueToIndex.get(value);
+  const {
+    getContainerProps,
+    getItemProps
+  } = useRovingTabIndex({
+    focusableIndex,
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const children = validChildren.map(({
+    child,
+    index,
+    childValue
+  }) => {
     const selected = childValue === value;
-    childIndex += 1;
+    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -688,53 +653,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange,
       textColor,
       value: childValue,
-      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
-        tabIndex: 0
-      } : {})
+      ref: rovingTabIndexItemProps.ref,
+      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
     });
   });
-  const handleKeyDown = event => {
-    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
-    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    const list = tabListRef.current;
-    const currentFocus = getActiveElement(ownerDocument(list));
-    // 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();
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
@@ -760,8 +682,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
+  const mergedRef = useForkRef(rovingTabIndexContainerProps.ref, tabListRef);
+  const handleKeyDown = event => {
+    const list = tabListRef.current;
+    const currentFocus = getActiveElement(ownerDocument(list));
+    // 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;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+  };
   const [ListSlot, listSlotProps] = useSlot('list', {
-    ref: tabListRef,
+    ref: mergedRef,
     className: clsx(classes.list, classes.flexContainer),
     elementType: List,
     externalForwardedProps,
@@ -771,6 +706,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
+      },
+      onFocus: event => {
+        rovingTabIndexContainerProps.onFocus(event);
+        handlers.onFocus?.(event);
       }
     })
   });
@@ -857,12 +796,6 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * @default 'horizontal'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * The component used to render the scroll buttons.
-   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default TabScrollButton
-   */
-  ScrollButtonComponent: PropTypes.elementType,
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -900,32 +833,18 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    */
   slots: PropTypes.shape({
     endScrollButtonIcon: PropTypes.elementType,
-    EndScrollButtonIcon: PropTypes.elementType,
     indicator: PropTypes.elementType,
     list: PropTypes.elementType,
     root: PropTypes.elementType,
     scrollbar: PropTypes.elementType,
     scrollButtons: PropTypes.elementType,
     scroller: PropTypes.elementType,
-    startScrollButtonIcon: PropTypes.elementType,
-    StartScrollButtonIcon: PropTypes.elementType
+    startScrollButtonIcon: PropTypes.elementType
   }),
   /**
    * 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.
-   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default  {}
-   */
-  TabIndicatorProps: PropTypes.object,
-  /**
-   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
-   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TabScrollButtonProps: PropTypes.object,
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'