@wirekyt/dom 0.0.1 → 0.0.2

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

@@ -0,0 +1,398 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, d as query, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { i as getEventPoint, m as isLeftClick, r as getEventKey } from "../../event-bTItRgiw.js";
+import { n as dispatchInputValueEvent, s as trackFormControl } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as getRelativePoint } from "../../point-C9A4dk1i.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/rating-group/anatomy.ts
+const anatomy = createAnatomy("rating-group").parts("root", "label", "item", "control");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/rating-group/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `rating:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `rating:${ctx.id}:label`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `rating:${ctx.id}:input`;
+const getControlId = (ctx) => ctx.ids?.control ?? `rating:${ctx.id}:control`;
+const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `rating:${ctx.id}:item:${id}`;
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getRadioEl = (ctx, value) => {
+	const selector = `[role=radio][aria-posinset='${Math.ceil(value)}']`;
+	return query(getControlEl(ctx), selector);
+};
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const dispatchChangeEvent = (ctx, value) => {
+	const inputEl = getHiddenInputEl(ctx);
+	if (!inputEl) return;
+	dispatchInputValueEvent(inputEl, { value });
+};
+//#endregion
+//#region src/machines/rating-group/connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, scope, computed } = service;
+	const interactive = computed("isInteractive");
+	const disabled = computed("isDisabled");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const value = context.get("value");
+	const hoveredValue = context.get("hoveredValue");
+	const translations = prop("translations");
+	function getItemState(props) {
+		const currentValue = computed("isHovering") ? hoveredValue : value;
+		const equal = Math.ceil(currentValue) === props.index;
+		return {
+			highlighted: props.index <= currentValue || equal,
+			half: equal && Math.abs(currentValue - props.index) === .5,
+			checked: equal || value <= 0 && props.index === 1
+		};
+	}
+	return {
+		hovering: computed("isHovering"),
+		value,
+		hoveredValue,
+		count: prop("count"),
+		items: Array.from({ length: prop("count") }).map((_, index) => index + 1),
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "CLEAR_VALUE" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope)
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				name: prop("name"),
+				form: prop("form"),
+				type: "text",
+				hidden: true,
+				disabled,
+				readOnly,
+				required: prop("required"),
+				id: getHiddenInputId(scope),
+				defaultValue: value
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-required": dataAttr(required),
+				htmlFor: getHiddenInputId(scope),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					event.preventDefault();
+					getRadioEl(scope, Math.max(1, context.get("value")))?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				id: getControlId(scope),
+				...parts.control.attrs,
+				dir: prop("dir"),
+				role: "radiogroup",
+				"aria-orientation": "horizontal",
+				"aria-labelledby": getLabelId(scope),
+				"aria-readonly": ariaAttr(readOnly),
+				"data-readonly": dataAttr(readOnly),
+				"data-disabled": dataAttr(disabled),
+				onPointerMove(event) {
+					if (!interactive) return;
+					if (event.pointerType === "touch") return;
+					send({ type: "GROUP_POINTER_OVER" });
+				},
+				onPointerLeave(event) {
+					if (!interactive) return;
+					if (event.pointerType === "touch") return;
+					send({ type: "GROUP_POINTER_LEAVE" });
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const { index } = props;
+			const itemState = getItemState(props);
+			const valueText = translations.ratingValueText(index);
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, index.toString()),
+				role: "radio",
+				tabIndex: (() => {
+					if (readOnly) return itemState.checked ? 0 : void 0;
+					if (disabled) return void 0;
+					return itemState.checked ? 0 : -1;
+				})(),
+				"aria-roledescription": "rating",
+				"aria-label": valueText,
+				"aria-disabled": disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"aria-setsize": prop("count"),
+				"aria-checked": itemState.checked,
+				"data-checked": dataAttr(itemState.checked),
+				"aria-posinset": index,
+				"data-highlighted": dataAttr(itemState.highlighted),
+				"data-half": dataAttr(itemState.half),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
+				},
+				onPointerMove(event) {
+					if (!interactive) return;
+					const isMidway = getRelativePoint(getEventPoint(event), event.currentTarget).getPercentValue({
+						orientation: "horizontal",
+						dir: prop("dir")
+					}) < .5;
+					send({
+						type: "POINTER_OVER",
+						index,
+						isMidway
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const exec = {
+						ArrowLeft() {
+							send({ type: "ARROW_LEFT" });
+						},
+						ArrowRight() {
+							send({ type: "ARROW_RIGHT" });
+						},
+						ArrowUp() {
+							send({ type: "ARROW_LEFT" });
+						},
+						ArrowDown() {
+							send({ type: "ARROW_RIGHT" });
+						},
+						Space() {
+							send({
+								type: "SPACE",
+								value: index
+							});
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+					}
+				},
+				onClick() {
+					if (!interactive) return;
+					send({
+						type: "CLICK",
+						value: index
+					});
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({ type: "FOCUS" });
+				},
+				onBlur() {
+					if (!interactive) return;
+					send({ type: "BLUR" });
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/rating-group/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			name: "rating",
+			count: 5,
+			dir: "ltr",
+			defaultValue: -1,
+			...props,
+			translations: {
+				ratingValueText: (index) => `${index} stars`,
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			hoveredValue: bindable(() => ({
+				defaultValue: -1,
+				onChange(value) {
+					prop("onHoverChange")?.({ hoveredValue: value });
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	watch({ track, action, prop, context }) {
+		track([() => prop("allowHalf")], () => {
+			action(["roundValueIfNeeded"]);
+		});
+		track([() => context.get("value")], () => {
+			action(["dispatchChangeEvent"]);
+		});
+	},
+	computed: {
+		isDisabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		isInteractive: ({ computed, prop }) => !(computed("isDisabled") || prop("readOnly")),
+		isHovering: ({ context }) => context.get("hoveredValue") > -1
+	},
+	effects: ["trackFormControlState"],
+	on: {
+		SET_VALUE: { actions: ["setValue"] },
+		CLEAR_VALUE: { actions: ["clearValue"] }
+	},
+	states: {
+		idle: {
+			entry: ["clearHoveredValue"],
+			on: {
+				GROUP_POINTER_OVER: { target: "hover" },
+				FOCUS: { target: "focus" },
+				CLICK: { actions: ["setValue", "focusActiveRadio"] }
+			}
+		},
+		focus: { on: {
+			POINTER_OVER: { actions: ["setHoveredValue"] },
+			GROUP_POINTER_LEAVE: { actions: ["clearHoveredValue"] },
+			BLUR: { target: "idle" },
+			SPACE: {
+				guard: "isValueEmpty",
+				actions: ["setValue"]
+			},
+			CLICK: { actions: ["setValue", "focusActiveRadio"] },
+			ARROW_LEFT: { actions: ["setPrevValue", "focusActiveRadio"] },
+			ARROW_RIGHT: { actions: ["setNextValue", "focusActiveRadio"] },
+			HOME: { actions: ["setValueToMin", "focusActiveRadio"] },
+			END: { actions: ["setValueToMax", "focusActiveRadio"] }
+		} },
+		hover: { on: {
+			POINTER_OVER: { actions: ["setHoveredValue"] },
+			GROUP_POINTER_LEAVE: [{
+				guard: "isRadioFocused",
+				target: "focus",
+				actions: ["clearHoveredValue"]
+			}, {
+				target: "idle",
+				actions: ["clearHoveredValue"]
+			}],
+			CLICK: { actions: ["setValue", "focusActiveRadio"] }
+		} }
+	},
+	implementations: {
+		guards: {
+			isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+			isHoveredValueEmpty: ({ context }) => context.get("hoveredValue") === -1,
+			isValueEmpty: ({ context }) => context.get("value") <= 0,
+			isRadioFocused: ({ scope }) => !!getControlEl(scope)?.contains(scope.getActiveElement())
+		},
+		effects: { trackFormControlState({ context, scope }) {
+			return trackFormControl(getHiddenInputEl(scope), {
+				onFieldsetDisabledChange(disabled) {
+					context.set("fieldsetDisabled", disabled);
+				},
+				onFormReset() {
+					context.set("value", context.initial("value"));
+				}
+			});
+		} },
+		actions: {
+			clearHoveredValue({ context }) {
+				context.set("hoveredValue", -1);
+			},
+			focusActiveRadio({ scope, context }) {
+				raf(() => getRadioEl(scope, context.get("value"))?.focus());
+			},
+			setPrevValue({ context, prop }) {
+				const factor = prop("allowHalf") ? .5 : 1;
+				context.set("value", Math.max(0, context.get("value") - factor));
+			},
+			setNextValue({ context, prop }) {
+				const factor = prop("allowHalf") ? .5 : 1;
+				const value = context.get("value") === -1 ? 0 : context.get("value");
+				context.set("value", Math.min(prop("count"), value + factor));
+			},
+			setValueToMin({ context }) {
+				context.set("value", 1);
+			},
+			setValueToMax({ context, prop }) {
+				context.set("value", prop("count"));
+			},
+			setValue({ context, event }) {
+				const hoveredValue = context.get("hoveredValue");
+				const value = hoveredValue === -1 ? event.value : hoveredValue;
+				context.set("value", value);
+			},
+			clearValue({ context }) {
+				context.set("value", -1);
+			},
+			setHoveredValue({ context, prop, event }) {
+				const factor = prop("allowHalf") && event.isMidway ? .5 : 0;
+				context.set("hoveredValue", event.index - factor);
+			},
+			roundValueIfNeeded({ context, prop }) {
+				if (prop("allowHalf")) return;
+				context.set("value", Math.round(context.get("value")));
+			},
+			dispatchChangeEvent({ context, scope }) {
+				dispatchChangeEvent(scope, context.get("value"));
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/rating-group/props.ts
+const props = createProps()([
+	"allowHalf",
+	"autoFocus",
+	"count",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"name",
+	"onHoverChange",
+	"onValueChange",
+	"required",
+	"readOnly",
+	"translations",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["index"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };