@zag-js/toast 0.10.2 → 0.10.4

package/dist/toast.machine.mjs

@@ -1,8 +1,145 @@
-import {
-  createToastMachine
-} from "./chunk-EQTV3BNM.mjs";
-import "./chunk-DBPKSADW.mjs";
-import "./chunk-DUZD3NLM.mjs";
-export {
-  createToastMachine
-};
+import { createMachine, guards } from '@zag-js/core';
+import { addDomEvent } from '@zag-js/dom-event';
+import { compact } from '@zag-js/utils';
+import { dom } from './toast.dom.mjs';
+import { getToastDuration } from './toast.utils.mjs';
+
+const { not, and, or } = guards;
+function createToastMachine(options = {}) {
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
+  const ctx = compact(restProps);
+  const computedDuration = getToastDuration(duration, type);
+  return createMachine(
+    {
+      id,
+      entry: "invokeOnOpen",
+      initial: type === "loading" ? "persist" : "active",
+      context: {
+        id,
+        type,
+        remaining: computedDuration,
+        duration: computedDuration,
+        removeDelay,
+        createdAt: Date.now(),
+        placement,
+        ...ctx
+      },
+      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"
+          }
+        },
+        persist: {
+          tags: ["visible", "paused"],
+          activities: "trackDocumentVisibility",
+          on: {
+            RESUME: {
+              guard: not("isLoadingType"),
+              target: "active",
+              actions: ["setCreatedAt"]
+            },
+            DISMISS: "dismissing"
+          }
+        },
+        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"
+        }
+      }
+    },
+    {
+      activities: {
+        trackDocumentVisibility(ctx2, _evt, { send }) {
+          if (!ctx2.pauseOnPageIdle)
+            return;
+          const doc = dom.getDoc(ctx2);
+          return addDomEvent(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
+          });
+        }
+      },
+      guards: {
+        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
+        isLoadingType: (ctx2) => ctx2.type === "loading",
+        hasTypeChanged: (ctx2, evt) => evt.toast?.type !== ctx2.type,
+        hasDurationChanged: (ctx2, evt) => evt.toast?.duration !== ctx2.duration
+      },
+      delays: {
+        VISIBLE_DURATION: (ctx2) => ctx2.remaining,
+        REMOVE_DELAY: (ctx2) => ctx2.removeDelay
+      },
+      actions: {
+        setRemainingDuration(ctx2) {
+          ctx2.remaining -= Date.now() - ctx2.createdAt;
+        },
+        setCreatedAt(ctx2) {
+          ctx2.createdAt = Date.now();
+        },
+        notifyParentToRemove(_ctx, _evt, { self }) {
+          self.sendParent({ type: "REMOVE_TOAST", id: self.id });
+        },
+        invokeOnClosing(ctx2) {
+          ctx2.onClosing?.();
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onClose?.();
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpen?.();
+        },
+        invokeOnUpdate(ctx2) {
+          ctx2.onUpdate?.();
+        },
+        setContext(ctx2, evt) {
+          const { duration: duration2, type: type2 } = evt.toast;
+          const time = getToastDuration(duration2, type2);
+          Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
+        }
+      }
+    }
+  );
+}
+
+export { createToastMachine };

package/dist/toast.types.d.ts

@@ -1,8 +1,7 @@
-import { StateMachine, Machine } from '@zag-js/core';
-import { RootProperties, CommonProperties, Direction, RequiredBy, DirectionProperty, Context } from '@zag-js/types';
-
-type Type = "success" | "error" | "loading" | "info" | "custom";
-type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
+import type { Machine, StateMachine as S } from "@zag-js/core";
+import type { CommonProperties, Context, Direction, DirectionProperty, RequiredBy, RootProperties } from "@zag-js/types";
+export type Type = "success" | "error" | "loading" | "info" | "custom";
+export type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
 type SharedContext = {
     /**
      * Whether to pause toast when the user leaves the browser tab
@@ -13,7 +12,7 @@ type SharedContext = {
      */
     pauseOnInteraction?: boolean;
 };
-type ToastOptions = {
+export type ToastOptions = {
     /**
      * The unique id of the toast
      */
@@ -64,11 +63,11 @@ type ToastOptions = {
      */
     onUpdate?: VoidFunction;
 };
-type Options = Partial<ToastOptions>;
-type RenderOptions = Omit<ToastOptions, "render"> & {
+export type Options = Partial<ToastOptions>;
+export type RenderOptions = Omit<ToastOptions, "render"> & {
     dismiss(): void;
 };
-type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
+export type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
     /**
      * The duration for the toast to kept alive before it is removed.
      * Useful for exit transitions.
@@ -87,13 +86,13 @@ type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<T
      */
     remaining: number;
 };
-type MachineState = {
+export type MachineState = {
     value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
     tags: "visible" | "paused" | "updating";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send;
-type Service = Machine<MachineContext, MachineState>;
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send;
+export type Service = Machine<MachineContext, MachineState>;
 type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
     /**
      * The gutter or spacing between toasts
@@ -112,7 +111,7 @@ type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties &
      */
     offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
 };
-type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
+export type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
 type GroupComputedContext = Readonly<{
     /**
      * @computed
@@ -121,20 +120,20 @@ type GroupComputedContext = Readonly<{
     readonly count: number;
 }>;
 type GroupPrivateContext = Context<{}>;
-type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
-type GroupState = StateMachine.State<GroupMachineContext>;
-type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
+export type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
+export type GroupState = S.State<GroupMachineContext>;
+export type GroupSend = (event: S.Event<S.AnyEventObject>) => void;
 type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
-type PromiseOptions<Value> = {
+export type PromiseOptions<Value> = {
     loading: ToastOptions;
     success: MaybeFunction<ToastOptions, Value>;
     error: MaybeFunction<ToastOptions, Error>;
 };
-type GroupProps = {
+export type GroupProps = {
     placement: Placement;
     label?: string;
 };
-type Toaster = {
+export type Toaster = {
     count: number;
     isVisible(id: string): boolean;
     upsert(options: ToastOptions): string | undefined;
@@ -146,5 +145,4 @@ type Toaster = {
     remove(id?: string | undefined): void;
     promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
 };
-
-export { GroupMachineContext, GroupProps, GroupSend, GroupState, MachineContext, MachineState, Options, Placement, PromiseOptions, RenderOptions, Send, Service, State, ToastOptions, Toaster, Type, UserDefinedGroupContext };
+export {};

package/dist/toast.utils.d.ts

@@ -1,10 +1,6 @@
-import { Style } from '@zag-js/types';
-import { Service, Placement, Type, MachineContext, GroupMachineContext } from './toast.types.js';
-import '@zag-js/core';
-
-declare function getToastsByPlacement(toasts: Service[]): Partial<Record<Placement, Service[]>>;
-declare const defaultTimeouts: Record<Type, number>;
-declare function getToastDuration(duration: number | undefined, type: MachineContext["type"]): number;
-declare function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style;
-
-export { defaultTimeouts, getGroupPlacementStyle, getToastDuration, getToastsByPlacement };
+import type { Style } from "@zag-js/types";
+import type { GroupMachineContext, MachineContext, Placement, Service, Type } from "./toast.types";
+export declare function getToastsByPlacement(toasts: Service[]): Partial<Record<Placement, Service[]>>;
+export declare const defaultTimeouts: Record<Type, number>;
+export declare function getToastDuration(duration: number | undefined, type: MachineContext["type"]): number;
+export declare function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style;

package/dist/toast.utils.js

@@ -1,41 +1,17 @@
-"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);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/toast.utils.ts
-var toast_utils_exports = {};
-__export(toast_utils_exports, {
-  defaultTimeouts: () => defaultTimeouts,
-  getGroupPlacementStyle: () => getGroupPlacementStyle,
-  getToastDuration: () => getToastDuration,
-  getToastsByPlacement: () => getToastsByPlacement
-});
-module.exports = __toCommonJS(toast_utils_exports);
 function getToastsByPlacement(toasts) {
   const result = {};
   for (const toast of toasts) {
     const placement = toast.state.context.placement;
-    result[placement] || (result[placement] = []);
+    result[placement] ||= [];
     result[placement].push(toast);
   }
   return result;
 }
-var defaultTimeouts = {
+const defaultTimeouts = {
   info: 5e3,
   error: 5e3,
   success: 2e3,
@@ -84,10 +60,8 @@ function getGroupPlacementStyle(ctx, placement) {
   }
   return styles;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  defaultTimeouts,
-  getGroupPlacementStyle,
-  getToastDuration,
-  getToastsByPlacement
-});
+
+exports.defaultTimeouts = defaultTimeouts;
+exports.getGroupPlacementStyle = getGroupPlacementStyle;
+exports.getToastDuration = getToastDuration;
+exports.getToastsByPlacement = getToastsByPlacement;

package/dist/toast.utils.mjs

@@ -1,12 +1,60 @@
-import {
-  defaultTimeouts,
-  getGroupPlacementStyle,
-  getToastDuration,
-  getToastsByPlacement
-} from "./chunk-DBPKSADW.mjs";
-export {
-  defaultTimeouts,
-  getGroupPlacementStyle,
-  getToastDuration,
-  getToastsByPlacement
+function getToastsByPlacement(toasts) {
+  const result = {};
+  for (const toast of toasts) {
+    const placement = toast.state.context.placement;
+    result[placement] ||= [];
+    result[placement].push(toast);
+  }
+  return result;
+}
+const defaultTimeouts = {
+  info: 5e3,
+  error: 5e3,
+  success: 2e3,
+  loading: Infinity,
+  custom: 5e3
 };
+function getToastDuration(duration, type) {
+  return duration ?? defaultTimeouts[type];
+}
+function getGroupPlacementStyle(ctx, placement) {
+  const offset = ctx.offsets;
+  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const rtl = ctx.dir === "rtl";
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
+  const styles = {
+    position: "fixed",
+    pointerEvents: ctx.count > 0 ? void 0 : "none",
+    display: "flex",
+    flexDirection: "column",
+    "--toast-gutter": ctx.gutter,
+    zIndex: ctx.zIndex
+  };
+  let alignItems = "center";
+  if (isRighty)
+    alignItems = "flex-end";
+  if (isLefty)
+    alignItems = "flex-start";
+  styles.alignItems = alignItems;
+  if (computedPlacement.includes("top")) {
+    const offset2 = computedOffset.top;
+    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
+  }
+  if (computedPlacement.includes("bottom")) {
+    const offset2 = computedOffset.bottom;
+    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
+  }
+  if (!computedPlacement.includes("left")) {
+    const offset2 = computedOffset.right;
+    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
+  }
+  if (!computedPlacement.includes("right")) {
+    const offset2 = computedOffset.left;
+    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+  }
+  return styles;
+}
+
+export { defaultTimeouts, getGroupPlacementStyle, getToastDuration, getToastsByPlacement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,12 +27,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/core": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/core": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -50,13 +50,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/chunk-6TPPYHFP.mjs

@@ -1,182 +0,0 @@
-import {
-  parts
-} from "./chunk-GQHI2OMI.mjs";
-import {
-  getGroupPlacementStyle,
-  getToastsByPlacement
-} from "./chunk-DBPKSADW.mjs";
-import {
-  dom
-} from "./chunk-DUZD3NLM.mjs";
-
-// src/toast-group.connect.ts
-import { subscribe } from "@zag-js/core";
-import { runIfFn, uuid } from "@zag-js/utils";
-var toaster = {};
-function groupConnect(state, send, normalize) {
-  const group = {
-    /**
-     * The total number of toasts
-     */
-    count: state.context.count,
-    /**
-     * The active toasts
-     */
-    toasts: state.context.toasts,
-    /**
-     * The active toasts by placement
-     */
-    toastsByPlacement: getToastsByPlacement(state.context.toasts),
-    /**
-     * Returns whether the toast id is visible
-     */
-    isVisible(id) {
-      if (!state.context.toasts.length)
-        return false;
-      return !!state.context.toasts.find((toast) => toast.id == id);
-    },
-    /**
-     * Function to create a toast.
-     */
-    create(options) {
-      const uid = `toast:${uuid()}`;
-      const id = options.id ? options.id : uid;
-      if (group.isVisible(id))
-        return;
-      send({ type: "ADD_TOAST", toast: { ...options, id } });
-      return id;
-    },
-    /**
-     * Function to create or update a toast.
-     */
-    upsert(options) {
-      const { id } = options;
-      const isVisible = id ? group.isVisible(id) : false;
-      if (isVisible && id != null) {
-        return group.update(id, options);
-      } else {
-        return group.create(options);
-      }
-    },
-    /**
-     * Function to dismiss a toast by id.
-     * If no id is provided, all toasts will be dismissed.
-     */
-    dismiss(id) {
-      if (id == null) {
-        send("DISMISS_ALL");
-      } else if (group.isVisible(id)) {
-        send({ type: "DISMISS_TOAST", id });
-      }
-    },
-    /**
-     * Function to remove a toast by id.
-     * If no id is provided, all toasts will be removed.
-     */
-    remove(id) {
-      if (id == null) {
-        send("REMOVE_ALL");
-      } else if (group.isVisible(id)) {
-        send({ type: "REMOVE_TOAST", id });
-      }
-    },
-    /**
-     * Function to dismiss all toasts by placement.
-     */
-    dismissByPlacement(placement) {
-      const toasts = group.toastsByPlacement[placement];
-      if (toasts) {
-        toasts.forEach((toast) => group.dismiss(toast.id));
-      }
-    },
-    /**
-     * Function to update a toast's options by id.
-     */
-    update(id, options) {
-      if (!group.isVisible(id))
-        return;
-      send({ type: "UPDATE_TOAST", id, toast: options });
-      return id;
-    },
-    /**
-     * Function to create a loading toast.
-     */
-    loading(options) {
-      options.type = "loading";
-      return group.upsert(options);
-    },
-    /**
-     * Function to create a success toast.
-     */
-    success(options) {
-      options.type = "success";
-      return group.upsert(options);
-    },
-    /**
-     * Function to create an error toast.
-     */
-    error(options) {
-      options.type = "error";
-      return group.upsert(options);
-    },
-    /**
-     * Function to create a toast from a promise.
-     * - When the promise resolves, the toast will be updated with the success options.
-     * - When the promise rejects, the toast will be updated with the error options.
-     */
-    promise(promise, options, shared = {}) {
-      const id = group.loading({ ...shared, ...options.loading });
-      promise.then((response) => {
-        const successOptions = runIfFn(options.success, response);
-        group.success({ ...shared, ...successOptions, id });
-      }).catch((error) => {
-        const errorOptions = runIfFn(options.error, error);
-        group.error({ ...shared, ...errorOptions, id });
-      });
-      return promise;
-    },
-    /**
-     * Function to pause a toast by id.
-     */
-    pause(id) {
-      if (id == null) {
-        send("PAUSE_ALL");
-      } else if (group.isVisible(id)) {
-        send({ type: "PAUSE_TOAST", id });
-      }
-    },
-    /**
-     * Function to resume a toast by id.
-     */
-    resume(id) {
-      if (id == null) {
-        send("RESUME_ALL");
-      } else if (group.isVisible(id)) {
-        send({ type: "RESUME_TOAST", id });
-      }
-    },
-    getGroupProps(options) {
-      const { placement, label = "Notifications" } = options;
-      return normalize.element({
-        ...parts.group.attrs,
-        tabIndex: -1,
-        "aria-label": label,
-        id: dom.getGroupId(placement),
-        "data-placement": placement,
-        "aria-live": "polite",
-        role: "region",
-        style: getGroupPlacementStyle(state.context, placement)
-      });
-    },
-    subscribe(fn) {
-      return subscribe(state.context.toasts, () => fn(state.context.toasts));
-    }
-  };
-  Object.assign(toaster, group);
-  return group;
-}
-
-export {
-  toaster,
-  groupConnect
-};