@zag-js/toast 0.1.13 → 0.1.15

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 CHANGED
@@ -181,11 +181,11 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
181
181
  placement: Placement;
182
182
  isVisible: boolean;
183
183
  isPaused: boolean;
184
+ isRtl: boolean;
184
185
  pause(): void;
185
186
  resume(): void;
186
187
  dismiss(): void;
187
188
  rootProps: T["element"];
188
- progressbarProps: T["element"];
189
189
  titleProps: T["element"];
190
190
  descriptionProps: T["element"];
191
191
  closeButtonProps: T["button"];
package/dist/index.js CHANGED
@@ -1,33 +1,4 @@
1
- "use strict";
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.mjs
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
- var import_core = require("@zag-js/core");
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 (0, import_core.subscribe)(state.context.toasts, () => fn(state.context.toasts));
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
- var import_core3 = require("@zag-js/core");
284
+ import { createMachine as createMachine2 } from "@zag-js/core";
314
285
 
315
286
  // src/toast.machine.ts
316
- var import_core2 = require("@zag-js/core");
317
- var { not, and, or } = import_core2.guards;
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 (0, import_core2.createMachine)(
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 (0, import_core3.createMachine)({
439
+ return createMachine2({
469
440
  id: "toaster",
470
441
  initial: "active",
471
442
  context: {
@@ -556,9 +527,6 @@ function groupMachine(ctx) {
556
527
  function connect(state, send, normalize) {
557
528
  const isVisible = state.hasTag("visible");
558
529
  const isPaused = state.hasTag("paused");
559
- const isUpdating = state.hasTag("updating");
560
- const isRtl = state.context.dir === "rtl";
561
- const type = state.context.type;
562
530
  const pauseOnInteraction = state.context.pauseOnInteraction;
563
531
  const placement = state.context.placement;
564
532
  return {
@@ -568,6 +536,7 @@ function connect(state, send, normalize) {
568
536
  placement,
569
537
  isVisible,
570
538
  isPaused,
539
+ isRtl: state.context.dir === "rtl",
571
540
  pause() {
572
541
  send("PAUSE");
573
542
  },
@@ -621,18 +590,6 @@ function connect(state, send, normalize) {
621
590
  }
622
591
  }
623
592
  }),
624
- progressbarProps: normalize.element({
625
- "data-part": "progressbar",
626
- "data-type": state.context.type,
627
- style: {
628
- opacity: isVisible ? 1 : 0,
629
- transformOrigin: isRtl ? "right" : "left",
630
- animationName: isUpdating || type === "loading" ? "none" : void 0,
631
- animationPlayState: isPaused ? "paused" : "running",
632
- animationDuration: `${state.context.duration}ms`,
633
- animationFillMode: isUpdating ? void 0 : "forwards"
634
- }
635
- }),
636
593
  titleProps: normalize.element({
637
594
  "data-part": "title",
638
595
  id: dom.getTitleId(state.context)
@@ -679,10 +636,9 @@ function api() {
679
636
  return toaster;
680
637
  }
681
638
  }
682
- // Annotate the CommonJS export names for ESM import in node:
683
- 0 && (module.exports = {
639
+ export {
684
640
  api,
685
641
  connect,
686
- createMachine,
642
+ createToastMachine as createMachine,
687
643
  group
688
- });
644
+ };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
+ "type": "module",
2
3
  "name": "@zag-js/toast",
3
- "version": "0.1.13",
4
+ "version": "0.1.15",
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.1.9",
33
- "@zag-js/types": "0.2.4"
32
+ "@zag-js/core": "0.1.11",
33
+ "@zag-js/types": "0.2.6"
34
34
  },
35
35
  "devDependencies": {
36
- "@zag-js/dom-utils": "0.1.10",
37
- "@zag-js/utils": "0.1.3"
36
+ "@zag-js/dom-utils": "0.1.12",
37
+ "@zag-js/utils": "0.1.5"
38
38
  },
39
39
  "scripts": {
40
- "build-fast": "tsup src/index.ts --format=esm,cjs",
40
+ "build-fast": "tsup src/index.ts --format=esm",
41
41
  "start": "pnpm build --watch",
42
- "build": "tsup src/index.ts --format=esm,cjs --dts",
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,658 +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 isUpdating = state.hasTag("updating");
531
- const isRtl = state.context.dir === "rtl";
532
- const type = state.context.type;
533
- const pauseOnInteraction = state.context.pauseOnInteraction;
534
- const placement = state.context.placement;
535
- return {
536
- type: state.context.type,
537
- title: state.context.title,
538
- description: state.context.description,
539
- placement,
540
- isVisible,
541
- isPaused,
542
- pause() {
543
- send("PAUSE");
544
- },
545
- resume() {
546
- send("RESUME");
547
- },
548
- dismiss() {
549
- send("DISMISS");
550
- },
551
- rootProps: normalize.element({
552
- "data-part": "root",
553
- dir: state.context.dir,
554
- id: dom.getContainerId(state.context),
555
- "data-open": dataAttr(isVisible),
556
- "data-type": state.context.type,
557
- "data-placement": placement,
558
- role: "status",
559
- "aria-atomic": "true",
560
- tabIndex: 0,
561
- style: {
562
- position: "relative",
563
- pointerEvents: "auto",
564
- margin: "calc(var(--toast-gutter) / 2)",
565
- "--remove-delay": `${state.context.removeDelay}ms`,
566
- "--duration": `${state.context.duration}ms`
567
- },
568
- onKeyDown(event) {
569
- if (event.key == "Escape") {
570
- send("DISMISS");
571
- event.preventDefault();
572
- }
573
- },
574
- onFocus() {
575
- if (pauseOnInteraction) {
576
- send("PAUSE");
577
- }
578
- },
579
- onBlur() {
580
- if (pauseOnInteraction) {
581
- send("RESUME");
582
- }
583
- },
584
- onPointerEnter() {
585
- if (pauseOnInteraction) {
586
- send("PAUSE");
587
- }
588
- },
589
- onPointerLeave() {
590
- if (pauseOnInteraction) {
591
- send("RESUME");
592
- }
593
- }
594
- }),
595
- progressbarProps: normalize.element({
596
- "data-part": "progressbar",
597
- "data-type": state.context.type,
598
- style: {
599
- opacity: isVisible ? 1 : 0,
600
- transformOrigin: isRtl ? "right" : "left",
601
- animationName: isUpdating || type === "loading" ? "none" : void 0,
602
- animationPlayState: isPaused ? "paused" : "running",
603
- animationDuration: `${state.context.duration}ms`,
604
- animationFillMode: isUpdating ? void 0 : "forwards"
605
- }
606
- }),
607
- titleProps: normalize.element({
608
- "data-part": "title",
609
- id: dom.getTitleId(state.context)
610
- }),
611
- descriptionProps: normalize.element({
612
- "data-part": "description",
613
- id: dom.getDescriptionId(state.context)
614
- }),
615
- closeButtonProps: normalize.button({
616
- id: dom.getCloseButtonId(state.context),
617
- "data-part": "close-button",
618
- type: "button",
619
- "aria-label": "Dismiss notification",
620
- onClick() {
621
- send("DISMISS");
622
- }
623
- }),
624
- render() {
625
- var _a, _b;
626
- return (_b = (_a = state.context).render) == null ? void 0 : _b.call(_a, {
627
- id: state.context.id,
628
- type: state.context.type,
629
- duration: state.context.duration,
630
- title: state.context.title,
631
- placement: state.context.placement,
632
- description: state.context.description,
633
- dismiss() {
634
- send("DISMISS");
635
- }
636
- });
637
- }
638
- };
639
- }
640
-
641
- // src/index.ts
642
- var group = {
643
- connect: groupConnect,
644
- machine: groupMachine
645
- };
646
- function api() {
647
- if (!isDom()) {
648
- warn("toast.api() is only available in the browser");
649
- } else {
650
- return toaster;
651
- }
652
- }
653
- export {
654
- api,
655
- connect,
656
- createToastMachine as createMachine,
657
- group
658
- };