@zag-js/toast 0.1.9 → 0.1.12

package/dist/index.js

@@ -1,37 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -63,11 +34,40 @@ var dataAttr = (guard) => {
 var MAX_Z_INDEX = 2147483647;
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var cast = (v) => v;
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -87,7 +87,7 @@ function trackDocumentVisibility(_doc, callback) {
 // ../../utilities/core/dist/index.mjs
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var uuid = /* @__PURE__ */ (() => {
   let id = 0;
@@ -99,7 +99,7 @@ var uuid = /* @__PURE__ */ (() => {
 function warn(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && void 0 !== "production") {
+  if (c && process.env.NODE_ENV !== "production") {
     console.warn(m);
   }
 }
@@ -108,20 +108,13 @@ function warn(...a) {
 var import_core = require("@zag-js/core");
 
 // src/toast.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getGroupId: (placement) => `toast-group:${placement}`,
   getContainerId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast-title:${ctx.id}`,
+  getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
   getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
-  getPortalId: (ctx) => `toast-portal:${ctx.uid}`,
+  getPortalId: (ctx) => `toast-portal:${ctx.id}`,
   getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
   createPortalEl: (ctx) => {
     const existing = dom.getPortalEl(ctx);
@@ -131,7 +124,7 @@ var dom = {
     portal.id = dom.getPortalId(ctx);
     return portal;
   }
-};
+});
 
 // src/toast.utils.ts
 function getToastsByPlacement(toasts) {
@@ -151,7 +144,7 @@ var defaultTimeouts = {
   custom: 5e3
 };
 function getToastDuration(duration, type) {
-  return duration != null ? duration : defaultTimeouts[type];
+  return duration ?? defaultTimeouts[type];
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
@@ -210,7 +203,7 @@ function groupConnect(state, send, normalize) {
       const id = options.id ? options.id : uid;
       if (group2.isVisible(id))
         return;
-      send({ type: "ADD_TOAST", toast: __spreadProps(__spreadValues({}, options), { id }) });
+      send({ type: "ADD_TOAST", toast: { ...options, id } });
       return id;
     },
     upsert(options) {
@@ -261,13 +254,13 @@ function groupConnect(state, send, normalize) {
       return group2.upsert(options);
     },
     promise(promise, options, shared = {}) {
-      const id = group2.loading(__spreadValues(__spreadValues({}, shared), options.loading));
+      const id = group2.loading({ ...shared, ...options.loading });
       promise.then((response) => {
         const successOptions = runIfFn2(options.success, response);
-        group2.success(__spreadProps(__spreadValues(__spreadValues({}, shared), successOptions), { id }));
+        group2.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
         const errorOptions = runIfFn2(options.error, error);
-        group2.error(__spreadProps(__spreadValues(__spreadValues({}, shared), errorOptions), { id }));
+        group2.error({ ...shared, ...errorOptions, id });
       });
       return promise;
     },
@@ -323,178 +316,174 @@ var import_core3 = require("@zag-js/core");
 var import_core2 = require("@zag-js/core");
 var { not, and, or } = import_core2.guards;
 function createToastMachine(options = {}) {
-  const _a = options, { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500 } = _a, rest = __objRest(_a, ["type", "duration", "id", "placement", "removeDelay"]);
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
   const __duration = getToastDuration(duration, type);
-  return (0, import_core2.createMachine)({
-    id,
-    entry: "invokeOnOpen",
-    initial: type === "loading" ? "persist" : "active",
-    context: __spreadValues({
+  return (0, import_core2.createMachine)(
+    {
       id,
-      type,
-      remaining: __duration,
-      duration: __duration,
-      removeDelay,
-      createdAt: Date.now(),
-      placement
-    }, rest),
-    on: {
-      UPDATE: [
-        {
-          guard: and("hasTypeChanged", "isChangingToLoading"),
-          target: "persist",
-          actions: ["setContext", "invokeOnUpdate"]
-        },
-        {
-          guard: or("hasDurationChanged", "hasTypeChanged"),
-          target: "active:temp",
-          actions: ["setContext", "invokeOnUpdate"]
-        },
-        {
-          actions: ["setContext", "invokeOnUpdate"]
-        }
-      ]
-    },
-    states: {
-      "active:temp": {
-        tags: ["visible", "updating"],
-        after: {
-          0: "active"
-        }
+      entry: "invokeOnOpen",
+      initial: type === "loading" ? "persist" : "active",
+      context: {
+        id,
+        type,
+        remaining: __duration,
+        duration: __duration,
+        removeDelay,
+        createdAt: Date.now(),
+        placement,
+        ...rest
       },
-      persist: {
-        tags: ["visible", "paused"],
-        activities: "trackDocumentVisibility",
-        on: {
-          RESUME: {
-            guard: not("isLoadingType"),
-            target: "active",
-            actions: ["setCreatedAt"]
+      on: {
+        UPDATE: [
+          {
+            guard: and("hasTypeChanged", "isChangingToLoading"),
+            target: "persist",
+            actions: ["setContext", "invokeOnUpdate"]
           },
-          DISMISS: "dismissing"
-        }
+          {
+            guard: or("hasDurationChanged", "hasTypeChanged"),
+            target: "active:temp",
+            actions: ["setContext", "invokeOnUpdate"]
+          },
+          {
+            actions: ["setContext", "invokeOnUpdate"]
+          }
+        ]
       },
-      active: {
-        tags: ["visible"],
-        activities: "trackDocumentVisibility",
-        after: {
-          VISIBLE_DURATION: "dismissing"
+      states: {
+        "active:temp": {
+          tags: ["visible", "updating"],
+          after: {
+            0: "active"
+          }
         },
-        on: {
-          DISMISS: "dismissing",
-          PAUSE: {
-            target: "persist",
-            actions: "setRemainingDuration"
+        persist: {
+          tags: ["visible", "paused"],
+          activities: "trackDocumentVisibility",
+          on: {
+            RESUME: {
+              guard: not("isLoadingType"),
+              target: "active",
+              actions: ["setCreatedAt"]
+            },
+            DISMISS: "dismissing"
           }
-        }
-      },
-      dismissing: {
-        entry: "invokeOnClosing",
-        after: {
-          REMOVE_DELAY: {
-            target: "inactive",
-            actions: "notifyParentToRemove"
+        },
+        active: {
+          tags: ["visible"],
+          activities: "trackDocumentVisibility",
+          after: {
+            VISIBLE_DURATION: "dismissing"
+          },
+          on: {
+            DISMISS: "dismissing",
+            PAUSE: {
+              target: "persist",
+              actions: "setRemainingDuration"
+            }
           }
+        },
+        dismissing: {
+          entry: "invokeOnClosing",
+          after: {
+            REMOVE_DELAY: {
+              target: "inactive",
+              actions: "notifyParentToRemove"
+            }
+          }
+        },
+        inactive: {
+          entry: "invokeOnClose",
+          type: "final"
         }
-      },
-      inactive: {
-        entry: "invokeOnClose",
-        type: "final"
-      }
-    }
-  }, {
-    activities: {
-      trackDocumentVisibility(ctx, _evt, { send }) {
-        if (!ctx.pauseOnPageIdle)
-          return;
-        return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
-          send(hidden ? "PAUSE" : "RESUME");
-        });
       }
     },
-    guards: {
-      isChangingToLoading: (_, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) === "loading";
-      },
-      isLoadingType: (ctx) => ctx.type === "loading",
-      hasTypeChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.type) !== ctx.type;
-      },
-      hasDurationChanged: (ctx, evt) => {
-        var _a2;
-        return ((_a2 = evt.toast) == null ? void 0 : _a2.duration) !== ctx.duration;
-      }
-    },
-    delays: {
-      VISIBLE_DURATION: (ctx) => ctx.remaining,
-      REMOVE_DELAY: (ctx) => ctx.removeDelay
-    },
-    actions: {
-      setRemainingDuration(ctx) {
-        ctx.remaining -= Date.now() - ctx.createdAt;
-      },
-      setCreatedAt(ctx) {
-        ctx.createdAt = Date.now();
-      },
-      notifyParentToRemove(_ctx, _evt, { self }) {
-        self.sendParent({ type: "REMOVE_TOAST", id: self.id });
-      },
-      invokeOnClosing(ctx) {
-        var _a2;
-        (_a2 = ctx.onClosing) == null ? void 0 : _a2.call(ctx);
-      },
-      invokeOnClose(ctx) {
-        var _a2;
-        (_a2 = ctx.onClose) == null ? void 0 : _a2.call(ctx);
+    {
+      activities: {
+        trackDocumentVisibility(ctx, _evt, { send }) {
+          if (!ctx.pauseOnPageIdle)
+            return;
+          return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
+            send(hidden ? "PAUSE" : "RESUME");
+          });
+        }
       },
-      invokeOnOpen(ctx) {
-        var _a2;
-        (_a2 = ctx.onOpen) == null ? void 0 : _a2.call(ctx);
+      guards: {
+        isChangingToLoading: (_, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
+        },
+        isLoadingType: (ctx) => ctx.type === "loading",
+        hasTypeChanged: (ctx, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
+        },
+        hasDurationChanged: (ctx, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
+        }
       },
-      invokeOnUpdate(ctx) {
-        var _a2;
-        (_a2 = ctx.onUpdate) == null ? void 0 : _a2.call(ctx);
+      delays: {
+        VISIBLE_DURATION: (ctx) => ctx.remaining,
+        REMOVE_DELAY: (ctx) => ctx.removeDelay
       },
-      setContext(ctx, evt) {
-        const { duration: duration2, type: type2 } = evt.toast;
-        const time = getToastDuration(duration2, type2);
-        Object.assign(ctx, __spreadProps(__spreadValues({}, evt.toast), { duration: time, remaining: time }));
+      actions: {
+        setRemainingDuration(ctx) {
+          ctx.remaining -= Date.now() - ctx.createdAt;
+        },
+        setCreatedAt(ctx) {
+          ctx.createdAt = Date.now();
+        },
+        notifyParentToRemove(_ctx, _evt, { self }) {
+          self.sendParent({ type: "REMOVE_TOAST", id: self.id });
+        },
+        invokeOnClosing(ctx) {
+          var _a;
+          (_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnClose(ctx) {
+          var _a;
+          (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnOpen(ctx) {
+          var _a;
+          (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnUpdate(ctx) {
+          var _a;
+          (_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
+        },
+        setContext(ctx, evt) {
+          const { duration: duration2, type: type2 } = evt.toast;
+          const time = getToastDuration(duration2, type2);
+          Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
+        }
       }
     }
-  });
+  );
 }
 
 // src/toast-group.machine.ts
-function groupMachine(ctx = {}) {
+function groupMachine(ctx) {
   return (0, import_core3.createMachine)({
     id: "toaster",
     initial: "active",
-    context: __spreadValues({
+    context: {
       dir: "ltr",
       max: Number.MAX_SAFE_INTEGER,
-      uid: "",
       toasts: [],
       gutter: "1rem",
       zIndex: MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
-      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
-    }, ctx),
+      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
+      ...ctx
+    },
     computed: {
       count: (ctx2) => ctx2.toasts.length
     },
     on: {
-      SETUP: {
-        actions: (ctx2, evt) => {
-          ctx2.uid = evt.id;
-          if (evt.doc)
-            ctx2.doc = (0, import_core3.ref)(evt.doc);
-          if (evt.root)
-            ctx2.rootNode = (0, import_core3.ref)(evt.root);
-        }
-      },
+      SETUP: {},
       PAUSE_TOAST: {
         actions: (_ctx, evt, { self }) => {
           self.sendChild("PAUSE", evt.id);
@@ -518,13 +507,13 @@ function groupMachine(ctx = {}) {
       ADD_TOAST: {
         guard: (ctx2) => ctx2.toasts.length < ctx2.max,
         actions: (ctx2, evt, { self }) => {
-          var _a;
-          const options = __spreadProps(__spreadValues({}, evt.toast), {
+          const options = {
+            ...evt.toast,
             pauseOnPageIdle: ctx2.pauseOnPageIdle,
             pauseOnInteraction: ctx2.pauseOnInteraction,
             dir: ctx2.dir,
-            doc: (0, import_core3.ref)((_a = ctx2.doc) != null ? _a : document)
-          });
+            getRootNode: ctx2.getRootNode
+          };
           const toast = createToastMachine(options);
           const actor = self.spawn(toast);
           ctx2.toasts.push(actor);
@@ -575,6 +564,7 @@ function connect(state, send, normalize) {
   return {
     type: state.context.type,
     title: state.context.title,
+    description: state.context.description,
     placement,
     isVisible,
     isPaused,
@@ -647,6 +637,10 @@ function connect(state, send, normalize) {
       "data-part": "title",
       id: dom.getTitleId(state.context)
     }),
+    descriptionProps: normalize.element({
+      "data-part": "description",
+      id: dom.getDescriptionId(state.context)
+    }),
     closeButtonProps: normalize.button({
       id: dom.getCloseButtonId(state.context),
       "data-part": "close-button",
@@ -685,3 +679,10 @@ function api() {
     return toaster;
   }
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  api,
+  connect,
+  createMachine,
+  group
+});