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

package/dist/combobox/combobox.machine.js

@@ -0,0 +1,234 @@
+import { initial, isCustomValue, parseItems, parseKeys, pickOutcome, stringifyValues } from "./combobox.state.js";
+import { clearHighlightedValue, clearInputValue, clearValue, closeOnSelect, highlightFirstItem, highlightFirstOrSelectedItem, inlineAutocomplete, isCustomValueGuard, moveHighlight, revertInputValue, revertsToValue, selectHighlightedItem, selectItem, setHighlightedValue, setInputValue } from "./combobox.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/combobox/combobox.machine.ts
+const at = (list, index) => list.at(index) ?? null;
+const isOpenPhase = (phase) => phase === "interacting" || phase === "suggesting";
+function combobox(args = {}, authored) {
+	return createMachine({
+		id: "combobox",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			items: { parse: parseItems },
+			closeOnSelect: {},
+			allowCustomValue: {},
+			inputBehavior: {},
+			selectionBehavior: {},
+			openOnChange: {},
+			openOnKeyPress: {},
+			alwaysSubmitOnEnter: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			required: {},
+			composite: {},
+			placement: {},
+			name: {},
+			form: {},
+			placeholder: {},
+			triggerLabel: {},
+			clearTriggerLabel: {},
+			openOnClick: {},
+			loopFocus: {}
+		},
+		on: {
+			"SELECTED_ITEMS.SYNC": { assign: (ctx) => ({
+				inputValue: ctx.selectionBehavior === "preserve" ? ctx.inputValue : ctx.selectionBehavior === "clear" ? "" : ctx.value.map((v) => ctx.labels[v]).filter((l) => l !== void 0).join(", "),
+				autofill: null
+			}) },
+			"HIGHLIGHTED_VALUE.SET": { assign: setHighlightedValue },
+			"HIGHLIGHTED_VALUE.CLEAR": { assign: clearHighlightedValue },
+			"ITEM.SELECT": { assign: selectItem },
+			"ITEM.CLEAR": { assign: (ctx, e) => ({
+				value: ctx.value.filter((value) => value !== e.value),
+				inputValue: ctx.selectionBehavior === "preserve" ? ctx.inputValue : ctx.selectionBehavior === "clear" ? "" : ctx.value.filter((value) => value !== e.value).map((v) => ctx.labels[v]).filter((l) => l !== void 0).join(", "),
+				autofill: null
+			}) },
+			"VALUE.SET": { assign: (ctx, e) => ({
+				value: [...parseKeys(e.value)],
+				inputValue: ctx.selectionBehavior === "preserve" ? ctx.inputValue : ctx.selectionBehavior === "clear" ? "" : parseKeys(e.value).map((v) => ctx.labels[v]).filter((l) => l !== void 0).join(", "),
+				autofill: null
+			}) },
+			"INPUT_VALUE.SET": { assign: setInputValue },
+			OPEN: { target: "interacting" },
+			CLOSE: { target: "focused" },
+			"VALUE.CLEAR": {
+				target: "focused",
+				assign: [clearInputValue, clearValue]
+			},
+			"INPUT.ESCAPE": [{
+				cond: revertsToValue,
+				assign: revertInputValue
+			}],
+			"INPUT.ENTER": [
+				{
+					cond: revertsToValue,
+					target: "focused",
+					assign: revertInputValue
+				},
+				{
+					cond: closeOnSelect,
+					target: "focused",
+					assign: selectHighlightedItem
+				},
+				{ assign: selectHighlightedItem }
+			],
+			"ITEM.CLICK": [{
+				cond: closeOnSelect,
+				target: "focused",
+				assign: selectItem
+			}, { assign: selectItem }],
+			"TRIGGER.CLICK": { target: "focused" },
+			"LAYER.INTERACT_OUTSIDE": [{
+				cond: (ctx, event) => isCustomValueGuard(ctx, event),
+				target: "idle",
+				assign: revertInputValue
+			}, { target: "idle" }]
+		},
+		states: {
+			idle: {
+				entry: [{ assign: clearHighlightedValue }],
+				on: {
+					"INPUT.FOCUS": { target: "focused" },
+					"TRIGGER.CLICK": {
+						target: "interacting",
+						assign: highlightFirstOrSelectedItem
+					},
+					"INPUT.CLICK": {
+						target: "interacting",
+						assign: highlightFirstOrSelectedItem
+					},
+					"INPUT.ENTER": {},
+					"ITEM.CLICK": {}
+				}
+			},
+			focused: {
+				entry: [{ assign: clearHighlightedValue }],
+				on: {
+					"INPUT.BLUR": { target: "idle" },
+					"INPUT.CHANGE": [{
+						cond: (ctx) => ctx.openOnChange,
+						target: "suggesting",
+						assign: [setInputValue, (ctx) => ctx.inputBehavior !== "autohighlight" || ctx.order.length === 0 ? {} : {
+							highlightedValue: at(ctx.order, 0),
+							autofill: null
+						}]
+					}, { assign: setInputValue }],
+					"INPUT.ESCAPE": [{
+						cond: revertsToValue,
+						assign: revertInputValue
+					}],
+					"INPUT.CLICK": {
+						target: "interacting",
+						assign: highlightFirstOrSelectedItem
+					},
+					"TRIGGER.CLICK": {
+						target: "interacting",
+						assign: highlightFirstOrSelectedItem
+					},
+					"INPUT.ARROW_DOWN": [{
+						cond: inlineAutocomplete,
+						target: "interacting"
+					}, {
+						target: "interacting",
+						assign: highlightFirstOrSelectedItem
+					}],
+					"INPUT.ARROW_UP": [{
+						cond: inlineAutocomplete,
+						target: "interacting"
+					}, {
+						target: "interacting",
+						assign: (ctx) => {
+							const selected = ctx.order.filter((value) => ctx.value.includes(value));
+							const value = selected.length > 0 ? at(selected, 0) : at(ctx.order, -1);
+							if (value === null) return {};
+							return {
+								highlightedValue: value,
+								autofill: null
+							};
+						}
+					}],
+					"LAYER.INTERACT_OUTSIDE": { target: "idle" },
+					"LAYER.ESCAPE": { target: "idle" },
+					"VALUE.CLEAR": { assign: [clearInputValue, clearValue] },
+					"INPUT.ENTER": {},
+					"ITEM.CLICK": {}
+				}
+			},
+			interacting: { on: {
+				"CHILDREN_CHANGE": { assign: (ctx) => ctx.highlightedValue !== null && !ctx.order.includes(ctx.highlightedValue) ? {
+					highlightedValue: null,
+					autofill: null
+				} : {} },
+				"INPUT.HOME": { assign: moveHighlight },
+				"INPUT.END": { assign: moveHighlight },
+				"INPUT.ARROW_DOWN": [{
+					cond: (ctx) => inlineAutocomplete(ctx) && ctx.highlightedValue === at(ctx.order, -1),
+					assign: clearHighlightedValue
+				}, { assign: moveHighlight }],
+				"INPUT.ARROW_UP": [{
+					cond: (ctx) => inlineAutocomplete(ctx) && ctx.highlightedValue === at(ctx.order, 0),
+					assign: clearHighlightedValue
+				}, { assign: moveHighlight }],
+				"INPUT.CHANGE": [{
+					cond: inlineAutocomplete,
+					target: "suggesting",
+					assign: setInputValue
+				}, {
+					target: "suggesting",
+					assign: [setInputValue, clearHighlightedValue]
+				}],
+				"ITEM.POINTER_MOVE": { assign: setHighlightedValue },
+				"ITEM.POINTER_LEAVE": { assign: clearHighlightedValue },
+				"LAYER.ESCAPE": [{
+					cond: inlineAutocomplete,
+					assign: clearHighlightedValue
+				}, { target: "focused" }]
+			} },
+			suggesting: { on: {
+				"CHILDREN_CHANGE": [
+					{
+						cond: (ctx) => ctx.inputBehavior === "autohighlight" && ctx.highlightedValue !== null && !ctx.order.includes(ctx.highlightedValue) && ctx.order.length > 0,
+						assign: [clearHighlightedValue, highlightFirstItem]
+					},
+					{
+						cond: (ctx) => ctx.highlightedValue !== null && !ctx.order.includes(ctx.highlightedValue),
+						assign: clearHighlightedValue
+					},
+					{
+						cond: (ctx) => ctx.inputBehavior === "autohighlight",
+						assign: highlightFirstItem
+					}
+				],
+				"INPUT.ARROW_DOWN": {
+					target: "interacting",
+					assign: moveHighlight
+				},
+				"INPUT.ARROW_UP": {
+					target: "interacting",
+					assign: moveHighlight
+				},
+				"INPUT.HOME": {
+					target: "interacting",
+					assign: moveHighlight
+				},
+				"INPUT.END": {
+					target: "interacting",
+					assign: moveHighlight
+				},
+				"INPUT.CHANGE": { assign: setInputValue },
+				"ITEM.POINTER_MOVE": {
+					target: "interacting",
+					assign: setHighlightedValue
+				},
+				"ITEM.POINTER_LEAVE": { assign: clearHighlightedValue },
+				"LAYER.ESCAPE": { target: "focused" }
+			} }
+		}
+	});
+}
+export { combobox, isCustomValue, isOpenPhase, pickOutcome, stringifyValues };
+
+//# sourceMappingURL=combobox.machine.js.map

package/dist/combobox/combobox.presentation.d.ts

@@ -0,0 +1,433 @@
+import { ComboboxEvents } from "./combobox.events.js";
+import { ComboboxArgs, ComboboxContext, ComboboxRow, ComboboxState } from "./combobox.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/**
+ * Combobox definition: the DOM contract as data. The collection parses
+ * once per prop identity: row objects are stable, so the `for` bindings
+ * never re-stamp.
+ */
+export interface ComboboxItem {
+  readonly value: string;
+  readonly label?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly group?: string | undefined;
+  readonly meta?: Readonly<Record<string, string>> | undefined;
+}
+export interface ComboboxBlock {
+  readonly id: string;
+  readonly label: string | null;
+  readonly rows: readonly ComboboxRow[];
+}
+/** Zag's `getItemState`, verbatim in shape: what one option is worth. */
+export interface ComboboxItemState {
+  readonly value: string;
+  readonly disabled: boolean;
+  readonly highlighted: boolean;
+  readonly selected: boolean;
+}
+export interface ComboboxValueChange {
+  readonly value: string[];
+  readonly items: readonly ComboboxRow[];
+}
+export interface ComboboxHighlightChange {
+  readonly highlightedValue: string | null;
+  readonly highlightedItem: ComboboxRow | null;
+}
+export interface ComboboxInputValueChange {
+  readonly inputValue: string;
+  readonly reason: string;
+}
+export interface ComboboxOpenChange {
+  readonly open: boolean;
+  readonly reason: string;
+  readonly value: string[];
+}
+export interface ComboboxSelect {
+  readonly value: string[];
+  readonly itemValue: string;
+}
+type ScopeLike = ViewFor<ComboboxContext, ComboboxEvents, ComboboxState>;
+type SlotLike<R> = SlotViewFor<R, ComboboxContext, ComboboxEvents, ComboboxState>;
+/** The component's public state: the names the markup may key on. */
+export declare const def: {
+  name: string;
+  machine: (props: ComboboxArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ComboboxContext, ComboboxEvents, ComboboxState>;
+  start: (props: Record<string, unknown>) => "idle" | "suggesting";
+  establish: (raw: Record<string, unknown>, authored: (name: string) => boolean) => {
+    type: string;
+    value: string;
+  }[];
+  reconcile: ({ context, state, parsed, authored, send }: {
+    readonly context: ComboboxContext;
+    readonly state: ComboboxState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  settled: ({ event, before, after, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: ComboboxContext;
+      readonly state: ComboboxState;
+    };
+    readonly after: {
+      readonly context: ComboboxContext;
+      readonly state: ComboboxState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        "data-phase": ComboboxState;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        "use:dismissable": {
+          onEscape: () => void;
+          onOutside: () => void;
+        };
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        htmlFor: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        "data-invalid": string | undefined;
+        "data-required": string | undefined;
+        onClick: () => void;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+        "data-disabled": string | undefined;
+      };
+    };
+    positioner: {
+      attrs: (scope: ScopeLike) => {
+        hidden: boolean;
+        "data-state": string;
+        "data-placement": string;
+        "data-side": string;
+      };
+    };
+    input: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+        "data-disabled": string | undefined;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: (event: MouseEvent) => void;
+        onInput: (event: {
+          readonly currentTarget: {
+            readonly value: string;
+          };
+        }) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        dir: "ltr" | "rtl";
+        type: string;
+        role: string;
+        name: string;
+        form: string;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+        placeholder: string;
+        autoComplete: string;
+        autoCorrect: string;
+        autoCapitalize: string;
+        spellCheck: boolean;
+        value: string;
+      };
+    };
+    trigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ComboboxContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ComboboxEvents>, ComboboxState>, arg: unknown) => {
+        "aria-label": string;
+        disabled: boolean;
+        tabIndex: number | undefined;
+        "data-state": string;
+        "data-focusable": string | undefined;
+        "data-disabled": string | undefined;
+        onFocus: () => void;
+        onClick: (event: MouseEvent) => void;
+        onPointerDown: (event: PointerEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        type: string;
+      };
+    };
+    triggerIndicator: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+      };
+    };
+    clearTrigger: {
+      attrs: (scope: ScopeLike) => {
+        disabled: boolean;
+        tabIndex: number;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        hidden: boolean;
+        onPointerDown: (event: PointerEvent) => void;
+        onClick: (event: MouseEvent) => void;
+        id: string;
+        type: string;
+        "aria-label": string;
+      };
+    };
+    content: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+        "data-placement": string;
+        "data-side": string;
+        "data-empty": string | undefined;
+        "data-disabled": string | undefined;
+        onPointerDown: (event: PointerEvent) => void;
+        "use:scroll-into-view": {
+          activeId: () => string;
+        };
+        dir: "ltr" | "rtl";
+        role: string;
+        tabIndex: number;
+      };
+    };
+    list: {
+      attrs: (scope: ScopeLike) => {
+        "data-empty": string | undefined;
+        role: string | undefined;
+      };
+    };
+  };
+  slots: {
+    item: {
+      id: string;
+      indexes: (context: ComboboxContext) => readonly ComboboxRow[];
+      attrs: (scope: SlotLike<ComboboxRow>) => {
+        onPointerMove: (event: PointerEvent) => void;
+        onPointerLeave: () => void;
+        onClick: (event: MouseEvent) => void;
+        "data-highlighted": string | undefined;
+        "data-selected": string | undefined;
+        "data-disabled": string | undefined;
+        id: string;
+        role: string;
+        tabIndex: number;
+        "data-value": string;
+      };
+    };
+    itemText: {
+      indexes: (context: ComboboxContext) => readonly ComboboxRow[];
+      attrs: (scope: SlotLike<ComboboxRow>) => {
+        "data-selected": string | undefined;
+        "data-highlighted": string | undefined;
+        "data-disabled": string | undefined;
+      };
+    };
+    itemIndicator: {
+      indexes: (context: ComboboxContext) => readonly ComboboxRow[];
+      attrs: (scope: SlotLike<ComboboxRow>) => {
+        "data-selected": string | undefined;
+        hidden: boolean;
+      };
+    };
+    itemGroup: {
+      id: string;
+      indexes: (context: ComboboxContext) => readonly ComboboxBlock[];
+      attrs: (scope: SlotLike<ComboboxBlock>) => {
+        "data-empty": string | undefined;
+        id: string;
+        role: string;
+      };
+    };
+    itemGroupLabel: {
+      id: string;
+      indexes: (context: ComboboxContext) => readonly ComboboxBlock[];
+      attrs: (scope: SlotLike<ComboboxBlock>) => {
+        id: string;
+        role: string;
+        hidden: boolean;
+      };
+    };
+  };
+  commands: {
+    syncSelectedItems: {
+      event: () => {
+        type: "SELECTED_ITEMS.SYNC";
+      };
+    };
+    setHighlightValue: {
+      event: (args: readonly unknown[]) => {
+        type: "HIGHLIGHTED_VALUE.SET";
+        value: string | null;
+      };
+    };
+    clearHighlightValue: {
+      event: () => {
+        type: "HIGHLIGHTED_VALUE.CLEAR";
+      };
+    };
+    selectValue: {
+      event: (args: readonly unknown[]) => {
+        type: "ITEM.SELECT";
+        value: string;
+      };
+    };
+    setValue: {
+      event: (args: readonly unknown[]) => {
+        type: "VALUE.SET";
+        value: string[];
+      };
+    };
+    setInputValue: {
+      event: (args: readonly unknown[]) => {
+        type: "INPUT_VALUE.SET";
+        value: string;
+      };
+    };
+    clearValue: {
+      event: (args: readonly unknown[]) => {
+        type: "ITEM.CLEAR";
+        value: string;
+      } | {
+        type: "VALUE.CLEAR";
+      };
+    };
+    focus: {
+      view: ({ focus }: {
+        readonly args: readonly unknown[];
+        readonly id: (part: string, slot?: unknown) => string;
+        readonly focus: (part: string, slot?: unknown) => void;
+        readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+        readonly root: () => Element;
+      }) => void;
+    };
+    setOpen: {
+      event: ([open]: [open: boolean]) => {
+        type: "OPEN" | "CLOSE";
+      };
+    };
+  };
+  readers: {
+    open: {
+      read: (_context: ComboboxContext, state: ComboboxState) => boolean;
+    };
+    focused: {
+      read: (_context: ComboboxContext, state: ComboboxState) => state is "focused" | "interacting" | "suggesting";
+    };
+    inputValue: {
+      read: (context: ComboboxContext) => string;
+    };
+    highlightedValue: {
+      read: (context: ComboboxContext) => string | null;
+    };
+    highlightedItem: {
+      read: (context: ComboboxContext) => ComboboxRow | null;
+    };
+    value: {
+      read: (context: ComboboxContext) => string[];
+    };
+    valueAsString: {
+      read: (context: ComboboxContext) => string;
+    };
+    hasSelectedItems: {
+      read: (context: ComboboxContext) => boolean;
+    };
+    selectedItems: {
+      read: (context: ComboboxContext) => ComboboxRow[];
+    };
+    multiple: {
+      read: (context: ComboboxContext) => boolean;
+    };
+    invalid: {
+      read: (context: ComboboxContext) => boolean;
+    };
+    disabled: {
+      read: (context: ComboboxContext) => boolean;
+    };
+    empty: {
+      read: (context: ComboboxContext) => boolean;
+    };
+  };
+  methods: {
+    getBlocks: {
+      call: (context: ComboboxContext) => readonly ComboboxBlock[];
+    };
+    getRows: {
+      call: (_context: ComboboxContext, _state: ComboboxState, args: readonly unknown[]) => ComboboxRow[];
+    };
+    getItemState: {
+      call: (context: ComboboxContext, _state: ComboboxState, [row]: [row: ComboboxRow]) => ComboboxItemState;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: ComboboxContext) => string[];
+      detail: (watched: readonly string[], _event: {
+        readonly type: string;
+      } | undefined, props: Record<string, unknown> | undefined) => {
+        value: string[];
+        items: ComboboxRow[];
+      };
+    };
+    "highlight-change": {
+      prop: string;
+      watch: (context: ComboboxContext) => (string | null)[];
+      detail: (watched: readonly [string | null], _event: {
+        readonly type: string;
+      } | undefined, props: Record<string, unknown> | undefined) => {
+        highlightedValue: string | null;
+        highlightedItem: ComboboxRow | null;
+      };
+    };
+    "input-value-change": {
+      prop: string;
+      watch: (context: ComboboxContext) => string[];
+      detail: (watched: readonly [string], event: {
+        readonly type: string;
+      } | undefined) => {
+        inputValue: string;
+        reason: string;
+      };
+    };
+    "open-change": {
+      prop: string;
+      watch: (_context: ComboboxContext, state: ComboboxState) => boolean[];
+      detail: (watched: readonly [boolean], event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: ComboboxContext | undefined) => {
+        open: boolean;
+        reason: string;
+        value: string[];
+      };
+    };
+    select: {
+      prop: string;
+      watch: (context: ComboboxContext) => string[];
+      detail: (watched: readonly string[]) => {
+        value: string[];
+        itemValue: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, before: ComboboxContext, after: ComboboxContext) => {
+        value: string[];
+        itemValue: string;
+      } | null;
+    };
+  };
+};
+export type ComboboxApi = ApiOf<typeof def>;
+export declare const combobox: import("@spinjs/runtime").DefinedComponent<ComboboxApi, ComboboxArgs>;
+export type { ComboboxArgs, ComboboxRow };
+//# sourceMappingURL=combobox.presentation.d.ts.map