@octanejs/aria 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/aria",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -35,7 +35,8 @@
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./stately": "./src/stately/index.ts"
+    "./stately": "./src/stately/index.ts",
+    "./components": "./src/components/index.ts"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.2",
@@ -45,17 +46,18 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "octane": "0.1.9"
+    "octane": "0.1.11"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.37",
+    "@tsrx/react": "^0.2.44",
     "esbuild": "^0.28.1",
     "react": "^19.2.0",
     "react-aria": "3.50.0",
+    "react-aria-components": "1.19.0",
     "react-dom": "^19.2.0",
     "react-stately": "3.48.0",
     "vitest": "^4.1.9",
-    "octane": "0.1.9"
+    "octane": "0.1.11"
   },
   "scripts": {
     "test": "vitest run"

package/src/autocomplete/useAutocomplete.ts

@@ -0,0 +1,656 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/autocomplete/useAutocomplete.ts).
+// octane adaptations:
+// - The autocomplete input is a TEXT input: `inputProps.onChange` stays the VALUE-level
+//   callback exactly like upstream — the consuming field hook (useTextField et al) wires it
+//   onto octane's NATIVE `input` event. No synthetic onChange is added anywhere.
+// - `onKeyDown` receives the ported BaseEvent Proxy (createEventHandler via the field hook's
+//   useKeyboard). `.nativeEvent.isComposing` → `e.isComposing`; `.nativeEvent.type` /
+//   `.nativeEvent` used as event-constructor init → `e.type` / the Proxy itself (property
+//   reads forward to the live native event). Upstream's `'continuePropagation' in e` probe
+//   becomes a `typeof` probe — the Proxy exposes overrides via `get`, not `has`.
+// - React FocusEvent/KeyboardEvent/PointerEvent types → native DOM events.
+// - The Parcel glob intl import becomes the generated '../intl/autocomplete' dictionary index.
+// - Public-hook slot threading (splitSlot/subSlot) per the binding convention; explicit
+//   dependency arrays are preserved verbatim (including the empty ones).
+import type {
+	AriaLabelingProps,
+	DOMProps,
+	FocusableElement,
+	Node,
+	RefObject,
+	ValueBase,
+} from '@react-types/shared';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+
+import type { AriaTextFieldProps } from '../textfield/useTextField';
+import type {
+	AutocompleteProps,
+	AutocompleteState,
+} from '../stately/autocomplete/useAutocompleteState';
+import { CLEAR_FOCUS_EVENT, FOCUS_EVENT } from '../utils/constants';
+import {
+	dispatchVirtualBlur,
+	dispatchVirtualFocus,
+	getVirtuallyFocusedElement,
+	moveVirtualFocus,
+} from '../focus/virtualFocus';
+import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { getInteractionModality, getPointerType } from '../interactions/useFocusVisible';
+// octane adaptation: the ported NATIVE-event handler bags (upstream: FocusEvents/
+// KeyboardEvents from '@react-types/shared', typed over React synthetic events).
+import type { FocusEvents } from '../interactions/useFocus';
+import type { KeyboardEvents } from '../interactions/useKeyboard';
+import { getOwnerDocument } from '../utils/domHelpers';
+import intlMessages from '../intl/autocomplete';
+import { isAndroid, isIOS } from '../utils/platform';
+import { isCtrlKeyPressed } from '../utils/keyboard';
+import { mergeProps } from '../utils/mergeProps';
+import { mergeRefs } from '../utils/mergeRefs';
+import { useEffectEvent } from '../utils/useEffectEvent';
+import { useEvent } from '../utils/useEvent';
+import { useId } from '../utils/useId';
+import { useLabels } from '../utils/useLabels';
+import { useLayoutEffect } from '../utils/useLayoutEffect';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useObjectRef } from '../utils/useObjectRef';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+export interface CollectionOptions extends DOMProps, AriaLabelingProps {
+	/** Whether the collection items should use virtual focus instead of being focused directly. */
+	shouldUseVirtualFocus: boolean;
+	/** Whether typeahead is disabled. */
+	disallowTypeAhead: boolean;
+}
+
+export interface InputProps<T = FocusableElement>
+	extends
+		DOMProps,
+		FocusEvents<T>,
+		KeyboardEvents,
+		Pick<ValueBase<string>, 'onChange' | 'value'>,
+		Pick<
+			AriaTextFieldProps,
+			| 'enterKeyHint'
+			| 'aria-controls'
+			| 'aria-autocomplete'
+			| 'aria-activedescendant'
+			| 'spellCheck'
+			| 'autoCorrect'
+			| 'autoComplete'
+		> {}
+
+export interface AriaAutocompleteProps<T> extends AutocompleteProps {
+	/**
+	 * An optional filter function used to determine if a option should be included in the
+	 * autocomplete list. Include this if the items you are providing to your wrapped collection
+	 * aren't filtered by default.
+	 */
+	filter?: (textValue: string, inputValue: string, node: Node<T>) => boolean;
+
+	/**
+	 * Whether or not to focus the first item in the collection after a filter is performed. Note this
+	 * is only applicable if virtual focus behavior is not turned off via `disableVirtualFocus`.
+	 *
+	 * @default false
+	 */
+	disableAutoFocusFirst?: boolean;
+
+	/**
+	 * Whether the autocomplete should disable virtual focus, instead making the wrapped collection
+	 * directly tabbable.
+	 *
+	 * @default false
+	 */
+	disableVirtualFocus?: boolean;
+}
+
+export interface AriaAutocompleteOptions<T> extends Omit<AriaAutocompleteProps<T>, 'children'> {
+	/** The ref for the wrapped collection element. */
+	inputRef: RefObject<HTMLInputElement | null>;
+	/** The ref for the wrapped collection element. */
+	collectionRef: RefObject<HTMLElement | null>;
+}
+
+export interface AutocompleteAria<T> {
+	/**
+	 * Props for the autocomplete input element. These should be passed to the input's aria hooks
+	 * (e.g. useTextField/useSearchField/etc) respectively.
+	 */
+	inputProps: InputProps;
+	/** Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu). */
+	collectionProps: CollectionOptions;
+	/** Ref to attach to the wrapped collection. */
+	collectionRef: RefObject<HTMLElement | null>;
+	/**
+	 * A filter function that returns if the provided collection node should be filtered out of the
+	 * collection.
+	 */
+	filter?: (nodeTextValue: string, node: Node<T>) => boolean;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for an autocomplete component. An
+ * autocomplete combines a text input with a collection, allowing users to filter the collection's
+ * contents match a query.
+ *
+ * @param props - Props for the autocomplete.
+ * @param state - State for the autocomplete, as returned by `useAutocompleteState`.
+ */
+export function useAutocomplete<T>(
+	props: AriaAutocompleteOptions<T>,
+	state: AutocompleteState,
+): AutocompleteAria<T>;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useAutocomplete<T>(
+	props: AriaAutocompleteOptions<T>,
+	state: AutocompleteState,
+	slot: symbol | undefined,
+): AutocompleteAria<T>;
+export function useAutocomplete(...args: any[]): AutocompleteAria<any> {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useAutocomplete');
+	const props = user[0] as AriaAutocompleteOptions<any>;
+	const state = user[1] as AutocompleteState;
+
+	let {
+		inputRef,
+		collectionRef,
+		filter,
+		disableAutoFocusFirst = false,
+		disableVirtualFocus = false,
+	} = props;
+
+	let collectionId = useId(subSlot(slot, 'collectionId'));
+	let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(
+		undefined,
+		subSlot(slot, 'timeout'),
+	);
+	let delayNextActiveDescendant = useRef(false, subSlot(slot, 'delayNextActiveDescendant'));
+	let queuedActiveDescendant = useRef<string | null>(null, subSlot(slot, 'queuedActiveDescendant'));
+
+	// For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
+	// moving focus back to the subtriggers
+	let isMobileScreenReader = getInteractionModality() === 'virtual' && (isIOS() || isAndroid());
+	let [shouldUseVirtualFocus, setShouldUseVirtualFocus] = useState(
+		!isMobileScreenReader && !disableVirtualFocus,
+		subSlot(slot, 'virtualFocus'),
+	);
+	// Tracks if a collection has been connected to the autocomplete. If false, we don't want to add various attributes to the autocomplete input
+	// since it isn't attached to a filterable collection (e.g. Tabs)
+	let [hasCollection, setHasCollection] = useState(false, subSlot(slot, 'hasCollection'));
+	let [autoFocusOnMount, setAutoFocusOnMount] = useState(false, subSlot(slot, 'autoFocusOnMount'));
+
+	useEffect(
+		() => {
+			return () => clearTimeout(timeout.current);
+		},
+		[],
+		subSlot(slot, 'clearTimeout'),
+	);
+
+	let updateActiveDescendantEvent = useEffectEvent(
+		(e: Event) => {
+			// Ensure input is focused if the user clicks on the collection directly.
+			// don't trigger on touch so that mobile keyboard doesnt appear when tapping on options
+			if (
+				!e.isTrusted &&
+				shouldUseVirtualFocus &&
+				inputRef.current &&
+				getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current &&
+				getPointerType() !== 'touch'
+			) {
+				inputRef.current.focus();
+			}
+
+			let target = getEventTarget(e) as Element | null;
+			if (e.isTrusted || !target || queuedActiveDescendant.current === target.id) {
+				return;
+			}
+
+			clearTimeout(timeout.current);
+			if (target !== collectionRef.current) {
+				if (delayNextActiveDescendant.current) {
+					queuedActiveDescendant.current = target.id;
+					timeout.current = setTimeout(() => {
+						state.setFocusedNodeId(target.id);
+					}, 500);
+				} else {
+					queuedActiveDescendant.current = target.id;
+					state.setFocusedNodeId(target.id);
+				}
+			} else if (
+				queuedActiveDescendant.current &&
+				!document.getElementById(queuedActiveDescendant.current)
+			) {
+				// If we recieve a focus event refocusing the collection, either we have newly refocused the input and are waiting for the
+				// wrapped collection to refocus the previously focused node if any OR
+				// we are in a state where we've filtered to such a point that there aren't any matching items in the collection to focus.
+				// In this case we want to clear tracked item if any and clear active descendant
+				queuedActiveDescendant.current = null;
+				state.setFocusedNodeId(null);
+			}
+
+			delayNextActiveDescendant.current = false;
+		},
+		subSlot(slot, 'updateActiveDescendant'),
+	);
+
+	let [collectionNode, setCollectionNode] = useState<HTMLElement | null>(
+		null,
+		subSlot(slot, 'collectionNode'),
+	);
+	let callbackRef = useCallback(
+		(node) => {
+			setCollectionNode(node);
+			if (node != null) {
+				// If useSelectableCollection isn't passed shouldUseVirtualFocus even when useAutocomplete provides it
+				// that means the collection doesn't support it (e.g. Table). If that is the case, we need to disable it here regardless
+				// of what the user's provided so that the input doesn't recieve the onKeyDown and autocomplete props.
+				if (node.getAttribute('tabindex') != null) {
+					setShouldUseVirtualFocus(false);
+				}
+				setHasCollection(true);
+			} else {
+				setHasCollection(false);
+			}
+		},
+		[],
+		subSlot(slot, 'callbackRef'),
+	);
+	useLayoutEffect(
+		() => {
+			if (collectionNode != null) {
+				// When typing forward, we want to delay the setting of active descendant to not interrupt the native screen reader announcement
+				// of the letter you just typed. If we recieve another focus event then we clear the queued update
+				collectionNode.addEventListener('focusin', updateActiveDescendantEvent);
+			}
+			return () => {
+				collectionNode?.removeEventListener('focusin', updateActiveDescendantEvent);
+			};
+		},
+		[collectionNode],
+		subSlot(slot, 'focusinListener'),
+	);
+
+	// Make sure to memo so that React doesn't keep registering a new event listeners on every rerender of the wrapped collection
+	let mergedCollectionRef = useObjectRef(
+		useMemo(
+			() => mergeRefs(collectionRef, callbackRef),
+			[collectionRef, callbackRef],
+			subSlot(slot, 'mergeRefs'),
+		),
+		subSlot(slot, 'objectRef'),
+	);
+
+	let focusFirstItem = useCallback(
+		() => {
+			if (!collectionRef.current) {
+				setAutoFocusOnMount(true);
+				return;
+			}
+
+			delayNextActiveDescendant.current = true;
+			collectionRef.current?.dispatchEvent(
+				new CustomEvent(FOCUS_EVENT, {
+					cancelable: true,
+					bubbles: true,
+					detail: {
+						focusStrategy: 'first',
+					},
+				}),
+			);
+		},
+		[collectionRef],
+		subSlot(slot, 'focusFirstItem'),
+	);
+
+	let clearVirtualFocus = useCallback(
+		(clearFocusKey?: boolean) => {
+			setAutoFocusOnMount(false);
+			moveVirtualFocus(getActiveElement());
+			queuedActiveDescendant.current = null;
+			state.setFocusedNodeId(null);
+			let clearFocusEvent = new CustomEvent(CLEAR_FOCUS_EVENT, {
+				cancelable: true,
+				bubbles: true,
+				detail: {
+					clearFocusKey,
+				},
+			});
+			clearTimeout(timeout.current);
+			delayNextActiveDescendant.current = false;
+			collectionRef.current?.dispatchEvent(clearFocusEvent);
+		},
+		[collectionRef, state],
+		subSlot(slot, 'clearVirtualFocus'),
+	);
+
+	let lastInputType = useRef('', subSlot(slot, 'lastInputType'));
+	useEvent(
+		inputRef,
+		'beforeinput',
+		(e) => {
+			let { inputType } = e as InputEvent;
+			lastInputType.current = inputType;
+		},
+		subSlot(slot, 'beforeinput'),
+	);
+
+	let onChange = (value: string) => {
+		// Tell wrapped collection to focus the first element in the list when typing forward and to clear focused key when modifying the text via
+		// copy paste/backspacing/undo/redo for screen reader announcements
+		if (
+			(lastInputType.current === 'insertText' ||
+				// IME composition (e.g. CJK input) reports 'insertCompositionText'/'insertFromComposition'
+				// instead of 'insertText'. Treat these as forward typing so the first item gets virtual focus.
+				lastInputType.current === 'insertCompositionText' ||
+				lastInputType.current === 'insertFromComposition') &&
+			!disableAutoFocusFirst
+		) {
+			focusFirstItem();
+		} else if (
+			lastInputType.current &&
+			(lastInputType.current.includes('insert') ||
+				lastInputType.current.includes('delete') ||
+				lastInputType.current.includes('history'))
+		) {
+			clearVirtualFocus(true);
+
+			// If onChange was triggered before the timeout actually updated the activedescendant, we need to fire
+			// our own dispatchVirtualFocus so focusVisible gets reapplied on the input
+			if (getVirtuallyFocusedElement(document) === inputRef.current) {
+				dispatchVirtualFocus(inputRef.current!, null);
+			}
+		}
+
+		state.setInputValue(value);
+	};
+
+	let keyDownTarget = useRef<Element | null>(null, subSlot(slot, 'keyDownTarget'));
+	// For textfield specific keydown operations
+	// octane adaptation: `e` is the ported BaseEvent Proxy over the native KeyboardEvent
+	// (upstream types it BaseEvent<ReactKeyboardEvent>); typed `any` like the useComboBox
+	// port so the handler slots into AriaTextFieldProps' native-event handler types.
+	let onKeyDown = (e: any) => {
+		keyDownTarget.current = getEventTarget(e) as Element;
+		// octane adaptation: `.nativeEvent.isComposing` → `e.isComposing` (the BaseEvent Proxy
+		// forwards the read to the live native event).
+		if (e.isComposing) {
+			return;
+		}
+
+		let focusedNodeId = queuedActiveDescendant.current;
+		if (
+			focusedNodeId !== null &&
+			getOwnerDocument(inputRef.current).getElementById(focusedNodeId) == null
+		) {
+			// if the focused id doesn't exist in document, then we need to clear the tracked focused node, otherwise
+			// we will be attempting to fire key events on a non-existing node instead of trying to focus the newly swapped wrapped collection.
+			// This can happen if you are swapping out the Autocomplete wrapped collection component like in the docs search.
+			queuedActiveDescendant.current = null;
+			focusedNodeId = null;
+		}
+
+		switch (e.key) {
+			case 'a':
+				if (isCtrlKeyPressed(e)) {
+					return;
+				}
+				break;
+			case 'Escape':
+				// Early return for Escape here so it doesn't leak the Escape event from the simulated collection event below and
+				// close the dialog prematurely. Ideally that should be up to the discretion of the input element hence the check
+				// for isPropagationStopped
+				if (e.isDefaultPrevented()) {
+					return;
+				}
+				break;
+			case ' ':
+				// Space shouldn't trigger onAction so early return.
+				return;
+			case 'Tab':
+				// Don't propogate Tab down to the collection, otherwise we will try to focus the collection via useSelectableCollection's Tab handler (aka shift tab logic)
+				// We want FocusScope to handle Tab if one exists (aka sub dialog), so special casepropogate
+				// octane adaptation: the BaseEvent Proxy exposes its overrides via `get`, so
+				// upstream's `'continuePropagation' in e` probe becomes a typeof probe.
+				if (typeof e.continuePropagation === 'function') {
+					e.continuePropagation();
+				}
+				return;
+			case 'Home':
+			case 'End':
+			case 'PageDown':
+			case 'PageUp':
+			case 'ArrowUp':
+			case 'ArrowDown':
+			case 'ArrowRight':
+			case 'ArrowLeft': {
+				if ((e.key === 'Home' || e.key === 'End') && focusedNodeId == null && e.shiftKey) {
+					return;
+				}
+
+				// If there is text within the input field, we'll want continue propagating events down
+				// to the wrapped collection if there is a focused node so that a user can continue moving the
+				// virtual focus. However, if the user doesn't have a focus in the collection, just move the text
+				// cursor instead. They can move focus down into the collection via down/up arrow if need be
+				if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+					if (focusedNodeId == null) {
+						if (!e.isPropagationStopped()) {
+							e.stopPropagation();
+						}
+						return;
+					}
+
+					break;
+				}
+
+				// Prevent these keys from moving the text cursor in the input
+				e.preventDefault();
+				// Move virtual focus into the wrapped collection
+				let focusCollection = new CustomEvent(FOCUS_EVENT, {
+					cancelable: true,
+					bubbles: true,
+				});
+
+				collectionRef.current?.dispatchEvent(focusCollection);
+				break;
+			}
+		}
+
+		// Emulate the keyboard events that happen in the input field in the wrapped collection. This is for triggering things like onAction via Enter
+		// or moving focus from one item to another. Stop propagation on the input event if it isn't already stopped so it doesn't leak out. For events
+		// like ESC, the dispatched event below will bubble out of the collection and be stopped if handled by useSelectableCollection, otherwise will bubble
+		// as expected
+		if (!e.isPropagationStopped()) {
+			e.stopPropagation();
+		}
+
+		let shouldPerformDefaultAction = true;
+		if (collectionRef.current !== null) {
+			if (focusedNodeId == null) {
+				// octane adaptation: `new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)` — the
+				// Proxy forwards init-dict property reads to the live native event.
+				shouldPerformDefaultAction =
+					collectionRef.current?.dispatchEvent(new KeyboardEvent(e.type, e)) || false;
+			} else {
+				let item = document.getElementById(focusedNodeId);
+				if (item) {
+					shouldPerformDefaultAction = item?.dispatchEvent(new KeyboardEvent(e.type, e)) || false;
+				}
+			}
+		}
+
+		if (shouldPerformDefaultAction) {
+			switch (e.key) {
+				case 'ArrowLeft':
+				case 'ArrowRight': {
+					// Clear the activedescendant so NVDA announcements aren't interrupted but retain the focused key in the collection so the
+					// user's keyboard navigation restarts from where they left off
+					clearVirtualFocus();
+					break;
+				}
+				case 'Enter':
+					// Trigger click action on item when Enter key was pressed.
+					if (focusedNodeId != null) {
+						let item = document.getElementById(focusedNodeId);
+						item?.dispatchEvent(new PointerEvent('click', e));
+					}
+					break;
+			}
+		} else {
+			// TODO: check if we can do this, want to stop textArea from using its default Enter behavior so items are properly triggered
+			e.preventDefault();
+		}
+	};
+
+	let onKeyUpCapture = useEffectEvent(
+		(e: KeyboardEvent) => {
+			// Dispatch simulated key up events for things like triggering links in listbox
+			// Make sure to stop the propagation of the input keyup event so that the simulated keyup/down pair
+			// is detected by usePress instead of the original keyup originating from the input
+			if (getEventTarget(e) === keyDownTarget.current) {
+				e.stopImmediatePropagation();
+				let focusedNodeId = queuedActiveDescendant.current;
+				if (focusedNodeId == null) {
+					collectionRef.current?.dispatchEvent(new KeyboardEvent(e.type, e));
+				} else {
+					let item = document.getElementById(focusedNodeId);
+					item?.dispatchEvent(new KeyboardEvent(e.type, e));
+				}
+			}
+		},
+		subSlot(slot, 'onKeyUpCapture'),
+	);
+
+	useEffect(
+		() => {
+			document.addEventListener('keyup', onKeyUpCapture, true);
+			return () => {
+				document.removeEventListener('keyup', onKeyUpCapture, true);
+			};
+		},
+		[],
+		subSlot(slot, 'keyupListener'),
+	);
+
+	let stringFormatter = useLocalizedStringFormatter(
+		intlMessages,
+		'@react-aria/autocomplete',
+		subSlot(slot, 'formatter'),
+	);
+	let collectionProps = useLabels(
+		{
+			id: collectionId,
+			'aria-label': stringFormatter.format('collectionLabel'),
+		},
+		undefined,
+		subSlot(slot, 'collectionLabels'),
+	);
+
+	let filterFn = useCallback(
+		(nodeTextValue: string, node: Node<any>) => {
+			if (filter) {
+				return filter(nodeTextValue, state.inputValue, node);
+			}
+
+			return true;
+		},
+		[state.inputValue, filter],
+		subSlot(slot, 'filterFn'),
+	);
+
+	// Be sure to clear/restore the virtual + collection focus when blurring/refocusing the field so we only show the
+	// focus ring on the virtually focused collection when are actually interacting with the Autocomplete
+	// octane adaptation: `e` is the NATIVE FocusEvent (upstream: React's FocusEvent).
+	let onBlur = (e: any) => {
+		if (!e.isTrusted) {
+			return;
+		}
+
+		let lastFocusedNode = queuedActiveDescendant.current
+			? document.getElementById(queuedActiveDescendant.current)
+			: null;
+		if (lastFocusedNode) {
+			dispatchVirtualBlur(lastFocusedNode, e.relatedTarget);
+		}
+	};
+
+	let onFocus = (e: any) => {
+		if (!e.isTrusted) {
+			return;
+		}
+
+		let curFocusedNode = queuedActiveDescendant.current
+			? document.getElementById(queuedActiveDescendant.current)
+			: null;
+		if (curFocusedNode) {
+			let target = getEventTarget(e) as Element;
+			queueMicrotask(() => {
+				// instead of focusing the last focused node, just focus the collection instead and have the collection handle what item to focus via useSelectableCollection/Item
+				dispatchVirtualBlur(target, collectionRef.current);
+				dispatchVirtualFocus(collectionRef.current!, target);
+			});
+		}
+	};
+
+	// Clicking back into the input can happen after focus moved elsewhere in the dialog, while
+	// virtual focus is still on an option. Clear virtual focus on pointer down so mouse
+	// interactions restore the input state before the click's focus handling runs.
+	// Touch is excluded because touch interactions should not move focus back to the input.
+	// octane adaptation: `e` is the NATIVE PointerEvent (upstream: React's PointerEvent).
+	let onPointerDown = (e: any) => {
+		if (
+			e.button !== 0 ||
+			e.pointerType === 'touch' ||
+			queuedActiveDescendant.current == null ||
+			inputRef.current == null
+		) {
+			return;
+		}
+
+		if (getEventTarget(e) === inputRef.current) {
+			clearVirtualFocus();
+		}
+	};
+
+	// Only apply the autocomplete specific behaviors if the collection component wrapped by it is actually
+	// being filtered/allows filtering by the Autocomplete.
+	let inputProps = {
+		value: state.inputValue,
+		onChange,
+	} as AriaTextFieldProps;
+
+	let virtualFocusProps = {
+		onKeyDown,
+		'aria-activedescendant': state.focusedNodeId ?? undefined,
+		onBlur,
+		onFocus,
+		onPointerDown,
+	};
+
+	inputProps = {
+		...inputProps,
+		...(shouldUseVirtualFocus && hasCollection && virtualFocusProps),
+		enterKeyHint: 'go',
+		'aria-controls': hasCollection ? collectionId : undefined,
+		// TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
+		'aria-autocomplete': 'list',
+		// This disable's iOS's autocorrect suggestions, since the autocomplete provides its own suggestions.
+		autoCorrect: 'off',
+		// This disable's the macOS Safari spell check auto corrections.
+		spellCheck: 'false',
+		autoComplete: 'off',
+	};
+
+	return {
+		inputProps,
+		collectionProps: mergeProps(collectionProps, {
+			shouldUseVirtualFocus,
+			disallowTypeAhead: shouldUseVirtualFocus,
+			autoFocus: autoFocusOnMount ? 'first' : false,
+		}),
+		collectionRef: mergedCollectionRef,
+		filter: filter != null ? filterFn : undefined,
+	};
+}