@zag-js/toast 0.2.0 → 0.2.2
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.d.ts +2 -2
- package/dist/index.js +41 -30
- package/dist/index.mjs +41 -30
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -170,7 +170,7 @@ declare function groupConnect<T extends PropTypes>(state: GroupState, send: Grou
|
|
|
170
170
|
subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
-
declare function groupMachine(
|
|
173
|
+
declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
|
|
174
174
|
|
|
175
175
|
declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
176
176
|
|
|
@@ -198,4 +198,4 @@ declare const group: {
|
|
|
198
198
|
};
|
|
199
199
|
declare function api(): Toaster | undefined;
|
|
200
200
|
|
|
201
|
-
export { GroupMachineContext, MachineContext, MachineState, Placement, Service, Type, api, connect, createToastMachine as createMachine, group };
|
|
201
|
+
export { GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, api, connect, createToastMachine as createMachine, group };
|
package/dist/index.js
CHANGED
|
@@ -118,6 +118,15 @@ var uuid = /* @__PURE__ */ (() => {
|
|
|
118
118
|
return id.toString(36);
|
|
119
119
|
};
|
|
120
120
|
})();
|
|
121
|
+
var isArray = (v) => Array.isArray(v);
|
|
122
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
123
|
+
function compact(obj) {
|
|
124
|
+
if (obj === void 0)
|
|
125
|
+
return obj;
|
|
126
|
+
return Object.fromEntries(
|
|
127
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
128
|
+
);
|
|
129
|
+
}
|
|
121
130
|
function warn(...a) {
|
|
122
131
|
const m = a.length === 1 ? a[0] : a[1];
|
|
123
132
|
const c = a.length === 2 ? a[0] : true;
|
|
@@ -338,8 +347,9 @@ var import_core3 = require("@zag-js/core");
|
|
|
338
347
|
var import_core2 = require("@zag-js/core");
|
|
339
348
|
var { not, and, or } = import_core2.guards;
|
|
340
349
|
function createToastMachine(options = {}) {
|
|
341
|
-
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...
|
|
342
|
-
const
|
|
350
|
+
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...restProps } = options;
|
|
351
|
+
const ctx = compact(restProps);
|
|
352
|
+
const computedDuration = getToastDuration(duration, type);
|
|
343
353
|
return (0, import_core2.createMachine)(
|
|
344
354
|
{
|
|
345
355
|
id,
|
|
@@ -348,12 +358,12 @@ function createToastMachine(options = {}) {
|
|
|
348
358
|
context: {
|
|
349
359
|
id,
|
|
350
360
|
type,
|
|
351
|
-
remaining:
|
|
352
|
-
duration:
|
|
361
|
+
remaining: computedDuration,
|
|
362
|
+
duration: computedDuration,
|
|
353
363
|
removeDelay,
|
|
354
364
|
createdAt: Date.now(),
|
|
355
365
|
placement,
|
|
356
|
-
...
|
|
366
|
+
...ctx
|
|
357
367
|
},
|
|
358
368
|
on: {
|
|
359
369
|
UPDATE: [
|
|
@@ -422,10 +432,10 @@ function createToastMachine(options = {}) {
|
|
|
422
432
|
},
|
|
423
433
|
{
|
|
424
434
|
activities: {
|
|
425
|
-
trackDocumentVisibility(
|
|
426
|
-
if (!
|
|
435
|
+
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
436
|
+
if (!ctx2.pauseOnPageIdle)
|
|
427
437
|
return;
|
|
428
|
-
return trackDocumentVisibility(dom.getDoc(
|
|
438
|
+
return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
|
|
429
439
|
send(hidden ? "PAUSE" : "RESUME");
|
|
430
440
|
});
|
|
431
441
|
}
|
|
@@ -435,50 +445,50 @@ function createToastMachine(options = {}) {
|
|
|
435
445
|
var _a;
|
|
436
446
|
return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
|
|
437
447
|
},
|
|
438
|
-
isLoadingType: (
|
|
439
|
-
hasTypeChanged: (
|
|
448
|
+
isLoadingType: (ctx2) => ctx2.type === "loading",
|
|
449
|
+
hasTypeChanged: (ctx2, evt) => {
|
|
440
450
|
var _a;
|
|
441
|
-
return ((_a = evt.toast) == null ? void 0 : _a.type) !==
|
|
451
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx2.type;
|
|
442
452
|
},
|
|
443
|
-
hasDurationChanged: (
|
|
453
|
+
hasDurationChanged: (ctx2, evt) => {
|
|
444
454
|
var _a;
|
|
445
|
-
return ((_a = evt.toast) == null ? void 0 : _a.duration) !==
|
|
455
|
+
return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx2.duration;
|
|
446
456
|
}
|
|
447
457
|
},
|
|
448
458
|
delays: {
|
|
449
|
-
VISIBLE_DURATION: (
|
|
450
|
-
REMOVE_DELAY: (
|
|
459
|
+
VISIBLE_DURATION: (ctx2) => ctx2.remaining,
|
|
460
|
+
REMOVE_DELAY: (ctx2) => ctx2.removeDelay
|
|
451
461
|
},
|
|
452
462
|
actions: {
|
|
453
|
-
setRemainingDuration(
|
|
454
|
-
|
|
463
|
+
setRemainingDuration(ctx2) {
|
|
464
|
+
ctx2.remaining -= Date.now() - ctx2.createdAt;
|
|
455
465
|
},
|
|
456
|
-
setCreatedAt(
|
|
457
|
-
|
|
466
|
+
setCreatedAt(ctx2) {
|
|
467
|
+
ctx2.createdAt = Date.now();
|
|
458
468
|
},
|
|
459
469
|
notifyParentToRemove(_ctx, _evt, { self }) {
|
|
460
470
|
self.sendParent({ type: "REMOVE_TOAST", id: self.id });
|
|
461
471
|
},
|
|
462
|
-
invokeOnClosing(
|
|
472
|
+
invokeOnClosing(ctx2) {
|
|
463
473
|
var _a;
|
|
464
|
-
(_a =
|
|
474
|
+
(_a = ctx2.onClosing) == null ? void 0 : _a.call(ctx2);
|
|
465
475
|
},
|
|
466
|
-
invokeOnClose(
|
|
476
|
+
invokeOnClose(ctx2) {
|
|
467
477
|
var _a;
|
|
468
|
-
(_a =
|
|
478
|
+
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
469
479
|
},
|
|
470
|
-
invokeOnOpen(
|
|
480
|
+
invokeOnOpen(ctx2) {
|
|
471
481
|
var _a;
|
|
472
|
-
(_a =
|
|
482
|
+
(_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
|
|
473
483
|
},
|
|
474
|
-
invokeOnUpdate(
|
|
484
|
+
invokeOnUpdate(ctx2) {
|
|
475
485
|
var _a;
|
|
476
|
-
(_a =
|
|
486
|
+
(_a = ctx2.onUpdate) == null ? void 0 : _a.call(ctx2);
|
|
477
487
|
},
|
|
478
|
-
setContext(
|
|
488
|
+
setContext(ctx2, evt) {
|
|
479
489
|
const { duration: duration2, type: type2 } = evt.toast;
|
|
480
490
|
const time = getToastDuration(duration2, type2);
|
|
481
|
-
Object.assign(
|
|
491
|
+
Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
|
|
482
492
|
}
|
|
483
493
|
}
|
|
484
494
|
}
|
|
@@ -486,7 +496,8 @@ function createToastMachine(options = {}) {
|
|
|
486
496
|
}
|
|
487
497
|
|
|
488
498
|
// src/toast-group.machine.ts
|
|
489
|
-
function groupMachine(
|
|
499
|
+
function groupMachine(userContext) {
|
|
500
|
+
const ctx = compact(userContext);
|
|
490
501
|
return (0, import_core3.createMachine)({
|
|
491
502
|
id: "toaster",
|
|
492
503
|
initial: "active",
|
package/dist/index.mjs
CHANGED
|
@@ -89,6 +89,15 @@ var uuid = /* @__PURE__ */ (() => {
|
|
|
89
89
|
return id.toString(36);
|
|
90
90
|
};
|
|
91
91
|
})();
|
|
92
|
+
var isArray = (v) => Array.isArray(v);
|
|
93
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
94
|
+
function compact(obj) {
|
|
95
|
+
if (obj === void 0)
|
|
96
|
+
return obj;
|
|
97
|
+
return Object.fromEntries(
|
|
98
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
99
|
+
);
|
|
100
|
+
}
|
|
92
101
|
function warn(...a) {
|
|
93
102
|
const m = a.length === 1 ? a[0] : a[1];
|
|
94
103
|
const c = a.length === 2 ? a[0] : true;
|
|
@@ -309,8 +318,9 @@ import { createMachine as createMachine2 } from "@zag-js/core";
|
|
|
309
318
|
import { createMachine, guards } from "@zag-js/core";
|
|
310
319
|
var { not, and, or } = guards;
|
|
311
320
|
function createToastMachine(options = {}) {
|
|
312
|
-
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...
|
|
313
|
-
const
|
|
321
|
+
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...restProps } = options;
|
|
322
|
+
const ctx = compact(restProps);
|
|
323
|
+
const computedDuration = getToastDuration(duration, type);
|
|
314
324
|
return createMachine(
|
|
315
325
|
{
|
|
316
326
|
id,
|
|
@@ -319,12 +329,12 @@ function createToastMachine(options = {}) {
|
|
|
319
329
|
context: {
|
|
320
330
|
id,
|
|
321
331
|
type,
|
|
322
|
-
remaining:
|
|
323
|
-
duration:
|
|
332
|
+
remaining: computedDuration,
|
|
333
|
+
duration: computedDuration,
|
|
324
334
|
removeDelay,
|
|
325
335
|
createdAt: Date.now(),
|
|
326
336
|
placement,
|
|
327
|
-
...
|
|
337
|
+
...ctx
|
|
328
338
|
},
|
|
329
339
|
on: {
|
|
330
340
|
UPDATE: [
|
|
@@ -393,10 +403,10 @@ function createToastMachine(options = {}) {
|
|
|
393
403
|
},
|
|
394
404
|
{
|
|
395
405
|
activities: {
|
|
396
|
-
trackDocumentVisibility(
|
|
397
|
-
if (!
|
|
406
|
+
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
407
|
+
if (!ctx2.pauseOnPageIdle)
|
|
398
408
|
return;
|
|
399
|
-
return trackDocumentVisibility(dom.getDoc(
|
|
409
|
+
return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
|
|
400
410
|
send(hidden ? "PAUSE" : "RESUME");
|
|
401
411
|
});
|
|
402
412
|
}
|
|
@@ -406,50 +416,50 @@ function createToastMachine(options = {}) {
|
|
|
406
416
|
var _a;
|
|
407
417
|
return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
|
|
408
418
|
},
|
|
409
|
-
isLoadingType: (
|
|
410
|
-
hasTypeChanged: (
|
|
419
|
+
isLoadingType: (ctx2) => ctx2.type === "loading",
|
|
420
|
+
hasTypeChanged: (ctx2, evt) => {
|
|
411
421
|
var _a;
|
|
412
|
-
return ((_a = evt.toast) == null ? void 0 : _a.type) !==
|
|
422
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx2.type;
|
|
413
423
|
},
|
|
414
|
-
hasDurationChanged: (
|
|
424
|
+
hasDurationChanged: (ctx2, evt) => {
|
|
415
425
|
var _a;
|
|
416
|
-
return ((_a = evt.toast) == null ? void 0 : _a.duration) !==
|
|
426
|
+
return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx2.duration;
|
|
417
427
|
}
|
|
418
428
|
},
|
|
419
429
|
delays: {
|
|
420
|
-
VISIBLE_DURATION: (
|
|
421
|
-
REMOVE_DELAY: (
|
|
430
|
+
VISIBLE_DURATION: (ctx2) => ctx2.remaining,
|
|
431
|
+
REMOVE_DELAY: (ctx2) => ctx2.removeDelay
|
|
422
432
|
},
|
|
423
433
|
actions: {
|
|
424
|
-
setRemainingDuration(
|
|
425
|
-
|
|
434
|
+
setRemainingDuration(ctx2) {
|
|
435
|
+
ctx2.remaining -= Date.now() - ctx2.createdAt;
|
|
426
436
|
},
|
|
427
|
-
setCreatedAt(
|
|
428
|
-
|
|
437
|
+
setCreatedAt(ctx2) {
|
|
438
|
+
ctx2.createdAt = Date.now();
|
|
429
439
|
},
|
|
430
440
|
notifyParentToRemove(_ctx, _evt, { self }) {
|
|
431
441
|
self.sendParent({ type: "REMOVE_TOAST", id: self.id });
|
|
432
442
|
},
|
|
433
|
-
invokeOnClosing(
|
|
443
|
+
invokeOnClosing(ctx2) {
|
|
434
444
|
var _a;
|
|
435
|
-
(_a =
|
|
445
|
+
(_a = ctx2.onClosing) == null ? void 0 : _a.call(ctx2);
|
|
436
446
|
},
|
|
437
|
-
invokeOnClose(
|
|
447
|
+
invokeOnClose(ctx2) {
|
|
438
448
|
var _a;
|
|
439
|
-
(_a =
|
|
449
|
+
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
440
450
|
},
|
|
441
|
-
invokeOnOpen(
|
|
451
|
+
invokeOnOpen(ctx2) {
|
|
442
452
|
var _a;
|
|
443
|
-
(_a =
|
|
453
|
+
(_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
|
|
444
454
|
},
|
|
445
|
-
invokeOnUpdate(
|
|
455
|
+
invokeOnUpdate(ctx2) {
|
|
446
456
|
var _a;
|
|
447
|
-
(_a =
|
|
457
|
+
(_a = ctx2.onUpdate) == null ? void 0 : _a.call(ctx2);
|
|
448
458
|
},
|
|
449
|
-
setContext(
|
|
459
|
+
setContext(ctx2, evt) {
|
|
450
460
|
const { duration: duration2, type: type2 } = evt.toast;
|
|
451
461
|
const time = getToastDuration(duration2, type2);
|
|
452
|
-
Object.assign(
|
|
462
|
+
Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
|
|
453
463
|
}
|
|
454
464
|
}
|
|
455
465
|
}
|
|
@@ -457,7 +467,8 @@ function createToastMachine(options = {}) {
|
|
|
457
467
|
}
|
|
458
468
|
|
|
459
469
|
// src/toast-group.machine.ts
|
|
460
|
-
function groupMachine(
|
|
470
|
+
function groupMachine(userContext) {
|
|
471
|
+
const ctx = compact(userContext);
|
|
461
472
|
return createMachine2({
|
|
462
473
|
id: "toaster",
|
|
463
474
|
initial: "active",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/toast",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Core logic for the toast widget implemented as a state machine",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.2.
|
|
32
|
+
"@zag-js/core": "0.2.1",
|
|
33
33
|
"@zag-js/types": "0.3.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@zag-js/dom-utils": "0.2.0",
|
|
37
|
-
"@zag-js/utils": "0.
|
|
37
|
+
"@zag-js/utils": "0.3.0"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
40
|
"build-fast": "tsup src/index.ts --format=esm,cjs",
|