@zag-js/toast 0.69.0 → 0.71.0

package/src/toast.connect.ts

@@ -1,130 +0,0 @@
-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 } from "./toast.types"
-import { getGhostAfterStyle, getGhostBeforeStyle, getPlacementStyle } from "./toast.utils"
-
-export function connect<T extends PropTypes, O>(
-  state: State<O>,
-  send: Send,
-  normalize: NormalizeProps<T>,
-): MachineApi<T, O> {
-  const visible = state.hasTag("visible")
-  const paused = state.hasTag("paused")
-
-  const placement = state.context.placement!
-  const type = state.context.type!
-
-  const [side, align = "center"] = placement.split("-")
-
-  return {
-    type: type,
-    title: state.context.title,
-    description: state.context.description,
-    placement,
-    visible: visible,
-    paused: paused,
-
-    pause() {
-      send("PAUSE")
-    },
-
-    resume() {
-      send("RESUME")
-    },
-
-    dismiss() {
-      send("DISMISS")
-    },
-
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context),
-        "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(paused),
-
-        "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",
-        "aria-describedby": state.context.description ? dom.getDescriptionId(state.context) : undefined,
-        "aria-labelledby": state.context.title ? dom.getTitleId(state.context) : undefined,
-        tabIndex: 0,
-        style: getPlacementStyle(state.context, visible),
-        onKeyDown(event) {
-          if (event.defaultPrevented) return
-          if (event.key == "Escape") {
-            send("DISMISS")
-            event.preventDefault()
-          }
-        },
-      })
-    },
-
-    /* Leave a ghost div to avoid setting hover to false when transitioning out */
-    getGhostBeforeProps() {
-      return normalize.element({
-        "data-ghost": "before",
-        style: getGhostBeforeStyle(state.context, visible),
-      })
-    },
-
-    /* Needed to avoid setting hover to false when in between toasts */
-    getGhostAfterProps() {
-      return normalize.element({
-        "data-ghost": "after",
-        style: getGhostAfterStyle(state.context, visible),
-      })
-    },
-
-    getTitleProps() {
-      return normalize.element({
-        ...parts.title.attrs,
-        id: dom.getTitleId(state.context),
-      })
-    },
-
-    getDescriptionProps() {
-      return normalize.element({
-        ...parts.description.attrs,
-        id: dom.getDescriptionId(state.context),
-      })
-    },
-
-    getActionTriggerProps() {
-      return normalize.button({
-        ...parts.actionTrigger.attrs,
-        type: "button",
-        onClick(event) {
-          if (event.defaultPrevented) return
-          state.context.action?.onClick?.()
-          send("DISMISS")
-        },
-      })
-    },
-
-    getCloseTriggerProps() {
-      return normalize.button({
-        id: dom.getCloseTriggerId(state.context),
-        ...parts.closeTrigger.attrs,
-        type: "button",
-        "aria-label": "Dismiss notification",
-        onClick(event) {
-          if (event.defaultPrevented) return
-          send("DISMISS")
-        },
-      })
-    },
-  }
-}

package/src/toast.dom.ts

@@ -1,13 +0,0 @@
-import { createScope } from "@zag-js/dom-query"
-import type { MachineContext as Ctx, Placement, GroupMachineContext as GroupCtx } from "./toast.types"
-
-export const dom = createScope({
-  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`,
-})

package/src/toast.machine.ts

@@ -1,216 +0,0 @@
-import { createMachine, guards } from "@zag-js/core"
-import { queryAll, raf } from "@zag-js/dom-query"
-import { compact, warn } from "@zag-js/utils"
-import { dom } from "./toast.dom"
-import type { MachineContext, MachineState, Options } from "./toast.types"
-import { getToastDuration } from "./toast.utils"
-
-const { not, and, or } = guards
-
-export function createToastMachine<T>(options: Options<T>) {
-  const { type = "info", duration, id = "1", placement = "bottom", removeDelay = 200, ...restProps } = options
-  const ctx = compact(restProps)
-
-  const computedDuration = getToastDuration(duration, type)
-
-  return createMachine<MachineContext<T>, MachineState>(
-    {
-      id,
-      context: {
-        id,
-        type,
-        remaining: computedDuration,
-        duration: computedDuration,
-        removeDelay,
-        createdAt: Date.now(),
-        placement,
-        ...ctx,
-        height: 0,
-        offset: 0,
-        frontmost: false,
-        mounted: false,
-        index: -1,
-        zIndex: 0,
-      },
-
-      initial: type === "loading" ? "visible:persist" : "visible",
-
-      on: {
-        UPDATE: [
-          {
-            guard: and("hasTypeChanged", "isChangingToLoading"),
-            target: "visible:persist",
-            actions: ["setContext"],
-          },
-          {
-            guard: or("hasDurationChanged", "hasTypeChanged"),
-            target: "visible:updating",
-            actions: ["setContext"],
-          },
-          {
-            actions: ["setContext"],
-          },
-        ],
-        MEASURE: {
-          actions: ["measureHeight"],
-        },
-      },
-
-      entry: ["invokeOnVisible"],
-
-      activities: ["trackHeight"],
-
-      states: {
-        "visible:updating": {
-          tags: ["visible", "updating"],
-          after: {
-            0: "visible",
-          },
-        },
-
-        "visible:persist": {
-          tags: ["visible", "paused"],
-          on: {
-            RESUME: {
-              guard: not("isLoadingType"),
-              target: "visible",
-              actions: ["setCreatedAt"],
-            },
-            DISMISS: "dismissing",
-          },
-        },
-
-        visible: {
-          tags: ["visible"],
-          after: {
-            VISIBLE_DURATION: "dismissing",
-          },
-          on: {
-            DISMISS: "dismissing",
-            PAUSE: {
-              target: "visible:persist",
-              actions: "setRemainingDuration",
-            },
-          },
-        },
-
-        dismissing: {
-          entry: "invokeOnDismiss",
-          after: {
-            REMOVE_DELAY: {
-              target: "unmounted",
-              actions: "notifyParentToRemove",
-            },
-          },
-        },
-
-        unmounted: {
-          entry: "invokeOnUnmount",
-          type: "final",
-        },
-      },
-    },
-    {
-      activities: {
-        trackHeight(ctx, _evt, { self }) {
-          let cleanup: VoidFunction
-          raf(() => {
-            const rootEl = dom.getRootEl(ctx)
-            if (!rootEl) return
-            ctx.mounted = true
-
-            const ghosts = queryAll(rootEl, "[data-ghost]")
-
-            warn(
-              ghosts.length !== 2,
-              "[toast] No ghost element found in toast. Render the `ghostBefore` and `ghostAfter` elements",
-            )
-
-            const syncHeight = () => {
-              const originalHeight = rootEl.style.height
-              rootEl.style.height = "auto"
-              const newHeight = rootEl.getBoundingClientRect().height
-              rootEl.style.height = originalHeight
-
-              ctx.height = newHeight
-              self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx.placement })
-            }
-
-            syncHeight()
-
-            const win = dom.getWin(ctx)
-
-            const observer = new win.MutationObserver(syncHeight)
-            observer.observe(rootEl, { childList: true, subtree: true, characterData: true })
-
-            cleanup = () => observer.disconnect()
-          })
-
-          return () => cleanup?.()
-        },
-      },
-
-      guards: {
-        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
-        isLoadingType: (ctx) => ctx.type === "loading",
-        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: {
-        VISIBLE_DURATION: (ctx) => ctx.remaining,
-        REMOVE_DELAY: (ctx) => ctx.removeDelay,
-      },
-
-      actions: {
-        measureHeight(ctx, _evt, { self }) {
-          raf(() => {
-            const rootEl = dom.getRootEl(ctx)
-            if (!rootEl) return
-
-            ctx.mounted = true
-
-            const originalHeight = rootEl.style.height
-            rootEl.style.height = "auto"
-
-            const newHeight = rootEl.getBoundingClientRect().height
-            rootEl.style.height = originalHeight
-            ctx.height = newHeight
-
-            self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx.placement })
-          })
-        },
-        setRemainingDuration(ctx) {
-          ctx.remaining -= Date.now() - ctx.createdAt
-        },
-        setCreatedAt(ctx) {
-          ctx.createdAt = Date.now()
-        },
-        notifyParentToRemove(_ctx, _evt, { self }) {
-          self.sendParent({ type: "REMOVE_TOAST", id: self.id })
-        },
-        invokeOnDismiss(ctx) {
-          ctx.onStatusChange?.({ status: "dismissing" })
-        },
-        invokeOnUnmount(ctx) {
-          ctx.onStatusChange?.({ status: "unmounted" })
-        },
-        invokeOnVisible(ctx) {
-          ctx.onStatusChange?.({ status: "visible" })
-        },
-        setContext(ctx, evt) {
-          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,
-          })
-        },
-      },
-    },
-  )
-}