@octanejs/radix 0.1.2

package/src/Progress.ts

@@ -0,0 +1,92 @@
+// Ported from @radix-ui/react-progress (source:
+// .radix-primitives/packages/react/progress/src/progress.tsx). A `role=progressbar` with
+// value/max ARIA + `data-state` (indeterminate/loading/complete); Indicator mirrors the
+// state for styling.
+import { createElement } from 'octane';
+
+import { createContextScope } from './context';
+import { Primitive } from './Primitive';
+
+const DEFAULT_MAX = 100;
+
+const [createProgressContext, createProgressScope] = createContextScope('Progress');
+export { createProgressScope };
+const [ProgressProvider, useProgressContext] = createProgressContext<{
+	value: number | null;
+	max: number;
+}>('Progress');
+
+export function Root(props: any): any {
+	const {
+		__scopeProgress,
+		value: valueProp = null,
+		max: maxProp,
+		getValueLabel = defaultGetValueLabel,
+		...progressProps
+	} = props ?? {};
+	if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {
+		console.error(getInvalidMaxError(`${maxProp}`, 'Progress'));
+	}
+	const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
+	if (valueProp !== null && !isValidValueNumber(valueProp, max)) {
+		console.error(getInvalidValueError(`${valueProp}`, 'Progress'));
+	}
+	const value = isValidValueNumber(valueProp, max) ? valueProp : null;
+	const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined;
+	return createElement(ProgressProvider, {
+		scope: __scopeProgress,
+		value,
+		max,
+		children: createElement(Primitive.div, {
+			'aria-valuemax': max,
+			'aria-valuemin': 0,
+			'aria-valuenow': isNumber(value) ? value : undefined,
+			'aria-valuetext': valueLabel,
+			role: 'progressbar',
+			'data-state': getProgressState(value, max),
+			'data-value': value ?? undefined,
+			'data-max': max,
+			...progressProps,
+		}),
+	});
+}
+
+export function Indicator(props: any): any {
+	const { __scopeProgress, ...indicatorProps } = props ?? {};
+	const context = useProgressContext('ProgressIndicator', __scopeProgress);
+	return createElement(Primitive.div, {
+		'data-state': getProgressState(context.value, context.max),
+		'data-value': context.value ?? undefined,
+		'data-max': context.max,
+		...indicatorProps,
+	});
+}
+
+function getProgressState(value: number | null | undefined, maxValue: number): string {
+	return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';
+}
+function defaultGetValueLabel(value: number, max: number): string {
+	return `${Math.round((value / max) * 100)}%`;
+}
+function isNumber(value: any): value is number {
+	return typeof value === 'number';
+}
+function isValidMaxNumber(max: any): max is number {
+	return isNumber(max) && !isNaN(max) && max > 0;
+}
+function isValidValueNumber(value: any, max: number): value is number {
+	return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
+}
+function getInvalidMaxError(propValue: string, componentName: string): string {
+	return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
+}
+function getInvalidValueError(propValue: string, componentName: string): string {
+	return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
+  - a positive number
+  - less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
+  - \`null\` or \`undefined\` if the progress is indeterminate.
+
+Defaulting to \`null\`.`;
+}
+
+export { Root as Progress, Indicator as ProgressIndicator };

package/src/Radio.ts

@@ -0,0 +1,262 @@
+// Ported from @radix-ui/react-radio-group's internal radio (source:
+// .radix-primitives/packages/react/radio-group/src/radio.tsx). The single-radio
+// building block RadioGroup composes: a `role=radio` button + Presence indicator +
+// the hidden native-radio "bubble input" (same machinery as Checkbox). Same octane
+// adaptations as Checkbox.ts: `isPropagationStopped()` → `event.cancelBubble`;
+// `defaultChecked` → the native `checked` attribute; a native `change` dispatched
+// alongside the source's `click`.
+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';
+
+const RADIO_NAME = 'Radio';
+
+const [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
+export { createRadioScope };
+
+interface RadioContextValue {
+	checked: boolean;
+	disabled: boolean | undefined;
+	required: boolean | undefined;
+	name: string | undefined;
+	form: string | undefined;
+	value: string | number;
+	control: HTMLElement | null;
+	setControl: (control: HTMLElement | null) => void;
+	hasConsumerStoppedPropagationRef: { current: boolean };
+	isFormControl: boolean;
+	bubbleInput: HTMLInputElement | null;
+	setBubbleInput: (input: HTMLInputElement | null) => void;
+	onCheck(): void;
+}
+
+const [RadioProviderImpl, useRadioContextImpl] = createRadioContext<RadioContextValue>(RADIO_NAME);
+export const useRadioContext = useRadioContextImpl;
+
+export function RadioProvider(props: any): any {
+	const slot = S('Radio.Provider');
+	const {
+		__scopeRadio,
+		checked = false,
+		children,
+		disabled,
+		form,
+		name,
+		onCheck,
+		required,
+		value = 'on',
+		internal_do_not_use_render,
+	} = props ?? {};
+
+	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: RadioContextValue = {
+		checked,
+		disabled,
+		required,
+		name,
+		form,
+		value,
+		control,
+		setControl,
+		hasConsumerStoppedPropagationRef,
+		isFormControl,
+		bubbleInput,
+		setBubbleInput,
+		onCheck: () => onCheck?.(),
+	};
+
+	return createElement(RadioProviderImpl, {
+		scope: __scopeRadio,
+		...context,
+		children: isFunction(internal_do_not_use_render)
+			? internal_do_not_use_render(context)
+			: children,
+	});
+}
+
+export function RadioTrigger(props: any): any {
+	const slot = S('Radio.Trigger');
+	const { __scopeRadio, onClick, ref: forwardedRef, ...radioProps } = props ?? {};
+	const {
+		checked,
+		disabled,
+		value,
+		setControl,
+		onCheck,
+		hasConsumerStoppedPropagationRef,
+		isFormControl,
+		bubbleInput,
+	} = useRadioContext('RadioTrigger', __scopeRadio);
+	const composedRefs = useComposedRefs(forwardedRef, setControl, subSlot(slot, 'refs'));
+
+	return createElement(Primitive.button, {
+		type: 'button',
+		role: 'radio',
+		'aria-checked': checked,
+		'data-state': getState(checked),
+		'data-disabled': disabled ? '' : undefined,
+		disabled,
+		value,
+		...radioProps,
+		ref: composedRefs,
+		onClick: composeEventHandlers(onClick, (event: MouseEvent) => {
+			// radios cannot be unchecked so we only communicate a checked state
+			if (!checked) onCheck();
+			if (bubbleInput && isFormControl) {
+				hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+				// if radio 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 radio updates.
+				if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+			}
+		}),
+	});
+}
+
+export function Radio(props: any): any {
+	const {
+		__scopeRadio,
+		name,
+		checked,
+		required,
+		disabled,
+		value,
+		onCheck,
+		form,
+		ref: forwardedRef,
+		...radioProps
+	} = props ?? {};
+
+	return createElement(RadioProvider, {
+		__scopeRadio,
+		checked,
+		disabled,
+		required,
+		onCheck,
+		name,
+		form,
+		value,
+		internal_do_not_use_render: ({ isFormControl }: RadioContextValue) => [
+			createElement(RadioTrigger, {
+				key: 'trigger',
+				...radioProps,
+				ref: forwardedRef,
+				__scopeRadio,
+			}),
+			isFormControl ? createElement(RadioBubbleInput, { key: 'bubble', __scopeRadio }) : null,
+		],
+	});
+}
+
+export function RadioIndicator(props: any): any {
+	const { __scopeRadio, forceMount, ...indicatorProps } = props ?? {};
+	const context = useRadioContext('RadioIndicator', __scopeRadio);
+	return createElement(Presence, {
+		present: forceMount || context.checked,
+		children: createElement(Primitive.span, {
+			'data-state': getState(context.checked),
+			'data-disabled': context.disabled ? '' : undefined,
+			...indicatorProps,
+		}),
+	});
+}
+
+export function RadioBubbleInput(props: any): any {
+	const slot = S('Radio.BubbleInput');
+	const { __scopeRadio, ref: forwardedRef, ...inputProps } = props ?? {};
+	const {
+		control,
+		checked,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		bubbleInput,
+		setBubbleInput,
+		hasConsumerStoppedPropagationRef,
+	} = useRadioContext('RadioBubbleInput', __scopeRadio);
+
+	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) {
+				setChecked.call(input, checked);
+				input.dispatchEvent(new Event('click', { bubbles }));
+				// octane adaptation: also fire the native `change` (see Checkbox.ts header).
+				input.dispatchEvent(new Event('change', { bubbles }));
+			}
+		},
+		[bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef],
+		subSlot(slot, 'e:bubble'),
+	);
+
+	const defaultCheckedRef = useRef(checked, subSlot(slot, 'default'));
+	return createElement(Primitive.input, {
+		type: 'radio',
+		'aria-hidden': true,
+		// octane: native `checked` attribute = default-checked state (see Checkbox.ts).
+		checked: 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 getState(checked: boolean): string {
+	return checked ? 'checked' : 'unchecked';
+}

package/src/RadioGroup.ts

@@ -0,0 +1,212 @@
+// Ported from @radix-ui/react-radio-group (source:
+// .radix-primitives/packages/react/radio-group/src/radio-group.tsx). A `role=radiogroup`
+// on a RovingFocusGroup: arrow keys move focus between items and CHECK the focused item
+// (via a real `.click()` so the radio change event fires); each item is the internal
+// Radio (see Radio.ts) with its hidden native bubble input inside forms.
+import { createElement, useEffect, useRef } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { useDirection } from './direction';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import {
+	createRadioScope,
+	RadioBubbleInput,
+	RadioIndicator,
+	RadioProvider,
+	RadioTrigger,
+	useRadioContext,
+} from './Radio';
+import * as RovingFocusGroup from './RovingFocusGroup';
+import { createRovingFocusGroupScope } from './RovingFocusGroup';
+import { useControllableState } from './useControllableState';
+
+const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+const RADIO_GROUP_NAME = 'RadioGroup';
+
+const [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME, [
+	createRovingFocusGroupScope,
+	createRadioScope,
+]);
+export { createRadioGroupScope };
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+const useRadioScope = createRadioScope();
+
+interface RadioGroupContextValue {
+	name?: string;
+	required: boolean;
+	disabled: boolean;
+	value: string | null;
+	onValueChange(value: string): void;
+}
+
+const [RadioGroupProvider, useRadioGroupContext] =
+	createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME);
+
+export function Root(props: any): any {
+	const slot = S('RadioGroup.Root');
+	const {
+		__scopeRadioGroup,
+		name,
+		defaultValue,
+		value: valueProp,
+		required = false,
+		disabled = false,
+		orientation,
+		dir,
+		loop = true,
+		onValueChange,
+		ref: forwardedRef,
+		...groupProps
+	} = props ?? {};
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup, subSlot(slot, 'rfs'));
+	const direction = useDirection(dir);
+	const [value, setValue] = useControllableState<string | null>(
+		{ prop: valueProp, defaultProp: defaultValue ?? null, onChange: onValueChange },
+		subSlot(slot, 'value'),
+	);
+
+	return createElement(RadioGroupProvider, {
+		scope: __scopeRadioGroup,
+		name,
+		required,
+		disabled,
+		value,
+		onValueChange: setValue,
+		children: createElement(RovingFocusGroup.Root, {
+			asChild: true,
+			...rovingFocusGroupScope,
+			orientation,
+			dir: direction,
+			loop,
+			children: createElement(Primitive.div, {
+				role: 'radiogroup',
+				'aria-required': required,
+				'aria-orientation': orientation,
+				'data-disabled': disabled ? '' : undefined,
+				dir: direction,
+				...groupProps,
+				ref: forwardedRef,
+			}),
+		}),
+	});
+}
+
+function ItemProvider(props: any): any {
+	const slot = S('RadioGroup.ItemProvider');
+	const { __scopeRadioGroup, value, disabled, children, internal_do_not_use_render } = props;
+	const context = useRadioGroupContext('RadioGroupItemProvider', __scopeRadioGroup);
+	const radioScope = useRadioScope(__scopeRadioGroup, subSlot(slot, 'radio'));
+	const isDisabled = context.disabled || disabled;
+
+	return createElement(RadioProvider, {
+		...radioScope,
+		checked: context.value === value,
+		disabled: isDisabled,
+		required: context.required,
+		name: context.name,
+		value,
+		onCheck: () => context.onValueChange(value),
+		internal_do_not_use_render,
+		children,
+	});
+}
+
+function ItemTrigger(props: any): any {
+	const slot = S('RadioGroup.ItemTrigger');
+	const { __scopeRadioGroup, ref: forwardedRef, ...triggerProps } = props;
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup, subSlot(slot, 'rfs'));
+	const radioScope = useRadioScope(__scopeRadioGroup, subSlot(slot, 'radio'));
+	const { checked, disabled } = useRadioContext('RadioGroupItemTrigger', radioScope.__scopeRadio);
+	const ref = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
+	const composedRefs = useComposedRefs(forwardedRef, ref, subSlot(slot, 'refs'));
+	const isArrowKeyPressedRef = useRef(false, subSlot(slot, 'arrow'));
+
+	useEffect(
+		() => {
+			const handleKeyDown = (event: KeyboardEvent): void => {
+				if (ARROW_KEYS.includes(event.key)) {
+					isArrowKeyPressedRef.current = true;
+				}
+			};
+			const handleKeyUp = (): boolean => (isArrowKeyPressedRef.current = false);
+			document.addEventListener('keydown', handleKeyDown);
+			document.addEventListener('keyup', handleKeyUp);
+			return () => {
+				document.removeEventListener('keydown', handleKeyDown);
+				document.removeEventListener('keyup', handleKeyUp);
+			};
+		},
+		[],
+		subSlot(slot, 'e:keys'),
+	);
+
+	return createElement(RovingFocusGroup.Item, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		focusable: !disabled,
+		active: checked,
+		children: createElement(RadioTrigger, {
+			...radioScope,
+			...triggerProps,
+			ref: composedRefs,
+			onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event: KeyboardEvent) => {
+				// According to WAI ARIA, radio groups don't activate items on enter keypress
+				if (event.key === 'Enter') event.preventDefault();
+			}),
+			onFocus: composeEventHandlers(triggerProps.onFocus, () => {
+				// Our `RovingFocusGroup` will focus the radio when navigating with arrow
+				// keys and we need to "check" it in that case. We click it to "check" it
+				// (instead of updating the group value) so that the radio change event fires.
+				if (isArrowKeyPressedRef.current) {
+					(ref.current as HTMLElement | null)?.click();
+				}
+			}),
+		}),
+	});
+}
+
+export function Item(props: any): any {
+	const { __scopeRadioGroup, value, disabled, ref: forwardedRef, ...itemProps } = props ?? {};
+
+	return createElement(ItemProvider, {
+		__scopeRadioGroup,
+		value,
+		disabled,
+		internal_do_not_use_render: ({ isFormControl }: { isFormControl: boolean }) => [
+			createElement(ItemTrigger, {
+				key: 'trigger',
+				...itemProps,
+				ref: forwardedRef,
+				__scopeRadioGroup,
+			}),
+			isFormControl ? createElement(ItemBubbleInput, { key: 'bubble', __scopeRadioGroup }) : null,
+		],
+	});
+}
+
+function ItemBubbleInput(props: any): any {
+	const slot = S('RadioGroup.ItemBubbleInput');
+	const { __scopeRadioGroup, ...bubbleProps } = props;
+	const radioScope = useRadioScope(__scopeRadioGroup, subSlot(slot, 'radio'));
+	return createElement(RadioBubbleInput, { ...radioScope, ...bubbleProps });
+}
+
+export function Indicator(props: any): any {
+	const slot = S('RadioGroup.Indicator');
+	const { __scopeRadioGroup, ...indicatorProps } = props ?? {};
+	const radioScope = useRadioScope(__scopeRadioGroup, subSlot(slot, 'radio'));
+	return createElement(RadioIndicator, { ...radioScope, ...indicatorProps });
+}
+
+export {
+	Root as RadioGroup,
+	Item as RadioGroupItem,
+	ItemProvider as RadioGroupItemProvider,
+	ItemTrigger as RadioGroupItemTrigger,
+	ItemBubbleInput as RadioGroupItemBubbleInput,
+	Indicator as RadioGroupIndicator,
+};