@radix-ui/react-toast 0.1.2-rc.5 → 0.1.2-rc.50
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.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +690 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +671 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +14 -13
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,672 @@
|
|
|
1
|
-
import
|
|
1
|
+
import $eyrYI$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import {useState as $eyrYI$useState, useRef as $eyrYI$useRef, createElement as $eyrYI$createElement, useCallback as $eyrYI$useCallback, forwardRef as $eyrYI$forwardRef, useEffect as $eyrYI$useEffect, Fragment as $eyrYI$Fragment} from "react";
|
|
3
|
+
import {createPortal as $eyrYI$createPortal} from "react-dom";
|
|
4
|
+
import {composeEventHandlers as $eyrYI$composeEventHandlers} from "@radix-ui/primitive";
|
|
5
|
+
import {useComposedRefs as $eyrYI$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
6
|
+
import {createCollection as $eyrYI$createCollection} from "@radix-ui/react-collection";
|
|
7
|
+
import {createContextScope as $eyrYI$createContextScope} from "@radix-ui/react-context";
|
|
8
|
+
import {Branch as $eyrYI$Branch, Root as $eyrYI$Root} from "@radix-ui/react-dismissable-layer";
|
|
9
|
+
import {Presence as $eyrYI$Presence} from "@radix-ui/react-presence";
|
|
10
|
+
import {Primitive as $eyrYI$Primitive, dispatchDiscreteCustomEvent as $eyrYI$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
|
|
11
|
+
import {Slottable as $eyrYI$Slottable} from "@radix-ui/react-slot";
|
|
12
|
+
import {useCallbackRef as $eyrYI$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
13
|
+
import {useControllableState as $eyrYI$useControllableState} from "@radix-ui/react-use-controllable-state";
|
|
14
|
+
import {useLayoutEffect as $eyrYI$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
|
|
15
|
+
import {VisuallyHidden as $eyrYI$VisuallyHidden} from "@radix-ui/react-visually-hidden";
|
|
16
|
+
|
|
17
|
+
function $parcel$export(e, n, v, s) {
|
|
18
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
19
|
+
}
|
|
20
|
+
var $054eb8030ebde76e$exports = {};
|
|
21
|
+
|
|
22
|
+
$parcel$export($054eb8030ebde76e$exports, "createToastScope", () => $054eb8030ebde76e$export$8a359da18fbc9073);
|
|
23
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastProvider", () => $054eb8030ebde76e$export$f5d03d415824e0e);
|
|
24
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastViewport", () => $054eb8030ebde76e$export$6192c2425ecfd989);
|
|
25
|
+
$parcel$export($054eb8030ebde76e$exports, "Toast", () => $054eb8030ebde76e$export$8d8dc7d5f743331b);
|
|
26
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastTitle", () => $054eb8030ebde76e$export$16d42d7c29b95a4);
|
|
27
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastDescription", () => $054eb8030ebde76e$export$ecddd96c53621d9a);
|
|
28
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastAction", () => $054eb8030ebde76e$export$3019feecfda683d2);
|
|
29
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastClose", () => $054eb8030ebde76e$export$811e70f61c205839);
|
|
30
|
+
$parcel$export($054eb8030ebde76e$exports, "Provider", () => $054eb8030ebde76e$export$2881499e37b75b9a);
|
|
31
|
+
$parcel$export($054eb8030ebde76e$exports, "Viewport", () => $054eb8030ebde76e$export$d5c6c08dc2d3ca7);
|
|
32
|
+
$parcel$export($054eb8030ebde76e$exports, "Root", () => $054eb8030ebde76e$export$be92b6f5f03c0fe9);
|
|
33
|
+
$parcel$export($054eb8030ebde76e$exports, "Title", () => $054eb8030ebde76e$export$f99233281efd08a0);
|
|
34
|
+
$parcel$export($054eb8030ebde76e$exports, "Description", () => $054eb8030ebde76e$export$393edc798c47379d);
|
|
35
|
+
$parcel$export($054eb8030ebde76e$exports, "Action", () => $054eb8030ebde76e$export$e19cd5f9376f8cee);
|
|
36
|
+
$parcel$export($054eb8030ebde76e$exports, "Close", () => $054eb8030ebde76e$export$f39c2d165cd861fe);
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
/* -------------------------------------------------------------------------------------------------
|
|
53
|
+
* ToastProvider
|
|
54
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
|
|
55
|
+
const [$054eb8030ebde76e$var$Collection, $054eb8030ebde76e$var$useCollection, $054eb8030ebde76e$var$createCollectionScope] = $eyrYI$createCollection('Toast');
|
|
56
|
+
const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $eyrYI$createContextScope('Toast', [
|
|
57
|
+
$054eb8030ebde76e$var$createCollectionScope
|
|
58
|
+
]);
|
|
59
|
+
const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME);
|
|
60
|
+
const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
|
|
61
|
+
const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children } = props;
|
|
62
|
+
const [viewport, setViewport] = $eyrYI$useState(null);
|
|
63
|
+
const [toastCount, setToastCount] = $eyrYI$useState(0);
|
|
64
|
+
const isFocusedToastEscapeKeyDownRef = $eyrYI$useRef(false);
|
|
65
|
+
const isClosePausedRef = $eyrYI$useRef(false);
|
|
66
|
+
return /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.Provider, {
|
|
67
|
+
scope: __scopeToast
|
|
68
|
+
}, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastProviderProvider, {
|
|
69
|
+
scope: __scopeToast,
|
|
70
|
+
label: label,
|
|
71
|
+
duration: duration,
|
|
72
|
+
swipeDirection: swipeDirection,
|
|
73
|
+
swipeThreshold: swipeThreshold,
|
|
74
|
+
toastCount: toastCount,
|
|
75
|
+
viewport: viewport,
|
|
76
|
+
onViewportChange: setViewport,
|
|
77
|
+
onToastAdd: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount + 1
|
|
78
|
+
)
|
|
79
|
+
, []),
|
|
80
|
+
onToastRemove: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount - 1
|
|
81
|
+
)
|
|
82
|
+
, []),
|
|
83
|
+
isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
|
|
84
|
+
isClosePausedRef: isClosePausedRef
|
|
85
|
+
}, children));
|
|
86
|
+
};
|
|
87
|
+
$054eb8030ebde76e$export$f5d03d415824e0e.propTypes = {
|
|
88
|
+
label (props) {
|
|
89
|
+
if (props.label && typeof props.label === 'string' && !props.label.trim()) {
|
|
90
|
+
const error = `Invalid prop \`label\` supplied to \`${$054eb8030ebde76e$var$PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
91
|
+
return new Error(error);
|
|
92
|
+
}
|
|
93
|
+
return null;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$f5d03d415824e0e, {
|
|
97
|
+
displayName: $054eb8030ebde76e$var$PROVIDER_NAME
|
|
98
|
+
});
|
|
99
|
+
/* -------------------------------------------------------------------------------------------------
|
|
100
|
+
* ToastViewport
|
|
101
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport';
|
|
102
|
+
const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [
|
|
103
|
+
'F8'
|
|
104
|
+
];
|
|
105
|
+
const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause';
|
|
106
|
+
const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
|
|
107
|
+
const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
108
|
+
const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
|
|
109
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast);
|
|
110
|
+
const getItems = $054eb8030ebde76e$var$useCollection(__scopeToast);
|
|
111
|
+
const wrapperRef = $eyrYI$useRef(null);
|
|
112
|
+
const headFocusProxyRef = $eyrYI$useRef(null);
|
|
113
|
+
const tailFocusProxyRef = $eyrYI$useRef(null);
|
|
114
|
+
const ref = $eyrYI$useRef(null);
|
|
115
|
+
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
116
|
+
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
|
|
117
|
+
const hasToasts = context.toastCount > 0;
|
|
118
|
+
$eyrYI$useEffect(()=>{
|
|
119
|
+
const handleKeyDown = (event)=>{
|
|
120
|
+
var _ref$current;
|
|
121
|
+
// we use `event.code` as it is consistent regardless of meta keys that were pressed.
|
|
122
|
+
// for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
|
|
123
|
+
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key
|
|
124
|
+
);
|
|
125
|
+
if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
126
|
+
};
|
|
127
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
128
|
+
return ()=>document.removeEventListener('keydown', handleKeyDown)
|
|
129
|
+
;
|
|
130
|
+
}, [
|
|
131
|
+
hotkey
|
|
132
|
+
]);
|
|
133
|
+
$eyrYI$useEffect(()=>{
|
|
134
|
+
const wrapper = wrapperRef.current;
|
|
135
|
+
const viewport = ref.current;
|
|
136
|
+
if (wrapper && viewport) {
|
|
137
|
+
const handlePause = ()=>{
|
|
138
|
+
const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
|
|
139
|
+
viewport.dispatchEvent(pauseEvent);
|
|
140
|
+
context.isClosePausedRef.current = true;
|
|
141
|
+
};
|
|
142
|
+
const handleResume = ()=>{
|
|
143
|
+
const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
|
|
144
|
+
viewport.dispatchEvent(resumeEvent);
|
|
145
|
+
context.isClosePausedRef.current = false;
|
|
146
|
+
}; // Toasts are not in the viewport React tree so we need to bind DOM events
|
|
147
|
+
wrapper.addEventListener('focusin', handlePause);
|
|
148
|
+
wrapper.addEventListener('focusout', handleResume);
|
|
149
|
+
wrapper.addEventListener('pointerenter', handlePause);
|
|
150
|
+
wrapper.addEventListener('pointerleave', handleResume);
|
|
151
|
+
window.addEventListener('blur', handlePause);
|
|
152
|
+
window.addEventListener('focus', handleResume);
|
|
153
|
+
return ()=>{
|
|
154
|
+
wrapper.removeEventListener('focusin', handlePause);
|
|
155
|
+
wrapper.removeEventListener('focusout', handleResume);
|
|
156
|
+
wrapper.removeEventListener('pointerenter', handlePause);
|
|
157
|
+
wrapper.removeEventListener('pointerleave', handleResume);
|
|
158
|
+
window.removeEventListener('blur', handlePause);
|
|
159
|
+
window.removeEventListener('focus', handleResume);
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
}, [
|
|
163
|
+
context.isClosePausedRef
|
|
164
|
+
]);
|
|
165
|
+
const getSortedTabbableCandidates = $eyrYI$useCallback(({ tabbingDirection: tabbingDirection })=>{
|
|
166
|
+
const toastItems = getItems();
|
|
167
|
+
const tabbableCandidates = toastItems.map((toastItem)=>{
|
|
168
|
+
const toastNode = toastItem.ref.current;
|
|
169
|
+
const toastTabbableCandidates = [
|
|
170
|
+
toastNode,
|
|
171
|
+
...$054eb8030ebde76e$var$getTabbableCandidates(toastNode)
|
|
172
|
+
];
|
|
173
|
+
return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
174
|
+
});
|
|
175
|
+
return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
176
|
+
}, [
|
|
177
|
+
getItems
|
|
178
|
+
]);
|
|
179
|
+
$eyrYI$useEffect(()=>{
|
|
180
|
+
const viewport = ref.current; // We programmatically manage tabbing as we are unable to influence
|
|
181
|
+
// the source order with portals, this allows us to reverse the
|
|
182
|
+
// tab order so that it runs from most recent toast to least
|
|
183
|
+
if (viewport) {
|
|
184
|
+
const handleKeyDown = (event)=>{
|
|
185
|
+
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
186
|
+
const isTabKey = event.key === 'Tab' && !isMetaKey;
|
|
187
|
+
if (isTabKey) {
|
|
188
|
+
const focusedElement = document.activeElement;
|
|
189
|
+
const isTabbingBackwards = event.shiftKey;
|
|
190
|
+
const targetIsViewport = event.target === viewport; // If we're back tabbing after jumping to the viewport then we simply
|
|
191
|
+
// proxy focus out to the preceding document
|
|
192
|
+
if (targetIsViewport && isTabbingBackwards) {
|
|
193
|
+
var _headFocusProxyRef$cu;
|
|
194
|
+
(_headFocusProxyRef$cu = headFocusProxyRef.current) === null || _headFocusProxyRef$cu === void 0 || _headFocusProxyRef$cu.focus();
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
|
|
198
|
+
const sortedCandidates = getSortedTabbableCandidates({
|
|
199
|
+
tabbingDirection: tabbingDirection
|
|
200
|
+
});
|
|
201
|
+
const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement
|
|
202
|
+
);
|
|
203
|
+
if ($054eb8030ebde76e$var$focusFirst(sortedCandidates.slice(index + 1))) event.preventDefault();
|
|
204
|
+
else {
|
|
205
|
+
var _headFocusProxyRef$cu2, _tailFocusProxyRef$cu;
|
|
206
|
+
// If we can't focus that means we're at the edges so we
|
|
207
|
+
// proxy to the corresponding exit point and let the browser handle
|
|
208
|
+
// tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
|
|
209
|
+
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();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}; // Toasts are not in the viewport React tree so we need to bind DOM events
|
|
213
|
+
viewport.addEventListener('keydown', handleKeyDown);
|
|
214
|
+
return ()=>viewport.removeEventListener('keydown', handleKeyDown)
|
|
215
|
+
;
|
|
216
|
+
}
|
|
217
|
+
}, [
|
|
218
|
+
getItems,
|
|
219
|
+
getSortedTabbableCandidates
|
|
220
|
+
]);
|
|
221
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Branch, {
|
|
222
|
+
ref: wrapperRef,
|
|
223
|
+
role: "region",
|
|
224
|
+
"aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
|
|
225
|
+
,
|
|
226
|
+
tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
|
|
227
|
+
,
|
|
228
|
+
style: {
|
|
229
|
+
pointerEvents: hasToasts ? undefined : 'none'
|
|
230
|
+
}
|
|
231
|
+
}, hasToasts && /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$FocusProxy, {
|
|
232
|
+
ref: headFocusProxyRef,
|
|
233
|
+
onFocusFromOutsideViewport: ()=>{
|
|
234
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
235
|
+
tabbingDirection: 'forwards'
|
|
236
|
+
});
|
|
237
|
+
$054eb8030ebde76e$var$focusFirst(tabbableCandidates);
|
|
238
|
+
}
|
|
239
|
+
}), /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.Slot, {
|
|
240
|
+
scope: __scopeToast
|
|
241
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.ol, $eyrYI$babelruntimehelpersesmextends({
|
|
242
|
+
tabIndex: -1
|
|
243
|
+
}, viewportProps, {
|
|
244
|
+
ref: composedRefs
|
|
245
|
+
}))), hasToasts && /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$FocusProxy, {
|
|
246
|
+
ref: tailFocusProxyRef,
|
|
247
|
+
onFocusFromOutsideViewport: ()=>{
|
|
248
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
249
|
+
tabbingDirection: 'backwards'
|
|
250
|
+
});
|
|
251
|
+
$054eb8030ebde76e$var$focusFirst(tabbableCandidates);
|
|
252
|
+
}
|
|
253
|
+
}));
|
|
254
|
+
});
|
|
255
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$6192c2425ecfd989, {
|
|
256
|
+
displayName: $054eb8030ebde76e$var$VIEWPORT_NAME
|
|
257
|
+
});
|
|
258
|
+
/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
|
|
259
|
+
const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
260
|
+
const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
|
|
261
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
|
|
262
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, $eyrYI$babelruntimehelpersesmextends({
|
|
263
|
+
"aria-hidden": true,
|
|
264
|
+
tabIndex: 0
|
|
265
|
+
}, proxyProps, {
|
|
266
|
+
ref: forwardedRef // Avoid page scrolling when focus is on the focus proxy
|
|
267
|
+
,
|
|
268
|
+
style: {
|
|
269
|
+
position: 'fixed'
|
|
270
|
+
},
|
|
271
|
+
onFocus: (event)=>{
|
|
272
|
+
var _context$viewport;
|
|
273
|
+
const prevFocusedElement = event.relatedTarget;
|
|
274
|
+
const isFocusFromOutsideViewport = !((_context$viewport = context.viewport) !== null && _context$viewport !== void 0 && _context$viewport.contains(prevFocusedElement));
|
|
275
|
+
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
276
|
+
}
|
|
277
|
+
}));
|
|
278
|
+
});
|
|
279
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$var$FocusProxy, {
|
|
280
|
+
displayName: $054eb8030ebde76e$var$FOCUS_PROXY_NAME
|
|
281
|
+
});
|
|
282
|
+
/* -------------------------------------------------------------------------------------------------
|
|
283
|
+
* Toast
|
|
284
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
|
|
285
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart';
|
|
286
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove';
|
|
287
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
|
|
288
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd';
|
|
289
|
+
const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
290
|
+
const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props;
|
|
291
|
+
const [open = true, setOpen] = $eyrYI$useControllableState({
|
|
292
|
+
prop: openProp,
|
|
293
|
+
defaultProp: defaultOpen,
|
|
294
|
+
onChange: onOpenChange
|
|
295
|
+
});
|
|
296
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Presence, {
|
|
297
|
+
present: forceMount || open
|
|
298
|
+
}, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastImpl, $eyrYI$babelruntimehelpersesmextends({
|
|
299
|
+
open: open
|
|
300
|
+
}, toastProps, {
|
|
301
|
+
ref: forwardedRef,
|
|
302
|
+
onClose: ()=>setOpen(false)
|
|
303
|
+
,
|
|
304
|
+
onSwipeStart: $eyrYI$composeEventHandlers(props.onSwipeStart, (event)=>{
|
|
305
|
+
event.currentTarget.setAttribute('data-swipe', 'start');
|
|
306
|
+
}),
|
|
307
|
+
onSwipeMove: $eyrYI$composeEventHandlers(props.onSwipeMove, (event)=>{
|
|
308
|
+
const { x: x , y: y } = event.detail.delta;
|
|
309
|
+
event.currentTarget.setAttribute('data-swipe', 'move');
|
|
310
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);
|
|
311
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);
|
|
312
|
+
}),
|
|
313
|
+
onSwipeCancel: $eyrYI$composeEventHandlers(props.onSwipeCancel, (event)=>{
|
|
314
|
+
event.currentTarget.setAttribute('data-swipe', 'cancel');
|
|
315
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
|
|
316
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
|
|
317
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');
|
|
318
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');
|
|
319
|
+
}),
|
|
320
|
+
onSwipeEnd: $eyrYI$composeEventHandlers(props.onSwipeEnd, (event)=>{
|
|
321
|
+
const { x: x , y: y } = event.detail.delta;
|
|
322
|
+
event.currentTarget.setAttribute('data-swipe', 'end');
|
|
323
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
|
|
324
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
|
|
325
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);
|
|
326
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);
|
|
327
|
+
setOpen(false);
|
|
328
|
+
})
|
|
329
|
+
})));
|
|
330
|
+
});
|
|
331
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$8d8dc7d5f743331b, {
|
|
332
|
+
displayName: $054eb8030ebde76e$var$TOAST_NAME
|
|
333
|
+
});
|
|
334
|
+
/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, {
|
|
335
|
+
isInteractive: false,
|
|
336
|
+
onClose () {}
|
|
337
|
+
});
|
|
338
|
+
const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
339
|
+
const { __scopeToast: __scopeToast , children: children , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
|
|
340
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
|
|
341
|
+
const ref = $eyrYI$useRef(null);
|
|
342
|
+
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref);
|
|
343
|
+
const pointerStartRef = $eyrYI$useRef(null);
|
|
344
|
+
const swipeDeltaRef = $eyrYI$useRef(null);
|
|
345
|
+
const duration1 = durationProp || context.duration;
|
|
346
|
+
const closeTimerStartTimeRef = $eyrYI$useRef(0);
|
|
347
|
+
const closeTimerRemainingTimeRef = $eyrYI$useRef(duration1);
|
|
348
|
+
const closeTimerRef = $eyrYI$useRef(0);
|
|
349
|
+
const [renderLabel, setRenderLabel] = $eyrYI$useState(false);
|
|
350
|
+
const { onToastAdd: onToastAdd , onToastRemove: onToastRemove } = context;
|
|
351
|
+
const handleClose = $eyrYI$useCallbackRef(()=>{
|
|
352
|
+
var _ref$current2, _context$viewport2;
|
|
353
|
+
// focus viewport if focus is within toast to read the remaining toast
|
|
354
|
+
// count to SR users and ensure focus isn't lost
|
|
355
|
+
const isFocusInToast = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement);
|
|
356
|
+
if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
|
|
357
|
+
onClose();
|
|
358
|
+
});
|
|
359
|
+
const startTimer = $eyrYI$useCallback((duration)=>{
|
|
360
|
+
if (!duration || duration === Infinity) return;
|
|
361
|
+
window.clearTimeout(closeTimerRef.current);
|
|
362
|
+
closeTimerStartTimeRef.current = new Date().getTime();
|
|
363
|
+
closeTimerRef.current = window.setTimeout(handleClose, duration);
|
|
364
|
+
}, [
|
|
365
|
+
handleClose
|
|
366
|
+
]);
|
|
367
|
+
$eyrYI$useEffect(()=>{
|
|
368
|
+
const viewport = context.viewport;
|
|
369
|
+
if (viewport) {
|
|
370
|
+
const handleResume = ()=>{
|
|
371
|
+
startTimer(closeTimerRemainingTimeRef.current);
|
|
372
|
+
};
|
|
373
|
+
const handlePause = ()=>{
|
|
374
|
+
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
|
|
375
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
376
|
+
window.clearTimeout(closeTimerRef.current);
|
|
377
|
+
};
|
|
378
|
+
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
379
|
+
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
380
|
+
return ()=>{
|
|
381
|
+
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
382
|
+
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
383
|
+
};
|
|
384
|
+
}
|
|
385
|
+
}, [
|
|
386
|
+
context.viewport,
|
|
387
|
+
duration1,
|
|
388
|
+
startTimer
|
|
389
|
+
]); // start timer when toast opens or duration changes.
|
|
390
|
+
// we include `open` in deps because closed !== unmounted when animating
|
|
391
|
+
// so it could reopen before being completely unmounted
|
|
392
|
+
$eyrYI$useEffect(()=>{
|
|
393
|
+
if (open && !context.isClosePausedRef.current) startTimer(duration1);
|
|
394
|
+
}, [
|
|
395
|
+
open,
|
|
396
|
+
duration1,
|
|
397
|
+
context.isClosePausedRef,
|
|
398
|
+
startTimer
|
|
399
|
+
]);
|
|
400
|
+
$eyrYI$useEffect(()=>{
|
|
401
|
+
onToastAdd();
|
|
402
|
+
return ()=>onToastRemove()
|
|
403
|
+
;
|
|
404
|
+
}, [
|
|
405
|
+
onToastAdd,
|
|
406
|
+
onToastRemove
|
|
407
|
+
]); // render label in the next frame to trigger toast announcement in NVDA
|
|
408
|
+
$054eb8030ebde76e$var$useNextFrame(()=>setRenderLabel(true)
|
|
409
|
+
);
|
|
410
|
+
if (!context.viewport) return null;
|
|
411
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
|
|
412
|
+
scope: __scopeToast,
|
|
413
|
+
isInteractive: true,
|
|
414
|
+
onClose: handleClose
|
|
415
|
+
}, /*#__PURE__*/ $eyrYI$createPortal(/*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$Collection.ItemSlot, {
|
|
416
|
+
scope: __scopeToast
|
|
417
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Root, {
|
|
418
|
+
asChild: true,
|
|
419
|
+
onEscapeKeyDown: $eyrYI$composeEventHandlers(onEscapeKeyDown, ()=>{
|
|
420
|
+
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
421
|
+
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
422
|
+
})
|
|
423
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.li, $eyrYI$babelruntimehelpersesmextends({
|
|
424
|
+
role: "status",
|
|
425
|
+
"aria-live": type === 'foreground' ? 'assertive' : 'polite',
|
|
426
|
+
"aria-atomic": true // Prevent voice over from announcing before the label is rendered
|
|
427
|
+
,
|
|
428
|
+
"aria-hidden": !renderLabel || undefined,
|
|
429
|
+
tabIndex: 0,
|
|
430
|
+
"data-state": open ? 'open' : 'closed',
|
|
431
|
+
"data-swipe-direction": context.swipeDirection
|
|
432
|
+
}, toastProps, {
|
|
433
|
+
ref: composedRefs,
|
|
434
|
+
style: {
|
|
435
|
+
userSelect: 'none',
|
|
436
|
+
touchAction: 'none',
|
|
437
|
+
...props.style
|
|
438
|
+
},
|
|
439
|
+
onKeyDown: $eyrYI$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
440
|
+
if (event.key !== 'Escape') return;
|
|
441
|
+
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent);
|
|
442
|
+
if (!event.nativeEvent.defaultPrevented) {
|
|
443
|
+
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
444
|
+
handleClose();
|
|
445
|
+
}
|
|
446
|
+
}),
|
|
447
|
+
onPointerDown: $eyrYI$composeEventHandlers(props.onPointerDown, (event)=>{
|
|
448
|
+
if (event.button !== 0) return;
|
|
449
|
+
pointerStartRef.current = {
|
|
450
|
+
x: event.clientX,
|
|
451
|
+
y: event.clientY
|
|
452
|
+
};
|
|
453
|
+
}),
|
|
454
|
+
onPointerMove: $eyrYI$composeEventHandlers(props.onPointerMove, (event)=>{
|
|
455
|
+
if (!pointerStartRef.current) return;
|
|
456
|
+
const x = event.clientX - pointerStartRef.current.x;
|
|
457
|
+
const y = event.clientY - pointerStartRef.current.y;
|
|
458
|
+
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
459
|
+
const isHorizontalSwipe = [
|
|
460
|
+
'left',
|
|
461
|
+
'right'
|
|
462
|
+
].includes(context.swipeDirection);
|
|
463
|
+
const clamp = [
|
|
464
|
+
'left',
|
|
465
|
+
'up'
|
|
466
|
+
].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
467
|
+
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
468
|
+
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
469
|
+
const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
|
|
470
|
+
const delta = {
|
|
471
|
+
x: clampedX,
|
|
472
|
+
y: clampedY
|
|
473
|
+
};
|
|
474
|
+
const eventDetail = {
|
|
475
|
+
originalEvent: event,
|
|
476
|
+
delta: delta
|
|
477
|
+
};
|
|
478
|
+
if (hasSwipeMoveStarted) {
|
|
479
|
+
swipeDeltaRef.current = delta;
|
|
480
|
+
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
481
|
+
discrete: false
|
|
482
|
+
});
|
|
483
|
+
} else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
484
|
+
swipeDeltaRef.current = delta;
|
|
485
|
+
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
486
|
+
discrete: false
|
|
487
|
+
});
|
|
488
|
+
event.target.setPointerCapture(event.pointerId);
|
|
489
|
+
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture
|
|
490
|
+
// for the current pointer down interaction
|
|
491
|
+
pointerStartRef.current = null;
|
|
492
|
+
}),
|
|
493
|
+
onPointerUp: $eyrYI$composeEventHandlers(props.onPointerUp, (event1)=>{
|
|
494
|
+
const delta = swipeDeltaRef.current;
|
|
495
|
+
event1.target.releasePointerCapture(event1.pointerId);
|
|
496
|
+
swipeDeltaRef.current = null;
|
|
497
|
+
pointerStartRef.current = null;
|
|
498
|
+
if (delta) {
|
|
499
|
+
const toast = event1.currentTarget;
|
|
500
|
+
const eventDetail = {
|
|
501
|
+
originalEvent: event1,
|
|
502
|
+
delta: delta
|
|
503
|
+
};
|
|
504
|
+
if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
505
|
+
discrete: true
|
|
506
|
+
});
|
|
507
|
+
else $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
|
|
508
|
+
discrete: true
|
|
509
|
+
});
|
|
510
|
+
// Prevent click event from triggering on items within the toast when
|
|
511
|
+
// pointer up is part of a swipe gesture
|
|
512
|
+
toast.addEventListener('click', (event)=>event.preventDefault()
|
|
513
|
+
, {
|
|
514
|
+
once: true
|
|
515
|
+
});
|
|
516
|
+
}
|
|
517
|
+
})
|
|
518
|
+
}), /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, null, renderLabel && context.label), /*#__PURE__*/ $eyrYI$createElement($eyrYI$Slottable, null, children)))), context.viewport)));
|
|
519
|
+
});
|
|
520
|
+
$054eb8030ebde76e$var$ToastImpl.propTypes = {
|
|
521
|
+
type (props) {
|
|
522
|
+
if (props.type && ![
|
|
523
|
+
'foreground',
|
|
524
|
+
'background'
|
|
525
|
+
].includes(props.type)) {
|
|
526
|
+
const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
527
|
+
return new Error(error);
|
|
528
|
+
}
|
|
529
|
+
return null;
|
|
530
|
+
}
|
|
531
|
+
};
|
|
532
|
+
/* -------------------------------------------------------------------------------------------------
|
|
533
|
+
* ToastTitle
|
|
534
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TITLE_NAME = 'ToastTitle';
|
|
535
|
+
const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
536
|
+
const { __scopeToast: __scopeToast , ...titleProps } = props;
|
|
537
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, titleProps, {
|
|
538
|
+
ref: forwardedRef
|
|
539
|
+
}));
|
|
540
|
+
});
|
|
541
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$16d42d7c29b95a4, {
|
|
542
|
+
displayName: $054eb8030ebde76e$var$TITLE_NAME
|
|
543
|
+
});
|
|
544
|
+
/* -------------------------------------------------------------------------------------------------
|
|
545
|
+
* ToastDescription
|
|
546
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$DESCRIPTION_NAME = 'ToastDescription';
|
|
547
|
+
const $054eb8030ebde76e$export$ecddd96c53621d9a = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
548
|
+
const { __scopeToast: __scopeToast , ...descriptionProps } = props;
|
|
549
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, descriptionProps, {
|
|
550
|
+
ref: forwardedRef
|
|
551
|
+
}));
|
|
552
|
+
});
|
|
553
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$ecddd96c53621d9a, {
|
|
554
|
+
displayName: $054eb8030ebde76e$var$DESCRIPTION_NAME
|
|
555
|
+
});
|
|
556
|
+
/* -------------------------------------------------------------------------------------------------
|
|
557
|
+
* ToastAction
|
|
558
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction';
|
|
559
|
+
const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
560
|
+
const { altText: altText , ...actionProps } = props;
|
|
561
|
+
const context = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$ACTION_NAME, props.__scopeToast);
|
|
562
|
+
if (!altText) return null;
|
|
563
|
+
return context.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$export$811e70f61c205839, $eyrYI$babelruntimehelpersesmextends({}, actionProps, {
|
|
564
|
+
ref: forwardedRef
|
|
565
|
+
})) : /*#__PURE__*/ $eyrYI$createElement("span", null, altText);
|
|
566
|
+
});
|
|
567
|
+
$054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
|
|
568
|
+
altText (props) {
|
|
569
|
+
if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
|
|
570
|
+
return null;
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$3019feecfda683d2, {
|
|
574
|
+
displayName: $054eb8030ebde76e$var$ACTION_NAME
|
|
575
|
+
});
|
|
576
|
+
/* -------------------------------------------------------------------------------------------------
|
|
577
|
+
* ToastClose
|
|
578
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose';
|
|
579
|
+
const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
580
|
+
const { __scopeToast: __scopeToast , ...closeProps } = props;
|
|
581
|
+
const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast);
|
|
582
|
+
return interactiveContext.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.button, $eyrYI$babelruntimehelpersesmextends({
|
|
583
|
+
type: "button"
|
|
584
|
+
}, closeProps, {
|
|
585
|
+
ref: forwardedRef,
|
|
586
|
+
onClick: $eyrYI$composeEventHandlers(props.onClick, interactiveContext.onClose)
|
|
587
|
+
})) : null;
|
|
588
|
+
});
|
|
589
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$811e70f61c205839, {
|
|
590
|
+
displayName: $054eb8030ebde76e$var$CLOSE_NAME
|
|
591
|
+
});
|
|
592
|
+
/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
|
|
593
|
+
const currentTarget = detail.originalEvent.currentTarget;
|
|
594
|
+
const event = new CustomEvent(name, {
|
|
595
|
+
bubbles: true,
|
|
596
|
+
cancelable: true,
|
|
597
|
+
detail: detail
|
|
598
|
+
});
|
|
599
|
+
if (handler) currentTarget.addEventListener(name, handler, {
|
|
600
|
+
once: true
|
|
601
|
+
});
|
|
602
|
+
if (discrete) $eyrYI$dispatchDiscreteCustomEvent(currentTarget, event);
|
|
603
|
+
else currentTarget.dispatchEvent(event);
|
|
604
|
+
}
|
|
605
|
+
const $054eb8030ebde76e$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{
|
|
606
|
+
const deltaX = Math.abs(delta.x);
|
|
607
|
+
const deltaY = Math.abs(delta.y);
|
|
608
|
+
const isDeltaX = deltaX > deltaY;
|
|
609
|
+
if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold;
|
|
610
|
+
else return !isDeltaX && deltaY > threshold;
|
|
611
|
+
};
|
|
612
|
+
function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
|
|
613
|
+
const fn = $eyrYI$useCallbackRef(callback);
|
|
614
|
+
$eyrYI$useLayoutEffect(()=>{
|
|
615
|
+
let raf1 = 0;
|
|
616
|
+
let raf2 = 0;
|
|
617
|
+
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn)
|
|
618
|
+
);
|
|
619
|
+
return ()=>{
|
|
620
|
+
window.cancelAnimationFrame(raf1);
|
|
621
|
+
window.cancelAnimationFrame(raf2);
|
|
622
|
+
};
|
|
623
|
+
}, [
|
|
624
|
+
fn
|
|
625
|
+
]);
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* Returns a list of potential tabbable candidates.
|
|
629
|
+
*
|
|
630
|
+
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
|
|
631
|
+
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
|
|
632
|
+
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
|
|
633
|
+
*
|
|
634
|
+
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
|
|
635
|
+
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
|
|
636
|
+
*/ function $054eb8030ebde76e$var$getTabbableCandidates(container) {
|
|
637
|
+
const nodes = [];
|
|
638
|
+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
639
|
+
acceptNode: (node)=>{
|
|
640
|
+
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
|
|
641
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
|
|
642
|
+
// runtime's understanding of tabbability, so this automatically accounts
|
|
643
|
+
// for any kind of element that could be tabbed to.
|
|
644
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
645
|
+
}
|
|
646
|
+
});
|
|
647
|
+
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
|
|
648
|
+
// hinders accessibility to have tab order different from visual order.
|
|
649
|
+
return nodes;
|
|
650
|
+
}
|
|
651
|
+
function $054eb8030ebde76e$var$focusFirst(candidates) {
|
|
652
|
+
const previouslyFocusedElement = document.activeElement;
|
|
653
|
+
return candidates.some((candidate)=>{
|
|
654
|
+
// if focus is already where we want to go, we don't want to keep going through the candidates
|
|
655
|
+
if (candidate === previouslyFocusedElement) return true;
|
|
656
|
+
candidate.focus();
|
|
657
|
+
return document.activeElement !== previouslyFocusedElement;
|
|
658
|
+
});
|
|
659
|
+
}
|
|
660
|
+
const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e;
|
|
661
|
+
const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989;
|
|
662
|
+
const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b;
|
|
663
|
+
const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4;
|
|
664
|
+
const $054eb8030ebde76e$export$393edc798c47379d = $054eb8030ebde76e$export$ecddd96c53621d9a;
|
|
665
|
+
const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2;
|
|
666
|
+
const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
export {$054eb8030ebde76e$export$8a359da18fbc9073 as createToastScope, $054eb8030ebde76e$export$f5d03d415824e0e as ToastProvider, $054eb8030ebde76e$export$6192c2425ecfd989 as ToastViewport, $054eb8030ebde76e$export$8d8dc7d5f743331b as Toast, $054eb8030ebde76e$export$16d42d7c29b95a4 as ToastTitle, $054eb8030ebde76e$export$ecddd96c53621d9a as ToastDescription, $054eb8030ebde76e$export$3019feecfda683d2 as ToastAction, $054eb8030ebde76e$export$811e70f61c205839 as ToastClose, $054eb8030ebde76e$export$2881499e37b75b9a as Provider, $054eb8030ebde76e$export$d5c6c08dc2d3ca7 as Viewport, $054eb8030ebde76e$export$be92b6f5f03c0fe9 as Root, $054eb8030ebde76e$export$f99233281efd08a0 as Title, $054eb8030ebde76e$export$393edc798c47379d as Description, $054eb8030ebde76e$export$e19cd5f9376f8cee as Action, $054eb8030ebde76e$export$f39c2d165cd861fe as Close};
|
|
2
672
|
//# sourceMappingURL=index.module.js.map
|