@octanejs/base-ui 0.1.50 → 0.1.52

package/src/utils/floating/useListNavigation.ts

@@ -1,1018 +0,0 @@
-// Ported from .base-ui/packages/react/src/floating-ui-react/hooks/useListNavigation.ts (v1.6.0),
-// octane-adapted: reads the FloatingRootStore (`store.useState`/`select`/`setOpen`/`context`);
-// native events (no `.nativeEvent`); `useIsoLayoutEffect` → octane's `useLayoutEffect` (a plain-`.ts`
-// hook is not compiled, so an `undefined` dep array runs the effect every render — the same
-// semantics as upstream's dep-less `useIsoLayoutEffect`); every hook threads an explicit slot.
-// Returns `{ reference, floating, item, trigger }` prop bags.
-//
-// Adds arrow-key navigation of a list of items using either real DOM focus or virtual focus
-// (`aria-activedescendant`). The two dev-only `console.warn` guards upstream emits for
-// `allowEscape`/grid misconfiguration are dropped: this package carries no `process.env.NODE_ENV`
-// branches (same call as `useStableCallback`'s dropped called-during-render guard).
-import { useMemo, useRef, useLayoutEffect } from 'octane';
-
-import { subSlot } from '../../internal';
-import { isHTMLElement } from '../dom';
-import { ownerDocument } from '../owner';
-import { useAnimationFrame } from '../useAnimationFrame';
-import { useStableCallback } from '../useStableCallback';
-import { useValueAsRef } from '../useValueAsRef';
-import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../composite/keys';
-import {
-	findNonDisabledListIndex,
-	getMaxListIndex,
-	getMinListIndex,
-	isIndexOutOfListBounds,
-	stopEvent,
-	type DisabledIndices,
-} from '../composite/list-utils';
-import { useFloatingParentNodeId, useFloatingTree } from './FloatingTree';
-import type { FloatingTreeStore } from './FloatingTreeStore';
-import type { ElementProps, FloatingContext, FloatingRootContext } from './types';
-import {
-	activeElement,
-	contains,
-	getFloatingFocusElement,
-	getTarget,
-	isTypeableCombobox,
-} from './element';
-import { enqueueFocus } from './enqueueFocus';
-import { isVirtualClick, isVirtualPointerEvent } from './event';
-
-export const ESCAPE = 'Escape';
-
-export type ListOrientation = 'vertical' | 'horizontal' | 'both';
-
-/**
- * The two-dimensional navigator injected through the `grid` prop. Upstream types this as
- * `typeof gridNavigation` (`.base-ui/…/floating-ui-react/hooks/gridNavigation.ts`) and notes that
- * the positional arguments are deliberate — property names of an options object don't minify, and
- * the signature is locked to the caller. The grid navigator itself lands with the grid-capable
- * consumers (Combobox); non-grid consumers (Menu, Select) pass nothing so the grid helpers stay out
- * of their bundles, which is the whole point of injecting it. A `gridNavigation` port satisfies this
- * type structurally.
- */
-export type GridNavigator = (
-	event: KeyboardEvent,
-	prevIndex: number,
-	listRef: { current: Array<HTMLElement | null> },
-	orientation: ListOrientation,
-	loopFocus: boolean,
-	rtl: boolean,
-	disabledIndices: DisabledIndices | undefined,
-	minIndex: number,
-	maxIndex: number,
-	cols?: number,
-) => number | undefined;
-
-function doSwitch(
-	orientation: ListOrientation | undefined,
-	vertical: boolean,
-	horizontal: boolean,
-) {
-	switch (orientation) {
-		case 'vertical':
-			return vertical;
-		case 'horizontal':
-			return horizontal;
-		default:
-			return vertical || horizontal;
-	}
-}
-
-function isMainOrientationKey(key: string, orientation: ListOrientation | undefined) {
-	const vertical = key === ARROW_UP || key === ARROW_DOWN;
-	const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
-	return doSwitch(orientation, vertical, horizontal);
-}
-
-function isMainOrientationToEndKey(
-	key: string,
-	orientation: ListOrientation | undefined,
-	rtl: boolean,
-) {
-	const vertical = key === ARROW_DOWN;
-	const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
-	return (
-		doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === ''
-	);
-}
-
-function isCrossOrientationOpenKey(
-	key: string,
-	orientation: ListOrientation | undefined,
-	rtl: boolean,
-) {
-	const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
-	const horizontal = key === ARROW_DOWN;
-	return doSwitch(orientation, vertical, horizontal);
-}
-
-function isCrossOrientationCloseKey(
-	key: string,
-	orientation: ListOrientation | undefined,
-	rtl: boolean,
-	grid: boolean,
-) {
-	const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
-	const horizontal = key === ARROW_UP;
-	if (orientation === 'both' || (orientation === 'horizontal' && grid)) {
-		return key === ESCAPE;
-	}
-	return doSwitch(orientation, vertical, horizontal);
-}
-
-export interface UseListNavigationProps {
-	/**
-	 * A ref that holds an array of list items.
-	 * @default empty list
-	 */
-	listRef: { current: Array<HTMLElement | null> };
-	/**
-	 * The index of the currently active (focused or highlighted) item, which may
-	 * or may not be selected.
-	 * @default null
-	 */
-	activeIndex: number | null;
-	/**
-	 * A callback that is called when the user navigates to a new active item,
-	 * passed in a new `activeIndex`.
-	 */
-	onNavigate?: ((activeIndex: number | null, event: Event | undefined) => void) | undefined;
-	/**
-	 * Whether the Hook is enabled, including all internal Effects and event
-	 * handlers.
-	 * @default true
-	 */
-	enabled?: boolean | undefined;
-	/**
-	 * The currently selected item index, which may or may not be active.
-	 * @default null
-	 */
-	selectedIndex?: number | null | undefined;
-	/**
-	 * Whether to focus the item upon opening the floating element. 'auto' infers
-	 * what to do based on the input type (keyboard vs. pointer), while a boolean
-	 * value will force the value.
-	 * @default 'auto'
-	 */
-	focusItemOnOpen?: boolean | 'auto' | undefined;
-	/**
-	 * Whether hovering an item synchronizes the focus.
-	 * @default true
-	 */
-	focusItemOnHover?: boolean | undefined;
-	/**
-	 * Whether pressing an arrow key on the navigation's main axis opens the
-	 * floating element.
-	 * @default true
-	 */
-	openOnArrowKeyDown?: boolean | undefined;
-	/**
-	 * By default elements with either a `disabled` or `aria-disabled` attribute
-	 * are skipped in the list navigation — however, this requires the items to
-	 * be rendered.
-	 * This prop allows you to manually specify indices which should be disabled,
-	 * overriding the default logic.
-	 * For Windows-style select popups, where the menu does not open when
-	 * navigating via arrow keys, specify an empty array.
-	 * @default undefined
-	 */
-	disabledIndices?: DisabledIndices | undefined;
-	/**
-	 * Determines whether focus can escape the list, such that nothing is selected
-	 * after navigating beyond the boundary of the list. In some
-	 * autocomplete/combobox components, this may be desired, as screen
-	 * readers will return to the input.
-	 * `loopFocus` must be `true`.
-	 * @default false
-	 */
-	allowEscape?: boolean | undefined;
-	/**
-	 * Determines whether focus should loop around when navigating past the first
-	 * or last item.
-	 * @default false
-	 */
-	loopFocus?: boolean | undefined;
-	/**
-	 * If the list is nested within another one (e.g. a nested submenu), the
-	 * navigation semantics change.
-	 * @default false
-	 */
-	nested?: boolean | undefined;
-	/**
-	 * Allows to specify the orientation of the parent list, which is used to
-	 * determine the direction of the navigation.
-	 * This is useful when list navigation is used within a Composite,
-	 * as the hook can't determine the orientation of the parent list automatically.
-	 */
-	parentOrientation?: ListOrientation | undefined;
-	/**
-	 * Whether the direction of the floating element's navigation is in RTL
-	 * layout.
-	 * @default false
-	 */
-	rtl?: boolean | undefined;
-	/**
-	 * Whether the focus is virtual (using `aria-activedescendant`).
-	 * Use this if you need focus to remain on the reference element
-	 * (such as an input), but allow arrow keys to navigate list items.
-	 * This is common in autocomplete listbox components.
-	 * Your virtually-focused list items must have a unique `id` set on them.
-	 * @default false
-	 */
-	virtual?: boolean | undefined;
-	/**
-	 * The orientation in which navigation occurs.
-	 * @default 'vertical'
-	 */
-	orientation?: ListOrientation | undefined;
-	/**
-	 * The id of the root component.
-	 */
-	id?: string | undefined;
-	/**
-	 * Whether to clear the active index when the pointer leaves an item.
-	 * @default true
-	 */
-	resetOnPointerLeave?: boolean | undefined;
-	/**
-	 * External FloatingTree to use when the one provided by context can't be used.
-	 */
-	externalTree?: FloatingTreeStore | undefined;
-	/**
-	 * Computes two-dimensional list navigation for grid-capable consumers.
-	 */
-	grid?: GridNavigator | null | undefined;
-}
-
-/**
- * Adds arrow key-based navigation of a list of items, either using real DOM
- * focus or virtual focus.
- * @see https://floating-ui.com/docs/useListNavigation
- */
-export function useListNavigation(
-	context: FloatingRootContext | FloatingContext,
-	props: UseListNavigationProps,
-	slot: symbol | undefined,
-): ElementProps {
-	const {
-		listRef,
-		activeIndex,
-		onNavigate: onNavigateProp,
-		enabled = true,
-		selectedIndex = null,
-		allowEscape = false,
-		loopFocus = false,
-		nested = false,
-		rtl = false,
-		virtual = false,
-		focusItemOnOpen = 'auto',
-		focusItemOnHover = true,
-		openOnArrowKeyDown = true,
-		disabledIndices = undefined,
-		orientation = 'vertical',
-		parentOrientation,
-		id,
-		resetOnPointerLeave = true,
-		externalTree,
-		grid: navigateGrid,
-	} = props;
-	const isGrid = navigateGrid != null;
-
-	const store = (context && 'rootStore' in context ? context.rootStore : context) as any;
-
-	const open = store.useState('open', subSlot(slot, 'open'));
-	const floatingElement = store.useState('floatingElement', subSlot(slot, 'fel'));
-	const domReferenceElement = store.useState('domReferenceElement', subSlot(slot, 'drel'));
-
-	const dataRef = store.context.dataRef;
-
-	const floatingFocusElement = getFloatingFocusElement(floatingElement);
-	const typeableComboboxReference = isTypeableCombobox(domReferenceElement);
-	const floatingFocusElementRef = useValueAsRef<HTMLElement | null>(
-		floatingFocusElement,
-		subSlot(slot, 'ffe'),
-	);
-
-	const parentId = useFloatingParentNodeId();
-	const tree = useFloatingTree(externalTree);
-
-	const focusItemOnOpenRef = useRef(focusItemOnOpen, subSlot(slot, 'fioo'));
-	const indexRef = useRef(selectedIndex ?? -1, subSlot(slot, 'index'));
-	const keyRef = useRef<null | string>(null, subSlot(slot, 'key'));
-	const isPointerModalityRef = useRef(true, subSlot(slot, 'ipm'));
-
-	const onNavigate = useStableCallback(
-		(event?: Event) => {
-			onNavigateProp?.(indexRef.current === -1 ? null : indexRef.current, event);
-		},
-		subSlot(slot, 'on'),
-	);
-
-	const previousMountedRef = useRef(!!floatingElement, subSlot(slot, 'pm'));
-	const previousOpenRef = useRef(open, subSlot(slot, 'po'));
-	const forceSyncFocusRef = useRef(false, subSlot(slot, 'fsf'));
-	const forceScrollIntoViewRef = useRef(false, subSlot(slot, 'fsiv'));
-	const cancelQueuedFocusRef = useRef<(() => void) | null>(null, subSlot(slot, 'cqf'));
-
-	const disabledIndicesRef = useValueAsRef<DisabledIndices | undefined>(
-		disabledIndices,
-		subSlot(slot, 'dir'),
-	);
-	const latestOpenRef = useValueAsRef<boolean>(open, subSlot(slot, 'lo'));
-	const selectedIndexRef = useValueAsRef<number | null>(selectedIndex, subSlot(slot, 'si'));
-	const resetOnPointerLeaveRef = useValueAsRef<boolean>(resetOnPointerLeave, subSlot(slot, 'ropl'));
-
-	const focusFrame = useAnimationFrame(subSlot(slot, 'ff'));
-	const waitForListPopulatedFrame = useAnimationFrame(subSlot(slot, 'wflp'));
-
-	const focusItem = useStableCallback(
-		() => {
-			function runFocus(itemElement: HTMLElement) {
-				if (virtual) {
-					tree?.events.emit('virtualfocus', itemElement);
-				} else {
-					cancelQueuedFocusRef.current = enqueueFocus(itemElement, {
-						sync: forceSyncFocusRef.current,
-						preventScroll: true,
-					});
-				}
-			}
-
-			const initialItem = listRef.current[indexRef.current];
-			const forceScrollIntoView = forceScrollIntoViewRef.current;
-
-			if (initialItem) {
-				runFocus(initialItem);
-			}
-
-			const scheduler = forceSyncFocusRef.current
-				? (callback: () => void) => callback()
-				: (callback: () => void) => focusFrame.request(callback);
-
-			scheduler(() => {
-				const waitedItem = listRef.current[indexRef.current] || initialItem;
-
-				if (!waitedItem) {
-					return;
-				}
-
-				if (!initialItem) {
-					runFocus(waitedItem);
-				}
-
-				// `item` is the prop bag declared further down; by the time this runs (from a layout
-				// effect or an event handler) it is always initialized, so this is upstream's
-				// truthiness guard verbatim.
-				const shouldScrollIntoView =
-					// eslint-disable-next-line @typescript-eslint/no-use-before-define
-					item && (forceScrollIntoView || !isPointerModalityRef.current);
-
-				if (shouldScrollIntoView) {
-					// JSDOM doesn't support `.scrollIntoView()` but it's widely supported
-					// by all browsers.
-					waitedItem.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
-				}
-			});
-		},
-		subSlot(slot, 'fi'),
-	);
-
-	useLayoutEffect(
-		() => {
-			dataRef.current.orientation = orientation;
-		},
-		[dataRef, orientation],
-		subSlot(slot, 'e:orientation'),
-	);
-
-	// Sync `selectedIndex` to be the `activeIndex` upon opening the floating
-	// element. Also, reset `activeIndex` upon closing the floating element.
-	useLayoutEffect(
-		() => {
-			if (!enabled) {
-				return;
-			}
-
-			if (open && floatingElement) {
-				indexRef.current = selectedIndex ?? -1;
-				if (focusItemOnOpenRef.current && selectedIndex != null) {
-					// Regardless of the pointer modality, we want to ensure the selected
-					// item comes into view when the floating element is opened.
-					forceScrollIntoViewRef.current = true;
-					onNavigate();
-				}
-			} else if (previousMountedRef.current) {
-				// Reset the active index when the list is no longer open and mounted (closing or
-				// unmounting). `onNavigate` is a stable callback that always forwards to the latest
-				// `onNavigate` prop.
-				indexRef.current = -1;
-				onNavigate();
-			}
-		},
-		[enabled, open, floatingElement, selectedIndex, onNavigate],
-		subSlot(slot, 'e:syncSelected'),
-	);
-
-	// Sync `activeIndex` to be the focused item while the floating element is
-	// open.
-	useLayoutEffect(
-		() => {
-			if (!enabled) {
-				return;
-			}
-			if (!open) {
-				forceSyncFocusRef.current = false;
-				return;
-			}
-			if (!floatingElement) {
-				return;
-			}
-
-			if (activeIndex == null) {
-				forceSyncFocusRef.current = false;
-
-				if (selectedIndexRef.current != null) {
-					return;
-				}
-
-				// Reset while the floating element was open (e.g. the list changed).
-				if (previousMountedRef.current) {
-					indexRef.current = -1;
-					focusItem();
-				}
-
-				// Initial sync.
-				if (
-					(!previousOpenRef.current || !previousMountedRef.current) &&
-					focusItemOnOpenRef.current &&
-					(keyRef.current != null ||
-						(focusItemOnOpenRef.current === true && keyRef.current == null))
-				) {
-					let runs = 0;
-					const waitForListPopulated = () => {
-						if (listRef.current[0] == null) {
-							// Avoid letting the browser paint if possible on the first try,
-							// otherwise use rAF. Don't try more than twice, since something
-							// is wrong otherwise.
-							if (runs < 2) {
-								const scheduler = runs
-									? (callback: () => void) => waitForListPopulatedFrame.request(callback)
-									: queueMicrotask;
-								scheduler(waitForListPopulated);
-							}
-							runs += 1;
-						} else {
-							// Initially focus the first non-disabled item. `disabledIndices` is deliberately
-							// omitted here so attribute-disabled items (`disabled`/`aria-disabled`) are skipped
-							// on open even when the consumer passes an empty `disabledIndices` array. Passing it
-							// would regress that behavior (see mui/base-ui#2604).
-							indexRef.current =
-								keyRef.current == null ||
-								isMainOrientationToEndKey(keyRef.current, orientation, rtl) ||
-								nested
-									? getMinListIndex(listRef)
-									: getMaxListIndex(listRef);
-							keyRef.current = null;
-							onNavigate();
-						}
-					};
-
-					waitForListPopulated();
-				}
-			} else if (!isIndexOutOfListBounds(listRef.current, activeIndex)) {
-				indexRef.current = activeIndex;
-				focusItem();
-				forceScrollIntoViewRef.current = false;
-			}
-		},
-		[
-			enabled,
-			open,
-			floatingElement,
-			activeIndex,
-			selectedIndexRef,
-			nested,
-			listRef,
-			orientation,
-			rtl,
-			onNavigate,
-			focusItem,
-			waitForListPopulatedFrame,
-		],
-		subSlot(slot, 'e:syncActive'),
-	);
-
-	// Ensure the parent floating element has focus when a nested child closes
-	// to allow arrow key navigation to work after the pointer leaves the child.
-	useLayoutEffect(
-		() => {
-			if (!enabled || floatingElement || !tree || virtual || !previousMountedRef.current) {
-				return;
-			}
-
-			const nodes = tree.nodesRef.current;
-			const parent = nodes.find((node) => node.id === parentId)?.context?.elements.floating;
-			// `floatingElement` is null here (see the guard above), so resolve the owner document from an
-			// in-DOM element for realm-safety (shadow DOM/iframes): the reference element, falling back to
-			// the parent floating element when the reference is virtual (`domReferenceElement` is null).
-			const activeEl = activeElement(ownerDocument(domReferenceElement ?? parent ?? null));
-			const treeContainsActiveEl = nodes.some(
-				(node) => node.context && contains(node.context.elements.floating, activeEl),
-			);
-
-			if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
-				parent.focus({ preventScroll: true });
-			}
-		},
-		[enabled, floatingElement, domReferenceElement, tree, parentId, virtual],
-		subSlot(slot, 'e:parentFocus'),
-	);
-
-	useLayoutEffect(
-		() => {
-			previousOpenRef.current = open;
-			previousMountedRef.current = !!floatingElement;
-		},
-		undefined,
-		subSlot(slot, 'e:previous'),
-	);
-
-	useLayoutEffect(
-		() => {
-			if (!open) {
-				keyRef.current = null;
-				focusItemOnOpenRef.current = focusItemOnOpen;
-			}
-		},
-		[open, focusItemOnOpen],
-		subSlot(slot, 'e:resetKey'),
-	);
-
-	const hasActiveIndex = activeIndex != null;
-
-	const syncCurrentTarget = useStableCallback(
-		(event: any) => {
-			if (!latestOpenRef.current) {
-				return;
-			}
-
-			const index = listRef.current.indexOf(event.currentTarget);
-			if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
-				indexRef.current = index;
-				onNavigate(event);
-			}
-		},
-		subSlot(slot, 'sct'),
-	);
-
-	const getParentOrientation = useStableCallback(
-		(): ListOrientation | undefined => {
-			return (
-				parentOrientation ??
-				(tree?.nodesRef.current.find((node) => node.id === parentId)?.context?.dataRef?.current
-					.orientation as ListOrientation | undefined)
-			);
-		},
-		subSlot(slot, 'gpo'),
-	);
-
-	const getMinEnabledIndex = useStableCallback(
-		() => {
-			return getMinListIndex(listRef, disabledIndicesRef.current);
-		},
-		subSlot(slot, 'gmei'),
-	);
-
-	const commonOnKeyDown = useStableCallback(
-		(event: any) => {
-			isPointerModalityRef.current = false;
-			forceSyncFocusRef.current = true;
-
-			// When composing a character, Chrome fires ArrowDown twice. Firefox/Safari
-			// don't appear to suffer from this. `event.isComposing` is avoided due to
-			// Safari not supporting it properly (although it's not needed in the first
-			// place for Safari, just avoiding any possible issues).
-			if (event.which === 229) {
-				return;
-			}
-
-			// If the floating element is animating out, ignore navigation. Otherwise,
-			// the `activeIndex` gets set to 0 despite not being open so the next time
-			// the user ArrowDowns, the first item won't be focused.
-			if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
-				return;
-			}
-
-			if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, isGrid)) {
-				// If the nested list's close key is also the parent navigation key,
-				// let the parent navigate. Otherwise, stop propagating the event.
-				if (!isMainOrientationKey(event.key, getParentOrientation())) {
-					stopEvent(event);
-				}
-
-				store.setOpen(false, createChangeEventDetails(REASONS.listNavigation, event));
-
-				if (isHTMLElement(domReferenceElement)) {
-					if (virtual) {
-						tree?.events.emit('virtualfocus', domReferenceElement);
-					} else {
-						domReferenceElement.focus();
-					}
-				}
-
-				return;
-			}
-
-			const currentIndex = indexRef.current;
-			const minIndex = getMinListIndex(listRef, disabledIndices);
-			const maxIndex = getMaxListIndex(listRef, disabledIndices);
-
-			if (!typeableComboboxReference) {
-				if (event.key === 'Home') {
-					stopEvent(event);
-					indexRef.current = minIndex;
-					onNavigate(event);
-				}
-
-				if (event.key === 'End') {
-					stopEvent(event);
-					indexRef.current = maxIndex;
-					onNavigate(event);
-				}
-			}
-
-			// Grid navigation is injected by grid-capable consumers so non-grid
-			// consumers (menu, select) tree-shake the grid helpers out.
-			if (navigateGrid != null) {
-				const index = navigateGrid(
-					event,
-					indexRef.current,
-					listRef,
-					orientation,
-					loopFocus,
-					rtl,
-					disabledIndices,
-					minIndex,
-					maxIndex,
-				);
-
-				if (index != null) {
-					indexRef.current = index;
-					onNavigate(event);
-				}
-
-				if (orientation === 'both') {
-					return;
-				}
-			}
-
-			if (isMainOrientationKey(event.key, orientation)) {
-				stopEvent(event);
-
-				// Reset the index if no item is focused.
-				if (
-					open &&
-					!virtual &&
-					activeElement(event.currentTarget.ownerDocument) === event.currentTarget
-				) {
-					indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl)
-						? minIndex
-						: maxIndex;
-					onNavigate(event);
-					return;
-				}
-
-				if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
-					if (loopFocus) {
-						if (currentIndex >= maxIndex) {
-							if (allowEscape && currentIndex !== listRef.current.length) {
-								indexRef.current = -1;
-							} else {
-								// Give time for virtualizers to update the listRef.
-								forceSyncFocusRef.current = false;
-								indexRef.current = minIndex;
-							}
-						} else {
-							indexRef.current = findNonDisabledListIndex(listRef.current, {
-								startingIndex: currentIndex,
-								disabledIndices,
-							});
-						}
-					} else {
-						indexRef.current = Math.min(
-							maxIndex,
-							findNonDisabledListIndex(listRef.current, {
-								startingIndex: currentIndex,
-								disabledIndices,
-							}),
-						);
-					}
-				} else if (loopFocus) {
-					if (currentIndex <= minIndex) {
-						if (allowEscape && currentIndex !== -1) {
-							indexRef.current = listRef.current.length;
-						} else {
-							// Give time for virtualizers to update the listRef.
-							forceSyncFocusRef.current = false;
-							indexRef.current = maxIndex;
-						}
-					} else {
-						indexRef.current = findNonDisabledListIndex(listRef.current, {
-							startingIndex: currentIndex,
-							decrement: true,
-							disabledIndices,
-						});
-					}
-				} else {
-					indexRef.current = Math.max(
-						minIndex,
-						findNonDisabledListIndex(listRef.current, {
-							startingIndex: currentIndex,
-							decrement: true,
-							disabledIndices,
-						}),
-					);
-				}
-
-				if (isIndexOutOfListBounds(listRef.current, indexRef.current)) {
-					indexRef.current = -1;
-				}
-
-				onNavigate(event);
-			}
-		},
-		subSlot(slot, 'cokd'),
-	);
-
-	const item = useMemo(
-		() => {
-			const itemProps: ElementProps['item'] = {
-				onFocus(event: any) {
-					forceSyncFocusRef.current = true;
-					syncCurrentTarget(event);
-				},
-				onClick: ({ currentTarget }: any) => currentTarget.focus({ preventScroll: true }), // Safari
-				onMouseMove(event: any) {
-					forceSyncFocusRef.current = true;
-					forceScrollIntoViewRef.current = false;
-					if (focusItemOnHover) {
-						syncCurrentTarget(event);
-					}
-				},
-				onPointerLeave(event: any) {
-					if (
-						!latestOpenRef.current ||
-						!isPointerModalityRef.current ||
-						event.pointerType === 'touch'
-					) {
-						return;
-					}
-
-					forceSyncFocusRef.current = true;
-
-					const relatedTarget = event.relatedTarget as HTMLElement | null;
-
-					if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
-						return;
-					}
-
-					if (!resetOnPointerLeaveRef.current) {
-						return;
-					}
-
-					cancelQueuedFocusRef.current?.();
-					cancelQueuedFocusRef.current = null;
-
-					indexRef.current = -1;
-					onNavigate(event);
-
-					if (!virtual) {
-						const floatingFocusEl = floatingFocusElementRef.current;
-						const activeEl = activeElement(ownerDocument(floatingFocusEl));
-						if (floatingFocusEl && contains(floatingFocusEl, activeEl)) {
-							floatingFocusEl.focus({ preventScroll: true });
-						}
-					}
-				},
-			};
-
-			return itemProps;
-		},
-		[
-			syncCurrentTarget,
-			latestOpenRef,
-			floatingFocusElementRef,
-			focusItemOnHover,
-			listRef,
-			onNavigate,
-			resetOnPointerLeaveRef,
-			virtual,
-		],
-		subSlot(slot, 'item'),
-	);
-
-	const ariaActiveDescendantProp = useMemo(
-		() => {
-			return (
-				virtual &&
-				open &&
-				hasActiveIndex && {
-					'aria-activedescendant': `${id}-${activeIndex}`,
-				}
-			);
-		},
-		[virtual, open, hasActiveIndex, id, activeIndex],
-		subSlot(slot, 'aad'),
-	);
-
-	const floating: ElementProps['floating'] = useMemo(
-		() => {
-			return {
-				'aria-orientation': orientation === 'both' ? undefined : orientation,
-				...(!typeableComboboxReference ? ariaActiveDescendantProp : {}),
-				onKeyDown(event: any) {
-					// Close submenu on Shift+Tab
-					if (event.key === 'Tab' && event.shiftKey && open && !virtual) {
-						// If the event originated from within a nested element (e.g., a Dialog opened from
-						// within the menu), don't close the menu. The nested element has its own focus
-						// management and should handle the Tab key.
-						const target = getTarget(event) as Element | null;
-						if (target && !contains(floatingFocusElementRef.current, target)) {
-							return;
-						}
-
-						stopEvent(event);
-						store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event));
-
-						if (isHTMLElement(domReferenceElement)) {
-							domReferenceElement.focus();
-						}
-
-						return;
-					}
-
-					commonOnKeyDown(event);
-				},
-				onPointerMove() {
-					isPointerModalityRef.current = true;
-				},
-			};
-		},
-		[
-			ariaActiveDescendantProp,
-			commonOnKeyDown,
-			floatingFocusElementRef,
-			orientation,
-			typeableComboboxReference,
-			store,
-			open,
-			virtual,
-			domReferenceElement,
-		],
-		subSlot(slot, 'floating'),
-	);
-
-	const trigger: ElementProps['trigger'] = useMemo(
-		() => {
-			function openOnNavigationKeyDown(event: any) {
-				store.setOpen(
-					true,
-					createChangeEventDetails(
-						REASONS.listNavigation,
-						event,
-						event.currentTarget as HTMLElement,
-					),
-				);
-			}
-
-			function checkVirtualMouse(event: any) {
-				if (focusItemOnOpen === 'auto' && isVirtualClick(event)) {
-					focusItemOnOpenRef.current = !virtual;
-				}
-			}
-
-			function checkVirtualPointer(event: any) {
-				// `pointerdown` fires first, reset the state then perform the checks.
-				focusItemOnOpenRef.current = focusItemOnOpen;
-				if (focusItemOnOpen === 'auto' && isVirtualPointerEvent(event)) {
-					focusItemOnOpenRef.current = true;
-				}
-			}
-
-			return {
-				onKeyDown(event: any) {
-					// non-reactive open state (to prevent re-creation of the handler)
-					const currentOpen = store.select('open');
-					isPointerModalityRef.current = false;
-
-					const isArrowKey = event.key.startsWith('Arrow');
-					const isParentCrossOpenKey = isCrossOrientationOpenKey(
-						event.key,
-						getParentOrientation(),
-						rtl,
-					);
-					const isMainKey = isMainOrientationKey(event.key, orientation);
-					const isNavigationKey =
-						(nested ? isParentCrossOpenKey : isMainKey) ||
-						event.key === 'Enter' ||
-						event.key.trim() === '';
-
-					if (virtual && currentOpen) {
-						return commonOnKeyDown(event);
-					}
-
-					// If a floating element should not open on arrow key down, avoid
-					// setting `activeIndex` while it's closed.
-					if (!currentOpen && !openOnArrowKeyDown && isArrowKey) {
-						return undefined;
-					}
-
-					if (isNavigationKey) {
-						const isParentMainKey = isMainOrientationKey(event.key, getParentOrientation());
-						keyRef.current = nested && isParentMainKey ? null : event.key;
-					}
-
-					if (nested) {
-						if (isParentCrossOpenKey) {
-							stopEvent(event);
-
-							if (currentOpen) {
-								indexRef.current = getMinEnabledIndex();
-								onNavigate(event);
-							} else {
-								openOnNavigationKeyDown(event);
-							}
-						}
-
-						return undefined;
-					}
-
-					if (isMainKey) {
-						if (selectedIndexRef.current != null) {
-							indexRef.current = selectedIndexRef.current;
-						}
-
-						stopEvent(event);
-
-						if (!currentOpen && openOnArrowKeyDown) {
-							openOnNavigationKeyDown(event);
-						} else {
-							commonOnKeyDown(event);
-						}
-
-						if (currentOpen) {
-							onNavigate(event);
-						}
-					}
-
-					return undefined;
-				},
-				onFocus(event: any) {
-					if (store.select('open') && !virtual) {
-						indexRef.current = -1;
-						onNavigate(event);
-					}
-				},
-				onPointerDown: checkVirtualPointer,
-				onPointerEnter: checkVirtualPointer,
-				onMouseDown: checkVirtualMouse,
-				onClick: checkVirtualMouse,
-			};
-		},
-		[
-			commonOnKeyDown,
-			focusItemOnOpen,
-			getMinEnabledIndex,
-			nested,
-			onNavigate,
-			store,
-			openOnArrowKeyDown,
-			orientation,
-			getParentOrientation,
-			rtl,
-			selectedIndexRef,
-			virtual,
-		],
-		subSlot(slot, 'trigger'),
-	);
-
-	const reference: ElementProps['reference'] = useMemo(
-		() => {
-			return {
-				...ariaActiveDescendantProp,
-				...trigger,
-			};
-		},
-		[ariaActiveDescendantProp, trigger],
-		subSlot(slot, 'ref'),
-	);
-
-	return useMemo(
-		() => (enabled ? { reference, floating, item, trigger } : {}),
-		[enabled, reference, floating, trigger, item],
-		subSlot(slot, 'out'),
-	);
-}