@wirekyt/dom 0.0.1 → 0.0.2

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

@@ -0,0 +1,322 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { f as queryAll, l as nextById, p as contains, u as prevById, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isSafari } from "../../platform-BDB0wXUk.js";
+import { r as getEventKey, s as getEventTarget } from "../../event-bTItRgiw.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { f as last, n as addOrRemove, o as first } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { Y as isArray, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { n as ensureProps } from "../../warning-CrzBpWT1.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/toggle-group/anatomy.ts
+const anatomy = createAnatomy("toggle-group").parts("root", "item");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/toggle-group/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${ctx.id}:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getElements = (ctx) => {
+	const selector = `[data-ownedby='${CSS.escape(getRootId(ctx))}']:not([data-disabled])`;
+	return queryAll(getRootEl(ctx), selector);
+};
+const getFirstEl = (ctx) => first(getElements(ctx));
+const getLastEl = (ctx) => last(getElements(ctx));
+const getNextEl = (ctx, id, loopFocus) => nextById(getElements(ctx), id, loopFocus);
+const getPrevEl = (ctx, id, loopFocus) => prevById(getElements(ctx), id, loopFocus);
+//#endregion
+//#region src/machines/toggle-group/connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, scope } = service;
+	const value = context.get("value");
+	const disabled = prop("disabled");
+	const isSingle = !prop("multiple");
+	const rovingFocus = prop("rovingFocus");
+	const isHorizontal = prop("orientation") === "horizontal";
+	function getItemState(props) {
+		const id = getItemId(scope, props.value);
+		return {
+			id,
+			disabled: Boolean(props.disabled || disabled),
+			pressed: !!value.includes(props.value),
+			focused: context.get("focusedId") === id
+		};
+	}
+	return {
+		value,
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				role: isSingle ? "radiogroup" : "group",
+				tabIndex: context.get("isTabbingBackward") ? -1 : 0,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-focus": dataAttr(context.get("focusedId") != null),
+				style: { outline: "none" },
+				onMouseDown() {
+					if (disabled) return;
+					send({ type: "ROOT.MOUSE_DOWN" });
+				},
+				onFocus(event) {
+					if (disabled) return;
+					if (event.currentTarget !== getEventTarget(event)) return;
+					if (context.get("isClickFocus")) return;
+					if (context.get("isTabbingBackward")) return;
+					send({ type: "ROOT.FOCUS" });
+				},
+				onBlur(event) {
+					const target = event.relatedTarget;
+					if (contains(event.currentTarget, target)) return;
+					if (disabled) return;
+					send({ type: "ROOT.BLUR" });
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			const rovingTabIndex = itemState.focused ? 0 : -1;
+			return normalize.button({
+				...parts.item.attrs,
+				id: itemState.id,
+				type: "button",
+				"data-ownedby": getRootId(scope),
+				"data-focus": dataAttr(itemState.focused),
+				disabled: itemState.disabled,
+				tabIndex: rovingFocus ? rovingTabIndex : void 0,
+				role: isSingle ? "radio" : void 0,
+				"aria-checked": isSingle ? itemState.pressed : void 0,
+				"aria-pressed": isSingle ? void 0 : itemState.pressed,
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-orientation": prop("orientation"),
+				dir: prop("dir"),
+				"data-state": itemState.pressed ? "on" : "off",
+				onFocus() {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.FOCUS",
+						id: itemState.id
+					});
+				},
+				onClick(event) {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.CLICK",
+						id: itemState.id,
+						value: props.value
+					});
+					if (isSafari()) event.currentTarget.focus({ preventScroll: true });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					if (itemState.disabled) return;
+					const exec = {
+						Tab(event) {
+							const isShiftTab = event.shiftKey;
+							send({
+								type: "TOGGLE.SHIFT_TAB",
+								isShiftTab
+							});
+						},
+						ArrowLeft() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowRight() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						ArrowUp() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowDown() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						Home() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_FIRST" });
+						},
+						End() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_LAST" });
+						}
+					}[getEventKey(event)];
+					if (exec) {
+						exec(event);
+						if (event.key !== "Tab") event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/toggle-group/machine.ts
+const { not, and } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			defaultValue: [],
+			orientation: "horizontal",
+			rovingFocus: true,
+			loopFocus: true,
+			deselectable: true,
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedId: bindable(() => ({ defaultValue: null })),
+			isTabbingBackward: bindable(() => ({ defaultValue: false })),
+			isClickFocus: bindable(() => ({ defaultValue: false })),
+			isWithinToolbar: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: { currentLoopFocus: ({ context, prop }) => prop("loopFocus") && !context.get("isWithinToolbar") },
+	entry: ["checkIfWithinToolbar"],
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"TOGGLE.CLICK": { actions: ["setValue"] },
+		"ROOT.MOUSE_DOWN": { actions: ["setClickFocus"] }
+	},
+	states: {
+		idle: { on: {
+			"ROOT.FOCUS": {
+				target: "focused",
+				guard: not(and("isClickFocus", "isTabbingBackward")),
+				actions: ["focusFirstToggle", "clearClickFocus"]
+			},
+			"TOGGLE.FOCUS": {
+				target: "focused",
+				actions: ["setFocusedId"]
+			}
+		} },
+		focused: { on: {
+			"ROOT.BLUR": {
+				target: "idle",
+				actions: [
+					"clearIsTabbingBackward",
+					"clearFocusedId",
+					"clearClickFocus"
+				]
+			},
+			"TOGGLE.FOCUS": { actions: ["setFocusedId"] },
+			"TOGGLE.FOCUS_NEXT": { actions: ["focusNextToggle"] },
+			"TOGGLE.FOCUS_PREV": { actions: ["focusPrevToggle"] },
+			"TOGGLE.FOCUS_FIRST": { actions: ["focusFirstToggle"] },
+			"TOGGLE.FOCUS_LAST": { actions: ["focusLastToggle"] },
+			"TOGGLE.SHIFT_TAB": [{
+				guard: not("isFirstToggleFocused"),
+				target: "idle",
+				actions: ["setIsTabbingBackward"]
+			}, { actions: ["setIsTabbingBackward"] }]
+		} }
+	},
+	implementations: {
+		guards: {
+			isClickFocus: ({ context }) => context.get("isClickFocus"),
+			isTabbingBackward: ({ context }) => context.get("isTabbingBackward"),
+			isFirstToggleFocused: ({ context, scope }) => context.get("focusedId") === getFirstEl(scope)?.id
+		},
+		actions: {
+			setIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", true);
+			},
+			clearIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", false);
+			},
+			setClickFocus({ context }) {
+				context.set("isClickFocus", true);
+			},
+			clearClickFocus({ context }) {
+				context.set("isClickFocus", false);
+			},
+			checkIfWithinToolbar({ context, scope }) {
+				const closestToolbar = getRootEl(scope)?.closest("[role=toolbar]");
+				context.set("isWithinToolbar", !!closestToolbar);
+			},
+			setFocusedId({ context, event }) {
+				context.set("focusedId", event.id);
+			},
+			clearFocusedId({ context }) {
+				context.set("focusedId", null);
+			},
+			setValue({ context, event, prop }) {
+				ensureProps(event, ["value"]);
+				let next = context.get("value");
+				if (isArray(event.value)) next = event.value;
+				else if (prop("multiple")) next = addOrRemove(next, event.value);
+				else next = isEqual(next, [event.value]) && prop("deselectable") ? [] : [event.value];
+				context.set("value", next);
+			},
+			focusNextToggle({ context, scope, prop }) {
+				raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getNextEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusPrevToggle({ context, scope, prop }) {
+				raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getPrevEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusFirstToggle({ scope }) {
+				raf(() => {
+					getFirstEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusLastToggle({ scope }) {
+				raf(() => {
+					getLastEl(scope)?.focus({ preventScroll: true });
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/toggle-group/props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"multiple",
+	"onValueChange",
+	"orientation",
+	"rovingFocus",
+	"value",
+	"defaultValue",
+	"deselectable"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "disabled"]);
+const splitItemProps = createSplitProps(itemProps);
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };