@zag-js/toast 0.1.10 → 0.1.13

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 CHANGED
@@ -1,37 +1,8 @@
1
1
  "use strict";
2
2
  var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
- var __spreadValues = (a, b) => {
12
- for (var prop in b || (b = {}))
13
- if (__hasOwnProp.call(b, prop))
14
- __defNormalProp(a, prop, b[prop]);
15
- if (__getOwnPropSymbols)
16
- for (var prop of __getOwnPropSymbols(b)) {
17
- if (__propIsEnum.call(b, prop))
18
- __defNormalProp(a, prop, b[prop]);
19
- }
20
- return a;
21
- };
22
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
23
- var __objRest = (source, exclude) => {
24
- var target = {};
25
- for (var prop in source)
26
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
27
- target[prop] = source[prop];
28
- if (source != null && __getOwnPropSymbols)
29
- for (var prop of __getOwnPropSymbols(source)) {
30
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
31
- target[prop] = source[prop];
32
- }
33
- return target;
34
- };
35
6
  var __export = (target, all) => {
36
7
  for (var name in all)
37
8
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -57,29 +28,13 @@ __export(src_exports, {
57
28
  module.exports = __toCommonJS(src_exports);
58
29
 
59
30
  // ../../utilities/dom/dist/index.mjs
60
- var __defProp2 = Object.defineProperty;
61
- var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
62
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
63
- var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
64
- var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
65
- var __spreadValues2 = (a, b) => {
66
- for (var prop in b || (b = {}))
67
- if (__hasOwnProp2.call(b, prop))
68
- __defNormalProp2(a, prop, b[prop]);
69
- if (__getOwnPropSymbols2)
70
- for (var prop of __getOwnPropSymbols2(b)) {
71
- if (__propIsEnum2.call(b, prop))
72
- __defNormalProp2(a, prop, b[prop]);
73
- }
74
- return a;
75
- };
76
31
  var dataAttr = (guard) => {
77
32
  return guard ? "" : void 0;
78
33
  };
79
34
  var MAX_Z_INDEX = 2147483647;
80
35
  var runIfFn = (v, ...a) => {
81
36
  const res = typeof v === "function" ? v(...a) : v;
82
- return res != null ? res : void 0;
37
+ return res ?? void 0;
83
38
  };
84
39
  var cast = (v) => v;
85
40
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
@@ -91,28 +46,27 @@ function isWindow(value) {
91
46
  return (value == null ? void 0 : value.toString()) === "[object Window]";
92
47
  }
93
48
  function getDocument(el) {
94
- var _a;
95
49
  if (isWindow(el))
96
50
  return el.document;
97
51
  if (isDocument(el))
98
52
  return el;
99
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
53
+ return (el == null ? void 0 : el.ownerDocument) ?? document;
100
54
  }
101
55
  function defineDomHelpers(helpers) {
102
56
  const dom2 = {
103
57
  getRootNode: (ctx) => {
104
- var _a, _b;
105
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
106
- },
107
- getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
108
- getWin: (ctx) => {
109
58
  var _a;
110
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
59
+ return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
111
60
  },
61
+ getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
62
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
112
63
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
113
64
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
114
65
  };
115
- return __spreadValues2(__spreadValues2({}, dom2), helpers);
66
+ return {
67
+ ...dom2,
68
+ ...helpers
69
+ };
116
70
  }
117
71
  var isRef = (v) => hasProp(v, "current");
118
72
  function addDomEvent(target, eventName, handler, options) {
@@ -133,7 +87,7 @@ function trackDocumentVisibility(_doc, callback) {
133
87
  // ../../utilities/core/dist/index.mjs
134
88
  var runIfFn2 = (v, ...a) => {
135
89
  const res = typeof v === "function" ? v(...a) : v;
136
- return res != null ? res : void 0;
90
+ return res ?? void 0;
137
91
  };
138
92
  var uuid = /* @__PURE__ */ (() => {
139
93
  let id = 0;
@@ -145,7 +99,7 @@ var uuid = /* @__PURE__ */ (() => {
145
99
  function warn(...a) {
146
100
  const m = a.length === 1 ? a[0] : a[1];
147
101
  const c = a.length === 2 ? a[0] : true;
148
- if (c && void 0 !== "production") {
102
+ if (c && process.env.NODE_ENV !== "production") {
149
103
  console.warn(m);
150
104
  }
151
105
  }
@@ -158,6 +112,7 @@ var dom = defineDomHelpers({
158
112
  getGroupId: (placement) => `toast-group:${placement}`,
159
113
  getContainerId: (ctx) => `toast:${ctx.id}`,
160
114
  getTitleId: (ctx) => `toast-title:${ctx.id}`,
115
+ getDescriptionId: (ctx) => `toast-description:${ctx.id}`,
161
116
  getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
162
117
  getPortalId: (ctx) => `toast-portal:${ctx.id}`,
163
118
  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
@@ -189,7 +144,7 @@ var defaultTimeouts = {
189
144
  custom: 5e3
190
145
  };
191
146
  function getToastDuration(duration, type) {
192
- return duration != null ? duration : defaultTimeouts[type];
147
+ return duration ?? defaultTimeouts[type];
193
148
  }
194
149
  function getGroupPlacementStyle(ctx, placement) {
195
150
  const offset = ctx.offsets;
@@ -248,7 +203,7 @@ function groupConnect(state, send, normalize) {
248
203
  const id = options.id ? options.id : uid;
249
204
  if (group2.isVisible(id))
250
205
  return;
251
- send({ type: "ADD_TOAST", toast: __spreadProps(__spreadValues({}, options), { id }) });
206
+ send({ type: "ADD_TOAST", toast: { ...options, id } });
252
207
  return id;
253
208
  },
254
209
  upsert(options) {
@@ -299,13 +254,13 @@ function groupConnect(state, send, normalize) {
299
254
  return group2.upsert(options);
300
255
  },
301
256
  promise(promise, options, shared = {}) {
302
- const id = group2.loading(__spreadValues(__spreadValues({}, shared), options.loading));
257
+ const id = group2.loading({ ...shared, ...options.loading });
303
258
  promise.then((response) => {
304
259
  const successOptions = runIfFn2(options.success, response);
305
- group2.success(__spreadProps(__spreadValues(__spreadValues({}, shared), successOptions), { id }));
260
+ group2.success({ ...shared, ...successOptions, id });
306
261
  }).catch((error) => {
307
262
  const errorOptions = runIfFn2(options.error, error);
308
- group2.error(__spreadProps(__spreadValues(__spreadValues({}, shared), errorOptions), { id }));
263
+ group2.error({ ...shared, ...errorOptions, id });
309
264
  });
310
265
  return promise;
311
266
  },
@@ -361,147 +316,151 @@ var import_core3 = require("@zag-js/core");
361
316
  var import_core2 = require("@zag-js/core");
362
317
  var { not, and, or } = import_core2.guards;
363
318
  function createToastMachine(options = {}) {
364
- const _a = options, { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500 } = _a, rest = __objRest(_a, ["type", "duration", "id", "placement", "removeDelay"]);
319
+ const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
365
320
  const __duration = getToastDuration(duration, type);
366
- return (0, import_core2.createMachine)({
367
- id,
368
- entry: "invokeOnOpen",
369
- initial: type === "loading" ? "persist" : "active",
370
- context: __spreadValues({
321
+ return (0, import_core2.createMachine)(
322
+ {
371
323
  id,
372
- type,
373
- remaining: __duration,
374
- duration: __duration,
375
- removeDelay,
376
- createdAt: Date.now(),
377
- placement
378
- }, rest),
379
- on: {
380
- UPDATE: [
381
- {
382
- guard: and("hasTypeChanged", "isChangingToLoading"),
383
- target: "persist",
384
- actions: ["setContext", "invokeOnUpdate"]
385
- },
386
- {
387
- guard: or("hasDurationChanged", "hasTypeChanged"),
388
- target: "active:temp",
389
- actions: ["setContext", "invokeOnUpdate"]
390
- },
391
- {
392
- actions: ["setContext", "invokeOnUpdate"]
393
- }
394
- ]
395
- },
396
- states: {
397
- "active:temp": {
398
- tags: ["visible", "updating"],
399
- after: {
400
- 0: "active"
401
- }
324
+ entry: "invokeOnOpen",
325
+ initial: type === "loading" ? "persist" : "active",
326
+ context: {
327
+ id,
328
+ type,
329
+ remaining: __duration,
330
+ duration: __duration,
331
+ removeDelay,
332
+ createdAt: Date.now(),
333
+ placement,
334
+ ...rest
402
335
  },
403
- persist: {
404
- tags: ["visible", "paused"],
405
- activities: "trackDocumentVisibility",
406
- on: {
407
- RESUME: {
408
- guard: not("isLoadingType"),
409
- target: "active",
410
- actions: ["setCreatedAt"]
336
+ on: {
337
+ UPDATE: [
338
+ {
339
+ guard: and("hasTypeChanged", "isChangingToLoading"),
340
+ target: "persist",
341
+ actions: ["setContext", "invokeOnUpdate"]
411
342
  },
412
- DISMISS: "dismissing"
413
- }
343
+ {
344
+ guard: or("hasDurationChanged", "hasTypeChanged"),
345
+ target: "active:temp",
346
+ actions: ["setContext", "invokeOnUpdate"]
347
+ },
348
+ {
349
+ actions: ["setContext", "invokeOnUpdate"]
350
+ }
351
+ ]
414
352
  },
415
- active: {
416
- tags: ["visible"],
417
- activities: "trackDocumentVisibility",
418
- after: {
419
- VISIBLE_DURATION: "dismissing"
353
+ states: {
354
+ "active:temp": {
355
+ tags: ["visible", "updating"],
356
+ after: {
357
+ 0: "active"
358
+ }
420
359
  },
421
- on: {
422
- DISMISS: "dismissing",
423
- PAUSE: {
424
- target: "persist",
425
- actions: "setRemainingDuration"
360
+ persist: {
361
+ tags: ["visible", "paused"],
362
+ activities: "trackDocumentVisibility",
363
+ on: {
364
+ RESUME: {
365
+ guard: not("isLoadingType"),
366
+ target: "active",
367
+ actions: ["setCreatedAt"]
368
+ },
369
+ DISMISS: "dismissing"
426
370
  }
427
- }
428
- },
429
- dismissing: {
430
- entry: "invokeOnClosing",
431
- after: {
432
- REMOVE_DELAY: {
433
- target: "inactive",
434
- actions: "notifyParentToRemove"
371
+ },
372
+ active: {
373
+ tags: ["visible"],
374
+ activities: "trackDocumentVisibility",
375
+ after: {
376
+ VISIBLE_DURATION: "dismissing"
377
+ },
378
+ on: {
379
+ DISMISS: "dismissing",
380
+ PAUSE: {
381
+ target: "persist",
382
+ actions: "setRemainingDuration"
383
+ }
384
+ }
385
+ },
386
+ dismissing: {
387
+ entry: "invokeOnClosing",
388
+ after: {
389
+ REMOVE_DELAY: {
390
+ target: "inactive",
391
+ actions: "notifyParentToRemove"
392
+ }
435
393
  }
394
+ },
395
+ inactive: {
396
+ entry: "invokeOnClose",
397
+ type: "final"
436
398
  }
437
- },
438
- inactive: {
439
- entry: "invokeOnClose",
440
- type: "final"
441
- }
442
- }
443
- }, {
444
- activities: {
445
- trackDocumentVisibility(ctx, _evt, { send }) {
446
- if (!ctx.pauseOnPageIdle)
447
- return;
448
- return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
449
- send(hidden ? "PAUSE" : "RESUME");
450
- });
451
399
  }
452
400
  },
453
- guards: {
454
- isChangingToLoading: (_, evt) => {
455
- var _a2;
456
- return ((_a2 = evt.toast) == null ? void 0 : _a2.type) === "loading";
457
- },
458
- isLoadingType: (ctx) => ctx.type === "loading",
459
- hasTypeChanged: (ctx, evt) => {
460
- var _a2;
461
- return ((_a2 = evt.toast) == null ? void 0 : _a2.type) !== ctx.type;
462
- },
463
- hasDurationChanged: (ctx, evt) => {
464
- var _a2;
465
- return ((_a2 = evt.toast) == null ? void 0 : _a2.duration) !== ctx.duration;
466
- }
467
- },
468
- delays: {
469
- VISIBLE_DURATION: (ctx) => ctx.remaining,
470
- REMOVE_DELAY: (ctx) => ctx.removeDelay
471
- },
472
- actions: {
473
- setRemainingDuration(ctx) {
474
- ctx.remaining -= Date.now() - ctx.createdAt;
475
- },
476
- setCreatedAt(ctx) {
477
- ctx.createdAt = Date.now();
478
- },
479
- notifyParentToRemove(_ctx, _evt, { self }) {
480
- self.sendParent({ type: "REMOVE_TOAST", id: self.id });
481
- },
482
- invokeOnClosing(ctx) {
483
- var _a2;
484
- (_a2 = ctx.onClosing) == null ? void 0 : _a2.call(ctx);
485
- },
486
- invokeOnClose(ctx) {
487
- var _a2;
488
- (_a2 = ctx.onClose) == null ? void 0 : _a2.call(ctx);
401
+ {
402
+ activities: {
403
+ trackDocumentVisibility(ctx, _evt, { send }) {
404
+ if (!ctx.pauseOnPageIdle)
405
+ return;
406
+ return trackDocumentVisibility(dom.getDoc(ctx), function(hidden) {
407
+ send(hidden ? "PAUSE" : "RESUME");
408
+ });
409
+ }
489
410
  },
490
- invokeOnOpen(ctx) {
491
- var _a2;
492
- (_a2 = ctx.onOpen) == null ? void 0 : _a2.call(ctx);
411
+ guards: {
412
+ isChangingToLoading: (_, evt) => {
413
+ var _a;
414
+ return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
415
+ },
416
+ isLoadingType: (ctx) => ctx.type === "loading",
417
+ hasTypeChanged: (ctx, evt) => {
418
+ var _a;
419
+ return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
420
+ },
421
+ hasDurationChanged: (ctx, evt) => {
422
+ var _a;
423
+ return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
424
+ }
493
425
  },
494
- invokeOnUpdate(ctx) {
495
- var _a2;
496
- (_a2 = ctx.onUpdate) == null ? void 0 : _a2.call(ctx);
426
+ delays: {
427
+ VISIBLE_DURATION: (ctx) => ctx.remaining,
428
+ REMOVE_DELAY: (ctx) => ctx.removeDelay
497
429
  },
498
- setContext(ctx, evt) {
499
- const { duration: duration2, type: type2 } = evt.toast;
500
- const time = getToastDuration(duration2, type2);
501
- Object.assign(ctx, __spreadProps(__spreadValues({}, evt.toast), { duration: time, remaining: time }));
430
+ actions: {
431
+ setRemainingDuration(ctx) {
432
+ ctx.remaining -= Date.now() - ctx.createdAt;
433
+ },
434
+ setCreatedAt(ctx) {
435
+ ctx.createdAt = Date.now();
436
+ },
437
+ notifyParentToRemove(_ctx, _evt, { self }) {
438
+ self.sendParent({ type: "REMOVE_TOAST", id: self.id });
439
+ },
440
+ invokeOnClosing(ctx) {
441
+ var _a;
442
+ (_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
443
+ },
444
+ invokeOnClose(ctx) {
445
+ var _a;
446
+ (_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
447
+ },
448
+ invokeOnOpen(ctx) {
449
+ var _a;
450
+ (_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
451
+ },
452
+ invokeOnUpdate(ctx) {
453
+ var _a;
454
+ (_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
455
+ },
456
+ setContext(ctx, evt) {
457
+ const { duration: duration2, type: type2 } = evt.toast;
458
+ const time = getToastDuration(duration2, type2);
459
+ Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
460
+ }
502
461
  }
503
462
  }
504
- });
463
+ );
505
464
  }
506
465
 
507
466
  // src/toast-group.machine.ts
@@ -509,7 +468,7 @@ function groupMachine(ctx) {
509
468
  return (0, import_core3.createMachine)({
510
469
  id: "toaster",
511
470
  initial: "active",
512
- context: __spreadValues({
471
+ context: {
513
472
  dir: "ltr",
514
473
  max: Number.MAX_SAFE_INTEGER,
515
474
  toasts: [],
@@ -517,8 +476,9 @@ function groupMachine(ctx) {
517
476
  zIndex: MAX_Z_INDEX,
518
477
  pauseOnPageIdle: false,
519
478
  pauseOnInteraction: true,
520
- offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
521
- }, ctx),
479
+ offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
480
+ ...ctx
481
+ },
522
482
  computed: {
523
483
  count: (ctx2) => ctx2.toasts.length
524
484
  },
@@ -547,13 +507,13 @@ function groupMachine(ctx) {
547
507
  ADD_TOAST: {
548
508
  guard: (ctx2) => ctx2.toasts.length < ctx2.max,
549
509
  actions: (ctx2, evt, { self }) => {
550
- var _a;
551
- const options = __spreadProps(__spreadValues({}, evt.toast), {
510
+ const options = {
511
+ ...evt.toast,
552
512
  pauseOnPageIdle: ctx2.pauseOnPageIdle,
553
513
  pauseOnInteraction: ctx2.pauseOnInteraction,
554
514
  dir: ctx2.dir,
555
- doc: (0, import_core3.ref)((_a = ctx2.doc) != null ? _a : document)
556
- });
515
+ getRootNode: ctx2.getRootNode
516
+ };
557
517
  const toast = createToastMachine(options);
558
518
  const actor = self.spawn(toast);
559
519
  ctx2.toasts.push(actor);
@@ -604,6 +564,7 @@ function connect(state, send, normalize) {
604
564
  return {
605
565
  type: state.context.type,
606
566
  title: state.context.title,
567
+ description: state.context.description,
607
568
  placement,
608
569
  isVisible,
609
570
  isPaused,
@@ -676,6 +637,10 @@ function connect(state, send, normalize) {
676
637
  "data-part": "title",
677
638
  id: dom.getTitleId(state.context)
678
639
  }),
640
+ descriptionProps: normalize.element({
641
+ "data-part": "description",
642
+ id: dom.getDescriptionId(state.context)
643
+ }),
679
644
  closeButtonProps: normalize.button({
680
645
  id: dom.getCloseButtonId(state.context),
681
646
  "data-part": "close-button",
@@ -714,3 +679,10 @@ function api() {
714
679
  return toaster;
715
680
  }
716
681
  }
682
+ // Annotate the CommonJS export names for ESM import in node:
683
+ 0 && (module.exports = {
684
+ api,
685
+ connect,
686
+ createMachine,
687
+ group
688
+ });