@octanejs/aria 0.0.46 → 0.0.48

package/src/combobox/{useComboBox.ts → useComboBox.tsx}

@@ -1,18 +1,22 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/combobox/useComboBox.ts).
-// octane adaptations:
-// - The combobox text input is a TEXT input: upstream feeds the input value via a synthetic
-//   `onChange` passed to useTextField. octane's useTextField already wires that `onChange`
-//   onto the NATIVE `input` event (see textfield/useTextField.ts). So this port keeps
-//   `onChange: state.setInputValue` VERBATIM — the onChange→onInput DOM wiring lives in
-//   useTextField, and the value-level `onInputChange(value)` public callback is unchanged.
-// - onKeyDown receives the ported BaseEvent Proxy (from useKeyboard/createEventHandler via
-//   useTextField's useFocusable). `.nativeEvent.isComposing` → `e.isComposing` (the Proxy
-//   forwards the read to the live native event); `continuePropagation`/`preventDefault` work
-//   through the Proxy. FocusEvent/TouchEvent become native DOM events; element types → `any`.
-// - The Parcel glob intl import becomes the generated '../intl/combobox' dictionary index.
-// - Public-hook slot threading (splitSlot/subSlot) per the binding convention; the module-local
-//   `useValueId` helper takes a threaded slot; dep-less upstream useEffects become explicit `null`.
-import type {
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/combobox/useComboBox.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { announce } from '../live-announcer/LiveAnnouncer';
+import { AriaButtonProps } from '../button/useButton';
+import { ariaHideOutside } from '../overlays/ariaHideOutside';
+import {
 	AriaLabelingProps,
 	DOMProps,
 	InputDOMProps,
@@ -23,32 +27,39 @@ import type {
 	RouterOptions,
 	ValidationResult,
 } from '@react-types/shared';
-import { useEffect, useMemo, useRef, useState } from 'octane';
-
-import { announce } from '../live-announcer/LiveAnnouncer';
-import type { AriaButtonProps } from '../button/useButton';
-import { ariaHideOutside } from '../overlays/ariaHideOutside';
-import type { AriaListBoxOptions } from '../listbox/useListBox';
+import { AriaListBoxOptions } from '../listbox/useListBox';
 import { chain } from '../utils/chain';
 import {
-	type ComboBoxState,
-	type SelectionMode,
-	type ComboBoxProps,
-} from '../stately/combobox/useComboBoxState';
+	ComboBoxProps,
+	ComboBoxState,
+	SelectionMode,
+} from '../upstream-exports/react-stately/useComboBoxState';
 import { dispatchVirtualFocus } from '../focus/virtualFocus';
+import {
+	ElementType,
+	InputHTMLAttributes,
+	TouchEvent,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '../compat/react';
 import { getActiveElement, getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
-import { getChildNodes } from '../stately/collections/getChildNodes';
-import { getItemCount } from '../stately/collections/getItemCount';
+import { getChildNodes } from '../upstream-exports/react-stately/private/collections/getChildNodes';
+import { getItemCount } from '../upstream-exports/react-stately/private/collections/getItemCount';
+import { withSlot } from 'octane';
 import { getItemId, listData } from '../listbox/utils';
 import { getOwnerDocument } from '../utils/domHelpers';
-import intlMessages from '../intl/combobox';
+import intlMessages from '../intl/combobox/index';
 import { isAppleDevice } from '../utils/platform';
 import { ListKeyboardDelegate } from '../selection/ListKeyboardDelegate';
 import { mergeProps } from '../utils/mergeProps';
-import { privateValidationStateProp } from '../stately/form/useFormValidationState';
+import { privateValidationStateProp } from '../upstream-exports/react-stately/private/form/useFormValidationState';
+import { setInteractionModality } from '../interactions/useFocusVisible';
 import { useEvent } from '../utils/useEvent';
 import { useFormReset } from '../utils/useFormReset';
 import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLabels } from '../utils/useLabels';
 import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
 import { useMenuTrigger } from '../menu/useMenuTrigger';
@@ -57,12 +68,6 @@ import { useSelectableCollection } from '../selection/useSelectableCollection';
 import { useTextField } from '../textfield/useTextField';
 import { useUpdateEffect } from '../utils/useUpdateEffect';
 
-import { S, splitSlot, subSlot } from '../internal';
-
-// octane adaptation: element/DOM attribute types collapse to structural bags (upstream's
-// versions are typed over React's SyntheticEvent / JSX intrinsic-element machinery).
-type DOMAttributes = Record<string, any>;
-
 export interface AriaComboBoxProps<T, M extends SelectionMode = 'single'>
 	extends ComboBoxProps<T, M>, DOMProps, InputDOMProps, AriaLabelingProps {
 	/** Whether keyboard navigation is circular. */
@@ -81,6 +86,12 @@ export interface AriaComboBoxOptions<T, M extends SelectionMode = 'single'> exte
 	listBoxRef: RefObject<HTMLElement | null>;
 	/** The ref for the optional list box popup trigger button. */
 	buttonRef?: RefObject<Element | null>;
+	/**
+	 * The HTML element used to render the label, e.g. 'label', or 'span'.
+	 *
+	 * @default 'label'
+	 */
+	labelElementType?: ElementType;
 	/** An optional keyboard delegate implementation, to override the default. */
 	keyboardDelegate?: KeyboardDelegate;
 	/**
@@ -95,7 +106,7 @@ export interface ComboBoxAria<T> extends ValidationResult {
 	/** Props for the label element. */
 	labelProps: DOMAttributes;
 	/** Props for the combo box input element. */
-	inputProps: DOMAttributes;
+	inputProps: InputHTMLAttributes<HTMLInputElement>;
 	/** Props for the list box, to be passed to `useListBox`. */
 	listBoxProps: AriaListBoxOptions<T>;
 	/** Props for the optional trigger button, to be passed to `useButton`. */
@@ -119,18 +130,11 @@ export interface ComboBoxAria<T> extends ValidationResult {
 export function useComboBox<T, M extends SelectionMode = 'single'>(
 	props: AriaComboBoxOptions<T, M>,
 	state: ComboBoxState<T, M>,
-): ComboBoxAria<T>;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
-export function useComboBox<T, M extends SelectionMode = 'single'>(
-	props: AriaComboBoxOptions<T, M>,
-	state: ComboBoxState<T, M>,
-	slot: symbol | undefined,
-): ComboBoxAria<T>;
-export function useComboBox(...args: any[]): ComboBoxAria<any> {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useComboBox');
-	const props = user[0] as AriaComboBoxOptions<any, any>;
-	const state = user[1] as ComboBoxState<any, any>;
+	_slot?: symbol,
+): ComboBoxAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useComboBox<T, M>, props, state);
+	}
 
 	let {
 		buttonRef,
@@ -144,22 +148,17 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 		isReadOnly,
 		isDisabled,
 	} = props;
-	let backupBtnRef = useRef(null, subSlot(slot, 'backupBtn'));
+	let backupBtnRef = useRef(null);
 	buttonRef = buttonRef ?? backupBtnRef;
 
-	let stringFormatter = useLocalizedStringFormatter(
-		intlMessages,
-		'@react-aria/combobox',
-		subSlot(slot, 'formatter'),
-	);
-	let { menuTriggerProps, menuProps } = useMenuTrigger<any>(
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');
+	let { menuTriggerProps, menuProps } = useMenuTrigger<T>(
 		{
 			type: 'listbox',
 			isDisabled: isDisabled || isReadOnly,
 		},
 		state,
 		buttonRef,
-		subSlot(slot, 'menuTrigger'),
 	);
 
 	// Set listbox id so it can be used when calling getItemId later
@@ -179,41 +178,28 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 				layoutDelegate,
 			}),
 		[keyboardDelegate, layoutDelegate, collection, disabledKeys, listBoxRef],
-		subSlot(slot, 'delegate'),
 	);
 
 	// Use useSelectableCollection to get the keyboard handlers to apply to the textfield
-	let { collectionProps } = useSelectableCollection(
-		{
-			selectionManager: state.selectionManager,
-			keyboardDelegate: delegate,
-			disallowTypeAhead: true,
-			disallowEmptySelection: true,
-			shouldFocusWrap,
-			ref: inputRef,
-			// Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
-			isVirtualized: true,
-		},
-		subSlot(slot, 'selectable'),
-	);
+	let { collectionProps } = useSelectableCollection({
+		selectionManager: state.selectionManager,
+		keyboardDelegate: delegate,
+		disallowTypeAhead: true,
+		disallowEmptySelection: true,
+		shouldFocusWrap,
+		ref: inputRef,
+		// Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
+		isVirtualized: true,
+	});
 
 	let router = useRouter();
 
-	// For textfield specific keydown operations
-	let onKeyDown = (e: any) => {
-		// octane adaptation: `.nativeEvent.isComposing` → `e.isComposing` (the BaseEvent Proxy
-		// forwards the read to the live native event).
-		if (e.isComposing) {
-			return;
-		}
-		switch (e.key) {
-			case 'Enter':
-			case 'Tab':
-				// Prevent form submission if menu is open since we may be selecting a option
-				if (state.isOpen && e.key === 'Enter') {
-					e.preventDefault();
-				}
-
+	// for textfield specific operations
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			Enter: (e) => {
+				// Prevent default form submission if menu is open since we may be selecting a option
+				let shouldPreventDefault = state.isOpen;
 				// If the focused item is a link, trigger opening it. Items that are links are not selectable.
 				if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null) {
 					let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
@@ -221,7 +207,7 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 						let item = listBoxRef.current.querySelector(
 							`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`,
 						);
-						if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
+						if (item instanceof HTMLAnchorElement) {
 							router.open(
 								item,
 								e,
@@ -230,43 +216,70 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 							);
 						}
 						state.close();
-						break;
+						return { shouldPreventDefault };
 					} else if (collectionItem?.props.onAction) {
 						collectionItem.props.onAction();
 						state.close();
-						break;
+						return { shouldPreventDefault };
 					}
 				}
-				if (e.key === 'Enter' || state.isOpen) {
-					state.commit();
+				state.commit();
+				return { shouldPreventDefault };
+			},
+			Tab: () => {
+				// If the focused item is a link, trigger opening it. Items that are links are not selectable.
+				if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null) {
+					let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+					if (collectionItem?.props.href) {
+						state.close();
+						return { shouldPreventDefault: false };
+					} else if (collectionItem?.props.onAction) {
+						collectionItem.props.onAction();
+						state.close();
+						return { shouldPreventDefault: false, shouldContinuePropagation: true };
+					}
 				}
-				if (e.key === 'Tab') {
-					e.continuePropagation();
+				if (state.isOpen) {
+					state.commit();
 				}
-
-				break;
-			case 'Escape':
+				return { shouldPreventDefault: false, shouldContinuePropagation: true };
+			},
+			Escape: () => {
+				let shouldContinuePropagation = false;
 				if (!state.selectionManager.isEmpty || state.inputValue === '' || props.allowsCustomValue) {
-					e.continuePropagation();
+					shouldContinuePropagation = true;
 				}
 				state.revert();
-				break;
-			case 'ArrowDown':
+				return { shouldContinuePropagation };
+			},
+		},
+	});
+
+	let { keyboardProps: repeatKeyboardProps } = useKeyboard({
+		shortcuts: {
+			ArrowDown: () => {
 				state.open('first', 'manual');
-				break;
-			case 'ArrowUp':
+				return { shouldPreventDefault: false };
+			},
+			ArrowUp: () => {
 				state.open('last', 'manual');
-				break;
-			case 'ArrowLeft':
-			case 'ArrowRight':
+				return { shouldPreventDefault: false };
+			},
+			ArrowLeft: () => {
 				state.selectionManager.setFocusedKey(null);
-				break;
-		}
-	};
+				return { shouldPreventDefault: false };
+			},
+			ArrowRight: () => {
+				state.selectionManager.setFocusedKey(null);
+				return { shouldPreventDefault: false };
+			},
+		},
+		allowRepeats: true,
+	});
 
-	let onBlur = (e: any) => {
+	let onBlur = (e: FocusEvent) => {
 		let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;
-		let blurIntoPopover = nodeContains(popoverRef.current, e.relatedTarget);
+		let blurIntoPopover = nodeContains(popoverRef.current, e.relatedTarget as Node | null);
 		// Ignore blur if focused moved to the button(if exists) or into the popover.
 		if (blurFromButton || blurIntoPopover) {
 			return;
@@ -279,7 +292,7 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 		state.setFocused(false);
 	};
 
-	let onFocus = (e: any) => {
+	let onFocus = (e: FocusEvent) => {
 		if (state.isFocused) {
 			return;
 		}
@@ -291,10 +304,10 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 		state.setFocused(true);
 	};
 
-	let valueId = useValueId(
-		[state.selectionManager.selectedKeys, state.selectionManager.selectionMode],
-		subSlot(slot, 'valueId'),
-	);
+	let valueId = useValueId([
+		state.selectionManager.selectedKeys,
+		state.selectionManager.selectionMode,
+	]);
 	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
 	let { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
 		{
@@ -306,7 +319,13 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 					: props.isRequired,
 			onChange: state.setInputValue,
 			onKeyDown: !isReadOnly
-				? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown)
+				? // oxlint-disable-next-line react/react-compiler
+					chain(
+						state.isOpen && collectionProps.onKeyDown,
+						keyboardProps.onKeyDown,
+						repeatKeyboardProps.onKeyDown,
+						props.onKeyDown,
+					)
 				: props.onKeyDown,
 			onBlur,
 			value: state.inputValue,
@@ -319,10 +338,9 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 				[valueId, props['aria-describedby']].filter(Boolean).join(' ') || undefined,
 		},
 		inputRef,
-		subSlot(slot, 'textField'),
 	);
 
-	useFormReset(inputRef, state.defaultValue, state.setValue, subSlot(slot, 'formReset'));
+	useFormReset(inputRef, state.defaultValue, state.setValue);
 
 	// Press handlers for the ComboBox button
 	let onPress = (e: PressEvent) => {
@@ -343,29 +361,21 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 		}
 	};
 
-	let triggerLabelProps = useLabels(
-		{
-			id: menuTriggerProps.id,
-			'aria-label': stringFormatter.format('buttonLabel'),
-			'aria-labelledby': props['aria-labelledby'] || labelProps.id,
-		},
-		undefined,
-		subSlot(slot, 'triggerLabels'),
-	);
+	let triggerLabelProps = useLabels({
+		id: menuTriggerProps.id,
+		'aria-label': stringFormatter.format('buttonLabel'),
+		'aria-labelledby': props['aria-labelledby'] || labelProps.id,
+	});
 
-	let listBoxProps = useLabels(
-		{
-			id: menuProps.id,
-			'aria-label': stringFormatter.format('listboxLabel'),
-			'aria-labelledby': props['aria-labelledby'] || labelProps.id,
-		},
-		undefined,
-		subSlot(slot, 'listBoxLabels'),
-	);
+	let listBoxProps = useLabels({
+		id: menuProps.id,
+		'aria-label': stringFormatter.format('listboxLabel'),
+		'aria-labelledby': props['aria-labelledby'] || labelProps.id,
+	});
 
 	// If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
-	let lastEventTime = useRef(0, subSlot(slot, 'lastEventTime'));
-	let onTouchEnd = (e: any) => {
+	let lastEventTime = useRef(0);
+	let onTouchEnd = (e: TouchEvent) => {
 		if (isDisabled || isReadOnly) {
 			return;
 		}
@@ -401,117 +411,89 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 			: undefined;
 	let sectionKey = focusedItem?.parentKey ?? null;
 	let itemKey = state.selectionManager.focusedKey ?? null;
-	let lastSection = useRef(sectionKey, subSlot(slot, 'lastSection'));
-	let lastItem = useRef(itemKey, subSlot(slot, 'lastItem'));
-	// intentional omit dependency array, want this to happen on every render
-	useEffect(
-		() => {
-			if (
-				isAppleDevice() &&
-				focusedItem != null &&
-				itemKey != null &&
-				itemKey !== lastItem.current
-			) {
-				let isSelected = state.selectionManager.isSelected(itemKey);
-				let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
-				let sectionTitle =
-					section?.['aria-label'] ||
-					(typeof section?.rendered === 'string' ? section.rendered : '') ||
-					'';
-
-				let announcement = stringFormatter.format('focusAnnouncement', {
-					isGroupChange: (section && sectionKey !== lastSection.current) ?? false,
-					groupTitle: sectionTitle,
-					groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,
-					optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
-					isSelected,
-				});
-
-				announce(announcement);
-			}
-
-			lastSection.current = sectionKey;
-			lastItem.current = itemKey;
-		},
-		null,
-		subSlot(slot, 'announceFocus'),
-	);
+	let lastSection = useRef<typeof sectionKey>(sectionKey);
+	let lastItem = useRef<typeof itemKey>(itemKey);
+	useEffect(() => {
+		if (isAppleDevice() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
+			let isSelected = state.selectionManager.isSelected(itemKey);
+			let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
+			let sectionTitle =
+				section?.['aria-label'] ||
+				(typeof section?.rendered === 'string' ? section.rendered : '') ||
+				'';
+
+			let announcement = stringFormatter.format('focusAnnouncement', {
+				isGroupChange: (section && sectionKey !== lastSection.current) ?? false,
+				groupTitle: sectionTitle,
+				groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,
+				optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
+				isSelected,
+			});
+
+			announce(announcement);
+		}
+
+		lastSection.current = sectionKey;
+		lastItem.current = itemKey;
+	});
 
 	// Announce the number of available suggestions when it changes
 	let optionCount = getItemCount(state.collection);
-	let lastSize = useRef(optionCount, subSlot(slot, 'lastSize'));
-	let lastOpen = useRef(state.isOpen, subSlot(slot, 'lastOpen'));
-	// intentional omit dependency array, want this to happen on every render
-	useEffect(
-		() => {
-			// Only announce the number of options available when the menu opens if there is no
-			// focused item, otherwise screen readers will typically read e.g. "1 of 6".
-			// The exception is VoiceOver since this isn't included in the message above.
-			let didOpenWithoutFocusedItem =
-				state.isOpen !== lastOpen.current &&
-				(state.selectionManager.focusedKey == null || isAppleDevice());
-
-			if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
-				let announcement = stringFormatter.format('countAnnouncement', { optionCount });
-				announce(announcement);
-			}
-
-			lastSize.current = optionCount;
-			lastOpen.current = state.isOpen;
-		},
-		null,
-		subSlot(slot, 'announceCount'),
-	);
+	let lastSize = useRef(optionCount);
+	let lastOpen = useRef(state.isOpen);
+	useEffect(() => {
+		// Only announce the number of options available when the menu opens if there is no
+		// focused item, otherwise screen readers will typically read e.g. "1 of 6".
+		// The exception is VoiceOver since this isn't included in the message above.
+		let didOpenWithoutFocusedItem =
+			state.isOpen !== lastOpen.current &&
+			(state.selectionManager.focusedKey == null || isAppleDevice());
+
+		if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
+			let announcement = stringFormatter.format('countAnnouncement', { optionCount });
+			announce(announcement);
+		}
+
+		lastSize.current = optionCount;
+		lastOpen.current = state.isOpen;
+	});
 
 	// Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.
 	// TODO: do we need to do this for multi-select?
-	let lastSelectedKey = useRef(state.selectedKey, subSlot(slot, 'lastSelectedKey'));
-	// intentional omit dependency array, want this to happen on every render
-	useEffect(
-		() => {
-			if (
-				isAppleDevice() &&
-				state.isFocused &&
-				state.selectedItem &&
-				state.selectedKey !== lastSelectedKey.current
-			) {
-				let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
-				let announcement = stringFormatter.format('selectedAnnouncement', { optionText });
-				announce(announcement);
-			}
-
-			lastSelectedKey.current = state.selectedKey;
-		},
-		null,
-		subSlot(slot, 'announceSelected'),
-	);
+	let lastSelectedKey = useRef<typeof state.selectedKey>(state.selectedKey);
+	useEffect(() => {
+		if (
+			isAppleDevice() &&
+			state.isFocused &&
+			state.selectedItem &&
+			state.selectedKey !== lastSelectedKey.current
+		) {
+			let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
+			let announcement = stringFormatter.format('selectedAnnouncement', { optionText });
+			announce(announcement);
+		}
 
-	useEffect(
-		() => {
-			if (state.isOpen) {
-				return ariaHideOutside(
-					[inputRef.current, popoverRef.current].filter((element) => element != null),
-				);
-			}
-		},
-		[state.isOpen, inputRef, popoverRef],
-		subSlot(slot, 'hideOutside'),
-	);
+		lastSelectedKey.current = state.selectedKey;
+	});
 
-	useUpdateEffect(
-		() => {
-			// Re-show focus ring when there is no virtually focused item.
-			if (
-				!focusedItem &&
-				inputRef.current &&
-				getActiveElement(getOwnerDocument(inputRef.current)) === inputRef.current
-			) {
-				dispatchVirtualFocus(inputRef.current, null);
-			}
-		},
-		[focusedItem],
-		subSlot(slot, 'virtualFocus'),
-	);
+	useEffect(() => {
+		if (state.isOpen) {
+			return ariaHideOutside(
+				[inputRef.current, popoverRef.current].filter((element) => element != null),
+			);
+		}
+	}, [state.isOpen, inputRef, popoverRef]);
+
+	useUpdateEffect(() => {
+		// Re-show focus ring when there is no virtually focused item.
+		if (
+			!focusedItem &&
+			inputRef.current &&
+			getActiveElement(getOwnerDocument(inputRef.current)) === inputRef.current
+		) {
+			dispatchVirtualFocus(inputRef.current, null);
+		}
+	}, [focusedItem]);
 
 	useEvent(
 		listBoxRef,
@@ -521,11 +503,20 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 					state.close();
 				}
 			: undefined,
-		subSlot(slot, 'itemAction'),
 	);
 
 	return {
-		labelProps,
+		labelProps: {
+			...labelProps,
+			// Focus the input in case the label is not a native <label> element.
+			onClick:
+				('htmlFor' in labelProps && labelProps.htmlFor) || props.isDisabled
+					? undefined
+					: () => {
+							inputRef.current?.focus();
+							setInteractionModality('keyboard');
+						},
+		},
 		buttonProps: {
 			...menuTriggerProps,
 			...triggerLabelProps,
@@ -535,6 +526,7 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 			onPressStart,
 			isDisabled: isDisabled || isReadOnly,
 		},
+		// oxlint-disable-next-line react/react-compiler
 		inputProps: mergeProps(inputProps, {
 			role: 'combobox',
 			'aria-expanded': menuTriggerProps['aria-expanded'],
@@ -573,14 +565,10 @@ export function useComboBox(...args: any[]): ComboBoxAria<any> {
 // These re-renders preempt async state updates in the useEffect, which ends up running multiple times
 // prior to the state being updated. This results in onSelectionChange being called multiple times.
 // TODO: refactor useComboBoxState to avoid this.
-// octane adaptation: takes a threaded slot (the module is not octane-compiled).
-function useValueId(
-	depArray: ReadonlyArray<any> = [],
-	slot?: symbol | undefined,
-): string | undefined {
-	let id = useId(subSlot(slot, 'id'));
-	let [exists, setExists] = useState(true, subSlot(slot, 'exists'));
-	let [lastDeps, setLastDeps] = useState(depArray, subSlot(slot, 'lastDeps'));
+function useValueId(depArray: ReadonlyArray<any> = []): string | undefined {
+	let id = useId();
+	let [exists, setExists] = useState(true);
+	let [lastDeps, setLastDeps] = useState(depArray);
 
 	// If the deps changed, set exists to true so we can test whether the element exists.
 	if (lastDeps.some((v, i) => !Object.is(v, depArray[i]))) {
@@ -588,15 +576,12 @@ function useValueId(
 		setLastDeps(depArray);
 	}
 
-	useEffect(
-		() => {
-			if (exists && !document.getElementById(id)) {
-				setExists(false);
-			}
-		},
-		[id, exists, lastDeps],
-		subSlot(slot, 'existsEffect'),
-	);
+	useEffect(() => {
+		if (exists && !document.getElementById(id)) {
+			// oxlint-disable-next-line react/react-compiler
+			setExists(false);
+		}
+	}, [id, exists, lastDeps]);
 
 	return exists ? id : undefined;
 }