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

package/dist/listbox/listbox.presentation.js

@@ -0,0 +1,493 @@
+import { listbox as listbox$1 } from "./listbox.machine.js";
+import { ariaHidden, ariaLabelledBy, defineComponent, isComposing, listSurface, optionRow } from "@spinjs/runtime";
+// src/listbox/listbox.presentation.ts
+const toRow = (item) => {
+	if (typeof item.value !== "string" || item.value.length === 0) return 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
+	};
+};
+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));
+};
+/** Rows memoized on the items' identity: the slot bag memo keys on the
+* row object, so a fresh copy per read would strand the cache and
+* re-attach every row handler on every tick. */
+const rowsByItems = /* @__PURE__ */ new WeakMap();
+const rowsOf = (context) => {
+	const hit = rowsByItems.get(context.items);
+	if (hit !== void 0) return hit;
+	const built = parseItems(context.items);
+	rowsByItems.set(context.items, built);
+	return built;
+};
+const orderOf = (context) => rowsOf(context).map((row) => row.value);
+const labelsOf = (context) => Object.fromEntries(rowsOf(context).map((row) => [row.value, row.label]));
+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 = null;
+	for (const row of rows) {
+		if (row.group !== previous) {
+			flush();
+			label = row.group.length === 0 ? null : row.group;
+			previous = row.group;
+		}
+		group.push(row);
+	}
+	flush();
+	blocksCache.set(rows, built);
+	return built;
+};
+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) 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) return;
+			if (row.disabled) return;
+			scope.send({ type: "ITEM.POINTER_LEAVE" });
+		},
+		onClick: (event) => {
+			if (event.defaultPrevented) return;
+			if (scope.context.disabled) return;
+			if (row.disabled) return;
+			if (event.button !== 0 || event.altKey) return;
+			const anchor = scope.context.highlightedValue;
+			scope.send({
+				type: "ITEM.CLICK",
+				value: row.value,
+				...event.shiftKey ? { shiftKey: true } : {},
+				...event.metaKey || event.ctrlKey ? { metaKey: true } : {},
+				...anchor === null ? {} : { anchorValue: anchor }
+			});
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+const itemStateOf = (scope, row) => ({
+	value: row.value,
+	disabled: scope.context.disabled || row.disabled,
+	highlighted: scope.context.highlightedValue === row.value,
+	selected: scope.context.value.includes(row.value)
+});
+const step = (scope, delta) => {
+	const list = rowsOf(scope.context);
+	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;
+};
+const highlightStep = (order, disabled, highlighted, delta, loop) => {
+	if (order.length === 0) return null;
+	const enabled = (value) => !disabled.includes(value);
+	if (highlighted === null) {
+		const row = delta > 0 ? order[0] : order[order.length - 1];
+		return row === void 0 ? null : row;
+	}
+	const at = order.findIndex((value) => value === highlighted);
+	const start = at === -1 ? 0 : at;
+	for (let index = start + delta; index >= 0 && index < order.length; index += delta) {
+		const value = order[index];
+		if (value !== void 0 && enabled(value)) return value;
+	}
+	if (!loop) return null;
+	const end = delta > 0 ? order[0] : order[order.length - 1];
+	return end === void 0 ? null : end;
+};
+/** The collection's extremes, disabled or not. */
+const edge = (scope, from) => {
+	const list = rowsOf(scope.context);
+	const row = from === "first" ? list[0] : list[list.length - 1];
+	return row === void 0 ? null : row.value;
+};
+const nextWalked = (scope, delta) => {
+	const value = step(scope, delta);
+	if (value !== null) return value;
+	if (!scope.context.loopFocus) return null;
+	return edge(scope, delta > 0 ? "first" : "last");
+};
+const isTypeaheadKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+const navigate = (scope, value, event) => {
+	if (value === null) return;
+	event.preventDefault();
+	const anchor = scope.context.highlightedValue;
+	scope.send({
+		type: "NAVIGATE",
+		value,
+		...event.shiftKey ? { shiftKey: true } : {},
+		...anchor === null ? {} : { anchorValue: anchor },
+		...event.ctrlKey || event.metaKey ? { metaKey: true } : {}
+	});
+};
+const rtlOf = (event) => event.target instanceof Element && event.target.ownerDocument?.defaultView?.getComputedStyle(event.target).direction === "rtl";
+const onContentKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	if (scope.context.disabled || scope.context.readOnly) return;
+	if (isComposing(event)) return;
+	if ((event.ctrlKey || event.metaKey) && event.key !== "a" && event.key !== "A") return;
+	const ctx = scope.context;
+	switch (event.key) {
+		case "ArrowDown":
+			navigate(scope, nextWalked(scope, 1), event);
+			return;
+		case "ArrowUp":
+			navigate(scope, nextWalked(scope, -1), event);
+			return;
+		case "ArrowLeft":
+		case "ArrowRight": {
+			if (scope.context.orientation !== "horizontal") return;
+			const forward = event.key === "ArrowRight" !== rtlOf(event);
+			navigate(scope, nextWalked(scope, forward ? 1 : -1), event);
+			return;
+		}
+		case "Home":
+			navigate(scope, edge(scope, "first"), event);
+			return;
+		case "End":
+			navigate(scope, edge(scope, "last"), event);
+			return;
+		case "Enter":
+		case " ": {
+			const highlighted = ctx.highlightedValue;
+			if (highlighted === null) return;
+			event.preventDefault();
+			scope.send({
+				type: "ITEM.CLICK",
+				value: highlighted
+			});
+			return;
+		}
+		case "a":
+		case "A":
+			if ((event.ctrlKey || event.metaKey) && ctx.multiple) {
+				event.preventDefault();
+				scope.send({
+					type: "VALUE.SET",
+					value: rowsOf(scope.context).filter((row) => !row.disabled).map((row) => row.value)
+				});
+			}
+			return;
+		case "Escape":
+			if (ctx.value.length > 0 && !ctx.multiple) {
+				event.preventDefault();
+				scope.send({ type: "VALUE.CLEAR" });
+			}
+			return;
+		default:
+			if (isTypeaheadKey(event)) {
+				event.preventDefault();
+				scope.send({
+					type: "CONTENT.TYPEAHEAD",
+					key: event.key
+				});
+			}
+			return;
+	}
+};
+const def = {
+	name: "listbox",
+	machine: (args, authored) => listbox$1(args, authored),
+	start: "idle",
+	reconcile: ({ context, parsed, send }) => {
+		const ctx = context;
+		const order = orderOf(ctx);
+		ctx.disabledValues = rowsOf(ctx).filter((row) => row.disabled).map((row) => row.value);
+		ctx.order = order;
+		ctx.labels = labelsOf(ctx);
+		send({ type: "SELECTED_ITEMS.SYNC" });
+		return true;
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-orientation": scope.context.orientation
+		}) },
+		label: { attrs: (scope) => ({ dir: scope.context.dir }) },
+		valueText: { id: "value-text" },
+		content: { attrs: (scope) => {
+			const ctx = scope.context;
+			const highlighted = ctx.highlightedValue;
+			const active = highlighted === null ? void 0 : scope.id("item", highlighted);
+			return {
+				role: "listbox",
+				tabindex: "0",
+				dir: scope.context.dir,
+				...listSurface(scope, {
+					activeDescendant: active === void 0 ? void 0 : { id: active },
+					multiSelectable: ctx.multiple ? "true" : void 0,
+					labelledBy: { part: "label" }
+				}),
+				"data-activedescendant": active,
+				"data-orientation": scope.context.orientation,
+				onFocus: () => scope.send({ type: "CONTENT.FOCUS" }),
+				onBlur: () => scope.send({ type: "CONTENT.BLUR" }),
+				onKeydown: (event) => onContentKeydown(scope, event),
+				"use:scroll-into-view": { activeId: () => {
+					const current = scope.context.highlightedValue;
+					if (current === null) return "";
+					return scope.id("item", current);
+				} }
+			};
+		} }
+	},
+	slots: {
+		item: {
+			id: "item",
+			indexes: (context) => rowsOf(context),
+			attrs: (scope) => {
+				const row = scope.slot;
+				const state = itemStateOf(scope, row);
+				return {
+					id: scope.id("item", row.value),
+					role: "option",
+					dir: scope.context.dir,
+					"data-value": state.value,
+					"data-highlighted": state.highlighted ? "" : void 0,
+					...optionRow({
+						selected: state.selected ? "true" : "false",
+						disabled: state.disabled ? "true" : void 0
+					}),
+					onPointermove: rowHandlers(scope, row).onPointerMove,
+					onPointerleave: rowHandlers(scope, row).onPointerLeave,
+					onClick: rowHandlers(scope, row).onClick
+				};
+			}
+		},
+		itemText: {
+			indexes: (context) => rowsOf(context),
+			attrs: (scope) => {
+				itemStateOf(scope, scope.slot);
+				return {};
+			}
+		},
+		itemIndicator: {
+			indexes: (context) => rowsOf(context),
+			attrs: (scope) => {
+				const selected = itemStateOf(scope, scope.slot).selected;
+				return {
+					...ariaHidden("true"),
+					hidden: selected ? void 0 : ""
+				};
+			}
+		},
+		itemGroup: {
+			id: "item-group",
+			indexes: (context) => blocksOf(rowsOf(context)),
+			attrs: (scope) => {
+				const block = scope.slot;
+				return {
+					id: scope.id("itemGroup", block.id),
+					role: "group",
+					dir: scope.context.dir,
+					"data-orientation": scope.context.orientation,
+					...ariaLabelledBy(scope, {
+						part: "itemGroupLabel",
+						slot: block.id
+					})
+				};
+			}
+		},
+		itemGroupLabel: {
+			id: "item-group-label",
+			indexes: (context) => blocksOf(rowsOf(context)),
+			attrs: (scope) => {
+				return {
+					id: scope.id("itemGroupLabel", scope.slot.id),
+					dir: scope.context.dir,
+					role: "presentation"
+				};
+			}
+		}
+	},
+	commands: {
+		syncSelectedItems: { event: () => ({ type: "SELECTED_ITEMS.SYNC" }) },
+		setHighlightValue: { event: ([value]) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			value
+		}) },
+		clearHighlightValue: { event: () => ({ type: "HIGHLIGHTED_VALUE.CLEAR" }) },
+		selectValue: { event: ([value]) => ({
+			type: "ITEM.SELECT",
+			value
+		}) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value: [...value]
+		}) },
+		selectAll: { event: (_args, context) => {
+			if (!context.multiple) return {
+				type: "VALUE.SET",
+				value: [...context.value]
+			};
+			return {
+				type: "VALUE.SET",
+				value: context.order.filter((value) => !context.disabledValues.includes(value))
+			};
+		} },
+		clearValue: { event: ([value]) => value === void 0 ? { type: "VALUE.CLEAR" } : {
+			type: "ITEM.CLEAR",
+			value
+		} },
+		highlightFirst: { event: (_args, context) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			value: context.order[0] ?? null
+		}) },
+		highlightLast: { event: (_args, context) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			value: context.order[context.order.length - 1] ?? null
+		}) },
+		highlightNext: { event: (_args, context) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			value: highlightStep(context.order, context.disabledValues, context.highlightedValue, 1, context.loopFocus)
+		}) },
+		highlightPrevious: { event: (_args, context) => ({
+			type: "HIGHLIGHTED_VALUE.SET",
+			value: highlightStep(context.order, context.disabledValues, context.highlightedValue, -1, context.loopFocus)
+		}) }
+	},
+	readers: {
+		focused: { read: (context) => context.focused },
+		highlightedValue: { read: (context) => context.highlightedValue },
+		highlightedItem: { read: (context) => {
+			const highlighted = context.highlightedValue;
+			if (highlighted === null) return null;
+			return rowsOf(context).find((row) => row.value === highlighted) ?? null;
+		} },
+		value: { read: (context) => [...context.value] },
+		valueAsString: { read: (context) => {
+			const rows = rowsOf(context);
+			return context.value.map((value) => rows.find((row) => row.value === value)?.label).filter((label) => label !== void 0).join(", ");
+		} },
+		hasSelectedItems: { read: (context) => context.value.length > 0 },
+		selectedItems: { read: (context) => {
+			const rows = rowsOf(context);
+			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) => rowsOf(context).length === 0 },
+		orientation: { read: (context) => context.orientation }
+	},
+	methods: {
+		getBlocks: { call: (context) => blocksOf(rowsOf(context)) },
+		getRows: { call: (_context, _state, [block]) => block.rows.filter((row) => typeof row === "object" && row !== null) },
+		getItemState: { call: (context, _state, [row]) => {
+			if (typeof row !== "object" || row === null) return {
+				value: "",
+				disabled: true,
+				highlighted: false,
+				selected: false
+			};
+			return {
+				value: row.value,
+				disabled: context.disabled || row.disabled,
+				highlighted: context.highlightedValue === row.value,
+				selected: context.value.includes(row.value)
+			};
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [...context.value],
+			detail: (watched, _event, _props, context) => {
+				const rows = rowsOf(context);
+				const value = watched.filter((v) => typeof v === "string");
+				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, context) => {
+				const ctx = context;
+				const highlighted = watched[0];
+				return {
+					highlightedValue: highlighted,
+					highlightedItem: typeof highlighted !== "string" ? null : rowsOf(ctx).find((row) => row.value === highlighted) ?? null
+				};
+			}
+		},
+		select: {
+			prop: "onSelect",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({
+				value: [...watched],
+				itemValue: ""
+			}),
+			select: (event, before, after) => {
+				if (event.type !== "ITEM.CLICK" && event.type !== "ITEM.SELECT") return null;
+				if (sameKeys(before.value, after.value)) return null;
+				const v = event["value"];
+				return {
+					value: [...after.value],
+					itemValue: typeof v === "string" ? v : ""
+				};
+			}
+		}
+	}
+};
+const sameKeys = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+const listbox = defineComponent(def);
+export { def, listbox };
+
+//# sourceMappingURL=listbox.presentation.js.map

package/dist/listbox/listbox.state.d.ts

@@ -0,0 +1,55 @@
+export interface ListboxArgsItem {
+  readonly value: string;
+  readonly label?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly group?: string | undefined;
+}
+export interface ListboxRowData {
+  value: string;
+  label: string;
+  disabled: boolean;
+  group: string;
+}
+export interface ListboxContext {
+  value: string[];
+  highlightedValue: string | null;
+  focused: boolean;
+  items: readonly ListboxArgsItem[];
+  disabled: boolean;
+  readOnly: boolean;
+  multiple: boolean;
+  selectOnHighlight: boolean;
+  loopFocus: boolean;
+  selectionBehavior: "replace" | "preserve" | "clear";
+  orientation: string;
+  dir: string;
+  order: readonly string[];
+  disabledValues: readonly string[];
+  labels: Record<string, string>;
+}
+export interface ListboxArgs {
+  items?: readonly ListboxArgsItem[];
+  value?: string | readonly string[];
+  highlightedValue?: string;
+  multiple?: boolean;
+  selectOnHighlight?: boolean;
+  loopFocus?: boolean;
+  selectionBehavior?: string;
+  defaultHighlightedValue?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  orientation?: string;
+  dir?: string;
+}
+export type ListboxState = "idle";
+declare const rowsOf: (items: unknown) => ListboxRowData[];
+/** Shape raw items the way `initial` does: arrays pass through, anything
+ * else becomes empty. Shared by `initial` and the field contract, so a
+ * host write parses exactly like the seed. */
+export declare function parseItems(raw: unknown): readonly ListboxArgsItem[];
+export declare const parseKeys: (value: unknown) => string[];
+export declare function initial(args: ListboxArgs | undefined, authored: (name: string) => boolean): ListboxContext;
+export declare const hasValue: (ctx: ListboxContext) => boolean;
+export declare const stringifyValues: (ctx: ListboxContext) => string;
+export { rowsOf };
+//# sourceMappingURL=listbox.state.d.ts.map

package/dist/listbox/listbox.state.js

@@ -0,0 +1,59 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/listbox/listbox.state.ts
+const rowsOf = (items) => {
+	const rows = [];
+	for (const entry of Array.isArray(items) ? items : []) {
+		if (typeof entry !== "object" || entry === null) continue;
+		const record = entry;
+		const value = record["value"];
+		if (typeof value !== "string" || value.length === 0) continue;
+		const label = typeof record["label"] === "string" && record["label"].length > 0 ? record["label"] : value;
+		rows.push({
+			value,
+			label,
+			disabled: record["disabled"] === true,
+			group: typeof record["group"] === "string" ? record["group"] : ""
+		});
+	}
+	return rows;
+};
+/** Shape raw items the way `initial` does: arrays pass through, anything
+* else becomes empty. Shared by `initial` and the field contract, so a
+* host write parses exactly like the seed. */
+function parseItems(raw) {
+	if (!Array.isArray(raw)) return [];
+	return raw.filter((entry) => typeof entry === "object" && entry !== null && typeof entry["value"] === "string");
+}
+const parseKeys = (value) => {
+	if (Array.isArray(value)) return value.filter((v) => typeof v === "string");
+	if (typeof value !== "string") return [];
+	return (value.startsWith("[") && value.endsWith("]") ? value.slice(1, -1) : value).split(",").map((part) => part.trim()).filter((part) => part.length > 0);
+};
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const multiple = args.multiple === true;
+	const selection = args.selectionBehavior;
+	const selectionBehavior = selection === "preserve" || selection === "clear" ? selection : multiple ? "clear" : "replace";
+	return {
+		value: parseKeys(args.value),
+		items: parseItems(args.items),
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		highlightedValue: written("highlightedValue") && typeof args.highlightedValue === "string" && args.highlightedValue.length > 0 ? args.highlightedValue : null,
+		focused: false,
+		multiple,
+		selectOnHighlight: args.selectOnHighlight === true,
+		loopFocus: args.loopFocus !== false,
+		selectionBehavior,
+		orientation: args.orientation ?? "vertical",
+		dir: args.dir ?? "ltr",
+		order: [],
+		disabledValues: [],
+		labels: {}
+	};
+}
+const hasValue = (ctx) => ctx.value.length > 0;
+const stringifyValues = (ctx) => ctx.value.join(",");
+export { hasValue, initial, parseItems, parseKeys, rowsOf, stringifyValues };
+
+//# sourceMappingURL=listbox.state.js.map

package/dist/listbox/listbox.transitions.d.ts

@@ -0,0 +1,20 @@
+import { ListboxContext } from "./listbox.state.js";
+import { ListboxEvents } from "./listbox.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type ListboxAssign<K extends keyof ListboxEvents = keyof ListboxEvents> = AssignFor<ListboxContext, ListboxEvents, K>;
+export declare const setFocused: () => Partial<ListboxContext>;
+export declare const clearHighlightedValue: () => Partial<ListboxContext>;
+export declare const setHighlightedItem: (ctx: ListboxContext, event: ListboxEvents["ITEM.CLICK"] | ListboxEvents["NAVIGATE"]) => Partial<ListboxContext>;
+export declare const syncSelectedItems: ListboxAssign<"SELECTED_ITEMS.SYNC">;
+export declare const setHighlightedValue: ListboxAssign<"HIGHLIGHTED_VALUE.SET">;
+export declare const selectItem: ListboxAssign<"ITEM.SELECT">;
+export declare const clearItem: ListboxAssign<"ITEM.CLEAR">;
+export declare const setValue: ListboxAssign<"VALUE.SET">;
+export declare const clearValue: ListboxAssign<"VALUE.CLEAR">;
+export declare const itemClickInner: ListboxAssign<"ITEM.CLICK">;
+export declare const contentFocusAssigns: (ctx: ListboxContext) => Partial<ListboxContext>[];
+export declare const typeaheadInner: ListboxAssign<"CONTENT.TYPEAHEAD">;
+export declare const pointerMove: ListboxAssign<"ITEM.POINTER_MOVE">;
+export declare const navigateInner: ListboxAssign<"NAVIGATE">;
+export {};
+//# sourceMappingURL=listbox.transitions.d.ts.map