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