@zag-js/toast 0.10.5 → 0.11.0

package/dist/toast-group.machine.mjs

@@ -1,95 +0,0 @@
-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.mjs';
-
-function groupMachine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine({
-    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
-    },
-    computed: {
-      count: (ctx2) => ctx2.toasts.length
-    },
-    on: {
-      SETUP: {},
-      PAUSE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("PAUSE", evt.id);
-        }
-      },
-      PAUSE_ALL: {
-        actions: (ctx2) => {
-          ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
-        }
-      },
-      RESUME_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("RESUME", evt.id);
-        }
-      },
-      RESUME_ALL: {
-        actions: (ctx2) => {
-          ctx2.toasts.forEach((toast) => toast.send("RESUME"));
-        }
-      },
-      ADD_TOAST: {
-        guard: (ctx2) => ctx2.toasts.length < ctx2.max,
-        actions: (ctx2, evt, { self }) => {
-          const options = {
-            ...evt.toast,
-            pauseOnPageIdle: ctx2.pauseOnPageIdle,
-            pauseOnInteraction: ctx2.pauseOnInteraction,
-            dir: ctx2.dir,
-            getRootNode: ctx2.getRootNode
-          };
-          const toast = createToastMachine(options);
-          const actor = self.spawn(toast);
-          ctx2.toasts.push(actor);
-        }
-      },
-      UPDATE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
-        }
-      },
-      DISMISS_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("DISMISS", evt.id);
-        }
-      },
-      DISMISS_ALL: {
-        actions: (ctx2) => {
-          ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
-        }
-      },
-      REMOVE_TOAST: {
-        actions: (ctx2, evt, { self }) => {
-          self.stopChild(evt.id);
-          const index = ctx2.toasts.findIndex((toast) => toast.id === evt.id);
-          ctx2.toasts.splice(index, 1);
-        }
-      },
-      REMOVE_ALL: {
-        actions: (ctx2, _evt, { self }) => {
-          ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
-          while (ctx2.toasts.length)
-            ctx2.toasts.pop();
-        }
-      }
-    }
-  });
-}
-
-export { groupMachine };

package/dist/toast.anatomy.d.ts

@@ -1,3 +0,0 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const anatomy: AnatomyInstance<"group" | "title" | "description" | "root" | "closeTrigger">;
-export declare const parts: Record<"group" | "title" | "description" | "root" | "closeTrigger", AnatomyPart>;

package/dist/toast.anatomy.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const anatomy$1 = require('@zag-js/anatomy');
-
-const anatomy = anatomy$1.createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
-const parts = anatomy.build();
-
-exports.anatomy = anatomy;
-exports.parts = parts;

package/dist/toast.anatomy.mjs

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

package/dist/toast.connect.d.ts

@@ -1,52 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { Type, Placement, Send,  State } from './toast.types';
-export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    /**
-     * The type of the toast.
-     */
-    type: Type;
-    /**
-     * The title of the toast.
-     */
-    title: string | undefined;
-    /**
-     *  The description of the toast.
-     */
-    description: string | undefined;
-    /**
-     * The current placement of the toast.
-     */
-    placement: Placement;
-    /**
-     * Whether the toast is visible.
-     */
-    isVisible: boolean;
-    /**
-     * Whether the toast is paused.
-     */
-    isPaused: boolean;
-    /**
-     * Whether the toast is in RTL mode.
-     */
-    isRtl: boolean;
-    /**
-     * Function to pause the toast (keeping it visible).
-     */
-    pause(): void;
-    /**
-     * Function to resume the toast dismissing.
-     */
-    resume(): void;
-    /**
-     * 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"];
-    closeTriggerProps: T["button"];
-};

package/dist/toast.connect.js

@@ -1,141 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-const toast_anatomy = require('./toast.anatomy.js');
-const toast_dom = require('./toast.dom.js');
-
-function connect(state, send, normalize) {
-  const isVisible = state.hasTag("visible");
-  const isPaused = state.hasTag("paused");
-  const pauseOnInteraction = state.context.pauseOnInteraction;
-  const placement = state.context.placement;
-  return {
-    /**
-     * The type of the toast.
-     */
-    type: state.context.type,
-    /**
-     * The title of the toast.
-     */
-    title: state.context.title,
-    /**
-     *  The description of the toast.
-     */
-    description: state.context.description,
-    /**
-     * The current placement of the toast.
-     */
-    placement,
-    /**
-     * Whether the toast is visible.
-     */
-    isVisible,
-    /**
-     * Whether the toast is paused.
-     */
-    isPaused,
-    /**
-     * Whether the toast is in RTL mode.
-     */
-    isRtl: state.context.dir === "rtl",
-    /**
-     * Function to pause the toast (keeping it visible).
-     */
-    pause() {
-      send("PAUSE");
-    },
-    /**
-     * Function to resume the toast dismissing.
-     */
-    resume() {
-      send("RESUME");
-    },
-    /**
-     * Function to instantly dismiss the toast.
-     */
-    dismiss() {
-      send("DISMISS");
-    },
-    /**
-     * Function render the toast in the DOM (based on the defined `render` property)
-     */
-    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({
-      ...toast_anatomy.parts.root.attrs,
-      dir: state.context.dir,
-      id: toast_dom.dom.getRootId(state.context),
-      "data-open": domQuery.dataAttr(isVisible),
-      "data-type": state.context.type,
-      "data-placement": placement,
-      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`
-      },
-      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");
-        }
-      }
-    }),
-    titleProps: normalize.element({
-      ...toast_anatomy.parts.title.attrs,
-      id: toast_dom.dom.getTitleId(state.context)
-    }),
-    descriptionProps: normalize.element({
-      ...toast_anatomy.parts.description.attrs,
-      id: toast_dom.dom.getDescriptionId(state.context)
-    }),
-    closeTriggerProps: normalize.button({
-      id: toast_dom.dom.getCloseTriggerId(state.context),
-      ...toast_anatomy.parts.closeTrigger.attrs,
-      type: "button",
-      "aria-label": "Dismiss notification",
-      onClick() {
-        send("DISMISS");
-      }
-    })
-  };
-}
-
-exports.connect = connect;

package/dist/toast.connect.mjs

@@ -1,137 +0,0 @@
-import { dataAttr } from '@zag-js/dom-query';
-import { parts } from './toast.anatomy.mjs';
-import { dom } from './toast.dom.mjs';
-
-function connect(state, send, normalize) {
-  const isVisible = state.hasTag("visible");
-  const isPaused = state.hasTag("paused");
-  const pauseOnInteraction = state.context.pauseOnInteraction;
-  const placement = state.context.placement;
-  return {
-    /**
-     * The type of the toast.
-     */
-    type: state.context.type,
-    /**
-     * The title of the toast.
-     */
-    title: state.context.title,
-    /**
-     *  The description of the toast.
-     */
-    description: state.context.description,
-    /**
-     * The current placement of the toast.
-     */
-    placement,
-    /**
-     * Whether the toast is visible.
-     */
-    isVisible,
-    /**
-     * Whether the toast is paused.
-     */
-    isPaused,
-    /**
-     * Whether the toast is in RTL mode.
-     */
-    isRtl: state.context.dir === "rtl",
-    /**
-     * Function to pause the toast (keeping it visible).
-     */
-    pause() {
-      send("PAUSE");
-    },
-    /**
-     * Function to resume the toast dismissing.
-     */
-    resume() {
-      send("RESUME");
-    },
-    /**
-     * Function to instantly dismiss the toast.
-     */
-    dismiss() {
-      send("DISMISS");
-    },
-    /**
-     * Function render the toast in the DOM (based on the defined `render` property)
-     */
-    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,
-      id: dom.getRootId(state.context),
-      "data-open": dataAttr(isVisible),
-      "data-type": state.context.type,
-      "data-placement": placement,
-      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`
-      },
-      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");
-        }
-      }
-    }),
-    titleProps: normalize.element({
-      ...parts.title.attrs,
-      id: dom.getTitleId(state.context)
-    }),
-    descriptionProps: normalize.element({
-      ...parts.description.attrs,
-      id: dom.getDescriptionId(state.context)
-    }),
-    closeTriggerProps: normalize.button({
-      id: dom.getCloseTriggerId(state.context),
-      ...parts.closeTrigger.attrs,
-      type: "button",
-      "aria-label": "Dismiss notification",
-      onClick() {
-        send("DISMISS");
-      }
-    })
-  };
-}
-
-export { connect };

package/dist/toast.dom.d.ts

@@ -1,28 +0,0 @@
-import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => ShadowRoot | Document;
-    getDoc: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => HTMLElement | null;
-    getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T | null;
-    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T_1;
-} & {
-    getGroupId: (placement: Placement) => string;
-    getRootId: (ctx: Ctx) => string;
-    getTitleId: (ctx: Ctx) => string;
-    getDescriptionId: (ctx: Ctx) => string;
-    getCloseTriggerId: (ctx: Ctx) => string;
-    getPortalId: (ctx: GroupCtx) => string;
-};

package/dist/toast.dom.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-
-const dom = domQuery.createScope({
-  getGroupId: (placement) => `toast-group:${placement}`,
-  getRootId: (ctx) => `toast:${ctx.id}`,
-  getTitleId: (ctx) => `toast:${ctx.id}:title`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
-});
-
-exports.dom = dom;

package/dist/toast.dom.mjs

@@ -1,12 +0,0 @@
-import { createScope } from '@zag-js/dom-query';
-
-const dom = createScope({
-  getGroupId: (placement) => `toast-group:${placement}`,
-  getRootId: (ctx) => `toast:${ctx.id}`,
-  getTitleId: (ctx) => `toast:${ctx.id}:title`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
-});
-
-export { dom };

package/dist/toast.machine.d.ts

@@ -1,3 +0,0 @@
-import type { Machine, StateMachine } from '@zag-js/core';
-import type { MachineContext, MachineState, Options } from "./toast.types";
-export declare function createToastMachine(options?: Options): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

package/dist/toast.machine.js

@@ -1,149 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-const domEvent = require('@zag-js/dom-event');
-const utils = require('@zag-js/utils');
-const toast_dom = require('./toast.dom.js');
-const toast_utils = require('./toast.utils.js');
-
-const { not, and, or } = core.guards;
-function createToastMachine(options = {}) {
-  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
-  const ctx = utils.compact(restProps);
-  const computedDuration = toast_utils.getToastDuration(duration, type);
-  return core.createMachine(
-    {
-      id,
-      entry: "invokeOnOpen",
-      initial: type === "loading" ? "persist" : "active",
-      context: {
-        id,
-        type,
-        remaining: computedDuration,
-        duration: computedDuration,
-        removeDelay,
-        createdAt: Date.now(),
-        placement,
-        ...ctx
-      },
-      on: {
-        UPDATE: [
-          {
-            guard: and("hasTypeChanged", "isChangingToLoading"),
-            target: "persist",
-            actions: ["setContext", "invokeOnUpdate"]
-          },
-          {
-            guard: or("hasDurationChanged", "hasTypeChanged"),
-            target: "active:temp",
-            actions: ["setContext", "invokeOnUpdate"]
-          },
-          {
-            actions: ["setContext", "invokeOnUpdate"]
-          }
-        ]
-      },
-      states: {
-        "active:temp": {
-          tags: ["visible", "updating"],
-          after: {
-            0: "active"
-          }
-        },
-        persist: {
-          tags: ["visible", "paused"],
-          activities: "trackDocumentVisibility",
-          on: {
-            RESUME: {
-              guard: not("isLoadingType"),
-              target: "active",
-              actions: ["setCreatedAt"]
-            },
-            DISMISS: "dismissing"
-          }
-        },
-        active: {
-          tags: ["visible"],
-          activities: "trackDocumentVisibility",
-          after: {
-            VISIBLE_DURATION: "dismissing"
-          },
-          on: {
-            DISMISS: "dismissing",
-            PAUSE: {
-              target: "persist",
-              actions: "setRemainingDuration"
-            }
-          }
-        },
-        dismissing: {
-          entry: "invokeOnClosing",
-          after: {
-            REMOVE_DELAY: {
-              target: "inactive",
-              actions: "notifyParentToRemove"
-            }
-          }
-        },
-        inactive: {
-          entry: "invokeOnClose",
-          type: "final"
-        }
-      }
-    },
-    {
-      activities: {
-        trackDocumentVisibility(ctx2, _evt, { send }) {
-          if (!ctx2.pauseOnPageIdle)
-            return;
-          const doc = toast_dom.dom.getDoc(ctx2);
-          return domEvent.addDomEvent(doc, "visibilitychange", () => {
-            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
-          });
-        }
-      },
-      guards: {
-        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
-        isLoadingType: (ctx2) => ctx2.type === "loading",
-        hasTypeChanged: (ctx2, evt) => evt.toast?.type !== ctx2.type,
-        hasDurationChanged: (ctx2, evt) => evt.toast?.duration !== ctx2.duration
-      },
-      delays: {
-        VISIBLE_DURATION: (ctx2) => ctx2.remaining,
-        REMOVE_DELAY: (ctx2) => ctx2.removeDelay
-      },
-      actions: {
-        setRemainingDuration(ctx2) {
-          ctx2.remaining -= Date.now() - ctx2.createdAt;
-        },
-        setCreatedAt(ctx2) {
-          ctx2.createdAt = Date.now();
-        },
-        notifyParentToRemove(_ctx, _evt, { self }) {
-          self.sendParent({ type: "REMOVE_TOAST", id: self.id });
-        },
-        invokeOnClosing(ctx2) {
-          ctx2.onClosing?.();
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onClose?.();
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpen?.();
-        },
-        invokeOnUpdate(ctx2) {
-          ctx2.onUpdate?.();
-        },
-        setContext(ctx2, evt) {
-          const { duration: duration2, type: type2 } = evt.toast;
-          const time = toast_utils.getToastDuration(duration2, type2);
-          Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
-        }
-      }
-    }
-  );
-}
-
-exports.createToastMachine = createToastMachine;