@octanejs/aria 0.0.1 → 0.0.4

package/src/radio/useRadio.ts

@@ -0,0 +1,219 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/radio/useRadio.ts).
+// octane adaptations:
+// - onChange→onInput DOM wiring (octane has no synthetic onChange; native `input` fires
+//   on radio selection with identical timing) — the selection handler is `onInput` and
+//   reads state off the native event.
+// - `FocusableProps` is the ported native-event version; label handlers receive native
+//   MouseEvents; ReactNode → any; per-element attribute types → structural bags.
+// - The dev-only missing-label console.warn is not ported (repo policy).
+// - Public-hook slot threading.
+import type { AriaLabelingProps, DOMProps, PressEvents, RefObject } from '@react-types/shared';
+import { useMemo } from 'octane';
+
+import type { FocusableProps } from '../interactions/useFocusable';
+import { S, splitSlot, subSlot } from '../internal';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { mergeProps } from '../utils/mergeProps';
+import { radioGroupData } from './utils';
+import type { RadioGroupState } from '../stately/radio/useRadioGroupState';
+import { useFocusable } from '../interactions/useFocusable';
+import { useFormReset } from '../utils/useFormReset';
+import { useFormValidation } from '../form/useFormValidation';
+import { usePress } from '../interactions/usePress';
+import { useSlotId2 } from '../utils/useSlot';
+
+type DOMAttributes = Record<string, any>;
+
+export interface RadioProps extends FocusableProps {
+	/**
+	 * The value of the radio button, used when submitting an HTML form.
+	 * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
+	 */
+	value: string;
+	/**
+	 * The label for the Radio. Accepts any renderable node.
+	 */
+	children?: any;
+	/**
+	 * Whether the radio button is disabled or not.
+	 * Shows that a selection exists, but is not available in that circumstance.
+	 */
+	isDisabled?: boolean;
+}
+
+export interface AriaRadioProps
+	extends RadioProps, DOMProps, AriaLabelingProps, Omit<PressEvents, 'onClick'> {
+	/** Handler called on the native click event (octane native MouseEvent). */
+	onClick?: (e: MouseEvent) => void;
+}
+
+export interface RadioAria {
+	/** Props for the label wrapper element. */
+	labelProps: DOMAttributes;
+	/** Props for the input element. */
+	inputProps: DOMAttributes;
+	/** Props for the checkbox description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Whether the radio is disabled. */
+	isDisabled: boolean;
+	/** Whether the radio is currently selected. */
+	isSelected: boolean;
+	/** Whether the radio is in a pressed state. */
+	isPressed: boolean;
+}
+
+export function useRadio(
+	props: AriaRadioProps,
+	state: RadioGroupState,
+	ref: RefObject<HTMLInputElement | null>,
+): RadioAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useRadio(
+	props: AriaRadioProps,
+	state: RadioGroupState,
+	ref: RefObject<HTMLInputElement | null>,
+	slot: symbol | undefined,
+): RadioAria;
+export function useRadio(...args: any[]): RadioAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useRadio');
+	const props = user[0] as AriaRadioProps;
+	const state = user[1] as RadioGroupState;
+	const ref = user[2] as RefObject<HTMLInputElement | null>;
+
+	let {
+		value,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		onPressStart,
+		onPressEnd,
+		onPressChange,
+		onPress,
+		onPressUp,
+		onClick,
+	} = props;
+	const isDisabled = props.isDisabled || state.isDisabled;
+
+	let checked = state.selectedValue === value;
+
+	// octane adaptation: native `input` fires on radio selection — same timing as React's
+	// synthetic onChange for radios.
+	let onInput = (e: Event) => {
+		e.stopPropagation();
+		state.setSelectedValue(value);
+	};
+
+	// Handle press state for keyboard interactions and cases where labelProps is not used.
+	let { pressProps, isPressed } = usePress(
+		{
+			onPressStart,
+			onPressEnd,
+			onPressChange,
+			onPress,
+			onPressUp,
+			onClick,
+			isDisabled,
+		},
+		subSlot(slot, 'press'),
+	);
+
+	// Handle press state on the label.
+	let { pressProps: labelProps, isPressed: isLabelPressed } = usePress(
+		{
+			onPressStart,
+			onPressEnd,
+			onPressChange,
+			onPressUp,
+			onClick,
+			isDisabled,
+			onPress(e: any) {
+				onPress?.(e);
+				state.setSelectedValue(value);
+				ref.current?.focus();
+			},
+		},
+		subSlot(slot, 'labelPress'),
+	);
+
+	let { focusableProps } = useFocusable(
+		mergeProps(props, {
+			onFocus: () => state.setLastFocusedValue(value),
+		}),
+		ref,
+		subSlot(slot, 'focusable'),
+	);
+	let interactions = mergeProps(pressProps, focusableProps);
+	let domProps = filterDOMProps(props, { labelable: true });
+	let tabIndex: number | undefined = -1;
+	if (state.selectedValue != null) {
+		if (state.selectedValue === value) {
+			tabIndex = 0;
+		}
+	} else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {
+		tabIndex = 0;
+	}
+	if (isDisabled) {
+		tabIndex = undefined;
+	}
+
+	let { name, form, descriptionId, errorMessageId, validationBehavior } =
+		radioGroupData.get(state)!;
+	useFormReset(ref, state.defaultSelectedValue, state.setSelectedValue, subSlot(slot, 'reset'));
+	useFormValidation({ validationBehavior }, state, ref, subSlot(slot, 'validation'));
+
+	let descriptionProps = useSlotId2(undefined, subSlot(slot, 'description'));
+
+	return {
+		labelProps: mergeProps(
+			labelProps,
+			useMemo(
+				() => ({
+					// octane adaptation: upstream preventDefaults ALL label clicks to stop the
+					// label's built-in click-forwarding (a doubled activation). Input-targeted
+					// clicks normally never get here — the input-level press stops their
+					// propagation — but press handlers are public props, so a consumer calling
+					// continuePropagation() lets them through. React's synthetic onChange fires
+					// regardless; with native events an unconditional preventDefault would cancel
+					// the input's own activation (no `input` event), so scope it to clicks that
+					// do NOT target the input. Same adaptation as useToggle's labelProps.
+					onClick: (e: MouseEvent) => {
+						if (getEventTarget(e) !== ref.current) {
+							e.preventDefault();
+						}
+					},
+					// Prevent label from being focused when mouse down on it.
+					// Note, this does not prevent the input from being focused in the `click` event.
+					onMouseDown: (e: MouseEvent) => e.preventDefault(),
+				}),
+				[],
+				subSlot(slot, 'labelHandlers'),
+			),
+		),
+		inputProps: mergeProps(domProps, {
+			...interactions,
+			type: 'radio',
+			name,
+			form,
+			tabIndex,
+			disabled: isDisabled,
+			required: state.isRequired && validationBehavior === 'native',
+			checked,
+			value,
+			onInput,
+			'aria-describedby':
+				[
+					props['aria-describedby'],
+					descriptionProps.id,
+					state.isInvalid ? errorMessageId : null,
+					descriptionId,
+				]
+					.filter(Boolean)
+					.join(' ') || undefined,
+		}),
+		descriptionProps,
+		isDisabled,
+		isSelected: checked,
+		isPressed: isPressed || isLabelPressed,
+	};
+}

package/src/radio/useRadioGroup.ts

@@ -0,0 +1,184 @@
+// 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 {
+	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 { 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 { useField } from '../label/useField';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useId } from '../utils/useId';
+import { useLocale } from '../i18n/I18nProvider';
+
+export interface AriaRadioGroupProps
+	extends RadioGroupProps, InputDOMProps, DOMProps, AriaLabelingProps, AriaValidationProps {}
+
+export interface RadioGroupAria extends ValidationResult {
+	/** Props for the radio group wrapper element. */
+	radioGroupProps: DOMAttributes;
+	/** Props for the radio group's visible label (if any). */
+	labelProps: DOMAttributes;
+	/** Props for the radio group description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the radio group error message element, if any. */
+	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.
+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;
+
+	let {
+		name,
+		form,
+		isReadOnly,
+		isRequired,
+		isDisabled,
+		orientation = 'vertical',
+		validationBehavior = 'aria',
+	} = props;
+	let { direction } = useLocale(subSlot(slot, 'locale'));
+
+	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 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,
+		},
+		subSlot(slot, 'focusWithin'),
+	);
+
+	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();
+		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',
+		});
+		let nextElem;
+		if (nextDir === 'next') {
+			nextElem = walker.nextNode();
+			if (!nextElem) {
+				walker.currentNode = e.currentTarget as Node;
+				nextElem = walker.firstChild();
+			}
+		} else {
+			nextElem = walker.previousNode();
+			if (!nextElem) {
+				walker.currentNode = e.currentTarget as Node;
+				nextElem = walker.lastChild();
+			}
+		}
+
+		if (nextElem) {
+			// Call focus on nextElem so that keyboard navigation scrolls the radio into view
+			(nextElem as HTMLInputElement).focus();
+			state.setSelectedValue((nextElem as HTMLInputElement).value);
+		}
+	};
+
+	let groupName = useId(name, subSlot(slot, 'name'));
+	radioGroupData.set(state, {
+		name: groupName,
+		form,
+		descriptionId: (descriptionProps as any).id,
+		errorMessageId: (errorMessageProps as any).id,
+		validationBehavior,
+	});
+
+	return {
+		radioGroupProps: mergeProps(domProps, {
+			// https://www.w3.org/TR/wai-aria-1.2/#radiogroup
+			role: 'radiogroup',
+			onKeyDown,
+			'aria-invalid': state.isInvalid || undefined,
+			'aria-errormessage': props['aria-errormessage'],
+			'aria-readonly': isReadOnly || undefined,
+			'aria-required': isRequired || undefined,
+			'aria-disabled': isDisabled || undefined,
+			'aria-orientation': orientation,
+			...fieldProps,
+			...focusWithinProps,
+		}),
+		labelProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	};
+}

package/src/radio/utils.ts

@@ -0,0 +1,15 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/radio/utils.ts).
+import type { RadioGroupState } from '../stately/radio/useRadioGroupState';
+
+interface RadioGroupData {
+	name: string;
+	form: string | undefined;
+	descriptionId: string | undefined;
+	errorMessageId: string | undefined;
+	validationBehavior: 'aria' | 'native';
+}
+
+export const radioGroupData: WeakMap<RadioGroupState, RadioGroupData> = new WeakMap<
+	RadioGroupState,
+	RadioGroupData
+>();

package/src/searchfield/useSearchField.ts

@@ -0,0 +1,156 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/searchfield/useSearchField.ts).
+// octane adaptations: the Parcel glob intl import becomes the generated
+// src/intl/searchfield index (verbatim dictionaries); per-element attribute types →
+// structural bags; the keydown handler receives the wrapped BaseEvent from the ported
+// useKeyboard (so `continuePropagation()` works); public-hook slot threading.
+import type { RefObject, ValidationResult } from '@react-types/shared';
+
+import type { AriaButtonProps } from '../button/useButton';
+import { AriaTextFieldProps, useTextField } from '../textfield/useTextField';
+import { S, splitSlot, subSlot } from '../internal';
+import { chain } from '../utils/chain';
+import intlMessages from '../intl/searchfield';
+import type {
+	SearchFieldProps,
+	SearchFieldState,
+} from '../stately/searchfield/useSearchFieldState';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+
+type DOMAttributes = Record<string, any>;
+
+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: DOMAttributes;
+	/** Props for the input element. */
+	inputProps: DOMAttributes;
+	/** 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.
+ */
+export function useSearchField(
+	props: AriaSearchFieldProps,
+	state: SearchFieldState,
+	inputRef: RefObject<HTMLInputElement | null>,
+): SearchFieldAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useSearchField(
+	props: AriaSearchFieldProps,
+	state: SearchFieldState,
+	inputRef: RefObject<HTMLInputElement | null>,
+	slot: symbol | undefined,
+): SearchFieldAria;
+export function useSearchField(...args: any[]): SearchFieldAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useSearchField');
+	const props = user[0] as AriaSearchFieldProps;
+	const state = user[1] as SearchFieldState;
+	const inputRef = user[2] as RefObject<HTMLInputElement | null>;
+
+	let stringFormatter = useLocalizedStringFormatter(
+		intlMessages,
+		'@react-aria/searchfield',
+		subSlot(slot, 'strings'),
+	);
+	let { isDisabled, isReadOnly, onSubmit, onClear, type = 'search' } = props;
+	let onKeyDown = (e: any) => {
+		const key = e.key;
+
+		if (key === 'Enter' && (isDisabled || isReadOnly)) {
+			e.preventDefault();
+		}
+
+		if (isDisabled || isReadOnly) {
+			return;
+		}
+
+		// for backward compatibility;
+		// otherwise, "Enter" on an input would trigger a form submit, the default browser behavior
+		if (key === 'Enter' && onSubmit) {
+			e.preventDefault();
+			onSubmit(state.value);
+		}
+
+		if (key === '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 === '')) {
+				e.continuePropagation();
+			} else {
+				e.preventDefault();
+				state.setValue('');
+				if (onClear) {
+					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: !isReadOnly ? chain(onKeyDown, props.onKeyDown) : props.onKeyDown,
+			type,
+		} as any,
+		inputRef,
+		subSlot(slot, 'textField'),
+	);
+
+	return {
+		labelProps,
+		inputProps: {
+			...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,
+	};
+}