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

package/dist/toast/toast.presentation.d.ts

@@ -0,0 +1,284 @@
+import { ToastEvents, ToastType } from "./toast.events.js";
+import { ToastArgs, ToastContext, ToastEntry, ToastState, ToastStatus } from "./toast.state.js";
+import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+/**
+ * Toast definition: the DOM contract as data. The queue is one context, so
+ * the whole contract is one api: `getGroupProps` for the region,
+ * `getToastProps` and the title/description/action/close parts for a row,
+ * and `getToasts` as the render source.
+ *
+ * The clocks live in the actions: `use:toast-timer` owns the dismissal
+ * clock (with its pause/remainder report), the remove delay, and the frame
+ * after the row attaches that starts the entry motion; `use:toast-row` owns
+ * the measured height; `use:toast-region` owns the document reflexes.
+ * Neither the machine nor this file keeps a timer.
+ *
+ * Where the queue lives: the host's `items` prop is the write channel. A
+ * toast the machine took out on its own is remembered, so a later host
+ * write of the same list does not bring it back. A host that means to
+ * re-show a toast gives it a new id.
+ */
+/** One queue entry as the host authors it. */
+export interface ToastItem {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly type: string;
+  /** An unset duration (0 or less) is the type's own. */
+  readonly duration: number;
+  /** An unset priority (0 or less) is the type's own. */
+  readonly priority: number;
+  readonly action: string;
+}
+export interface ToastStatusChange {
+  readonly id: string;
+  readonly status: ToastStatus | "unmounted";
+  /** What caused it: `user`, `keyboard`, or "" for a host write or timer. */
+  readonly src: string;
+}
+type SlotLike<R> = SlotViewFor<R, ToastContext, ToastEvents, ToastState>;
+type Ctx = ToastContext;
+declare const def: {
+  name: string;
+  machine: (props: ToastArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ToastContext, ToastEvents, ToastState>;
+  establish: (props: Record<string, unknown>) => {
+    type: string;
+  }[];
+  reconcile: ({ context, state, parsed, send }: {
+    readonly context: ToastContext;
+    readonly state: ToastState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    group: {
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        "data-placement": string;
+        "data-side": "bottom" | "top";
+        "data-align": "start" | "center" | "end";
+        "data-count": string;
+        "data-empty": string | undefined;
+        "data-overlap": string | undefined;
+        "data-stack": string | undefined;
+        style: {
+          left: string;
+          top: string;
+          gap: string;
+        } | {
+          right: string;
+          top: string;
+          gap: string;
+        } | {
+          left: string;
+          right: string;
+          top: string;
+          gap: string;
+        } | {
+          left: string;
+          bottom: string;
+          gap: string;
+        } | {
+          right: string;
+          bottom: string;
+          gap: string;
+        } | {
+          left: string;
+          right: string;
+          bottom: string;
+          gap: string;
+        };
+        "use:toast-region": {
+          hotkey: string[];
+          pauseOnPageIdle: boolean;
+          onIdleChange: (idle: boolean) => void;
+        };
+        onMouseEnter: () => void;
+        onMouseMove: () => void;
+        onMouseLeave: () => void;
+        onFocus: (event: FocusEvent) => void;
+        onBlur: (event: FocusEvent) => void;
+        id: string;
+        role: string;
+        tabindex: number;
+        "aria-label": string;
+      };
+    };
+  };
+  slots: {
+    toast: {
+      indexes: (context: ToastContext) => ToastEntry[];
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        "data-state": string;
+        "data-placement": string;
+        "data-side": "bottom" | "top";
+        "data-align": "start" | "center" | "end";
+        "data-mounted": string | undefined;
+        "data-paused": string | undefined;
+        "data-first": string | undefined;
+        "data-sibling": string | undefined;
+        "data-stack": string | undefined;
+        "data-overlap": string | undefined;
+        style: {
+          transform: string;
+          scale: string;
+          opacity: string;
+          zIndex: string;
+        };
+        onKeydown: (event: KeyboardEvent) => void;
+        "use:toast-timer": {
+          remaining: number;
+          paused: boolean;
+          dismissing: boolean;
+          removeDelay: number;
+          onTimeout: () => void;
+          onRemove: () => void;
+          onPause: (remaining: number) => void;
+          onReady: () => void;
+        };
+        "use:toast-row": {
+          onHeight: (height: number) => void;
+        };
+        id: string;
+        role: string;
+        tabindex: number;
+      };
+    };
+    title: {
+      id: string;
+      indexes: (context: ToastContext) => ToastEntry[];
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        id: string;
+      };
+    };
+    description: {
+      id: string;
+      indexes: (context: ToastContext) => ToastEntry[];
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        id: string;
+      };
+    };
+    actionTrigger: {
+      id: string;
+      indexes: (context: ToastContext) => ToastEntry[];
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        id: string;
+        type: string;
+        "aria-label": string;
+        hidden: boolean;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    closeTrigger: {
+      id: string;
+      indexes: (context: ToastContext) => ToastEntry[];
+      attrs: (scope: SlotLike<ToastEntry>) => {
+        id: string;
+        type: string;
+        "aria-label": string;
+        hidden: boolean;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+  };
+  commands: {
+    create: {
+      event: (args: readonly unknown[]) => {
+        type: "TOAST.CREATE";
+        id: string;
+        title: string;
+        description: string;
+        toastType: ToastType;
+        duration: number;
+        priority: number;
+        action: string;
+      };
+    };
+    update: {
+      event: (args: readonly unknown[], context: Ctx) => {
+        type: "TOAST.UPDATE";
+        id: string;
+        title: string;
+        description: string;
+        toastType: ToastType;
+        duration: number;
+        priority: number;
+        action: string;
+      };
+    };
+    dismiss: {
+      event: (args: readonly unknown[]) => {
+        type: "TOAST.DISMISS";
+        id: string;
+        src: string;
+      };
+    };
+    remove: {
+      event: (args: readonly unknown[]) => {
+        type: "TOAST.REMOVE";
+        id: string;
+      };
+    };
+    dismissAll: {
+      event: () => {
+        type: "DISMISS.ALL";
+      };
+    };
+    pause: {
+      event: (args: readonly unknown[], context: Ctx) => {
+        type: "TOAST.PAUSE";
+        id: string;
+        remaining: number;
+      };
+    };
+    resume: {
+      event: (args: readonly unknown[]) => {
+        type: "TOAST.RESUME";
+        id: string;
+      };
+    };
+  };
+  readers: {
+    count: {
+      read: (context: ToastContext) => number;
+    };
+    layout: {
+      read: (_context: ToastContext, state: ToastState) => "stack" | "overlap";
+    };
+    placement: {
+      read: (context: ToastContext) => string;
+    };
+    overlapping: {
+      read: (_context: ToastContext, state: ToastState) => state is "overlap";
+    };
+    paused: {
+      read: (context: ToastContext) => boolean;
+    };
+  };
+  methods: {
+    getToasts: {
+      call: (context: ToastContext) => readonly ToastEntry[];
+    };
+  };
+  events: {
+    "status-change": {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly unknown[]) => {
+        id: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, before: ToastContext, after: ToastContext, _states: {
+        readonly was: string;
+        readonly is: string;
+      } | undefined, source: string | undefined) => Record<string, unknown>[] | null;
+    };
+  };
+};
+export type ToastApi = ApiOf<typeof def>;
+export declare const toast: import("@spinjs/runtime").DefinedComponent<ToastApi, ToastArgs>;
+export {};
+//# sourceMappingURL=toast.presentation.d.ts.map