ajo-ui 0.1.0

package/src/radio-group.tsx

@@ -0,0 +1,186 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import { callHandler, callRef, dom, listen, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import { ariaChecked, bool, flag, syncCheckedState } from './utils'
+
+/** Layout and keyboard-navigation axis of a radio group. */
+export type RadioGroupOrientation = 'horizontal' | 'vertical'
+
+/** Props for a radio-group fieldset and its controlled selection. */
+export type RadioGroupArgs = WithChildren<IntrinsicElements['fieldset'] & {
+	/** Shared radio input name. */
+	name?: string
+	/** Controlled selected value. */
+	value?: string
+	/** Initial selected value for uncontrolled groups. */
+	defaultValue?: string
+	/** Layout orientation. */
+	orientation?: RadioGroupOrientation
+	/** Called when a radio item becomes checked. */
+	onValueChange?: (value: string, event: Event) => void
+}>
+
+/** Props for a radio item and its rendered indicator. */
+export type RadioGroupItemArgs = IntrinsicElements['input'] & {
+	/** Classes for the indicator element. */
+	indicatorClass?: string
+	/** Classes for the native input element. */
+	inputClass?: string
+}
+
+type RadioGroupContextValue = {
+	defaultValue?: string
+	disabled?: boolean
+	name?: string
+	onValueChange?: (value: string, event: Event) => void
+	required?: boolean
+	value?: string
+}
+
+type RadioGroupRootArgs = WithChildren<RadioGroupContextValue>
+
+const RadioGroupContext = context<RadioGroupContextValue | null>(null)
+
+const syncRadioInput = (input: HTMLInputElement) =>
+	syncCheckedState(input, input.closest<HTMLElement>('[data-slot="radio-group-item"]'))
+
+const syncRadioGroup = (root: HTMLElement) => {
+	for (const input of root.querySelectorAll<HTMLInputElement>('input[data-slot="radio-group-input"]')) {
+		syncRadioInput(input)
+	}
+}
+
+const itemState = (active: boolean | undefined, attrs: IntrinsicElements['input']) =>
+	bool(active ?? attrs['set:checked'] ?? attrs.checked ?? attrs.defaultChecked) ? 'checked' : 'unchecked'
+
+const change = (
+	value: string | undefined,
+	previous: unknown,
+	onValueChange: RadioGroupContextValue['onValueChange'],
+) => (event: Event) => {
+	callHandler(previous, event)
+
+	const input = event.currentTarget as HTMLInputElement
+	if (input.checked && value != null) onValueChange?.(value, event)
+	queueMicrotask(() => {
+		const root = input.closest<HTMLElement>('[data-slot="radio-group"]')
+		if (root) syncRadioGroup(root)
+		else syncRadioInput(input)
+	})
+}
+
+const RadioGroupRoot: Stateful<RadioGroupRootArgs, 'fieldset'> = function* () {
+	listen(this, 'change', () => {
+		queueMicrotask(() => syncRadioGroup(this))
+	})
+
+	for (const { children, defaultValue, disabled, name, onValueChange, required, value } of this) {
+		RadioGroupContext({ defaultValue, disabled, name, onValueChange, required, value })
+		if (dom(this)) queueMicrotask(() => syncRadioGroup(this))
+		yield <>{children}</>
+	}
+}
+
+RadioGroupRoot.is = 'fieldset'
+
+/** Unstyled radio group with native fieldset semantics. */
+const RadioGroup: Stateless<RadioGroupArgs> = ({
+	children,
+	defaultValue,
+	disabled,
+	name,
+	onValueChange,
+	orientation = 'vertical',
+	required,
+	value,
+	...attrs
+}) => {
+	const disabledFlag = disabled ? true : undefined
+	const requiredFlag = required ? true : undefined
+
+	return (
+		<RadioGroupRoot
+			{...rootAttrs(attrs)}
+			defaultValue={defaultValue}
+			disabled={disabledFlag}
+			name={name}
+			onValueChange={onValueChange}
+			required={requiredFlag}
+			value={value}
+			attr:aria-orientation={orientation}
+			attr:data-disabled={flag(disabled)}
+			attr:data-orientation={orientation}
+			attr:data-slot="radio-group"
+			attr:disabled={disabledFlag}
+		>
+			{children}
+		</RadioGroupRoot>
+	)
+}
+
+/** Unstyled native radio item with indicator slot. */
+const RadioGroupItem: Stateless<RadioGroupItemArgs> = ({
+	checked,
+	class: classes,
+	disabled,
+	indicatorClass,
+	inputClass,
+	name,
+	ref,
+	required,
+	'set:checked': setChecked,
+	'set:onchange': setOnChange,
+	type: _type,
+	value,
+	...attrs
+}) => {
+	const group = RadioGroupContext()
+	const itemValue = value == null ? undefined : String(value)
+	const ownChecked = checked == null ? undefined : Boolean(checked)
+	const groupChecked = group?.value != null
+		? itemValue === group.value
+		: group?.defaultValue != null
+			? itemValue === group.defaultValue
+			: undefined
+	const active = ownChecked ?? groupChecked
+	const syncChecked = active ?? setChecked as boolean | undefined
+	const state = itemState(active, { ...attrs, checked, defaultChecked: attrs.defaultChecked, 'set:checked': setChecked })
+	const disabledValue = disabled ?? group?.disabled
+
+	return (
+		<span
+			class={classes}
+			data-disabled={flag(disabledValue)}
+			data-slot="radio-group-item"
+			data-state={state}
+		>
+			<input
+				{...attrs}
+				aria-checked={ariaChecked(state)}
+				checked={active}
+				class={inputClass}
+				data-slot="radio-group-input"
+				data-state={state}
+				disabled={disabledValue}
+				name={name ?? group?.name}
+				ref={element => {
+					callRef(ref, element)
+					if (element) queueMicrotask(() => syncRadioInput(element))
+				}}
+				required={required ?? group?.required}
+				set:checked={syncChecked}
+				set:onchange={change(itemValue, setOnChange, group?.onValueChange)}
+				type="radio"
+				value={value}
+			/>
+			<span
+				aria-hidden="true"
+				class={indicatorClass}
+				data-slot="radio-group-indicator"
+				data-state={state}
+			/>
+		</span>
+	)
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/resizable.tsx

@@ -0,0 +1,310 @@
+import type { IntrinsicElements, Stateful, Stateless, WithChildren } from 'ajo'
+import { clamp, listen, move, statefulRootAttrs as rootAttrs } from 'ajo-cloves'
+import { context } from 'ajo/context'
+import { stlx } from './utils'
+
+/** Axis along which adjacent panels are resized. */
+export type ResizableOrientation = 'horizontal' | 'vertical'
+/** Panel size expressed as a percentage number or CSS-like string. */
+export type ResizableSize = number | string
+
+/** Props for a group of adjacent resizable panels. */
+export type ResizablePanelGroupArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Resize direction for adjacent panels. */
+	orientation?: ResizableOrientation
+}>
+
+/** Props for a panel with initial and bounded sizes. */
+export type ResizablePanelArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Initial panel size as a percentage number or string such as `50%`. */
+	defaultSize?: ResizableSize
+	/** Minimum panel size as a percentage. */
+	minSize?: ResizableSize
+	/** Maximum panel size as a percentage. */
+	maxSize?: ResizableSize
+}>
+
+/** Props for the pointer- and keyboard-operated resize handle. */
+export type ResizableHandleArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Disable pointer and keyboard resizing for this handle. */
+	disabled?: boolean
+}>
+
+/** Layout direction inherited by Resizable parts. */
+export type ResizableContextValue = {
+	orientation: ResizableOrientation
+}
+
+type ResizeSession = {
+	groupSize: number
+	handle: HTMLElement
+	next: HTMLElement
+	nextMax: number
+	nextMin: number
+	prev: HTMLElement
+	prevMax: number
+	prevMin: number
+	prevStart: number
+	total: number
+}
+
+/** Layout direction shared by a ResizablePanelGroup with its parts. */
+export const ResizableContext = context<ResizableContextValue>({ orientation: 'horizontal' })
+
+const percent = (size: ResizableSize | undefined, fallback: number) => {
+	if (typeof size === 'number' && Number.isFinite(size)) return size
+	if (typeof size === 'string') {
+		const parsed = Number.parseFloat(size)
+		if (Number.isFinite(parsed)) return parsed
+	}
+	return fallback
+}
+
+const limit = (panel: HTMLElement, name: 'maxSize' | 'minSize', fallback: number) =>
+	percent(panel.dataset[name], fallback)
+
+const style = (
+	orientation: ResizableOrientation,
+	defaultSize: ResizableSize | undefined,
+	minSize: ResizableSize | undefined,
+	maxSize: ResizableSize | undefined,
+	styles: unknown,
+) => {
+	const basis = percent(defaultSize, 0)
+
+	return stlx(
+		typeof styles === 'string' ? styles : undefined,
+		{ flex: defaultSize == null ? '1 1 0' : `0 0 ${basis}%` },
+		minSize == null ? undefined : {
+			[orientation === 'horizontal' ? 'minWidth' : 'minHeight']: `${percent(minSize, 0)}%`,
+		},
+		maxSize == null ? undefined : {
+			[orientation === 'horizontal' ? 'maxWidth' : 'maxHeight']: `${percent(maxSize, 100)}%`,
+		},
+	)
+}
+
+const mainSize = (element: HTMLElement, orientation: ResizableOrientation) => {
+	const box = element.getBoundingClientRect()
+	return orientation === 'horizontal' ? box.width : box.height
+}
+
+const previousPanel = (handle: HTMLElement) => {
+	let node = handle.previousElementSibling
+	while (node && !(node instanceof HTMLElement && node.matches('[data-slot="resizable-panel"]'))) {
+		node = node.previousElementSibling
+	}
+	return node instanceof HTMLElement ? node : null
+}
+
+const nextPanel = (handle: HTMLElement) => {
+	let node = handle.nextElementSibling
+	while (node && !(node instanceof HTMLElement && node.matches('[data-slot="resizable-panel"]'))) {
+		node = node.nextElementSibling
+	}
+	return node instanceof HTMLElement ? node : null
+}
+
+const owningGroup = (handle: HTMLElement) =>
+	handle.closest<HTMLElement>('[data-slot="resizable-panel-group"]')
+
+const setPanelSize = (panel: HTMLElement, px: number, groupSize: number) => {
+	const pct = groupSize > 0 ? px / groupSize * 100 : 0
+	panel.dataset.size = String(pct)
+	panel.style.flex = `0 0 ${px}px`
+	panel.dispatchEvent(new CustomEvent('resize', { detail: { size: pct } }))
+}
+
+const setHandleValue = (session: ResizeSession, prev: number) => {
+	const pct = session.groupSize > 0 ? prev / session.groupSize * 100 : 0
+	session.handle.setAttribute('aria-valuenow', String(Math.round(clamp(pct, 0, 100))))
+}
+
+const applyResize = (session: ResizeSession, delta: number) => {
+	// Conflicting panel constraints can invert the bounds; the lower bound wins.
+	const min = Math.max(session.prevMin, session.total - session.nextMax)
+	const max = Math.min(session.prevMax, session.total - session.nextMin)
+	const prev = clamp(session.prevStart + delta, min, Math.max(min, max))
+	const next = session.total - prev
+
+	setPanelSize(session.prev, prev, session.groupSize)
+	setPanelSize(session.next, next, session.groupSize)
+	setHandleValue(session, prev)
+}
+
+const session = (
+	group: HTMLElement,
+	handle: HTMLElement,
+	orientation: ResizableOrientation,
+): ResizeSession | null => {
+	const prev = previousPanel(handle)
+	const next = nextPanel(handle)
+	const groupSize = mainSize(group, orientation)
+	if (!prev || !next || groupSize <= 0) return null
+
+	const prevStart = mainSize(prev, orientation)
+	const nextStart = mainSize(next, orientation)
+	const total = prevStart + nextStart
+
+	const active = {
+		groupSize,
+		handle,
+		next,
+		nextMax: groupSize * limit(next, 'maxSize', 100) / 100,
+		nextMin: groupSize * limit(next, 'minSize', 0) / 100,
+		prev,
+		prevMax: groupSize * limit(prev, 'maxSize', 100) / 100,
+		prevMin: groupSize * limit(prev, 'minSize', 0) / 100,
+		prevStart,
+		total,
+	}
+	setHandleValue(active, prevStart)
+	return active
+}
+
+const ResizablePanelGroupRoot: Stateful<ResizablePanelGroupArgs> = function* () {
+	let orientation: ResizableOrientation = 'horizontal'
+	let active: ResizeSession | null = null
+	let cursor = ''
+	let select = ''
+
+	const restore = () => {
+		if (!active) return
+		document.body.style.cursor = cursor
+		document.body.style.userSelect = select
+		active = null
+	}
+	this.signal.addEventListener('abort', restore, { once: true })
+
+	const drag = move(this, {
+		onMove: data => {
+			if (active) applyResize(active, orientation === 'horizontal' ? data.dx : data.dy)
+		},
+		onEnd: () => restore(),
+	})
+
+	const startPointer = (event: PointerEvent) => {
+		if (active || event.button !== 0) return
+
+		const handle = (event.target as HTMLElement | null)?.closest<HTMLElement>('[data-slot="resizable-handle"]')
+		if (!handle || owningGroup(handle) !== this || handle.getAttribute('aria-disabled') === 'true') return
+
+		const next = session(this, handle, orientation)
+		if (!next) return
+
+		event.preventDefault()
+		event.stopPropagation()
+
+		cursor = document.body.style.cursor
+		select = document.body.style.userSelect
+		document.body.style.cursor = orientation === 'horizontal' ? 'col-resize' : 'row-resize'
+		document.body.style.userSelect = 'none'
+
+		active = next
+		if (!drag.start(event)) restore()
+	}
+
+	const keyResize = (event: KeyboardEvent) => {
+		const handle = (event.target as HTMLElement | null)?.closest<HTMLElement>('[data-slot="resizable-handle"]')
+		if (!handle || owningGroup(handle) !== this || handle.getAttribute('aria-disabled') === 'true') return
+
+		const step = event.shiftKey ? 50 : 10
+		const delta = orientation === 'horizontal'
+			? event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0
+			: event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0
+
+		if (!delta) return
+
+		const active = session(this, handle, orientation)
+		if (!active) return
+
+		event.preventDefault()
+		applyResize(active, delta)
+	}
+
+	listen(this, 'pointerdown', startPointer)
+	listen(this, 'keydown', keyResize)
+
+	for (const args of this) {
+		orientation = args.orientation ?? 'horizontal'
+		ResizableContext({ orientation })
+		yield <>{args.children}</>
+	}
+}
+
+/** Unstyled resizable panel group for split layouts. */
+const ResizablePanelGroup: Stateless<ResizablePanelGroupArgs> = ({
+	children,
+	orientation = 'horizontal',
+	...attrs
+}) => (
+	<ResizablePanelGroupRoot
+		{...rootAttrs(attrs)}
+		orientation={orientation}
+		attr:aria-orientation={orientation}
+		attr:data-orientation={orientation}
+		attr:data-panel-group-direction={orientation}
+		attr:data-slot="resizable-panel-group"
+	>
+		{children}
+	</ResizablePanelGroupRoot>
+)
+
+/** Unstyled resizable flex panel. */
+const ResizablePanel: Stateless<ResizablePanelArgs> = ({
+	children,
+	defaultSize,
+	maxSize,
+	minSize,
+	style: styles,
+	...attrs
+}) => {
+	const { orientation } = ResizableContext()
+	const initial = percent(defaultSize, 0)
+
+	return (
+		<div
+			{...attrs}
+			data-max-size={maxSize == null ? undefined : percent(maxSize, 100)}
+			data-min-size={minSize == null ? undefined : percent(minSize, 0)}
+			data-size={defaultSize == null ? undefined : initial}
+			data-slot="resizable-panel"
+			style={style(orientation, defaultSize, minSize, maxSize, styles)}
+		>
+			{children}
+		</div>
+	)
+}
+
+/** Unstyled resize separator between adjacent panels. */
+const ResizableHandle: Stateless<ResizableHandleArgs> = ({
+	children,
+	disabled,
+	...attrs
+}) => {
+	const { orientation } = ResizableContext()
+	const separator = orientation === 'vertical' ? 'horizontal' : 'vertical'
+
+	return (
+		<div
+			{...attrs}
+			aria-disabled={disabled ? 'true' : undefined}
+			aria-orientation={separator}
+			aria-valuemax="100"
+			aria-valuemin="0"
+			data-orientation={separator}
+			data-panel-group-direction={orientation}
+			data-slot="resizable-handle"
+			role="separator"
+			tabindex={disabled ? -1 : 0}
+		>
+			{children}
+		</div>
+	)
+}
+
+export {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+}