react-toast-plus
Version:
React Toast Plus: A flexible, customizable, and modern toast notification library for React.
904 lines (899 loc) • 30.9 kB
JavaScript
import { jsx as T, jsxs as _ } from "react/jsx-runtime";
import { isValidElement as ue, useState as L, useRef as I, useCallback as C, useEffect as D, useContext as fe, createContext as me, useReducer as ge, createElement as pe } from "react";
import { createPortal as he } from "react-dom";
const N = (...t) => t.flatMap((e) => typeof e == "string" ? e : typeof e == "object" && e !== null ? Object.keys(e).filter((o) => e[o]) : []).filter(Boolean).join(" ").trim();
let ye = { data: "" }, Te = (t) => typeof window == "object" ? ((t ? t.querySelector("#_goober") : window._goober) || Object.assign((t || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t || ye, be = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, ve = /\/\*[^]*?\*\/| +/g, J = /\n+/g, E = (t, e) => {
let o = "", l = "", c = "";
for (let r in t) {
let i = t[r];
r[0] == "@" ? r[1] == "i" ? o = r + " " + i + ";" : l += r[1] == "f" ? E(i, r) : r + "{" + E(i, r[1] == "k" ? "" : e) + "}" : typeof i == "object" ? l += E(i, e ? e.replace(/([^,])+/g, (n) => r.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (a) => /&/.test(a) ? a.replace(/&/g, n) : n ? n + " " + a : a)) : r) : i != null && (r = /^--/.test(r) ? r : r.replace(/[A-Z]/g, "-$&").toLowerCase(), c += E.p ? E.p(r, i) : r + ":" + i + ";");
}
return o + (e && c ? e + "{" + c + "}" : c) + l;
}, x = {}, te = (t) => {
if (typeof t == "object") {
let e = "";
for (let o in t) e += o + te(t[o]);
return e;
}
return t;
}, Ce = (t, e, o, l, c) => {
let r = te(t), i = x[r] || (x[r] = ((a) => {
let d = 0, f = 11;
for (; d < a.length; ) f = 101 * f + a.charCodeAt(d++) >>> 0;
return "go" + f;
})(r));
if (!x[i]) {
let a = r !== t ? t : ((d) => {
let f, u, g = [{}];
for (; f = be.exec(d.replace(ve, "")); ) f[4] ? g.shift() : f[3] ? (u = f[3].replace(J, " ").trim(), g.unshift(g[0][u] = g[0][u] || {})) : g[0][f[1]] = f[2].replace(J, " ").trim();
return g[0];
})(t);
x[i] = E(c ? { ["@keyframes " + i]: a } : a, o ? "" : "." + i);
}
let n = o && x.g ? x.g : null;
return o && (x.g = x[i]), ((a, d, f, u) => {
u ? d.data = d.data.replace(u, a) : d.data.indexOf(a) === -1 && (d.data = f ? a + d.data : d.data + a);
})(x[i], e, l, n), i;
}, we = (t, e, o) => t.reduce((l, c, r) => {
let i = e[r];
if (i && i.call) {
let n = i(o), a = n && n.props && n.props.className || /^go/.test(n) && n;
i = a ? "." + a : n && typeof n == "object" ? n.props ? "" : E(n, "") : n === !1 ? "" : n;
}
return l + c + (i ?? "");
}, "");
function W(t) {
let e = this || {}, o = t.call ? t(e.p) : t;
return Ce(o.unshift ? o.raw ? we(o, [].slice.call(arguments, 1), e.p) : o.reduce((l, c) => Object.assign(l, c && c.call ? c(e.p) : c), {}) : o, Te(e.target), e.g, e.o, e.k);
}
let se, V, G, Oe = W.bind({ g: 1 }), R = W.bind({ k: 1 });
function xe(t, e, o, l) {
E.p = e, se = t, V = o, G = l;
}
function $(t, e) {
let o = this || {};
return function() {
let l = arguments;
function c(r, i) {
let n = Object.assign({}, r), a = n.className || c.className;
o.p = Object.assign({ theme: V && V() }, n), o.o = / *go\d+/.test(a), n.className = W.apply(o, l) + (a ? " " + a : "");
let d = t;
return t[0] && (d = n.as || t, delete n.as), G && d[0] && G(n), se(d, n);
}
return e ? e(c) : c;
};
}
const Se = 5e3, oe = "top-right", re = 300, ne = "bounce", Ee = !0, Le = {
lifetime: Se,
autoClose: !0,
progressBar: {
visible: !0
},
closeButton: {
visible: !0
},
iconProps: {
visible: !0
},
pauseOnHover: !0,
pauseOnFocusLoss: !0,
closeOnClick: !1,
draggableClose: !0,
transitionDuration: re,
placement: oe,
transition: ne
}, $e = {
lifetime: 0,
autoClose: !1,
progressBar: {
visible: !1
},
closeButton: {
visible: !1
},
pauseOnHover: !1,
pauseOnFocusLoss: !1,
closeOnClick: !1,
draggableClose: !1
}, De = 6, Ae = {
toastMaxWidth: "320px",
toastMinWidth: "150px",
toastMinHeight: "48px",
toastBgColor: "#FFF",
toastTextColor: "#5C5C5C",
toastEmptyColor: "#5C5C5C",
toastSuccessColor: "#17c964",
toastInfoColor: "#007bff",
toastWarningColor: "#ffcc00",
toastErrorColor: "#ff4d4f",
toastLoaderColor: "gray",
toastLoaderAreaColor: "rgba(0,0,0,0.1)",
toastBoxShadow: "0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)",
toastPadding: "10px",
toastRadius: "4px",
toastFontFamily: "Verdana, sans-serif"
}, Me = (t) => {
const e = { ...Ae, ...t };
return Oe`
:root {
--toast-max-width: ${e.toastMaxWidth};
--toast-min-width: ${e.toastMinWidth};
--toast-min-height: ${e.toastMinHeight};
--toast-font-family: ${e.toastFontFamily};
--toast-bg-color: ${e.toastBgColor};
--toast-text-color: ${e.toastTextColor};
--toast-empty-color: ${e.toastEmptyColor};
--toast-success-color: ${e.toastSuccessColor};
--toast-info-color: ${e.toastInfoColor};
--toast-warning-color: ${e.toastWarningColor};
--toast-error-color: ${e.toastErrorColor};
--toast-loader-color: ${e.toastLoaderColor};
--toast-loader-area-color: ${e.toastLoaderAreaColor};
--toast-radius: ${e.toastRadius};
--toast-padding: ${e.toastPadding};
--toast-shadow: ${e.toastBoxShadow};
}
`;
}, ae = {
success: "var(--toast-success-color)",
info: "var(--toast-info-color)",
warning: "var(--toast-warning-color)",
error: "var(--toast-error-color)",
loading: "var(--toast-loading-color)",
empty: "var(--toast-empty-color)"
}, _e = $("div")`
position: fixed;
z-index: 9999;
inset: 5px;
pointer-events: none;
`, ke = W`
display: flex;
position: absolute;
box-sizing: border-box;
> * {
pointer-events: auto;
}
`, Be = $("div")`
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background: var(--toast-bg-color);
color: var(--toast-text-color);
will-change: transform;
box-shadow: var(--toast-shadow);
max-width: var(--toast-max-width);
min-width: var(--toast-min-width);
max-height: var(--toast-max-height);
border-radius: var(--toast-radius);
font-family: var(--toast-font-family);
overflow: hidden;
padding: var(--toast-padding);
gap: 10px;
`, Ne = $("div")`
flex: 1 1 auto;
display: flex;
align-items: center;
margin: 5px 0;
white-space: pre-line;
`, Ie = R`
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
`, Re = $("div")`
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100%;
transform-origin: left;
background-color:${(t) => ae[t.type]};
animation: ${Ie} linear 1 forwards;
animation-duration: ${(t) => t.duration}ms;
animation-play-state: ${(t) => t.state};
`, je = $("button")`
border: none;
background: none;
cursor: pointer;
color: inherit;
text-transform: none;
padding: 0;
margin: 0;
align-self: center;
transition: opacity 0.3s;
opacity: 0.5;
flex: 0 0 auto;
:hover{
opacity: 1;
color:var(--toast-error-color);
}
height: 1rem;
width: 1rem;
>svg{
transition: color 0.3s;
fill:currentColor;
}
`, Fe = $("div")`
flex: 0 0 auto;
width: 20px;
height: 20px;
`, Xe = R`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`, Pe = R`
0% {
stroke-dashoffset: 100%;
}
100% {
stroke-dashoffset: 0;
}
`, K = R`
0% {
r: 0;
}
`, We = R`
50% {
opacity: 0.11;
}
100% {
r: 100;
opacity: 0;
}
`, ze = $("span")`
width: 100%;
height: 100%;
border: 2px solid var(--toast-loader-area-color);
border-bottom-color: var(--toast-loader-color);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: ${Xe} 1s linear infinite;`, He = $("svg")`
display: block;
width: 100%;
height: 100%;
color: ${(t) => ae[t.type]};
& circle:nth-of-type(1) {
fill: currentColor;
opacity: 0.15;
animation: ${K} 0.45s cubic-bezier(0.66, 0.23, 0.51, 1.23) backwards,
${We} 0.9s linear 1.1s forwards;
}
& circle:nth-of-type(2) {
fill: currentColor;
opacity: 0.8;
animation: ${K} 0.5s cubic-bezier(0.66, 0.23, 0.51, 1.23) 0.25s backwards;
}
& polyline , & line ,& path ,& path {
stroke: var(--toast-bg-color);
stroke-width: 20;
stroke-dasharray: 100%, 100%;
stroke-dashoffset: 0;
animation: ${Pe} 0.5s cubic-bezier(0.55, 0.2, 0.71, -0.04) 0.7s backwards;
}
`, Ue = ({ children: t, className: e, style: o }) => /* @__PURE__ */ T(_e, { className: N("react-toast-plus", e), style: {
...o
}, children: t });
var w = /* @__PURE__ */ ((t) => (t.ADD_TOAST = "ADD_TOAST", t.REMOVE_TOAST = "REMOVE_TOAST", t.UPDATE_TOAST = "UPDATE_TOAST", t.REMOVE_ALL_TOASTS = "REMOVE_ALL_TOASTS", t))(w || {});
const Ve = (t, e) => {
switch (e.type) {
case w.ADD_TOAST:
return {
...t,
toasts: [e.toast, ...t.toasts]
};
case w.REMOVE_TOAST:
return t.toasts.some((o) => o.id === e.id) ? {
...t,
toasts: t.toasts.filter((o) => o.id !== e.id)
} : t;
case w.UPDATE_TOAST:
return {
...t,
toasts: t.toasts.map(
(o) => {
var l, c, r, i, n, a;
return o.id === e.toast.id ? {
...o,
...e.toast,
options: {
...o.options,
...e.toast.options,
closeButton: {
...(l = o.options) == null ? void 0 : l.closeButton,
...(c = e.toast.options) == null ? void 0 : c.closeButton
},
progressBar: {
...(r = o.options) == null ? void 0 : r.progressBar,
...(i = e.toast.options) == null ? void 0 : i.progressBar
},
iconProps: {
...(n = o.options) == null ? void 0 : n.iconProps,
...(a = e.toast.options) == null ? void 0 : a.iconProps
}
}
} : o;
}
)
};
case w.REMOVE_ALL_TOASTS:
return {
...t,
toasts: []
};
default:
return console.error(`Unhandled action type: ${e.type}`), t;
}
}, z = ({ children: t, type: e, svgOptions: o, circleOptions: l, gOptions: c }) => /* @__PURE__ */ T(
He,
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 214 214",
preserveAspectRatio: "xMidYMid meet",
...o,
type: e,
children: /* @__PURE__ */ _("g", { fill: "none", stroke: "currentColor", strokeWidth: "2", ...c, children: [
/* @__PURE__ */ T("circle", { cx: "107", cy: "107", r: "107", ...l }),
/* @__PURE__ */ T("circle", { cx: "107", cy: "107", r: "107", ...l }),
t
] })
}
), Ge = () => /* @__PURE__ */ _(z, { type: "error", children: [
/* @__PURE__ */ T("line", { x1: "70", y1: "70", x2: "144", y2: "144" }),
/* @__PURE__ */ T("line", { x1: "144", y1: "70", x2: "70", y2: "144" })
] }), Ye = () => /* @__PURE__ */ T(z, { type: "success", children: /* @__PURE__ */ T("polyline", { points: "55 110 95 150 172.9 72.1" }) }), qe = () => /* @__PURE__ */ _(z, { type: "warning", children: [
/* @__PURE__ */ T("path", { d: "M107 50 L107 130" }),
/* @__PURE__ */ T("path", { d: "M 107 165.37 L 107 166.42" })
] }), Ze = () => /* @__PURE__ */ _(
z,
{
type: "info",
svgOptions: {
viewBox: "142.9996 143.0003 214 214",
fill: "none",
baseProfile: "tiny",
version: "1.2",
strokeWidth: "0",
width: "24",
height: "24"
},
circleOptions: {
cx: "-777.249",
cy: "104.68",
r: "107"
},
gOptions: {
transform: "matrix(1, 0, 0, 1, 1027.2486572265625, 145.3203125)"
},
children: [
/* @__PURE__ */ T(
"path",
{
d: "M -753.273 166.428 C -753.336 166.449 -759.001 168.335 -763.921 168.335 C -766.639 168.335 -767.736 167.771 -768.083 167.525 C -769.805 166.324 -773.003 164.081 -767.529 153.177 L -757.279 132.739 C -751.204 120.603 -750.302 108.867 -754.769 99.683 C -758.419 92.171 -765.42 87.017 -774.449 85.17 C -777.698 84.505 -780.999 84.177 -784.266 84.177 C -803.221 84.177 -815.98 95.247 -816.514 95.717 C -818.348 97.337 -818.779 100.021 -817.56 102.135 C -816.33 104.245 -813.796 105.209 -811.46 104.409 C -811.408 104.389 -805.73 102.493 -800.81 102.493 C -798.116 102.493 -797.029 103.055 -796.69 103.291 C -794.957 104.501 -791.75 106.776 -797.214 117.662 L -807.464 138.108 C -813.55 150.254 -814.442 161.992 -809.975 171.162 C -806.324 178.676 -799.334 183.833 -790.283 185.676 C -787.067 186.324 -783.766 186.671 -780.507 186.671 C -761.543 186.671 -748.774 175.603 -748.241 175.128 C -746.407 173.522 -745.975 170.826 -747.193 168.716 C -748.423 166.613 -750.977 165.668 -753.273 166.428 Z",
style: {
strokeDasharray: "none",
strokeWidth: "unset",
fill: "var(--toast-bg-color)",
stroke: "var(--toast-bg-color)"
}
}
),
/* @__PURE__ */ T(
"circle",
{
cx: "-761.871",
cy: "48.312",
r: "25.623",
style: {
strokeDasharray: "none",
strokeWidth: "unset",
fill: "var(--toast-bg-color)",
stroke: "var(--toast-bg-color)"
}
}
)
]
}
), Je = () => /* @__PURE__ */ T("svg", { fillRule: "evenodd", viewBox: "0 0 24 24", children: /* @__PURE__ */ T("path", { d: "M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" }) }), Q = {
success: /* @__PURE__ */ T(Ye, {}),
error: /* @__PURE__ */ T(Ge, {}),
warning: /* @__PURE__ */ T(qe, {}),
info: /* @__PURE__ */ T(Ze, {}),
loading: /* @__PURE__ */ T(ze, {}),
empty: null
}, Ke = (t) => {
const { id: e, type: o = "empty", content: l, onClose: c, options: r = {}, isRunning: i } = t, {
className: n,
style: a,
lifetime: d,
autoClose: f,
progressBar: u,
closeButton: g,
icon: p,
iconProps: m
} = r, h = () => typeof l == "string" || ue(l) ? l : typeof l == "function" ? l(t) : null;
return /* @__PURE__ */ _(Be, { className: n, style: a, children: [
(m == null ? void 0 : m.visible) && (Q[o] || p) && /* @__PURE__ */ T(Fe, { className: m == null ? void 0 : m.className, style: m == null ? void 0 : m.style, children: p ?? Q[o] }),
/* @__PURE__ */ T(Ne, { children: h() }),
(g == null ? void 0 : g.visible) && /* @__PURE__ */ T(je, { className: g.className, style: g.style, onClick: () => c(e), children: /* @__PURE__ */ T(Je, {}) }),
f && (u == null ? void 0 : u.visible) && /* @__PURE__ */ T(
Re,
{
type: o || "empty",
state: i ? "running" : "paused",
duration: d ?? 0,
className: u.className,
style: u.style
},
`${e}-progress-bar`
)
] });
}, Qe = (...t) => {
var o, l, c, r, i, n, a, d, f, u, g, p, m, h, v, b;
const e = [...t].reverse();
return {
className: N(
...t.map((s) => s == null ? void 0 : s.className).filter(Boolean)
),
style: Object.assign({}, ...t.map((s) => s == null ? void 0 : s.style)),
// use the last defined value
lifetime: (o = e.find((s) => (s == null ? void 0 : s.lifetime) !== void 0)) == null ? void 0 : o.lifetime,
autoClose: (l = e.find((s) => (s == null ? void 0 : s.autoClose) !== void 0)) == null ? void 0 : l.autoClose,
pauseOnHover: (c = e.find((s) => (s == null ? void 0 : s.pauseOnHover) !== void 0)) == null ? void 0 : c.pauseOnHover,
draggableClose: (r = e.find((s) => (s == null ? void 0 : s.draggableClose) !== void 0)) == null ? void 0 : r.draggableClose,
pauseOnFocusLoss: (i = e.find((s) => (s == null ? void 0 : s.pauseOnFocusLoss) !== void 0)) == null ? void 0 : i.pauseOnFocusLoss,
closeOnClick: (n = e.find((s) => (s == null ? void 0 : s.closeOnClick) !== void 0)) == null ? void 0 : n.closeOnClick,
progressBar: {
visible: (d = (a = e.find((s) => {
var y;
return ((y = s == null ? void 0 : s.progressBar) == null ? void 0 : y.visible) !== void 0;
})) == null ? void 0 : a.progressBar) == null ? void 0 : d.visible,
className: N(
...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.progressBar) == null ? void 0 : y.className;
}).filter(Boolean)
),
style: Object.assign({}, ...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.progressBar) == null ? void 0 : y.style;
}))
},
closeButton: {
visible: (u = (f = e.find((s) => {
var y;
return ((y = s == null ? void 0 : s.closeButton) == null ? void 0 : y.visible) !== void 0;
})) == null ? void 0 : f.closeButton) == null ? void 0 : u.visible,
className: N(
...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.closeButton) == null ? void 0 : y.className;
}).filter(Boolean)
),
style: Object.assign({}, ...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.closeButton) == null ? void 0 : y.style;
}))
},
// use the last defined value
transition: (g = e.find((s) => (s == null ? void 0 : s.transition) !== void 0)) == null ? void 0 : g.transition,
transitionDuration: (p = e.find((s) => (s == null ? void 0 : s.transitionDuration) !== void 0)) == null ? void 0 : p.transitionDuration,
placement: (m = e.find((s) => (s == null ? void 0 : s.placement) !== void 0)) == null ? void 0 : m.placement,
icon: (h = e.find((s) => (s == null ? void 0 : s.icon) !== void 0)) == null ? void 0 : h.icon,
// Merge props (className and style)
iconProps: {
visible: (b = (v = e.find((s) => {
var y;
return ((y = s == null ? void 0 : s.iconProps) == null ? void 0 : y.visible) !== void 0;
})) == null ? void 0 : v.iconProps) == null ? void 0 : b.visible,
className: N(
...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.iconProps) == null ? void 0 : y.className;
}).filter(Boolean)
),
style: Object.assign({}, ...t.map((s) => {
var y;
return (y = s == null ? void 0 : s.iconProps) == null ? void 0 : y.style;
}))
}
};
}, et = (t, e, o) => {
const [l, c] = L(null), [r, i] = L(!1), [n, a] = L(!1), [d, f] = L(0), u = I(null), g = C((b) => {
if (!t) return;
const s = Date.now() + b;
c(s), f(b), i(!0), a(!1), u.current && clearTimeout(u.current), u.current = setTimeout(() => {
i(!1), f(0), t && e(t);
}, b);
}, [t]), p = C(() => {
if (r && l) {
const b = Date.now(), s = l - b;
f(s), i(!1), a(!0), u.current && clearTimeout(u.current);
}
}, [r, l]), m = C(() => {
if (!r && n && d > 0) {
const b = Date.now() + d;
c(b), i(!0), a(!1), u.current = setTimeout(() => {
i(!1), f(0), t && e(t);
}, d);
}
}, [r, n, d]), h = C(() => {
u.current && (clearTimeout(u.current), u.current = null), i(!1), a(!1), f(0), c(null);
}, []), v = C(() => r && l ? Math.max(0, l - Date.now()) : d, [r, l, d]);
return D(() => {
if (o)
return document.hasFocus() || p(), window.addEventListener("blur", p), window.addEventListener("focus", m), () => {
window.removeEventListener("blur", p), window.removeEventListener("focus", m);
};
}, [o, p, m]), {
start: g,
pause: p,
resume: m,
clear: h,
remainingTime: v,
isRunning: r,
isPaused: n
};
}, ie = () => {
const t = fe(ce);
if (!t)
throw new Error("useToast must be used within a ToastProvider");
const { dispatch: e, state: o } = t;
return {
toasts: o.toasts,
dispatch: e
};
}, tt = () => {
const { toasts: t, dispatch: e } = ie(), o = (c, r) => {
e({ type: w.UPDATE_TOAST, toast: { id: c, element: r } });
}, l = C((c, r) => {
var f, u;
const i = (u = (f = c.options) == null ? void 0 : f.placement) == null ? void 0 : u.includes("bottom"), n = t.filter((g) => {
var p, m;
return ((p = g.options) == null ? void 0 : p.placement) === ((m = c.options) == null ? void 0 : m.placement);
}), a = n.findIndex((g) => g.id === c.id), d = i ? r.newestFirst ? [a + 1] : [0, a] : r.newestFirst ? [0, a] : [a + 1];
return n.slice(...d).reduce((g, p) => {
var h;
const m = ((h = p.element) == null ? void 0 : h.height) ?? 0;
return g + r.gutter + m;
}, 0);
}, [t]);
return {
updateToastElement: o,
calcToastOffset: l
};
}, ee = () => `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, st = () => {
const { dispatch: t, toasts: e } = ie(), o = (n, a = "empty", d) => {
const f = ee();
return t({
type: w.ADD_TOAST,
toast: {
id: f,
content: n,
type: a,
onClose: c,
options: d
}
}), {
id: f
};
}, l = (n) => (a, d) => o(a, n, d);
o.success = l("success"), o.error = l("error"), o.warning = l("warning"), o.info = l("info"), o.empty = l("empty"), o.loading = l("loading"), o.promise = (n, a, d) => {
const { success: f, error: u, ...g } = d || {}, p = o(a.pending, "loading", g).id;
return (typeof n == "function" ? n() : n).then((h) => {
const v = typeof a.success == "function" ? a.success(h) : a.success;
i({ id: p, content: v, type: "success", options: f });
}).catch((h) => {
const v = typeof a.error == "function" ? a.error(h) : a.error;
i({ id: p, content: v, type: "error", options: u });
}), {
id: p
};
}, o.custom = (n, a) => {
const d = ee();
return t({
type: w.ADD_TOAST,
toast: {
id: d,
content: "",
onClose: c,
renderCustomToast: n,
options: a
}
}), { id: d };
};
const c = (n) => {
t({ type: w.REMOVE_TOAST, id: n });
};
c.byIndex = (n) => {
var d;
const a = (d = e[n]) == null ? void 0 : d.id;
a ? c(a) : console.error("Invalid index");
};
const r = () => {
t({ type: w.REMOVE_ALL_TOASTS });
}, i = (n) => {
t({ type: w.UPDATE_TOAST, toast: n });
};
return {
addToast: o,
removeToast: c,
removeAllToasts: r,
updateToast: i
};
}, ot = (t, e, o, l) => {
var d;
const c = l.includes("right") ? 1 : -1, r = l.includes("bottom") ? 1 : -1, i = l.includes("center"), n = {
fade: {
transition: `all ${o}ms cubic-bezier(0.2, 0, 0, 1)`
},
slide: {},
zoom: {},
bounce: {
transition: `all ${o}ms cubic-bezier(0.68, -0.55, 0.25, 1.35)`
}
}, a = {
fade: {
unmounted: { transform: `translate3d(0, ${r * 120}%, 0) scale(0.4)` },
entering: { transform: "translate3d(0, 0, 0) scale(1)" },
entered: { transform: "translate3d(0, 0, 0) scale(1)" },
exiting: { transform: `translate3d(0, ${r * 60}%, 0) scale(0.4)`, opacity: 0 },
exited: { transform: `translate3d(0, ${r * 60}%, 0) scale(0.4)`, opacity: 0 }
},
zoom: {
unmounted: { transform: "scale(0)" },
entering: { transform: "scale(1)" },
entered: { transform: "scale(1)" },
exiting: { transform: "scale(0)" },
exited: { transform: "scale(0)" }
},
slide: {
unmounted: { transform: `translateX(${c * (i ? 50 : 100)}%)`, opacity: i ? 0 : 1 },
entering: { transform: "translateX(0)", opacity: 1 },
entered: { transform: "translateX(0)", opacity: 1 },
exiting: { transform: `translateX(${c * (i ? 50 : 100)}%)`, opacity: i ? 0 : 1 },
exited: { transform: `translateX(${c * (i ? 50 : 100)}%)`, opacity: i ? 0 : 1 }
},
bounce: {
unmounted: { transform: `translate3d(${i ? `0 , ${r * 50}%` : `${c * 100}% , 0`}, 0) scale(0.8)`, opacity: i ? 0 : 1 },
entering: { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1 },
entered: { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1 },
exiting: { transform: `translate3d(${i ? `0 , ${r * 50}%` : `${c * 100}% , 0`}, 0) scale(0.8)`, opacity: i ? 0 : 1 },
exited: { transform: `translate3d(${i ? `0 , ${r * 50}%` : `${c * 100}% , 0`}, 0) scale(0.8)`, opacity: i ? 0 : 1 }
}
};
return Object.assign({ transition: `all ${o}ms ease-in-out` }, n[e], (d = a[e]) == null ? void 0 : d[t]) || {};
}, rt = (t) => {
switch (t) {
case "top-left":
case "bottom-left":
return { justifyContent: "flex-start", left: 0 };
case "top-center":
case "bottom-center":
return { justifyContent: "center", left: 0, right: 0 };
case "top-right":
case "bottom-right":
return { justifyContent: "flex-end", right: 0 };
default:
return { justifyContent: "flex-end", right: 0 };
}
}, nt = (t, e, o) => {
const [l, c] = L(0), [r, i] = L(!1), [n, a] = L(1), d = I(0), f = I(0), u = I(!1), g = C((h) => {
if (!r) return;
const b = ("touches" in h ? h.touches[0].clientX : h.clientX) - d.current;
f.current = b - l, requestAnimationFrame(() => {
c(b);
const s = Math.max(1 - Math.abs(b) / 150, 0);
a(s);
}), Math.abs(b) > 10 && (u.current = !0);
}, [r, l]), p = (h) => {
i(!0), d.current = "touches" in h ? h.touches[0].clientX : h.clientX, f.current = 0, u.current = !1;
}, m = C(() => {
i(!1), Math.abs(l) > 100 || Math.abs(f.current) > 30 ? e(t) : (c(0), a(1));
}, [l, e, t]);
return D(() => {
if (o) return;
const h = () => {
r && m();
};
return window.addEventListener("mouseup", h), window.addEventListener("touchend", h), () => {
window.removeEventListener("mouseup", h), window.removeEventListener("touchend", h);
};
}, [r, m]), {
dragDistance: l,
opacity: n,
handleDragStart: p,
handleDragMove: g,
handleDragEnd: m,
isDragging: r,
wasDragged: u.current
// Return if toast was dragged
};
}, at = ({ children: t, toastContextProps: e, gutter: o, newestFirst: l = Ee }) => {
var Y;
const [c, r] = L("unmounted"), { updateToast: i } = st(), { updateToastElement: n, calcToastOffset: a } = tt(), {
autoClose: d,
lifetime: f,
placement: u = oe,
transition: g = ne,
transitionDuration: p = re,
draggableClose: m,
pauseOnHover: h,
pauseOnFocusLoss: v,
closeOnClick: b
} = e.options || {}, {
dragDistance: s,
opacity: y,
handleDragStart: j,
handleDragMove: F,
handleDragEnd: X,
isDragging: A,
wasDragged: M
} = nt(e.id, e.onClose, m), k = C((O) => {
r("exiting"), setTimeout(() => {
e.onClose(O);
}, p);
}, [p]), S = et(e.id, k, v);
D(() => {
i({
id: e.id,
options: {
placement: u
}
});
}, [u]), D(() => {
if (c === "unmounted" && r("entering"), c === "entering") {
const O = setTimeout(() => r("entered"), p);
return () => clearTimeout(O);
} else if (c === "exiting") {
const O = setTimeout(() => r("exited"), p);
return () => clearTimeout(O);
}
}, [c, p]);
const B = I({
height: 0
}), H = C((O) => {
if (O) {
const q = () => {
var Z;
const P = O.clientHeight;
B.current && ((Z = B.current) == null ? void 0 : Z.height) !== P && P > 0 && (B.current.height = P, n(e.id, { height: P }));
};
q(), new ResizeObserver(q).observe(O, { box: "border-box" });
}
}, [e.id, n]);
D(() => {
if (d && f)
return S.start(f), () => {
S.clear();
};
}, [d, f]), D(() => {
A && S.pause();
}, [A]);
const U = C(() => {
M || k(e.id);
}, [M]), le = a(e, { gutter: o, newestFirst: l }), de = {
...e,
options: {
...e.options,
style: {
...(Y = e.options) == null ? void 0 : Y.style,
...ot(c, g, p, u)
}
}
};
return /* @__PURE__ */ T(
"div",
{
ref: H,
className: ke,
...h && {
onMouseEnter: S.pause,
onMouseLeave: S.resume
},
...m && {
onMouseDown: j,
onMouseMove: F,
onMouseUp: X,
onTouchStart: j,
onTouchMove: F,
onTouchEnd: X
},
...b && {
onClick: U
},
style: {
transform: `translateY(${le * (u.includes("top") ? 1 : -1)}px) translateX(${s}px)`,
opacity: y,
cursor: m ? "pointer" : "default",
transition: A ? "none" : "all 300ms ease",
...rt(u),
[u.includes("top") ? "top" : "bottom"]: 0
},
children: /* @__PURE__ */ T(t, { ...de, ...S, onClose: k }, e.id)
}
);
};
xe(pe);
const ce = me(void 0), dt = ({
children: t,
containerOptions: e = {},
toastOptions: o = {},
gutter: l = De,
newestFirst: c,
toastStyles: r,
portalActive: i
}) => {
const [n, a] = ge(Ve, {
toasts: []
}), {
portalSelector: d = typeof document < "u" ? document.body : null,
component: f = Ue,
...u
} = e, {
component: g = Ke,
successOptions: p = {},
errorOptions: m = {},
warningOptions: h = {},
infoOptions: v = {},
emptyOptions: b = {},
loadingOptions: s = $e,
...y
} = o, j = {
success: p,
error: m,
warning: h,
info: v,
empty: b,
loading: s
};
D(() => {
Me(r);
}, [r]);
const F = typeof window < "u" && "__NEXT_DATA__" in window, X = i ?? !F, A = /* @__PURE__ */ T(f, { ...u, children: n.toasts.map((M) => {
const { options: k, renderCustomToast: S, ...B } = M, H = j[M.type] || {}, U = Qe(
Le,
y,
H,
k
);
return /* @__PURE__ */ T(
at,
{
gutter: l,
toastContextProps: { ...B, options: U },
newestFirst: c,
children: S || g
},
`Controller_${M.id}`
);
}) });
return /* @__PURE__ */ _(ce.Provider, { value: { state: n, dispatch: a }, children: [
t,
X && d ? he(A, d) : A
] });
};
export {
w as ActionTypes,
Je as CloseIcon,
Ge as ErrorIcon,
Ze as InfoIcon,
je as StyledCloseButton,
ze as StyledLoadingIcon,
Re as StyledProgressBar,
_e as StyledToastContainer,
Be as StyledToaster,
Ne as StyledToasterContent,
Ye as SuccessIcon,
ce as ToastContext,
dt as ToastProvider,
qe as WarningIcon,
st as useToast,
ie as useToastStore
};