@octanejs/aria 0.0.4 → 0.0.5

package/src/components/Autocomplete.ts

@@ -0,0 +1,124 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Autocomplete.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; the component is a plain
+// function with the S()/subSlot component-slot convention (no ref — upstream Autocomplete
+// is not a forwardRef component; it renders no DOM of its own). React types → the binding's
+// ported equivalents. `FieldInputContext` keeps the exact Phase-4 value shape the field
+// primitives already consume — TextField/SearchField/NumberField pass it to
+// `useContextProps(props, inputRef, FieldInputContext as any, ...)`: the context's
+// `onChange`/`value` are VALUE-level members of the ported (native-event) AriaTextFieldProps
+// surface, so the merged props flow straight into useTextField, which wires onChange onto
+// octane's NATIVE `input` event. No synthetic onChange anywhere.
+import type {
+	AriaLabelingProps,
+	DOMProps,
+	FocusableElement,
+	Node,
+	ValueBase,
+} from '@react-types/shared';
+import { createContext, createElement, useRef } from 'octane';
+
+import { type AriaAutocompleteProps, useAutocomplete } from '../autocomplete/useAutocomplete';
+// octane adaptation: the ported NATIVE-event handler bags (upstream: FocusEvents/
+// KeyboardEvents from '@react-types/shared', typed over React synthetic events).
+import type { FocusEvents } from '../interactions/useFocus';
+import type { KeyboardEvents } from '../interactions/useKeyboard';
+import type { AriaTextFieldProps } from '../textfield/useTextField';
+import {
+	type AutocompleteState,
+	useAutocompleteState,
+} from '../stately/autocomplete/useAutocompleteState';
+import { mergeProps } from '../utils/mergeProps';
+import { S, subSlot } from '../internal';
+import {
+	type ContextValue,
+	Provider,
+	removeDataAttributes,
+	type SlotProps,
+	type SlottedContextValue,
+	useSlottedContext,
+} from './utils';
+
+export interface AutocompleteProps<T = object> extends AriaAutocompleteProps<T>, SlotProps {}
+export const AutocompleteContext =
+	createContext<SlottedContextValue<Partial<AutocompleteProps<any>>>>(null);
+export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
+
+export interface SelectableCollectionContextValue<T> extends DOMProps, AriaLabelingProps {
+	filter?: (nodeTextValue: string, node: Node<T>) => boolean;
+	/** Whether the collection items should use virtual focus instead of being focused directly. */
+	shouldUseVirtualFocus?: boolean;
+	/** Whether typeahead is disabled. */
+	disallowTypeAhead?: boolean;
+}
+interface FieldInputContextValue<T = FocusableElement>
+	extends
+		DOMProps,
+		FocusEvents<T>,
+		KeyboardEvents,
+		Pick<ValueBase<string>, 'onChange' | 'value'>,
+		Pick<
+			AriaTextFieldProps,
+			| 'enterKeyHint'
+			| 'aria-controls'
+			| 'aria-autocomplete'
+			| 'aria-activedescendant'
+			| 'spellCheck'
+			| 'autoCorrect'
+			| 'autoComplete'
+		> {}
+
+export const SelectableCollectionContext =
+	createContext<ContextValue<SelectableCollectionContextValue<any>, HTMLElement>>(null);
+export const FieldInputContext =
+	createContext<ContextValue<FieldInputContextValue, FocusableElement>>(null);
+
+/**
+ * An autocomplete allows users to search or filter a list of suggestions.
+ */
+export function Autocomplete<T>(props: AutocompleteProps<T>): any {
+	const slot = S('Autocomplete');
+	let ctx = useSlottedContext(AutocompleteContext, props.slot);
+	props = mergeProps(ctx, props) as AutocompleteProps<T>;
+	let { filter, disableAutoFocusFirst } = props;
+	let state = useAutocompleteState(props, subSlot(slot, 'state'));
+	let inputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'inputRef'));
+	let collectionRef = useRef<HTMLElement | null>(null, subSlot(slot, 'collectionRef'));
+	let {
+		inputProps,
+		collectionProps,
+		collectionRef: mergedCollectionRef,
+		filter: filterFn,
+	} = useAutocomplete(
+		{
+			...removeDataAttributes(props),
+			filter,
+			disableAutoFocusFirst,
+			inputRef,
+			collectionRef,
+		},
+		state,
+		subSlot(slot, 'autocomplete'),
+	);
+
+	return createElement(Provider, {
+		values: [
+			[AutocompleteStateContext, state],
+			[
+				FieldInputContext,
+				{
+					...inputProps,
+					ref: inputRef,
+				},
+			],
+			[
+				SelectableCollectionContext,
+				{
+					...collectionProps,
+					filter: filterFn,
+					ref: mergedCollectionRef,
+				},
+			],
+		] as any,
+		children: props.children,
+	});
+}

package/src/components/Breadcrumbs.ts

@@ -0,0 +1,170 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Breadcrumbs.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// is `props.ref`, passed into `useContextProps` explicitly and re-applied as the merged object
+// ref; the plain-`.ts` components use the S()/subSlot component-slot convention. The collection
+// composes the Phase-4 engine: `CollectionBuilder`/`createLeafComponent` from `../collections/
+// CollectionBuilder`, the renderer's `CollectionRoot` via `CollectionRendererContext`.
+// Upstream's RAC-local `CollectionProps` import is our `ItemCollectionProps` (see
+// ./Collection.ts). Upstream recreates `useBreadcrumbItem` inline (composition instead of a
+// built-in link) — kept verbatim, feeding `LinkContext`.
+import type { AriaLabelingProps, Key, Node } from '@react-types/shared';
+import { createContext, createElement, useContext } from 'octane';
+
+import { type AriaBreadcrumbsProps, useBreadcrumbs } from '../breadcrumbs/useBreadcrumbs';
+import { CollectionNode } from '../collections/BaseCollection';
+import { CollectionBuilder, createLeafComponent } from '../collections/CollectionBuilder';
+import { S, subSlot } from '../internal';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import { Collection, CollectionRendererContext, type ItemCollectionProps } from './Collection';
+import { LinkContext } from './Link';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type DOMRenderProps,
+	type RenderProps,
+	type SlotProps,
+	type StyleProps,
+	useContextProps,
+	useRenderProps,
+	useSlottedContext,
+} from './utils';
+
+// octane adaptation: structural bag (upstream's `GlobalDOMAttributes` drags React handler types).
+type GlobalDOMAttributes = Record<string, any>;
+
+export interface BreadcrumbsProps<T>
+	extends
+		Omit<ItemCollectionProps<T>, 'disabledKeys'>,
+		AriaBreadcrumbsProps,
+		StyleProps,
+		SlotProps,
+		AriaLabelingProps,
+		DOMRenderProps<'ol', undefined>,
+		GlobalDOMAttributes {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element.
+	 *
+	 * @default 'react-aria-Breadcrumbs'
+	 */
+	className?: string;
+	/** Whether the breadcrumbs are disabled. */
+	isDisabled?: boolean;
+	/** Handler that is called when a breadcrumb is clicked. */
+	onAction?: (key: Key) => void;
+}
+
+export const BreadcrumbsContext =
+	createContext<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>(null);
+
+/**
+ * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
+ */
+export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>): any {
+	const slot = S('Breadcrumbs');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, BreadcrumbsContext, subSlot(slot, 'ctx'));
+	let { CollectionRoot } = useContext(CollectionRendererContext);
+	let { navProps } = useBreadcrumbs(props, subSlot(slot, 'breadcrumbs'));
+	let DOMProps = filterDOMProps(props, { global: true, labelable: true });
+
+	return createElement(CollectionBuilder, {
+		content: createElement(Collection, props as any),
+		children: (collection: any) =>
+			createElement(dom.ol, {
+				render: props.render,
+				ref,
+				...mergeProps(DOMProps, navProps),
+				slot: props.slot || undefined,
+				style: props.style,
+				className: props.className ?? 'react-aria-Breadcrumbs',
+				children: createElement(BreadcrumbsContext.Provider, {
+					value: props,
+					children: createElement(CollectionRoot, { collection }),
+				}),
+			}),
+	});
+}
+
+export interface BreadcrumbRenderProps {
+	/**
+	 * Whether the breadcrumb is for the current page.
+	 *
+	 * @selector [data-current]
+	 */
+	isCurrent: boolean;
+	/**
+	 * Whether the breadcrumb is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+}
+
+export interface BreadcrumbProps
+	extends RenderProps<BreadcrumbRenderProps, 'li'>, AriaLabelingProps, GlobalDOMAttributes {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-Breadcrumb'
+	 */
+	className?: ClassNameOrFunction<BreadcrumbRenderProps>;
+	/**
+	 * A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is
+	 * pressed.
+	 */
+	id?: Key;
+}
+
+class BreadcrumbNode extends CollectionNode<unknown> {
+	static readonly type = 'item';
+}
+
+/**
+ * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
+ */
+export const Breadcrumb: (props: BreadcrumbProps & { ref?: any }) => any = createLeafComponent(
+	BreadcrumbNode,
+	// The third (node) parameter is declared so `render.length === 3` keeps the
+	// engine's "cannot be rendered outside a collection" guard; it is always
+	// provided when rendered from a collection node.
+	function Breadcrumb(props: BreadcrumbProps, ref: any, node?: Node<unknown>): any {
+		const slot = S('Breadcrumb');
+		// Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
+		let isCurrent = node!.nextKey == null;
+		let { isDisabled, onAction } = useSlottedContext(BreadcrumbsContext)!;
+		let linkProps = {
+			'aria-current': isCurrent ? 'page' : null,
+			isDisabled: isDisabled || isCurrent,
+			onPress: () => onAction?.(node!.key),
+		};
+
+		let renderProps = useRenderProps(
+			{
+				...node!.props,
+				children: node!.rendered,
+				values: { isDisabled: isDisabled || isCurrent, isCurrent },
+				defaultClassName: 'react-aria-Breadcrumb',
+			} as any,
+			subSlot(slot, 'render'),
+		);
+
+		let DOMProps = filterDOMProps(props as any, { global: true, labelable: true });
+		delete DOMProps.id;
+
+		return createElement(dom.li, {
+			...DOMProps,
+			...renderProps,
+			ref,
+			'data-disabled': isDisabled || isCurrent || undefined,
+			'data-current': isCurrent || undefined,
+			children: createElement(LinkContext.Provider, {
+				value: linkProps as any,
+				children: renderProps.children,
+			}),
+		});
+	},
+);

package/src/components/Button.ts

@@ -0,0 +1,209 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Button.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// arrives positionally from `createHideableComponent` (which forwards `props.ref`); the
+// plain-`.ts` component uses the S()/subSlot component-slot convention; `announce` comes from
+// the binding's live-announcer port; the explicit dep array on the pending-announcement effect
+// is preserved verbatim.
+import type { HoverEvents } from '@react-types/shared';
+import { createContext, createElement, useEffect, useRef } from 'octane';
+
+import { type AriaButtonProps, useButton } from '../button/useButton';
+import { createHideableComponent } from '../collections/Hidden';
+import { useFocusRing } from '../focus/useFocusRing';
+import { useHover } from '../interactions/useHover';
+import { S, subSlot } from '../internal';
+import { announce } from '../live-announcer/LiveAnnouncer';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import { useId } from '../utils/useId';
+import { ProgressBarContext } from './ProgressBar';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type RenderProps,
+	type SlotProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+
+// octane adaptation: structural bag (upstream's `GlobalDOMAttributes` drags React handler types).
+type GlobalDOMAttributes = Record<string, any>;
+
+export interface ButtonRenderProps {
+	/**
+	 * Whether the button is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the button is currently in a pressed state.
+	 *
+	 * @selector [data-pressed]
+	 */
+	isPressed: boolean;
+	/**
+	 * Whether the button is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the button is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the button is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the button is currently in a pending state.
+	 *
+	 * @selector [data-pending]
+	 */
+	isPending: boolean;
+}
+
+export interface ButtonProps
+	extends
+		Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>,
+		HoverEvents,
+		SlotProps,
+		RenderProps<ButtonRenderProps, 'button'>,
+		Omit<GlobalDOMAttributes, 'onClick'> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-Button'
+	 */
+	className?: ClassNameOrFunction<ButtonRenderProps>;
+	/**
+	 * Whether the button is in a pending state. This disables press and hover events
+	 * while retaining focusability, and announces the pending state to screen readers.
+	 */
+	isPending?: boolean;
+}
+
+interface ButtonContextValue extends ButtonProps {
+	isPressed?: boolean;
+}
+
+export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
+
+/**
+ * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
+ */
+export const Button = /*#__PURE__*/ createHideableComponent(function Button(
+	props: ButtonProps,
+	ref: any,
+) {
+	const slot = S('Button');
+	[props, ref] = useContextProps(props, ref, ButtonContext, subSlot(slot, 'ctx'));
+	let ctx = props as ButtonContextValue;
+	let { isPending } = ctx;
+	let { buttonProps, isPressed } = useButton(props, ref, subSlot(slot, 'button'));
+	buttonProps = useDisableInteractions(buttonProps, isPending);
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing(props, subSlot(slot, 'focusRing'));
+	let { hoverProps, isHovered } = useHover(
+		{
+			...props,
+			isDisabled: props.isDisabled || isPending,
+		},
+		subSlot(slot, 'hover'),
+	);
+	let renderValues = {
+		isHovered,
+		isPressed: (ctx.isPressed || isPressed) && !isPending,
+		isFocused,
+		isFocusVisible,
+		isDisabled: props.isDisabled || false,
+		isPending: isPending ?? false,
+	};
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: renderValues,
+			defaultClassName: 'react-aria-Button',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let buttonId = useId(buttonProps.id, subSlot(slot, 'buttonId'));
+	let progressId = useId(undefined, subSlot(slot, 'progressId'));
+
+	let ariaLabelledby = buttonProps['aria-labelledby'];
+	if (isPending) {
+		// aria-labelledby wins over aria-label
+		// https://www.w3.org/TR/accname-1.2/#computation-steps
+		if (ariaLabelledby) {
+			ariaLabelledby = `${ariaLabelledby} ${progressId}`;
+		} else if (buttonProps['aria-label']) {
+			ariaLabelledby = `${buttonId} ${progressId}`;
+		}
+	}
+
+	let wasPending = useRef(isPending, subSlot(slot, 'wasPending'));
+	useEffect(
+		() => {
+			let message = { 'aria-labelledby': ariaLabelledby || buttonId };
+			if (!wasPending.current && isFocused && isPending) {
+				announce(message, 'assertive');
+			} else if (wasPending.current && isFocused && !isPending) {
+				announce(message, 'assertive');
+			}
+			wasPending.current = isPending;
+		},
+		[isPending, isFocused, ariaLabelledby, buttonId],
+		subSlot(slot, 'announce'),
+	);
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.onClick;
+
+	return createElement(dom.button, {
+		...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
+		// When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
+		// We do this by changing the button's type to button.
+		type: buttonProps.type === 'submit' && isPending ? 'button' : buttonProps.type,
+		id: buttonId,
+		ref,
+		'aria-labelledby': ariaLabelledby,
+		slot: props.slot || undefined,
+		'aria-disabled': isPending ? 'true' : buttonProps['aria-disabled'],
+		'data-disabled': props.isDisabled || undefined,
+		'data-pressed': renderValues.isPressed || undefined,
+		'data-hovered': isHovered || undefined,
+		'data-focused': isFocused || undefined,
+		'data-pending': isPending || undefined,
+		'data-focus-visible': isFocusVisible || undefined,
+		children: createElement(ProgressBarContext.Provider, {
+			value: { id: progressId },
+			children: renderProps.children,
+		}),
+	});
+});
+
+// Events to preserve when isPending is true (for tooltips and other overlays)
+const PRESERVED_EVENT_PATTERN =
+	/Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
+
+// Not a hook (despite the upstream name): a plain per-render prop transform.
+function useDisableInteractions(props: any, isPending: boolean | undefined) {
+	if (isPending) {
+		for (const key in props) {
+			if (key.startsWith('on') && !PRESERVED_EVENT_PATTERN.test(key)) {
+				props[key] = undefined;
+			}
+		}
+		props.href = undefined;
+		props.target = undefined;
+	}
+	return props;
+}