@octanejs/aria 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/aria",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "license": "MIT AND Apache-2.0",
   "type": "module",
   "sideEffects": [
@@ -53,10 +53,10 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "octane": "^0.1.51 || ^0.2.0"
+    "octane": "^0.1.51 || ^0.2.0 || ^0.3.0"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.69",
+    "@tsrx/react": "^0.3.0",
     "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.3.0"
   },
   "scripts": {
     "exports:check": "node scripts/check-react-aria-components-exports.mjs",

package/src/collections/CollectionBuilder.ts

@@ -80,7 +80,7 @@ export function CollectionBuilder<C extends BaseCollection<any>>(
 		null,
 		createElement(Hidden, {
 			target: document.getRootElement(),
-			children: createElement(CollectionDocumentContext.Provider, {
+			children: createElement(CollectionDocumentContext, {
 				value: document,
 				children: props.content,
 			}),
@@ -207,7 +207,7 @@ function useSSRCollectionNode<T extends Element>(
 			parentNode.ownerDocument.nodesByProps.set(props, element);
 		}
 
-		return children ? createElement(SSRContext.Provider, { value: element, children }) : null;
+		return children ? createElement(SSRContext, { value: element, children }) : null;
 	}
 
 	// The placeholder tag is the node type (`<item>`/`<section>`-style) — a valid
@@ -240,7 +240,7 @@ export function createLeafComponent<T, P extends object, E extends Element>(
 			null,
 			(node) =>
 				// Forward FocusableContext to real DOM tree so tooltips work.
-				createElement(FocusableContext.Provider, {
+				createElement(FocusableContext, {
 					value: focusableProps,
 					children: createElement(Component, { node }),
 				}),
@@ -312,7 +312,7 @@ export function Collection<T>(props: CollectionProps<T>): any {
 		subSlot(slot, 'ctx'),
 	);
 
-	return createElement(CollectionContext.Provider, { value: ctx, children });
+	return createElement(CollectionContext, { value: ctx, children });
 }
 
 function CollectionRoot(props: { children: any }): any {
@@ -320,9 +320,9 @@ function CollectionRoot(props: { children: any }): any {
 	let doc = useContext(CollectionDocumentContext);
 	let wrappedChildren = useMemo(
 		() =>
-			createElement(CollectionDocumentContext.Provider, {
+			createElement(CollectionDocumentContext, {
 				value: null,
-				children: createElement(ShallowRenderContext.Provider, {
+				children: createElement(ShallowRenderContext, {
 					value: doc,
 					children: props.children,
 				}),
@@ -338,6 +338,6 @@ function CollectionRoot(props: { children: any }): any {
 	// container, so the placeholders land in the walked tree directly.
 	let isSSR = useIsSSR(subSlot(slot, 'ssr'));
 	return isSSR
-		? createElement(SSRContext.Provider, { value: doc, children: wrappedChildren })
+		? createElement(SSRContext, { value: doc, children: wrappedChildren })
 		: wrappedChildren;
 }

package/src/collections/Hidden.ts

@@ -35,7 +35,7 @@ export function Hidden(props: { children: any; target?: Element | null }): any {
 		return props.children;
 	}
 
-	let children = createElement(HiddenContext.Provider, {
+	let children = createElement(HiddenContext, {
 		value: true,
 		children: props.children,
 	});

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/Breadcrumbs.ts

@@ -80,7 +80,7 @@ export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>): any {
 				slot: props.slot || undefined,
 				style: props.style,
 				className: props.className ?? 'react-aria-Breadcrumbs',
-				children: createElement(BreadcrumbsContext.Provider, {
+				children: createElement(BreadcrumbsContext, {
 					value: props,
 					children: createElement(CollectionRoot, { collection }),
 				}),
@@ -161,7 +161,7 @@ export const Breadcrumb: (props: BreadcrumbProps & { ref?: any }) => any = creat
 			ref,
 			'data-disabled': isDisabled || isCurrent || undefined,
 			'data-current': isCurrent || undefined,
-			children: createElement(LinkContext.Provider, {
+			children: createElement(LinkContext, {
 				value: linkProps as any,
 				children: renderProps.children,
 			}),

package/src/components/Button.ts

@@ -183,7 +183,7 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(
 		'data-focused': isFocused || undefined,
 		'data-pending': isPending || undefined,
 		'data-focus-visible': isFocusVisible || undefined,
-		children: createElement(ProgressBarContext.Provider, {
+		children: createElement(ProgressBarContext, {
 			value: { id: progressId },
 			children: renderProps.children,
 		}),

package/src/components/Calendar.tsx

@@ -523,9 +523,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as any)(function CalendarG
 	let DOMProps = filterDOMProps(props, { global: true });
 
 	return (
-		<InternalCalendarGridContext.Provider
-			value={{ headerProps, weekDays, startDate, weeksInMonth }}
-		>
+		<InternalCalendarGridContext value={{ headerProps, weekDays, startDate, weeksInMonth }}>
 			<dom.table
 				render={props.render}
 				{...mergeProps(DOMProps, gridProps)}
@@ -545,7 +543,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as any)(function CalendarG
 					</>
 				)}
 			</dom.table>
-		</InternalCalendarGridContext.Provider>
+		</InternalCalendarGridContext>
 	);
 });
 

package/src/components/Checkbox.ts

@@ -496,7 +496,7 @@ export function Checkbox(props: CheckboxProps): any {
 	);
 	let [aria, inputRef] = useCheckboxAria(props, userProvidedInputRef, subSlot(slot, 'aria'));
 
-	return createElement(InternalCheckboxContext.Provider, {
+	return createElement(InternalCheckboxContext, {
 		value: {
 			...aria,
 			inputRef,

package/src/components/ColorSwatchPicker.tsx

@@ -96,7 +96,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
 			}}
 			disallowEmptySelection
 		>
-			<ColorMapContext.Provider value={colorMap}>{props.children}</ColorMapContext.Provider>
+			<ColorMapContext value={colorMap}>{props.children}</ColorMapContext>
 		</ListBox>
 	);
 });
@@ -169,7 +169,7 @@ export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(
 			style={wrap(props.style)}
 		>
 			{composeRenderProps(wrap(props.children), (children) => (
-				<ColorSwatchContext.Provider value={{ color }}>{children}</ColorSwatchContext.Provider>
+				<ColorSwatchContext value={{ color }}>{children}</ColorSwatchContext>
 			))}
 		</ListBoxItem>
 	);

package/src/components/ComboBox.ts

@@ -162,7 +162,7 @@ export const ComboBox: <T, M extends SelectionMode = 'single'>(
 	} = props;
 	let content = useMemo(
 		() =>
-			createElement(ListBoxContext.Provider, {
+			createElement(ListBoxContext, {
 				value: { items: props.items ?? props.defaultItems },
 				children:
 					typeof children === 'function' && !isChildrenBlock(children)

package/src/components/Disclosure.ts

@@ -99,7 +99,7 @@ export function DisclosureGroup(props: DisclosureGroupProps): any {
 		...renderProps,
 		ref,
 		'data-disabled': props.isDisabled || undefined,
-		children: createElement(DisclosureGroupStateContext.Provider, {
+		children: createElement(DisclosureGroupStateContext, {
 			value: state,
 			children: renderProps.children,
 		}),

package/src/components/Form.ts

@@ -54,9 +54,9 @@ export function Form(props: FormProps): any {
 		...domProps,
 		ref,
 		className: className || 'react-aria-Form',
-		children: createElement(FormContext.Provider, {
+		children: createElement(FormContext, {
 			value: { ...props, validationBehavior },
-			children: createElement(FormValidationContext.Provider, {
+			children: createElement(FormValidationContext, {
 				value: validationErrors ?? {},
 				children,
 			}),

package/src/components/ListBox.ts

@@ -530,7 +530,7 @@ function ListBoxSectionInner<T>(
 	return createElement(dom.section, {
 		...mergeProps(DOMProps, renderProps, groupProps),
 		ref,
-		children: createElement(HeaderContext.Provider, {
+		children: createElement(HeaderContext, {
 			value: { ...headingProps, ref: headingRef },
 			children: createElement(CollectionBranch, {
 				collection: state.collection,

package/src/components/Meter.ts

@@ -94,7 +94,7 @@ export function Meter(props: MeterProps): any {
 		...mergeProps(DOMProps, renderProps, meterProps),
 		ref,
 		slot: props.slot || undefined,
-		children: createElement(LabelContext.Provider, {
+		children: createElement(LabelContext, {
 			value: { ...labelProps, ref: labelRef, elementType: 'span' },
 			children: renderProps.children,
 		}),

package/src/components/Popover.ts

@@ -292,7 +292,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 			let children = renderProps.children;
 			if (clearContexts) {
 				for (let Context of clearContexts) {
-					children = createElement((Context as any).Provider, { value: null, children });
+					children = createElement(Context as any, { value: null, children });
 				}
 			}
 			return children;
@@ -353,7 +353,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 			'data-exiting': isExiting || undefined,
 		},
 		!props.isNonModal ? createElement(DismissButton, { onDismiss: state.close }) : null,
-		createElement(OverlayArrowContext.Provider, {
+		createElement(OverlayArrowContext, {
 			value: { ...arrowProps, placement, ref: arrowRef } as any,
 			children,
 		}),
@@ -381,7 +381,7 @@ function PopoverInner(allProps: PopoverInnerProps): any {
 			createElement('div', {
 				ref: containerRef,
 				style: { display: 'contents' },
-				children: createElement(PopoverGroupContext.Provider, {
+				children: createElement(PopoverGroupContext, {
 					value: containerRef,
 					children: overlay,
 				}),

package/src/components/ProgressBar.ts

@@ -112,7 +112,7 @@ export function ProgressBar(props: ProgressBarProps): any {
 		...mergeProps(DOMProps, renderProps, progressBarProps),
 		ref,
 		slot: props.slot || undefined,
-		children: createElement(LabelContext.Provider, {
+		children: createElement(LabelContext, {
 			value: { ...labelProps, ref: labelRef, elementType: 'span' },
 			children: renderProps.children,
 		}),

package/src/components/RadioGroup.ts

@@ -370,7 +370,7 @@ export function Radio(props: RadioProps): any {
 		subSlot(slot, 'radio'),
 	);
 
-	return createElement(InternalRadioContext.Provider, {
+	return createElement(InternalRadioContext, {
 		value: { ...aria, inputRef, defaultClassName: 'react-aria-Radio' },
 		children: createElement(RadioButton, { ...props, ref } as any),
 	});

package/src/components/Select.ts

@@ -505,7 +505,7 @@ export const SelectValue: <T>(props: SelectValueProps<T> & { ref?: any }) => any
 			...renderProps,
 			'data-placeholder': state.selectedItems.length === 0 || undefined,
 			// clear description and error message slots
-			children: createElement(TextContext.Provider, {
+			children: createElement(TextContext, {
 				value: undefined,
 				children: renderProps.children,
 			}),

package/src/components/SharedElementTransition.ts

@@ -35,7 +35,7 @@ export interface SharedElementTransitionProps {
 export function SharedElementTransition(props: SharedElementTransitionProps): any {
 	const slot = S('SharedElementTransition');
 	let ref = useRef<{ [name: string]: Snapshot }>({}, subSlot(slot, 'scope'));
-	return createElement(SharedElementContext.Provider, { value: ref, children: props.children });
+	return createElement(SharedElementContext, { value: ref, children: props.children });
 }
 
 export interface SharedElementRenderProps {

package/src/components/Table.ts

@@ -615,7 +615,7 @@ export function ResizableTableContainer(props: ResizableTableContainerProps & {
 		className: props.className || 'react-aria-ResizableTableContainer',
 		style: props.style,
 		onScroll: (props as any).onScroll,
-		children: createElement(ResizableTableContainerContext.Provider, {
+		children: createElement(ResizableTableContainerContext, {
 			value: ctx,
 			children: props.children,
 		}),
@@ -715,7 +715,7 @@ export function Table(props: TableProps): any {
 		subSlot(slot, 'options'),
 	);
 
-	let content = createElement(TableOptionsContext.Provider, {
+	let content = createElement(TableOptionsContext, {
 		value: ctx,
 		children: createElement(Collection, props as any),
 	});
@@ -2361,7 +2361,7 @@ export const Cell: (props: CellProps & { ref?: any }) => any = /*#__PURE__*/ cre
 			'data-level': row.level + 1,
 			'data-tree-column': cell.column!.key === state.treeColumn || undefined,
 			'data-disabled': isDisabled || undefined,
-			children: createElement(CollectionRendererContext.Provider, {
+			children: createElement(CollectionRendererContext, {
 				value: DefaultCollectionRenderer,
 				children: renderProps.children,
 			}),

package/src/components/Tabs.ts

@@ -471,7 +471,7 @@ export const Tab: (props: TabProps & { ref?: any }) => any = createLeafComponent
 			'data-focus-visible': isFocusVisible || undefined,
 			'data-pressed': isPressed || undefined,
 			'data-hovered': isHovered || undefined,
-			children: createElement(SelectionIndicatorContext.Provider, {
+			children: createElement(SelectionIndicatorContext, {
 				value: { isSelected },
 				children: renderProps.children,
 			}),
@@ -679,7 +679,7 @@ function TabPanelInner(
 				[TabsContext, null],
 				[TabListStateContext, null],
 			] as any,
-			children: createElement(CollectionRendererContext.Provider, {
+			children: createElement(CollectionRendererContext, {
 				value: DefaultCollectionRenderer,
 				children: renderProps.children,
 			}),

package/src/components/TagGroup.ts

@@ -134,7 +134,7 @@ export function TagGroup(props: TagGroupProps): any {
 	const slot = S('TagGroup');
 	let ref: any;
 	[props, ref] = useContextProps(props, (props as any).ref, TagGroupContext, subSlot(slot, 'ctx'));
-	return createElement(ListStateContext.Provider, {
+	return createElement(ListStateContext, {
 		value: null,
 		children: createElement(CollectionBuilder, {
 			content: props.children,

package/src/components/Toast.tsx

@@ -142,7 +142,7 @@ const ToastRegion = /*#__PURE__*/ (forwardRef as any)(function ToastRegion<T>(
 	let DOMProps = filterDOMProps(props, { global: true });
 
 	let region = (
-		<ToastStateContext.Provider value={state}>
+		<ToastStateContext value={state}>
 			<dom.div
 				{...mergeProps(DOMProps, renderProps, regionProps, focusProps, hoverProps)}
 				dir={direction}
@@ -164,7 +164,7 @@ const ToastRegion = /*#__PURE__*/ (forwardRef as any)(function ToastRegion<T>(
 					props.children
 				)}
 			</dom.div>
-		</ToastStateContext.Provider>
+		</ToastStateContext>
 	);
 
 	return state.visibleToasts.length > 0 && portalContainer

package/src/components/ToggleButton.ts

@@ -139,7 +139,7 @@ export function ToggleButton(props: ToggleButtonProps): any {
 		'data-selected': isSelected || undefined,
 		'data-hovered': isHovered || undefined,
 		'data-focus-visible': isFocusVisible || undefined,
-		children: createElement(SelectionIndicatorContext.Provider, {
+		children: createElement(SelectionIndicatorContext, {
 			value: { isSelected },
 			children: renderProps.children,
 		}),

package/src/components/ToggleButtonGroup.ts

@@ -98,7 +98,7 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): any {
 		slot: props.slot || undefined,
 		'data-orientation': props.orientation || 'horizontal',
 		'data-disabled': props.isDisabled || undefined,
-		children: createElement(ToggleGroupStateContext.Provider, {
+		children: createElement(ToggleGroupStateContext, {
 			value: state,
 			children: createElement(SharedElementTransition, { children: renderProps.children }),
 		}),

package/src/components/Tooltip.ts

@@ -239,7 +239,7 @@ function TooltipInner(
 		'data-placement': placement ?? undefined,
 		'data-entering': isEntering || undefined,
 		'data-exiting': props.isExiting || undefined,
-		children: createElement(OverlayArrowContext.Provider, {
+		children: createElement(OverlayArrowContext, {
 			value: { ...arrowProps, placement, ref: arrowRef } as any,
 			children: renderProps.children,
 		}),

package/src/components/Tree.ts

@@ -765,7 +765,7 @@ export const TreeItemContent: (props: TreeItemContentProps) => any =
 				} as any,
 				subSlot(slot, 'render'),
 			);
-			return createElement(CollectionRendererContext.Provider, {
+			return createElement(CollectionRendererContext, {
 				value: DefaultCollectionRenderer,
 				children: renderProps.children,
 			});
@@ -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/components/Virtualizer.tsx

@@ -87,11 +87,11 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
 	);
 
 	return (
-		<CollectionRendererContext.Provider value={renderer}>
-			<VirtualizerOptionsContext.Provider value={{ layout, layoutOptions, shouldObserveItemSize }}>
+		<CollectionRendererContext value={renderer}>
+			<VirtualizerOptionsContext value={{ layout, layoutOptions, shouldObserveItemSize }}>
 				{children}
-			</VirtualizerOptionsContext.Provider>
-		</CollectionRendererContext.Provider>
+			</VirtualizerOptionsContext>
+		</CollectionRendererContext>
 	);
 }
 
@@ -141,9 +141,9 @@ function CollectionRoot({
 
 	return (
 		<div {...contentProps}>
-			<VirtualizerContext.Provider value={state}>
+			<VirtualizerContext value={state}>
 				{renderChildren(null, state.visibleViews, renderDropIndicator, shouldObserveItemSize)}
-			</VirtualizerContext.Provider>
+			</VirtualizerContext>
 		</div>
 	);
 }

package/src/components/utils.ts

@@ -50,7 +50,7 @@ interface ProviderProps<Contexts extends readonly Context<any>[]> {
 	children: ReactNode;
 }
 
-// No hooks (Provider nests plain Context.Provider descriptors), so no slot threading. The
+// No hooks (Provider nests plain Context descriptors), so no slot threading. The
 // descriptor `{ value, children }` shape stays stable per values entry (see aria memory
 // octane-provider-children-shape-flip).
 export function Provider<const Contexts extends readonly Context<any>[]>(
@@ -58,7 +58,7 @@ export function Provider<const Contexts extends readonly Context<any>[]>(
 ): any {
 	let { values, children } = props;
 	for (let [Context, value] of values) {
-		children = createElement((Context as any).Provider, { value, children });
+		children = createElement(Context, { value, children });
 	}
 
 	return children;

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/focus/FocusScope.ts

@@ -238,7 +238,7 @@ export function FocusScope(props: FocusScopeProps): any {
 	);
 
 	return createElement(
-		FocusContext.Provider,
+		FocusContext,
 		{ value },
 		createElement('span', { 'data-focus-scope-start': true, hidden: true, ref: startRef }),
 		children,

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/i18n/I18nProvider.ts

@@ -48,7 +48,7 @@ function I18nProviderWithLocale(props: I18nProviderWithLocaleProps): any {
 		subSlot(slot, 'value'),
 	);
 
-	return createElement(I18nContext.Provider, { value, children });
+	return createElement(I18nContext, { value, children });
 }
 
 interface I18nProviderWithDefaultLocaleProps {
@@ -63,7 +63,7 @@ function I18nProviderWithDefaultLocale(props: I18nProviderWithDefaultLocaleProps
 	let { children } = props;
 	let defaultLocale = useDefaultLocale(subSlot(slot, 'default'));
 
-	return createElement(I18nContext.Provider, { value: defaultLocale, children });
+	return createElement(I18nContext, { value: defaultLocale, children });
 }
 
 /**

package/src/interactions/PressResponder.ts

@@ -44,11 +44,11 @@ export function PressResponder(allProps: PressResponderProps): any {
 	context.ref = useObjectRef(ref || prevContext?.ref, subSlot(slot, 'ref'));
 	useSyncRef(prevContext, context.ref, subSlot(slot, 'sync'));
 
-	return createElement(PressResponderContext.Provider, { value: context, children });
+	return createElement(PressResponderContext, { value: context, children });
 }
 
 export function ClearPressResponder({ children }: { children: any }): any {
 	const slot = S('ClearPressResponder');
 	let context = useMemo(() => ({ register: () => {} }), [], subSlot(slot, 'context'));
-	return createElement(PressResponderContext.Provider, { value: context as any, children });
+	return createElement(PressResponderContext, { value: context as any, children });
 }

package/src/interactions/context.ts

@@ -1,6 +1,6 @@
 // Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/context.ts).
 // octane adaptations: React.createContext → octane createContext (octane's Context is
-// callable-as-Provider, `.Provider` stays as an identity alias, so consumers are unchanged);
+// is itself the provider component);
 // React's MutableRefObject type → a local structural alias; `displayName` is stamped through
 // a cast (octane's Context type doesn't declare it, but the runtime reads it for diagnostics).
 import type { FocusableElement } from '@react-types/shared';

package/src/interactions/useFocusable.ts

@@ -90,7 +90,7 @@ export function FocusableProvider(
 		ref: objRef,
 	};
 
-	return createElement(FocusableContext.Provider, { value: context, children });
+	return createElement(FocusableContext, { value: context, children });
 }
 
 export interface FocusableAria {

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/Overlay.ts

@@ -80,9 +80,9 @@ export function Overlay(props: OverlayProps): any {
 		});
 	}
 
-	contents = createElement(OverlayContext.Provider, {
+	contents = createElement(OverlayContext, {
 		value: contextValue as OverlayContextValue,
-		children: createElement(FocusableContext.Provider, {
+		children: createElement(FocusableContext, {
 			value: null,
 			children: createElement(ClearPressResponder, { children: contents }),
 		}),

package/src/overlays/PortalProvider.ts

@@ -24,7 +24,7 @@ export const PortalContext = createContext<PortalProviderContextValue>({});
 export function UNSAFE_PortalProvider(props: PortalProviderProps): any {
 	let { getContainer } = props;
 	let { getContainer: ctxGetContainer } = useUNSAFE_PortalContext();
-	return createElement(PortalContext.Provider, {
+	return createElement(PortalContext, {
 		value: {
 			getContainer: getContainer === null ? undefined : (getContainer ?? ctxGetContainer),
 		},

package/src/overlays/useModal.ts

@@ -71,7 +71,7 @@ export function ModalProvider(props: ModalProviderProps): any {
 		subSlot(slot, 'context'),
 	);
 
-	return createElement(Context.Provider, { value: context, children });
+	return createElement(Context, { value: context, children });
 }
 
 export interface ModalProviderAria {

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/utils/openLink.ts

@@ -65,7 +65,7 @@ export function RouterProvider(props: RouterProviderProps): any {
 		S('RouterProvider:ctx'),
 	);
 
-	return createElement(RouterContext.Provider, { value: ctx, children });
+	return createElement(RouterContext, { value: ctx, children });
 }
 
 export function useRouter(): Router {

package/src/virtualizer/VirtualizerItem.tsx

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