@octanejs/aria 0.0.46 → 0.0.48

package/src/grid/{useGridCell.ts → useGridCell.tsx}

@@ -1,14 +1,20 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/grid/useGridCell.ts).
-// octane adaptations:
-// - Handlers receive NATIVE events (there is no synthetic layer): keydown handlers take
-//   the native KeyboardEvent, and the ArrowUp/ArrowDown/edge re-dispatch builds
-//   `new KeyboardEvent(e.type, e)` — upstream's `e.nativeEvent` IS the event here.
-//   `onKeyDownCapture` maps to the capture phase natively in octane, matching
-//   upstream's React capture prop.
-// - `GridState`/`IGridCollection`/`GridNode` come from the ported stately grid hooks;
-//   `DOMAttributes` is a local structural prop-bag alias.
-// - Public-hook slot threading (splitSlot/subSlot).
-import type { FocusableElement, Key, RefObject } from '@react-types/shared';
+/** @jsxImportSource octane */
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/grid/useGridCell.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 { FocusableElement, Key, RefObject } from '@react-types/shared';
+import { withSlot } from 'octane';
 import { focusSafely } from '../interactions/focusSafely';
 import {
 	getActiveElement,
@@ -17,23 +23,21 @@ import {
 	nodeContains,
 } from '../utils/shadowdom/DOMFunctions';
 import { getFocusableTreeWalker } from '../focus/FocusScope';
+import { getOwnerDocument } from '../utils/domHelpers';
 import { getScrollParent } from '../utils/getScrollParent';
-import type { IGridCollection as GridCollection, GridNode } from '../stately/grid/GridCollection';
+import {
+	IGridCollection as GridCollection,
+	GridNode,
+} from '../upstream-exports/react-stately/private/grid/GridCollection';
 import { gridMap } from './utils';
-import type { GridState } from '../stately/grid/useGridState';
+import { GridState } from '../upstream-exports/react-stately/private/grid/useGridState';
 import { isFocusVisible } from '../interactions/useFocusVisible';
 import { mergeProps } from '../utils/mergeProps';
-import { useRef } from 'octane';
+import { KeyboardEvent as ReactKeyboardEvent, useRef } from '../compat/react';
 import { scrollIntoViewport } from '../utils/scrollIntoView';
 import { useLocale } from '../i18n/I18nProvider';
 import { useSelectableItem } from '../selection/useSelectableItem';
 
-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 GridCellProps {
 	/**
 	 * An object representing the grid cell. Contains all the relevant information that makes up the
@@ -44,9 +48,16 @@ export interface GridCellProps {
 	isVirtualized?: boolean;
 	/**
 	 * Whether the cell or its first focusable child element should be focused when the grid cell is
-	 * focused.
+	 * focused. Defaults to 'child' in arrow keyboard navigation mode and 'cell' in
+	 * tab keyboard navigation mode.
 	 */
 	focusMode?: 'child' | 'cell';
+	/**
+	 * Whether the cell should support arrow key navigation even when the containing collection uses
+	 * tab keyboard navigation. Allows users to navigate between rows and cells with arrow keys while
+	 * focus is on an interactive child element within the cell.
+	 */
+	allowsArrowNavigation?: boolean;
 	/** Whether selection should occur on press up instead of press down. */
 	shouldSelectOnPressUp?: boolean;
 	/** Indicates how many columns the data cell spans. */
@@ -77,32 +88,32 @@ export function useGridCell<T, C extends GridCollection<T>>(
 	props: GridCellProps,
 	state: GridState<T, C>,
 	ref: RefObject<FocusableElement | null>,
-): GridCellAria;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
-export function useGridCell<T, C extends GridCollection<T>>(
-	props: GridCellProps,
-	state: GridState<T, C>,
-	ref: RefObject<FocusableElement | null>,
-	slot: symbol | undefined,
-): GridCellAria;
-export function useGridCell(...args: any[]): GridCellAria {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useGridCell');
-	const props = user[0] as GridCellProps;
-	const state = user[1] as GridState<any, GridCollection<any>>;
-	const ref = user[2] as RefObject<FocusableElement | null>;
-
-	let { node, isVirtualized, focusMode = 'child', shouldSelectOnPressUp, onAction } = props;
-
-	let { direction } = useLocale(subSlot(slot, 'locale'));
+	_slot?: symbol,
+): GridCellAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useGridCell<T, C>, props, state, ref);
+	}
+
+	let {
+		node,
+		isVirtualized,
+		focusMode: focusModeProp,
+		allowsArrowNavigation,
+		shouldSelectOnPressUp,
+		onAction,
+	} = props;
+
+	let { direction } = useLocale();
 	let {
 		keyboardDelegate,
 		actions: { onCellAction },
+		keyboardNavigationBehavior,
 	} = gridMap.get(state)!;
+	let focusMode = focusModeProp ?? (keyboardNavigationBehavior === 'tab' ? 'cell' : 'child');
 
 	// We need to track the key of the item at the time it was last focused so that we force
 	// focus to go to the item when the DOM node is reused for a different item in a virtualizer.
-	let keyWhenFocused = useRef<Key | null>(null, subSlot(slot, 'keyWhenFocused'));
+	let keyWhenFocused = useRef<Key | null>(null);
 
 	// Handles focusing the cell. If there is a focusable child,
 	// it is focused, otherwise the cell itself is focused.
@@ -111,7 +122,10 @@ export function useGridCell(...args: any[]): GridCellAria {
 			let treeWalker = getFocusableTreeWalker(ref.current);
 			if (focusMode === 'child') {
 				// If focus is already on a focusable child within the cell, early return so we don't shift focus
-				if (isFocusWithin(ref.current) && ref.current !== getActiveElement()) {
+				if (
+					isFocusWithin(ref.current) &&
+					ref.current !== getActiveElement(getOwnerDocument(ref.current))
+				) {
 					return;
 				}
 
@@ -134,24 +148,21 @@ export function useGridCell(...args: any[]): GridCellAria {
 		}
 	};
 
-	let { itemProps, isPressed } = useSelectableItem(
-		{
-			selectionManager: state.selectionManager,
-			key: node.key,
-			ref,
-			isVirtualized,
-			focus,
-			shouldSelectOnPressUp,
-			onAction: onCellAction ? () => onCellAction(node.key) : onAction,
-			isDisabled: state.collection.size === 0,
-		},
-		subSlot(slot, 'selectableItem'),
-	);
-
-	let onKeyDownCapture = (e: KeyboardEvent) => {
-		let activeElement = getActiveElement();
+	let { itemProps, isPressed } = useSelectableItem({
+		selectionManager: state.selectionManager,
+		key: node.key,
+		ref,
+		isVirtualized,
+		focus,
+		shouldSelectOnPressUp,
+		onAction: onCellAction ? () => onCellAction(node.key) : onAction,
+		isDisabled: state.collection.size === 0,
+	});
+
+	let onKeyDownCapture = (e: ReactKeyboardEvent) => {
+		let activeElement = getActiveElement(getOwnerDocument(ref.current));
 		if (
-			!nodeContains(e.currentTarget as Element, getEventTarget(e) as Element) ||
+			!nodeContains(e.currentTarget as Node, getEventTarget(e) as Element) ||
 			state.isKeyboardNavigationDisabled ||
 			!ref.current ||
 			!activeElement
@@ -191,7 +202,6 @@ export function useGridCell(...args: any[]): GridCellAria {
 						// We prevent the capturing event from reaching children of the cell, e.g. pickers.
 						// We want arrow keys to navigate to the next cell instead. We need to re-dispatch
 						// the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-						// octane adaptation: the native event IS `e.nativeEvent`.
 						ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.type, e));
 						break;
 					}
@@ -232,7 +242,6 @@ export function useGridCell(...args: any[]): GridCellAria {
 						// We prevent the capturing event from reaching children of the cell, e.g. pickers.
 						// We want arrow keys to navigate to the next cell instead. We need to re-dispatch
 						// the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-						// octane adaptation: the native event IS `e.nativeEvent`.
 						ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.type, e));
 						break;
 					}
@@ -260,13 +269,47 @@ export function useGridCell(...args: any[]): GridCellAria {
 				if (!e.altKey && nodeContains(ref.current, getEventTarget(e) as Element)) {
 					e.stopPropagation();
 					e.preventDefault();
-					// octane adaptation: the native event IS `e.nativeEvent`.
 					ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.type, e));
 				}
 				break;
 		}
 	};
 
+	let onKeyDown = (e: ReactKeyboardEvent) => {
+		let activeElement = getActiveElement(getOwnerDocument(ref.current));
+		if (
+			!nodeContains(e.currentTarget as Node, getEventTarget(e) as Element) ||
+			state.isKeyboardNavigationDisabled ||
+			!ref.current ||
+			!activeElement
+		) {
+			return;
+		}
+
+		if (keyboardNavigationBehavior === 'tab') {
+			if (getEventTarget(e) !== ref.current && e.key !== 'Tab') {
+				e.stopPropagation();
+				return;
+			}
+		}
+
+		switch (e.key) {
+			case 'Tab': {
+				if (keyboardNavigationBehavior === 'tab') {
+					// If there is another focusable element within this item, stop propagation so the tab key
+					// is handled by the browser and not by useSelectableCollection (which would take us out of the list).
+					let walker = getFocusableTreeWalker(ref.current, { tabbable: true });
+					walker.currentNode = activeElement;
+					let next = e.shiftKey ? walker.previousNode() : walker.nextNode();
+
+					if (next) {
+						e.stopPropagation();
+					}
+				}
+			}
+		}
+	};
+
 	// Grid cells can have focusable elements inside them. In this case, focus should
 	// be marshalled to that element rather than focusing the cell itself.
 	let onFocus = (e: FocusEvent) => {
@@ -284,22 +327,41 @@ export function useGridCell(...args: any[]): GridCellAria {
 			return;
 		}
 
-		// If the cell itself is focused, wait a frame so that focus finishes propagatating
+		// if focus goes back to cell from child, make sure we don't refocus the cell if we are in focusMode=child
+		// since that would be a focus trap
+		if (
+			focusMode === 'child' &&
+			e.relatedTarget &&
+			nodeContains(ref.current, e.relatedTarget as Element)
+		) {
+			return;
+		}
+
+		// If the cell itself is focused, wait a frame so that focus finishes propagating
 		// up to the tree, and move focus to a focusable child if possible.
 		requestAnimationFrame(() => {
-			if (focusMode === 'child' && getActiveElement() === ref.current) {
+			if (
+				focusMode === 'child' &&
+				getActiveElement(getOwnerDocument(ref.current)) === ref.current
+			) {
 				focus();
 			}
 		});
 	};
 
+	// oxlint-disable-next-line react/react-compiler
 	let gridCellProps: DOMAttributes = mergeProps(itemProps, {
 		role: 'gridcell',
-		onKeyDownCapture,
+		onKeyDownCapture:
+			keyboardNavigationBehavior !== 'tab' || allowsArrowNavigation ? onKeyDownCapture : undefined,
+		onKeyDown: keyboardNavigationBehavior === 'tab' ? onKeyDown : undefined,
 		'aria-colspan': node.colSpan,
 		'aria-colindex': node.colIndex != null ? node.colIndex + 1 : undefined, // aria-colindex is 1-based
 		colSpan: isVirtualized ? undefined : node.colSpan,
 		onFocus,
+		// make sure shift tabbing from a child of a cell doesnt move focus back to cell if focusMode="child" and in tab nav
+		// consistent with arrow nav and focusMode="child" since you can't go back to the cell there either
+		...(focusMode === 'child' && keyboardNavigationBehavior === 'tab' ? { tabIndex: -1 } : {}),
 	});
 
 	if (isVirtualized) {
@@ -315,8 +377,8 @@ export function useGridCell(...args: any[]): GridCellAria {
 		gridCellProps.tabIndex != null &&
 		gridCellProps.onPointerDown == null
 	) {
-		gridCellProps.onPointerDown = (e: PointerEvent) => {
-			let el = e.currentTarget as Element;
+		gridCellProps.onPointerDown = (e: import('octane').PointerEvent<HTMLElement>) => {
+			let el = e.currentTarget;
 			let tabindex = el.getAttribute('tabindex');
 			el.removeAttribute('tabindex');
 			requestAnimationFrame(() => {

package/src/grid/utils.ts

@@ -13,6 +13,7 @@ interface GridMapShared {
 		onCellAction?: (key: Key) => void;
 	};
 	shouldSelectOnPressUp?: boolean;
+	keyboardNavigationBehavior?: 'arrow' | 'tab';
 }
 
 // Used to share: