@octanejs/aria 0.0.47 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/aria",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "license": "MIT AND Apache-2.0",
   "type": "module",
   "sideEffects": [
@@ -56,7 +56,7 @@
     "octane": "^0.1.51 || ^0.2.0"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.69",
+    "@tsrx/react": "^0.2.71",
     "esbuild": "^0.28.1",
     "react": "19.2.7",
     "react-aria": "3.51.0",
@@ -65,7 +65,7 @@
     "react-stately": "3.49.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "octane": "0.2.7"
+    "octane": "0.2.8"
   },
   "scripts": {
     "exports:check": "node scripts/check-react-aria-components-exports.mjs",

package/src/combobox/useComboBox.tsx

@@ -47,6 +47,7 @@ import {
 import { getActiveElement, getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
 import { getChildNodes } from '../upstream-exports/react-stately/private/collections/getChildNodes';
 import { getItemCount } from '../upstream-exports/react-stately/private/collections/getItemCount';
+import { withSlot } from 'octane';
 import { getItemId, listData } from '../listbox/utils';
 import { getOwnerDocument } from '../utils/domHelpers';
 import intlMessages from '../intl/combobox/index';
@@ -131,6 +132,10 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(
 	state: ComboBoxState<T, M>,
 	_slot?: symbol,
 ): ComboBoxAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useComboBox<T, M>, props, state);
+	}
+
 	let {
 		buttonRef,
 		popoverRef,

package/src/components/Tree.ts

@@ -1386,7 +1386,7 @@ export interface TreeSectionProps<T> extends SectionProps<T>, DOMRenderProps<'di
  * A TreeSection represents a section within a Tree.
  */
 export const TreeSection: <T extends object = object>(
-	props: GridListHeaderProps & { ref?: any },
+	props: TreeSectionProps<T> & { ref?: any },
 ) => any = /*#__PURE__*/ createBranchComponent(SectionNode, function TreeSection<
 	T,
 >(props: TreeSectionProps<T>, forwardedRef: any, item?: Node<T>): any {

package/src/dialog/useDialog.ts

@@ -61,7 +61,7 @@ export function useDialog(...args: any[]): DialogAria {
 	let titleId: string | undefined = useSlotId(undefined, subSlot(slot, 'title'));
 	titleId = props['aria-label'] ? undefined : titleId;
 
-	let contentId: string | undefined = useSlotId();
+	let contentId: string | undefined = useSlotId(undefined, subSlot(slot, 'content'));
 	contentId = role === 'alertdialog' && !props['aria-describedby'] ? contentId : undefined;
 
 	let isRefocusing = useRef(false, subSlot(slot, 'refocusing'));

package/src/grid/useGridCell.tsx

@@ -14,6 +14,7 @@ type DOMAttributes = Record<string, any>;
  */
 
 import { FocusableElement, Key, RefObject } from '@react-types/shared';
+import { withSlot } from 'octane';
 import { focusSafely } from '../interactions/focusSafely';
 import {
 	getActiveElement,
@@ -89,6 +90,10 @@ export function useGridCell<T, C extends GridCollection<T>>(
 	ref: RefObject<FocusableElement | null>,
 	_slot?: symbol,
 ): GridCellAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useGridCell<T, C>, props, state, ref);
+	}
+
 	let {
 		node,
 		isVirtualized,

package/src/gridlist/useGridListItem.tsx

@@ -27,6 +27,7 @@ import { getOwnerDocument } from '../utils/domHelpers';
 import { getRowId, listMap } from './utils';
 import { getScrollParent } from '../utils/getScrollParent';
 import { HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, useRef } from '../compat/react';
+import { withSlot } from 'octane';
 import { isFocusVisible } from '../interactions/useFocusVisible';
 import type { ListState } from '../upstream-exports/react-stately/useListState';
 import { mergeProps } from '../utils/mergeProps';
@@ -97,6 +98,10 @@ export function useGridListItem<T>(
 	ref: RefObject<FocusableElement | null>,
 	_slot?: symbol,
 ): GridListItemAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useGridListItem<T>, props, state, ref);
+	}
+
 	// Copied from useGridCell + some modifications to make it not so grid specific
 	let { node, isVirtualized, focusMode = 'row', allowsArrowNavigation } = props;
 
@@ -438,16 +443,12 @@ export function useGridListItem<T>(
 		rowProps.tabIndex = -1;
 	}
 
-	// we need to guard against space/enter triggering selection/row link via usePress (from itemProps) so check if propagation
-	// is stopped. this also fixes space not working in a textfield in a tree parent row
+	// Keep Space/Enter on a child control from reaching the row's usePress handler. With native
+	// events, stopPropagation() marks cancelBubble rather than exposing isPropagationStopped().
 	let baseOnKeyDown = rowProps.onKeyDown;
 	rowProps.onKeyDown = (e: ReactKeyboardEvent<FocusableElement>) => {
 		onKeyDown(e as ReactKeyboardEvent);
-		if (!(
-			'isPropagationStopped' in e &&
-			typeof e.isPropagationStopped === 'function' &&
-			e.isPropagationStopped()
-		)) {
+		if (!e.cancelBubble) {
 			baseOnKeyDown?.(e);
 		}
 	};

package/src/interactions/useKeyboard.ts

@@ -1,4 +1,3 @@
-import { chain } from '../utils/chain';
 import {
 	createKeyboardShortcutHandler,
 	type KeyboardShortcutBindings,
@@ -8,6 +7,7 @@ import { getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
 // octane adaptations:
 // - `KeyboardEvents` / `DOMAttributes` from '@react-types/shared' are typed over React's
 //   synthetic events; local structural aliases over native KeyboardEvent replace them.
+// - Shortcut and user callbacks share the BaseEvent wrapper so both have propagation controls.
 // - Public-hook slot threading (splitSlot) per the binding convention; no octane base hooks
 //   are composed here, so the slot is absorbed and unused.
 import type { BaseEvent } from './createEventHandler';
@@ -53,7 +53,8 @@ export function useKeyboard(...args: any[]): KeyboardResult {
 	let onKeyUp;
 	if (shortcuts) {
 		let shortcutHandler = createKeyboardShortcutHandler(shortcuts);
-		let shortcutOnKeyDown = createEventHandler<KeyboardEvent>((e) => {
+		onKeyDown = createEventHandler<KeyboardEvent>((e) => {
+			props.onKeyDown?.(e);
 			// If keyboard event didn't originate from a child of the current target,
 			// then it's a React event coming through a portal. We should ignore it.
 			if (!nodeContains(e.currentTarget as Node, getEventTarget(e) as Element)) {
@@ -67,7 +68,8 @@ export function useKeyboard(...args: any[]): KeyboardResult {
 
 			shortcutHandler(e);
 		});
-		let shortcutOnKeyUp = createEventHandler<KeyboardEvent>((e) => {
+		onKeyUp = createEventHandler<KeyboardEvent>((e) => {
+			props.onKeyUp?.(e);
 			// If keyboard event didn't originate from a child of the current target,
 			// then it's a React event coming through a portal. We should ignore it.
 			if (!nodeContains(e.currentTarget as Node, getEventTarget(e) as Element)) {
@@ -81,8 +83,6 @@ export function useKeyboard(...args: any[]): KeyboardResult {
 			// implement shortcut handler on keyup, what should the map be called? or should it be another syntax on shortcuts?
 			e.continuePropagation();
 		});
-		onKeyDown = props.onKeyDown ? chain(props.onKeyDown, shortcutOnKeyDown) : shortcutOnKeyDown;
-		onKeyUp = props.onKeyUp ? chain(props.onKeyUp, shortcutOnKeyUp) : shortcutOnKeyUp;
 	} else {
 		onKeyDown = createEventHandler(props.onKeyDown);
 		onKeyUp = createEventHandler(props.onKeyUp);

package/src/menu/useMenuTrigger.tsx

@@ -15,6 +15,7 @@ type KeyboardEvent = BaseEvent<globalThis.KeyboardEvent>;
  */
 
 import { AriaButtonProps } from '../button/useButton';
+import { withSlot } from 'octane';
 import { AriaMenuOptions } from './useMenu';
 import { FocusableElement, FocusStrategy, RefObject } from '@react-types/shared';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
@@ -63,6 +64,10 @@ export function useMenuTrigger<T>(
 	ref: RefObject<Element | null>,
 	_slot?: symbol,
 ): MenuTriggerAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useMenuTrigger<T>, props, state, ref);
+	}
+
 	let { type = 'menu', isDisabled, trigger = 'press' } = props;
 
 	let menuTriggerId = useId();

package/src/menu/useSubmenuTrigger.tsx

@@ -13,6 +13,7 @@
  */
 
 import { AriaMenuItemProps } from './useMenuItem';
+import { withSlot } from 'octane';
 import { AriaMenuOptions } from './useMenu';
 import type { AriaPopoverProps } from '../overlays/usePopover';
 import { FocusableElement, FocusStrategy, Node, PressEvent, RefObject } from '@react-types/shared';
@@ -93,6 +94,10 @@ export function useSubmenuTrigger<T>(
 	ref: RefObject<FocusableElement | null>,
 	_slot?: symbol,
 ): SubmenuTriggerAria<T> {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSubmenuTrigger<T>, props, state, ref);
+	}
+
 	let {
 		parentMenuRef,
 		submenuRef,

package/src/numberfield/useNumberField.tsx

@@ -42,7 +42,7 @@ import {
 	useState,
 } from '../compat/react';
 import { filterDOMProps } from '../utils/filterDOMProps';
-import { flushSync } from 'octane';
+import { flushSync, withSlot } from 'octane';
 import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import intlMessages from '../intl/numberfield/index';
 import { isAndroid, isIOS, isIPhone } from '../utils/platform';
@@ -110,6 +110,10 @@ export function useNumberField(
 	inputRef: RefObject<HTMLInputElement | null>,
 	_slot?: symbol,
 ): NumberFieldAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useNumberField, props, state, inputRef);
+	}
+
 	let {
 		id,
 		decrementAriaLabel,

package/src/overlays/useOverlay.tsx

@@ -14,6 +14,7 @@ type DOMAttributes = Record<string, any>;
  */
 
 import { RefObject } from '@react-types/shared';
+import { withSlot } from 'octane';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { isElementInChildOfActiveScope } from '../focus/FocusScope';
 import { useEffect, useRef } from '../compat/react';
@@ -73,6 +74,10 @@ export function useOverlay(
 	ref: RefObject<Element | null>,
 	_slot?: symbol,
 ): OverlayAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useOverlay, props, ref);
+	}
+
 	let {
 		onClose,
 		shouldCloseOnBlur,

package/src/radio/useRadioGroup.tsx

@@ -20,6 +20,7 @@ import {
 	InputDOMProps,
 	ValidationResult,
 } from '@react-types/shared';
+import { withSlot } from 'octane';
 import { filterDOMProps } from '../utils/filterDOMProps';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getFocusableTreeWalker } from '../focus/FocusScope';
@@ -62,6 +63,10 @@ export function useRadioGroup(
 	state: RadioGroupState,
 	_slot?: symbol,
 ): RadioGroupAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useRadioGroup, props, state);
+	}
+
 	let {
 		name,
 		form,

package/src/searchfield/useSearchField.tsx

@@ -14,6 +14,7 @@ type DOMAttributes = Record<string, any>;
  */
 
 import { AriaButtonProps } from '../button/useButton';
+import { withSlot } from 'octane';
 import { AriaTextFieldProps, useTextField } from '../textfield/useTextField';
 import { RefObject, ValidationResult } from '@react-types/shared';
 import { InputHTMLAttributes, LabelHTMLAttributes } from '../compat/react';
@@ -69,6 +70,10 @@ export function useSearchField(
 	inputRef: RefObject<HTMLInputElement | null>,
 	_slot?: symbol,
 ): SearchFieldAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSearchField, props, state, inputRef);
+	}
+
 	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/searchfield');
 	let { isDisabled, isReadOnly, onSubmit, onClear, type = 'search' } = props;
 

package/src/selection/useSelectableCollection.tsx

@@ -25,7 +25,7 @@ import {
 	KeyboardDelegate,
 	RefObject,
 } from '@react-types/shared';
-import { flushSync } from 'octane';
+import { flushSync, withSlot } from 'octane';
 import { FocusEvent, useEffect, useRef } from '../compat/react';
 import { focusSafely } from '../interactions/focusSafely';
 import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
@@ -153,6 +153,10 @@ export function useSelectableCollection(
 	options: AriaSelectableCollectionOptions,
 	_slot?: symbol,
 ): SelectableCollectionAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSelectableCollection, options);
+	}
+
 	let {
 		selectionManager: manager,
 		keyboardDelegate: delegate,

package/src/slider/useSliderThumb.tsx

@@ -18,6 +18,7 @@ import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
 import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { getSliderThumbId, sliderData } from './utils';
 import { mergeProps } from '../utils/mergeProps';
+import { withSlot } from 'octane';
 import React, {
 	ChangeEvent,
 	InputHTMLAttributes,
@@ -104,6 +105,10 @@ export function useSliderThumb(
 	state: SliderState,
 	_slot?: symbol,
 ): SliderThumbAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSliderThumb, opts, state);
+	}
+
 	let {
 		index = 0,
 		isRequired,

package/src/spinbutton/useSpinButton.tsx

@@ -14,6 +14,7 @@ type DOMAttributes = Record<string, any>;
  */
 
 import { announce, clearAnnouncer } from '../live-announcer/LiveAnnouncer';
+import { withSlot } from 'octane';
 
 import { AriaButtonProps } from '../button/useButton';
 import { InputBase, RangeInputBase, Validation, ValueBase } from '@react-types/shared';
@@ -44,6 +45,10 @@ export interface SpinbuttonAria {
 }
 
 export function useSpinButton(props: SpinButtonProps, _slot?: symbol): SpinbuttonAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useSpinButton, props);
+	}
+
 	const _async = useRef<number | undefined>(undefined);
 	let {
 		value,

package/src/table/useTableColumnResize.tsx

@@ -23,6 +23,7 @@ import { GridNode } from '../upstream-exports/react-stately/private/grid/GridCol
 import intlMessages from '../intl/table/index';
 import { mergeProps } from '../utils/mergeProps';
 import { TableColumnResizeState } from '../upstream-exports/react-stately/useTableState';
+import { withSlot } from 'octane';
 import { useDescription } from '../utils/useDescription';
 import { useEffectEvent } from '../utils/useEffectEvent';
 import { useId } from '../utils/useId';
@@ -87,6 +88,10 @@ export function useTableColumnResize<T>(
 	ref: RefObject<HTMLInputElement | null>,
 	_slot?: symbol,
 ): TableColumnResizeAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useTableColumnResize<T>, props, state, ref);
+	}
+
 	let {
 		column: item,
 		triggerRef,

package/src/tokenfield/useTokenField.tsx

@@ -43,7 +43,7 @@ import { useLayoutEffect } from '../utils/useLayoutEffect';
 import { useLocale } from '../i18n/I18nProvider';
 
 export interface AriaTokenFieldProps<T extends TokenFieldValue = TokenFieldValue>
-	extends TokenFieldProps<T>, AriaLabelingProps {
+	extends TokenFieldProps<T>, AriaLabelingProps, FocusableProps {
 	/**
 	 * The accessibility role of the token field.
 	 *

package/src/virtualizer/VirtualizerItem.tsx

@@ -36,6 +36,7 @@ export function VirtualizerItem(props: VirtualizerItemProps): JSX.Element {
 		layoutInfo,
 		virtualizer,
 		ref,
+		shouldObserveItemSize,
 	});
 
 	return (