@octanejs/aria 0.0.4 → 0.0.5

package/src/components/TextField.ts

@@ -0,0 +1,200 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/TextField.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. NATIVE EVENTS: the
+// per-keystroke wiring rides octane's native `onInput` (produced inside useTextField); no
+// synthetic `onChange` is added here. `DOMProps` comes from './utils' (RAC's own bag), NOT
+// `@react-types/shared`; upstream's `GlobalDOMAttributes` → a structural record.
+import { createContext, createElement, useCallback, useRef, useState } from 'octane';
+
+import { createHideableComponent } from '../collections/Hidden';
+import { S, subSlot } from '../internal';
+import { type AriaTextFieldProps, useTextField } from '../textfield/useTextField';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { FieldInputContext } from './Autocomplete';
+import { FieldErrorContext } from './FieldError';
+import { FormContext } from './Form';
+import { GroupContext } from './Group';
+import { InputContext } from './Input';
+import { LabelContext } from './Label';
+import { TextAreaContext } from './TextArea';
+import { TextContext } from './Text';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type DOMProps,
+	Provider,
+	type RACValidation,
+	removeDataAttributes,
+	type RenderProps,
+	type SlotProps,
+	useContextProps,
+	useRenderProps,
+	useSlot,
+	useSlottedContext,
+} from './utils';
+
+// octane adaptation: structural bag (upstream's `GlobalDOMAttributes` drags React handler types).
+type GlobalDOMAttributes = Record<string, any>;
+
+export interface TextFieldRenderProps {
+	/**
+	 * Whether the text field is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the value is invalid.
+	 *
+	 * @selector [data-invalid]
+	 */
+	isInvalid: boolean;
+	/**
+	 * Whether the text field is read only.
+	 *
+	 * @selector [data-readonly]
+	 */
+	isReadOnly: boolean;
+	/**
+	 * Whether the text field is required.
+	 *
+	 * @selector [data-required]
+	 */
+	isRequired: boolean;
+}
+
+export interface TextFieldProps
+	extends
+		Omit<
+			AriaTextFieldProps,
+			| 'label'
+			| 'placeholder'
+			| 'description'
+			| 'errorMessage'
+			| 'validationState'
+			| 'validationBehavior'
+		>,
+		RACValidation,
+		Omit<DOMProps, 'style' | 'className' | 'children'>,
+		SlotProps,
+		RenderProps<TextFieldRenderProps>,
+		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-TextField'
+	 */
+	className?: ClassNameOrFunction<TextFieldRenderProps>;
+	/** Whether the value is invalid. */
+	isInvalid?: boolean;
+}
+
+export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);
+
+/**
+ * A text field allows a user to enter a plain text value with a keyboard.
+ */
+export const TextField = /*#__PURE__*/ createHideableComponent(function TextField(
+	props: TextFieldProps,
+	ref: any,
+) {
+	const slot = S('TextField');
+	[props, ref] = useContextProps(props, ref, TextFieldContext, subSlot(slot, 'ctx'));
+	let { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+	let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+	let inputRef: any = useRef<HTMLInputElement | null>(null, subSlot(slot, 'input'));
+	// octane adaptation: destructuring assignment instead of upstream's `inputRef as unknown`
+	// lvalue cast — the merged object ref replaces the local ref exactly like upstream.
+	[props, inputRef] = useContextProps(
+		props,
+		inputRef,
+		FieldInputContext as any,
+		subSlot(slot, 'fieldInput'),
+	);
+	let [labelRef, label] = useSlot(
+		!props['aria-label'] && !props['aria-labelledby'],
+		subSlot(slot, 'labelSlot'),
+	);
+	let [inputElementType, setInputElementType] = useState('input', subSlot(slot, 'elementType'));
+	let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } =
+		useTextField<any>(
+			{
+				...removeDataAttributes(props),
+				inputElementType,
+				label,
+				validationBehavior,
+			},
+			inputRef,
+			subSlot(slot, 'textField'),
+		);
+
+	// Intercept setting the input ref so we can determine what kind of element we have.
+	// useTextField uses this to determine what props to include.
+	let inputOrTextAreaRef = useCallback(
+		(el: any) => {
+			inputRef.current = el;
+			if (el) {
+				setInputElementType(el instanceof HTMLTextAreaElement ? 'textarea' : 'input');
+			}
+		},
+		[inputRef],
+		subSlot(slot, 'inputOrTextAreaRef'),
+	);
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: {
+				isDisabled: props.isDisabled || false,
+				isInvalid: validation.isInvalid,
+				isReadOnly: props.isReadOnly || false,
+				isRequired: props.isRequired || false,
+			},
+			defaultClassName: 'react-aria-TextField',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return createElement(dom.div, {
+		...DOMProps,
+		...renderProps,
+		ref,
+		slot: props.slot || undefined,
+		'data-disabled': props.isDisabled || undefined,
+		'data-invalid': validation.isInvalid || undefined,
+		'data-readonly': props.isReadOnly || undefined,
+		'data-required': props.isRequired || undefined,
+		children: createElement(Provider, {
+			values: [
+				[LabelContext, { ...labelProps, ref: labelRef }],
+				[InputContext, { ...inputProps, ref: inputOrTextAreaRef }],
+				[TextAreaContext, { ...inputProps, ref: inputOrTextAreaRef }],
+				[
+					GroupContext,
+					{
+						role: 'presentation',
+						isInvalid: validation.isInvalid,
+						isDisabled: props.isDisabled || false,
+					},
+				],
+				[
+					TextContext,
+					{
+						slots: {
+							description: descriptionProps,
+							errorMessage: errorMessageProps,
+						},
+					},
+				],
+				[FieldErrorContext, validation],
+			] as any,
+			children: renderProps.children,
+		}),
+	});
+});

package/src/components/ToggleButton.ts

@@ -0,0 +1,147 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/ToggleButton.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. Upstream's
+// conditional group-item/standalone hook calls (eslint-disabled there) are safe here because
+// binding hooks are keyed by their explicit slot symbols, not call order.
+import type { HoverEvents, Key } from '@react-types/shared';
+import { createContext, createElement, useContext } from 'octane';
+
+import { type AriaToggleButtonProps, useToggleButton } from '../button/useToggleButton';
+import { useToggleButtonGroupItem } from '../button/useToggleButtonGroup';
+import { useFocusRing } from '../focus/useFocusRing';
+import { useHover } from '../interactions/useHover';
+import { S, subSlot } from '../internal';
+import { type ToggleState, useToggleState } from '../stately/toggle/useToggleState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import type { ButtonRenderProps } from './Button';
+import { SelectionIndicatorContext } from './SelectionIndicator';
+import { ToggleGroupStateContext } from './ToggleButtonGroup';
+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 ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPending'> {
+	/**
+	 * Whether the button is currently selected.
+	 *
+	 * @selector [data-selected]
+	 */
+	isSelected: boolean;
+	/**
+	 * State of the toggle button.
+	 */
+	state: ToggleState;
+}
+
+export interface ToggleButtonProps
+	extends
+		Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>,
+		HoverEvents,
+		SlotProps,
+		RenderProps<ToggleButtonRenderProps, '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-ToggleButton'
+	 */
+	className?: ClassNameOrFunction<ToggleButtonRenderProps>;
+	/**
+	 * When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used
+	 * standalone, a DOM id.
+	 */
+	id?: Key;
+}
+
+export const ToggleButtonContext = createContext<
+	ContextValue<ToggleButtonProps, HTMLButtonElement>
+>({});
+
+/**
+ * A toggle button allows a user to toggle a selection on or off, for example switching between two
+ * states or modes.
+ */
+export function ToggleButton(props: ToggleButtonProps): any {
+	const slot = S('ToggleButton');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, ToggleButtonContext, subSlot(slot, 'ctx'));
+	let groupState = useContext(ToggleGroupStateContext);
+	let state = useToggleState(
+		groupState && props.id != null
+			? {
+					isSelected: groupState.selectedKeys.has(props.id),
+					onChange(isSelected: boolean) {
+						groupState.setSelected(props.id!, isSelected);
+					},
+				}
+			: (props as any),
+		subSlot(slot, 'toggle'),
+	);
+
+	let { buttonProps, isPressed, isSelected, isDisabled } =
+		groupState && props.id != null
+			? useToggleButtonGroupItem(
+					{ ...props, id: props.id } as any,
+					groupState,
+					ref,
+					subSlot(slot, 'groupItem'),
+				)
+			: useToggleButton(
+					{ ...props, id: props.id != null ? String(props.id) : undefined } as any,
+					state,
+					ref,
+					subSlot(slot, 'toggleButton'),
+				);
+
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing(props, subSlot(slot, 'focusRing'));
+	let { hoverProps, isHovered } = useHover({ ...props, isDisabled }, subSlot(slot, 'hover'));
+	let renderProps = useRenderProps(
+		{
+			...props,
+			id: undefined,
+			values: {
+				isHovered,
+				isPressed,
+				isFocused,
+				isSelected: state.isSelected,
+				isFocusVisible,
+				isDisabled,
+				state,
+			},
+			defaultClassName: 'react-aria-ToggleButton',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let DOMProps = filterDOMProps(props as any, { global: true });
+	delete DOMProps.id;
+	delete DOMProps.onClick;
+
+	return createElement(dom.button, {
+		...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
+		ref,
+		slot: props.slot || undefined,
+		'data-focused': isFocused || undefined,
+		'data-disabled': isDisabled || undefined,
+		'data-pressed': isPressed || undefined,
+		'data-selected': isSelected || undefined,
+		'data-hovered': isHovered || undefined,
+		'data-focus-visible': isFocusVisible || undefined,
+		children: createElement(SelectionIndicatorContext.Provider, {
+			value: { isSelected },
+			children: renderProps.children,
+		}),
+	});
+}

package/src/components/ToggleButtonGroup.ts

@@ -0,0 +1,106 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/ToggleButtonGroup.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.
+import type { Orientation } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import {
+	type AriaToggleButtonGroupProps,
+	useToggleButtonGroup,
+} from '../button/useToggleButtonGroup';
+import { S, subSlot } from '../internal';
+import { type ToggleGroupState, useToggleGroupState } from '../stately/toggle/useToggleGroupState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import { SharedElementTransition } from './SharedElementTransition';
+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 ToggleButtonGroupRenderProps {
+	/**
+	 * The orientation of the toggle button group.
+	 *
+	 * @selector [data-orientation="horizontal | vertical"]
+	 */
+	orientation: Orientation;
+	/**
+	 * Whether the toggle button group is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the toggle button group.
+	 */
+	state: ToggleGroupState;
+}
+
+export interface ToggleButtonGroupProps
+	extends
+		AriaToggleButtonGroupProps,
+		RenderProps<ToggleButtonGroupRenderProps>,
+		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-ToggleButtonGroup'
+	 */
+	className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;
+}
+
+export const ToggleButtonGroupContext = createContext<
+	ContextValue<ToggleButtonGroupProps, HTMLDivElement>
+>({});
+export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
+
+/**
+ * A toggle button group allows a user to toggle multiple options, with single or multiple
+ * selection.
+ */
+export function ToggleButtonGroup(props: ToggleButtonGroupProps): any {
+	const slot = S('ToggleButtonGroup');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, ToggleButtonGroupContext, subSlot(slot, 'ctx'));
+	let state = useToggleGroupState(props, subSlot(slot, 'state'));
+	let { groupProps } = useToggleButtonGroup(props, state, ref, subSlot(slot, 'group'));
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: {
+				orientation: props.orientation || 'horizontal',
+				isDisabled: state.isDisabled,
+				state,
+			},
+			defaultClassName: 'react-aria-ToggleButtonGroup',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return createElement(dom.div, {
+		...mergeProps(DOMProps, renderProps, groupProps),
+		ref,
+		slot: props.slot || undefined,
+		'data-orientation': props.orientation || 'horizontal',
+		'data-disabled': props.isDisabled || undefined,
+		children: createElement(ToggleGroupStateContext.Provider, {
+			value: state,
+			children: createElement(SharedElementTransition, { children: renderProps.children }),
+		}),
+	});
+}

package/src/components/Toolbar.ts

@@ -0,0 +1,74 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Toolbar.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.
+import type { Orientation } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { type AriaToolbarProps, useToolbar } from '../toolbar/useToolbar';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+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 ToolbarRenderProps {
+	/**
+	 * The current orientation of the toolbar.
+	 *
+	 * @selector [data-orientation]
+	 */
+	orientation: Orientation;
+}
+
+export interface ToolbarProps
+	extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps>, 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-Toolbar'
+	 */
+	className?: ClassNameOrFunction<ToolbarRenderProps>;
+}
+
+export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
+
+/**
+ * A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or
+ * checkboxes, with arrow key navigation.
+ */
+export function Toolbar(props: ToolbarProps): any {
+	const slot = S('Toolbar');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, ToolbarContext, subSlot(slot, 'ctx'));
+	let { toolbarProps } = useToolbar(props, ref, subSlot(slot, 'toolbar'));
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: { orientation: props.orientation || 'horizontal' },
+			defaultClassName: 'react-aria-Toolbar',
+		},
+		subSlot(slot, 'render'),
+	);
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return createElement(dom.div, {
+		...mergeProps(DOMProps, renderProps, toolbarProps),
+		ref,
+		slot: props.slot || undefined,
+		'data-orientation': props.orientation || 'horizontal',
+		children: renderProps.children,
+	});
+}