@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/Stepper/Stepper.js

@@ -13,12 +13,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _stepperClasses = require("./stepperClasses");
 var _StepConnector = _interopRequireDefault(require("../StepConnector"));
-var _StepperContext = require("./StepperContext");
+var _StepperContext = _interopRequireDefault(require("./StepperContext"));
 var _StepButton = _interopRequireDefault(require("../StepButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -72,6 +72,37 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
   }]
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
+function RovingStepper(props) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    className,
+    component,
+    forwardedRef,
+    isRtl,
+    orientation,
+    ownerState,
+    ...other
+  } = props;
+  const rovingContainer = (0, _useRovingTabIndex.useRovingTabIndexRoot)({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex.RovingTabIndexContext.Provider, {
+    value: rovingContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
+      as: component,
+      ownerState: ownerState,
+      className: className,
+      role: "tablist",
+      "aria-orientation": orientation,
+      ...rovingContainerProps,
+      ...other,
+      children: children
+    })
+  });
+}
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -119,14 +150,6 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
       ...step.props
     });
   });
-  const {
-    getContainerProps,
-    getItemProps
-  } = (0, _useRovingTabIndex.default)({
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
@@ -134,21 +157,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     nonLinear,
     orientation,
     totalSteps,
-    getRovingTabIndexProps: getItemProps,
     isTabList
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.StepperContextProvider, {
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, isTabList]);
+  if (!isTabList) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
+        as: component,
+        ownerState: ownerState,
+        className: (0, _clsx.default)(classes.root, className),
+        ref: ref,
+        ...other,
+        children: steps
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
-      as: component,
-      ownerState: ownerState,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RovingStepper, {
+      forwardedRef: ref,
+      isRtl: isRtl,
       className: (0, _clsx.default)(classes.root, className),
-      ref: ref,
-      ...(isTabList && {
-        role: 'tablist',
-        'aria-orientation': orientation,
-        ...rovingTabIndexContainerProps
-      }),
+      component: component,
+      orientation: orientation,
+      ownerState: ownerState,
       ...other,
       children: steps
     })

package/Stepper/Stepper.mjs

@@ -6,12 +6,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
 import { getStepperUtilityClass } from "./stepperClasses.mjs";
 import StepConnector from "../StepConnector/index.mjs";
-import { StepperContextProvider } from "./StepperContext.mjs";
+import StepperContext from "./StepperContext.mjs";
 import StepButton from "../StepButton/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -65,6 +65,37 @@ const StepperRoot = styled('ol', {
   }]
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
+function RovingStepper(props) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    className,
+    component,
+    forwardedRef,
+    isRtl,
+    orientation,
+    ownerState,
+    ...other
+  } = props;
+  const rovingContainer = useRovingTabIndexRoot({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  return /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+    value: rovingContainer,
+    children: /*#__PURE__*/_jsx(StepperRoot, {
+      as: component,
+      ownerState: ownerState,
+      className: className,
+      role: "tablist",
+      "aria-orientation": orientation,
+      ...rovingContainerProps,
+      ...other,
+      children: children
+    })
+  });
+}
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   const isRtl = useRtl();
   const props = useDefaultProps({
@@ -112,14 +143,6 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
       ...step.props
     });
   });
-  const {
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
@@ -127,21 +150,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     nonLinear,
     orientation,
     totalSteps,
-    getRovingTabIndexProps: getItemProps,
     isTabList
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
-  return /*#__PURE__*/_jsx(StepperContextProvider, {
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, isTabList]);
+  if (!isTabList) {
+    return /*#__PURE__*/_jsx(StepperContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(StepperRoot, {
+        as: component,
+        ownerState: ownerState,
+        className: clsx(classes.root, className),
+        ref: ref,
+        ...other,
+        children: steps
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StepperRoot, {
-      as: component,
-      ownerState: ownerState,
+    children: /*#__PURE__*/_jsx(RovingStepper, {
+      forwardedRef: ref,
+      isRtl: isRtl,
       className: clsx(classes.root, className),
-      ref: ref,
-      ...(isTabList && {
-        role: 'tablist',
-        'aria-orientation': orientation,
-        ...rovingTabIndexContainerProps
-      }),
+      component: component,
+      orientation: orientation,
+      ownerState: ownerState,
       ...other,
       children: steps
     })

package/Stepper/StepperContext.d.mts

@@ -6,10 +6,6 @@ export interface StepperContextType {
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
   totalSteps: number;
-  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
-    ref: (element: HTMLElement | null) => void;
-    tabIndex: number;
-  };
   isTabList: boolean;
 }
 /**
@@ -21,5 +17,4 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
-export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.d.ts

@@ -6,10 +6,6 @@ export interface StepperContextType {
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
   totalSteps: number;
-  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
-    ref: (element: HTMLElement | null) => void;
-    tabIndex: number;
-  };
   isTabList: boolean;
 }
 /**
@@ -21,5 +17,4 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
-export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepperContextProvider = void 0;
+exports.default = void 0;
 exports.useStepperContext = useStepperContext;
 var React = _interopRequireWildcard(require("react"));
 /**
@@ -23,5 +23,4 @@ if (process.env.NODE_ENV !== 'production') {
 function useStepperContext() {
   return React.useContext(StepperContext);
 }
-const StepperContextProvider = exports.StepperContextProvider = StepperContext.Provider;
 var _default = exports.default = StepperContext;

package/Stepper/StepperContext.mjs

@@ -16,5 +16,4 @@ if (process.env.NODE_ENV !== 'production') {
 export function useStepperContext() {
   return React.useContext(StepperContext);
 }
-export const StepperContextProvider = StepperContext.Provider;
 export default StepperContext;

package/Tab/Tab.js

@@ -17,6 +17,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -213,6 +214,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = (0, _useRovingTabIndex.useRovingTabIndexContext)();
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -246,14 +260,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/Tab/Tab.mjs

@@ -10,6 +10,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import unsupportedProp from "../utils/unsupportedProp.mjs";
+import { useRovingTabIndexContext, useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
 import tabClasses, { getTabUtilityClass } from "./tabClasses.mjs";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -206,6 +207,19 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     wrapped = false,
     ...other
   } = props;
+  const rovingContext = useRovingTabIndexContext();
+  const rovingItemProps = useRovingTabIndexItem({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected tab so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
   const ownerState = {
     ...props,
     disabled,
@@ -239,14 +253,16 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     }
   };
   return /*#__PURE__*/_jsxs(TabRoot, {
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     className: clsx(classes.root, className),
-    ref: ref,
+    ref: rovingItemProps.ref,
     role: "tab",
     "aria-selected": selected,
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
+    tabIndex: tabIndex,
     ownerState: ownerState,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {

package/TabScrollButton/TabScrollButton.d.mts

@@ -10,7 +10,7 @@ export interface TabScrollButtonEndIconSlotPropsOverrides {}
 export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
   isRtl: boolean;
 }
-export interface TabScrollButtonProps extends ButtonBaseProps {
+export interface TabScrollButtonProps extends Omit<ButtonBaseProps, 'nativeButton'> {
   /**
    * The content of the component.
    */

package/TabScrollButton/TabScrollButton.d.ts

@@ -10,7 +10,7 @@ export interface TabScrollButtonEndIconSlotPropsOverrides {}
 export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
   isRtl: boolean;
 }
-export interface TabScrollButtonProps extends ButtonBaseProps {
+export interface TabScrollButtonProps extends Omit<ButtonBaseProps, 'nativeButton'> {
   /**
    * The content of the component.
    */

package/TabScrollButton/TabScrollButton.js

@@ -75,6 +75,10 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     disabled,
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const isRtl = (0, _RtlProvider.useRtl)();
   const ownerState = {
     isRtl,
@@ -106,9 +110,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     role: null,
     ownerState: ownerState,
     tabIndex: null,
-    ...other,
+    ...buttonBaseProps,
     style: {
-      ...other.style,
+      ...buttonBaseProps.style,
       ...(orientation === 'vertical' && {
         '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
       })

package/TabScrollButton/TabScrollButton.mjs

@@ -68,6 +68,10 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     disabled,
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const isRtl = useRtl();
   const ownerState = {
     isRtl,
@@ -99,9 +103,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     role: null,
     ownerState: ownerState,
     tabIndex: null,
-    ...other,
+    ...buttonBaseProps,
     style: {
-      ...other.style,
+      ...buttonBaseProps.style,
       ...(orientation === 'vertical' && {
         '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
       })

package/TableSortLabel/TableSortLabel.js

@@ -134,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

@@ -127,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/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 {
@@ -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,7 +699,7 @@ 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,
@@ -710,12 +709,19 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     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]
   });