@wirekyt/dom 0.0.1 → 0.0.2

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

@@ -0,0 +1,405 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_point = require("../../point-DxnCrJBy.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/rating-group/anatomy.ts
+const anatomy = require_create_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 require_dom_query.query(getControlEl(ctx), selector);
+};
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const dispatchChangeEvent = (ctx, value) => {
+	const inputEl = getHiddenInputEl(ctx);
+	if (!inputEl) return;
+	require_form.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": require_dom_query.dataAttr(disabled),
+				"data-required": require_dom_query.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": require_dom_query.ariaAttr(readOnly),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				"data-disabled": require_dom_query.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": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				"aria-setsize": prop("count"),
+				"aria-checked": itemState.checked,
+				"data-checked": require_dom_query.dataAttr(itemState.checked),
+				"aria-posinset": index,
+				"data-highlighted": require_dom_query.dataAttr(itemState.highlighted),
+				"data-half": require_dom_query.dataAttr(itemState.half),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!require_event.isLeftClick(event)) return;
+					event.preventDefault();
+				},
+				onPointerMove(event) {
+					if (!interactive) return;
+					const isMidway = require_point.getRelativePoint(require_event.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" });
+						}
+					}[require_event.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 = require_core.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 require_form.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 }) {
+				require_raf.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 = require_create_props.createProps()([
+	"allowHalf",
+	"autoFocus",
+	"count",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"name",
+	"onHoverChange",
+	"onValueChange",
+	"required",
+	"readOnly",
+	"translations",
+	"value",
+	"defaultValue"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const itemProps = require_create_props.createProps()(["index"]);
+const splitItemProps = require_utils.createSplitProps(itemProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.itemProps = itemProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitItemProps = splitItemProps;
+exports.splitProps = splitProps;

package/dist/machines/rating-group/index.d.cts

@@ -0,0 +1,101 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/rating-group/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "label" | "control">;
+//#endregion
+//#region src/machines/rating-group/types.d.ts
+interface ValueChangeDetails {
+  value: number;
+}
+interface HoverChangeDetails {
+  hoveredValue: number;
+}
+interface IntlTranslations {
+  ratingValueText: (index: number) => string;
+}
+type ElementIds = Partial<{
+  root: string;
+  label: string;
+  hiddenInput: string;
+  control: string;
+  item: (id: string) => string;
+}>;
+interface RatingGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  count?: number | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  value?: number | undefined;
+  defaultValue?: number | undefined;
+  readOnly?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  allowHalf?: boolean | undefined;
+  autoFocus?: boolean | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onHoverChange?: ((details: HoverChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "count" | "translations";
+type ComputedContext = Readonly<{
+  isInteractive: boolean;
+  isHovering: boolean;
+  isDisabled: boolean;
+}>;
+interface PrivateContext {
+  hoveredValue: number;
+  fieldsetDisabled: boolean;
+  value: number;
+}
+interface RatingGroupSchema {
+  state: "idle" | "hover" | "focus";
+  context: PrivateContext;
+  props: RequiredBy<RatingGroupProps, PropsWithDefault>;
+  computed: ComputedContext;
+  private: PrivateContext;
+  action: string;
+  event: EventObject;
+  effect: string;
+  guard: string;
+}
+type RatingGroupService = Service<RatingGroupSchema>;
+type RatingGroupMachine = Machine<RatingGroupSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  highlighted: boolean;
+  half: boolean;
+  checked: boolean;
+}
+interface RatingGroupApi<T extends PropTypes = PropTypes> {
+  setValue: (value: number) => void;
+  clearValue: VoidFunction;
+  hovering: boolean;
+  value: number;
+  hoveredValue: number;
+  count: number;
+  items: number[];
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/rating-group/connect.d.ts
+declare function connect<T extends PropTypes>(service: RatingGroupService, normalize: NormalizeProps<T>): RatingGroupApi<T>;
+//#endregion
+//#region src/machines/rating-group/machine.d.ts
+declare const machine: Machine<RatingGroupSchema>;
+//#endregion
+//#region src/machines/rating-group/props.d.ts
+declare const props: (keyof RatingGroupProps)[];
+declare const splitProps: <Props extends Partial<RatingGroupProps>>(props: Props) => [Partial<RatingGroupProps>, Omit<Props, keyof RatingGroupProps>];
+declare const itemProps: "index"[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "index">];
+//#endregion
+export { type RatingGroupApi as Api, type ElementIds, type HoverChangeDetails, type IntlTranslations, type ItemProps, type ItemState, type RatingGroupMachine as Machine, type RatingGroupProps as Props, type RatingGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/rating-group/index.d.ts

@@ -0,0 +1,101 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/rating-group/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "label" | "control">;
+//#endregion
+//#region src/machines/rating-group/types.d.ts
+interface ValueChangeDetails {
+  value: number;
+}
+interface HoverChangeDetails {
+  hoveredValue: number;
+}
+interface IntlTranslations {
+  ratingValueText: (index: number) => string;
+}
+type ElementIds = Partial<{
+  root: string;
+  label: string;
+  hiddenInput: string;
+  control: string;
+  item: (id: string) => string;
+}>;
+interface RatingGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  count?: number | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  value?: number | undefined;
+  defaultValue?: number | undefined;
+  readOnly?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  allowHalf?: boolean | undefined;
+  autoFocus?: boolean | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onHoverChange?: ((details: HoverChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "count" | "translations";
+type ComputedContext = Readonly<{
+  isInteractive: boolean;
+  isHovering: boolean;
+  isDisabled: boolean;
+}>;
+interface PrivateContext {
+  hoveredValue: number;
+  fieldsetDisabled: boolean;
+  value: number;
+}
+interface RatingGroupSchema {
+  state: "idle" | "hover" | "focus";
+  context: PrivateContext;
+  props: RequiredBy<RatingGroupProps, PropsWithDefault>;
+  computed: ComputedContext;
+  private: PrivateContext;
+  action: string;
+  event: EventObject;
+  effect: string;
+  guard: string;
+}
+type RatingGroupService = Service<RatingGroupSchema>;
+type RatingGroupMachine = Machine<RatingGroupSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  highlighted: boolean;
+  half: boolean;
+  checked: boolean;
+}
+interface RatingGroupApi<T extends PropTypes = PropTypes> {
+  setValue: (value: number) => void;
+  clearValue: VoidFunction;
+  hovering: boolean;
+  value: number;
+  hoveredValue: number;
+  count: number;
+  items: number[];
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/rating-group/connect.d.ts
+declare function connect<T extends PropTypes>(service: RatingGroupService, normalize: NormalizeProps<T>): RatingGroupApi<T>;
+//#endregion
+//#region src/machines/rating-group/machine.d.ts
+declare const machine: Machine<RatingGroupSchema>;
+//#endregion
+//#region src/machines/rating-group/props.d.ts
+declare const props: (keyof RatingGroupProps)[];
+declare const splitProps: <Props extends Partial<RatingGroupProps>>(props: Props) => [Partial<RatingGroupProps>, Omit<Props, keyof RatingGroupProps>];
+declare const itemProps: "index"[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "index">];
+//#endregion
+export { type RatingGroupApi as Api, type ElementIds, type HoverChangeDetails, type IntlTranslations, type ItemProps, type ItemState, type RatingGroupMachine as Machine, type RatingGroupProps as Props, type RatingGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };