@zag-js/toast 1.38.1 → 1.39.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ToastGroupSchema } from './toast.types.mjs';
-export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, Type } from './toast.types.mjs';
+export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.mjs';
 import { groupConnect } from './toast-group.connect.mjs';
 export { anatomy } from './toast.anatomy.mjs';
 export { connect } from './toast.connect.mjs';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ToastGroupSchema } from './toast.types.js';
-export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, Type } from './toast.types.js';
+export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.js';
 import { groupConnect } from './toast-group.connect.js';
 export { anatomy } from './toast.anatomy.js';
 export { connect } from './toast.connect.js';

package/dist/toast.anatomy.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger">;
-declare const parts: Record<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const parts: Record<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/toast.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger">;
-declare const parts: Record<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const parts: Record<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/toast.store.js

@@ -27,6 +27,25 @@ var import_utils = require("@zag-js/utils");
 var withDefaults = (options, defaults) => {
   return { ...defaults, ...(0, import_utils.compact)(options) };
 };
+var priorities = {
+  error: [1, 2],
+  warning: [3, 6],
+  loading: [4, 5],
+  success: [5, 7],
+  info: [6, 8]
+};
+var DEFAULT_TYPE = "info";
+var getPriorityForType = (type, hasAction) => {
+  const [actionable, nonActionable] = priorities[type ?? DEFAULT_TYPE];
+  return hasAction ? actionable : nonActionable;
+};
+var sortToastsByPriority = (toastArray) => {
+  return toastArray.sort((a, b) => {
+    const priorityA = a.priority ?? getPriorityForType(a.type, !!a.action);
+    const priorityB = b.priority ?? getPriorityForType(b.type, !!b.action);
+    return priorityA - priorityB;
+  });
+};
 function createToastStore(props = {}) {
   const attrs = withDefaults(props, {
     placement: "bottom",
@@ -62,6 +81,7 @@ function createToastStore(props = {}) {
     toasts.unshift(data);
   };
   const processQueue = () => {
+    toastQueue = sortToastsByPriority(toastQueue);
     while (toastQueue.length > 0 && toasts.length < attrs.max) {
       const nextToast = toastQueue.shift();
       if (nextToast) {
@@ -82,15 +102,17 @@ function createToastStore(props = {}) {
         return toast;
       });
     } else {
-      addToast({
+      const newToast = {
         id,
         duration: attrs.duration,
         removeDelay: attrs.removeDelay,
-        type: "info",
+        type: DEFAULT_TYPE,
         ...data,
         stacked: !attrs.overlap,
         gap: attrs.gap
-      });
+      };
+      const priority = newToast.priority ?? getPriorityForType(newToast.type, !!newToast.action);
+      addToast({ ...newToast, priority });
     }
     return id;
   };
@@ -152,7 +174,7 @@ function createToastStore(props = {}) {
       } else if (options.success !== void 0) {
         removable = false;
         const successOptions = (0, import_utils.runIfFn)(options.success, response);
-        create({ ...shared, ...successOptions, id, type: "success" });
+        create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
       }
     }).catch(async (error2) => {
       result = ["reject", error2];

package/dist/toast.store.mjs

@@ -3,6 +3,25 @@ import { compact, runIfFn, uuid, warn } from "@zag-js/utils";
 var withDefaults = (options, defaults) => {
   return { ...defaults, ...compact(options) };
 };
+var priorities = {
+  error: [1, 2],
+  warning: [3, 6],
+  loading: [4, 5],
+  success: [5, 7],
+  info: [6, 8]
+};
+var DEFAULT_TYPE = "info";
+var getPriorityForType = (type, hasAction) => {
+  const [actionable, nonActionable] = priorities[type ?? DEFAULT_TYPE];
+  return hasAction ? actionable : nonActionable;
+};
+var sortToastsByPriority = (toastArray) => {
+  return toastArray.sort((a, b) => {
+    const priorityA = a.priority ?? getPriorityForType(a.type, !!a.action);
+    const priorityB = b.priority ?? getPriorityForType(b.type, !!b.action);
+    return priorityA - priorityB;
+  });
+};
 function createToastStore(props = {}) {
   const attrs = withDefaults(props, {
     placement: "bottom",
@@ -38,6 +57,7 @@ function createToastStore(props = {}) {
     toasts.unshift(data);
   };
   const processQueue = () => {
+    toastQueue = sortToastsByPriority(toastQueue);
     while (toastQueue.length > 0 && toasts.length < attrs.max) {
       const nextToast = toastQueue.shift();
       if (nextToast) {
@@ -58,15 +78,17 @@ function createToastStore(props = {}) {
         return toast;
       });
     } else {
-      addToast({
+      const newToast = {
         id,
         duration: attrs.duration,
         removeDelay: attrs.removeDelay,
-        type: "info",
+        type: DEFAULT_TYPE,
         ...data,
         stacked: !attrs.overlap,
         gap: attrs.gap
-      });
+      };
+      const priority = newToast.priority ?? getPriorityForType(newToast.type, !!newToast.action);
+      addToast({ ...newToast, priority });
     }
     return id;
   };
@@ -128,7 +150,7 @@ function createToastStore(props = {}) {
       } else if (options.success !== void 0) {
         removable = false;
         const successOptions = runIfFn(options.success, response);
-        create({ ...shared, ...successOptions, id, type: "success" });
+        create({ ...shared, ...successOptions, id, type: successOptions.type ?? "success" });
       }
     }).catch(async (error2) => {
       result = ["reject", error2];

package/dist/toast.types.d.mts

@@ -2,7 +2,8 @@ import { PropTypes, CommonProperties, Direction, DirectionProperty, Required, Re
 import { Service, EventObject, Machine } from '@zag-js/core';
 import { AnimationFrame } from '@zag-js/dom-query';
 
-type Type = "success" | "error" | "loading" | "info" | (string & {});
+type Type = "success" | "error" | "loading" | "info" | "warning" | (string & {});
+type ToastQueuePriority = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
 type Status = "visible" | "dismissing" | "unmounted";
 interface StatusChangeDetails {
@@ -64,6 +65,10 @@ interface Options<T = any> {
      * The type of the toast
      */
     type?: Type | undefined;
+    /**
+     * The priority of the toast (1 = highest, 8 = lowest)
+     */
+    priority?: ToastQueuePriority | undefined;
     /**
      * Function called when the toast is visible
      */
@@ -300,7 +305,9 @@ interface ToastStore<V = any> {
 type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
 interface PromiseOptions<V, O = any> {
     loading: Omit<Options<O>, "type">;
-    success?: MaybeFunction<Omit<Options<O>, "type">, V> | undefined;
+    success?: MaybeFunction<Omit<Options<O>, "type"> & {
+        type?: "success" | "warning";
+    }, V> | undefined;
     error?: MaybeFunction<Omit<Options<O>, "type">, unknown> | undefined;
     finally?: (() => void | Promise<void>) | undefined;
 }
@@ -375,4 +382,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
     getActionTriggerProps: () => T["button"];
 }
 
-export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
+export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };

package/dist/toast.types.d.ts

@@ -2,7 +2,8 @@ import { PropTypes, CommonProperties, Direction, DirectionProperty, Required, Re
 import { Service, EventObject, Machine } from '@zag-js/core';
 import { AnimationFrame } from '@zag-js/dom-query';
 
-type Type = "success" | "error" | "loading" | "info" | (string & {});
+type Type = "success" | "error" | "loading" | "info" | "warning" | (string & {});
+type ToastQueuePriority = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
 type Status = "visible" | "dismissing" | "unmounted";
 interface StatusChangeDetails {
@@ -64,6 +65,10 @@ interface Options<T = any> {
      * The type of the toast
      */
     type?: Type | undefined;
+    /**
+     * The priority of the toast (1 = highest, 8 = lowest)
+     */
+    priority?: ToastQueuePriority | undefined;
     /**
      * Function called when the toast is visible
      */
@@ -300,7 +305,9 @@ interface ToastStore<V = any> {
 type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
 interface PromiseOptions<V, O = any> {
     loading: Omit<Options<O>, "type">;
-    success?: MaybeFunction<Omit<Options<O>, "type">, V> | undefined;
+    success?: MaybeFunction<Omit<Options<O>, "type"> & {
+        type?: "success" | "warning";
+    }, V> | undefined;
     error?: MaybeFunction<Omit<Options<O>, "type">, unknown> | undefined;
     finally?: (() => void | Promise<void>) | undefined;
 }
@@ -375,4 +382,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
     getActionTriggerProps: () => T["button"];
 }
 
-export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
+export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };

package/dist/toast.utils.js

@@ -34,6 +34,7 @@ var defaultTimeouts = {
   error: 5e3,
   success: 2e3,
   loading: Infinity,
+  warning: 5e3,
   DEFAULT: 5e3
 };
 function getToastDuration(duration, type) {

package/dist/toast.utils.mjs

@@ -5,6 +5,7 @@ var defaultTimeouts = {
   error: 5e3,
   success: 2e3,
   loading: Infinity,
+  warning: 5e3,
   DEFAULT: 5e3
 };
 function getToastDuration(duration, type) {

package/package.json

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