@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/TablePagination/TablePagination.js

@@ -157,7 +157,6 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   });
   const {
     ActionsComponent = _TablePaginationActions.default,
-    backIconButtonProps,
     colSpan: colSpanProp,
     component = _TableCell.default,
     count,
@@ -165,13 +164,11 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     getItemAriaLabel = defaultGetAriaLabel,
     labelDisplayedRows = defaultLabelDisplayedRows,
     labelRowsPerPage = 'Rows per page:',
-    nextIconButtonProps,
     onPageChange,
     onRowsPerPageChange,
     page,
     rowsPerPage,
     rowsPerPageOptions = [10, 25, 50, 100],
-    SelectProps = {},
     showFirstButton = false,
     showLastButton = false,
     slotProps = {},
@@ -180,7 +177,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectProps = slotProps?.select ?? SelectProps;
+  const selectProps = typeof slotProps?.select === 'function' ? slotProps.select(ownerState) : slotProps?.select ?? {};
   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === _TableCell.default || component === 'td') {
@@ -295,9 +292,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsComponent, {
         className: classes.actions,
-        backIconButtonProps: backIconButtonProps,
         count: count,
-        nextIconButtonProps: nextIconButtonProps,
         onPageChange: onPageChange,
         page: page,
         rowsPerPage: rowsPerPage,
@@ -322,13 +317,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default TablePaginationActions
    */
   ActionsComponent: _propTypes.default.elementType,
-  /**
-   * Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
-   *
-   * This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.previousButton` instead.
-   */
-  backIconButtonProps: _propTypes.default.object,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -382,13 +370,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default 'Rows per page:'
    */
   labelRowsPerPage: _propTypes.default.node,
-  /**
-   * Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
-   *
-   * This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.nextButton` instead.
-   */
-  nextIconButtonProps: _propTypes.default.object,
   /**
    * Callback fired when the page is changed.
    *
@@ -436,15 +417,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
     label: _propTypes.default.string.isRequired,
     value: _propTypes.default.number.isRequired
   })]).isRequired),
-  /**
-   * Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
-   *
-   * This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.select` instead.
-   *
-   * @default {}
-   */
-  SelectProps: _propTypes.default.object,
   /**
    * If `true`, show the first-page button.
    * @default false

package/TablePagination/TablePagination.mjs

@@ -150,7 +150,6 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   });
   const {
     ActionsComponent = TablePaginationActions,
-    backIconButtonProps,
     colSpan: colSpanProp,
     component = TableCell,
     count,
@@ -158,13 +157,11 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     getItemAriaLabel = defaultGetAriaLabel,
     labelDisplayedRows = defaultLabelDisplayedRows,
     labelRowsPerPage = 'Rows per page:',
-    nextIconButtonProps,
     onPageChange,
     onRowsPerPageChange,
     page,
     rowsPerPage,
     rowsPerPageOptions = [10, 25, 50, 100],
-    SelectProps = {},
     showFirstButton = false,
     showLastButton = false,
     slotProps = {},
@@ -173,7 +170,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectProps = slotProps?.select ?? SelectProps;
+  const selectProps = typeof slotProps?.select === 'function' ? slotProps.select(ownerState) : slotProps?.select ?? {};
   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === TableCell || component === 'td') {
@@ -288,9 +285,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         })
       }), /*#__PURE__*/_jsx(ActionsComponent, {
         className: classes.actions,
-        backIconButtonProps: backIconButtonProps,
         count: count,
-        nextIconButtonProps: nextIconButtonProps,
         onPageChange: onPageChange,
         page: page,
         rowsPerPage: rowsPerPage,
@@ -315,13 +310,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default TablePaginationActions
    */
   ActionsComponent: PropTypes.elementType,
-  /**
-   * Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
-   *
-   * This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.previousButton` instead.
-   */
-  backIconButtonProps: PropTypes.object,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -375,13 +363,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    * @default 'Rows per page:'
    */
   labelRowsPerPage: PropTypes.node,
-  /**
-   * Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
-   *
-   * This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.nextButton` instead.
-   */
-  nextIconButtonProps: PropTypes.object,
   /**
    * Callback fired when the page is changed.
    *
@@ -429,15 +410,6 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
     label: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired
   })]).isRequired),
-  /**
-   * Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
-   *
-   * This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.select` instead.
-   *
-   * @default {}
-   */
-  SelectProps: PropTypes.object,
   /**
    * If `true`, show the first-page button.
    * @default false

package/TablePaginationActions/TablePaginationActions.d.mts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { IconButtonProps } from "../IconButton/IconButton.mjs";
 import { SvgIconProps } from "../SvgIcon/index.mjs";
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * This prop is an alias for `slotProps.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.previousButton` instead.
-   */
-  backIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -27,11 +22,6 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
    * @returns {string}
    */
   getItemAriaLabel: (type: 'first' | 'last' | 'next' | 'previous') => string;
-  /**
-   * This prop is an alias for `slotProps.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.nextButton` instead.
-   */
-  nextIconButtonProps?: Partial<IconButtonProps> | undefined;
   onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   page: number;
   rowsPerPage: number;

package/TablePaginationActions/TablePaginationActions.d.ts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { IconButtonProps } from "../IconButton/IconButton.js";
 import { SvgIconProps } from "../SvgIcon/index.js";
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * This prop is an alias for `slotProps.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.previousButton` instead.
-   */
-  backIconButtonProps?: Partial<IconButtonProps> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -27,11 +22,6 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
    * @returns {string}
    */
   getItemAriaLabel: (type: 'first' | 'last' | 'next' | 'previous') => string;
-  /**
-   * This prop is an alias for `slotProps.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.nextButton` instead.
-   */
-  nextIconButtonProps?: Partial<IconButtonProps> | undefined;
   onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
   page: number;
   rowsPerPage: number;

package/TablePaginationActions/TablePaginationActions.js

@@ -40,12 +40,10 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
     name: 'MuiTablePaginationActions'
   });
   const {
-    backIconButtonProps,
     className,
     count,
     disabled = false,
     getItemAriaLabel,
-    nextIconButtonProps,
     onPageChange,
     page,
     rowsPerPage,
@@ -107,7 +105,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page),
-      ...(previousButtonSlotProps ?? backIconButtonProps),
+      ...previousButtonSlotProps,
       children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, {
         ...slotProps.nextButtonIcon
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, {
@@ -119,7 +117,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page),
-      ...(nextButtonSlotProps ?? nextIconButtonProps),
+      ...nextButtonSlotProps,
       children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, {
         ...slotProps.previousButtonIcon
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, {
@@ -144,11 +142,6 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * This prop is an alias for `slotProps.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.previousButton` instead.
-   */
-  backIconButtonProps: _propTypes.default.object,
   /**
    * @ignore
    */
@@ -179,11 +172,6 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
    * @returns {string}
    */
   getItemAriaLabel: _propTypes.default.func.isRequired,
-  /**
-   * This prop is an alias for `slotProps.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.nextButton` instead.
-   */
-  nextIconButtonProps: _propTypes.default.object,
   /**
    * @ignore
    */

package/TablePaginationActions/TablePaginationActions.mjs

@@ -33,12 +33,10 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
     name: 'MuiTablePaginationActions'
   });
   const {
-    backIconButtonProps,
     className,
     count,
     disabled = false,
     getItemAriaLabel,
-    nextIconButtonProps,
     onPageChange,
     page,
     rowsPerPage,
@@ -100,7 +98,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page),
-      ...(previousButtonSlotProps ?? backIconButtonProps),
+      ...previousButtonSlotProps,
       children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, {
         ...slotProps.nextButtonIcon
       }) : /*#__PURE__*/_jsx(PreviousButtonIcon, {
@@ -112,7 +110,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page),
-      ...(nextButtonSlotProps ?? nextIconButtonProps),
+      ...nextButtonSlotProps,
       children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, {
         ...slotProps.previousButtonIcon
       }) : /*#__PURE__*/_jsx(NextButtonIcon, {
@@ -137,11 +135,6 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * This prop is an alias for `slotProps.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.previousButton` instead.
-   */
-  backIconButtonProps: PropTypes.object,
   /**
    * @ignore
    */
@@ -172,11 +165,6 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
    * @returns {string}
    */
   getItemAriaLabel: PropTypes.func.isRequired,
-  /**
-   * This prop is an alias for `slotProps.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.nextButton` instead.
-   */
-  nextIconButtonProps: PropTypes.object,
   /**
    * @ignore
    */

package/TableSortLabel/TableSortLabel.js

@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', active && 'active', `direction${(0, _capitalize.default)(direction)}`],
-    icon: ['icon', `iconDirection${(0, _capitalize.default)(direction)}`]
+    icon: ['icon']
   };
   return (0, _composeClasses.default)(slots, _tableSortLabelClasses.getTableSortLabelUtilityClass, classes);
 };
@@ -69,12 +69,7 @@ const TableSortLabelRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 const TableSortLabelIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiTableSortLabel',
   slot: 'Icon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.icon, styles[`iconDirection${(0, _capitalize.default)(ownerState.direction)}`]];
-  }
+  overridesResolver: (props, styles) => styles.icon
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -139,7 +134,10 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
     externalForwardedProps,
     ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref
+    ref,
+    additionalProps: {
+      internalNativeButton: false
+    }
   });
   const [IconSlot, iconProps] = (0, _useSlot.default)('icon', {
     elementType: TableSortLabelIcon,

package/TableSortLabel/TableSortLabel.mjs

@@ -21,7 +21,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', active && 'active', `direction${capitalize(direction)}`],
-    icon: ['icon', `iconDirection${capitalize(direction)}`]
+    icon: ['icon']
   };
   return composeClasses(slots, getTableSortLabelUtilityClass, classes);
 };
@@ -62,12 +62,7 @@ const TableSortLabelRoot = styled(ButtonBase, {
 const TableSortLabelIcon = styled('span', {
   name: 'MuiTableSortLabel',
   slot: 'Icon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.icon, styles[`iconDirection${capitalize(ownerState.direction)}`]];
-  }
+  overridesResolver: (props, styles) => styles.icon
 })(memoTheme(({
   theme
 }) => ({
@@ -132,7 +127,10 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
     externalForwardedProps,
     ownerState,
     className: clsx(classes.root, className),
-    ref
+    ref,
+    additionalProps: {
+      internalNativeButton: false
+    }
   });
   const [IconSlot, iconProps] = useSlot('icon', {
     elementType: TableSortLabelIcon,

package/TableSortLabel/tableSortLabelClasses.d.mts

@@ -9,14 +9,6 @@ export interface TableSortLabelClasses {
   active: string;
   /** Styles applied to the icon component. */
   icon: string;
-  /** Styles applied to the icon component if `direction="desc"`.
-   * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#TableSortLabel-css-MuiTableSortLabel-icon) and [.MuiTableSortLabel-directionDesc](/material-ui/api/table-sort-label/#table-sort-label-classes-MuiTableSortLabel-directionDesc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  iconDirectionDesc: string;
-  /** Styles applied to the icon component if `direction="asc"`.
-   * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#TableSortLabel-css-MuiTableSortLabel-icon) and [.MuiTableSortLabel-directionAsc](/material-ui/api/table-sort-label/#table-sort-label-classes-MuiTableSortLabel-directionAsc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  iconDirectionAsc: string;
 }
 export type TableSortLabelClassKey = keyof TableSortLabelClasses;
 export declare function getTableSortLabelUtilityClass(slot: string): string;

package/TableSortLabel/tableSortLabelClasses.d.ts

@@ -9,14 +9,6 @@ export interface TableSortLabelClasses {
   active: string;
   /** Styles applied to the icon component. */
   icon: string;
-  /** Styles applied to the icon component if `direction="desc"`.
-   * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#TableSortLabel-css-MuiTableSortLabel-icon) and [.MuiTableSortLabel-directionDesc](/material-ui/api/table-sort-label/#table-sort-label-classes-MuiTableSortLabel-directionDesc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  iconDirectionDesc: string;
-  /** Styles applied to the icon component if `direction="asc"`.
-   * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#TableSortLabel-css-MuiTableSortLabel-icon) and [.MuiTableSortLabel-directionAsc](/material-ui/api/table-sort-label/#table-sort-label-classes-MuiTableSortLabel-directionAsc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  iconDirectionAsc: string;
 }
 export type TableSortLabelClassKey = keyof TableSortLabelClasses;
 export declare function getTableSortLabelUtilityClass(slot: string): string;

package/TableSortLabel/tableSortLabelClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getTableSortLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTableSortLabel', slot);
 }
-const tableSortLabelClasses = (0, _generateUtilityClasses.default)('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc', 'directionDesc', 'directionAsc']);
+const tableSortLabelClasses = (0, _generateUtilityClasses.default)('MuiTableSortLabel', ['root', 'active', 'icon', 'directionDesc', 'directionAsc']);
 var _default = exports.default = tableSortLabelClasses;

package/TableSortLabel/tableSortLabelClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableSortLabelUtilityClass(slot) {
   return generateUtilityClass('MuiTableSortLabel', slot);
 }
-const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc', 'directionDesc', 'directionAsc']);
+const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'directionDesc', 'directionAsc']);
 export default tableSortLabelClasses;

package/Tabs/Tabs.js

@@ -27,7 +27,10 @@ var _tabsClasses = _interopRequireWildcard(require("./tabsClasses"));
 var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
-var _utils = require("../utils");
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -43,7 +46,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', vertical && 'vertical'],
     scroller: ['scroller', fixed && 'fixed', hideScrollbar && 'hideScrollbar', scrollableX && 'scrollableX', scrollableY && 'scrollableY'],
-    list: ['list', 'flexContainer', vertical && 'flexContainerVertical', vertical && 'vertical', centered && 'centered'],
+    list: ['list', vertical && 'vertical', centered && 'centered'],
     indicator: ['indicator'],
     scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],
     scrollableX: [scrollableX && 'scrollableX'],
@@ -151,7 +154,7 @@ const List = (0, _zeroStyled.styled)('div', {
     const {
       ownerState
     } = props;
-    return [styles.list, styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
+    return [styles.list, ownerState.centered && styles.centered];
   }
 })({
   display: 'flex',
@@ -294,6 +297,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
   const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
   const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
+  const selectedValue = value === false ? null : value;
+  // Tracks whether DOM focus is currently inside the tab list. When it is, roving focus
+  // should follow in-list keyboard movement instead of snapping back to `selectedValue`.
+  const [isFocusWithinList, setIsFocusWithinList] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -621,6 +628,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(IndicatorSlot, {
     ...indicatorSlotProps
   });
+  const rovingContainer = (0, _useRovingTabIndex.useRovingTabIndexRoot)({
+    activeItemId: isFocusWithinList ? undefined : selectedValue,
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps();
   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') {
@@ -635,23 +648,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       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;
-    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -659,9 +660,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue,
-      ref: rovingTabIndexItemProps.ref,
-      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
+      value: childValue
     });
   });
   const conditionalElements = getConditionalElements();
@@ -689,10 +688,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
-  const mergedRef = (0, _utils.useForkRef)(rovingTabIndexContainerProps.ref, tabListRef);
+  const mergedRef = (0, _useForkRef.default)(rovingContainerProps.ref, tabListRef);
   const handleKeyDown = event => {
     const list = tabListRef.current;
-    const currentFocus = (0, _utils.getActiveElement)((0, _utils.ownerDocument)(list));
+    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
@@ -700,22 +699,29 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     if (role !== 'tab') {
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
   };
   const [ListSlot, listSlotProps] = (0, _useSlot.default)('list', {
     ref: mergedRef,
-    className: (0, _clsx.default)(classes.list, classes.flexContainer),
+    className: classes.list,
     elementType: List,
     externalForwardedProps,
     ownerState,
     getSlotProps: handlers => ({
       ...handlers,
+      onBlur: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusWithinList(false);
+        }
+        handlers.onBlur?.(event);
+      },
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
       },
       onFocus: event => {
-        rovingTabIndexContainerProps.onFocus(event);
+        setIsFocusWithinList(true);
+        rovingContainerProps.onFocus(event);
         handlers.onFocus?.(event);
       }
     })
@@ -730,7 +736,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         "aria-orientation": orientation === 'vertical' ? 'vertical' : null,
         role: "tablist",
         ...listSlotProps,
-        children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex.RovingTabIndexContext.Provider, {
+          value: rovingContainer,
+          children: children
+        })
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
   });