@zag-js/toast 0.46.0 → 0.48.0

package/src/toast.connect.ts

@@ -10,11 +10,11 @@ export function connect<T extends PropTypes, O>(
   send: Send,
   normalize: NormalizeProps<T>,
 ): MachineApi<T, O> {
-  const isVisible = state.hasTag("visible")
-  const isPaused = state.hasTag("paused")
+  const visible = state.hasTag("visible")
+  const paused = state.hasTag("paused")
 
   const placement = state.context.placement!
-  const type = state.context.type
+  const type = state.context.type!
 
   const [side, align = "center"] = placement.split("-")
 
@@ -23,9 +23,8 @@ export function connect<T extends PropTypes, O>(
     title: state.context.title,
     description: state.context.description,
     placement,
-    isVisible,
-    isPaused,
-    isRtl: state.context.dir === "rtl",
+    visible: visible,
+    paused: paused,
 
     pause() {
       send("PAUSE")
@@ -43,13 +42,13 @@ export function connect<T extends PropTypes, O>(
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-state": isVisible ? "open" : "closed",
+      "data-state": visible ? "open" : "closed",
       "data-type": type,
       "data-placement": placement,
       "data-align": align,
       "data-side": side,
       "data-mounted": dataAttr(state.context.mounted),
-      "data-paused": dataAttr(isPaused),
+      "data-paused": dataAttr(paused),
 
       "data-first": dataAttr(state.context.frontmost),
       "data-sibling": dataAttr(!state.context.frontmost),
@@ -59,8 +58,9 @@ export function connect<T extends PropTypes, O>(
       role: "status",
       "aria-atomic": "true",
       tabIndex: 0,
-      style: getPlacementStyle(state.context, isVisible),
+      style: getPlacementStyle(state.context, visible),
       onKeyDown(event) {
+        if (event.defaultPrevented) return
         if (event.key == "Escape") {
           send("DISMISS")
           event.preventDefault()
@@ -70,16 +70,14 @@ export function connect<T extends PropTypes, O>(
 
     /* Leave a ghost div to avoid setting hover to false when transitioning out */
     ghostBeforeProps: normalize.element({
-      ...parts.ghost.attrs,
-      "data-type": "before",
-      style: getGhostBeforeStyle(state.context, isVisible),
+      "data-ghost": "before",
+      style: getGhostBeforeStyle(state.context, visible),
     }),
 
     /* Needed to avoid setting hover to false when in between toasts */
     ghostAfterProps: normalize.element({
-      ...parts.ghost.attrs,
-      "data-type": "after",
-      style: getGhostAfterStyle(state.context, isVisible),
+      "data-ghost": "after",
+      style: getGhostAfterStyle(state.context, visible),
     }),
 
     titleProps: normalize.element({
@@ -95,7 +93,8 @@ export function connect<T extends PropTypes, O>(
     actionTriggerProps: normalize.button({
       ...parts.actionTrigger.attrs,
       type: "button",
-      onClick() {
+      onClick(event) {
+        if (event.defaultPrevented) return
         send("DISMISS")
       },
     }),
@@ -105,7 +104,8 @@ export function connect<T extends PropTypes, O>(
       ...parts.closeTrigger.attrs,
       type: "button",
       "aria-label": "Dismiss notification",
-      onClick() {
+      onClick(event) {
+        if (event.defaultPrevented) return
         send("DISMISS")
       },
     }),

package/src/toast.machine.ts

@@ -119,7 +119,7 @@ export function createToastMachine<T>(options: Options<T>) {
             if (!rootEl) return
             ctx.mounted = true
 
-            const ghosts = queryAll(rootEl, "[data-part=ghost]")
+            const ghosts = queryAll(rootEl, "[data-ghost]")
 
             warn(
               ghosts.length !== 2,
@@ -129,7 +129,7 @@ export function createToastMachine<T>(options: Options<T>) {
             const syncHeight = () => {
               const originalHeight = rootEl.style.height
               rootEl.style.height = "auto"
-              const newHeight = rootEl.offsetHeight
+              const newHeight = rootEl.getBoundingClientRect().height
               rootEl.style.height = originalHeight
 
               ctx.height = newHeight
@@ -153,8 +153,8 @@ export function createToastMachine<T>(options: Options<T>) {
       guards: {
         isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
         isLoadingType: (ctx) => ctx.type === "loading",
-        hasTypeChanged: (ctx, evt) => evt.toast?.type !== ctx.type,
-        hasDurationChanged: (ctx, evt) => evt.toast?.duration !== ctx.duration,
+        hasTypeChanged: (ctx, evt) => evt.toast?.type != null && evt.toast.type !== ctx.type,
+        hasDurationChanged: (ctx, evt) => evt.toast?.duration != null && evt.toast.duration !== ctx.duration,
       },
 
       delays: {
@@ -173,7 +173,7 @@ export function createToastMachine<T>(options: Options<T>) {
             const originalHeight = rootEl.style.height
             rootEl.style.height = "auto"
 
-            const newHeight = rootEl.offsetHeight
+            const newHeight = rootEl.getBoundingClientRect().height
             rootEl.style.height = originalHeight
             ctx.height = newHeight
 
@@ -199,13 +199,16 @@ export function createToastMachine<T>(options: Options<T>) {
           ctx.onStatusChange?.({ status: "visible" })
         },
         setContext(ctx, evt) {
-          const { duration, type } = evt.toast
-          if (duration == null && type == null) {
-            Object.assign(ctx, evt.toast)
-          } else {
-            const time = getToastDuration(duration, type)
-            Object.assign(ctx, { ...evt.toast, duration: time, remaining: time })
-          }
+          const duration = evt.toast?.duration
+          const type = evt.toast?.type ?? ctx.type
+
+          const computedDuration = getToastDuration(duration, type)
+
+          Object.assign(ctx, {
+            ...evt.toast,
+            duration: computedDuration,
+            remaining: computedDuration,
+          })
         },
       },
     },

package/src/toast.types.ts

@@ -56,7 +56,7 @@ export interface Options<T> extends GenericOptions<T> {
   /**
    * The type of the toast
    */
-  type: Type
+  type?: Type
   /**
    * Function called when the toast is visible
    */
@@ -267,13 +267,13 @@ export interface GroupMachineApi<T extends PropTypes = PropTypes, O = any> {
    */
   getCount(): number
   /**
-   * The active toasts
+   * The placements of the active toasts
    */
-  getToasts(): Service<O>[]
+  getPlacements(): Placement[]
   /**
    * The active toasts by placement
    */
-  getToastsByPlacement(): Partial<Record<Placement, Service<O>[]>>
+  getToastsByPlacement(placement: Placement): Service<O>[]
   /**
    * Returns whether the toast id is visible
    */
@@ -353,15 +353,11 @@ export interface MachineApi<T extends PropTypes = PropTypes, O = any> extends Ge
   /**
    * Whether the toast is visible.
    */
-  isVisible: boolean
+  visible: boolean
   /**
    * Whether the toast is paused.
    */
-  isPaused: boolean
-  /**
-   * Whether the toast is in RTL mode.
-   */
-  isRtl: boolean
+  paused: boolean
   /**
    * Function to pause the toast (keeping it visible).
    */

package/src/toast.utils.ts

@@ -2,16 +2,8 @@ import { MAX_Z_INDEX } from "@zag-js/dom-query"
 import type { Style } from "@zag-js/types"
 import type { GroupMachineContext, MachineContext, Placement, Service, Type } from "./toast.types"
 
-export function getToastsByPlacement<T>(toasts: Service<T>[]) {
-  const result: Partial<Record<Placement, Service<T>[]>> = {}
-
-  for (const toast of toasts) {
-    const placement = toast.state.context.placement!
-    result[placement] ||= []
-    result[placement]!.push(toast)
-  }
-
-  return result
+export function getToastsByPlacement<T>(toasts: Service<T>[], placement: Placement) {
+  return toasts.filter((toast) => toast.state.context.placement === placement)
 }
 
 export const defaultTimeouts: Record<Type, number> = {
@@ -22,7 +14,7 @@ export const defaultTimeouts: Record<Type, number> = {
   DEFAULT: 5000,
 }
 
-export function getToastDuration(duration: number | undefined, type: MachineContext["type"]) {
+export function getToastDuration(duration: number | undefined, type: NonNullable<MachineContext["type"]>) {
   return duration ?? defaultTimeouts[type] ?? defaultTimeouts.DEFAULT
 }