@sparrowengg/integrations-templates-frontend 8.0.3 → 8.0.5

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