@vritti/quantum-ui 0.2.5 → 0.2.7
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/dist/Button2.js +2 -1
- package/dist/Button2.js.map +1 -1
- package/dist/Checkbox.js +3 -5
- package/dist/Checkbox.js.map +1 -1
- package/dist/DatePicker.js +416 -139
- package/dist/DatePicker.js.map +1 -1
- package/dist/Form.js.map +1 -1
- package/dist/Label.js +1 -1
- package/dist/Label.js.map +1 -1
- package/dist/OTPField.js +1 -1
- package/dist/OTPField.js.map +1 -1
- package/dist/PasswordField.js +3 -16
- package/dist/PasswordField.js.map +1 -1
- package/dist/PhoneField.js +23 -7
- package/dist/PhoneField.js.map +1 -1
- package/dist/Sonner.js +1249 -0
- package/dist/Sonner.js.map +1 -0
- package/dist/Spinner.js +1 -12
- package/dist/Spinner.js.map +1 -1
- package/dist/ThemeToggle.js +2 -2
- package/dist/ThemeToggle.js.map +1 -1
- package/dist/assets/quantum-ui.css +41 -10
- package/dist/axios.js +186 -59
- package/dist/axios.js.map +1 -1
- package/dist/circle-check-big.js +18 -0
- package/dist/circle-check-big.js.map +1 -0
- package/dist/components/Progress.js +61 -2
- package/dist/components/Progress.js.map +1 -1
- package/dist/components/Sonner.js +3 -0
- package/dist/components/Sonner.js.map +1 -0
- package/dist/createLucideIcon.js +4 -4
- package/dist/createLucideIcon.js.map +1 -1
- package/dist/field.js +2 -36
- package/dist/field.js.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index2.js +130 -54
- package/dist/index2.js.map +1 -1
- package/dist/index3.js +1 -103
- package/dist/index3.js.map +1 -1
- package/dist/index4.js +36 -35
- package/dist/index4.js.map +1 -1
- package/dist/index5.js +303 -3
- package/dist/index5.js.map +1 -1
- package/dist/lib/components/Sonner/Sonner.d.ts +5 -0
- package/dist/lib/components/Sonner/Sonner.d.ts.map +1 -0
- package/dist/lib/components/Sonner/index.d.ts +4 -0
- package/dist/lib/components/Sonner/index.d.ts.map +1 -0
- package/dist/lib/components/Sonner/toast.d.ts +29 -0
- package/dist/lib/components/Sonner/toast.d.ts.map +1 -0
- package/dist/lib/components/index.d.ts +1 -0
- package/dist/lib/components/index.d.ts.map +1 -1
- package/dist/lib/utils/axios.d.ts +5 -0
- package/dist/lib/utils/axios.d.ts.map +1 -1
- package/dist/loader-circle.js +15 -0
- package/dist/loader-circle.js.map +1 -0
- package/dist/shadcn/index.d.ts +1 -0
- package/dist/shadcn/index.d.ts.map +1 -1
- package/dist/shadcn/shadcnSonner/index.d.ts +2 -0
- package/dist/shadcn/shadcnSonner/index.d.ts.map +1 -0
- package/dist/shadcn/shadcnSonner/sonner.d.ts +4 -0
- package/dist/shadcn/shadcnSonner/sonner.d.ts.map +1 -0
- package/dist/toast.js +72 -0
- package/dist/toast.js.map +1 -0
- package/dist/utils/axios.js +1 -0
- package/dist/utils/axios.js.map +1 -1
- package/dist/utils.js +229 -150
- package/dist/utils.js.map +1 -1
- package/package.json +38 -32
- package/dist/index6.js +0 -246
- package/dist/index6.js.map +0 -1
package/dist/Sonner.js
ADDED
|
@@ -0,0 +1,1249 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React__default, { useEffect } from 'react';
|
|
3
|
+
import ReactDOM__default from 'react-dom';
|
|
4
|
+
import { T as TOAST_EVENT } from './toast.js';
|
|
5
|
+
import { L as LoaderCircle } from './loader-circle.js';
|
|
6
|
+
import { c as createLucideIcon } from './createLucideIcon.js';
|
|
7
|
+
import { C as CircleCheckBig } from './circle-check-big.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @license lucide-react v0.562.0 - ISC
|
|
11
|
+
*
|
|
12
|
+
* This source code is licensed under the ISC license.
|
|
13
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const __iconNode$2 = [
|
|
18
|
+
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
|
|
19
|
+
["path", { d: "m15 9-6 6", key: "1uzhvr" }],
|
|
20
|
+
["path", { d: "m9 9 6 6", key: "z0biqf" }]
|
|
21
|
+
];
|
|
22
|
+
const CircleX = createLucideIcon("circle-x", __iconNode$2);
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* @license lucide-react v0.562.0 - ISC
|
|
26
|
+
*
|
|
27
|
+
* This source code is licensed under the ISC license.
|
|
28
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
const __iconNode$1 = [
|
|
33
|
+
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
|
|
34
|
+
["path", { d: "M12 16v-4", key: "1dtifu" }],
|
|
35
|
+
["path", { d: "M12 8h.01", key: "e9boi3" }]
|
|
36
|
+
];
|
|
37
|
+
const Info = createLucideIcon("info", __iconNode$1);
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* @license lucide-react v0.562.0 - ISC
|
|
41
|
+
*
|
|
42
|
+
* This source code is licensed under the ISC license.
|
|
43
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
const __iconNode = [
|
|
48
|
+
[
|
|
49
|
+
"path",
|
|
50
|
+
{
|
|
51
|
+
d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
|
|
52
|
+
key: "wmoenq"
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
["path", { d: "M12 9v4", key: "juzpu7" }],
|
|
56
|
+
["path", { d: "M12 17h.01", key: "p32p05" }]
|
|
57
|
+
];
|
|
58
|
+
const TriangleAlert = createLucideIcon("triangle-alert", __iconNode);
|
|
59
|
+
|
|
60
|
+
function __insertCSS(code) {
|
|
61
|
+
if (typeof document == 'undefined') return
|
|
62
|
+
let head = document.head || document.getElementsByTagName('head')[0];
|
|
63
|
+
let style = document.createElement('style');
|
|
64
|
+
style.type = 'text/css';
|
|
65
|
+
head.appendChild(style)
|
|
66
|
+
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const getAsset = (type)=>{
|
|
70
|
+
switch(type){
|
|
71
|
+
case 'success':
|
|
72
|
+
return SuccessIcon;
|
|
73
|
+
case 'info':
|
|
74
|
+
return InfoIcon;
|
|
75
|
+
case 'warning':
|
|
76
|
+
return WarningIcon;
|
|
77
|
+
case 'error':
|
|
78
|
+
return ErrorIcon;
|
|
79
|
+
default:
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
const bars = Array(12).fill(0);
|
|
84
|
+
const Loader = ({ visible, className })=>{
|
|
85
|
+
return /*#__PURE__*/ React__default.createElement("div", {
|
|
86
|
+
className: [
|
|
87
|
+
'sonner-loading-wrapper',
|
|
88
|
+
className
|
|
89
|
+
].filter(Boolean).join(' '),
|
|
90
|
+
"data-visible": visible
|
|
91
|
+
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
92
|
+
className: "sonner-spinner"
|
|
93
|
+
}, bars.map((_, i)=>/*#__PURE__*/ React__default.createElement("div", {
|
|
94
|
+
className: "sonner-loading-bar",
|
|
95
|
+
key: `spinner-bar-${i}`
|
|
96
|
+
}))));
|
|
97
|
+
};
|
|
98
|
+
const SuccessIcon = /*#__PURE__*/ React__default.createElement("svg", {
|
|
99
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
100
|
+
viewBox: "0 0 20 20",
|
|
101
|
+
fill: "currentColor",
|
|
102
|
+
height: "20",
|
|
103
|
+
width: "20"
|
|
104
|
+
}, /*#__PURE__*/ React__default.createElement("path", {
|
|
105
|
+
fillRule: "evenodd",
|
|
106
|
+
d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
|
|
107
|
+
clipRule: "evenodd"
|
|
108
|
+
}));
|
|
109
|
+
const WarningIcon = /*#__PURE__*/ React__default.createElement("svg", {
|
|
110
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
111
|
+
viewBox: "0 0 24 24",
|
|
112
|
+
fill: "currentColor",
|
|
113
|
+
height: "20",
|
|
114
|
+
width: "20"
|
|
115
|
+
}, /*#__PURE__*/ React__default.createElement("path", {
|
|
116
|
+
fillRule: "evenodd",
|
|
117
|
+
d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
|
|
118
|
+
clipRule: "evenodd"
|
|
119
|
+
}));
|
|
120
|
+
const InfoIcon = /*#__PURE__*/ React__default.createElement("svg", {
|
|
121
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
122
|
+
viewBox: "0 0 20 20",
|
|
123
|
+
fill: "currentColor",
|
|
124
|
+
height: "20",
|
|
125
|
+
width: "20"
|
|
126
|
+
}, /*#__PURE__*/ React__default.createElement("path", {
|
|
127
|
+
fillRule: "evenodd",
|
|
128
|
+
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
|
|
129
|
+
clipRule: "evenodd"
|
|
130
|
+
}));
|
|
131
|
+
const ErrorIcon = /*#__PURE__*/ React__default.createElement("svg", {
|
|
132
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
133
|
+
viewBox: "0 0 20 20",
|
|
134
|
+
fill: "currentColor",
|
|
135
|
+
height: "20",
|
|
136
|
+
width: "20"
|
|
137
|
+
}, /*#__PURE__*/ React__default.createElement("path", {
|
|
138
|
+
fillRule: "evenodd",
|
|
139
|
+
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
|
|
140
|
+
clipRule: "evenodd"
|
|
141
|
+
}));
|
|
142
|
+
const CloseIcon = /*#__PURE__*/ React__default.createElement("svg", {
|
|
143
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
144
|
+
width: "12",
|
|
145
|
+
height: "12",
|
|
146
|
+
viewBox: "0 0 24 24",
|
|
147
|
+
fill: "none",
|
|
148
|
+
stroke: "currentColor",
|
|
149
|
+
strokeWidth: "1.5",
|
|
150
|
+
strokeLinecap: "round",
|
|
151
|
+
strokeLinejoin: "round"
|
|
152
|
+
}, /*#__PURE__*/ React__default.createElement("line", {
|
|
153
|
+
x1: "18",
|
|
154
|
+
y1: "6",
|
|
155
|
+
x2: "6",
|
|
156
|
+
y2: "18"
|
|
157
|
+
}), /*#__PURE__*/ React__default.createElement("line", {
|
|
158
|
+
x1: "6",
|
|
159
|
+
y1: "6",
|
|
160
|
+
x2: "18",
|
|
161
|
+
y2: "18"
|
|
162
|
+
}));
|
|
163
|
+
|
|
164
|
+
const useIsDocumentHidden = ()=>{
|
|
165
|
+
const [isDocumentHidden, setIsDocumentHidden] = React__default.useState(document.hidden);
|
|
166
|
+
React__default.useEffect(()=>{
|
|
167
|
+
const callback = ()=>{
|
|
168
|
+
setIsDocumentHidden(document.hidden);
|
|
169
|
+
};
|
|
170
|
+
document.addEventListener('visibilitychange', callback);
|
|
171
|
+
return ()=>window.removeEventListener('visibilitychange', callback);
|
|
172
|
+
}, []);
|
|
173
|
+
return isDocumentHidden;
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
let toastsCounter = 1;
|
|
177
|
+
class Observer {
|
|
178
|
+
constructor(){
|
|
179
|
+
// We use arrow functions to maintain the correct `this` reference
|
|
180
|
+
this.subscribe = (subscriber)=>{
|
|
181
|
+
this.subscribers.push(subscriber);
|
|
182
|
+
return ()=>{
|
|
183
|
+
const index = this.subscribers.indexOf(subscriber);
|
|
184
|
+
this.subscribers.splice(index, 1);
|
|
185
|
+
};
|
|
186
|
+
};
|
|
187
|
+
this.publish = (data)=>{
|
|
188
|
+
this.subscribers.forEach((subscriber)=>subscriber(data));
|
|
189
|
+
};
|
|
190
|
+
this.addToast = (data)=>{
|
|
191
|
+
this.publish(data);
|
|
192
|
+
this.toasts = [
|
|
193
|
+
...this.toasts,
|
|
194
|
+
data
|
|
195
|
+
];
|
|
196
|
+
};
|
|
197
|
+
this.create = (data)=>{
|
|
198
|
+
var _data_id;
|
|
199
|
+
const { message, ...rest } = data;
|
|
200
|
+
const id = typeof (data == null ? void 0 : data.id) === 'number' || ((_data_id = data.id) == null ? void 0 : _data_id.length) > 0 ? data.id : toastsCounter++;
|
|
201
|
+
const alreadyExists = this.toasts.find((toast)=>{
|
|
202
|
+
return toast.id === id;
|
|
203
|
+
});
|
|
204
|
+
const dismissible = data.dismissible === undefined ? true : data.dismissible;
|
|
205
|
+
if (this.dismissedToasts.has(id)) {
|
|
206
|
+
this.dismissedToasts.delete(id);
|
|
207
|
+
}
|
|
208
|
+
if (alreadyExists) {
|
|
209
|
+
this.toasts = this.toasts.map((toast)=>{
|
|
210
|
+
if (toast.id === id) {
|
|
211
|
+
this.publish({
|
|
212
|
+
...toast,
|
|
213
|
+
...data,
|
|
214
|
+
id,
|
|
215
|
+
title: message
|
|
216
|
+
});
|
|
217
|
+
return {
|
|
218
|
+
...toast,
|
|
219
|
+
...data,
|
|
220
|
+
id,
|
|
221
|
+
dismissible,
|
|
222
|
+
title: message
|
|
223
|
+
};
|
|
224
|
+
}
|
|
225
|
+
return toast;
|
|
226
|
+
});
|
|
227
|
+
} else {
|
|
228
|
+
this.addToast({
|
|
229
|
+
title: message,
|
|
230
|
+
...rest,
|
|
231
|
+
dismissible,
|
|
232
|
+
id
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
return id;
|
|
236
|
+
};
|
|
237
|
+
this.dismiss = (id)=>{
|
|
238
|
+
if (id) {
|
|
239
|
+
this.dismissedToasts.add(id);
|
|
240
|
+
requestAnimationFrame(()=>this.subscribers.forEach((subscriber)=>subscriber({
|
|
241
|
+
id,
|
|
242
|
+
dismiss: true
|
|
243
|
+
})));
|
|
244
|
+
} else {
|
|
245
|
+
this.toasts.forEach((toast)=>{
|
|
246
|
+
this.subscribers.forEach((subscriber)=>subscriber({
|
|
247
|
+
id: toast.id,
|
|
248
|
+
dismiss: true
|
|
249
|
+
}));
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
return id;
|
|
253
|
+
};
|
|
254
|
+
this.message = (message, data)=>{
|
|
255
|
+
return this.create({
|
|
256
|
+
...data,
|
|
257
|
+
message
|
|
258
|
+
});
|
|
259
|
+
};
|
|
260
|
+
this.error = (message, data)=>{
|
|
261
|
+
return this.create({
|
|
262
|
+
...data,
|
|
263
|
+
message,
|
|
264
|
+
type: 'error'
|
|
265
|
+
});
|
|
266
|
+
};
|
|
267
|
+
this.success = (message, data)=>{
|
|
268
|
+
return this.create({
|
|
269
|
+
...data,
|
|
270
|
+
type: 'success',
|
|
271
|
+
message
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
this.info = (message, data)=>{
|
|
275
|
+
return this.create({
|
|
276
|
+
...data,
|
|
277
|
+
type: 'info',
|
|
278
|
+
message
|
|
279
|
+
});
|
|
280
|
+
};
|
|
281
|
+
this.warning = (message, data)=>{
|
|
282
|
+
return this.create({
|
|
283
|
+
...data,
|
|
284
|
+
type: 'warning',
|
|
285
|
+
message
|
|
286
|
+
});
|
|
287
|
+
};
|
|
288
|
+
this.loading = (message, data)=>{
|
|
289
|
+
return this.create({
|
|
290
|
+
...data,
|
|
291
|
+
type: 'loading',
|
|
292
|
+
message
|
|
293
|
+
});
|
|
294
|
+
};
|
|
295
|
+
this.promise = (promise, data)=>{
|
|
296
|
+
if (!data) {
|
|
297
|
+
// Nothing to show
|
|
298
|
+
return;
|
|
299
|
+
}
|
|
300
|
+
let id = undefined;
|
|
301
|
+
if (data.loading !== undefined) {
|
|
302
|
+
id = this.create({
|
|
303
|
+
...data,
|
|
304
|
+
promise,
|
|
305
|
+
type: 'loading',
|
|
306
|
+
message: data.loading,
|
|
307
|
+
description: typeof data.description !== 'function' ? data.description : undefined
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
const p = Promise.resolve(promise instanceof Function ? promise() : promise);
|
|
311
|
+
let shouldDismiss = id !== undefined;
|
|
312
|
+
let result;
|
|
313
|
+
const originalPromise = p.then(async (response)=>{
|
|
314
|
+
result = [
|
|
315
|
+
'resolve',
|
|
316
|
+
response
|
|
317
|
+
];
|
|
318
|
+
const isReactElementResponse = React__default.isValidElement(response);
|
|
319
|
+
if (isReactElementResponse) {
|
|
320
|
+
shouldDismiss = false;
|
|
321
|
+
this.create({
|
|
322
|
+
id,
|
|
323
|
+
type: 'default',
|
|
324
|
+
message: response
|
|
325
|
+
});
|
|
326
|
+
} else if (isHttpResponse(response) && !response.ok) {
|
|
327
|
+
shouldDismiss = false;
|
|
328
|
+
const promiseData = typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
|
|
329
|
+
const description = typeof data.description === 'function' ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
|
|
330
|
+
const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
|
|
331
|
+
const toastSettings = isExtendedResult ? promiseData : {
|
|
332
|
+
message: promiseData
|
|
333
|
+
};
|
|
334
|
+
this.create({
|
|
335
|
+
id,
|
|
336
|
+
type: 'error',
|
|
337
|
+
description,
|
|
338
|
+
...toastSettings
|
|
339
|
+
});
|
|
340
|
+
} else if (response instanceof Error) {
|
|
341
|
+
shouldDismiss = false;
|
|
342
|
+
const promiseData = typeof data.error === 'function' ? await data.error(response) : data.error;
|
|
343
|
+
const description = typeof data.description === 'function' ? await data.description(response) : data.description;
|
|
344
|
+
const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
|
|
345
|
+
const toastSettings = isExtendedResult ? promiseData : {
|
|
346
|
+
message: promiseData
|
|
347
|
+
};
|
|
348
|
+
this.create({
|
|
349
|
+
id,
|
|
350
|
+
type: 'error',
|
|
351
|
+
description,
|
|
352
|
+
...toastSettings
|
|
353
|
+
});
|
|
354
|
+
} else if (data.success !== undefined) {
|
|
355
|
+
shouldDismiss = false;
|
|
356
|
+
const promiseData = typeof data.success === 'function' ? await data.success(response) : data.success;
|
|
357
|
+
const description = typeof data.description === 'function' ? await data.description(response) : data.description;
|
|
358
|
+
const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
|
|
359
|
+
const toastSettings = isExtendedResult ? promiseData : {
|
|
360
|
+
message: promiseData
|
|
361
|
+
};
|
|
362
|
+
this.create({
|
|
363
|
+
id,
|
|
364
|
+
type: 'success',
|
|
365
|
+
description,
|
|
366
|
+
...toastSettings
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
}).catch(async (error)=>{
|
|
370
|
+
result = [
|
|
371
|
+
'reject',
|
|
372
|
+
error
|
|
373
|
+
];
|
|
374
|
+
if (data.error !== undefined) {
|
|
375
|
+
shouldDismiss = false;
|
|
376
|
+
const promiseData = typeof data.error === 'function' ? await data.error(error) : data.error;
|
|
377
|
+
const description = typeof data.description === 'function' ? await data.description(error) : data.description;
|
|
378
|
+
const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
|
|
379
|
+
const toastSettings = isExtendedResult ? promiseData : {
|
|
380
|
+
message: promiseData
|
|
381
|
+
};
|
|
382
|
+
this.create({
|
|
383
|
+
id,
|
|
384
|
+
type: 'error',
|
|
385
|
+
description,
|
|
386
|
+
...toastSettings
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
}).finally(()=>{
|
|
390
|
+
if (shouldDismiss) {
|
|
391
|
+
// Toast is still in load state (and will be indefinitely — dismiss it)
|
|
392
|
+
this.dismiss(id);
|
|
393
|
+
id = undefined;
|
|
394
|
+
}
|
|
395
|
+
data.finally == null ? void 0 : data.finally.call(data);
|
|
396
|
+
});
|
|
397
|
+
const unwrap = ()=>new Promise((resolve, reject)=>originalPromise.then(()=>result[0] === 'reject' ? reject(result[1]) : resolve(result[1])).catch(reject));
|
|
398
|
+
if (typeof id !== 'string' && typeof id !== 'number') {
|
|
399
|
+
// cannot Object.assign on undefined
|
|
400
|
+
return {
|
|
401
|
+
unwrap
|
|
402
|
+
};
|
|
403
|
+
} else {
|
|
404
|
+
return Object.assign(id, {
|
|
405
|
+
unwrap
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
};
|
|
409
|
+
this.custom = (jsx, data)=>{
|
|
410
|
+
const id = (data == null ? void 0 : data.id) || toastsCounter++;
|
|
411
|
+
this.create({
|
|
412
|
+
jsx: jsx(id),
|
|
413
|
+
id,
|
|
414
|
+
...data
|
|
415
|
+
});
|
|
416
|
+
return id;
|
|
417
|
+
};
|
|
418
|
+
this.getActiveToasts = ()=>{
|
|
419
|
+
return this.toasts.filter((toast)=>!this.dismissedToasts.has(toast.id));
|
|
420
|
+
};
|
|
421
|
+
this.subscribers = [];
|
|
422
|
+
this.toasts = [];
|
|
423
|
+
this.dismissedToasts = new Set();
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
const ToastState = new Observer();
|
|
427
|
+
// bind this to the toast function
|
|
428
|
+
const toastFunction = (message, data)=>{
|
|
429
|
+
const id = (data == null ? void 0 : data.id) || toastsCounter++;
|
|
430
|
+
ToastState.addToast({
|
|
431
|
+
title: message,
|
|
432
|
+
...data,
|
|
433
|
+
id
|
|
434
|
+
});
|
|
435
|
+
return id;
|
|
436
|
+
};
|
|
437
|
+
const isHttpResponse = (data)=>{
|
|
438
|
+
return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
|
|
439
|
+
};
|
|
440
|
+
const basicToast = toastFunction;
|
|
441
|
+
const getHistory = ()=>ToastState.toasts;
|
|
442
|
+
const getToasts = ()=>ToastState.getActiveToasts();
|
|
443
|
+
// We use `Object.assign` to maintain the correct types as we would lose them otherwise
|
|
444
|
+
const toast = Object.assign(basicToast, {
|
|
445
|
+
success: ToastState.success,
|
|
446
|
+
info: ToastState.info,
|
|
447
|
+
warning: ToastState.warning,
|
|
448
|
+
error: ToastState.error,
|
|
449
|
+
custom: ToastState.custom,
|
|
450
|
+
message: ToastState.message,
|
|
451
|
+
promise: ToastState.promise,
|
|
452
|
+
dismiss: ToastState.dismiss,
|
|
453
|
+
loading: ToastState.loading
|
|
454
|
+
}, {
|
|
455
|
+
getHistory,
|
|
456
|
+
getToasts
|
|
457
|
+
});
|
|
458
|
+
|
|
459
|
+
__insertCSS("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-sonner-toaster][data-lifted=true]{transform:none}}[data-sonner-toaster][data-x-position=right]{right:var(--offset-right)}[data-sonner-toaster][data-x-position=left]{left:var(--offset-left)}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:var(--offset-top)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description]{color:inherit}[data-sonner-toaster][data-sonner-theme=dark] [data-description]{color:#e8e8e8}[data-sonner-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-sonner-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);background:var(--normal-bg);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-x-position=right]{right:0}[data-sonner-toast][data-x-position=left]{left:0}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-sonner-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-sonner-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
|
|
460
|
+
|
|
461
|
+
function isAction(action) {
|
|
462
|
+
return action.label !== undefined;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
// Visible toasts amount
|
|
466
|
+
const VISIBLE_TOASTS_AMOUNT = 3;
|
|
467
|
+
// Viewport padding
|
|
468
|
+
const VIEWPORT_OFFSET = '24px';
|
|
469
|
+
// Mobile viewport padding
|
|
470
|
+
const MOBILE_VIEWPORT_OFFSET = '16px';
|
|
471
|
+
// Default lifetime of a toasts (in ms)
|
|
472
|
+
const TOAST_LIFETIME = 4000;
|
|
473
|
+
// Default toast width
|
|
474
|
+
const TOAST_WIDTH = 356;
|
|
475
|
+
// Default gap between toasts
|
|
476
|
+
const GAP = 14;
|
|
477
|
+
// Threshold to dismiss a toast
|
|
478
|
+
const SWIPE_THRESHOLD = 45;
|
|
479
|
+
// Equal to exit animation duration
|
|
480
|
+
const TIME_BEFORE_UNMOUNT = 200;
|
|
481
|
+
function cn(...classes) {
|
|
482
|
+
return classes.filter(Boolean).join(' ');
|
|
483
|
+
}
|
|
484
|
+
function getDefaultSwipeDirections(position) {
|
|
485
|
+
const [y, x] = position.split('-');
|
|
486
|
+
const directions = [];
|
|
487
|
+
if (y) {
|
|
488
|
+
directions.push(y);
|
|
489
|
+
}
|
|
490
|
+
if (x) {
|
|
491
|
+
directions.push(x);
|
|
492
|
+
}
|
|
493
|
+
return directions;
|
|
494
|
+
}
|
|
495
|
+
const Toast = (props)=>{
|
|
496
|
+
var _toast_classNames, _toast_classNames1, _toast_classNames2, _toast_classNames3, _toast_classNames4, _toast_classNames5, _toast_classNames6, _toast_classNames7, _toast_classNames8;
|
|
497
|
+
const { invert: ToasterInvert, toast, unstyled, interacting, setHeights, visibleToasts, heights, index, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style, cancelButtonStyle, actionButtonStyle, className = '', descriptionClassName = '', duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = 'Close toast' } = props;
|
|
498
|
+
const [swipeDirection, setSwipeDirection] = React__default.useState(null);
|
|
499
|
+
const [swipeOutDirection, setSwipeOutDirection] = React__default.useState(null);
|
|
500
|
+
const [mounted, setMounted] = React__default.useState(false);
|
|
501
|
+
const [removed, setRemoved] = React__default.useState(false);
|
|
502
|
+
const [swiping, setSwiping] = React__default.useState(false);
|
|
503
|
+
const [swipeOut, setSwipeOut] = React__default.useState(false);
|
|
504
|
+
const [isSwiped, setIsSwiped] = React__default.useState(false);
|
|
505
|
+
const [offsetBeforeRemove, setOffsetBeforeRemove] = React__default.useState(0);
|
|
506
|
+
const [initialHeight, setInitialHeight] = React__default.useState(0);
|
|
507
|
+
const remainingTime = React__default.useRef(toast.duration || durationFromToaster || TOAST_LIFETIME);
|
|
508
|
+
const dragStartTime = React__default.useRef(null);
|
|
509
|
+
const toastRef = React__default.useRef(null);
|
|
510
|
+
const isFront = index === 0;
|
|
511
|
+
const isVisible = index + 1 <= visibleToasts;
|
|
512
|
+
const toastType = toast.type;
|
|
513
|
+
const dismissible = toast.dismissible !== false;
|
|
514
|
+
const toastClassname = toast.className || '';
|
|
515
|
+
const toastDescriptionClassname = toast.descriptionClassName || '';
|
|
516
|
+
// Height index is used to calculate the offset as it gets updated before the toast array, which means we can calculate the new layout faster.
|
|
517
|
+
const heightIndex = React__default.useMemo(()=>heights.findIndex((height)=>height.toastId === toast.id) || 0, [
|
|
518
|
+
heights,
|
|
519
|
+
toast.id
|
|
520
|
+
]);
|
|
521
|
+
const closeButton = React__default.useMemo(()=>{
|
|
522
|
+
var _toast_closeButton;
|
|
523
|
+
return (_toast_closeButton = toast.closeButton) != null ? _toast_closeButton : closeButtonFromToaster;
|
|
524
|
+
}, [
|
|
525
|
+
toast.closeButton,
|
|
526
|
+
closeButtonFromToaster
|
|
527
|
+
]);
|
|
528
|
+
const duration = React__default.useMemo(()=>toast.duration || durationFromToaster || TOAST_LIFETIME, [
|
|
529
|
+
toast.duration,
|
|
530
|
+
durationFromToaster
|
|
531
|
+
]);
|
|
532
|
+
const closeTimerStartTimeRef = React__default.useRef(0);
|
|
533
|
+
const offset = React__default.useRef(0);
|
|
534
|
+
const lastCloseTimerStartTimeRef = React__default.useRef(0);
|
|
535
|
+
const pointerStartRef = React__default.useRef(null);
|
|
536
|
+
const [y, x] = position.split('-');
|
|
537
|
+
const toastsHeightBefore = React__default.useMemo(()=>{
|
|
538
|
+
return heights.reduce((prev, curr, reducerIndex)=>{
|
|
539
|
+
// Calculate offset up until current toast
|
|
540
|
+
if (reducerIndex >= heightIndex) {
|
|
541
|
+
return prev;
|
|
542
|
+
}
|
|
543
|
+
return prev + curr.height;
|
|
544
|
+
}, 0);
|
|
545
|
+
}, [
|
|
546
|
+
heights,
|
|
547
|
+
heightIndex
|
|
548
|
+
]);
|
|
549
|
+
const isDocumentHidden = useIsDocumentHidden();
|
|
550
|
+
const invert = toast.invert || ToasterInvert;
|
|
551
|
+
const disabled = toastType === 'loading';
|
|
552
|
+
offset.current = React__default.useMemo(()=>heightIndex * gap + toastsHeightBefore, [
|
|
553
|
+
heightIndex,
|
|
554
|
+
toastsHeightBefore
|
|
555
|
+
]);
|
|
556
|
+
React__default.useEffect(()=>{
|
|
557
|
+
remainingTime.current = duration;
|
|
558
|
+
}, [
|
|
559
|
+
duration
|
|
560
|
+
]);
|
|
561
|
+
React__default.useEffect(()=>{
|
|
562
|
+
// Trigger enter animation without using CSS animation
|
|
563
|
+
setMounted(true);
|
|
564
|
+
}, []);
|
|
565
|
+
React__default.useEffect(()=>{
|
|
566
|
+
const toastNode = toastRef.current;
|
|
567
|
+
if (toastNode) {
|
|
568
|
+
const height = toastNode.getBoundingClientRect().height;
|
|
569
|
+
// Add toast height to heights array after the toast is mounted
|
|
570
|
+
setInitialHeight(height);
|
|
571
|
+
setHeights((h)=>[
|
|
572
|
+
{
|
|
573
|
+
toastId: toast.id,
|
|
574
|
+
height,
|
|
575
|
+
position: toast.position
|
|
576
|
+
},
|
|
577
|
+
...h
|
|
578
|
+
]);
|
|
579
|
+
return ()=>setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
|
|
580
|
+
}
|
|
581
|
+
}, [
|
|
582
|
+
setHeights,
|
|
583
|
+
toast.id
|
|
584
|
+
]);
|
|
585
|
+
React__default.useLayoutEffect(()=>{
|
|
586
|
+
// Keep height up to date with the content in case it updates
|
|
587
|
+
if (!mounted) return;
|
|
588
|
+
const toastNode = toastRef.current;
|
|
589
|
+
const originalHeight = toastNode.style.height;
|
|
590
|
+
toastNode.style.height = 'auto';
|
|
591
|
+
const newHeight = toastNode.getBoundingClientRect().height;
|
|
592
|
+
toastNode.style.height = originalHeight;
|
|
593
|
+
setInitialHeight(newHeight);
|
|
594
|
+
setHeights((heights)=>{
|
|
595
|
+
const alreadyExists = heights.find((height)=>height.toastId === toast.id);
|
|
596
|
+
if (!alreadyExists) {
|
|
597
|
+
return [
|
|
598
|
+
{
|
|
599
|
+
toastId: toast.id,
|
|
600
|
+
height: newHeight,
|
|
601
|
+
position: toast.position
|
|
602
|
+
},
|
|
603
|
+
...heights
|
|
604
|
+
];
|
|
605
|
+
} else {
|
|
606
|
+
return heights.map((height)=>height.toastId === toast.id ? {
|
|
607
|
+
...height,
|
|
608
|
+
height: newHeight
|
|
609
|
+
} : height);
|
|
610
|
+
}
|
|
611
|
+
});
|
|
612
|
+
}, [
|
|
613
|
+
mounted,
|
|
614
|
+
toast.title,
|
|
615
|
+
toast.description,
|
|
616
|
+
setHeights,
|
|
617
|
+
toast.id,
|
|
618
|
+
toast.jsx,
|
|
619
|
+
toast.action,
|
|
620
|
+
toast.cancel
|
|
621
|
+
]);
|
|
622
|
+
const deleteToast = React__default.useCallback(()=>{
|
|
623
|
+
// Save the offset for the exit swipe animation
|
|
624
|
+
setRemoved(true);
|
|
625
|
+
setOffsetBeforeRemove(offset.current);
|
|
626
|
+
setHeights((h)=>h.filter((height)=>height.toastId !== toast.id));
|
|
627
|
+
setTimeout(()=>{
|
|
628
|
+
removeToast(toast);
|
|
629
|
+
}, TIME_BEFORE_UNMOUNT);
|
|
630
|
+
}, [
|
|
631
|
+
toast,
|
|
632
|
+
removeToast,
|
|
633
|
+
setHeights,
|
|
634
|
+
offset
|
|
635
|
+
]);
|
|
636
|
+
React__default.useEffect(()=>{
|
|
637
|
+
if (toast.promise && toastType === 'loading' || toast.duration === Infinity || toast.type === 'loading') return;
|
|
638
|
+
let timeoutId;
|
|
639
|
+
// Pause the timer on each hover
|
|
640
|
+
const pauseTimer = ()=>{
|
|
641
|
+
if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
|
|
642
|
+
// Get the elapsed time since the timer started
|
|
643
|
+
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
|
|
644
|
+
remainingTime.current = remainingTime.current - elapsedTime;
|
|
645
|
+
}
|
|
646
|
+
lastCloseTimerStartTimeRef.current = new Date().getTime();
|
|
647
|
+
};
|
|
648
|
+
const startTimer = ()=>{
|
|
649
|
+
// setTimeout(, Infinity) behaves as if the delay is 0.
|
|
650
|
+
// As a result, the toast would be closed immediately, giving the appearance that it was never rendered.
|
|
651
|
+
// See: https://github.com/denysdovhan/wtfjs?tab=readme-ov-file#an-infinite-timeout
|
|
652
|
+
if (remainingTime.current === Infinity) return;
|
|
653
|
+
closeTimerStartTimeRef.current = new Date().getTime();
|
|
654
|
+
// Let the toast know it has started
|
|
655
|
+
timeoutId = setTimeout(()=>{
|
|
656
|
+
toast.onAutoClose == null ? void 0 : toast.onAutoClose.call(toast, toast);
|
|
657
|
+
deleteToast();
|
|
658
|
+
}, remainingTime.current);
|
|
659
|
+
};
|
|
660
|
+
if (expanded || interacting || isDocumentHidden) {
|
|
661
|
+
pauseTimer();
|
|
662
|
+
} else {
|
|
663
|
+
startTimer();
|
|
664
|
+
}
|
|
665
|
+
return ()=>clearTimeout(timeoutId);
|
|
666
|
+
}, [
|
|
667
|
+
expanded,
|
|
668
|
+
interacting,
|
|
669
|
+
toast,
|
|
670
|
+
toastType,
|
|
671
|
+
isDocumentHidden,
|
|
672
|
+
deleteToast
|
|
673
|
+
]);
|
|
674
|
+
React__default.useEffect(()=>{
|
|
675
|
+
if (toast.delete) {
|
|
676
|
+
deleteToast();
|
|
677
|
+
toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
|
|
678
|
+
}
|
|
679
|
+
}, [
|
|
680
|
+
deleteToast,
|
|
681
|
+
toast.delete
|
|
682
|
+
]);
|
|
683
|
+
function getLoadingIcon() {
|
|
684
|
+
var _toast_classNames;
|
|
685
|
+
if (icons == null ? void 0 : icons.loading) {
|
|
686
|
+
var _toast_classNames1;
|
|
687
|
+
return /*#__PURE__*/ React__default.createElement("div", {
|
|
688
|
+
className: cn(classNames == null ? void 0 : classNames.loader, toast == null ? void 0 : (_toast_classNames1 = toast.classNames) == null ? void 0 : _toast_classNames1.loader, 'sonner-loader'),
|
|
689
|
+
"data-visible": toastType === 'loading'
|
|
690
|
+
}, icons.loading);
|
|
691
|
+
}
|
|
692
|
+
return /*#__PURE__*/ React__default.createElement(Loader, {
|
|
693
|
+
className: cn(classNames == null ? void 0 : classNames.loader, toast == null ? void 0 : (_toast_classNames = toast.classNames) == null ? void 0 : _toast_classNames.loader),
|
|
694
|
+
visible: toastType === 'loading'
|
|
695
|
+
});
|
|
696
|
+
}
|
|
697
|
+
const icon = toast.icon || (icons == null ? void 0 : icons[toastType]) || getAsset(toastType);
|
|
698
|
+
var _toast_richColors, _icons_close;
|
|
699
|
+
return /*#__PURE__*/ React__default.createElement("li", {
|
|
700
|
+
tabIndex: 0,
|
|
701
|
+
ref: toastRef,
|
|
702
|
+
className: cn(className, toastClassname, classNames == null ? void 0 : classNames.toast, toast == null ? void 0 : (_toast_classNames = toast.classNames) == null ? void 0 : _toast_classNames.toast, classNames == null ? void 0 : classNames.default, classNames == null ? void 0 : classNames[toastType], toast == null ? void 0 : (_toast_classNames1 = toast.classNames) == null ? void 0 : _toast_classNames1[toastType]),
|
|
703
|
+
"data-sonner-toast": "",
|
|
704
|
+
"data-rich-colors": (_toast_richColors = toast.richColors) != null ? _toast_richColors : defaultRichColors,
|
|
705
|
+
"data-styled": !Boolean(toast.jsx || toast.unstyled || unstyled),
|
|
706
|
+
"data-mounted": mounted,
|
|
707
|
+
"data-promise": Boolean(toast.promise),
|
|
708
|
+
"data-swiped": isSwiped,
|
|
709
|
+
"data-removed": removed,
|
|
710
|
+
"data-visible": isVisible,
|
|
711
|
+
"data-y-position": y,
|
|
712
|
+
"data-x-position": x,
|
|
713
|
+
"data-index": index,
|
|
714
|
+
"data-front": isFront,
|
|
715
|
+
"data-swiping": swiping,
|
|
716
|
+
"data-dismissible": dismissible,
|
|
717
|
+
"data-type": toastType,
|
|
718
|
+
"data-invert": invert,
|
|
719
|
+
"data-swipe-out": swipeOut,
|
|
720
|
+
"data-swipe-direction": swipeOutDirection,
|
|
721
|
+
"data-expanded": Boolean(expanded || expandByDefault && mounted),
|
|
722
|
+
"data-testid": toast.testId,
|
|
723
|
+
style: {
|
|
724
|
+
'--index': index,
|
|
725
|
+
'--toasts-before': index,
|
|
726
|
+
'--z-index': toasts.length - index,
|
|
727
|
+
'--offset': `${removed ? offsetBeforeRemove : offset.current}px`,
|
|
728
|
+
'--initial-height': expandByDefault ? 'auto' : `${initialHeight}px`,
|
|
729
|
+
...style,
|
|
730
|
+
...toast.style
|
|
731
|
+
},
|
|
732
|
+
onDragEnd: ()=>{
|
|
733
|
+
setSwiping(false);
|
|
734
|
+
setSwipeDirection(null);
|
|
735
|
+
pointerStartRef.current = null;
|
|
736
|
+
},
|
|
737
|
+
onPointerDown: (event)=>{
|
|
738
|
+
if (event.button === 2) return; // Return early on right click
|
|
739
|
+
if (disabled || !dismissible) return;
|
|
740
|
+
dragStartTime.current = new Date();
|
|
741
|
+
setOffsetBeforeRemove(offset.current);
|
|
742
|
+
// Ensure we maintain correct pointer capture even when going outside of the toast (e.g. when swiping)
|
|
743
|
+
event.target.setPointerCapture(event.pointerId);
|
|
744
|
+
if (event.target.tagName === 'BUTTON') return;
|
|
745
|
+
setSwiping(true);
|
|
746
|
+
pointerStartRef.current = {
|
|
747
|
+
x: event.clientX,
|
|
748
|
+
y: event.clientY
|
|
749
|
+
};
|
|
750
|
+
},
|
|
751
|
+
onPointerUp: ()=>{
|
|
752
|
+
var _toastRef_current, _toastRef_current1, _dragStartTime_current;
|
|
753
|
+
if (swipeOut || !dismissible) return;
|
|
754
|
+
pointerStartRef.current = null;
|
|
755
|
+
const swipeAmountX = Number(((_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.getPropertyValue('--swipe-amount-x').replace('px', '')) || 0);
|
|
756
|
+
const swipeAmountY = Number(((_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.getPropertyValue('--swipe-amount-y').replace('px', '')) || 0);
|
|
757
|
+
const timeTaken = new Date().getTime() - ((_dragStartTime_current = dragStartTime.current) == null ? void 0 : _dragStartTime_current.getTime());
|
|
758
|
+
const swipeAmount = swipeDirection === 'x' ? swipeAmountX : swipeAmountY;
|
|
759
|
+
const velocity = Math.abs(swipeAmount) / timeTaken;
|
|
760
|
+
if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
|
|
761
|
+
setOffsetBeforeRemove(offset.current);
|
|
762
|
+
toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
|
|
763
|
+
if (swipeDirection === 'x') {
|
|
764
|
+
setSwipeOutDirection(swipeAmountX > 0 ? 'right' : 'left');
|
|
765
|
+
} else {
|
|
766
|
+
setSwipeOutDirection(swipeAmountY > 0 ? 'down' : 'up');
|
|
767
|
+
}
|
|
768
|
+
deleteToast();
|
|
769
|
+
setSwipeOut(true);
|
|
770
|
+
return;
|
|
771
|
+
} else {
|
|
772
|
+
var _toastRef_current2, _toastRef_current3;
|
|
773
|
+
(_toastRef_current2 = toastRef.current) == null ? void 0 : _toastRef_current2.style.setProperty('--swipe-amount-x', `0px`);
|
|
774
|
+
(_toastRef_current3 = toastRef.current) == null ? void 0 : _toastRef_current3.style.setProperty('--swipe-amount-y', `0px`);
|
|
775
|
+
}
|
|
776
|
+
setIsSwiped(false);
|
|
777
|
+
setSwiping(false);
|
|
778
|
+
setSwipeDirection(null);
|
|
779
|
+
},
|
|
780
|
+
onPointerMove: (event)=>{
|
|
781
|
+
var _window_getSelection, // Apply transform using both x and y values
|
|
782
|
+
_toastRef_current, _toastRef_current1;
|
|
783
|
+
if (!pointerStartRef.current || !dismissible) return;
|
|
784
|
+
const isHighlighted = ((_window_getSelection = window.getSelection()) == null ? void 0 : _window_getSelection.toString().length) > 0;
|
|
785
|
+
if (isHighlighted) return;
|
|
786
|
+
const yDelta = event.clientY - pointerStartRef.current.y;
|
|
787
|
+
const xDelta = event.clientX - pointerStartRef.current.x;
|
|
788
|
+
var _props_swipeDirections;
|
|
789
|
+
const swipeDirections = (_props_swipeDirections = props.swipeDirections) != null ? _props_swipeDirections : getDefaultSwipeDirections(position);
|
|
790
|
+
// Determine swipe direction if not already locked
|
|
791
|
+
if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {
|
|
792
|
+
setSwipeDirection(Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y');
|
|
793
|
+
}
|
|
794
|
+
let swipeAmount = {
|
|
795
|
+
x: 0,
|
|
796
|
+
y: 0
|
|
797
|
+
};
|
|
798
|
+
const getDampening = (delta)=>{
|
|
799
|
+
const factor = Math.abs(delta) / 20;
|
|
800
|
+
return 1 / (1.5 + factor);
|
|
801
|
+
};
|
|
802
|
+
// Only apply swipe in the locked direction
|
|
803
|
+
if (swipeDirection === 'y') {
|
|
804
|
+
// Handle vertical swipes
|
|
805
|
+
if (swipeDirections.includes('top') || swipeDirections.includes('bottom')) {
|
|
806
|
+
if (swipeDirections.includes('top') && yDelta < 0 || swipeDirections.includes('bottom') && yDelta > 0) {
|
|
807
|
+
swipeAmount.y = yDelta;
|
|
808
|
+
} else {
|
|
809
|
+
// Smoothly transition to dampened movement
|
|
810
|
+
const dampenedDelta = yDelta * getDampening(yDelta);
|
|
811
|
+
// Ensure we don't jump when transitioning to dampened movement
|
|
812
|
+
swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
|
|
813
|
+
}
|
|
814
|
+
}
|
|
815
|
+
} else if (swipeDirection === 'x') {
|
|
816
|
+
// Handle horizontal swipes
|
|
817
|
+
if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
|
|
818
|
+
if (swipeDirections.includes('left') && xDelta < 0 || swipeDirections.includes('right') && xDelta > 0) {
|
|
819
|
+
swipeAmount.x = xDelta;
|
|
820
|
+
} else {
|
|
821
|
+
// Smoothly transition to dampened movement
|
|
822
|
+
const dampenedDelta = xDelta * getDampening(xDelta);
|
|
823
|
+
// Ensure we don't jump when transitioning to dampened movement
|
|
824
|
+
swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) {
|
|
829
|
+
setIsSwiped(true);
|
|
830
|
+
}
|
|
831
|
+
(_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.setProperty('--swipe-amount-x', `${swipeAmount.x}px`);
|
|
832
|
+
(_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.setProperty('--swipe-amount-y', `${swipeAmount.y}px`);
|
|
833
|
+
}
|
|
834
|
+
}, closeButton && !toast.jsx && toastType !== 'loading' ? /*#__PURE__*/ React__default.createElement("button", {
|
|
835
|
+
"aria-label": closeButtonAriaLabel,
|
|
836
|
+
"data-disabled": disabled,
|
|
837
|
+
"data-close-button": true,
|
|
838
|
+
onClick: disabled || !dismissible ? ()=>{} : ()=>{
|
|
839
|
+
deleteToast();
|
|
840
|
+
toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
|
|
841
|
+
},
|
|
842
|
+
className: cn(classNames == null ? void 0 : classNames.closeButton, toast == null ? void 0 : (_toast_classNames2 = toast.classNames) == null ? void 0 : _toast_classNames2.closeButton)
|
|
843
|
+
}, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast.icon) ? /*#__PURE__*/ React__default.createElement("div", {
|
|
844
|
+
"data-icon": "",
|
|
845
|
+
className: cn(classNames == null ? void 0 : classNames.icon, toast == null ? void 0 : (_toast_classNames3 = toast.classNames) == null ? void 0 : _toast_classNames3.icon)
|
|
846
|
+
}, toast.promise || toast.type === 'loading' && !toast.icon ? toast.icon || getLoadingIcon() : null, toast.type !== 'loading' ? icon : null) : null, /*#__PURE__*/ React__default.createElement("div", {
|
|
847
|
+
"data-content": "",
|
|
848
|
+
className: cn(classNames == null ? void 0 : classNames.content, toast == null ? void 0 : (_toast_classNames4 = toast.classNames) == null ? void 0 : _toast_classNames4.content)
|
|
849
|
+
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
850
|
+
"data-title": "",
|
|
851
|
+
className: cn(classNames == null ? void 0 : classNames.title, toast == null ? void 0 : (_toast_classNames5 = toast.classNames) == null ? void 0 : _toast_classNames5.title)
|
|
852
|
+
}, toast.jsx ? toast.jsx : typeof toast.title === 'function' ? toast.title() : toast.title), toast.description ? /*#__PURE__*/ React__default.createElement("div", {
|
|
853
|
+
"data-description": "",
|
|
854
|
+
className: cn(descriptionClassName, toastDescriptionClassname, classNames == null ? void 0 : classNames.description, toast == null ? void 0 : (_toast_classNames6 = toast.classNames) == null ? void 0 : _toast_classNames6.description)
|
|
855
|
+
}, typeof toast.description === 'function' ? toast.description() : toast.description) : null), /*#__PURE__*/ React__default.isValidElement(toast.cancel) ? toast.cancel : toast.cancel && isAction(toast.cancel) ? /*#__PURE__*/ React__default.createElement("button", {
|
|
856
|
+
"data-button": true,
|
|
857
|
+
"data-cancel": true,
|
|
858
|
+
style: toast.cancelButtonStyle || cancelButtonStyle,
|
|
859
|
+
onClick: (event)=>{
|
|
860
|
+
// We need to check twice because typescript
|
|
861
|
+
if (!isAction(toast.cancel)) return;
|
|
862
|
+
if (!dismissible) return;
|
|
863
|
+
toast.cancel.onClick == null ? void 0 : toast.cancel.onClick.call(toast.cancel, event);
|
|
864
|
+
deleteToast();
|
|
865
|
+
},
|
|
866
|
+
className: cn(classNames == null ? void 0 : classNames.cancelButton, toast == null ? void 0 : (_toast_classNames7 = toast.classNames) == null ? void 0 : _toast_classNames7.cancelButton)
|
|
867
|
+
}, toast.cancel.label) : null, /*#__PURE__*/ React__default.isValidElement(toast.action) ? toast.action : toast.action && isAction(toast.action) ? /*#__PURE__*/ React__default.createElement("button", {
|
|
868
|
+
"data-button": true,
|
|
869
|
+
"data-action": true,
|
|
870
|
+
style: toast.actionButtonStyle || actionButtonStyle,
|
|
871
|
+
onClick: (event)=>{
|
|
872
|
+
// We need to check twice because typescript
|
|
873
|
+
if (!isAction(toast.action)) return;
|
|
874
|
+
toast.action.onClick == null ? void 0 : toast.action.onClick.call(toast.action, event);
|
|
875
|
+
if (event.defaultPrevented) return;
|
|
876
|
+
deleteToast();
|
|
877
|
+
},
|
|
878
|
+
className: cn(classNames == null ? void 0 : classNames.actionButton, toast == null ? void 0 : (_toast_classNames8 = toast.classNames) == null ? void 0 : _toast_classNames8.actionButton)
|
|
879
|
+
}, toast.action.label) : null);
|
|
880
|
+
};
|
|
881
|
+
function getDocumentDirection() {
|
|
882
|
+
if (typeof window === 'undefined') return 'ltr';
|
|
883
|
+
if (typeof document === 'undefined') return 'ltr'; // For Fresh purpose
|
|
884
|
+
const dirAttribute = document.documentElement.getAttribute('dir');
|
|
885
|
+
if (dirAttribute === 'auto' || !dirAttribute) {
|
|
886
|
+
return window.getComputedStyle(document.documentElement).direction;
|
|
887
|
+
}
|
|
888
|
+
return dirAttribute;
|
|
889
|
+
}
|
|
890
|
+
function assignOffset(defaultOffset, mobileOffset) {
|
|
891
|
+
const styles = {};
|
|
892
|
+
[
|
|
893
|
+
defaultOffset,
|
|
894
|
+
mobileOffset
|
|
895
|
+
].forEach((offset, index)=>{
|
|
896
|
+
const isMobile = index === 1;
|
|
897
|
+
const prefix = isMobile ? '--mobile-offset' : '--offset';
|
|
898
|
+
const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
|
|
899
|
+
function assignAll(offset) {
|
|
900
|
+
[
|
|
901
|
+
'top',
|
|
902
|
+
'right',
|
|
903
|
+
'bottom',
|
|
904
|
+
'left'
|
|
905
|
+
].forEach((key)=>{
|
|
906
|
+
styles[`${prefix}-${key}`] = typeof offset === 'number' ? `${offset}px` : offset;
|
|
907
|
+
});
|
|
908
|
+
}
|
|
909
|
+
if (typeof offset === 'number' || typeof offset === 'string') {
|
|
910
|
+
assignAll(offset);
|
|
911
|
+
} else if (typeof offset === 'object') {
|
|
912
|
+
[
|
|
913
|
+
'top',
|
|
914
|
+
'right',
|
|
915
|
+
'bottom',
|
|
916
|
+
'left'
|
|
917
|
+
].forEach((key)=>{
|
|
918
|
+
if (offset[key] === undefined) {
|
|
919
|
+
styles[`${prefix}-${key}`] = defaultValue;
|
|
920
|
+
} else {
|
|
921
|
+
styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
|
|
922
|
+
}
|
|
923
|
+
});
|
|
924
|
+
} else {
|
|
925
|
+
assignAll(defaultValue);
|
|
926
|
+
}
|
|
927
|
+
});
|
|
928
|
+
return styles;
|
|
929
|
+
}
|
|
930
|
+
const Toaster$2 = /*#__PURE__*/ React__default.forwardRef(function Toaster(props, ref) {
|
|
931
|
+
const { id, invert, position = 'bottom-right', hotkey = [
|
|
932
|
+
'altKey',
|
|
933
|
+
'KeyT'
|
|
934
|
+
], expand, closeButton, className, offset, mobileOffset, theme = 'light', richColors, duration, style, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = 'Notifications' } = props;
|
|
935
|
+
const [toasts, setToasts] = React__default.useState([]);
|
|
936
|
+
const filteredToasts = React__default.useMemo(()=>{
|
|
937
|
+
if (id) {
|
|
938
|
+
return toasts.filter((toast)=>toast.toasterId === id);
|
|
939
|
+
}
|
|
940
|
+
return toasts.filter((toast)=>!toast.toasterId);
|
|
941
|
+
}, [
|
|
942
|
+
toasts,
|
|
943
|
+
id
|
|
944
|
+
]);
|
|
945
|
+
const possiblePositions = React__default.useMemo(()=>{
|
|
946
|
+
return Array.from(new Set([
|
|
947
|
+
position
|
|
948
|
+
].concat(filteredToasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
|
|
949
|
+
}, [
|
|
950
|
+
filteredToasts,
|
|
951
|
+
position
|
|
952
|
+
]);
|
|
953
|
+
const [heights, setHeights] = React__default.useState([]);
|
|
954
|
+
const [expanded, setExpanded] = React__default.useState(false);
|
|
955
|
+
const [interacting, setInteracting] = React__default.useState(false);
|
|
956
|
+
const [actualTheme, setActualTheme] = React__default.useState(theme !== 'system' ? theme : typeof window !== 'undefined' ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : 'light');
|
|
957
|
+
const listRef = React__default.useRef(null);
|
|
958
|
+
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
|
|
959
|
+
const lastFocusedElementRef = React__default.useRef(null);
|
|
960
|
+
const isFocusWithinRef = React__default.useRef(false);
|
|
961
|
+
const removeToast = React__default.useCallback((toastToRemove)=>{
|
|
962
|
+
setToasts((toasts)=>{
|
|
963
|
+
var _toasts_find;
|
|
964
|
+
if (!((_toasts_find = toasts.find((toast)=>toast.id === toastToRemove.id)) == null ? void 0 : _toasts_find.delete)) {
|
|
965
|
+
ToastState.dismiss(toastToRemove.id);
|
|
966
|
+
}
|
|
967
|
+
return toasts.filter(({ id })=>id !== toastToRemove.id);
|
|
968
|
+
});
|
|
969
|
+
}, []);
|
|
970
|
+
React__default.useEffect(()=>{
|
|
971
|
+
return ToastState.subscribe((toast)=>{
|
|
972
|
+
if (toast.dismiss) {
|
|
973
|
+
// Prevent batching of other state updates
|
|
974
|
+
requestAnimationFrame(()=>{
|
|
975
|
+
setToasts((toasts)=>toasts.map((t)=>t.id === toast.id ? {
|
|
976
|
+
...t,
|
|
977
|
+
delete: true
|
|
978
|
+
} : t));
|
|
979
|
+
});
|
|
980
|
+
return;
|
|
981
|
+
}
|
|
982
|
+
// Prevent batching, temp solution.
|
|
983
|
+
setTimeout(()=>{
|
|
984
|
+
ReactDOM__default.flushSync(()=>{
|
|
985
|
+
setToasts((toasts)=>{
|
|
986
|
+
const indexOfExistingToast = toasts.findIndex((t)=>t.id === toast.id);
|
|
987
|
+
// Update the toast if it already exists
|
|
988
|
+
if (indexOfExistingToast !== -1) {
|
|
989
|
+
return [
|
|
990
|
+
...toasts.slice(0, indexOfExistingToast),
|
|
991
|
+
{
|
|
992
|
+
...toasts[indexOfExistingToast],
|
|
993
|
+
...toast
|
|
994
|
+
},
|
|
995
|
+
...toasts.slice(indexOfExistingToast + 1)
|
|
996
|
+
];
|
|
997
|
+
}
|
|
998
|
+
return [
|
|
999
|
+
toast,
|
|
1000
|
+
...toasts
|
|
1001
|
+
];
|
|
1002
|
+
});
|
|
1003
|
+
});
|
|
1004
|
+
});
|
|
1005
|
+
});
|
|
1006
|
+
}, [
|
|
1007
|
+
toasts
|
|
1008
|
+
]);
|
|
1009
|
+
React__default.useEffect(()=>{
|
|
1010
|
+
if (theme !== 'system') {
|
|
1011
|
+
setActualTheme(theme);
|
|
1012
|
+
return;
|
|
1013
|
+
}
|
|
1014
|
+
if (theme === 'system') {
|
|
1015
|
+
// check if current preference is dark
|
|
1016
|
+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
1017
|
+
// it's currently dark
|
|
1018
|
+
setActualTheme('dark');
|
|
1019
|
+
} else {
|
|
1020
|
+
// it's not dark
|
|
1021
|
+
setActualTheme('light');
|
|
1022
|
+
}
|
|
1023
|
+
}
|
|
1024
|
+
if (typeof window === 'undefined') return;
|
|
1025
|
+
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
1026
|
+
try {
|
|
1027
|
+
// Chrome & Firefox
|
|
1028
|
+
darkMediaQuery.addEventListener('change', ({ matches })=>{
|
|
1029
|
+
if (matches) {
|
|
1030
|
+
setActualTheme('dark');
|
|
1031
|
+
} else {
|
|
1032
|
+
setActualTheme('light');
|
|
1033
|
+
}
|
|
1034
|
+
});
|
|
1035
|
+
} catch (error) {
|
|
1036
|
+
// Safari < 14
|
|
1037
|
+
darkMediaQuery.addListener(({ matches })=>{
|
|
1038
|
+
try {
|
|
1039
|
+
if (matches) {
|
|
1040
|
+
setActualTheme('dark');
|
|
1041
|
+
} else {
|
|
1042
|
+
setActualTheme('light');
|
|
1043
|
+
}
|
|
1044
|
+
} catch (e) {
|
|
1045
|
+
console.error(e);
|
|
1046
|
+
}
|
|
1047
|
+
});
|
|
1048
|
+
}
|
|
1049
|
+
}, [
|
|
1050
|
+
theme
|
|
1051
|
+
]);
|
|
1052
|
+
React__default.useEffect(()=>{
|
|
1053
|
+
// Ensure expanded is always false when no toasts are present / only one left
|
|
1054
|
+
if (toasts.length <= 1) {
|
|
1055
|
+
setExpanded(false);
|
|
1056
|
+
}
|
|
1057
|
+
}, [
|
|
1058
|
+
toasts
|
|
1059
|
+
]);
|
|
1060
|
+
React__default.useEffect(()=>{
|
|
1061
|
+
const handleKeyDown = (event)=>{
|
|
1062
|
+
var _listRef_current;
|
|
1063
|
+
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key);
|
|
1064
|
+
if (isHotkeyPressed) {
|
|
1065
|
+
var _listRef_current1;
|
|
1066
|
+
setExpanded(true);
|
|
1067
|
+
(_listRef_current1 = listRef.current) == null ? void 0 : _listRef_current1.focus();
|
|
1068
|
+
}
|
|
1069
|
+
if (event.code === 'Escape' && (document.activeElement === listRef.current || ((_listRef_current = listRef.current) == null ? void 0 : _listRef_current.contains(document.activeElement)))) {
|
|
1070
|
+
setExpanded(false);
|
|
1071
|
+
}
|
|
1072
|
+
};
|
|
1073
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
1074
|
+
return ()=>document.removeEventListener('keydown', handleKeyDown);
|
|
1075
|
+
}, [
|
|
1076
|
+
hotkey
|
|
1077
|
+
]);
|
|
1078
|
+
React__default.useEffect(()=>{
|
|
1079
|
+
if (listRef.current) {
|
|
1080
|
+
return ()=>{
|
|
1081
|
+
if (lastFocusedElementRef.current) {
|
|
1082
|
+
lastFocusedElementRef.current.focus({
|
|
1083
|
+
preventScroll: true
|
|
1084
|
+
});
|
|
1085
|
+
lastFocusedElementRef.current = null;
|
|
1086
|
+
isFocusWithinRef.current = false;
|
|
1087
|
+
}
|
|
1088
|
+
};
|
|
1089
|
+
}
|
|
1090
|
+
}, [
|
|
1091
|
+
listRef.current
|
|
1092
|
+
]);
|
|
1093
|
+
return(// Remove item from normal navigation flow, only available via hotkey
|
|
1094
|
+
/*#__PURE__*/ React__default.createElement("section", {
|
|
1095
|
+
ref: ref,
|
|
1096
|
+
"aria-label": `${containerAriaLabel} ${hotkeyLabel}`,
|
|
1097
|
+
tabIndex: -1,
|
|
1098
|
+
"aria-live": "polite",
|
|
1099
|
+
"aria-relevant": "additions text",
|
|
1100
|
+
"aria-atomic": "false",
|
|
1101
|
+
suppressHydrationWarning: true
|
|
1102
|
+
}, possiblePositions.map((position, index)=>{
|
|
1103
|
+
var _heights_;
|
|
1104
|
+
const [y, x] = position.split('-');
|
|
1105
|
+
if (!filteredToasts.length) return null;
|
|
1106
|
+
return /*#__PURE__*/ React__default.createElement("ol", {
|
|
1107
|
+
key: position,
|
|
1108
|
+
dir: dir === 'auto' ? getDocumentDirection() : dir,
|
|
1109
|
+
tabIndex: -1,
|
|
1110
|
+
ref: listRef,
|
|
1111
|
+
className: className,
|
|
1112
|
+
"data-sonner-toaster": true,
|
|
1113
|
+
"data-sonner-theme": actualTheme,
|
|
1114
|
+
"data-y-position": y,
|
|
1115
|
+
"data-x-position": x,
|
|
1116
|
+
style: {
|
|
1117
|
+
'--front-toast-height': `${((_heights_ = heights[0]) == null ? void 0 : _heights_.height) || 0}px`,
|
|
1118
|
+
'--width': `${TOAST_WIDTH}px`,
|
|
1119
|
+
'--gap': `${gap}px`,
|
|
1120
|
+
...style,
|
|
1121
|
+
...assignOffset(offset, mobileOffset)
|
|
1122
|
+
},
|
|
1123
|
+
onBlur: (event)=>{
|
|
1124
|
+
if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
|
|
1125
|
+
isFocusWithinRef.current = false;
|
|
1126
|
+
if (lastFocusedElementRef.current) {
|
|
1127
|
+
lastFocusedElementRef.current.focus({
|
|
1128
|
+
preventScroll: true
|
|
1129
|
+
});
|
|
1130
|
+
lastFocusedElementRef.current = null;
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
},
|
|
1134
|
+
onFocus: (event)=>{
|
|
1135
|
+
const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
|
|
1136
|
+
if (isNotDismissible) return;
|
|
1137
|
+
if (!isFocusWithinRef.current) {
|
|
1138
|
+
isFocusWithinRef.current = true;
|
|
1139
|
+
lastFocusedElementRef.current = event.relatedTarget;
|
|
1140
|
+
}
|
|
1141
|
+
},
|
|
1142
|
+
onMouseEnter: ()=>setExpanded(true),
|
|
1143
|
+
onMouseMove: ()=>setExpanded(true),
|
|
1144
|
+
onMouseLeave: ()=>{
|
|
1145
|
+
// Avoid setting expanded to false when interacting with a toast, e.g. swiping
|
|
1146
|
+
if (!interacting) {
|
|
1147
|
+
setExpanded(false);
|
|
1148
|
+
}
|
|
1149
|
+
},
|
|
1150
|
+
onDragEnd: ()=>setExpanded(false),
|
|
1151
|
+
onPointerDown: (event)=>{
|
|
1152
|
+
const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
|
|
1153
|
+
if (isNotDismissible) return;
|
|
1154
|
+
setInteracting(true);
|
|
1155
|
+
},
|
|
1156
|
+
onPointerUp: ()=>setInteracting(false)
|
|
1157
|
+
}, filteredToasts.filter((toast)=>!toast.position && index === 0 || toast.position === position).map((toast, index)=>{
|
|
1158
|
+
var _toastOptions_duration, _toastOptions_closeButton;
|
|
1159
|
+
return /*#__PURE__*/ React__default.createElement(Toast, {
|
|
1160
|
+
key: toast.id,
|
|
1161
|
+
icons: icons,
|
|
1162
|
+
index: index,
|
|
1163
|
+
toast: toast,
|
|
1164
|
+
defaultRichColors: richColors,
|
|
1165
|
+
duration: (_toastOptions_duration = toastOptions == null ? void 0 : toastOptions.duration) != null ? _toastOptions_duration : duration,
|
|
1166
|
+
className: toastOptions == null ? void 0 : toastOptions.className,
|
|
1167
|
+
descriptionClassName: toastOptions == null ? void 0 : toastOptions.descriptionClassName,
|
|
1168
|
+
invert: invert,
|
|
1169
|
+
visibleToasts: visibleToasts,
|
|
1170
|
+
closeButton: (_toastOptions_closeButton = toastOptions == null ? void 0 : toastOptions.closeButton) != null ? _toastOptions_closeButton : closeButton,
|
|
1171
|
+
interacting: interacting,
|
|
1172
|
+
position: position,
|
|
1173
|
+
style: toastOptions == null ? void 0 : toastOptions.style,
|
|
1174
|
+
unstyled: toastOptions == null ? void 0 : toastOptions.unstyled,
|
|
1175
|
+
classNames: toastOptions == null ? void 0 : toastOptions.classNames,
|
|
1176
|
+
cancelButtonStyle: toastOptions == null ? void 0 : toastOptions.cancelButtonStyle,
|
|
1177
|
+
actionButtonStyle: toastOptions == null ? void 0 : toastOptions.actionButtonStyle,
|
|
1178
|
+
closeButtonAriaLabel: toastOptions == null ? void 0 : toastOptions.closeButtonAriaLabel,
|
|
1179
|
+
removeToast: removeToast,
|
|
1180
|
+
toasts: filteredToasts.filter((t)=>t.position == toast.position),
|
|
1181
|
+
heights: heights.filter((h)=>h.position == toast.position),
|
|
1182
|
+
setHeights: setHeights,
|
|
1183
|
+
expandByDefault: expand,
|
|
1184
|
+
gap: gap,
|
|
1185
|
+
expanded: expanded,
|
|
1186
|
+
swipeDirections: props.swipeDirections
|
|
1187
|
+
});
|
|
1188
|
+
}));
|
|
1189
|
+
})));
|
|
1190
|
+
});
|
|
1191
|
+
|
|
1192
|
+
const Toaster$1 = ({ ...props }) => {
|
|
1193
|
+
return /* @__PURE__ */ jsx(
|
|
1194
|
+
Toaster$2,
|
|
1195
|
+
{
|
|
1196
|
+
className: "toaster group",
|
|
1197
|
+
icons: {
|
|
1198
|
+
success: /* @__PURE__ */ jsx(CircleCheckBig, { className: "size-4 text-success" }),
|
|
1199
|
+
error: /* @__PURE__ */ jsx(CircleX, { className: "size-4 text-destructive" }),
|
|
1200
|
+
warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 text-warning" }),
|
|
1201
|
+
info: /* @__PURE__ */ jsx(Info, { className: "size-4 text-info" }),
|
|
1202
|
+
loading: /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-primary" })
|
|
1203
|
+
},
|
|
1204
|
+
toastOptions: {
|
|
1205
|
+
classNames: {
|
|
1206
|
+
toast: "!group toast shadow-lg",
|
|
1207
|
+
description: "!text-muted-foreground",
|
|
1208
|
+
actionButton: "!bg-primary text-primary-foreground",
|
|
1209
|
+
cancelButton: "!bg-muted text-muted-foreground"
|
|
1210
|
+
}
|
|
1211
|
+
},
|
|
1212
|
+
...props
|
|
1213
|
+
}
|
|
1214
|
+
);
|
|
1215
|
+
};
|
|
1216
|
+
|
|
1217
|
+
const Toaster = (props) => {
|
|
1218
|
+
useEffect(() => {
|
|
1219
|
+
const handleToast = (event) => {
|
|
1220
|
+
const { type, message, options } = event.detail;
|
|
1221
|
+
switch (type) {
|
|
1222
|
+
case "success":
|
|
1223
|
+
toast.success(message, options);
|
|
1224
|
+
break;
|
|
1225
|
+
case "error":
|
|
1226
|
+
toast.error(message, options);
|
|
1227
|
+
break;
|
|
1228
|
+
case "warning":
|
|
1229
|
+
toast.warning(message, options);
|
|
1230
|
+
break;
|
|
1231
|
+
case "info":
|
|
1232
|
+
toast.info(message, options);
|
|
1233
|
+
break;
|
|
1234
|
+
case "loading":
|
|
1235
|
+
toast.loading(message, options);
|
|
1236
|
+
break;
|
|
1237
|
+
default:
|
|
1238
|
+
toast(message, options);
|
|
1239
|
+
break;
|
|
1240
|
+
}
|
|
1241
|
+
};
|
|
1242
|
+
window.addEventListener(TOAST_EVENT, handleToast);
|
|
1243
|
+
return () => window.removeEventListener(TOAST_EVENT, handleToast);
|
|
1244
|
+
}, []);
|
|
1245
|
+
return /* @__PURE__ */ jsx(Toaster$1, { ...props });
|
|
1246
|
+
};
|
|
1247
|
+
|
|
1248
|
+
export { Toaster as T };
|
|
1249
|
+
//# sourceMappingURL=Sonner.js.map
|