@radix-ui/react-toast 0.1.2-rc.4 → 0.1.2-rc.40
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 +584 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +565 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +13 -13
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,566 @@
|
|
|
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 {createContextScope as $eyrYI$createContextScope} from "@radix-ui/react-context";
|
|
7
|
+
import {Branch as $eyrYI$Branch, Root as $eyrYI$Root} from "@radix-ui/react-dismissable-layer";
|
|
8
|
+
import {UnstablePortal as $eyrYI$UnstablePortal} from "@radix-ui/react-portal";
|
|
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 {useCallbackRef as $eyrYI$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
12
|
+
import {useControllableState as $eyrYI$useControllableState} from "@radix-ui/react-use-controllable-state";
|
|
13
|
+
import {useLayoutEffect as $eyrYI$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
|
|
14
|
+
import {VisuallyHidden as $eyrYI$VisuallyHidden} from "@radix-ui/react-visually-hidden";
|
|
15
|
+
|
|
16
|
+
function $parcel$export(e, n, v, s) {
|
|
17
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
18
|
+
}
|
|
19
|
+
var $054eb8030ebde76e$exports = {};
|
|
20
|
+
|
|
21
|
+
$parcel$export($054eb8030ebde76e$exports, "createToastScope", () => $054eb8030ebde76e$export$8a359da18fbc9073);
|
|
22
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastProvider", () => $054eb8030ebde76e$export$f5d03d415824e0e);
|
|
23
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastViewport", () => $054eb8030ebde76e$export$6192c2425ecfd989);
|
|
24
|
+
$parcel$export($054eb8030ebde76e$exports, "Toast", () => $054eb8030ebde76e$export$8d8dc7d5f743331b);
|
|
25
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastTitle", () => $054eb8030ebde76e$export$16d42d7c29b95a4);
|
|
26
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastDescription", () => $054eb8030ebde76e$export$ecddd96c53621d9a);
|
|
27
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastAction", () => $054eb8030ebde76e$export$3019feecfda683d2);
|
|
28
|
+
$parcel$export($054eb8030ebde76e$exports, "ToastClose", () => $054eb8030ebde76e$export$811e70f61c205839);
|
|
29
|
+
$parcel$export($054eb8030ebde76e$exports, "Provider", () => $054eb8030ebde76e$export$2881499e37b75b9a);
|
|
30
|
+
$parcel$export($054eb8030ebde76e$exports, "Viewport", () => $054eb8030ebde76e$export$d5c6c08dc2d3ca7);
|
|
31
|
+
$parcel$export($054eb8030ebde76e$exports, "Root", () => $054eb8030ebde76e$export$be92b6f5f03c0fe9);
|
|
32
|
+
$parcel$export($054eb8030ebde76e$exports, "Title", () => $054eb8030ebde76e$export$f99233281efd08a0);
|
|
33
|
+
$parcel$export($054eb8030ebde76e$exports, "Description", () => $054eb8030ebde76e$export$393edc798c47379d);
|
|
34
|
+
$parcel$export($054eb8030ebde76e$exports, "Action", () => $054eb8030ebde76e$export$e19cd5f9376f8cee);
|
|
35
|
+
$parcel$export($054eb8030ebde76e$exports, "Close", () => $054eb8030ebde76e$export$f39c2d165cd861fe);
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
/* -------------------------------------------------------------------------------------------------
|
|
51
|
+
* ToastProvider
|
|
52
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
|
|
53
|
+
const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $eyrYI$createContextScope('Toast');
|
|
54
|
+
const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME);
|
|
55
|
+
const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
|
|
56
|
+
const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children } = props;
|
|
57
|
+
const [viewport, setViewport] = $eyrYI$useState(null);
|
|
58
|
+
const [toastCount, setToastCount] = $eyrYI$useState(0);
|
|
59
|
+
const isFocusedToastEscapeKeyDownRef = $eyrYI$useRef(false);
|
|
60
|
+
const isClosePausedRef = $eyrYI$useRef(false);
|
|
61
|
+
return /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastProviderProvider, {
|
|
62
|
+
scope: __scopeToast,
|
|
63
|
+
label: label,
|
|
64
|
+
duration: duration,
|
|
65
|
+
swipeDirection: swipeDirection,
|
|
66
|
+
swipeThreshold: swipeThreshold,
|
|
67
|
+
toastCount: toastCount,
|
|
68
|
+
viewport: viewport,
|
|
69
|
+
onViewportChange: setViewport,
|
|
70
|
+
onToastAdd: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount + 1
|
|
71
|
+
)
|
|
72
|
+
, []),
|
|
73
|
+
onToastRemove: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount - 1
|
|
74
|
+
)
|
|
75
|
+
, []),
|
|
76
|
+
isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
|
|
77
|
+
isClosePausedRef: isClosePausedRef
|
|
78
|
+
}, children);
|
|
79
|
+
};
|
|
80
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$f5d03d415824e0e, {
|
|
81
|
+
displayName: $054eb8030ebde76e$var$PROVIDER_NAME
|
|
82
|
+
});
|
|
83
|
+
/* -------------------------------------------------------------------------------------------------
|
|
84
|
+
* ToastViewport
|
|
85
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport';
|
|
86
|
+
const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [
|
|
87
|
+
'F8'
|
|
88
|
+
];
|
|
89
|
+
const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause';
|
|
90
|
+
const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
|
|
91
|
+
const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
92
|
+
const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
|
|
93
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast);
|
|
94
|
+
const wrapperRef = $eyrYI$useRef(null);
|
|
95
|
+
const ref = $eyrYI$useRef(null);
|
|
96
|
+
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
97
|
+
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
|
|
98
|
+
$eyrYI$useEffect(()=>{
|
|
99
|
+
const handleKeyDown = (event)=>{
|
|
100
|
+
var _ref$current;
|
|
101
|
+
// we use `event.code` as it is consistent regardless of meta keys that were pressed.
|
|
102
|
+
// for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
|
|
103
|
+
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key
|
|
104
|
+
);
|
|
105
|
+
if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
106
|
+
};
|
|
107
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
108
|
+
return ()=>document.removeEventListener('keydown', handleKeyDown)
|
|
109
|
+
;
|
|
110
|
+
}, [
|
|
111
|
+
hotkey
|
|
112
|
+
]);
|
|
113
|
+
$eyrYI$useEffect(()=>{
|
|
114
|
+
const wrapper = wrapperRef.current;
|
|
115
|
+
const viewport = ref.current;
|
|
116
|
+
if (wrapper && viewport) {
|
|
117
|
+
const handlePause = ()=>{
|
|
118
|
+
const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
|
|
119
|
+
viewport.dispatchEvent(pauseEvent);
|
|
120
|
+
context.isClosePausedRef.current = true;
|
|
121
|
+
};
|
|
122
|
+
const handleResume = ()=>{
|
|
123
|
+
const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
|
|
124
|
+
viewport.dispatchEvent(resumeEvent);
|
|
125
|
+
context.isClosePausedRef.current = false;
|
|
126
|
+
}; // Toasts are not in the viewport React tree so we need to bind DOM events
|
|
127
|
+
wrapper.addEventListener('focusin', handlePause);
|
|
128
|
+
wrapper.addEventListener('focusout', handleResume);
|
|
129
|
+
wrapper.addEventListener('pointerenter', handlePause);
|
|
130
|
+
wrapper.addEventListener('pointerleave', handleResume);
|
|
131
|
+
window.addEventListener('blur', handlePause);
|
|
132
|
+
window.addEventListener('focus', handleResume);
|
|
133
|
+
return ()=>{
|
|
134
|
+
wrapper.removeEventListener('focusin', handlePause);
|
|
135
|
+
wrapper.removeEventListener('focusout', handleResume);
|
|
136
|
+
wrapper.removeEventListener('pointerenter', handlePause);
|
|
137
|
+
wrapper.removeEventListener('pointerleave', handleResume);
|
|
138
|
+
window.removeEventListener('blur', handlePause);
|
|
139
|
+
window.removeEventListener('focus', handleResume);
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
}, [
|
|
143
|
+
context.isClosePausedRef
|
|
144
|
+
]);
|
|
145
|
+
$eyrYI$useEffect(()=>{
|
|
146
|
+
const viewport = ref.current; // Re-order DOM so most recent toasts are at top of DOM structure to improve tab order
|
|
147
|
+
if (viewport) {
|
|
148
|
+
const prepended = new Set();
|
|
149
|
+
const observer = new MutationObserver((mutations)=>{
|
|
150
|
+
const addedNodes = mutations.map((mutation)=>Array.from(mutation.addedNodes)
|
|
151
|
+
).reduce((a, b)=>a.concat(b)
|
|
152
|
+
);
|
|
153
|
+
addedNodes.forEach((node)=>{
|
|
154
|
+
// mutation will immediately fire again when we prepend so we only prepend if
|
|
155
|
+
// it hasn't just prepended.
|
|
156
|
+
if (!prepended.has(node)) {
|
|
157
|
+
viewport.prepend(node);
|
|
158
|
+
prepended.add(node);
|
|
159
|
+
} else // this else catches the case where the mutation fires immediately after prepend.
|
|
160
|
+
// we remove from cache after it prepends to allow observer to catch future updates
|
|
161
|
+
// to DOM order, e.g. if `key` changes for a toast and is reportalled to bottom.
|
|
162
|
+
prepended.delete(node);
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
observer.observe(viewport, {
|
|
166
|
+
childList: true
|
|
167
|
+
});
|
|
168
|
+
return ()=>observer.disconnect()
|
|
169
|
+
;
|
|
170
|
+
}
|
|
171
|
+
}, []);
|
|
172
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Branch, {
|
|
173
|
+
ref: wrapperRef,
|
|
174
|
+
role: "region",
|
|
175
|
+
"aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
|
|
176
|
+
,
|
|
177
|
+
tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
|
|
178
|
+
,
|
|
179
|
+
style: {
|
|
180
|
+
pointerEvents: context.toastCount > 0 ? undefined : 'none'
|
|
181
|
+
}
|
|
182
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.ol, $eyrYI$babelruntimehelpersesmextends({
|
|
183
|
+
tabIndex: -1
|
|
184
|
+
}, viewportProps, {
|
|
185
|
+
ref: composedRefs
|
|
186
|
+
})));
|
|
187
|
+
});
|
|
188
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$6192c2425ecfd989, {
|
|
189
|
+
displayName: $054eb8030ebde76e$var$VIEWPORT_NAME
|
|
190
|
+
});
|
|
191
|
+
/* -------------------------------------------------------------------------------------------------
|
|
192
|
+
* Toast
|
|
193
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
|
|
194
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart';
|
|
195
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove';
|
|
196
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
|
|
197
|
+
const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd';
|
|
198
|
+
const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
199
|
+
const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props;
|
|
200
|
+
const [open = true, setOpen] = $eyrYI$useControllableState({
|
|
201
|
+
prop: openProp,
|
|
202
|
+
defaultProp: defaultOpen,
|
|
203
|
+
onChange: onOpenChange
|
|
204
|
+
});
|
|
205
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Presence, {
|
|
206
|
+
present: forceMount || open
|
|
207
|
+
}, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastImpl, $eyrYI$babelruntimehelpersesmextends({
|
|
208
|
+
open: open
|
|
209
|
+
}, toastProps, {
|
|
210
|
+
ref: forwardedRef,
|
|
211
|
+
onClose: ()=>setOpen(false)
|
|
212
|
+
,
|
|
213
|
+
onSwipeStart: $eyrYI$composeEventHandlers(props.onSwipeStart, (event)=>{
|
|
214
|
+
event.currentTarget.setAttribute('data-swipe', 'start');
|
|
215
|
+
}),
|
|
216
|
+
onSwipeMove: $eyrYI$composeEventHandlers(props.onSwipeMove, (event)=>{
|
|
217
|
+
const { x: x , y: y } = event.detail.delta;
|
|
218
|
+
event.currentTarget.setAttribute('data-swipe', 'move');
|
|
219
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);
|
|
220
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);
|
|
221
|
+
}),
|
|
222
|
+
onSwipeCancel: $eyrYI$composeEventHandlers(props.onSwipeCancel, (event)=>{
|
|
223
|
+
event.currentTarget.setAttribute('data-swipe', 'cancel');
|
|
224
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
|
|
225
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
|
|
226
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');
|
|
227
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');
|
|
228
|
+
}),
|
|
229
|
+
onSwipeEnd: $eyrYI$composeEventHandlers(props.onSwipeEnd, (event)=>{
|
|
230
|
+
const { x: x , y: y } = event.detail.delta;
|
|
231
|
+
event.currentTarget.setAttribute('data-swipe', 'end');
|
|
232
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');
|
|
233
|
+
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');
|
|
234
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);
|
|
235
|
+
event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);
|
|
236
|
+
setOpen(false);
|
|
237
|
+
})
|
|
238
|
+
})));
|
|
239
|
+
});
|
|
240
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$8d8dc7d5f743331b, {
|
|
241
|
+
displayName: $054eb8030ebde76e$var$TOAST_NAME
|
|
242
|
+
});
|
|
243
|
+
/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, {
|
|
244
|
+
isInteractive: false,
|
|
245
|
+
onClose () {}
|
|
246
|
+
});
|
|
247
|
+
const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
248
|
+
const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
|
|
249
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
|
|
250
|
+
const ref = $eyrYI$useRef(null);
|
|
251
|
+
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref);
|
|
252
|
+
const pointerStartRef = $eyrYI$useRef(null);
|
|
253
|
+
const swipeDeltaRef = $eyrYI$useRef(null);
|
|
254
|
+
const duration1 = durationProp || context.duration;
|
|
255
|
+
const closeTimerStartTimeRef = $eyrYI$useRef(0);
|
|
256
|
+
const closeTimerRemainingTimeRef = $eyrYI$useRef(duration1);
|
|
257
|
+
const closeTimerRef = $eyrYI$useRef(0);
|
|
258
|
+
const { onToastAdd: onToastAdd , onToastRemove: onToastRemove } = context;
|
|
259
|
+
const handleClose = $eyrYI$useCallbackRef(()=>{
|
|
260
|
+
var _ref$current2, _context$viewport;
|
|
261
|
+
// focus viewport if focus is within toast to read the remaining toast
|
|
262
|
+
// count to SR users and ensure focus isn't lost
|
|
263
|
+
const isFocusInToast = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement);
|
|
264
|
+
if (isFocusInToast) (_context$viewport = context.viewport) === null || _context$viewport === void 0 || _context$viewport.focus();
|
|
265
|
+
onClose();
|
|
266
|
+
});
|
|
267
|
+
const startTimer = $eyrYI$useCallback((duration)=>{
|
|
268
|
+
if (!duration || duration === Infinity) return;
|
|
269
|
+
window.clearTimeout(closeTimerRef.current);
|
|
270
|
+
closeTimerStartTimeRef.current = new Date().getTime();
|
|
271
|
+
closeTimerRef.current = window.setTimeout(handleClose, duration);
|
|
272
|
+
}, [
|
|
273
|
+
handleClose
|
|
274
|
+
]);
|
|
275
|
+
$eyrYI$useEffect(()=>{
|
|
276
|
+
const viewport = context.viewport;
|
|
277
|
+
if (viewport) {
|
|
278
|
+
const handleResume = ()=>{
|
|
279
|
+
startTimer(closeTimerRemainingTimeRef.current);
|
|
280
|
+
};
|
|
281
|
+
const handlePause = ()=>{
|
|
282
|
+
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
|
|
283
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
284
|
+
window.clearTimeout(closeTimerRef.current);
|
|
285
|
+
};
|
|
286
|
+
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
287
|
+
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
288
|
+
return ()=>{
|
|
289
|
+
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
290
|
+
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
291
|
+
};
|
|
292
|
+
}
|
|
293
|
+
}, [
|
|
294
|
+
context.viewport,
|
|
295
|
+
duration1,
|
|
296
|
+
startTimer
|
|
297
|
+
]); // start timer when toast opens or duration changes.
|
|
298
|
+
// we include `open` in deps because closed !== unmounted when animating
|
|
299
|
+
// so it could reopen before being completely unmounted
|
|
300
|
+
$eyrYI$useEffect(()=>{
|
|
301
|
+
if (open && !context.isClosePausedRef.current) startTimer(duration1);
|
|
302
|
+
}, [
|
|
303
|
+
open,
|
|
304
|
+
duration1,
|
|
305
|
+
context.isClosePausedRef,
|
|
306
|
+
startTimer
|
|
307
|
+
]);
|
|
308
|
+
$eyrYI$useEffect(()=>{
|
|
309
|
+
onToastAdd();
|
|
310
|
+
return ()=>onToastRemove()
|
|
311
|
+
;
|
|
312
|
+
}, [
|
|
313
|
+
onToastAdd,
|
|
314
|
+
onToastRemove
|
|
315
|
+
]);
|
|
316
|
+
if (!context.viewport) return null;
|
|
317
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastAnnounce, {
|
|
318
|
+
__scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
|
|
319
|
+
,
|
|
320
|
+
role: "status",
|
|
321
|
+
"aria-live": type === 'foreground' ? 'assertive' : 'polite',
|
|
322
|
+
"aria-atomic": true
|
|
323
|
+
}, props.children), /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
|
|
324
|
+
scope: __scopeToast,
|
|
325
|
+
isInteractive: true,
|
|
326
|
+
onClose: handleClose
|
|
327
|
+
}, /*#__PURE__*/ $eyrYI$createPortal(/*#__PURE__*/ $eyrYI$createElement($eyrYI$Root, {
|
|
328
|
+
asChild: true,
|
|
329
|
+
onEscapeKeyDown: $eyrYI$composeEventHandlers(onEscapeKeyDown, ()=>{
|
|
330
|
+
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
331
|
+
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
332
|
+
})
|
|
333
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.li, $eyrYI$babelruntimehelpersesmextends({
|
|
334
|
+
role: "status",
|
|
335
|
+
"aria-live": "off",
|
|
336
|
+
"aria-atomic": true,
|
|
337
|
+
tabIndex: 0,
|
|
338
|
+
"data-state": open ? 'open' : 'closed',
|
|
339
|
+
"data-swipe-direction": context.swipeDirection
|
|
340
|
+
}, toastProps, {
|
|
341
|
+
ref: composedRefs,
|
|
342
|
+
style: {
|
|
343
|
+
userSelect: 'none',
|
|
344
|
+
touchAction: 'none',
|
|
345
|
+
...props.style
|
|
346
|
+
},
|
|
347
|
+
onKeyDown: $eyrYI$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
348
|
+
if (event.key !== 'Escape') return;
|
|
349
|
+
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent);
|
|
350
|
+
if (!event.nativeEvent.defaultPrevented) {
|
|
351
|
+
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
352
|
+
handleClose();
|
|
353
|
+
}
|
|
354
|
+
}),
|
|
355
|
+
onPointerDown: $eyrYI$composeEventHandlers(props.onPointerDown, (event)=>{
|
|
356
|
+
if (event.button !== 0) return;
|
|
357
|
+
pointerStartRef.current = {
|
|
358
|
+
x: event.clientX,
|
|
359
|
+
y: event.clientY
|
|
360
|
+
};
|
|
361
|
+
}),
|
|
362
|
+
onPointerMove: $eyrYI$composeEventHandlers(props.onPointerMove, (event)=>{
|
|
363
|
+
if (!pointerStartRef.current) return;
|
|
364
|
+
const x = event.clientX - pointerStartRef.current.x;
|
|
365
|
+
const y = event.clientY - pointerStartRef.current.y;
|
|
366
|
+
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
367
|
+
const isHorizontalSwipe = [
|
|
368
|
+
'left',
|
|
369
|
+
'right'
|
|
370
|
+
].includes(context.swipeDirection);
|
|
371
|
+
const clamp = [
|
|
372
|
+
'left',
|
|
373
|
+
'up'
|
|
374
|
+
].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
375
|
+
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
376
|
+
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
377
|
+
const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
|
|
378
|
+
const delta = {
|
|
379
|
+
x: clampedX,
|
|
380
|
+
y: clampedY
|
|
381
|
+
};
|
|
382
|
+
const eventDetail = {
|
|
383
|
+
originalEvent: event,
|
|
384
|
+
delta: delta
|
|
385
|
+
};
|
|
386
|
+
if (hasSwipeMoveStarted) {
|
|
387
|
+
swipeDeltaRef.current = delta;
|
|
388
|
+
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
389
|
+
discrete: false
|
|
390
|
+
});
|
|
391
|
+
} else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
392
|
+
swipeDeltaRef.current = delta;
|
|
393
|
+
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
394
|
+
discrete: false
|
|
395
|
+
});
|
|
396
|
+
event.target.setPointerCapture(event.pointerId);
|
|
397
|
+
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture
|
|
398
|
+
// for the current pointer down interaction
|
|
399
|
+
pointerStartRef.current = null;
|
|
400
|
+
}),
|
|
401
|
+
onPointerUp: $eyrYI$composeEventHandlers(props.onPointerUp, (event1)=>{
|
|
402
|
+
const delta = swipeDeltaRef.current;
|
|
403
|
+
event1.target.releasePointerCapture(event1.pointerId);
|
|
404
|
+
swipeDeltaRef.current = null;
|
|
405
|
+
pointerStartRef.current = null;
|
|
406
|
+
if (delta) {
|
|
407
|
+
const toast = event1.currentTarget;
|
|
408
|
+
const eventDetail = {
|
|
409
|
+
originalEvent: event1,
|
|
410
|
+
delta: delta
|
|
411
|
+
};
|
|
412
|
+
if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
413
|
+
discrete: true
|
|
414
|
+
});
|
|
415
|
+
else $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
|
|
416
|
+
discrete: true
|
|
417
|
+
});
|
|
418
|
+
// Prevent click event from triggering on items within the toast when
|
|
419
|
+
// pointer up is part of a swipe gesture
|
|
420
|
+
toast.addEventListener('click', (event)=>event.preventDefault()
|
|
421
|
+
, {
|
|
422
|
+
once: true
|
|
423
|
+
});
|
|
424
|
+
}
|
|
425
|
+
})
|
|
426
|
+
}))), context.viewport)));
|
|
427
|
+
});
|
|
428
|
+
$054eb8030ebde76e$var$ToastImpl.propTypes = {
|
|
429
|
+
type (props) {
|
|
430
|
+
if (props.type && ![
|
|
431
|
+
'foreground',
|
|
432
|
+
'background'
|
|
433
|
+
].includes(props.type)) {
|
|
434
|
+
const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
435
|
+
throw new Error(error);
|
|
436
|
+
}
|
|
437
|
+
return null;
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{
|
|
441
|
+
const { __scopeToast: __scopeToast , ...announceProps } = props;
|
|
442
|
+
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
|
|
443
|
+
const [renderChildren, setRenderChildren] = $eyrYI$useState(false);
|
|
444
|
+
const [isAnnounced, setIsAnnounced] = $eyrYI$useState(false); // render children in the next frame to ensure toast is announced in NVDA
|
|
445
|
+
$054eb8030ebde76e$var$useNextFrame(()=>setRenderChildren(true)
|
|
446
|
+
);
|
|
447
|
+
$eyrYI$useEffect(()=>{
|
|
448
|
+
const timer = window.setTimeout(()=>setIsAnnounced(true)
|
|
449
|
+
, 1000);
|
|
450
|
+
return ()=>window.clearTimeout(timer)
|
|
451
|
+
;
|
|
452
|
+
}, []);
|
|
453
|
+
return isAnnounced ? null : /*#__PURE__*/ $eyrYI$createElement($eyrYI$UnstablePortal, {
|
|
454
|
+
asChild: true
|
|
455
|
+
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, {
|
|
456
|
+
asChild: true
|
|
457
|
+
}, /*#__PURE__*/ $eyrYI$createElement("div", announceProps, renderChildren && /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, context.label, " ", props.children))));
|
|
458
|
+
};
|
|
459
|
+
/* -------------------------------------------------------------------------------------------------
|
|
460
|
+
* ToastTitle
|
|
461
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TITLE_NAME = 'ToastTitle';
|
|
462
|
+
const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
463
|
+
const { __scopeToast: __scopeToast , ...titleProps } = props;
|
|
464
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, titleProps, {
|
|
465
|
+
ref: forwardedRef
|
|
466
|
+
}));
|
|
467
|
+
});
|
|
468
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$16d42d7c29b95a4, {
|
|
469
|
+
displayName: $054eb8030ebde76e$var$TITLE_NAME
|
|
470
|
+
});
|
|
471
|
+
/* -------------------------------------------------------------------------------------------------
|
|
472
|
+
* ToastDescription
|
|
473
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$DESCRIPTION_NAME = 'ToastDescription';
|
|
474
|
+
const $054eb8030ebde76e$export$ecddd96c53621d9a = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
475
|
+
const { __scopeToast: __scopeToast , ...descriptionProps } = props;
|
|
476
|
+
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, descriptionProps, {
|
|
477
|
+
ref: forwardedRef
|
|
478
|
+
}));
|
|
479
|
+
});
|
|
480
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$ecddd96c53621d9a, {
|
|
481
|
+
displayName: $054eb8030ebde76e$var$DESCRIPTION_NAME
|
|
482
|
+
});
|
|
483
|
+
/* -------------------------------------------------------------------------------------------------
|
|
484
|
+
* ToastAction
|
|
485
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction';
|
|
486
|
+
const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
487
|
+
const { altText: altText , ...actionProps } = props;
|
|
488
|
+
const context = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$ACTION_NAME, props.__scopeToast);
|
|
489
|
+
if (!altText) return null;
|
|
490
|
+
return context.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$export$811e70f61c205839, $eyrYI$babelruntimehelpersesmextends({}, actionProps, {
|
|
491
|
+
ref: forwardedRef
|
|
492
|
+
})) : /*#__PURE__*/ $eyrYI$createElement("span", null, altText);
|
|
493
|
+
});
|
|
494
|
+
$054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
|
|
495
|
+
altText (props) {
|
|
496
|
+
if (!props.altText) throw new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
|
|
497
|
+
return null;
|
|
498
|
+
}
|
|
499
|
+
};
|
|
500
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$3019feecfda683d2, {
|
|
501
|
+
displayName: $054eb8030ebde76e$var$ACTION_NAME
|
|
502
|
+
});
|
|
503
|
+
/* -------------------------------------------------------------------------------------------------
|
|
504
|
+
* ToastClose
|
|
505
|
+
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose';
|
|
506
|
+
const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{
|
|
507
|
+
const { __scopeToast: __scopeToast , ...closeProps } = props;
|
|
508
|
+
const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast);
|
|
509
|
+
return interactiveContext.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.button, $eyrYI$babelruntimehelpersesmextends({
|
|
510
|
+
type: "button"
|
|
511
|
+
}, closeProps, {
|
|
512
|
+
ref: forwardedRef,
|
|
513
|
+
onClick: $eyrYI$composeEventHandlers(props.onClick, interactiveContext.onClose)
|
|
514
|
+
})) : null;
|
|
515
|
+
});
|
|
516
|
+
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$811e70f61c205839, {
|
|
517
|
+
displayName: $054eb8030ebde76e$var$CLOSE_NAME
|
|
518
|
+
});
|
|
519
|
+
/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
|
|
520
|
+
const currentTarget = detail.originalEvent.currentTarget;
|
|
521
|
+
const event = new CustomEvent(name, {
|
|
522
|
+
bubbles: true,
|
|
523
|
+
cancelable: true,
|
|
524
|
+
detail: detail
|
|
525
|
+
});
|
|
526
|
+
if (handler) currentTarget.addEventListener(name, handler, {
|
|
527
|
+
once: true
|
|
528
|
+
});
|
|
529
|
+
if (discrete) $eyrYI$dispatchDiscreteCustomEvent(currentTarget, event);
|
|
530
|
+
else currentTarget.dispatchEvent(event);
|
|
531
|
+
}
|
|
532
|
+
const $054eb8030ebde76e$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{
|
|
533
|
+
const deltaX = Math.abs(delta.x);
|
|
534
|
+
const deltaY = Math.abs(delta.y);
|
|
535
|
+
const isDeltaX = deltaX > deltaY;
|
|
536
|
+
if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold;
|
|
537
|
+
else return !isDeltaX && deltaY > threshold;
|
|
538
|
+
};
|
|
539
|
+
function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
|
|
540
|
+
const fn = $eyrYI$useCallbackRef(callback);
|
|
541
|
+
$eyrYI$useLayoutEffect(()=>{
|
|
542
|
+
let raf1 = 0;
|
|
543
|
+
let raf2 = 0;
|
|
544
|
+
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn)
|
|
545
|
+
);
|
|
546
|
+
return ()=>{
|
|
547
|
+
window.cancelAnimationFrame(raf1);
|
|
548
|
+
window.cancelAnimationFrame(raf2);
|
|
549
|
+
};
|
|
550
|
+
}, [
|
|
551
|
+
fn
|
|
552
|
+
]);
|
|
553
|
+
}
|
|
554
|
+
const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e;
|
|
555
|
+
const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989;
|
|
556
|
+
const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b;
|
|
557
|
+
const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4;
|
|
558
|
+
const $054eb8030ebde76e$export$393edc798c47379d = $054eb8030ebde76e$export$ecddd96c53621d9a;
|
|
559
|
+
const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2;
|
|
560
|
+
const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
|
|
561
|
+
|
|
562
|
+
|
|
563
|
+
|
|
564
|
+
|
|
565
|
+
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
566
|
//# sourceMappingURL=index.module.js.map
|