@octanejs/aria 0.0.46 → 0.0.47

package/src/table/useTableColumnResize.tsx

@@ -0,0 +1,354 @@
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/table/useTableColumnResize.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 { ChangeEvent, useCallback, useEffect, useRef, useState } from '../compat/react';
+import { ColumnSize } from '../upstream-exports/react-stately/useTableState';
+import { FocusableElement, Key, RefObject } from '@react-types/shared';
+import { focusSafely } from '../interactions/focusSafely';
+import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { getColumnHeaderId } from './utils';
+import { GridNode } from '../upstream-exports/react-stately/private/grid/GridCollection';
+import intlMessages from '../intl/table/index';
+import { mergeProps } from '../utils/mergeProps';
+import { TableColumnResizeState } from '../upstream-exports/react-stately/useTableState';
+import { useDescription } from '../utils/useDescription';
+import { useEffectEvent } from '../utils/useEffectEvent';
+import { useId } from '../utils/useId';
+import { useInteractionModality } from '../interactions/useFocusVisible';
+import { useKeyboard } from '../interactions/useKeyboard';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMove } from '../interactions/useMove';
+import { usePress } from '../interactions/usePress';
+import { useVisuallyHidden } from '../visually-hidden/VisuallyHidden';
+
+export interface TableColumnResizeAria {
+	/** Props for the visually hidden input element. */
+	inputProps: DOMAttributes;
+	/** Props for the resizer element. */
+	resizerProps: DOMAttributes;
+	/** Whether this column is currently being resized. */
+	isResizing: boolean;
+	/**
+	 * Whether this column is currently being resized via a mouse drag (e.g. to render a cursor
+	 * overlay).
+	 */
+	isMouseResizing: boolean;
+}
+
+export interface AriaTableColumnResizeProps<T> {
+	/**
+	 * An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader).
+	 * Contains all the relevant information that makes up the column header.
+	 */
+	column: GridNode<T>;
+	/** Aria label for the hidden input. Gets read when resizing. */
+	'aria-label': string;
+	/**
+	 * Ref to the trigger if resizing was started from a column header menu. If it's provided, focus
+	 * will be returned there when resizing is done. If it isn't provided, it is assumed that the
+	 * resizer is visible at all time and keyboard resizing is started via pressing Enter on the
+	 * resizer and not on focus.
+	 */
+	triggerRef?: RefObject<FocusableElement | null>;
+	/** If resizing is disabled. */
+	isDisabled?: boolean;
+	/** Called when resizing starts. */
+	onResizeStart?: (widths: Map<Key, ColumnSize>) => void;
+	/** Called for every resize event that results in new column sizes. */
+	onResize?: (widths: Map<Key, ColumnSize>) => void;
+	/** Called when resizing ends. */
+	onResizeEnd?: (widths: Map<Key, ColumnSize>) => void;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a table column resizer element.
+ *
+ * @param props - Props for the resizer.
+ * @param state - State for the table's resizable columns, as returned by
+ *   `useTableColumnResizeState`.
+ * @param ref - The ref attached to the resizer's visually hidden input element.
+ */
+export function useTableColumnResize<T>(
+	props: AriaTableColumnResizeProps<T>,
+	state: TableColumnResizeState<T>,
+	ref: RefObject<HTMLInputElement | null>,
+	_slot?: symbol,
+): TableColumnResizeAria {
+	let {
+		column: item,
+		triggerRef,
+		isDisabled,
+		onResizeStart,
+		onResize,
+		onResizeEnd,
+		'aria-label': ariaLabel,
+	} = props;
+	const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');
+	let id = useId();
+	let isResizing = state.resizingColumn === item.key;
+	let isResizingRef = useRef(isResizing);
+	let lastSize = useRef<Map<Key, ColumnSize> | null>(null);
+	let wasFocusedOnResizeStart = useRef(false);
+	let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
+	// Whether a mouse drag-resize is active. Set on the first move (not on press) so a cursor
+	// overlay only mounts during an actual drag.
+	let [isMouseResizing, setMouseResizing] = useState(false);
+
+	let { direction } = useLocale();
+
+	let startResize = useCallback(
+		(item) => {
+			if (!isResizingRef.current) {
+				lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+				state.startResize(item.key);
+				state.tableState.setKeyboardNavigationDisabled(true);
+				onResizeStart?.(lastSize.current);
+			}
+			isResizingRef.current = true;
+		},
+		[state, onResizeStart],
+	);
+
+	let resize = useCallback(
+		(item, newWidth) => {
+			let sizes = state.updateResizedColumns(item.key, newWidth);
+			onResize?.(sizes);
+			lastSize.current = sizes;
+		},
+		[state, onResize],
+	);
+
+	let endResize = useCallback(
+		(item) => {
+			if (isResizingRef.current) {
+				if (lastSize.current == null) {
+					lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+				}
+
+				state.endResize();
+				state.tableState.setKeyboardNavigationDisabled(false);
+				onResizeEnd?.(lastSize.current);
+				isResizingRef.current = false;
+
+				if (triggerRef?.current && !wasFocusedOnResizeStart.current) {
+					// switch focus back to the column header unless the resizer was already focused when resizing started.
+					focusSafely(triggerRef.current);
+				}
+			}
+			lastSize.current = null;
+		},
+		[state, triggerRef, onResizeEnd],
+	);
+
+	let endResizeEvent = () => {
+		if (editModeEnabled) {
+			endResize(item);
+			return;
+		}
+		return false;
+	};
+
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			Escape: () => {
+				return endResizeEvent();
+			},
+			Enter: () => {
+				if (editModeEnabled) {
+					endResize(item);
+				} else {
+					startResize(item);
+				}
+			},
+			' ': () => {
+				return endResizeEvent();
+			},
+			Tab: () => {
+				return endResizeEvent();
+			},
+		},
+	});
+
+	const columnResizeWidthRef = useRef<number>(0);
+	const { moveProps } = useMove({
+		onMoveStart(e) {
+			columnResizeWidthRef.current = state.getColumnWidth(item.key);
+			if (e.pointerType === 'mouse') {
+				setMouseResizing(true);
+			}
+			startResize(item);
+		},
+		onMove(e) {
+			let { deltaX, deltaY, pointerType } = e;
+			if (direction === 'rtl') {
+				deltaX *= -1;
+			}
+			if (pointerType === 'keyboard') {
+				if (deltaY !== 0 && deltaX === 0) {
+					deltaX = deltaY * -1;
+				}
+				deltaX *= 10;
+			}
+			// if moving up/down only, no need to resize
+			if (deltaX !== 0) {
+				columnResizeWidthRef.current += deltaX;
+				resize(item, columnResizeWidthRef.current);
+			}
+		},
+		onMoveEnd(e) {
+			let { pointerType } = e;
+			columnResizeWidthRef.current = 0;
+			setMouseResizing(false);
+			if (pointerType === 'mouse' || (pointerType === 'touch' && wasFocusedOnResizeStart.current)) {
+				endResize(item);
+			}
+		},
+	});
+
+	let onKeyDown = useCallback(
+		(e) => {
+			if (editModeEnabled) {
+				moveProps.onKeyDown?.(e);
+			}
+		},
+		[editModeEnabled, moveProps],
+	);
+
+	let min = Math.floor(state.getColumnMinWidth(item.key));
+	let max = Math.floor(state.getColumnMaxWidth(item.key));
+	if (max === Infinity) {
+		max = Number.MAX_SAFE_INTEGER;
+	}
+	let value = Math.floor(state.getColumnWidth(item.key));
+	let modality: string | null = useInteractionModality();
+	if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) {
+		modality = 'touch';
+	}
+	let description =
+		// oxlint-disable-next-line react/react-compiler
+		triggerRef?.current == null &&
+		(modality === 'keyboard' || modality === 'virtual') &&
+		!isResizing
+			? stringFormatter.format('resizerDescription')
+			: undefined;
+	let descriptionProps = useDescription(description);
+	let ariaProps = {
+		'aria-label': ariaLabel,
+		'aria-orientation': 'horizontal' as 'horizontal',
+		'aria-labelledby': `${id} ${getColumnHeaderId(state.tableState, item.key)}`,
+		'aria-valuetext': stringFormatter.format('columnSize', { value }),
+		type: 'range',
+		min,
+		max,
+		value,
+		...descriptionProps,
+	};
+
+	const focusInput = useCallback(() => {
+		if (ref.current) {
+			focusSafely(ref.current);
+		}
+	}, [ref]);
+
+	let resizingColumn = state.resizingColumn;
+	let prevResizingColumn = useRef<Key | null>(null);
+	let startResizeEvent = useEffectEvent(startResize);
+	useEffect(() => {
+		if (
+			prevResizingColumn.current !== resizingColumn &&
+			resizingColumn != null &&
+			resizingColumn === item.key
+		) {
+			wasFocusedOnResizeStart.current = getActiveElement() === ref.current;
+			startResizeEvent(item);
+			// Delay focusing input until Android Chrome's delayed click after touchend happens: https://bugs.chromium.org/p/chromium/issues/detail?id=1150073
+			let timeout = setTimeout(() => focusInput(), 0);
+			// VoiceOver on iOS has problems focusing the input from a menu.
+			let VOTimeout = setTimeout(focusInput, 400);
+			return () => {
+				clearTimeout(timeout);
+				clearTimeout(VOTimeout);
+			};
+		}
+		prevResizingColumn.current = resizingColumn;
+	}, [resizingColumn, item, focusInput, ref]);
+
+	let onChange = (e: ChangeEvent<HTMLInputElement>) => {
+		let currentWidth = state.getColumnWidth(item.key);
+		let nextValue = parseFloat((getEventTarget(e) as HTMLInputElement).value);
+
+		if (nextValue > currentWidth) {
+			nextValue = currentWidth + 10;
+		} else {
+			nextValue = currentWidth - 10;
+		}
+		resize(item, nextValue);
+	};
+
+	let { pressProps } = usePress({
+		preventFocusOnPress: true,
+		onPressStart: (e) => {
+			if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') {
+				return;
+			}
+			if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+				endResize(item);
+				return;
+			}
+
+			// Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+			// can cancel resize mode for us.
+			focusInput();
+
+			// If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+			// to handle a virtual click to start the resizer.
+			if (e.pointerType !== 'virtual') {
+				startResize(item);
+			}
+		},
+		onPress: (e) => {
+			if (
+				((e.pointerType === 'touch' && wasFocusedOnResizeStart.current) ||
+					e.pointerType === 'mouse') &&
+				state.resizingColumn != null
+			) {
+				endResize(item);
+			}
+		},
+	});
+	let { visuallyHiddenProps } = useVisuallyHidden();
+
+	return {
+		resizerProps: mergeProps(keyboardProps, { ...moveProps, onKeyDown }, pressProps, {
+			style: { touchAction: 'none' },
+		}),
+		inputProps: mergeProps(
+			visuallyHiddenProps,
+			// oxlint-disable-next-line react/react-compiler
+			{
+				id,
+				onBlur: () => {
+					endResize(item);
+				},
+				onChange,
+				disabled: isDisabled,
+			},
+			ariaProps,
+		),
+		isResizing,
+		isMouseResizing,
+	};
+}

package/src/tag/useTag.ts

@@ -20,6 +20,7 @@ import { useFocusable } from '../interactions/useFocusable';
 import { useGridListItem } from '../gridlist/useGridListItem';
 import { useId } from '../utils/useId';
 import { useInteractionModality } from '../interactions/useFocusVisible';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
 import { useSyntheticLinkProps } from '../utils/openLink';
 
@@ -96,20 +97,26 @@ export function useTag(...args: any[]): TagAria {
 	let { descriptionProps: _, ...stateWithoutDescription } = states;
 
 	let isDisabled = state.disabledKeys.has(item.key) || item.props.isDisabled;
-	let onKeyDown = (e: KeyboardEvent) => {
-		if (e.key === 'Delete' || e.key === 'Backspace') {
-			if (isDisabled) {
-				return;
-			}
-
-			e.preventDefault();
-			if (state.selectionManager.isSelected(item.key)) {
-				onRemove?.(new Set(state.selectionManager.selectedKeys));
-			} else {
-				onRemove?.(new Set([item.key]));
-			}
-		}
-	};
+	let { keyboardProps } = useKeyboard({
+		isDisabled,
+		shortcuts: {
+			Delete: () => {
+				if (state.selectionManager.isSelected(item.key)) {
+					onRemove?.(new Set(state.selectionManager.selectedKeys));
+				} else {
+					onRemove?.(new Set([item.key]));
+				}
+			},
+			Backspace: () => {
+				if (state.selectionManager.isSelected(item.key)) {
+					onRemove?.(new Set(state.selectionManager.selectedKeys));
+				} else {
+					onRemove?.(new Set([item.key]));
+				}
+			},
+		},
+		allowRepeats: true,
+	});
 
 	let modality = useInteractionModality(subSlot(slot, 'modality'));
 	if (modality === 'virtual' && typeof window !== 'undefined' && 'ontouchstart' in window) {
@@ -149,7 +156,7 @@ export function useTag(...args: any[]): TagAria {
 		},
 		rowProps: mergeProps(focusableProps, rowProps, domProps, linkProps, {
 			tabIndex,
-			onKeyDown: onRemove ? onKeyDown : undefined,
+			...(onRemove ? keyboardProps : {}),
 			'aria-describedby': descProps['aria-describedby'],
 		}),
 		gridCellProps: mergeProps(gridCellProps, {

package/src/textfield/useTextField.ts

@@ -1,3 +1,5 @@
+// OCTANE DIVERGENCE[native-input-event-wiring][differential:aria-leaf-textfield]
+// Native text edits use onInput; public value callbacks retain upstream names.
 // Ported from react-aria (source: .react-spectrum/packages/react-aria/src/textfield/useTextField.ts).
 // octane adaptations:
 // - onChange→onInput DOM wiring: the per-keystroke state update rides octane's native

package/src/tokenfield/useToken.tsx

@@ -0,0 +1,64 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/tokenfield/useToken.ts).
+/*
+ * Copyright 2026 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
+ */
+
+import { HTMLAttributes, RefObject, useRef, useState } from '../compat/react';
+import { useEvent } from '../utils/useEvent';
+
+export interface TokenProps {}
+
+export interface TokenAria {
+	/** Props for the token element. */
+	tokenProps: HTMLAttributes<HTMLSpanElement>;
+	/** Whether the token is currently selected. */
+	isSelected: boolean;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a token within a token field.
+ * A token field allows users to enter text with inline tokens.
+ */
+export function useToken(
+	// Unused but matches the normal signature.
+	_props: TokenProps,
+	_state: any,
+	ref: RefObject<HTMLSpanElement | null>,
+): TokenAria {
+	let [isSelected, setSelected] = useState(false);
+
+	useEvent(useRef(typeof document !== 'undefined' ? document : null), 'selectionchange', () => {
+		let selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0 || !ref.current) {
+			return;
+		}
+
+		let range = selection.getRangeAt(0);
+		if (!range.collapsed && range.intersectsNode(ref.current)) {
+			setSelected(true);
+		} else {
+			setSelected(false);
+		}
+	});
+
+	return {
+		tokenProps: {
+			contentEditable: false,
+			suppressContentEditableWarning: true,
+			style: {
+				userSelect: 'all',
+				WebkitUserSelect: 'all',
+			},
+		},
+		isSelected,
+	};
+}