@zag-js/toast 0.10.2 → 0.10.4

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.
@@ -1,66 +0,0 @@
1
- // src/toast.utils.ts
2
- function getToastsByPlacement(toasts) {
3
- const result = {};
4
- for (const toast of toasts) {
5
- const placement = toast.state.context.placement;
6
- result[placement] || (result[placement] = []);
7
- result[placement].push(toast);
8
- }
9
- return result;
10
- }
11
- var defaultTimeouts = {
12
- info: 5e3,
13
- error: 5e3,
14
- success: 2e3,
15
- loading: Infinity,
16
- custom: 5e3
17
- };
18
- function getToastDuration(duration, type) {
19
- return duration ?? defaultTimeouts[type];
20
- }
21
- function getGroupPlacementStyle(ctx, placement) {
22
- const offset = ctx.offsets;
23
- const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
24
- const rtl = ctx.dir === "rtl";
25
- const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
26
- const isRighty = computedPlacement.includes("right");
27
- const isLefty = computedPlacement.includes("left");
28
- const styles = {
29
- position: "fixed",
30
- pointerEvents: ctx.count > 0 ? void 0 : "none",
31
- display: "flex",
32
- flexDirection: "column",
33
- "--toast-gutter": ctx.gutter,
34
- zIndex: ctx.zIndex
35
- };
36
- let alignItems = "center";
37
- if (isRighty)
38
- alignItems = "flex-end";
39
- if (isLefty)
40
- alignItems = "flex-start";
41
- styles.alignItems = alignItems;
42
- if (computedPlacement.includes("top")) {
43
- const offset2 = computedOffset.top;
44
- styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
45
- }
46
- if (computedPlacement.includes("bottom")) {
47
- const offset2 = computedOffset.bottom;
48
- styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
49
- }
50
- if (!computedPlacement.includes("left")) {
51
- const offset2 = computedOffset.right;
52
- styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
53
- }
54
- if (!computedPlacement.includes("right")) {
55
- const offset2 = computedOffset.left;
56
- styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
57
- }
58
- return styles;
59
- }
60
-
61
- export {
62
- getToastsByPlacement,
63
- defaultTimeouts,
64
- getToastDuration,
65
- getGroupPlacementStyle
66
- };
@@ -1,14 +0,0 @@
1
- // src/toast.dom.ts
2
- import { createScope } from "@zag-js/dom-query";
3
- var dom = createScope({
4
- getGroupId: (placement) => `toast-group:${placement}`,
5
- getRootId: (ctx) => `toast:${ctx.id}`,
6
- getTitleId: (ctx) => `toast:${ctx.id}:title`,
7
- getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
8
- getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
9
- getPortalId: (ctx) => `toast-portal:${ctx.id}`
10
- });
11
-
12
- export {
13
- dom
14
- };
@@ -1,152 +0,0 @@
1
- import {
2
- getToastDuration
3
- } from "./chunk-DBPKSADW.mjs";
4
- import {
5
- dom
6
- } from "./chunk-DUZD3NLM.mjs";
7
-
8
- // src/toast.machine.ts
9
- import { createMachine, guards } from "@zag-js/core";
10
- import { addDomEvent } from "@zag-js/dom-event";
11
- import { compact } from "@zag-js/utils";
12
- var { not, and, or } = guards;
13
- function createToastMachine(options = {}) {
14
- const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
15
- const ctx = compact(restProps);
16
- const computedDuration = getToastDuration(duration, type);
17
- return createMachine(
18
- {
19
- id,
20
- entry: "invokeOnOpen",
21
- initial: type === "loading" ? "persist" : "active",
22
- context: {
23
- id,
24
- type,
25
- remaining: computedDuration,
26
- duration: computedDuration,
27
- removeDelay,
28
- createdAt: Date.now(),
29
- placement,
30
- ...ctx
31
- },
32
- on: {
33
- UPDATE: [
34
- {
35
- guard: and("hasTypeChanged", "isChangingToLoading"),
36
- target: "persist",
37
- actions: ["setContext", "invokeOnUpdate"]
38
- },
39
- {
40
- guard: or("hasDurationChanged", "hasTypeChanged"),
41
- target: "active:temp",
42
- actions: ["setContext", "invokeOnUpdate"]
43
- },
44
- {
45
- actions: ["setContext", "invokeOnUpdate"]
46
- }
47
- ]
48
- },
49
- states: {
50
- "active:temp": {
51
- tags: ["visible", "updating"],
52
- after: {
53
- 0: "active"
54
- }
55
- },
56
- persist: {
57
- tags: ["visible", "paused"],
58
- activities: "trackDocumentVisibility",
59
- on: {
60
- RESUME: {
61
- guard: not("isLoadingType"),
62
- target: "active",
63
- actions: ["setCreatedAt"]
64
- },
65
- DISMISS: "dismissing"
66
- }
67
- },
68
- active: {
69
- tags: ["visible"],
70
- activities: "trackDocumentVisibility",
71
- after: {
72
- VISIBLE_DURATION: "dismissing"
73
- },
74
- on: {
75
- DISMISS: "dismissing",
76
- PAUSE: {
77
- target: "persist",
78
- actions: "setRemainingDuration"
79
- }
80
- }
81
- },
82
- dismissing: {
83
- entry: "invokeOnClosing",
84
- after: {
85
- REMOVE_DELAY: {
86
- target: "inactive",
87
- actions: "notifyParentToRemove"
88
- }
89
- }
90
- },
91
- inactive: {
92
- entry: "invokeOnClose",
93
- type: "final"
94
- }
95
- }
96
- },
97
- {
98
- activities: {
99
- trackDocumentVisibility(ctx2, _evt, { send }) {
100
- if (!ctx2.pauseOnPageIdle)
101
- return;
102
- const doc = dom.getDoc(ctx2);
103
- return addDomEvent(doc, "visibilitychange", () => {
104
- send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
105
- });
106
- }
107
- },
108
- guards: {
109
- isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
110
- isLoadingType: (ctx2) => ctx2.type === "loading",
111
- hasTypeChanged: (ctx2, evt) => evt.toast?.type !== ctx2.type,
112
- hasDurationChanged: (ctx2, evt) => evt.toast?.duration !== ctx2.duration
113
- },
114
- delays: {
115
- VISIBLE_DURATION: (ctx2) => ctx2.remaining,
116
- REMOVE_DELAY: (ctx2) => ctx2.removeDelay
117
- },
118
- actions: {
119
- setRemainingDuration(ctx2) {
120
- ctx2.remaining -= Date.now() - ctx2.createdAt;
121
- },
122
- setCreatedAt(ctx2) {
123
- ctx2.createdAt = Date.now();
124
- },
125
- notifyParentToRemove(_ctx, _evt, { self }) {
126
- self.sendParent({ type: "REMOVE_TOAST", id: self.id });
127
- },
128
- invokeOnClosing(ctx2) {
129
- ctx2.onClosing?.();
130
- },
131
- invokeOnClose(ctx2) {
132
- ctx2.onClose?.();
133
- },
134
- invokeOnOpen(ctx2) {
135
- ctx2.onOpen?.();
136
- },
137
- invokeOnUpdate(ctx2) {
138
- ctx2.onUpdate?.();
139
- },
140
- setContext(ctx2, evt) {
141
- const { duration: duration2, type: type2 } = evt.toast;
142
- const time = getToastDuration(duration2, type2);
143
- Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
144
- }
145
- }
146
- }
147
- );
148
- }
149
-
150
- export {
151
- createToastMachine
152
- };
@@ -1,9 +0,0 @@
1
- // src/toast.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
4
- var parts = anatomy.build();
5
-
6
- export {
7
- anatomy,
8
- parts
9
- };
@@ -1,144 +0,0 @@
1
- import {
2
- parts
3
- } from "./chunk-GQHI2OMI.mjs";
4
- import {
5
- dom
6
- } from "./chunk-DUZD3NLM.mjs";
7
-
8
- // src/toast.connect.ts
9
- import { dataAttr } from "@zag-js/dom-query";
10
- function connect(state, send, normalize) {
11
- const isVisible = state.hasTag("visible");
12
- const isPaused = state.hasTag("paused");
13
- const pauseOnInteraction = state.context.pauseOnInteraction;
14
- const placement = state.context.placement;
15
- return {
16
- /**
17
- * The type of the toast.
18
- */
19
- type: state.context.type,
20
- /**
21
- * The title of the toast.
22
- */
23
- title: state.context.title,
24
- /**
25
- * The description of the toast.
26
- */
27
- description: state.context.description,
28
- /**
29
- * The current placement of the toast.
30
- */
31
- placement,
32
- /**
33
- * Whether the toast is visible.
34
- */
35
- isVisible,
36
- /**
37
- * Whether the toast is paused.
38
- */
39
- isPaused,
40
- /**
41
- * Whether the toast is in RTL mode.
42
- */
43
- isRtl: state.context.dir === "rtl",
44
- /**
45
- * Function to pause the toast (keeping it visible).
46
- */
47
- pause() {
48
- send("PAUSE");
49
- },
50
- /**
51
- * Function to resume the toast dismissing.
52
- */
53
- resume() {
54
- send("RESUME");
55
- },
56
- /**
57
- * Function to instantly dismiss the toast.
58
- */
59
- dismiss() {
60
- send("DISMISS");
61
- },
62
- /**
63
- * Function render the toast in the DOM (based on the defined `render` property)
64
- */
65
- render() {
66
- return state.context.render?.({
67
- id: state.context.id,
68
- type: state.context.type,
69
- duration: state.context.duration,
70
- title: state.context.title,
71
- placement: state.context.placement,
72
- description: state.context.description,
73
- dismiss() {
74
- send("DISMISS");
75
- }
76
- });
77
- },
78
- rootProps: normalize.element({
79
- ...parts.root.attrs,
80
- dir: state.context.dir,
81
- id: dom.getRootId(state.context),
82
- "data-open": dataAttr(isVisible),
83
- "data-type": state.context.type,
84
- "data-placement": placement,
85
- role: "status",
86
- "aria-atomic": "true",
87
- tabIndex: 0,
88
- style: {
89
- position: "relative",
90
- pointerEvents: "auto",
91
- margin: "calc(var(--toast-gutter) / 2)",
92
- "--remove-delay": `${state.context.removeDelay}ms`,
93
- "--duration": `${state.context.duration}ms`
94
- },
95
- onKeyDown(event) {
96
- if (event.key == "Escape") {
97
- send("DISMISS");
98
- event.preventDefault();
99
- }
100
- },
101
- onFocus() {
102
- if (pauseOnInteraction) {
103
- send("PAUSE");
104
- }
105
- },
106
- onBlur() {
107
- if (pauseOnInteraction) {
108
- send("RESUME");
109
- }
110
- },
111
- onPointerEnter() {
112
- if (pauseOnInteraction) {
113
- send("PAUSE");
114
- }
115
- },
116
- onPointerLeave() {
117
- if (pauseOnInteraction) {
118
- send("RESUME");
119
- }
120
- }
121
- }),
122
- titleProps: normalize.element({
123
- ...parts.title.attrs,
124
- id: dom.getTitleId(state.context)
125
- }),
126
- descriptionProps: normalize.element({
127
- ...parts.description.attrs,
128
- id: dom.getDescriptionId(state.context)
129
- }),
130
- closeTriggerProps: normalize.button({
131
- id: dom.getCloseTriggerId(state.context),
132
- ...parts.closeTrigger.attrs,
133
- type: "button",
134
- "aria-label": "Dismiss notification",
135
- onClick() {
136
- send("DISMISS");
137
- }
138
- })
139
- };
140
- }
141
-
142
- export {
143
- connect
144
- };
@@ -1,100 +0,0 @@
1
- import {
2
- createToastMachine
3
- } from "./chunk-EQTV3BNM.mjs";
4
-
5
- // src/toast-group.machine.ts
6
- import { createMachine } from "@zag-js/core";
7
- import { MAX_Z_INDEX } from "@zag-js/dom-query";
8
- import { compact } from "@zag-js/utils";
9
- function groupMachine(userContext) {
10
- const ctx = compact(userContext);
11
- return createMachine({
12
- id: "toaster",
13
- initial: "active",
14
- context: {
15
- dir: "ltr",
16
- max: Number.MAX_SAFE_INTEGER,
17
- toasts: [],
18
- gutter: "1rem",
19
- zIndex: MAX_Z_INDEX,
20
- pauseOnPageIdle: false,
21
- pauseOnInteraction: true,
22
- offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
23
- ...ctx
24
- },
25
- computed: {
26
- count: (ctx2) => ctx2.toasts.length
27
- },
28
- on: {
29
- SETUP: {},
30
- PAUSE_TOAST: {
31
- actions: (_ctx, evt, { self }) => {
32
- self.sendChild("PAUSE", evt.id);
33
- }
34
- },
35
- PAUSE_ALL: {
36
- actions: (ctx2) => {
37
- ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
38
- }
39
- },
40
- RESUME_TOAST: {
41
- actions: (_ctx, evt, { self }) => {
42
- self.sendChild("RESUME", evt.id);
43
- }
44
- },
45
- RESUME_ALL: {
46
- actions: (ctx2) => {
47
- ctx2.toasts.forEach((toast) => toast.send("RESUME"));
48
- }
49
- },
50
- ADD_TOAST: {
51
- guard: (ctx2) => ctx2.toasts.length < ctx2.max,
52
- actions: (ctx2, evt, { self }) => {
53
- const options = {
54
- ...evt.toast,
55
- pauseOnPageIdle: ctx2.pauseOnPageIdle,
56
- pauseOnInteraction: ctx2.pauseOnInteraction,
57
- dir: ctx2.dir,
58
- getRootNode: ctx2.getRootNode
59
- };
60
- const toast = createToastMachine(options);
61
- const actor = self.spawn(toast);
62
- ctx2.toasts.push(actor);
63
- }
64
- },
65
- UPDATE_TOAST: {
66
- actions: (_ctx, evt, { self }) => {
67
- self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
68
- }
69
- },
70
- DISMISS_TOAST: {
71
- actions: (_ctx, evt, { self }) => {
72
- self.sendChild("DISMISS", evt.id);
73
- }
74
- },
75
- DISMISS_ALL: {
76
- actions: (ctx2) => {
77
- ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
78
- }
79
- },
80
- REMOVE_TOAST: {
81
- actions: (ctx2, evt, { self }) => {
82
- self.stopChild(evt.id);
83
- const index = ctx2.toasts.findIndex((toast) => toast.id === evt.id);
84
- ctx2.toasts.splice(index, 1);
85
- }
86
- },
87
- REMOVE_ALL: {
88
- actions: (ctx2, _evt, { self }) => {
89
- ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
90
- while (ctx2.toasts.length)
91
- ctx2.toasts.pop();
92
- }
93
- }
94
- }
95
- });
96
- }
97
-
98
- export {
99
- groupMachine
100
- };
@@ -1,18 +0,0 @@
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 __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // src/toast.types.ts
17
- var toast_types_exports = {};
18
- module.exports = __toCommonJS(toast_types_exports);
File without changes