@zag-js/toast 2.0.0-next.0 → 2.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/toast-group.connect.js +8 -2
- package/dist/toast-group.connect.mjs +8 -2
- package/dist/toast.anatomy.d.mts +2 -2
- package/dist/toast.anatomy.d.ts +2 -2
- package/dist/toast.connect.js +21 -12
- package/dist/toast.connect.mjs +21 -12
- package/dist/toast.machine.js +9 -12
- package/dist/toast.machine.mjs +9 -12
- package/dist/toast.types.d.mts +64 -2
- package/dist/toast.types.d.ts +64 -2
- package/package.json +12 -9
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _zag_js_core from '@zag-js/core';
|
|
2
2
|
import { ToastGroupSchema } from './toast.types.mjs';
|
|
3
|
-
export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.mjs';
|
|
3
|
+
export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, GroupState, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, RootState, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.mjs';
|
|
4
4
|
import { groupConnect } from './toast-group.connect.mjs';
|
|
5
5
|
export { anatomy } from './toast.anatomy.mjs';
|
|
6
6
|
export { connect } from './toast.connect.mjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _zag_js_core from '@zag-js/core';
|
|
2
2
|
import { ToastGroupSchema } from './toast.types.js';
|
|
3
|
-
export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.js';
|
|
3
|
+
export { ActionOptions, ToastApi as Api, ToastGroupApi as GroupApi, ToastGroupMachine as GroupMachine, ToastGroupProps as GroupProps, ToastGroupService as GroupService, GroupState, IntlTranslations, ToastMachine as Machine, Options, Placement, PromiseOptions, ToastProps as Props, RootState, ToastService as Service, Status, StatusChangeDetails, ToastStore as Store, ToastStoreProps as StoreProps, ToastHeight, ToastQueuePriority, Type } from './toast.types.js';
|
|
4
4
|
import { groupConnect } from './toast-group.connect.js';
|
|
5
5
|
export { anatomy } from './toast.anatomy.js';
|
|
6
6
|
export { connect } from './toast.connect.js';
|
|
@@ -39,6 +39,11 @@ var dom = __toESM(require("./toast.dom.js"));
|
|
|
39
39
|
var import_toast2 = require("./toast.utils.js");
|
|
40
40
|
function groupConnect(service, normalize) {
|
|
41
41
|
const { context, prop, send, refs, computed, scope } = service;
|
|
42
|
+
function getGroupState() {
|
|
43
|
+
const placement = computed("placement");
|
|
44
|
+
const [side, align = "center"] = placement.split("-");
|
|
45
|
+
return { placement, side, align };
|
|
46
|
+
}
|
|
42
47
|
return {
|
|
43
48
|
getCount() {
|
|
44
49
|
return context.get("toasts").length;
|
|
@@ -46,12 +51,13 @@ function groupConnect(service, normalize) {
|
|
|
46
51
|
getToasts() {
|
|
47
52
|
return context.get("toasts");
|
|
48
53
|
},
|
|
54
|
+
getGroupState,
|
|
49
55
|
getGroupProps(options = {}) {
|
|
50
56
|
const { label = "Notifications" } = options;
|
|
51
57
|
const { hotkey } = prop("store").attrs;
|
|
52
58
|
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
53
|
-
const
|
|
54
|
-
const
|
|
59
|
+
const groupState = getGroupState();
|
|
60
|
+
const { placement, side, align } = groupState;
|
|
55
61
|
return normalize.element({
|
|
56
62
|
...import_toast.parts.group.attrs(scope.id),
|
|
57
63
|
dir: prop("dir"),
|
|
@@ -5,6 +5,11 @@ import * as dom from "./toast.dom.mjs";
|
|
|
5
5
|
import { getGroupPlacementStyle } from "./toast.utils.mjs";
|
|
6
6
|
function groupConnect(service, normalize) {
|
|
7
7
|
const { context, prop, send, refs, computed, scope } = service;
|
|
8
|
+
function getGroupState() {
|
|
9
|
+
const placement = computed("placement");
|
|
10
|
+
const [side, align = "center"] = placement.split("-");
|
|
11
|
+
return { placement, side, align };
|
|
12
|
+
}
|
|
8
13
|
return {
|
|
9
14
|
getCount() {
|
|
10
15
|
return context.get("toasts").length;
|
|
@@ -12,12 +17,13 @@ function groupConnect(service, normalize) {
|
|
|
12
17
|
getToasts() {
|
|
13
18
|
return context.get("toasts");
|
|
14
19
|
},
|
|
20
|
+
getGroupState,
|
|
15
21
|
getGroupProps(options = {}) {
|
|
16
22
|
const { label = "Notifications" } = options;
|
|
17
23
|
const { hotkey } = prop("store").attrs;
|
|
18
24
|
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
19
|
-
const
|
|
20
|
-
const
|
|
25
|
+
const groupState = getGroupState();
|
|
26
|
+
const { placement, side, align } = groupState;
|
|
21
27
|
return normalize.element({
|
|
22
28
|
...parts.group.attrs(scope.id),
|
|
23
29
|
dir: prop("dir"),
|
package/dist/toast.anatomy.d.mts
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<"description" | "group" | "title" | "root" | "actionTrigger" | "closeTrigger">;
|
|
4
|
+
declare const parts: Record<"description" | "group" | "title" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
|
|
5
5
|
|
|
6
6
|
export { anatomy, parts };
|
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<"description" | "group" | "title" | "root" | "actionTrigger" | "closeTrigger">;
|
|
4
|
+
declare const parts: Record<"description" | "group" | "title" | "root" | "actionTrigger" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
|
|
5
5
|
|
|
6
6
|
export { anatomy, parts };
|
package/dist/toast.connect.js
CHANGED
|
@@ -34,12 +34,16 @@ __export(toast_connect_exports, {
|
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(toast_connect_exports);
|
|
36
36
|
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
+
var import_utils = require("@zag-js/utils");
|
|
37
38
|
var import_toast = require("./toast.anatomy.js");
|
|
38
39
|
var dom = __toESM(require("./toast.dom.js"));
|
|
39
40
|
var import_toast2 = require("./toast.utils.js");
|
|
41
|
+
var defaultTranslations = {
|
|
42
|
+
closeTriggerLabel: "Dismiss notification"
|
|
43
|
+
};
|
|
40
44
|
function connect(service, normalize) {
|
|
41
45
|
const { state, send, prop, scope, context, computed } = service;
|
|
42
|
-
const translations = prop("translations");
|
|
46
|
+
const translations = (0, import_utils.mergeWithDefault)(defaultTranslations, prop("translations"));
|
|
43
47
|
const visible = state.hasTag("visible");
|
|
44
48
|
const paused = state.hasTag("paused");
|
|
45
49
|
const mounted = context.get("mounted");
|
|
@@ -51,6 +55,9 @@ function connect(service, normalize) {
|
|
|
51
55
|
const description = prop("description");
|
|
52
56
|
const action = prop("action");
|
|
53
57
|
const [side, align = "center"] = placement.split("-");
|
|
58
|
+
function getRootState() {
|
|
59
|
+
return { visible, paused, mounted, frontmost, stacked: !!stacked, type, placement, side, align };
|
|
60
|
+
}
|
|
54
61
|
return {
|
|
55
62
|
type,
|
|
56
63
|
title,
|
|
@@ -68,21 +75,23 @@ function connect(service, normalize) {
|
|
|
68
75
|
dismiss() {
|
|
69
76
|
send({ type: "DISMISS", src: "programmatic" });
|
|
70
77
|
},
|
|
78
|
+
getRootState,
|
|
71
79
|
getRootProps() {
|
|
80
|
+
const rootState = getRootState();
|
|
72
81
|
return normalize.element({
|
|
73
82
|
...import_toast.parts.root.attrs(scope.id),
|
|
74
83
|
dir: prop("dir"),
|
|
75
|
-
"data-state": visible ? "open" : "closed",
|
|
76
|
-
"data-type": type,
|
|
77
|
-
"data-placement": placement,
|
|
78
|
-
"data-align": align,
|
|
79
|
-
"data-side": side,
|
|
80
|
-
"data-mounted": (0, import_dom_query.dataAttr)(mounted),
|
|
81
|
-
"data-paused": (0, import_dom_query.dataAttr)(paused),
|
|
82
|
-
"data-first": (0, import_dom_query.dataAttr)(frontmost),
|
|
83
|
-
"data-sibling": (0, import_dom_query.dataAttr)(!frontmost),
|
|
84
|
-
"data-stack": (0, import_dom_query.dataAttr)(stacked),
|
|
85
|
-
"data-overlap": (0, import_dom_query.dataAttr)(!stacked),
|
|
84
|
+
"data-state": rootState.visible ? "open" : "closed",
|
|
85
|
+
"data-type": rootState.type,
|
|
86
|
+
"data-placement": rootState.placement,
|
|
87
|
+
"data-align": rootState.align,
|
|
88
|
+
"data-side": rootState.side,
|
|
89
|
+
"data-mounted": (0, import_dom_query.dataAttr)(rootState.mounted),
|
|
90
|
+
"data-paused": (0, import_dom_query.dataAttr)(rootState.paused),
|
|
91
|
+
"data-first": (0, import_dom_query.dataAttr)(rootState.frontmost),
|
|
92
|
+
"data-sibling": (0, import_dom_query.dataAttr)(!rootState.frontmost),
|
|
93
|
+
"data-stack": (0, import_dom_query.dataAttr)(rootState.stacked),
|
|
94
|
+
"data-overlap": (0, import_dom_query.dataAttr)(!rootState.stacked),
|
|
86
95
|
role: "status",
|
|
87
96
|
"aria-atomic": "true",
|
|
88
97
|
"aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
|
package/dist/toast.connect.mjs
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
// src/toast.connect.ts
|
|
2
2
|
import { dataAttr } from "@zag-js/dom-query";
|
|
3
|
+
import { mergeWithDefault } from "@zag-js/utils";
|
|
3
4
|
import { parts } from "./toast.anatomy.mjs";
|
|
4
5
|
import * as dom from "./toast.dom.mjs";
|
|
5
6
|
import { getGhostAfterStyle, getGhostBeforeStyle, getPlacementStyle } from "./toast.utils.mjs";
|
|
7
|
+
var defaultTranslations = {
|
|
8
|
+
closeTriggerLabel: "Dismiss notification"
|
|
9
|
+
};
|
|
6
10
|
function connect(service, normalize) {
|
|
7
11
|
const { state, send, prop, scope, context, computed } = service;
|
|
8
|
-
const translations = prop("translations");
|
|
12
|
+
const translations = mergeWithDefault(defaultTranslations, prop("translations"));
|
|
9
13
|
const visible = state.hasTag("visible");
|
|
10
14
|
const paused = state.hasTag("paused");
|
|
11
15
|
const mounted = context.get("mounted");
|
|
@@ -17,6 +21,9 @@ function connect(service, normalize) {
|
|
|
17
21
|
const description = prop("description");
|
|
18
22
|
const action = prop("action");
|
|
19
23
|
const [side, align = "center"] = placement.split("-");
|
|
24
|
+
function getRootState() {
|
|
25
|
+
return { visible, paused, mounted, frontmost, stacked: !!stacked, type, placement, side, align };
|
|
26
|
+
}
|
|
20
27
|
return {
|
|
21
28
|
type,
|
|
22
29
|
title,
|
|
@@ -34,21 +41,23 @@ function connect(service, normalize) {
|
|
|
34
41
|
dismiss() {
|
|
35
42
|
send({ type: "DISMISS", src: "programmatic" });
|
|
36
43
|
},
|
|
44
|
+
getRootState,
|
|
37
45
|
getRootProps() {
|
|
46
|
+
const rootState = getRootState();
|
|
38
47
|
return normalize.element({
|
|
39
48
|
...parts.root.attrs(scope.id),
|
|
40
49
|
dir: prop("dir"),
|
|
41
|
-
"data-state": visible ? "open" : "closed",
|
|
42
|
-
"data-type": type,
|
|
43
|
-
"data-placement": placement,
|
|
44
|
-
"data-align": align,
|
|
45
|
-
"data-side": side,
|
|
46
|
-
"data-mounted": dataAttr(mounted),
|
|
47
|
-
"data-paused": dataAttr(paused),
|
|
48
|
-
"data-first": dataAttr(frontmost),
|
|
49
|
-
"data-sibling": dataAttr(!frontmost),
|
|
50
|
-
"data-stack": dataAttr(stacked),
|
|
51
|
-
"data-overlap": dataAttr(!stacked),
|
|
50
|
+
"data-state": rootState.visible ? "open" : "closed",
|
|
51
|
+
"data-type": rootState.type,
|
|
52
|
+
"data-placement": rootState.placement,
|
|
53
|
+
"data-align": rootState.align,
|
|
54
|
+
"data-side": rootState.side,
|
|
55
|
+
"data-mounted": dataAttr(rootState.mounted),
|
|
56
|
+
"data-paused": dataAttr(rootState.paused),
|
|
57
|
+
"data-first": dataAttr(rootState.frontmost),
|
|
58
|
+
"data-sibling": dataAttr(!rootState.frontmost),
|
|
59
|
+
"data-stack": dataAttr(rootState.stacked),
|
|
60
|
+
"data-overlap": dataAttr(!rootState.stacked),
|
|
52
61
|
role: "status",
|
|
53
62
|
"aria-atomic": "true",
|
|
54
63
|
"aria-describedby": description ? dom.getDescriptionId(scope) : void 0,
|
package/dist/toast.machine.js
CHANGED
|
@@ -45,10 +45,6 @@ var machine = (0, import_core.createMachine)({
|
|
|
45
45
|
return {
|
|
46
46
|
closable: true,
|
|
47
47
|
...props,
|
|
48
|
-
translations: {
|
|
49
|
-
closeTriggerLabel: "Dismiss notification",
|
|
50
|
-
...props.translations
|
|
51
|
-
},
|
|
52
48
|
duration: (0, import_toast.getToastDuration)(props.duration, props.type)
|
|
53
49
|
};
|
|
54
50
|
},
|
|
@@ -205,10 +201,7 @@ var machine = (0, import_core.createMachine)({
|
|
|
205
201
|
const rootEl = dom.getRootEl(scope);
|
|
206
202
|
if (!rootEl) return;
|
|
207
203
|
const syncHeight = () => {
|
|
208
|
-
const
|
|
209
|
-
rootEl.style.height = "auto";
|
|
210
|
-
const height = rootEl.getBoundingClientRect().height;
|
|
211
|
-
rootEl.style.height = originalHeight;
|
|
204
|
+
const height = measureLayoutHeight(rootEl);
|
|
212
205
|
const item = { id: prop("id"), height };
|
|
213
206
|
setHeight(prop("parent"), item);
|
|
214
207
|
};
|
|
@@ -238,10 +231,7 @@ var machine = (0, import_core.createMachine)({
|
|
|
238
231
|
queueMicrotask(() => {
|
|
239
232
|
const rootEl = dom.getRootEl(scope);
|
|
240
233
|
if (!rootEl) return;
|
|
241
|
-
const
|
|
242
|
-
rootEl.style.height = "auto";
|
|
243
|
-
const height = rootEl.getBoundingClientRect().height;
|
|
244
|
-
rootEl.style.height = originalHeight;
|
|
234
|
+
const height = measureLayoutHeight(rootEl);
|
|
245
235
|
context.set("initialHeight", height);
|
|
246
236
|
const item = { id: prop("id"), height };
|
|
247
237
|
setHeight(prop("parent"), item);
|
|
@@ -278,6 +268,13 @@ var machine = (0, import_core.createMachine)({
|
|
|
278
268
|
}
|
|
279
269
|
}
|
|
280
270
|
});
|
|
271
|
+
function measureLayoutHeight(el) {
|
|
272
|
+
const prevHeight = el.style.height;
|
|
273
|
+
el.style.height = "auto";
|
|
274
|
+
const height = el.offsetHeight;
|
|
275
|
+
el.style.height = prevHeight;
|
|
276
|
+
return height;
|
|
277
|
+
}
|
|
281
278
|
function setHeight(parent, item) {
|
|
282
279
|
const { id, height } = item;
|
|
283
280
|
parent.context.set("heights", (prev) => {
|
package/dist/toast.machine.mjs
CHANGED
|
@@ -11,10 +11,6 @@ var machine = createMachine({
|
|
|
11
11
|
return {
|
|
12
12
|
closable: true,
|
|
13
13
|
...props,
|
|
14
|
-
translations: {
|
|
15
|
-
closeTriggerLabel: "Dismiss notification",
|
|
16
|
-
...props.translations
|
|
17
|
-
},
|
|
18
14
|
duration: getToastDuration(props.duration, props.type)
|
|
19
15
|
};
|
|
20
16
|
},
|
|
@@ -171,10 +167,7 @@ var machine = createMachine({
|
|
|
171
167
|
const rootEl = dom.getRootEl(scope);
|
|
172
168
|
if (!rootEl) return;
|
|
173
169
|
const syncHeight = () => {
|
|
174
|
-
const
|
|
175
|
-
rootEl.style.height = "auto";
|
|
176
|
-
const height = rootEl.getBoundingClientRect().height;
|
|
177
|
-
rootEl.style.height = originalHeight;
|
|
170
|
+
const height = measureLayoutHeight(rootEl);
|
|
178
171
|
const item = { id: prop("id"), height };
|
|
179
172
|
setHeight(prop("parent"), item);
|
|
180
173
|
};
|
|
@@ -204,10 +197,7 @@ var machine = createMachine({
|
|
|
204
197
|
queueMicrotask(() => {
|
|
205
198
|
const rootEl = dom.getRootEl(scope);
|
|
206
199
|
if (!rootEl) return;
|
|
207
|
-
const
|
|
208
|
-
rootEl.style.height = "auto";
|
|
209
|
-
const height = rootEl.getBoundingClientRect().height;
|
|
210
|
-
rootEl.style.height = originalHeight;
|
|
200
|
+
const height = measureLayoutHeight(rootEl);
|
|
211
201
|
context.set("initialHeight", height);
|
|
212
202
|
const item = { id: prop("id"), height };
|
|
213
203
|
setHeight(prop("parent"), item);
|
|
@@ -244,6 +234,13 @@ var machine = createMachine({
|
|
|
244
234
|
}
|
|
245
235
|
}
|
|
246
236
|
});
|
|
237
|
+
function measureLayoutHeight(el) {
|
|
238
|
+
const prevHeight = el.style.height;
|
|
239
|
+
el.style.height = "auto";
|
|
240
|
+
const height = el.offsetHeight;
|
|
241
|
+
el.style.height = prevHeight;
|
|
242
|
+
return height;
|
|
243
|
+
}
|
|
247
244
|
function setHeight(parent, item) {
|
|
248
245
|
const { id, height } = item;
|
|
249
246
|
parent.context.set("heights", (prev) => {
|
package/dist/toast.types.d.mts
CHANGED
|
@@ -26,6 +26,44 @@ interface ToastHeight {
|
|
|
26
26
|
*/
|
|
27
27
|
height: number;
|
|
28
28
|
}
|
|
29
|
+
interface RootState {
|
|
30
|
+
/**
|
|
31
|
+
* Whether the toast is visible
|
|
32
|
+
*/
|
|
33
|
+
visible: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Whether the toast is paused
|
|
36
|
+
*/
|
|
37
|
+
paused: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the toast has mounted into the DOM
|
|
40
|
+
*/
|
|
41
|
+
mounted: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the toast is the frontmost (topmost) toast in the group
|
|
44
|
+
*/
|
|
45
|
+
frontmost: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the toasts in the group are stacked instead of overlapping
|
|
48
|
+
*/
|
|
49
|
+
stacked: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* The type of the toast
|
|
52
|
+
*/
|
|
53
|
+
type: Type;
|
|
54
|
+
/**
|
|
55
|
+
* The placement of the toast
|
|
56
|
+
*/
|
|
57
|
+
placement: Placement;
|
|
58
|
+
/**
|
|
59
|
+
* The side of the toast placement
|
|
60
|
+
*/
|
|
61
|
+
side: string;
|
|
62
|
+
/**
|
|
63
|
+
* The horizontal alignment of the toast placement
|
|
64
|
+
*/
|
|
65
|
+
align: string;
|
|
66
|
+
}
|
|
29
67
|
interface ActionOptions {
|
|
30
68
|
/**
|
|
31
69
|
* The label of the action
|
|
@@ -110,7 +148,8 @@ interface ToastProps<T = any> extends Omit<CommonProperties, "id">, Options<T> {
|
|
|
110
148
|
}
|
|
111
149
|
type ToastPropsWithDefault = "type" | "parent" | "duration" | "id" | "removeDelay";
|
|
112
150
|
type ToastSchema<O = any> = {
|
|
113
|
-
props:
|
|
151
|
+
props: ToastProps<O>;
|
|
152
|
+
defaultPropKey: Extract<ToastPropsWithDefault, keyof ToastProps<O>>;
|
|
114
153
|
context: {
|
|
115
154
|
mounted: boolean;
|
|
116
155
|
initialHeight: number;
|
|
@@ -194,6 +233,7 @@ interface ToastGroupProps extends DirectionProperty, CommonProperties {
|
|
|
194
233
|
type ToastGroupSchema = {
|
|
195
234
|
state: "stack" | "overlap";
|
|
196
235
|
props: ToastGroupProps;
|
|
236
|
+
defaultPropKey: never;
|
|
197
237
|
context: {
|
|
198
238
|
toasts: RequiredBy<ToastProps, Extract<ToastPropsWithDefault, keyof ToastProps>>[];
|
|
199
239
|
heights: ToastHeight[];
|
|
@@ -317,6 +357,20 @@ interface GroupProps {
|
|
|
317
357
|
*/
|
|
318
358
|
label?: string | undefined;
|
|
319
359
|
}
|
|
360
|
+
interface GroupState {
|
|
361
|
+
/**
|
|
362
|
+
* The placement of the toast group
|
|
363
|
+
*/
|
|
364
|
+
placement: Placement;
|
|
365
|
+
/**
|
|
366
|
+
* The side of the toast group placement
|
|
367
|
+
*/
|
|
368
|
+
side: string;
|
|
369
|
+
/**
|
|
370
|
+
* The horizontal alignment of the toast group placement
|
|
371
|
+
*/
|
|
372
|
+
align: string;
|
|
373
|
+
}
|
|
320
374
|
interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
|
|
321
375
|
/**
|
|
322
376
|
* The total number of toasts
|
|
@@ -330,6 +384,10 @@ interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
330
384
|
* Subscribe to the toast group
|
|
331
385
|
*/
|
|
332
386
|
subscribe: (callback: (toasts: Options<O>[]) => void) => VoidFunction;
|
|
387
|
+
/**
|
|
388
|
+
* Returns the state of the group
|
|
389
|
+
*/
|
|
390
|
+
getGroupState: () => GroupState;
|
|
333
391
|
getGroupProps: (options?: GroupProps) => T["element"];
|
|
334
392
|
}
|
|
335
393
|
interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
@@ -373,6 +431,10 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
373
431
|
* Function to instantly dismiss the toast.
|
|
374
432
|
*/
|
|
375
433
|
dismiss: VoidFunction;
|
|
434
|
+
/**
|
|
435
|
+
* Returns the state of the root
|
|
436
|
+
*/
|
|
437
|
+
getRootState: () => RootState;
|
|
376
438
|
getRootProps: () => T["element"];
|
|
377
439
|
getTitleProps: () => T["element"];
|
|
378
440
|
getGhostBeforeProps: () => T["element"];
|
|
@@ -382,4 +444,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
382
444
|
getActionTriggerProps: () => T["button"];
|
|
383
445
|
}
|
|
384
446
|
|
|
385
|
-
export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
|
|
447
|
+
export type { ActionOptions, GroupProps, GroupState, IntlTranslations, Options, Placement, PromiseOptions, RootState, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
|
package/dist/toast.types.d.ts
CHANGED
|
@@ -26,6 +26,44 @@ interface ToastHeight {
|
|
|
26
26
|
*/
|
|
27
27
|
height: number;
|
|
28
28
|
}
|
|
29
|
+
interface RootState {
|
|
30
|
+
/**
|
|
31
|
+
* Whether the toast is visible
|
|
32
|
+
*/
|
|
33
|
+
visible: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Whether the toast is paused
|
|
36
|
+
*/
|
|
37
|
+
paused: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the toast has mounted into the DOM
|
|
40
|
+
*/
|
|
41
|
+
mounted: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the toast is the frontmost (topmost) toast in the group
|
|
44
|
+
*/
|
|
45
|
+
frontmost: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the toasts in the group are stacked instead of overlapping
|
|
48
|
+
*/
|
|
49
|
+
stacked: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* The type of the toast
|
|
52
|
+
*/
|
|
53
|
+
type: Type;
|
|
54
|
+
/**
|
|
55
|
+
* The placement of the toast
|
|
56
|
+
*/
|
|
57
|
+
placement: Placement;
|
|
58
|
+
/**
|
|
59
|
+
* The side of the toast placement
|
|
60
|
+
*/
|
|
61
|
+
side: string;
|
|
62
|
+
/**
|
|
63
|
+
* The horizontal alignment of the toast placement
|
|
64
|
+
*/
|
|
65
|
+
align: string;
|
|
66
|
+
}
|
|
29
67
|
interface ActionOptions {
|
|
30
68
|
/**
|
|
31
69
|
* The label of the action
|
|
@@ -110,7 +148,8 @@ interface ToastProps<T = any> extends Omit<CommonProperties, "id">, Options<T> {
|
|
|
110
148
|
}
|
|
111
149
|
type ToastPropsWithDefault = "type" | "parent" | "duration" | "id" | "removeDelay";
|
|
112
150
|
type ToastSchema<O = any> = {
|
|
113
|
-
props:
|
|
151
|
+
props: ToastProps<O>;
|
|
152
|
+
defaultPropKey: Extract<ToastPropsWithDefault, keyof ToastProps<O>>;
|
|
114
153
|
context: {
|
|
115
154
|
mounted: boolean;
|
|
116
155
|
initialHeight: number;
|
|
@@ -194,6 +233,7 @@ interface ToastGroupProps extends DirectionProperty, CommonProperties {
|
|
|
194
233
|
type ToastGroupSchema = {
|
|
195
234
|
state: "stack" | "overlap";
|
|
196
235
|
props: ToastGroupProps;
|
|
236
|
+
defaultPropKey: never;
|
|
197
237
|
context: {
|
|
198
238
|
toasts: RequiredBy<ToastProps, Extract<ToastPropsWithDefault, keyof ToastProps>>[];
|
|
199
239
|
heights: ToastHeight[];
|
|
@@ -317,6 +357,20 @@ interface GroupProps {
|
|
|
317
357
|
*/
|
|
318
358
|
label?: string | undefined;
|
|
319
359
|
}
|
|
360
|
+
interface GroupState {
|
|
361
|
+
/**
|
|
362
|
+
* The placement of the toast group
|
|
363
|
+
*/
|
|
364
|
+
placement: Placement;
|
|
365
|
+
/**
|
|
366
|
+
* The side of the toast group placement
|
|
367
|
+
*/
|
|
368
|
+
side: string;
|
|
369
|
+
/**
|
|
370
|
+
* The horizontal alignment of the toast group placement
|
|
371
|
+
*/
|
|
372
|
+
align: string;
|
|
373
|
+
}
|
|
320
374
|
interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
|
|
321
375
|
/**
|
|
322
376
|
* The total number of toasts
|
|
@@ -330,6 +384,10 @@ interface ToastGroupApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
330
384
|
* Subscribe to the toast group
|
|
331
385
|
*/
|
|
332
386
|
subscribe: (callback: (toasts: Options<O>[]) => void) => VoidFunction;
|
|
387
|
+
/**
|
|
388
|
+
* Returns the state of the group
|
|
389
|
+
*/
|
|
390
|
+
getGroupState: () => GroupState;
|
|
333
391
|
getGroupProps: (options?: GroupProps) => T["element"];
|
|
334
392
|
}
|
|
335
393
|
interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
@@ -373,6 +431,10 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
373
431
|
* Function to instantly dismiss the toast.
|
|
374
432
|
*/
|
|
375
433
|
dismiss: VoidFunction;
|
|
434
|
+
/**
|
|
435
|
+
* Returns the state of the root
|
|
436
|
+
*/
|
|
437
|
+
getRootState: () => RootState;
|
|
376
438
|
getRootProps: () => T["element"];
|
|
377
439
|
getTitleProps: () => T["element"];
|
|
378
440
|
getGhostBeforeProps: () => T["element"];
|
|
@@ -382,4 +444,4 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
|
|
|
382
444
|
getActionTriggerProps: () => T["button"];
|
|
383
445
|
}
|
|
384
446
|
|
|
385
|
-
export type { ActionOptions, GroupProps, IntlTranslations, Options, Placement, PromiseOptions, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
|
|
447
|
+
export type { ActionOptions, GroupProps, GroupState, IntlTranslations, Options, Placement, PromiseOptions, RootState, Status, StatusChangeDetails, ToastApi, ToastGroupApi, ToastGroupMachine, ToastGroupProps, ToastGroupSchema, ToastGroupService, ToastHeight, ToastMachine, ToastProps, ToastQueuePriority, ToastSchema, ToastService, ToastStore, ToastStoreProps, Type };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/toast",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.2",
|
|
4
4
|
"description": "Core logic for the toast widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -14,7 +14,10 @@
|
|
|
14
14
|
"author": "Segun Adebayo <sage@adebayosegun.com>",
|
|
15
15
|
"homepage": "https://github.com/chakra-ui/zag#readme",
|
|
16
16
|
"license": "MIT",
|
|
17
|
-
"repository":
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/chakra-ui/zag/tree/main/packages/toast"
|
|
20
|
+
},
|
|
18
21
|
"sideEffects": false,
|
|
19
22
|
"files": [
|
|
20
23
|
"dist"
|
|
@@ -26,12 +29,12 @@
|
|
|
26
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
27
30
|
},
|
|
28
31
|
"dependencies": {
|
|
29
|
-
"@zag-js/anatomy": "2.0.0-next.
|
|
30
|
-
"@zag-js/core": "2.0.0-next.
|
|
31
|
-
"@zag-js/dom-query": "2.0.0-next.
|
|
32
|
-
"@zag-js/dismissable": "2.0.0-next.
|
|
33
|
-
"@zag-js/utils": "2.0.0-next.
|
|
34
|
-
"@zag-js/types": "2.0.0-next.
|
|
32
|
+
"@zag-js/anatomy": "2.0.0-next.2",
|
|
33
|
+
"@zag-js/core": "2.0.0-next.2",
|
|
34
|
+
"@zag-js/dom-query": "2.0.0-next.2",
|
|
35
|
+
"@zag-js/dismissable": "2.0.0-next.2",
|
|
36
|
+
"@zag-js/utils": "2.0.0-next.2",
|
|
37
|
+
"@zag-js/types": "2.0.0-next.2"
|
|
35
38
|
},
|
|
36
39
|
"devDependencies": {
|
|
37
40
|
"clean-package": "2.2.0"
|
|
@@ -65,7 +68,7 @@
|
|
|
65
68
|
},
|
|
66
69
|
"scripts": {
|
|
67
70
|
"build": "tsup",
|
|
68
|
-
"lint": "
|
|
71
|
+
"lint": "oxlint src",
|
|
69
72
|
"typecheck": "tsc --noEmit"
|
|
70
73
|
}
|
|
71
74
|
}
|