@radix-ui/react-toast 1.2.0-rc.1 → 1.2.0-rc.3
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.js +665 -646
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -13
package/dist/index.js
CHANGED
|
@@ -1,678 +1,697 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
));
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
31
|
+
// packages/react/toast/src/index.ts
|
|
32
|
+
var src_exports = {};
|
|
33
|
+
__export(src_exports, {
|
|
34
|
+
Action: () => Action,
|
|
35
|
+
Close: () => Close,
|
|
36
|
+
Description: () => Description,
|
|
37
|
+
Provider: () => Provider,
|
|
38
|
+
Root: () => Root2,
|
|
39
|
+
Title: () => Title,
|
|
40
|
+
Toast: () => Toast,
|
|
41
|
+
ToastAction: () => ToastAction,
|
|
42
|
+
ToastClose: () => ToastClose,
|
|
43
|
+
ToastDescription: () => ToastDescription,
|
|
44
|
+
ToastProvider: () => ToastProvider,
|
|
45
|
+
ToastTitle: () => ToastTitle,
|
|
46
|
+
ToastViewport: () => ToastViewport,
|
|
47
|
+
Viewport: () => Viewport,
|
|
48
|
+
createToastScope: () => createToastScope
|
|
49
|
+
});
|
|
50
|
+
module.exports = __toCommonJS(src_exports);
|
|
51
|
+
|
|
52
|
+
// packages/react/toast/src/Toast.tsx
|
|
53
|
+
var React = __toESM(require("react"));
|
|
54
|
+
var ReactDOM = __toESM(require("react-dom"));
|
|
55
|
+
var import_primitive = require("@radix-ui/primitive");
|
|
56
|
+
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
57
|
+
var import_react_collection = require("@radix-ui/react-collection");
|
|
58
|
+
var import_react_context = require("@radix-ui/react-context");
|
|
59
|
+
var DismissableLayer = __toESM(require("@radix-ui/react-dismissable-layer"));
|
|
60
|
+
var import_react_portal = require("@radix-ui/react-portal");
|
|
61
|
+
var import_react_presence = require("@radix-ui/react-presence");
|
|
62
|
+
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
63
|
+
var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
|
|
64
|
+
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
65
|
+
var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
|
|
66
|
+
var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
|
|
67
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
68
|
+
var PROVIDER_NAME = "ToastProvider";
|
|
69
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)("Toast");
|
|
70
|
+
var [createToastContext, createToastScope] = (0, import_react_context.createContextScope)("Toast", [createCollectionScope]);
|
|
71
|
+
var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
|
|
72
|
+
var ToastProvider = (props) => {
|
|
73
|
+
const {
|
|
74
|
+
__scopeToast,
|
|
75
|
+
label = "Notification",
|
|
76
|
+
duration = 5e3,
|
|
77
|
+
swipeDirection = "right",
|
|
78
|
+
swipeThreshold = 50,
|
|
79
|
+
children
|
|
80
|
+
} = props;
|
|
81
|
+
const [viewport, setViewport] = React.useState(null);
|
|
82
|
+
const [toastCount, setToastCount] = React.useState(0);
|
|
83
|
+
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
|
|
84
|
+
const isClosePausedRef = React.useRef(false);
|
|
85
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
ToastProviderProvider,
|
|
87
|
+
{
|
|
88
|
+
scope: __scopeToast,
|
|
89
|
+
label,
|
|
90
|
+
duration,
|
|
91
|
+
swipeDirection,
|
|
92
|
+
swipeThreshold,
|
|
93
|
+
toastCount,
|
|
94
|
+
viewport,
|
|
95
|
+
onViewportChange: setViewport,
|
|
96
|
+
onToastAdd: React.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
|
|
97
|
+
onToastRemove: React.useCallback(() => setToastCount((prevCount) => prevCount - 1), []),
|
|
98
|
+
isFocusedToastEscapeKeyDownRef,
|
|
99
|
+
isClosePausedRef,
|
|
100
|
+
children
|
|
101
|
+
}
|
|
102
|
+
) });
|
|
103
|
+
};
|
|
104
|
+
ToastProvider.propTypes = {
|
|
105
|
+
label(props) {
|
|
106
|
+
if (props.label && typeof props.label === "string" && !props.label.trim()) {
|
|
107
|
+
const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
108
|
+
return new Error(error);
|
|
109
|
+
}
|
|
110
|
+
return null;
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
ToastProvider.displayName = PROVIDER_NAME;
|
|
114
|
+
var VIEWPORT_NAME = "ToastViewport";
|
|
115
|
+
var VIEWPORT_DEFAULT_HOTKEY = ["F8"];
|
|
116
|
+
var VIEWPORT_PAUSE = "toast.viewportPause";
|
|
117
|
+
var VIEWPORT_RESUME = "toast.viewportResume";
|
|
118
|
+
var ToastViewport = React.forwardRef(
|
|
119
|
+
(props, forwardedRef) => {
|
|
53
120
|
const {
|
|
54
121
|
__scopeToast,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
swipeThreshold = 50,
|
|
59
|
-
children
|
|
122
|
+
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
123
|
+
label = "Notifications ({hotkey})",
|
|
124
|
+
...viewportProps
|
|
60
125
|
} = props;
|
|
61
|
-
const
|
|
62
|
-
const
|
|
63
|
-
const
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
126
|
+
const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
|
|
127
|
+
const getItems = useCollection(__scopeToast);
|
|
128
|
+
const wrapperRef = React.useRef(null);
|
|
129
|
+
const headFocusProxyRef = React.useRef(null);
|
|
130
|
+
const tailFocusProxyRef = React.useRef(null);
|
|
131
|
+
const ref = React.useRef(null);
|
|
132
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
|
|
133
|
+
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
134
|
+
const hasToasts = context.toastCount > 0;
|
|
135
|
+
React.useEffect(() => {
|
|
136
|
+
const handleKeyDown = (event) => {
|
|
137
|
+
const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
|
|
138
|
+
if (isHotkeyPressed) ref.current?.focus();
|
|
139
|
+
};
|
|
140
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
141
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
142
|
+
}, [hotkey]);
|
|
143
|
+
React.useEffect(() => {
|
|
144
|
+
const wrapper = wrapperRef.current;
|
|
145
|
+
const viewport = ref.current;
|
|
146
|
+
if (hasToasts && wrapper && viewport) {
|
|
147
|
+
const handlePause = () => {
|
|
148
|
+
if (!context.isClosePausedRef.current) {
|
|
149
|
+
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
150
|
+
viewport.dispatchEvent(pauseEvent);
|
|
151
|
+
context.isClosePausedRef.current = true;
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
const handleResume = () => {
|
|
155
|
+
if (context.isClosePausedRef.current) {
|
|
156
|
+
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
157
|
+
viewport.dispatchEvent(resumeEvent);
|
|
158
|
+
context.isClosePausedRef.current = false;
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
const handleFocusOutResume = (event) => {
|
|
162
|
+
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
|
|
163
|
+
if (isFocusMovingOutside) handleResume();
|
|
164
|
+
};
|
|
165
|
+
const handlePointerLeaveResume = () => {
|
|
166
|
+
const isFocusInside = wrapper.contains(document.activeElement);
|
|
167
|
+
if (!isFocusInside) handleResume();
|
|
168
|
+
};
|
|
169
|
+
wrapper.addEventListener("focusin", handlePause);
|
|
170
|
+
wrapper.addEventListener("focusout", handleFocusOutResume);
|
|
171
|
+
wrapper.addEventListener("pointermove", handlePause);
|
|
172
|
+
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
|
|
173
|
+
window.addEventListener("blur", handlePause);
|
|
174
|
+
window.addEventListener("focus", handleResume);
|
|
175
|
+
return () => {
|
|
176
|
+
wrapper.removeEventListener("focusin", handlePause);
|
|
177
|
+
wrapper.removeEventListener("focusout", handleFocusOutResume);
|
|
178
|
+
wrapper.removeEventListener("pointermove", handlePause);
|
|
179
|
+
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
|
|
180
|
+
window.removeEventListener("blur", handlePause);
|
|
181
|
+
window.removeEventListener("focus", handleResume);
|
|
182
|
+
};
|
|
89
183
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
|
|
107
|
-
const getItems = useCollection(__scopeToast);
|
|
108
|
-
const wrapperRef = React.useRef(null);
|
|
109
|
-
const headFocusProxyRef = React.useRef(null);
|
|
110
|
-
const tailFocusProxyRef = React.useRef(null);
|
|
111
|
-
const ref = React.useRef(null);
|
|
112
|
-
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
|
|
113
|
-
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
114
|
-
const hasToasts = context.toastCount > 0;
|
|
115
|
-
React.useEffect(() => {
|
|
184
|
+
}, [hasToasts, context.isClosePausedRef]);
|
|
185
|
+
const getSortedTabbableCandidates = React.useCallback(
|
|
186
|
+
({ tabbingDirection }) => {
|
|
187
|
+
const toastItems = getItems();
|
|
188
|
+
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
189
|
+
const toastNode = toastItem.ref.current;
|
|
190
|
+
const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
|
|
191
|
+
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
192
|
+
});
|
|
193
|
+
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
194
|
+
},
|
|
195
|
+
[getItems]
|
|
196
|
+
);
|
|
197
|
+
React.useEffect(() => {
|
|
198
|
+
const viewport = ref.current;
|
|
199
|
+
if (viewport) {
|
|
116
200
|
const handleKeyDown = (event) => {
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
if (hasToasts && wrapper && viewport) {
|
|
127
|
-
const handlePause = () => {
|
|
128
|
-
if (!context.isClosePausedRef.current) {
|
|
129
|
-
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
130
|
-
viewport.dispatchEvent(pauseEvent);
|
|
131
|
-
context.isClosePausedRef.current = true;
|
|
201
|
+
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
202
|
+
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
203
|
+
if (isTabKey) {
|
|
204
|
+
const focusedElement = document.activeElement;
|
|
205
|
+
const isTabbingBackwards = event.shiftKey;
|
|
206
|
+
const targetIsViewport = event.target === viewport;
|
|
207
|
+
if (targetIsViewport && isTabbingBackwards) {
|
|
208
|
+
headFocusProxyRef.current?.focus();
|
|
209
|
+
return;
|
|
132
210
|
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
211
|
+
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
|
|
212
|
+
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
|
|
213
|
+
const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);
|
|
214
|
+
if (focusFirst(sortedCandidates.slice(index + 1))) {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
} else {
|
|
217
|
+
isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
|
|
139
218
|
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}, [hasToasts, context.isClosePausedRef]);
|
|
165
|
-
const getSortedTabbableCandidates = React.useCallback(
|
|
166
|
-
({ tabbingDirection }) => {
|
|
167
|
-
const toastItems = getItems();
|
|
168
|
-
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
169
|
-
const toastNode = toastItem.ref.current;
|
|
170
|
-
const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
|
|
171
|
-
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
172
|
-
});
|
|
173
|
-
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
174
|
-
},
|
|
175
|
-
[getItems]
|
|
176
|
-
);
|
|
177
|
-
React.useEffect(() => {
|
|
178
|
-
const viewport = ref.current;
|
|
179
|
-
if (viewport) {
|
|
180
|
-
const handleKeyDown = (event) => {
|
|
181
|
-
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
182
|
-
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
183
|
-
if (isTabKey) {
|
|
184
|
-
const focusedElement = document.activeElement;
|
|
185
|
-
const isTabbingBackwards = event.shiftKey;
|
|
186
|
-
const targetIsViewport = event.target === viewport;
|
|
187
|
-
if (targetIsViewport && isTabbingBackwards) {
|
|
188
|
-
headFocusProxyRef.current?.focus();
|
|
189
|
-
return;
|
|
190
|
-
}
|
|
191
|
-
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
|
|
192
|
-
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
|
|
193
|
-
const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);
|
|
194
|
-
if (focusFirst(sortedCandidates.slice(index + 1))) {
|
|
195
|
-
event.preventDefault();
|
|
196
|
-
} else {
|
|
197
|
-
isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
viewport.addEventListener("keydown", handleKeyDown);
|
|
222
|
+
return () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
223
|
+
}
|
|
224
|
+
}, [getItems, getSortedTabbableCandidates]);
|
|
225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
226
|
+
DismissableLayer.Branch,
|
|
227
|
+
{
|
|
228
|
+
ref: wrapperRef,
|
|
229
|
+
role: "region",
|
|
230
|
+
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
231
|
+
tabIndex: -1,
|
|
232
|
+
style: { pointerEvents: hasToasts ? void 0 : "none" },
|
|
233
|
+
children: [
|
|
234
|
+
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
235
|
+
FocusProxy,
|
|
236
|
+
{
|
|
237
|
+
ref: headFocusProxyRef,
|
|
238
|
+
onFocusFromOutsideViewport: () => {
|
|
239
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
240
|
+
tabbingDirection: "forwards"
|
|
241
|
+
});
|
|
242
|
+
focusFirst(tabbableCandidates);
|
|
198
243
|
}
|
|
199
244
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
tabIndex: -1,
|
|
212
|
-
style: { pointerEvents: hasToasts ? void 0 : "none" },
|
|
213
|
-
children: [
|
|
214
|
-
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
215
|
-
FocusProxy,
|
|
216
|
-
{
|
|
217
|
-
ref: headFocusProxyRef,
|
|
218
|
-
onFocusFromOutsideViewport: () => {
|
|
219
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
220
|
-
tabbingDirection: "forwards"
|
|
221
|
-
});
|
|
222
|
-
focusFirst(tabbableCandidates);
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
),
|
|
226
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
|
|
227
|
-
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
228
|
-
FocusProxy,
|
|
229
|
-
{
|
|
230
|
-
ref: tailFocusProxyRef,
|
|
231
|
-
onFocusFromOutsideViewport: () => {
|
|
232
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
233
|
-
tabbingDirection: "backwards"
|
|
234
|
-
});
|
|
235
|
-
focusFirst(tabbableCandidates);
|
|
236
|
-
}
|
|
245
|
+
),
|
|
246
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
|
|
247
|
+
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
248
|
+
FocusProxy,
|
|
249
|
+
{
|
|
250
|
+
ref: tailFocusProxyRef,
|
|
251
|
+
onFocusFromOutsideViewport: () => {
|
|
252
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
253
|
+
tabbingDirection: "backwards"
|
|
254
|
+
});
|
|
255
|
+
focusFirst(tabbableCandidates);
|
|
237
256
|
}
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
);
|
|
265
|
-
}
|
|
266
|
-
);
|
|
267
|
-
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
268
|
-
var TOAST_NAME = "Toast";
|
|
269
|
-
var TOAST_SWIPE_START = "toast.swipeStart";
|
|
270
|
-
var TOAST_SWIPE_MOVE = "toast.swipeMove";
|
|
271
|
-
var TOAST_SWIPE_CANCEL = "toast.swipeCancel";
|
|
272
|
-
var TOAST_SWIPE_END = "toast.swipeEnd";
|
|
273
|
-
var Toast = React.forwardRef(
|
|
274
|
-
(props, forwardedRef) => {
|
|
275
|
-
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
276
|
-
const [open = true, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
277
|
-
prop: openProp,
|
|
278
|
-
defaultProp: defaultOpen,
|
|
279
|
-
onChange: onOpenChange
|
|
280
|
-
});
|
|
281
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
282
|
-
ToastImpl,
|
|
283
|
-
{
|
|
284
|
-
open,
|
|
285
|
-
...toastProps,
|
|
286
|
-
ref: forwardedRef,
|
|
287
|
-
onClose: () => setOpen(false),
|
|
288
|
-
onPause: (0, import_react_use_callback_ref.useCallbackRef)(props.onPause),
|
|
289
|
-
onResume: (0, import_react_use_callback_ref.useCallbackRef)(props.onResume),
|
|
290
|
-
onSwipeStart: (0, import_primitive.composeEventHandlers)(props.onSwipeStart, (event) => {
|
|
291
|
-
event.currentTarget.setAttribute("data-swipe", "start");
|
|
292
|
-
}),
|
|
293
|
-
onSwipeMove: (0, import_primitive.composeEventHandlers)(props.onSwipeMove, (event) => {
|
|
294
|
-
const { x, y } = event.detail.delta;
|
|
295
|
-
event.currentTarget.setAttribute("data-swipe", "move");
|
|
296
|
-
event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
|
|
297
|
-
event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
|
|
298
|
-
}),
|
|
299
|
-
onSwipeCancel: (0, import_primitive.composeEventHandlers)(props.onSwipeCancel, (event) => {
|
|
300
|
-
event.currentTarget.setAttribute("data-swipe", "cancel");
|
|
301
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
302
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
303
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
|
|
304
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
|
|
305
|
-
}),
|
|
306
|
-
onSwipeEnd: (0, import_primitive.composeEventHandlers)(props.onSwipeEnd, (event) => {
|
|
307
|
-
const { x, y } = event.detail.delta;
|
|
308
|
-
event.currentTarget.setAttribute("data-swipe", "end");
|
|
309
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
310
|
-
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
311
|
-
event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
|
|
312
|
-
event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
|
|
313
|
-
setOpen(false);
|
|
314
|
-
})
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
]
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
);
|
|
264
|
+
ToastViewport.displayName = VIEWPORT_NAME;
|
|
265
|
+
var FOCUS_PROXY_NAME = "ToastFocusProxy";
|
|
266
|
+
var FocusProxy = React.forwardRef(
|
|
267
|
+
(props, forwardedRef) => {
|
|
268
|
+
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
|
|
269
|
+
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
|
|
270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
|
+
import_react_visually_hidden.VisuallyHidden,
|
|
272
|
+
{
|
|
273
|
+
"aria-hidden": true,
|
|
274
|
+
tabIndex: 0,
|
|
275
|
+
...proxyProps,
|
|
276
|
+
ref: forwardedRef,
|
|
277
|
+
style: { position: "fixed" },
|
|
278
|
+
onFocus: (event) => {
|
|
279
|
+
const prevFocusedElement = event.relatedTarget;
|
|
280
|
+
const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);
|
|
281
|
+
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
315
282
|
}
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
288
|
+
var TOAST_NAME = "Toast";
|
|
289
|
+
var TOAST_SWIPE_START = "toast.swipeStart";
|
|
290
|
+
var TOAST_SWIPE_MOVE = "toast.swipeMove";
|
|
291
|
+
var TOAST_SWIPE_CANCEL = "toast.swipeCancel";
|
|
292
|
+
var TOAST_SWIPE_END = "toast.swipeEnd";
|
|
293
|
+
var Toast = React.forwardRef(
|
|
294
|
+
(props, forwardedRef) => {
|
|
295
|
+
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
296
|
+
const [open = true, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
297
|
+
prop: openProp,
|
|
298
|
+
defaultProp: defaultOpen,
|
|
299
|
+
onChange: onOpenChange
|
|
300
|
+
});
|
|
301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
302
|
+
ToastImpl,
|
|
303
|
+
{
|
|
330
304
|
open,
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
305
|
+
...toastProps,
|
|
306
|
+
ref: forwardedRef,
|
|
307
|
+
onClose: () => setOpen(false),
|
|
308
|
+
onPause: (0, import_react_use_callback_ref.useCallbackRef)(props.onPause),
|
|
309
|
+
onResume: (0, import_react_use_callback_ref.useCallbackRef)(props.onResume),
|
|
310
|
+
onSwipeStart: (0, import_primitive.composeEventHandlers)(props.onSwipeStart, (event) => {
|
|
311
|
+
event.currentTarget.setAttribute("data-swipe", "start");
|
|
312
|
+
}),
|
|
313
|
+
onSwipeMove: (0, import_primitive.composeEventHandlers)(props.onSwipeMove, (event) => {
|
|
314
|
+
const { x, y } = event.detail.delta;
|
|
315
|
+
event.currentTarget.setAttribute("data-swipe", "move");
|
|
316
|
+
event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
|
|
317
|
+
event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
|
|
318
|
+
}),
|
|
319
|
+
onSwipeCancel: (0, import_primitive.composeEventHandlers)(props.onSwipeCancel, (event) => {
|
|
320
|
+
event.currentTarget.setAttribute("data-swipe", "cancel");
|
|
321
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
322
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
323
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
|
|
324
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
|
|
325
|
+
}),
|
|
326
|
+
onSwipeEnd: (0, import_primitive.composeEventHandlers)(props.onSwipeEnd, (event) => {
|
|
327
|
+
const { x, y } = event.detail.delta;
|
|
328
|
+
event.currentTarget.setAttribute("data-swipe", "end");
|
|
329
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
330
|
+
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
331
|
+
event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
|
|
332
|
+
event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
|
|
333
|
+
setOpen(false);
|
|
334
|
+
})
|
|
335
|
+
}
|
|
336
|
+
) });
|
|
337
|
+
}
|
|
338
|
+
);
|
|
339
|
+
Toast.displayName = TOAST_NAME;
|
|
340
|
+
var [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
|
|
341
|
+
onClose() {
|
|
342
|
+
}
|
|
343
|
+
});
|
|
344
|
+
var ToastImpl = React.forwardRef(
|
|
345
|
+
(props, forwardedRef) => {
|
|
346
|
+
const {
|
|
347
|
+
__scopeToast,
|
|
348
|
+
type = "foreground",
|
|
349
|
+
duration: durationProp,
|
|
350
|
+
open,
|
|
351
|
+
onClose,
|
|
352
|
+
onEscapeKeyDown,
|
|
353
|
+
onPause,
|
|
354
|
+
onResume,
|
|
355
|
+
onSwipeStart,
|
|
356
|
+
onSwipeMove,
|
|
357
|
+
onSwipeCancel,
|
|
358
|
+
onSwipeEnd,
|
|
359
|
+
...toastProps
|
|
360
|
+
} = props;
|
|
361
|
+
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
362
|
+
const [node, setNode] = React.useState(null);
|
|
363
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node2) => setNode(node2));
|
|
364
|
+
const pointerStartRef = React.useRef(null);
|
|
365
|
+
const swipeDeltaRef = React.useRef(null);
|
|
366
|
+
const duration = durationProp || context.duration;
|
|
367
|
+
const closeTimerStartTimeRef = React.useRef(0);
|
|
368
|
+
const closeTimerRemainingTimeRef = React.useRef(duration);
|
|
369
|
+
const closeTimerRef = React.useRef(0);
|
|
370
|
+
const { onToastAdd, onToastRemove } = context;
|
|
371
|
+
const handleClose = (0, import_react_use_callback_ref.useCallbackRef)(() => {
|
|
372
|
+
const isFocusInToast = node?.contains(document.activeElement);
|
|
373
|
+
if (isFocusInToast) context.viewport?.focus();
|
|
374
|
+
onClose();
|
|
375
|
+
});
|
|
376
|
+
const startTimer = React.useCallback(
|
|
377
|
+
(duration2) => {
|
|
378
|
+
if (!duration2 || duration2 === Infinity) return;
|
|
379
|
+
window.clearTimeout(closeTimerRef.current);
|
|
380
|
+
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
|
|
381
|
+
closeTimerRef.current = window.setTimeout(handleClose, duration2);
|
|
382
|
+
},
|
|
383
|
+
[handleClose]
|
|
384
|
+
);
|
|
385
|
+
React.useEffect(() => {
|
|
386
|
+
const viewport = context.viewport;
|
|
387
|
+
if (viewport) {
|
|
388
|
+
const handleResume = () => {
|
|
389
|
+
startTimer(closeTimerRemainingTimeRef.current);
|
|
390
|
+
onResume?.();
|
|
391
|
+
};
|
|
392
|
+
const handlePause = () => {
|
|
393
|
+
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
394
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
359
395
|
window.clearTimeout(closeTimerRef.current);
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
396
|
+
onPause?.();
|
|
397
|
+
};
|
|
398
|
+
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
|
|
399
|
+
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
|
|
400
|
+
return () => {
|
|
401
|
+
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
|
|
402
|
+
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
403
|
+
};
|
|
404
|
+
}
|
|
405
|
+
}, [context.viewport, duration, onPause, onResume, startTimer]);
|
|
406
|
+
React.useEffect(() => {
|
|
407
|
+
if (open && !context.isClosePausedRef.current) startTimer(duration);
|
|
408
|
+
}, [open, duration, context.isClosePausedRef, startTimer]);
|
|
409
|
+
React.useEffect(() => {
|
|
410
|
+
onToastAdd();
|
|
411
|
+
return () => onToastRemove();
|
|
412
|
+
}, [onToastAdd, onToastRemove]);
|
|
413
|
+
const announceTextContent = React.useMemo(() => {
|
|
414
|
+
return node ? getAnnounceTextContent(node) : null;
|
|
415
|
+
}, [node]);
|
|
416
|
+
if (!context.viewport) return null;
|
|
417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
418
|
+
announceTextContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
419
|
+
ToastAnnounce,
|
|
420
|
+
{
|
|
421
|
+
__scopeToast,
|
|
422
|
+
role: "status",
|
|
423
|
+
"aria-live": type === "foreground" ? "assertive" : "polite",
|
|
424
|
+
"aria-atomic": true,
|
|
425
|
+
children: announceTextContent
|
|
384
426
|
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
React.useEffect(() => {
|
|
390
|
-
onToastAdd();
|
|
391
|
-
return () => onToastRemove();
|
|
392
|
-
}, [onToastAdd, onToastRemove]);
|
|
393
|
-
const announceTextContent = React.useMemo(() => {
|
|
394
|
-
return node ? getAnnounceTextContent(node) : null;
|
|
395
|
-
}, [node]);
|
|
396
|
-
if (!context.viewport) return null;
|
|
397
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
398
|
-
announceTextContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
399
|
-
ToastAnnounce,
|
|
427
|
+
),
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM.createPortal(
|
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
430
|
+
DismissableLayer.Root,
|
|
400
431
|
{
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
432
|
+
asChild: true,
|
|
433
|
+
onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(onEscapeKeyDown, () => {
|
|
434
|
+
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
435
|
+
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
436
|
+
}),
|
|
437
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
438
|
+
import_react_primitive.Primitive.li,
|
|
439
|
+
{
|
|
440
|
+
role: "status",
|
|
441
|
+
"aria-live": "off",
|
|
442
|
+
"aria-atomic": true,
|
|
443
|
+
tabIndex: 0,
|
|
444
|
+
"data-state": open ? "open" : "closed",
|
|
445
|
+
"data-swipe-direction": context.swipeDirection,
|
|
446
|
+
...toastProps,
|
|
447
|
+
ref: composedRefs,
|
|
448
|
+
style: { userSelect: "none", touchAction: "none", ...props.style },
|
|
449
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
450
|
+
if (event.key !== "Escape") return;
|
|
451
|
+
onEscapeKeyDown?.(event.nativeEvent);
|
|
452
|
+
if (!event.nativeEvent.defaultPrevented) {
|
|
453
|
+
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
454
|
+
handleClose();
|
|
455
|
+
}
|
|
456
|
+
}),
|
|
457
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
|
|
458
|
+
if (event.button !== 0) return;
|
|
459
|
+
pointerStartRef.current = { x: event.clientX, y: event.clientY };
|
|
460
|
+
}),
|
|
461
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
|
|
462
|
+
if (!pointerStartRef.current) return;
|
|
463
|
+
const x = event.clientX - pointerStartRef.current.x;
|
|
464
|
+
const y = event.clientY - pointerStartRef.current.y;
|
|
465
|
+
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
466
|
+
const isHorizontalSwipe = ["left", "right"].includes(context.swipeDirection);
|
|
467
|
+
const clamp = ["left", "up"].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
468
|
+
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
469
|
+
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
470
|
+
const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
|
|
471
|
+
const delta = { x: clampedX, y: clampedY };
|
|
472
|
+
const eventDetail = { originalEvent: event, delta };
|
|
473
|
+
if (hasSwipeMoveStarted) {
|
|
474
|
+
swipeDeltaRef.current = delta;
|
|
475
|
+
handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
476
|
+
discrete: false
|
|
477
|
+
});
|
|
478
|
+
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
479
|
+
swipeDeltaRef.current = delta;
|
|
480
|
+
handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
481
|
+
discrete: false
|
|
482
|
+
});
|
|
483
|
+
event.target.setPointerCapture(event.pointerId);
|
|
484
|
+
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
|
|
485
|
+
pointerStartRef.current = null;
|
|
486
|
+
}
|
|
487
|
+
}),
|
|
488
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
|
|
489
|
+
const delta = swipeDeltaRef.current;
|
|
490
|
+
const target = event.target;
|
|
491
|
+
if (target.hasPointerCapture(event.pointerId)) {
|
|
492
|
+
target.releasePointerCapture(event.pointerId);
|
|
493
|
+
}
|
|
494
|
+
swipeDeltaRef.current = null;
|
|
495
|
+
pointerStartRef.current = null;
|
|
496
|
+
if (delta) {
|
|
497
|
+
const toast = event.currentTarget;
|
|
452
498
|
const eventDetail = { originalEvent: event, delta };
|
|
453
|
-
if (
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
discrete: false
|
|
457
|
-
});
|
|
458
|
-
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
459
|
-
swipeDeltaRef.current = delta;
|
|
460
|
-
handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
461
|
-
discrete: false
|
|
499
|
+
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
|
|
500
|
+
handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
501
|
+
discrete: true
|
|
462
502
|
});
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
const delta = swipeDeltaRef.current;
|
|
470
|
-
const target = event.target;
|
|
471
|
-
if (target.hasPointerCapture(event.pointerId)) {
|
|
472
|
-
target.releasePointerCapture(event.pointerId);
|
|
473
|
-
}
|
|
474
|
-
swipeDeltaRef.current = null;
|
|
475
|
-
pointerStartRef.current = null;
|
|
476
|
-
if (delta) {
|
|
477
|
-
const toast = event.currentTarget;
|
|
478
|
-
const eventDetail = { originalEvent: event, delta };
|
|
479
|
-
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
|
|
480
|
-
handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
503
|
+
} else {
|
|
504
|
+
handleAndDispatchCustomEvent(
|
|
505
|
+
TOAST_SWIPE_CANCEL,
|
|
506
|
+
onSwipeCancel,
|
|
507
|
+
eventDetail,
|
|
508
|
+
{
|
|
481
509
|
discrete: true
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
handleAndDispatchCustomEvent(
|
|
485
|
-
TOAST_SWIPE_CANCEL,
|
|
486
|
-
onSwipeCancel,
|
|
487
|
-
eventDetail,
|
|
488
|
-
{
|
|
489
|
-
discrete: true
|
|
490
|
-
}
|
|
491
|
-
);
|
|
492
|
-
}
|
|
493
|
-
toast.addEventListener("click", (event2) => event2.preventDefault(), {
|
|
494
|
-
once: true
|
|
495
|
-
});
|
|
510
|
+
}
|
|
511
|
+
);
|
|
496
512
|
}
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
] });
|
|
505
|
-
}
|
|
506
|
-
);
|
|
507
|
-
ToastImpl.propTypes = {
|
|
508
|
-
type(props) {
|
|
509
|
-
if (props.type && !["foreground", "background"].includes(props.type)) {
|
|
510
|
-
const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
511
|
-
return new Error(error);
|
|
512
|
-
}
|
|
513
|
-
return null;
|
|
514
|
-
}
|
|
515
|
-
};
|
|
516
|
-
var ToastAnnounce = (props) => {
|
|
517
|
-
const { __scopeToast, children, ...announceProps } = props;
|
|
518
|
-
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
519
|
-
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
520
|
-
const [isAnnounced, setIsAnnounced] = React.useState(false);
|
|
521
|
-
useNextFrame(() => setRenderAnnounceText(true));
|
|
522
|
-
React.useEffect(() => {
|
|
523
|
-
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
|
|
524
|
-
return () => window.clearTimeout(timer);
|
|
525
|
-
}, []);
|
|
526
|
-
return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_visually_hidden.VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
527
|
-
context.label,
|
|
528
|
-
" ",
|
|
529
|
-
children
|
|
530
|
-
] }) }) });
|
|
531
|
-
};
|
|
532
|
-
var TITLE_NAME = "ToastTitle";
|
|
533
|
-
var ToastTitle = React.forwardRef(
|
|
534
|
-
(props, forwardedRef) => {
|
|
535
|
-
const { __scopeToast, ...titleProps } = props;
|
|
536
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...titleProps, ref: forwardedRef });
|
|
537
|
-
}
|
|
538
|
-
);
|
|
539
|
-
ToastTitle.displayName = TITLE_NAME;
|
|
540
|
-
var DESCRIPTION_NAME = "ToastDescription";
|
|
541
|
-
var ToastDescription = React.forwardRef(
|
|
542
|
-
(props, forwardedRef) => {
|
|
543
|
-
const { __scopeToast, ...descriptionProps } = props;
|
|
544
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...descriptionProps, ref: forwardedRef });
|
|
545
|
-
}
|
|
546
|
-
);
|
|
547
|
-
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
548
|
-
var ACTION_NAME = "ToastAction";
|
|
549
|
-
var ToastAction = React.forwardRef(
|
|
550
|
-
(props, forwardedRef) => {
|
|
551
|
-
const { altText, ...actionProps } = props;
|
|
552
|
-
if (!altText) return null;
|
|
553
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
|
|
554
|
-
}
|
|
555
|
-
);
|
|
556
|
-
ToastAction.propTypes = {
|
|
557
|
-
altText(props) {
|
|
558
|
-
if (!props.altText) {
|
|
559
|
-
return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
|
|
560
|
-
}
|
|
561
|
-
return null;
|
|
562
|
-
}
|
|
563
|
-
};
|
|
564
|
-
ToastAction.displayName = ACTION_NAME;
|
|
565
|
-
var CLOSE_NAME = "ToastClose";
|
|
566
|
-
var ToastClose = React.forwardRef(
|
|
567
|
-
(props, forwardedRef) => {
|
|
568
|
-
const { __scopeToast, ...closeProps } = props;
|
|
569
|
-
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
|
|
570
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
571
|
-
import_react_primitive.Primitive.button,
|
|
572
|
-
{
|
|
573
|
-
type: "button",
|
|
574
|
-
...closeProps,
|
|
575
|
-
ref: forwardedRef,
|
|
576
|
-
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, interactiveContext.onClose)
|
|
577
|
-
}
|
|
578
|
-
) });
|
|
579
|
-
}
|
|
580
|
-
);
|
|
581
|
-
ToastClose.displayName = CLOSE_NAME;
|
|
582
|
-
var ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
|
|
583
|
-
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
584
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
585
|
-
import_react_primitive.Primitive.div,
|
|
586
|
-
{
|
|
587
|
-
"data-radix-toast-announce-exclude": "",
|
|
588
|
-
"data-radix-toast-announce-alt": altText || void 0,
|
|
589
|
-
...announceExcludeProps,
|
|
590
|
-
ref: forwardedRef
|
|
591
|
-
}
|
|
592
|
-
);
|
|
593
|
-
});
|
|
594
|
-
function getAnnounceTextContent(container) {
|
|
595
|
-
const textContent = [];
|
|
596
|
-
const childNodes = Array.from(container.childNodes);
|
|
597
|
-
childNodes.forEach((node) => {
|
|
598
|
-
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
|
|
599
|
-
if (isHTMLElement(node)) {
|
|
600
|
-
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
|
|
601
|
-
const isExcluded = node.dataset.radixToastAnnounceExclude === "";
|
|
602
|
-
if (!isHidden) {
|
|
603
|
-
if (isExcluded) {
|
|
604
|
-
const altText = node.dataset.radixToastAnnounceAlt;
|
|
605
|
-
if (altText) textContent.push(altText);
|
|
606
|
-
} else {
|
|
607
|
-
textContent.push(...getAnnounceTextContent(node));
|
|
513
|
+
toast.addEventListener("click", (event2) => event2.preventDefault(), {
|
|
514
|
+
once: true
|
|
515
|
+
});
|
|
516
|
+
}
|
|
517
|
+
})
|
|
518
|
+
}
|
|
519
|
+
)
|
|
608
520
|
}
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
521
|
+
) }),
|
|
522
|
+
context.viewport
|
|
523
|
+
) })
|
|
524
|
+
] });
|
|
613
525
|
}
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
if (
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
} else {
|
|
621
|
-
currentTarget.dispatchEvent(event);
|
|
526
|
+
);
|
|
527
|
+
ToastImpl.propTypes = {
|
|
528
|
+
type(props) {
|
|
529
|
+
if (props.type && !["foreground", "background"].includes(props.type)) {
|
|
530
|
+
const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
531
|
+
return new Error(error);
|
|
622
532
|
}
|
|
533
|
+
return null;
|
|
623
534
|
}
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
535
|
+
};
|
|
536
|
+
var ToastAnnounce = (props) => {
|
|
537
|
+
const { __scopeToast, children, ...announceProps } = props;
|
|
538
|
+
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
539
|
+
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
540
|
+
const [isAnnounced, setIsAnnounced] = React.useState(false);
|
|
541
|
+
useNextFrame(() => setRenderAnnounceText(true));
|
|
542
|
+
React.useEffect(() => {
|
|
543
|
+
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
|
|
544
|
+
return () => window.clearTimeout(timer);
|
|
545
|
+
}, []);
|
|
546
|
+
return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_visually_hidden.VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
547
|
+
context.label,
|
|
548
|
+
" ",
|
|
549
|
+
children
|
|
550
|
+
] }) }) });
|
|
551
|
+
};
|
|
552
|
+
var TITLE_NAME = "ToastTitle";
|
|
553
|
+
var ToastTitle = React.forwardRef(
|
|
554
|
+
(props, forwardedRef) => {
|
|
555
|
+
const { __scopeToast, ...titleProps } = props;
|
|
556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...titleProps, ref: forwardedRef });
|
|
557
|
+
}
|
|
558
|
+
);
|
|
559
|
+
ToastTitle.displayName = TITLE_NAME;
|
|
560
|
+
var DESCRIPTION_NAME = "ToastDescription";
|
|
561
|
+
var ToastDescription = React.forwardRef(
|
|
562
|
+
(props, forwardedRef) => {
|
|
563
|
+
const { __scopeToast, ...descriptionProps } = props;
|
|
564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...descriptionProps, ref: forwardedRef });
|
|
565
|
+
}
|
|
566
|
+
);
|
|
567
|
+
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
568
|
+
var ACTION_NAME = "ToastAction";
|
|
569
|
+
var ToastAction = React.forwardRef(
|
|
570
|
+
(props, forwardedRef) => {
|
|
571
|
+
const { altText, ...actionProps } = props;
|
|
572
|
+
if (!altText) return null;
|
|
573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
|
|
574
|
+
}
|
|
575
|
+
);
|
|
576
|
+
ToastAction.propTypes = {
|
|
577
|
+
altText(props) {
|
|
578
|
+
if (!props.altText) {
|
|
579
|
+
return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
|
|
632
580
|
}
|
|
633
|
-
|
|
634
|
-
function useNextFrame(callback = () => {
|
|
635
|
-
}) {
|
|
636
|
-
const fn = (0, import_react_use_callback_ref.useCallbackRef)(callback);
|
|
637
|
-
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
638
|
-
let raf1 = 0;
|
|
639
|
-
let raf2 = 0;
|
|
640
|
-
raf1 = window.requestAnimationFrame(() => raf2 = window.requestAnimationFrame(fn));
|
|
641
|
-
return () => {
|
|
642
|
-
window.cancelAnimationFrame(raf1);
|
|
643
|
-
window.cancelAnimationFrame(raf2);
|
|
644
|
-
};
|
|
645
|
-
}, [fn]);
|
|
581
|
+
return null;
|
|
646
582
|
}
|
|
647
|
-
|
|
648
|
-
|
|
583
|
+
};
|
|
584
|
+
ToastAction.displayName = ACTION_NAME;
|
|
585
|
+
var CLOSE_NAME = "ToastClose";
|
|
586
|
+
var ToastClose = React.forwardRef(
|
|
587
|
+
(props, forwardedRef) => {
|
|
588
|
+
const { __scopeToast, ...closeProps } = props;
|
|
589
|
+
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
|
|
590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
591
|
+
import_react_primitive.Primitive.button,
|
|
592
|
+
{
|
|
593
|
+
type: "button",
|
|
594
|
+
...closeProps,
|
|
595
|
+
ref: forwardedRef,
|
|
596
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, interactiveContext.onClose)
|
|
597
|
+
}
|
|
598
|
+
) });
|
|
649
599
|
}
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
600
|
+
);
|
|
601
|
+
ToastClose.displayName = CLOSE_NAME;
|
|
602
|
+
var ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
|
|
603
|
+
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
605
|
+
import_react_primitive.Primitive.div,
|
|
606
|
+
{
|
|
607
|
+
"data-radix-toast-announce-exclude": "",
|
|
608
|
+
"data-radix-toast-announce-alt": altText || void 0,
|
|
609
|
+
...announceExcludeProps,
|
|
610
|
+
ref: forwardedRef
|
|
611
|
+
}
|
|
612
|
+
);
|
|
613
|
+
});
|
|
614
|
+
function getAnnounceTextContent(container) {
|
|
615
|
+
const textContent = [];
|
|
616
|
+
const childNodes = Array.from(container.childNodes);
|
|
617
|
+
childNodes.forEach((node) => {
|
|
618
|
+
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
|
|
619
|
+
if (isHTMLElement(node)) {
|
|
620
|
+
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
|
|
621
|
+
const isExcluded = node.dataset.radixToastAnnounceExclude === "";
|
|
622
|
+
if (!isHidden) {
|
|
623
|
+
if (isExcluded) {
|
|
624
|
+
const altText = node.dataset.radixToastAnnounceAlt;
|
|
625
|
+
if (altText) textContent.push(altText);
|
|
626
|
+
} else {
|
|
627
|
+
textContent.push(...getAnnounceTextContent(node));
|
|
628
|
+
}
|
|
657
629
|
}
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
|
|
630
|
+
}
|
|
631
|
+
});
|
|
632
|
+
return textContent;
|
|
633
|
+
}
|
|
634
|
+
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
635
|
+
const currentTarget = detail.originalEvent.currentTarget;
|
|
636
|
+
const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
|
|
637
|
+
if (handler) currentTarget.addEventListener(name, handler, { once: true });
|
|
638
|
+
if (discrete) {
|
|
639
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(currentTarget, event);
|
|
640
|
+
} else {
|
|
641
|
+
currentTarget.dispatchEvent(event);
|
|
661
642
|
}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
643
|
+
}
|
|
644
|
+
var isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
645
|
+
const deltaX = Math.abs(delta.x);
|
|
646
|
+
const deltaY = Math.abs(delta.y);
|
|
647
|
+
const isDeltaX = deltaX > deltaY;
|
|
648
|
+
if (direction === "left" || direction === "right") {
|
|
649
|
+
return isDeltaX && deltaX > threshold;
|
|
650
|
+
} else {
|
|
651
|
+
return !isDeltaX && deltaY > threshold;
|
|
669
652
|
}
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
653
|
+
};
|
|
654
|
+
function useNextFrame(callback = () => {
|
|
655
|
+
}) {
|
|
656
|
+
const fn = (0, import_react_use_callback_ref.useCallbackRef)(callback);
|
|
657
|
+
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
|
658
|
+
let raf1 = 0;
|
|
659
|
+
let raf2 = 0;
|
|
660
|
+
raf1 = window.requestAnimationFrame(() => raf2 = window.requestAnimationFrame(fn));
|
|
661
|
+
return () => {
|
|
662
|
+
window.cancelAnimationFrame(raf1);
|
|
663
|
+
window.cancelAnimationFrame(raf2);
|
|
664
|
+
};
|
|
665
|
+
}, [fn]);
|
|
666
|
+
}
|
|
667
|
+
function isHTMLElement(node) {
|
|
668
|
+
return node.nodeType === node.ELEMENT_NODE;
|
|
669
|
+
}
|
|
670
|
+
function getTabbableCandidates(container) {
|
|
671
|
+
const nodes = [];
|
|
672
|
+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
673
|
+
acceptNode: (node) => {
|
|
674
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
675
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
676
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
677
|
+
}
|
|
678
|
+
});
|
|
679
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
680
|
+
return nodes;
|
|
681
|
+
}
|
|
682
|
+
function focusFirst(candidates) {
|
|
683
|
+
const previouslyFocusedElement = document.activeElement;
|
|
684
|
+
return candidates.some((candidate) => {
|
|
685
|
+
if (candidate === previouslyFocusedElement) return true;
|
|
686
|
+
candidate.focus();
|
|
687
|
+
return document.activeElement !== previouslyFocusedElement;
|
|
688
|
+
});
|
|
689
|
+
}
|
|
690
|
+
var Provider = ToastProvider;
|
|
691
|
+
var Viewport = ToastViewport;
|
|
692
|
+
var Root2 = Toast;
|
|
693
|
+
var Title = ToastTitle;
|
|
694
|
+
var Description = ToastDescription;
|
|
695
|
+
var Action = ToastAction;
|
|
696
|
+
var Close = ToastClose;
|
|
678
697
|
//# sourceMappingURL=index.js.map
|