@zag-js/toast 0.1.9 → 0.1.12

package/dist/index.mjs

@@ -1,35 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-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;
-};
-
 // ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
@@ -37,11 +5,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);
@@ -61,7 +58,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;
@@ -73,7 +70,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);
   }
 }
@@ -82,20 +79,13 @@ function warn(...a) {
 import { subscribe } from "@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);
@@ -105,7 +95,7 @@ var dom = {
     portal.id = dom.getPortalId(ctx);
     return portal;
   }
-};
+});
 
 // src/toast.utils.ts
 function getToastsByPlacement(toasts) {
@@ -125,7 +115,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;
@@ -184,7 +174,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) {
@@ -235,13 +225,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;
     },
@@ -291,184 +281,180 @@ function groupConnect(state, send, normalize) {
 }
 
 // src/toast-group.machine.ts
-import { createMachine as createMachine2, ref } from "@zag-js/core";
+import { createMachine as createMachine2 } from "@zag-js/core";
 
 // src/toast.machine.ts
 import { createMachine, guards } from "@zag-js/core";
 var { not, and, or } = 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 createMachine({
-    id,
-    entry: "invokeOnOpen",
-    initial: type === "loading" ? "persist" : "active",
-    context: __spreadValues({
+  return 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 createMachine2({
     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 = ref(evt.doc);
-          if (evt.root)
-            ctx2.rootNode = ref(evt.root);
-        }
-      },
+      SETUP: {},
       PAUSE_TOAST: {
         actions: (_ctx, evt, { self }) => {
           self.sendChild("PAUSE", evt.id);
@@ -492,13 +478,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: ref((_a = ctx2.doc) != null ? _a : document)
-          });
+            getRootNode: ctx2.getRootNode
+          };
           const toast = createToastMachine(options);
           const actor = self.spawn(toast);
           ctx2.toasts.push(actor);
@@ -549,6 +535,7 @@ function connect(state, send, normalize) {
   return {
     type: state.context.type,
     title: state.context.title,
+    description: state.context.description,
     placement,
     isVisible,
     isPaused,
@@ -621,6 +608,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,18 +29,21 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.1.6",
-    "@zag-js/types": "0.2.1",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.9",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/toast-group.connect.d.ts

@@ -1,24 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { GroupMachineContext, GroupProps, GroupSend, GroupState, Placement, PromiseOptions, Toaster, Options } from "./toast.types";
-export declare let toaster: Toaster;
-export declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
-    count: number;
-    toasts: import("./toast.types").Service[];
-    toastsByPlacement: Partial<Record<Placement, import("./toast.types").Service[]>>;
-    isVisible(id: string): boolean;
-    create(options: Options): string;
-    upsert(options: Options): string;
-    dismiss(id?: string): void;
-    remove(id?: string): void;
-    dismissByPlacement(placement: Placement): void;
-    update(id: string, options: Options): string;
-    loading(options: Options): string;
-    success(options: Options): string;
-    error(options: Options): string;
-    promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
-    pause(id?: string): void;
-    resume(id?: string): void;
-    getGroupProps(options: GroupProps): T["element"];
-    createPortal(): HTMLElement;
-    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
-};

package/dist/toast-group.machine.d.ts

@@ -1,2 +0,0 @@
-import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types";
-export declare function groupMachine(ctx?: Partial<UserDefinedGroupContext>): import("@zag-js/core").Machine<GroupMachineContext, import("@zag-js/core").StateMachine.StateSchema, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/toast.connect.d.ts

@@ -1,17 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { Send, State } from "./toast.types";
-export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    type: import("./toast.types").Type;
-    title: string;
-    placement: import("./toast.types").Placement;
-    isVisible: boolean;
-    isPaused: boolean;
-    pause(): void;
-    resume(): void;
-    dismiss(): void;
-    rootProps: T["element"];
-    progressbarProps: T["element"];
-    titleProps: T["element"];
-    closeButtonProps: T["button"];
-    render(): any;
-};

package/dist/toast.dom.d.ts

@@ -1,12 +0,0 @@
-import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types";
-export declare const dom: {
-    getDoc: (ctx: Ctx | GroupCtx) => Document;
-    getRootNode: (ctx: Ctx | GroupCtx) => Document | ShadowRoot;
-    getGroupId: (placement: Placement) => string;
-    getContainerId: (ctx: Ctx) => string;
-    getTitleId: (ctx: Ctx) => string;
-    getCloseButtonId: (ctx: Ctx) => string;
-    getPortalId: (ctx: GroupCtx) => string;
-    getPortalEl: (ctx: GroupCtx) => HTMLElement;
-    createPortalEl: (ctx: GroupCtx) => HTMLElement;
-};

package/dist/toast.machine.d.ts

@@ -1,2 +0,0 @@
-import type { MachineContext, MachineState, Options } from "./toast.types";
-export declare function createToastMachine(options?: Options): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;