@zag-js/toast 0.23.0 → 0.25.0

package/src/toast-group.connect.ts

@@ -3,16 +3,7 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { runIfFn, uuid } from "@zag-js/utils"
 import { parts } from "./toast.anatomy"
 import { dom } from "./toast.dom"
-import type {
-  GroupMachineApi,
-  GroupMachineContext,
-  GroupProps,
-  GroupSend,
-  GroupState,
-  Options,
-  Placement,
-  PromiseOptions,
-} from "./toast.types"
+import type { GroupMachineApi, GroupSend, GroupState, Options } from "./toast.types"
 import { getGroupPlacementStyle, getToastsByPlacement } from "./toast.utils"
 
 export let toaster = {} as GroupMachineApi
@@ -23,112 +14,115 @@ export function groupConnect<T extends PropTypes>(
   normalize: NormalizeProps<T>,
 ): GroupMachineApi<T> {
   //
-  const group = {
-    count: state.context.count,
-    toasts: state.context.toasts,
-    toastsByPlacement: getToastsByPlacement(state.context.toasts),
-    isVisible(id: string) {
-      if (!state.context.toasts.length) return false
-      return !!state.context.toasts.find((toast) => toast.id == id)
-    },
+  const toastsByPlacement = getToastsByPlacement(state.context.toasts)
 
-    create(options: Options) {
-      const uid = `toast:${uuid()}`
-      const id = options.id ? options.id : uid
+  function isVisible(id: string) {
+    if (!state.context.toasts.length) return false
+    return !!state.context.toasts.find((toast) => toast.id == id)
+  }
 
-      if (group.isVisible(id)) return
-      send({ type: "ADD_TOAST", toast: { ...options, id } })
+  function create(options: Options) {
+    const uid = `toast:${uuid()}`
+    const id = options.id ? options.id : uid
 
-      return id
-    },
+    if (isVisible(id)) return
+    send({ type: "ADD_TOAST", toast: { ...options, id } })
 
-    upsert(options: 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)
-      }
-    },
+    return id
+  }
 
-    dismiss(id?: string) {
-      if (id == null) {
-        send("DISMISS_ALL")
-      } else if (group.isVisible(id)) {
-        send({ type: "DISMISS_TOAST", id })
-      }
-    },
+  function update(id: string, options: Options) {
+    if (!isVisible(id)) return
+    send({ type: "UPDATE_TOAST", id, toast: options })
+    return id
+  }
+
+  function upsert(options: Options) {
+    const { id } = options
+    const visible = id ? isVisible(id) : false
+    if (visible && id != null) {
+      return update(id, options)
+    } else {
+      return create(options)
+    }
+  }
 
-    remove(id?: string) {
+  function dismiss(id?: string) {
+    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,
+    isVisible,
+
+    create,
+    update,
+    upsert,
+    dismiss,
+
+    remove(id) {
       if (id == null) {
         send("REMOVE_ALL")
-      } else if (group.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "REMOVE_TOAST", id })
       }
     },
 
-    dismissByPlacement(placement: Placement) {
-      const toasts = group.toastsByPlacement[placement]
+    dismissByPlacement(placement) {
+      const toasts = toastsByPlacement[placement]
       if (toasts) {
-        toasts.forEach((toast) => group.dismiss(toast.id))
+        toasts.forEach((toast) => dismiss(toast.id))
       }
     },
-
-    update(id: string, options: Options) {
-      if (!group.isVisible(id)) return
-      send({ type: "UPDATE_TOAST", id, toast: options })
-      return id
+    loading(options) {
+      return upsert({ ...options, type: "loading" })
     },
-
-    loading(options: Options) {
-      options.type = "loading"
-      return group.upsert(options)
-    },
-
-    success(options: Options) {
-      options.type = "success"
-      return group.upsert(options)
+    success(options) {
+      return upsert({ ...options, type: "success" })
     },
-
-    error(options: Options) {
-      options.type = "error"
-      return group.upsert(options)
+    error(options) {
+      return upsert({ ...options, type: "error" })
     },
 
-    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared: Options = {}) {
-      const id = group.loading({ ...shared, ...options.loading })
+    promise(promise, options, shared = {}) {
+      const id = upsert({ ...shared, ...options.loading, type: "loading" })
 
       promise
         .then((response) => {
           const successOptions = runIfFn(options.success, response)
-          group.success({ ...shared, ...successOptions, id })
+          upsert({ ...shared, ...successOptions, id, type: "success" })
         })
         .catch((error) => {
           const errorOptions = runIfFn(options.error, error)
-          group.error({ ...shared, ...errorOptions, id })
+          upsert({ ...shared, ...errorOptions, id, type: "error" })
         })
 
       return promise
     },
 
-    pause(id?: string) {
+    pause(id) {
       if (id == null) {
         send("PAUSE_ALL")
-      } else if (group.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "PAUSE_TOAST", id })
       }
     },
 
-    resume(id?: string) {
+    resume(id) {
       if (id == null) {
         send("RESUME_ALL")
-      } else if (group.isVisible(id)) {
+      } else if (isVisible(id)) {
         send({ type: "RESUME_TOAST", id })
       }
     },
 
-    getGroupProps(options: GroupProps) {
+    getGroupProps(options) {
       const { placement, label = "Notifications" } = options
       return normalize.element({
         ...parts.group.attrs,
@@ -142,12 +136,8 @@ export function groupConnect<T extends PropTypes>(
       })
     },
 
-    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void) {
+    subscribe(fn) {
       return subscribe(state.context.toasts, () => fn(state.context.toasts))
     },
   }
-
-  Object.assign(toaster, group)
-
-  return group
 }

package/src/toast-group.machine.ts

@@ -2,7 +2,7 @@ import { createMachine } from "@zag-js/core"
 import { MAX_Z_INDEX } from "@zag-js/dom-query"
 import { compact } from "@zag-js/utils"
 import { createToastMachine } from "./toast.machine"
-import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types"
+import type { GroupMachineContext, MachineContext, UserDefinedGroupContext } from "./toast.types"
 
 export function groupMachine(userContext: UserDefinedGroupContext) {
   const ctx = compact(userContext)
@@ -55,8 +55,11 @@ export function groupMachine(userContext: UserDefinedGroupContext) {
       ADD_TOAST: {
         guard: (ctx) => ctx.toasts.length < ctx.max,
         actions: (ctx, evt, { self }) => {
-          const options = {
-            ...ctx.defaultOptions,
+          const options: MachineContext = {
+            placement: ctx.placement,
+            duration: ctx.duration,
+            removeDelay: ctx.removeDelay,
+            render: ctx.render,
             ...evt.toast,
             pauseOnPageIdle: ctx.pauseOnPageIdle,
             pauseOnInteraction: ctx.pauseOnInteraction,

package/src/toast.connect.ts

@@ -8,7 +8,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const isPaused = state.hasTag("paused")
 
   const pauseOnInteraction = state.context.pauseOnInteraction
-  const placement = state.context.placement
+  const placement = state.context.placement!
 
   return {
     type: state.context.type,
@@ -31,20 +31,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       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,

package/src/toast.dom.ts

@@ -1,5 +1,5 @@
 import { createScope } from "@zag-js/dom-query"
-import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types"
+import type { MachineContext as Ctx, Placement } from "./toast.types"
 
 export const dom = createScope({
   getGroupId: (placement: Placement) => `toast-group:${placement}`,
@@ -7,5 +7,4 @@ export const dom = createScope({
   getTitleId: (ctx: Ctx) => `toast:${ctx.id}:title`,
   getDescriptionId: (ctx: Ctx) => `toast:${ctx.id}:description`,
   getCloseTriggerId: (ctx: Ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx: GroupCtx) => `toast-portal:${ctx.id}`,
 })

package/src/toast.types.ts

@@ -9,44 +9,59 @@ import type {
   RootProperties,
 } from "@zag-js/types"
 
+/* -----------------------------------------------------------------------------
+ * Base types
+ * -----------------------------------------------------------------------------*/
+
 export type Type = "success" | "error" | "loading" | "info" | "custom"
 
 export type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"
 
-export interface ToastOptions {
+export 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
+}
+
+export 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
    */
@@ -65,34 +80,14 @@ export interface ToastOptions {
   onUpdate?: VoidFunction
 }
 
-export type Options = Partial<ToastOptions>
-
-export type RenderOptions = Omit<ToastOptions, "render"> & {
-  dismiss(): void
-}
+export type Options = Partial<ToastOptions & BaseOptions>
 
 /* -----------------------------------------------------------------------------
  * Machine context
  * -----------------------------------------------------------------------------*/
 
-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">>
-}
-
 export interface MachineContext
-  extends SharedContext,
+  extends BaseOptions,
     RootProperties,
     CommonProperties,
     Omit<ToastOptions, "removeDelay"> {
@@ -126,7 +121,7 @@ export type Send = S.Send
 
 export type Service = Machine<MachineContext, MachineState>
 
-interface GroupPublicContext extends SharedContext, DirectionProperty, CommonProperties {
+interface GroupPublicContext extends BaseOptions, DirectionProperty, CommonProperties {
   /**
    * The gutter or spacing between toasts
    */
@@ -254,7 +249,7 @@ export 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.
    */
@@ -303,10 +298,7 @@ export 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"]