@zag-js/toast 0.24.0 → 0.26.0

package/dist/index.d.mts

@@ -1,45 +1,54 @@
+import { RootProperties, CommonProperties, Direction, PropTypes, DirectionProperty, Context, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
-import * as _zag_js_types from '@zag-js/types';
-import { RootProperties, CommonProperties, Direction, PropTypes, DirectionProperty, Context, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
 type Type = "success" | "error" | "loading" | "info" | "custom";
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
-interface ToastOptions {
+interface BaseOptions {
     /**
-     * The unique id of the toast
+     * Whether to pause toast when the user leaves the browser tab
      */
-    id: string;
+    pauseOnPageIdle?: boolean;
     /**
-     * The type of the toast
+     * Whether to pause the toast when interacted with
      */
-    type: Type;
+    pauseOnInteraction?: boolean;
+    /**
+     * The duration the toast will be visible
+     */
+    duration?: number;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay?: number;
     /**
      * The placement of the toast
      */
-    placement: Placement;
+    placement?: Placement;
     /**
-     * The message of the toast
+     * Custom function to render the toast element.
      */
-    title?: string;
+    render?: (options: MachineApi<any>) => any;
+}
+interface ToastOptions {
     /**
-     * The description of the toast
+     * The unique id of the toast
      */
-    description?: string;
+    id: string;
     /**
-     * The duration the toast will be visible
+     * The type of the toast
      */
-    duration: number;
+    type: Type;
     /**
-     * Custom function to render the toast element.
+     * The message of the toast
      */
-    render?: (options: RenderOptions) => any;
+    title?: string;
     /**
-     * The duration for the toast to kept alive before it is removed.
-     * Useful for exit transitions.
+     * The description of the toast
      */
-    removeDelay?: number;
+    description?: string;
     /**
      * Function called when the toast has been closed and removed
      */
@@ -57,25 +66,8 @@ interface ToastOptions {
      */
     onUpdate?: VoidFunction;
 }
-type Options = Partial<ToastOptions>;
-type RenderOptions = Omit<ToastOptions, "render"> & {
-    dismiss(): void;
-};
-interface SharedContext {
-    /**
-     * Whether to pause toast when the user leaves the browser tab
-     */
-    pauseOnPageIdle?: boolean;
-    /**
-     * Whether to pause the toast when interacted with
-     */
-    pauseOnInteraction?: boolean;
-    /**
-     * The default options for the toast
-     */
-    defaultOptions?: Partial<Pick<ToastOptions, "duration" | "removeDelay" | "placement">>;
-}
-interface MachineContext extends SharedContext, RootProperties, CommonProperties, Omit<ToastOptions, "removeDelay"> {
+type Options = Partial<ToastOptions & BaseOptions>;
+interface MachineContext extends BaseOptions, RootProperties, CommonProperties, Omit<ToastOptions, "removeDelay"> {
     /**
      * The duration for the toast to kept alive before it is removed.
      * Useful for exit transitions.
@@ -101,7 +93,7 @@ interface MachineState {
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send;
 type Service = Machine<MachineContext, MachineState>;
-interface GroupPublicContext extends SharedContext, DirectionProperty, CommonProperties {
+interface GroupPublicContext extends BaseOptions, DirectionProperty, CommonProperties {
     /**
      * The gutter or spacing between toasts
      */
@@ -210,7 +202,7 @@ interface GroupMachineApi<T extends PropTypes = PropTypes> {
      * - 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<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
+    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: Partial<ToastOptions>): Promise<T>;
     /**
      * Function to subscribe to the toast group.
      */
@@ -258,10 +250,6 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to instantly dismiss the toast.
      */
     dismiss(): void;
-    /**
-     * Function render the toast in the DOM (based on the defined `render` property)
-     */
-    render(): any;
     rootProps: T["element"];
     titleProps: T["element"];
     descriptionProps: T["element"];
@@ -274,7 +262,7 @@ declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_cor
 
 declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "closeTrigger">;
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
@@ -282,6 +270,5 @@ declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
-declare function api(): GroupMachineApi<_zag_js_types.PropTypes> | undefined;
 
-export { MachineApi as Api, GroupMachineApi as GroupApi, GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, anatomy, api, connect, createToastMachine as createMachine, group };
+export { MachineApi as Api, GroupMachineApi as GroupApi, GroupMachineContext, MachineContext, MachineState, Placement, PromiseOptions, Service, ToastOptions, Type, anatomy, connect, createToastMachine as createMachine, group };

package/dist/index.d.ts

@@ -1,45 +1,54 @@
+import { RootProperties, CommonProperties, Direction, PropTypes, DirectionProperty, Context, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
-import * as _zag_js_types from '@zag-js/types';
-import { RootProperties, CommonProperties, Direction, PropTypes, DirectionProperty, Context, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
 type Type = "success" | "error" | "loading" | "info" | "custom";
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
-interface ToastOptions {
+interface BaseOptions {
     /**
-     * The unique id of the toast
+     * Whether to pause toast when the user leaves the browser tab
      */
-    id: string;
+    pauseOnPageIdle?: boolean;
     /**
-     * The type of the toast
+     * Whether to pause the toast when interacted with
      */
-    type: Type;
+    pauseOnInteraction?: boolean;
+    /**
+     * The duration the toast will be visible
+     */
+    duration?: number;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay?: number;
     /**
      * The placement of the toast
      */
-    placement: Placement;
+    placement?: Placement;
     /**
-     * The message of the toast
+     * Custom function to render the toast element.
      */
-    title?: string;
+    render?: (options: MachineApi<any>) => any;
+}
+interface ToastOptions {
     /**
-     * The description of the toast
+     * The unique id of the toast
      */
-    description?: string;
+    id: string;
     /**
-     * The duration the toast will be visible
+     * The type of the toast
      */
-    duration: number;
+    type: Type;
     /**
-     * Custom function to render the toast element.
+     * The message of the toast
      */
-    render?: (options: RenderOptions) => any;
+    title?: string;
     /**
-     * The duration for the toast to kept alive before it is removed.
-     * Useful for exit transitions.
+     * The description of the toast
      */
-    removeDelay?: number;
+    description?: string;
     /**
      * Function called when the toast has been closed and removed
      */
@@ -57,25 +66,8 @@ interface ToastOptions {
      */
     onUpdate?: VoidFunction;
 }
-type Options = Partial<ToastOptions>;
-type RenderOptions = Omit<ToastOptions, "render"> & {
-    dismiss(): void;
-};
-interface SharedContext {
-    /**
-     * Whether to pause toast when the user leaves the browser tab
-     */
-    pauseOnPageIdle?: boolean;
-    /**
-     * Whether to pause the toast when interacted with
-     */
-    pauseOnInteraction?: boolean;
-    /**
-     * The default options for the toast
-     */
-    defaultOptions?: Partial<Pick<ToastOptions, "duration" | "removeDelay" | "placement">>;
-}
-interface MachineContext extends SharedContext, RootProperties, CommonProperties, Omit<ToastOptions, "removeDelay"> {
+type Options = Partial<ToastOptions & BaseOptions>;
+interface MachineContext extends BaseOptions, RootProperties, CommonProperties, Omit<ToastOptions, "removeDelay"> {
     /**
      * The duration for the toast to kept alive before it is removed.
      * Useful for exit transitions.
@@ -101,7 +93,7 @@ interface MachineState {
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send;
 type Service = Machine<MachineContext, MachineState>;
-interface GroupPublicContext extends SharedContext, DirectionProperty, CommonProperties {
+interface GroupPublicContext extends BaseOptions, DirectionProperty, CommonProperties {
     /**
      * The gutter or spacing between toasts
      */
@@ -210,7 +202,7 @@ interface GroupMachineApi<T extends PropTypes = PropTypes> {
      * - 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<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
+    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: Partial<ToastOptions>): Promise<T>;
     /**
      * Function to subscribe to the toast group.
      */
@@ -258,10 +250,6 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to instantly dismiss the toast.
      */
     dismiss(): void;
-    /**
-     * Function render the toast in the DOM (based on the defined `render` property)
-     */
-    render(): any;
     rootProps: T["element"];
     titleProps: T["element"];
     descriptionProps: T["element"];
@@ -274,7 +262,7 @@ declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_cor
 
 declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "closeTrigger">;
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
@@ -282,6 +270,5 @@ declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
-declare function api(): GroupMachineApi<_zag_js_types.PropTypes> | undefined;
 
-export { MachineApi as Api, GroupMachineApi as GroupApi, GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, anatomy, api, connect, createToastMachine as createMachine, group };
+export { MachineApi as Api, GroupMachineApi as GroupApi, GroupMachineContext, MachineContext, MachineState, Placement, PromiseOptions, Service, ToastOptions, Type, anatomy, connect, createToastMachine as createMachine, group };

package/dist/index.js

@@ -21,14 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   anatomy: () => anatomy,
-  api: () => api,
   connect: () => connect,
   createMachine: () => createToastMachine,
   group: () => group
 });
 module.exports = __toCommonJS(src_exports);
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_utils4 = require("@zag-js/utils");
 
 // src/toast-group.connect.ts
 var import_core = require("@zag-js/core");
@@ -46,8 +43,7 @@ var dom = (0, import_dom_query.createScope)({
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
   getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
+  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`
 });
 
 // src/toast.utils.ts
@@ -111,94 +107,96 @@ function getGroupPlacementStyle(ctx, placement) {
 }
 
 // src/toast-group.connect.ts
-var toaster = {};
 function groupConnect(state, send, normalize) {
-  const group2 = {
+  const toastsByPlacement = getToastsByPlacement(state.context.toasts);
+  function isVisible(id) {
+    if (!state.context.toasts.length)
+      return false;
+    return !!state.context.toasts.find((toast) => toast.id == id);
+  }
+  function create(options) {
+    const uid = `toast:${(0, import_utils.uuid)()}`;
+    const id = options.id ? options.id : uid;
+    if (isVisible(id))
+      return;
+    send({ type: "ADD_TOAST", toast: { ...options, id } });
+    return id;
+  }
+  function update(id, options) {
+    if (!isVisible(id))
+      return;
+    send({ type: "UPDATE_TOAST", id, toast: options });
+    return id;
+  }
+  function upsert(options) {
+    const { id } = options;
+    const visible = id ? isVisible(id) : false;
+    if (visible && id != null) {
+      return update(id, options);
+    } else {
+      return create(options);
+    }
+  }
+  function dismiss(id) {
+    if (id == null) {
+      send("DISMISS_ALL");
+    } else if (isVisible(id)) {
+      send({ type: "DISMISS_TOAST", id });
+    }
+  }
+  return {
     count: state.context.count,
     toasts: state.context.toasts,
-    toastsByPlacement: getToastsByPlacement(state.context.toasts),
-    isVisible(id) {
-      if (!state.context.toasts.length)
-        return false;
-      return !!state.context.toasts.find((toast) => toast.id == id);
-    },
-    create(options) {
-      const uid = `toast:${(0, import_utils.uuid)()}`;
-      const id = options.id ? options.id : uid;
-      if (group2.isVisible(id))
-        return;
-      send({ type: "ADD_TOAST", toast: { ...options, id } });
-      return id;
-    },
-    upsert(options) {
-      const { id } = options;
-      const isVisible = id ? group2.isVisible(id) : false;
-      if (isVisible && id != null) {
-        return group2.update(id, options);
-      } else {
-        return group2.create(options);
-      }
-    },
-    dismiss(id) {
-      if (id == null) {
-        send("DISMISS_ALL");
-      } else if (group2.isVisible(id)) {
-        send({ type: "DISMISS_TOAST", id });
-      }
-    },
+    toastsByPlacement,
+    isVisible,
+    create,
+    update,
+    upsert,
+    dismiss,
     remove(id) {
       if (id == null) {
         send("REMOVE_ALL");
-      } else if (group2.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "REMOVE_TOAST", id });
       }
     },
     dismissByPlacement(placement) {
-      const toasts = group2.toastsByPlacement[placement];
+      const toasts = toastsByPlacement[placement];
       if (toasts) {
-        toasts.forEach((toast) => group2.dismiss(toast.id));
+        toasts.forEach((toast) => dismiss(toast.id));
       }
     },
-    update(id, options) {
-      if (!group2.isVisible(id))
-        return;
-      send({ type: "UPDATE_TOAST", id, toast: options });
-      return id;
-    },
     loading(options) {
-      options.type = "loading";
-      return group2.upsert(options);
+      return upsert({ ...options, type: "loading" });
     },
     success(options) {
-      options.type = "success";
-      return group2.upsert(options);
+      return upsert({ ...options, type: "success" });
     },
     error(options) {
-      options.type = "error";
-      return group2.upsert(options);
+      return upsert({ ...options, type: "error" });
     },
     promise(promise, options, shared = {}) {
-      const id = group2.loading({ ...shared, ...options.loading });
+      const id = upsert({ ...shared, ...options.loading, type: "loading" });
       promise.then((response) => {
         const successOptions = (0, import_utils.runIfFn)(options.success, response);
-        group2.success({ ...shared, ...successOptions, id });
+        upsert({ ...shared, ...successOptions, id, type: "success" });
       }).catch((error) => {
         const errorOptions = (0, import_utils.runIfFn)(options.error, error);
-        group2.error({ ...shared, ...errorOptions, id });
+        upsert({ ...shared, ...errorOptions, id, type: "error" });
       });
       return promise;
     },
     pause(id) {
       if (id == null) {
         send("PAUSE_ALL");
-      } else if (group2.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "PAUSE_TOAST", id });
       }
     },
     resume(id) {
       if (id == null) {
         send("RESUME_ALL");
-      } else if (group2.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "RESUME_TOAST", id });
       }
     },
@@ -206,6 +204,7 @@ function groupConnect(state, send, normalize) {
       const { placement, label = "Notifications" } = options;
       return normalize.element({
         ...parts.group.attrs,
+        dir: state.context.dir,
         tabIndex: -1,
         "aria-label": `${placement} ${label}`,
         id: dom.getGroupId(placement),
@@ -219,8 +218,6 @@ function groupConnect(state, send, normalize) {
       return (0, import_core.subscribe)(state.context.toasts, () => fn(state.context.toasts));
     }
   };
-  Object.assign(toaster, group2);
-  return group2;
 }
 
 // src/toast-group.machine.ts
@@ -416,7 +413,10 @@ function groupMachine(userContext) {
         guard: (ctx2) => ctx2.toasts.length < ctx2.max,
         actions: (ctx2, evt, { self }) => {
           const options = {
-            ...ctx2.defaultOptions,
+            placement: ctx2.placement,
+            duration: ctx2.duration,
+            removeDelay: ctx2.removeDelay,
+            render: ctx2.render,
             ...evt.toast,
             pauseOnPageIdle: ctx2.pauseOnPageIdle,
             pauseOnInteraction: ctx2.pauseOnInteraction,
@@ -484,19 +484,6 @@ function connect(state, send, normalize) {
     dismiss() {
       send("DISMISS");
     },
-    render() {
-      return state.context.render?.({
-        id: state.context.id,
-        type: state.context.type,
-        duration: state.context.duration,
-        title: state.context.title,
-        placement: state.context.placement,
-        description: state.context.description,
-        dismiss() {
-          send("DISMISS");
-        }
-      });
-    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       dir: state.context.dir,
@@ -566,17 +553,9 @@ var group = {
   connect: groupConnect,
   machine: groupMachine
 };
-function api() {
-  if (!(0, import_dom_query3.isDom)()) {
-    (0, import_utils4.warn)("toast.api() is only available in the browser");
-  } else {
-    return toaster;
-  }
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   anatomy,
-  api,
   connect,
   createMachine,
   group