welcome-ui/dist/Toast.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
import x, { th as f, css as T, ThemeContext as R, ThemeProvider as z } from "@xstyled/styled-components";
import { useEffect as C, useCallback as I, useState as O, useMemo as H, cloneElement as L, useContext as W } from "react";
import { r as Y } from "./index-Dct42YPA.mjs";
import { Box as $ } from "./Box.mjs";
import { CloseButton as M } from "./CloseButton.mjs";
import { forwardRef as D } from "./System.mjs";
import { Alert as B } from "./Alert.mjs";
import { Button as _ } from "./Button.mjs";
var U = (t) => typeof t == "function", A = (t, e) => U(t) ? t(e) : t, q = /* @__PURE__ */ (() => {
  let t = 0;
  return () => (++t).toString();
})(), F = 20, k = /* @__PURE__ */ new Map(), J = 1e3, E = (t) => {
  if (k.has(t)) return;
  let e = setTimeout(() => {
    k.delete(t), h({ type: 4, toastId: t });
  }, J);
  k.set(t, e);
}, K = (t) => {
  let e = k.get(t);
  e && clearTimeout(e);
}, S = (t, e) => {
  switch (e.type) {
    case 0:
      return { ...t, toasts: [e.toast, ...t.toasts].slice(0, F) };
    case 1:
      return e.toast.id && K(e.toast.id), { ...t, toasts: t.toasts.map((o) => o.id === e.toast.id ? { ...o, ...e.toast } : o) };
    case 2:
      let { toast: s } = e;
      return t.toasts.find((o) => o.id === s.id) ? S(t, { type: 1, toast: s }) : S(t, { type: 0, toast: s });
    case 3:
      let { toastId: i } = e;
      return i ? E(i) : t.toasts.forEach((o) => {
        E(o.id);
      }), { ...t, toasts: t.toasts.map((o) => o.id === i || i === void 0 ? { ...o, visible: !1 } : o) };
    case 4:
      return e.toastId === void 0 ? { ...t, toasts: [] } : { ...t, toasts: t.toasts.filter((o) => o.id !== e.toastId) };
    case 5:
      return { ...t, pausedAt: e.time };
    case 6:
      let r = e.time - (t.pausedAt || 0);
      return { ...t, pausedAt: void 0, toasts: t.toasts.map((o) => ({ ...o, pauseDuration: o.pauseDuration + r })) };
  }
}, w = [], j = { toasts: [], pausedAt: void 0 }, h = (t) => {
  j = S(j, t), w.forEach((e) => {
    e(j);
  });
}, Q = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, V = (t = {}) => {
  let [e, s] = O(j);
  C(() => (w.push(s), () => {
    let r = w.indexOf(s);
    r > -1 && w.splice(r, 1);
  }), [e]);
  let i = e.toasts.map((r) => {
    var o, n;
    return { ...t, ...t[r.type], ...r, duration: r.duration || ((o = t[r.type]) == null ? void 0 : o.duration) || (t == null ? void 0 : t.duration) || Q[r.type], style: { ...t.style, ...(n = t[r.type]) == null ? void 0 : n.style, ...r.style } };
  });
  return { ...e, toasts: i };
}, X = (t, e = "blank", s) => ({ createdAt: Date.now(), visible: !0, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: t, pauseDuration: 0, ...s, id: (s == null ? void 0 : s.id) || q() }), b = (t) => (e, s) => {
  let i = X(e, t, s);
  return h({ type: 2, toast: i }), i.id;
}, u = (t, e) => b("blank")(t, e);
u.error = b("error");
u.success = b("success");
u.loading = b("loading");
u.custom = b("custom");
u.dismiss = (t) => {
  h({ type: 3, toastId: t });
};
u.remove = (t) => h({ type: 4, toastId: t });
u.promise = (t, e, s) => {
  let i = u.loading(e.loading, { ...s, ...s == null ? void 0 : s.loading });
  return t.then((r) => (u.success(A(e.success, r), { id: i, ...s, ...s == null ? void 0 : s.success }), r)).catch((r) => {
    u.error(A(e.error, r), { id: i, ...s, ...s == null ? void 0 : s.error });
  }), t;
};
var Z = (t, e) => {
  h({ type: 1, toast: { id: t, height: e } });
}, tt = () => {
  h({ type: 5, time: Date.now() });
}, et = (t) => {
  let { toasts: e, pausedAt: s } = V(t);
  C(() => {
    if (s) return;
    let o = Date.now(), n = e.map((a) => {
      if (a.duration === 1 / 0) return;
      let c = (a.duration || 0) + a.pauseDuration - (o - a.createdAt);
      if (c < 0) {
        a.visible && u.dismiss(a.id);
        return;
      }
      return setTimeout(() => u.dismiss(a.id), c);
    });
    return () => {
      n.forEach((a) => a && clearTimeout(a));
    };
  }, [e, s]);
  let i = I(() => {
    s && h({ type: 6, time: Date.now() });
  }, [s]), r = I((o, n) => {
    let { reverseOrder: a = !1, gutter: c = 8, defaultPosition: p } = n || {}, m = e.filter((l) => (l.position || p) === (o.position || p) && l.height), g = m.findIndex((l) => l.id === o.id), v = m.filter((l, y) => y < g && l.visible).length;
    return m.filter((l) => l.visible).slice(...a ? [v + 1] : [0, v]).reduce((l, y) => l + (y.height || 0) + c, 0);
  }, [e]);
  return { toasts: e, handlers: { updateHeight: Z, startPause: tt, endPause: i, calculateOffset: r } };
}, P = u;
function st(t = !1) {
  const [e, s] = O(!1);
  return C(() => {
    s(!0);
  }, []), H(() => t ? (i) => i : e ? (i, r, o) => Y.createPortal(i, r || document.body, o) : () => null, [t, e]);
}
const ot = x($)(
  ({ isBottom: t }) => T`
    ${f("toasts.default")}
    ${t ? f("toasts.bottom") : f("toasts.top")}

    position: fixed;
    z-index: 9999;
    transition: all 400ms ease-out;
  `
), rt = x(B)(
  () => T`
    position: relative;
    padding: lg;
    ${f("toasts.growls.default")};

    div:first-of-type {
      align-self: baseline;
    }

    button {
      flex-shrink: 0;
    }
  `
), it = x($)(
  () => T`
    display: flex;
    align-items: center;
    padding-bottom: xs;
    ${f("toasts.growls.title")};

    & > *:first-child {
      flex-shrink: 0;
    }
  `
), at = x(B)`
  display: flex;
  align-items: center;
  padding: sm md;
  ${f("toasts.snackbar.default")};

  > div {
    align-self: center !important;
  }
`, nt = x.divBox(
  ({ variant: t }) => T`
    ${f("toasts.snackbar.separator.default")};
    ${f(`toasts.snackbar.separator.${t}`)};
    padding-left: sm;
  `
), N = D(
  ({ children: t, dataTestId: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default" }, n) => {
    const a = e ? `${e}-close-button` : void 0;
    return /* @__PURE__ */ d.jsxs(
      rt,
      {
        "data-testid": e,
        hasCloseButton: s,
        icon: i,
        ref: n,
        variant: o,
        children: [
          s ? /* @__PURE__ */ d.jsx(
            M,
            {
              dataTestId: a,
              onClick: r,
              position: "absolute",
              right: "sm",
              top: "sm"
            }
          ) : null,
          /* @__PURE__ */ d.jsx($, { pr: "xl", children: t })
        ]
      }
    );
  }
);
N.displayName = "Growl";
const G = D(
  ({ children: t, cta: e, hasCloseButton: s = !0, icon: i, onClose: r, variant: o = "default", ...n }, a) => /* @__PURE__ */ d.jsx(at, { icon: i, ref: a, variant: o, ...n, children: /* @__PURE__ */ d.jsxs($, { alignItems: "center", display: "flex", gap: "sm", children: [
    t,
    e ? /* @__PURE__ */ d.jsx(nt, { variant: o, children: e }) : null,
    s ? /* @__PURE__ */ d.jsx(M, { onClick: r, size: "xs" }) : null
  ] }) })
), lt = D((t, e) => /* @__PURE__ */ d.jsx(_, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
G.displayName = "Snackbar";
const dt = {
  "bottom-center": { bottom: 0, left: "50%" },
  "bottom-left": { bottom: 0, left: 0 },
  "bottom-right": { bottom: 0, right: 0 },
  "top-center": { left: "50%", top: 0 },
  "top-left": { left: 0, top: 0 },
  "top-right": { right: 0, top: 0 }
}, ut = ({
  calculateOffset: t,
  toast: e,
  updateHeight: s
}) => {
  var m, g, v;
  if (typeof e.message == "string")
    return console.warn("You must pass a React component or a HTML element."), null;
  const i = t(e, { gutter: 0, reverseOrder: !1 }), r = (l) => {
    if (l && typeof e.height != "number") {
      const y = l.getBoundingClientRect().height;
      s(e.id, y);
    }
  }, o = (m = e.position) == null ? void 0 : m.includes("center"), n = (g = e.position) == null ? void 0 : g.includes("top"), a = (v = e.position) == null ? void 0 : v.includes("bottom"), c = () => {
    e.onClose && e.onClose(), P.dismiss(e.id);
  }, p = {
    opacity: e.visible ? 1 : 0,
    transform: `translate(${o ? "-50%" : "0"}, ${i * (n ? 1 : -1)}px)`,
    ...dt[e.position]
  };
  return /* @__PURE__ */ d.jsx(
    ot,
    {
      isBottom: a,
      opacity: p.opacity,
      ref: r,
      style: p,
      transform: p.transform,
      ...e.ariaProps,
      children: L(e.message, { onClose: c })
    }
  );
}, kt = ({ pauseOnHover: t = !0 }) => {
  const e = W(R), s = st(), { handlers: i, toasts: r } = et(), { calculateOffset: o, endPause: n, startPause: a, updateHeight: c } = i, p = t ? a : void 0, m = t ? n : void 0;
  return /* @__PURE__ */ d.jsx(z, { theme: e, children: r.length > 0 && s(
    /* @__PURE__ */ d.jsx("div", { "data-wui-persistent": !0, onMouseEnter: p, onMouseLeave: m, children: r.map((g) => /* @__PURE__ */ d.jsx(
      ut,
      {
        calculateOffset: o,
        toast: g,
        updateHeight: c
      },
      g.id
    )) })
  ) });
}, ct = ({ children: t, ...e }) => /* @__PURE__ */ d.jsx(it, { ...e, children: t }), wt = (t, e) => {
  var o, n;
  const r = {
    duration: 7e3,
    position: (typeof t == "string" ? void 0 : ((o = t == null ? void 0 : t.type) == null ? void 0 : o.displayName) || ((n = t == null ? void 0 : t.type) == null ? void 0 : n.name)) === "Growl" ? "top-right" : "bottom-center",
    ...e
  };
  return P(t, r);
}, jt = (t) => {
  P.remove(t);
}, Tt = (t) => {
  P.dismiss(t);
}, $t = { Growl: N, Snackbar: G, SnackbarAction: lt, Title: ct };
export {
  kt as Notifications,
  $t as Toast,
  Tt as dismiss,
  jt as remove,
  wt as toast
};