@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/radio-group/index.js

@@ -0,0 +1,458 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { f as queryAll, r as resizeObserverBorderBox, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isSafari } from "../../platform-BDB0wXUk.js";
+import { m as isLeftClick, s as getEventTarget } from "../../event-bTItRgiw.js";
+import { s as trackFormControl, t as dispatchInputCheckedEvent } from "../../form-B1DW_w_3.js";
+import { n as visuallyHiddenStyle } from "../../visually-hidden-yDJ517KZ.js";
+import { F as toPx, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { o as trackFocusVisible, r as isFocusVisible } from "../../focus-visible-DWdQf__4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/radio-group/anatomy.ts
+const anatomy = createAnatomy("radio-group").parts("root", "label", "item", "itemText", "itemControl", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/radio-group/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
+const getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
+const getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
+const getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
+const getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
+const getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+const getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
+const getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
+const getInputEls = (ctx) => {
+	const selector = `input[type=radio][data-ownedby='${CSS.escape(getRootId(ctx))}']:not([disabled])`;
+	return queryAll(getRootEl(ctx), selector);
+};
+const getRadioEl = (ctx, value) => {
+	if (!value) return;
+	return ctx.getById(getItemId(ctx, value));
+};
+const getOffsetRect = (el) => ({
+	x: el?.offsetLeft ?? 0,
+	y: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+//#endregion
+//#region src/machines/radio-group/connect.ts
+function connect(service, normalize) {
+	const { context, send, computed, prop, scope } = service;
+	const groupDisabled = computed("isDisabled");
+	const groupInvalid = prop("invalid");
+	const readOnly = prop("readOnly");
+	function getItemState(props) {
+		return {
+			value: props.value,
+			invalid: !!props.invalid || !!groupInvalid,
+			disabled: !!props.disabled || groupDisabled,
+			checked: context.get("value") === props.value,
+			focused: context.get("focusedValue") === props.value,
+			focusVisible: context.get("focusVisibleValue") === props.value,
+			hovered: context.get("hoveredValue") === props.value,
+			active: context.get("activeValue") === props.value
+		};
+	}
+	function getItemDataAttrs(props) {
+		const itemState = getItemState(props);
+		return {
+			"data-focus": dataAttr(itemState.focused),
+			"data-focus-visible": dataAttr(itemState.focusVisible),
+			"data-disabled": dataAttr(itemState.disabled),
+			"data-readonly": dataAttr(readOnly),
+			"data-state": itemState.checked ? "checked" : "unchecked",
+			"data-hover": dataAttr(itemState.hovered),
+			"data-invalid": dataAttr(itemState.invalid),
+			"data-orientation": prop("orientation"),
+			"data-ssr": dataAttr(context.get("ssr"))
+		};
+	}
+	const focus = () => {
+		(getFirstEnabledAndCheckedInputEl(scope) ?? getFirstEnabledInputEl(scope))?.focus();
+	};
+	return {
+		focus,
+		value: context.get("value"),
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value,
+				isTrusted: false
+			});
+		},
+		clearValue() {
+			send({
+				type: "SET_VALUE",
+				value: null,
+				isTrusted: false
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				role: "radiogroup",
+				id: getRootId(scope),
+				"aria-labelledby": getLabelId(scope),
+				"aria-required": prop("required") || void 0,
+				"aria-disabled": groupDisabled || void 0,
+				"aria-readonly": readOnly || void 0,
+				"data-orientation": prop("orientation"),
+				"data-disabled": dataAttr(groupDisabled),
+				"data-invalid": dataAttr(groupInvalid),
+				"data-required": dataAttr(prop("required")),
+				"aria-orientation": prop("orientation"),
+				dir: prop("dir"),
+				style: { position: "relative" }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-disabled": dataAttr(groupDisabled),
+				"data-invalid": dataAttr(groupInvalid),
+				"data-required": dataAttr(prop("required")),
+				id: getLabelId(scope),
+				onClick: focus
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			return normalize.label({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, props.value),
+				htmlFor: getItemHiddenInputId(scope, props.value),
+				...getItemDataAttrs(props),
+				onPointerMove() {
+					if (itemState.disabled) return;
+					if (itemState.hovered) return;
+					send({
+						type: "SET_HOVERED",
+						value: props.value,
+						hovered: true
+					});
+				},
+				onPointerLeave() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_HOVERED",
+						value: null
+					});
+				},
+				onPointerDown(event) {
+					if (itemState.disabled) return;
+					if (!isLeftClick(event)) return;
+					if (itemState.focused && event.pointerType === "mouse") event.preventDefault();
+					send({
+						type: "SET_ACTIVE",
+						value: props.value,
+						active: true
+					});
+				},
+				onPointerUp() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				},
+				onClick() {
+					if (!itemState.disabled && isSafari()) getItemHiddenInputEl(scope, props.value)?.focus();
+				}
+			});
+		},
+		getItemTextProps(props) {
+			return normalize.element({
+				...parts.itemText.attrs,
+				dir: prop("dir"),
+				id: getItemLabelId(scope, props.value),
+				...getItemDataAttrs(props)
+			});
+		},
+		getItemControlProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemControl.attrs,
+				dir: prop("dir"),
+				id: getItemControlId(scope, props.value),
+				"data-active": dataAttr(itemState.active),
+				"aria-hidden": true,
+				...getItemDataAttrs(props)
+			});
+		},
+		getItemHiddenInputProps(props) {
+			const itemState = getItemState(props);
+			return normalize.input({
+				"data-ownedby": getRootId(scope),
+				id: getItemHiddenInputId(scope, props.value),
+				type: "radio",
+				name: prop("name") || prop("id"),
+				form: prop("form"),
+				value: props.value,
+				required: prop("required"),
+				"aria-labelledby": getItemLabelId(scope, props.value),
+				"aria-invalid": itemState.invalid || void 0,
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					if (event.currentTarget.checked) send({
+						type: "SET_VALUE",
+						value: props.value,
+						isTrusted: true
+					});
+				},
+				onBlur() {
+					send({
+						type: "SET_FOCUSED",
+						value: null,
+						focused: false,
+						focusVisible: false
+					});
+				},
+				onFocus() {
+					const focusVisible = isFocusVisible();
+					send({
+						type: "SET_FOCUSED",
+						value: props.value,
+						focused: true,
+						focusVisible
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: props.value,
+						active: true
+					});
+				},
+				onKeyUp(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				},
+				disabled: itemState.disabled || readOnly,
+				defaultChecked: itemState.checked,
+				style: visuallyHiddenStyle
+			});
+		},
+		getIndicatorProps() {
+			const rect = context.get("indicatorRect");
+			const animateIndicator = context.get("animateIndicator");
+			return normalize.element({
+				id: getIndicatorId(scope),
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				hidden: context.get("value") == null || isRectEmpty(rect),
+				"data-disabled": dataAttr(groupDisabled),
+				"data-orientation": prop("orientation"),
+				onTransitionEnd(event) {
+					if (getEventTarget(event) !== event.currentTarget) return;
+					send({ type: "INDICATOR_TRANSITION_END" });
+				},
+				style: {
+					"--transition-property": "left, top, width, height",
+					"--left": toPx(rect?.x),
+					"--top": toPx(rect?.y),
+					"--width": toPx(rect?.width),
+					"--height": toPx(rect?.height),
+					position: "absolute",
+					willChange: animateIndicator ? "var(--transition-property)" : "auto",
+					transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+					transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
+					transitionTimingFunction: "var(--transition-timing-function)",
+					[prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+const isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+//#endregion
+//#region src/machines/radio-group/machine.ts
+const { not } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			orientation: "vertical",
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			activeValue: bindable(() => ({ defaultValue: null })),
+			focusedValue: bindable(() => ({ defaultValue: null })),
+			focusVisibleValue: bindable(() => ({ defaultValue: null })),
+			hoveredValue: bindable(() => ({ defaultValue: null })),
+			indicatorRect: bindable(() => ({ defaultValue: null })),
+			animateIndicator: bindable(() => ({ defaultValue: false })),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			ssr: bindable(() => ({ defaultValue: true }))
+		};
+	},
+	refs() {
+		return {
+			indicatorCleanup: null,
+			focusVisibleValue: null,
+			prevValue: null
+		};
+	},
+	computed: { isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled") },
+	entry: [
+		"syncPrevValue",
+		"syncIndicatorRect",
+		"syncSsr"
+	],
+	exit: ["cleanupObserver"],
+	effects: ["trackFormControlState", "trackFocusVisible"],
+	watch({ track, action, context }) {
+		track([() => context.get("value")], () => {
+			action([
+				"syncIndicatorAnimation",
+				"syncIndicatorRect",
+				"syncInputElements"
+			]);
+		});
+	},
+	on: {
+		SET_VALUE: [{
+			guard: not("isTrusted"),
+			actions: ["setValue", "dispatchChangeEvent"]
+		}, { actions: ["setValue"] }],
+		SET_HOVERED: { actions: ["setHovered"] },
+		SET_ACTIVE: { actions: ["setActive"] },
+		SET_FOCUSED: { actions: ["setFocused"] },
+		INDICATOR_TRANSITION_END: { actions: ["clearIndicatorAnimation"] }
+	},
+	states: { idle: {} },
+	implementations: {
+		guards: { isTrusted: ({ event }) => !!event.isTrusted },
+		effects: {
+			trackFormControlState({ context, scope }) {
+				return trackFormControl(getRootEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", context.initial("value"));
+					}
+				});
+			},
+			trackFocusVisible({ scope }) {
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			}
+		},
+		actions: {
+			setValue({ context, event }) {
+				context.set("value", event.value);
+			},
+			setHovered({ context, event }) {
+				context.set("hoveredValue", event.value);
+			},
+			setActive({ context, event }) {
+				context.set("activeValue", event.value);
+			},
+			setFocused({ context, event }) {
+				context.set("focusedValue", event.value);
+				const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
+				context.set("focusVisibleValue", focusVisibleValue);
+			},
+			syncPrevValue({ context, refs }) {
+				refs.set("prevValue", context.get("value"));
+			},
+			syncIndicatorAnimation({ context, refs }) {
+				const prevValue = refs.get("prevValue");
+				const nextValue = context.get("value");
+				const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+				context.set("animateIndicator", animate);
+				refs.set("prevValue", nextValue);
+			},
+			clearIndicatorAnimation({ context }) {
+				context.set("animateIndicator", false);
+			},
+			syncInputElements({ context, scope }) {
+				getInputEls(scope).forEach((input) => {
+					input.checked = input.value === context.get("value");
+				});
+			},
+			cleanupObserver({ refs }) {
+				refs.get("indicatorCleanup")?.();
+			},
+			syncSsr({ context }) {
+				context.set("ssr", false);
+			},
+			syncIndicatorRect({ context, scope, refs }) {
+				refs.get("indicatorCleanup")?.();
+				if (!getIndicatorEl(scope)) return;
+				const value = context.get("value");
+				const radioEl = getRadioEl(scope, value);
+				if (value == null || !radioEl) {
+					context.set("indicatorRect", null);
+					return;
+				}
+				const exec = () => {
+					context.set("indicatorRect", getOffsetRect(radioEl));
+				};
+				exec();
+				const indicatorCleanup = resizeObserverBorderBox.observe(radioEl, exec);
+				refs.set("indicatorCleanup", indicatorCleanup);
+			},
+			dispatchChangeEvent({ context, scope }) {
+				getInputEls(scope).forEach((inputEl) => {
+					const checked = inputEl.value === context.get("value");
+					if (checked === inputEl.checked) return;
+					dispatchInputCheckedEvent(inputEl, { checked });
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/radio-group/props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onValueChange",
+	"orientation",
+	"readOnly",
+	"required",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()([
+	"value",
+	"disabled",
+	"invalid"
+]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };