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

package/dist/cascade-select/cascade.presentation.d.ts

@@ -0,0 +1,415 @@
+import { CascadeEvents } from "./cascade.events.js";
+import { CascadeArgs, CascadeContext, CascadeState } from "./cascade.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/**
+ * Cascade-select definition: the DOM contract as data.
+ *
+ * The visible levels are a derivation: every node along the highlighted path
+ * contributes its children as one level, so the level stack IS the
+ * highlight.
+ */
+/** A node of the host's tree: exactly what the JSON transport carries. */
+export interface CascadeNode {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean | undefined;
+  readonly children?: readonly CascadeNode[] | undefined;
+}
+/** One visible level: a parent's children, drilled in by the highlight. */
+export interface CascadeLevel {
+  readonly depth: number;
+  /** The parent's path, `[]` for the root level. */
+  readonly path: readonly string[];
+  readonly key: string;
+  readonly items: readonly CascadeItem[];
+}
+/** A row of one level. Structural data only — state is read from context. */
+export interface CascadeItem {
+  readonly key: string;
+  readonly path: readonly string[];
+  readonly value: string;
+  readonly label: string;
+  readonly disabled: boolean;
+  readonly hasChildren: boolean;
+  readonly depth: number;
+  readonly indexInLevel: number;
+  readonly indexPath: readonly number[];
+}
+/** Zag's `getItemState`: the derived row state the parts key on. */
+export interface CascadeItemState {
+  readonly value: readonly string[];
+  readonly disabled: boolean;
+  readonly highlighted: boolean;
+  readonly selected: boolean;
+  readonly hasChildren: boolean;
+  readonly depth: number;
+  readonly highlightedChild: string | undefined;
+  readonly highlightedIndex: number | undefined;
+}
+export interface CascadeValueTextRow {
+  readonly value: string;
+}
+export interface CascadeOpenChange {
+  readonly open: boolean;
+  readonly value: readonly string[][];
+}
+export interface CascadeValueChange {
+  readonly value: readonly string[][];
+  readonly items: readonly (readonly CascadeNode[])[];
+}
+export interface CascadeHighlightChange {
+  readonly highlightedValue: readonly string[];
+  readonly highlightedItems: readonly CascadeNode[];
+}
+/** The host hooks the dismissal reflex reports through. */
+export interface CascadeOutsideDetails {
+  readonly focusable: boolean;
+  readonly contextmenu: boolean;
+  readonly originalEvent: PointerEvent | FocusEvent;
+}
+export interface CascadeScrollDetails {
+  readonly index: number;
+  readonly immediate?: boolean;
+  readonly depth: number;
+}
+export type CascadeFormatValue = (items: readonly (readonly CascadeNode[])[]) => string;
+export declare const pathKey: (path: readonly string[]) => string;
+/** The collection crosses the prop channel as JSON text (the grammar has no
+ *  recursive type), so it is parsed and validated here rather than trusted
+ *  at every read. */
+export declare const parseCollection: (raw: unknown) => readonly CascadeNode[];
+export declare const nodeAtPath: (collection: readonly CascadeNode[], path: readonly string[]) => CascadeNode | undefined;
+/** The nodes along a path, one per level. */
+export declare const itemsAlongPath: (collection: readonly CascadeNode[], path: readonly string[]) => readonly CascadeNode[];
+export declare const hashValue: (value: readonly string[][]) => string;
+type ScopeLike = ViewFor<CascadeContext, CascadeEvents, CascadeState>;
+type SlotLike<R> = SlotViewFor<R, CascadeContext, CascadeEvents, CascadeState>;
+export declare const def: {
+  name: string;
+  machine: (args: CascadeArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<CascadeContext, CascadeEvents, CascadeState>;
+  settled: ({ event, before, after, focus }: {
+    readonly event: {
+      readonly type: string;
+    } & Record<string, unknown>;
+    readonly before: {
+      readonly context: CascadeContext;
+      readonly state: CascadeState;
+    };
+    readonly after: {
+      readonly context: CascadeContext;
+      readonly state: CascadeState;
+    };
+    readonly focus: (part: string, slot?: unknown) => void;
+  }) => void;
+  start: (raw: Record<string, unknown>) => "idle" | "open";
+  reconcile: ({ context, parsed, authored, send, state }: {
+    readonly context: CascadeContext;
+    readonly state: CascadeState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+        "data-invalid": string | undefined;
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        dir: "ltr" | "rtl";
+        htmlFor: string;
+        onClick: (event: MouseEvent) => void;
+        "data-state": string;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+        "data-focus": string | undefined;
+      };
+    };
+    trigger: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        disabled: boolean;
+        onClick: (event: MouseEvent) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        "data-state": string;
+        "data-placement": string;
+        "data-placeholder-shown": string | undefined;
+        "data-readonly": string | undefined;
+        "data-invalid": string | undefined;
+        type: string;
+        role: string;
+        dir: "ltr" | "rtl";
+        "data-focus": string | undefined;
+      };
+    };
+    indicator: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        "data-state": string;
+        dir: "ltr" | "rtl";
+      };
+    };
+    valueText: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+      };
+    };
+    clearTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        type: string;
+        dir: "ltr" | "rtl";
+        "aria-label": string;
+        hidden: boolean;
+        disabled: boolean;
+        onClick: (event: MouseEvent) => void;
+        "data-state": string;
+      };
+    };
+    positioner: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled"?: string | undefined;
+        dir: "ltr" | "rtl";
+        "data-placement": string;
+        "data-side": string;
+        style: {
+          minWidth: string;
+        };
+        "data-state": string;
+      };
+    };
+    content: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, CascadeContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<CascadeEvents>, CascadeState>) => {
+        "data-disabled"?: string | undefined;
+        "data-activedescendant": string | undefined;
+        hidden: boolean;
+        tabIndex: number;
+        onKeydown: (event: KeyboardEvent) => void;
+        onFocusOut: (event: FocusEvent) => void;
+        "use:dismissable": {
+          onOutside: (event: PointerEvent) => void;
+          onEscape: () => void;
+        };
+        "use:scroll-into-view": {
+          readonly activeId: () => string;
+          readonly reveal?: () => void;
+        };
+        "data-state": string;
+        role: string;
+        dir: "ltr" | "rtl";
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        value: string;
+        disabled: boolean;
+        required: boolean;
+        readOnly: boolean;
+        hidden: boolean;
+        form?: string | undefined;
+        name?: string | undefined;
+      };
+    };
+  };
+  slots: {
+    list: {
+      indexes: (context: CascadeContext) => readonly CascadeLevel[];
+      attrs: (scope: SlotLike<CascadeLevel>) => {
+        id: string;
+        dir: "ltr" | "rtl";
+        role: string;
+        "data-depth": number;
+      };
+    };
+    item: {
+      indexes: (context: CascadeContext) => CascadeItem[];
+      attrs: (scope: SlotLike<CascadeItem>) => {
+        onClick: () => void;
+        onPointerMove: (event: PointerEvent) => void;
+        onDoubleClick: () => void;
+        "data-value": string;
+        "data-disabled": string | undefined;
+        "data-highlighted": string | undefined;
+        "data-selected": string | undefined;
+        "data-depth": number;
+        "data-type": string;
+        "data-index-path": string;
+        id: string;
+        role: string;
+        dir: "ltr" | "rtl";
+      };
+    };
+    itemText: {
+      indexes: (context: CascadeContext) => CascadeItem[];
+      attrs: (scope: SlotLike<CascadeItem>) => {
+        dir: "ltr" | "rtl";
+        "data-value": string;
+        "data-highlighted": string | undefined;
+        "data-selected": string | undefined;
+        "data-disabled": string | undefined;
+      };
+    };
+    itemIndicator: {
+      indexes: (context: CascadeContext) => CascadeItem[];
+      attrs: (scope: SlotLike<CascadeItem>) => {
+        hidden: boolean;
+        "data-value": string;
+        "data-highlighted": string | undefined;
+        "data-type": string;
+        "data-selected": string | undefined;
+      };
+    };
+  };
+  commands: {
+    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: (args: readonly unknown[]) => {
+        type: "OPEN" | "CLOSE";
+      };
+    };
+    setHighlightValue: {
+      event: (args: readonly unknown[]) => {
+        type: "HIGHLIGHTED_VALUE_SET";
+        value: string[];
+      };
+    };
+    clearHighlightValue: {
+      event: () => {
+        type: "HIGHLIGHTED_VALUE_CLEAR";
+      };
+    };
+    setValue: {
+      event: ([value]: [value: readonly string[][]]) => {
+        type: "VALUE_SET";
+        value: string[][];
+      };
+    };
+    selectValue: {
+      event: (args: readonly unknown[], context: CascadeContext) => {
+        type: "ITEM_SELECT";
+        value: string[];
+        hasChildren: boolean;
+      };
+    };
+    clearValue: {
+      event: (args: readonly unknown[]) => {
+        type: "VALUE_CLEAR";
+        value?: undefined;
+      } | {
+        type: "ITEM_CLEAR";
+        value: string[];
+      };
+    };
+  };
+  readers: {
+    open: {
+      read: (_context: CascadeContext, state: CascadeState) => state is "open";
+    };
+    focused: {
+      read: (_context: CascadeContext, state: CascadeState) => state is "focused";
+    };
+    multiple: {
+      read: (context: CascadeContext) => boolean;
+    };
+    disabled: {
+      read: (context: CascadeContext, _state: CascadeState, _props: Record<string, unknown>, root: (() => Element) | undefined) => boolean;
+    };
+    value: {
+      read: (context: CascadeContext) => string[][];
+    };
+    highlightedValue: {
+      read: (context: CascadeContext) => string[];
+    };
+    hasSelectedItems: {
+      read: (context: CascadeContext) => boolean;
+    };
+    empty: {
+      read: (context: CascadeContext) => boolean;
+    };
+    levels: {
+      read: (context: CascadeContext, _state: CascadeState, props: Record<string, unknown>) => readonly CascadeLevel[];
+    };
+  };
+  methods: {
+    getLevels: {
+      call: (context: CascadeContext, _state: CascadeState, _args: readonly unknown[], props: Record<string, unknown>) => readonly CascadeLevel[];
+    };
+    getItems: {
+      call: (_context: CascadeContext, _state: CascadeState, [level]: [level: CascadeLevel]) => readonly CascadeItem[];
+    };
+    getItemState: {
+      call: (context: CascadeContext, _state: CascadeState, [item]: [item: CascadeItem]) => CascadeItemState;
+    };
+    getValueText: {
+      call: (context: CascadeContext, _state: CascadeState, _args: readonly unknown[], _props: Record<string, unknown>) => string;
+    };
+    getValueTextRows: {
+      call: (context: CascadeContext, _state: CascadeState, _args: readonly unknown[], _props: Record<string, unknown>) => readonly {
+        readonly value: string;
+      }[];
+    };
+  };
+  events: {
+    "open-change": {
+      prop: string;
+      watch: (_context: CascadeContext, state: CascadeState) => boolean[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: CascadeContext) => {
+        open: boolean;
+        value: string[][];
+      };
+    };
+    "value-change": {
+      prop: string;
+      watch: (context: CascadeContext) => string[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: CascadeContext) => {
+        value: string[][];
+        items: (readonly CascadeNode[])[];
+      };
+    };
+    "highlight-change": {
+      prop: string;
+      watch: (context: CascadeContext) => string[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: CascadeContext) => {
+        highlightedValue: string[];
+        highlightedItems: readonly CascadeNode[];
+      };
+    };
+  };
+};
+export type CascadeApi = ApiOf<typeof def>;
+export declare const cascade: import("@spinjs/runtime").DefinedComponent<CascadeApi, CascadeArgs>;
+export {};
+//# sourceMappingURL=cascade.presentation.d.ts.map