@destyler/radio 0.0.7-beta.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,435 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, dataAttr, dispatchInputCheckedEvent, nextTick, queryAll, trackFormControl, visuallyHiddenStyle } from "@destyler/dom";
+import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
+import { trackElementRect } from "@destyler/element-rect";
+import { compact, createSplitProps, isEqual, isString } from "@destyler/utils";
+import { createMachine, guards } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("radio-group").parts("root", "label", "item", "itemText", "itemControl", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `radio:${ctx.id}`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `radio:${ctx.id}:label`,
+	getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio:${ctx.id}:radio:${value}`,
+	getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio:${ctx.id}:radio:input:${value}`,
+	getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio:${ctx.id}:radio:control:${value}`,
+	getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio:${ctx.id}:radio:label:${value}`,
+	getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio:${ctx.id}:indicator`,
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
+	getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+	getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
+	getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
+	getInputEls: (ctx) => {
+		const ownerId = CSS.escape(dom.getRootId(ctx));
+		const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
+		return queryAll(dom.getRootEl(ctx), selector);
+	},
+	getActiveRadioEl: (ctx) => {
+		if (!ctx.value) return;
+		return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
+	},
+	getOffsetRect: (el) => ({
+		left: el?.offsetLeft ?? 0,
+		top: el?.offsetTop ?? 0,
+		width: el?.offsetWidth ?? 0,
+		height: el?.offsetHeight ?? 0
+	}),
+	getRectById: (ctx, id) => {
+		const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
+		if (!radioEl) return;
+		return dom.resolveRect(dom.getOffsetRect(radioEl));
+	},
+	resolveRect: (rect) => ({
+		width: `${rect.width}px`,
+		height: `${rect.height}px`,
+		left: `${rect.left}px`,
+		top: `${rect.top}px`
+	})
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const groupDisabled = state.context.isDisabled;
+	const readOnly = state.context.readOnly;
+	function getItemState(props$1) {
+		return {
+			invalid: !!props$1.invalid,
+			disabled: !!props$1.disabled || groupDisabled,
+			checked: state.context.value === props$1.value,
+			focused: state.context.focusedValue === props$1.value,
+			hovered: state.context.hoveredValue === props$1.value,
+			active: state.context.activeValue === props$1.value
+		};
+	}
+	function getItemDataAttrs(props$1) {
+		const radioState = getItemState(props$1);
+		return {
+			"data-focus": dataAttr(radioState.focused),
+			"data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
+			"data-disabled": dataAttr(radioState.disabled),
+			"data-readonly": dataAttr(readOnly),
+			"data-state": radioState.checked ? "checked" : "unchecked",
+			"data-hover": dataAttr(radioState.hovered),
+			"data-invalid": dataAttr(radioState.invalid),
+			"data-orientation": state.context.orientation,
+			"data-ssr": dataAttr(state.context.ssr)
+		};
+	}
+	const focus = () => {
+		const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
+		if (firstEnabledAndCheckedInput) {
+			firstEnabledAndCheckedInput.focus();
+			return;
+		}
+		const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
+		firstEnabledInput?.focus();
+	};
+	return {
+		focus,
+		value: state.context.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": dom.getRootId(state.context),
+				"aria-labelledby": dom.getLabelId(state.context),
+				"data-orientation": state.context.orientation,
+				"data-disabled": dataAttr(groupDisabled),
+				"aria-orientation": state.context.orientation,
+				"dir": state.context.dir,
+				"style": { position: "relative" }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				"dir": state.context.dir,
+				"data-orientation": state.context.orientation,
+				"data-disabled": dataAttr(groupDisabled),
+				"id": dom.getLabelId(state.context),
+				"onClick": focus
+			});
+		},
+		getItemState,
+		getItemProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.label({
+				...parts.item.attrs,
+				dir: state.context.dir,
+				id: dom.getItemId(state.context, props$1.value),
+				htmlFor: dom.getItemHiddenInputId(state.context, props$1.value),
+				...getItemDataAttrs(props$1),
+				onPointerMove() {
+					if (itemState.disabled) return;
+					if (itemState.hovered) return;
+					send({
+						type: "SET_HOVERED",
+						value: props$1.value,
+						hovered: true
+					});
+				},
+				onPointerLeave() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_HOVERED",
+						value: null
+					});
+				},
+				onPointerDown(event) {
+					if (itemState.disabled) return;
+					if (itemState.focused && event.pointerType === "mouse") event.preventDefault();
+					send({
+						type: "SET_ACTIVE",
+						value: props$1.value,
+						active: true
+					});
+				},
+				onPointerUp() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				}
+			});
+		},
+		getItemTextProps(props$1) {
+			return normalize.element({
+				...parts.itemText.attrs,
+				dir: state.context.dir,
+				id: dom.getItemLabelId(state.context, props$1.value),
+				...getItemDataAttrs(props$1)
+			});
+		},
+		getItemControlProps(props$1) {
+			const controlState = getItemState(props$1);
+			return normalize.element({
+				...parts.itemControl.attrs,
+				"dir": state.context.dir,
+				"id": dom.getItemControlId(state.context, props$1.value),
+				"data-active": dataAttr(controlState.active),
+				"aria-hidden": true,
+				...getItemDataAttrs(props$1)
+			});
+		},
+		getItemHiddenInputProps(props$1) {
+			const inputState = getItemState(props$1);
+			return normalize.input({
+				"data-ownedby": dom.getRootId(state.context),
+				"id": dom.getItemHiddenInputId(state.context, props$1.value),
+				"type": "radio",
+				"name": state.context.name || state.context.id,
+				"form": state.context.form,
+				"value": props$1.value,
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					if (event.currentTarget.checked) send({
+						type: "SET_VALUE",
+						value: props$1.value,
+						isTrusted: true
+					});
+				},
+				onBlur() {
+					send({
+						type: "SET_FOCUSED",
+						value: null,
+						focused: false,
+						focusVisible: false
+					});
+				},
+				onFocus() {
+					const focusVisible = isFocusVisible();
+					send({
+						type: "SET_FOCUSED",
+						value: props$1.value,
+						focused: true,
+						focusVisible
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: props$1.value,
+						active: true
+					});
+				},
+				onKeyUp(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				},
+				"disabled": inputState.disabled,
+				"defaultChecked": inputState.checked,
+				"style": visuallyHiddenStyle
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				"id": dom.getIndicatorId(state.context),
+				...parts.indicator.attrs,
+				"dir": state.context.dir,
+				"hidden": state.context.value == null,
+				"data-disabled": dataAttr(groupDisabled),
+				"data-orientation": state.context.orientation,
+				"style": {
+					"--transition-property": "left, top, width, height",
+					"--left": state.context.indicatorRect?.left,
+					"--top": state.context.indicatorRect?.top,
+					"--width": state.context.indicatorRect?.width,
+					"--height": state.context.indicatorRect?.height,
+					"position": "absolute",
+					"willChange": "var(--transition-property)",
+					"transitionProperty": "var(--transition-property)",
+					"transitionDuration": state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+					"transitionTimingFunction": "var(--transition-timing-function)",
+					[state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const { not } = guards;
+const invoke = { change: (ctx) => {
+	if (ctx.value == null) return;
+	ctx.onValueChange?.({ value: ctx.value });
+} };
+const set = { value: (ctx, value) => {
+	if (isEqual(ctx.value, value)) return;
+	ctx.value = value;
+	invoke.change(ctx);
+} };
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "radio",
+		initial: "idle",
+		context: {
+			value: null,
+			activeValue: null,
+			focusedValue: null,
+			hoveredValue: null,
+			disabled: false,
+			orientation: "vertical",
+			...ctx,
+			indicatorRect: {},
+			canIndicatorTransition: false,
+			fieldsetDisabled: false,
+			focusVisible: false,
+			ssr: true
+		},
+		computed: { isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled },
+		entry: ["syncIndicatorRect", "syncSsr"],
+		exit: ["cleanupObserver"],
+		activities: ["trackFormControlState", "trackFocusVisible"],
+		watch: { value: [
+			"setIndicatorTransition",
+			"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" }
+		},
+		states: { idle: {} }
+	}, {
+		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
+		activities: {
+			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getRootEl(ctx$1), {
+					onFieldsetDisabledChange(disabled) {
+						ctx$1.fieldsetDisabled = disabled;
+					},
+					onFormReset() {
+						send({
+							type: "SET_VALUE",
+							value: initialContext.value
+						});
+					}
+				});
+			},
+			trackFocusVisible(ctx$1) {
+				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
+			}
+		},
+		actions: {
+			setValue(ctx$1, evt) {
+				set.value(ctx$1, evt.value);
+			},
+			setHovered(ctx$1, evt) {
+				ctx$1.hoveredValue = evt.value;
+			},
+			setActive(ctx$1, evt) {
+				ctx$1.activeValue = evt.value;
+			},
+			setFocused(ctx$1, evt) {
+				ctx$1.focusedValue = evt.value;
+				ctx$1.focusVisible = evt.focusVisible;
+			},
+			syncInputElements(ctx$1) {
+				const inputs = dom.getInputEls(ctx$1);
+				inputs.forEach((input) => {
+					input.checked = input.value === ctx$1.value;
+				});
+			},
+			setIndicatorTransition(ctx$1) {
+				ctx$1.canIndicatorTransition = isString(ctx$1.value);
+			},
+			cleanupObserver(ctx$1) {
+				ctx$1.indicatorCleanup?.();
+			},
+			syncSsr(ctx$1) {
+				ctx$1.ssr = false;
+			},
+			syncIndicatorRect(ctx$1) {
+				ctx$1.indicatorCleanup?.();
+				if (!dom.getIndicatorEl(ctx$1)) return;
+				const value = ctx$1.value;
+				const radioEl = dom.getActiveRadioEl(ctx$1);
+				if (value == null || !radioEl) {
+					ctx$1.indicatorRect = {};
+					return;
+				}
+				ctx$1.indicatorCleanup = trackElementRect(radioEl, {
+					getRect(el) {
+						return dom.getOffsetRect(el);
+					},
+					onChange(rect) {
+						ctx$1.indicatorRect = dom.resolveRect(rect);
+						nextTick(() => {
+							ctx$1.canIndicatorTransition = false;
+						});
+					}
+				});
+			},
+			dispatchChangeEvent(ctx$1) {
+				const inputEls = dom.getInputEls(ctx$1);
+				inputEls.forEach((inputEl) => {
+					const checked = inputEl.value === ctx$1.value;
+					if (checked === inputEl.checked) return;
+					dispatchInputCheckedEvent(inputEl, { checked });
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"name",
+	"onValueChange",
+	"orientation",
+	"readOnly",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()([
+	"value",
+	"disabled",
+	"invalid"
+]);
+const splitItemProps = createSplitProps(itemProps);
+
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,38 +1,33 @@
 {
   "name": "@destyler/radio",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.1.0",
   "description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/element-rect": "^0.82.1",
-    "@zag-js/focus-visible": "^0.82.1",
-    "@zag-js/form-utils": "^0.81.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.1.0",
+    "@destyler/dom": "0.1.0",
+    "@destyler/element-rect": "0.1.0",
+    "@destyler/types": "0.1.0",
+    "@destyler/utils": "0.1.0",
+    "@destyler/xstate": "0.1.0",
+    "@destyler/focus-visible": "0.1.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }