@octanejs/aria 0.0.4 → 0.0.5

package/src/components/Disclosure.ts

@@ -0,0 +1,322 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Disclosure.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// is `props.ref` (Disclosure passes it into `useContextProps` explicitly; DisclosureGroup and
+// DisclosurePanel read it directly, DisclosurePanel merging it with the internal panel ref via
+// the binding's `mergeRefs`); the plain-`.ts` components use the S()/subSlot component-slot
+// convention. NOTE: `DOMProps` here is `@react-types/shared`'s (upstream imports it from
+// there in this module), NOT the RAC utils bag. Upstream's `GlobalDOMAttributes` and React's
+// `DOMAttributes` → structural records.
+import type { DOMProps, Key } from '@react-types/shared';
+import { createContext, createElement, useContext, useRef } from 'octane';
+
+import { type AriaDisclosureProps, useDisclosure } from '../disclosure/useDisclosure';
+import { useFocusRing } from '../focus/useFocusRing';
+import { S, subSlot } from '../internal';
+import type { LabelAriaProps } from '../label/useLabel';
+import {
+	type DisclosureGroupState,
+	type DisclosureGroupProps as StatelyDisclosureGroupProps,
+	useDisclosureGroupState,
+} from '../stately/disclosure/useDisclosureGroupState';
+import { type DisclosureState, useDisclosureState } from '../stately/disclosure/useDisclosureState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import { mergeRefs } from '../utils/mergeRefs';
+import { useId } from '../utils/useId';
+import { ButtonContext } from './Button';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	DEFAULT_SLOT,
+	dom,
+	Provider,
+	type RenderProps,
+	type SlotProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+
+// octane adaptations: structural bags (upstream's React attribute/handler types).
+type GlobalDOMAttributes = Record<string, any>;
+type DOMAttributes = Record<string, any>;
+type ReactNode = any;
+
+export interface DisclosureGroupProps
+	extends
+		StatelyDisclosureGroupProps,
+		RenderProps<DisclosureGroupRenderProps>,
+		DOMProps,
+		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-DisclosureGroup'
+	 */
+	className?: ClassNameOrFunction<DisclosureGroupRenderProps>;
+}
+
+export interface DisclosureGroupRenderProps {
+	/**
+	 * Whether the disclosure group is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the disclosure group.
+	 */
+	state: DisclosureGroupState;
+}
+
+export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
+
+/**
+ * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
+ * It supports both single and multiple expanded items.
+ */
+export function DisclosureGroup(props: DisclosureGroupProps): any {
+	const slot = S('DisclosureGroup');
+	let ref = (props as any).ref;
+	let state = useDisclosureGroupState(props, subSlot(slot, 'state'));
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			defaultClassName: 'react-aria-DisclosureGroup',
+			values: {
+				isDisabled: state.isDisabled,
+				state,
+			},
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let domProps = filterDOMProps(props, { global: true });
+
+	return createElement(dom.div, {
+		...domProps,
+		...renderProps,
+		ref,
+		'data-disabled': props.isDisabled || undefined,
+		children: createElement(DisclosureGroupStateContext.Provider, {
+			value: state,
+			children: renderProps.children,
+		}),
+	});
+}
+
+export interface DisclosureProps
+	extends
+		Omit<AriaDisclosureProps, 'children'>,
+		RenderProps<DisclosureRenderProps>,
+		SlotProps,
+		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-Disclosure'
+	 */
+	className?: ClassNameOrFunction<DisclosureRenderProps>;
+	/**
+	 * An id for the disclosure when used within a DisclosureGroup, matching the id used in
+	 * `expandedKeys`.
+	 */
+	id?: Key;
+}
+
+export interface DisclosureRenderProps {
+	/**
+	 * Whether the disclosure is expanded.
+	 *
+	 * @selector [data-expanded]
+	 */
+	isExpanded: boolean;
+	/**
+	 * Whether the disclosure has keyboard focus.
+	 *
+	 * @selector [data-focus-visible-within]
+	 */
+	isFocusVisibleWithin: boolean;
+	/**
+	 * Whether the disclosure is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the disclosure.
+	 */
+	state: DisclosureState;
+}
+
+export const DisclosureContext = createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);
+export const DisclosureStateContext = createContext<DisclosureState | null>(null);
+
+interface InternalDisclosureContextValue {
+	panelProps: DOMAttributes;
+	panelRef: { current: HTMLDivElement | null };
+}
+
+const InternalDisclosureContext = createContext<InternalDisclosureContextValue | null>(null);
+
+/**
+ * A disclosure is a collapsible section of content. It is composed of a a header with a heading and
+ * trigger button, and a panel that contains the content.
+ */
+export function Disclosure(props: DisclosureProps): any {
+	const slot = S('Disclosure');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, DisclosureContext, subSlot(slot, 'ctx'));
+	let groupState = useContext(DisclosureGroupStateContext)!;
+	let { id, ...otherProps } = props;
+
+	// Generate an id if one wasn't provided.
+	// (can't pass id into useId since it can also be a number)
+	let defaultId = useId(subSlot(slot, 'defaultId'));
+	id ||= defaultId;
+
+	let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+	let state = useDisclosureState(
+		{
+			...props,
+			isExpanded,
+			onExpandedChange(isExpanded) {
+				if (groupState) {
+					groupState.toggleKey(id);
+				}
+
+				props.onExpandedChange?.(isExpanded);
+			},
+		},
+		subSlot(slot, 'state'),
+	);
+
+	let panelRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'panelRef'));
+	let isDisabled = props.isDisabled || groupState?.isDisabled || false;
+	let { buttonProps, panelProps } = useDisclosure(
+		{
+			...props,
+			isExpanded,
+			isDisabled,
+		},
+		state,
+		panelRef,
+		subSlot(slot, 'disclosure'),
+	);
+	let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = useFocusRing(
+		{
+			within: true,
+		},
+		subSlot(slot, 'focusRing'),
+	);
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			id: undefined,
+			defaultClassName: 'react-aria-Disclosure',
+			values: {
+				isExpanded: state.isExpanded,
+				isDisabled,
+				isFocusVisibleWithin,
+				state,
+			},
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let domProps = filterDOMProps(otherProps, { global: true });
+
+	return createElement(Provider, {
+		values: [
+			[
+				ButtonContext,
+				{
+					slots: {
+						[DEFAULT_SLOT]: {},
+						trigger: buttonProps,
+					},
+				},
+			],
+			[InternalDisclosureContext, { panelProps, panelRef }],
+			[DisclosureStateContext, state],
+		] as any,
+		children: createElement(dom.div, {
+			...mergeProps(domProps, renderProps, focusWithinProps),
+			ref,
+			'data-expanded': state.isExpanded || undefined,
+			'data-disabled': isDisabled || undefined,
+			'data-focus-visible-within': isFocusVisibleWithin || undefined,
+			children: renderProps.children,
+		}),
+	});
+}
+
+export interface DisclosurePanelRenderProps {
+	/**
+	 * Whether keyboard focus is within the disclosure panel.
+	 *
+	 * @selector [data-focus-visible-within]
+	 */
+	isFocusVisibleWithin: boolean;
+}
+
+export interface DisclosurePanelProps
+	extends RenderProps<DisclosurePanelRenderProps>, DOMProps, LabelAriaProps, 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-DisclosurePanel'
+	 */
+	className?: ClassNameOrFunction<DisclosurePanelRenderProps>;
+	/**
+	 * The accessibility role for the disclosure's panel.
+	 *
+	 * @default 'group'
+	 */
+	role?: 'group' | 'region';
+	/**
+	 * The children of the component.
+	 */
+	children: ReactNode;
+}
+
+/**
+ * A DisclosurePanel provides the content for a disclosure.
+ */
+export function DisclosurePanel(props: DisclosurePanelProps): any {
+	const slot = S('DisclosurePanel');
+	let ref = (props as any).ref;
+	let { role = 'group' } = props;
+	let { panelProps, panelRef } = useContext(InternalDisclosureContext)!;
+	let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = useFocusRing(
+		{
+			within: true,
+		},
+		subSlot(slot, 'focusRing'),
+	);
+	let renderProps = useRenderProps(
+		{
+			...props,
+			defaultClassName: 'react-aria-DisclosurePanel',
+			values: {
+				isFocusVisibleWithin,
+			},
+		},
+		subSlot(slot, 'render'),
+	);
+	let DOMProps = filterDOMProps(props, { global: true, labelable: true });
+	return createElement(dom.div, {
+		...mergeProps(DOMProps, renderProps, panelProps, focusWithinProps),
+		ref: mergeRefs(ref, panelRef),
+		role,
+		'data-focus-visible-within': isFocusVisibleWithin || undefined,
+		children: createElement(Provider, {
+			values: [[ButtonContext, null]] as any,
+			children: props.children,
+		}),
+	});
+}

package/src/components/DragAndDrop.ts

@@ -0,0 +1,177 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/DragAndDrop.tsx).
+// PHASE-7: the dnd ENGINE stays unported — the engine-referencing types
+// (DraggableCollectionState, DroppableCollectionState, AriaDropIndicatorProps) come from
+// the structural aliases in './useDragAndDrop'. This module ports the CONTEXT layer the
+// collection components compose: the contexts, DropIndicator, useDndPersistedKeys, and
+// useRenderDropIndicator (all inert until a consumer passes `dragAndDropHooks`, which
+// nothing can construct before Phase 7).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — DropIndicator
+// receives the forwarded ref as `props.ref` and passes it to the context render function;
+// public hooks get the binding's slot threading (splitSlot/subSlot); `ReactNode`/
+// `ForwardedRef` → structural aliases; explicit dep arrays preserved verbatim (including
+// upstream's eslint-annotated `[dropState?.target, ...]` invalidation array).
+import type { ItemDropTarget, Key } from '@react-types/shared';
+import { createElement, useCallback, useContext, useMemo, createContext } from 'octane';
+
+import type { ClassNameOrFunction, RenderProps } from './utils';
+import type {
+	AriaDropIndicatorProps,
+	DragAndDropHooks,
+	DraggableCollectionState,
+	DroppableCollectionState,
+} from './useDragAndDrop';
+import type { MultipleSelectionManager } from '../stately/selection/types';
+import { S, splitSlot, subSlot } from '../internal';
+
+// octane adaptations: structural aliases for the React types upstream drags along.
+type ReactNode = any;
+type ForwardedRef<T> = any;
+
+export interface DragAndDropContextValue {
+	dragAndDropHooks?: DragAndDropHooks;
+	dragState?: DraggableCollectionState;
+	dropState?: DroppableCollectionState;
+}
+
+export const DragAndDropContext = createContext<DragAndDropContextValue>({});
+export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
+
+export interface DropIndicatorRenderProps {
+	/**
+	 * Whether the drop indicator is currently the active drop target.
+	 *
+	 * @selector [data-drop-target]
+	 */
+	isDropTarget: boolean;
+}
+
+export interface DropIndicatorProps
+	extends Omit<AriaDropIndicatorProps, 'activateButtonRef'>, RenderProps<DropIndicatorRenderProps> {
+	/**
+	 * 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-DropIndicator'
+	 */
+	className?: ClassNameOrFunction<DropIndicatorRenderProps>;
+}
+interface DropIndicatorContextValue {
+	render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode;
+}
+
+/**
+ * A DropIndicator is rendered between items in a collection to indicate where dropped data will be
+ * inserted.
+ */
+// octane adaptation: no forwardRef — the forwarded ref arrives as `props.ref` and is split
+// off before handing the remaining props to the context render function, preserving
+// upstream's `render(props, ref)` contract.
+export function DropIndicator(
+	props: DropIndicatorProps & { ref?: ForwardedRef<HTMLElement> },
+): any {
+	let { render } = useContext(DropIndicatorContext)!;
+	let { ref, ...otherProps } = props as any;
+	return render(otherProps, ref);
+}
+
+type RenderDropIndicatorRetValue = ((target: ItemDropTarget) => ReactNode | undefined) | undefined;
+
+export function useRenderDropIndicator(
+	dragAndDropHooks?: DragAndDropHooks,
+	dropState?: DroppableCollectionState,
+): RenderDropIndicatorRetValue;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useRenderDropIndicator(
+	dragAndDropHooks: DragAndDropHooks | undefined,
+	dropState: DroppableCollectionState | undefined,
+	slot: symbol | undefined,
+): RenderDropIndicatorRetValue;
+export function useRenderDropIndicator(...args: any[]): RenderDropIndicatorRetValue {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useRenderDropIndicator');
+	const dragAndDropHooks = user[0] as DragAndDropHooks | undefined;
+	const dropState = user[1] as DroppableCollectionState | undefined;
+
+	let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
+	let isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.();
+	let fn = useCallback(
+		(target: ItemDropTarget) => {
+			// Only show drop indicators when virtual dragging or this is the current drop target.
+			if (isVirtualDragging || dropState?.isDropTarget(target)) {
+				return renderDropIndicator
+					? renderDropIndicator(target)
+					: createElement(DropIndicator, { target });
+			}
+		},
+		// We invalidate whenever the target changes.
+		[dropState?.target, isVirtualDragging, renderDropIndicator],
+		subSlot(slot, 'fn'),
+	);
+	return dragAndDropHooks?.useDropIndicator ? fn : undefined;
+}
+
+export function useDndPersistedKeys(
+	selectionManager: MultipleSelectionManager,
+	dragAndDropHooks?: DragAndDropHooks,
+	dropState?: DroppableCollectionState,
+): Set<Key>;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useDndPersistedKeys(
+	selectionManager: MultipleSelectionManager,
+	dragAndDropHooks: DragAndDropHooks | undefined,
+	dropState: DroppableCollectionState | undefined,
+	slot: symbol | undefined,
+): Set<Key>;
+export function useDndPersistedKeys(...args: any[]): Set<Key> {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useDndPersistedKeys');
+	const selectionManager = user[0] as MultipleSelectionManager;
+	const dragAndDropHooks = user[1] as DragAndDropHooks | undefined;
+	const dropState = user[2] as DroppableCollectionState | undefined;
+
+	// Persist the focused key and the drop target key.
+	let focusedKey = selectionManager.focusedKey;
+	let dropTargetKey: Key | null | undefined = null;
+	if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === 'item') {
+		dropTargetKey = dropState.target.key;
+		if (dropState.target.dropPosition === 'after') {
+			// Normalize to the "before" drop position since we only render those to the DOM.
+			let nextKey = dropState.collection.getKeyAfter(dropTargetKey);
+			let lastDescendantKey: Key | null = null;
+			if (nextKey != null) {
+				let targetLevel = dropState.collection.getItem(dropTargetKey)?.level ?? 0;
+				// Skip over any rows that are descendants of the target ("after" position should be after all children)
+				while (nextKey != null) {
+					let node = dropState.collection.getItem(nextKey);
+					if (!node) {
+						break;
+					}
+					// Skip over non-item nodes (e.g., loaders) since they can't be drop targets.
+					if (node.type !== 'item') {
+						nextKey = dropState.collection.getKeyAfter(nextKey);
+						continue;
+					}
+
+					// Stop once we find an item at the same level or higher
+					if ((node.level ?? 0) <= targetLevel) {
+						break;
+					}
+
+					lastDescendantKey = nextKey;
+					nextKey = dropState.collection.getKeyAfter(nextKey);
+				}
+			}
+
+			// If nextKey is null (end of collection), use the last descendant
+			dropTargetKey = nextKey ?? lastDescendantKey ?? dropTargetKey;
+		}
+	}
+
+	return useMemo(
+		() => {
+			return new Set([focusedKey, dropTargetKey].filter((k) => k != null));
+		},
+		[focusedKey, dropTargetKey],
+		subSlot(slot, 'keys'),
+	);
+}

package/src/components/FieldError.ts

@@ -0,0 +1,79 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/FieldError.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// is `props.ref` and rides the props spread into `FieldErrorInner`; the plain-`.ts` inner
+// component uses the S()/subSlot component-slot convention (the outer component only reads
+// context, which is context-identity keyed).
+import type { DOMProps, ValidationResult } from '@react-types/shared';
+import { createContext, createElement, useContext } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { Text } from './Text';
+import { type ClassNameOrFunction, type RenderProps, useRenderProps } from './utils';
+
+// octane adaptation: structural bag (upstream's `GlobalDOMAttributes` drags React handler types).
+type GlobalDOMAttributes = Record<string, any>;
+
+export const FieldErrorContext = createContext<ValidationResult | null>(null);
+
+export interface FieldErrorRenderProps extends ValidationResult {}
+export interface FieldErrorProps
+	extends RenderProps<FieldErrorRenderProps>, DOMProps, 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-FieldError'
+	 */
+	className?: ClassNameOrFunction<FieldErrorRenderProps>;
+	/**
+	 * The HTML element type to render. Defaults to `'span'`.
+	 * Set to `'div'` when using block-level children (e.g. `<ul>`) to avoid invalid HTML.
+	 *
+	 * @default 'span'
+	 */
+	elementType?: string;
+}
+
+/**
+ * A FieldError displays validation errors for a form field.
+ */
+export function FieldError(props: FieldErrorProps): any {
+	let validation = useContext(FieldErrorContext);
+	if (!validation?.isInvalid) {
+		return null;
+	}
+
+	return createElement(FieldErrorInner, { ...props });
+}
+
+function FieldErrorInner(props: FieldErrorProps & { ref?: any }): any {
+	const slot = S('FieldErrorInner');
+	let validation = useContext(FieldErrorContext)!;
+	let { elementType, ref, ...restProps } = props;
+	let domProps = filterDOMProps(restProps, { global: true })!;
+	let renderProps = useRenderProps(
+		{
+			...restProps,
+			defaultClassName: 'react-aria-FieldError',
+			defaultChildren:
+				validation.validationErrors.length === 0
+					? undefined
+					: validation.validationErrors.join(' '),
+			values: validation,
+		},
+		subSlot(slot, 'render'),
+	);
+
+	if (renderProps.children == null) {
+		return null;
+	}
+
+	return createElement(Text, {
+		slot: 'errorMessage',
+		elementType,
+		...domProps,
+		...renderProps,
+		ref,
+	});
+}

package/src/components/Form.ts

@@ -0,0 +1,65 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Form.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` component uses the S()/subSlot component-slot convention;
+// FormValidationContext comes from the binding's stately port.
+import type { FormProps as SharedFormProps } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import { FormValidationContext } from '../stately/form/useFormValidationState';
+import { S, subSlot } from '../internal';
+import {
+	type ContextValue,
+	dom,
+	type DOMProps,
+	type DOMRenderProps,
+	useContextProps,
+} from './utils';
+
+// octane adaptation: structural bag (upstream's `GlobalDOMAttributes` drags React handler types).
+type GlobalDOMAttributes = Record<string, any>;
+
+export interface FormProps
+	extends SharedFormProps, DOMProps, DOMRenderProps<'form', undefined>, GlobalDOMAttributes {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element.
+	 *
+	 * @default 'react-aria-Form'
+	 */
+	className?: string;
+	/**
+	 * Whether to use native HTML form validation to prevent form submission
+	 * when a field value is missing or invalid, or mark fields as required
+	 * or invalid via ARIA.
+	 *
+	 * @default 'native'
+	 */
+	validationBehavior?: 'aria' | 'native';
+}
+
+export const FormContext = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
+
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+export function Form(props: FormProps): any {
+	const slot = S('Form');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, FormContext, subSlot(slot, 'ctx'));
+	let { validationErrors, validationBehavior = 'native', children, className, ...domProps } = props;
+	return createElement(dom.form, {
+		noValidate: validationBehavior !== 'native',
+		...domProps,
+		ref,
+		className: className || 'react-aria-Form',
+		children: createElement(FormContext.Provider, {
+			value: { ...props, validationBehavior },
+			children: createElement(FormValidationContext.Provider, {
+				value: validationErrors ?? {},
+				children,
+			}),
+		}),
+	});
+}