@octanejs/radix 0.1.2

package/src/Avatar.ts

@@ -0,0 +1,152 @@
+// Ported from @radix-ui/react-avatar (source:
+// .radix-primitives/packages/react/avatar/src/avatar.tsx). Image renders only once its
+// src has LOADED (probed off-DOM via `new Image()`); Fallback renders (optionally after
+// `delayMs`) whenever the image hasn't loaded. The dev-only multiple-Image warning
+// machinery is not ported (repo policy: skip React's dev-warning surface).
+import {
+	createElement,
+	useEffect,
+	useEffectEvent,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'octane';
+
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+const [createAvatarContext, createAvatarScope] = createContextScope('Avatar');
+export { createAvatarScope };
+const [AvatarProvider, useAvatarContext] = createAvatarContext<{
+	imageLoadingStatus: ImageLoadingStatus;
+	setImageLoadingStatus: (s: ImageLoadingStatus) => void;
+}>('Avatar');
+
+export function Root(props: any): any {
+	const slot = S('Avatar.Root');
+	const { __scopeAvatar, ...avatarProps } = props ?? {};
+	const [imageLoadingStatus, setImageLoadingStatus] = useState<ImageLoadingStatus>(
+		'idle',
+		subSlot(slot, 'status'),
+	);
+	return createElement(AvatarProvider, {
+		scope: __scopeAvatar,
+		imageLoadingStatus,
+		setImageLoadingStatus,
+		children: createElement(Primitive.span, avatarProps),
+	});
+}
+
+export function Image(props: any): any {
+	const slot = S('Avatar.Image');
+	const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props ?? {};
+	const context = useAvatarContext('AvatarImage', __scopeAvatar);
+	const imageLoadingStatus = useImageLoadingStatus(
+		src,
+		{
+			referrerPolicy: imageProps.referrerPolicy,
+			crossOrigin: imageProps.crossOrigin,
+			loadingStatus: context.imageLoadingStatus,
+			setLoadingStatus: context.setImageLoadingStatus,
+		},
+		slot,
+	);
+	const handleLoadingStatusChange = useEffectEvent(
+		(status: ImageLoadingStatus) => {
+			onLoadingStatusChange?.(status);
+		},
+		subSlot(slot, 'cb'),
+	);
+	const loadingStatusRef = useRef<ImageLoadingStatus>(imageLoadingStatus, subSlot(slot, 'prev'));
+	useLayoutEffect(
+		() => {
+			const previousLoadingStatus = loadingStatusRef.current;
+			loadingStatusRef.current = imageLoadingStatus;
+			if (imageLoadingStatus !== previousLoadingStatus) {
+				handleLoadingStatusChange(imageLoadingStatus);
+			}
+		},
+		[imageLoadingStatus],
+		subSlot(slot, 'e:change'),
+	);
+	return imageLoadingStatus === 'loaded'
+		? createElement(Primitive.img, { ...imageProps, src })
+		: null;
+}
+
+export function Fallback(props: any): any {
+	const slot = S('Avatar.Fallback');
+	const { __scopeAvatar, delayMs, ...fallbackProps } = props ?? {};
+	const context = useAvatarContext('AvatarFallback', __scopeAvatar);
+	const [canRender, setCanRender] = useState(delayMs === undefined, subSlot(slot, 'can'));
+	useEffect(
+		() => {
+			if (delayMs !== undefined) {
+				const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+				return () => window.clearTimeout(timerId);
+			}
+		},
+		[delayMs],
+		subSlot(slot, 'e:delay'),
+	);
+	return canRender && context.imageLoadingStatus !== 'loaded'
+		? createElement(Primitive.span, fallbackProps)
+		: null;
+}
+
+function useImageLoadingStatus(
+	src: string | undefined,
+	{
+		loadingStatus,
+		setLoadingStatus,
+		referrerPolicy,
+		crossOrigin,
+	}: {
+		referrerPolicy?: string;
+		crossOrigin?: string;
+		loadingStatus: ImageLoadingStatus;
+		setLoadingStatus: (s: ImageLoadingStatus) => void;
+	},
+	slot: symbol,
+): ImageLoadingStatus {
+	useLayoutEffect(
+		() => {
+			if (!src) {
+				setLoadingStatus('error');
+				return;
+			}
+			const image = new window.Image();
+			const handleLoad = (event: Event): void => {
+				const img = event.currentTarget as HTMLImageElement;
+				setLoadingStatus(getImageLoadingStatus(img));
+			};
+			const handleError = (): void => setLoadingStatus('error');
+			image.addEventListener('load', handleLoad);
+			image.addEventListener('error', handleError);
+			if (referrerPolicy) {
+				(image as any).referrerPolicy = referrerPolicy;
+			}
+			image.crossOrigin = crossOrigin ?? null;
+			image.src = src;
+
+			setLoadingStatus(getImageLoadingStatus(image));
+			return () => {
+				image.removeEventListener('load', handleLoad);
+				image.removeEventListener('error', handleError);
+				setLoadingStatus('idle');
+			};
+		},
+		[src, crossOrigin, referrerPolicy],
+		subSlot(slot, 'e:load'),
+	);
+	return loadingStatus;
+}
+
+function getImageLoadingStatus(image: HTMLImageElement): ImageLoadingStatus {
+	return image.complete ? (image.naturalWidth > 0 ? 'loaded' : 'error') : 'loading';
+}
+
+export { Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback };

package/src/Checkbox.ts

@@ -0,0 +1,325 @@
+// Ported from @radix-ui/react-checkbox (source:
+// .radix-primitives/packages/react/checkbox/src/checkbox.tsx). A `role=checkbox` button
+// (with `indeterminate` support) that — when inside a form — renders a hidden native
+// checkbox "bubble input" so native form machinery (FormData, validation, reset,
+// change listeners) reflects the state. The bubble input is uncontrolled; state syncs
+// imperatively via the native `checked` property setter + dispatched events.
+//
+// octane adaptations (documented; both stem from octane's native-event /
+// no-controlled-inputs model — see docs/react-parity-migration-plan.md):
+// - React's synthetic `event.isPropagationStopped()` → native `event.cancelBubble`.
+// - `defaultChecked` prop → the native `checked` ATTRIBUTE (HTML's default-state
+//   semantics; live state is driven through the property setter, which never touches
+//   the attribute).
+// - The bubble effect ALSO dispatches a native `change` event after the source's
+//   `click`: React forms observe checkbox clicks through synthetic `onChange`, which
+//   octane doesn't have — a native bubbling `change` gives octane `<form onChange>`
+//   the same functional outcome.
+import { createElement, useEffect, useRef, useState } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Presence } from './Presence';
+import { Primitive } from './Primitive';
+import { usePrevious } from './use-previous';
+import { useSize } from './use-size';
+import { useControllableState } from './useControllableState';
+
+const CHECKBOX_NAME = 'Checkbox';
+
+const [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+export { createCheckboxScope };
+
+export type CheckedState = boolean | 'indeterminate';
+
+interface CheckboxContextValue {
+	checked: CheckedState;
+	setChecked: (checked: CheckedState | ((prev: CheckedState) => CheckedState)) => void;
+	disabled: boolean | undefined;
+	control: HTMLElement | null;
+	setControl: (control: HTMLElement | null) => void;
+	name: string | undefined;
+	form: string | undefined;
+	value: string | number;
+	hasConsumerStoppedPropagationRef: { current: boolean };
+	required: boolean | undefined;
+	defaultChecked: boolean | undefined;
+	isFormControl: boolean;
+	bubbleInput: HTMLInputElement | null;
+	setBubbleInput: (input: HTMLInputElement | null) => void;
+}
+
+const [CheckboxProviderImpl, useCheckboxContext] =
+	createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);
+
+export function Provider(props: any): any {
+	const slot = S('Checkbox.Provider');
+	const {
+		__scopeCheckbox,
+		checked: checkedProp,
+		children,
+		defaultChecked,
+		disabled,
+		form,
+		name,
+		onCheckedChange,
+		required,
+		value = 'on',
+		internal_do_not_use_render,
+	} = props ?? {};
+
+	const [checked, setChecked] = useControllableState<CheckedState>(
+		{ prop: checkedProp, defaultProp: defaultChecked ?? false, onChange: onCheckedChange },
+		subSlot(slot, 'checked'),
+	);
+	const [control, setControl] = useState<HTMLElement | null>(null, subSlot(slot, 'control'));
+	const [bubbleInput, setBubbleInput] = useState<HTMLInputElement | null>(
+		null,
+		subSlot(slot, 'input'),
+	);
+	const hasConsumerStoppedPropagationRef = useRef(false, subSlot(slot, 'stopped'));
+	const isFormControl = control
+		? !!form || !!control.closest('form')
+		: // We set this to true by default so that events bubble to forms without JS (SSR)
+			true;
+
+	const context: CheckboxContextValue = {
+		checked,
+		disabled,
+		setChecked,
+		control,
+		setControl,
+		name,
+		form,
+		value,
+		hasConsumerStoppedPropagationRef,
+		required,
+		defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+		isFormControl,
+		bubbleInput,
+		setBubbleInput,
+	};
+
+	return createElement(CheckboxProviderImpl, {
+		scope: __scopeCheckbox,
+		...context,
+		children: isFunction(internal_do_not_use_render)
+			? internal_do_not_use_render(context)
+			: children,
+	});
+}
+
+export function Trigger(props: any): any {
+	const slot = S('Checkbox.Trigger');
+	const { __scopeCheckbox, onKeyDown, onClick, ref: forwardedRef, ...checkboxProps } = props ?? {};
+	const {
+		control,
+		value,
+		disabled,
+		checked,
+		required,
+		setControl,
+		setChecked,
+		hasConsumerStoppedPropagationRef,
+		isFormControl,
+		bubbleInput,
+	} = useCheckboxContext('CheckboxTrigger', __scopeCheckbox);
+	const composedRefs = useComposedRefs(forwardedRef, setControl, subSlot(slot, 'refs'));
+
+	const initialCheckedStateRef = useRef(checked, subSlot(slot, 'initial'));
+	useEffect(
+		() => {
+			const form = (control as HTMLButtonElement | null)?.form;
+			if (form) {
+				const reset = (): void => setChecked(initialCheckedStateRef.current);
+				form.addEventListener('reset', reset);
+				return () => form.removeEventListener('reset', reset);
+			}
+		},
+		[control, setChecked],
+		subSlot(slot, 'e:reset'),
+	);
+
+	return createElement(Primitive.button, {
+		type: 'button',
+		role: 'checkbox',
+		'aria-checked': isIndeterminate(checked) ? 'mixed' : checked,
+		'aria-required': required,
+		'data-state': getState(checked),
+		'data-disabled': disabled ? '' : undefined,
+		disabled,
+		value,
+		...checkboxProps,
+		ref: composedRefs,
+		onKeyDown: composeEventHandlers(onKeyDown, (event: KeyboardEvent) => {
+			// According to WAI ARIA, Checkboxes don't activate on enter keypress
+			if (event.key === 'Enter') event.preventDefault();
+		}),
+		onClick: composeEventHandlers(onClick, (event: MouseEvent) => {
+			setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));
+			if (bubbleInput && isFormControl) {
+				hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+				// if checkbox has a bubble input and is a form control, stop
+				// propagation from the button so that we only propagate one click
+				// event (from the input). We propagate changes from an input so
+				// that native form validation works and form events reflect
+				// checkbox updates.
+				if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+			}
+		}),
+	});
+}
+
+export function Root(props: any): any {
+	const {
+		__scopeCheckbox,
+		name,
+		checked,
+		defaultChecked,
+		required,
+		disabled,
+		value,
+		onCheckedChange,
+		form,
+		ref: forwardedRef,
+		...checkboxProps
+	} = props ?? {};
+
+	return createElement(Provider, {
+		__scopeCheckbox,
+		checked,
+		defaultChecked,
+		disabled,
+		required,
+		onCheckedChange,
+		name,
+		form,
+		value,
+		internal_do_not_use_render: ({ isFormControl }: CheckboxContextValue) => [
+			createElement(Trigger, {
+				key: 'trigger',
+				...checkboxProps,
+				ref: forwardedRef,
+				__scopeCheckbox,
+			}),
+			isFormControl ? createElement(BubbleInput, { key: 'bubble', __scopeCheckbox }) : null,
+		],
+	});
+}
+
+export function Indicator(props: any): any {
+	const { __scopeCheckbox, forceMount, ...indicatorProps } = props ?? {};
+	const context = useCheckboxContext('CheckboxIndicator', __scopeCheckbox);
+	return createElement(Presence, {
+		present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+		children: createElement(Primitive.span, {
+			'data-state': getState(context.checked),
+			'data-disabled': context.disabled ? '' : undefined,
+			...indicatorProps,
+			style: { pointerEvents: 'none', ...props?.style },
+		}),
+	});
+}
+
+export function BubbleInput(props: any): any {
+	const slot = S('Checkbox.BubbleInput');
+	const { __scopeCheckbox, ref: forwardedRef, ...inputProps } = props ?? {};
+	const {
+		control,
+		hasConsumerStoppedPropagationRef,
+		checked,
+		defaultChecked,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		bubbleInput,
+		setBubbleInput,
+	} = useCheckboxContext('CheckboxBubbleInput', __scopeCheckbox);
+
+	const composedRefs = useComposedRefs(forwardedRef, setBubbleInput, subSlot(slot, 'refs'));
+	const prevChecked = usePrevious(checked, subSlot(slot, 'prev'));
+	const controlSize = useSize(control, subSlot(slot, 'size'));
+
+	// Bubble checked change to parents (e.g form change event)
+	useEffect(
+		() => {
+			const input = bubbleInput;
+			if (!input) return;
+
+			const inputProto = window.HTMLInputElement.prototype;
+			const descriptor = Object.getOwnPropertyDescriptor(
+				inputProto,
+				'checked',
+			) as PropertyDescriptor;
+			const setChecked = descriptor.set;
+
+			const bubbles = !hasConsumerStoppedPropagationRef.current;
+			if (prevChecked !== checked && setChecked) {
+				input.indeterminate = isIndeterminate(checked);
+				setChecked.call(input, isIndeterminate(checked) ? false : checked);
+				input.dispatchEvent(new Event('click', { bubbles }));
+				// octane adaptation: also fire the native `change` React's synthetic
+				// onChange would have synthesised from the click (see file header).
+				input.dispatchEvent(new Event('change', { bubbles }));
+			}
+		},
+		[bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef],
+		subSlot(slot, 'e:bubble'),
+	);
+
+	const defaultCheckedRef = useRef(
+		isIndeterminate(checked) ? false : checked,
+		subSlot(slot, 'default'),
+	);
+	return createElement(Primitive.input, {
+		type: 'checkbox',
+		'aria-hidden': true,
+		// octane: the native `checked` ATTRIBUTE is HTML's default-checked state (there is
+		// no `defaultChecked` prop outside React's controlled model).
+		checked: (defaultChecked ?? defaultCheckedRef.current) || undefined,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		...inputProps,
+		tabIndex: -1,
+		ref: composedRefs,
+		style: {
+			...props?.style,
+			...controlSize,
+			position: 'absolute',
+			pointerEvents: 'none',
+			opacity: 0,
+			margin: 0,
+			// We transform because the input is absolutely positioned but we have
+			// rendered it **after** the button. This pulls it back to sit on top
+			// of the button.
+			transform: 'translateX(-100%)',
+		},
+	});
+}
+
+function isFunction(value: unknown): value is (...args: any[]) => any {
+	return typeof value === 'function';
+}
+
+function isIndeterminate(checked?: CheckedState | boolean): checked is 'indeterminate' {
+	return checked === 'indeterminate';
+}
+
+function getState(checked: CheckedState): string {
+	return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
+}
+
+export {
+	Root as Checkbox,
+	Provider as CheckboxProvider,
+	Trigger as CheckboxTrigger,
+	Indicator as CheckboxIndicator,
+	BubbleInput as CheckboxBubbleInput,
+};

package/src/Collapsible.ts

@@ -0,0 +1,170 @@
+// Ported from @radix-ui/react-collapsible. An open/closed disclosure: Root owns the
+// controllable `open` state + shares it via context; Trigger toggles it + carries ARIA;
+// Content stays mounted through its exit animation via `Presence` and exposes the
+// `--radix-collapsible-content-height/-width` CSS vars for animating. `.ts` components via
+// createElement; ref-as-prop.
+import { createElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Presence } from './Presence';
+import { Primitive } from './Primitive';
+import { useControllableState } from './useControllableState';
+import { useId } from './useId';
+
+interface CollapsibleContextValue {
+	contentId: string;
+	disabled?: boolean;
+	open: boolean;
+	onOpenToggle: () => void;
+}
+
+// Scoped context — `createCollapsibleScope` lets a composing primitive (Accordion) thread
+// its own Collapsible scope so the two don't collide.
+export const [createCollapsibleContext, createCollapsibleScope] = createContextScope('Collapsible');
+const [CollapsibleProvider, useCollapsibleContext] =
+	createCollapsibleContext<CollapsibleContextValue>('Collapsible');
+
+function getState(open?: boolean): 'open' | 'closed' {
+	return open ? 'open' : 'closed';
+}
+
+export function Root(props: any): any {
+	const slot = S('Collapsible.Root');
+	const {
+		__scopeCollapsible,
+		open: openProp,
+		defaultOpen,
+		disabled,
+		onOpenChange,
+		...rest
+	} = props ?? {};
+
+	const [open, setOpen] = useControllableState<boolean>(
+		{ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+		subSlot(slot, 'open'),
+	);
+	const contentId = useId(subSlot(slot, 'id'));
+	const onOpenToggle = useCallback(
+		() => setOpen((prev) => !prev),
+		[setOpen],
+		subSlot(slot, 'toggle'),
+	);
+
+	return createElement(CollapsibleProvider, {
+		scope: __scopeCollapsible,
+		contentId,
+		disabled,
+		open,
+		onOpenToggle,
+		children: createElement(Primitive.div, {
+			'data-state': getState(open),
+			'data-disabled': disabled ? '' : undefined,
+			...rest,
+		}),
+	});
+}
+
+export function Trigger(props: any): any {
+	const { __scopeCollapsible, ...rest } = props ?? {};
+	const context = useCollapsibleContext('CollapsibleTrigger', __scopeCollapsible);
+	return createElement(Primitive.button, {
+		type: 'button',
+		// Radix parity: only reference the content while it's expanded.
+		'aria-controls': context.open ? context.contentId : undefined,
+		'aria-expanded': context.open || false,
+		'data-state': getState(context.open),
+		'data-disabled': context.disabled ? '' : undefined,
+		disabled: context.disabled,
+		...rest,
+		onClick: composeEventHandlers(rest.onClick, context.onOpenToggle),
+	});
+}
+
+export function Content(props: any): any {
+	const { __scopeCollapsible, forceMount, ...contentProps } = props ?? {};
+	const context = useCollapsibleContext('CollapsibleContent', __scopeCollapsible);
+	return createElement(Presence, {
+		present: forceMount || context.open,
+		children: ({ present }: { present: boolean }) =>
+			createElement(ContentImpl, { ...contentProps, __scopeCollapsible, present }),
+	});
+}
+
+function ContentImpl(props: any): any {
+	const slot = S('Collapsible.ContentImpl');
+	const {
+		__scopeCollapsible,
+		present,
+		children,
+		ref: forwardedRef,
+		style,
+		...contentProps
+	} = props;
+	const context = useCollapsibleContext('CollapsibleContent', __scopeCollapsible);
+
+	const [isPresent, setIsPresent] = useState<boolean>(present, subSlot(slot, 'present'));
+	const rRef = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
+	const composedRefs = useComposedRefs(forwardedRef, rRef, subSlot(slot, 'refs'));
+	const heightRef = useRef(0, subSlot(slot, 'h'));
+	const widthRef = useRef(0, subSlot(slot, 'w'));
+	const isOpen = context.open || isPresent;
+	const isMountAnimationPreventedRef = useRef(isOpen, subSlot(slot, 'prevent'));
+	const originalStylesRef = useRef<any>(undefined, subSlot(slot, 'orig'));
+
+	useEffect(
+		() => {
+			const raf = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));
+			return () => cancelAnimationFrame(raf);
+		},
+		[],
+		subSlot(slot, 'e:mount'),
+	);
+
+	useLayoutEffect(
+		() => {
+			const node = rRef.current;
+			if (node) {
+				originalStylesRef.current = originalStylesRef.current || {
+					transitionDuration: node.style.transitionDuration,
+					animationName: node.style.animationName,
+				};
+				// Block the animation while measuring the natural size.
+				node.style.transitionDuration = '0s';
+				node.style.animationName = 'none';
+				const rect = node.getBoundingClientRect();
+				heightRef.current = rect.height;
+				widthRef.current = rect.width;
+				if (!isMountAnimationPreventedRef.current) {
+					node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+					node.style.animationName = originalStylesRef.current.animationName;
+				}
+				setIsPresent(present);
+			}
+		},
+		[context.open, present],
+		subSlot(slot, 'e:measure'),
+	);
+
+	const height = heightRef.current;
+	const width = widthRef.current;
+	return createElement(Primitive.div, {
+		'data-state': getState(context.open),
+		'data-disabled': context.disabled ? '' : undefined,
+		id: context.contentId,
+		hidden: !isOpen,
+		...contentProps,
+		ref: composedRefs,
+		style: {
+			'--radix-collapsible-content-height': height ? `${height}px` : undefined,
+			'--radix-collapsible-content-width': width ? `${width}px` : undefined,
+			...style,
+		},
+		children: isOpen ? children : null,
+	});
+}
+
+export { Root as Collapsible };
+export { useCollapsibleContext };