@zag-js/toast 0.0.0-dev-20220919135419 → 0.0.0-dev-20220919164136
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/index.js +12 -42
- package/package.json +8 -8
- package/dist/index.mjs +0 -644
package/dist/index.js
CHANGED
|
@@ -1,33 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
api: () => api,
|
|
24
|
-
connect: () => connect,
|
|
25
|
-
createMachine: () => createToastMachine,
|
|
26
|
-
group: () => group
|
|
27
|
-
});
|
|
28
|
-
module.exports = __toCommonJS(src_exports);
|
|
29
|
-
|
|
30
|
-
// ../../utilities/dom/dist/index.mjs
|
|
1
|
+
// ../../utilities/dom/dist/index.js
|
|
31
2
|
var dataAttr = (guard) => {
|
|
32
3
|
return guard ? "" : void 0;
|
|
33
4
|
};
|
|
@@ -84,7 +55,7 @@ function trackDocumentVisibility(_doc, callback) {
|
|
|
84
55
|
});
|
|
85
56
|
}
|
|
86
57
|
|
|
87
|
-
// ../../utilities/core/dist/index.
|
|
58
|
+
// ../../utilities/core/dist/index.js
|
|
88
59
|
var runIfFn2 = (v, ...a) => {
|
|
89
60
|
const res = typeof v === "function" ? v(...a) : v;
|
|
90
61
|
return res ?? void 0;
|
|
@@ -105,7 +76,7 @@ function warn(...a) {
|
|
|
105
76
|
}
|
|
106
77
|
|
|
107
78
|
// src/toast-group.connect.ts
|
|
108
|
-
|
|
79
|
+
import { subscribe } from "@zag-js/core";
|
|
109
80
|
|
|
110
81
|
// src/toast.dom.ts
|
|
111
82
|
var dom = defineDomHelpers({
|
|
@@ -300,7 +271,7 @@ function groupConnect(state, send, normalize) {
|
|
|
300
271
|
return portal;
|
|
301
272
|
},
|
|
302
273
|
subscribe(fn) {
|
|
303
|
-
return
|
|
274
|
+
return subscribe(state.context.toasts, () => fn(state.context.toasts));
|
|
304
275
|
}
|
|
305
276
|
};
|
|
306
277
|
if (!state.matches("unknown")) {
|
|
@@ -310,15 +281,15 @@ function groupConnect(state, send, normalize) {
|
|
|
310
281
|
}
|
|
311
282
|
|
|
312
283
|
// src/toast-group.machine.ts
|
|
313
|
-
|
|
284
|
+
import { createMachine as createMachine2 } from "@zag-js/core";
|
|
314
285
|
|
|
315
286
|
// src/toast.machine.ts
|
|
316
|
-
|
|
317
|
-
var { not, and, or } =
|
|
287
|
+
import { createMachine, guards } from "@zag-js/core";
|
|
288
|
+
var { not, and, or } = guards;
|
|
318
289
|
function createToastMachine(options = {}) {
|
|
319
290
|
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
|
|
320
291
|
const __duration = getToastDuration(duration, type);
|
|
321
|
-
return
|
|
292
|
+
return createMachine(
|
|
322
293
|
{
|
|
323
294
|
id,
|
|
324
295
|
entry: "invokeOnOpen",
|
|
@@ -465,7 +436,7 @@ function createToastMachine(options = {}) {
|
|
|
465
436
|
|
|
466
437
|
// src/toast-group.machine.ts
|
|
467
438
|
function groupMachine(ctx) {
|
|
468
|
-
return (
|
|
439
|
+
return createMachine2({
|
|
469
440
|
id: "toaster",
|
|
470
441
|
initial: "active",
|
|
471
442
|
context: {
|
|
@@ -665,10 +636,9 @@ function api() {
|
|
|
665
636
|
return toaster;
|
|
666
637
|
}
|
|
667
638
|
}
|
|
668
|
-
|
|
669
|
-
0 && (module.exports = {
|
|
639
|
+
export {
|
|
670
640
|
api,
|
|
671
641
|
connect,
|
|
672
|
-
createMachine,
|
|
642
|
+
createToastMachine as createMachine,
|
|
673
643
|
group
|
|
674
|
-
}
|
|
644
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
+
"type": "module",
|
|
2
3
|
"name": "@zag-js/toast",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
4
|
+
"version": "0.0.0-dev-20220919164136",
|
|
4
5
|
"description": "Core logic for the toast widget implemented as a state machine",
|
|
5
6
|
"keywords": [
|
|
6
7
|
"js",
|
|
@@ -16,7 +17,6 @@
|
|
|
16
17
|
"license": "MIT",
|
|
17
18
|
"main": "dist/index.js",
|
|
18
19
|
"types": "dist/index.d.ts",
|
|
19
|
-
"module": "dist/index.mjs",
|
|
20
20
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/toast",
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"files": [
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.0.0-dev-
|
|
33
|
-
"@zag-js/types": "0.
|
|
32
|
+
"@zag-js/core": "0.0.0-dev-20220919164136",
|
|
33
|
+
"@zag-js/types": "0.0.0-dev-20220919164136"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zag-js/dom-utils": "0.
|
|
37
|
-
"@zag-js/utils": "0.0.0-dev-
|
|
36
|
+
"@zag-js/dom-utils": "0.0.0-dev-20220919164136",
|
|
37
|
+
"@zag-js/utils": "0.0.0-dev-20220919164136"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
|
-
"build-fast": "tsup src/index.ts --format=esm
|
|
40
|
+
"build-fast": "tsup src/index.ts --format=esm",
|
|
41
41
|
"start": "pnpm build --watch",
|
|
42
|
-
"build": "tsup src/index.ts --format=esm
|
|
42
|
+
"build": "tsup src/index.ts --format=esm --dts",
|
|
43
43
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
44
44
|
"lint": "eslint src --ext .ts,.tsx",
|
|
45
45
|
"test-ci": "pnpm test --ci --runInBand",
|
package/dist/index.mjs
DELETED
|
@@ -1,644 +0,0 @@
|
|
|
1
|
-
// ../../utilities/dom/dist/index.mjs
|
|
2
|
-
var dataAttr = (guard) => {
|
|
3
|
-
return guard ? "" : void 0;
|
|
4
|
-
};
|
|
5
|
-
var MAX_Z_INDEX = 2147483647;
|
|
6
|
-
var runIfFn = (v, ...a) => {
|
|
7
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
8
|
-
return res ?? void 0;
|
|
9
|
-
};
|
|
10
|
-
var cast = (v) => v;
|
|
11
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
12
|
-
var isDom = () => typeof window !== "undefined";
|
|
13
|
-
function isDocument(el) {
|
|
14
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
15
|
-
}
|
|
16
|
-
function isWindow(value) {
|
|
17
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
18
|
-
}
|
|
19
|
-
function getDocument(el) {
|
|
20
|
-
if (isWindow(el))
|
|
21
|
-
return el.document;
|
|
22
|
-
if (isDocument(el))
|
|
23
|
-
return el;
|
|
24
|
-
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
25
|
-
}
|
|
26
|
-
function defineDomHelpers(helpers) {
|
|
27
|
-
const dom2 = {
|
|
28
|
-
getRootNode: (ctx) => {
|
|
29
|
-
var _a;
|
|
30
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
31
|
-
},
|
|
32
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
33
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
34
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
35
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
36
|
-
};
|
|
37
|
-
return {
|
|
38
|
-
...dom2,
|
|
39
|
-
...helpers
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
var isRef = (v) => hasProp(v, "current");
|
|
43
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
44
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
45
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
46
|
-
return () => {
|
|
47
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
51
|
-
const doc = cast(_doc);
|
|
52
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
53
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
54
|
-
callback(!!hidden);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// ../../utilities/core/dist/index.mjs
|
|
59
|
-
var runIfFn2 = (v, ...a) => {
|
|
60
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
61
|
-
return res ?? void 0;
|
|
62
|
-
};
|
|
63
|
-
var uuid = /* @__PURE__ */ (() => {
|
|
64
|
-
let id = 0;
|
|
65
|
-
return () => {
|
|
66
|
-
id++;
|
|
67
|
-
return id.toString(36);
|
|
68
|
-
};
|
|
69
|
-
})();
|
|
70
|
-
function warn(...a) {
|
|
71
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
72
|
-
const c = a.length === 2 ? a[0] : true;
|
|
73
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
74
|
-
console.warn(m);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// src/toast-group.connect.ts
|
|
79
|
-
import { subscribe } from "@zag-js/core";
|
|
80
|
-
|
|
81
|
-
// src/toast.dom.ts
|
|
82
|
-
var dom = defineDomHelpers({
|
|
83
|
-
getGroupId: (placement) => `toast-group:${placement}`,
|
|
84
|
-
getContainerId: (ctx) => `toast:${ctx.id}`,
|
|
85
|
-
getTitleId: (ctx) => `toast-title:${ctx.id}`,
|
|
86
|
-
getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
|
|
87
|
-
getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
|
|
88
|
-
getPortalId: (ctx) => `toast-portal:${ctx.id}`,
|
|
89
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
|
|
90
|
-
createPortalEl: (ctx) => {
|
|
91
|
-
const existing = dom.getPortalEl(ctx);
|
|
92
|
-
if (existing)
|
|
93
|
-
return existing;
|
|
94
|
-
const portal = dom.getDoc(ctx).createElement("toast-portal");
|
|
95
|
-
portal.id = dom.getPortalId(ctx);
|
|
96
|
-
return portal;
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
// src/toast.utils.ts
|
|
101
|
-
function getToastsByPlacement(toasts) {
|
|
102
|
-
const result = {};
|
|
103
|
-
for (const toast of toasts) {
|
|
104
|
-
const placement = toast.state.context.placement;
|
|
105
|
-
result[placement] || (result[placement] = []);
|
|
106
|
-
result[placement].push(toast);
|
|
107
|
-
}
|
|
108
|
-
return result;
|
|
109
|
-
}
|
|
110
|
-
var defaultTimeouts = {
|
|
111
|
-
info: 5e3,
|
|
112
|
-
error: 5e3,
|
|
113
|
-
success: 2e3,
|
|
114
|
-
loading: Infinity,
|
|
115
|
-
custom: 5e3
|
|
116
|
-
};
|
|
117
|
-
function getToastDuration(duration, type) {
|
|
118
|
-
return duration ?? defaultTimeouts[type];
|
|
119
|
-
}
|
|
120
|
-
function getGroupPlacementStyle(ctx, placement) {
|
|
121
|
-
const offset = ctx.offsets;
|
|
122
|
-
const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
|
|
123
|
-
const rtl = ctx.dir === "rtl";
|
|
124
|
-
const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
|
|
125
|
-
const isRighty = __placement.includes("right");
|
|
126
|
-
const isLefty = __placement.includes("left");
|
|
127
|
-
const styles = {
|
|
128
|
-
position: "fixed",
|
|
129
|
-
pointerEvents: ctx.count > 0 ? void 0 : "none",
|
|
130
|
-
display: "flex",
|
|
131
|
-
flexDirection: "column",
|
|
132
|
-
"--toast-gutter": ctx.gutter,
|
|
133
|
-
zIndex: ctx.zIndex
|
|
134
|
-
};
|
|
135
|
-
let alignItems = "center";
|
|
136
|
-
if (isRighty)
|
|
137
|
-
alignItems = "flex-end";
|
|
138
|
-
if (isLefty)
|
|
139
|
-
alignItems = "flex-start";
|
|
140
|
-
styles.alignItems = alignItems;
|
|
141
|
-
if (__placement.includes("top")) {
|
|
142
|
-
const offset2 = __offset.top;
|
|
143
|
-
styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
|
|
144
|
-
}
|
|
145
|
-
if (__placement.includes("bottom")) {
|
|
146
|
-
const offset2 = __offset.bottom;
|
|
147
|
-
styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
|
|
148
|
-
}
|
|
149
|
-
if (!__placement.includes("left")) {
|
|
150
|
-
const offset2 = __offset.right;
|
|
151
|
-
styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
|
|
152
|
-
}
|
|
153
|
-
if (!__placement.includes("right")) {
|
|
154
|
-
const offset2 = __offset.left;
|
|
155
|
-
styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
|
|
156
|
-
}
|
|
157
|
-
return styles;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
// src/toast-group.connect.ts
|
|
161
|
-
var toaster = {};
|
|
162
|
-
function groupConnect(state, send, normalize) {
|
|
163
|
-
const group2 = {
|
|
164
|
-
count: state.context.count,
|
|
165
|
-
toasts: state.context.toasts,
|
|
166
|
-
toastsByPlacement: getToastsByPlacement(state.context.toasts),
|
|
167
|
-
isVisible(id) {
|
|
168
|
-
if (!state.context.toasts.length)
|
|
169
|
-
return false;
|
|
170
|
-
return !!state.context.toasts.find((toast) => toast.id == id);
|
|
171
|
-
},
|
|
172
|
-
create(options) {
|
|
173
|
-
const uid = `toast:${uuid()}`;
|
|
174
|
-
const id = options.id ? options.id : uid;
|
|
175
|
-
if (group2.isVisible(id))
|
|
176
|
-
return;
|
|
177
|
-
send({ type: "ADD_TOAST", toast: { ...options, id } });
|
|
178
|
-
return id;
|
|
179
|
-
},
|
|
180
|
-
upsert(options) {
|
|
181
|
-
const { id } = options;
|
|
182
|
-
const isVisible = id ? group2.isVisible(id) : false;
|
|
183
|
-
if (isVisible && id != null) {
|
|
184
|
-
return group2.update(id, options);
|
|
185
|
-
} else {
|
|
186
|
-
return group2.create(options);
|
|
187
|
-
}
|
|
188
|
-
},
|
|
189
|
-
dismiss(id) {
|
|
190
|
-
if (id == null) {
|
|
191
|
-
send("DISMISS_ALL");
|
|
192
|
-
} else if (group2.isVisible(id)) {
|
|
193
|
-
send({ type: "DISMISS_TOAST", id });
|
|
194
|
-
}
|
|
195
|
-
},
|
|
196
|
-
remove(id) {
|
|
197
|
-
if (id == null) {
|
|
198
|
-
send("REMOVE_ALL");
|
|
199
|
-
} else if (group2.isVisible(id)) {
|
|
200
|
-
send({ type: "REMOVE_TOAST", id });
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
dismissByPlacement(placement) {
|
|
204
|
-
const toasts = group2.toastsByPlacement[placement];
|
|
205
|
-
if (toasts) {
|
|
206
|
-
toasts.forEach((toast) => group2.dismiss(toast.id));
|
|
207
|
-
}
|
|
208
|
-
},
|
|
209
|
-
update(id, options) {
|
|
210
|
-
if (!group2.isVisible(id))
|
|
211
|
-
return;
|
|
212
|
-
send({ type: "UPDATE_TOAST", id, toast: options });
|
|
213
|
-
return id;
|
|
214
|
-
},
|
|
215
|
-
loading(options) {
|
|
216
|
-
options.type = "loading";
|
|
217
|
-
return group2.upsert(options);
|
|
218
|
-
},
|
|
219
|
-
success(options) {
|
|
220
|
-
options.type = "success";
|
|
221
|
-
return group2.upsert(options);
|
|
222
|
-
},
|
|
223
|
-
error(options) {
|
|
224
|
-
options.type = "error";
|
|
225
|
-
return group2.upsert(options);
|
|
226
|
-
},
|
|
227
|
-
promise(promise, options, shared = {}) {
|
|
228
|
-
const id = group2.loading({ ...shared, ...options.loading });
|
|
229
|
-
promise.then((response) => {
|
|
230
|
-
const successOptions = runIfFn2(options.success, response);
|
|
231
|
-
group2.success({ ...shared, ...successOptions, id });
|
|
232
|
-
}).catch((error) => {
|
|
233
|
-
const errorOptions = runIfFn2(options.error, error);
|
|
234
|
-
group2.error({ ...shared, ...errorOptions, id });
|
|
235
|
-
});
|
|
236
|
-
return promise;
|
|
237
|
-
},
|
|
238
|
-
pause(id) {
|
|
239
|
-
if (id == null) {
|
|
240
|
-
send("PAUSE_ALL");
|
|
241
|
-
} else if (group2.isVisible(id)) {
|
|
242
|
-
send({ type: "PAUSE_TOAST", id });
|
|
243
|
-
}
|
|
244
|
-
},
|
|
245
|
-
resume(id) {
|
|
246
|
-
if (id == null) {
|
|
247
|
-
send("RESUME_ALL");
|
|
248
|
-
} else if (group2.isVisible(id)) {
|
|
249
|
-
send({ type: "RESUME_TOAST", id });
|
|
250
|
-
}
|
|
251
|
-
},
|
|
252
|
-
getGroupProps(options) {
|
|
253
|
-
const { placement, label = "Notifications" } = options;
|
|
254
|
-
return normalize.element({
|
|
255
|
-
tabIndex: -1,
|
|
256
|
-
"aria-label": label,
|
|
257
|
-
id: dom.getGroupId(placement),
|
|
258
|
-
"data-placement": placement,
|
|
259
|
-
"aria-live": "polite",
|
|
260
|
-
role: "region",
|
|
261
|
-
style: getGroupPlacementStyle(state.context, placement)
|
|
262
|
-
});
|
|
263
|
-
},
|
|
264
|
-
createPortal() {
|
|
265
|
-
const doc = dom.getDoc(state.context);
|
|
266
|
-
const exist = dom.getPortalEl(state.context);
|
|
267
|
-
if (exist)
|
|
268
|
-
return exist;
|
|
269
|
-
const portal = dom.createPortalEl(state.context);
|
|
270
|
-
doc.body.appendChild(portal);
|
|
271
|
-
return portal;
|
|
272
|
-
},
|
|
273
|
-
subscribe(fn) {
|
|
274
|
-
return subscribe(state.context.toasts, () => fn(state.context.toasts));
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
if (!state.matches("unknown")) {
|
|
278
|
-
Object.assign(toaster, group2);
|
|
279
|
-
}
|
|
280
|
-
return group2;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
// src/toast-group.machine.ts
|
|
284
|
-
import { createMachine as createMachine2 } from "@zag-js/core";
|
|
285
|
-
|
|
286
|
-
// src/toast.machine.ts
|
|
287
|
-
import { createMachine, guards } from "@zag-js/core";
|
|
288
|
-
var { not, and, or } = guards;
|
|
289
|
-
function createToastMachine(options = {}) {
|
|
290
|
-
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
|
|
291
|
-
const __duration = getToastDuration(duration, type);
|
|
292
|
-
return createMachine(
|
|
293
|
-
{
|
|
294
|
-
id,
|
|
295
|
-
entry: "invokeOnOpen",
|
|
296
|
-
initial: type === "loading" ? "persist" : "active",
|
|
297
|
-
context: {
|
|
298
|
-
id,
|
|
299
|
-
type,
|
|
300
|
-
remaining: __duration,
|
|
301
|
-
duration: __duration,
|
|
302
|
-
removeDelay,
|
|
303
|
-
createdAt: Date.now(),
|
|
304
|
-
placement,
|
|
305
|
-
...rest
|
|
306
|
-
},
|
|
307
|
-
on: {
|
|
308
|
-
UPDATE: [
|
|
309
|
-
{
|
|
310
|
-
guard: and("hasTypeChanged", "isChangingToLoading"),
|
|
311
|
-
target: "persist",
|
|
312
|
-
actions: ["setContext", "invokeOnUpdate"]
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
guard: or("hasDurationChanged", "hasTypeChanged"),
|
|
316
|
-
target: "active:temp",
|
|
317
|
-
actions: ["setContext", "invokeOnUpdate"]
|
|
318
|
-
},
|
|
319
|
-
{
|
|
320
|
-
actions: ["setContext", "invokeOnUpdate"]
|
|
321
|
-
}
|
|
322
|
-
]
|
|
323
|
-
},
|
|
324
|
-
states: {
|
|
325
|
-
"active:temp": {
|
|
326
|
-
tags: ["visible", "updating"],
|
|
327
|
-
after: {
|
|
328
|
-
0: "active"
|
|
329
|
-
}
|
|
330
|
-
},
|
|
331
|
-
persist: {
|
|
332
|
-
tags: ["visible", "paused"],
|
|
333
|
-
activities: "trackDocumentVisibility",
|
|
334
|
-
on: {
|
|
335
|
-
RESUME: {
|
|
336
|
-
guard: not("isLoadingType"),
|
|
337
|
-
target: "active",
|
|
338
|
-
actions: ["setCreatedAt"]
|
|
339
|
-
},
|
|
340
|
-
DISMISS: "dismissing"
|
|
341
|
-
}
|
|
342
|
-
},
|
|
343
|
-
active: {
|
|
344
|
-
tags: ["visible"],
|
|
345
|
-
activities: "trackDocumentVisibility",
|
|
346
|
-
after: {
|
|
347
|
-
VISIBLE_DURATION: "dismissing"
|
|
348
|
-
},
|
|
349
|
-
on: {
|
|
350
|
-
DISMISS: "dismissing",
|
|
351
|
-
PAUSE: {
|
|
352
|
-
target: "persist",
|
|
353
|
-
actions: "setRemainingDuration"
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
},
|
|
357
|
-
dismissing: {
|
|
358
|
-
entry: "invokeOnClosing",
|
|
359
|
-
after: {
|
|
360
|
-
REMOVE_DELAY: {
|
|
361
|
-
target: "inactive",
|
|
362
|
-
actions: "notifyParentToRemove"
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
},
|
|
366
|
-
inactive: {
|
|
367
|
-
entry: "invokeOnClose",
|
|
368
|
-
type: "final"
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
},
|
|
372
|
-
{
|
|
373
|
-
activities: {
|
|
374
|
-
trackDocumentVisibility(ctx, _evt, { send }) {
|
|
375
|
-
if (!ctx.pauseOnPageIdle)
|
|
376
|
-
return;
|
|
377
|
-
return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
|
|
378
|
-
send(hidden ? "PAUSE" : "RESUME");
|
|
379
|
-
});
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
guards: {
|
|
383
|
-
isChangingToLoading: (_, evt) => {
|
|
384
|
-
var _a;
|
|
385
|
-
return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
|
|
386
|
-
},
|
|
387
|
-
isLoadingType: (ctx) => ctx.type === "loading",
|
|
388
|
-
hasTypeChanged: (ctx, evt) => {
|
|
389
|
-
var _a;
|
|
390
|
-
return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
|
|
391
|
-
},
|
|
392
|
-
hasDurationChanged: (ctx, evt) => {
|
|
393
|
-
var _a;
|
|
394
|
-
return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
|
|
395
|
-
}
|
|
396
|
-
},
|
|
397
|
-
delays: {
|
|
398
|
-
VISIBLE_DURATION: (ctx) => ctx.remaining,
|
|
399
|
-
REMOVE_DELAY: (ctx) => ctx.removeDelay
|
|
400
|
-
},
|
|
401
|
-
actions: {
|
|
402
|
-
setRemainingDuration(ctx) {
|
|
403
|
-
ctx.remaining -= Date.now() - ctx.createdAt;
|
|
404
|
-
},
|
|
405
|
-
setCreatedAt(ctx) {
|
|
406
|
-
ctx.createdAt = Date.now();
|
|
407
|
-
},
|
|
408
|
-
notifyParentToRemove(_ctx, _evt, { self }) {
|
|
409
|
-
self.sendParent({ type: "REMOVE_TOAST", id: self.id });
|
|
410
|
-
},
|
|
411
|
-
invokeOnClosing(ctx) {
|
|
412
|
-
var _a;
|
|
413
|
-
(_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
|
|
414
|
-
},
|
|
415
|
-
invokeOnClose(ctx) {
|
|
416
|
-
var _a;
|
|
417
|
-
(_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
|
|
418
|
-
},
|
|
419
|
-
invokeOnOpen(ctx) {
|
|
420
|
-
var _a;
|
|
421
|
-
(_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
|
|
422
|
-
},
|
|
423
|
-
invokeOnUpdate(ctx) {
|
|
424
|
-
var _a;
|
|
425
|
-
(_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
|
|
426
|
-
},
|
|
427
|
-
setContext(ctx, evt) {
|
|
428
|
-
const { duration: duration2, type: type2 } = evt.toast;
|
|
429
|
-
const time = getToastDuration(duration2, type2);
|
|
430
|
-
Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
);
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
// src/toast-group.machine.ts
|
|
438
|
-
function groupMachine(ctx) {
|
|
439
|
-
return createMachine2({
|
|
440
|
-
id: "toaster",
|
|
441
|
-
initial: "active",
|
|
442
|
-
context: {
|
|
443
|
-
dir: "ltr",
|
|
444
|
-
max: Number.MAX_SAFE_INTEGER,
|
|
445
|
-
toasts: [],
|
|
446
|
-
gutter: "1rem",
|
|
447
|
-
zIndex: MAX_Z_INDEX,
|
|
448
|
-
pauseOnPageIdle: false,
|
|
449
|
-
pauseOnInteraction: true,
|
|
450
|
-
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
|
|
451
|
-
...ctx
|
|
452
|
-
},
|
|
453
|
-
computed: {
|
|
454
|
-
count: (ctx2) => ctx2.toasts.length
|
|
455
|
-
},
|
|
456
|
-
on: {
|
|
457
|
-
SETUP: {},
|
|
458
|
-
PAUSE_TOAST: {
|
|
459
|
-
actions: (_ctx, evt, { self }) => {
|
|
460
|
-
self.sendChild("PAUSE", evt.id);
|
|
461
|
-
}
|
|
462
|
-
},
|
|
463
|
-
PAUSE_ALL: {
|
|
464
|
-
actions: (ctx2) => {
|
|
465
|
-
ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
RESUME_TOAST: {
|
|
469
|
-
actions: (_ctx, evt, { self }) => {
|
|
470
|
-
self.sendChild("RESUME", evt.id);
|
|
471
|
-
}
|
|
472
|
-
},
|
|
473
|
-
RESUME_ALL: {
|
|
474
|
-
actions: (ctx2) => {
|
|
475
|
-
ctx2.toasts.forEach((toast) => toast.send("RESUME"));
|
|
476
|
-
}
|
|
477
|
-
},
|
|
478
|
-
ADD_TOAST: {
|
|
479
|
-
guard: (ctx2) => ctx2.toasts.length < ctx2.max,
|
|
480
|
-
actions: (ctx2, evt, { self }) => {
|
|
481
|
-
const options = {
|
|
482
|
-
...evt.toast,
|
|
483
|
-
pauseOnPageIdle: ctx2.pauseOnPageIdle,
|
|
484
|
-
pauseOnInteraction: ctx2.pauseOnInteraction,
|
|
485
|
-
dir: ctx2.dir,
|
|
486
|
-
getRootNode: ctx2.getRootNode
|
|
487
|
-
};
|
|
488
|
-
const toast = createToastMachine(options);
|
|
489
|
-
const actor = self.spawn(toast);
|
|
490
|
-
ctx2.toasts.push(actor);
|
|
491
|
-
}
|
|
492
|
-
},
|
|
493
|
-
UPDATE_TOAST: {
|
|
494
|
-
actions: (_ctx, evt, { self }) => {
|
|
495
|
-
self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
|
|
496
|
-
}
|
|
497
|
-
},
|
|
498
|
-
DISMISS_TOAST: {
|
|
499
|
-
actions: (_ctx, evt, { self }) => {
|
|
500
|
-
self.sendChild("DISMISS", evt.id);
|
|
501
|
-
}
|
|
502
|
-
},
|
|
503
|
-
DISMISS_ALL: {
|
|
504
|
-
actions: (ctx2) => {
|
|
505
|
-
ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
|
|
506
|
-
}
|
|
507
|
-
},
|
|
508
|
-
REMOVE_TOAST: {
|
|
509
|
-
actions: (ctx2, evt, { self }) => {
|
|
510
|
-
self.stopChild(evt.id);
|
|
511
|
-
const index = ctx2.toasts.findIndex((toast) => toast.id === evt.id);
|
|
512
|
-
ctx2.toasts.splice(index, 1);
|
|
513
|
-
}
|
|
514
|
-
},
|
|
515
|
-
REMOVE_ALL: {
|
|
516
|
-
actions: (ctx2, _evt, { self }) => {
|
|
517
|
-
ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
|
|
518
|
-
while (ctx2.toasts.length)
|
|
519
|
-
ctx2.toasts.pop();
|
|
520
|
-
}
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
});
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
// src/toast.connect.ts
|
|
527
|
-
function connect(state, send, normalize) {
|
|
528
|
-
const isVisible = state.hasTag("visible");
|
|
529
|
-
const isPaused = state.hasTag("paused");
|
|
530
|
-
const pauseOnInteraction = state.context.pauseOnInteraction;
|
|
531
|
-
const placement = state.context.placement;
|
|
532
|
-
return {
|
|
533
|
-
type: state.context.type,
|
|
534
|
-
title: state.context.title,
|
|
535
|
-
description: state.context.description,
|
|
536
|
-
placement,
|
|
537
|
-
isVisible,
|
|
538
|
-
isPaused,
|
|
539
|
-
isRtl: state.context.dir === "rtl",
|
|
540
|
-
pause() {
|
|
541
|
-
send("PAUSE");
|
|
542
|
-
},
|
|
543
|
-
resume() {
|
|
544
|
-
send("RESUME");
|
|
545
|
-
},
|
|
546
|
-
dismiss() {
|
|
547
|
-
send("DISMISS");
|
|
548
|
-
},
|
|
549
|
-
rootProps: normalize.element({
|
|
550
|
-
"data-part": "root",
|
|
551
|
-
dir: state.context.dir,
|
|
552
|
-
id: dom.getContainerId(state.context),
|
|
553
|
-
"data-open": dataAttr(isVisible),
|
|
554
|
-
"data-type": state.context.type,
|
|
555
|
-
"data-placement": placement,
|
|
556
|
-
role: "status",
|
|
557
|
-
"aria-atomic": "true",
|
|
558
|
-
tabIndex: 0,
|
|
559
|
-
style: {
|
|
560
|
-
position: "relative",
|
|
561
|
-
pointerEvents: "auto",
|
|
562
|
-
margin: "calc(var(--toast-gutter) / 2)",
|
|
563
|
-
"--remove-delay": `${state.context.removeDelay}ms`,
|
|
564
|
-
"--duration": `${state.context.duration}ms`
|
|
565
|
-
},
|
|
566
|
-
onKeyDown(event) {
|
|
567
|
-
if (event.key == "Escape") {
|
|
568
|
-
send("DISMISS");
|
|
569
|
-
event.preventDefault();
|
|
570
|
-
}
|
|
571
|
-
},
|
|
572
|
-
onFocus() {
|
|
573
|
-
if (pauseOnInteraction) {
|
|
574
|
-
send("PAUSE");
|
|
575
|
-
}
|
|
576
|
-
},
|
|
577
|
-
onBlur() {
|
|
578
|
-
if (pauseOnInteraction) {
|
|
579
|
-
send("RESUME");
|
|
580
|
-
}
|
|
581
|
-
},
|
|
582
|
-
onPointerEnter() {
|
|
583
|
-
if (pauseOnInteraction) {
|
|
584
|
-
send("PAUSE");
|
|
585
|
-
}
|
|
586
|
-
},
|
|
587
|
-
onPointerLeave() {
|
|
588
|
-
if (pauseOnInteraction) {
|
|
589
|
-
send("RESUME");
|
|
590
|
-
}
|
|
591
|
-
}
|
|
592
|
-
}),
|
|
593
|
-
titleProps: normalize.element({
|
|
594
|
-
"data-part": "title",
|
|
595
|
-
id: dom.getTitleId(state.context)
|
|
596
|
-
}),
|
|
597
|
-
descriptionProps: normalize.element({
|
|
598
|
-
"data-part": "description",
|
|
599
|
-
id: dom.getDescriptionId(state.context)
|
|
600
|
-
}),
|
|
601
|
-
closeButtonProps: normalize.button({
|
|
602
|
-
id: dom.getCloseButtonId(state.context),
|
|
603
|
-
"data-part": "close-button",
|
|
604
|
-
type: "button",
|
|
605
|
-
"aria-label": "Dismiss notification",
|
|
606
|
-
onClick() {
|
|
607
|
-
send("DISMISS");
|
|
608
|
-
}
|
|
609
|
-
}),
|
|
610
|
-
render() {
|
|
611
|
-
var _a, _b;
|
|
612
|
-
return (_b = (_a = state.context).render) == null ? void 0 : _b.call(_a, {
|
|
613
|
-
id: state.context.id,
|
|
614
|
-
type: state.context.type,
|
|
615
|
-
duration: state.context.duration,
|
|
616
|
-
title: state.context.title,
|
|
617
|
-
placement: state.context.placement,
|
|
618
|
-
description: state.context.description,
|
|
619
|
-
dismiss() {
|
|
620
|
-
send("DISMISS");
|
|
621
|
-
}
|
|
622
|
-
});
|
|
623
|
-
}
|
|
624
|
-
};
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
// src/index.ts
|
|
628
|
-
var group = {
|
|
629
|
-
connect: groupConnect,
|
|
630
|
-
machine: groupMachine
|
|
631
|
-
};
|
|
632
|
-
function api() {
|
|
633
|
-
if (!isDom()) {
|
|
634
|
-
warn("toast.api() is only available in the browser");
|
|
635
|
-
} else {
|
|
636
|
-
return toaster;
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
export {
|
|
640
|
-
api,
|
|
641
|
-
connect,
|
|
642
|
-
createToastMachine as createMachine,
|
|
643
|
-
group
|
|
644
|
-
};
|