@zag-js/toast 0.45.0 → 0.47.0

package/src/toast-group.machine.ts

@@ -1,107 +1,321 @@
-import { createMachine } from "@zag-js/core"
-import { MAX_Z_INDEX } from "@zag-js/dom-query"
+import { createMachine, ref } from "@zag-js/core"
+import { trackDismissableBranch } from "@zag-js/dismissable"
+import { addDomEvent } from "@zag-js/dom-event"
 import { compact } from "@zag-js/utils"
+import { dom } from "./toast.dom"
 import { createToastMachine } from "./toast.machine"
-import type { GroupMachineContext, MachineContext, GenericOptions, UserDefinedGroupContext } from "./toast.types"
+import type {
+  GroupMachineContext,
+  GroupMachineState,
+  MachineContext,
+  Service,
+  UserDefinedGroupContext,
+} from "./toast.types"
+import { getToastsByPlacement } from "./toast.utils"
 
-export function groupMachine<T extends GenericOptions>(userContext: UserDefinedGroupContext<T>) {
+export function groupMachine<T = any>(userContext: UserDefinedGroupContext) {
   const ctx = compact(userContext)
-  return createMachine<GroupMachineContext<T>>({
-    id: "toaster",
-    initial: "active",
-    context: {
-      dir: "ltr",
-      max: Number.MAX_SAFE_INTEGER,
-      toasts: [],
-      gutter: "1rem",
-      zIndex: MAX_Z_INDEX,
-      pauseOnPageIdle: false,
-      pauseOnInteraction: true,
-      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
-      ...ctx,
-    },
+  return createMachine<GroupMachineContext<T>, GroupMachineState>(
+    {
+      id: "toaster",
+      initial: ctx.overlap ? "overlap" : "stack",
+      context: {
+        dir: "ltr",
+        max: Number.MAX_SAFE_INTEGER,
+        toasts: [],
+        gap: 16,
+        pauseOnPageIdle: false,
+        hotkey: ["altKey", "KeyT"],
+        offsets: "1rem",
+        placement: "bottom",
+        removeDelay: 200,
+        ...ctx,
+        lastFocusedEl: null,
+        isFocusWithin: false,
+        heights: [],
+      },
 
-    computed: {
-      count: (ctx) => ctx.toasts.length,
-    },
+      computed: {
+        count: (ctx) => ctx.toasts.length,
+      },
 
-    on: {
-      PAUSE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("PAUSE", evt.id)
-        },
+      activities: ["trackDocumentVisibility", "trackHotKeyPress"],
+
+      watch: {
+        toasts: ["collapsedIfEmpty", "setDismissableBranch"],
       },
 
-      PAUSE_ALL: {
-        actions: (ctx) => {
-          ctx.toasts.forEach((toast) => toast.send("PAUSE"))
+      exit: ["removeToasts", "clearDismissableBranch", "clearLastFocusedEl"],
+
+      on: {
+        PAUSE_TOAST: {
+          actions: ["pauseToast"],
+        },
+        PAUSE_ALL: {
+          actions: ["pauseToasts"],
+        },
+        RESUME_TOAST: {
+          actions: ["resumeToast"],
+        },
+        RESUME_ALL: {
+          actions: ["resumeToasts"],
+        },
+        ADD_TOAST: {
+          guard: "isWithinRange",
+          actions: ["createToast", "syncToastIndex"],
+        },
+        UPDATE_TOAST: {
+          actions: ["updateToast"],
+        },
+        DISMISS_TOAST: {
+          actions: ["dismissToast"],
+        },
+        DISMISS_ALL: {
+          actions: ["dismissToasts"],
+        },
+        REMOVE_TOAST: {
+          actions: ["removeToast", "syncToastIndex", "syncToastOffset"],
+        },
+        REMOVE_ALL: {
+          actions: ["removeToasts"],
         },
+        UPDATE_HEIGHT: {
+          actions: ["syncHeights", "syncToastOffset"],
+        },
+        "DOC.HOTKEY": {
+          actions: ["focusRegionEl"],
+        },
+        "REGION.BLUR": [
+          {
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["resumeToasts", "restoreLastFocusedEl"],
+          },
+          {
+            actions: ["resumeToasts", "restoreLastFocusedEl"],
+          },
+        ],
       },
 
-      RESUME_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("RESUME", evt.id)
+      states: {
+        stack: {
+          entry: ["expandToasts"],
+          on: {
+            "REGION.POINTER_LEAVE": [
+              {
+                guard: "isOverlapping",
+                target: "overlap",
+                actions: ["resumeToasts"],
+              },
+              {
+                actions: ["resumeToasts"],
+              },
+            ],
+            "REGION.OVERLAP": {
+              target: "overlap",
+            },
+            "REGION.FOCUS": {
+              actions: ["setLastFocusedEl", "pauseToasts"],
+            },
+            "REGION.POINTER_ENTER": {
+              actions: ["pauseToasts"],
+            },
+          },
+        },
+        overlap: {
+          entry: ["collapseToasts"],
+          on: {
+            "REGION.STACK": {
+              target: "stack",
+            },
+            "REGION.POINTER_ENTER": {
+              target: "stack",
+              actions: ["pauseToasts"],
+            },
+            "REGION.FOCUS": {
+              target: "stack",
+              actions: ["setLastFocusedEl", "pauseToasts"],
+            },
+          },
         },
       },
-
-      RESUME_ALL: {
-        actions: (ctx) => {
-          ctx.toasts.forEach((toast) => toast.send("RESUME"))
+    },
+    {
+      guards: {
+        isWithinRange: (ctx) => ctx.toasts.length < ctx.max,
+        isOverlapping: (ctx) => !!ctx.overlap,
+      },
+      activities: {
+        trackHotKeyPress(ctx, _evt, { send }) {
+          const handleKeyDown = (event: KeyboardEvent) => {
+            const isHotkeyPressed = ctx.hotkey.every((key) => (event as any)[key] || event.code === key)
+            if (!isHotkeyPressed) return
+            send({ type: "DOC.HOTKEY" })
+          }
+          return addDomEvent(document, "keydown", handleKeyDown, { capture: true })
+        },
+        trackDocumentVisibility(ctx, _evt, { send }) {
+          if (!ctx.pauseOnPageIdle) return
+          const doc = dom.getDoc(ctx)
+          return addDomEvent(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE_ALL" : "RESUME_ALL")
+          })
         },
       },
+      actions: {
+        setDismissableBranch(ctx) {
+          const currentToasts = getToastsByPlacement(ctx.toasts, ctx.placement)
+          const hasToasts = currentToasts.length > 0
+
+          if (!hasToasts) {
+            ctx._cleanup?.()
+            return
+          }
+
+          if (hasToasts && ctx._cleanup) {
+            return
+          }
 
-      ADD_TOAST: {
-        guard: (ctx) => ctx.toasts.length < ctx.max,
-        actions: (ctx, evt, { self }) => {
+          //  mark toast as a dismissable branch
+          //  so that interacting with them will not close dismissable layers
+          const groupEl = () => dom.getRegionEl(ctx, ctx.placement)
+          ctx._cleanup = trackDismissableBranch(groupEl, { defer: true })
+        },
+        clearDismissableBranch(ctx) {
+          ctx._cleanup?.()
+        },
+        focusRegionEl(ctx) {
+          queueMicrotask(() => {
+            dom.getRegionEl(ctx, ctx.placement)?.focus()
+          })
+        },
+        expandToasts(ctx) {
+          each(ctx, (toast) => {
+            toast.state.context.stacked = true
+          })
+        },
+        collapseToasts(ctx) {
+          each(ctx, (toast) => {
+            toast.state.context.stacked = false
+          })
+        },
+        collapsedIfEmpty(ctx, _evt, { send }) {
+          if (!ctx.overlap || ctx.toasts.length > 1) return
+          send("REGION.OVERLAP")
+        },
+        pauseToast(_ctx, evt, { self }) {
+          self.sendChild("PAUSE", evt.id)
+        },
+        pauseToasts(ctx) {
+          ctx.toasts.forEach((toast) => toast.send("PAUSE"))
+        },
+        resumeToast(_ctx, evt, { self }) {
+          self.sendChild("RESUME", evt.id)
+        },
+        resumeToasts(ctx) {
+          ctx.toasts.forEach((toast) => toast.send("RESUME"))
+        },
+        measureToasts(ctx) {
+          ctx.toasts.forEach((toast) => toast.send("MEASURE"))
+        },
+        createToast(ctx, evt, { self, getState }) {
           const options: MachineContext<T> = {
             placement: ctx.placement,
             duration: ctx.duration,
             removeDelay: ctx.removeDelay,
-            render: ctx.render,
             ...evt.toast,
-            pauseOnPageIdle: ctx.pauseOnPageIdle,
-            pauseOnInteraction: ctx.pauseOnInteraction,
             dir: ctx.dir,
             getRootNode: ctx.getRootNode,
+            stacked: getState().matches("stack"),
           }
+
           const toast = createToastMachine(options)
+
           const actor = self.spawn(toast)
-          ctx.toasts.push(actor as any)
+          ctx.toasts = [actor, ...ctx.toasts]
         },
-      },
-
-      UPDATE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
+        updateToast(_ctx, evt, { self }) {
           self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id)
         },
-      },
-
-      DISMISS_TOAST: {
-        actions: (_ctx, evt, { self }) => {
+        dismissToast(_ctx, evt, { self }) {
           self.sendChild("DISMISS", evt.id)
         },
-      },
-
-      DISMISS_ALL: {
-        actions: (ctx) => {
+        dismissToasts(ctx) {
           ctx.toasts.forEach((toast) => toast.send("DISMISS"))
         },
-      },
-
-      REMOVE_TOAST: {
-        actions: (ctx, evt, { self }) => {
+        removeToast(ctx, evt, { self }) {
           self.stopChild(evt.id)
-          const index = ctx.toasts.findIndex((toast) => toast.id === evt.id)
-          ctx.toasts.splice(index, 1)
+          ctx.toasts = ctx.toasts.filter((toast) => toast.id !== evt.id)
+          ctx.heights = ctx.heights.filter((height) => height.id !== evt.id)
         },
-      },
-
-      REMOVE_ALL: {
-        actions: (ctx, _evt, { self }) => {
+        removeToasts(ctx, _evt, { self }) {
           ctx.toasts.forEach((toast) => self.stopChild(toast.id))
-          while (ctx.toasts.length) ctx.toasts.pop()
+          ctx.toasts = []
+          ctx.heights = []
+        },
+        syncHeights(ctx, evt) {
+          const existing = ctx.heights.find((height) => height.id === evt.id)
+          if (existing) {
+            existing.height = evt.height
+            existing.placement = evt.placement
+          } else {
+            const newHeight = { id: evt.id, height: evt.height, placement: evt.placement }
+            ctx.heights = [newHeight, ...ctx.heights]
+          }
+        },
+        syncToastIndex(ctx) {
+          each(ctx, (toast, index, toasts) => {
+            // Note: This is an intentional side effect
+            // consider writing directly to the DOM (root element)
+            toast.state.context.index = index
+            toast.state.context.frontmost = index === 0
+            toast.state.context.zIndex = toasts.length - index
+          })
+        },
+        syncToastOffset(ctx, evt) {
+          const placement = evt.placement ?? ctx.placement
+
+          // Notify each toast of it's index
+          each({ ...ctx, placement }, (toast) => {
+            const heightIndex = Math.max(
+              ctx.heights.findIndex((height) => height.id === toast.id),
+              0,
+            )
+
+            // calculate offset until toast
+            const toastsHeightBefore = ctx.heights.reduce((prev, curr, reducerIndex) => {
+              if (reducerIndex >= heightIndex) return prev
+              return prev + curr.height
+            }, 0)
+
+            // Note: This is an intentional side effect
+            // consider writing directly to the DOM (root element)
+            toast.state.context.offset = heightIndex * ctx.gap + toastsHeightBefore
+          })
+        },
+        setLastFocusedEl(ctx, evt) {
+          if (ctx.isFocusWithin || !evt.target) return
+          ctx.isFocusWithin = true
+          ctx.lastFocusedEl = ref(evt.target)
+        },
+        restoreLastFocusedEl(ctx) {
+          ctx.isFocusWithin = false
+          if (!ctx.lastFocusedEl) return
+          ctx.lastFocusedEl.focus({ preventScroll: true })
+          ctx.lastFocusedEl = null
+        },
+        clearLastFocusedEl(ctx) {
+          if (!ctx.lastFocusedEl) return
+          ctx.lastFocusedEl.focus({ preventScroll: true })
+          ctx.lastFocusedEl = null
+          ctx.isFocusWithin = false
         },
       },
     },
-  })
+  )
+}
+
+function each(ctx: GroupMachineContext, fn: (toast: Service<any>, index: number, arr: Service<any>[]) => void) {
+  const currentToasts = getToastsByPlacement(ctx.toasts, ctx.placement)
+  currentToasts.forEach(fn)
 }

package/src/toast.anatomy.ts

@@ -1,4 +1,12 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger")
+export const anatomy = createAnatomy("toast").parts(
+  "group",
+  "root",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger",
+)
+
 export const parts = anatomy.build()

package/src/toast.connect.ts

@@ -1,9 +1,11 @@
+import { dataAttr } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./toast.anatomy"
 import { dom } from "./toast.dom"
-import type { MachineApi, Send, State, GenericOptions } from "./toast.types"
+import type { MachineApi, Send, State } from "./toast.types"
+import { getGhostAfterStyle, getGhostBeforeStyle, getPlacementStyle } from "./toast.utils"
 
-export function connect<T extends PropTypes, O extends GenericOptions>(
+export function connect<T extends PropTypes, O>(
   state: State<O>,
   send: Send,
   normalize: NormalizeProps<T>,
@@ -11,11 +13,13 @@ export function connect<T extends PropTypes, O extends GenericOptions>(
   const isVisible = state.hasTag("visible")
   const isPaused = state.hasTag("paused")
 
-  const pauseOnInteraction = state.context.pauseOnInteraction
   const placement = state.context.placement!
+  const type = state.context.type!
+
+  const [side, align = "center"] = placement.split("-")
 
   return {
-    type: state.context.type,
+    type: type,
     title: state.context.title,
     description: state.context.description,
     placement,
@@ -40,44 +44,40 @@ export function connect<T extends PropTypes, O extends GenericOptions>(
       dir: state.context.dir,
       id: dom.getRootId(state.context),
       "data-state": isVisible ? "open" : "closed",
-      "data-type": state.context.type,
+      "data-type": type,
       "data-placement": placement,
+      "data-align": align,
+      "data-side": side,
+      "data-mounted": dataAttr(state.context.mounted),
+      "data-paused": dataAttr(isPaused),
+
+      "data-first": dataAttr(state.context.frontmost),
+      "data-sibling": dataAttr(!state.context.frontmost),
+      "data-stack": dataAttr(state.context.stacked),
+      "data-overlap": dataAttr(!state.context.stacked),
+
       role: "status",
       "aria-atomic": "true",
       tabIndex: 0,
-      style: {
-        position: "relative",
-        pointerEvents: "auto",
-        margin: "calc(var(--toast-gutter) / 2)",
-        "--remove-delay": `${state.context.removeDelay}ms`,
-        "--duration": `${state.context.duration}ms`,
-      },
+      style: getPlacementStyle(state.context, isVisible),
       onKeyDown(event) {
         if (event.key == "Escape") {
           send("DISMISS")
           event.preventDefault()
         }
       },
-      onFocus() {
-        if (pauseOnInteraction) {
-          send("PAUSE")
-        }
-      },
-      onBlur() {
-        if (pauseOnInteraction) {
-          send("RESUME")
-        }
-      },
-      onPointerEnter() {
-        if (pauseOnInteraction) {
-          send("PAUSE")
-        }
-      },
-      onPointerLeave() {
-        if (pauseOnInteraction) {
-          send("RESUME")
-        }
-      },
+    }),
+
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    ghostBeforeProps: normalize.element({
+      "data-ghost": "before",
+      style: getGhostBeforeStyle(state.context, isVisible),
+    }),
+
+    /* Needed to avoid setting hover to false when in between toasts */
+    ghostAfterProps: normalize.element({
+      "data-ghost": "after",
+      style: getGhostAfterStyle(state.context, isVisible),
     }),
 
     titleProps: normalize.element({
@@ -90,6 +90,14 @@ export function connect<T extends PropTypes, O extends GenericOptions>(
       id: dom.getDescriptionId(state.context),
     }),
 
+    actionTriggerProps: normalize.button({
+      ...parts.actionTrigger.attrs,
+      type: "button",
+      onClick() {
+        send("DISMISS")
+      },
+    }),
+
     closeTriggerProps: normalize.button({
       id: dom.getCloseTriggerId(state.context),
       ...parts.closeTrigger.attrs,

package/src/toast.dom.ts

@@ -1,9 +1,12 @@
 import { createScope } from "@zag-js/dom-query"
-import type { MachineContext as Ctx, Placement } from "./toast.types"
+import type { MachineContext as Ctx, Placement, GroupMachineContext as GroupCtx } from "./toast.types"
 
 export const dom = createScope({
-  getGroupId: (placement: Placement) => `toast-group:${placement}`,
+  getRegionId: (placement: Placement) => `toast-group:${placement}`,
+  getRegionEl: (ctx: GroupCtx, placement: Placement) => dom.getById(ctx, `toast-group:${placement}`),
+
   getRootId: (ctx: Ctx) => `toast:${ctx.id}`,
+  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getTitleId: (ctx: Ctx) => `toast:${ctx.id}:title`,
   getDescriptionId: (ctx: Ctx) => `toast:${ctx.id}:description`,
   getCloseTriggerId: (ctx: Ctx) => `toast${ctx.id}:close`,