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