@arc-ui/components 11.8.0 → 11.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Badge/Badge.cjs.d.ts +4 -0
- package/dist/Badge/Badge.cjs.js +3 -3
- package/dist/Badge/Badge.esm.d.ts +4 -0
- package/dist/Badge/Badge.esm.js +3 -3
- package/dist/ProgressStepper/ProgressStepper.cjs.d.ts +1 -89
- package/dist/ProgressStepper/ProgressStepper.cjs.js +10 -144
- package/dist/ProgressStepper/ProgressStepper.esm.d.ts +1 -89
- package/dist/ProgressStepper/ProgressStepper.esm.js +9 -143
- package/dist/Tabs/Tabs.cjs.d.ts +1 -75
- package/dist/Tabs/Tabs.cjs.js +11 -505
- package/dist/Tabs/Tabs.esm.d.ts +1 -75
- package/dist/Tabs/Tabs.esm.js +10 -504
- package/dist/TextArea/TextArea.cjs.js +20 -8
- package/dist/TextArea/TextArea.esm.js +20 -8
- package/dist/Toast/Toast.cjs.d.ts +1 -52
- package/dist/Toast/Toast.cjs.js +14 -734
- package/dist/Toast/Toast.esm.d.ts +1 -52
- package/dist/Toast/Toast.esm.js +13 -733
- package/dist/_shared/cjs/MediaCard-9483ad5f.d.ts +60 -0
- package/dist/_shared/cjs/ProgressStepper-f740d7bb.d.ts +89 -0
- package/dist/_shared/cjs/ProgressStepper-f740d7bb.js +149 -0
- package/dist/_shared/cjs/Tabs-fda49692.d.ts +75 -0
- package/dist/_shared/cjs/Tabs-fda49692.js +510 -0
- package/dist/_shared/cjs/Toast-0cb23cae.d.ts +52 -0
- package/dist/_shared/cjs/Toast-0cb23cae.js +739 -0
- package/dist/_shared/esm/MediaCard-9483ad5f.d.ts +60 -0
- package/dist/_shared/esm/ProgressStepper-7ab88f4c.d.ts +89 -0
- package/dist/_shared/esm/ProgressStepper-7ab88f4c.js +143 -0
- package/dist/_shared/esm/Tabs-5af0b940.d.ts +75 -0
- package/dist/_shared/esm/Tabs-5af0b940.js +504 -0
- package/dist/_shared/esm/Toast-43795e91.d.ts +52 -0
- package/dist/_shared/esm/Toast-43795e91.js +733 -0
- package/dist/index.es.js +2312 -407
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2667 -751
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/components/Badge/Badge.d.ts +4 -0
- package/dist/types/components/Toast/Toast.d.ts +2 -2
- package/dist/types/components/Toast/ToastNotification.d.ts +1 -1
- package/dist/types/components/index.d.ts +17 -6
- package/package.json +4 -4
package/dist/Toast/Toast.cjs.js
CHANGED
|
@@ -2,742 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
var Toast = require('../_shared/cjs/Toast-0cb23cae.js');
|
|
6
|
+
require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
|
|
7
|
+
require('react');
|
|
8
|
+
require('../_shared/cjs/extends-bb8ffacd.js');
|
|
9
|
+
require('react-dom');
|
|
10
|
+
require('../_shared/cjs/index-952918c9.js');
|
|
11
|
+
require('../_shared/cjs/index-27b53d49.js');
|
|
12
|
+
require('../_shared/cjs/index-96c4d581.js');
|
|
13
|
+
require('../_shared/cjs/index-45bfb67b.js');
|
|
14
|
+
require('../_shared/cjs/BtIconCrossAlt2Px-30dc2688.js');
|
|
15
|
+
require('../_shared/cjs/BtIconTick-42fcc5ec.js');
|
|
16
|
+
require('../_shared/cjs/BtIconAlert-637db790.js');
|
|
17
|
+
require('../_shared/cjs/Icon-e1dd45eb.js');
|
|
17
18
|
require('../_shared/cjs/suffix-modifier-1ee2da04.js');
|
|
18
19
|
require('../_shared/cjs/Surface-b7c51b2b.js');
|
|
19
20
|
|
|
20
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
21
|
|
|
22
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
* On the server, React emits a warning when calling `useLayoutEffect`.
|
|
26
|
-
* This is because neither `useLayoutEffect` nor `useEffect` run on the server.
|
|
27
|
-
* We use this safe version which suppresses the warning by replacing it with a noop on the server.
|
|
28
|
-
*
|
|
29
|
-
* See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
|
|
30
|
-
*/ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
|
|
31
|
-
|
|
32
|
-
const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
33
|
-
return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends._extends({}, props, {
|
|
34
|
-
ref: forwardedRef,
|
|
35
|
-
style: {
|
|
36
|
-
// See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
|
|
37
|
-
position: 'absolute',
|
|
38
|
-
border: 0,
|
|
39
|
-
width: 1,
|
|
40
|
-
height: 1,
|
|
41
|
-
padding: 0,
|
|
42
|
-
margin: -1,
|
|
43
|
-
overflow: 'hidden',
|
|
44
|
-
clip: 'rect(0, 0, 0, 0)',
|
|
45
|
-
whiteSpace: 'nowrap',
|
|
46
|
-
wordWrap: 'normal',
|
|
47
|
-
...props.style
|
|
48
|
-
}
|
|
49
|
-
}));
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
/* -------------------------------------------------------------------------------------------------
|
|
53
|
-
* ToastProvider
|
|
54
|
-
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider';
|
|
55
|
-
const [$054eb8030ebde76e$var$Collection, $054eb8030ebde76e$var$useCollection, $054eb8030ebde76e$var$createCollectionScope] = index$1.$e02a7d9cb1dc128c$export$c74125a8e3af6bb2('Toast');
|
|
56
|
-
const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = index.$c512c27ab02ef895$export$50c7b4e9d9f19c1('Toast', [
|
|
57
|
-
$054eb8030ebde76e$var$createCollectionScope
|
|
58
|
-
]);
|
|
59
|
-
const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME);
|
|
60
|
-
const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{
|
|
61
|
-
const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children } = props;
|
|
62
|
-
const [viewport, setViewport] = 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__*/ React.createElement($054eb8030ebde76e$var$Collection.Provider, {
|
|
67
|
-
scope: __scopeToast
|
|
68
|
-
}, /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastProviderProvider, {
|
|
69
|
-
scope: __scopeToast,
|
|
70
|
-
label: label,
|
|
71
|
-
duration: duration,
|
|
72
|
-
swipeDirection: swipeDirection,
|
|
73
|
-
swipeThreshold: swipeThreshold,
|
|
74
|
-
toastCount: toastCount,
|
|
75
|
-
viewport: viewport,
|
|
76
|
-
onViewportChange: setViewport,
|
|
77
|
-
onToastAdd: React.useCallback(()=>setToastCount((prevCount)=>prevCount + 1
|
|
78
|
-
)
|
|
79
|
-
, []),
|
|
80
|
-
onToastRemove: React.useCallback(()=>setToastCount((prevCount)=>prevCount - 1
|
|
81
|
-
)
|
|
82
|
-
, []),
|
|
83
|
-
isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
|
|
84
|
-
isClosePausedRef: isClosePausedRef
|
|
85
|
-
}, children));
|
|
86
|
-
};
|
|
87
|
-
$054eb8030ebde76e$export$f5d03d415824e0e.propTypes = {
|
|
88
|
-
label (props) {
|
|
89
|
-
if (props.label && typeof props.label === 'string' && !props.label.trim()) {
|
|
90
|
-
const error = `Invalid prop \`label\` supplied to \`${$054eb8030ebde76e$var$PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
91
|
-
return new Error(error);
|
|
92
|
-
}
|
|
93
|
-
return null;
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
/* -------------------------------------------------------------------------------------------------
|
|
97
|
-
* ToastViewport
|
|
98
|
-
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport';
|
|
99
|
-
const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [
|
|
100
|
-
'F8'
|
|
101
|
-
];
|
|
102
|
-
const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause';
|
|
103
|
-
const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume';
|
|
104
|
-
const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
105
|
-
const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
|
|
106
|
-
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast);
|
|
107
|
-
const getItems = $054eb8030ebde76e$var$useCollection(__scopeToast);
|
|
108
|
-
const wrapperRef = React.useRef(null);
|
|
109
|
-
const headFocusProxyRef = React.useRef(null);
|
|
110
|
-
const tailFocusProxyRef = React.useRef(null);
|
|
111
|
-
const ref = React.useRef(null);
|
|
112
|
-
const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref, context.onViewportChange);
|
|
113
|
-
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
|
|
114
|
-
const hasToasts = context.toastCount > 0;
|
|
115
|
-
React.useEffect(()=>{
|
|
116
|
-
const handleKeyDown = (event)=>{
|
|
117
|
-
var _ref$current;
|
|
118
|
-
// we use `event.code` as it is consistent regardless of meta keys that were pressed.
|
|
119
|
-
// for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`
|
|
120
|
-
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key
|
|
121
|
-
);
|
|
122
|
-
if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
123
|
-
};
|
|
124
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
125
|
-
return ()=>document.removeEventListener('keydown', handleKeyDown)
|
|
126
|
-
;
|
|
127
|
-
}, [
|
|
128
|
-
hotkey
|
|
129
|
-
]);
|
|
130
|
-
React.useEffect(()=>{
|
|
131
|
-
const wrapper = wrapperRef.current;
|
|
132
|
-
const viewport = ref.current;
|
|
133
|
-
if (hasToasts && wrapper && viewport) {
|
|
134
|
-
const handlePause = ()=>{
|
|
135
|
-
if (!context.isClosePausedRef.current) {
|
|
136
|
-
const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
|
|
137
|
-
viewport.dispatchEvent(pauseEvent);
|
|
138
|
-
context.isClosePausedRef.current = true;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
const handleResume = ()=>{
|
|
142
|
-
if (context.isClosePausedRef.current) {
|
|
143
|
-
const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
|
|
144
|
-
viewport.dispatchEvent(resumeEvent);
|
|
145
|
-
context.isClosePausedRef.current = false;
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
const handleFocusOutResume = (event)=>{
|
|
149
|
-
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
|
|
150
|
-
if (isFocusMovingOutside) handleResume();
|
|
151
|
-
};
|
|
152
|
-
const handlePointerLeaveResume = ()=>{
|
|
153
|
-
const isFocusInside = wrapper.contains(document.activeElement);
|
|
154
|
-
if (!isFocusInside) handleResume();
|
|
155
|
-
}; // Toasts are not in the viewport React tree so we need to bind DOM events
|
|
156
|
-
wrapper.addEventListener('focusin', handlePause);
|
|
157
|
-
wrapper.addEventListener('focusout', handleFocusOutResume);
|
|
158
|
-
wrapper.addEventListener('pointermove', handlePause);
|
|
159
|
-
wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
|
|
160
|
-
window.addEventListener('blur', handlePause);
|
|
161
|
-
window.addEventListener('focus', handleResume);
|
|
162
|
-
return ()=>{
|
|
163
|
-
wrapper.removeEventListener('focusin', handlePause);
|
|
164
|
-
wrapper.removeEventListener('focusout', handleFocusOutResume);
|
|
165
|
-
wrapper.removeEventListener('pointermove', handlePause);
|
|
166
|
-
wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
|
|
167
|
-
window.removeEventListener('blur', handlePause);
|
|
168
|
-
window.removeEventListener('focus', handleResume);
|
|
169
|
-
};
|
|
170
|
-
}
|
|
171
|
-
}, [
|
|
172
|
-
hasToasts,
|
|
173
|
-
context.isClosePausedRef
|
|
174
|
-
]);
|
|
175
|
-
const getSortedTabbableCandidates = React.useCallback(({ tabbingDirection: tabbingDirection })=>{
|
|
176
|
-
const toastItems = getItems();
|
|
177
|
-
const tabbableCandidates = toastItems.map((toastItem)=>{
|
|
178
|
-
const toastNode = toastItem.ref.current;
|
|
179
|
-
const toastTabbableCandidates = [
|
|
180
|
-
toastNode,
|
|
181
|
-
...$054eb8030ebde76e$var$getTabbableCandidates(toastNode)
|
|
182
|
-
];
|
|
183
|
-
return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
184
|
-
});
|
|
185
|
-
return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
186
|
-
}, [
|
|
187
|
-
getItems
|
|
188
|
-
]);
|
|
189
|
-
React.useEffect(()=>{
|
|
190
|
-
const viewport = ref.current; // We programmatically manage tabbing as we are unable to influence
|
|
191
|
-
// the source order with portals, this allows us to reverse the
|
|
192
|
-
// tab order so that it runs from most recent toast to least
|
|
193
|
-
if (viewport) {
|
|
194
|
-
const handleKeyDown = (event)=>{
|
|
195
|
-
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
196
|
-
const isTabKey = event.key === 'Tab' && !isMetaKey;
|
|
197
|
-
if (isTabKey) {
|
|
198
|
-
const focusedElement = document.activeElement;
|
|
199
|
-
const isTabbingBackwards = event.shiftKey;
|
|
200
|
-
const targetIsViewport = event.target === viewport; // If we're back tabbing after jumping to the viewport then we simply
|
|
201
|
-
// proxy focus out to the preceding document
|
|
202
|
-
if (targetIsViewport && isTabbingBackwards) {
|
|
203
|
-
var _headFocusProxyRef$cu;
|
|
204
|
-
(_headFocusProxyRef$cu = headFocusProxyRef.current) === null || _headFocusProxyRef$cu === void 0 || _headFocusProxyRef$cu.focus();
|
|
205
|
-
return;
|
|
206
|
-
}
|
|
207
|
-
const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
|
|
208
|
-
const sortedCandidates = getSortedTabbableCandidates({
|
|
209
|
-
tabbingDirection: tabbingDirection
|
|
210
|
-
});
|
|
211
|
-
const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement
|
|
212
|
-
);
|
|
213
|
-
if ($054eb8030ebde76e$var$focusFirst(sortedCandidates.slice(index + 1))) event.preventDefault();
|
|
214
|
-
else {
|
|
215
|
-
var _headFocusProxyRef$cu2, _tailFocusProxyRef$cu;
|
|
216
|
-
// If we can't focus that means we're at the edges so we
|
|
217
|
-
// proxy to the corresponding exit point and let the browser handle
|
|
218
|
-
// tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
|
|
219
|
-
isTabbingBackwards ? (_headFocusProxyRef$cu2 = headFocusProxyRef.current) === null || _headFocusProxyRef$cu2 === void 0 || _headFocusProxyRef$cu2.focus() : (_tailFocusProxyRef$cu = tailFocusProxyRef.current) === null || _tailFocusProxyRef$cu === void 0 || _tailFocusProxyRef$cu.focus();
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
}; // Toasts are not in the viewport React tree so we need to bind DOM events
|
|
223
|
-
viewport.addEventListener('keydown', handleKeyDown);
|
|
224
|
-
return ()=>viewport.removeEventListener('keydown', handleKeyDown)
|
|
225
|
-
;
|
|
226
|
-
}
|
|
227
|
-
}, [
|
|
228
|
-
getItems,
|
|
229
|
-
getSortedTabbableCandidates
|
|
230
|
-
]);
|
|
231
|
-
return /*#__PURE__*/ React.createElement(index$2.$5cb92bef7577960e$export$aecb2ddcb55c95be, {
|
|
232
|
-
ref: wrapperRef,
|
|
233
|
-
role: "region",
|
|
234
|
-
"aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
|
|
235
|
-
,
|
|
236
|
-
tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
|
|
237
|
-
,
|
|
238
|
-
style: {
|
|
239
|
-
pointerEvents: hasToasts ? undefined : 'none'
|
|
240
|
-
}
|
|
241
|
-
}, hasToasts && /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$FocusProxy, {
|
|
242
|
-
ref: headFocusProxyRef,
|
|
243
|
-
onFocusFromOutsideViewport: ()=>{
|
|
244
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
245
|
-
tabbingDirection: 'forwards'
|
|
246
|
-
});
|
|
247
|
-
$054eb8030ebde76e$var$focusFirst(tabbableCandidates);
|
|
248
|
-
}
|
|
249
|
-
}), /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$Collection.Slot, {
|
|
250
|
-
scope: __scopeToast
|
|
251
|
-
}, /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.ol, _extends._extends({
|
|
252
|
-
tabIndex: -1
|
|
253
|
-
}, viewportProps, {
|
|
254
|
-
ref: composedRefs
|
|
255
|
-
}))), hasToasts && /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$FocusProxy, {
|
|
256
|
-
ref: tailFocusProxyRef,
|
|
257
|
-
onFocusFromOutsideViewport: ()=>{
|
|
258
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
259
|
-
tabbingDirection: 'backwards'
|
|
260
|
-
});
|
|
261
|
-
$054eb8030ebde76e$var$focusFirst(tabbableCandidates);
|
|
262
|
-
}
|
|
263
|
-
}));
|
|
264
|
-
});
|
|
265
|
-
/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
|
|
266
|
-
const $054eb8030ebde76e$var$FocusProxy = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
267
|
-
const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
|
|
268
|
-
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$FOCUS_PROXY_NAME, __scopeToast);
|
|
269
|
-
return /*#__PURE__*/ React.createElement($ea1ef594cf570d83$export$439d29a4e110a164, _extends._extends({
|
|
270
|
-
"aria-hidden": true,
|
|
271
|
-
tabIndex: 0
|
|
272
|
-
}, proxyProps, {
|
|
273
|
-
ref: forwardedRef // Avoid page scrolling when focus is on the focus proxy
|
|
274
|
-
,
|
|
275
|
-
style: {
|
|
276
|
-
position: 'fixed'
|
|
277
|
-
},
|
|
278
|
-
onFocus: (event)=>{
|
|
279
|
-
var _context$viewport;
|
|
280
|
-
const prevFocusedElement = event.relatedTarget;
|
|
281
|
-
const isFocusFromOutsideViewport = !((_context$viewport = context.viewport) !== null && _context$viewport !== void 0 && _context$viewport.contains(prevFocusedElement));
|
|
282
|
-
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
283
|
-
}
|
|
284
|
-
}));
|
|
285
|
-
});
|
|
286
|
-
/* -------------------------------------------------------------------------------------------------
|
|
287
|
-
* Toast
|
|
288
|
-
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast';
|
|
289
|
-
const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart';
|
|
290
|
-
const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove';
|
|
291
|
-
const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
|
|
292
|
-
const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd';
|
|
293
|
-
const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
294
|
-
const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props;
|
|
295
|
-
const [open = true, setOpen] = index.$71cd76cc60e0454e$export$6f32135080cb4c3({
|
|
296
|
-
prop: openProp,
|
|
297
|
-
defaultProp: defaultOpen,
|
|
298
|
-
onChange: onOpenChange
|
|
299
|
-
});
|
|
300
|
-
return /*#__PURE__*/ React.createElement(index.$921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
301
|
-
present: forceMount || open
|
|
302
|
-
}, /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastImpl, _extends._extends({
|
|
303
|
-
open: open
|
|
304
|
-
}, toastProps, {
|
|
305
|
-
ref: forwardedRef,
|
|
306
|
-
onClose: ()=>setOpen(false)
|
|
307
|
-
,
|
|
308
|
-
onPause: index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(props.onPause),
|
|
309
|
-
onResume: index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(props.onResume),
|
|
310
|
-
onSwipeStart: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeStart, (event)=>{
|
|
311
|
-
event.currentTarget.setAttribute('data-swipe', 'start');
|
|
312
|
-
}),
|
|
313
|
-
onSwipeMove: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeMove, (event)=>{
|
|
314
|
-
const { x: x , y: 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: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(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: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onSwipeEnd, (event)=>{
|
|
327
|
-
const { x: x , y: 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
|
-
/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, {
|
|
338
|
-
onClose () {}
|
|
339
|
-
});
|
|
340
|
-
const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
341
|
-
const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onPause: onPause , onResume: onResume , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
|
|
342
|
-
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
|
|
343
|
-
const [node1, setNode] = React.useState(null);
|
|
344
|
-
const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
|
|
345
|
-
);
|
|
346
|
-
const pointerStartRef = React.useRef(null);
|
|
347
|
-
const swipeDeltaRef = React.useRef(null);
|
|
348
|
-
const duration1 = durationProp || context.duration;
|
|
349
|
-
const closeTimerStartTimeRef = React.useRef(0);
|
|
350
|
-
const closeTimerRemainingTimeRef = React.useRef(duration1);
|
|
351
|
-
const closeTimerRef = React.useRef(0);
|
|
352
|
-
const { onToastAdd: onToastAdd , onToastRemove: onToastRemove } = context;
|
|
353
|
-
const handleClose = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(()=>{
|
|
354
|
-
var _context$viewport2;
|
|
355
|
-
// focus viewport if focus is within toast to read the remaining toast
|
|
356
|
-
// count to SR users and ensure focus isn't lost
|
|
357
|
-
const isFocusInToast = node1 === null || node1 === void 0 ? void 0 : node1.contains(document.activeElement);
|
|
358
|
-
if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
|
|
359
|
-
onClose();
|
|
360
|
-
});
|
|
361
|
-
const startTimer = React.useCallback((duration)=>{
|
|
362
|
-
if (!duration || duration === Infinity) return;
|
|
363
|
-
window.clearTimeout(closeTimerRef.current);
|
|
364
|
-
closeTimerStartTimeRef.current = new Date().getTime();
|
|
365
|
-
closeTimerRef.current = window.setTimeout(handleClose, duration);
|
|
366
|
-
}, [
|
|
367
|
-
handleClose
|
|
368
|
-
]);
|
|
369
|
-
React.useEffect(()=>{
|
|
370
|
-
const viewport = context.viewport;
|
|
371
|
-
if (viewport) {
|
|
372
|
-
const handleResume = ()=>{
|
|
373
|
-
startTimer(closeTimerRemainingTimeRef.current);
|
|
374
|
-
onResume === null || onResume === void 0 || onResume();
|
|
375
|
-
};
|
|
376
|
-
const handlePause = ()=>{
|
|
377
|
-
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
|
|
378
|
-
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
379
|
-
window.clearTimeout(closeTimerRef.current);
|
|
380
|
-
onPause === null || onPause === void 0 || onPause();
|
|
381
|
-
};
|
|
382
|
-
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
383
|
-
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
384
|
-
return ()=>{
|
|
385
|
-
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause);
|
|
386
|
-
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume);
|
|
387
|
-
};
|
|
388
|
-
}
|
|
389
|
-
}, [
|
|
390
|
-
context.viewport,
|
|
391
|
-
duration1,
|
|
392
|
-
onPause,
|
|
393
|
-
onResume,
|
|
394
|
-
startTimer
|
|
395
|
-
]); // start timer when toast opens or duration changes.
|
|
396
|
-
// we include `open` in deps because closed !== unmounted when animating
|
|
397
|
-
// so it could reopen before being completely unmounted
|
|
398
|
-
React.useEffect(()=>{
|
|
399
|
-
if (open && !context.isClosePausedRef.current) startTimer(duration1);
|
|
400
|
-
}, [
|
|
401
|
-
open,
|
|
402
|
-
duration1,
|
|
403
|
-
context.isClosePausedRef,
|
|
404
|
-
startTimer
|
|
405
|
-
]);
|
|
406
|
-
React.useEffect(()=>{
|
|
407
|
-
onToastAdd();
|
|
408
|
-
return ()=>onToastRemove()
|
|
409
|
-
;
|
|
410
|
-
}, [
|
|
411
|
-
onToastAdd,
|
|
412
|
-
onToastRemove
|
|
413
|
-
]);
|
|
414
|
-
const announceTextContent = React.useMemo(()=>{
|
|
415
|
-
return node1 ? $054eb8030ebde76e$var$getAnnounceTextContent(node1) : null;
|
|
416
|
-
}, [
|
|
417
|
-
node1
|
|
418
|
-
]);
|
|
419
|
-
if (!context.viewport) return null;
|
|
420
|
-
return /*#__PURE__*/ React.createElement(React.Fragment, null, announceTextContent && /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastAnnounce, {
|
|
421
|
-
__scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
|
|
422
|
-
,
|
|
423
|
-
role: "status",
|
|
424
|
-
"aria-live": type === 'foreground' ? 'assertive' : 'polite',
|
|
425
|
-
"aria-atomic": true
|
|
426
|
-
}, announceTextContent), /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastInteractiveProvider, {
|
|
427
|
-
scope: __scopeToast,
|
|
428
|
-
onClose: handleClose
|
|
429
|
-
}, /*#__PURE__*/ $7SXl2$reactdom.createPortal(/*#__PURE__*/ React.createElement($054eb8030ebde76e$var$Collection.ItemSlot, {
|
|
430
|
-
scope: __scopeToast
|
|
431
|
-
}, /*#__PURE__*/ React.createElement(index$2.$5cb92bef7577960e$export$be92b6f5f03c0fe9, {
|
|
432
|
-
asChild: true,
|
|
433
|
-
onEscapeKeyDown: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(onEscapeKeyDown, ()=>{
|
|
434
|
-
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
435
|
-
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
436
|
-
})
|
|
437
|
-
}, /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.li, _extends._extends({
|
|
438
|
-
// Ensure toasts are announced as status list or status when focused
|
|
439
|
-
role: "status",
|
|
440
|
-
"aria-live": "off",
|
|
441
|
-
"aria-atomic": true,
|
|
442
|
-
tabIndex: 0,
|
|
443
|
-
"data-state": open ? 'open' : 'closed',
|
|
444
|
-
"data-swipe-direction": context.swipeDirection
|
|
445
|
-
}, toastProps, {
|
|
446
|
-
ref: composedRefs,
|
|
447
|
-
style: {
|
|
448
|
-
userSelect: 'none',
|
|
449
|
-
touchAction: 'none',
|
|
450
|
-
...props.style
|
|
451
|
-
},
|
|
452
|
-
onKeyDown: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
|
|
453
|
-
if (event.key !== 'Escape') return;
|
|
454
|
-
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent);
|
|
455
|
-
if (!event.nativeEvent.defaultPrevented) {
|
|
456
|
-
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
457
|
-
handleClose();
|
|
458
|
-
}
|
|
459
|
-
}),
|
|
460
|
-
onPointerDown: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{
|
|
461
|
-
if (event.button !== 0) return;
|
|
462
|
-
pointerStartRef.current = {
|
|
463
|
-
x: event.clientX,
|
|
464
|
-
y: event.clientY
|
|
465
|
-
};
|
|
466
|
-
}),
|
|
467
|
-
onPointerMove: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, (event)=>{
|
|
468
|
-
if (!pointerStartRef.current) return;
|
|
469
|
-
const x = event.clientX - pointerStartRef.current.x;
|
|
470
|
-
const y = event.clientY - pointerStartRef.current.y;
|
|
471
|
-
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
472
|
-
const isHorizontalSwipe = [
|
|
473
|
-
'left',
|
|
474
|
-
'right'
|
|
475
|
-
].includes(context.swipeDirection);
|
|
476
|
-
const clamp = [
|
|
477
|
-
'left',
|
|
478
|
-
'up'
|
|
479
|
-
].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
480
|
-
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
481
|
-
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
482
|
-
const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
|
|
483
|
-
const delta = {
|
|
484
|
-
x: clampedX,
|
|
485
|
-
y: clampedY
|
|
486
|
-
};
|
|
487
|
-
const eventDetail = {
|
|
488
|
-
originalEvent: event,
|
|
489
|
-
delta: delta
|
|
490
|
-
};
|
|
491
|
-
if (hasSwipeMoveStarted) {
|
|
492
|
-
swipeDeltaRef.current = delta;
|
|
493
|
-
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
494
|
-
discrete: false
|
|
495
|
-
});
|
|
496
|
-
} else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
497
|
-
swipeDeltaRef.current = delta;
|
|
498
|
-
$054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
499
|
-
discrete: false
|
|
500
|
-
});
|
|
501
|
-
event.target.setPointerCapture(event.pointerId);
|
|
502
|
-
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture
|
|
503
|
-
// for the current pointer down interaction
|
|
504
|
-
pointerStartRef.current = null;
|
|
505
|
-
}),
|
|
506
|
-
onPointerUp: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event1)=>{
|
|
507
|
-
const delta = swipeDeltaRef.current;
|
|
508
|
-
const target = event1.target;
|
|
509
|
-
if (target.hasPointerCapture(event1.pointerId)) target.releasePointerCapture(event1.pointerId);
|
|
510
|
-
swipeDeltaRef.current = null;
|
|
511
|
-
pointerStartRef.current = null;
|
|
512
|
-
if (delta) {
|
|
513
|
-
const toast = event1.currentTarget;
|
|
514
|
-
const eventDetail = {
|
|
515
|
-
originalEvent: event1,
|
|
516
|
-
delta: delta
|
|
517
|
-
};
|
|
518
|
-
if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
519
|
-
discrete: true
|
|
520
|
-
});
|
|
521
|
-
else $054eb8030ebde76e$var$handleAndDispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
|
|
522
|
-
discrete: true
|
|
523
|
-
});
|
|
524
|
-
// Prevent click event from triggering on items within the toast when
|
|
525
|
-
// pointer up is part of a swipe gesture
|
|
526
|
-
toast.addEventListener('click', (event)=>event.preventDefault()
|
|
527
|
-
, {
|
|
528
|
-
once: true
|
|
529
|
-
});
|
|
530
|
-
}
|
|
531
|
-
})
|
|
532
|
-
})))), context.viewport)));
|
|
533
|
-
});
|
|
534
|
-
$054eb8030ebde76e$var$ToastImpl.propTypes = {
|
|
535
|
-
type (props) {
|
|
536
|
-
if (props.type && ![
|
|
537
|
-
'foreground',
|
|
538
|
-
'background'
|
|
539
|
-
].includes(props.type)) {
|
|
540
|
-
const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
541
|
-
return new Error(error);
|
|
542
|
-
}
|
|
543
|
-
return null;
|
|
544
|
-
}
|
|
545
|
-
};
|
|
546
|
-
/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{
|
|
547
|
-
const { __scopeToast: __scopeToast , children: children , ...announceProps } = props;
|
|
548
|
-
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast);
|
|
549
|
-
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
550
|
-
const [isAnnounced, setIsAnnounced] = React.useState(false); // render text content in the next frame to ensure toast is announced in NVDA
|
|
551
|
-
$054eb8030ebde76e$var$useNextFrame(()=>setRenderAnnounceText(true)
|
|
552
|
-
); // cleanup after announcing
|
|
553
|
-
React.useEffect(()=>{
|
|
554
|
-
const timer = window.setTimeout(()=>setIsAnnounced(true)
|
|
555
|
-
, 1000);
|
|
556
|
-
return ()=>window.clearTimeout(timer)
|
|
557
|
-
;
|
|
558
|
-
}, []);
|
|
559
|
-
return isAnnounced ? null : /*#__PURE__*/ React.createElement(index$2.$f1701beae083dbae$export$602eac185826482c, {
|
|
560
|
-
asChild: true
|
|
561
|
-
}, /*#__PURE__*/ React.createElement($ea1ef594cf570d83$export$439d29a4e110a164, announceProps, renderAnnounceText && /*#__PURE__*/ React.createElement(React.Fragment, null, context.label, " ", children)));
|
|
562
|
-
};
|
|
563
|
-
const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
564
|
-
const { __scopeToast: __scopeToast , ...titleProps } = props;
|
|
565
|
-
return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, titleProps, {
|
|
566
|
-
ref: forwardedRef
|
|
567
|
-
}));
|
|
568
|
-
});
|
|
569
|
-
/* -------------------------------------------------------------------------------------------------
|
|
570
|
-
* ToastAction
|
|
571
|
-
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction';
|
|
572
|
-
const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
573
|
-
const { altText: altText , ...actionProps } = props;
|
|
574
|
-
if (!altText) return null;
|
|
575
|
-
return /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
|
|
576
|
-
altText: altText,
|
|
577
|
-
asChild: true
|
|
578
|
-
}, /*#__PURE__*/ React.createElement($054eb8030ebde76e$export$811e70f61c205839, _extends._extends({}, actionProps, {
|
|
579
|
-
ref: forwardedRef
|
|
580
|
-
})));
|
|
581
|
-
});
|
|
582
|
-
$054eb8030ebde76e$export$3019feecfda683d2.propTypes = {
|
|
583
|
-
altText (props) {
|
|
584
|
-
if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``);
|
|
585
|
-
return null;
|
|
586
|
-
}
|
|
587
|
-
};
|
|
588
|
-
/* -------------------------------------------------------------------------------------------------
|
|
589
|
-
* ToastClose
|
|
590
|
-
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose';
|
|
591
|
-
const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
592
|
-
const { __scopeToast: __scopeToast , ...closeProps } = props;
|
|
593
|
-
const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast);
|
|
594
|
-
return /*#__PURE__*/ React.createElement($054eb8030ebde76e$var$ToastAnnounceExclude, {
|
|
595
|
-
asChild: true
|
|
596
|
-
}, /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends._extends({
|
|
597
|
-
type: "button"
|
|
598
|
-
}, closeProps, {
|
|
599
|
-
ref: forwardedRef,
|
|
600
|
-
onClick: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, interactiveContext.onClose)
|
|
601
|
-
})));
|
|
602
|
-
});
|
|
603
|
-
/* ---------------------------------------------------------------------------------------------- */ const $054eb8030ebde76e$var$ToastAnnounceExclude = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
604
|
-
const { __scopeToast: __scopeToast , altText: altText , ...announceExcludeProps } = props;
|
|
605
|
-
return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
|
|
606
|
-
"data-radix-toast-announce-exclude": "",
|
|
607
|
-
"data-radix-toast-announce-alt": altText || undefined
|
|
608
|
-
}, announceExcludeProps, {
|
|
609
|
-
ref: forwardedRef
|
|
610
|
-
}));
|
|
611
|
-
});
|
|
612
|
-
function $054eb8030ebde76e$var$getAnnounceTextContent(container) {
|
|
613
|
-
const textContent = [];
|
|
614
|
-
const childNodes = Array.from(container.childNodes);
|
|
615
|
-
childNodes.forEach((node)=>{
|
|
616
|
-
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
|
|
617
|
-
if ($054eb8030ebde76e$var$isHTMLElement(node)) {
|
|
618
|
-
const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';
|
|
619
|
-
const isExcluded = node.dataset.radixToastAnnounceExclude === '';
|
|
620
|
-
if (!isHidden) {
|
|
621
|
-
if (isExcluded) {
|
|
622
|
-
const altText = node.dataset.radixToastAnnounceAlt;
|
|
623
|
-
if (altText) textContent.push(altText);
|
|
624
|
-
} else textContent.push(...$054eb8030ebde76e$var$getAnnounceTextContent(node));
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
}); // We return a collection of text rather than a single concatenated string.
|
|
628
|
-
// This allows SR VO to naturally pause break between nodes while announcing.
|
|
629
|
-
return textContent;
|
|
630
|
-
}
|
|
631
|
-
/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
|
|
632
|
-
const currentTarget = detail.originalEvent.currentTarget;
|
|
633
|
-
const event = new CustomEvent(name, {
|
|
634
|
-
bubbles: true,
|
|
635
|
-
cancelable: true,
|
|
636
|
-
detail: detail
|
|
637
|
-
});
|
|
638
|
-
if (handler) currentTarget.addEventListener(name, handler, {
|
|
639
|
-
once: true
|
|
640
|
-
});
|
|
641
|
-
if (discrete) index.$8927f6f2acc4f386$export$6d1a0317bde7de7f(currentTarget, event);
|
|
642
|
-
else currentTarget.dispatchEvent(event);
|
|
643
|
-
}
|
|
644
|
-
const $054eb8030ebde76e$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') return isDeltaX && deltaX > threshold;
|
|
649
|
-
else return !isDeltaX && deltaY > threshold;
|
|
650
|
-
};
|
|
651
|
-
function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) {
|
|
652
|
-
const fn = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback);
|
|
653
|
-
$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
|
|
654
|
-
let raf1 = 0;
|
|
655
|
-
let raf2 = 0;
|
|
656
|
-
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn)
|
|
657
|
-
);
|
|
658
|
-
return ()=>{
|
|
659
|
-
window.cancelAnimationFrame(raf1);
|
|
660
|
-
window.cancelAnimationFrame(raf2);
|
|
661
|
-
};
|
|
662
|
-
}, [
|
|
663
|
-
fn
|
|
664
|
-
]);
|
|
665
|
-
}
|
|
666
|
-
function $054eb8030ebde76e$var$isHTMLElement(node) {
|
|
667
|
-
return node.nodeType === node.ELEMENT_NODE;
|
|
668
|
-
}
|
|
669
|
-
/**
|
|
670
|
-
* Returns a list of potential tabbable candidates.
|
|
671
|
-
*
|
|
672
|
-
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
|
|
673
|
-
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
|
|
674
|
-
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
|
|
675
|
-
*
|
|
676
|
-
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
|
|
677
|
-
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
|
|
678
|
-
*/ function $054eb8030ebde76e$var$getTabbableCandidates(container) {
|
|
679
|
-
const nodes = [];
|
|
680
|
-
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
681
|
-
acceptNode: (node)=>{
|
|
682
|
-
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
|
|
683
|
-
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
|
|
684
|
-
// runtime's understanding of tabbability, so this automatically accounts
|
|
685
|
-
// for any kind of element that could be tabbed to.
|
|
686
|
-
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
687
|
-
}
|
|
688
|
-
});
|
|
689
|
-
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
|
|
690
|
-
// hinders accessibility to have tab order different from visual order.
|
|
691
|
-
return nodes;
|
|
692
|
-
}
|
|
693
|
-
function $054eb8030ebde76e$var$focusFirst(candidates) {
|
|
694
|
-
const previouslyFocusedElement = document.activeElement;
|
|
695
|
-
return candidates.some((candidate)=>{
|
|
696
|
-
// if focus is already where we want to go, we don't want to keep going through the candidates
|
|
697
|
-
if (candidate === previouslyFocusedElement) return true;
|
|
698
|
-
candidate.focus();
|
|
699
|
-
return document.activeElement !== previouslyFocusedElement;
|
|
700
|
-
});
|
|
701
|
-
}
|
|
702
|
-
const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e;
|
|
703
|
-
const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989;
|
|
704
|
-
const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b;
|
|
705
|
-
const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4;
|
|
706
|
-
const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2;
|
|
707
|
-
const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839;
|
|
708
|
-
|
|
709
|
-
var ToastNotification = function (_a) {
|
|
710
|
-
var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = filterDataAttrs.__rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
|
|
711
|
-
var statusIcons = {
|
|
712
|
-
general: BtIconTick.BtIconNotification_2,
|
|
713
|
-
error: BtIconTick.BtIconAlertTriangle_2,
|
|
714
|
-
warning: BtIconAlert.BtIconAlert_2,
|
|
715
|
-
success: BtIconTick.BtIconTick_2
|
|
716
|
-
};
|
|
717
|
-
var handleLinkClick = function (handler) { return function (event) {
|
|
718
|
-
event.preventDefault();
|
|
719
|
-
handler();
|
|
720
|
-
}; };
|
|
721
|
-
return (React__default["default"].createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, filterDataAttrs.__assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, filterDataAttrs.filterDataAttrs(props)),
|
|
722
|
-
React__default["default"].createElement("div", { "data-testid": "toast-notification-wrapper", className: index$3.classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
|
|
723
|
-
isStatusIconVisible && (React__default["default"].createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
|
|
724
|
-
React__default["default"].createElement(Icon.Icon, { size: 24, icon: statusIcons[status] }))),
|
|
725
|
-
React__default["default"].createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
|
|
726
|
-
React__default["default"].createElement("span", null, title)),
|
|
727
|
-
link && (React__default["default"].createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
|
|
728
|
-
React__default["default"].createElement("a", filterDataAttrs.__assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
|
|
729
|
-
isCloseButtonVisible && !link && (React__default["default"].createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
|
|
730
|
-
React__default["default"].createElement(Icon.Icon, { icon: BtIconCrossAlt2Px.BtIconCrossAlt2Px_2, size: 24 }))))));
|
|
731
|
-
};
|
|
732
|
-
|
|
733
|
-
/** Use `Toast` to display temporary messages at the bottom of the viewport. */
|
|
734
|
-
var Toast = function (_a) {
|
|
735
|
-
var children = _a.children, _b = _a.pathway, pathway = _b === void 0 ? "light" : _b, props = filterDataAttrs.__rest(_a, ["children", "pathway"]);
|
|
736
|
-
return (React__default["default"].createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
|
|
737
|
-
React__default["default"].createElement($054eb8030ebde76e$export$d5c6c08dc2d3ca7, { asChild: true, className: "arc-Toast-viewport" },
|
|
738
|
-
React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-Toast-pathway--".concat(pathway) }, filterDataAttrs.filterDataAttrs(props)), children))));
|
|
739
|
-
};
|
|
740
|
-
Toast.Notification = ToastNotification;
|
|
741
|
-
ToastNotification.displayName = "Toast.Notification";
|
|
742
|
-
|
|
743
|
-
exports.Toast = Toast;
|
|
23
|
+
exports.Toast = Toast.Toast;
|