@arc-ui/components 11.24.2 → 11.26.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.
Files changed (67) hide show
  1. package/dist/Button/Button.cjs.js +1 -1
  2. package/dist/Button/Button.esm.js +1 -1
  3. package/dist/DatePicker/DatePicker.cjs.js +1276 -22
  4. package/dist/DatePicker/DatePicker.esm.js +1245 -10
  5. package/dist/InformationCard/InformationCard.cjs.js +1 -1
  6. package/dist/InformationCard/InformationCard.esm.js +1 -1
  7. package/dist/Modal/Modal.cjs.js +438 -225
  8. package/dist/Modal/Modal.esm.js +420 -225
  9. package/dist/PaginationSimple/PaginationSimple.cjs.js +23 -2
  10. package/dist/PaginationSimple/PaginationSimple.esm.js +23 -2
  11. package/dist/Select/Select.cjs.js +1514 -1065
  12. package/dist/Select/Select.esm.js +1496 -1066
  13. package/dist/SiteHeader/SiteHeader.cjs.js +2 -2
  14. package/dist/SiteHeader/SiteHeader.esm.js +2 -2
  15. package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +2 -2
  16. package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +2 -2
  17. package/dist/Tabs/Tabs.cjs.js +4 -6
  18. package/dist/Tabs/Tabs.esm.js +4 -6
  19. package/dist/TextArea/TextArea.cjs.js +10 -13
  20. package/dist/TextArea/TextArea.esm.js +10 -13
  21. package/dist/Toast/Toast.cjs.js +4 -6
  22. package/dist/Toast/Toast.esm.js +4 -6
  23. package/dist/UniversalHeader/UniversalHeader.cjs.js +2 -2
  24. package/dist/UniversalHeader/UniversalHeader.esm.js +2 -2
  25. package/dist/_shared/cjs/{Button-6ba21d3b.js → Button-5b28f0ce.js} +3 -3
  26. package/dist/_shared/cjs/{SiteHeader.rehydrator-9d8f3dad.js → SiteHeader.rehydrator-8fa9d174.js} +1 -1
  27. package/dist/_shared/cjs/{SiteHeaderV2-ce1c8737.js → SiteHeaderV2-ca2f13a8.js} +1 -1
  28. package/dist/_shared/cjs/{Tabs-bc9fac46.js → Tabs-89455281.js} +19 -15
  29. package/dist/_shared/cjs/{Toast-26207fef.js → Toast-c760c89d.js} +32 -14
  30. package/dist/_shared/cjs/{UniversalHeader-b8389447.js → UniversalHeader-73e154eb.js} +6 -2
  31. package/dist/_shared/cjs/component-4979b2e7.js +409 -0
  32. package/dist/_shared/cjs/{index-77ab5c6a.js → floating-ui.react-dom-08b8b87c.js} +12 -284
  33. package/dist/_shared/cjs/index-1efbba95.js +1252 -0
  34. package/dist/_shared/cjs/{index-74004a9c.js → index-4edec793.js} +1 -1
  35. package/dist/_shared/cjs/{index-dd1d18ea.js → index-7641213c.js} +127 -2
  36. package/dist/_shared/cjs/{index-9f99d686.js → index-af744fa9.js} +1 -1
  37. package/dist/_shared/cjs/{index-6eb396a3.js → index-fb0cad18.js} +1 -1
  38. package/dist/_shared/esm/{Button-a7d134c6.js → Button-5b48b7ce.js} +3 -3
  39. package/dist/_shared/esm/{SiteHeader.rehydrator-2ec02ee7.js → SiteHeader.rehydrator-8f3c5d6e.js} +1 -1
  40. package/dist/_shared/esm/{SiteHeaderV2-a7c1b1cb.js → SiteHeaderV2-cb081752.js} +1 -1
  41. package/dist/_shared/esm/{Tabs-9485cab6.js → Tabs-959e885d.js} +10 -6
  42. package/dist/_shared/esm/{Toast-fcbfc194.js → Toast-a590067d.js} +25 -7
  43. package/dist/_shared/esm/{UniversalHeader-80c7313f.js → UniversalHeader-96bfbacc.js} +6 -2
  44. package/dist/_shared/esm/component-d7b471ff.js +382 -0
  45. package/dist/_shared/esm/{index-b84a20c6.js → floating-ui.react-dom-1bb71aae.js} +4 -281
  46. package/dist/_shared/esm/{index-7b531fa7.js → index-0ae23b06.js} +126 -2
  47. package/dist/_shared/esm/index-307f1bbc.js +1212 -0
  48. package/dist/_shared/esm/{index-044da8d0.js → index-9e54cc7d.js} +1 -1
  49. package/dist/_shared/esm/{index-efa9be1a.js → index-af7b6e55.js} +1 -1
  50. package/dist/_shared/esm/{index-2cfab9f2.js → index-ebe72f34.js} +1 -1
  51. package/dist/index.es.js +3608 -2938
  52. package/dist/index.es.js.map +1 -1
  53. package/dist/index.js +3591 -2921
  54. package/dist/index.js.map +1 -1
  55. package/dist/styles.css +2 -2
  56. package/dist/types/components/Button/Button.d.ts +12 -0
  57. package/dist/types/components/PaginationSimple/PaginationSimple.d.ts +28 -0
  58. package/dist/types/components/UniversalHeader/UniversalHeader.d.ts +4 -0
  59. package/package.json +3 -3
  60. package/dist/_shared/cjs/Combination-9974f2e2.js +0 -1330
  61. package/dist/_shared/cjs/index-a31e64a9.js +0 -27
  62. package/dist/_shared/cjs/index-d38f1bd0.js +0 -131
  63. package/dist/_shared/cjs/index-dcfdd5da.js +0 -11
  64. package/dist/_shared/esm/Combination-e9f7e64e.js +0 -1301
  65. package/dist/_shared/esm/index-25a5b393.js +0 -25
  66. package/dist/_shared/esm/index-a624de47.js +0 -9
  67. package/dist/_shared/esm/index-ca72c9d5.js +0 -129
@@ -1,1330 +0,0 @@
1
- 'use strict';
2
-
3
- var _extends = require('./extends-8c5e4b48.js');
4
- var React = require('react');
5
- var index = require('./index-dd1d18ea.js');
6
- var index$1 = require('./index-74004a9c.js');
7
- var $7SXl2$reactdom = require('react-dom');
8
- var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- function _interopNamespace(e) {
13
- if (e && e.__esModule) return e;
14
- var n = Object.create(null);
15
- if (e) {
16
- Object.keys(e).forEach(function (k) {
17
- if (k !== 'default') {
18
- var d = Object.getOwnPropertyDescriptor(e, k);
19
- Object.defineProperty(n, k, d.get ? d : {
20
- enumerable: true,
21
- get: function () { return e[k]; }
22
- });
23
- }
24
- });
25
- }
26
- n["default"] = e;
27
- return Object.freeze(n);
28
- }
29
-
30
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
31
- var $7SXl2$reactdom__default = /*#__PURE__*/_interopDefaultLegacy($7SXl2$reactdom);
32
-
33
- const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
34
- const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
35
- const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
36
- let $5cb92bef7577960e$var$originalBodyPointerEvents;
37
- const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ React.createContext({
38
- layers: new Set(),
39
- layersWithOutsidePointerEventsDisabled: new Set(),
40
- branches: new Set()
41
- });
42
- const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
43
- var _node$ownerDocument;
44
- const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
45
- const context = React.useContext($5cb92bef7577960e$var$DismissableLayerContext);
46
- const [node1, setNode] = React.useState(null);
47
- const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
48
- const [, force] = React.useState({});
49
- const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
50
- );
51
- const layers = Array.from(context.layers);
52
- const [highestLayerWithOutsidePointerEventsDisabled] = [
53
- ...context.layersWithOutsidePointerEventsDisabled
54
- ].slice(-1); // prettier-ignore
55
- const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
56
- const index$2 = node1 ? layers.indexOf(node1) : -1;
57
- const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
58
- const isPointerEventsEnabled = index$2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
59
- const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
60
- const target = event.target;
61
- const isPointerDownOnBranch = [
62
- ...context.branches
63
- ].some((branch)=>branch.contains(target)
64
- );
65
- if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
66
- onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
67
- onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
68
- if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
69
- }, ownerDocument);
70
- const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
71
- const target = event.target;
72
- const isFocusInBranch = [
73
- ...context.branches
74
- ].some((branch)=>branch.contains(target)
75
- );
76
- if (isFocusInBranch) return;
77
- onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
78
- onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
79
- if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
80
- }, ownerDocument);
81
- index$1.$addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
82
- const isHighestLayer = index$2 === context.layers.size - 1;
83
- if (!isHighestLayer) return;
84
- onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
85
- if (!event.defaultPrevented && onDismiss) {
86
- event.preventDefault();
87
- onDismiss();
88
- }
89
- }, ownerDocument);
90
- React.useEffect(()=>{
91
- if (!node1) return;
92
- if (disableOutsidePointerEvents) {
93
- if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
94
- $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
95
- ownerDocument.body.style.pointerEvents = 'none';
96
- }
97
- context.layersWithOutsidePointerEventsDisabled.add(node1);
98
- }
99
- context.layers.add(node1);
100
- $5cb92bef7577960e$var$dispatchUpdate();
101
- return ()=>{
102
- if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
103
- };
104
- }, [
105
- node1,
106
- ownerDocument,
107
- disableOutsidePointerEvents,
108
- context
109
- ]);
110
- /**
111
- * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
112
- * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
113
- * and add it to the end again so the layering order wouldn't be _creation order_.
114
- * We only want them to be removed from context stacks when unmounted.
115
- */ React.useEffect(()=>{
116
- return ()=>{
117
- if (!node1) return;
118
- context.layers.delete(node1);
119
- context.layersWithOutsidePointerEventsDisabled.delete(node1);
120
- $5cb92bef7577960e$var$dispatchUpdate();
121
- };
122
- }, [
123
- node1,
124
- context
125
- ]);
126
- React.useEffect(()=>{
127
- const handleUpdate = ()=>force({})
128
- ;
129
- document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
130
- return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
131
- ;
132
- }, []);
133
- return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, layerProps, {
134
- ref: composedRefs,
135
- style: {
136
- pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
137
- ...props.style
138
- },
139
- onFocusCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture),
140
- onBlurCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture),
141
- onPointerDownCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
142
- }));
143
- });
144
- /* -----------------------------------------------------------------------------------------------*/ /**
145
- * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
146
- * to mimic layer dismissing behaviour present in OS.
147
- * Returns props to pass to the node we want to check for outside events.
148
- */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
149
- const handlePointerDownOutside = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
150
- const isPointerInsideReactTreeRef = React.useRef(false);
151
- const handleClickRef = React.useRef(()=>{});
152
- React.useEffect(()=>{
153
- const handlePointerDown = (event)=>{
154
- if (event.target && !isPointerInsideReactTreeRef.current) {
155
- const eventDetail = {
156
- originalEvent: event
157
- };
158
- function handleAndDispatchPointerDownOutsideEvent() {
159
- $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
160
- discrete: true
161
- });
162
- }
163
- /**
164
- * On touch devices, we need to wait for a click event because browsers implement
165
- * a ~350ms delay between the time the user stops touching the display and when the
166
- * browser executres events. We need to ensure we don't reactivate pointer-events within
167
- * this timeframe otherwise the browser may execute events that should have been prevented.
168
- *
169
- * Additionally, this also lets us deal automatically with cancellations when a click event
170
- * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
171
- *
172
- * This is why we also continuously remove the previous listener, because we cannot be
173
- * certain that it was raised, and therefore cleaned-up.
174
- */ if (event.pointerType === 'touch') {
175
- ownerDocument.removeEventListener('click', handleClickRef.current);
176
- handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
177
- ownerDocument.addEventListener('click', handleClickRef.current, {
178
- once: true
179
- });
180
- } else handleAndDispatchPointerDownOutsideEvent();
181
- } else // We need to remove the event listener in case the outside click has been canceled.
182
- // See: https://github.com/radix-ui/primitives/issues/2171
183
- ownerDocument.removeEventListener('click', handleClickRef.current);
184
- isPointerInsideReactTreeRef.current = false;
185
- };
186
- /**
187
- * if this hook executes in a component that mounts via a `pointerdown` event, the event
188
- * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
189
- * this by delaying the event listener registration on the document.
190
- * This is not React specific, but rather how the DOM works, ie:
191
- * ```
192
- * button.addEventListener('pointerdown', () => {
193
- * console.log('I will log');
194
- * document.addEventListener('pointerdown', () => {
195
- * console.log('I will also log');
196
- * })
197
- * });
198
- */ const timerId = window.setTimeout(()=>{
199
- ownerDocument.addEventListener('pointerdown', handlePointerDown);
200
- }, 0);
201
- return ()=>{
202
- window.clearTimeout(timerId);
203
- ownerDocument.removeEventListener('pointerdown', handlePointerDown);
204
- ownerDocument.removeEventListener('click', handleClickRef.current);
205
- };
206
- }, [
207
- ownerDocument,
208
- handlePointerDownOutside
209
- ]);
210
- return {
211
- // ensures we check React component tree (not just DOM tree)
212
- onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
213
- };
214
- }
215
- /**
216
- * Listens for when focus happens outside a react subtree.
217
- * Returns props to pass to the root (node) of the subtree we want to check.
218
- */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
219
- const handleFocusOutside = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
220
- const isFocusInsideReactTreeRef = React.useRef(false);
221
- React.useEffect(()=>{
222
- const handleFocus = (event)=>{
223
- if (event.target && !isFocusInsideReactTreeRef.current) {
224
- const eventDetail = {
225
- originalEvent: event
226
- };
227
- $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
228
- discrete: false
229
- });
230
- }
231
- };
232
- ownerDocument.addEventListener('focusin', handleFocus);
233
- return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
234
- ;
235
- }, [
236
- ownerDocument,
237
- handleFocusOutside
238
- ]);
239
- return {
240
- onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
241
- ,
242
- onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
243
- };
244
- }
245
- function $5cb92bef7577960e$var$dispatchUpdate() {
246
- const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
247
- document.dispatchEvent(event);
248
- }
249
- function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
250
- const target = detail.originalEvent.target;
251
- const event = new CustomEvent(name, {
252
- bubbles: false,
253
- cancelable: true,
254
- detail: detail
255
- });
256
- if (handler) target.addEventListener(name, handler, {
257
- once: true
258
- });
259
- if (discrete) index.$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
260
- else target.dispatchEvent(event);
261
- }
262
-
263
- /** Number of components which have requested interest to have focus guards */ let $3db38b7d1fb3fe6a$var$count = 0;
264
- /**
265
- * Injects a pair of focus guards at the edges of the whole DOM tree
266
- * to ensure `focusin` & `focusout` events can be caught consistently.
267
- */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
268
- React.useEffect(()=>{
269
- var _edgeGuards$, _edgeGuards$2;
270
- const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
271
- document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
272
- document.body.insertAdjacentElement('beforeend', (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard());
273
- $3db38b7d1fb3fe6a$var$count++;
274
- return ()=>{
275
- if ($3db38b7d1fb3fe6a$var$count === 1) document.querySelectorAll('[data-radix-focus-guard]').forEach((node)=>node.remove()
276
- );
277
- $3db38b7d1fb3fe6a$var$count--;
278
- };
279
- }, []);
280
- }
281
- function $3db38b7d1fb3fe6a$var$createFocusGuard() {
282
- const element = document.createElement('span');
283
- element.setAttribute('data-radix-focus-guard', '');
284
- element.tabIndex = 0;
285
- element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';
286
- return element;
287
- }
288
-
289
- const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
290
- const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
291
- const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
292
- bubbles: false,
293
- cancelable: true
294
- };
295
- const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
296
- const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
297
- const [container1, setContainer] = React.useState(null);
298
- const onMountAutoFocus = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp);
299
- const onUnmountAutoFocus = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp);
300
- const lastFocusedElementRef = React.useRef(null);
301
- const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContainer(node)
302
- );
303
- const focusScope = React.useRef({
304
- paused: false,
305
- pause () {
306
- this.paused = true;
307
- },
308
- resume () {
309
- this.paused = false;
310
- }
311
- }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
312
- React.useEffect(()=>{
313
- if (trapped) {
314
- function handleFocusIn(event) {
315
- if (focusScope.paused || !container1) return;
316
- const target = event.target;
317
- if (container1.contains(target)) lastFocusedElementRef.current = target;
318
- else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
319
- select: true
320
- });
321
- }
322
- function handleFocusOut(event) {
323
- if (focusScope.paused || !container1) return;
324
- const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
325
- //
326
- // 1. When the user switches app/tabs/windows/the browser itself loses focus.
327
- // 2. In Google Chrome, when the focused element is removed from the DOM.
328
- //
329
- // We let the browser do its thing here because:
330
- //
331
- // 1. The browser already keeps a memory of what's focused for when the page gets refocused.
332
- // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
333
- // throws the CPU to 100%, so we avoid doing anything for this reason here too.
334
- if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
335
- // that is outside the container, we move focus to the last valid focused element inside.
336
- if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
337
- select: true
338
- });
339
- } // When the focused element gets removed from the DOM, browsers move focus
340
- // back to the document.body. In this case, we move focus to the container
341
- // to keep focus trapped correctly.
342
- function handleMutations(mutations) {
343
- const focusedElement = document.activeElement;
344
- if (focusedElement !== document.body) return;
345
- for (const mutation of mutations)if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
346
- }
347
- document.addEventListener('focusin', handleFocusIn);
348
- document.addEventListener('focusout', handleFocusOut);
349
- const mutationObserver = new MutationObserver(handleMutations);
350
- if (container1) mutationObserver.observe(container1, {
351
- childList: true,
352
- subtree: true
353
- });
354
- return ()=>{
355
- document.removeEventListener('focusin', handleFocusIn);
356
- document.removeEventListener('focusout', handleFocusOut);
357
- mutationObserver.disconnect();
358
- };
359
- }
360
- }, [
361
- trapped,
362
- container1,
363
- focusScope.paused
364
- ]);
365
- React.useEffect(()=>{
366
- if (container1) {
367
- $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
368
- const previouslyFocusedElement = document.activeElement;
369
- const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
370
- if (!hasFocusedCandidate) {
371
- const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
372
- container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
373
- container1.dispatchEvent(mountEvent);
374
- if (!mountEvent.defaultPrevented) {
375
- $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
376
- select: true
377
- });
378
- if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
379
- }
380
- }
381
- return ()=>{
382
- container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
383
- // We need to delay the focus a little to get around it for now.
384
- // See: https://github.com/facebook/react/issues/17894
385
- setTimeout(()=>{
386
- const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
387
- container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
388
- container1.dispatchEvent(unmountEvent);
389
- if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
390
- select: true
391
- });
392
- // we need to remove the listener after we `dispatchEvent`
393
- container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
394
- $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
395
- }, 0);
396
- };
397
- }
398
- }, [
399
- container1,
400
- onMountAutoFocus,
401
- onUnmountAutoFocus,
402
- focusScope
403
- ]); // Takes care of looping focus (when tabbing whilst at the edges)
404
- const handleKeyDown = React.useCallback((event)=>{
405
- if (!loop && !trapped) return;
406
- if (focusScope.paused) return;
407
- const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
408
- const focusedElement = document.activeElement;
409
- if (isTabKey && focusedElement) {
410
- const container = event.currentTarget;
411
- const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
412
- const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
413
- if (!hasTabbableElementsInside) {
414
- if (focusedElement === container) event.preventDefault();
415
- } else {
416
- if (!event.shiftKey && focusedElement === last) {
417
- event.preventDefault();
418
- if (loop) $d3863c46a17e8a28$var$focus(first, {
419
- select: true
420
- });
421
- } else if (event.shiftKey && focusedElement === first) {
422
- event.preventDefault();
423
- if (loop) $d3863c46a17e8a28$var$focus(last, {
424
- select: true
425
- });
426
- }
427
- }
428
- }
429
- }, [
430
- loop,
431
- trapped,
432
- focusScope.paused
433
- ]);
434
- return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({
435
- tabIndex: -1
436
- }, scopeProps, {
437
- ref: composedRefs,
438
- onKeyDown: handleKeyDown
439
- }));
440
- });
441
- /* -------------------------------------------------------------------------------------------------
442
- * Utils
443
- * -----------------------------------------------------------------------------------------------*/ /**
444
- * Attempts focusing the first element in a list of candidates.
445
- * Stops when focus has actually moved.
446
- */ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false } = {}) {
447
- const previouslyFocusedElement = document.activeElement;
448
- for (const candidate of candidates){
449
- $d3863c46a17e8a28$var$focus(candidate, {
450
- select: select
451
- });
452
- if (document.activeElement !== previouslyFocusedElement) return;
453
- }
454
- }
455
- /**
456
- * Returns the first and last tabbable elements inside a container.
457
- */ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
458
- const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
459
- const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
460
- const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
461
- return [
462
- first,
463
- last
464
- ];
465
- }
466
- /**
467
- * Returns a list of potential tabbable candidates.
468
- *
469
- * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
470
- * elements are not visible. This cannot be worked out easily by just reading a property, but rather
471
- * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
472
- *
473
- * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
474
- * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
475
- */ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
476
- const nodes = [];
477
- const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
478
- acceptNode: (node)=>{
479
- const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
480
- if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
481
- // runtime's understanding of tabbability, so this automatically accounts
482
- // for any kind of element that could be tabbed to.
483
- return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
484
- }
485
- });
486
- while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
487
- // hinders accessibility to have tab order different from visual order.
488
- return nodes;
489
- }
490
- /**
491
- * Returns the first visible element in a list.
492
- * NOTE: Only checks visibility up to the `container`.
493
- */ function $d3863c46a17e8a28$var$findVisible(elements, container) {
494
- for (const element of elements){
495
- // we stop checking if it's hidden at the `container` level (excluding)
496
- if (!$d3863c46a17e8a28$var$isHidden(element, {
497
- upTo: container
498
- })) return element;
499
- }
500
- }
501
- function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo }) {
502
- if (getComputedStyle(node).visibility === 'hidden') return true;
503
- while(node){
504
- // we stop at `upTo` (excluding it)
505
- if (upTo !== undefined && node === upTo) return false;
506
- if (getComputedStyle(node).display === 'none') return true;
507
- node = node.parentElement;
508
- }
509
- return false;
510
- }
511
- function $d3863c46a17e8a28$var$isSelectableInput(element) {
512
- return element instanceof HTMLInputElement && 'select' in element;
513
- }
514
- function $d3863c46a17e8a28$var$focus(element, { select: select = false } = {}) {
515
- // only focus if that element is focusable
516
- if (element && element.focus) {
517
- const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
518
- element.focus({
519
- preventScroll: true
520
- }); // only select if its not the same element, it supports selection and we need to select
521
- if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
522
- }
523
- }
524
- /* -------------------------------------------------------------------------------------------------
525
- * FocusScope stack
526
- * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
527
- function $d3863c46a17e8a28$var$createFocusScopesStack() {
528
- /** A stack of focus scopes, with the active one at the top */ let stack = [];
529
- return {
530
- add (focusScope) {
531
- // pause the currently active focus scope (at the top of the stack)
532
- const activeFocusScope = stack[0];
533
- if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
534
- // remove in case it already exists (because we'll re-add it at the top of the stack)
535
- stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
536
- stack.unshift(focusScope);
537
- },
538
- remove (focusScope) {
539
- var _stack$;
540
- stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
541
- (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
542
- }
543
- };
544
- }
545
- function $d3863c46a17e8a28$var$arrayRemove(array, item) {
546
- const updatedArray = [
547
- ...array
548
- ];
549
- const index = updatedArray.indexOf(item);
550
- if (index !== -1) updatedArray.splice(index, 1);
551
- return updatedArray;
552
- }
553
- function $d3863c46a17e8a28$var$removeLinks(items) {
554
- return items.filter((item)=>item.tagName !== 'A'
555
- );
556
- }
557
-
558
- const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
559
- var _globalThis$document;
560
- const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
561
- return container ? /*#__PURE__*/ $7SXl2$reactdom__default["default"].createPortal(/*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, portalProps, {
562
- ref: forwardedRef
563
- })), container) : null;
564
- });
565
-
566
- var getDefaultParent = function (originalTarget) {
567
- if (typeof document === 'undefined') {
568
- return null;
569
- }
570
- var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
571
- return sampleTarget.ownerDocument.body;
572
- };
573
- var counterMap = new WeakMap();
574
- var uncontrolledNodes = new WeakMap();
575
- var markerMap = {};
576
- var lockCount = 0;
577
- var unwrapHost = function (node) {
578
- return node && (node.host || unwrapHost(node.parentNode));
579
- };
580
- var correctTargets = function (parent, targets) {
581
- return targets
582
- .map(function (target) {
583
- if (parent.contains(target)) {
584
- return target;
585
- }
586
- var correctedTarget = unwrapHost(target);
587
- if (correctedTarget && parent.contains(correctedTarget)) {
588
- return correctedTarget;
589
- }
590
- console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
591
- return null;
592
- })
593
- .filter(function (x) { return Boolean(x); });
594
- };
595
- /**
596
- * Marks everything except given node(or nodes) as aria-hidden
597
- * @param {Element | Element[]} originalTarget - elements to keep on the page
598
- * @param [parentNode] - top element, defaults to document.body
599
- * @param {String} [markerName] - a special attribute to mark every node
600
- * @param {String} [controlAttribute] - html Attribute to control
601
- * @return {Undo} undo command
602
- */
603
- var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
604
- var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
605
- if (!markerMap[markerName]) {
606
- markerMap[markerName] = new WeakMap();
607
- }
608
- var markerCounter = markerMap[markerName];
609
- var hiddenNodes = [];
610
- var elementsToKeep = new Set();
611
- var elementsToStop = new Set(targets);
612
- var keep = function (el) {
613
- if (!el || elementsToKeep.has(el)) {
614
- return;
615
- }
616
- elementsToKeep.add(el);
617
- keep(el.parentNode);
618
- };
619
- targets.forEach(keep);
620
- var deep = function (parent) {
621
- if (!parent || elementsToStop.has(parent)) {
622
- return;
623
- }
624
- Array.prototype.forEach.call(parent.children, function (node) {
625
- if (elementsToKeep.has(node)) {
626
- deep(node);
627
- }
628
- else {
629
- var attr = node.getAttribute(controlAttribute);
630
- var alreadyHidden = attr !== null && attr !== 'false';
631
- var counterValue = (counterMap.get(node) || 0) + 1;
632
- var markerValue = (markerCounter.get(node) || 0) + 1;
633
- counterMap.set(node, counterValue);
634
- markerCounter.set(node, markerValue);
635
- hiddenNodes.push(node);
636
- if (counterValue === 1 && alreadyHidden) {
637
- uncontrolledNodes.set(node, true);
638
- }
639
- if (markerValue === 1) {
640
- node.setAttribute(markerName, 'true');
641
- }
642
- if (!alreadyHidden) {
643
- node.setAttribute(controlAttribute, 'true');
644
- }
645
- }
646
- });
647
- };
648
- deep(parentNode);
649
- elementsToKeep.clear();
650
- lockCount++;
651
- return function () {
652
- hiddenNodes.forEach(function (node) {
653
- var counterValue = counterMap.get(node) - 1;
654
- var markerValue = markerCounter.get(node) - 1;
655
- counterMap.set(node, counterValue);
656
- markerCounter.set(node, markerValue);
657
- if (!counterValue) {
658
- if (!uncontrolledNodes.has(node)) {
659
- node.removeAttribute(controlAttribute);
660
- }
661
- uncontrolledNodes.delete(node);
662
- }
663
- if (!markerValue) {
664
- node.removeAttribute(markerName);
665
- }
666
- });
667
- lockCount--;
668
- if (!lockCount) {
669
- // clear
670
- counterMap = new WeakMap();
671
- counterMap = new WeakMap();
672
- uncontrolledNodes = new WeakMap();
673
- markerMap = {};
674
- }
675
- };
676
- };
677
- /**
678
- * Marks everything except given node(or nodes) as aria-hidden
679
- * @param {Element | Element[]} originalTarget - elements to keep on the page
680
- * @param [parentNode] - top element, defaults to document.body
681
- * @param {String} [markerName] - a special attribute to mark every node
682
- * @return {Undo} undo command
683
- */
684
- var hideOthers = function (originalTarget, parentNode, markerName) {
685
- if (markerName === void 0) { markerName = 'data-aria-hidden'; }
686
- var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
687
- var activeParentNode = parentNode || getDefaultParent(originalTarget);
688
- if (!activeParentNode) {
689
- return function () { return null; };
690
- }
691
- // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
692
- targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
693
- return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
694
- };
695
-
696
- var zeroRightClassName = 'right-scroll-bar-position';
697
- var fullWidthClassName = 'width-before-scroll-bar';
698
- var noScrollbarsClassName = 'with-scroll-bars-hidden';
699
- /**
700
- * Name of a CSS variable containing the amount of "hidden" scrollbar
701
- * ! might be undefined ! use will fallback!
702
- */
703
- var removedBarSizeVariable = '--removed-body-scroll-bar-size';
704
-
705
- /**
706
- * Assigns a value for a given ref, no matter of the ref format
707
- * @param {RefObject} ref - a callback function or ref object
708
- * @param value - a new value
709
- *
710
- * @see https://github.com/theKashey/use-callback-ref#assignref
711
- * @example
712
- * const refObject = useRef();
713
- * const refFn = (ref) => {....}
714
- *
715
- * assignRef(refObject, "refValue");
716
- * assignRef(refFn, "refValue");
717
- */
718
- function assignRef(ref, value) {
719
- if (typeof ref === 'function') {
720
- ref(value);
721
- }
722
- else if (ref) {
723
- ref.current = value;
724
- }
725
- return ref;
726
- }
727
-
728
- /**
729
- * creates a MutableRef with ref change callback
730
- * @param initialValue - initial ref value
731
- * @param {Function} callback - a callback to run when value changes
732
- *
733
- * @example
734
- * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
735
- * ref.current = 1;
736
- * // prints 0 -> 1
737
- *
738
- * @see https://reactjs.org/docs/hooks-reference.html#useref
739
- * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
740
- * @returns {MutableRefObject}
741
- */
742
- function useCallbackRef(initialValue, callback) {
743
- var ref = React.useState(function () { return ({
744
- // value
745
- value: initialValue,
746
- // last callback
747
- callback: callback,
748
- // "memoized" public interface
749
- facade: {
750
- get current() {
751
- return ref.value;
752
- },
753
- set current(value) {
754
- var last = ref.value;
755
- if (last !== value) {
756
- ref.value = value;
757
- ref.callback(value, last);
758
- }
759
- },
760
- },
761
- }); })[0];
762
- // update callback
763
- ref.callback = callback;
764
- return ref.facade;
765
- }
766
-
767
- /**
768
- * Merges two or more refs together providing a single interface to set their value
769
- * @param {RefObject|Ref} refs
770
- * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
771
- *
772
- * @see {@link mergeRefs} a version without buit-in memoization
773
- * @see https://github.com/theKashey/use-callback-ref#usemergerefs
774
- * @example
775
- * const Component = React.forwardRef((props, ref) => {
776
- * const ownRef = useRef();
777
- * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
778
- * return <div ref={domRef}>...</div>
779
- * }
780
- */
781
- function useMergeRefs(refs, defaultValue) {
782
- return useCallbackRef(defaultValue || null, function (newValue) { return refs.forEach(function (ref) { return assignRef(ref, newValue); }); });
783
- }
784
-
785
- function ItoI(a) {
786
- return a;
787
- }
788
- function innerCreateMedium(defaults, middleware) {
789
- if (middleware === void 0) { middleware = ItoI; }
790
- var buffer = [];
791
- var assigned = false;
792
- var medium = {
793
- read: function () {
794
- if (assigned) {
795
- throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
796
- }
797
- if (buffer.length) {
798
- return buffer[buffer.length - 1];
799
- }
800
- return defaults;
801
- },
802
- useMedium: function (data) {
803
- var item = middleware(data, assigned);
804
- buffer.push(item);
805
- return function () {
806
- buffer = buffer.filter(function (x) { return x !== item; });
807
- };
808
- },
809
- assignSyncMedium: function (cb) {
810
- assigned = true;
811
- while (buffer.length) {
812
- var cbs = buffer;
813
- buffer = [];
814
- cbs.forEach(cb);
815
- }
816
- buffer = {
817
- push: function (x) { return cb(x); },
818
- filter: function () { return buffer; },
819
- };
820
- },
821
- assignMedium: function (cb) {
822
- assigned = true;
823
- var pendingQueue = [];
824
- if (buffer.length) {
825
- var cbs = buffer;
826
- buffer = [];
827
- cbs.forEach(cb);
828
- pendingQueue = buffer;
829
- }
830
- var executeQueue = function () {
831
- var cbs = pendingQueue;
832
- pendingQueue = [];
833
- cbs.forEach(cb);
834
- };
835
- var cycle = function () { return Promise.resolve().then(executeQueue); };
836
- cycle();
837
- buffer = {
838
- push: function (x) {
839
- pendingQueue.push(x);
840
- cycle();
841
- },
842
- filter: function (filter) {
843
- pendingQueue = pendingQueue.filter(filter);
844
- return buffer;
845
- },
846
- };
847
- },
848
- };
849
- return medium;
850
- }
851
- // eslint-disable-next-line @typescript-eslint/ban-types
852
- function createSidecarMedium(options) {
853
- if (options === void 0) { options = {}; }
854
- var medium = innerCreateMedium(null);
855
- medium.options = filterDataAttrs.__assign({ async: true, ssr: false }, options);
856
- return medium;
857
- }
858
-
859
- var SideCar$1 = function (_a) {
860
- var sideCar = _a.sideCar, rest = filterDataAttrs.__rest(_a, ["sideCar"]);
861
- if (!sideCar) {
862
- throw new Error('Sidecar: please provide `sideCar` property to import the right car');
863
- }
864
- var Target = sideCar.read();
865
- if (!Target) {
866
- throw new Error('Sidecar medium not found');
867
- }
868
- return React__namespace.createElement(Target, filterDataAttrs.__assign({}, rest));
869
- };
870
- SideCar$1.isSideCarExport = true;
871
- function exportSidecar(medium, exported) {
872
- medium.useMedium(exported);
873
- return SideCar$1;
874
- }
875
-
876
- var effectCar = createSidecarMedium();
877
-
878
- var nothing = function () {
879
- return;
880
- };
881
- /**
882
- * Removes scrollbar from the page and contain the scroll within the Lock
883
- */
884
- var RemoveScroll = React__namespace.forwardRef(function (props, parentRef) {
885
- var ref = React__namespace.useRef(null);
886
- var _a = React__namespace.useState({
887
- onScrollCapture: nothing,
888
- onWheelCapture: nothing,
889
- onTouchMoveCapture: nothing,
890
- }), callbacks = _a[0], setCallbacks = _a[1];
891
- var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = filterDataAttrs.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
892
- var SideCar = sideCar;
893
- var containerRef = useMergeRefs([ref, parentRef]);
894
- var containerProps = filterDataAttrs.__assign(filterDataAttrs.__assign({}, rest), callbacks);
895
- return (React__namespace.createElement(React__namespace.Fragment, null,
896
- enabled && (React__namespace.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
897
- forwardProps ? (React__namespace.cloneElement(React__namespace.Children.only(children), filterDataAttrs.__assign(filterDataAttrs.__assign({}, containerProps), { ref: containerRef }))) : (React__namespace.createElement(Container, filterDataAttrs.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
898
- });
899
- RemoveScroll.defaultProps = {
900
- enabled: true,
901
- removeScrollBar: true,
902
- inert: false,
903
- };
904
- RemoveScroll.classNames = {
905
- fullWidth: fullWidthClassName,
906
- zeroRight: zeroRightClassName,
907
- };
908
-
909
- var getNonce = function () {
910
- if (typeof __webpack_nonce__ !== 'undefined') {
911
- return __webpack_nonce__;
912
- }
913
- return undefined;
914
- };
915
-
916
- function makeStyleTag() {
917
- if (!document)
918
- return null;
919
- var tag = document.createElement('style');
920
- tag.type = 'text/css';
921
- var nonce = getNonce();
922
- if (nonce) {
923
- tag.setAttribute('nonce', nonce);
924
- }
925
- return tag;
926
- }
927
- function injectStyles(tag, css) {
928
- // @ts-ignore
929
- if (tag.styleSheet) {
930
- // @ts-ignore
931
- tag.styleSheet.cssText = css;
932
- }
933
- else {
934
- tag.appendChild(document.createTextNode(css));
935
- }
936
- }
937
- function insertStyleTag(tag) {
938
- var head = document.head || document.getElementsByTagName('head')[0];
939
- head.appendChild(tag);
940
- }
941
- var stylesheetSingleton = function () {
942
- var counter = 0;
943
- var stylesheet = null;
944
- return {
945
- add: function (style) {
946
- if (counter == 0) {
947
- if ((stylesheet = makeStyleTag())) {
948
- injectStyles(stylesheet, style);
949
- insertStyleTag(stylesheet);
950
- }
951
- }
952
- counter++;
953
- },
954
- remove: function () {
955
- counter--;
956
- if (!counter && stylesheet) {
957
- stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
958
- stylesheet = null;
959
- }
960
- },
961
- };
962
- };
963
-
964
- /**
965
- * creates a hook to control style singleton
966
- * @see {@link styleSingleton} for a safer component version
967
- * @example
968
- * ```tsx
969
- * const useStyle = styleHookSingleton();
970
- * ///
971
- * useStyle('body { overflow: hidden}');
972
- */
973
- var styleHookSingleton = function () {
974
- var sheet = stylesheetSingleton();
975
- return function (styles, isDynamic) {
976
- React__namespace.useEffect(function () {
977
- sheet.add(styles);
978
- return function () {
979
- sheet.remove();
980
- };
981
- }, [styles && isDynamic]);
982
- };
983
- };
984
-
985
- /**
986
- * create a Component to add styles on demand
987
- * - styles are added when first instance is mounted
988
- * - styles are removed when the last instance is unmounted
989
- * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
990
- */
991
- var styleSingleton = function () {
992
- var useStyle = styleHookSingleton();
993
- var Sheet = function (_a) {
994
- var styles = _a.styles, dynamic = _a.dynamic;
995
- useStyle(styles, dynamic);
996
- return null;
997
- };
998
- return Sheet;
999
- };
1000
-
1001
- var zeroGap = {
1002
- left: 0,
1003
- top: 0,
1004
- right: 0,
1005
- gap: 0,
1006
- };
1007
- var parse = function (x) { return parseInt(x || '', 10) || 0; };
1008
- var getOffset = function (gapMode) {
1009
- var cs = window.getComputedStyle(document.body);
1010
- var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
1011
- var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
1012
- var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
1013
- return [parse(left), parse(top), parse(right)];
1014
- };
1015
- var getGapWidth = function (gapMode) {
1016
- if (gapMode === void 0) { gapMode = 'margin'; }
1017
- if (typeof window === 'undefined') {
1018
- return zeroGap;
1019
- }
1020
- var offsets = getOffset(gapMode);
1021
- var documentWidth = document.documentElement.clientWidth;
1022
- var windowWidth = window.innerWidth;
1023
- return {
1024
- left: offsets[0],
1025
- top: offsets[1],
1026
- right: offsets[2],
1027
- gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
1028
- };
1029
- };
1030
-
1031
- var Style = styleSingleton();
1032
- // important tip - once we measure scrollBar width and remove them
1033
- // we could not repeat this operation
1034
- // thus we are using style-singleton - only the first "yet correct" style will be applied.
1035
- var getStyles = function (_a, allowRelative, gapMode, important) {
1036
- var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
1037
- if (gapMode === void 0) { gapMode = 'margin'; }
1038
- return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
1039
- allowRelative && "position: relative ".concat(important, ";"),
1040
- gapMode === 'margin' &&
1041
- "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "),
1042
- gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
1043
- ]
1044
- .filter(Boolean)
1045
- .join(''), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
1046
- };
1047
- /**
1048
- * Removes page scrollbar and blocks page scroll when mounted
1049
- */
1050
- var RemoveScrollBar = function (props) {
1051
- var noRelative = props.noRelative, noImportant = props.noImportant, _a = props.gapMode, gapMode = _a === void 0 ? 'margin' : _a;
1052
- /*
1053
- gap will be measured on every component mount
1054
- however it will be used only by the "first" invocation
1055
- due to singleton nature of <Style
1056
- */
1057
- var gap = React__namespace.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
1058
- return React__namespace.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
1059
- };
1060
-
1061
- var passiveSupported = false;
1062
- if (typeof window !== 'undefined') {
1063
- try {
1064
- var options = Object.defineProperty({}, 'passive', {
1065
- get: function () {
1066
- passiveSupported = true;
1067
- return true;
1068
- },
1069
- });
1070
- // @ts-ignore
1071
- window.addEventListener('test', options, options);
1072
- // @ts-ignore
1073
- window.removeEventListener('test', options, options);
1074
- }
1075
- catch (err) {
1076
- passiveSupported = false;
1077
- }
1078
- }
1079
- var nonPassive = passiveSupported ? { passive: false } : false;
1080
-
1081
- var alwaysContainsScroll = function (node) {
1082
- // textarea will always _contain_ scroll inside self. It only can be hidden
1083
- return node.tagName === 'TEXTAREA';
1084
- };
1085
- var elementCanBeScrolled = function (node, overflow) {
1086
- var styles = window.getComputedStyle(node);
1087
- return (
1088
- // not-not-scrollable
1089
- styles[overflow] !== 'hidden' &&
1090
- // contains scroll inside self
1091
- !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible'));
1092
- };
1093
- var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); };
1094
- var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); };
1095
- var locationCouldBeScrolled = function (axis, node) {
1096
- var current = node;
1097
- do {
1098
- // Skip over shadow root
1099
- if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
1100
- current = current.host;
1101
- }
1102
- var isScrollable = elementCouldBeScrolled(axis, current);
1103
- if (isScrollable) {
1104
- var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2];
1105
- if (s > d) {
1106
- return true;
1107
- }
1108
- }
1109
- current = current.parentNode;
1110
- } while (current && current !== document.body);
1111
- return false;
1112
- };
1113
- var getVScrollVariables = function (_a) {
1114
- var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
1115
- return [
1116
- scrollTop,
1117
- scrollHeight,
1118
- clientHeight,
1119
- ];
1120
- };
1121
- var getHScrollVariables = function (_a) {
1122
- var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
1123
- return [
1124
- scrollLeft,
1125
- scrollWidth,
1126
- clientWidth,
1127
- ];
1128
- };
1129
- var elementCouldBeScrolled = function (axis, node) {
1130
- return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
1131
- };
1132
- var getScrollVariables = function (axis, node) {
1133
- return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);
1134
- };
1135
- var getDirectionFactor = function (axis, direction) {
1136
- /**
1137
- * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,
1138
- * and then increasingly negative as you scroll towards the end of the content.
1139
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
1140
- */
1141
- return axis === 'h' && direction === 'rtl' ? -1 : 1;
1142
- };
1143
- var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {
1144
- var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
1145
- var delta = directionFactor * sourceDelta;
1146
- // find scrollable target
1147
- var target = event.target;
1148
- var targetInLock = endTarget.contains(target);
1149
- var shouldCancelScroll = false;
1150
- var isDeltaPositive = delta > 0;
1151
- var availableScroll = 0;
1152
- var availableScrollTop = 0;
1153
- do {
1154
- var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
1155
- var elementScroll = scroll_1 - capacity - directionFactor * position;
1156
- if (position || elementScroll) {
1157
- if (elementCouldBeScrolled(axis, target)) {
1158
- availableScroll += elementScroll;
1159
- availableScrollTop += position;
1160
- }
1161
- }
1162
- target = target.parentNode;
1163
- } while (
1164
- // portaled content
1165
- (!targetInLock && target !== document.body) ||
1166
- // self content
1167
- (targetInLock && (endTarget.contains(target) || endTarget === target)));
1168
- if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) {
1169
- shouldCancelScroll = true;
1170
- }
1171
- else if (!isDeltaPositive &&
1172
- ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) {
1173
- shouldCancelScroll = true;
1174
- }
1175
- return shouldCancelScroll;
1176
- };
1177
-
1178
- var getTouchXY = function (event) {
1179
- return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
1180
- };
1181
- var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
1182
- var extractRef = function (ref) {
1183
- return ref && 'current' in ref ? ref.current : ref;
1184
- };
1185
- var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
1186
- var generateStyle = function (id) { return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
1187
- var idCounter = 0;
1188
- var lockStack = [];
1189
- function RemoveScrollSideCar(props) {
1190
- var shouldPreventQueue = React__namespace.useRef([]);
1191
- var touchStartRef = React__namespace.useRef([0, 0]);
1192
- var activeAxis = React__namespace.useRef();
1193
- var id = React__namespace.useState(idCounter++)[0];
1194
- var Style = React__namespace.useState(function () { return styleSingleton(); })[0];
1195
- var lastProps = React__namespace.useRef(props);
1196
- React__namespace.useEffect(function () {
1197
- lastProps.current = props;
1198
- }, [props]);
1199
- React__namespace.useEffect(function () {
1200
- if (props.inert) {
1201
- document.body.classList.add("block-interactivity-".concat(id));
1202
- var allow_1 = filterDataAttrs.__spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
1203
- allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
1204
- return function () {
1205
- document.body.classList.remove("block-interactivity-".concat(id));
1206
- allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
1207
- };
1208
- }
1209
- return;
1210
- }, [props.inert, props.lockRef.current, props.shards]);
1211
- var shouldCancelEvent = React__namespace.useCallback(function (event, parent) {
1212
- if ('touches' in event && event.touches.length === 2) {
1213
- return !lastProps.current.allowPinchZoom;
1214
- }
1215
- var touch = getTouchXY(event);
1216
- var touchStart = touchStartRef.current;
1217
- var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
1218
- var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
1219
- var currentAxis;
1220
- var target = event.target;
1221
- var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
1222
- // allow horizontal touch move on Range inputs. They will not cause any scroll
1223
- if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
1224
- return false;
1225
- }
1226
- var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
1227
- if (!canBeScrolledInMainDirection) {
1228
- return true;
1229
- }
1230
- if (canBeScrolledInMainDirection) {
1231
- currentAxis = moveDirection;
1232
- }
1233
- else {
1234
- currentAxis = moveDirection === 'v' ? 'h' : 'v';
1235
- canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
1236
- // other axis might be not scrollable
1237
- }
1238
- if (!canBeScrolledInMainDirection) {
1239
- return false;
1240
- }
1241
- if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
1242
- activeAxis.current = currentAxis;
1243
- }
1244
- if (!currentAxis) {
1245
- return true;
1246
- }
1247
- var cancelingAxis = activeAxis.current || currentAxis;
1248
- return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
1249
- }, []);
1250
- var shouldPrevent = React__namespace.useCallback(function (_event) {
1251
- var event = _event;
1252
- if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
1253
- // not the last active
1254
- return;
1255
- }
1256
- var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
1257
- var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0];
1258
- // self event, and should be canceled
1259
- if (sourceEvent && sourceEvent.should) {
1260
- if (event.cancelable) {
1261
- event.preventDefault();
1262
- }
1263
- return;
1264
- }
1265
- // outside or shard event
1266
- if (!sourceEvent) {
1267
- var shardNodes = (lastProps.current.shards || [])
1268
- .map(extractRef)
1269
- .filter(Boolean)
1270
- .filter(function (node) { return node.contains(event.target); });
1271
- var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
1272
- if (shouldStop) {
1273
- if (event.cancelable) {
1274
- event.preventDefault();
1275
- }
1276
- }
1277
- }
1278
- }, []);
1279
- var shouldCancel = React__namespace.useCallback(function (name, delta, target, should) {
1280
- var event = { name: name, delta: delta, target: target, should: should };
1281
- shouldPreventQueue.current.push(event);
1282
- setTimeout(function () {
1283
- shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
1284
- }, 1);
1285
- }, []);
1286
- var scrollTouchStart = React__namespace.useCallback(function (event) {
1287
- touchStartRef.current = getTouchXY(event);
1288
- activeAxis.current = undefined;
1289
- }, []);
1290
- var scrollWheel = React__namespace.useCallback(function (event) {
1291
- shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
1292
- }, []);
1293
- var scrollTouchMove = React__namespace.useCallback(function (event) {
1294
- shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
1295
- }, []);
1296
- React__namespace.useEffect(function () {
1297
- lockStack.push(Style);
1298
- props.setCallbacks({
1299
- onScrollCapture: scrollWheel,
1300
- onWheelCapture: scrollWheel,
1301
- onTouchMoveCapture: scrollTouchMove,
1302
- });
1303
- document.addEventListener('wheel', shouldPrevent, nonPassive);
1304
- document.addEventListener('touchmove', shouldPrevent, nonPassive);
1305
- document.addEventListener('touchstart', scrollTouchStart, nonPassive);
1306
- return function () {
1307
- lockStack = lockStack.filter(function (inst) { return inst !== Style; });
1308
- document.removeEventListener('wheel', shouldPrevent, nonPassive);
1309
- document.removeEventListener('touchmove', shouldPrevent, nonPassive);
1310
- document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
1311
- };
1312
- }, []);
1313
- var removeScrollBar = props.removeScrollBar, inert = props.inert;
1314
- return (React__namespace.createElement(React__namespace.Fragment, null,
1315
- inert ? React__namespace.createElement(Style, { styles: generateStyle(id) }) : null,
1316
- removeScrollBar ? React__namespace.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
1317
- }
1318
-
1319
- var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
1320
-
1321
- var ReactRemoveScroll = React__namespace.forwardRef(function (props, ref) { return (React__namespace.createElement(RemoveScroll, filterDataAttrs.__assign({}, props, { ref: ref, sideCar: SideCar }))); });
1322
- ReactRemoveScroll.classNames = RemoveScroll.classNames;
1323
- var $01b9c$RemoveScroll = ReactRemoveScroll;
1324
-
1325
- exports.$01b9c$RemoveScroll = $01b9c$RemoveScroll;
1326
- exports.$3db38b7d1fb3fe6a$export$b7ece24a22aeda8c = $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c;
1327
- exports.$5cb92bef7577960e$export$177fb62ff3ec1f22 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
1328
- exports.$d3863c46a17e8a28$export$20e40289641fbbb6 = $d3863c46a17e8a28$export$20e40289641fbbb6;
1329
- exports.$f1701beae083dbae$export$602eac185826482c = $f1701beae083dbae$export$602eac185826482c;
1330
- exports.hideOthers = hideOthers;