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