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

package/dist/menu/menu.machine.js

@@ -0,0 +1,148 @@
+import { initial } from "./menu.state.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/menu/menu.machine.ts
+const clearAnchor = () => {
+	return { anchorPoint: null };
+};
+const clearAll = () => {
+	return {
+		highlightedValue: null,
+		openSubmenu: null,
+		anchorPoint: null
+	};
+};
+/**
+* Menu machine: open/closed, plus where the highlight sits.
+*
+* The machine this replaces has six states, and the interesting fact is
+* what they are: `opening`, `opening:contextmenu` and `closing` are not
+* structure — they exist to hold a timer (hover-intent delay, long-press,
+* close delay). In this architecture timers are reflexes, so they leave:
+* `use:hover-intent` and `use:long-press` are actions on the trigger that
+* send OPEN when the delay elapses, and the machine has no transitional
+* states at all.
+*
+* A submenu is not a second machine — `openSubmenu` names the parent row
+* whose level is showing, and the highlight roams both levels in one
+* field. The child's highlight keeps the level open; the parent's closes
+* it. This is why a flat fork covers a menu: there is no genuine
+* hierarchy to model, only one open level at a time.
+*
+* Context-menu anchoring (`anchorPoint`) stays: it is input, like a
+* click coordinate, not state that transitions.
+*/
+const config = {
+	id: "menu",
+	initial: "closed",
+	context: {
+		highlightedValue: null,
+		openSubmenu: null,
+		anchorPoint: null,
+		loopFocus: false,
+		closeOnSelect: false,
+		typeahead: true,
+		composite: true,
+		entries: []
+	},
+	states: {
+		closed: { on: {
+			OPEN: {
+				target: "open",
+				assign: clearAnchor
+			},
+			CONTROLLED_OPEN: {
+				target: "open",
+				assign: clearAnchor
+			},
+			TRIGGER_CLICK: {
+				target: "open",
+				assign: clearAnchor
+			},
+			"ENTRIES.SET": { assign: (ctx, event) => {
+				return sameEntries(ctx.entries, event.entries) ? {} : { entries: event.entries };
+			} },
+			CONTEXT_MENU: {
+				target: "open",
+				assign: (_ctx, e) => {
+					return e.type === "CONTEXT_MENU" ? {
+						anchorPoint: e.point,
+						highlightedValue: null
+					} : {};
+				}
+			}
+		} },
+		open: { on: {
+			CLOSE: {
+				target: "closed",
+				assign: clearAll
+			},
+			CONTROLLED_CLOSE: {
+				target: "closed",
+				assign: clearAll
+			},
+			HIGHLIGHT: { assign: (ctx, e) => {
+				return e.type === "HIGHLIGHT" && e.value !== ctx.highlightedValue ? {
+					highlightedValue: e.value,
+					openSubmenu: null
+				} : {};
+			} },
+			SUBMENU_HIGHLIGHT: { assign: (ctx, e) => {
+				return e.type === "SUBMENU_HIGHLIGHT" && e.value !== ctx.highlightedValue ? { highlightedValue: e.value } : {};
+			} },
+			"ENTRIES.SET": { assign: (ctx, event) => {
+				return sameEntries(ctx.entries, event.entries) ? {} : { entries: event.entries };
+			} },
+			SUBMENU_OPEN: { assign: (ctx, e) => {
+				return e.type === "SUBMENU_OPEN" ? {
+					openSubmenu: e.value,
+					highlightedValue: e.value
+				} : { openSubmenu: ctx.openSubmenu };
+			} },
+			SUBMENU_CLOSE: { assign: () => {
+				return { openSubmenu: null };
+			} },
+			ITEM_CLICK: { assign: [() => {
+				return {};
+			}, clearAll] }
+		} }
+	}
+};
+function sameEntries(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((entry, index) => {
+		const other = b[index];
+		if (other === void 0) return false;
+		const sep = (candidate) => "separator" in candidate && candidate.separator === true;
+		if (sep(entry) || sep(other)) return sep(entry) === sep(other);
+		if ("group" in entry || "group" in other) {
+			if (!("group" in entry) || !("group" in other)) return false;
+			if (entry.group !== other.group) return false;
+			return sameEntries(entry.items, other.items);
+		}
+		if (!("value" in entry) || !("value" in other)) return false;
+		if (entry.value !== other.value || entry.label !== other.label) return false;
+		if (entry.shortcut !== other.shortcut) return false;
+		if (entry.disabled !== other.disabled) return false;
+		if (entry.checked !== other.checked) return false;
+		return sameEntries(entry.children ?? [], other.children ?? []);
+	});
+}
+function menu(args = {}, authored) {
+	return createMachine({
+		...config,
+		context: initial(args, authored),
+		/**
+		* The `open` prop is NOT here: it drives the machine's STATE, not a
+		* context field, so the element's reconcile keeps it in step.
+		*
+		* `items` IS here, though no context field reads it: the field list is
+		* what declares the element's props, and a host-written `items` that
+		* the element never declared lands as a dead own-property instead of
+		* reaching reconcile's ENTRIES.SET.
+		*/
+		fields: { items: {} }
+	});
+}
+export { menu };
+
+//# sourceMappingURL=menu.machine.js.map

package/dist/menu/menu.presentation.d.ts

@@ -0,0 +1,252 @@
+import { MenuArgs, MenuBlock, MenuContext, MenuRow, MenuState } from "./menu.state.js";
+import { MenuEvents } from "./menu.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/**
+ * Menu bindings: the DOM contract as data. The machine owns open/closed,
+ * the highlight, the anchor point and the open submenu on this level; this
+ * file maps transport inputs to the machine's arguments, rows to attribute
+ * bags, and commands to sends. Navigation computes its target against
+ * context rows and sends it in — the machine never walks data.
+ *
+ * A submenu level renders inline in the parent's recipe, gated on the
+ * `openSubmenu` reader: one machine owns both levels, and the child's rows
+ * highlight without collapsing the level that holds them.
+ */
+type ScopeLike = ViewFor<MenuContext, MenuEvents, MenuState>;
+type SlotLike<R> = SlotViewFor<R, MenuContext, MenuEvents, MenuState>;
+export declare const def: {
+  name: string;
+  machine: (args: MenuArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<MenuContext, MenuEvents, MenuState>;
+  start: (props: Record<string, unknown>, authored: (name: string) => boolean) => "open" | "closed";
+  reconcile: ({ state, parsed, authored, send }: {
+    readonly context: MenuContext;
+    readonly state: MenuState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    trigger: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+        onClick: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        type: string;
+        id: string;
+      };
+    };
+    triggerIndicator: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+      };
+    };
+    contextTrigger: {
+      attrs: (scope: ScopeLike) => {
+        onContextMenu: (event: MouseEvent) => void;
+        "use:long-press": {
+          delay: number;
+          onPress: (point: {
+            x: number;
+            y: number;
+          }) => void;
+        };
+      };
+    };
+    positioner: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        "data-state": string;
+        hidden: boolean | undefined;
+        "use:anchor": {
+          placement: string;
+          offset: number;
+        };
+      };
+    };
+    content: {
+      attrs: (scope: ScopeLike) => {
+        "data-state": string;
+        onKeydown: (event: KeyboardEvent) => void;
+        "use:dismissable": {
+          excludeId: string;
+          onOutside: () => void;
+          onEscape: () => void;
+        };
+        id: string;
+        role: string;
+        tabindex: number;
+      };
+    };
+  };
+  slots: {
+    itemGroup: {
+      id: string;
+      indexes: (context: MenuContext) => readonly MenuBlock[];
+      attrs: (scope: SlotLike<MenuBlock>) => {
+        id: string;
+        role: string;
+      };
+    };
+    itemGroupLabel: {
+      id: string;
+      indexes: (context: MenuContext) => readonly MenuBlock[];
+      attrs: (scope: SlotLike<MenuBlock>) => {
+        id: string;
+        hidden: boolean;
+      };
+    };
+    item: {
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => Record<string, unknown>;
+    };
+    itemText: {
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: () => {};
+    };
+    itemIndicator: {
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => {
+        "data-checked": string | undefined;
+      };
+    };
+    itemShortcut: {
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => {
+        hidden: boolean;
+      };
+    };
+    itemSubmenuIndicator: {
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => {
+        "data-state": string;
+        hidden: boolean;
+      };
+    };
+    separator: {
+      indexes: (context: MenuContext) => readonly MenuBlock[];
+      attrs: (scope: SlotLike<MenuBlock>) => {
+        hidden: boolean;
+        role: string;
+      };
+    };
+    submenuContent: {
+      id: string;
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => {
+        "data-state": string;
+        class: string;
+        "use:hover-delay": {
+          closeDelay: number;
+          onClose: () => void;
+        };
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        tabindex: number;
+      };
+    };
+    submenuItem: {
+      id: string;
+      indexes: (context: MenuContext) => MenuRow[];
+      attrs: (scope: SlotLike<MenuRow>) => {
+        onPointerMove: (event: PointerEvent) => void;
+        onClick: (event: MouseEvent) => void;
+        "data-highlighted"?: string | undefined;
+        "data-disabled"?: string | undefined;
+        id: string;
+        role: string;
+      };
+    };
+  };
+  commands: {
+    open: {
+      event: () => {
+        type: "OPEN";
+      };
+    };
+    close: {
+      event: () => {
+        type: "CLOSE";
+      };
+    };
+    setHighlighted: {
+      event: ([value]: [value: string | null]) => {
+        type: "HIGHLIGHT";
+        value: string | null;
+      };
+    };
+  };
+  readers: {
+    isOpen: {
+      read: (_context: MenuContext, state: MenuState) => state is "open";
+    };
+    highlightedValue: {
+      read: (context: MenuContext) => string | null;
+    };
+    openSubmenu: {
+      read: (context: MenuContext) => string | null;
+    };
+  };
+  methods: {
+    getBlocks: {
+      call: (context: MenuContext) => readonly MenuBlock[];
+    };
+    getRows: {
+      call: (_context: MenuContext, _state: MenuState, [block]: [block: MenuBlock]) => readonly MenuRow[];
+    };
+    getSubmenuBlocks: {
+      call: (_context: MenuContext, _state: MenuState, [row]: [row: MenuRow]) => readonly MenuBlock[];
+    };
+  };
+  events: {
+    "open-change": {
+      prop: string;
+      watch: (_context: MenuContext, state: MenuState) => boolean[];
+      detail: (watched: readonly [boolean]) => {
+        open: boolean;
+      };
+    };
+    select: {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly [string]) => {
+        value: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>) => {
+        value: string;
+      } | null;
+    };
+    "highlight-change": {
+      prop: string;
+      watch: (context: MenuContext) => (string | null)[];
+      detail: (watched: readonly [string | null]) => {
+        highlightedValue: string | null;
+      };
+    };
+  };
+  settled: ({ event, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: MenuContext;
+      readonly state: MenuState;
+    };
+    readonly after: {
+      readonly context: MenuContext;
+      readonly state: MenuState;
+    };
+    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;
+};
+export type MenuApi = ApiOf<typeof def>;
+export declare const menu: import("@spinjs/runtime").DefinedComponent<MenuApi, MenuArgs>;
+export {};
+//# sourceMappingURL=menu.presentation.d.ts.map