@octanejs/aria 0.0.46 → 0.0.48

package/src/selection/useSelectableItem.ts

@@ -24,6 +24,7 @@ import { focusSafely } from '../interactions/focusSafely';
 import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getCollectionId, isNonContiguousSelectionModifier } from './utils';
 import { isCtrlKeyPressed } from '../utils/keyboard';
+import { isTabbable } from '../utils/isFocusable';
 import { mergeProps } from '../utils/mergeProps';
 import { moveVirtualFocus } from '../focus/virtualFocus';
 import type { MultipleSelectionManager } from '../stately/selection/types';
@@ -380,7 +381,8 @@ export function useSelectableItem(...args: any[]): SelectableItemAria {
 		};
 	}
 
-	itemProps['data-collection'] = getCollectionId(manager.collection);
+	let collectionId = getCollectionId(manager.collection);
+	itemProps['data-collection'] = collectionId;
 	itemProps['data-key'] = key;
 	itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
 
@@ -470,17 +472,52 @@ export function useSelectableItem(...args: any[]): SelectableItemAria {
 				}
 			: undefined;
 
+	let mergedItemProps = mergeProps(
+		itemProps,
+		allowsSelection || hasPrimaryAction || (shouldUseVirtualFocus && !isDisabled) ? pressProps : {},
+		longPressEnabled ? longPressProps : {},
+		{ onDoubleClick, onDragStartCapture, onClick, id },
+		// Prevent DOM focus from moving on mouse down when using virtual focus
+		shouldUseVirtualFocus ? { onMouseDown: (e: MouseEvent) => e.preventDefault() } : undefined,
+	);
+
+	// Guard against presses triggering selection when they happen on interactive children or collection items from different collections
+	// will need to trigger selection if the target is itself a collection item belonging to the same collection parent (aka a cell in a row) but
+	// not if the target is a child of a different collections aka taggroup in table cell.
+	let isChildInteraction = (target: Element) => {
+		let el: Element | null = target;
+		while (el && el !== ref.current) {
+			let elCollection = el.getAttribute('data-collection');
+			if (elCollection != null) {
+				return elCollection !== collectionId;
+			}
+			el = el.parentElement;
+		}
+		return isTabbable(target);
+	};
+
+	let baseOnPointerDown = mergedItemProps.onPointerDown;
+	mergedItemProps.onPointerDown = (e: PointerEvent) => {
+		let target = getEventTarget(e) as Element | null;
+		if (target && target !== ref.current && isChildInteraction(target)) {
+			e.stopPropagation();
+			return;
+		}
+		baseOnPointerDown?.(e);
+	};
+
+	let baseOnMouseDown = mergedItemProps.onMouseDown;
+	mergedItemProps.onMouseDown = (e) => {
+		let target = getEventTarget(e) as Element | null;
+		if (target && target !== ref.current && isChildInteraction(target)) {
+			e.stopPropagation();
+			return;
+		}
+		baseOnMouseDown?.(e);
+	};
+
 	return {
-		itemProps: mergeProps(
-			itemProps,
-			allowsSelection || hasPrimaryAction || (shouldUseVirtualFocus && !isDisabled)
-				? pressProps
-				: {},
-			longPressEnabled ? longPressProps : {},
-			{ onDoubleClick, onDragStartCapture, onClick, id },
-			// Prevent DOM focus from moving on mouse down when using virtual focus
-			shouldUseVirtualFocus ? { onMouseDown: (e: MouseEvent) => e.preventDefault() } : undefined,
-		),
+		itemProps: mergedItemProps,
 		isPressed,
 		isSelected: manager.isSelected(key),
 		isFocused: manager.isFocused && manager.focusedKey === key,

package/src/slider/{useSliderThumb.ts → useSliderThumb.tsx}

@@ -1,16 +1,7 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/slider/useSliderThumb.ts).
-// octane adaptations:
-// - Handlers receive NATIVE events. The visually-hidden range input's value listener is
-//   `onInput` (octane has no synthetic onChange; for range inputs React's onChange fires
-//   on the native `input` event, so the timing is identical — this mirrors how the browser
-//   reports native keyboard/drag stepping of a range input).
-// - React's InputHTMLAttributes/LabelHTMLAttributes element types collapse to the local
-//   structural `DOMAttributes` prop bag; mouse/pointer/touch handler params are native.
-// - `clamp` comes from the ported stately number utils; `SliderState` from the ported
-//   stately slider hook.
-// - Public-hook slot threading (splitSlot/subSlot); explicit dependency arrays are kept
-//   verbatim.
-import type {
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/slider/useSliderThumb.ts).
+import {
 	AriaLabelingProps,
 	AriaValidationProps,
 	DOMProps,
@@ -21,15 +12,22 @@ import type {
 	RefObject,
 	ValidationState,
 } from '@react-types/shared';
-// octane adaptation: FocusableProps is the ported native-event version.
 import type { FocusableProps } from '../interactions/useFocusable';
-import { clamp } from '../stately/utils/number';
+import { clamp } from '../upstream-exports/react-stately/private/utils/number';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getSliderThumbId, sliderData } from './utils';
 import { mergeProps } from '../utils/mergeProps';
-import { useCallback, useEffect, useRef } from 'octane';
-import type { SliderState } from '../stately/slider/useSliderState';
+import { withSlot } from 'octane';
+import React, {
+	ChangeEvent,
+	InputHTMLAttributes,
+	LabelHTMLAttributes,
+	useCallback,
+	useEffect,
+	useRef,
+} from '../compat/react';
+import { SliderState } from '../upstream-exports/react-stately/useSliderState';
 import { useFocusable } from '../interactions/useFocusable';
 import { useFormReset } from '../utils/useFormReset';
 import { useGlobalListeners } from '../utils/useGlobalListeners';
@@ -38,12 +36,6 @@ import { useLabel } from '../label/useLabel';
 import { useLocale } from '../i18n/I18nProvider';
 import { useMove } from '../interactions/useMove';
 
-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>;
-
 export interface SliderThumbProps extends FocusableProps, LabelableProps {
 	/**
 	 * The orientation of the Slider.
@@ -82,10 +74,10 @@ export interface SliderThumbAria {
 	thumbProps: DOMAttributes;
 
 	/** Props for the visually hidden range input element. */
-	inputProps: DOMAttributes;
+	inputProps: InputHTMLAttributes<HTMLInputElement>;
 
 	/** Props for the label element for this thumb (optional). */
-	labelProps: DOMAttributes;
+	labelProps: LabelHTMLAttributes<HTMLLabelElement>;
 
 	/** Whether this thumb is currently being dragged. */
 	isDragging: boolean;
@@ -108,18 +100,14 @@ export interface AriaSliderThumbOptions extends AriaSliderThumbProps {
  * @param opts Options for this Slider thumb.
  * @param state Slider state, created via `useSliderState`.
  */
-export function useSliderThumb(opts: AriaSliderThumbOptions, state: SliderState): SliderThumbAria;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
 export function useSliderThumb(
 	opts: AriaSliderThumbOptions,
 	state: SliderState,
-	slot: symbol | undefined,
-): SliderThumbAria;
-export function useSliderThumb(...args: any[]): SliderThumbAria {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useSliderThumb');
-	const opts = user[0] as AriaSliderThumbOptions;
-	const state = user[1] as SliderState;
+	_slot?: symbol,
+): SliderThumbAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSliderThumb, opts, state);
+	}
 
 	let {
 		index = 0,
@@ -136,129 +124,105 @@ export function useSliderThumb(...args: any[]): SliderThumbAria {
 	let isDisabled = opts.isDisabled || state.isDisabled;
 	let isVertical = orientation === 'vertical';
 
-	let { direction } = useLocale(subSlot(slot, 'locale'));
-	let { addGlobalListener, removeGlobalListener } = useGlobalListeners(
-		subSlot(slot, 'globalListeners'),
-	);
+	let { direction } = useLocale();
+	let { addGlobalListener, removeGlobalListener } = useGlobalListeners();
 
 	let data = sliderData.get(state)!;
-	const { labelProps, fieldProps } = useLabel(
-		{
-			...opts,
-			id: getSliderThumbId(state, index),
-			'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim(),
-		},
-		subSlot(slot, 'label'),
-	);
+	const { labelProps, fieldProps } = useLabel({
+		...opts,
+		id: getSliderThumbId(state, index),
+		'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim(),
+	});
 
 	const value = state.values[index];
 
-	const focusInput = useCallback(
-		() => {
-			if (inputRef.current) {
-				focusWithoutScrolling(inputRef.current);
-			}
-		},
-		[inputRef],
-		subSlot(slot, 'focusInput'),
-	);
+	const focusInput = useCallback(() => {
+		if (inputRef.current) {
+			focusWithoutScrolling(inputRef.current);
+		}
+	}, [inputRef]);
 
 	const isFocused = state.focusedThumb === index;
 
-	useEffect(
-		() => {
-			if (isFocused) {
-				focusInput();
-			}
-		},
-		[isFocused, focusInput],
-		subSlot(slot, 'focusFx'),
-	);
+	useEffect(() => {
+		if (isFocused) {
+			focusInput();
+		}
+	}, [isFocused, focusInput]);
 
 	let reverseX = direction === 'rtl';
-	let currentPosition = useRef<number | null>(null, subSlot(slot, 'position'));
+	let currentPosition = useRef<number | null>(null);
 
-	let { keyboardProps } = useKeyboard(
-		{
-			onKeyDown(e) {
-				let {
-					getThumbMaxValue,
-					getThumbMinValue,
-					decrementThumb,
-					incrementThumb,
-					setThumbValue,
-					setThumbDragging,
-					pageSize,
-				} = state;
-				// these are the cases that useMove or useSlider don't handle
-				if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
-					e.continuePropagation();
-					return;
-				}
-				// same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.
-				e.preventDefault();
-				// remember to set this so that onChangeEnd is fired
-				setThumbDragging(index, true);
-				switch (e.key) {
-					case 'PageUp':
-						incrementThumb(index, pageSize);
-						break;
-					case 'PageDown':
-						decrementThumb(index, pageSize);
-						break;
-					case 'Home':
-						setThumbValue(index, getThumbMinValue(index));
-						break;
-					case 'End':
-						setThumbValue(index, getThumbMaxValue(index));
-						break;
-				}
-				setThumbDragging(index, false);
+	let keyboardUpdate = (cb: () => void) => {
+		// remember to set this so that onChangeEnd is fired
+		state.setThumbDragging(index, true);
+		cb();
+		state.setThumbDragging(index, false);
+	};
+
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			PageUp: () => {
+				return keyboardUpdate(() => {
+					state.incrementThumb(index, state.pageSize);
+				});
+			},
+			PageDown: () => {
+				return keyboardUpdate(() => {
+					state.decrementThumb(index, state.pageSize);
+				});
+			},
+			Home: () => {
+				return keyboardUpdate(() => {
+					state.setThumbValue(index, state.getThumbMinValue(index));
+				});
+			},
+			End: () => {
+				return keyboardUpdate(() => {
+					state.setThumbValue(index, state.getThumbMaxValue(index));
+				});
 			},
 		},
-		subSlot(slot, 'keyboard'),
-	);
+		allowRepeats: true,
+	});
 
-	let { moveProps } = useMove(
-		{
-			onMoveStart() {
-				currentPosition.current = null;
-				state.setThumbDragging(index, true);
-			},
-			onMove({ deltaX, deltaY, pointerType, shiftKey }) {
-				const { getThumbPercent, setThumbPercent, decrementThumb, incrementThumb, step, pageSize } =
-					state;
-				if (!trackRef.current) {
-					return;
-				}
-				let { width, height } = trackRef.current.getBoundingClientRect();
-				let size = isVertical ? height : width;
+	let { moveProps } = useMove({
+		onMoveStart() {
+			currentPosition.current = null;
+			state.setThumbDragging(index, true);
+		},
+		onMove({ deltaX, deltaY, pointerType, shiftKey }: import('@react-types/shared').MoveMoveEvent) {
+			const { getThumbPercent, setThumbPercent, decrementThumb, incrementThumb, step, pageSize } =
+				state;
+			if (!trackRef.current) {
+				return;
+			}
+			let { width, height } = trackRef.current.getBoundingClientRect();
+			let size = isVertical ? height : width;
 
-				if (currentPosition.current == null) {
-					currentPosition.current = getThumbPercent(index) * size;
-				}
-				if (pointerType === 'keyboard') {
-					if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {
-						decrementThumb(index, shiftKey ? pageSize : step);
-					} else {
-						incrementThumb(index, shiftKey ? pageSize : step);
-					}
+			if (currentPosition.current == null) {
+				currentPosition.current = getThumbPercent(index) * size;
+			}
+			if (pointerType === 'keyboard') {
+				if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {
+					decrementThumb(index, shiftKey ? pageSize : step);
 				} else {
-					let delta = isVertical ? deltaY : deltaX;
-					if (isVertical || reverseX) {
-						delta = -delta;
-					}
-
-					currentPosition.current += delta;
-					setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));
+					incrementThumb(index, shiftKey ? pageSize : step);
 				}
-			},
-			onMoveEnd() {
-				state.setThumbDragging(index, false);
-			},
+			} else {
+				let delta = isVertical ? deltaY : deltaX;
+				if (isVertical || reverseX) {
+					delta = -delta;
+				}
+
+				currentPosition.current += delta;
+				setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));
+			}
 		},
-		subSlot(slot, 'move'),
-	);
+		onMoveEnd() {
+			state.setThumbDragging(index, false);
+		},
+	});
 
 	// Immediately register editability with the state
 	state.setThumbEditable(index, !isDisabled);
@@ -269,10 +233,9 @@ export function useSliderThumb(...args: any[]): SliderThumbAria {
 			onBlur: () => state.setFocusedThumb(undefined),
 		}),
 		inputRef,
-		subSlot(slot, 'focusable'),
 	);
 
-	let currentPointer = useRef<number | undefined>(undefined, subSlot(slot, 'pointer'));
+	let currentPointer = useRef<number | undefined>(undefined);
 	let onDown = (id?: number) => {
 		focusInput();
 		currentPointer.current = id;
@@ -283,8 +246,13 @@ export function useSliderThumb(...args: any[]): SliderThumbAria {
 		addGlobalListener(window, 'pointerup', onUp, false);
 	};
 
-	let onUp = (e: any) => {
-		let id = e.pointerId ?? e.changedTouches?.[0].identifier;
+	let onUp = (e: globalThis.PointerEvent | globalThis.TouchEvent | globalThis.MouseEvent) => {
+		let id =
+			'pointerId' in e
+				? e.pointerId
+				: 'changedTouches' in e
+					? e.changedTouches[0]?.identifier
+					: undefined;
 		if (id === currentPointer.current) {
 			focusInput();
 			state.setThumbDragging(index, false);
@@ -300,38 +268,34 @@ export function useSliderThumb(...args: any[]): SliderThumbAria {
 	}
 
 	let interactions = !isDisabled
-		? mergeProps(keyboardProps, moveProps, {
-				onMouseDown: (e: MouseEvent) => {
+		? // oxlint-disable-next-line react/react-compiler
+			mergeProps(keyboardProps, moveProps, {
+				onMouseDown: (e: React.MouseEvent) => {
 					if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
 						return;
 					}
 					onDown();
 				},
-				onPointerDown: (e: PointerEvent) => {
+				onPointerDown: (e: React.PointerEvent) => {
 					if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
 						return;
 					}
 					onDown(e.pointerId);
 				},
-				onTouchStart: (e: TouchEvent) => {
+				onTouchStart: (e: React.TouchEvent) => {
 					onDown(e.changedTouches[0].identifier);
 				},
 			})
 		: {};
 
-	useFormReset(
-		inputRef,
-		state.defaultValues[index],
-		(v) => {
-			state.setThumbValue(index, v);
-		},
-		subSlot(slot, 'reset'),
-	);
+	useFormReset(inputRef, state.defaultValues[index], (v) => {
+		state.setThumbValue(index, v);
+	});
 
 	// We install mouse handlers for the drag motion on the thumb div, but
 	// not the key handler for moving the thumb with the slider.  Instead,
 	// we focus the range input, and let the browser handle the keyboard
-	// interactions; we then listen to input's native `input` event to update state.
+	// interactions; we then listen to input's onChange to update state.
 	return {
 		inputProps: mergeProps(focusableProps, fieldProps, {
 			type: 'range',
@@ -352,8 +316,6 @@ export function useSliderThumb(...args: any[]): SliderThumbAria {
 				.filter(Boolean)
 				.join(' '),
 			'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),
-			// octane adaptation: React's synthetic onChange for range inputs rides the
-			// native `input` event — onInput is the direct equivalent.
 			onInput: (e: Event) => {
 				state.setThumbValue(index, parseFloat((getEventTarget(e) as HTMLInputElement).value));
 			},