@octanejs/aria 0.0.3 → 0.0.5

package/src/components/Group.ts

@@ -0,0 +1,146 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Group.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; React's
+// HTMLAttributes prop bag → a structural record.
+import type { AriaLabelingProps, DOMProps } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import { useFocusRing } from '../focus/useFocusRing';
+import { type HoverProps, useHover } from '../interactions/useHover';
+import { S, subSlot } from '../internal';
+import { mergeProps } from '../utils/mergeProps';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type RenderProps,
+	type SlotProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's HTMLAttributes).
+type HTMLAttributes = Record<string, any>;
+
+export interface GroupRenderProps {
+	/**
+	 * Whether the group is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether an element within the group is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focus-within]
+	 */
+	isFocusWithin: boolean;
+	/**
+	 * Whether an element within the group is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the group is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the group is invalid.
+	 *
+	 * @selector [data-invalid]
+	 */
+	isInvalid: boolean;
+}
+
+export interface GroupProps
+	extends
+		AriaLabelingProps,
+		Omit<HTMLAttributes, 'children' | 'className' | 'style' | 'render' | 'role' | 'slot'>,
+		DOMProps,
+		HoverProps,
+		RenderProps<GroupRenderProps>,
+		SlotProps {
+	/**
+	 * 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-Group'
+	 */
+	className?: ClassNameOrFunction<GroupRenderProps>;
+	/** Whether the group is disabled. */
+	isDisabled?: boolean;
+	/** Whether the group is invalid. */
+	isInvalid?: boolean;
+	/** Whether the group is read only. */
+	isReadOnly?: boolean;
+	/**
+	 * An accessibility role for the group. By default, this is set to `'group'`.
+	 * Use `'region'` when the contents of the group is important enough to be
+	 * included in the page table of contents. Use `'presentation'` if the group
+	 * is visual only and does not represent a semantic grouping of controls.
+	 *
+	 * @default 'group'
+	 */
+	role?: 'group' | 'region' | 'presentation';
+}
+
+export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
+
+/**
+ * A group represents a set of related UI controls, and supports interactive states for styling.
+ */
+export function Group(props: GroupProps): any {
+	const slot = S('Group');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, GroupContext, subSlot(slot, 'ctx'));
+	let {
+		isDisabled,
+		isInvalid,
+		isReadOnly,
+		onHoverStart,
+		onHoverChange,
+		onHoverEnd,
+		...otherProps
+	} = props;
+	isDisabled ??= !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
+	isInvalid ??= !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
+
+	let { hoverProps, isHovered } = useHover(
+		{ onHoverStart, onHoverChange, onHoverEnd, isDisabled },
+		subSlot(slot, 'hover'),
+	);
+	let { isFocused, isFocusVisible, focusProps } = useFocusRing(
+		{
+			within: true,
+		},
+		subSlot(slot, 'focusRing'),
+	);
+
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: { isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled, isInvalid },
+			defaultClassName: 'react-aria-Group',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	return createElement(dom.div, {
+		...mergeProps(otherProps, focusProps, hoverProps),
+		...renderProps,
+		ref,
+		role: props.role ?? 'group',
+		slot: props.slot ?? undefined,
+		'data-focus-within': isFocused || undefined,
+		'data-hovered': isHovered || undefined,
+		'data-focus-visible': isFocusVisible || undefined,
+		'data-disabled': isDisabled || undefined,
+		'data-invalid': isInvalid || undefined,
+		'data-readonly': isReadOnly || undefined,
+		children: renderProps.children,
+	});
+}

package/src/components/Header.ts

@@ -0,0 +1,32 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Header.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// arrives positionally from `createLeafComponent` (which forwards `props.ref`); the
+// plain-`.ts` component uses the S()/subSlot component-slot convention; React's
+// HTMLAttributes prop bag → a structural record.
+import { createContext, createElement } from 'octane';
+
+import { HeaderNode } from '../collections/BaseCollection';
+import { createLeafComponent } from '../collections/CollectionBuilder';
+import { S, subSlot } from '../internal';
+import { type ContextValue, dom, type DOMRenderProps, useContextProps } from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's HTMLAttributes).
+type HTMLAttributes = Record<string, any>;
+
+export interface HeaderProps extends HTMLAttributes, DOMRenderProps<'header', undefined> {}
+
+export const HeaderContext = createContext<ContextValue<HeaderProps, HTMLElement>>({});
+
+export const Header = /*#__PURE__*/ createLeafComponent(
+	HeaderNode,
+	function Header(props: HeaderProps, ref: any) {
+		const slot = S('Header');
+		[props, ref] = useContextProps(props, ref, HeaderContext, subSlot(slot, 'ctx'));
+		return createElement(dom.header, {
+			className: 'react-aria-Header',
+			...props,
+			ref,
+			children: props.children,
+		});
+	},
+);

package/src/components/Heading.ts

@@ -0,0 +1,45 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Heading.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; React's
+// HTMLAttributes prop bag → a structural record.
+import { createContext, createElement } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { type ContextValue, dom, type DOMRenderProps, useContextProps } from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's HTMLAttributes).
+type HTMLAttributes = Record<string, any>;
+
+export interface HeadingProps extends HTMLAttributes, DOMRenderProps<'h1', undefined> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element.
+	 *
+	 * @default 'react-aria-Heading'
+	 */
+	className?: string;
+	/**
+	 * The heading level.
+	 *
+	 * @default 3
+	 */
+	level?: number;
+}
+
+export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
+
+export function Heading(props: HeadingProps): any {
+	const slot = S('Heading');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, HeadingContext, subSlot(slot, 'ctx'));
+	let { children, level = 3, className, ...domProps } = props;
+	let Element = dom[`h${level}`];
+
+	return createElement(Element, {
+		...domProps,
+		ref,
+		className: className ?? 'react-aria-Heading',
+		children,
+	});
+}

package/src/components/Input.ts

@@ -0,0 +1,139 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Input.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; React's
+// InputHTMLAttributes prop bag → a structural record. NATIVE EVENTS: this is a text control —
+// per-keystroke wiring rides octane's native `onInput` (props produced by useTextField et al.
+// pass through unchanged); no synthetic `onChange` is added.
+import type { HoverEvents } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import { createHideableComponent } from '../collections/Hidden';
+import { useFocusRing } from '../focus/useFocusRing';
+import { useHover } from '../interactions/useHover';
+import { S, subSlot } from '../internal';
+import { mergeProps } from '../utils/mergeProps';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type StyleRenderProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's InputHTMLAttributes).
+type InputHTMLAttributes = Record<string, any>;
+
+export interface InputRenderProps {
+	/**
+	 * Whether the input is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the input is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the input is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the input is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the input is invalid.
+	 *
+	 * @selector [data-invalid]
+	 */
+	isInvalid: boolean;
+}
+
+export interface InputProps
+	extends
+		Omit<InputHTMLAttributes, 'className' | 'style'>,
+		HoverEvents,
+		StyleRenderProps<InputRenderProps, 'input'> {
+	/**
+	 * 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-Input'
+	 */
+	className?: ClassNameOrFunction<InputRenderProps>;
+	/**
+	 * Temporary text that occupies the text input when it is empty.
+	 * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
+	 */
+	placeholder?: string;
+}
+
+export const InputContext = createContext<ContextValue<InputProps, HTMLInputElement>>({});
+
+let filterHoverProps = (props: InputProps) => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
+	return otherProps;
+};
+
+/**
+ * An input allows a user to input text.
+ */
+export const Input = /*#__PURE__*/ createHideableComponent(function Input(
+	props: InputProps,
+	ref: any,
+) {
+	const slot = S('Input');
+	[props, ref] = useContextProps(props, ref, InputContext, subSlot(slot, 'ctx'));
+
+	let { hoverProps, isHovered } = useHover(
+		{
+			...props,
+			isDisabled: props.disabled,
+		},
+		subSlot(slot, 'hover'),
+	);
+	let { isFocused, isFocusVisible, focusProps } = useFocusRing(
+		{
+			isTextInput: true,
+			autoFocus: props.autoFocus,
+		},
+		subSlot(slot, 'focusRing'),
+	);
+
+	let isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
+	let renderProps = useRenderProps(
+		{
+			...props,
+			values: {
+				isHovered,
+				isFocused,
+				isFocusVisible,
+				isDisabled: props.disabled || false,
+				isInvalid,
+			},
+			defaultClassName: 'react-aria-Input',
+		},
+		subSlot(slot, 'render'),
+	);
+
+	return createElement(dom.input, {
+		...mergeProps(filterHoverProps(props), focusProps, hoverProps),
+		...renderProps,
+		ref,
+		'data-focused': isFocused || undefined,
+		'data-disabled': props.disabled || undefined,
+		'data-hovered': isHovered || undefined,
+		'data-focus-visible': isFocusVisible || undefined,
+		'data-invalid': isInvalid || undefined,
+	});
+});

package/src/components/Keyboard.ts

@@ -0,0 +1,23 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Keyboard.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; React's
+// HTMLAttributes prop bag → a structural record.
+import { createContext, createElement } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { type ContextValue, dom, type DOMRenderProps, useContextProps } from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's HTMLAttributes).
+type HTMLAttributes = Record<string, any>;
+
+export interface KeyboardProps extends HTMLAttributes, DOMRenderProps<'kbd', undefined> {}
+
+export const KeyboardContext = createContext<ContextValue<KeyboardProps, HTMLElement>>({});
+
+export function Keyboard(props: KeyboardProps): any {
+	const slot = S('Keyboard');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, KeyboardContext, subSlot(slot, 'ctx'));
+	return createElement(dom.kbd, { dir: 'ltr', ...props, ref });
+}

package/src/components/Label.ts

@@ -0,0 +1,30 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Label.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; React's
+// LabelHTMLAttributes prop bag → a structural record.
+import { createContext, createElement } from 'octane';
+
+import { createHideableComponent } from '../collections/Hidden';
+import { S, subSlot } from '../internal';
+import { type ContextValue, dom, type DOMRenderProps, useContextProps } from './utils';
+
+// octane adaptation: structural prop bag (upstream extends React's LabelHTMLAttributes).
+type LabelHTMLAttributes = Record<string, any>;
+
+export interface LabelProps extends LabelHTMLAttributes, DOMRenderProps<'label', undefined> {
+	elementType?: string;
+}
+
+export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
+
+export const Label = /*#__PURE__*/ createHideableComponent(function Label(
+	props: LabelProps,
+	ref: any,
+) {
+	const slot = S('Label');
+	[props, ref] = useContextProps(props, ref, LabelContext, subSlot(slot, 'ctx'));
+	let { elementType = 'label', ...labelProps } = props;
+	let ElementType = dom[elementType];
+	return createElement(ElementType, { className: 'react-aria-Label', ...labelProps, ref });
+});

package/src/components/Link.ts

@@ -0,0 +1,137 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Link.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 { DOMProps, HoverEvents } from '@react-types/shared';
+import { createContext, createElement } from 'octane';
+
+import { useFocusRing } from '../focus/useFocusRing';
+import { useHover } from '../interactions/useHover';
+import { S, subSlot } from '../internal';
+import { type AriaLinkOptions, useLink } from '../link/useLink';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	type PossibleLinkDOMRenderProps,
+	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 LinkProps
+	extends
+		Omit<AriaLinkOptions, 'elementType'>,
+		HoverEvents,
+		Omit<RenderProps<LinkRenderProps>, 'render'>,
+		PossibleLinkDOMRenderProps<'span', LinkRenderProps>,
+		SlotProps,
+		DOMProps,
+		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-Link'
+	 */
+	className?: ClassNameOrFunction<LinkRenderProps>;
+}
+
+export interface LinkRenderProps {
+	/**
+	 * Whether the link is the current item within a list.
+	 *
+	 * @selector [data-current]
+	 */
+	isCurrent: boolean;
+	/**
+	 * Whether the link is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the link is currently in a pressed state.
+	 *
+	 * @selector [data-pressed]
+	 */
+	isPressed: boolean;
+	/**
+	 * Whether the link is focused, either via a mouse or keyboard.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the link is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the link is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+}
+
+export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
+
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ */
+export function Link(props: LinkProps): any {
+	const slot = S('Link');
+	let ref: any;
+	[props, ref] = useContextProps(props, props.ref, LinkContext, subSlot(slot, 'ctx'));
+
+	let elementType = props.href && !props.isDisabled ? 'a' : 'span';
+	let { linkProps, isPressed } = useLink({ ...props, elementType }, ref, subSlot(slot, 'link'));
+	let ElementType = dom[elementType];
+
+	let { hoverProps, isHovered } = useHover(props, subSlot(slot, 'hover'));
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing(
+		undefined,
+		subSlot(slot, 'focusRing'),
+	);
+
+	let renderProps = useRenderProps<LinkRenderProps, 'span' | 'a'>(
+		{
+			...props,
+			defaultClassName: 'react-aria-Link',
+			values: {
+				isCurrent: !!props['aria-current'],
+				isDisabled: props.isDisabled || false,
+				isPressed,
+				isHovered,
+				isFocused,
+				isFocusVisible,
+			},
+		},
+		subSlot(slot, 'render'),
+	);
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.onClick;
+
+	return createElement(ElementType, {
+		ref,
+		slot: props.slot || undefined,
+		...mergeProps(DOMProps, renderProps, linkProps, hoverProps, focusProps),
+		'data-focused': isFocused || undefined,
+		'data-hovered': isHovered || undefined,
+		'data-pressed': isPressed || undefined,
+		'data-focus-visible': isFocusVisible || undefined,
+		'data-current': !!props['aria-current'] || undefined,
+		'data-disabled': props.isDisabled || undefined,
+		children: renderProps.children,
+	});
+}