@radix-ui/react-toast 1.1.6-rc.5 → 1.2.0-rc.1
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 +631 -704
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +624 -691
- 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,678 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
$parcel$export(module.exports, "ToastClose", () => $9208a85b3e79d33f$export$811e70f61c205839);
|
|
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
|
+
(() => {
|
|
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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
10
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
11
|
+
}) : x)(function(x) {
|
|
12
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
13
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
14
|
+
});
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
53
31
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
32
|
+
// packages/react/toast/src/Toast.tsx
|
|
33
|
+
var React = __toESM(__require("react"));
|
|
34
|
+
var ReactDOM = __toESM(__require("react-dom"));
|
|
35
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
36
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
37
|
+
var import_react_collection = __require("@radix-ui/react-collection");
|
|
38
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
39
|
+
var DismissableLayer = __toESM(__require("@radix-ui/react-dismissable-layer"));
|
|
40
|
+
var import_react_portal = __require("@radix-ui/react-portal");
|
|
41
|
+
var import_react_presence = __require("@radix-ui/react-presence");
|
|
42
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
43
|
+
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
|
|
44
|
+
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
|
|
45
|
+
var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
|
|
46
|
+
var import_react_visually_hidden = __require("@radix-ui/react-visually-hidden");
|
|
47
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
48
|
+
var PROVIDER_NAME = "ToastProvider";
|
|
49
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)("Toast");
|
|
50
|
+
var [createToastContext, createToastScope] = (0, import_react_context.createContextScope)("Toast", [createCollectionScope]);
|
|
51
|
+
var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
|
|
52
|
+
var ToastProvider = (props) => {
|
|
53
|
+
const {
|
|
54
|
+
__scopeToast,
|
|
55
|
+
label = "Notification",
|
|
56
|
+
duration = 5e3,
|
|
57
|
+
swipeDirection = "right",
|
|
58
|
+
swipeThreshold = 50,
|
|
59
|
+
children
|
|
60
|
+
} = props;
|
|
61
|
+
const [viewport, setViewport] = React.useState(null);
|
|
62
|
+
const [toastCount, setToastCount] = React.useState(0);
|
|
63
|
+
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
|
|
64
|
+
const isClosePausedRef = React.useRef(false);
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
ToastProviderProvider,
|
|
67
|
+
{
|
|
71
68
|
scope: __scopeToast,
|
|
72
|
-
label
|
|
73
|
-
duration
|
|
74
|
-
swipeDirection
|
|
75
|
-
swipeThreshold
|
|
76
|
-
toastCount
|
|
77
|
-
viewport
|
|
69
|
+
label,
|
|
70
|
+
duration,
|
|
71
|
+
swipeDirection,
|
|
72
|
+
swipeThreshold,
|
|
73
|
+
toastCount,
|
|
74
|
+
viewport,
|
|
78
75
|
onViewportChange: setViewport,
|
|
79
|
-
onToastAdd:
|
|
80
|
-
|
|
81
|
-
,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
return null;
|
|
76
|
+
onToastAdd: React.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
|
|
77
|
+
onToastRemove: React.useCallback(() => setToastCount((prevCount) => prevCount - 1), []),
|
|
78
|
+
isFocusedToastEscapeKeyDownRef,
|
|
79
|
+
isClosePausedRef,
|
|
80
|
+
children
|
|
81
|
+
}
|
|
82
|
+
) });
|
|
83
|
+
};
|
|
84
|
+
ToastProvider.propTypes = {
|
|
85
|
+
label(props) {
|
|
86
|
+
if (props.label && typeof props.label === "string" && !props.label.trim()) {
|
|
87
|
+
const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
88
|
+
return new Error(error);
|
|
89
|
+
}
|
|
90
|
+
return null;
|
|
96
91
|
}
|
|
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();
|
|
92
|
+
};
|
|
93
|
+
ToastProvider.displayName = PROVIDER_NAME;
|
|
94
|
+
var VIEWPORT_NAME = "ToastViewport";
|
|
95
|
+
var VIEWPORT_DEFAULT_HOTKEY = ["F8"];
|
|
96
|
+
var VIEWPORT_PAUSE = "toast.viewportPause";
|
|
97
|
+
var VIEWPORT_RESUME = "toast.viewportResume";
|
|
98
|
+
var ToastViewport = React.forwardRef(
|
|
99
|
+
(props, forwardedRef) => {
|
|
100
|
+
const {
|
|
101
|
+
__scopeToast,
|
|
102
|
+
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
103
|
+
label = "Notifications ({hotkey})",
|
|
104
|
+
...viewportProps
|
|
105
|
+
} = props;
|
|
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(() => {
|
|
116
|
+
const handleKeyDown = (event) => {
|
|
117
|
+
const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
|
|
118
|
+
if (isHotkeyPressed) ref.current?.focus();
|
|
128
119
|
};
|
|
129
|
-
document.addEventListener(
|
|
130
|
-
return ()=>document.removeEventListener(
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
hotkey
|
|
134
|
-
]);
|
|
135
|
-
$iTyic$react.useEffect(()=>{
|
|
120
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
121
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
122
|
+
}, [hotkey]);
|
|
123
|
+
React.useEffect(() => {
|
|
136
124
|
const wrapper = wrapperRef.current;
|
|
137
125
|
const viewport = ref.current;
|
|
138
126
|
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
|
-
|
|
127
|
+
const handlePause = () => {
|
|
128
|
+
if (!context.isClosePausedRef.current) {
|
|
129
|
+
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
130
|
+
viewport.dispatchEvent(pauseEvent);
|
|
131
|
+
context.isClosePausedRef.current = true;
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
const handleResume = () => {
|
|
135
|
+
if (context.isClosePausedRef.current) {
|
|
136
|
+
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
137
|
+
viewport.dispatchEvent(resumeEvent);
|
|
138
|
+
context.isClosePausedRef.current = false;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
const handleFocusOutResume = (event) => {
|
|
142
|
+
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
|
|
143
|
+
if (isFocusMovingOutside) handleResume();
|
|
144
|
+
};
|
|
145
|
+
const handlePointerLeaveResume = () => {
|
|
146
|
+
const isFocusInside = wrapper.contains(document.activeElement);
|
|
147
|
+
if (!isFocusInside) handleResume();
|
|
148
|
+
};
|
|
149
|
+
wrapper.addEventListener("focusin", handlePause);
|
|
150
|
+
wrapper.addEventListener("focusout", handleFocusOutResume);
|
|
151
|
+
wrapper.addEventListener("pointermove", handlePause);
|
|
152
|
+
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
|
|
153
|
+
window.addEventListener("blur", handlePause);
|
|
154
|
+
window.addEventListener("focus", handleResume);
|
|
155
|
+
return () => {
|
|
156
|
+
wrapper.removeEventListener("focusin", handlePause);
|
|
157
|
+
wrapper.removeEventListener("focusout", handleFocusOutResume);
|
|
158
|
+
wrapper.removeEventListener("pointermove", handlePause);
|
|
159
|
+
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
|
|
160
|
+
window.removeEventListener("blur", handlePause);
|
|
161
|
+
window.removeEventListener("focus", handleResume);
|
|
162
|
+
};
|
|
175
163
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
const toastItems = getItems();
|
|
182
|
-
const tabbableCandidates = toastItems.map((toastItem)=>{
|
|
164
|
+
}, [hasToasts, context.isClosePausedRef]);
|
|
165
|
+
const getSortedTabbableCandidates = React.useCallback(
|
|
166
|
+
({ tabbingDirection }) => {
|
|
167
|
+
const toastItems = getItems();
|
|
168
|
+
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
183
169
|
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
|
|
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;
|
|
198
179
|
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);
|
|
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();
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
viewport.addEventListener("keydown", handleKeyDown);
|
|
202
|
+
return () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
253
203
|
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
204
|
+
}, [getItems, getSortedTabbableCandidates]);
|
|
205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
206
|
+
DismissableLayer.Branch,
|
|
207
|
+
{
|
|
208
|
+
ref: wrapperRef,
|
|
209
|
+
role: "region",
|
|
210
|
+
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
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
|
+
}
|
|
237
|
+
}
|
|
238
|
+
)
|
|
239
|
+
]
|
|
267
240
|
}
|
|
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;
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
);
|
|
244
|
+
ToastViewport.displayName = VIEWPORT_NAME;
|
|
245
|
+
var FOCUS_PROXY_NAME = "ToastFocusProxy";
|
|
246
|
+
var FocusProxy = React.forwardRef(
|
|
247
|
+
(props, forwardedRef) => {
|
|
248
|
+
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
|
|
249
|
+
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
|
|
250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
251
|
+
import_react_visually_hidden.VisuallyHidden,
|
|
252
|
+
{
|
|
253
|
+
"aria-hidden": true,
|
|
254
|
+
tabIndex: 0,
|
|
255
|
+
...proxyProps,
|
|
256
|
+
ref: forwardedRef,
|
|
257
|
+
style: { position: "fixed" },
|
|
258
|
+
onFocus: (event) => {
|
|
288
259
|
const prevFocusedElement = event.relatedTarget;
|
|
289
|
-
const isFocusFromOutsideViewport = !
|
|
260
|
+
const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);
|
|
290
261
|
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
262
|
+
}
|
|
291
263
|
}
|
|
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({
|
|
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)({
|
|
307
277
|
prop: openProp,
|
|
308
278
|
defaultProp: defaultOpen,
|
|
309
279
|
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`);
|
|
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`);
|
|
344
313
|
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
|
-
|
|
314
|
+
})
|
|
315
|
+
}
|
|
316
|
+
) });
|
|
317
|
+
}
|
|
318
|
+
);
|
|
319
|
+
Toast.displayName = TOAST_NAME;
|
|
320
|
+
var [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
|
|
321
|
+
onClose() {
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
var ToastImpl = React.forwardRef(
|
|
325
|
+
(props, forwardedRef) => {
|
|
326
|
+
const {
|
|
327
|
+
__scopeToast,
|
|
328
|
+
type = "foreground",
|
|
329
|
+
duration: durationProp,
|
|
330
|
+
open,
|
|
331
|
+
onClose,
|
|
332
|
+
onEscapeKeyDown,
|
|
333
|
+
onPause,
|
|
334
|
+
onResume,
|
|
335
|
+
onSwipeStart,
|
|
336
|
+
onSwipeMove,
|
|
337
|
+
onSwipeCancel,
|
|
338
|
+
onSwipeEnd,
|
|
339
|
+
...toastProps
|
|
340
|
+
} = props;
|
|
341
|
+
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
342
|
+
const [node, setNode] = React.useState(null);
|
|
343
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node2) => setNode(node2));
|
|
344
|
+
const pointerStartRef = React.useRef(null);
|
|
345
|
+
const swipeDeltaRef = React.useRef(null);
|
|
346
|
+
const duration = durationProp || context.duration;
|
|
347
|
+
const closeTimerStartTimeRef = React.useRef(0);
|
|
348
|
+
const closeTimerRemainingTimeRef = React.useRef(duration);
|
|
349
|
+
const closeTimerRef = React.useRef(0);
|
|
350
|
+
const { onToastAdd, onToastRemove } = context;
|
|
351
|
+
const handleClose = (0, import_react_use_callback_ref.useCallbackRef)(() => {
|
|
352
|
+
const isFocusInToast = node?.contains(document.activeElement);
|
|
353
|
+
if (isFocusInToast) context.viewport?.focus();
|
|
373
354
|
onClose();
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
355
|
+
});
|
|
356
|
+
const startTimer = React.useCallback(
|
|
357
|
+
(duration2) => {
|
|
358
|
+
if (!duration2 || duration2 === Infinity) return;
|
|
359
|
+
window.clearTimeout(closeTimerRef.current);
|
|
360
|
+
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
|
|
361
|
+
closeTimerRef.current = window.setTimeout(handleClose, duration2);
|
|
362
|
+
},
|
|
363
|
+
[handleClose]
|
|
364
|
+
);
|
|
365
|
+
React.useEffect(() => {
|
|
384
366
|
const viewport = context.viewport;
|
|
385
367
|
if (viewport) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
368
|
+
const handleResume = () => {
|
|
369
|
+
startTimer(closeTimerRemainingTimeRef.current);
|
|
370
|
+
onResume?.();
|
|
371
|
+
};
|
|
372
|
+
const handlePause = () => {
|
|
373
|
+
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
374
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
375
|
+
window.clearTimeout(closeTimerRef.current);
|
|
376
|
+
onPause?.();
|
|
377
|
+
};
|
|
378
|
+
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
|
|
379
|
+
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
|
|
380
|
+
return () => {
|
|
381
|
+
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
|
|
382
|
+
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
383
|
+
};
|
|
402
384
|
}
|
|
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(()=>{
|
|
385
|
+
}, [context.viewport, duration, onPause, onResume, startTimer]);
|
|
386
|
+
React.useEffect(() => {
|
|
387
|
+
if (open && !context.isClosePausedRef.current) startTimer(duration);
|
|
388
|
+
}, [open, duration, context.isClosePausedRef, startTimer]);
|
|
389
|
+
React.useEffect(() => {
|
|
421
390
|
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
|
-
});
|
|
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,
|
|
400
|
+
{
|
|
401
|
+
__scopeToast,
|
|
402
|
+
role: "status",
|
|
403
|
+
"aria-live": type === "foreground" ? "assertive" : "polite",
|
|
404
|
+
"aria-atomic": true,
|
|
405
|
+
children: announceTextContent
|
|
406
|
+
}
|
|
407
|
+
),
|
|
408
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM.createPortal(
|
|
409
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
410
|
+
DismissableLayer.Root,
|
|
411
|
+
{
|
|
412
|
+
asChild: true,
|
|
413
|
+
onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(onEscapeKeyDown, () => {
|
|
414
|
+
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
415
|
+
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
416
|
+
}),
|
|
417
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
418
|
+
import_react_primitive.Primitive.li,
|
|
419
|
+
{
|
|
420
|
+
role: "status",
|
|
421
|
+
"aria-live": "off",
|
|
422
|
+
"aria-atomic": true,
|
|
423
|
+
tabIndex: 0,
|
|
424
|
+
"data-state": open ? "open" : "closed",
|
|
425
|
+
"data-swipe-direction": context.swipeDirection,
|
|
426
|
+
...toastProps,
|
|
427
|
+
ref: composedRefs,
|
|
428
|
+
style: { userSelect: "none", touchAction: "none", ...props.style },
|
|
429
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
430
|
+
if (event.key !== "Escape") return;
|
|
431
|
+
onEscapeKeyDown?.(event.nativeEvent);
|
|
432
|
+
if (!event.nativeEvent.defaultPrevented) {
|
|
433
|
+
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
434
|
+
handleClose();
|
|
435
|
+
}
|
|
436
|
+
}),
|
|
437
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
|
|
438
|
+
if (event.button !== 0) return;
|
|
439
|
+
pointerStartRef.current = { x: event.clientX, y: event.clientY };
|
|
440
|
+
}),
|
|
441
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
|
|
442
|
+
if (!pointerStartRef.current) return;
|
|
443
|
+
const x = event.clientX - pointerStartRef.current.x;
|
|
444
|
+
const y = event.clientY - pointerStartRef.current.y;
|
|
445
|
+
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
446
|
+
const isHorizontalSwipe = ["left", "right"].includes(context.swipeDirection);
|
|
447
|
+
const clamp = ["left", "up"].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
448
|
+
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
449
|
+
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
450
|
+
const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
|
|
451
|
+
const delta = { x: clampedX, y: clampedY };
|
|
452
|
+
const eventDetail = { originalEvent: event, delta };
|
|
453
|
+
if (hasSwipeMoveStarted) {
|
|
454
|
+
swipeDeltaRef.current = delta;
|
|
455
|
+
handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
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
|
|
462
|
+
});
|
|
463
|
+
event.target.setPointerCapture(event.pointerId);
|
|
464
|
+
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
|
|
465
|
+
pointerStartRef.current = null;
|
|
466
|
+
}
|
|
467
|
+
}),
|
|
468
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
|
|
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, {
|
|
481
|
+
discrete: true
|
|
482
|
+
});
|
|
483
|
+
} else {
|
|
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
|
+
});
|
|
496
|
+
}
|
|
497
|
+
})
|
|
498
|
+
}
|
|
499
|
+
)
|
|
544
500
|
}
|
|
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;
|
|
501
|
+
) }),
|
|
502
|
+
context.viewport
|
|
503
|
+
) })
|
|
504
|
+
] });
|
|
558
505
|
}
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
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);
|
|
572
525
|
}, []);
|
|
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;
|
|
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;
|
|
618
562
|
}
|
|
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))({
|
|
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
|
+
{
|
|
644
587
|
"data-radix-toast-announce-exclude": "",
|
|
645
|
-
"data-radix-toast-announce-alt": altText ||
|
|
646
|
-
|
|
588
|
+
"data-radix-toast-announce-alt": altText || void 0,
|
|
589
|
+
...announceExcludeProps,
|
|
647
590
|
ref: forwardedRef
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
591
|
+
}
|
|
592
|
+
);
|
|
593
|
+
});
|
|
594
|
+
function getAnnounceTextContent(container) {
|
|
651
595
|
const textContent = [];
|
|
652
596
|
const childNodes = Array.from(container.childNodes);
|
|
653
|
-
childNodes.forEach((node)=>{
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
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));
|
|
608
|
+
}
|
|
664
609
|
}
|
|
665
|
-
|
|
666
|
-
|
|
610
|
+
}
|
|
611
|
+
});
|
|
667
612
|
return textContent;
|
|
668
|
-
}
|
|
669
|
-
|
|
613
|
+
}
|
|
614
|
+
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
670
615
|
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)=>{
|
|
616
|
+
const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
|
|
617
|
+
if (handler) currentTarget.addEventListener(name, handler, { once: true });
|
|
618
|
+
if (discrete) {
|
|
619
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(currentTarget, event);
|
|
620
|
+
} else {
|
|
621
|
+
currentTarget.dispatchEvent(event);
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
var isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
683
625
|
const deltaX = Math.abs(delta.x);
|
|
684
626
|
const deltaY = Math.abs(delta.y);
|
|
685
627
|
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
|
-
|
|
628
|
+
if (direction === "left" || direction === "right") {
|
|
629
|
+
return isDeltaX && deltaX > threshold;
|
|
630
|
+
} else {
|
|
631
|
+
return !isDeltaX && deltaY > threshold;
|
|
632
|
+
}
|
|
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]);
|
|
646
|
+
}
|
|
647
|
+
function isHTMLElement(node) {
|
|
705
648
|
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) {
|
|
649
|
+
}
|
|
650
|
+
function getTabbableCandidates(container) {
|
|
717
651
|
const nodes = [];
|
|
718
652
|
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
|
-
}
|
|
653
|
+
acceptNode: (node) => {
|
|
654
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
655
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
656
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
657
|
+
}
|
|
726
658
|
});
|
|
727
|
-
while(walker.nextNode())nodes.push(walker.currentNode);
|
|
728
|
-
// hinders accessibility to have tab order different from visual order.
|
|
659
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
729
660
|
return nodes;
|
|
730
|
-
}
|
|
731
|
-
function
|
|
661
|
+
}
|
|
662
|
+
function focusFirst(candidates) {
|
|
732
663
|
const previouslyFocusedElement = document.activeElement;
|
|
733
|
-
return candidates.some((candidate)=>{
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
return document.activeElement !== previouslyFocusedElement;
|
|
664
|
+
return candidates.some((candidate) => {
|
|
665
|
+
if (candidate === previouslyFocusedElement) return true;
|
|
666
|
+
candidate.focus();
|
|
667
|
+
return document.activeElement !== previouslyFocusedElement;
|
|
738
668
|
});
|
|
739
|
-
}
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
669
|
+
}
|
|
670
|
+
var Provider = ToastProvider;
|
|
671
|
+
var Viewport = ToastViewport;
|
|
672
|
+
var Root2 = Toast;
|
|
673
|
+
var Title = ToastTitle;
|
|
674
|
+
var Description = ToastDescription;
|
|
675
|
+
var Action = ToastAction;
|
|
676
|
+
var Close = ToastClose;
|
|
677
|
+
})();
|
|
751
678
|
//# sourceMappingURL=index.js.map
|