@octanejs/aria 0.0.46 → 0.0.47

package/src/components/ComboBox.ts

@@ -1,3 +1,4 @@
+import type { FocusableElement } from '@react-types/shared';
 // Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/ComboBox.tsx).
 // octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef —
 // `createHideableComponent` forwards `props.ref` positionally exactly like TextField; the
@@ -34,6 +35,7 @@ import { useResizeObserver } from '../utils/useResizeObserver';
 import { ButtonContext } from './Button';
 import { OverlayTriggerStateContext } from './Dialog';
 import { FieldErrorContext } from './FieldError';
+import { FieldInputContext } from './Autocomplete';
 import { FormContext } from './Form';
 import { GroupContext } from './Group';
 import { InputContext } from './Input';
@@ -186,7 +188,14 @@ export const ComboBox: <T, M extends SelectionMode = 'single'>(
 }) as any;
 
 // Contexts to clear inside the popover.
-const CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];
+const CLEAR_CONTEXTS = [
+	LabelContext,
+	ButtonContext,
+	InputContext,
+	FieldInputContext,
+	GroupContext,
+	TextContext,
+];
 
 interface ComboBoxInnerProps<T> {
 	props: ComboBoxProps<T, SelectionMode>;
@@ -226,6 +235,11 @@ function ComboBoxInner<T>({ props, collection, comboBoxRef: ref }: ComboBoxInner
 		!props['aria-label'] && !props['aria-labelledby'],
 		subSlot(slot, 'labelSlot'),
 	);
+	let [labelElementType, setLabelElementType] = useState<'span' | 'label'>(
+		'label',
+		subSlot(slot, 'labelElementType'),
+	);
+
 	let {
 		buttonProps,
 		inputProps,
@@ -242,6 +256,7 @@ function ComboBoxInner<T>({ props, collection, comboBoxRef: ref }: ComboBoxInner
 			inputRef,
 			buttonRef,
 			listBoxRef,
+			labelElementType,
 			popoverRef,
 			name: formValue === 'text' ? name : undefined,
 			validationBehavior,
@@ -334,9 +349,27 @@ function ComboBoxInner<T>({ props, collection, comboBoxRef: ref }: ComboBoxInner
 	return createElement(Provider, {
 		values: [
 			[ComboBoxStateContext, state],
-			[LabelContext, { ...labelProps, ref: labelRef }],
+			[LabelContext, { ...labelProps, elementType: labelElementType, ref: labelRef }],
 			[ButtonContext, { ...buttonProps, ref: buttonRef, isPressed: state.isOpen }],
 			[InputContext, { ...inputProps, ref: inputRef }],
+			[
+				FieldInputContext,
+				{
+					...inputProps,
+					ref: useCallback(
+						(el: FocusableElement) => {
+							inputRef.current = el as HTMLInputElement; // TODO: figure out how to fix non-input element types in useComboBox/useTextField
+							if (el) {
+								setLabelElementType(el.tagName.toLowerCase() === 'input' ? 'label' : 'span');
+							}
+						},
+						[],
+						subSlot(slot, 'fieldInputRef'),
+					),
+					value: state.inputValue,
+					onChange: (v: string) => state.setInputValue(v as string),
+				} as any,
+			],
 			[OverlayTriggerStateContext, state],
 			[
 				PopoverContext,

package/src/components/Dialog.ts

@@ -19,6 +19,7 @@ import type {
 import { PopoverContext } from './Popover';
 import { PressResponder } from '../interactions/PressResponder';
 import { RootMenuTriggerStateContext } from './Menu';
+import { TextContext } from './Text';
 import { useId } from '../utils/useId';
 import { useMenuTriggerState } from '../stately/menu/useMenuTriggerState';
 import { useOverlayTrigger } from '../overlays/useOverlayTrigger';
@@ -101,6 +102,7 @@ export function DialogTrigger(props: DialogTriggerProps): any {
 				{
 					trigger: 'DialogTrigger',
 					triggerRef: buttonRef,
+					id: overlayProps.id,
 					'aria-labelledby': (overlayProps as any)['aria-labelledby'],
 				},
 			],
@@ -122,7 +124,7 @@ export function Dialog(props: DialogProps): any {
 	let originalAriaLabelledby = props['aria-labelledby'];
 	let ref: any;
 	[props, ref] = useContextProps(props, (props as any).ref, DialogContext, subSlot(slot, 'ctx'));
-	let { dialogProps, titleProps } = useDialog(
+	let { dialogProps, titleProps, contentProps } = useDialog(
 		{
 			...props,
 			// Only pass aria-labelledby from props, not context.
@@ -177,6 +179,15 @@ export function Dialog(props: DialogProps): any {
 						},
 					},
 				],
+				[
+					TextContext,
+					{
+						slots: {
+							[DEFAULT_SLOT]: {},
+							description: contentProps,
+						},
+					},
+				],
 				[
 					ButtonContext,
 					{

package/src/components/DropZone.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource octane */
+import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 // Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/DropZone.tsx).
 /*
  * Copyright 2023 Adobe. All rights reserved.
@@ -154,8 +155,8 @@ export const DropZone = forwardRef(function DropZone(
 					while (target && nodeContains(dropzoneRef.current, target)) {
 						if (isFocusable(target)) {
 							break;
-						} else if (target === dropzoneRef.current) {
-							buttonRef.current?.focus();
+						} else if (target === dropzoneRef.current && buttonRef.current) {
+							focusWithoutScrolling(buttonRef.current);
 							break;
 						}
 

package/src/components/FileTrigger.tsx

@@ -84,6 +84,7 @@ export const FileTrigger = forwardRef(function FileTrigger(
 				className=""
 				type="file"
 				ref={inputRef}
+				onClick={(e: MouseEvent) => e.stopPropagation()}
 				style={{ display: 'none' }}
 				accept={acceptedFileTypes?.toString()}
 				onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSelect?.(e.currentTarget.files)}

package/src/components/GridList.ts

@@ -554,6 +554,13 @@ export interface GridListItemProps<T = object>
 	 * on the collection's `selectionBehavior` prop and the interaction modality.
 	 */
 	onAction?: () => void;
+	focusMode?: 'child' | 'row';
+	/**
+	 * Whether the row should support arrow key navigation even when the containing collection uses
+	 * tab keyboard navigation. Allows users to navigate between rows with arrow keys while
+	 * focus is on an interactive child element within the row.
+	 */
+	allowsArrowNavigation?: boolean;
 }
 
 /**
@@ -577,6 +584,8 @@ export const GridListItem: <T extends object = object>(
 		let { rowProps, gridCellProps, descriptionProps, ...states } = useGridListItem(
 			{
 				node: item!,
+				focusMode: props.focusMode,
+				allowsArrowNavigation: props.allowsArrowNavigation,
 				shouldSelectOnPressUp: !!dragState,
 				isVirtualized,
 			},
@@ -902,7 +911,7 @@ function RootDropIndicator(): any {
 
 export interface GridListLoadMoreItemProps
 	extends
-		Omit<LoadMoreSentinelProps, 'collection'>,
+		Omit<LoadMoreSentinelProps, 'collection' | 'direction'>,
 		StyleProps,
 		DOMRenderProps<'div', undefined>,
 		GlobalDOMAttributes {
@@ -945,7 +954,7 @@ export const GridListLoadMoreItem: (props: GridListLoadMoreItemProps & { ref?: a
 					sentinelRef,
 					scrollOffset,
 				}),
-				[onLoadMore, scrollOffset, state?.collection],
+				[onLoadMore, scrollOffset, sentinelRef, state?.collection],
 				subSlot(slot, 'loadMoreProps'),
 			);
 			useLoadMoreSentinel(

package/src/components/ListBox.ts

@@ -786,7 +786,7 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps): any {
 
 export interface ListBoxLoadMoreItemProps
 	extends
-		Omit<LoadMoreSentinelProps, 'collection'>,
+		Omit<LoadMoreSentinelProps, 'collection' | 'direction'>,
 		StyleProps,
 		DOMRenderProps<'div', undefined>,
 		GlobalDOMAttributes {

package/src/components/Menu.ts

@@ -145,6 +145,7 @@ export function MenuTrigger(props: MenuTriggerProps): any {
 					triggerRef: ref,
 					scrollRef,
 					placement: 'bottom start',
+					offset: props.trigger === 'contextMenu' ? 0 : undefined,
 					'aria-labelledby': (menuProps as any)['aria-labelledby'],
 				},
 			],

package/src/components/Meter.ts

@@ -65,6 +65,8 @@ export function Meter(props: MeterProps): any {
 	let { value = 0, minValue = 0, maxValue = 100 } = props;
 	value = clamp(value, minValue, maxValue);
 
+	let range = maxValue - minValue;
+
 	let [labelRef, label] = useSlot(
 		!props['aria-label'] && !props['aria-labelledby'],
 		subSlot(slot, 'labelSlot'),
@@ -72,7 +74,7 @@ export function Meter(props: MeterProps): any {
 	let { meterProps, labelProps } = useMeter({ ...props, label }, subSlot(slot, 'meter'));
 
 	// Calculate the width of the progress bar as a percentage
-	let percentage = ((value - minValue) / (maxValue - minValue)) * 100;
+	let percentage = range === 0 ? 0 : ((value - minValue) / range) * 100;
 
 	let renderProps = useRenderProps(
 		{

package/src/components/Popover.ts

@@ -100,6 +100,8 @@ export interface PopoverProps
 	 * @default document.body
 	 */
 	UNSTABLE_portalContainer?: Element;
+	/** Whether enter and exit animations should be skipped. */
+	shouldSkipAnimation?: boolean;
 	/**
 	 * The additional offset applied along the main axis between the element and its
 	 * anchor element.
@@ -138,6 +140,7 @@ export interface PopoverRenderProps {
 
 interface PopoverContextValue extends PopoverProps {
 	/** Contexts to clear. */
+	id?: string;
 	clearContexts?: Context<any>[];
 }
 
@@ -157,8 +160,8 @@ export function Popover(props: PopoverProps): any {
 	let localState = useOverlayTriggerState(props, subSlot(slot, 'state'));
 	let state =
 		props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-	let isExiting =
-		useExitAnimation(ref, state.isOpen, subSlot(slot, 'exit')) || props.isExiting || false;
+	let exitAnimation = useExitAnimation(ref, state.isOpen, subSlot(slot, 'exit'));
+	let isExiting = props.isExiting || (!props.shouldSkipAnimation && exitAnimation) || false;
 	let isHidden = useIsHidden();
 	let { direction } = useLocale(subSlot(slot, 'locale'));
 
@@ -198,10 +201,12 @@ interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderP
 	state: OverlayTriggerState;
 	isEntering?: boolean;
 	isExiting: boolean;
+	shouldSkipAnimation?: boolean;
 	UNSTABLE_portalContainer?: Element;
 	trigger?: string;
 	dir?: 'ltr' | 'rtl';
 	clearContexts?: Context<any>[];
+	id?: string;
 }
 
 function PopoverInner(allProps: PopoverInnerProps): any {
@@ -229,8 +234,9 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 	);
 
 	let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
-	let isEntering =
-		useEnterAnimation(ref, !!placement, subSlot(slot, 'enter')) || props.isEntering || false;
+	let enterAnimation = useEnterAnimation(ref, !!placement, subSlot(slot, 'enter'));
+	// oxlint-disable-next-line react/react-compiler
+	let isEntering = props.isEntering || (!props.shouldSkipAnimation && enterAnimation) || false;
 	let renderProps = useRenderProps(
 		{
 			...props,
@@ -247,8 +253,12 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 
 	// Automatically render Popover with role=dialog except when isNonModal is true,
 	// or a dialog is already nested inside the popover.
-	let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
-	let [isDialog, setDialog] = useState(false, subSlot(slot, 'isDialog'));
+	let shouldBeDialog =
+		!props.isNonModal || props.trigger === 'SubmenuTrigger' || props.trigger === 'PreviewTrigger';
+	let [isDialog, setDialog] = useState(
+		props.trigger === 'PreviewTrigger',
+		subSlot(slot, 'isDialog'),
+	);
 	useLayoutEffect(
 		() => {
 			if (ref.current) {
@@ -265,6 +275,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 		() => {
 			if (
 				isDialog &&
+				props.trigger !== 'PreviewTrigger' &&
 				(props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&
 				ref.current &&
 				!isFocusWithin(ref.current)
@@ -327,6 +338,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 		{
 			...mergeProps(filterDOMProps(props, { global: true }), popoverProps),
 			...renderProps,
+			id: isDialog ? props.id : undefined,
 			role: isDialog ? 'dialog' : undefined,
 			tabIndex: isDialog ? -1 : undefined,
 			'aria-label': props['aria-label'],
@@ -354,7 +366,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 			Overlay,
 			{
 				...props,
-				shouldContainFocus: isDialog,
+				shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
 				isExiting,
 				portalContainer: UNSTABLE_portalContainer,
 				// octane adaptation: children arrive positionally below.
@@ -380,7 +392,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 	// Submenus/subdialogs are mounted into the root popover's container.
 	return createElement(Overlay, {
 		...props,
-		shouldContainFocus: isDialog,
+		shouldContainFocus: isDialog && props.trigger !== 'PreviewTrigger',
 		isExiting,
 		portalContainer: UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined,
 		children: overlay,

package/src/components/PreviewTrigger.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource octane */
+import type { OctaneNode } from 'octane';
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria-components/src/PreviewTrigger.tsx).
+/*
+ * 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 permissions and limitations under the License.
+ */
+
+import {
+	AriaPreviewTriggerProps,
+	usePreviewTrigger,
+} from '../upstream-exports/react-aria/usePreviewTrigger';
+import { FocusableElement } from '@react-types/shared';
+import { FocusableProvider } from '../interactions/useFocusable';
+import { OverlayTriggerState } from '../upstream-exports/react-stately/useOverlayTriggerState';
+import { OverlayTriggerStateContext } from './Dialog';
+import { PopoverContext } from './Popover';
+import { Provider } from './utils';
+import React, { JSX, useMemo, useRef } from '../compat/react';
+import { useTooltipTriggerState } from '../upstream-exports/react-stately/useTooltipTriggerState';
+
+export interface PreviewTriggerProps extends AriaPreviewTriggerProps {
+	/** The trigger and Popover that make up the preview trigger. */
+	children: OctaneNode;
+	/**
+	 * The delay time in milliseconds before the preview opens.
+	 *
+	 * @default 600
+	 */
+	delay?: number;
+	/**
+	 * The delay time in milliseconds before the preview closes.
+	 *
+	 * @default 200
+	 */
+	closeDelay?: number;
+}
+
+/**
+ * A PreviewTrigger displays a non-modal popover on hover, focus, or long press. Unlike a tooltip,
+ * the popover may contain interactive content.
+ */
+export function PreviewTrigger(props: PreviewTriggerProps): JSX.Element {
+	let state = useTooltipTriggerState({
+		...props,
+		delay: props.delay ?? 600,
+		closeDelay: props.closeDelay ?? 200,
+	});
+	let triggerRef = useRef<FocusableElement>(null);
+	let popoverRef = useRef<HTMLElement>(null);
+	let { triggerProps, popoverProps } = usePreviewTrigger(
+		{ ...props, triggerRef, popoverRef },
+		state,
+	);
+
+	// The Popover and usePopover expect an OverlayTriggerState. Adapt the TooltipTriggerState (which
+	// provides the warmup/cooldown delay behavior) to that interface.
+	let overlayState = useMemo<OverlayTriggerState>(
+		() => ({
+			isOpen: state.isOpen,
+			open: () => state.open(),
+			close: () => state.close(),
+			setOpen: (isOpen) => (isOpen ? state.open() : state.close()),
+			toggle: () => (state.isOpen ? state.close() : state.open()),
+			point: null,
+			setPoint: () => {},
+		}),
+		[state],
+	);
+
+	return (
+		<Provider
+			values={[
+				[OverlayTriggerStateContext, overlayState],
+				[
+					PopoverContext,
+					{
+						trigger: 'PreviewTrigger',
+						triggerRef,
+						ref: popoverRef,
+						isNonModal: true,
+						// Skip enter/exit animations when swapping between previews during the warmup period.
+						shouldSkipAnimation: state.shouldSkipAnimation,
+						...popoverProps,
+					},
+				],
+			]}
+		>
+			<FocusableProvider {...triggerProps} ref={triggerRef}>
+				{props.children}
+			</FocusableProvider>
+		</Provider>
+	);
+}

package/src/components/ProgressBar.ts

@@ -83,8 +83,16 @@ export function ProgressBar(props: ProgressBarProps): any {
 	);
 
 	// Calculate the width of the progress bar as a percentage
-	let percentage = isIndeterminate ? undefined : ((value - minValue) / (maxValue - minValue)) * 100;
-
+	let range = maxValue - minValue;
+	// Calculate the width of the progress bar as a percentage
+	let percentage: number | undefined = undefined;
+	if (!isIndeterminate) {
+		if (range === 0) {
+			percentage = 0;
+		} else {
+			percentage = ((value - minValue) / range) * 100;
+		}
+	}
 	let renderProps = useRenderProps(
 		{
 			...props,

package/src/components/Select.ts

@@ -146,7 +146,7 @@ export interface SelectRenderProps {
 	isRequired: boolean;
 }
 
-export interface SelectProps<T, M extends SelectionMode = 'single'>
+export interface SelectProps<T = {}, M extends SelectionMode = 'single'>
 	extends
 		Omit<
 			AriaSelectProps<T, M>,

package/src/components/Table.ts

@@ -1308,6 +1308,13 @@ export interface ColumnProps
 	 * `<ResizableTableContainer>`.
 	 */
 	maxWidth?: ColumnStaticSize | null;
+	focusMode?: 'child' | 'cell';
+	/**
+	 * Whether the column should support arrow key navigation even when the containing table uses tab
+	 * keyboard navigation. Allows users to navigate between columns and rows with arrow keys while
+	 * focus is on an interactive child element within the column header.
+	 */
+	allowsArrowNavigation?: boolean;
 }
 
 class TableColumnNode extends CollectionNode<unknown> {
@@ -1337,7 +1344,12 @@ export const Column: (props: ColumnProps & { ref?: any }) => any =
 			let state = useContext(TableStateContext)!;
 			let { isVirtualized } = useContext(CollectionRendererContext);
 			let { columnHeaderProps, isPressed } = useTableColumnHeader(
-				{ node: column as GridNode<unknown>, isVirtualized },
+				{
+					node: column as GridNode<unknown>,
+					isVirtualized,
+					focusMode: props.focusMode,
+					allowsArrowNavigation: props.allowsArrowNavigation,
+				},
 				state,
 				ref,
 				subSlot(slot, 'columnHeader'),
@@ -1500,7 +1512,7 @@ export function ColumnResizer(props: ColumnResizerProps & { ref?: any }): any {
 	let { onResizeStart, onResize, onResizeEnd } = useContext(ResizableTableContainerContext)!;
 	let { column, triggerRef } = useContext(ColumnResizerContext)!;
 	let inputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'input'));
-	let { resizerProps, inputProps, isResizing } = useTableColumnResize(
+	let { resizerProps, inputProps, isResizing, isMouseResizing } = useTableColumnResize(
 		{
 			column,
 			'aria-label': props['aria-label'] || stringFormatter.format('tableResizer'),
@@ -1562,17 +1574,6 @@ export function ColumnResizer(props: ColumnResizerProps & { ref?: any }): any {
 		subSlot(slot, 'render'),
 	);
 
-	let [isMouseDown, setMouseDown] = useState(false, subSlot(slot, 'mouseDown'));
-	let onPointerDown = (e: PointerEvent) => {
-		if (e.pointerType === 'mouse') {
-			setMouseDown(true);
-		}
-	};
-
-	if (!isResizing && isMouseDown) {
-		setMouseDown(false);
-	}
-
 	let DOMProps = filterDOMProps(props, { global: true });
 
 	// Positional (non-array) children: the resizer content, the visually hidden input, and
@@ -1582,7 +1583,7 @@ export function ColumnResizer(props: ColumnResizerProps & { ref?: any }): any {
 		{
 			ref: objectRef,
 			role: 'presentation',
-			...mergeProps(DOMProps, renderProps, resizerProps, { onPointerDown }, hoverProps),
+			...mergeProps(DOMProps, renderProps, resizerProps, hoverProps),
 			'data-hovered': isHovered || undefined,
 			'data-focused': isFocused || undefined,
 			'data-focus-visible': isFocusVisible || undefined,
@@ -1591,9 +1592,10 @@ export function ColumnResizer(props: ColumnResizerProps & { ref?: any }): any {
 		},
 		renderProps.children,
 		createElement('input', { ref: inputRef, ...mergeProps(inputProps, focusProps) }),
-		isResizing && isMouseDown
+		isResizing && isMouseResizing
 			? createPortal(
 					createElement('div', {
+						'data-testid': 'cursor-overlay',
 						style: { position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor },
 					}),
 					document.body,
@@ -2250,6 +2252,13 @@ export interface CellProps extends RenderProps<CellRenderProps, 'td' | 'div'>, G
 	textValue?: string;
 	/** Indicates how many columns the data cell spans. */
 	colSpan?: number;
+	focusMode?: 'child' | 'cell';
+	/**
+	 * Whether the cell should support arrow key navigation even when the containing table uses
+	 * tab keyboard navigation. Allows users to navigate between cells and rows with arrow keys while
+	 * focus is on an interactive child element within the cell.
+	 */
+	allowsArrowNavigation?: boolean;
 }
 
 class TableCellNode extends CollectionNode<unknown> {
@@ -2285,6 +2294,8 @@ export const Cell: (props: CellProps & { ref?: any }) => any = /*#__PURE__*/ cre
 		let { gridCellProps, isPressed } = useTableCell(
 			{
 				node: cell,
+				focusMode: props.focusMode,
+				allowsArrowNavigation: props.allowsArrowNavigation,
 				shouldSelectOnPressUp: !!dragState,
 				isVirtualized,
 			},