@octanejs/aria 0.0.48 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/aria",
-  "version": "0.0.48",
+  "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.71",
+    "@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.8"
+    "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/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,
 			});

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/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/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/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/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 {