@zag-js/toast 0.0.0-20220802150625

package/dist/index.mjs

@@ -0,0 +1,658 @@
+// ../../utilities/dom/dist/index.mjs
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+var MAX_Z_INDEX = 2147483647;
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res ?? void 0;
+};
+var cast = (v) => v;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+function trackDocumentVisibility(_doc, callback) {
+  const doc = cast(_doc);
+  return addDomEvent(doc, "visibilitychange", () => {
+    const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
+    callback(!!hidden);
+  });
+}
+
+// ../../utilities/core/dist/index.mjs
+var runIfFn2 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res ?? void 0;
+};
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+
+// src/toast-group.connect.ts
+import { subscribe } from "@zag-js/core";
+
+// src/toast.dom.ts
+var dom = defineDomHelpers({
+  getGroupId: (placement) => `toast-group:${placement}`,
+  getContainerId: (ctx) => `toast:${ctx.id}`,
+  getTitleId: (ctx) => `toast-title:${ctx.id}`,
+  getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
+  getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
+  getPortalId: (ctx) => `toast-portal:${ctx.id}`,
+  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
+  createPortalEl: (ctx) => {
+    const existing = dom.getPortalEl(ctx);
+    if (existing)
+      return existing;
+    const portal = dom.getDoc(ctx).createElement("toast-portal");
+    portal.id = dom.getPortalId(ctx);
+    return portal;
+  }
+});
+
+// src/toast.utils.ts
+function getToastsByPlacement(toasts) {
+  const result = {};
+  for (const toast of toasts) {
+    const placement = toast.state.context.placement;
+    result[placement] || (result[placement] = []);
+    result[placement].push(toast);
+  }
+  return result;
+}
+var defaultTimeouts = {
+  info: 5e3,
+  error: 5e3,
+  success: 2e3,
+  loading: Infinity,
+  custom: 5e3
+};
+function getToastDuration(duration, type) {
+  return duration ?? defaultTimeouts[type];
+}
+function getGroupPlacementStyle(ctx, placement) {
+  const offset = ctx.offsets;
+  const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const rtl = ctx.dir === "rtl";
+  const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = __placement.includes("right");
+  const isLefty = __placement.includes("left");
+  const styles = {
+    position: "fixed",
+    pointerEvents: ctx.count > 0 ? void 0 : "none",
+    display: "flex",
+    flexDirection: "column",
+    "--toast-gutter": ctx.gutter,
+    zIndex: ctx.zIndex
+  };
+  let alignItems = "center";
+  if (isRighty)
+    alignItems = "flex-end";
+  if (isLefty)
+    alignItems = "flex-start";
+  styles.alignItems = alignItems;
+  if (__placement.includes("top")) {
+    const offset2 = __offset.top;
+    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
+  }
+  if (__placement.includes("bottom")) {
+    const offset2 = __offset.bottom;
+    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
+  }
+  if (!__placement.includes("left")) {
+    const offset2 = __offset.right;
+    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
+  }
+  if (!__placement.includes("right")) {
+    const offset2 = __offset.left;
+    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+  }
+  return styles;
+}
+
+// src/toast-group.connect.ts
+var toaster = {};
+function groupConnect(state, send, normalize) {
+  const group2 = {
+    count: state.context.count,
+    toasts: state.context.toasts,
+    toastsByPlacement: getToastsByPlacement(state.context.toasts),
+    isVisible(id) {
+      if (!state.context.toasts.length)
+        return false;
+      return !!state.context.toasts.find((toast) => toast.id == id);
+    },
+    create(options) {
+      const uid = `toast:${uuid()}`;
+      const id = options.id ? options.id : uid;
+      if (group2.isVisible(id))
+        return;
+      send({ type: "ADD_TOAST", toast: { ...options, id } });
+      return id;
+    },
+    upsert(options) {
+      const { id } = options;
+      const isVisible = id ? group2.isVisible(id) : false;
+      if (isVisible && id != null) {
+        return group2.update(id, options);
+      } else {
+        return group2.create(options);
+      }
+    },
+    dismiss(id) {
+      if (id == null) {
+        send("DISMISS_ALL");
+      } else if (group2.isVisible(id)) {
+        send({ type: "DISMISS_TOAST", id });
+      }
+    },
+    remove(id) {
+      if (id == null) {
+        send("REMOVE_ALL");
+      } else if (group2.isVisible(id)) {
+        send({ type: "REMOVE_TOAST", id });
+      }
+    },
+    dismissByPlacement(placement) {
+      const toasts = group2.toastsByPlacement[placement];
+      if (toasts) {
+        toasts.forEach((toast) => group2.dismiss(toast.id));
+      }
+    },
+    update(id, options) {
+      if (!group2.isVisible(id))
+        return;
+      send({ type: "UPDATE_TOAST", id, toast: options });
+      return id;
+    },
+    loading(options) {
+      options.type = "loading";
+      return group2.upsert(options);
+    },
+    success(options) {
+      options.type = "success";
+      return group2.upsert(options);
+    },
+    error(options) {
+      options.type = "error";
+      return group2.upsert(options);
+    },
+    promise(promise, options, shared = {}) {
+      const id = group2.loading({ ...shared, ...options.loading });
+      promise.then((response) => {
+        const successOptions = runIfFn2(options.success, response);
+        group2.success({ ...shared, ...successOptions, id });
+      }).catch((error) => {
+        const errorOptions = runIfFn2(options.error, error);
+        group2.error({ ...shared, ...errorOptions, id });
+      });
+      return promise;
+    },
+    pause(id) {
+      if (id == null) {
+        send("PAUSE_ALL");
+      } else if (group2.isVisible(id)) {
+        send({ type: "PAUSE_TOAST", id });
+      }
+    },
+    resume(id) {
+      if (id == null) {
+        send("RESUME_ALL");
+      } else if (group2.isVisible(id)) {
+        send({ type: "RESUME_TOAST", id });
+      }
+    },
+    getGroupProps(options) {
+      const { placement, label = "Notifications" } = options;
+      return normalize.element({
+        tabIndex: -1,
+        "aria-label": label,
+        id: dom.getGroupId(placement),
+        "data-placement": placement,
+        "aria-live": "polite",
+        role: "region",
+        style: getGroupPlacementStyle(state.context, placement)
+      });
+    },
+    createPortal() {
+      const doc = dom.getDoc(state.context);
+      const exist = dom.getPortalEl(state.context);
+      if (exist)
+        return exist;
+      const portal = dom.createPortalEl(state.context);
+      doc.body.appendChild(portal);
+      return portal;
+    },
+    subscribe(fn) {
+      return subscribe(state.context.toasts, () => fn(state.context.toasts));
+    }
+  };
+  if (!state.matches("unknown")) {
+    Object.assign(toaster, group2);
+  }
+  return group2;
+}
+
+// src/toast-group.machine.ts
+import { createMachine as createMachine2 } from "@zag-js/core";
+
+// src/toast.machine.ts
+import { createMachine, guards } from "@zag-js/core";
+var { not, and, or } = guards;
+function createToastMachine(options = {}) {
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
+  const __duration = getToastDuration(duration, type);
+  return createMachine(
+    {
+      id,
+      entry: "invokeOnOpen",
+      initial: type === "loading" ? "persist" : "active",
+      context: {
+        id,
+        type,
+        remaining: __duration,
+        duration: __duration,
+        removeDelay,
+        createdAt: Date.now(),
+        placement,
+        ...rest
+      },
+      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(ctx, _evt, { send }) {
+          if (!ctx.pauseOnPageIdle)
+            return;
+          return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
+            send(hidden ? "PAUSE" : "RESUME");
+          });
+        }
+      },
+      guards: {
+        isChangingToLoading: (_, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
+        },
+        isLoadingType: (ctx) => ctx.type === "loading",
+        hasTypeChanged: (ctx, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
+        },
+        hasDurationChanged: (ctx, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
+        }
+      },
+      delays: {
+        VISIBLE_DURATION: (ctx) => ctx.remaining,
+        REMOVE_DELAY: (ctx) => ctx.removeDelay
+      },
+      actions: {
+        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 });
+        },
+        invokeOnClosing(ctx) {
+          var _a;
+          (_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnClose(ctx) {
+          var _a;
+          (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnOpen(ctx) {
+          var _a;
+          (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
+        },
+        invokeOnUpdate(ctx) {
+          var _a;
+          (_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
+        },
+        setContext(ctx, evt) {
+          const { duration: duration2, type: type2 } = evt.toast;
+          const time = getToastDuration(duration2, type2);
+          Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
+        }
+      }
+    }
+  );
+}
+
+// src/toast-group.machine.ts
+function groupMachine(ctx) {
+  return createMachine2({
+    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();
+        }
+      }
+    }
+  });
+}
+
+// src/toast.connect.ts
+function connect(state, send, normalize) {
+  const isVisible = state.hasTag("visible");
+  const isPaused = state.hasTag("paused");
+  const isUpdating = state.hasTag("updating");
+  const isRtl = state.context.dir === "rtl";
+  const type = state.context.type;
+  const pauseOnInteraction = state.context.pauseOnInteraction;
+  const placement = state.context.placement;
+  return {
+    type: state.context.type,
+    title: state.context.title,
+    description: state.context.description,
+    placement,
+    isVisible,
+    isPaused,
+    pause() {
+      send("PAUSE");
+    },
+    resume() {
+      send("RESUME");
+    },
+    dismiss() {
+      send("DISMISS");
+    },
+    rootProps: normalize.element({
+      "data-part": "root",
+      dir: state.context.dir,
+      id: dom.getContainerId(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");
+        }
+      }
+    }),
+    progressbarProps: normalize.element({
+      "data-part": "progressbar",
+      "data-type": state.context.type,
+      style: {
+        opacity: isVisible ? 1 : 0,
+        transformOrigin: isRtl ? "right" : "left",
+        animationName: isUpdating || type === "loading" ? "none" : void 0,
+        animationPlayState: isPaused ? "paused" : "running",
+        animationDuration: `${state.context.duration}ms`,
+        animationFillMode: isUpdating ? void 0 : "forwards"
+      }
+    }),
+    titleProps: normalize.element({
+      "data-part": "title",
+      id: dom.getTitleId(state.context)
+    }),
+    descriptionProps: normalize.element({
+      "data-part": "description",
+      id: dom.getDescriptionId(state.context)
+    }),
+    closeButtonProps: normalize.button({
+      id: dom.getCloseButtonId(state.context),
+      "data-part": "close-button",
+      type: "button",
+      "aria-label": "Dismiss notification",
+      onClick() {
+        send("DISMISS");
+      }
+    }),
+    render() {
+      var _a, _b;
+      return (_b = (_a = state.context).render) == null ? void 0 : _b.call(_a, {
+        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");
+        }
+      });
+    }
+  };
+}
+
+// src/index.ts
+var group = {
+  connect: groupConnect,
+  machine: groupMachine
+};
+function api() {
+  if (!isDom()) {
+    warn("toast.api() is only available in the browser");
+  } else {
+    return toaster;
+  }
+}
+export {
+  api,
+  connect,
+  createToastMachine as createMachine,
+  group
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zag-js/toast",
+  "version": "0.0.0-20220802150625",
+  "description": "Core logic for the toast widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "toast"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/toast",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/utils": "0.1.3"
+  },
+  "scripts": {
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
+  }
+}