@octanejs/aria 0.0.46 → 0.0.48

package/src/overlays/{useOverlay.ts → useOverlay.tsx}

@@ -1,20 +1,26 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/overlays/useOverlay.ts).
-// octane adaptations: `DOMAttributes` is a local structural prop-bag alias (upstream's is typed
-// over React's synthetic handlers); handlers receive NATIVE DOM events (no synthetic layer), so
-// `e.nativeEvent.isComposing` → `e.isComposing`; public-hook slot threading (splitSlot/subSlot)
-// per the binding convention; the explicit `[isOpen, ref]` dependency array is kept verbatim.
-import type { RefObject } from '@react-types/shared';
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/overlays/useOverlay.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 { RefObject } from '@react-types/shared';
+import { withSlot } from 'octane';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { isElementInChildOfActiveScope } from '../focus/FocusScope';
-import { useEffect, useRef } from 'octane';
+import { useEffect, useRef } from '../compat/react';
 import { useFocusWithin } from '../interactions/useFocusWithin';
 import { useInteractOutside } from '../interactions/useInteractOutside';
-
-import { S, splitSlot, subSlot } from '../internal';
-
-// octane adaptation: minimal structural DOMAttributes (upstream's drags React's synthetic
-// handler types along).
-type DOMAttributes = Record<string, any>;
+import { useKeyboard } from '../interactions/useKeyboard';
 
 export interface AriaOverlayProps {
 	/** Whether the overlay is currently open. */
@@ -63,18 +69,14 @@ const visibleOverlays: RefObject<Element | null>[] = [];
  * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
-export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
 export function useOverlay(
 	props: AriaOverlayProps,
 	ref: RefObject<Element | null>,
-	slot: symbol | undefined,
-): OverlayAria;
-export function useOverlay(...args: any[]): OverlayAria {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useOverlay');
-	const props = user[0] as AriaOverlayProps;
-	const ref = user[1] as RefObject<Element | null>;
+	_slot?: symbol,
+): OverlayAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useOverlay, props, ref);
+	}
 
 	let {
 		onClose,
@@ -85,27 +87,20 @@ export function useOverlay(...args: any[]): OverlayAria {
 		shouldCloseOnInteractOutside,
 	} = props;
 
-	let lastVisibleOverlay = useRef<RefObject<Element | null> | undefined>(
-		undefined,
-		subSlot(slot, 'lastVisible'),
-	);
+	let lastVisibleOverlay = useRef<RefObject<Element | null> | undefined>(undefined);
 
 	// Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
-	useEffect(
-		() => {
-			if (isOpen && !visibleOverlays.includes(ref)) {
-				visibleOverlays.push(ref);
-				return () => {
-					let index = visibleOverlays.indexOf(ref);
-					if (index >= 0) {
-						visibleOverlays.splice(index, 1);
-					}
-				};
-			}
-		},
-		[isOpen, ref],
-		subSlot(slot, 'stack'),
-	);
+	useEffect(() => {
+		if (isOpen && !visibleOverlays.includes(ref)) {
+			visibleOverlays.push(ref);
+			return () => {
+				let index = visibleOverlays.indexOf(ref);
+				if (index >= 0) {
+					visibleOverlays.splice(index, 1);
+				}
+			};
+		}
+	}, [isOpen, ref]);
 
 	// Only hide the overlay when it is the topmost visible overlay in the stack
 	let onHide = () => {
@@ -143,55 +138,53 @@ export function useOverlay(...args: any[]): OverlayAria {
 	};
 
 	// Handle the escape key
-	let onKeyDown = (e: KeyboardEvent) => {
-		if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.isComposing) {
-			e.stopPropagation();
-			e.preventDefault();
-			onHide();
-		}
-	};
-
-	// Handle clicking outside the overlay to close it
-	useInteractOutside(
-		{
-			ref,
-			onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
-			onInteractOutsideStart,
-		},
-		subSlot(slot, 'interactOutside'),
-	);
-
-	let { focusWithinProps } = useFocusWithin(
-		{
-			isDisabled: !shouldCloseOnBlur,
-			onBlurWithin: (e) => {
-				// Do not close if relatedTarget is null, which means focus is lost to the body.
-				// That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.
-				// Clicking on the body to close the overlay should already be handled by useInteractOutside.
-				// https://github.com/adobe/react-spectrum/issues/4130
-				// https://github.com/adobe/react-spectrum/issues/4922
-				//
-				// If focus is moving into a child focus scope (e.g. menu inside a dialog),
-				// do not close the outer overlay. At this point, the active scope should
-				// still be the outer overlay, since blur events run before focus.
-				if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget as Element)) {
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			Escape: () => {
+				if (!isKeyboardDismissDisabled) {
+					onHide();
 					return;
 				}
-
-				if (
-					!shouldCloseOnInteractOutside ||
-					shouldCloseOnInteractOutside(e.relatedTarget as Element)
-				) {
-					onClose?.();
-				}
+				return false;
 			},
 		},
-		subSlot(slot, 'focusWithin'),
-	);
+	});
+
+	// Handle clicking outside the overlay to close it
+	useInteractOutside({
+		ref,
+		onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined,
+		onInteractOutsideStart,
+	});
+
+	let { focusWithinProps } = useFocusWithin({
+		isDisabled: !shouldCloseOnBlur,
+		onBlurWithin: (e) => {
+			// Do not close if relatedTarget is null, which means focus is lost to the body.
+			// That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.
+			// Clicking on the body to close the overlay should already be handled by useInteractOutside.
+			// https://github.com/adobe/react-spectrum/issues/4130
+			// https://github.com/adobe/react-spectrum/issues/4922
+			//
+			// If focus is moving into a child focus scope (e.g. menu inside a dialog),
+			// do not close the outer overlay. At this point, the active scope should
+			// still be the outer overlay, since blur events run before focus.
+			if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget as Element)) {
+				return;
+			}
+
+			if (
+				!shouldCloseOnInteractOutside ||
+				shouldCloseOnInteractOutside(e.relatedTarget as Element)
+			) {
+				onClose?.();
+			}
+		},
+	});
 
 	return {
 		overlayProps: {
-			onKeyDown,
+			...keyboardProps,
 			...focusWithinProps,
 		},
 		underlayProps: {},

package/src/overlays/usePopover.ts

@@ -7,6 +7,7 @@
 import { ariaHideOutside, keepVisible } from './ariaHideOutside';
 import { AriaPositionProps, PlacementAxis, useOverlayPosition } from './useOverlayPosition';
 import type { RefObject } from '@react-types/shared';
+import { FocusWithinProps, useFocusWithin } from '../interactions/useFocusWithin';
 import { mergeProps } from '../utils/mergeProps';
 import type { OverlayTriggerState } from '../stately/overlays/useOverlayTriggerState';
 import { useEffect } from 'octane';
@@ -19,10 +20,10 @@ import { S, splitSlot, subSlot } from '../internal';
 // handler types along).
 type DOMAttributes = Record<string, any>;
 
-export interface AriaPopoverProps extends Omit<
-	AriaPositionProps,
-	'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'
-> {
+export interface AriaPopoverProps
+	extends
+		Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'>,
+		Omit<FocusWithinProps, 'isDisabled'> {
 	/**
 	 * The ref for the element which the popover positions itself with respect to.
 	 */
@@ -133,6 +134,9 @@ export function usePopover(...args: any[]): PopoverAria {
 			overlayRef: popoverRef,
 			isOpen: state.isOpen,
 			onClose: isNonModal && !isSubmenu ? state.close : null,
+			getTargetRect:
+				otherProps.getTargetRect ??
+				(state.point ? () => new DOMRect(state.point!.x, state.point!.y, 0, 0) : undefined),
 		},
 		subSlot(slot, 'position'),
 	);
@@ -160,8 +164,9 @@ export function usePopover(...args: any[]): PopoverAria {
 		subSlot(slot, 'hideOutside'),
 	);
 
+	let { focusWithinProps } = useFocusWithin(props, subSlot(slot, 'focusWithin'));
 	return {
-		popoverProps: mergeProps(overlayProps, positionProps),
+		popoverProps: mergeProps(overlayProps, positionProps, focusWithinProps),
 		arrowProps,
 		underlayProps,
 		placement,

package/src/overlays/usePreventScroll.ts

@@ -8,7 +8,7 @@ import { chain } from '../utils/chain';
 import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getNonce } from '../utils/getNonce';
 import { getScrollParent } from '../utils/getScrollParent';
-import { isIOS } from '../utils/platform';
+import { isIOS, isWebKit } from '../utils/platform';
 import { isScrollable } from '../utils/isScrollable';
 import { useLayoutEffect } from '../utils/useLayoutEffect';
 import { willOpenKeyboard } from '../utils/keyboard';
@@ -52,8 +52,8 @@ export function usePreventScroll(...args: any[]): void {
 
 			preventScrollCount++;
 			if (preventScrollCount === 1) {
-				if (isIOS()) {
-					restore = preventScrollMobileSafari();
+				if (isIOS() && isWebKit()) {
+					restore = preventScrollMobileWebKit();
 				} else {
 					restore = preventScrollStandard();
 				}
@@ -108,7 +108,7 @@ function preventScrollStandard() {
 // 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents
 //    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
 //    ourselves, without scrolling the whole page.
-function preventScrollMobileSafari() {
+function preventScrollMobileWebKit() {
 	// Set overflow hidden so scrollIntoViewport() (useSelectableCollection) sees isScrollPrevented and
 	// scrolls only scroll parents instead of calling native scrollIntoView() which moves the window.
 	let restoreOverflow = setStyle(document.documentElement, 'overflow', 'hidden');

package/src/progress/useProgressBar.ts

@@ -93,7 +93,8 @@ export function useProgressBar(...args: any[]): ProgressBarAria {
 	);
 
 	value = clamp(value, minValue, maxValue);
-	let percentage = (value - minValue) / (maxValue - minValue);
+	let range = maxValue - minValue;
+	let percentage = range === 0 ? 0 : (value - minValue) / range;
 	let formatter = useNumberFormatter(formatOptions, subSlot(slot, 'formatter'));
 
 	if (!isIndeterminate && !valueLabel) {

package/src/radio/{useRadioGroup.ts → useRadioGroup.tsx}

@@ -1,29 +1,40 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/radio/useRadioGroup.ts).
-// octane adaptations: the keyboard/focus handlers receive native events; public-hook
-// slot threading.
-import type {
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/radio/useRadioGroup.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 {
 	AriaLabelingProps,
 	AriaValidationProps,
 	DOMProps,
 	InputDOMProps,
 	ValidationResult,
 } from '@react-types/shared';
-
-// octane adaptation: structural prop bag (upstream's DOMAttributes drags React handler
-// types; the keyboard handler here is a native KeyboardEvent handler).
-type DOMAttributes = Record<string, any>;
-
-import { S, splitSlot, subSlot } from '../internal';
+import { withSlot } from 'octane';
 import { filterDOMProps } from '../utils/filterDOMProps';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getFocusableTreeWalker } from '../focus/FocusScope';
 import { getOwnerWindow } from '../utils/domHelpers';
 import { mergeProps } from '../utils/mergeProps';
 import { radioGroupData } from './utils';
-import type { RadioGroupProps, RadioGroupState } from '../stately/radio/useRadioGroupState';
+import {
+	RadioGroupProps,
+	RadioGroupState,
+} from '../upstream-exports/react-stately/useRadioGroupState';
 import { useField } from '../label/useField';
 import { useFocusWithin } from '../interactions/useFocusWithin';
 import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLocale } from '../i18n/I18nProvider';
 
 export interface AriaRadioGroupProps
@@ -40,18 +51,21 @@ export interface RadioGroupAria extends ValidationResult {
 	errorMessageProps: DOMAttributes;
 }
 
-export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+/**
+ * Provides the behavior and accessibility implementation for a radio group component.
+ * Radio groups allow users to select a single item from a list of mutually exclusive options.
+ *
+ * @param props - Props for the radio group.
+ * @param state - State for the radio group, as returned by `useRadioGroupState`.
+ */
 export function useRadioGroup(
 	props: AriaRadioGroupProps,
 	state: RadioGroupState,
-	slot: symbol | undefined,
-): RadioGroupAria;
-export function useRadioGroup(...args: any[]): RadioGroupAria {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useRadioGroup');
-	const props = user[0] as AriaRadioGroupProps;
-	const state = user[1] as RadioGroupState;
+	_slot?: symbol,
+): RadioGroupAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useRadioGroup, props, state);
+	}
 
 	let {
 		name,
@@ -62,72 +76,42 @@ export function useRadioGroup(...args: any[]): RadioGroupAria {
 		orientation = 'vertical',
 		validationBehavior = 'aria',
 	} = props;
-	let { direction } = useLocale(subSlot(slot, 'locale'));
+	let { direction } = useLocale();
 
 	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
-	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField(
-		{
-			...props,
-			// Radio group is not an HTML input element so it
-			// shouldn't be labeled by a <label> element.
-			labelElementType: 'span',
-			isInvalid: state.isInvalid,
-			errorMessage: props.errorMessage || validationErrors,
-		},
-		subSlot(slot, 'field'),
-	);
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+		...props,
+		// Radio group is not an HTML input element so it
+		// shouldn't be labeled by a <label> element.
+		labelElementType: 'span',
+		isInvalid: state.isInvalid,
+		errorMessage: props.errorMessage || validationErrors,
+	});
 
 	let domProps = filterDOMProps(props, { labelable: true });
 
 	// When the radio group loses focus, reset the focusable radio to null if
 	// there is no selection. This allows tabbing into the group from either
 	// direction to go to the first or last radio.
-	let { focusWithinProps } = useFocusWithin(
-		{
-			onBlurWithin(e: FocusEvent) {
-				(props as any).onBlur?.(e);
-				if (!state.selectedValue) {
-					state.setLastFocusedValue(null);
-				}
-			},
-			onFocusWithin: (props as any).onFocus,
-			onFocusWithinChange: (props as any).onFocusChange,
+	let { focusWithinProps } = useFocusWithin({
+		onBlurWithin(e) {
+			props.onBlur?.(e);
+			if (!state.selectedValue) {
+				state.setLastFocusedValue(null);
+			}
 		},
-		subSlot(slot, 'focusWithin'),
-	);
+		onFocusWithin: props.onFocus,
+		onFocusWithinChange: props.onFocusChange,
+	});
 
-	let onKeyDown = (e: KeyboardEvent) => {
-		let nextDir;
-		switch (e.key) {
-			case 'ArrowRight':
-				if (direction === 'rtl' && orientation !== 'vertical') {
-					nextDir = 'prev';
-				} else {
-					nextDir = 'next';
-				}
-				break;
-			case 'ArrowLeft':
-				if (direction === 'rtl' && orientation !== 'vertical') {
-					nextDir = 'next';
-				} else {
-					nextDir = 'prev';
-				}
-				break;
-			case 'ArrowDown':
-				nextDir = 'next';
-				break;
-			case 'ArrowUp':
-				nextDir = 'prev';
-				break;
-			default:
-				return;
-		}
-		e.preventDefault();
+	function getNextElement(
+		nextDir: 'next' | 'prev',
+		e: import('../interactions/createEventHandler').BaseEvent<KeyboardEvent>,
+	) {
 		let walker = getFocusableTreeWalker(e.currentTarget as Element, {
 			from: getEventTarget(e) as Element,
-			accept: (node: Element) =>
-				node instanceof getOwnerWindow(node).HTMLInputElement &&
-				(node as HTMLInputElement).type === 'radio',
+			accept: (node) =>
+				node instanceof getOwnerWindow(node).HTMLInputElement && node.type === 'radio',
 		});
 		let nextElem;
 		if (nextDir === 'next') {
@@ -148,15 +132,39 @@ export function useRadioGroup(...args: any[]): RadioGroupAria {
 			// Call focus on nextElem so that keyboard navigation scrolls the radio into view
 			(nextElem as HTMLInputElement).focus();
 			state.setSelectedValue((nextElem as HTMLInputElement).value);
+			return true;
 		}
-	};
+		return false;
+	}
+
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			ArrowRight: (e) => {
+				let nextDir: 'next' | 'prev' =
+					direction === 'rtl' && orientation !== 'vertical' ? 'prev' : 'next';
+				return getNextElement(nextDir, e);
+			},
+			ArrowLeft: (e) => {
+				let nextDir: 'next' | 'prev' =
+					direction === 'rtl' && orientation !== 'vertical' ? 'next' : 'prev';
+				return getNextElement(nextDir, e);
+			},
+			ArrowDown: (e) => {
+				return getNextElement('next', e);
+			},
+			ArrowUp: (e) => {
+				return getNextElement('prev', e);
+			},
+		},
+		allowRepeats: true,
+	});
 
-	let groupName = useId(name, subSlot(slot, 'name'));
+	let groupName = useId(name);
 	radioGroupData.set(state, {
 		name: groupName,
 		form,
-		descriptionId: (descriptionProps as any).id,
-		errorMessageId: (errorMessageProps as any).id,
+		descriptionId: descriptionProps.id,
+		errorMessageId: errorMessageProps.id,
 		validationBehavior,
 	});
 
@@ -164,7 +172,7 @@ export function useRadioGroup(...args: any[]): RadioGroupAria {
 		radioGroupProps: mergeProps(domProps, {
 			// https://www.w3.org/TR/wai-aria-1.2/#radiogroup
 			role: 'radiogroup',
-			onKeyDown,
+			...keyboardProps,
 			'aria-invalid': state.isInvalid || undefined,
 			'aria-errormessage': props['aria-errormessage'],
 			'aria-readonly': isReadOnly || undefined,

package/src/searchfield/useSearchField.tsx

@@ -0,0 +1,152 @@
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/searchfield/useSearchField.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 { AriaButtonProps } from '../button/useButton';
+import { withSlot } from 'octane';
+import { AriaTextFieldProps, useTextField } from '../textfield/useTextField';
+import { RefObject, ValidationResult } from '@react-types/shared';
+import { InputHTMLAttributes, LabelHTMLAttributes } from '../compat/react';
+import intlMessages from '../intl/searchfield/index';
+// @ts-ignore
+import { mergeProps } from '../utils/mergeProps';
+import {
+	SearchFieldProps,
+	SearchFieldState,
+} from '../upstream-exports/react-stately/useSearchFieldState';
+import { useKeyboard } from '../interactions/useKeyboard';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+
+export interface AriaSearchFieldProps extends SearchFieldProps, Omit<AriaTextFieldProps, 'type'> {
+	/**
+	 * An enumerated attribute that defines what action label or icon to preset for the enter key on
+	 * virtual keyboards. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
+	 */
+	enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+	/**
+	 * The type of input to render. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
+	 *
+	 * @default 'search'
+	 */
+	type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {});
+}
+
+export interface SearchFieldAria extends ValidationResult {
+	/** Props for the text field's visible label element (if any). */
+	labelProps: LabelHTMLAttributes<HTMLLabelElement>;
+	/** Props for the input element. */
+	inputProps: InputHTMLAttributes<HTMLInputElement>;
+	/** Props for the clear button. */
+	clearButtonProps: AriaButtonProps;
+	/** Props for the searchfield's description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the searchfield's error message element, if any. */
+	errorMessageProps: DOMAttributes;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a search field.
+ *
+ * @param props - Props for the search field.
+ * @param state - State for the search field, as returned by `useSearchFieldState`.
+ * @param inputRef - A ref to the input element.
+ */
+export function useSearchField(
+	props: AriaSearchFieldProps,
+	state: SearchFieldState,
+	inputRef: RefObject<HTMLInputElement | null>,
+	_slot?: symbol,
+): SearchFieldAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSearchField, props, state, inputRef);
+	}
+
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/searchfield');
+	let { isDisabled, isReadOnly, onSubmit, onClear, type = 'search' } = props;
+
+	let { keyboardProps } = useKeyboard({
+		isDisabled: isDisabled || isReadOnly,
+		shortcuts: {
+			Enter: () => {
+				if (onSubmit) {
+					// for backward compatibility;
+					// otherwise, "Enter" on an input would trigger a form submit, the default browser behavior
+					onSubmit(state.value);
+					return;
+				}
+				return false;
+			},
+			Escape: () => {
+				// Also check the inputRef value for the case where the value was set directly on the input element instead of going through
+				// the hook
+				if (state.value === '' && (!inputRef.current || inputRef.current.value === '')) {
+					return false;
+				}
+				state.setValue('');
+				onClear?.();
+			},
+		},
+	});
+
+	let onClearButtonClick = () => {
+		state.setValue('');
+
+		if (onClear) {
+			onClear();
+		}
+	};
+
+	let onPressStart = () => {
+		// this is in PressStart for mobile so that touching the clear button doesn't remove focus from
+		// the input and close the keyboard
+		inputRef.current?.focus();
+	};
+
+	let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = useTextField(
+		{
+			...props,
+			value: state.value,
+			onChange: state.setValue,
+			onKeyDown: props.onKeyDown,
+			onKeyUp: props.onKeyUp,
+			type,
+		},
+		inputRef,
+	);
+
+	return {
+		labelProps,
+		// An edge case, in Autocomplete, if the keyboard hanlders are not in this order, then
+		// Escape runs autocomplete/listbox first, then the search-field shortcut returns false and
+		// continues propagation, leaking Escape to a parent Dialog.
+		inputProps: mergeProps(keyboardProps, {
+			...inputProps,
+			// already handled by useSearchFieldState
+			defaultValue: undefined,
+		}),
+		clearButtonProps: {
+			'aria-label': stringFormatter.format('Clear search'),
+			excludeFromTabOrder: true,
+			preventFocusOnPress: true,
+			isDisabled: isDisabled || isReadOnly,
+			onPress: onClearButtonClick,
+			onPressStart,
+		},
+		descriptionProps,
+		errorMessageProps,
+		...validation,
+	};
+}