@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/menu/menu.presentation.js

@@ -0,0 +1,709 @@
+import { ROVING_KEYS } from "../shared/keyboard.js";
+import { entriesOf } from "./menu.state.js";
+import { menu as menu$1 } from "./menu.machine.js";
+import { ariaHidden, ariaLabelledBy, ariaOrientation, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+// src/menu/menu.presentation.ts
+/** The trigger exclusion travels in the dismissable action's params
+* (excludeId/excludeParent) — no def-side DOM query. */
+const toRow = (entry) => {
+	if (!("value" in entry)) return void 0;
+	const checked = entry.checked;
+	return {
+		value: entry.value,
+		label: entry.label,
+		shortcut: entry.shortcut ?? "",
+		disabled: entry.disabled === true,
+		checked: checked === void 0 ? void 0 : checked === true,
+		children: entry.children ?? []
+	};
+};
+const rowsByEntries = /* @__PURE__ */ new WeakMap();
+const rowsOf = (entries) => {
+	const hit = rowsByEntries.get(entries);
+	if (hit !== void 0) return hit;
+	const rows = buildRows(entries);
+	rowsByEntries.set(entries, rows);
+	return rows;
+};
+const buildRows = (entries) => {
+	const rows = [];
+	for (const entry of entries) if ("value" in entry) {
+		const row = toRow(entry);
+		if (row !== void 0) rows.push(row);
+	} else if ("group" in entry) for (const sub of entry.items) {
+		const subEntry = sub;
+		if (!("value" in subEntry)) continue;
+		const row = toRow(subEntry);
+		if (row !== void 0) rows.push(row);
+	}
+	return rows;
+};
+const blocksCache = /* @__PURE__ */ new WeakMap();
+const blocksOf = (entries) => {
+	const hit = blocksCache.get(entries);
+	if (hit !== void 0) return hit;
+	const built = [];
+	let label = null;
+	let rows = [];
+	const flush = () => {
+		if (rows.length > 0) {
+			built.push({
+				id: `group:${built.length}`,
+				label,
+				rows,
+				separator: false
+			});
+			rows = [];
+		}
+		label = null;
+	};
+	for (const entry of entries) {
+		if ("separator" in entry) {
+			flush();
+			const last = built[built.length - 1];
+			if (last !== void 0) built[built.length - 1] = {
+				...last,
+				separator: true
+			};
+			continue;
+		}
+		if ("group" in entry) {
+			flush();
+			label = entry.group;
+			for (const item of entry.items) {
+				const row = toRow(item);
+				if (row !== void 0) rows.push(row);
+			}
+			flush();
+			continue;
+		}
+		const row = toRow(entry);
+		if (row !== void 0) rows.push(row);
+	}
+	flush();
+	blocksCache.set(entries, built);
+	return built;
+};
+const rowsOfEntries = (entries) => rowsOf(entries);
+const enabledValues = (scope) => rowsOfEntries(scope.context.entries).filter((row) => !row.disabled);
+/** Neighbor with loop wrap (menus always loop, Zag's model). */
+const neighbor = (scope, value, direction) => {
+	const order = enabledValues(scope);
+	if (order.length === 0) return null;
+	const at = order.findIndex((entry) => entry.value === value);
+	if (at < 0) return (direction > 0 ? order[0] : order[order.length - 1])?.value ?? null;
+	const loop = scope.context.loopFocus;
+	const next = at + direction;
+	if (next < 0) return loop ? order[order.length - 1]?.value ?? null : order[at]?.value ?? null;
+	if (next >= order.length) return loop ? order[0]?.value ?? null : order[at]?.value ?? null;
+	return order[next]?.value ?? null;
+};
+const rowByValue = (scope, value) => value === null ? void 0 : rowsOfEntries(scope.context.entries).find((row) => row.value === value);
+/** Typeahead state, keyed by bridge send: the connect is long-lived, but a
+* def-built api may rebuild it per tick, and a fresh buffer would erase the
+* sequence. */
+const typeaheadByBridge = /* @__PURE__ */ new WeakMap();
+const typeaheadOf = (scope) => {
+	let state = typeaheadByBridge.get(scope.send);
+	if (state === void 0) {
+		state = {
+			keys: "",
+			at: 0
+		};
+		typeaheadByBridge.set(scope.send, state);
+	}
+	return state;
+};
+/** Recipe-driven rows arrive through getBlocks/getRows iteration. */
+const isMenuBlock = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const rows = Reflect.get(value, "rows");
+	return Array.isArray(rows);
+};
+const isMenuRow = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	return typeof Reflect.get(value, "value") === "string" && Array.isArray(Reflect.get(value, "children"));
+};
+const highlight = (scope, value) => {
+	scope.send({
+		type: "HIGHLIGHT",
+		value
+	});
+};
+const rowHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const rowHandlers = (scope, row) => {
+	let byRow = rowHandlersByBridge.get(scope.send);
+	if (byRow === void 0) {
+		byRow = /* @__PURE__ */ new WeakMap();
+		rowHandlersByBridge.set(scope.send, byRow);
+	}
+	const hit = byRow.get(row);
+	if (hit !== void 0) return hit;
+	const made = {
+		onPointerMove: (event) => {
+			if (event.pointerType !== "mouse" || row.disabled) return;
+			const at = event.target;
+			if (row.children.length > 0 && typeof Element !== "undefined" && at instanceof Element && at.closest("[data-part=\"submenu-content\"]") !== null) return;
+			scope.send({
+				type: "HIGHLIGHT",
+				value: row.value
+			});
+		},
+		onClick: (event) => {
+			activate(scope, row);
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+/** Submenu-row handlers: hover highlights within the level (the level stays
+* open), a click selects (the whole menu closes). Grandchildren are not
+* rendered, so a child always selects, never opens deeper. */
+const submenuRowHandlers = (scope, row) => {
+	let byRow = rowHandlersByBridge.get(scope.send);
+	if (byRow === void 0) {
+		byRow = /* @__PURE__ */ new WeakMap();
+		rowHandlersByBridge.set(scope.send, byRow);
+	}
+	const hit = byRow.get(row);
+	if (hit !== void 0) return hit;
+	const made = {
+		onPointerMove: (event) => {
+			if (event.pointerType !== "mouse" || row.disabled) return;
+			scope.send({
+				type: "SUBMENU_HIGHLIGHT",
+				value: row.value
+			});
+		},
+		onClick: (event) => {
+			if (row.disabled) return;
+			scope.send({
+				type: "ITEM_CLICK",
+				value: row.value
+			});
+			if (scope.context.closeOnSelect) closeSelf(scope);
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+const closeSelf = (scope) => {
+	scope.send({ type: "CLOSE" });
+};
+const typeaheadMatch = (scope, key) => {
+	const buffer = typeaheadOf(scope);
+	const now = Date.now();
+	buffer.keys = now - buffer.at < 500 ? buffer.keys + key : key;
+	buffer.at = now;
+	const needle = buffer.keys.toLowerCase();
+	const match = rowsOfEntries(scope.context.entries).find((row) => !row.disabled && row.label.toLowerCase().startsWith(needle));
+	if (match !== void 0) highlight(scope, match.value);
+};
+const isPrintable = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+/** Focus follows through the settled effect. */
+const openSubmenu = (scope, value) => {
+	scope.send({
+		type: "SUBMENU_OPEN",
+		value
+	});
+};
+const activate = (scope, row) => {
+	if (row.disabled) return;
+	if (row.children.length > 0) {
+		openSubmenu(scope, row.value);
+		return;
+	}
+	scope.send({
+		type: "ITEM_CLICK",
+		value: row.value
+	});
+	if (scope.context.closeOnSelect) closeSelf(scope);
+};
+const onContentKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	const openValue = scope.context.openSubmenu;
+	if (openValue !== null) {
+		const parent = rowByValue(scope, openValue);
+		if (parent !== void 0) {
+			onSubmenuKeydown(scope, parent, event);
+			return;
+		}
+	}
+	const current = scope.context.highlightedValue;
+	if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") {
+		const intent = ROVING_KEYS[event.key];
+		if (intent !== void 0) {
+			if (intent.intent === "next" || intent.intent === "prev") {
+				const next = neighbor(scope, current ?? "", intent.intent === "next" ? 1 : -1);
+				if (next !== null) {
+					event.preventDefault();
+					scope.send({
+						type: "HIGHLIGHT",
+						value: next
+					});
+				}
+				return;
+			}
+			if (intent.intent === "first" || intent.intent === "last") {
+				event.preventDefault();
+				const list = enabledValues(scope);
+				const row = intent.intent === "first" ? list[0] : list[list.length - 1];
+				if (row !== void 0) scope.send({
+					type: "HIGHLIGHT",
+					value: row.value
+				});
+				return;
+			}
+		}
+	}
+	switch (event.key) {
+		case "ArrowRight": {
+			const row = rowByValue(scope, current);
+			if (row !== void 0 && row.children.length > 0) openSubmenu(scope, row.value);
+			break;
+		}
+		case "Enter": {
+			const row = rowByValue(scope, current);
+			if (row !== void 0) activate(scope, row);
+			break;
+		}
+		case " ": {
+			if (typeaheadOf(scope).keys.length > 0) {
+				typeaheadMatch(scope, event.key);
+				break;
+			}
+			const row = rowByValue(scope, current);
+			if (row !== void 0) activate(scope, row);
+			break;
+		}
+		default: if (scope.context.typeahead && isPrintable(event)) typeaheadMatch(scope, event.key);
+		else return;
+	}
+	event.preventDefault();
+};
+/** Submenu arrows stay in the level: the parent's content handler would move
+* the wrong highlight, so every handled key prevents default (the parent
+* skips prevented events) and stops there. */
+const onSubmenuKeydown = (scope, parent, event) => {
+	if (event.defaultPrevented) return;
+	const rows = rowsOf(parent.children).filter((row) => !row.disabled);
+	const current = scope.context.highlightedValue;
+	const at = rows.findIndex((row) => row.value === current);
+	const move = (next) => {
+		if (next === void 0) return;
+		event.preventDefault();
+		scope.send({
+			type: "SUBMENU_HIGHLIGHT",
+			value: next.value
+		});
+	};
+	switch (event.key) {
+		case "ArrowDown":
+			move(rows[at < 0 ? 0 : (at + 1) % rows.length]);
+			return;
+		case "ArrowUp":
+			move(rows[at < 0 ? rows.length - 1 : (at - 1 + rows.length) % rows.length]);
+			return;
+		case "Home":
+			move(rows[0]);
+			return;
+		case "End":
+			move(rows[rows.length - 1]);
+			return;
+		case "ArrowLeft":
+			event.preventDefault();
+			scope.send({ type: "SUBMENU_CLOSE" });
+			scope.send({
+				type: "HIGHLIGHT",
+				value: parent.value
+			});
+			return;
+		case "Enter":
+		case " ": {
+			const row = rows.find((entry) => entry.value === current);
+			if (row === void 0) return;
+			event.preventDefault();
+			scope.send({
+				type: "ITEM_CLICK",
+				value: row.value
+			});
+			if (scope.context.closeOnSelect) closeSelf(scope);
+			return;
+		}
+		default: return;
+	}
+};
+const onTriggerKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	const open = scope.state === "open";
+	const openItem = (from) => {
+		scope.send({ type: "TRIGGER_CLICK" });
+		const list = enabledValues(scope);
+		const row = from === "first" ? list[0] : list[list.length - 1];
+		if (row !== void 0) scope.send({
+			type: "HIGHLIGHT",
+			value: row.value
+		});
+	};
+	switch (event.key) {
+		case "ArrowDown":
+		case "Enter":
+			if (open) {
+				const next = neighbor(scope, scope.context.highlightedValue ?? "", 1);
+				if (next !== null) scope.send({
+					type: "HIGHLIGHT",
+					value: next
+				});
+			} else openItem("first");
+			break;
+		case "ArrowUp":
+			if (open) {
+				const next = neighbor(scope, scope.context.highlightedValue ?? "", -1);
+				if (next !== null) scope.send({
+					type: "HIGHLIGHT",
+					value: next
+				});
+			} else openItem("last");
+			break;
+		case " ":
+			if (open) {
+				const next = neighbor(scope, scope.context.highlightedValue ?? "", 1);
+				if (next !== null) scope.send({
+					type: "HIGHLIGHT",
+					value: next
+				});
+			} else openItem("first");
+			break;
+		case "Escape":
+			if (open) closeSelf(scope);
+			break;
+		default: return;
+	}
+	event.preventDefault();
+};
+const def = {
+	name: "menu",
+	machine: (args, authored) => menu$1(args, authored),
+	start: (props, authored) => {
+		if (authored("open")) return props["open"] === true ? "open" : "closed";
+		return props["defaultOpen"] === true ? "open" : "closed";
+	},
+	reconcile: ({ state, parsed, authored, send }) => {
+		send({
+			type: "ENTRIES.SET",
+			entries: entriesOf(parsed["items"])
+		});
+		if (!authored("open")) return false;
+		const open = parsed["open"] === true;
+		if (open === (state === "open")) return false;
+		send({ type: open ? "CONTROLLED_OPEN" : "CONTROLLED_CLOSE" });
+		return true;
+	},
+	parts: {
+		trigger: { attrs: (scope) => {
+			const open = scope.state === "open";
+			return {
+				type: "button",
+				id: scope.id("trigger"),
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: scope.context.composite ? "menu" : "dialog",
+					controls: { part: "content" }
+				}),
+				"data-state": open ? "open" : "closed",
+				onClick: () => {
+					if (scope.state === "open") {
+						closeSelf(scope);
+						return;
+					}
+					scope.send({ type: "TRIGGER_CLICK" });
+				},
+				onKeydown: (event) => onTriggerKeydown(scope, event)
+			};
+		} },
+		triggerIndicator: { attrs: (scope) => ({
+			...ariaHidden(true),
+			"data-state": scope.state === "open" ? "open" : "closed"
+		}) },
+		contextTrigger: { attrs: (scope) => ({
+			onContextMenu: (event) => {
+				event.preventDefault();
+				scope.send({
+					type: "CONTEXT_MENU",
+					point: {
+						x: event.clientX,
+						y: event.clientY
+					}
+				});
+			},
+			"use:long-press": {
+				delay: 700,
+				onPress: (point) => {
+					scope.send({
+						type: "CONTEXT_MENU",
+						point
+					});
+				}
+			}
+		}) },
+		positioner: { attrs: (scope) => ({
+			id: scope.id("positioner"),
+			"data-state": scope.state === "open" ? "open" : "closed",
+			hidden: scope.state === "open" ? void 0 : true,
+			"use:anchor": {
+				placement: "bottom",
+				offset: 8
+			}
+		}) },
+		content: { attrs: (scope) => {
+			const highlightedValue = scope.context.highlightedValue;
+			const openValue = scope.context.openSubmenu;
+			const inLevel = openValue !== null && highlightedValue !== null && rowsOf(rowByValue(scope, openValue)?.children ?? []).some((row) => row.value === highlightedValue);
+			return {
+				id: scope.id("content"),
+				role: scope.context.composite ? "menu" : "dialog",
+				tabindex: 0,
+				...listSurface(scope, {
+					activeDescendant: highlightedValue === null ? void 0 : inLevel ? {
+						part: "submenuItem",
+						slot: highlightedValue
+					} : {
+						part: "item",
+						slot: highlightedValue
+					},
+					labelledBy: { part: "trigger" }
+				}),
+				"data-state": scope.state === "open" ? "open" : "closed",
+				onKeydown: (event) => onContentKeydown(scope, event),
+				"use:dismissable": {
+					excludeId: scope.id("trigger"),
+					onOutside: () => {
+						closeSelf(scope);
+					},
+					onEscape: () => {
+						closeSelf(scope);
+					}
+				}
+			};
+		} }
+	},
+	slots: {
+		itemGroup: {
+			id: "item-group",
+			indexes: (context) => blocksOf(context.entries),
+			attrs: (scope) => {
+				const block = scope.slot;
+				return {
+					id: scope.id("itemGroup", block.id),
+					role: "group",
+					...ariaLabelledBy(scope, block.label === null ? void 0 : {
+						part: "itemGroupLabel",
+						slot: block.id
+					})
+				};
+			}
+		},
+		itemGroupLabel: {
+			id: "item-group-label",
+			indexes: (context) => blocksOf(context.entries),
+			attrs: (scope) => {
+				const block = scope.slot;
+				return {
+					id: scope.id("itemGroupLabel", block.id),
+					hidden: block.label === null
+				};
+			}
+		},
+		item: {
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: (scope) => {
+				const row = scope.slot;
+				const ctx = scope.context;
+				const hasChildren = row.children.length > 0;
+				const expanded = ctx.openSubmenu === row.value;
+				const highlighted = ctx.highlightedValue === row.value;
+				const bag = {
+					id: scope.id("item", row.value),
+					role: row.checked === void 0 ? "menuitem" : "menuitemcheckbox",
+					...optionRow({
+						...row.checked === void 0 ? {} : { checked: row.checked },
+						...row.disabled ? { disabled: true } : {}
+					}),
+					...row.disabled ? { "data-disabled": "" } : {},
+					...highlighted ? { "data-highlighted": "" } : {},
+					...rowHandlers(scope, row)
+				};
+				if (hasChildren) {
+					const trigger = disclosureTrigger(scope, {
+						expanded,
+						hasPopup: scope.context.composite ? "menu" : "dialog",
+						controls: {
+							part: "submenuContent",
+							slot: row.value
+						}
+					});
+					bag["aria-haspopup"] = trigger["aria-haspopup"];
+					bag["aria-expanded"] = trigger["aria-expanded"];
+					bag["aria-controls"] = trigger["aria-controls"];
+					bag["data-state"] = expanded ? "open" : "closed";
+					bag["use:hover-delay"] = {
+						openDelay: 200,
+						closeDelay: 250,
+						onOpen: () => scope.send({
+							type: "SUBMENU_OPEN",
+							value: row.value
+						}),
+						onClose: () => {
+							if (scope.context.highlightedValue === row.value) scope.send({ type: "SUBMENU_CLOSE" });
+						}
+					};
+				}
+				return bag;
+			}
+		},
+		itemText: {
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: () => ({})
+		},
+		itemIndicator: {
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: (scope) => {
+				const row = scope.slot;
+				return {
+					...ariaHidden(true),
+					"data-checked": row.checked === true ? "" : void 0
+				};
+			}
+		},
+		itemShortcut: {
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: (scope) => ({ hidden: scope.slot.shortcut.length === 0 })
+		},
+		itemSubmenuIndicator: {
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: (scope) => {
+				const row = scope.slot;
+				return {
+					...ariaHidden(true),
+					"data-state": scope.context.openSubmenu === row.value ? "open" : "closed",
+					hidden: row.children.length === 0
+				};
+			}
+		},
+		separator: {
+			indexes: (context) => blocksOf(context.entries),
+			attrs: (scope) => ({
+				role: "separator",
+				...ariaOrientation("horizontal"),
+				hidden: !scope.slot.separator
+			})
+		},
+		submenuContent: {
+			id: "submenu-content",
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows),
+			attrs: (scope) => {
+				const row = scope.slot;
+				return {
+					id: scope.id("submenuContent", row.value),
+					role: scope.context.composite ? "menu" : "dialog",
+					tabindex: 0,
+					...ariaLabelledBy(scope, {
+						part: "item",
+						slot: row.value
+					}),
+					"data-state": scope.context.openSubmenu === row.value ? "open" : "closed",
+					class: "absolute start-full top-0 ms-2 min-w-40 rounded-lg border border-solid border-border bg-surface-raised p-1 shadow-lg",
+					"use:hover-delay": {
+						closeDelay: 250,
+						onClose: () => {
+							const at = scope.context.highlightedValue;
+							if (rowsOf(row.children).some((child) => child.value === at)) scope.send({ type: "SUBMENU_CLOSE" });
+						}
+					},
+					onKeydown: (event) => onSubmenuKeydown(scope, row, event)
+				};
+			}
+		},
+		submenuItem: {
+			id: "submenu-item",
+			indexes: (context) => blocksOf(context.entries).flatMap((block) => block.rows).flatMap((row) => rowsOf(row.children)),
+			attrs: (scope) => {
+				const row = scope.slot;
+				return {
+					id: scope.id("submenuItem", row.value),
+					role: row.checked === void 0 ? "menuitem" : "menuitemcheckbox",
+					...optionRow({
+						...row.checked === void 0 ? {} : { checked: row.checked },
+						...row.disabled ? { disabled: true } : {}
+					}),
+					...row.disabled ? { "data-disabled": "" } : {},
+					...scope.context.highlightedValue === row.value ? { "data-highlighted": "" } : {},
+					...submenuRowHandlers(scope, row)
+				};
+			}
+		}
+	},
+	commands: {
+		open: { event: () => ({ type: "OPEN" }) },
+		close: { event: () => ({ type: "CLOSE" }) },
+		setHighlighted: { event: ([value]) => ({
+			type: "HIGHLIGHT",
+			value
+		}) }
+	},
+	readers: {
+		isOpen: { read: (_context, state) => state === "open" },
+		highlightedValue: { read: (context) => context.highlightedValue },
+		openSubmenu: { read: (context) => context.openSubmenu }
+	},
+	methods: {
+		getBlocks: { call: (context) => blocksOf(context.entries) },
+		getRows: { call: (_context, _state, [block]) => {
+			if (!isMenuBlock(block)) return [];
+			return block.rows;
+		} },
+		getSubmenuBlocks: { call: (_context, _state, [row]) => {
+			if (!isMenuRow(row)) return [];
+			return blocksOf(row.children).map((block) => ({
+				...block,
+				id: `${row.value}:${block.id}`
+			}));
+		} }
+	},
+	events: {
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state === "open"],
+			detail: (watched) => ({ open: watched[0] })
+		},
+		select: {
+			prop: "onSelect",
+			watch: () => [],
+			detail: (watched) => ({ value: watched[0] }),
+			select: (event) => {
+				if (event.type !== "ITEM_CLICK") return null;
+				const value = event["value"];
+				if (typeof value !== "string") return null;
+				return { value };
+			}
+		},
+		"highlight-change": {
+			prop: "onHighlightChange",
+			watch: (context) => [context.highlightedValue],
+			detail: (watched) => ({ highlightedValue: watched[0] })
+		}
+	},
+	settled: ({ event, focus }) => {
+		if (event.type === "HIGHLIGHT") {
+			const value = event["value"];
+			if (typeof value === "string") focus("item", value);
+		} else if (event.type === "SUBMENU_HIGHLIGHT") {
+			const value = event["value"];
+			if (typeof value === "string") focus("submenuItem", value);
+		} else if (event.type === "TRIGGER_CLICK" || event.type === "OPEN") focus("content");
+	}
+};
+const menu = defineComponent(def);
+export { def, menu };
+
+//# sourceMappingURL=menu.presentation.js.map