@zag-js/toast 1.44.0 → 1.46.0

package/dist/toast-group.machine.js

@@ -89,6 +89,12 @@ var groupMachine = createMachine({
   },
   exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
   on: {
+    PAUSE_ALL: {
+      actions: ["pauseToasts"]
+    },
+    RESUME_ALL: {
+      actions: ["resumeToasts"]
+    },
     "DOC.HOTKEY": {
       actions: ["focusRegionEl"]
     },
@@ -192,6 +198,7 @@ var groupMachine = createMachine({
         const { pauseOnPageIdle } = prop("store").attrs;
         if (!pauseOnPageIdle) return;
         const doc = scope.getDoc();
+        if (doc.visibilityState === "hidden") send({ type: "PAUSE_ALL" });
         return (0, import_dom_query.addDomEvent)(doc, "visibilitychange", () => {
           const isHidden = doc.visibilityState === "hidden";
           send({ type: isHidden ? "PAUSE_ALL" : "RESUME_ALL" });
@@ -205,6 +212,7 @@ var groupMachine = createMachine({
         const hasToasts = toasts.length > 0;
         if (!hasToasts) {
           refs.get("dismissableCleanup")?.();
+          refs.set("dismissableCleanup", void 0);
           return;
         }
         if (hasToasts && refs.get("dismissableCleanup")) {
@@ -216,6 +224,7 @@ var groupMachine = createMachine({
       },
       clearDismissableBranch({ refs }) {
         refs.get("dismissableCleanup")?.();
+        refs.set("dismissableCleanup", void 0);
       },
       focusRegionEl({ scope, computed }) {
         queueMicrotask(() => {
@@ -225,7 +234,10 @@ var groupMachine = createMachine({
       pauseToasts({ prop }) {
         prop("store").pause();
       },
-      resumeToasts({ prop }) {
+      resumeToasts({ prop, refs, scope, event }) {
+        if (event.type === "REGION.BLUR") refs.set("isFocusWithin", false);
+        const idle = prop("store").attrs.pauseOnPageIdle && scope.getDoc().visibilityState === "hidden";
+        if (idle || refs.get("isPointerWithin") || refs.get("isFocusWithin")) return;
         prop("store").resume();
       },
       expandToasts({ prop }) {
@@ -248,9 +260,9 @@ var groupMachine = createMachine({
         send({ type: "REGION.OVERLAP" });
       },
       setLastFocusedEl({ refs, event }) {
-        if (refs.get("isFocusWithin") || !event.target) return;
+        if (refs.get("isFocusWithin")) return;
         refs.set("isFocusWithin", true);
-        refs.set("lastFocusedEl", event.target);
+        refs.set("lastFocusedEl", event.target ?? null);
       },
       restoreFocusIfPointerOut({ refs }) {
         if (!refs.get("lastFocusedEl") || refs.get("isPointerWithin")) return;

package/dist/toast-group.machine.mjs

@@ -55,6 +55,12 @@ var groupMachine = createMachine({
   },
   exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
   on: {
+    PAUSE_ALL: {
+      actions: ["pauseToasts"]
+    },
+    RESUME_ALL: {
+      actions: ["resumeToasts"]
+    },
     "DOC.HOTKEY": {
       actions: ["focusRegionEl"]
     },
@@ -158,6 +164,7 @@ var groupMachine = createMachine({
         const { pauseOnPageIdle } = prop("store").attrs;
         if (!pauseOnPageIdle) return;
         const doc = scope.getDoc();
+        if (doc.visibilityState === "hidden") send({ type: "PAUSE_ALL" });
         return addDomEvent(doc, "visibilitychange", () => {
           const isHidden = doc.visibilityState === "hidden";
           send({ type: isHidden ? "PAUSE_ALL" : "RESUME_ALL" });
@@ -171,6 +178,7 @@ var groupMachine = createMachine({
         const hasToasts = toasts.length > 0;
         if (!hasToasts) {
           refs.get("dismissableCleanup")?.();
+          refs.set("dismissableCleanup", void 0);
           return;
         }
         if (hasToasts && refs.get("dismissableCleanup")) {
@@ -182,6 +190,7 @@ var groupMachine = createMachine({
       },
       clearDismissableBranch({ refs }) {
         refs.get("dismissableCleanup")?.();
+        refs.set("dismissableCleanup", void 0);
       },
       focusRegionEl({ scope, computed }) {
         queueMicrotask(() => {
@@ -191,7 +200,10 @@ var groupMachine = createMachine({
       pauseToasts({ prop }) {
         prop("store").pause();
       },
-      resumeToasts({ prop }) {
+      resumeToasts({ prop, refs, scope, event }) {
+        if (event.type === "REGION.BLUR") refs.set("isFocusWithin", false);
+        const idle = prop("store").attrs.pauseOnPageIdle && scope.getDoc().visibilityState === "hidden";
+        if (idle || refs.get("isPointerWithin") || refs.get("isFocusWithin")) return;
         prop("store").resume();
       },
       expandToasts({ prop }) {
@@ -214,9 +226,9 @@ var groupMachine = createMachine({
         send({ type: "REGION.OVERLAP" });
       },
       setLastFocusedEl({ refs, event }) {
-        if (refs.get("isFocusWithin") || !event.target) return;
+        if (refs.get("isFocusWithin")) return;
         refs.set("isFocusWithin", true);
-        refs.set("lastFocusedEl", event.target);
+        refs.set("lastFocusedEl", event.target ?? null);
       },
       restoreFocusIfPointerOut({ refs }) {
         if (!refs.get("lastFocusedEl") || refs.get("isPointerWithin")) return;

package/dist/toast.connect.js

@@ -47,6 +47,7 @@ function connect(service, normalize) {
   const visible = state.hasTag("visible");
   const paused = state.hasTag("paused");
   const mounted = context.get("mounted");
+  const rendered = context.get("rendered");
   const frontmost = computed("frontmost");
   const placement = prop("parent").computed("placement");
   const type = prop("type");
@@ -64,10 +65,10 @@ function connect(service, normalize) {
     paused,
     closable: !!prop("closable"),
     pause() {
-      send({ type: "PAUSE" });
+      prop("parent").prop("store").pause(prop("id"));
     },
     resume() {
-      send({ type: "RESUME" });
+      prop("parent").prop("store").resume(prop("id"));
     },
     dismiss() {
       send({ type: "DISMISS", src: "programmatic" });
@@ -90,8 +91,8 @@ function connect(service, normalize) {
         "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,
+        "aria-describedby": description && rendered.description ? dom.getDescriptionId(scope) : void 0,
+        "aria-labelledby": title && rendered.title ? dom.getTitleId(scope) : void 0,
         tabIndex: 0,
         style: (0, import_toast2.getPlacementStyle)(service, visible),
         onKeyDown(event) {

package/dist/toast.connect.mjs

@@ -13,6 +13,7 @@ function connect(service, normalize) {
   const visible = state.hasTag("visible");
   const paused = state.hasTag("paused");
   const mounted = context.get("mounted");
+  const rendered = context.get("rendered");
   const frontmost = computed("frontmost");
   const placement = prop("parent").computed("placement");
   const type = prop("type");
@@ -30,10 +31,10 @@ function connect(service, normalize) {
     paused,
     closable: !!prop("closable"),
     pause() {
-      send({ type: "PAUSE" });
+      prop("parent").prop("store").pause(prop("id"));
     },
     resume() {
-      send({ type: "RESUME" });
+      prop("parent").prop("store").resume(prop("id"));
     },
     dismiss() {
       send({ type: "DISMISS", src: "programmatic" });
@@ -56,8 +57,8 @@ function connect(service, normalize) {
         "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,
+        "aria-describedby": description && rendered.description ? dom.getDescriptionId(scope) : void 0,
+        "aria-labelledby": title && rendered.title ? dom.getTitleId(scope) : void 0,
         tabIndex: 0,
         style: getPlacementStyle(service, visible),
         onKeyDown(event) {

package/dist/toast.dom.d.mts

@@ -9,6 +9,8 @@ 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 getTitleEl: (ctx: Scope) => HTMLElement | null;
+declare const getDescriptionEl: (ctx: Scope) => HTMLElement | null;
 declare const getCloseTriggerId: (ctx: Scope) => string;
 
-export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };
+export { getCloseTriggerId, getDescriptionEl, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleEl, getTitleId };

package/dist/toast.dom.d.ts

@@ -9,6 +9,8 @@ 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 getTitleEl: (ctx: Scope) => HTMLElement | null;
+declare const getDescriptionEl: (ctx: Scope) => HTMLElement | null;
 declare const getCloseTriggerId: (ctx: Scope) => string;
 
-export { getCloseTriggerId, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleId };
+export { getCloseTriggerId, getDescriptionEl, getDescriptionId, getRegionEl, getRegionId, getRootEl, getRootId, getTitleEl, getTitleId };

package/dist/toast.dom.js

@@ -21,11 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var toast_dom_exports = {};
 __export(toast_dom_exports, {
   getCloseTriggerId: () => getCloseTriggerId,
+  getDescriptionEl: () => getDescriptionEl,
   getDescriptionId: () => getDescriptionId,
   getRegionEl: () => getRegionEl,
   getRegionId: () => getRegionId,
   getRootEl: () => getRootEl,
   getRootId: () => getRootId,
+  getTitleEl: () => getTitleEl,
   getTitleId: () => getTitleId
 });
 module.exports = __toCommonJS(toast_dom_exports);
@@ -35,14 +37,18 @@ var getRootId = (ctx) => `toast:${ctx.id}`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 var getTitleId = (ctx) => `toast:${ctx.id}:title`;
 var getDescriptionId = (ctx) => `toast:${ctx.id}:description`;
+var getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
+var getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
 var getCloseTriggerId = (ctx) => `toast${ctx.id}:close`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getCloseTriggerId,
+  getDescriptionEl,
   getDescriptionId,
   getRegionEl,
   getRegionId,
   getRootEl,
   getRootId,
+  getTitleEl,
   getTitleId
 });

package/dist/toast.dom.mjs

@@ -5,13 +5,17 @@ var getRootId = (ctx) => `toast:${ctx.id}`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 var getTitleId = (ctx) => `toast:${ctx.id}:title`;
 var getDescriptionId = (ctx) => `toast:${ctx.id}:description`;
+var getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
+var getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
 var getCloseTriggerId = (ctx) => `toast${ctx.id}:close`;
 export {
   getCloseTriggerId,
+  getDescriptionEl,
   getDescriptionId,
   getRegionEl,
   getRegionId,
   getRootEl,
   getRootId,
+  getTitleEl,
   getTitleId
 };

package/dist/toast.machine.js

@@ -38,7 +38,7 @@ var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 var dom = __toESM(require("./toast.dom.js"));
 var import_toast = require("./toast.utils.js");
-var { not } = (0, import_core.createGuards)();
+var { not, and } = (0, import_core.createGuards)();
 var machine = (0, import_core.createMachine)({
   props({ props }) {
     (0, import_utils.ensureProps)(props, ["id", "type", "parent", "removeDelay"], "toast");
@@ -49,7 +49,8 @@ var machine = (0, import_core.createMachine)({
     };
   },
   initialState({ prop }) {
-    const persist = prop("type") === "loading" || prop("duration") === Infinity;
+    if (prop("message") === "DISMISS") return "dismissing";
+    const persist = prop("type") === "loading" || prop("duration") === Infinity || prop("paused");
     return persist ? "visible:persist" : "visible";
   },
   context({ prop, bindable }) {
@@ -65,6 +66,9 @@ var machine = (0, import_core.createMachine)({
       })),
       initialHeight: bindable(() => ({
         defaultValue: 0
+      })),
+      rendered: bindable(() => ({
+        defaultValue: { title: true, description: true }
       }))
     };
   },
@@ -105,6 +109,9 @@ var machine = (0, import_core.createMachine)({
       const message = prop("message");
       if (message) send({ type: message, src: "programmatic" });
     });
+    track([() => prop("paused")], () => {
+      send({ type: prop("paused") ? "PAUSE" : "RESUME" });
+    });
     track([() => prop("type"), () => prop("duration")], () => {
       send({ type: "UPDATE" });
     });
@@ -112,11 +119,12 @@ var machine = (0, import_core.createMachine)({
   on: {
     UPDATE: [
       {
-        guard: "shouldPersist",
+        guard: and("isVisible", "shouldPause"),
         target: "visible:persist",
         actions: ["resetCloseTimer"]
       },
       {
+        guard: "isVisible",
         target: "visible:updating",
         actions: ["resetCloseTimer"]
       }
@@ -126,12 +134,18 @@ var machine = (0, import_core.createMachine)({
     }
   },
   entry: ["setMounted", "measureHeight", "invokeOnVisible"],
-  effects: ["trackHeight"],
+  effects: ["trackContent"],
   states: {
     "visible:updating": {
       tags: ["visible", "updating"],
       effects: ["waitForNextTick"],
       on: {
+        DISMISS: {
+          target: "dismissing"
+        },
+        PAUSE: {
+          target: "visible:persist"
+        },
         SHOW: {
           target: "visible"
         }
@@ -141,7 +155,7 @@ var machine = (0, import_core.createMachine)({
       tags: ["visible", "paused"],
       on: {
         RESUME: {
-          guard: not("isLoadingType"),
+          guard: not("shouldPause"),
           target: "visible",
           actions: ["setCloseTimer"]
         },
@@ -195,9 +209,8 @@ var machine = (0, import_core.createMachine)({
           send({ type: "SHOW", src: "timer" });
         }, 0);
       },
-      trackHeight({ scope, prop }) {
-        let cleanup;
-        (0, import_dom_query.raf)(() => {
+      trackContent({ scope, prop, context }) {
+        return (0, import_dom_query.raf)(() => {
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
           const syncHeight = () => {
@@ -205,21 +218,30 @@ var machine = (0, import_core.createMachine)({
             const item = { id: prop("id"), height };
             setHeight(prop("parent"), item);
           };
+          const syncRenderedElements = () => {
+            context.set("rendered", {
+              title: !!dom.getTitleEl(scope),
+              description: !!dom.getDescriptionEl(scope)
+            });
+          };
+          syncRenderedElements();
           const win = scope.getWin();
-          const observer = new win.MutationObserver(syncHeight);
+          const observer = new win.MutationObserver(() => {
+            syncHeight();
+            syncRenderedElements();
+          });
           observer.observe(rootEl, {
             childList: true,
             subtree: true,
             characterData: true
           });
-          cleanup = () => observer.disconnect();
+          return () => observer.disconnect();
         });
-        return () => cleanup?.();
       }
     },
     guards: {
-      isLoadingType: ({ prop }) => prop("type") === "loading",
-      shouldPersist: ({ computed }) => computed("shouldPersist")
+      isVisible: ({ state }) => state.hasTag("visible"),
+      shouldPause: ({ computed, prop }) => computed("shouldPersist") || !!prop("paused")
     },
     actions: {
       setMounted({ context }) {
@@ -257,6 +279,7 @@ var machine = (0, import_core.createMachine)({
         parent.send({ type: "TOAST.REMOVE", id: prop("id") });
       },
       invokeOnDismiss({ prop, event }) {
+        prop("parent").prop("store").dismiss(prop("id"));
         prop("onStatusChange")?.({ status: "dismissing", src: event.src });
       },
       invokeOnUnmount({ prop }) {

package/dist/toast.machine.mjs

@@ -4,7 +4,7 @@ import { raf } from "@zag-js/dom-query";
 import { ensureProps, setRafTimeout } from "@zag-js/utils";
 import * as dom from "./toast.dom.mjs";
 import { getToastDuration } from "./toast.utils.mjs";
-var { not } = createGuards();
+var { not, and } = createGuards();
 var machine = createMachine({
   props({ props }) {
     ensureProps(props, ["id", "type", "parent", "removeDelay"], "toast");
@@ -15,7 +15,8 @@ var machine = createMachine({
     };
   },
   initialState({ prop }) {
-    const persist = prop("type") === "loading" || prop("duration") === Infinity;
+    if (prop("message") === "DISMISS") return "dismissing";
+    const persist = prop("type") === "loading" || prop("duration") === Infinity || prop("paused");
     return persist ? "visible:persist" : "visible";
   },
   context({ prop, bindable }) {
@@ -31,6 +32,9 @@ var machine = createMachine({
       })),
       initialHeight: bindable(() => ({
         defaultValue: 0
+      })),
+      rendered: bindable(() => ({
+        defaultValue: { title: true, description: true }
       }))
     };
   },
@@ -71,6 +75,9 @@ var machine = createMachine({
       const message = prop("message");
       if (message) send({ type: message, src: "programmatic" });
     });
+    track([() => prop("paused")], () => {
+      send({ type: prop("paused") ? "PAUSE" : "RESUME" });
+    });
     track([() => prop("type"), () => prop("duration")], () => {
       send({ type: "UPDATE" });
     });
@@ -78,11 +85,12 @@ var machine = createMachine({
   on: {
     UPDATE: [
       {
-        guard: "shouldPersist",
+        guard: and("isVisible", "shouldPause"),
         target: "visible:persist",
         actions: ["resetCloseTimer"]
       },
       {
+        guard: "isVisible",
         target: "visible:updating",
         actions: ["resetCloseTimer"]
       }
@@ -92,12 +100,18 @@ var machine = createMachine({
     }
   },
   entry: ["setMounted", "measureHeight", "invokeOnVisible"],
-  effects: ["trackHeight"],
+  effects: ["trackContent"],
   states: {
     "visible:updating": {
       tags: ["visible", "updating"],
       effects: ["waitForNextTick"],
       on: {
+        DISMISS: {
+          target: "dismissing"
+        },
+        PAUSE: {
+          target: "visible:persist"
+        },
         SHOW: {
           target: "visible"
         }
@@ -107,7 +121,7 @@ var machine = createMachine({
       tags: ["visible", "paused"],
       on: {
         RESUME: {
-          guard: not("isLoadingType"),
+          guard: not("shouldPause"),
           target: "visible",
           actions: ["setCloseTimer"]
         },
@@ -161,9 +175,8 @@ var machine = createMachine({
           send({ type: "SHOW", src: "timer" });
         }, 0);
       },
-      trackHeight({ scope, prop }) {
-        let cleanup;
-        raf(() => {
+      trackContent({ scope, prop, context }) {
+        return raf(() => {
           const rootEl = dom.getRootEl(scope);
           if (!rootEl) return;
           const syncHeight = () => {
@@ -171,21 +184,30 @@ var machine = createMachine({
             const item = { id: prop("id"), height };
             setHeight(prop("parent"), item);
           };
+          const syncRenderedElements = () => {
+            context.set("rendered", {
+              title: !!dom.getTitleEl(scope),
+              description: !!dom.getDescriptionEl(scope)
+            });
+          };
+          syncRenderedElements();
           const win = scope.getWin();
-          const observer = new win.MutationObserver(syncHeight);
+          const observer = new win.MutationObserver(() => {
+            syncHeight();
+            syncRenderedElements();
+          });
           observer.observe(rootEl, {
             childList: true,
             subtree: true,
             characterData: true
           });
-          cleanup = () => observer.disconnect();
+          return () => observer.disconnect();
         });
-        return () => cleanup?.();
       }
     },
     guards: {
-      isLoadingType: ({ prop }) => prop("type") === "loading",
-      shouldPersist: ({ computed }) => computed("shouldPersist")
+      isVisible: ({ state }) => state.hasTag("visible"),
+      shouldPause: ({ computed, prop }) => computed("shouldPersist") || !!prop("paused")
     },
     actions: {
       setMounted({ context }) {
@@ -223,6 +245,7 @@ var machine = createMachine({
         parent.send({ type: "TOAST.REMOVE", id: prop("id") });
       },
       invokeOnDismiss({ prop, event }) {
+        prop("parent").prop("store").dismiss(prop("id"));
         prop("onStatusChange")?.({ status: "dismissing", src: event.src });
       },
       invokeOnUnmount({ prop }) {

package/dist/toast.store.js

@@ -36,7 +36,8 @@ var priorities = {
 };
 var DEFAULT_TYPE = "info";
 var getPriorityForType = (type, hasAction) => {
-  const [actionable, nonActionable] = priorities[type ?? DEFAULT_TYPE];
+  const key = type ?? DEFAULT_TYPE;
+  const [actionable, nonActionable] = (0, import_utils.hasProp)(priorities, key) ? priorities[key] : priorities[DEFAULT_TYPE];
   return hasAction ? actionable : nonActionable;
 };
 var sortToastsByPriority = (toastArray) => {
@@ -61,15 +62,34 @@ function createToastStore(props = {}) {
   let toasts = [];
   let dismissedToasts = /* @__PURE__ */ new Set();
   let toastQueue = [];
+  const closingToasts = /* @__PURE__ */ new Set();
+  const promiseTokens = /* @__PURE__ */ new Map();
+  let paused = false;
   const subscribe = (subscriber) => {
     subscribers.push(subscriber);
+    let active = true;
     return () => {
+      if (!active) return;
+      active = false;
       const index = subscribers.indexOf(subscriber);
-      subscribers.splice(index, 1);
+      if (index !== -1) subscribers.splice(index, 1);
     };
   };
-  const publish = (data) => {
-    subscribers.forEach((subscriber) => subscriber(data));
+  const notifications = [];
+  let publishing = false;
+  const publish = (...data) => {
+    notifications.push(...data);
+    if (publishing) return data;
+    publishing = true;
+    try {
+      while (notifications.length) {
+        const next = notifications.shift();
+        subscribers.slice().forEach((subscriber) => subscriber(next));
+      }
+    } finally {
+      publishing = false;
+      notifications.length = 0;
+    }
     return data;
   };
   const addToast = (data) => {
@@ -77,30 +97,34 @@ function createToastStore(props = {}) {
       toastQueue.push(data);
       return;
     }
-    publish(data);
     toasts.unshift(data);
+    publish(data);
   };
   const processQueue = () => {
     toastQueue = sortToastsByPriority(toastQueue);
     while (toastQueue.length > 0 && toasts.length < attrs.max) {
       const nextToast = toastQueue.shift();
       if (nextToast) {
-        publish(nextToast);
-        toasts.unshift(nextToast);
+        const toast = { ...nextToast, paused: paused || nextToast.paused };
+        toasts.unshift(toast);
+        publish(toast);
       }
     }
   };
   const create = (data) => {
     const id = data.id ?? `toast:${(0, import_utils.uuid)()}`;
-    const exists = toasts.find((toast) => toast.id === id);
-    if (dismissedToasts.has(id)) dismissedToasts.delete(id);
+    const exists = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (closingToasts.has(id)) return id;
+    if ((0, import_utils.hasProp)(data, "promise") && data.promise !== exists?.promise) promiseTokens.delete(id);
+    dismissedToasts.delete(id);
     if (exists) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) {
-          return publish({ ...toast, ...data, id });
-        }
-        return toast;
-      });
+      const next = { ...exists, ...data, id };
+      if (toasts.some((toast) => toast.id === id)) {
+        toasts = toasts.map((toast) => toast.id === id ? next : toast);
+        publish(next);
+      } else {
+        toastQueue = toastQueue.map((toast) => toast.id === id ? next : toast);
+      }
     } else {
       const newToast = {
         id,
@@ -109,7 +133,8 @@ function createToastStore(props = {}) {
         type: DEFAULT_TYPE,
         ...data,
         stacked: !attrs.overlap,
-        gap: attrs.gap
+        gap: attrs.gap,
+        paused
       };
       const priority = newToast.priority ?? getPriorityForType(newToast.type, !!newToast.action);
       addToast({ ...newToast, priority });
@@ -117,18 +142,19 @@ function createToastStore(props = {}) {
     return id;
   };
   const remove = (id) => {
-    dismissedToasts.add(id);
-    if (!id) {
-      toasts.forEach((toast) => {
-        subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
-      });
-      toasts = [];
-      toastQueue = [];
-    } else {
-      subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
-      toasts = toasts.filter((toast) => toast.id !== id);
-      processQueue();
-    }
+    const removed = id == null ? [...toasts, ...toastQueue] : [...toasts, ...toastQueue].filter((toast) => toast.id === id);
+    const visible = id == null ? toasts : toasts.filter((toast) => toast.id === id);
+    removed.forEach((toast) => {
+      dismissedToasts.add(toast.id);
+      closingToasts.delete(toast.id);
+      promiseTokens.delete(toast.id);
+    });
+    if (id != null) dismissedToasts.add(id);
+    toasts = id == null ? [] : toasts.filter((toast) => toast.id !== id);
+    toastQueue = id == null ? [] : toastQueue.filter((toast) => toast.id !== id);
+    if (id != null && !visible.length) publish({ id, dismiss: true });
+    publish(...visible.map((toast) => ({ id: toast.id, dismiss: true })));
+    processQueue();
     return id;
   };
   const error = (data) => {
@@ -163,6 +189,10 @@ function createToastStore(props = {}) {
       promise: promise2,
       type: "loading"
     });
+    const token = /* @__PURE__ */ Symbol();
+    const current = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (current?.promise === promise2 && !closingToasts.has(id)) promiseTokens.set(id, token);
+    const isCurrent = () => promiseTokens.get(id) === token && !closingToasts.has(id);
     let removable = true;
     let result;
     const prom = (0, import_utils.runIfFn)(promise2).then(async (response) => {
@@ -170,23 +200,24 @@ function createToastStore(props = {}) {
       if (isHttpResponse(response) && !response.ok) {
         removable = false;
         const errorOptions = (0, import_utils.runIfFn)(options.error, `HTTP Error! status: ${response.status}`);
-        create({ ...shared, ...errorOptions, id, type: "error" });
+        if (isCurrent()) create({ ...shared, ...errorOptions, id, type: "error" });
       } else if (options.success !== void 0) {
         removable = false;
         const successOptions = (0, import_utils.runIfFn)(options.success, response);
-        create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
+        if (isCurrent()) create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
       }
     }).catch(async (error2) => {
       result = ["reject", error2];
       if (options.error !== void 0) {
         removable = false;
         const errorOptions = (0, import_utils.runIfFn)(options.error, error2);
-        create({ ...shared, ...errorOptions, id, type: "error" });
+        if (isCurrent()) create({ ...shared, ...errorOptions, id, type: "error" });
       }
     }).finally(() => {
-      if (removable) {
+      if (removable && isCurrent()) {
         remove(id);
       }
+      if (promiseTokens.get(id) === token) promiseTokens.delete(id);
       options.finally?.();
     });
     const unwrap = () => new Promise(
@@ -195,37 +226,46 @@ function createToastStore(props = {}) {
     return { id, unwrap };
   };
   const update = (id, data) => {
-    return create({ id, ...data });
+    if (closingToasts.has(id)) return id;
+    if (typeof data !== "function") return create({ ...data, id });
+    const current = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (!current) return id;
+    const next = { ...data({ ...current }), id };
+    if (closingToasts.has(id)) return id;
+    if (toasts.some((toast) => toast.id === id)) return create(next);
+    if (!toastQueue.some((toast) => toast.id === id)) return id;
+    return create(next);
+  };
+  const changeToasts = (data, id) => {
+    const changed = [];
+    toasts = toasts.map((toast) => {
+      if (id != null && toast.id !== id || closingToasts.has(toast.id)) return toast;
+      const next = { ...toast, ...data };
+      changed.push(next);
+      return next;
+    });
+    toastQueue = toastQueue.map((toast) => id == null || toast.id === id ? { ...toast, ...data } : toast);
+    publish(...changed);
   };
   const pause = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "PAUSE" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "PAUSE" }));
-    }
+    if (id == null) paused = true;
+    changeToasts({ paused: true }, id);
   };
   const resume = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "RESUME" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "RESUME" }));
-    }
+    if (id == null) paused = false;
+    changeToasts({ paused: false }, id);
   };
   const dismiss = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "DISMISS" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "DISMISS" }));
-    }
+    const queued = toastQueue.filter((toast) => id == null || toast.id === id);
+    toastQueue = toastQueue.filter((toast) => id != null && toast.id !== id);
+    queued.forEach((toast) => {
+      dismissedToasts.add(toast.id);
+      promiseTokens.delete(toast.id);
+    });
+    const changed = toasts.filter((toast) => (id == null || toast.id === id) && !closingToasts.has(toast.id));
+    changed.forEach((toast) => closingToasts.add(toast.id));
+    toasts = toasts.map((toast) => closingToasts.has(toast.id) ? { ...toast, message: "DISMISS" } : toast);
+    publish(...changed.map((toast) => ({ ...toast, message: "DISMISS" })));
   };
   const isVisible = (id) => {
     return !dismissedToasts.has(id) && !!toasts.find((toast) => toast.id === id);
@@ -233,12 +273,8 @@ function createToastStore(props = {}) {
   const isDismissed = (id) => {
     return dismissedToasts.has(id);
   };
-  const expand = () => {
-    toasts = toasts.map((toast) => publish({ ...toast, stacked: true }));
-  };
-  const collapse = () => {
-    toasts = toasts.map((toast) => publish({ ...toast, stacked: false }));
-  };
+  const expand = () => changeToasts({ stacked: true });
+  const collapse = () => changeToasts({ stacked: false });
   return {
     attrs,
     subscribe,

package/dist/toast.store.mjs

@@ -1,5 +1,5 @@
 // src/toast.store.ts
-import { compact, runIfFn, uuid, warn } from "@zag-js/utils";
+import { compact, hasProp, runIfFn, uuid, warn } from "@zag-js/utils";
 var withDefaults = (options, defaults) => {
   return { ...defaults, ...compact(options) };
 };
@@ -12,7 +12,8 @@ var priorities = {
 };
 var DEFAULT_TYPE = "info";
 var getPriorityForType = (type, hasAction) => {
-  const [actionable, nonActionable] = priorities[type ?? DEFAULT_TYPE];
+  const key = type ?? DEFAULT_TYPE;
+  const [actionable, nonActionable] = hasProp(priorities, key) ? priorities[key] : priorities[DEFAULT_TYPE];
   return hasAction ? actionable : nonActionable;
 };
 var sortToastsByPriority = (toastArray) => {
@@ -37,15 +38,34 @@ function createToastStore(props = {}) {
   let toasts = [];
   let dismissedToasts = /* @__PURE__ */ new Set();
   let toastQueue = [];
+  const closingToasts = /* @__PURE__ */ new Set();
+  const promiseTokens = /* @__PURE__ */ new Map();
+  let paused = false;
   const subscribe = (subscriber) => {
     subscribers.push(subscriber);
+    let active = true;
     return () => {
+      if (!active) return;
+      active = false;
       const index = subscribers.indexOf(subscriber);
-      subscribers.splice(index, 1);
+      if (index !== -1) subscribers.splice(index, 1);
     };
   };
-  const publish = (data) => {
-    subscribers.forEach((subscriber) => subscriber(data));
+  const notifications = [];
+  let publishing = false;
+  const publish = (...data) => {
+    notifications.push(...data);
+    if (publishing) return data;
+    publishing = true;
+    try {
+      while (notifications.length) {
+        const next = notifications.shift();
+        subscribers.slice().forEach((subscriber) => subscriber(next));
+      }
+    } finally {
+      publishing = false;
+      notifications.length = 0;
+    }
     return data;
   };
   const addToast = (data) => {
@@ -53,30 +73,34 @@ function createToastStore(props = {}) {
       toastQueue.push(data);
       return;
     }
-    publish(data);
     toasts.unshift(data);
+    publish(data);
   };
   const processQueue = () => {
     toastQueue = sortToastsByPriority(toastQueue);
     while (toastQueue.length > 0 && toasts.length < attrs.max) {
       const nextToast = toastQueue.shift();
       if (nextToast) {
-        publish(nextToast);
-        toasts.unshift(nextToast);
+        const toast = { ...nextToast, paused: paused || nextToast.paused };
+        toasts.unshift(toast);
+        publish(toast);
       }
     }
   };
   const create = (data) => {
     const id = data.id ?? `toast:${uuid()}`;
-    const exists = toasts.find((toast) => toast.id === id);
-    if (dismissedToasts.has(id)) dismissedToasts.delete(id);
+    const exists = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (closingToasts.has(id)) return id;
+    if (hasProp(data, "promise") && data.promise !== exists?.promise) promiseTokens.delete(id);
+    dismissedToasts.delete(id);
     if (exists) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) {
-          return publish({ ...toast, ...data, id });
-        }
-        return toast;
-      });
+      const next = { ...exists, ...data, id };
+      if (toasts.some((toast) => toast.id === id)) {
+        toasts = toasts.map((toast) => toast.id === id ? next : toast);
+        publish(next);
+      } else {
+        toastQueue = toastQueue.map((toast) => toast.id === id ? next : toast);
+      }
     } else {
       const newToast = {
         id,
@@ -85,7 +109,8 @@ function createToastStore(props = {}) {
         type: DEFAULT_TYPE,
         ...data,
         stacked: !attrs.overlap,
-        gap: attrs.gap
+        gap: attrs.gap,
+        paused
       };
       const priority = newToast.priority ?? getPriorityForType(newToast.type, !!newToast.action);
       addToast({ ...newToast, priority });
@@ -93,18 +118,19 @@ function createToastStore(props = {}) {
     return id;
   };
   const remove = (id) => {
-    dismissedToasts.add(id);
-    if (!id) {
-      toasts.forEach((toast) => {
-        subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
-      });
-      toasts = [];
-      toastQueue = [];
-    } else {
-      subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
-      toasts = toasts.filter((toast) => toast.id !== id);
-      processQueue();
-    }
+    const removed = id == null ? [...toasts, ...toastQueue] : [...toasts, ...toastQueue].filter((toast) => toast.id === id);
+    const visible = id == null ? toasts : toasts.filter((toast) => toast.id === id);
+    removed.forEach((toast) => {
+      dismissedToasts.add(toast.id);
+      closingToasts.delete(toast.id);
+      promiseTokens.delete(toast.id);
+    });
+    if (id != null) dismissedToasts.add(id);
+    toasts = id == null ? [] : toasts.filter((toast) => toast.id !== id);
+    toastQueue = id == null ? [] : toastQueue.filter((toast) => toast.id !== id);
+    if (id != null && !visible.length) publish({ id, dismiss: true });
+    publish(...visible.map((toast) => ({ id: toast.id, dismiss: true })));
+    processQueue();
     return id;
   };
   const error = (data) => {
@@ -139,6 +165,10 @@ function createToastStore(props = {}) {
       promise: promise2,
       type: "loading"
     });
+    const token = /* @__PURE__ */ Symbol();
+    const current = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (current?.promise === promise2 && !closingToasts.has(id)) promiseTokens.set(id, token);
+    const isCurrent = () => promiseTokens.get(id) === token && !closingToasts.has(id);
     let removable = true;
     let result;
     const prom = runIfFn(promise2).then(async (response) => {
@@ -146,23 +176,24 @@ function createToastStore(props = {}) {
       if (isHttpResponse(response) && !response.ok) {
         removable = false;
         const errorOptions = runIfFn(options.error, `HTTP Error! status: ${response.status}`);
-        create({ ...shared, ...errorOptions, id, type: "error" });
+        if (isCurrent()) create({ ...shared, ...errorOptions, id, type: "error" });
       } else if (options.success !== void 0) {
         removable = false;
         const successOptions = runIfFn(options.success, response);
-        create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
+        if (isCurrent()) create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
       }
     }).catch(async (error2) => {
       result = ["reject", error2];
       if (options.error !== void 0) {
         removable = false;
         const errorOptions = runIfFn(options.error, error2);
-        create({ ...shared, ...errorOptions, id, type: "error" });
+        if (isCurrent()) create({ ...shared, ...errorOptions, id, type: "error" });
       }
     }).finally(() => {
-      if (removable) {
+      if (removable && isCurrent()) {
         remove(id);
       }
+      if (promiseTokens.get(id) === token) promiseTokens.delete(id);
       options.finally?.();
     });
     const unwrap = () => new Promise(
@@ -171,37 +202,46 @@ function createToastStore(props = {}) {
     return { id, unwrap };
   };
   const update = (id, data) => {
-    return create({ id, ...data });
+    if (closingToasts.has(id)) return id;
+    if (typeof data !== "function") return create({ ...data, id });
+    const current = toasts.find((toast) => toast.id === id) ?? toastQueue.find((toast) => toast.id === id);
+    if (!current) return id;
+    const next = { ...data({ ...current }), id };
+    if (closingToasts.has(id)) return id;
+    if (toasts.some((toast) => toast.id === id)) return create(next);
+    if (!toastQueue.some((toast) => toast.id === id)) return id;
+    return create(next);
+  };
+  const changeToasts = (data, id) => {
+    const changed = [];
+    toasts = toasts.map((toast) => {
+      if (id != null && toast.id !== id || closingToasts.has(toast.id)) return toast;
+      const next = { ...toast, ...data };
+      changed.push(next);
+      return next;
+    });
+    toastQueue = toastQueue.map((toast) => id == null || toast.id === id ? { ...toast, ...data } : toast);
+    publish(...changed);
   };
   const pause = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "PAUSE" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "PAUSE" }));
-    }
+    if (id == null) paused = true;
+    changeToasts({ paused: true }, id);
   };
   const resume = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "RESUME" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "RESUME" }));
-    }
+    if (id == null) paused = false;
+    changeToasts({ paused: false }, id);
   };
   const dismiss = (id) => {
-    if (id != null) {
-      toasts = toasts.map((toast) => {
-        if (toast.id === id) return publish({ ...toast, message: "DISMISS" });
-        return toast;
-      });
-    } else {
-      toasts = toasts.map((toast) => publish({ ...toast, message: "DISMISS" }));
-    }
+    const queued = toastQueue.filter((toast) => id == null || toast.id === id);
+    toastQueue = toastQueue.filter((toast) => id != null && toast.id !== id);
+    queued.forEach((toast) => {
+      dismissedToasts.add(toast.id);
+      promiseTokens.delete(toast.id);
+    });
+    const changed = toasts.filter((toast) => (id == null || toast.id === id) && !closingToasts.has(toast.id));
+    changed.forEach((toast) => closingToasts.add(toast.id));
+    toasts = toasts.map((toast) => closingToasts.has(toast.id) ? { ...toast, message: "DISMISS" } : toast);
+    publish(...changed.map((toast) => ({ ...toast, message: "DISMISS" })));
   };
   const isVisible = (id) => {
     return !dismissedToasts.has(id) && !!toasts.find((toast) => toast.id === id);
@@ -209,12 +249,8 @@ function createToastStore(props = {}) {
   const isDismissed = (id) => {
     return dismissedToasts.has(id);
   };
-  const expand = () => {
-    toasts = toasts.map((toast) => publish({ ...toast, stacked: true }));
-  };
-  const collapse = () => {
-    toasts = toasts.map((toast) => publish({ ...toast, stacked: false }));
-  };
+  const expand = () => changeToasts({ stacked: true });
+  const collapse = () => changeToasts({ stacked: false });
   return {
     attrs,
     subscribe,

package/dist/toast.types.d.mts

@@ -115,6 +115,10 @@ type ToastSchema<O = any> = {
         mounted: boolean;
         initialHeight: number;
         remainingTime: number;
+        rendered: {
+            title: boolean;
+            description: boolean;
+        };
     };
     computed: {
         height: number;
@@ -181,7 +185,7 @@ interface ToastStoreProps {
     removeDelay?: number | undefined;
     /**
      * Whether to pause toast when the user leaves the browser tab
-     * @default false
+     * @default true
      */
     pauseOnPageIdle?: boolean | undefined;
 }
@@ -227,13 +231,16 @@ interface ToastStore<V = any> {
      */
     subscribe: (subscriber: (...args: any[]) => void) => VoidFunction;
     /**
-     * Create a new toast with the given options
+     * Create a toast or update an existing toast with the same ID.
+     * Calls targeting closing toasts are ignored.
      */
     create: (data: Options<V>) => string;
     /**
-     * Update an existing toast with new properties
+     * Update a toast with new properties or a function of its current properties.
+     * Updates to closing toasts are ignored.
+     * Functional updates are also ignored when the toast does not exist.
      */
-    update: (id: string, data: Partial<ToastProps<V>>) => string;
+    update: (id: string, data: MaybeFunction<Partial<ToastProps<V>>, Partial<ToastProps<V>>>) => string;
     /**
      * Remove a toast by its ID
      */

package/dist/toast.types.d.ts

@@ -115,6 +115,10 @@ type ToastSchema<O = any> = {
         mounted: boolean;
         initialHeight: number;
         remainingTime: number;
+        rendered: {
+            title: boolean;
+            description: boolean;
+        };
     };
     computed: {
         height: number;
@@ -181,7 +185,7 @@ interface ToastStoreProps {
     removeDelay?: number | undefined;
     /**
      * Whether to pause toast when the user leaves the browser tab
-     * @default false
+     * @default true
      */
     pauseOnPageIdle?: boolean | undefined;
 }
@@ -227,13 +231,16 @@ interface ToastStore<V = any> {
      */
     subscribe: (subscriber: (...args: any[]) => void) => VoidFunction;
     /**
-     * Create a new toast with the given options
+     * Create a toast or update an existing toast with the same ID.
+     * Calls targeting closing toasts are ignored.
      */
     create: (data: Options<V>) => string;
     /**
-     * Update an existing toast with new properties
+     * Update a toast with new properties or a function of its current properties.
+     * Updates to closing toasts are ignored.
+     * Functional updates are also ignored when the toast does not exist.
      */
-    update: (id: string, data: Partial<ToastProps<V>>) => string;
+    update: (id: string, data: MaybeFunction<Partial<ToastProps<V>>, Partial<ToastProps<V>>>) => string;
     /**
      * Remove a toast by its ID
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.44.0",
-    "@zag-js/core": "1.44.0",
-    "@zag-js/dom-query": "1.44.0",
-    "@zag-js/dismissable": "1.44.0",
-    "@zag-js/utils": "1.44.0",
-    "@zag-js/types": "1.44.0"
+    "@zag-js/anatomy": "1.46.0",
+    "@zag-js/core": "1.46.0",
+    "@zag-js/dom-query": "1.46.0",
+    "@zag-js/dismissable": "1.46.0",
+    "@zag-js/utils": "1.46.0",
+    "@zag-js/types": "1.46.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"