@mui/utils 9.0.0-alpha.1 → 9.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # [Versions](https://mui.com/versions/)
 
+## 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 -->
+
+_Mar 5, 2026_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### @mui/material@9.0.0-alpha.2
+
+- Clean up duplicated CSS rules (#47838) @sai6855
+
+### @mui/system@9.0.0-alpha.2
+
+- Refactor sortContainerQueries to define regex outside of sort function (#47817) @sai6855
+
+### Docs
+
+- Move shared components to @mui/docs package (#47672) @Janpot
+- Fix small typo in NumberField page (#47877) @arthur-plazanet
+
+### Core
+
+- [code-infra] Reduce paths for attw checks (#47896) @brijeshb42
+- [docs-infra] Run syncTeamMembers (#47900) @Janpot
+
+All contributors of this release in alphabetical order: @arthur-plazanet, @brijeshb42, @Janpot, @sai6855
+
 ## 9.0.0-alpha.1
 
 <!-- generated comparing v9.0.0-alpha.0..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.1
+ * @mui/utils v9.0.0-alpha.3
  *
  * @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.1
+ * @mui/utils v9.0.0-alpha.3
  *
  * @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.1",
+  "version": "9.0.0-alpha.3",
   "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.1"
+    "@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;
+      }
+    });
+  };
+}