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

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

@@ -0,0 +1,358 @@
+import { SelectArgs, SelectContext, SelectRow, SelectState } from "./select.state.js";
+import { SelectEvents } from "./select.events.js";
+import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+/** Select definition: the DOM contract as data. */
+export interface SelectItemState {
+  readonly selected: boolean;
+  readonly highlighted: boolean;
+  readonly disabled: boolean;
+}
+export interface SelectValueChange {
+  readonly value: string[];
+  readonly items: readonly SelectRow[];
+}
+export interface SelectHighlightChange {
+  readonly highlightedValue: string | null;
+  readonly highlightedItem: SelectRow | null;
+}
+export interface SelectOpenChange {
+  readonly open: boolean;
+  readonly reason: string;
+}
+export interface SelectSelect {
+  readonly value: string[];
+  readonly itemValue: string;
+}
+type SlotLike<R> = SlotViewFor<R, SelectContext, SelectEvents, SelectState>;
+export declare const def: {
+  name: string;
+  machine: (args: SelectArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SelectContext, SelectEvents, SelectState>;
+  start: (props: Record<string, unknown>, authored: (name: string) => boolean) => "idle" | "open";
+  settled: ({ event, before, after, focus }: {
+    readonly event: {
+      readonly type: string;
+    } & Record<string, unknown>;
+    readonly before: {
+      readonly state: string;
+    };
+    readonly after: {
+      readonly state: string;
+    };
+    readonly focus: (part: string, slot?: unknown) => void;
+  }) => void;
+  reconcile: ({ context, parsed, send }: {
+    readonly context: SelectContext;
+    readonly parsed: Record<string, unknown>;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    root: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        dir: string;
+        "data-state": string;
+        "data-focus": string | undefined;
+        "data-readonly": string | undefined;
+        "data-invalid": string | undefined;
+        "data-multiple": string | undefined;
+        "data-disabled": string | undefined;
+        "data-placeholder": string | undefined;
+      };
+    };
+    label: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        dir: string;
+        for: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+      };
+    };
+    control: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        dir: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+      };
+    };
+    trigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        disabled: boolean;
+        "data-state": string;
+        "data-focus": string | undefined;
+        "data-focused": string | undefined;
+        "aria-controls": string;
+        "aria-owns": string;
+        "data-placeholder": string | undefined;
+        onFocus: () => void;
+        onBlur: () => void;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+        type: string;
+        dir: string;
+        role: string;
+      };
+    };
+    triggerIndicator: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        "data-state": string;
+        "data-disabled": string | undefined;
+      };
+    };
+    clearTrigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        type: string;
+        tabIndex: number;
+        "aria-label": string | undefined;
+        disabled: boolean;
+        "data-state": string;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    valueText: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        "data-placeholder": string | undefined;
+      };
+    };
+    positioner: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        dir: string;
+        "data-state": string;
+        hidden: boolean;
+        "data-placement": unknown;
+      };
+    };
+    content: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        "data-activedescendant": string | undefined;
+        hidden: boolean;
+        tabIndex: number;
+        "data-state": string;
+        onKeyDown: (event: KeyboardEvent) => void;
+        "use:dismissable": {
+          onOutside: (event: PointerEvent) => void;
+          onEscape: () => void;
+        };
+        "use:select-focus": {
+          open: boolean;
+        };
+        "use:scroll-into-view": {
+          activeId: () => string;
+        };
+        dir: string;
+        role: string;
+      };
+    };
+    list: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        dir: string;
+        role: string;
+        "data-state": string;
+      };
+    };
+    hiddenSelect: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SelectContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SelectEvents>, SelectState>) => {
+        tabIndex: number;
+        name: string | undefined;
+        form: string | undefined;
+        disabled: boolean;
+        required: boolean;
+        multiple: boolean;
+        "data-state": string;
+        "use:select-options": {
+          rows: readonly SelectRow[];
+          value: string[];
+          multiple: boolean;
+        };
+        "use:form-control": {
+          onDisabledChange: () => void;
+        };
+      };
+    };
+  };
+  slots: {
+    item: {
+      id: string;
+      indexes: (context: SelectContext) => readonly SelectRow[];
+      attrs: (scope: SlotLike<SelectRow>) => {
+        onPointerMove: () => void;
+        onPointerLeave: () => void;
+        onClick: () => void;
+        "data-state": string;
+        "data-selected": string | undefined;
+        "data-highlighted": string | undefined;
+        "data-disabled": string | undefined;
+        "aria-owns": string;
+        id: string;
+        role: string;
+      };
+    };
+    itemText: {
+      indexes: (context: SelectContext) => readonly SelectRow[];
+      attrs: (scope: SlotLike<SelectRow>) => {
+        id: string;
+        "data-state": string;
+        "data-selected": string | undefined;
+      };
+    };
+    itemIndicator: {
+      indexes: (context: SelectContext) => readonly SelectRow[];
+      attrs: (scope: SlotLike<SelectRow>) => {
+        "data-selected": string | undefined;
+      };
+    };
+  };
+  commands: {
+    syncSelectedItems: {
+      event: () => {
+        type: "SELECTED_ITEMS.SYNC";
+      };
+    };
+    selectValue: {
+      event: ([value]: [value: string]) => {
+        type: "ITEM.SELECT";
+        value: string;
+      };
+    };
+    setValue: {
+      event: ([value]: [value: readonly string[]]) => {
+        type: "VALUE.SET";
+        value: string[];
+      };
+    };
+    clearValue: {
+      event: () => {
+        type: "VALUE.CLEAR";
+      };
+    };
+    setHighlightValue: {
+      event: ([value]: [value: string | null]) => {
+        type: "HIGHLIGHTED_VALUE.SET";
+        highlightedValue: string | null;
+      };
+    };
+    clearHighlightValue: {
+      event: () => {
+        type: "HIGHLIGHTED_VALUE.CLEAR";
+      };
+    };
+    setOpen: {
+      event: ([open]: [open: boolean]) => {
+        type: "OPEN" | "CLOSE";
+      };
+    };
+    close: {
+      event: () => {
+        type: "CLOSE";
+      };
+    };
+    toggle: {
+      event: () => {
+        type: "TOGGLE";
+      };
+    };
+    focus: {
+      event: () => {
+        type: "TRIGGER.FOCUS";
+      };
+    };
+  };
+  readers: {
+    open: {
+      read: (_context: SelectContext, state: SelectState) => state is "open";
+    };
+    focused: {
+      read: (_context: SelectContext, state: SelectState) => state is "focused" | "open";
+    };
+    value: {
+      read: (context: SelectContext) => string[];
+    };
+    valueAsString: {
+      read: (context: SelectContext) => string;
+    };
+    hasSelectedItems: {
+      read: (context: SelectContext) => boolean;
+    };
+    highlightedValue: {
+      read: (context: SelectContext) => string | null;
+    };
+    highlightedItem: {
+      read: (context: SelectContext) => SelectRow | null;
+    };
+    selectedItems: {
+      read: (context: SelectContext) => SelectRow[];
+    };
+    multiple: {
+      read: (context: SelectContext) => boolean;
+    };
+    disabled: {
+      read: (context: SelectContext) => boolean;
+    };
+    empty: {
+      read: (context: SelectContext) => boolean;
+    };
+  };
+  methods: {
+    getRows: {
+      call: (context: SelectContext) => readonly SelectRow[];
+    };
+    getSelectedRows: {
+      call: (context: SelectContext) => readonly SelectRow[];
+    };
+    getItemState: {
+      call: (context: SelectContext, _state: SelectState, [row]: [row: SelectRow]) => SelectItemState;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: SelectContext) => string[];
+      detail: (watched: readonly string[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: SelectContext | undefined) => {
+        value: string[];
+        items: SelectRow[];
+      };
+    };
+    "highlight-change": {
+      prop: string;
+      watch: (context: SelectContext) => (string | null)[];
+      detail: (watched: readonly [string | null], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: SelectContext | undefined) => {
+        highlightedValue: string | null;
+        highlightedItem: SelectRow | null;
+      };
+    };
+    "open-change": {
+      prop: string;
+      watch: (_context: SelectContext, state: SelectState) => boolean[];
+      detail: (watched: readonly [boolean], event: {
+        readonly type: string;
+      } | undefined) => {
+        open: boolean;
+        reason: string;
+      };
+    };
+    select: {
+      prop: string;
+      watch: (context: SelectContext) => string[];
+      detail: (watched: readonly string[]) => {
+        value: string[];
+        itemValue: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, before: SelectContext, after: SelectContext) => {
+        value: string[];
+        itemValue: string;
+      } | null;
+    };
+  };
+};
+export type SelectApi = ApiOf<typeof def>;
+export declare const select: import("@spinjs/runtime").DefinedComponent<SelectApi, SelectArgs>;
+export type { SelectRow };
+//# sourceMappingURL=select.presentation.d.ts.map