@zag-js/toast 0.0.0-dev-20230221113221 → 0.0.0-dev-20230222120620
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/{chunk-2GSH3KLH.mjs → chunk-4WKKWZRA.mjs} +3 -6
- package/dist/{chunk-XQSCE3HI.mjs → chunk-DBPKSADW.mjs} +12 -12
- package/dist/chunk-DUZD3NLM.mjs +14 -0
- package/dist/{chunk-FNDQ2PGP.mjs → chunk-EQTV3BNM.mjs} +7 -44
- package/dist/{chunk-J4KJ6G3Z.mjs → chunk-GMSHIBCW.mjs} +2 -6
- package/dist/{chunk-T4OOXF4T.mjs → chunk-TCF4OLIQ.mjs} +3 -7
- package/dist/index.js +34 -125
- package/dist/index.mjs +8 -19
- package/dist/toast-group.connect.js +18 -63
- package/dist/toast-group.connect.mjs +3 -4
- package/dist/toast-group.machine.js +12 -83
- package/dist/toast-group.machine.mjs +4 -5
- package/dist/toast.anatomy.d.ts +2 -2
- package/dist/toast.connect.js +4 -41
- package/dist/toast.connect.mjs +2 -2
- package/dist/toast.dom.d.ts +2 -2
- package/dist/toast.dom.js +2 -37
- package/dist/toast.dom.mjs +1 -1
- package/dist/toast.machine.js +8 -78
- package/dist/toast.machine.mjs +3 -4
- package/dist/toast.utils.js +12 -12
- package/dist/toast.utils.mjs +1 -1
- package/package.json +6 -5
- package/dist/chunk-CUDYFIYR.mjs +0 -47
- package/dist/chunk-LHAZKBRJ.mjs +0 -19
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import {
|
|
2
2
|
parts
|
|
3
3
|
} from "./chunk-GQHI2OMI.mjs";
|
|
4
|
-
import {
|
|
5
|
-
runIfFn,
|
|
6
|
-
uuid
|
|
7
|
-
} from "./chunk-LHAZKBRJ.mjs";
|
|
8
4
|
import {
|
|
9
5
|
getGroupPlacementStyle,
|
|
10
6
|
getToastsByPlacement
|
|
11
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-DBPKSADW.mjs";
|
|
12
8
|
import {
|
|
13
9
|
dom
|
|
14
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-DUZD3NLM.mjs";
|
|
15
11
|
|
|
16
12
|
// src/toast-group.connect.ts
|
|
17
13
|
import { subscribe } from "@zag-js/core";
|
|
14
|
+
import { runIfFn, uuid } from "@zag-js/utils";
|
|
18
15
|
var toaster = {};
|
|
19
16
|
function groupConnect(state, send, normalize) {
|
|
20
17
|
const group = {
|
|
@@ -20,11 +20,11 @@ function getToastDuration(duration, type) {
|
|
|
20
20
|
}
|
|
21
21
|
function getGroupPlacementStyle(ctx, placement) {
|
|
22
22
|
const offset = ctx.offsets;
|
|
23
|
-
const
|
|
23
|
+
const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
|
|
24
24
|
const rtl = ctx.dir === "rtl";
|
|
25
|
-
const
|
|
26
|
-
const isRighty =
|
|
27
|
-
const isLefty =
|
|
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
28
|
const styles = {
|
|
29
29
|
position: "fixed",
|
|
30
30
|
pointerEvents: ctx.count > 0 ? void 0 : "none",
|
|
@@ -39,20 +39,20 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
39
39
|
if (isLefty)
|
|
40
40
|
alignItems = "flex-start";
|
|
41
41
|
styles.alignItems = alignItems;
|
|
42
|
-
if (
|
|
43
|
-
const offset2 =
|
|
42
|
+
if (computedPlacement.includes("top")) {
|
|
43
|
+
const offset2 = computedOffset.top;
|
|
44
44
|
styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
|
|
45
45
|
}
|
|
46
|
-
if (
|
|
47
|
-
const offset2 =
|
|
46
|
+
if (computedPlacement.includes("bottom")) {
|
|
47
|
+
const offset2 = computedOffset.bottom;
|
|
48
48
|
styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
|
|
49
49
|
}
|
|
50
|
-
if (!
|
|
51
|
-
const offset2 =
|
|
50
|
+
if (!computedPlacement.includes("left")) {
|
|
51
|
+
const offset2 = computedOffset.right;
|
|
52
52
|
styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
|
|
53
53
|
}
|
|
54
|
-
if (!
|
|
55
|
-
const offset2 =
|
|
54
|
+
if (!computedPlacement.includes("right")) {
|
|
55
|
+
const offset2 = computedOffset.left;
|
|
56
56
|
styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
|
|
57
57
|
}
|
|
58
58
|
return styles;
|
|
@@ -0,0 +1,14 @@
|
|
|
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,51 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
cast,
|
|
3
|
-
runIfFn
|
|
4
|
-
} from "./chunk-LHAZKBRJ.mjs";
|
|
5
1
|
import {
|
|
6
2
|
getToastDuration
|
|
7
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-DBPKSADW.mjs";
|
|
8
4
|
import {
|
|
9
5
|
dom
|
|
10
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-DUZD3NLM.mjs";
|
|
11
7
|
|
|
12
8
|
// src/toast.machine.ts
|
|
13
9
|
import { createMachine, guards } from "@zag-js/core";
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var isArray = (v) => Array.isArray(v);
|
|
17
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
18
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
19
|
-
|
|
20
|
-
// ../../utilities/core/src/object.ts
|
|
21
|
-
function compact(obj) {
|
|
22
|
-
if (obj === void 0)
|
|
23
|
-
return obj;
|
|
24
|
-
return Object.fromEntries(
|
|
25
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// ../../utilities/dom/src/listener.ts
|
|
30
|
-
var isRef = (v) => hasProp(v, "current");
|
|
31
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
32
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
33
|
-
node?.addEventListener(eventName, handler, options);
|
|
34
|
-
return () => {
|
|
35
|
-
node?.removeEventListener(eventName, handler, options);
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// ../../utilities/dom/src/visibility-event.ts
|
|
40
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
41
|
-
const doc = cast(_doc);
|
|
42
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
43
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
44
|
-
callback(!!hidden);
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// src/toast.machine.ts
|
|
10
|
+
import { addDomEvent } from "@zag-js/dom-event";
|
|
11
|
+
import { compact } from "@zag-js/utils";
|
|
49
12
|
var { not, and, or } = guards;
|
|
50
13
|
function createToastMachine(options = {}) {
|
|
51
14
|
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
|
|
@@ -136,8 +99,9 @@ function createToastMachine(options = {}) {
|
|
|
136
99
|
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
137
100
|
if (!ctx2.pauseOnPageIdle)
|
|
138
101
|
return;
|
|
139
|
-
|
|
140
|
-
|
|
102
|
+
const doc = dom.getDoc(ctx2);
|
|
103
|
+
return addDomEvent(doc, "visibilitychange", () => {
|
|
104
|
+
send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
|
|
141
105
|
});
|
|
142
106
|
}
|
|
143
107
|
},
|
|
@@ -184,6 +148,5 @@ function createToastMachine(options = {}) {
|
|
|
184
148
|
}
|
|
185
149
|
|
|
186
150
|
export {
|
|
187
|
-
compact,
|
|
188
151
|
createToastMachine
|
|
189
152
|
};
|
|
@@ -3,14 +3,10 @@ import {
|
|
|
3
3
|
} from "./chunk-GQHI2OMI.mjs";
|
|
4
4
|
import {
|
|
5
5
|
dom
|
|
6
|
-
} from "./chunk-
|
|
7
|
-
|
|
8
|
-
// ../../utilities/dom/src/attrs.ts
|
|
9
|
-
var dataAttr = (guard) => {
|
|
10
|
-
return guard ? "" : void 0;
|
|
11
|
-
};
|
|
6
|
+
} from "./chunk-DUZD3NLM.mjs";
|
|
12
7
|
|
|
13
8
|
// src/toast.connect.ts
|
|
9
|
+
import { dataAttr } from "@zag-js/dom-query";
|
|
14
10
|
function connect(state, send, normalize) {
|
|
15
11
|
const isVisible = state.hasTag("visible");
|
|
16
12
|
const isPaused = state.hasTag("paused");
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
|
-
compact,
|
|
3
2
|
createToastMachine
|
|
4
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-EQTV3BNM.mjs";
|
|
5
4
|
|
|
6
5
|
// src/toast-group.machine.ts
|
|
7
6
|
import { createMachine } from "@zag-js/core";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var MAX_Z_INDEX = 2147483647;
|
|
11
|
-
|
|
12
|
-
// src/toast-group.machine.ts
|
|
7
|
+
import { MAX_Z_INDEX } from "@zag-js/dom-query";
|
|
8
|
+
import { compact } from "@zag-js/utils";
|
|
13
9
|
function groupMachine(userContext) {
|
|
14
10
|
const ctx = compact(userContext);
|
|
15
11
|
return createMachine({
|
package/dist/index.js
CHANGED
|
@@ -27,110 +27,12 @@ __export(src_exports, {
|
|
|
27
27
|
group: () => group
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(src_exports);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
var dataAttr = (guard) => {
|
|
33
|
-
return guard ? "" : void 0;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
// ../../utilities/dom/src/constants.ts
|
|
37
|
-
var MAX_Z_INDEX = 2147483647;
|
|
38
|
-
|
|
39
|
-
// ../../utilities/core/src/functions.ts
|
|
40
|
-
var runIfFn = (v, ...a) => {
|
|
41
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
42
|
-
return res ?? void 0;
|
|
43
|
-
};
|
|
44
|
-
var cast = (v) => v;
|
|
45
|
-
var uuid = /* @__PURE__ */ (() => {
|
|
46
|
-
let id = 0;
|
|
47
|
-
return () => {
|
|
48
|
-
id++;
|
|
49
|
-
return id.toString(36);
|
|
50
|
-
};
|
|
51
|
-
})();
|
|
52
|
-
|
|
53
|
-
// ../../utilities/core/src/guard.ts
|
|
54
|
-
var isArray = (v) => Array.isArray(v);
|
|
55
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
56
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
57
|
-
|
|
58
|
-
// ../../utilities/core/src/object.ts
|
|
59
|
-
function compact(obj) {
|
|
60
|
-
if (obj === void 0)
|
|
61
|
-
return obj;
|
|
62
|
-
return Object.fromEntries(
|
|
63
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// ../../utilities/core/src/warning.ts
|
|
68
|
-
function warn(...a) {
|
|
69
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
70
|
-
const c = a.length === 2 ? a[0] : true;
|
|
71
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
72
|
-
console.warn(m);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// ../../utilities/dom/src/platform.ts
|
|
77
|
-
var isDom = () => typeof window !== "undefined";
|
|
78
|
-
|
|
79
|
-
// ../../utilities/dom/src/query.ts
|
|
80
|
-
function isDocument(el) {
|
|
81
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
82
|
-
}
|
|
83
|
-
function isWindow(value) {
|
|
84
|
-
return value?.toString() === "[object Window]";
|
|
85
|
-
}
|
|
86
|
-
function getDocument(el) {
|
|
87
|
-
if (isWindow(el))
|
|
88
|
-
return el.document;
|
|
89
|
-
if (isDocument(el))
|
|
90
|
-
return el;
|
|
91
|
-
return el?.ownerDocument ?? document;
|
|
92
|
-
}
|
|
93
|
-
function defineDomHelpers(helpers) {
|
|
94
|
-
const dom2 = {
|
|
95
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
96
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
97
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
98
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
99
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
100
|
-
queryById: (ctx, id) => {
|
|
101
|
-
const el = dom2.getById(ctx, id);
|
|
102
|
-
if (!el)
|
|
103
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
104
|
-
return el;
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
return {
|
|
108
|
-
...dom2,
|
|
109
|
-
...helpers
|
|
110
|
-
};
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// ../../utilities/dom/src/listener.ts
|
|
114
|
-
var isRef = (v) => hasProp(v, "current");
|
|
115
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
116
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
117
|
-
node?.addEventListener(eventName, handler, options);
|
|
118
|
-
return () => {
|
|
119
|
-
node?.removeEventListener(eventName, handler, options);
|
|
120
|
-
};
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// ../../utilities/dom/src/visibility-event.ts
|
|
124
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
125
|
-
const doc = cast(_doc);
|
|
126
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
127
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
128
|
-
callback(!!hidden);
|
|
129
|
-
});
|
|
130
|
-
}
|
|
30
|
+
var import_dom_query4 = require("@zag-js/dom-query");
|
|
31
|
+
var import_utils4 = require("@zag-js/utils");
|
|
131
32
|
|
|
132
33
|
// src/toast-group.connect.ts
|
|
133
34
|
var import_core = require("@zag-js/core");
|
|
35
|
+
var import_utils = require("@zag-js/utils");
|
|
134
36
|
|
|
135
37
|
// src/toast.anatomy.ts
|
|
136
38
|
var import_anatomy = require("@zag-js/anatomy");
|
|
@@ -138,7 +40,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root",
|
|
|
138
40
|
var parts = anatomy.build();
|
|
139
41
|
|
|
140
42
|
// src/toast.dom.ts
|
|
141
|
-
var
|
|
43
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
44
|
+
var dom = (0, import_dom_query.createScope)({
|
|
142
45
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
143
46
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
144
47
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
@@ -169,11 +72,11 @@ function getToastDuration(duration, type) {
|
|
|
169
72
|
}
|
|
170
73
|
function getGroupPlacementStyle(ctx, placement) {
|
|
171
74
|
const offset = ctx.offsets;
|
|
172
|
-
const
|
|
75
|
+
const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
|
|
173
76
|
const rtl = ctx.dir === "rtl";
|
|
174
|
-
const
|
|
175
|
-
const isRighty =
|
|
176
|
-
const isLefty =
|
|
77
|
+
const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
|
|
78
|
+
const isRighty = computedPlacement.includes("right");
|
|
79
|
+
const isLefty = computedPlacement.includes("left");
|
|
177
80
|
const styles = {
|
|
178
81
|
position: "fixed",
|
|
179
82
|
pointerEvents: ctx.count > 0 ? void 0 : "none",
|
|
@@ -188,20 +91,20 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
188
91
|
if (isLefty)
|
|
189
92
|
alignItems = "flex-start";
|
|
190
93
|
styles.alignItems = alignItems;
|
|
191
|
-
if (
|
|
192
|
-
const offset2 =
|
|
94
|
+
if (computedPlacement.includes("top")) {
|
|
95
|
+
const offset2 = computedOffset.top;
|
|
193
96
|
styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
|
|
194
97
|
}
|
|
195
|
-
if (
|
|
196
|
-
const offset2 =
|
|
98
|
+
if (computedPlacement.includes("bottom")) {
|
|
99
|
+
const offset2 = computedOffset.bottom;
|
|
197
100
|
styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
|
|
198
101
|
}
|
|
199
|
-
if (!
|
|
200
|
-
const offset2 =
|
|
102
|
+
if (!computedPlacement.includes("left")) {
|
|
103
|
+
const offset2 = computedOffset.right;
|
|
201
104
|
styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
|
|
202
105
|
}
|
|
203
|
-
if (!
|
|
204
|
-
const offset2 =
|
|
106
|
+
if (!computedPlacement.includes("right")) {
|
|
107
|
+
const offset2 = computedOffset.left;
|
|
205
108
|
styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
|
|
206
109
|
}
|
|
207
110
|
return styles;
|
|
@@ -220,7 +123,7 @@ function groupConnect(state, send, normalize) {
|
|
|
220
123
|
return !!state.context.toasts.find((toast) => toast.id == id);
|
|
221
124
|
},
|
|
222
125
|
create(options) {
|
|
223
|
-
const uid = `toast:${uuid()}`;
|
|
126
|
+
const uid = `toast:${(0, import_utils.uuid)()}`;
|
|
224
127
|
const id = options.id ? options.id : uid;
|
|
225
128
|
if (group2.isVisible(id))
|
|
226
129
|
return;
|
|
@@ -277,10 +180,10 @@ function groupConnect(state, send, normalize) {
|
|
|
277
180
|
promise(promise, options, shared = {}) {
|
|
278
181
|
const id = group2.loading({ ...shared, ...options.loading });
|
|
279
182
|
promise.then((response) => {
|
|
280
|
-
const successOptions = runIfFn(options.success, response);
|
|
183
|
+
const successOptions = (0, import_utils.runIfFn)(options.success, response);
|
|
281
184
|
group2.success({ ...shared, ...successOptions, id });
|
|
282
185
|
}).catch((error) => {
|
|
283
|
-
const errorOptions = runIfFn(options.error, error);
|
|
186
|
+
const errorOptions = (0, import_utils.runIfFn)(options.error, error);
|
|
284
187
|
group2.error({ ...shared, ...errorOptions, id });
|
|
285
188
|
});
|
|
286
189
|
return promise;
|
|
@@ -322,13 +225,17 @@ function groupConnect(state, send, normalize) {
|
|
|
322
225
|
|
|
323
226
|
// src/toast-group.machine.ts
|
|
324
227
|
var import_core3 = require("@zag-js/core");
|
|
228
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
229
|
+
var import_utils3 = require("@zag-js/utils");
|
|
325
230
|
|
|
326
231
|
// src/toast.machine.ts
|
|
327
232
|
var import_core2 = require("@zag-js/core");
|
|
233
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
234
|
+
var import_utils2 = require("@zag-js/utils");
|
|
328
235
|
var { not, and, or } = import_core2.guards;
|
|
329
236
|
function createToastMachine(options = {}) {
|
|
330
237
|
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
|
|
331
|
-
const ctx = compact(restProps);
|
|
238
|
+
const ctx = (0, import_utils2.compact)(restProps);
|
|
332
239
|
const computedDuration = getToastDuration(duration, type);
|
|
333
240
|
return (0, import_core2.createMachine)(
|
|
334
241
|
{
|
|
@@ -415,8 +322,9 @@ function createToastMachine(options = {}) {
|
|
|
415
322
|
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
416
323
|
if (!ctx2.pauseOnPageIdle)
|
|
417
324
|
return;
|
|
418
|
-
|
|
419
|
-
|
|
325
|
+
const doc = dom.getDoc(ctx2);
|
|
326
|
+
return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
|
|
327
|
+
send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
|
|
420
328
|
});
|
|
421
329
|
}
|
|
422
330
|
},
|
|
@@ -464,7 +372,7 @@ function createToastMachine(options = {}) {
|
|
|
464
372
|
|
|
465
373
|
// src/toast-group.machine.ts
|
|
466
374
|
function groupMachine(userContext) {
|
|
467
|
-
const ctx = compact(userContext);
|
|
375
|
+
const ctx = (0, import_utils3.compact)(userContext);
|
|
468
376
|
return (0, import_core3.createMachine)({
|
|
469
377
|
id: "toaster",
|
|
470
378
|
initial: "active",
|
|
@@ -473,7 +381,7 @@ function groupMachine(userContext) {
|
|
|
473
381
|
max: Number.MAX_SAFE_INTEGER,
|
|
474
382
|
toasts: [],
|
|
475
383
|
gutter: "1rem",
|
|
476
|
-
zIndex: MAX_Z_INDEX,
|
|
384
|
+
zIndex: import_dom_query2.MAX_Z_INDEX,
|
|
477
385
|
pauseOnPageIdle: false,
|
|
478
386
|
pauseOnInteraction: true,
|
|
479
387
|
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
|
|
@@ -553,6 +461,7 @@ function groupMachine(userContext) {
|
|
|
553
461
|
}
|
|
554
462
|
|
|
555
463
|
// src/toast.connect.ts
|
|
464
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
556
465
|
function connect(state, send, normalize) {
|
|
557
466
|
const isVisible = state.hasTag("visible");
|
|
558
467
|
const isPaused = state.hasTag("paused");
|
|
@@ -579,7 +488,7 @@ function connect(state, send, normalize) {
|
|
|
579
488
|
...parts.root.attrs,
|
|
580
489
|
dir: state.context.dir,
|
|
581
490
|
id: dom.getRootId(state.context),
|
|
582
|
-
"data-open": dataAttr(isVisible),
|
|
491
|
+
"data-open": (0, import_dom_query3.dataAttr)(isVisible),
|
|
583
492
|
"data-type": state.context.type,
|
|
584
493
|
"data-placement": placement,
|
|
585
494
|
role: "status",
|
|
@@ -658,8 +567,8 @@ var group = {
|
|
|
658
567
|
machine: groupMachine
|
|
659
568
|
};
|
|
660
569
|
function api() {
|
|
661
|
-
if (!isDom()) {
|
|
662
|
-
warn("toast.api() is only available in the browser");
|
|
570
|
+
if (!(0, import_dom_query4.isDom)()) {
|
|
571
|
+
(0, import_utils4.warn)("toast.api() is only available in the browser");
|
|
663
572
|
} else {
|
|
664
573
|
return toaster;
|
|
665
574
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,36 +1,25 @@
|
|
|
1
1
|
import {
|
|
2
2
|
groupConnect,
|
|
3
3
|
toaster
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-4WKKWZRA.mjs";
|
|
5
5
|
import {
|
|
6
6
|
groupMachine
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-TCF4OLIQ.mjs";
|
|
8
8
|
import {
|
|
9
9
|
connect
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-GMSHIBCW.mjs";
|
|
11
11
|
import {
|
|
12
12
|
anatomy
|
|
13
13
|
} from "./chunk-GQHI2OMI.mjs";
|
|
14
14
|
import {
|
|
15
15
|
createToastMachine
|
|
16
|
-
} from "./chunk-
|
|
17
|
-
import "./chunk-
|
|
18
|
-
import "./chunk-
|
|
19
|
-
import "./chunk-CUDYFIYR.mjs";
|
|
20
|
-
|
|
21
|
-
// ../../utilities/core/src/warning.ts
|
|
22
|
-
function warn(...a) {
|
|
23
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
24
|
-
const c = a.length === 2 ? a[0] : true;
|
|
25
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
26
|
-
console.warn(m);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// ../../utilities/dom/src/platform.ts
|
|
31
|
-
var isDom = () => typeof window !== "undefined";
|
|
16
|
+
} from "./chunk-EQTV3BNM.mjs";
|
|
17
|
+
import "./chunk-DBPKSADW.mjs";
|
|
18
|
+
import "./chunk-DUZD3NLM.mjs";
|
|
32
19
|
|
|
33
20
|
// src/index.ts
|
|
21
|
+
import { isDom } from "@zag-js/dom-query";
|
|
22
|
+
import { warn } from "@zag-js/utils";
|
|
34
23
|
var group = {
|
|
35
24
|
connect: groupConnect,
|
|
36
25
|
machine: groupMachine
|
|
@@ -25,61 +25,16 @@ __export(toast_group_connect_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(toast_group_connect_exports);
|
|
27
27
|
var import_core = require("@zag-js/core");
|
|
28
|
-
|
|
29
|
-
// ../../utilities/core/src/functions.ts
|
|
30
|
-
var runIfFn = (v, ...a) => {
|
|
31
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
32
|
-
return res ?? void 0;
|
|
33
|
-
};
|
|
34
|
-
var uuid = /* @__PURE__ */ (() => {
|
|
35
|
-
let id = 0;
|
|
36
|
-
return () => {
|
|
37
|
-
id++;
|
|
38
|
-
return id.toString(36);
|
|
39
|
-
};
|
|
40
|
-
})();
|
|
28
|
+
var import_utils = require("@zag-js/utils");
|
|
41
29
|
|
|
42
30
|
// src/toast.anatomy.ts
|
|
43
31
|
var import_anatomy = require("@zag-js/anatomy");
|
|
44
32
|
var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root", "title", "description", "closeTrigger");
|
|
45
33
|
var parts = anatomy.build();
|
|
46
34
|
|
|
47
|
-
// ../../utilities/dom/src/query.ts
|
|
48
|
-
function isDocument(el) {
|
|
49
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
50
|
-
}
|
|
51
|
-
function isWindow(value) {
|
|
52
|
-
return value?.toString() === "[object Window]";
|
|
53
|
-
}
|
|
54
|
-
function getDocument(el) {
|
|
55
|
-
if (isWindow(el))
|
|
56
|
-
return el.document;
|
|
57
|
-
if (isDocument(el))
|
|
58
|
-
return el;
|
|
59
|
-
return el?.ownerDocument ?? document;
|
|
60
|
-
}
|
|
61
|
-
function defineDomHelpers(helpers) {
|
|
62
|
-
const dom2 = {
|
|
63
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
64
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
65
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
66
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
67
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
68
|
-
queryById: (ctx, id) => {
|
|
69
|
-
const el = dom2.getById(ctx, id);
|
|
70
|
-
if (!el)
|
|
71
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
72
|
-
return el;
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
return {
|
|
76
|
-
...dom2,
|
|
77
|
-
...helpers
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
35
|
// src/toast.dom.ts
|
|
82
|
-
var
|
|
36
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
+
var dom = (0, import_dom_query.createScope)({
|
|
83
38
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
84
39
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
85
40
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
@@ -100,11 +55,11 @@ function getToastsByPlacement(toasts) {
|
|
|
100
55
|
}
|
|
101
56
|
function getGroupPlacementStyle(ctx, placement) {
|
|
102
57
|
const offset = ctx.offsets;
|
|
103
|
-
const
|
|
58
|
+
const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
|
|
104
59
|
const rtl = ctx.dir === "rtl";
|
|
105
|
-
const
|
|
106
|
-
const isRighty =
|
|
107
|
-
const isLefty =
|
|
60
|
+
const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
|
|
61
|
+
const isRighty = computedPlacement.includes("right");
|
|
62
|
+
const isLefty = computedPlacement.includes("left");
|
|
108
63
|
const styles = {
|
|
109
64
|
position: "fixed",
|
|
110
65
|
pointerEvents: ctx.count > 0 ? void 0 : "none",
|
|
@@ -119,20 +74,20 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
119
74
|
if (isLefty)
|
|
120
75
|
alignItems = "flex-start";
|
|
121
76
|
styles.alignItems = alignItems;
|
|
122
|
-
if (
|
|
123
|
-
const offset2 =
|
|
77
|
+
if (computedPlacement.includes("top")) {
|
|
78
|
+
const offset2 = computedOffset.top;
|
|
124
79
|
styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
|
|
125
80
|
}
|
|
126
|
-
if (
|
|
127
|
-
const offset2 =
|
|
81
|
+
if (computedPlacement.includes("bottom")) {
|
|
82
|
+
const offset2 = computedOffset.bottom;
|
|
128
83
|
styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
|
|
129
84
|
}
|
|
130
|
-
if (!
|
|
131
|
-
const offset2 =
|
|
85
|
+
if (!computedPlacement.includes("left")) {
|
|
86
|
+
const offset2 = computedOffset.right;
|
|
132
87
|
styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
|
|
133
88
|
}
|
|
134
|
-
if (!
|
|
135
|
-
const offset2 =
|
|
89
|
+
if (!computedPlacement.includes("right")) {
|
|
90
|
+
const offset2 = computedOffset.left;
|
|
136
91
|
styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
|
|
137
92
|
}
|
|
138
93
|
return styles;
|
|
@@ -151,7 +106,7 @@ function groupConnect(state, send, normalize) {
|
|
|
151
106
|
return !!state.context.toasts.find((toast) => toast.id == id);
|
|
152
107
|
},
|
|
153
108
|
create(options) {
|
|
154
|
-
const uid = `toast:${uuid()}`;
|
|
109
|
+
const uid = `toast:${(0, import_utils.uuid)()}`;
|
|
155
110
|
const id = options.id ? options.id : uid;
|
|
156
111
|
if (group.isVisible(id))
|
|
157
112
|
return;
|
|
@@ -208,10 +163,10 @@ function groupConnect(state, send, normalize) {
|
|
|
208
163
|
promise(promise, options, shared = {}) {
|
|
209
164
|
const id = group.loading({ ...shared, ...options.loading });
|
|
210
165
|
promise.then((response) => {
|
|
211
|
-
const successOptions = runIfFn(options.success, response);
|
|
166
|
+
const successOptions = (0, import_utils.runIfFn)(options.success, response);
|
|
212
167
|
group.success({ ...shared, ...successOptions, id });
|
|
213
168
|
}).catch((error) => {
|
|
214
|
-
const errorOptions = runIfFn(options.error, error);
|
|
169
|
+
const errorOptions = (0, import_utils.runIfFn)(options.error, error);
|
|
215
170
|
group.error({ ...shared, ...errorOptions, id });
|
|
216
171
|
});
|
|
217
172
|
return promise;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
groupConnect,
|
|
3
3
|
toaster
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-4WKKWZRA.mjs";
|
|
5
5
|
import "./chunk-GQHI2OMI.mjs";
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import "./chunk-
|
|
8
|
-
import "./chunk-CUDYFIYR.mjs";
|
|
6
|
+
import "./chunk-DBPKSADW.mjs";
|
|
7
|
+
import "./chunk-DUZD3NLM.mjs";
|
|
9
8
|
export {
|
|
10
9
|
groupConnect,
|
|
11
10
|
toaster
|
|
@@ -24,89 +24,17 @@ __export(toast_group_machine_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(toast_group_machine_exports);
|
|
26
26
|
var import_core2 = require("@zag-js/core");
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var MAX_Z_INDEX = 2147483647;
|
|
30
|
-
|
|
31
|
-
// ../../utilities/core/src/functions.ts
|
|
32
|
-
var runIfFn = (v, ...a) => {
|
|
33
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
34
|
-
return res ?? void 0;
|
|
35
|
-
};
|
|
36
|
-
var cast = (v) => v;
|
|
37
|
-
|
|
38
|
-
// ../../utilities/core/src/guard.ts
|
|
39
|
-
var isArray = (v) => Array.isArray(v);
|
|
40
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
41
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
42
|
-
|
|
43
|
-
// ../../utilities/core/src/object.ts
|
|
44
|
-
function compact(obj) {
|
|
45
|
-
if (obj === void 0)
|
|
46
|
-
return obj;
|
|
47
|
-
return Object.fromEntries(
|
|
48
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// ../../utilities/dom/src/query.ts
|
|
53
|
-
function isDocument(el) {
|
|
54
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
55
|
-
}
|
|
56
|
-
function isWindow(value) {
|
|
57
|
-
return value?.toString() === "[object Window]";
|
|
58
|
-
}
|
|
59
|
-
function getDocument(el) {
|
|
60
|
-
if (isWindow(el))
|
|
61
|
-
return el.document;
|
|
62
|
-
if (isDocument(el))
|
|
63
|
-
return el;
|
|
64
|
-
return el?.ownerDocument ?? document;
|
|
65
|
-
}
|
|
66
|
-
function defineDomHelpers(helpers) {
|
|
67
|
-
const dom2 = {
|
|
68
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
69
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
70
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
71
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
72
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
73
|
-
queryById: (ctx, id) => {
|
|
74
|
-
const el = dom2.getById(ctx, id);
|
|
75
|
-
if (!el)
|
|
76
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
77
|
-
return el;
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
return {
|
|
81
|
-
...dom2,
|
|
82
|
-
...helpers
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// ../../utilities/dom/src/listener.ts
|
|
87
|
-
var isRef = (v) => hasProp(v, "current");
|
|
88
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
89
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
90
|
-
node?.addEventListener(eventName, handler, options);
|
|
91
|
-
return () => {
|
|
92
|
-
node?.removeEventListener(eventName, handler, options);
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// ../../utilities/dom/src/visibility-event.ts
|
|
97
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
98
|
-
const doc = cast(_doc);
|
|
99
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
100
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
101
|
-
callback(!!hidden);
|
|
102
|
-
});
|
|
103
|
-
}
|
|
27
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
28
|
+
var import_utils2 = require("@zag-js/utils");
|
|
104
29
|
|
|
105
30
|
// src/toast.machine.ts
|
|
106
31
|
var import_core = require("@zag-js/core");
|
|
32
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
33
|
+
var import_utils = require("@zag-js/utils");
|
|
107
34
|
|
|
108
35
|
// src/toast.dom.ts
|
|
109
|
-
var
|
|
36
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
+
var dom = (0, import_dom_query.createScope)({
|
|
110
38
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
111
39
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
112
40
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
@@ -131,7 +59,7 @@ function getToastDuration(duration, type) {
|
|
|
131
59
|
var { not, and, or } = import_core.guards;
|
|
132
60
|
function createToastMachine(options = {}) {
|
|
133
61
|
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
|
|
134
|
-
const ctx = compact(restProps);
|
|
62
|
+
const ctx = (0, import_utils.compact)(restProps);
|
|
135
63
|
const computedDuration = getToastDuration(duration, type);
|
|
136
64
|
return (0, import_core.createMachine)(
|
|
137
65
|
{
|
|
@@ -218,8 +146,9 @@ function createToastMachine(options = {}) {
|
|
|
218
146
|
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
219
147
|
if (!ctx2.pauseOnPageIdle)
|
|
220
148
|
return;
|
|
221
|
-
|
|
222
|
-
|
|
149
|
+
const doc = dom.getDoc(ctx2);
|
|
150
|
+
return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
|
|
151
|
+
send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
|
|
223
152
|
});
|
|
224
153
|
}
|
|
225
154
|
},
|
|
@@ -267,7 +196,7 @@ function createToastMachine(options = {}) {
|
|
|
267
196
|
|
|
268
197
|
// src/toast-group.machine.ts
|
|
269
198
|
function groupMachine(userContext) {
|
|
270
|
-
const ctx = compact(userContext);
|
|
199
|
+
const ctx = (0, import_utils2.compact)(userContext);
|
|
271
200
|
return (0, import_core2.createMachine)({
|
|
272
201
|
id: "toaster",
|
|
273
202
|
initial: "active",
|
|
@@ -276,7 +205,7 @@ function groupMachine(userContext) {
|
|
|
276
205
|
max: Number.MAX_SAFE_INTEGER,
|
|
277
206
|
toasts: [],
|
|
278
207
|
gutter: "1rem",
|
|
279
|
-
zIndex: MAX_Z_INDEX,
|
|
208
|
+
zIndex: import_dom_query2.MAX_Z_INDEX,
|
|
280
209
|
pauseOnPageIdle: false,
|
|
281
210
|
pauseOnInteraction: true,
|
|
282
211
|
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
groupMachine
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import "./chunk-CUDYFIYR.mjs";
|
|
3
|
+
} from "./chunk-TCF4OLIQ.mjs";
|
|
4
|
+
import "./chunk-EQTV3BNM.mjs";
|
|
5
|
+
import "./chunk-DBPKSADW.mjs";
|
|
6
|
+
import "./chunk-DUZD3NLM.mjs";
|
|
8
7
|
export {
|
|
9
8
|
groupMachine
|
|
10
9
|
};
|
package/dist/toast.anatomy.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
2
|
|
|
3
|
-
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"
|
|
4
|
-
declare const parts: Record<"
|
|
3
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
|
|
4
|
+
declare const parts: Record<"title" | "group" | "root" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
|
|
5
5
|
|
|
6
6
|
export { anatomy, parts };
|
package/dist/toast.connect.js
CHANGED
|
@@ -23,45 +23,7 @@ __export(toast_connect_exports, {
|
|
|
23
23
|
connect: () => connect
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(toast_connect_exports);
|
|
26
|
-
|
|
27
|
-
// ../../utilities/dom/src/attrs.ts
|
|
28
|
-
var dataAttr = (guard) => {
|
|
29
|
-
return guard ? "" : void 0;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// ../../utilities/dom/src/query.ts
|
|
33
|
-
function isDocument(el) {
|
|
34
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
35
|
-
}
|
|
36
|
-
function isWindow(value) {
|
|
37
|
-
return value?.toString() === "[object Window]";
|
|
38
|
-
}
|
|
39
|
-
function getDocument(el) {
|
|
40
|
-
if (isWindow(el))
|
|
41
|
-
return el.document;
|
|
42
|
-
if (isDocument(el))
|
|
43
|
-
return el;
|
|
44
|
-
return el?.ownerDocument ?? document;
|
|
45
|
-
}
|
|
46
|
-
function defineDomHelpers(helpers) {
|
|
47
|
-
const dom2 = {
|
|
48
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
49
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
50
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
51
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
52
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
53
|
-
queryById: (ctx, id) => {
|
|
54
|
-
const el = dom2.getById(ctx, id);
|
|
55
|
-
if (!el)
|
|
56
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
57
|
-
return el;
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
return {
|
|
61
|
-
...dom2,
|
|
62
|
-
...helpers
|
|
63
|
-
};
|
|
64
|
-
}
|
|
26
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
65
27
|
|
|
66
28
|
// src/toast.anatomy.ts
|
|
67
29
|
var import_anatomy = require("@zag-js/anatomy");
|
|
@@ -69,7 +31,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root",
|
|
|
69
31
|
var parts = anatomy.build();
|
|
70
32
|
|
|
71
33
|
// src/toast.dom.ts
|
|
72
|
-
var
|
|
34
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
35
|
+
var dom = (0, import_dom_query.createScope)({
|
|
73
36
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
74
37
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
75
38
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
@@ -105,7 +68,7 @@ function connect(state, send, normalize) {
|
|
|
105
68
|
...parts.root.attrs,
|
|
106
69
|
dir: state.context.dir,
|
|
107
70
|
id: dom.getRootId(state.context),
|
|
108
|
-
"data-open": dataAttr(isVisible),
|
|
71
|
+
"data-open": (0, import_dom_query2.dataAttr)(isVisible),
|
|
109
72
|
"data-type": state.context.type,
|
|
110
73
|
"data-placement": placement,
|
|
111
74
|
role: "status",
|
package/dist/toast.connect.mjs
CHANGED
package/dist/toast.dom.d.ts
CHANGED
|
@@ -15,10 +15,10 @@ declare const dom: {
|
|
|
15
15
|
getActiveElement: (ctx: {
|
|
16
16
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
17
17
|
}) => HTMLElement | null;
|
|
18
|
-
getById: <T = HTMLElement>(ctx: {
|
|
18
|
+
getById: <T extends HTMLElement = HTMLElement>(ctx: {
|
|
19
19
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
20
20
|
}, id: string) => T | null;
|
|
21
|
-
queryById: <T_1 = HTMLElement>(ctx: {
|
|
21
|
+
queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
|
|
22
22
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
23
23
|
}, id: string) => T_1;
|
|
24
24
|
} & {
|
package/dist/toast.dom.js
CHANGED
|
@@ -23,43 +23,8 @@ __export(toast_dom_exports, {
|
|
|
23
23
|
dom: () => dom
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(toast_dom_exports);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
function isDocument(el) {
|
|
29
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
30
|
-
}
|
|
31
|
-
function isWindow(value) {
|
|
32
|
-
return value?.toString() === "[object Window]";
|
|
33
|
-
}
|
|
34
|
-
function getDocument(el) {
|
|
35
|
-
if (isWindow(el))
|
|
36
|
-
return el.document;
|
|
37
|
-
if (isDocument(el))
|
|
38
|
-
return el;
|
|
39
|
-
return el?.ownerDocument ?? document;
|
|
40
|
-
}
|
|
41
|
-
function defineDomHelpers(helpers) {
|
|
42
|
-
const dom2 = {
|
|
43
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
44
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
45
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
46
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
47
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
48
|
-
queryById: (ctx, id) => {
|
|
49
|
-
const el = dom2.getById(ctx, id);
|
|
50
|
-
if (!el)
|
|
51
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
52
|
-
return el;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
return {
|
|
56
|
-
...dom2,
|
|
57
|
-
...helpers
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// src/toast.dom.ts
|
|
62
|
-
var dom = defineDomHelpers({
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
+
var dom = (0, import_dom_query.createScope)({
|
|
63
28
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
64
29
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
65
30
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
package/dist/toast.dom.mjs
CHANGED
package/dist/toast.machine.js
CHANGED
|
@@ -24,83 +24,12 @@ __export(toast_machine_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(toast_machine_exports);
|
|
26
26
|
var import_core = require("@zag-js/core");
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var runIfFn = (v, ...a) => {
|
|
30
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
31
|
-
return res ?? void 0;
|
|
32
|
-
};
|
|
33
|
-
var cast = (v) => v;
|
|
34
|
-
|
|
35
|
-
// ../../utilities/core/src/guard.ts
|
|
36
|
-
var isArray = (v) => Array.isArray(v);
|
|
37
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
38
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
39
|
-
|
|
40
|
-
// ../../utilities/core/src/object.ts
|
|
41
|
-
function compact(obj) {
|
|
42
|
-
if (obj === void 0)
|
|
43
|
-
return obj;
|
|
44
|
-
return Object.fromEntries(
|
|
45
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
// ../../utilities/dom/src/query.ts
|
|
50
|
-
function isDocument(el) {
|
|
51
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
52
|
-
}
|
|
53
|
-
function isWindow(value) {
|
|
54
|
-
return value?.toString() === "[object Window]";
|
|
55
|
-
}
|
|
56
|
-
function getDocument(el) {
|
|
57
|
-
if (isWindow(el))
|
|
58
|
-
return el.document;
|
|
59
|
-
if (isDocument(el))
|
|
60
|
-
return el;
|
|
61
|
-
return el?.ownerDocument ?? document;
|
|
62
|
-
}
|
|
63
|
-
function defineDomHelpers(helpers) {
|
|
64
|
-
const dom2 = {
|
|
65
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
66
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
67
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
68
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
69
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
70
|
-
queryById: (ctx, id) => {
|
|
71
|
-
const el = dom2.getById(ctx, id);
|
|
72
|
-
if (!el)
|
|
73
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
74
|
-
return el;
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
return {
|
|
78
|
-
...dom2,
|
|
79
|
-
...helpers
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// ../../utilities/dom/src/listener.ts
|
|
84
|
-
var isRef = (v) => hasProp(v, "current");
|
|
85
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
86
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
87
|
-
node?.addEventListener(eventName, handler, options);
|
|
88
|
-
return () => {
|
|
89
|
-
node?.removeEventListener(eventName, handler, options);
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
// ../../utilities/dom/src/visibility-event.ts
|
|
94
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
95
|
-
const doc = cast(_doc);
|
|
96
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
97
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
98
|
-
callback(!!hidden);
|
|
99
|
-
});
|
|
100
|
-
}
|
|
27
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
28
|
+
var import_utils = require("@zag-js/utils");
|
|
101
29
|
|
|
102
30
|
// src/toast.dom.ts
|
|
103
|
-
var
|
|
31
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
32
|
+
var dom = (0, import_dom_query.createScope)({
|
|
104
33
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
105
34
|
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
106
35
|
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
@@ -125,7 +54,7 @@ function getToastDuration(duration, type) {
|
|
|
125
54
|
var { not, and, or } = import_core.guards;
|
|
126
55
|
function createToastMachine(options = {}) {
|
|
127
56
|
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
|
|
128
|
-
const ctx = compact(restProps);
|
|
57
|
+
const ctx = (0, import_utils.compact)(restProps);
|
|
129
58
|
const computedDuration = getToastDuration(duration, type);
|
|
130
59
|
return (0, import_core.createMachine)(
|
|
131
60
|
{
|
|
@@ -212,8 +141,9 @@ function createToastMachine(options = {}) {
|
|
|
212
141
|
trackDocumentVisibility(ctx2, _evt, { send }) {
|
|
213
142
|
if (!ctx2.pauseOnPageIdle)
|
|
214
143
|
return;
|
|
215
|
-
|
|
216
|
-
|
|
144
|
+
const doc = dom.getDoc(ctx2);
|
|
145
|
+
return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
|
|
146
|
+
send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
|
|
217
147
|
});
|
|
218
148
|
}
|
|
219
149
|
},
|
package/dist/toast.machine.mjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
createToastMachine
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-CUDYFIYR.mjs";
|
|
3
|
+
} from "./chunk-EQTV3BNM.mjs";
|
|
4
|
+
import "./chunk-DBPKSADW.mjs";
|
|
5
|
+
import "./chunk-DUZD3NLM.mjs";
|
|
7
6
|
export {
|
|
8
7
|
createToastMachine
|
|
9
8
|
};
|
package/dist/toast.utils.js
CHANGED
|
@@ -47,11 +47,11 @@ function getToastDuration(duration, type) {
|
|
|
47
47
|
}
|
|
48
48
|
function getGroupPlacementStyle(ctx, placement) {
|
|
49
49
|
const offset = ctx.offsets;
|
|
50
|
-
const
|
|
50
|
+
const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
|
|
51
51
|
const rtl = ctx.dir === "rtl";
|
|
52
|
-
const
|
|
53
|
-
const isRighty =
|
|
54
|
-
const isLefty =
|
|
52
|
+
const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
|
|
53
|
+
const isRighty = computedPlacement.includes("right");
|
|
54
|
+
const isLefty = computedPlacement.includes("left");
|
|
55
55
|
const styles = {
|
|
56
56
|
position: "fixed",
|
|
57
57
|
pointerEvents: ctx.count > 0 ? void 0 : "none",
|
|
@@ -66,20 +66,20 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
66
66
|
if (isLefty)
|
|
67
67
|
alignItems = "flex-start";
|
|
68
68
|
styles.alignItems = alignItems;
|
|
69
|
-
if (
|
|
70
|
-
const offset2 =
|
|
69
|
+
if (computedPlacement.includes("top")) {
|
|
70
|
+
const offset2 = computedOffset.top;
|
|
71
71
|
styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
|
|
72
72
|
}
|
|
73
|
-
if (
|
|
74
|
-
const offset2 =
|
|
73
|
+
if (computedPlacement.includes("bottom")) {
|
|
74
|
+
const offset2 = computedOffset.bottom;
|
|
75
75
|
styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
|
|
76
76
|
}
|
|
77
|
-
if (!
|
|
78
|
-
const offset2 =
|
|
77
|
+
if (!computedPlacement.includes("left")) {
|
|
78
|
+
const offset2 = computedOffset.right;
|
|
79
79
|
styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
|
|
80
80
|
}
|
|
81
|
-
if (!
|
|
82
|
-
const offset2 =
|
|
81
|
+
if (!computedPlacement.includes("right")) {
|
|
82
|
+
const offset2 = computedOffset.left;
|
|
83
83
|
styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
|
|
84
84
|
}
|
|
85
85
|
return styles;
|
package/dist/toast.utils.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/toast",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20230222120620",
|
|
4
4
|
"description": "Core logic for the toast widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,13 +27,14 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@zag-js/anatomy": "0.1.4",
|
|
30
|
-
"@zag-js/core": "0.0.0-dev-
|
|
30
|
+
"@zag-js/core": "0.0.0-dev-20230222120620",
|
|
31
|
+
"@zag-js/dom-query": "0.0.0-dev-20230222120620",
|
|
32
|
+
"@zag-js/dom-event": "0.0.0-dev-20230222120620",
|
|
33
|
+
"@zag-js/utils": "0.3.3",
|
|
31
34
|
"@zag-js/types": "0.3.4"
|
|
32
35
|
},
|
|
33
36
|
"devDependencies": {
|
|
34
|
-
"clean-package": "2.2.0"
|
|
35
|
-
"@zag-js/dom-utils": "0.2.4",
|
|
36
|
-
"@zag-js/utils": "0.3.3"
|
|
37
|
+
"clean-package": "2.2.0"
|
|
37
38
|
},
|
|
38
39
|
"clean-package": "../../../clean-package.config.json",
|
|
39
40
|
"main": "dist/index.js",
|
package/dist/chunk-CUDYFIYR.mjs
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
// ../../utilities/dom/src/query.ts
|
|
2
|
-
function isDocument(el) {
|
|
3
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
4
|
-
}
|
|
5
|
-
function isWindow(value) {
|
|
6
|
-
return value?.toString() === "[object Window]";
|
|
7
|
-
}
|
|
8
|
-
function getDocument(el) {
|
|
9
|
-
if (isWindow(el))
|
|
10
|
-
return el.document;
|
|
11
|
-
if (isDocument(el))
|
|
12
|
-
return el;
|
|
13
|
-
return el?.ownerDocument ?? document;
|
|
14
|
-
}
|
|
15
|
-
function defineDomHelpers(helpers) {
|
|
16
|
-
const dom2 = {
|
|
17
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
18
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
19
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
20
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
21
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
22
|
-
queryById: (ctx, id) => {
|
|
23
|
-
const el = dom2.getById(ctx, id);
|
|
24
|
-
if (!el)
|
|
25
|
-
throw new Error(`Element with id "${id}" not found.`);
|
|
26
|
-
return el;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
return {
|
|
30
|
-
...dom2,
|
|
31
|
-
...helpers
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// src/toast.dom.ts
|
|
36
|
-
var dom = defineDomHelpers({
|
|
37
|
-
getGroupId: (placement) => `toast-group:${placement}`,
|
|
38
|
-
getRootId: (ctx) => `toast:${ctx.id}`,
|
|
39
|
-
getTitleId: (ctx) => `toast:${ctx.id}:title`,
|
|
40
|
-
getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
|
|
41
|
-
getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
|
|
42
|
-
getPortalId: (ctx) => `toast-portal:${ctx.id}`
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
export {
|
|
46
|
-
dom
|
|
47
|
-
};
|
package/dist/chunk-LHAZKBRJ.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// ../../utilities/core/src/functions.ts
|
|
2
|
-
var runIfFn = (v, ...a) => {
|
|
3
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
4
|
-
return res ?? void 0;
|
|
5
|
-
};
|
|
6
|
-
var cast = (v) => v;
|
|
7
|
-
var uuid = /* @__PURE__ */ (() => {
|
|
8
|
-
let id = 0;
|
|
9
|
-
return () => {
|
|
10
|
-
id++;
|
|
11
|
-
return id.toString(36);
|
|
12
|
-
};
|
|
13
|
-
})();
|
|
14
|
-
|
|
15
|
-
export {
|
|
16
|
-
runIfFn,
|
|
17
|
-
cast,
|
|
18
|
-
uuid
|
|
19
|
-
};
|