@zag-js/toast 1.34.0 → 1.35.0

package/dist/toast-group.machine.mjs

@@ -0,0 +1,257 @@
+// src/toast-group.machine.ts
+import { setup } from "@zag-js/core";
+import { trackDismissableBranch } from "@zag-js/dismissable";
+import { addDomEvent, AnimationFrame } from "@zag-js/dom-query";
+import { uuid } from "@zag-js/utils";
+import * as dom from "./toast.dom.mjs";
+var { guards, createMachine } = setup();
+var { and } = guards;
+var groupMachine = createMachine({
+  props({ props }) {
+    return {
+      dir: "ltr",
+      id: uuid(),
+      ...props,
+      store: props.store
+    };
+  },
+  initialState({ prop }) {
+    return prop("store").attrs.overlap ? "overlap" : "stack";
+  },
+  refs() {
+    return {
+      lastFocusedEl: null,
+      isFocusWithin: false,
+      isPointerWithin: false,
+      ignoreMouseTimer: AnimationFrame.create(),
+      dismissableCleanup: void 0
+    };
+  },
+  context({ bindable }) {
+    return {
+      toasts: bindable(() => ({
+        defaultValue: [],
+        sync: true,
+        hash: (toasts) => toasts.map((t) => t.id).join(",")
+      })),
+      heights: bindable(() => ({
+        defaultValue: [],
+        sync: true
+      }))
+    };
+  },
+  computed: {
+    count: ({ context }) => context.get("toasts").length,
+    overlap: ({ prop }) => prop("store").attrs.overlap,
+    placement: ({ prop }) => prop("store").attrs.placement
+  },
+  effects: ["subscribeToStore", "trackDocumentVisibility", "trackHotKeyPress"],
+  watch({ track, context, action }) {
+    track([() => context.hash("toasts")], () => {
+      queueMicrotask(() => {
+        action(["collapsedIfEmpty", "setDismissableBranch"]);
+      });
+    });
+  },
+  exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
+  on: {
+    "DOC.HOTKEY": {
+      actions: ["focusRegionEl"]
+    },
+    "REGION.BLUR": [
+      {
+        guard: and("isOverlapping", "isPointerOut"),
+        target: "overlap",
+        actions: ["collapseToasts", "resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        guard: "isPointerOut",
+        target: "stack",
+        actions: ["resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        actions: ["clearFocusWithin"]
+      }
+    ],
+    "TOAST.REMOVE": {
+      actions: ["removeToast", "removeHeight", "ignoreMouseEventsTemporarily"]
+    },
+    "TOAST.PAUSE": {
+      actions: ["pauseToasts"]
+    }
+  },
+  states: {
+    stack: {
+      on: {
+        "REGION.POINTER_LEAVE": [
+          {
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["clearPointerWithin", "resumeToasts", "collapseToasts"]
+          },
+          {
+            actions: ["clearPointerWithin", "resumeToasts"]
+          }
+        ],
+        "REGION.OVERLAP": {
+          target: "overlap",
+          actions: ["collapseToasts"]
+        },
+        "REGION.FOCUS": {
+          actions: ["setLastFocusedEl", "pauseToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          actions: ["setPointerWithin", "pauseToasts"]
+        }
+      }
+    },
+    overlap: {
+      on: {
+        "REGION.STACK": {
+          target: "stack",
+          actions: ["expandToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          target: "stack",
+          actions: ["setPointerWithin", "pauseToasts", "expandToasts"]
+        },
+        "REGION.FOCUS": {
+          target: "stack",
+          actions: ["setLastFocusedEl", "pauseToasts", "expandToasts"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isOverlapping: ({ computed }) => computed("overlap"),
+      isPointerOut: ({ refs }) => !refs.get("isPointerWithin")
+    },
+    effects: {
+      subscribeToStore({ context, prop }) {
+        const store = prop("store");
+        context.set("toasts", store.getVisibleToasts());
+        return store.subscribe((toast) => {
+          if (toast.dismiss) {
+            context.set("toasts", (prev) => prev.filter((t) => t.id !== toast.id));
+            return;
+          }
+          context.set("toasts", (prev) => {
+            const index = prev.findIndex((t) => t.id === toast.id);
+            if (index !== -1) {
+              return [...prev.slice(0, index), { ...prev[index], ...toast }, ...prev.slice(index + 1)];
+            }
+            return [toast, ...prev];
+          });
+        });
+      },
+      trackHotKeyPress({ prop, send }) {
+        const handleKeyDown = (event) => {
+          const { hotkey } = prop("store").attrs;
+          const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+          if (!isHotkeyPressed) return;
+          send({ type: "DOC.HOTKEY" });
+        };
+        return addDomEvent(document, "keydown", handleKeyDown, { capture: true });
+      },
+      trackDocumentVisibility({ prop, send, scope }) {
+        const { pauseOnPageIdle } = prop("store").attrs;
+        if (!pauseOnPageIdle) return;
+        const doc = scope.getDoc();
+        return addDomEvent(doc, "visibilitychange", () => {
+          const isHidden = doc.visibilityState === "hidden";
+          send({ type: isHidden ? "PAUSE_ALL" : "RESUME_ALL" });
+        });
+      }
+    },
+    actions: {
+      setDismissableBranch({ refs, context, computed, scope }) {
+        const toasts = context.get("toasts");
+        const placement = computed("placement");
+        const hasToasts = toasts.length > 0;
+        if (!hasToasts) {
+          refs.get("dismissableCleanup")?.();
+          return;
+        }
+        if (hasToasts && refs.get("dismissableCleanup")) {
+          return;
+        }
+        const groupEl = () => dom.getRegionEl(scope, placement);
+        const cleanup = trackDismissableBranch(groupEl, { defer: true });
+        refs.set("dismissableCleanup", cleanup);
+      },
+      clearDismissableBranch({ refs }) {
+        refs.get("dismissableCleanup")?.();
+      },
+      focusRegionEl({ scope, computed }) {
+        queueMicrotask(() => {
+          dom.getRegionEl(scope, computed("placement"))?.focus();
+        });
+      },
+      pauseToasts({ prop }) {
+        prop("store").pause();
+      },
+      resumeToasts({ prop }) {
+        prop("store").resume();
+      },
+      expandToasts({ prop }) {
+        prop("store").expand();
+      },
+      collapseToasts({ prop }) {
+        prop("store").collapse();
+      },
+      removeToast({ prop, event }) {
+        prop("store").remove(event.id);
+      },
+      removeHeight({ event, context }) {
+        if (event?.id == null) return;
+        queueMicrotask(() => {
+          context.set("heights", (heights) => heights.filter((height) => height.id !== event.id));
+        });
+      },
+      collapsedIfEmpty({ send, computed }) {
+        if (!computed("overlap") || computed("count") > 1) return;
+        send({ type: "REGION.OVERLAP" });
+      },
+      setLastFocusedEl({ refs, event }) {
+        if (refs.get("isFocusWithin") || !event.target) return;
+        refs.set("isFocusWithin", true);
+        refs.set("lastFocusedEl", event.target);
+      },
+      restoreFocusIfPointerOut({ refs }) {
+        if (!refs.get("lastFocusedEl") || refs.get("isPointerWithin")) return;
+        refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
+      },
+      setPointerWithin({ refs }) {
+        refs.set("isPointerWithin", true);
+      },
+      clearPointerWithin({ refs }) {
+        refs.set("isPointerWithin", false);
+        if (refs.get("lastFocusedEl") && !refs.get("isFocusWithin")) {
+          refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+          refs.set("lastFocusedEl", null);
+        }
+      },
+      clearFocusWithin({ refs }) {
+        refs.set("isFocusWithin", false);
+      },
+      clearLastFocusedEl({ refs }) {
+        if (!refs.get("lastFocusedEl")) return;
+        refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
+      },
+      ignoreMouseEventsTemporarily({ refs }) {
+        refs.get("ignoreMouseTimer").request();
+      },
+      clearMouseEventTimer({ refs }) {
+        refs.get("ignoreMouseTimer").cancel();
+      }
+    }
+  }
+});
+export {
+  groupMachine
+};

package/dist/toast.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const parts: Record<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/toast.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const parts: Record<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/toast.anatomy.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toast.anatomy.ts
+var toast_anatomy_exports = {};
+__export(toast_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(toast_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("toast").parts(
+  "group",
+  "root",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/toast.anatomy.mjs

@@ -0,0 +1,15 @@
+// src/toast.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("toast").parts(
+  "group",
+  "root",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/toast.connect.d.mts

@@ -0,0 +1,8 @@
+import { Service } from '@zag-js/core';
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ToastSchema, ToastApi } from './toast.types.mjs';
+import '@zag-js/dom-query';
+
+declare function connect<T extends PropTypes, O>(service: Service<ToastSchema<O>>, normalize: NormalizeProps<T>): ToastApi<T, O>;
+
+export { connect };

package/dist/toast.connect.d.ts

@@ -0,0 +1,8 @@
+import { Service } from '@zag-js/core';
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ToastSchema, ToastApi } from './toast.types.js';
+import '@zag-js/dom-query';
+
+declare function connect<T extends PropTypes, O>(service: Service<ToastSchema<O>>, normalize: NormalizeProps<T>): ToastApi<T, O>;
+
+export { connect };

package/dist/toast.connect.js

@@ -0,0 +1,155 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toast.connect.ts
+var toast_connect_exports = {};
+__export(toast_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(toast_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_toast = require("./toast.anatomy.cjs");
+var dom = __toESM(require("./toast.dom.cjs"));
+var import_toast2 = require("./toast.utils.cjs");
+function connect(service, normalize) {
+  const { state, send, prop, scope, context, computed } = service;
+  const visible = state.hasTag("visible");
+  const paused = state.hasTag("paused");
+  const mounted = context.get("mounted");
+  const frontmost = computed("frontmost");
+  const placement = prop("parent").computed("placement");
+  const type = prop("type");
+  const stacked = prop("stacked");
+  const title = prop("title");
+  const description = prop("description");
+  const action = prop("action");
+  const [side, align = "center"] = placement.split("-");
+  return {
+    type,
+    title,
+    description,
+    placement,
+    visible,
+    paused,
+    closable: !!prop("closable"),
+    pause() {
+      send({ type: "PAUSE" });
+    },
+    resume() {
+      send({ type: "RESUME" });
+    },
+    dismiss() {
+      send({ type: "DISMISS", src: "programmatic" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...import_toast.parts.root.attrs,
+        dir: prop("dir"),
+        id: dom.getRootId(scope),
+        "data-state": visible ? "open" : "closed",
+        "data-type": type,
+        "data-placement": placement,
+        "data-align": align,
+        "data-side": side,
+        "data-mounted": (0, import_dom_query.dataAttr)(mounted),
+        "data-paused": (0, import_dom_query.dataAttr)(paused),
+        "data-first": (0, import_dom_query.dataAttr)(frontmost),
+        "data-sibling": (0, import_dom_query.dataAttr)(!frontmost),
+        "data-stack": (0, import_dom_query.dataAttr)(stacked),
+        "data-overlap": (0, import_dom_query.dataAttr)(!stacked),
+        role: "status",
+        "aria-atomic": "true",
+        "aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
+        "aria-labelledby": title ? dom.getTitleId(scope) : void 0,
+        tabIndex: 0,
+        style: (0, import_toast2.getPlacementStyle)(service, visible),
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (event.key == "Escape") {
+            send({ type: "DISMISS", src: "keyboard" });
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    getGhostBeforeProps() {
+      return normalize.element({
+        "data-ghost": "before",
+        style: (0, import_toast2.getGhostBeforeStyle)(service, visible)
+      });
+    },
+    /* Needed to avoid setting hover to false when in between toasts */
+    getGhostAfterProps() {
+      return normalize.element({
+        "data-ghost": "after",
+        style: (0, import_toast2.getGhostAfterStyle)()
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...import_toast.parts.title.attrs,
+        id: dom.getTitleId(scope)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...import_toast.parts.description.attrs,
+        id: dom.getDescriptionId(scope)
+      });
+    },
+    getActionTriggerProps() {
+      return normalize.button({
+        ...import_toast.parts.actionTrigger.attrs,
+        type: "button",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          action?.onClick?.();
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        id: dom.getCloseTriggerId(scope),
+        ...import_toast.parts.closeTrigger.attrs,
+        type: "button",
+        "aria-label": "Dismiss notification",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/toast.connect.mjs

@@ -0,0 +1,120 @@
+// src/toast.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+import { parts } from "./toast.anatomy.mjs";
+import * as dom from "./toast.dom.mjs";
+import { getGhostAfterStyle, getGhostBeforeStyle, getPlacementStyle } from "./toast.utils.mjs";
+function connect(service, normalize) {
+  const { state, send, prop, scope, context, computed } = service;
+  const visible = state.hasTag("visible");
+  const paused = state.hasTag("paused");
+  const mounted = context.get("mounted");
+  const frontmost = computed("frontmost");
+  const placement = prop("parent").computed("placement");
+  const type = prop("type");
+  const stacked = prop("stacked");
+  const title = prop("title");
+  const description = prop("description");
+  const action = prop("action");
+  const [side, align = "center"] = placement.split("-");
+  return {
+    type,
+    title,
+    description,
+    placement,
+    visible,
+    paused,
+    closable: !!prop("closable"),
+    pause() {
+      send({ type: "PAUSE" });
+    },
+    resume() {
+      send({ type: "RESUME" });
+    },
+    dismiss() {
+      send({ type: "DISMISS", src: "programmatic" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        id: dom.getRootId(scope),
+        "data-state": visible ? "open" : "closed",
+        "data-type": type,
+        "data-placement": placement,
+        "data-align": align,
+        "data-side": side,
+        "data-mounted": dataAttr(mounted),
+        "data-paused": dataAttr(paused),
+        "data-first": dataAttr(frontmost),
+        "data-sibling": dataAttr(!frontmost),
+        "data-stack": dataAttr(stacked),
+        "data-overlap": dataAttr(!stacked),
+        role: "status",
+        "aria-atomic": "true",
+        "aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
+        "aria-labelledby": title ? dom.getTitleId(scope) : void 0,
+        tabIndex: 0,
+        style: getPlacementStyle(service, visible),
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (event.key == "Escape") {
+            send({ type: "DISMISS", src: "keyboard" });
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    getGhostBeforeProps() {
+      return normalize.element({
+        "data-ghost": "before",
+        style: getGhostBeforeStyle(service, visible)
+      });
+    },
+    /* Needed to avoid setting hover to false when in between toasts */
+    getGhostAfterProps() {
+      return normalize.element({
+        "data-ghost": "after",
+        style: getGhostAfterStyle()
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        id: dom.getTitleId(scope)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        id: dom.getDescriptionId(scope)
+      });
+    },
+    getActionTriggerProps() {
+      return normalize.button({
+        ...parts.actionTrigger.attrs,
+        type: "button",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          action?.onClick?.();
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        id: dom.getCloseTriggerId(scope),
+        ...parts.closeTrigger.attrs,
+        type: "button",
+        "aria-label": "Dismiss notification",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/toast.dom.d.mts

@@ -0,0 +1,14 @@
+import { Scope } from '@zag-js/core';
+import { Placement } from './toast.types.mjs';
+import '@zag-js/types';
+import '@zag-js/dom-query';
+
+declare const getRegionId: (placement: Placement) => string;
+declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
+declare const getRootId: (ctx: Scope) => string;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getTitleId: (ctx: Scope) => string;
+declare const getDescriptionId: (ctx: Scope) => string;
+declare const getCloseTriggerId: (ctx: Scope) => string;
+
+export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };

package/dist/toast.dom.d.ts

@@ -0,0 +1,14 @@
+import { Scope } from '@zag-js/core';
+import { Placement } from './toast.types.js';
+import '@zag-js/types';
+import '@zag-js/dom-query';
+
+declare const getRegionId: (placement: Placement) => string;
+declare const getRegionEl: (ctx: Scope, placement: Placement) => HTMLElement | null;
+declare const getRootId: (ctx: Scope) => string;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getTitleId: (ctx: Scope) => string;
+declare const getDescriptionId: (ctx: Scope) => string;
+declare const getCloseTriggerId: (ctx: Scope) => string;
+
+export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };