@radix-ui/react-toast 1.2.0-rc.2 → 1.2.0-rc.3

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