kitzo 2.1.29 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +182 -199
- package/dist/functions/index.js +36 -0
- package/dist/functions/index.js.map +1 -0
- package/dist/functions/types.d.ts +0 -0
- package/dist/react/index.js +894 -0
- package/dist/react/index.js.map +1 -0
- package/dist/react/types/functions.d.ts +2 -0
- package/dist/react/types/hooks.d.ts +14 -0
- package/dist/react/types/toast.d.ts +25 -19
- package/dist/react/{index.d.ts → types.d.ts} +1 -0
- package/package.json +75 -73
- package/dist/react/react.esm.js +0 -859
- package/dist/vanilla/vanilla.d.ts +0 -95
- package/dist/vanilla/vanilla.esm.js +0 -589
- package/dist/vanilla/vanilla.umd.js +0 -597
|
@@ -0,0 +1,894 @@
|
|
|
1
|
+
import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function _arrayLikeToArray(r, a) {
|
|
4
|
+
(null == a || a > r.length) && (a = r.length);
|
|
5
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
6
|
+
return n;
|
|
7
|
+
}
|
|
8
|
+
function _arrayWithHoles(r) {
|
|
9
|
+
if (Array.isArray(r)) return r;
|
|
10
|
+
}
|
|
11
|
+
function _arrayWithoutHoles(r) {
|
|
12
|
+
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
13
|
+
}
|
|
14
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
15
|
+
try {
|
|
16
|
+
var i = n[a](c),
|
|
17
|
+
u = i.value;
|
|
18
|
+
} catch (n) {
|
|
19
|
+
return void e(n);
|
|
20
|
+
}
|
|
21
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
22
|
+
}
|
|
23
|
+
function _asyncToGenerator(n) {
|
|
24
|
+
return function () {
|
|
25
|
+
var t = this,
|
|
26
|
+
e = arguments;
|
|
27
|
+
return new Promise(function (r, o) {
|
|
28
|
+
var a = n.apply(t, e);
|
|
29
|
+
function _next(n) {
|
|
30
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
31
|
+
}
|
|
32
|
+
function _throw(n) {
|
|
33
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
34
|
+
}
|
|
35
|
+
_next(void 0);
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
function _defineProperty(e, r, t) {
|
|
40
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
41
|
+
value: t,
|
|
42
|
+
enumerable: true,
|
|
43
|
+
configurable: true,
|
|
44
|
+
writable: true
|
|
45
|
+
}) : e[r] = t, e;
|
|
46
|
+
}
|
|
47
|
+
function _iterableToArray(r) {
|
|
48
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
49
|
+
}
|
|
50
|
+
function _iterableToArrayLimit(r, l) {
|
|
51
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
52
|
+
if (null != t) {
|
|
53
|
+
var e,
|
|
54
|
+
n,
|
|
55
|
+
i,
|
|
56
|
+
u,
|
|
57
|
+
a = [],
|
|
58
|
+
f = true,
|
|
59
|
+
o = false;
|
|
60
|
+
try {
|
|
61
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
62
|
+
} catch (r) {
|
|
63
|
+
o = true, n = r;
|
|
64
|
+
} finally {
|
|
65
|
+
try {
|
|
66
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
67
|
+
} finally {
|
|
68
|
+
if (o) throw n;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return a;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function _nonIterableRest() {
|
|
75
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
76
|
+
}
|
|
77
|
+
function _nonIterableSpread() {
|
|
78
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
79
|
+
}
|
|
80
|
+
function ownKeys(e, r) {
|
|
81
|
+
var t = Object.keys(e);
|
|
82
|
+
if (Object.getOwnPropertySymbols) {
|
|
83
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
84
|
+
r && (o = o.filter(function (r) {
|
|
85
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
86
|
+
})), t.push.apply(t, o);
|
|
87
|
+
}
|
|
88
|
+
return t;
|
|
89
|
+
}
|
|
90
|
+
function _objectSpread2(e) {
|
|
91
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
92
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
93
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
94
|
+
_defineProperty(e, r, t[r]);
|
|
95
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
96
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
return e;
|
|
100
|
+
}
|
|
101
|
+
function _regenerator() {
|
|
102
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
103
|
+
var e,
|
|
104
|
+
t,
|
|
105
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
106
|
+
n = r.iterator || "@@iterator",
|
|
107
|
+
o = r.toStringTag || "@@toStringTag";
|
|
108
|
+
function i(r, n, o, i) {
|
|
109
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
110
|
+
u = Object.create(c.prototype);
|
|
111
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
112
|
+
var i,
|
|
113
|
+
c,
|
|
114
|
+
u,
|
|
115
|
+
f = 0,
|
|
116
|
+
p = o || [],
|
|
117
|
+
y = false,
|
|
118
|
+
G = {
|
|
119
|
+
p: 0,
|
|
120
|
+
n: 0,
|
|
121
|
+
v: e,
|
|
122
|
+
a: d,
|
|
123
|
+
f: d.bind(e, 4),
|
|
124
|
+
d: function (t, r) {
|
|
125
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
function d(r, n) {
|
|
129
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
130
|
+
var o,
|
|
131
|
+
i = p[t],
|
|
132
|
+
d = G.p,
|
|
133
|
+
l = i[2];
|
|
134
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
135
|
+
}
|
|
136
|
+
if (o || r > 1) return a;
|
|
137
|
+
throw y = true, n;
|
|
138
|
+
}
|
|
139
|
+
return function (o, p, l) {
|
|
140
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
141
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
142
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
143
|
+
try {
|
|
144
|
+
if (f = 2, i) {
|
|
145
|
+
if (c || (o = "next"), t = i[o]) {
|
|
146
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
147
|
+
if (!t.done) return t;
|
|
148
|
+
u = t.value, c < 2 && (c = 0);
|
|
149
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
150
|
+
i = e;
|
|
151
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
152
|
+
} catch (t) {
|
|
153
|
+
i = e, c = 1, u = t;
|
|
154
|
+
} finally {
|
|
155
|
+
f = 1;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
return {
|
|
159
|
+
value: t,
|
|
160
|
+
done: y
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
}(r, o, i), true), u;
|
|
164
|
+
}
|
|
165
|
+
var a = {};
|
|
166
|
+
function Generator() {}
|
|
167
|
+
function GeneratorFunction() {}
|
|
168
|
+
function GeneratorFunctionPrototype() {}
|
|
169
|
+
t = Object.getPrototypeOf;
|
|
170
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
171
|
+
return this;
|
|
172
|
+
}), t),
|
|
173
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
174
|
+
function f(e) {
|
|
175
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
176
|
+
}
|
|
177
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
178
|
+
return this;
|
|
179
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
180
|
+
return "[object Generator]";
|
|
181
|
+
}), (_regenerator = function () {
|
|
182
|
+
return {
|
|
183
|
+
w: i,
|
|
184
|
+
m: f
|
|
185
|
+
};
|
|
186
|
+
})();
|
|
187
|
+
}
|
|
188
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
189
|
+
var i = Object.defineProperty;
|
|
190
|
+
try {
|
|
191
|
+
i({}, "", {});
|
|
192
|
+
} catch (e) {
|
|
193
|
+
i = 0;
|
|
194
|
+
}
|
|
195
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
196
|
+
function o(r, n) {
|
|
197
|
+
_regeneratorDefine(e, r, function (e) {
|
|
198
|
+
return this._invoke(r, n, e);
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
r ? i ? i(e, r, {
|
|
202
|
+
value: n,
|
|
203
|
+
enumerable: !t,
|
|
204
|
+
configurable: !t,
|
|
205
|
+
writable: !t
|
|
206
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
207
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
208
|
+
}
|
|
209
|
+
function _slicedToArray(r, e) {
|
|
210
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
211
|
+
}
|
|
212
|
+
function _toConsumableArray(r) {
|
|
213
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
214
|
+
}
|
|
215
|
+
function _toPrimitive(t, r) {
|
|
216
|
+
if ("object" != typeof t || !t) return t;
|
|
217
|
+
var e = t[Symbol.toPrimitive];
|
|
218
|
+
if (void 0 !== e) {
|
|
219
|
+
var i = e.call(t, r);
|
|
220
|
+
if ("object" != typeof i) return i;
|
|
221
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
222
|
+
}
|
|
223
|
+
return ("string" === r ? String : Number)(t);
|
|
224
|
+
}
|
|
225
|
+
function _toPropertyKey(t) {
|
|
226
|
+
var i = _toPrimitive(t, "string");
|
|
227
|
+
return "symbol" == typeof i ? i : i + "";
|
|
228
|
+
}
|
|
229
|
+
function _typeof(o) {
|
|
230
|
+
"@babel/helpers - typeof";
|
|
231
|
+
|
|
232
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
233
|
+
return typeof o;
|
|
234
|
+
} : function (o) {
|
|
235
|
+
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
236
|
+
}, _typeof(o);
|
|
237
|
+
}
|
|
238
|
+
function _unsupportedIterableToArray(r, a) {
|
|
239
|
+
if (r) {
|
|
240
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
241
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
242
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
var toastStyles = ".kitzo-toast-container {\n --normal-bg: hsl(0, 0%, 100%);\n --success-bg: hsl(152, 65%, 95%);\n --error-bg: hsl(0, 65%, 95%);\n --info-bg: hsl(210, 65%, 95%);\n\n --normal-text: hsl(0, 0%, 10%);\n --success-text: hsl(142, 98%, 30%);\n --error-text: hsl(6, 98%, 40%);\n --info-text: hsl(210, 100%, 20%);\n\n --normal-border: hsl(0, 0%, 94%);\n --success-border: hsl(123, 100%, 93%);\n --error-border: hsl(0, 100%, 94%);\n --info-border: hsl(210, 100%, 94%);\n\n --success-svg-bg: hsl(142, 98%, 40%);\n --error-svg-bg: hsl(6, 98%, 50%);\n --info-svg-bg: hsl(210, 100%, 40%);\n\n --loader-stroke: hsl(0, 0%, 50%);\n --loader-bg: hsl(0, 0%, 80%);\n}\n\n.kitzo-toast-container.kitzo-toast-dark {\n --normal-bg: hsl(0, 0%, 15%);\n --success-bg: hsl(152, 65%, 15%);\n --error-bg: hsl(0, 65%, 15%);\n --info-bg: hsl(210, 65%, 15%);\n\n --normal-text: hsl(0, 0%, 95%);\n --success-text: hsl(142, 98%, 70%);\n --error-text: hsl(6, 98%, 70%);\n --info-text: hsl(210, 100%, 70%);\n\n --normal-border: hsl(0, 0%, 17%);\n --success-border: hsl(123, 100%, 15%);\n --error-border: hsl(0, 100%, 15%);\n --info-border: hsl(210, 100%, 16%);\n\n --success-svg-bg: hsl(142, 98%, 40%);\n --error-svg-bg: hsl(6, 98%, 50%);\n --info-svg-bg: hsl(210, 100%, 40%);\n\n --loader-stroke: hsl(0, 0%, 80%);\n --loader-bg: hsl(0, 0%, 50%);\n}\n\n.kitzo-toast {\n font-family: inherit;\n font-size: 0.875rem;\n transition:\n opacity 160ms,\n transform 210ms;\n}\n\n/*! toast transition styles */\n.kitzo-toast.pos-y-top {\n transform-origin: top;\n}\n.kitzo-toast.pos-y-bottom {\n transform-origin: bottom;\n}\n\n.kitzo-toast.type-normal {\n background-color: var(--normal-bg);\n color: var(--normal-text);\n border: 1px solid var(--normal-border);\n}\n.kitzo-toast.type-loading {\n background-color: var(--normal-bg);\n color: var(--normal-text);\n border: 1px solid var(--normal-border);\n}\n\n.kitzo-toast.type-success {\n background-color: var(--success-bg);\n color: var(--success-text);\n border: 1px solid var(--success-border);\n}\n\n.kitzo-toast.type-error {\n background-color: var(--error-bg);\n color: var(--error-text);\n border: 1px solid var(--error-border);\n}\n\n.kitzo-toast.type-info {\n background-color: var(--info-bg);\n color: var(--info-text);\n border: 1px solid var(--info-border);\n}\n\n.kitzo-toast.type-normal,\n.kitzo-toast.type-loading,\n.kitzo-toast.type-success,\n.kitzo-toast.type-error,\n.kitzo-toast.type-info {\n border-radius: 0.425rem;\n padding: 0.2525rem 0.5rem;\n box-shadow: 0 3px 8px -3px hsl(0, 0%, 0%, 0.15);\n}\n\n.kitzo-toast.status-entering.pos-y-top {\n opacity: 0;\n transform: translateY(-120%) scale(0.5);\n}\n\n.kitzo-toast.status-visible.pos-y-top {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.kitzo-toast.status-leaving.pos-y-top {\n opacity: 0;\n transform: translateY(-120%) scale(0.5);\n}\n\n.kitzo-toast.status-entering.pos-y-bottom {\n opacity: 0;\n transform: translateY(120%) scale(0.5);\n}\n\n.kitzo-toast.status-visible.pos-y-bottom {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.kitzo-toast.status-leaving.pos-y-bottom {\n opacity: 0;\n transform: translateY(120%) scale(0.5);\n}\n\n.action-update {\n animation: update 150ms;\n}\n\n@keyframes update {\n 0% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/*! svg stylings */\n.svg-container {\n display: grid;\n place-items: center;\n border-radius: 10rem;\n color: white;\n height: 18px;\n width: 18px;\n position: relative;\n overflow: hidden;\n\n scale: 1.1;\n animation: svg-container-animation 400ms ease-in-out forwards;\n\n svg {\n width: 12px;\n height: 12px;\n stroke-width: 4px;\n display: inline-block;\n }\n}\n\n.svg-container.success {\n background-color: var(--success-svg-bg);\n}\n.svg-container.error {\n background-color: var(--error-svg-bg);\n\n svg {\n scale: 0;\n animation: error-svg-zoom-in 170ms 130ms forwards;\n }\n}\n\n.svg-container.info {\n background-color: var(--info-svg-bg);\n animation: info-svg-bell 400ms 200ms;\n\n svg {\n width: 14px;\n height: 14px;\n color: white;\n }\n}\n\n.svg-container.success::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 5;\n border-radius: 10rem;\n background-color: var(--success-svg-bg);\n animation: success-container-before-animation 250ms 150ms forwards;\n}\n\n@keyframes svg-container-animation {\n 0% {\n scale: 1;\n }\n 50% {\n scale: 1.15;\n }\n 100% {\n scale: 1;\n }\n}\n\n@keyframes success-container-before-animation {\n from {\n translate: 0 0;\n }\n to {\n translate: 100% -50%;\n }\n}\n\n@keyframes error-svg-zoom-in {\n from {\n scale: 0;\n }\n to {\n scale: 1;\n }\n}\n\n@keyframes info-svg-bell {\n 0% {\n transform: rotate(0);\n }\n 25% {\n transform: rotate(15deg);\n }\n 75% {\n transform: rotate(-15deg);\n }\n 100% {\n transform: rotate(0);\n }\n}\n\n.promise-svg-container {\n width: 20px;\n height: 20px;\n display: grid;\n place-items: center;\n\n .loader {\n width: 14px;\n height: 14px;\n background-image: conic-gradient(\n var(--loader-stroke) 0 25%,\n var(--loader-bg) 0 100%\n );\n border-radius: 10rem;\n position: relative;\n animation: rotate-infinity 1000ms linear infinite;\n }\n .loader::before {\n content: '';\n position: absolute;\n inset: 2px;\n border-radius: inherit;\n background-color: var(--normal-bg);\n }\n}\n\n@keyframes rotate-infinity {\n to {\n rotate: 360deg;\n }\n}\n";
|
|
247
|
+
var listeners = new Set();
|
|
248
|
+
function subscribe(fn) {
|
|
249
|
+
if (!document.getElementById('kitzo-toast-styles')) {
|
|
250
|
+
var styleTag = document.createElement('style');
|
|
251
|
+
styleTag.id = 'kitzo-toast-styles';
|
|
252
|
+
styleTag.textContent = toastStyles;
|
|
253
|
+
document.head.appendChild(styleTag);
|
|
254
|
+
}
|
|
255
|
+
listeners.add(fn);
|
|
256
|
+
return function () {
|
|
257
|
+
return listeners["delete"](fn);
|
|
258
|
+
};
|
|
259
|
+
}
|
|
260
|
+
function notify(toast) {
|
|
261
|
+
listeners.forEach(function (fn) {
|
|
262
|
+
return fn(toast);
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
var DEFAULTS = {
|
|
266
|
+
duration: 2800,
|
|
267
|
+
showIcon: true
|
|
268
|
+
};
|
|
269
|
+
var uid = 0;
|
|
270
|
+
var genId = function genId() {
|
|
271
|
+
var _crypto$randomUUID, _crypto$randomUUID2, _crypto;
|
|
272
|
+
return (_crypto$randomUUID = (_crypto$randomUUID2 = (_crypto = crypto).randomUUID) === null || _crypto$randomUUID2 === void 0 ? void 0 : _crypto$randomUUID2.call(_crypto)) !== null && _crypto$randomUUID !== void 0 ? _crypto$randomUUID : "kitzo_toast_id_".concat(++uid);
|
|
273
|
+
};
|
|
274
|
+
var zIndex = 1;
|
|
275
|
+
function createToast(type, content) {
|
|
276
|
+
var _opts$id, _opts$duration, _opts$showIcon;
|
|
277
|
+
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
278
|
+
var opts = _typeof(options) === 'object' && options !== null ? options : {};
|
|
279
|
+
return _objectSpread2({
|
|
280
|
+
id: (_opts$id = opts.id) !== null && _opts$id !== void 0 ? _opts$id : genId(),
|
|
281
|
+
type: type,
|
|
282
|
+
zIndex: ++zIndex,
|
|
283
|
+
render: content,
|
|
284
|
+
duration: (_opts$duration = opts.duration) !== null && _opts$duration !== void 0 ? _opts$duration : DEFAULTS.duration,
|
|
285
|
+
showIcon: (_opts$showIcon = opts.showIcon) !== null && _opts$showIcon !== void 0 ? _opts$showIcon : DEFAULTS.showIcon,
|
|
286
|
+
action: 'add'
|
|
287
|
+
}, opts);
|
|
288
|
+
}
|
|
289
|
+
function toast(content, options) {
|
|
290
|
+
if (content == null) return;
|
|
291
|
+
notify(createToast('normal', content, options));
|
|
292
|
+
}
|
|
293
|
+
toast.success = function (content, options) {
|
|
294
|
+
if (content == null) return;
|
|
295
|
+
notify(createToast('success', content, options));
|
|
296
|
+
};
|
|
297
|
+
toast.error = function (content, options) {
|
|
298
|
+
if (content == null) return;
|
|
299
|
+
notify(createToast('error', content, options));
|
|
300
|
+
};
|
|
301
|
+
toast.info = function (content, options) {
|
|
302
|
+
if (content == null) return;
|
|
303
|
+
notify(createToast('info', content, options));
|
|
304
|
+
};
|
|
305
|
+
toast.custom = function (content, options) {
|
|
306
|
+
if (content == null) return;
|
|
307
|
+
notify(createToast('custom', content, options));
|
|
308
|
+
};
|
|
309
|
+
toast.dismiss = function (id) {
|
|
310
|
+
notify({
|
|
311
|
+
action: 'dismiss',
|
|
312
|
+
id: id
|
|
313
|
+
});
|
|
314
|
+
};
|
|
315
|
+
toast.update = function (id, content) {
|
|
316
|
+
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
317
|
+
if (!id) return;
|
|
318
|
+
notify(_objectSpread2(_objectSpread2({}, options), {}, {
|
|
319
|
+
id: id,
|
|
320
|
+
render: content,
|
|
321
|
+
action: 'update'
|
|
322
|
+
}));
|
|
323
|
+
};
|
|
324
|
+
var loading = function loading(content) {
|
|
325
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
326
|
+
notify(createToast('loading', content, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
327
|
+
duration: Infinity
|
|
328
|
+
})));
|
|
329
|
+
};
|
|
330
|
+
toast.promise = function (promise, handlers) {
|
|
331
|
+
var _options$id;
|
|
332
|
+
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
333
|
+
if (!promise) return;
|
|
334
|
+
if (!handlers) return;
|
|
335
|
+
if (!handlers.loading) return;
|
|
336
|
+
if (!handlers.success) return;
|
|
337
|
+
if (!handlers.error) return;
|
|
338
|
+
var id = (_options$id = options.id) !== null && _options$id !== void 0 ? _options$id : genId();
|
|
339
|
+
loading(handlers.loading, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
340
|
+
id: id,
|
|
341
|
+
duration: Infinity
|
|
342
|
+
}));
|
|
343
|
+
promise.then(/*#__PURE__*/function () {
|
|
344
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(result) {
|
|
345
|
+
var _options$duration;
|
|
346
|
+
var _t, _t2;
|
|
347
|
+
return _regenerator().w(function (_context) {
|
|
348
|
+
while (1) switch (_context.n) {
|
|
349
|
+
case 0:
|
|
350
|
+
_t = toast;
|
|
351
|
+
_t2 = id;
|
|
352
|
+
_context.n = 1;
|
|
353
|
+
return handlers.success(result);
|
|
354
|
+
case 1:
|
|
355
|
+
_t.update.call(_t, _t2, _context.v, {
|
|
356
|
+
type: 'success',
|
|
357
|
+
duration: (_options$duration = options.duration) !== null && _options$duration !== void 0 ? _options$duration : 2800
|
|
358
|
+
});
|
|
359
|
+
return _context.a(2, result);
|
|
360
|
+
}
|
|
361
|
+
}, _callee);
|
|
362
|
+
}));
|
|
363
|
+
return function (_x) {
|
|
364
|
+
return _ref.apply(this, arguments);
|
|
365
|
+
};
|
|
366
|
+
}())["catch"](/*#__PURE__*/function () {
|
|
367
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(error) {
|
|
368
|
+
var _options$duration2;
|
|
369
|
+
var _t3, _t4;
|
|
370
|
+
return _regenerator().w(function (_context2) {
|
|
371
|
+
while (1) switch (_context2.n) {
|
|
372
|
+
case 0:
|
|
373
|
+
_t3 = toast;
|
|
374
|
+
_t4 = id;
|
|
375
|
+
_context2.n = 1;
|
|
376
|
+
return handlers.error(error);
|
|
377
|
+
case 1:
|
|
378
|
+
_t3.update.call(_t3, _t4, _context2.v, {
|
|
379
|
+
type: 'error',
|
|
380
|
+
duration: (_options$duration2 = options.duration) !== null && _options$duration2 !== void 0 ? _options$duration2 : 3800
|
|
381
|
+
});
|
|
382
|
+
throw error;
|
|
383
|
+
case 2:
|
|
384
|
+
return _context2.a(2);
|
|
385
|
+
}
|
|
386
|
+
}, _callee2);
|
|
387
|
+
}));
|
|
388
|
+
return function (_x2) {
|
|
389
|
+
return _ref2.apply(this, arguments);
|
|
390
|
+
};
|
|
391
|
+
}());
|
|
392
|
+
return promise;
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
var timeouts = new Map();
|
|
396
|
+
var LEAVE_DELAY = 600;
|
|
397
|
+
var MIN_VISIBLE = 700;
|
|
398
|
+
function clearToastTimers(id) {
|
|
399
|
+
var t = timeouts.get(id);
|
|
400
|
+
if (!t) return;
|
|
401
|
+
clearTimeout(t.leaving);
|
|
402
|
+
clearTimeout(t.left);
|
|
403
|
+
timeouts["delete"](id);
|
|
404
|
+
}
|
|
405
|
+
function getDurations(duration) {
|
|
406
|
+
var d = Number(duration);
|
|
407
|
+
if (!isFinite(d)) return null;
|
|
408
|
+
var visible = Math.max(MIN_VISIBLE, d);
|
|
409
|
+
return {
|
|
410
|
+
leaving: visible,
|
|
411
|
+
left: visible + LEAVE_DELAY
|
|
412
|
+
};
|
|
413
|
+
}
|
|
414
|
+
function armToastTimers(toast, setToasts) {
|
|
415
|
+
var durations = getDurations(toast.duration);
|
|
416
|
+
if (!durations) return;
|
|
417
|
+
clearToastTimers(toast.id);
|
|
418
|
+
var leaving = setTimeout(function () {
|
|
419
|
+
setToasts(function (prev) {
|
|
420
|
+
return prev.map(function (t) {
|
|
421
|
+
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
422
|
+
status: 'leaving'
|
|
423
|
+
}) : t;
|
|
424
|
+
});
|
|
425
|
+
});
|
|
426
|
+
}, durations.leaving);
|
|
427
|
+
var left = setTimeout(function () {
|
|
428
|
+
setToasts(function (prev) {
|
|
429
|
+
return prev.filter(function (t) {
|
|
430
|
+
return t.id !== toast.id;
|
|
431
|
+
});
|
|
432
|
+
});
|
|
433
|
+
timeouts["delete"](toast.id);
|
|
434
|
+
}, durations.left);
|
|
435
|
+
timeouts.set(toast.id, {
|
|
436
|
+
leaving: leaving,
|
|
437
|
+
left: left
|
|
438
|
+
});
|
|
439
|
+
}
|
|
440
|
+
function manageToasts(toast, setToasts) {
|
|
441
|
+
// dismiss
|
|
442
|
+
if (toast.action === 'dismiss') {
|
|
443
|
+
if (!toast.id) {
|
|
444
|
+
setToasts(function (prev) {
|
|
445
|
+
return prev.map(function (t) {
|
|
446
|
+
return _objectSpread2(_objectSpread2({}, t), {}, {
|
|
447
|
+
status: 'leaving'
|
|
448
|
+
});
|
|
449
|
+
});
|
|
450
|
+
});
|
|
451
|
+
setTimeout(function () {
|
|
452
|
+
setToasts([]);
|
|
453
|
+
}, LEAVE_DELAY);
|
|
454
|
+
timeouts.forEach(function (_ref) {
|
|
455
|
+
var leaving = _ref.leaving,
|
|
456
|
+
left = _ref.left;
|
|
457
|
+
clearTimeout(leaving);
|
|
458
|
+
clearTimeout(left);
|
|
459
|
+
});
|
|
460
|
+
timeouts.clear();
|
|
461
|
+
return;
|
|
462
|
+
}
|
|
463
|
+
clearToastTimers(toast.id);
|
|
464
|
+
setToasts(function (prev) {
|
|
465
|
+
return prev.map(function (t) {
|
|
466
|
+
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
467
|
+
status: 'leaving'
|
|
468
|
+
}) : t;
|
|
469
|
+
});
|
|
470
|
+
});
|
|
471
|
+
setTimeout(function () {
|
|
472
|
+
setToasts(function (prev) {
|
|
473
|
+
return prev.filter(function (t) {
|
|
474
|
+
return t.id !== toast.id;
|
|
475
|
+
});
|
|
476
|
+
});
|
|
477
|
+
}, LEAVE_DELAY);
|
|
478
|
+
return;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
// update
|
|
482
|
+
if (toast.action === 'update') {
|
|
483
|
+
setToasts(function (prev) {
|
|
484
|
+
var prevToast = prev.find(function (t) {
|
|
485
|
+
return t.id === toast.id;
|
|
486
|
+
});
|
|
487
|
+
if (!prevToast) return prev;
|
|
488
|
+
if (prevToast.type !== 'custom' && prevToast.type !== 'loading') return prev;
|
|
489
|
+
return prev.map(function (t) {
|
|
490
|
+
return t.id === toast.id ? _objectSpread2(_objectSpread2(_objectSpread2({}, t), toast), {}, {
|
|
491
|
+
status: 'visible'
|
|
492
|
+
}) : t;
|
|
493
|
+
});
|
|
494
|
+
});
|
|
495
|
+
armToastTimers(toast, setToasts);
|
|
496
|
+
return;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
// add
|
|
500
|
+
var enteringToast = _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
501
|
+
status: 'entering'
|
|
502
|
+
});
|
|
503
|
+
setToasts(function (prev) {
|
|
504
|
+
var prevToast = prev.find(function (t) {
|
|
505
|
+
return t.id === enteringToast.id;
|
|
506
|
+
});
|
|
507
|
+
if (prevToast) return prev;
|
|
508
|
+
return [enteringToast].concat(_toConsumableArray(prev));
|
|
509
|
+
});
|
|
510
|
+
requestAnimationFrame(function () {
|
|
511
|
+
setToasts(function (prev) {
|
|
512
|
+
return prev.map(function (t) {
|
|
513
|
+
return t.id === toast.id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
514
|
+
status: 'visible'
|
|
515
|
+
}) : t;
|
|
516
|
+
});
|
|
517
|
+
});
|
|
518
|
+
});
|
|
519
|
+
armToastTimers(enteringToast, setToasts);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
function SuccessSvg() {
|
|
523
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
524
|
+
className: "svg-container success"
|
|
525
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
526
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
527
|
+
width: "24",
|
|
528
|
+
height: "24",
|
|
529
|
+
viewBox: "0 0 24 24",
|
|
530
|
+
fill: "none",
|
|
531
|
+
stroke: "currentColor",
|
|
532
|
+
strokeWidth: "2",
|
|
533
|
+
strokeLinecap: "round",
|
|
534
|
+
strokeLinejoin: "round"
|
|
535
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
536
|
+
d: "M20 6 9 17l-5-5"
|
|
537
|
+
})));
|
|
538
|
+
}
|
|
539
|
+
function ErrorSvg() {
|
|
540
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
541
|
+
className: "svg-container error"
|
|
542
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
543
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
544
|
+
width: "24",
|
|
545
|
+
height: "24",
|
|
546
|
+
viewBox: "0 0 24 24",
|
|
547
|
+
fill: "none",
|
|
548
|
+
stroke: "currentColor",
|
|
549
|
+
strokeWidth: "2",
|
|
550
|
+
strokeLinecap: "round",
|
|
551
|
+
strokeLinejoin: "round"
|
|
552
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
553
|
+
d: "M18 6 6 18"
|
|
554
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
555
|
+
d: "m6 6 12 12"
|
|
556
|
+
})));
|
|
557
|
+
}
|
|
558
|
+
function LoadingSvg() {
|
|
559
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
560
|
+
className: "promise-svg-container"
|
|
561
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
562
|
+
className: "loader"
|
|
563
|
+
}));
|
|
564
|
+
}
|
|
565
|
+
function InfoSvg() {
|
|
566
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
567
|
+
className: "svg-container info"
|
|
568
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
569
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
570
|
+
viewBox: "0 0 24 24",
|
|
571
|
+
width: "16",
|
|
572
|
+
height: "16",
|
|
573
|
+
fill: "currentColor"
|
|
574
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
575
|
+
d: "M12 6C12.8284 6 13.5 5.32843 13.5 4.5C13.5 3.67157 12.8284 3 12 3C11.1716 3 10.5 3.67157 10.5 4.5C10.5 5.32843 11.1716 6 12 6ZM9 10H11V18H9V20H15V18H13V8H9V10Z"
|
|
576
|
+
})));
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
function Toast(_ref) {
|
|
580
|
+
var t = _ref.t,
|
|
581
|
+
containerPosition = _ref.containerPosition,
|
|
582
|
+
gap = _ref.gap,
|
|
583
|
+
setToasts = _ref.setToasts;
|
|
584
|
+
var id = t.id,
|
|
585
|
+
type = t.type,
|
|
586
|
+
render = t.render,
|
|
587
|
+
action = t.action,
|
|
588
|
+
status = t.status;
|
|
589
|
+
var ref = useRef(null);
|
|
590
|
+
useLayoutEffect(function () {
|
|
591
|
+
if (!ref.current) return;
|
|
592
|
+
var g = typeof gap === 'number' ? gap : Number.isFinite(Number(gap)) ? Number(gap) : 8;
|
|
593
|
+
var el = ref.current;
|
|
594
|
+
var observer = new ResizeObserver(function () {
|
|
595
|
+
var height = el.offsetHeight + g;
|
|
596
|
+
setToasts(function (prev) {
|
|
597
|
+
return prev.map(function (t) {
|
|
598
|
+
return t.id === id ? _objectSpread2(_objectSpread2({}, t), {}, {
|
|
599
|
+
height: height
|
|
600
|
+
}) : t;
|
|
601
|
+
});
|
|
602
|
+
});
|
|
603
|
+
});
|
|
604
|
+
observer.observe(el);
|
|
605
|
+
return function () {
|
|
606
|
+
return observer.disconnect();
|
|
607
|
+
};
|
|
608
|
+
}, []);
|
|
609
|
+
var allowedPositions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
|
|
610
|
+
var userPosition = t.position || containerPosition;
|
|
611
|
+
var position = allowedPositions.includes(userPosition) ? userPosition : 'top-center';
|
|
612
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
613
|
+
ref: ref,
|
|
614
|
+
style: getToastStyles(t, position)
|
|
615
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
616
|
+
style: {
|
|
617
|
+
pointerEvents: 'all',
|
|
618
|
+
display: 'flex',
|
|
619
|
+
alignItems: 'center',
|
|
620
|
+
gap: 8
|
|
621
|
+
},
|
|
622
|
+
className: "kitzo-toast type-".concat(type, " action-").concat(action, " status-").concat(status, " pos-y-").concat(position.split('-')[0], " pos-x-").concat(position.split('-')[1], " ")
|
|
623
|
+
}, t.showIcon && type !== 'normal' && type !== 'custom' && /*#__PURE__*/React.createElement("div", {
|
|
624
|
+
style: {
|
|
625
|
+
flexShrink: 0
|
|
626
|
+
}
|
|
627
|
+
}, type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), type === 'info' && /*#__PURE__*/React.createElement(InfoSvg, null)), /*#__PURE__*/React.createElement("div", {
|
|
628
|
+
style: {
|
|
629
|
+
flex: 1
|
|
630
|
+
}
|
|
631
|
+
}, typeof render === 'function' ? render(function () {
|
|
632
|
+
return toast.dismiss(id);
|
|
633
|
+
}) : render)));
|
|
634
|
+
}
|
|
635
|
+
function getToastStyles(t, position) {
|
|
636
|
+
var styles = {
|
|
637
|
+
position: 'absolute',
|
|
638
|
+
zIndex: t.zIndex,
|
|
639
|
+
left: 0,
|
|
640
|
+
width: '100%',
|
|
641
|
+
transition: 'transform 260ms',
|
|
642
|
+
display: 'flex'
|
|
643
|
+
};
|
|
644
|
+
var transform = position.includes('top') ? "translateY(".concat(t.distance || 0, "px)") : "translateY(-".concat(t.distance || 0, "px)");
|
|
645
|
+
var justifyContent = position.includes('left') ? 'flex-start' : position.includes('center') ? 'center' : 'flex-end';
|
|
646
|
+
styles.transform = transform;
|
|
647
|
+
styles.justifyContent = justifyContent;
|
|
648
|
+
if (position.includes('top')) styles.top = 0;
|
|
649
|
+
if (position.includes('bottom')) styles.bottom = 0;
|
|
650
|
+
return styles;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
function ToastContainer(_ref) {
|
|
654
|
+
var _ref$position = _ref.position,
|
|
655
|
+
position = _ref$position === void 0 ? 'top-center' : _ref$position,
|
|
656
|
+
_ref$gap = _ref.gap,
|
|
657
|
+
gap = _ref$gap === void 0 ? 8 : _ref$gap,
|
|
658
|
+
_ref$edgeOffset = _ref.edgeOffset,
|
|
659
|
+
edgeOffset = _ref$edgeOffset === void 0 ? 16 : _ref$edgeOffset,
|
|
660
|
+
_ref$isDark = _ref.isDark,
|
|
661
|
+
isDark = _ref$isDark === void 0 ? window.matchMedia('(prefers-color-scheme: dark)').matches : _ref$isDark;
|
|
662
|
+
var _useState = useState([]),
|
|
663
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
664
|
+
toasts = _useState2[0],
|
|
665
|
+
setToasts = _useState2[1];
|
|
666
|
+
useEffect(function () {
|
|
667
|
+
var unsub = subscribe(function (toast) {
|
|
668
|
+
return manageToasts(toast, setToasts);
|
|
669
|
+
});
|
|
670
|
+
return unsub;
|
|
671
|
+
}, []);
|
|
672
|
+
useLayoutEffect(function () {
|
|
673
|
+
var grouped = toasts.reduce(function (prev, t) {
|
|
674
|
+
var pos = t.position || position || 'top-center';
|
|
675
|
+
(prev[pos] || (prev[pos] = [])).push(t);
|
|
676
|
+
return prev;
|
|
677
|
+
}, {});
|
|
678
|
+
var hasChanged = false;
|
|
679
|
+
var updated = toasts.map(function (toast) {
|
|
680
|
+
var pos = toast.position || position || 'top-center';
|
|
681
|
+
var group = grouped[pos];
|
|
682
|
+
var index = group.findIndex(function (t) {
|
|
683
|
+
return t.id === toast.id;
|
|
684
|
+
});
|
|
685
|
+
var distance = group.slice(0, index).reduce(function (acc, t) {
|
|
686
|
+
return acc + (t.height || 0);
|
|
687
|
+
}, 0);
|
|
688
|
+
if (distance !== toast.distance) {
|
|
689
|
+
hasChanged = true;
|
|
690
|
+
}
|
|
691
|
+
return _objectSpread2(_objectSpread2({}, toast), {}, {
|
|
692
|
+
distance: distance
|
|
693
|
+
});
|
|
694
|
+
});
|
|
695
|
+
if (hasChanged) {
|
|
696
|
+
setTimeout(function () {
|
|
697
|
+
setToasts(updated);
|
|
698
|
+
}, 30);
|
|
699
|
+
}
|
|
700
|
+
}, [toasts, position]);
|
|
701
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
702
|
+
style: {
|
|
703
|
+
position: 'fixed',
|
|
704
|
+
inset: 0,
|
|
705
|
+
zIndex: 2147483647,
|
|
706
|
+
pointerEvents: 'none',
|
|
707
|
+
display: 'grid',
|
|
708
|
+
padding: edgeOffset != null ? edgeOffset : 16
|
|
709
|
+
},
|
|
710
|
+
className: "kitzo-toast-container ".concat(isDark ? 'kitzo-toast-dark' : '')
|
|
711
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
712
|
+
style: {
|
|
713
|
+
position: 'relative'
|
|
714
|
+
}
|
|
715
|
+
}, toasts.map(function (t) {
|
|
716
|
+
return /*#__PURE__*/React.createElement(Toast, {
|
|
717
|
+
key: t.id,
|
|
718
|
+
t: t,
|
|
719
|
+
containerPosition: position,
|
|
720
|
+
gap: gap,
|
|
721
|
+
setToasts: setToasts
|
|
722
|
+
});
|
|
723
|
+
})));
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
// import './style.css';
|
|
727
|
+
var tooltipStyles = "/* Default styling */\n.kitzo-react-tooltip-root {\n --bg-clr: hsl(0, 0%, 15%);\n --text-clr: hsl(0, 0%, 95%);\n\n @media (prefers-color-scheme: dark) {\n --bg-clr: hsl(0, 0%, 95%);\n --text-clr: hsl(0, 0%, 15%);\n }\n}\n\n.kitzo-react-tooltip-content-default-style {\n font-family:\n inherit,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n 'Open Sans',\n 'Helvetica Neue',\n sans-serif;\n font-size: 0.875rem;\n background-color: var(--bg-clr);\n color: var(--text-clr);\n padding-block: 0.25rem;\n padding-inline: 0.5rem;\n border-radius: 0.325rem;\n}\n\n/* Tooltip positioning */\n.kitzo-react-tooltip-wrapper {\n --tooltip-offset: calc(var(--offset) * 1px + 1px);\n}\n/* Top */\n.kitzo-react-tooltip-wrapper.top {\n bottom: 100%;\n padding-block-end: var(--tooltip-offset);\n}\n.kitzo-react-tooltip-wrapper.top {\n left: 50%;\n translate: -50% 0;\n}\n.kitzo-react-tooltip-wrapper.top.start {\n left: 0;\n translate: 0 0;\n}\n.kitzo-react-tooltip-wrapper.top.end {\n right: 0;\n translate: 0 0;\n}\n\n/* Right */\n.kitzo-react-tooltip-wrapper.right {\n left: 100%;\n padding-inline-start: var(--tooltip-offset);\n}\n.kitzo-react-tooltip-wrapper.right {\n top: 50%;\n translate: 0 -50%;\n}\n.kitzo-react-tooltip-wrapper.right.start {\n top: 0;\n translate: 0 0;\n}\n.kitzo-react-tooltip-wrapper.right.end {\n top: 100%;\n translate: 0 -100%;\n}\n\n/* Bottom */\n.kitzo-react-tooltip-wrapper.bottom {\n top: 100%;\n padding-block-start: var(--tooltip-offset);\n}\n.kitzo-react-tooltip-wrapper.bottom {\n left: 50%;\n translate: -50% 0;\n}\n.kitzo-react-tooltip-wrapper.bottom.start {\n left: 0;\n translate: 0 0;\n}\n.kitzo-react-tooltip-wrapper.bottom.end {\n left: 100%;\n translate: -100% 0;\n}\n\n/* Left */\n.kitzo-react-tooltip-wrapper.left {\n right: 100%;\n padding-inline-end: var(--tooltip-offset);\n}\n.kitzo-react-tooltip-wrapper.left {\n top: 50%;\n translate: 0 -50%;\n}\n.kitzo-react-tooltip-wrapper.left.start {\n top: 0;\n translate: 0 0;\n}\n.kitzo-react-tooltip-wrapper.left.end {\n top: 100%;\n translate: 0 -100%;\n}\n\n/* Tooltip transitions */\n.kitzo-react-tooltip-root.animate-tooltip {\n --transition-startDuration: calc(var(--startDuration) * 1ms);\n --transition-endDuration: calc(var(--endDuration) * 1ms);\n --transition-startDelay: calc(var(--startDelay) * 1ms);\n --transition-endDelay: calc(var(--endDelay) * 1ms);\n\n .kitzo-react-tooltip-content {\n transition:\n transform var(--transition-endDuration) var(--transition-endDelay),\n opacity var(--transition-endDuration) var(--transition-endDelay);\n }\n}\n\n.kitzo-react-tooltip-content {\n transform: scale(0.8);\n opacity: 0;\n}\n\n.kitzo-react-tooltip-content.top {\n transform-origin: bottom;\n}\n.kitzo-react-tooltip-content.right {\n transform-origin: left;\n}\n.kitzo-react-tooltip-content.bottom {\n transform-origin: top;\n}\n.kitzo-react-tooltip-content.left {\n transform-origin: right;\n}\n\n.kitzo-react-tooltip-root.animate-tooltip:hover {\n .kitzo-react-tooltip-content {\n transition:\n transform var(--transition-startDuration) var(--transition-startDelay),\n opacity var(--transition-startDuration) var(--transition-startDelay);\n }\n}\n.kitzo-react-tooltip-root:hover {\n .kitzo-react-tooltip-content {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* smart hover persistence feature */\n.kitzo-react-tooltip-root {\n .kitzo-react-tooltip-wrapper {\n pointer-events: none;\n }\n}\n.kitzo-react-tooltip-root.smart-hover:hover {\n .kitzo-react-tooltip-wrapper {\n pointer-events: all;\n }\n}\n\n/* Arrow */\n.kitzo-react-tooltip-content.tooltip-arrow {\n --effective-size: calc(var(--arrow-size, 6) * 1px);\n --effective-color: var(--arrow-color, var(--bg-clr));\n\n position: relative;\n}\n.kitzo-react-tooltip-content.tooltip-arrow::before {\n content: '';\n position: absolute;\n z-index: -1;\n border: var(--effective-size) solid transparent;\n}\n.kitzo-react-tooltip-content.tooltip-arrow.top::before {\n left: 50%;\n translate: -50% 0;\n top: calc(100% - 1px);\n border-top: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-react-tooltip-content.tooltip-arrow.right::before {\n top: 50%;\n translate: 0 -50%;\n right: calc(100% - 1px);\n border-right: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-react-tooltip-content.tooltip-arrow.bottom::before {\n left: 50%;\n translate: -50% 0;\n bottom: calc(100% - 1px);\n border-bottom: var(--effective-size) solid var(--effective-color);\n}\n.kitzo-react-tooltip-content.tooltip-arrow.left::before {\n top: 50%;\n translate: 0 -50%;\n left: calc(100% - 1px);\n border-left: var(--effective-size) solid var(--effective-color);\n}";
|
|
728
|
+
(function () {
|
|
729
|
+
if (!document.getElementById('kitzo-react-tooltip-styles')) {
|
|
730
|
+
var styleTag = document.createElement('style');
|
|
731
|
+
styleTag.id = 'kitzo-react-tooltip-styles';
|
|
732
|
+
styleTag.textContent = tooltipStyles;
|
|
733
|
+
document.head.appendChild(styleTag);
|
|
734
|
+
}
|
|
735
|
+
})();
|
|
736
|
+
var allowedPositions = ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'];
|
|
737
|
+
function getPositionClass() {
|
|
738
|
+
var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
739
|
+
var allowedPos = allowedPositions.find(function (p) {
|
|
740
|
+
return p === position;
|
|
741
|
+
});
|
|
742
|
+
if (!allowedPos) return 'top';
|
|
743
|
+
if (allowedPos.includes('-')) {
|
|
744
|
+
var _allowedPos$split = allowedPos.split('-'),
|
|
745
|
+
_allowedPos$split2 = _slicedToArray(_allowedPos$split, 2),
|
|
746
|
+
dir = _allowedPos$split2[0],
|
|
747
|
+
state = _allowedPos$split2[1];
|
|
748
|
+
return "".concat(dir, " ").concat(state);
|
|
749
|
+
} else {
|
|
750
|
+
return allowedPos;
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
function getAnimationProperties(animation) {
|
|
754
|
+
var _animation$delay, _animation$duration;
|
|
755
|
+
var effectiveStartDelay = animation === null || animation === void 0 ? void 0 : animation.startDelay;
|
|
756
|
+
var effectiveEndDelay = animation === null || animation === void 0 ? void 0 : animation.endDelay;
|
|
757
|
+
var effectiveDelay = (_animation$delay = animation === null || animation === void 0 ? void 0 : animation.delay) !== null && _animation$delay !== void 0 ? _animation$delay : 0;
|
|
758
|
+
var effectiveStartDuration = animation === null || animation === void 0 ? void 0 : animation.startDuration;
|
|
759
|
+
var effectiveEndDuration = animation === null || animation === void 0 ? void 0 : animation.endDuration;
|
|
760
|
+
var effectiveDuration = (_animation$duration = animation === null || animation === void 0 ? void 0 : animation.duration) !== null && _animation$duration !== void 0 ? _animation$duration : 110;
|
|
761
|
+
return {
|
|
762
|
+
startDelay: effectiveStartDelay !== null && effectiveStartDelay !== void 0 ? effectiveStartDelay : effectiveDelay,
|
|
763
|
+
endDelay: effectiveEndDelay !== null && effectiveEndDelay !== void 0 ? effectiveEndDelay : effectiveDelay,
|
|
764
|
+
startDuration: effectiveStartDuration !== null && effectiveStartDuration !== void 0 ? effectiveStartDuration : effectiveDuration,
|
|
765
|
+
endDuration: effectiveEndDuration !== null && effectiveEndDuration !== void 0 ? effectiveEndDuration : effectiveDuration
|
|
766
|
+
};
|
|
767
|
+
}
|
|
768
|
+
function Tooltip(_ref) {
|
|
769
|
+
var content = _ref.content,
|
|
770
|
+
_ref$tooltipOptions = _ref.tooltipOptions,
|
|
771
|
+
tooltipOptions = _ref$tooltipOptions === void 0 ? {} : _ref$tooltipOptions,
|
|
772
|
+
_ref$animation = _ref.animation,
|
|
773
|
+
animation = _ref$animation === void 0 ? true : _ref$animation,
|
|
774
|
+
_ref$style = _ref.style,
|
|
775
|
+
style = _ref$style === void 0 ? {} : _ref$style,
|
|
776
|
+
_ref$isHidden = _ref.isHidden,
|
|
777
|
+
isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
|
|
778
|
+
children = _ref.children;
|
|
779
|
+
if (typeof isHidden === 'boolean' && isHidden) return children;
|
|
780
|
+
if (typeof content === 'string') {
|
|
781
|
+
if (!content.trim()) throw new Error('kitzo/react: tooltip content is required');
|
|
782
|
+
} else if (!content) {
|
|
783
|
+
throw new Error('kitzo/react: tooltip content is required');
|
|
784
|
+
}
|
|
785
|
+
// Define options
|
|
786
|
+
var _ref2 = tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {},
|
|
787
|
+
_ref2$position = _ref2.position,
|
|
788
|
+
position = _ref2$position === void 0 ? 'top' : _ref2$position,
|
|
789
|
+
_ref2$offset = _ref2.offset,
|
|
790
|
+
offset = _ref2$offset === void 0 ? 8 : _ref2$offset,
|
|
791
|
+
_ref2$hideOnTouch = _ref2.hideOnTouch,
|
|
792
|
+
hideOnTouch = _ref2$hideOnTouch === void 0 ? true : _ref2$hideOnTouch,
|
|
793
|
+
_ref2$arrow = _ref2.arrow,
|
|
794
|
+
arrow = _ref2$arrow === void 0 ? false : _ref2$arrow,
|
|
795
|
+
_ref2$smartHover = _ref2.smartHover,
|
|
796
|
+
smartHover = _ref2$smartHover === void 0 ? true : _ref2$smartHover;
|
|
797
|
+
var finalOptions = {
|
|
798
|
+
position: typeof position === 'string' ? position.trim().toLowerCase() : 'top',
|
|
799
|
+
offset: !isNaN(Number(offset)) ? Number(offset) : 8,
|
|
800
|
+
arrow: typeof arrow === 'boolean' ? arrow : false,
|
|
801
|
+
smartHover: typeof smartHover === 'boolean' ? smartHover : true,
|
|
802
|
+
hideOnTouch: typeof hideOnTouch === 'boolean' ? hideOnTouch : true
|
|
803
|
+
};
|
|
804
|
+
|
|
805
|
+
// Hide on touch device
|
|
806
|
+
var isTouch = window.matchMedia('(pointer: coarse)').matches;
|
|
807
|
+
if (isTouch && finalOptions.hideOnTouch) return children;
|
|
808
|
+
var positionClass = getPositionClass(finalOptions.position);
|
|
809
|
+
|
|
810
|
+
// Define animations
|
|
811
|
+
var animationEnabled = animation ? true : false;
|
|
812
|
+
var animationObj = animation === true ? {} : animation;
|
|
813
|
+
var finalAnimationProperties = getAnimationProperties(animationObj);
|
|
814
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
815
|
+
style: {
|
|
816
|
+
position: 'relative',
|
|
817
|
+
width: 'fit-content',
|
|
818
|
+
'--offset': Math.max(0, finalOptions.offset),
|
|
819
|
+
'--startDuration': Math.max(0, finalAnimationProperties.startDuration),
|
|
820
|
+
'--endDuration': Math.max(0, finalAnimationProperties.endDuration),
|
|
821
|
+
'--startDelay': Math.max(0, finalAnimationProperties.startDelay),
|
|
822
|
+
'--endDelay': Math.max(0, finalAnimationProperties.endDelay),
|
|
823
|
+
'--arrow-color': style === null || style === void 0 ? void 0 : style['--arrow-color'],
|
|
824
|
+
'--arrow-size': style === null || style === void 0 ? void 0 : style['--arrow-size']
|
|
825
|
+
},
|
|
826
|
+
className: "kitzo-react-tooltip-root ".concat(finalOptions.smartHover ? 'smart-hover' : '', " ").concat(animationEnabled ? 'animate-tooltip' : '')
|
|
827
|
+
}, children, /*#__PURE__*/React.createElement("div", {
|
|
828
|
+
style: {
|
|
829
|
+
position: 'absolute',
|
|
830
|
+
whiteSpace: typeof content === 'string' ? 'nowrap' : 'normal'
|
|
831
|
+
},
|
|
832
|
+
tabIndex: -1,
|
|
833
|
+
className: "kitzo-react-tooltip-wrapper ".concat(positionClass)
|
|
834
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
835
|
+
className: "kitzo-react-tooltip-content ".concat(positionClass, " ").concat(finalOptions.arrow ? 'tooltip-arrow' : '')
|
|
836
|
+
}, typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/React.createElement("div", {
|
|
837
|
+
className: "kitzo-react-tooltip-content-default-style"
|
|
838
|
+
}, content) : /*#__PURE__*/React.createElement(React.Fragment, null, content))));
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
function useDebounce(value, delay) {
|
|
842
|
+
var _useState = useState(value),
|
|
843
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
844
|
+
debouncedValue = _useState2[0],
|
|
845
|
+
setDebouncedValue = _useState2[1];
|
|
846
|
+
useEffect(function () {
|
|
847
|
+
var handler = setTimeout(function () {
|
|
848
|
+
setDebouncedValue(value);
|
|
849
|
+
}, delay);
|
|
850
|
+
return function () {
|
|
851
|
+
clearTimeout(handler);
|
|
852
|
+
};
|
|
853
|
+
}, [value, delay]);
|
|
854
|
+
return debouncedValue;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
function useWindowSize() {
|
|
858
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
859
|
+
var _options$delay = options.delay,
|
|
860
|
+
delay = _options$delay === void 0 ? 50 : _options$delay;
|
|
861
|
+
if (typeof delay !== 'number') throw new Error("Only number is accepted 'useWindowSize' hook configuration: delay");
|
|
862
|
+
var _useState = useState({
|
|
863
|
+
screenWidth: window.innerWidth,
|
|
864
|
+
screenHeight: window.innerHeight
|
|
865
|
+
}),
|
|
866
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
867
|
+
screenSize = _useState2[0],
|
|
868
|
+
setScreenSize = _useState2[1];
|
|
869
|
+
var timeoutRef = useRef(null);
|
|
870
|
+
useEffect(function () {
|
|
871
|
+
function updateScreenSize() {
|
|
872
|
+
if (timeoutRef.current) {
|
|
873
|
+
clearTimeout(timeoutRef.current);
|
|
874
|
+
}
|
|
875
|
+
timeoutRef.current = setTimeout(function () {
|
|
876
|
+
setScreenSize({
|
|
877
|
+
screenWidth: window.innerWidth,
|
|
878
|
+
screenHeight: window.innerHeight
|
|
879
|
+
});
|
|
880
|
+
}, Math.max(0, Number(delay)));
|
|
881
|
+
}
|
|
882
|
+
if (typeof window !== 'undefined') {
|
|
883
|
+
window.addEventListener('resize', updateScreenSize);
|
|
884
|
+
}
|
|
885
|
+
return function () {
|
|
886
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
887
|
+
window.removeEventListener('resize', updateScreenSize);
|
|
888
|
+
};
|
|
889
|
+
}, [delay]);
|
|
890
|
+
return screenSize;
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
export { ToastContainer, Tooltip, toast, useDebounce, useWindowSize };
|
|
894
|
+
//# sourceMappingURL=index.js.map
|