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

package/dist/combobox/combobox.presentation.js

@@ -0,0 +1,746 @@
+import { pickOutcome } from "./combobox.state.js";
+import { combobox as combobox$1, isOpenPhase } from "./combobox.machine.js";
+import { ariaControls, ariaHidden, ariaInvalid, ariaLabelledBy, ariaState, comboboxInput, defineComponent, disclosureTrigger, isComposing, listSurface, optionRow } from "@spinjs/runtime";
+// src/combobox/combobox.presentation.ts
+const toRow = (item) => {
+	if (typeof item.value !== "string" || item.value.length === 0) return;
+	const meta = typeof item.meta === "object" && item.meta !== null && !Array.isArray(item.meta) ? { ...item.meta } : void 0;
+	return {
+		value: item.value,
+		label: typeof item.label === "string" && item.label.length > 0 ? item.label : item.value,
+		disabled: item.disabled === true,
+		group: typeof item.group === "string" ? item.group : "",
+		index: 0,
+		meta
+	};
+};
+const toRows = (items) => {
+	const rows = [];
+	for (const item of items) {
+		const row = toRow(item);
+		if (row !== void 0) rows.push(row);
+	}
+	return rows.map((row, index) => ({
+		...row,
+		index
+	}));
+};
+const parseItems = (raw) => {
+	if (!Array.isArray(raw)) return [];
+	return toRows(raw.filter((item) => typeof item === "object" && item !== null));
+};
+const sameKeys = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+/** Why the input's text moved: the prop channel carries no `src`, so ours
+* names the event that produced the move. */
+const INPUT_REASON = {
+	"INPUT.CHANGE": "input-change",
+	"INPUT_VALUE.SET": "script",
+	"VALUE.SET": "value-set",
+	"VALUE.CLEAR": "clear-trigger",
+	"ITEM.SELECT": "item-select",
+	"ITEM.CLEAR": "item-clear",
+	"ITEM.CLICK": "item-select",
+	"INPUT.ENTER": "item-select",
+	"SELECTED_ITEMS.SYNC": "sync",
+	"INPUT.ESCAPE": "escape-key",
+	"LAYER.INTERACT_OUTSIDE": "interact-outside"
+};
+/** Why the panel opened or closed: the reasons Zag names, and `script` for
+* everything the host asked for. */
+const OPEN_REASON = {
+	"TRIGGER.CLICK": "trigger-click",
+	"INPUT.CLICK": "input-click",
+	"INPUT.CHANGE": "input-change",
+	"INPUT.ARROW_DOWN": "arrow-key",
+	"INPUT.ARROW_UP": "arrow-key",
+	"INPUT.ENTER": "item-select",
+	"ITEM.CLICK": "item-select",
+	"LAYER.ESCAPE": "escape-key",
+	"LAYER.INTERACT_OUTSIDE": "interact-outside",
+	"VALUE.CLEAR": "clear-trigger"
+};
+const rowsCache = /* @__PURE__ */ new WeakMap();
+const rowsOf = (parsed) => {
+	const raw = parsed["items"];
+	if (!Array.isArray(raw)) return [];
+	const hit = rowsCache.get(raw);
+	if (hit !== void 0) return hit;
+	const built = toRows(raw);
+	rowsCache.set(raw, built);
+	return built;
+};
+/** Blocks memoized on the rows' identity: the `for` directive iterates this
+* array, and fresh wrappers per read would re-stamp the groups. */
+const blocksCache = /* @__PURE__ */ new WeakMap();
+const blocksOf = (rows) => {
+	const hit = blocksCache.get(rows);
+	if (hit !== void 0) return hit;
+	const built = [];
+	let label = null;
+	let group = [];
+	const flush = () => {
+		if (group.length === 0) return;
+		built.push({
+			id: label ?? `group-${built.length}`,
+			label,
+			rows: group
+		});
+		label = null;
+		group = [];
+	};
+	let previous;
+	for (const row of rows) {
+		if ((row.group ?? "") !== (previous ?? "")) {
+			flush();
+			label = row.group === void 0 || row.group.length === 0 ? null : row.group;
+			previous = row.group;
+		}
+		group.push(row);
+	}
+	flush();
+	blocksCache.set(rows, built);
+	return built;
+};
+/** Zag's `getEventKey`: the only thing `dir` changes is which way the
+* horizontal arrows point. */
+const resolveKey = (event, dir) => {
+	if (dir !== "rtl") return event.key;
+	if (event.key === "ArrowLeft") return "ArrowRight";
+	if (event.key === "ArrowRight") return "ArrowLeft";
+	return event.key;
+};
+/**
+* One step through the collection, mirroring Zag's `getNextValue`: the walk
+* starts at the highlighted row's position — so a highlight sitting on a
+* disabled row still moves — skips the disabled rows it passes, and returns
+* null when it runs off the end. With no reference point at all the RAW
+* first (or last) row is the answer, disabled or not.
+*/
+const step = (scope, delta) => {
+	const list = scope.context.items;
+	if (list.length === 0) return null;
+	const current = scope.context.highlightedValue;
+	if (current === null) {
+		const row = delta > 0 ? list[0] : list[list.length - 1];
+		return row === void 0 ? null : row.value;
+	}
+	const at = list.findIndex((row) => row.value === current);
+	const start = at === -1 ? 0 : at;
+	for (let index = start + delta; index >= 0 && index < list.length; index += delta) {
+		const row = list[index];
+		if (row !== void 0 && !row.disabled) return row.value;
+	}
+	return null;
+};
+/** The collection's extremes, disabled or not. */
+const edge = (scope, from) => {
+	const list = scope.context.items;
+	const row = from === "first" ? list[0] : list[list.length - 1];
+	return row === void 0 ? null : row.value;
+};
+/** The arrow's target: the walk, wrapping only when the host loops. */
+const walked = (scope, delta) => {
+	const value = step(scope, delta);
+	if (value !== null) return { value };
+	if (scope.context.loopFocus !== true) return {};
+	const wrapped = edge(scope, delta > 0 ? "first" : "last");
+	return wrapped === null ? {} : { value: wrapped };
+};
+const inputKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	if (scope.context.disabled === true || scope.context.readOnly === true) return;
+	if (event.ctrlKey || event.shiftKey || isComposing(event)) return;
+	const ctx = scope.context;
+	const isOpen = isOpenPhase(scope.state);
+	const valueAsString = ctx.value.map((value) => ctx.labels[value]).filter((label) => label !== void 0).join(", ");
+	const dir = event.target instanceof Element ? event.target.ownerDocument?.defaultView?.getComputedStyle(event.target).direction : "ltr";
+	switch (resolveKey(event, typeof dir === "string" ? dir : "ltr")) {
+		case "ArrowDown":
+			if (scope.context.openOnKeyPress === false && !isOpen) return;
+			event.preventDefault();
+			if (event.altKey) {
+				scope.send({ type: "OPEN" });
+				return;
+			}
+			scope.send({
+				type: "INPUT.ARROW_DOWN",
+				keypress: true,
+				...isOpen ? walked(scope, 1) : {}
+			});
+			return;
+		case "ArrowUp":
+			if (scope.context.openOnKeyPress === false && !isOpen) return;
+			event.preventDefault();
+			if (event.altKey) {
+				scope.send({ type: "CLOSE" });
+				return;
+			}
+			scope.send({
+				type: "INPUT.ARROW_UP",
+				keypress: true,
+				...isOpen ? walked(scope, -1) : {}
+			});
+			return;
+		case "Home": {
+			const value = edge(scope, "first");
+			scope.send({
+				type: "INPUT.HOME",
+				keypress: true,
+				...isOpen && value !== null ? { value } : {}
+			});
+			if (isOpen) event.preventDefault();
+			return;
+		}
+		case "End": {
+			const value = edge(scope, "last");
+			scope.send({
+				type: "INPUT.END",
+				keypress: true,
+				...isOpen && value !== null ? { value } : {}
+			});
+			if (isOpen) event.preventDefault();
+			return;
+		}
+		case "Escape":
+			scope.send({ type: "INPUT.ESCAPE" });
+			event.preventDefault();
+			return;
+		case "Enter": {
+			const wasOpen = isOpen;
+			const highlighted = ctx.highlightedValue !== null;
+			const rejected = ctx.inputValue !== valueAsString && !ctx.allowCustomValue;
+			scope.send({ type: "INPUT.ENTER" });
+			if (wasOpen && scope.context.alwaysSubmitOnEnter !== true && (highlighted || rejected)) event.preventDefault();
+			return;
+		}
+		default: return;
+	}
+};
+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 (scope.context.disabled === true) return;
+			if (row.disabled || event.pointerType !== "mouse") return;
+			if (scope.context.highlightedValue === row.value) return;
+			scope.send({
+				type: "ITEM.POINTER_MOVE",
+				value: row.value
+			});
+		},
+		onPointerLeave: () => {
+			if (scope.context.disabled === true) return;
+			if (row.disabled) return;
+			scope.send({ type: "ITEM.POINTER_LEAVE" });
+		},
+		onClick: (event) => {
+			if (event.defaultPrevented) return;
+			if (scope.context.disabled === true) return;
+			if (row.disabled) return;
+			if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+			scope.send({
+				type: "ITEM.CLICK",
+				value: row.value
+			});
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+const itemStateOf = (scope, row) => ({
+	value: row.value,
+	disabled: scope.context.disabled || row.disabled === true,
+	highlighted: scope.context.highlightedValue === row.value,
+	selected: scope.context.value.includes(row.value)
+});
+/** The component's public state: the names the markup may key on. */
+const def = {
+	name: "combobox",
+	machine: (props, authored) => combobox$1(props, authored),
+	start: (props) => props["open"] === true || props["defaultOpen"] === true ? "suggesting" : "idle",
+	establish: (raw, authored) => {
+		const highlight = authored("highlightedValue") ? raw["highlightedValue"] : raw["defaultHighlightedValue"];
+		if (typeof highlight !== "string" || highlight.length === 0) return [];
+		return [{
+			type: "HIGHLIGHTED_VALUE.SET",
+			value: highlight
+		}];
+	},
+	reconcile: ({ context, state, parsed, authored, send }) => {
+		const ctx = context;
+		const rows = parseItems(parsed["items"]);
+		const order = rows.map((row) => row.value);
+		const orderChanged = !sameKeys(ctx.order, order);
+		ctx.items = rows;
+		if (orderChanged) {
+			ctx.order = order;
+			ctx.labels = Object.fromEntries(rows.map((row) => [row.value, row.label]));
+			if (isOpenPhase(state)) send({ type: "CHILDREN_CHANGE" });
+		}
+		if (authored("open")) {
+			const open = parsed["open"] === true;
+			if (open !== isOpenPhase(state)) {
+				send({ type: open ? "OPEN" : "CLOSE" });
+				return true;
+			}
+		}
+		return orderChanged;
+	},
+	settled: ({ event, before, after, focus }) => {
+		const wasOpen = isOpenPhase(before.state);
+		const isOpenNow = isOpenPhase(after.state);
+		if (wasOpen !== isOpenNow && (isOpenNow || event.type === "CLOSE")) focus("input");
+	},
+	parts: {
+		root: { attrs: (scope) => {
+			const open = isOpenPhase(scope.state);
+			return {
+				dir: scope.context.dir,
+				"data-phase": scope.state,
+				"data-state": open ? "open" : "closed",
+				"data-disabled": scope.attr(scope.context.disabled === true),
+				"data-readonly": scope.attr(scope.context.readOnly === true),
+				"use:dismissable": {
+					onEscape: () => {
+						if (!isOpenPhase(scope.state)) return;
+						scope.send({ type: "LAYER.ESCAPE" });
+					},
+					onOutside: () => {
+						if (!isOpenPhase(scope.state)) return;
+						scope.send({ type: "LAYER.INTERACT_OUTSIDE" });
+					}
+				}
+			};
+		} },
+		label: { attrs: (scope) => ({
+			htmlFor: scope.id("input"),
+			"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+			"data-disabled": scope.attr(scope.context.disabled === true),
+			"data-invalid": scope.attr(scope.context.invalid === true),
+			"data-required": scope.attr(scope.context.required === true),
+			onClick: () => {}
+		}) },
+		control: { attrs: (scope) => ({
+			"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+			"data-disabled": scope.attr(scope.context.disabled === true)
+		}) },
+		positioner: { attrs: (scope) => {
+			const _placementRaw = scope.context.placement;
+			const placement = typeof _placementRaw === "string" && _placementRaw.length > 0 ? _placementRaw : "bottom";
+			return {
+				hidden: !isOpenPhase(scope.state),
+				"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+				"data-placement": placement,
+				"data-side": placement.split("-")[0] ?? placement
+			};
+		} },
+		input: { attrs: (scope) => {
+			const ctx = scope.context;
+			const display = ctx.autofill ?? ctx.inputValue;
+			return {
+				dir: scope.context.dir,
+				type: "text",
+				role: "combobox",
+				name: scope.context.name,
+				form: scope.context.form,
+				disabled: scope.context.disabled,
+				readOnly: scope.context.readOnly,
+				required: scope.context.required,
+				placeholder: scope.context.placeholder,
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "none",
+				spellCheck: false,
+				value: display,
+				...ariaInvalid(ariaState(scope.context.invalid)),
+				...comboboxInput(scope, {
+					autocomplete: ctx.inputBehavior === "autocomplete" ? "both" : "list",
+					controls: { part: "content" },
+					expanded: isOpenPhase(scope.state),
+					activeDescendant: ctx.highlightedValue === null ? void 0 : {
+						part: "item",
+						slot: ctx.highlightedValue
+					}
+				}),
+				"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+				"data-disabled": scope.attr(scope.context.disabled === true),
+				onFocus: () => {
+					if (scope.context.disabled === true) return;
+					scope.send({ type: "INPUT.FOCUS" });
+				},
+				onBlur: () => {
+					if (scope.context.disabled === true) return;
+					scope.send({ type: "INPUT.BLUR" });
+				},
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					if (scope.context.openOnClick === false) return;
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					scope.send({ type: "INPUT.CLICK" });
+				},
+				onInput: (event) => {
+					scope.send({
+						type: "INPUT.CHANGE",
+						value: event.currentTarget.value
+					});
+				},
+				onKeydown: (event) => {
+					inputKeydown(scope, event);
+				}
+			};
+		} },
+		trigger: { attrs: (scope, arg) => {
+			const focusable = typeof arg === "object" && arg !== null && "focusable" in arg && arg.focusable === true;
+			const open = isOpenPhase(scope.state);
+			return {
+				id: scope.id("trigger"),
+				type: "button",
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: scope.context.composite !== false ? "listbox" : "dialog",
+					controls: open ? { part: "content" } : void 0
+				}),
+				"aria-label": scope.context.triggerLabel,
+				disabled: scope.context.disabled,
+				tabIndex: focusable ? void 0 : -1,
+				"data-state": open ? "open" : "closed",
+				"data-focusable": scope.attr(focusable),
+				"data-disabled": scope.attr(scope.context.disabled === true),
+				onFocus: () => {
+					if (!focusable) return;
+					scope.send({ type: "INPUT.FOCUS" });
+				},
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					if (event.button !== 0) return;
+					scope.send({ type: "TRIGGER.CLICK" });
+				},
+				onPointerDown: (event) => {
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					if (event.pointerType === "touch") return;
+					if (event.button !== 0) return;
+					event.preventDefault();
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (scope.context.composite !== false) return;
+					if (scope.context.disabled === true || scope.context.readOnly === true) return;
+					const key = resolveKey(event, event.target instanceof Element && event.target.ownerDocument?.defaultView?.getComputedStyle(event.target).direction === "rtl" ? "rtl" : "ltr");
+					if (key !== "ArrowDown" && key !== "ArrowUp") return;
+					event.preventDefault();
+					scope.send({ type: key === "ArrowDown" ? "INPUT.ARROW_DOWN" : "INPUT.ARROW_UP" });
+				}
+			};
+		} },
+		triggerIndicator: { attrs: (scope) => ({
+			...ariaHidden(true),
+			"data-state": isOpenPhase(scope.state) ? "open" : "closed"
+		}) },
+		clearTrigger: { attrs: (scope) => ({
+			id: scope.id("clearTrigger"),
+			type: "button",
+			"aria-label": scope.context.clearTriggerLabel,
+			...ariaControls(scope, { part: "input" }),
+			disabled: scope.context.disabled,
+			tabIndex: -1,
+			"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+			"data-disabled": scope.attr(scope.context.disabled === true),
+			hidden: scope.context.value.length === 0,
+			onPointerDown: (event) => {
+				if (event.button !== 0) return;
+				event.preventDefault();
+			},
+			onClick: (event) => {
+				if (event.defaultPrevented) return;
+				if (scope.context.disabled === true || scope.context.readOnly === true) return;
+				scope.send({ type: "VALUE.CLEAR" });
+			}
+		}) },
+		content: { attrs: (scope) => {
+			const ctx = scope.context;
+			const _placementRaw = scope.context.placement;
+			const placement = typeof _placementRaw === "string" && _placementRaw.length > 0 ? _placementRaw : "bottom";
+			const rows = scope.context.items;
+			return {
+				dir: scope.context.dir,
+				role: scope.context.composite !== false ? "listbox" : "dialog",
+				tabIndex: -1,
+				...listSurface(scope, {
+					labelledBy: { part: "label" },
+					multiSelectable: scope.context.composite !== false && ctx.multiple ? true : void 0
+				}),
+				"data-state": isOpenPhase(scope.state) ? "open" : "closed",
+				"data-placement": placement,
+				"data-side": placement.split("-")[0] ?? placement,
+				"data-empty": scope.attr(rows.length === 0),
+				"data-disabled": scope.attr(scope.context.disabled === true),
+				onPointerDown: (event) => {
+					if (event.button !== 0) return;
+					event.preventDefault();
+				},
+				"use:scroll-into-view": { activeId: () => {
+					const highlighted = scope.context.highlightedValue;
+					if (!isOpenPhase(scope.state) || highlighted === null) return "";
+					return scope.id("item", highlighted);
+				} }
+			};
+		} },
+		list: { attrs: (scope) => {
+			const ctx = scope.context;
+			const composite = scope.context.composite !== false;
+			return {
+				role: composite ? void 0 : "listbox",
+				...listSurface(scope, {
+					labelledBy: { part: "label" },
+					multiSelectable: composite ? void 0 : ctx.multiple ? true : void 0
+				}),
+				"data-empty": scope.attr(scope.context.items.length === 0)
+			};
+		} }
+	},
+	slots: {
+		item: {
+			id: "item",
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const row = scope.slot;
+				const state = itemStateOf(scope, row);
+				return {
+					id: scope.id("item", row.value),
+					role: "option",
+					tabIndex: -1,
+					"data-value": row.value,
+					...optionRow({
+						selected: state.selected,
+						disabled: state.disabled ? true : void 0
+					}),
+					"data-highlighted": scope.attr(state.highlighted),
+					"data-selected": scope.attr(state.selected),
+					"data-disabled": scope.attr(state.disabled),
+					...rowHandlers(scope, row)
+				};
+			}
+		},
+		itemText: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const state = itemStateOf(scope, scope.slot);
+				return {
+					"data-selected": scope.attr(state.selected),
+					"data-highlighted": scope.attr(state.highlighted),
+					"data-disabled": scope.attr(state.disabled)
+				};
+			}
+		},
+		itemIndicator: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const selected = itemStateOf(scope, scope.slot).selected;
+				return {
+					...ariaHidden(true),
+					"data-selected": scope.attr(selected),
+					hidden: !selected
+				};
+			}
+		},
+		itemGroup: {
+			id: "item-group",
+			indexes: (context) => blocksOf(context.items),
+			attrs: (scope) => {
+				const block = scope.slot;
+				return {
+					id: scope.id("itemGroup", block.id),
+					role: "group",
+					...ariaLabelledBy(scope, {
+						part: "itemGroupLabel",
+						slot: block.id
+					}),
+					"data-empty": scope.attr(scope.context.items.length === 0)
+				};
+			}
+		},
+		itemGroupLabel: {
+			id: "item-group-label",
+			indexes: (context) => blocksOf(context.items),
+			attrs: (scope) => {
+				const block = scope.slot;
+				return {
+					id: scope.id("itemGroupLabel", block.id),
+					role: "presentation",
+					hidden: block.label === null
+				};
+			}
+		}
+	},
+	commands: {
+		syncSelectedItems: { event: () => ({ type: "SELECTED_ITEMS.SYNC" }) },
+		setHighlightValue: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "HIGHLIGHTED_VALUE.SET",
+				value: typeof v === "string" ? v : null
+			};
+		} },
+		clearHighlightValue: { event: () => ({ type: "HIGHLIGHTED_VALUE.CLEAR" }) },
+		selectValue: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "ITEM.SELECT",
+				value: typeof v === "string" ? v : ""
+			};
+		} },
+		setValue: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "VALUE.SET",
+				value: Array.isArray(v) && v.every((x) => typeof x === "string") ? [...v] : []
+			};
+		} },
+		setInputValue: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "INPUT_VALUE.SET",
+				value: typeof v === "string" ? v : ""
+			};
+		} },
+		clearValue: { event: (args) => args[0] === void 0 ? { type: "VALUE.CLEAR" } : (() => {
+			const v = args[0];
+			return {
+				type: "ITEM.CLEAR",
+				value: typeof v === "string" ? v : ""
+			};
+		})() },
+		focus: { view: ({ focus }) => focus("input") },
+		setOpen: { event: ([open]) => ({ type: open ? "OPEN" : "CLOSE" }) }
+	},
+	readers: {
+		open: { read: (_context, state) => isOpenPhase(state) },
+		focused: { read: (_context, state) => state !== "idle" },
+		inputValue: { read: (context) => {
+			const ctx = context;
+			return ctx.autofill ?? ctx.inputValue;
+		} },
+		highlightedValue: { read: (context) => context.highlightedValue },
+		highlightedItem: { read: (context) => {
+			const ctx = context;
+			if (ctx.highlightedValue === null) return null;
+			return ctx.items.find((row) => row.value === ctx.highlightedValue) ?? null;
+		} },
+		value: { read: (context) => [...context.value] },
+		valueAsString: { read: (context) => {
+			const ctx = context;
+			return ctx.value.map((value) => ctx.labels[value]).filter((label) => label !== void 0).join(", ");
+		} },
+		hasSelectedItems: { read: (context) => context.value.length > 0 },
+		selectedItems: { read: (context) => {
+			const ctx = context;
+			const rows = ctx.items;
+			return ctx.value.map((value) => rows.find((row) => row.value === value)).filter((row) => row !== void 0);
+		} },
+		multiple: { read: (context) => context.multiple },
+		invalid: { read: (context) => context.invalid },
+		disabled: { read: (context) => context.disabled },
+		empty: { read: (context) => context.items.length === 0 }
+	},
+	methods: {
+		getBlocks: { call: (context) => blocksOf(context.items) },
+		getRows: { call: (_context, _state, args) => {
+			const block = args[0];
+			if (typeof block !== "object" || block === null || !("rows" in block) || !Array.isArray(block.rows)) return [];
+			return block.rows.filter((row) => typeof row === "object" && row !== null);
+		} },
+		getItemState: { call: (context, _state, [row]) => {
+			return {
+				value: row.value,
+				disabled: context.disabled || row.disabled === true,
+				highlighted: context.highlightedValue === row.value,
+				selected: context.value.includes(row.value)
+			};
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [...context.value],
+			detail: (watched, _event, props) => {
+				const rows = props === void 0 ? [] : rowsOf(props);
+				const value = watched;
+				return {
+					value: [...value],
+					items: value.map((item) => rows.find((row) => row.value === item)).filter((row) => row !== void 0)
+				};
+			}
+		},
+		"highlight-change": {
+			prop: "onHighlightChange",
+			watch: (context) => [context.highlightedValue],
+			detail: (watched, _event, props) => {
+				const highlighted = watched[0];
+				const rows = props === void 0 ? [] : rowsOf(props);
+				return {
+					highlightedValue: highlighted,
+					highlightedItem: highlighted === null ? null : rows.find((row) => row.value === highlighted) ?? null
+				};
+			}
+		},
+		"input-value-change": {
+			prop: "onInputValueChange",
+			watch: (context) => [context.inputValue],
+			detail: (watched, event) => ({
+				inputValue: watched[0],
+				reason: (event !== void 0 ? INPUT_REASON[event.type] : void 0) ?? "script"
+			})
+		},
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [isOpenPhase(state)],
+			detail: (watched, event, _props, context) => ({
+				open: watched[0],
+				reason: (event !== void 0 ? OPEN_REASON[event.type] : void 0) ?? "script",
+				value: [...context !== void 0 && Array.isArray(context.value) ? context.value : []]
+			})
+		},
+		select: {
+			prop: "onSelect",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({
+				value: [...watched],
+				itemValue: ""
+			}),
+			select: (event, before, after) => {
+				const beforeCtx = before;
+				const afterCtx = after;
+				let outcome = null;
+				let itemValue = "";
+				if (event.type === "ITEM.SELECT" || event.type === "ITEM.CLICK") {
+					const ev = event["value"];
+					if (typeof ev !== "string") return null;
+					outcome = pickOutcome(beforeCtx, ev);
+					itemValue = ev;
+				} else if (event.type === "INPUT.ENTER") {
+					const highlighted = beforeCtx.highlightedValue;
+					if (highlighted === null || !beforeCtx.order.includes(highlighted)) return null;
+					outcome = pickOutcome(beforeCtx, highlighted);
+					itemValue = highlighted;
+				}
+				if (outcome === null || !sameKeys(outcome, afterCtx.value)) return null;
+				return {
+					value: [...outcome],
+					itemValue
+				};
+			}
+		}
+	}
+};
+const combobox = defineComponent(def);
+export { combobox, def };
+
+//# sourceMappingURL=combobox.presentation.js.map