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

package/CHANGELOG.md

@@ -1,5 +1,196 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.4
+
+<!-- generated comparing v9.0.0-alpha.3..master -->
+
+_Mar 20, 2026_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@9.0.0-alpha.4`
+
+#### Breaking Changes
+
+- [accordion] Remove deprecated props (#47963) @silviuaavram
+  - `TransitionComponent`
+  - `TransitionProps`
+- [accordionsummary] Remove deprecated CSS class (#48006) @silviuaavram
+  - `contentGutters`
+- [alert] Remove deprecated CSS classes (#48011) @silviuaavram
+  - `standardSuccess`
+  - `standardInfo`
+  - `standardWarning`
+  - `standardError`
+  - `outlinedSuccess`
+  - `outlinedInfo`
+  - `outlinedWarning`
+  - `outlinedError`
+  - `filledSuccess`
+  - `filledInfo`
+  - `filledWarning`
+  - `filledError`
+- [alert] Remove deprecated props (#47965) @silviuaavram
+  - `components`
+  - `componentsProps`
+- [autocomplete] Remove deprecated props (#47864) @ZeeshanTamboli
+  - `ChipProps`
+  - `componentsProps`
+  - `ListboxComponent`
+  - `ListboxProps`
+  - `PaperComponent`
+  - `PopperComponent`
+  - `renderTags`
+- [avatar] Remove deprecated props (#47966) @silviuaavram
+  - `imgProps`
+- [avatargroup] Remove deprecated props (#47968) @silviuaavram
+  - `componentsProps`
+- [backdrop] Remove deprecated props (#47991) @silviuaavram
+  - `components`
+  - `componentsProps`
+  - `TransitionComponent`
+- [badge] Remove deprecated props (#47993) @silviuaavram
+  - `components`
+  - `componentsProps`
+- [button] Remove deprecated CSS classes (#48012) @silviuaavram
+  - Color variant classes: `textInherit`, `outlinedPrimary`, `containedSecondary`, etc.
+  - Size classes: `textSizeSmall`, `iconSizeMedium`, etc.
+- [circularprogress] Remove deprecated CSS classes (#48014) @silviuaavram
+  - `circleDeterminate`
+  - `circleIndeterminate`
+- [divider] Remove deprecated prop (#48013) @atharva3333
+  - `light`
+- [formcontrollabel] Remove deprecated props (#48032) @atharva3333
+  - `componentsProps`
+- [menu] Remove deprecated props (#48021) @siriwatknp
+  - `MenuListProps`
+  - `PaperProps`
+  - `TransitionProps`
+- [mobilestepper] Remove deprecated props (#48041) @siriwatknp
+  - `LinearProgressProps`
+- [popover] Remove deprecated props (#48021) @siriwatknp
+  - `BackdropComponent`
+  - `BackdropProps`
+  - `PaperProps`
+  - `TransitionComponent`
+  - `TransitionProps`
+- [popper] Remove deprecated props (#48020) @siriwatknp
+  - `components`
+  - `componentsProps`
+- [select] Remove deprecated props passed via `MenuProps` (#48021) @siriwatknp
+  - `MenuListProps`
+  - `PaperProps`
+  - `TransitionProps`
+- [slider] Remove deprecated props (#47996) @siriwatknp
+  - `components`
+  - `componentsProps`
+- [speeddial] Remove deprecated props (#47998) @siriwatknp
+  - `TransitionComponent`
+  - `TransitionProps`
+- [speeddialaction] Remove deprecated props (#47998) @siriwatknp
+  - `FabProps`
+  - `tooltipTitle`
+  - `tooltipPlacement`
+  - `tooltipOpen`
+  - `TooltipClasses`
+- [tabs] Remove deprecated props (#48017) @siriwatknp
+  - `ScrollButtonComponent`
+  - `TabIndicatorProps`
+  - `TabScrollButtonProps`
+  - `slots.StartScrollButtonIcon`
+  - `slots.EndScrollButtonIcon`
+- [textfield] Remove deprecated props (#47878) @ZeeshanTamboli
+  - `InputProps`
+  - `inputProps`
+  - `SelectProps`
+  - `InputLabelProps`
+  - `FormHelperTextProps`
+- [tooltip] Remove deprecated props (#47988) @siriwatknp
+  - `components`
+  - `componentsProps`
+  - `PopperComponent`
+  - `PopperProps`
+  - `TransitionComponent`
+  - `TransitionProps`
+- [typography] Remove deprecated prop (#47986) @siriwatknp
+  - `paragraph`
+- [buttonbase] Key handlers should not run on a disabled non-native button (#48003) @mj12albert
+- [tablepagination] Format pagination numbers according to locale (#47803) @siriwatknp
+- [textfield] Use non-native label for `<TextField select/>` (#47958) @mj12albert
+
+Check out the [v9 upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
+
+#### Changes
+
+- [autocomplete] Optimize selected option lookup (#47953) @anchmelev
+- [buttonbase] Fix native button detection (#47985) @mj12albert
+- [inputbase] Fix test using removed InputProps on TextField (#48000) @siriwatknp
+- [popper] Add missing classes export (#48031) @mj12albert
+- [select] Fix focus visible always set on menu item (#47912) @silviuaavram
+- [slider] Fix focus visible styles incorrectly applied by pointer (#47894) @mj12albert
+- [slider] Accept readonly array for the value prop (#47936) @pcorpet
+
+### `@mui/codemod@9.0.0-alpha.4`
+
+- [codemod] Add slot key rename to `tabs-props` codemod and add to README (#48035) @siriwatknp
+- [codemod] Add card-header-props migration guide (#48005) @siriwatknp
+
+### Docs
+
+- [blog] Lowercase 2026-MUI-X-price-changes blog post URL (#47871) @Janpot
+- [docs] Wide docs layout (#47950) @noraleonte
+- [docs] Mention the list of props removed in upgrade guide (#48010) @silviuaavram
+- [docs] Update Autocomplete deprecated props removal migration guide docs (#47990) @ZeeshanTamboli
+- [docs-infra] Extract shared App component from \_app into @mui/docs (#47933) @brijeshb42
+- [docs-infra] Expose global theme object (#47964) @Janpot
+- [docs][system] Update `styled` API docs for easier understanding (#47957) @olivier-lxo
+
+### Core
+
+- [code-infra] Add pkg-pr-new as dev dependency (#47992) @Janpot
+- [code-infra] Remove CI coverage collection and upload to Codecov (#47930) @Janpot
+- [core] Migrate to ESLint 10 (#47872) @brijeshb42
+- [core] Remove GridLegacy component (#47956) @siriwatknp
+
+All contributors of this release in alphabetical order: @anchmelev, @atharva3333, @brijeshb42, @Janpot, @mj12albert, @noraleonte, @olivier-lxo, @pcorpet, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
+## 9.0.0-alpha.3
+
+<!-- generated comparing v9.0.0-alpha.2..master -->
+
+_Mar 12, 2026_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📖 A new [Menubar](https://mui.com/material-ui/react-menubar/) component page integrated with [Base UI](https://base-ui.com/react/components/menubar)
+- ♿️ Improved the Roving TabIndex keyboard navigation for the Stepper, Tabs and MenuList components.
+
+### `@mui/material@9.0.0-alpha.3`
+
+- [autocomplete] Add `root` slot (#47852) @GerardasB
+- [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47790) @aman44444
+- [autocomplete] Support full slots for clearIndicator and popupIndicator (#47891) @silviuaavram
+- [material-ui] Partially revert "[material-ui] Clean up duplicated CSS rules (#47838)" (#47927) @sai6855
+- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
+
+### Docs
+
+- [docs][codemod] Add v7 migration docs for deprecated Autocomplete APIs and Autocomplete codemod (#47945) @ZeeshanTamboli
+- [docs] Update faq about vendor chunks (#47747) @Janpot
+- [docs] Use direct palette vars in Tailwind v4 snippet (#47940) @Ahmad-Alaziz
+- [docs][menubar] Add Menubar component page (#47616) @siriwatknp
+
+### Core
+
+- [core] Fix the release prepare steps (#47951) @silviuaavram
+- [core] Remove Joy UI code and docs (#47939) @mnajdova
+- [code-infra] Add previously missed export of themeCssVarsAugmentation (#47918) @brijeshb42
+- [docs-infra] Import font module for nextjs transpilation (#47935) @brijeshb42
+- [docs-infra] Migrate simpler modules from docs to mui-docs (#47897) @brijeshb42
+- [test] Fix detached anchorEl elements in tests (#47929) @Janpot
+
+All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @brijeshb42, @GerardasB, @Janpot, @mnajdova, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.2
 
 <!-- generated comparing v9.0.0-alpha.1..master -->

package/index.d.mts

@@ -49,4 +49,5 @@ export { default as unstable_resolveComponentProps } from "./resolveComponentPro
 export { default as unstable_extractEventHandlers } from "./extractEventHandlers/index.mjs";
 export { default as unstable_getReactNodeRef } from "./getReactNodeRef/index.mjs";
 export { default as unstable_getReactElementRef } from "./getReactElementRef/index.mjs";
+export { default as unstable_useRovingTabIndex } from "./useRovingTabIndex/index.mjs";
 export * from "./types/index.mjs";

package/index.d.ts

@@ -49,4 +49,5 @@ export { default as unstable_resolveComponentProps } from "./resolveComponentPro
 export { default as unstable_extractEventHandlers } from "./extractEventHandlers/index.js";
 export { default as unstable_getReactNodeRef } from "./getReactNodeRef/index.js";
 export { default as unstable_getReactElementRef } from "./getReactElementRef/index.js";
+export { default as unstable_useRovingTabIndex } from "./useRovingTabIndex/index.js";
 export * from "./types/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v9.0.0-alpha.2
+ * @mui/utils v9.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -62,7 +62,8 @@ var _exportNames = {
   unstable_resolveComponentProps: true,
   unstable_extractEventHandlers: true,
   unstable_getReactNodeRef: true,
-  unstable_getReactElementRef: true
+  unstable_getReactElementRef: true,
+  unstable_useRovingTabIndex: true
 };
 Object.defineProperty(exports, "HTMLElementType", {
   enumerable: true,
@@ -340,6 +341,12 @@ Object.defineProperty(exports, "unstable_useOnMount", {
     return _useOnMount.default;
   }
 });
+Object.defineProperty(exports, "unstable_useRovingTabIndex", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.default;
+  }
+});
 Object.defineProperty(exports, "unstable_useSlotProps", {
   enumerable: true,
   get: function () {
@@ -422,6 +429,7 @@ var _resolveComponentProps = _interopRequireDefault(require("./resolveComponentP
 var _extractEventHandlers = _interopRequireDefault(require("./extractEventHandlers"));
 var _getReactNodeRef = _interopRequireDefault(require("./getReactNodeRef"));
 var _getReactElementRef = _interopRequireDefault(require("./getReactElementRef"));
+var _useRovingTabIndex = _interopRequireDefault(require("./useRovingTabIndex"));
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v9.0.0-alpha.2
+ * @mui/utils v9.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -55,4 +55,5 @@ export { default as unstable_resolveComponentProps } from "./resolveComponentPro
 export { default as unstable_extractEventHandlers } from "./extractEventHandlers/index.mjs";
 export { default as unstable_getReactNodeRef } from "./getReactNodeRef/index.mjs";
 export { default as unstable_getReactElementRef } from "./getReactElementRef/index.mjs";
+export { default as unstable_useRovingTabIndex } from "./useRovingTabIndex/index.mjs";
 export * from "./types/index.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.4",
   "author": "MUI Team",
   "description": "Utility functions for React components.",
   "keywords": [
@@ -29,7 +29,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-is": "^19.2.4",
-    "@mui/types": "^9.0.0-alpha.2"
+    "@mui/types": "^9.0.0-alpha.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -764,6 +764,20 @@
         "default": "./usePreviousProps/index.mjs"
       }
     },
+    "./useRovingTabIndex": {
+      "import": {
+        "types": "./useRovingTabIndex/index.d.mts",
+        "default": "./useRovingTabIndex/index.mjs"
+      },
+      "require": {
+        "types": "./useRovingTabIndex/index.d.ts",
+        "default": "./useRovingTabIndex/index.js"
+      },
+      "default": {
+        "types": "./useRovingTabIndex/index.d.mts",
+        "default": "./useRovingTabIndex/index.mjs"
+      }
+    },
     "./useSlotProps": {
       "import": {
         "types": "./useSlotProps/index.d.mts",

package/useRovingTabIndex/index.d.mts

@@ -0,0 +1 @@
+export { default } from "./useRovingTabIndex.mjs";

package/useRovingTabIndex/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useRovingTabIndex.js";

package/useRovingTabIndex/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useRovingTabIndex.default;
+  }
+});
+var _useRovingTabIndex = _interopRequireDefault(require("./useRovingTabIndex"));

package/useRovingTabIndex/index.mjs

@@ -0,0 +1 @@
+export { default } from "./useRovingTabIndex.mjs";

package/useRovingTabIndex/useRovingTabIndex.d.mts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type UseRovingTabIndexOptions = {
+  focusableIndex?: number | undefined;
+  orientation: 'horizontal' | 'vertical';
+  isRtl?: boolean | undefined;
+  shouldFocus?: ((element: HTMLElement | null) => boolean) | undefined;
+  shouldWrap?: boolean | undefined;
+};
+type UseRovingTabIndexReturn = {
+  getItemProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  getContainerProps: (ref?: React.Ref<HTMLElement>) => {
+    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    ref: (element: HTMLElement | null) => void;
+  };
+  focusNext: (shouldSkipFocusOverride?: (element: HTMLElement | null) => boolean) => number;
+};
+/**
+ * Provides roving tab index behavior for a container and its focusable children.
+ * This is useful for implementing keyboard navigation in components like menus, tabs, and lists.
+ * The hook manages the focus state of child elements and provides props to be spread on both the container and the items.
+ * The container will handle keyboard events to move focus between items based on the specified orientation and wrapping behavior.
+ *
+ * @param options - Configuration options for the roving tab index behavior, including orientation, initial focusable index, RTL support, and custom focus logic.
+ * @returns An object containing `getItemProps` and `getContainerProps` functions to be spread on the respective elements, and a `focusNext` function to programmatically move focus to the next item.
+ */
+export default function useRovingTabIndex(options: UseRovingTabIndexOptions): UseRovingTabIndexReturn;
+export {};

package/useRovingTabIndex/useRovingTabIndex.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type UseRovingTabIndexOptions = {
+  focusableIndex?: number | undefined;
+  orientation: 'horizontal' | 'vertical';
+  isRtl?: boolean | undefined;
+  shouldFocus?: ((element: HTMLElement | null) => boolean) | undefined;
+  shouldWrap?: boolean | undefined;
+};
+type UseRovingTabIndexReturn = {
+  getItemProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  getContainerProps: (ref?: React.Ref<HTMLElement>) => {
+    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    ref: (element: HTMLElement | null) => void;
+  };
+  focusNext: (shouldSkipFocusOverride?: (element: HTMLElement | null) => boolean) => number;
+};
+/**
+ * Provides roving tab index behavior for a container and its focusable children.
+ * This is useful for implementing keyboard navigation in components like menus, tabs, and lists.
+ * The hook manages the focus state of child elements and provides props to be spread on both the container and the items.
+ * The container will handle keyboard events to move focus between items based on the specified orientation and wrapping behavior.
+ *
+ * @param options - Configuration options for the roving tab index behavior, including orientation, initial focusable index, RTL support, and custom focus logic.
+ * @returns An object containing `getItemProps` and `getContainerProps` functions to be spread on the respective elements, and a `focusNext` function to programmatically move focus to the next item.
+ */
+export default function useRovingTabIndex(options: UseRovingTabIndexOptions): UseRovingTabIndexReturn;
+export {};

package/useRovingTabIndex/useRovingTabIndex.js

@@ -0,0 +1,197 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRovingTabIndex;
+var React = _interopRequireWildcard(require("react"));
+var _ownerDocument = _interopRequireDefault(require("../ownerDocument"));
+var _getActiveElement = _interopRequireDefault(require("../getActiveElement"));
+const SUPPORTED_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+
+/**
+ * Provides roving tab index behavior for a container and its focusable children.
+ * This is useful for implementing keyboard navigation in components like menus, tabs, and lists.
+ * The hook manages the focus state of child elements and provides props to be spread on both the container and the items.
+ * The container will handle keyboard events to move focus between items based on the specified orientation and wrapping behavior.
+ *
+ * @param options - Configuration options for the roving tab index behavior, including orientation, initial focusable index, RTL support, and custom focus logic.
+ * @returns An object containing `getItemProps` and `getContainerProps` functions to be spread on the respective elements, and a `focusNext` function to programmatically move focus to the next item.
+ */
+function useRovingTabIndex(options) {
+  const {
+    orientation,
+    focusableIndex: focusableIndexProp,
+    isRtl = false,
+    shouldFocus = internalShouldFocus,
+    shouldWrap = true
+  } = options;
+  const initialFocusableIndex = focusableIndexProp ?? 0;
+  const [focusableIndex, setFocusableIndex] = React.useState(initialFocusableIndex);
+  const elementsRef = React.useRef([]);
+  const containerRef = React.useRef(null);
+  const previousFocusableIndexPropRef = React.useRef(initialFocusableIndex);
+  if (focusableIndexProp !== undefined && focusableIndexProp !== previousFocusableIndexPropRef.current) {
+    previousFocusableIndexPropRef.current = focusableIndexProp;
+    if (focusableIndexProp !== focusableIndex) {
+      setFocusableIndex(focusableIndexProp);
+    }
+  }
+  React.useEffect(() => {
+    if (elementsRef.current.length === 0 || focusableIndex === -1 || focusableIndex >= elementsRef.current.length) {
+      return;
+    }
+    if (!shouldFocus(elementsRef.current[focusableIndex])) {
+      const nextIndex = focusNext(elementsRef, focusableIndex, 'next', false, shouldFocus);
+      setFocusableIndex(nextIndex);
+    }
+  }, [focusableIndex, shouldFocus]);
+  const getItemProps = React.useCallback((index, ref) => ({
+    ref: handleRefs(ref, elementNode => {
+      elementsRef.current[index] = elementNode;
+    }),
+    tabIndex: index === focusableIndex ? 0 : -1
+  }), [focusableIndex]);
+  const getContainerProps = React.useCallback(ref => {
+    const onFocus = event => {
+      const focusedElement = event.target;
+      const focusedIndex = elementsRef.current.findIndex(element => element === focusedElement);
+      if (focusedIndex !== -1) {
+        setFocusableIndex(focusedIndex);
+      }
+    };
+    const onKeyDown = event => {
+      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+      if (!SUPPORTED_KEYS.includes(event.key)) {
+        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';
+      }
+      const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(containerRef.current));
+      const isFocusOnContainer = currentFocus === containerRef.current;
+      let direction = 'next';
+      let currentIndex = focusableIndex;
+      switch (event.key) {
+        case previousItemKey:
+          direction = 'previous';
+          event.preventDefault();
+          if (isFocusOnContainer) {
+            // Set to length, so that the previous focused element will be the last one.
+            currentIndex = elementsRef.current.length;
+          }
+          break;
+        case nextItemKey:
+          event.preventDefault();
+          if (isFocusOnContainer) {
+            // Set to -1, so that the next focused element will be the first one.
+            currentIndex = -1;
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          // Set to -1, so that the next focused element will be the first one.
+          currentIndex = -1;
+          break;
+        case 'End':
+          event.preventDefault();
+          direction = 'previous';
+          // Set to length, so that the previous focused element will be the last one.
+          currentIndex = elementsRef.current.length;
+          break;
+        default:
+          return;
+      }
+      focusNext(elementsRef, currentIndex, direction, shouldWrap, shouldFocus);
+    };
+    return {
+      onFocus,
+      onKeyDown,
+      ref: handleRefs(ref, elementNode => {
+        containerRef.current = elementNode;
+      })
+    };
+  }, [focusableIndex, isRtl, orientation, shouldWrap, shouldFocus]);
+  const focusNextExport = React.useCallback(shouldFocusOverride => {
+    const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(containerRef.current));
+    const isFocusOnContainer = currentFocus === containerRef.current;
+    let currentIndex = focusableIndex;
+    if (isFocusOnContainer) {
+      currentIndex = -1;
+    }
+    const nextIndex = focusNext(elementsRef, currentIndex, 'next', true, shouldFocusOverride ?? shouldFocus);
+    if (nextIndex !== -1) {
+      setFocusableIndex(nextIndex);
+    }
+    return nextIndex;
+  }, [focusableIndex, shouldFocus]);
+  return {
+    getItemProps,
+    getContainerProps,
+    focusNext: focusNextExport
+  };
+}
+function focusNext(elementsRef, currentIndex, direction, wrap, shouldFocus) {
+  const lastIndex = elementsRef.current.length - 1;
+  let wrappedOnce = false;
+  let nextIndex = getNextIndex(currentIndex, lastIndex, direction, wrap);
+  const startIndex = nextIndex;
+  while (nextIndex !== -1) {
+    // Prevent infinite loop.
+    if (nextIndex === startIndex) {
+      if (wrappedOnce) {
+        return -1;
+      }
+      wrappedOnce = true;
+    }
+    const nextElement = elementsRef.current[nextIndex];
+
+    // Same logic as useAutocomplete.js
+    if (!shouldFocus(nextElement)) {
+      // Move to the next element.
+      nextIndex = getNextIndex(nextIndex, lastIndex, direction, wrap);
+    } else {
+      nextElement?.focus();
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getNextIndex(currentIndex, lastIndex, direction, wrap = true) {
+  if (direction === 'next') {
+    if (currentIndex === lastIndex) {
+      return wrap ? 0 : -1;
+    }
+    return currentIndex + 1;
+  }
+  if (currentIndex === 0) {
+    return wrap ? lastIndex : -1;
+  }
+  return currentIndex - 1;
+}
+function internalShouldFocus(element) {
+  if (!element) {
+    return false;
+  }
+  return !element.hasAttribute('disabled') && element.getAttribute('aria-disabled') !== 'true' && element.hasAttribute('tabindex');
+}
+function handleRefs(...refs) {
+  return node => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  };
+}

package/useRovingTabIndex/useRovingTabIndex.mjs

@@ -0,0 +1,190 @@
+'use client';
+
+import * as React from 'react';
+import ownerDocument from "../ownerDocument/index.mjs";
+import getActiveElement from "../getActiveElement/index.mjs";
+const SUPPORTED_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+
+/**
+ * Provides roving tab index behavior for a container and its focusable children.
+ * This is useful for implementing keyboard navigation in components like menus, tabs, and lists.
+ * The hook manages the focus state of child elements and provides props to be spread on both the container and the items.
+ * The container will handle keyboard events to move focus between items based on the specified orientation and wrapping behavior.
+ *
+ * @param options - Configuration options for the roving tab index behavior, including orientation, initial focusable index, RTL support, and custom focus logic.
+ * @returns An object containing `getItemProps` and `getContainerProps` functions to be spread on the respective elements, and a `focusNext` function to programmatically move focus to the next item.
+ */
+export default function useRovingTabIndex(options) {
+  const {
+    orientation,
+    focusableIndex: focusableIndexProp,
+    isRtl = false,
+    shouldFocus = internalShouldFocus,
+    shouldWrap = true
+  } = options;
+  const initialFocusableIndex = focusableIndexProp ?? 0;
+  const [focusableIndex, setFocusableIndex] = React.useState(initialFocusableIndex);
+  const elementsRef = React.useRef([]);
+  const containerRef = React.useRef(null);
+  const previousFocusableIndexPropRef = React.useRef(initialFocusableIndex);
+  if (focusableIndexProp !== undefined && focusableIndexProp !== previousFocusableIndexPropRef.current) {
+    previousFocusableIndexPropRef.current = focusableIndexProp;
+    if (focusableIndexProp !== focusableIndex) {
+      setFocusableIndex(focusableIndexProp);
+    }
+  }
+  React.useEffect(() => {
+    if (elementsRef.current.length === 0 || focusableIndex === -1 || focusableIndex >= elementsRef.current.length) {
+      return;
+    }
+    if (!shouldFocus(elementsRef.current[focusableIndex])) {
+      const nextIndex = focusNext(elementsRef, focusableIndex, 'next', false, shouldFocus);
+      setFocusableIndex(nextIndex);
+    }
+  }, [focusableIndex, shouldFocus]);
+  const getItemProps = React.useCallback((index, ref) => ({
+    ref: handleRefs(ref, elementNode => {
+      elementsRef.current[index] = elementNode;
+    }),
+    tabIndex: index === focusableIndex ? 0 : -1
+  }), [focusableIndex]);
+  const getContainerProps = React.useCallback(ref => {
+    const onFocus = event => {
+      const focusedElement = event.target;
+      const focusedIndex = elementsRef.current.findIndex(element => element === focusedElement);
+      if (focusedIndex !== -1) {
+        setFocusableIndex(focusedIndex);
+      }
+    };
+    const onKeyDown = event => {
+      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+      if (!SUPPORTED_KEYS.includes(event.key)) {
+        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';
+      }
+      const currentFocus = getActiveElement(ownerDocument(containerRef.current));
+      const isFocusOnContainer = currentFocus === containerRef.current;
+      let direction = 'next';
+      let currentIndex = focusableIndex;
+      switch (event.key) {
+        case previousItemKey:
+          direction = 'previous';
+          event.preventDefault();
+          if (isFocusOnContainer) {
+            // Set to length, so that the previous focused element will be the last one.
+            currentIndex = elementsRef.current.length;
+          }
+          break;
+        case nextItemKey:
+          event.preventDefault();
+          if (isFocusOnContainer) {
+            // Set to -1, so that the next focused element will be the first one.
+            currentIndex = -1;
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          // Set to -1, so that the next focused element will be the first one.
+          currentIndex = -1;
+          break;
+        case 'End':
+          event.preventDefault();
+          direction = 'previous';
+          // Set to length, so that the previous focused element will be the last one.
+          currentIndex = elementsRef.current.length;
+          break;
+        default:
+          return;
+      }
+      focusNext(elementsRef, currentIndex, direction, shouldWrap, shouldFocus);
+    };
+    return {
+      onFocus,
+      onKeyDown,
+      ref: handleRefs(ref, elementNode => {
+        containerRef.current = elementNode;
+      })
+    };
+  }, [focusableIndex, isRtl, orientation, shouldWrap, shouldFocus]);
+  const focusNextExport = React.useCallback(shouldFocusOverride => {
+    const currentFocus = getActiveElement(ownerDocument(containerRef.current));
+    const isFocusOnContainer = currentFocus === containerRef.current;
+    let currentIndex = focusableIndex;
+    if (isFocusOnContainer) {
+      currentIndex = -1;
+    }
+    const nextIndex = focusNext(elementsRef, currentIndex, 'next', true, shouldFocusOverride ?? shouldFocus);
+    if (nextIndex !== -1) {
+      setFocusableIndex(nextIndex);
+    }
+    return nextIndex;
+  }, [focusableIndex, shouldFocus]);
+  return {
+    getItemProps,
+    getContainerProps,
+    focusNext: focusNextExport
+  };
+}
+function focusNext(elementsRef, currentIndex, direction, wrap, shouldFocus) {
+  const lastIndex = elementsRef.current.length - 1;
+  let wrappedOnce = false;
+  let nextIndex = getNextIndex(currentIndex, lastIndex, direction, wrap);
+  const startIndex = nextIndex;
+  while (nextIndex !== -1) {
+    // Prevent infinite loop.
+    if (nextIndex === startIndex) {
+      if (wrappedOnce) {
+        return -1;
+      }
+      wrappedOnce = true;
+    }
+    const nextElement = elementsRef.current[nextIndex];
+
+    // Same logic as useAutocomplete.js
+    if (!shouldFocus(nextElement)) {
+      // Move to the next element.
+      nextIndex = getNextIndex(nextIndex, lastIndex, direction, wrap);
+    } else {
+      nextElement?.focus();
+      return nextIndex;
+    }
+  }
+  return -1;
+}
+function getNextIndex(currentIndex, lastIndex, direction, wrap = true) {
+  if (direction === 'next') {
+    if (currentIndex === lastIndex) {
+      return wrap ? 0 : -1;
+    }
+    return currentIndex + 1;
+  }
+  if (currentIndex === 0) {
+    return wrap ? lastIndex : -1;
+  }
+  return currentIndex - 1;
+}
+function internalShouldFocus(element) {
+  if (!element) {
+    return false;
+  }
+  return !element.hasAttribute('disabled') && element.getAttribute('aria-disabled') !== 'true' && element.hasAttribute('tabindex');
+}
+function handleRefs(...refs) {
+  return node => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  };
+}