@zag-js/toast 0.1.8 → 0.1.11
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/LICENSE +21 -0
- package/dist/index.d.ts +196 -8
- package/dist/index.js +109 -127
- package/dist/index.mjs +100 -129
- package/package.json +14 -11
- package/dist/toast-group.connect.d.ts +0 -24
- package/dist/toast-group.machine.d.ts +0 -2
- package/dist/toast.connect.d.ts +0 -17
- package/dist/toast.dom.d.ts +0 -12
- package/dist/toast.machine.d.ts +0 -2
- package/dist/toast.types.d.ts +0 -154
- package/dist/toast.utils.d.ts +0 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,199 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
2
|
+
import { Machine, StateMachine } from '@zag-js/core';
|
|
3
|
+
import { RootProperties, CommonProperties, Direction, DirectionProperty, Context, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
4
|
+
|
|
5
|
+
declare type Type = "success" | "error" | "loading" | "info" | "custom";
|
|
6
|
+
declare type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
|
|
7
|
+
declare type SharedContext = {
|
|
8
|
+
/**
|
|
9
|
+
* Whether to pause toast when the user leaves the browser tab
|
|
10
|
+
*/
|
|
11
|
+
pauseOnPageIdle?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Whether to pause the toast when interacted with
|
|
14
|
+
*/
|
|
15
|
+
pauseOnInteraction?: boolean;
|
|
16
|
+
};
|
|
17
|
+
declare type ToastOptions = {
|
|
18
|
+
/**
|
|
19
|
+
* The unique id of the toast
|
|
20
|
+
*/
|
|
21
|
+
id: string;
|
|
22
|
+
/**
|
|
23
|
+
* The type of the toast
|
|
24
|
+
*/
|
|
25
|
+
type: Type;
|
|
26
|
+
/**
|
|
27
|
+
* The placement of the toast
|
|
28
|
+
*/
|
|
29
|
+
placement: Placement;
|
|
30
|
+
/**
|
|
31
|
+
* The message of the toast
|
|
32
|
+
*/
|
|
33
|
+
title?: string;
|
|
34
|
+
/**
|
|
35
|
+
* The description of the toast
|
|
36
|
+
*/
|
|
37
|
+
description?: string;
|
|
38
|
+
/**
|
|
39
|
+
* The duration the toast will be visible
|
|
40
|
+
*/
|
|
41
|
+
duration: number;
|
|
42
|
+
/**
|
|
43
|
+
* Custom function to render the toast element.
|
|
44
|
+
*/
|
|
45
|
+
render?: (options: RenderOptions) => any;
|
|
46
|
+
/**
|
|
47
|
+
* The duration for the toast to kept alive before it is removed.
|
|
48
|
+
* Useful for exit transitions.
|
|
49
|
+
*/
|
|
50
|
+
removeDelay?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Function called when the toast has been closed and removed
|
|
53
|
+
*/
|
|
54
|
+
onClose?: VoidFunction;
|
|
55
|
+
/**
|
|
56
|
+
* Function called when the toast is leaving
|
|
57
|
+
*/
|
|
58
|
+
onClosing?: VoidFunction;
|
|
59
|
+
/**
|
|
60
|
+
* Function called when the toast is shown
|
|
61
|
+
*/
|
|
62
|
+
onOpen?: VoidFunction;
|
|
63
|
+
/**
|
|
64
|
+
* Function called when the toast is updated
|
|
65
|
+
*/
|
|
66
|
+
onUpdate?: VoidFunction;
|
|
67
|
+
};
|
|
68
|
+
declare type Options = Partial<ToastOptions>;
|
|
69
|
+
declare type RenderOptions = Omit<ToastOptions, "render"> & {
|
|
70
|
+
dismiss(): void;
|
|
71
|
+
};
|
|
72
|
+
declare type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
|
|
73
|
+
/**
|
|
74
|
+
* The duration for the toast to kept alive before it is removed.
|
|
75
|
+
* Useful for exit transitions.
|
|
76
|
+
*/
|
|
77
|
+
removeDelay: number;
|
|
78
|
+
/**
|
|
79
|
+
* The document's text/writing direction.
|
|
80
|
+
*/
|
|
81
|
+
dir?: Direction;
|
|
82
|
+
/**
|
|
83
|
+
* The time the toast was created
|
|
84
|
+
*/
|
|
85
|
+
createdAt: number;
|
|
86
|
+
/**
|
|
87
|
+
* The time left before the toast is removed
|
|
88
|
+
*/
|
|
89
|
+
remaining: number;
|
|
90
|
+
};
|
|
91
|
+
declare type MachineState = {
|
|
92
|
+
value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
|
|
93
|
+
tags: "visible" | "paused" | "updating";
|
|
94
|
+
};
|
|
95
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
96
|
+
declare type Send = StateMachine.Send;
|
|
97
|
+
declare type Service = Machine<MachineContext, MachineState>;
|
|
98
|
+
declare type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
|
|
99
|
+
/**
|
|
100
|
+
* The gutter or spacing between toasts
|
|
101
|
+
*/
|
|
102
|
+
gutter: string;
|
|
103
|
+
/**
|
|
104
|
+
* The z-index applied to each toast group
|
|
105
|
+
*/
|
|
106
|
+
zIndex: number;
|
|
107
|
+
/**
|
|
108
|
+
* The maximum number of toasts that can be shown at once
|
|
109
|
+
*/
|
|
110
|
+
max: number;
|
|
111
|
+
/**
|
|
112
|
+
* The offset from the safe environment edge of the viewport
|
|
113
|
+
*/
|
|
114
|
+
offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
|
|
115
|
+
};
|
|
116
|
+
declare type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
|
|
117
|
+
declare type GroupComputedContext = Readonly<{
|
|
118
|
+
/**
|
|
119
|
+
* @computed
|
|
120
|
+
* The total number of toasts in the group
|
|
121
|
+
*/
|
|
122
|
+
readonly count: number;
|
|
123
|
+
}>;
|
|
124
|
+
declare type GroupPrivateContext = Context<{}>;
|
|
125
|
+
declare type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
|
|
126
|
+
declare type GroupState = StateMachine.State<GroupMachineContext>;
|
|
127
|
+
declare type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
|
|
128
|
+
declare type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
|
|
129
|
+
declare type PromiseOptions<Value> = {
|
|
130
|
+
loading: ToastOptions;
|
|
131
|
+
success: MaybeFunction<ToastOptions, Value>;
|
|
132
|
+
error: MaybeFunction<ToastOptions, Error>;
|
|
133
|
+
};
|
|
134
|
+
declare type GroupProps = {
|
|
135
|
+
placement: Placement;
|
|
136
|
+
label?: string;
|
|
137
|
+
};
|
|
138
|
+
declare type Toaster = {
|
|
139
|
+
count: number;
|
|
140
|
+
isVisible(id: string): boolean;
|
|
141
|
+
upsert(options: ToastOptions): string | undefined;
|
|
142
|
+
create(options: ToastOptions): string | undefined;
|
|
143
|
+
success(options: ToastOptions): string | undefined;
|
|
144
|
+
error(options: ToastOptions): string | undefined;
|
|
145
|
+
loading(options: ToastOptions): string | undefined;
|
|
146
|
+
dismiss(id?: string | undefined): void;
|
|
147
|
+
remove(id?: string | undefined): void;
|
|
148
|
+
promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
|
|
152
|
+
count: number;
|
|
153
|
+
toasts: Service[];
|
|
154
|
+
toastsByPlacement: Partial<Record<Placement, Service[]>>;
|
|
155
|
+
isVisible(id: string): boolean;
|
|
156
|
+
create(options: Options): string | undefined;
|
|
157
|
+
upsert(options: Options): string | undefined;
|
|
158
|
+
dismiss(id?: string): void;
|
|
159
|
+
remove(id?: string): void;
|
|
160
|
+
dismissByPlacement(placement: Placement): void;
|
|
161
|
+
update(id: string, options: Options): string | undefined;
|
|
162
|
+
loading(options: Options): string | undefined;
|
|
163
|
+
success(options: Options): string | undefined;
|
|
164
|
+
error(options: Options): string | undefined;
|
|
165
|
+
promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
|
|
166
|
+
pause(id?: string): void;
|
|
167
|
+
resume(id?: string): void;
|
|
168
|
+
getGroupProps(options: GroupProps): T["element"];
|
|
169
|
+
createPortal(): HTMLElement;
|
|
170
|
+
subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
declare function groupMachine(ctx: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
|
|
174
|
+
|
|
175
|
+
declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
176
|
+
|
|
177
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
178
|
+
type: Type;
|
|
179
|
+
title: string | undefined;
|
|
180
|
+
placement: Placement;
|
|
181
|
+
isVisible: boolean;
|
|
182
|
+
isPaused: boolean;
|
|
183
|
+
pause(): void;
|
|
184
|
+
resume(): void;
|
|
185
|
+
dismiss(): void;
|
|
186
|
+
rootProps: T["element"];
|
|
187
|
+
progressbarProps: T["element"];
|
|
188
|
+
titleProps: T["element"];
|
|
189
|
+
closeButtonProps: T["button"];
|
|
190
|
+
render(): any;
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
declare const group: {
|
|
8
194
|
connect: typeof groupConnect;
|
|
9
195
|
machine: typeof groupMachine;
|
|
10
196
|
};
|
|
11
|
-
|
|
197
|
+
declare function api(): Toaster | undefined;
|
|
198
|
+
|
|
199
|
+
export { GroupMachineContext, MachineContext, MachineState, Placement, Service, Type, api, connect, createToastMachine as createMachine, group };
|
package/dist/index.js
CHANGED
|
@@ -1,37 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
-
var __objRest = (source, exclude) => {
|
|
24
|
-
var target = {};
|
|
25
|
-
for (var prop in source)
|
|
26
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
-
target[prop] = source[prop];
|
|
28
|
-
if (source != null && __getOwnPropSymbols)
|
|
29
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
-
target[prop] = source[prop];
|
|
32
|
-
}
|
|
33
|
-
return target;
|
|
34
|
-
};
|
|
35
6
|
var __export = (target, all) => {
|
|
36
7
|
for (var name in all)
|
|
37
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -56,11 +27,67 @@ __export(src_exports, {
|
|
|
56
27
|
});
|
|
57
28
|
module.exports = __toCommonJS(src_exports);
|
|
58
29
|
|
|
59
|
-
// ../../utilities/
|
|
60
|
-
var
|
|
30
|
+
// ../../utilities/dom/dist/index.mjs
|
|
31
|
+
var dataAttr = (guard) => {
|
|
32
|
+
return guard ? "" : void 0;
|
|
33
|
+
};
|
|
34
|
+
var MAX_Z_INDEX = 2147483647;
|
|
61
35
|
var runIfFn = (v, ...a) => {
|
|
62
36
|
const res = typeof v === "function" ? v(...a) : v;
|
|
63
|
-
return res
|
|
37
|
+
return res ?? void 0;
|
|
38
|
+
};
|
|
39
|
+
var cast = (v) => v;
|
|
40
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
41
|
+
var isDom = () => typeof window !== "undefined";
|
|
42
|
+
function isDocument(el) {
|
|
43
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
44
|
+
}
|
|
45
|
+
function isWindow(value) {
|
|
46
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
47
|
+
}
|
|
48
|
+
function getDocument(el) {
|
|
49
|
+
if (isWindow(el))
|
|
50
|
+
return el.document;
|
|
51
|
+
if (isDocument(el))
|
|
52
|
+
return el;
|
|
53
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
54
|
+
}
|
|
55
|
+
function defineDomHelpers(helpers) {
|
|
56
|
+
const dom2 = {
|
|
57
|
+
getRootNode: (ctx) => {
|
|
58
|
+
var _a;
|
|
59
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
60
|
+
},
|
|
61
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
62
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
63
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
64
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
65
|
+
};
|
|
66
|
+
return {
|
|
67
|
+
...dom2,
|
|
68
|
+
...helpers
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
var isRef = (v) => hasProp(v, "current");
|
|
72
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
73
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
74
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
75
|
+
return () => {
|
|
76
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
function trackDocumentVisibility(_doc, callback) {
|
|
80
|
+
const doc = cast(_doc);
|
|
81
|
+
return addDomEvent(doc, "visibilitychange", () => {
|
|
82
|
+
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
83
|
+
callback(!!hidden);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// ../../utilities/core/dist/index.mjs
|
|
88
|
+
var runIfFn2 = (v, ...a) => {
|
|
89
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
90
|
+
return res ?? void 0;
|
|
64
91
|
};
|
|
65
92
|
var uuid = /* @__PURE__ */ (() => {
|
|
66
93
|
let id = 0;
|
|
@@ -72,7 +99,7 @@ var uuid = /* @__PURE__ */ (() => {
|
|
|
72
99
|
function warn(...a) {
|
|
73
100
|
const m = a.length === 1 ? a[0] : a[1];
|
|
74
101
|
const c = a.length === 2 ? a[0] : true;
|
|
75
|
-
if (c &&
|
|
102
|
+
if (c && process.env.NODE_ENV !== "production") {
|
|
76
103
|
console.warn(m);
|
|
77
104
|
}
|
|
78
105
|
}
|
|
@@ -80,31 +107,13 @@ function warn(...a) {
|
|
|
80
107
|
// src/toast-group.connect.ts
|
|
81
108
|
var import_core = require("@zag-js/core");
|
|
82
109
|
|
|
83
|
-
// ../../types/dist/index.mjs
|
|
84
|
-
function createNormalizer(fn) {
|
|
85
|
-
return new Proxy({}, {
|
|
86
|
-
get() {
|
|
87
|
-
return fn;
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
92
|
-
|
|
93
110
|
// src/toast.dom.ts
|
|
94
|
-
var dom = {
|
|
95
|
-
getDoc: (ctx) => {
|
|
96
|
-
var _a;
|
|
97
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
98
|
-
},
|
|
99
|
-
getRootNode: (ctx) => {
|
|
100
|
-
var _a;
|
|
101
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
102
|
-
},
|
|
111
|
+
var dom = defineDomHelpers({
|
|
103
112
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
104
113
|
getContainerId: (ctx) => `toast:${ctx.id}`,
|
|
105
114
|
getTitleId: (ctx) => `toast-title:${ctx.id}`,
|
|
106
115
|
getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
|
|
107
|
-
getPortalId: (ctx) => `toast-portal:${ctx.
|
|
116
|
+
getPortalId: (ctx) => `toast-portal:${ctx.id}`,
|
|
108
117
|
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
|
|
109
118
|
createPortalEl: (ctx) => {
|
|
110
119
|
const existing = dom.getPortalEl(ctx);
|
|
@@ -114,7 +123,7 @@ var dom = {
|
|
|
114
123
|
portal.id = dom.getPortalId(ctx);
|
|
115
124
|
return portal;
|
|
116
125
|
}
|
|
117
|
-
};
|
|
126
|
+
});
|
|
118
127
|
|
|
119
128
|
// src/toast.utils.ts
|
|
120
129
|
function getToastsByPlacement(toasts) {
|
|
@@ -134,7 +143,7 @@ var defaultTimeouts = {
|
|
|
134
143
|
custom: 5e3
|
|
135
144
|
};
|
|
136
145
|
function getToastDuration(duration, type) {
|
|
137
|
-
return duration
|
|
146
|
+
return duration ?? defaultTimeouts[type];
|
|
138
147
|
}
|
|
139
148
|
function getGroupPlacementStyle(ctx, placement) {
|
|
140
149
|
const offset = ctx.offsets;
|
|
@@ -178,7 +187,7 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
178
187
|
|
|
179
188
|
// src/toast-group.connect.ts
|
|
180
189
|
var toaster = {};
|
|
181
|
-
function groupConnect(state, send, normalize
|
|
190
|
+
function groupConnect(state, send, normalize) {
|
|
182
191
|
const group2 = {
|
|
183
192
|
count: state.context.count,
|
|
184
193
|
toasts: state.context.toasts,
|
|
@@ -193,7 +202,7 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
193
202
|
const id = options.id ? options.id : uid;
|
|
194
203
|
if (group2.isVisible(id))
|
|
195
204
|
return;
|
|
196
|
-
send({ type: "ADD_TOAST", toast:
|
|
205
|
+
send({ type: "ADD_TOAST", toast: { ...options, id } });
|
|
197
206
|
return id;
|
|
198
207
|
},
|
|
199
208
|
upsert(options) {
|
|
@@ -244,13 +253,13 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
244
253
|
return group2.upsert(options);
|
|
245
254
|
},
|
|
246
255
|
promise(promise, options, shared = {}) {
|
|
247
|
-
const id = group2.loading(
|
|
256
|
+
const id = group2.loading({ ...shared, ...options.loading });
|
|
248
257
|
promise.then((response) => {
|
|
249
|
-
const successOptions =
|
|
250
|
-
group2.success(
|
|
258
|
+
const successOptions = runIfFn2(options.success, response);
|
|
259
|
+
group2.success({ ...shared, ...successOptions, id });
|
|
251
260
|
}).catch((error) => {
|
|
252
|
-
const errorOptions =
|
|
253
|
-
group2.error(
|
|
261
|
+
const errorOptions = runIfFn2(options.error, error);
|
|
262
|
+
group2.error({ ...shared, ...errorOptions, id });
|
|
254
263
|
});
|
|
255
264
|
return promise;
|
|
256
265
|
},
|
|
@@ -302,52 +311,26 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
302
311
|
// src/toast-group.machine.ts
|
|
303
312
|
var import_core3 = require("@zag-js/core");
|
|
304
313
|
|
|
305
|
-
// ../../utilities/dom/dist/index.mjs
|
|
306
|
-
var dataAttr = (guard) => {
|
|
307
|
-
return guard ? "" : void 0;
|
|
308
|
-
};
|
|
309
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
310
|
-
var runIfFn2 = (v, ...a) => {
|
|
311
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
312
|
-
return res != null ? res : void 0;
|
|
313
|
-
};
|
|
314
|
-
var cast = (v) => v;
|
|
315
|
-
var isRef = (v) => hasProp(v, "current");
|
|
316
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
317
|
-
const node = isRef(target) ? target.current : runIfFn2(target);
|
|
318
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
319
|
-
return () => {
|
|
320
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
321
|
-
};
|
|
322
|
-
}
|
|
323
|
-
var MAX_Z_INDEX = 2147483647;
|
|
324
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
325
|
-
const doc = cast(_doc);
|
|
326
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
327
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
328
|
-
callback(!!hidden);
|
|
329
|
-
});
|
|
330
|
-
}
|
|
331
|
-
|
|
332
314
|
// src/toast.machine.ts
|
|
333
315
|
var import_core2 = require("@zag-js/core");
|
|
334
316
|
var { not, and, or } = import_core2.guards;
|
|
335
317
|
function createToastMachine(options = {}) {
|
|
336
|
-
const
|
|
318
|
+
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
|
|
337
319
|
const __duration = getToastDuration(duration, type);
|
|
338
320
|
return (0, import_core2.createMachine)({
|
|
339
321
|
id,
|
|
340
322
|
entry: "invokeOnOpen",
|
|
341
323
|
initial: type === "loading" ? "persist" : "active",
|
|
342
|
-
context:
|
|
324
|
+
context: {
|
|
343
325
|
id,
|
|
344
326
|
type,
|
|
345
327
|
remaining: __duration,
|
|
346
328
|
duration: __duration,
|
|
347
329
|
removeDelay,
|
|
348
330
|
createdAt: Date.now(),
|
|
349
|
-
placement
|
|
350
|
-
|
|
331
|
+
placement,
|
|
332
|
+
...rest
|
|
333
|
+
},
|
|
351
334
|
on: {
|
|
352
335
|
UPDATE: [
|
|
353
336
|
{
|
|
@@ -424,17 +407,17 @@ function createToastMachine(options = {}) {
|
|
|
424
407
|
},
|
|
425
408
|
guards: {
|
|
426
409
|
isChangingToLoading: (_, evt) => {
|
|
427
|
-
var
|
|
428
|
-
return ((
|
|
410
|
+
var _a;
|
|
411
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
|
|
429
412
|
},
|
|
430
413
|
isLoadingType: (ctx) => ctx.type === "loading",
|
|
431
414
|
hasTypeChanged: (ctx, evt) => {
|
|
432
|
-
var
|
|
433
|
-
return ((
|
|
415
|
+
var _a;
|
|
416
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
|
|
434
417
|
},
|
|
435
418
|
hasDurationChanged: (ctx, evt) => {
|
|
436
|
-
var
|
|
437
|
-
return ((
|
|
419
|
+
var _a;
|
|
420
|
+
return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
|
|
438
421
|
}
|
|
439
422
|
},
|
|
440
423
|
delays: {
|
|
@@ -452,59 +435,51 @@ function createToastMachine(options = {}) {
|
|
|
452
435
|
self.sendParent({ type: "REMOVE_TOAST", id: self.id });
|
|
453
436
|
},
|
|
454
437
|
invokeOnClosing(ctx) {
|
|
455
|
-
var
|
|
456
|
-
(
|
|
438
|
+
var _a;
|
|
439
|
+
(_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
|
|
457
440
|
},
|
|
458
441
|
invokeOnClose(ctx) {
|
|
459
|
-
var
|
|
460
|
-
(
|
|
442
|
+
var _a;
|
|
443
|
+
(_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
|
|
461
444
|
},
|
|
462
445
|
invokeOnOpen(ctx) {
|
|
463
|
-
var
|
|
464
|
-
(
|
|
446
|
+
var _a;
|
|
447
|
+
(_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
|
|
465
448
|
},
|
|
466
449
|
invokeOnUpdate(ctx) {
|
|
467
|
-
var
|
|
468
|
-
(
|
|
450
|
+
var _a;
|
|
451
|
+
(_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
|
|
469
452
|
},
|
|
470
453
|
setContext(ctx, evt) {
|
|
471
454
|
const { duration: duration2, type: type2 } = evt.toast;
|
|
472
455
|
const time = getToastDuration(duration2, type2);
|
|
473
|
-
Object.assign(ctx,
|
|
456
|
+
Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
|
|
474
457
|
}
|
|
475
458
|
}
|
|
476
459
|
});
|
|
477
460
|
}
|
|
478
461
|
|
|
479
462
|
// src/toast-group.machine.ts
|
|
480
|
-
function groupMachine(ctx
|
|
463
|
+
function groupMachine(ctx) {
|
|
481
464
|
return (0, import_core3.createMachine)({
|
|
482
465
|
id: "toaster",
|
|
483
466
|
initial: "active",
|
|
484
|
-
context:
|
|
467
|
+
context: {
|
|
485
468
|
dir: "ltr",
|
|
486
469
|
max: Number.MAX_SAFE_INTEGER,
|
|
487
|
-
uid: "",
|
|
488
470
|
toasts: [],
|
|
489
471
|
gutter: "1rem",
|
|
490
472
|
zIndex: MAX_Z_INDEX,
|
|
491
473
|
pauseOnPageIdle: false,
|
|
492
474
|
pauseOnInteraction: true,
|
|
493
|
-
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
|
|
494
|
-
|
|
475
|
+
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
|
|
476
|
+
...ctx
|
|
477
|
+
},
|
|
495
478
|
computed: {
|
|
496
479
|
count: (ctx2) => ctx2.toasts.length
|
|
497
480
|
},
|
|
498
481
|
on: {
|
|
499
|
-
SETUP: {
|
|
500
|
-
actions: (ctx2, evt) => {
|
|
501
|
-
ctx2.uid = evt.id;
|
|
502
|
-
if (evt.doc)
|
|
503
|
-
ctx2.doc = (0, import_core3.ref)(evt.doc);
|
|
504
|
-
if (evt.root)
|
|
505
|
-
ctx2.rootNode = (0, import_core3.ref)(evt.root);
|
|
506
|
-
}
|
|
507
|
-
},
|
|
482
|
+
SETUP: {},
|
|
508
483
|
PAUSE_TOAST: {
|
|
509
484
|
actions: (_ctx, evt, { self }) => {
|
|
510
485
|
self.sendChild("PAUSE", evt.id);
|
|
@@ -528,13 +503,13 @@ function groupMachine(ctx = {}) {
|
|
|
528
503
|
ADD_TOAST: {
|
|
529
504
|
guard: (ctx2) => ctx2.toasts.length < ctx2.max,
|
|
530
505
|
actions: (ctx2, evt, { self }) => {
|
|
531
|
-
|
|
532
|
-
|
|
506
|
+
const options = {
|
|
507
|
+
...evt.toast,
|
|
533
508
|
pauseOnPageIdle: ctx2.pauseOnPageIdle,
|
|
534
509
|
pauseOnInteraction: ctx2.pauseOnInteraction,
|
|
535
510
|
dir: ctx2.dir,
|
|
536
|
-
|
|
537
|
-
}
|
|
511
|
+
getRootNode: ctx2.getRootNode
|
|
512
|
+
};
|
|
538
513
|
const toast = createToastMachine(options);
|
|
539
514
|
const actor = self.spawn(toast);
|
|
540
515
|
ctx2.toasts.push(actor);
|
|
@@ -574,7 +549,7 @@ function groupMachine(ctx = {}) {
|
|
|
574
549
|
}
|
|
575
550
|
|
|
576
551
|
// src/toast.connect.ts
|
|
577
|
-
function connect(state, send, normalize
|
|
552
|
+
function connect(state, send, normalize) {
|
|
578
553
|
const isVisible = state.hasTag("visible");
|
|
579
554
|
const isPaused = state.hasTag("paused");
|
|
580
555
|
const isUpdating = state.hasTag("updating");
|
|
@@ -695,3 +670,10 @@ function api() {
|
|
|
695
670
|
return toaster;
|
|
696
671
|
}
|
|
697
672
|
}
|
|
673
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
674
|
+
0 && (module.exports = {
|
|
675
|
+
api,
|
|
676
|
+
connect,
|
|
677
|
+
createMachine,
|
|
678
|
+
group
|
|
679
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,41 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
1
|
+
// ../../utilities/dom/dist/index.mjs
|
|
2
|
+
var dataAttr = (guard) => {
|
|
3
|
+
return guard ? "" : void 0;
|
|
19
4
|
};
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
5
|
+
var MAX_Z_INDEX = 2147483647;
|
|
6
|
+
var runIfFn = (v, ...a) => {
|
|
7
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
8
|
+
return res ?? void 0;
|
|
32
9
|
};
|
|
10
|
+
var cast = (v) => v;
|
|
11
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
12
|
+
var isDom = () => typeof window !== "undefined";
|
|
13
|
+
function isDocument(el) {
|
|
14
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
15
|
+
}
|
|
16
|
+
function isWindow(value) {
|
|
17
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
18
|
+
}
|
|
19
|
+
function getDocument(el) {
|
|
20
|
+
if (isWindow(el))
|
|
21
|
+
return el.document;
|
|
22
|
+
if (isDocument(el))
|
|
23
|
+
return el;
|
|
24
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
25
|
+
}
|
|
26
|
+
function defineDomHelpers(helpers) {
|
|
27
|
+
const dom2 = {
|
|
28
|
+
getRootNode: (ctx) => {
|
|
29
|
+
var _a;
|
|
30
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
31
|
+
},
|
|
32
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
33
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
34
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
35
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
36
|
+
};
|
|
37
|
+
return {
|
|
38
|
+
...dom2,
|
|
39
|
+
...helpers
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
var isRef = (v) => hasProp(v, "current");
|
|
43
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
44
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
45
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
46
|
+
return () => {
|
|
47
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function trackDocumentVisibility(_doc, callback) {
|
|
51
|
+
const doc = cast(_doc);
|
|
52
|
+
return addDomEvent(doc, "visibilitychange", () => {
|
|
53
|
+
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
54
|
+
callback(!!hidden);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
33
57
|
|
|
34
58
|
// ../../utilities/core/dist/index.mjs
|
|
35
|
-
var
|
|
36
|
-
var runIfFn = (v, ...a) => {
|
|
59
|
+
var runIfFn2 = (v, ...a) => {
|
|
37
60
|
const res = typeof v === "function" ? v(...a) : v;
|
|
38
|
-
return res
|
|
61
|
+
return res ?? void 0;
|
|
39
62
|
};
|
|
40
63
|
var uuid = /* @__PURE__ */ (() => {
|
|
41
64
|
let id = 0;
|
|
@@ -47,7 +70,7 @@ var uuid = /* @__PURE__ */ (() => {
|
|
|
47
70
|
function warn(...a) {
|
|
48
71
|
const m = a.length === 1 ? a[0] : a[1];
|
|
49
72
|
const c = a.length === 2 ? a[0] : true;
|
|
50
|
-
if (c &&
|
|
73
|
+
if (c && process.env.NODE_ENV !== "production") {
|
|
51
74
|
console.warn(m);
|
|
52
75
|
}
|
|
53
76
|
}
|
|
@@ -55,31 +78,13 @@ function warn(...a) {
|
|
|
55
78
|
// src/toast-group.connect.ts
|
|
56
79
|
import { subscribe } from "@zag-js/core";
|
|
57
80
|
|
|
58
|
-
// ../../types/dist/index.mjs
|
|
59
|
-
function createNormalizer(fn) {
|
|
60
|
-
return new Proxy({}, {
|
|
61
|
-
get() {
|
|
62
|
-
return fn;
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
67
|
-
|
|
68
81
|
// src/toast.dom.ts
|
|
69
|
-
var dom = {
|
|
70
|
-
getDoc: (ctx) => {
|
|
71
|
-
var _a;
|
|
72
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
73
|
-
},
|
|
74
|
-
getRootNode: (ctx) => {
|
|
75
|
-
var _a;
|
|
76
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
77
|
-
},
|
|
82
|
+
var dom = defineDomHelpers({
|
|
78
83
|
getGroupId: (placement) => `toast-group:${placement}`,
|
|
79
84
|
getContainerId: (ctx) => `toast:${ctx.id}`,
|
|
80
85
|
getTitleId: (ctx) => `toast-title:${ctx.id}`,
|
|
81
86
|
getCloseButtonId: (ctx) => `toast-close-button:${ctx.id}`,
|
|
82
|
-
getPortalId: (ctx) => `toast-portal:${ctx.
|
|
87
|
+
getPortalId: (ctx) => `toast-portal:${ctx.id}`,
|
|
83
88
|
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
|
|
84
89
|
createPortalEl: (ctx) => {
|
|
85
90
|
const existing = dom.getPortalEl(ctx);
|
|
@@ -89,7 +94,7 @@ var dom = {
|
|
|
89
94
|
portal.id = dom.getPortalId(ctx);
|
|
90
95
|
return portal;
|
|
91
96
|
}
|
|
92
|
-
};
|
|
97
|
+
});
|
|
93
98
|
|
|
94
99
|
// src/toast.utils.ts
|
|
95
100
|
function getToastsByPlacement(toasts) {
|
|
@@ -109,7 +114,7 @@ var defaultTimeouts = {
|
|
|
109
114
|
custom: 5e3
|
|
110
115
|
};
|
|
111
116
|
function getToastDuration(duration, type) {
|
|
112
|
-
return duration
|
|
117
|
+
return duration ?? defaultTimeouts[type];
|
|
113
118
|
}
|
|
114
119
|
function getGroupPlacementStyle(ctx, placement) {
|
|
115
120
|
const offset = ctx.offsets;
|
|
@@ -153,7 +158,7 @@ function getGroupPlacementStyle(ctx, placement) {
|
|
|
153
158
|
|
|
154
159
|
// src/toast-group.connect.ts
|
|
155
160
|
var toaster = {};
|
|
156
|
-
function groupConnect(state, send, normalize
|
|
161
|
+
function groupConnect(state, send, normalize) {
|
|
157
162
|
const group2 = {
|
|
158
163
|
count: state.context.count,
|
|
159
164
|
toasts: state.context.toasts,
|
|
@@ -168,7 +173,7 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
168
173
|
const id = options.id ? options.id : uid;
|
|
169
174
|
if (group2.isVisible(id))
|
|
170
175
|
return;
|
|
171
|
-
send({ type: "ADD_TOAST", toast:
|
|
176
|
+
send({ type: "ADD_TOAST", toast: { ...options, id } });
|
|
172
177
|
return id;
|
|
173
178
|
},
|
|
174
179
|
upsert(options) {
|
|
@@ -219,13 +224,13 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
219
224
|
return group2.upsert(options);
|
|
220
225
|
},
|
|
221
226
|
promise(promise, options, shared = {}) {
|
|
222
|
-
const id = group2.loading(
|
|
227
|
+
const id = group2.loading({ ...shared, ...options.loading });
|
|
223
228
|
promise.then((response) => {
|
|
224
|
-
const successOptions =
|
|
225
|
-
group2.success(
|
|
229
|
+
const successOptions = runIfFn2(options.success, response);
|
|
230
|
+
group2.success({ ...shared, ...successOptions, id });
|
|
226
231
|
}).catch((error) => {
|
|
227
|
-
const errorOptions =
|
|
228
|
-
group2.error(
|
|
232
|
+
const errorOptions = runIfFn2(options.error, error);
|
|
233
|
+
group2.error({ ...shared, ...errorOptions, id });
|
|
229
234
|
});
|
|
230
235
|
return promise;
|
|
231
236
|
},
|
|
@@ -275,54 +280,28 @@ function groupConnect(state, send, normalize = normalizeProp) {
|
|
|
275
280
|
}
|
|
276
281
|
|
|
277
282
|
// src/toast-group.machine.ts
|
|
278
|
-
import { createMachine as createMachine2
|
|
279
|
-
|
|
280
|
-
// ../../utilities/dom/dist/index.mjs
|
|
281
|
-
var dataAttr = (guard) => {
|
|
282
|
-
return guard ? "" : void 0;
|
|
283
|
-
};
|
|
284
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
285
|
-
var runIfFn2 = (v, ...a) => {
|
|
286
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
287
|
-
return res != null ? res : void 0;
|
|
288
|
-
};
|
|
289
|
-
var cast = (v) => v;
|
|
290
|
-
var isRef = (v) => hasProp(v, "current");
|
|
291
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
292
|
-
const node = isRef(target) ? target.current : runIfFn2(target);
|
|
293
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
294
|
-
return () => {
|
|
295
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
296
|
-
};
|
|
297
|
-
}
|
|
298
|
-
var MAX_Z_INDEX = 2147483647;
|
|
299
|
-
function trackDocumentVisibility(_doc, callback) {
|
|
300
|
-
const doc = cast(_doc);
|
|
301
|
-
return addDomEvent(doc, "visibilitychange", () => {
|
|
302
|
-
const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
|
|
303
|
-
callback(!!hidden);
|
|
304
|
-
});
|
|
305
|
-
}
|
|
283
|
+
import { createMachine as createMachine2 } from "@zag-js/core";
|
|
306
284
|
|
|
307
285
|
// src/toast.machine.ts
|
|
308
286
|
import { createMachine, guards } from "@zag-js/core";
|
|
309
287
|
var { not, and, or } = guards;
|
|
310
288
|
function createToastMachine(options = {}) {
|
|
311
|
-
const
|
|
289
|
+
const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 500, ...rest } = options;
|
|
312
290
|
const __duration = getToastDuration(duration, type);
|
|
313
291
|
return createMachine({
|
|
314
292
|
id,
|
|
315
293
|
entry: "invokeOnOpen",
|
|
316
294
|
initial: type === "loading" ? "persist" : "active",
|
|
317
|
-
context:
|
|
295
|
+
context: {
|
|
318
296
|
id,
|
|
319
297
|
type,
|
|
320
298
|
remaining: __duration,
|
|
321
299
|
duration: __duration,
|
|
322
300
|
removeDelay,
|
|
323
301
|
createdAt: Date.now(),
|
|
324
|
-
placement
|
|
325
|
-
|
|
302
|
+
placement,
|
|
303
|
+
...rest
|
|
304
|
+
},
|
|
326
305
|
on: {
|
|
327
306
|
UPDATE: [
|
|
328
307
|
{
|
|
@@ -399,17 +378,17 @@ function createToastMachine(options = {}) {
|
|
|
399
378
|
},
|
|
400
379
|
guards: {
|
|
401
380
|
isChangingToLoading: (_, evt) => {
|
|
402
|
-
var
|
|
403
|
-
return ((
|
|
381
|
+
var _a;
|
|
382
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
|
|
404
383
|
},
|
|
405
384
|
isLoadingType: (ctx) => ctx.type === "loading",
|
|
406
385
|
hasTypeChanged: (ctx, evt) => {
|
|
407
|
-
var
|
|
408
|
-
return ((
|
|
386
|
+
var _a;
|
|
387
|
+
return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx.type;
|
|
409
388
|
},
|
|
410
389
|
hasDurationChanged: (ctx, evt) => {
|
|
411
|
-
var
|
|
412
|
-
return ((
|
|
390
|
+
var _a;
|
|
391
|
+
return ((_a = evt.toast) == null ? void 0 : _a.duration) !== ctx.duration;
|
|
413
392
|
}
|
|
414
393
|
},
|
|
415
394
|
delays: {
|
|
@@ -427,59 +406,51 @@ function createToastMachine(options = {}) {
|
|
|
427
406
|
self.sendParent({ type: "REMOVE_TOAST", id: self.id });
|
|
428
407
|
},
|
|
429
408
|
invokeOnClosing(ctx) {
|
|
430
|
-
var
|
|
431
|
-
(
|
|
409
|
+
var _a;
|
|
410
|
+
(_a = ctx.onClosing) == null ? void 0 : _a.call(ctx);
|
|
432
411
|
},
|
|
433
412
|
invokeOnClose(ctx) {
|
|
434
|
-
var
|
|
435
|
-
(
|
|
413
|
+
var _a;
|
|
414
|
+
(_a = ctx.onClose) == null ? void 0 : _a.call(ctx);
|
|
436
415
|
},
|
|
437
416
|
invokeOnOpen(ctx) {
|
|
438
|
-
var
|
|
439
|
-
(
|
|
417
|
+
var _a;
|
|
418
|
+
(_a = ctx.onOpen) == null ? void 0 : _a.call(ctx);
|
|
440
419
|
},
|
|
441
420
|
invokeOnUpdate(ctx) {
|
|
442
|
-
var
|
|
443
|
-
(
|
|
421
|
+
var _a;
|
|
422
|
+
(_a = ctx.onUpdate) == null ? void 0 : _a.call(ctx);
|
|
444
423
|
},
|
|
445
424
|
setContext(ctx, evt) {
|
|
446
425
|
const { duration: duration2, type: type2 } = evt.toast;
|
|
447
426
|
const time = getToastDuration(duration2, type2);
|
|
448
|
-
Object.assign(ctx,
|
|
427
|
+
Object.assign(ctx, { ...evt.toast, duration: time, remaining: time });
|
|
449
428
|
}
|
|
450
429
|
}
|
|
451
430
|
});
|
|
452
431
|
}
|
|
453
432
|
|
|
454
433
|
// src/toast-group.machine.ts
|
|
455
|
-
function groupMachine(ctx
|
|
434
|
+
function groupMachine(ctx) {
|
|
456
435
|
return createMachine2({
|
|
457
436
|
id: "toaster",
|
|
458
437
|
initial: "active",
|
|
459
|
-
context:
|
|
438
|
+
context: {
|
|
460
439
|
dir: "ltr",
|
|
461
440
|
max: Number.MAX_SAFE_INTEGER,
|
|
462
|
-
uid: "",
|
|
463
441
|
toasts: [],
|
|
464
442
|
gutter: "1rem",
|
|
465
443
|
zIndex: MAX_Z_INDEX,
|
|
466
444
|
pauseOnPageIdle: false,
|
|
467
445
|
pauseOnInteraction: true,
|
|
468
|
-
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" }
|
|
469
|
-
|
|
446
|
+
offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
|
|
447
|
+
...ctx
|
|
448
|
+
},
|
|
470
449
|
computed: {
|
|
471
450
|
count: (ctx2) => ctx2.toasts.length
|
|
472
451
|
},
|
|
473
452
|
on: {
|
|
474
|
-
SETUP: {
|
|
475
|
-
actions: (ctx2, evt) => {
|
|
476
|
-
ctx2.uid = evt.id;
|
|
477
|
-
if (evt.doc)
|
|
478
|
-
ctx2.doc = ref(evt.doc);
|
|
479
|
-
if (evt.root)
|
|
480
|
-
ctx2.rootNode = ref(evt.root);
|
|
481
|
-
}
|
|
482
|
-
},
|
|
453
|
+
SETUP: {},
|
|
483
454
|
PAUSE_TOAST: {
|
|
484
455
|
actions: (_ctx, evt, { self }) => {
|
|
485
456
|
self.sendChild("PAUSE", evt.id);
|
|
@@ -503,13 +474,13 @@ function groupMachine(ctx = {}) {
|
|
|
503
474
|
ADD_TOAST: {
|
|
504
475
|
guard: (ctx2) => ctx2.toasts.length < ctx2.max,
|
|
505
476
|
actions: (ctx2, evt, { self }) => {
|
|
506
|
-
|
|
507
|
-
|
|
477
|
+
const options = {
|
|
478
|
+
...evt.toast,
|
|
508
479
|
pauseOnPageIdle: ctx2.pauseOnPageIdle,
|
|
509
480
|
pauseOnInteraction: ctx2.pauseOnInteraction,
|
|
510
481
|
dir: ctx2.dir,
|
|
511
|
-
|
|
512
|
-
}
|
|
482
|
+
getRootNode: ctx2.getRootNode
|
|
483
|
+
};
|
|
513
484
|
const toast = createToastMachine(options);
|
|
514
485
|
const actor = self.spawn(toast);
|
|
515
486
|
ctx2.toasts.push(actor);
|
|
@@ -549,7 +520,7 @@ function groupMachine(ctx = {}) {
|
|
|
549
520
|
}
|
|
550
521
|
|
|
551
522
|
// src/toast.connect.ts
|
|
552
|
-
function connect(state, send, normalize
|
|
523
|
+
function connect(state, send, normalize) {
|
|
553
524
|
const isVisible = state.hasTag("visible");
|
|
554
525
|
const isPaused = state.hasTag("paused");
|
|
555
526
|
const isUpdating = state.hasTag("updating");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/toast",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Core logic for the toast widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,18 +29,21 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
37
|
+
"@zag-js/utils": "0.1.3"
|
|
36
38
|
},
|
|
37
39
|
"scripts": {
|
|
38
|
-
"build
|
|
39
|
-
"start": "
|
|
40
|
-
"build": "
|
|
40
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
41
|
+
"start": "pnpm build --watch",
|
|
42
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
41
43
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
42
44
|
"lint": "eslint src --ext .ts,.tsx",
|
|
43
|
-
"test
|
|
44
|
-
"test
|
|
45
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
46
|
+
"test-watch": "pnpm test --watch -u",
|
|
47
|
+
"typecheck": "tsc --noEmit"
|
|
45
48
|
}
|
|
46
|
-
}
|
|
49
|
+
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { PropTypes, ReactPropTypes } from "@zag-js/types";
|
|
2
|
-
import { GroupMachineContext, GroupProps, GroupSend, GroupState, Placement, PromiseOptions, Toaster, Options } from "./toast.types";
|
|
3
|
-
export declare let toaster: Toaster;
|
|
4
|
-
export declare function groupConnect<T extends PropTypes = ReactPropTypes>(state: GroupState, send: GroupSend, normalize?: import("@zag-js/types").NormalizeProps): {
|
|
5
|
-
count: number;
|
|
6
|
-
toasts: import("./toast.types").Service[];
|
|
7
|
-
toastsByPlacement: Partial<Record<Placement, import("./toast.types").Service[]>>;
|
|
8
|
-
isVisible(id: string): boolean;
|
|
9
|
-
create(options: Options): string;
|
|
10
|
-
upsert(options: Options): string;
|
|
11
|
-
dismiss(id?: string): void;
|
|
12
|
-
remove(id?: string): void;
|
|
13
|
-
dismissByPlacement(placement: Placement): void;
|
|
14
|
-
update(id: string, options: Options): string;
|
|
15
|
-
loading(options: Options): string;
|
|
16
|
-
success(options: Options): string;
|
|
17
|
-
error(options: Options): string;
|
|
18
|
-
promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
|
|
19
|
-
pause(id?: string): void;
|
|
20
|
-
resume(id?: string): void;
|
|
21
|
-
getGroupProps(options: GroupProps): T["element"];
|
|
22
|
-
createPortal(): HTMLElement;
|
|
23
|
-
subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
|
|
24
|
-
};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types";
|
|
2
|
-
export declare function groupMachine(ctx?: Partial<UserDefinedGroupContext>): import("@zag-js/core").Machine<GroupMachineContext, import("@zag-js/core").StateMachine.StateSchema, import("@zag-js/core").StateMachine.AnyEventObject>;
|
package/dist/toast.connect.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { PropTypes, ReactPropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State } from "./toast.types";
|
|
3
|
-
export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
|
|
4
|
-
type: import("./toast.types").Type;
|
|
5
|
-
title: string;
|
|
6
|
-
placement: import("./toast.types").Placement;
|
|
7
|
-
isVisible: boolean;
|
|
8
|
-
isPaused: boolean;
|
|
9
|
-
pause(): void;
|
|
10
|
-
resume(): void;
|
|
11
|
-
dismiss(): void;
|
|
12
|
-
rootProps: T["element"];
|
|
13
|
-
progressbarProps: T["element"];
|
|
14
|
-
titleProps: T["element"];
|
|
15
|
-
closeButtonProps: T["button"];
|
|
16
|
-
render(): any;
|
|
17
|
-
};
|
package/dist/toast.dom.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getDoc: (ctx: Ctx | GroupCtx) => Document;
|
|
4
|
-
getRootNode: (ctx: Ctx | GroupCtx) => Document | ShadowRoot;
|
|
5
|
-
getGroupId: (placement: Placement) => string;
|
|
6
|
-
getContainerId: (ctx: Ctx) => string;
|
|
7
|
-
getTitleId: (ctx: Ctx) => string;
|
|
8
|
-
getCloseButtonId: (ctx: Ctx) => string;
|
|
9
|
-
getPortalId: (ctx: GroupCtx) => string;
|
|
10
|
-
getPortalEl: (ctx: GroupCtx) => HTMLElement;
|
|
11
|
-
createPortalEl: (ctx: GroupCtx) => HTMLElement;
|
|
12
|
-
};
|
package/dist/toast.machine.d.ts
DELETED
package/dist/toast.types.d.ts
DELETED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import type { Machine, StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { Context, Direction, DirectionProperty, RootProperties } from "@zag-js/types";
|
|
3
|
-
export declare type Type = "success" | "error" | "loading" | "info" | "custom";
|
|
4
|
-
export declare type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
|
|
5
|
-
declare type SharedContext = {
|
|
6
|
-
/**
|
|
7
|
-
* Whether to pause toast when the user leaves the browser tab
|
|
8
|
-
*/
|
|
9
|
-
pauseOnPageIdle?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* Whether to pause the toast when interacted with
|
|
12
|
-
*/
|
|
13
|
-
pauseOnInteraction?: boolean;
|
|
14
|
-
};
|
|
15
|
-
export declare type ToastOptions = {
|
|
16
|
-
/**
|
|
17
|
-
* The unique id of the toast
|
|
18
|
-
*/
|
|
19
|
-
id: string;
|
|
20
|
-
/**
|
|
21
|
-
* The type of the toast
|
|
22
|
-
*/
|
|
23
|
-
type: Type;
|
|
24
|
-
/**
|
|
25
|
-
* The placement of the toast
|
|
26
|
-
*/
|
|
27
|
-
placement: Placement;
|
|
28
|
-
/**
|
|
29
|
-
* The message of the toast
|
|
30
|
-
*/
|
|
31
|
-
title?: string;
|
|
32
|
-
/**
|
|
33
|
-
* The description of the toast
|
|
34
|
-
*/
|
|
35
|
-
description?: string;
|
|
36
|
-
/**
|
|
37
|
-
* The duration the toast will be visible
|
|
38
|
-
*/
|
|
39
|
-
duration: number;
|
|
40
|
-
/**
|
|
41
|
-
* Custom function to render the toast element.
|
|
42
|
-
*/
|
|
43
|
-
render?: (options: RenderOptions) => any;
|
|
44
|
-
/**
|
|
45
|
-
* The duration for the toast to kept alive before it is removed.
|
|
46
|
-
* Useful for exit transitions.
|
|
47
|
-
*/
|
|
48
|
-
removeDelay?: number;
|
|
49
|
-
/**
|
|
50
|
-
* Function called when the toast has been closed and removed
|
|
51
|
-
*/
|
|
52
|
-
onClose?: VoidFunction;
|
|
53
|
-
/**
|
|
54
|
-
* Function called when the toast is leaving
|
|
55
|
-
*/
|
|
56
|
-
onClosing?: VoidFunction;
|
|
57
|
-
/**
|
|
58
|
-
* Function called when the toast is shown
|
|
59
|
-
*/
|
|
60
|
-
onOpen?: VoidFunction;
|
|
61
|
-
/**
|
|
62
|
-
* Function called when the toast is updated
|
|
63
|
-
*/
|
|
64
|
-
onUpdate?: VoidFunction;
|
|
65
|
-
};
|
|
66
|
-
export declare type Options = Partial<ToastOptions>;
|
|
67
|
-
export declare type RenderOptions = Omit<ToastOptions, "render"> & {
|
|
68
|
-
dismiss(): void;
|
|
69
|
-
};
|
|
70
|
-
export declare type MachineContext = SharedContext & RootProperties & Omit<ToastOptions, "removeDelay"> & {
|
|
71
|
-
/**
|
|
72
|
-
* The duration for the toast to kept alive before it is removed.
|
|
73
|
-
* Useful for exit transitions.
|
|
74
|
-
*/
|
|
75
|
-
removeDelay: number;
|
|
76
|
-
/**
|
|
77
|
-
* The document's text/writing direction.
|
|
78
|
-
*/
|
|
79
|
-
dir?: Direction;
|
|
80
|
-
/**
|
|
81
|
-
* The time the toast was created
|
|
82
|
-
*/
|
|
83
|
-
createdAt: number;
|
|
84
|
-
/**
|
|
85
|
-
* The time left before the toast is removed
|
|
86
|
-
*/
|
|
87
|
-
remaining: number;
|
|
88
|
-
};
|
|
89
|
-
export declare type MachineState = {
|
|
90
|
-
value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
|
|
91
|
-
tags: "visible" | "paused" | "updating";
|
|
92
|
-
};
|
|
93
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
94
|
-
export declare type Send = S.Send;
|
|
95
|
-
export declare type Service = Machine<MachineContext, MachineState>;
|
|
96
|
-
declare type GroupPublicContext = SharedContext & DirectionProperty & {
|
|
97
|
-
/**
|
|
98
|
-
* The gutter or spacing between toasts
|
|
99
|
-
*/
|
|
100
|
-
gutter: string;
|
|
101
|
-
/**
|
|
102
|
-
* The z-index applied to each toast group
|
|
103
|
-
*/
|
|
104
|
-
zIndex: number;
|
|
105
|
-
/**
|
|
106
|
-
* The maximum number of toasts that can be shown at once
|
|
107
|
-
*/
|
|
108
|
-
max: number;
|
|
109
|
-
/**
|
|
110
|
-
* The offset from the safe environment edge of the viewport
|
|
111
|
-
*/
|
|
112
|
-
offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
|
|
113
|
-
};
|
|
114
|
-
export declare type UserDefinedGroupContext = Partial<GroupPublicContext>;
|
|
115
|
-
declare type GroupComputedContext = Readonly<{
|
|
116
|
-
/**
|
|
117
|
-
* @computed
|
|
118
|
-
* The total number of toasts in the group
|
|
119
|
-
*/
|
|
120
|
-
readonly count: number;
|
|
121
|
-
}>;
|
|
122
|
-
declare type GroupPrivateContext = Context<{
|
|
123
|
-
/**
|
|
124
|
-
* @internal
|
|
125
|
-
* The child toast machines (spawned by the toast group)
|
|
126
|
-
*/
|
|
127
|
-
toasts: Service[];
|
|
128
|
-
}>;
|
|
129
|
-
export declare type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
|
|
130
|
-
export declare type GroupState = S.State<GroupMachineContext>;
|
|
131
|
-
export declare type GroupSend = (event: S.Event<S.AnyEventObject>) => void;
|
|
132
|
-
declare type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
|
|
133
|
-
export declare type PromiseOptions<Value> = {
|
|
134
|
-
loading: ToastOptions;
|
|
135
|
-
success: MaybeFunction<ToastOptions, Value>;
|
|
136
|
-
error: MaybeFunction<ToastOptions, Error>;
|
|
137
|
-
};
|
|
138
|
-
export declare type GroupProps = {
|
|
139
|
-
placement: Placement;
|
|
140
|
-
label?: string;
|
|
141
|
-
};
|
|
142
|
-
export declare type Toaster = {
|
|
143
|
-
count: number;
|
|
144
|
-
isVisible(id: string): boolean;
|
|
145
|
-
upsert(options: ToastOptions): string | undefined;
|
|
146
|
-
create(options: ToastOptions): string | undefined;
|
|
147
|
-
success(options: ToastOptions): string | undefined;
|
|
148
|
-
error(options: ToastOptions): string | undefined;
|
|
149
|
-
loading(options: ToastOptions): string | undefined;
|
|
150
|
-
dismiss(id?: string | undefined): void;
|
|
151
|
-
remove(id?: string | undefined): void;
|
|
152
|
-
promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
|
|
153
|
-
};
|
|
154
|
-
export {};
|
package/dist/toast.utils.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { Style } from "@zag-js/types";
|
|
2
|
-
import { GroupMachineContext, MachineContext, Placement, Service, Type } from "./toast.types";
|
|
3
|
-
export declare function getToastsByPlacement(toasts: Service[]): Partial<Record<Placement, Service[]>>;
|
|
4
|
-
export declare const defaultTimeouts: Record<Type, number>;
|
|
5
|
-
export declare function getToastDuration(duration: number | undefined, type: MachineContext["type"]): number;
|
|
6
|
-
export declare function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style;
|