@octanejs/aria 0.0.46 → 0.0.47

package/src/spinbutton/useSpinButton.tsx

@@ -0,0 +1,330 @@
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/spinbutton/useSpinButton.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, clearAnnouncer } from '../live-announcer/LiveAnnouncer';
+
+import { AriaButtonProps } from '../button/useButton';
+import { InputBase, RangeInputBase, Validation, ValueBase } from '@react-types/shared';
+import intlMessages from '../intl/spinbutton/index';
+import { useCallback, useEffect, useRef, useState } from '../compat/react';
+import { useEffectEvent } from '../utils/useEffectEvent';
+import { useGlobalListeners } from '../utils/useGlobalListeners';
+import { useKeyboard } from '../interactions/useKeyboard';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+
+const noop = () => {};
+
+export interface SpinButtonProps
+	extends InputBase, Validation<number>, ValueBase<number>, RangeInputBase<number> {
+	textValue?: string;
+	onIncrement?: () => void;
+	onIncrementPage?: () => void;
+	onDecrement?: () => void;
+	onDecrementPage?: () => void;
+	onDecrementToMin?: () => void;
+	onIncrementToMax?: () => void;
+}
+
+export interface SpinbuttonAria {
+	spinButtonProps: DOMAttributes;
+	incrementButtonProps: AriaButtonProps;
+	decrementButtonProps: AriaButtonProps;
+}
+
+export function useSpinButton(props: SpinButtonProps, _slot?: symbol): SpinbuttonAria {
+	const _async = useRef<number | undefined>(undefined);
+	let {
+		value,
+		textValue,
+		minValue,
+		maxValue,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		onIncrement,
+		onIncrementPage,
+		onDecrement,
+		onDecrementPage,
+		onDecrementToMin,
+		onIncrementToMax,
+	} = props;
+	const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/spinbutton');
+
+	let isSpinning = useRef(false);
+	const clearAsync = useCallback(() => {
+		clearTimeout(_async.current);
+		isSpinning.current = false;
+	}, []);
+	const clearAsyncEvent = useEffectEvent(() => {
+		clearAsync();
+	});
+
+	useEffect(() => {
+		return () => clearAsyncEvent();
+	}, []);
+
+	let { keyboardProps } = useKeyboard({
+		isDisabled: isDisabled || isReadOnly,
+		shortcuts: {
+			PageUp: () => {
+				if (onIncrementPage) {
+					onIncrementPage();
+					return;
+				}
+				if (onIncrement) {
+					onIncrement();
+					return;
+				}
+				return false;
+			},
+			ArrowUp: () => {
+				if (onIncrement) {
+					onIncrement();
+					return;
+				}
+				return false;
+			},
+			PageDown: () => {
+				if (onDecrementPage) {
+					onDecrementPage();
+					return;
+				}
+				if (onDecrement) {
+					onDecrement();
+					return;
+				}
+				return false;
+			},
+			ArrowDown: () => {
+				if (onDecrement) {
+					onDecrement();
+					return;
+				}
+				return false;
+			},
+			Home: () => {
+				if (onDecrementToMin) {
+					onDecrementToMin();
+					return;
+				}
+				return false;
+			},
+			End: () => {
+				if (onIncrementToMax) {
+					onIncrementToMax();
+					return;
+				}
+				return false;
+			},
+		},
+		allowRepeats: true,
+	});
+
+	let isFocused = useRef(false);
+	let onFocus = () => {
+		isFocused.current = true;
+	};
+
+	let onBlur = () => {
+		isFocused.current = false;
+	};
+
+	// Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212).
+	// This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
+	// and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
+	// In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
+	let ariaTextValue =
+		textValue === ''
+			? stringFormatter.format('Empty')
+			: (textValue || `${value}`).replace('-', '\u2212');
+
+	useEffect(() => {
+		if (isFocused.current) {
+			clearAnnouncer('assertive');
+			announce(ariaTextValue, 'assertive');
+		}
+	}, [ariaTextValue]);
+
+	// For touch users, if they move their finger like they're scrolling, we don't want to trigger a spin.
+	let onPointerCancel = useCallback(() => {
+		clearAsync();
+	}, [clearAsync]);
+
+	const onIncrementEvent = useEffectEvent(onIncrement ?? noop);
+	const onDecrementEvent = useEffectEvent(onDecrement ?? noop);
+
+	const stepUpEvent = useEffectEvent(() => {
+		if (
+			maxValue === undefined ||
+			isNaN(maxValue) ||
+			value === undefined ||
+			isNaN(value) ||
+			value < maxValue
+		) {
+			onIncrementEvent();
+			// oxlint-disable-next-line react/react-compiler
+			onIncrementPressStartEvent(60);
+		}
+	});
+
+	const onIncrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
+		clearAsyncEvent();
+		isSpinning.current = true;
+		// Start spinning after initial delay
+		_async.current = window.setTimeout(stepUpEvent, initialStepDelay);
+	});
+
+	const stepDownEvent = useEffectEvent(() => {
+		if (
+			minValue === undefined ||
+			isNaN(minValue) ||
+			value === undefined ||
+			isNaN(value) ||
+			value > minValue
+		) {
+			onDecrementEvent();
+			// oxlint-disable-next-line react/react-compiler
+			onDecrementPressStartEvent(60);
+		}
+	});
+
+	const onDecrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
+		clearAsyncEvent();
+		isSpinning.current = true;
+		// Start spinning after initial delay
+		_async.current = window.setTimeout(stepDownEvent, initialStepDelay);
+	});
+
+	let cancelContextMenu = (e: MouseEvent) => {
+		e.preventDefault();
+	};
+
+	let { addGlobalListener, removeAllGlobalListeners } = useGlobalListeners();
+
+	// Tracks in touch if the press end event was preceded by a press up.
+	// If it wasn't, then we know the finger left the button while still in contact with the screen.
+	// This means that the user is trying to scroll or interact in some way that shouldn't trigger
+	// an increment or decrement.
+	let isUp = useRef(false);
+
+	let [isIncrementPressed, setIsIncrementPressed] = useState<'touch' | 'mouse' | null>(null);
+	useEffect(() => {
+		if (isIncrementPressed === 'touch') {
+			onIncrementPressStartEvent(600);
+		} else if (isIncrementPressed) {
+			onIncrementPressStartEvent(400);
+		} else if (!isIncrementPressed) {
+			clearAsyncEvent();
+		}
+	}, [isIncrementPressed]);
+
+	let [isDecrementPressed, setIsDecrementPressed] = useState<'touch' | 'mouse' | null>(null);
+	useEffect(() => {
+		if (isDecrementPressed === 'touch') {
+			onDecrementPressStartEvent(600);
+		} else if (isDecrementPressed) {
+			onDecrementPressStartEvent(400);
+		} else if (!isDecrementPressed) {
+			clearAsyncEvent();
+		}
+	}, [isDecrementPressed]);
+
+	return {
+		spinButtonProps: {
+			role: 'spinbutton',
+			'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
+			'aria-valuetext': ariaTextValue,
+			'aria-valuemin': minValue,
+			'aria-valuemax': maxValue,
+			'aria-disabled': isDisabled || undefined,
+			'aria-readonly': isReadOnly || undefined,
+			'aria-required': isRequired || undefined,
+			...keyboardProps,
+			onFocus,
+			onBlur,
+		},
+		incrementButtonProps: {
+			onPressStart: (e) => {
+				clearAsync();
+				if (e.pointerType !== 'touch') {
+					onIncrement?.();
+					setIsIncrementPressed('mouse');
+				} else {
+					addGlobalListener(window, 'pointercancel', onPointerCancel, { capture: true });
+					isUp.current = false;
+					// For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
+					// the control isn't spinning.
+					setIsIncrementPressed('touch');
+				}
+				addGlobalListener(window, 'contextmenu', cancelContextMenu);
+			},
+			onPressUp: (e) => {
+				clearAsync();
+				if (e.pointerType === 'touch') {
+					isUp.current = true;
+				}
+				removeAllGlobalListeners();
+				setIsIncrementPressed(null);
+			},
+			onPressEnd: (e) => {
+				clearAsync();
+				if (e.pointerType === 'touch') {
+					if (!isSpinning.current && isUp.current) {
+						onIncrement?.();
+					}
+				}
+				isUp.current = false;
+				setIsIncrementPressed(null);
+			},
+			onFocus,
+			onBlur,
+		},
+		decrementButtonProps: {
+			onPressStart: (e) => {
+				clearAsync();
+				if (e.pointerType !== 'touch') {
+					onDecrement?.();
+					setIsDecrementPressed('mouse');
+				} else {
+					addGlobalListener(window, 'pointercancel', onPointerCancel, { capture: true });
+					isUp.current = false;
+					// For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
+					// the control isn't spinning.
+					setIsDecrementPressed('touch');
+				}
+			},
+			onPressUp: (e) => {
+				clearAsync();
+				if (e.pointerType === 'touch') {
+					isUp.current = true;
+				}
+				removeAllGlobalListeners();
+				setIsDecrementPressed(null);
+			},
+			onPressEnd: (e) => {
+				clearAsync();
+				if (e.pointerType === 'touch') {
+					if (!isSpinning.current && isUp.current) {
+						onDecrement?.();
+					}
+				}
+				isUp.current = false;
+				setIsDecrementPressed(null);
+			},
+			onFocus,
+			onBlur,
+		},
+	};
+}

package/src/stately/combobox/useComboBoxState.ts

@@ -38,7 +38,7 @@ import { useControlledState } from '../utils/useControlledState';
 
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
 export type SelectionMode = 'single' | 'multiple';
-export type ValueType<M extends SelectionMode> = M extends 'single' ? Key | null : Key[];
+export type ValueType<M extends SelectionMode> = M extends 'single' ? Key | null : readonly Key[];
 export type ChangeValueType<M extends SelectionMode> = M extends 'single' ? Key | null : Key[];
 type ValidationType<M extends SelectionMode> = M extends 'single' ? Key | null : Key[];
 

package/src/stately/grid/useGridState.ts

@@ -118,20 +118,19 @@ export function useGridState(...args: any[]): GridState<any, IGridCollection<any
 					rows.length - 1,
 				);
 				let newRow: GridNode<any> | null = null;
-				while (index >= 0) {
-					if (!selectionManager.isDisabled(rows[index].key) && rows[index].type !== 'headerrow') {
-						newRow = rows[index];
+				for (let i = Math.max(0, index); i < rows.length; i++) {
+					if (!selectionManager.isDisabled(rows[i].key) && rows[i].type !== 'headerrow') {
+						newRow = rows[i];
 						break;
 					}
 					// Find next, not disabled row.
-					if (index < rows.length - 1) {
-						index++;
-						// Otherwise, find previous, not disabled row.
-					} else {
-						if (index > parentNode.index) {
-							index = parentNode.index;
+				}
+				if (newRow === null) {
+					for (let i = index - 1; i >= 0; i--) {
+						if (!selectionManager.isDisabled(rows[i].key) && rows[i].type !== 'headerrow') {
+							newRow = rows[i];
+							break;
 						}
-						index--;
 					}
 				}
 				if (newRow) {

package/src/stately/index.ts

@@ -159,3 +159,14 @@ export type { TableBodyProps } from './table/TableBody';
 export type { RowProps, RowElement } from './table/Row';
 export type { CellProps, CellElement, CellRenderer } from './table/Cell';
 export type { ITableCollection } from './table/TableCollection';
+
+export { useTokenFieldState } from './tokenfield/useTokenFieldState';
+export type { TokenFieldProps, TokenFieldState } from './tokenfield/useTokenFieldState';
+export { TokenFieldValue } from './tokenfield/TokenFieldValue';
+export type {
+	TokenFieldSegment,
+	TextSegment,
+	TokenSegment,
+	Position,
+	TokenFieldValueOptions,
+} from './tokenfield/TokenFieldValue';

package/src/stately/menu/useMenuTriggerState.ts

@@ -11,7 +11,7 @@ import {
 	useOverlayTriggerState,
 } from '../overlays/useOverlayTriggerState';
 
-export type MenuTriggerType = 'press' | 'longPress';
+export type MenuTriggerType = 'press' | 'longPress' | 'contextMenu';
 
 export interface MenuTriggerProps extends OverlayTriggerProps {
 	/**

package/src/stately/menu/useSubmenuTriggerState.ts

@@ -109,6 +109,8 @@ export function useSubmenuTriggerState(...args: any[]): SubmenuTriggerState {
 			// https://github.com/adobe/react-spectrum/pull/4976#discussion_r1336472863
 			setOpen: () => {},
 			toggle,
+			point: null,
+			setPoint: () => {},
 		}),
 		[isOpen, open, close, closeAll, focusStrategy, toggle, submenuLevel],
 		subSlot(slot, 'state'),

package/src/stately/overlays/useOverlayTriggerState.ts

@@ -2,7 +2,7 @@
 // octane adaptations: public-hook slot threading (splitSlot/subSlot) per the binding
 // convention; the public value-level `onOpenChange` callback is unchanged (the onInput
 // rule applies only to DOM wiring); explicit dependency arrays are kept verbatim.
-import { useCallback } from 'octane';
+import { useCallback, useState } from 'octane';
 
 import { S, splitSlot, subSlot } from '../../internal';
 import { useControlledState } from '../utils/useControlledState';
@@ -16,6 +16,11 @@ export interface OverlayTriggerProps {
 	onOpenChange?: (isOpen: boolean) => void;
 }
 
+interface Point {
+	x: number;
+	y: number;
+}
+
 export interface OverlayTriggerState {
 	/** Whether the overlay is currently open. */
 	readonly isOpen: boolean;
@@ -27,6 +32,9 @@ export interface OverlayTriggerState {
 	close(): void;
 	/** Toggles the overlay's visibility. */
 	toggle(): void;
+	readonly point: Point | null;
+	/** Sets the cursor position relative to the window viewport. */
+	setPoint(point: Point): void;
 }
 
 /**
@@ -51,6 +59,7 @@ export function useOverlayTriggerState(...args: any[]): OverlayTriggerState {
 		subSlot(slot, 'open'),
 	);
 
+	let [point, setPoint] = useState<Point | null>(null, subSlot(slot, 'point'));
 	const open = useCallback(
 		() => {
 			setOpen(true);
@@ -81,5 +90,7 @@ export function useOverlayTriggerState(...args: any[]): OverlayTriggerState {
 		open,
 		close,
 		toggle,
+		point,
+		setPoint,
 	};
 }

package/src/stately/radio/useRadioGroupState.ts

@@ -1,9 +1,13 @@
+interface FocusEvents {
+	onFocus?: (event: FocusEvent) => void;
+	onBlur?: (event: FocusEvent) => void;
+	onFocusChange?: (isFocused: boolean) => void;
+}
 // Ported from react-stately (source: .react-spectrum/packages/react-stately/src/radio/useRadioGroupState.ts).
 // octane adaptations: public-hook slot threading (splitSlot/subSlot) per the binding
 // convention; the module-level instance/name counters port verbatim. The public
 // value-level `onChange` callback is unchanged (the onInput rule applies only to DOM wiring).
 import type {
-	FocusEvents,
 	HelpTextProps,
 	InputBase,
 	InputDOMProps,

package/src/stately/table/TableUtils.ts

@@ -104,6 +104,10 @@ export function calculateColumnSizes(
 	getDefaultWidth?: (index: number) => ColumnSize | null | undefined,
 	getDefaultMinWidth?: (index: number) => ColumnSize | null | undefined,
 ): number[] {
+	let originalWidth = availableWidth;
+	let flooredWidth = Math.floor(availableWidth);
+	let hasFractionalWidth = availableWidth - flooredWidth > 0;
+	availableWidth = flooredWidth;
 	let hasNonFrozenItems = false;
 	let flexItems: FlexItem[] = columns.map((column, index) => {
 		let width: ColumnSize = (
@@ -245,7 +249,17 @@ export function calculateColumnSizes(
 		});
 	}
 
-	return cascadeRounding(flexItems);
+	let columnSizes = cascadeRounding(flexItems);
+
+	// Give the leftover sub-pixel width to the last column so the columns sum
+	// exactly to the (possibly fractional) available width.
+	if (hasFractionalWidth && columnSizes.length > 0) {
+		let tableFractionalWidth = originalWidth.toString().split('.')[1];
+		let columnWidth = columnSizes[columnSizes.length - 1].toString();
+		columnSizes[columnSizes.length - 1] = Number(columnWidth + '.' + tableFractionalWidth);
+	}
+
+	return columnSizes;
 }
 
 function cascadeRounding(flexItems: FlexItem[]): number[] {

package/src/stately/table/useTableState.ts

@@ -42,6 +42,13 @@ export interface TableProps<T> extends MultipleSelection, Sortable, Expandable {
 	shouldSelectOnPressUp?: boolean;
 	/** The id of the column that displays hierarchical data. */
 	treeColumn?: Key;
+	/**
+	 * Whether keyboard navigation to focusable elements within the cells is
+	 * via the left/right arrow keys or the tab key.
+	 *
+	 * @default 'arrow'
+	 */
+	keyboardNavigationBehavior?: 'arrow' | 'tab';
 }
 
 export interface TableState<T> extends GridState<T, ITableCollection<T>> {