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

package/dist/select/select.presentation.js

@@ -0,0 +1,509 @@
+import { dataAttr as dataAttr$1 } from "./select.shared.js";
+import { selectLabel } from "./select.state.js";
+import { select as select$1 } from "./select.machine.js";
+import { ariaFlag, ariaHidden, ariaInvalid, ariaLabelledBy, ariaRequired, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+// src/select/select.presentation.ts
+const sameKeys = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+/** Why the panel opened or closed: the prop channel carries no `src`, so
+* the event that produced the move names the reason. */
+const OPEN_REASON = {
+	"TRIGGER.CLICK": "trigger-click",
+	"TRIGGER.ENTER": "trigger-enter",
+	"TRIGGER.ARROW_DOWN": "arrow-key",
+	"TRIGGER.ARROW_UP": "arrow-key",
+	OPEN: "script",
+	CLOSE: "script",
+	"ITEM.CLICK": "item-select",
+	"LAYER.ESCAPE": "escape-key",
+	"LAYER.INTERACT_OUTSIDE": "interact-outside"
+};
+const rowsOf = (parsed) => {
+	const raw = parsed["items"];
+	const arr = Array.isArray(raw) ? raw : [];
+	const rows = [];
+	for (const entry of arr) {
+		if (typeof entry !== "object" || entry === null) continue;
+		const record = entry;
+		const value = record["value"];
+		if (typeof value !== "string" || value.length === 0) continue;
+		rows.push({
+			value,
+			label: typeof record["label"] === "string" ? record["label"] : value,
+			disabled: record["disabled"] === true
+		});
+	}
+	return rows;
+};
+const orderOf = (parsed) => rowsOf(parsed).map((row) => row.value);
+const labelsOf = (parsed) => Object.fromEntries(rowsOf(parsed).map((row) => [row.value, row.label]));
+/** The only thing `dir` changes is the arrow mapping. */
+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;
+};
+const isComposing$1 = (event) => event.isComposing === true || event.keyCode === 229;
+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: () => {
+			if (row.disabled === true) return;
+			scope.send({
+				type: "ITEM.POINTER_MOVE",
+				value: row.value
+			});
+		},
+		onPointerLeave: () => {
+			scope.send({ type: "ITEM.POINTER_LEAVE" });
+		},
+		onClick: () => {
+			if (row.disabled === true) return;
+			scope.send({
+				type: "ITEM.CLICK",
+				value: row.value
+			});
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+const itemStateOf = (scope, row) => ({
+	selected: scope.context.value.includes(row.value),
+	highlighted: scope.context.highlightedValue === row.value,
+	disabled: row.disabled === true
+});
+const onTriggerKeydown = (scope, event) => {
+	if (isComposing$1(event) || event.defaultPrevented) return;
+	if (scope.context.disabled === true || scope.context.readOnly === true) return;
+	const dir = scope.context.dir;
+	const key = resolveKey(event, typeof dir === "string" ? dir : "ltr");
+	const open = scope.state === "open";
+	switch (key) {
+		case "ArrowDown":
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.ARROW_DOWN" });
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.ARROW_UP" });
+			break;
+		case "ArrowLeft":
+			if (open) return;
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.ARROW_LEFT" });
+			break;
+		case "ArrowRight":
+			if (open) return;
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.ARROW_RIGHT" });
+			break;
+		case "Home":
+			if (open) return;
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.HOME" });
+			break;
+		case "End":
+			if (open) return;
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.END" });
+			break;
+		case "Enter":
+			event.preventDefault();
+			scope.send({ type: "TRIGGER.ENTER" });
+			break;
+		default: if (key.length === 1 && /\S/.test(key)) scope.send({
+			type: "TRIGGER.TYPEAHEAD",
+			value: key
+		});
+	}
+};
+const onContentKeydown = (scope, event) => {
+	if (isComposing$1(event) || event.defaultPrevented) return;
+	if (scope.context.disabled === true || scope.context.readOnly === true) return;
+	const dir = scope.context.dir;
+	const key = resolveKey(event, typeof dir === "string" ? dir : "ltr");
+	switch (key) {
+		case "ArrowDown":
+			event.preventDefault();
+			scope.send({ type: "CONTENT.ARROW_DOWN" });
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({ type: "CONTENT.ARROW_UP" });
+			break;
+		case "Home":
+			event.preventDefault();
+			scope.send({ type: "CONTENT.HOME" });
+			break;
+		case "End":
+			event.preventDefault();
+			scope.send({ type: "CONTENT.END" });
+			break;
+		case "Enter": {
+			event.preventDefault();
+			const picked = scope.context.highlightedValue;
+			if (picked !== null) scope.send({
+				type: "ITEM.CLICK",
+				value: picked
+			});
+			break;
+		}
+		default: if (key.length === 1 && /\S/.test(key)) scope.send({
+			type: "CONTENT.TYPEAHEAD",
+			value: key
+		});
+	}
+};
+const def = {
+	name: "select",
+	machine: (args, authored) => select$1(args, authored),
+	start: (props, authored) => {
+		if (authored("open")) return props["open"] === true ? "open" : "idle";
+		return props["defaultOpen"] === true ? "open" : "idle";
+	},
+	settled: ({ event, before, after, focus }) => {
+		if (before.state === "open" && after.state === "focused") focus("trigger");
+	},
+	reconcile: ({ context, parsed, send }) => {
+		const ctx = context;
+		const nextItems = rowsOf(parsed);
+		const itemsChanged = nextItems.length !== ctx.items.length || nextItems.some((row, index) => {
+			const current = ctx.items[index];
+			return current === void 0 || current.value !== row.value || current.label !== row.label || (current.disabled ?? false) !== (row.disabled ?? false);
+		});
+		let moved = itemsChanged;
+		if (itemsChanged) ctx.items = nextItems;
+		const order = orderOf(parsed);
+		const orderChanged = !sameKeys(ctx.order, order);
+		if (orderChanged) {
+			ctx.order = order;
+			ctx.labels = labelsOf(parsed);
+			send({ type: "SELECTED_ITEMS.SYNC" });
+		}
+		return moved || orderChanged;
+	},
+	parts: {
+		root: { attrs: (scope) => {
+			const open = scope.state === "open";
+			return {
+				dir: scope.context.dir,
+				"data-state": open ? "open" : "closed",
+				"data-focus": scope.attr(scope.state !== "idle"),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				"data-invalid": scope.attr(scope.context.invalid === true),
+				"data-multiple": scope.attr(scope.context.multiple),
+				"data-disabled": dataAttr$1(scope.context.disabled === true),
+				"data-placeholder": dataAttr$1(scope.context.value.length === 0)
+			};
+		} },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			for: scope.id("trigger"),
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-disabled": dataAttr$1(scope.context.disabled === true)
+		}) },
+		control: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-disabled": dataAttr$1(scope.context.disabled === true)
+		}) },
+		trigger: { attrs: (scope) => {
+			const ctx = scope.context;
+			const open = scope.state === "open";
+			return {
+				type: "button",
+				dir: scope.context.dir,
+				role: "combobox",
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: "listbox",
+					controls: { part: "content" }
+				}),
+				...ariaLabelledBy(scope, { parts: [{ part: "label" }, { part: "valueText" }] }),
+				...ariaRequired(ariaFlag(scope.context.required)),
+				...ariaInvalid(ariaFlag(scope.context.invalid)),
+				disabled: scope.context.disabled || scope.context.readOnly,
+				"data-state": open ? "open" : "closed",
+				"data-focus": scope.attr(scope.state === "focused"),
+				"data-focused": scope.attr(scope.state !== "idle"),
+				"aria-controls": scope.id("content"),
+				"aria-owns": scope.id("list"),
+				"data-placeholder": dataAttr$1(ctx.value.length === 0),
+				onFocus: () => scope.send({ type: "TRIGGER.FOCUS" }),
+				onBlur: () => scope.send({ type: "TRIGGER.BLUR" }),
+				onClick: () => scope.send({ type: "TRIGGER.CLICK" }),
+				onKeyDown: (event) => onTriggerKeydown(scope, event)
+			};
+		} },
+		triggerIndicator: { attrs: (scope) => ({
+			...ariaHidden(true),
+			"data-state": scope.state === "open" ? "open" : "closed",
+			"data-disabled": dataAttr$1(scope.context.disabled === true)
+		}) },
+		clearTrigger: { attrs: (scope) => {
+			const has = scope.context.value.length > 0;
+			return {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": scope.context.clearTriggerLabel,
+				disabled: scope.context.disabled,
+				"data-state": has ? "visible" : "hidden",
+				onClick: (event) => {
+					event.stopPropagation();
+					scope.send({ type: "CLEAR.CLICK" });
+				}
+			};
+		} },
+		valueText: {
+			id: "value-text",
+			attrs: (scope) => ({ "data-placeholder": dataAttr$1(scope.context.value.length === 0) })
+		},
+		positioner: { attrs: (scope) => {
+			const open = scope.state === "open";
+			return {
+				dir: scope.context.dir,
+				"data-state": open ? "open" : "closed",
+				hidden: !open,
+				"data-placement": scope.context.placement
+			};
+		} },
+		content: { attrs: (scope) => {
+			const ctx = scope.context;
+			const open = scope.state === "open";
+			const activedescendant = ctx.highlightedValue === null ? void 0 : scope.id("item", ctx.highlightedValue);
+			return {
+				dir: scope.context.dir,
+				role: "listbox",
+				...listSurface(scope, {
+					labelledBy: { part: "label" },
+					activeDescendant: ctx.highlightedValue === null ? void 0 : {
+						part: "item",
+						slot: ctx.highlightedValue
+					},
+					multiSelectable: ariaFlag(scope.context.multiple),
+					required: ariaFlag(scope.context.required),
+					readOnly: ariaFlag(scope.context.readOnly)
+				}),
+				"data-activedescendant": activedescendant,
+				hidden: !open,
+				tabIndex: 0,
+				"data-state": open ? "open" : "closed",
+				onKeyDown: (event) => onContentKeydown(scope, event),
+				"use:dismissable": {
+					onOutside: (event) => {
+						const target = event.target;
+						if (target instanceof Element && target.closest(`[id="${scope.id("trigger")}"]`) !== null) return;
+						const focusable = target instanceof Element && target.closest("button, [href], input, select, textarea") !== null;
+						scope.send({
+							type: "LAYER.INTERACT_OUTSIDE",
+							restoreFocus: !(focusable || event.button === 2)
+						});
+					},
+					onEscape: () => scope.send({ type: "LAYER.ESCAPE" })
+				},
+				"use:select-focus": { open },
+				"use:scroll-into-view": { activeId: () => {
+					const highlighted = scope.context.highlightedValue;
+					return highlighted === null ? "" : scope.id("item", highlighted);
+				} }
+			};
+		} },
+		list: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			role: "group",
+			"data-state": scope.state === "open" ? "open" : "closed"
+		}) },
+		hiddenSelect: {
+			id: "hidden",
+			attrs: (scope) => ({
+				...ariaHidden(true),
+				tabIndex: -1,
+				name: scope.context.name || void 0,
+				form: scope.context.form || void 0,
+				disabled: scope.context.disabled,
+				required: scope.context.required,
+				multiple: scope.context.multiple === true,
+				"data-state": "hidden",
+				"use:select-options": {
+					rows: scope.context.items,
+					value: [...scope.context.value],
+					multiple: scope.context.multiple === true
+				},
+				"use:form-control": { onDisabledChange: () => {} }
+			})
+		}
+	},
+	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",
+					...optionRow({ selected: state.selected }),
+					"data-state": state.highlighted ? "highlighted" : "idle",
+					"data-selected": dataAttr$1(state.selected),
+					"data-highlighted": dataAttr$1(state.highlighted),
+					"data-disabled": dataAttr$1(state.disabled),
+					"aria-owns": scope.id("list"),
+					...rowHandlers(scope, row)
+				};
+			}
+		},
+		itemText: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const state = itemStateOf(scope, scope.slot);
+				const row = scope.slot;
+				return {
+					id: scope.id("itemText", row.value),
+					"data-state": state.highlighted ? "highlighted" : "idle",
+					"data-selected": dataAttr$1(state.selected)
+				};
+			}
+		},
+		itemIndicator: {
+			indexes: (context) => context.items,
+			attrs: (scope) => {
+				const selected = itemStateOf(scope, scope.slot).selected;
+				return {
+					...ariaHidden(true),
+					"data-selected": scope.attr(selected)
+				};
+			}
+		}
+	},
+	commands: {
+		syncSelectedItems: { event: () => ({ type: "SELECTED_ITEMS.SYNC" }) },
+		selectValue: { event: ([value]) => ({
+			type: "ITEM.SELECT",
+			value
+		}) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value: [...value]
+		}) },
+		clearValue: { event: () => ({ type: "VALUE.CLEAR" }) },
+		setHighlightValue: { event: ([value]) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			highlightedValue: value
+		}) },
+		clearHighlightValue: { event: () => ({ type: "HIGHLIGHTED_VALUE.CLEAR" }) },
+		setOpen: { event: ([open]) => ({ type: open ? "OPEN" : "CLOSE" }) },
+		close: { event: () => ({ type: "CLOSE" }) },
+		toggle: { event: () => ({ type: "TOGGLE" }) },
+		focus: { event: () => ({ type: "TRIGGER.FOCUS" }) }
+	},
+	readers: {
+		open: { read: (_context, state) => state === "open" },
+		focused: { read: (_context, state) => state !== "idle" },
+		value: { read: (context) => [...context.value] },
+		valueAsString: { read: (context) => selectLabel(context) },
+		hasSelectedItems: { read: (context) => context.value.length > 0 },
+		highlightedValue: { read: (context) => context.highlightedValue },
+		highlightedItem: { read: (context) => {
+			const highlighted = context.highlightedValue;
+			if (highlighted === null) return null;
+			return context.items.find((row) => row.value === highlighted) ?? null;
+		} },
+		selectedItems: { read: (context) => {
+			const rows = context.items;
+			return context.value.map((value) => rows.find((row) => row.value === value)).filter((row) => row !== void 0);
+		} },
+		multiple: { read: (context) => context.multiple },
+		disabled: { read: (context) => context.disabled },
+		empty: { read: (context) => context.items.length === 0 }
+	},
+	methods: {
+		getRows: { call: (context) => [...context.items] },
+		getSelectedRows: { call: (context) => {
+			return context.value.map((value) => context.items.find((row) => row.value === value)).filter((row) => row !== void 0);
+		} },
+		getItemState: { call: (context, _state, [row]) => {
+			return {
+				selected: context.value.includes(row.value),
+				highlighted: context.highlightedValue === row.value,
+				disabled: row.disabled === true
+			};
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [...context.value],
+			detail: (watched, _event, _props, context) => {
+				const rows = context === void 0 ? [] : context.items;
+				return {
+					value: [...watched],
+					items: watched.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, context) => {
+				const highlighted = watched[0];
+				const items = context === void 0 ? [] : context.items;
+				return {
+					highlightedValue: highlighted,
+					highlightedItem: highlighted === null ? null : items.find((row) => row.value === highlighted) ?? null
+				};
+			}
+		},
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state === "open"],
+			detail: (watched, event) => ({
+				open: watched[0],
+				reason: (event !== void 0 ? OPEN_REASON[event.type] : void 0) ?? "script"
+			})
+		},
+		select: {
+			prop: "onSelect",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({
+				value: [...watched],
+				itemValue: ""
+			}),
+			select: (event, before, after) => {
+				if (event.type !== "ITEM.SELECT" && event.type !== "ITEM.CLICK") return null;
+				const beforeCtx = before;
+				const afterCtx = after;
+				let outcome = null;
+				let itemValue;
+				if (event.type === "ITEM.SELECT") {
+					const v = event["value"];
+					if (typeof v !== "string") return null;
+					itemValue = v;
+					outcome = beforeCtx.multiple ? beforeCtx.value.includes(itemValue) ? beforeCtx.value.filter((value) => value !== itemValue) : [...beforeCtx.value, itemValue] : [itemValue];
+				} else {
+					const highlighted = beforeCtx.highlightedValue;
+					if (highlighted === null || !beforeCtx.order.includes(highlighted)) return null;
+					itemValue = highlighted;
+					outcome = beforeCtx.multiple ? beforeCtx.value.includes(highlighted) ? beforeCtx.value.filter((value) => value !== highlighted) : [...beforeCtx.value, highlighted] : [highlighted];
+				}
+				if (outcome === null || !sameKeys(outcome, afterCtx.value)) return null;
+				return {
+					value: [...outcome],
+					itemValue
+				};
+			}
+		}
+	}
+};
+const select = defineComponent(def);
+export { def, select };
+
+//# sourceMappingURL=select.presentation.js.map

package/dist/select/select.shared.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Select's shared helpers: the one bag helper the connect and its tests
+ * both spell, defined once.
+ */
+/** The `dataAttr` helper: the attribute is present when the condition holds
+ * and absent otherwise, which is what `hidden`-style utilities key on. */
+export declare function dataAttr(value: boolean): string | undefined;
+//# sourceMappingURL=select.shared.d.ts.map

package/dist/select/select.shared.js

@@ -0,0 +1,13 @@
+// src/select/select.shared.ts
+/**
+* Select's shared helpers: the one bag helper the connect and its tests
+* both spell, defined once.
+*/
+/** The `dataAttr` helper: the attribute is present when the condition holds
+* and absent otherwise, which is what `hidden`-style utilities key on. */
+function dataAttr(value) {
+	return value ? "" : void 0;
+}
+export { dataAttr };
+
+//# sourceMappingURL=select.shared.js.map

package/dist/select/select.state.d.ts

@@ -0,0 +1,51 @@
+export type SelectState = "idle" | "focused" | "open";
+export interface SelectRow {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+}
+export interface SelectContext {
+  value: string[];
+  highlightedValue: string | null;
+  /** The collection's rows. */
+  items: readonly SelectRow[];
+  /** The collection's values in order — derived sync over `items`. */
+  order: string[];
+  /** The collection's labels by value — derived sync over `items`. */
+  labels: Record<string, string>;
+  multiple: boolean;
+  closeOnSelect: boolean;
+  loopFocus: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  invalid: boolean | undefined;
+  dir: string;
+  placement: unknown;
+  name: string | undefined;
+  form: string | undefined;
+  clearTriggerLabel: string | undefined;
+}
+export interface SelectArgs {
+  value?: string | readonly string[];
+  highlightedValue?: string;
+  items?: string | readonly SelectRow[] | readonly unknown[];
+  multiple?: boolean;
+  closeOnSelect?: boolean;
+  loopFocus?: boolean;
+  defaultCloseOnSelect?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  dir?: string;
+  placement?: unknown;
+  name?: string;
+  form?: string;
+  clearTriggerLabel?: string;
+}
+export declare const rowsOf: (raw: unknown) => SelectRow[];
+export declare function initial(args: SelectArgs, authored?: (name: string) => boolean): SelectContext;
+export declare const selectLabel: (ctx: SelectContext) => string;
+export declare const inCollection: (ctx: SelectContext, value: string | null) => value is string;
+//# sourceMappingURL=select.state.d.ts.map

package/dist/select/select.state.js

@@ -0,0 +1,69 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/select/select.state.ts
+const parseKeys = (raw) => {
+	if (Array.isArray(raw)) return raw.filter((v) => typeof v === "string");
+	if (typeof raw !== "string") return [];
+	const trimmed = raw.trim();
+	if (trimmed === "") return [];
+	return trimmed.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+};
+const nullableProp = (raw) => typeof raw === "string" && raw.length > 0 ? raw : null;
+const rowsOf = (raw) => {
+	const rows = [];
+	if (typeof raw === "string") {
+		const keys = parseKeys(raw);
+		for (const k of keys) rows.push({
+			value: k,
+			label: k
+		});
+		return rows;
+	}
+	const arr = Array.isArray(raw) ? raw : [];
+	for (const entry of arr) {
+		if (typeof entry !== "object" || entry === null) continue;
+		const record = entry;
+		const value = record["value"];
+		if (typeof value !== "string" || value.length === 0) continue;
+		rows.push({
+			value,
+			label: typeof record["label"] === "string" ? record["label"] : value,
+			disabled: record["disabled"] === true
+		});
+	}
+	return rows;
+};
+function initial(args, authored = () => false) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const rows = rowsOf(args.items);
+	const multiple = args.multiple === true;
+	const closeOnSelect = written("closeOnSelect") ? args.closeOnSelect === true : !multiple;
+	const loopFocus = args.loopFocus === true;
+	return {
+		value: parseKeys(args.value),
+		highlightedValue: written("highlightedValue") ? nullableProp(args.highlightedValue) : null,
+		items: rows,
+		order: rows.map((row) => row.value),
+		labels: Object.fromEntries(rows.map((row) => [row.value, row.label])),
+		multiple,
+		closeOnSelect,
+		loopFocus,
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		required: args.required === true,
+		invalid: authored("invalid") ? args.invalid === true : void 0,
+		dir: typeof args.dir === "string" && args.dir.length > 0 ? args.dir : "ltr",
+		placement: args.placement,
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0,
+		form: typeof args.form === "string" && args.form.length > 0 ? args.form : void 0,
+		clearTriggerLabel: typeof args.clearTriggerLabel === "string" && args.clearTriggerLabel.length > 0 ? args.clearTriggerLabel : void 0
+	};
+}
+const selectLabel = (ctx) => {
+	if (ctx.value.length === 0) return "";
+	if (!ctx.multiple) return ctx.labels[ctx.value[0]] ?? "";
+	return ctx.value.map((value) => ctx.labels[value] ?? value).join(", ");
+};
+const inCollection = (ctx, value) => value !== null && ctx.order.includes(value);
+export { inCollection, initial, rowsOf, selectLabel };
+
+//# sourceMappingURL=select.state.js.map

package/dist/select/select.transitions.d.ts

@@ -0,0 +1,15 @@
+import { SelectContext } from "./select.state.js";
+import { SelectEvents } from "./select.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type SelectAssign<K extends keyof SelectEvents = keyof SelectEvents> = AssignFor<SelectContext, SelectEvents, K>;
+declare const setHighlighted: SelectAssign<"HIGHLIGHTED_VALUE.SET" | "ITEM.POINTER_MOVE">;
+declare const clearHighlighted: () => Partial<SelectContext>;
+declare const clearValue: () => Partial<SelectContext>;
+declare const selectClicked: SelectAssign<"ITEM.CLICK">;
+declare const highlightFirstOrSelected: (ctx: SelectContext) => Partial<SelectContext>;
+declare const highlightFirst: (ctx: SelectContext) => Partial<SelectContext>;
+declare const highlightLast: (ctx: SelectContext) => Partial<SelectContext>;
+declare const single: GuardFor<SelectContext, SelectEvents>;
+declare const restoreFocus: GuardFor<SelectContext, SelectEvents>;
+export { type SelectAssign, clearHighlighted, clearValue, highlightFirst, highlightFirstOrSelected, highlightLast, restoreFocus, selectClicked, setHighlighted, single };
+//# sourceMappingURL=select.transitions.d.ts.map