@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
@@ -0,0 +1,382 @@
1
+ import * as React from 'react';
2
+ import { useState } from 'react';
3
+ import { a as __assign, _ as __rest } from './filter-data-attrs-ea8f4ed4.js';
4
+
5
+ var zeroRightClassName = 'right-scroll-bar-position';
6
+ var fullWidthClassName = 'width-before-scroll-bar';
7
+ var noScrollbarsClassName = 'with-scroll-bars-hidden';
8
+ /**
9
+ * Name of a CSS variable containing the amount of "hidden" scrollbar
10
+ * ! might be undefined ! use will fallback!
11
+ */
12
+ var removedBarSizeVariable = '--removed-body-scroll-bar-size';
13
+
14
+ /**
15
+ * Assigns a value for a given ref, no matter of the ref format
16
+ * @param {RefObject} ref - a callback function or ref object
17
+ * @param value - a new value
18
+ *
19
+ * @see https://github.com/theKashey/use-callback-ref#assignref
20
+ * @example
21
+ * const refObject = useRef();
22
+ * const refFn = (ref) => {....}
23
+ *
24
+ * assignRef(refObject, "refValue");
25
+ * assignRef(refFn, "refValue");
26
+ */
27
+ function assignRef(ref, value) {
28
+ if (typeof ref === 'function') {
29
+ ref(value);
30
+ }
31
+ else if (ref) {
32
+ ref.current = value;
33
+ }
34
+ return ref;
35
+ }
36
+
37
+ /**
38
+ * creates a MutableRef with ref change callback
39
+ * @param initialValue - initial ref value
40
+ * @param {Function} callback - a callback to run when value changes
41
+ *
42
+ * @example
43
+ * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
44
+ * ref.current = 1;
45
+ * // prints 0 -> 1
46
+ *
47
+ * @see https://reactjs.org/docs/hooks-reference.html#useref
48
+ * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
49
+ * @returns {MutableRefObject}
50
+ */
51
+ function useCallbackRef(initialValue, callback) {
52
+ var ref = useState(function () { return ({
53
+ // value
54
+ value: initialValue,
55
+ // last callback
56
+ callback: callback,
57
+ // "memoized" public interface
58
+ facade: {
59
+ get current() {
60
+ return ref.value;
61
+ },
62
+ set current(value) {
63
+ var last = ref.value;
64
+ if (last !== value) {
65
+ ref.value = value;
66
+ ref.callback(value, last);
67
+ }
68
+ },
69
+ },
70
+ }); })[0];
71
+ // update callback
72
+ ref.callback = callback;
73
+ return ref.facade;
74
+ }
75
+
76
+ var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
77
+ var currentValues = new WeakMap();
78
+ /**
79
+ * Merges two or more refs together providing a single interface to set their value
80
+ * @param {RefObject|Ref} refs
81
+ * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
82
+ *
83
+ * @see {@link mergeRefs} a version without buit-in memoization
84
+ * @see https://github.com/theKashey/use-callback-ref#usemergerefs
85
+ * @example
86
+ * const Component = React.forwardRef((props, ref) => {
87
+ * const ownRef = useRef();
88
+ * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
89
+ * return <div ref={domRef}>...</div>
90
+ * }
91
+ */
92
+ function useMergeRefs(refs, defaultValue) {
93
+ var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {
94
+ return refs.forEach(function (ref) { return assignRef(ref, newValue); });
95
+ });
96
+ // handle refs changes - added or removed
97
+ useIsomorphicLayoutEffect(function () {
98
+ var oldValue = currentValues.get(callbackRef);
99
+ if (oldValue) {
100
+ var prevRefs_1 = new Set(oldValue);
101
+ var nextRefs_1 = new Set(refs);
102
+ var current_1 = callbackRef.current;
103
+ prevRefs_1.forEach(function (ref) {
104
+ if (!nextRefs_1.has(ref)) {
105
+ assignRef(ref, null);
106
+ }
107
+ });
108
+ nextRefs_1.forEach(function (ref) {
109
+ if (!prevRefs_1.has(ref)) {
110
+ assignRef(ref, current_1);
111
+ }
112
+ });
113
+ }
114
+ currentValues.set(callbackRef, refs);
115
+ }, [refs]);
116
+ return callbackRef;
117
+ }
118
+
119
+ function ItoI(a) {
120
+ return a;
121
+ }
122
+ function innerCreateMedium(defaults, middleware) {
123
+ if (middleware === void 0) { middleware = ItoI; }
124
+ var buffer = [];
125
+ var assigned = false;
126
+ var medium = {
127
+ read: function () {
128
+ if (assigned) {
129
+ throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
130
+ }
131
+ if (buffer.length) {
132
+ return buffer[buffer.length - 1];
133
+ }
134
+ return defaults;
135
+ },
136
+ useMedium: function (data) {
137
+ var item = middleware(data, assigned);
138
+ buffer.push(item);
139
+ return function () {
140
+ buffer = buffer.filter(function (x) { return x !== item; });
141
+ };
142
+ },
143
+ assignSyncMedium: function (cb) {
144
+ assigned = true;
145
+ while (buffer.length) {
146
+ var cbs = buffer;
147
+ buffer = [];
148
+ cbs.forEach(cb);
149
+ }
150
+ buffer = {
151
+ push: function (x) { return cb(x); },
152
+ filter: function () { return buffer; },
153
+ };
154
+ },
155
+ assignMedium: function (cb) {
156
+ assigned = true;
157
+ var pendingQueue = [];
158
+ if (buffer.length) {
159
+ var cbs = buffer;
160
+ buffer = [];
161
+ cbs.forEach(cb);
162
+ pendingQueue = buffer;
163
+ }
164
+ var executeQueue = function () {
165
+ var cbs = pendingQueue;
166
+ pendingQueue = [];
167
+ cbs.forEach(cb);
168
+ };
169
+ var cycle = function () { return Promise.resolve().then(executeQueue); };
170
+ cycle();
171
+ buffer = {
172
+ push: function (x) {
173
+ pendingQueue.push(x);
174
+ cycle();
175
+ },
176
+ filter: function (filter) {
177
+ pendingQueue = pendingQueue.filter(filter);
178
+ return buffer;
179
+ },
180
+ };
181
+ },
182
+ };
183
+ return medium;
184
+ }
185
+ // eslint-disable-next-line @typescript-eslint/ban-types
186
+ function createSidecarMedium(options) {
187
+ if (options === void 0) { options = {}; }
188
+ var medium = innerCreateMedium(null);
189
+ medium.options = __assign({ async: true, ssr: false }, options);
190
+ return medium;
191
+ }
192
+
193
+ var SideCar = function (_a) {
194
+ var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
195
+ if (!sideCar) {
196
+ throw new Error('Sidecar: please provide `sideCar` property to import the right car');
197
+ }
198
+ var Target = sideCar.read();
199
+ if (!Target) {
200
+ throw new Error('Sidecar medium not found');
201
+ }
202
+ return React.createElement(Target, __assign({}, rest));
203
+ };
204
+ SideCar.isSideCarExport = true;
205
+ function exportSidecar(medium, exported) {
206
+ medium.useMedium(exported);
207
+ return SideCar;
208
+ }
209
+
210
+ var getNonce = function () {
211
+ if (typeof __webpack_nonce__ !== 'undefined') {
212
+ return __webpack_nonce__;
213
+ }
214
+ return undefined;
215
+ };
216
+
217
+ function makeStyleTag() {
218
+ if (!document)
219
+ return null;
220
+ var tag = document.createElement('style');
221
+ tag.type = 'text/css';
222
+ var nonce = getNonce();
223
+ if (nonce) {
224
+ tag.setAttribute('nonce', nonce);
225
+ }
226
+ return tag;
227
+ }
228
+ function injectStyles(tag, css) {
229
+ // @ts-ignore
230
+ if (tag.styleSheet) {
231
+ // @ts-ignore
232
+ tag.styleSheet.cssText = css;
233
+ }
234
+ else {
235
+ tag.appendChild(document.createTextNode(css));
236
+ }
237
+ }
238
+ function insertStyleTag(tag) {
239
+ var head = document.head || document.getElementsByTagName('head')[0];
240
+ head.appendChild(tag);
241
+ }
242
+ var stylesheetSingleton = function () {
243
+ var counter = 0;
244
+ var stylesheet = null;
245
+ return {
246
+ add: function (style) {
247
+ if (counter == 0) {
248
+ if ((stylesheet = makeStyleTag())) {
249
+ injectStyles(stylesheet, style);
250
+ insertStyleTag(stylesheet);
251
+ }
252
+ }
253
+ counter++;
254
+ },
255
+ remove: function () {
256
+ counter--;
257
+ if (!counter && stylesheet) {
258
+ stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
259
+ stylesheet = null;
260
+ }
261
+ },
262
+ };
263
+ };
264
+
265
+ /**
266
+ * creates a hook to control style singleton
267
+ * @see {@link styleSingleton} for a safer component version
268
+ * @example
269
+ * ```tsx
270
+ * const useStyle = styleHookSingleton();
271
+ * ///
272
+ * useStyle('body { overflow: hidden}');
273
+ */
274
+ var styleHookSingleton = function () {
275
+ var sheet = stylesheetSingleton();
276
+ return function (styles, isDynamic) {
277
+ React.useEffect(function () {
278
+ sheet.add(styles);
279
+ return function () {
280
+ sheet.remove();
281
+ };
282
+ }, [styles && isDynamic]);
283
+ };
284
+ };
285
+
286
+ /**
287
+ * create a Component to add styles on demand
288
+ * - styles are added when first instance is mounted
289
+ * - styles are removed when the last instance is unmounted
290
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
291
+ */
292
+ var styleSingleton = function () {
293
+ var useStyle = styleHookSingleton();
294
+ var Sheet = function (_a) {
295
+ var styles = _a.styles, dynamic = _a.dynamic;
296
+ useStyle(styles, dynamic);
297
+ return null;
298
+ };
299
+ return Sheet;
300
+ };
301
+
302
+ var zeroGap = {
303
+ left: 0,
304
+ top: 0,
305
+ right: 0,
306
+ gap: 0,
307
+ };
308
+ var parse = function (x) { return parseInt(x || '', 10) || 0; };
309
+ var getOffset = function (gapMode) {
310
+ var cs = window.getComputedStyle(document.body);
311
+ var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
312
+ var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
313
+ var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
314
+ return [parse(left), parse(top), parse(right)];
315
+ };
316
+ var getGapWidth = function (gapMode) {
317
+ if (gapMode === void 0) { gapMode = 'margin'; }
318
+ if (typeof window === 'undefined') {
319
+ return zeroGap;
320
+ }
321
+ var offsets = getOffset(gapMode);
322
+ var documentWidth = document.documentElement.clientWidth;
323
+ var windowWidth = window.innerWidth;
324
+ return {
325
+ left: offsets[0],
326
+ top: offsets[1],
327
+ right: offsets[2],
328
+ gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
329
+ };
330
+ };
331
+
332
+ var Style = styleSingleton();
333
+ var lockAttribute = 'data-scroll-locked';
334
+ // important tip - once we measure scrollBar width and remove them
335
+ // we could not repeat this operation
336
+ // thus we are using style-singleton - only the first "yet correct" style will be applied.
337
+ var getStyles = function (_a, allowRelative, gapMode, important) {
338
+ var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
339
+ if (gapMode === void 0) { gapMode = 'margin'; }
340
+ return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body[").concat(lockAttribute, "] {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([
341
+ allowRelative && "position: relative ".concat(important, ";"),
342
+ gapMode === 'margin' &&
343
+ "\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 "),
344
+ gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
345
+ ]
346
+ .filter(Boolean)
347
+ .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[").concat(lockAttribute, "] {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n");
348
+ };
349
+ var getCurrentUseCounter = function () {
350
+ var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
351
+ return isFinite(counter) ? counter : 0;
352
+ };
353
+ var useLockAttribute = function () {
354
+ React.useEffect(function () {
355
+ document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
356
+ return function () {
357
+ var newCounter = getCurrentUseCounter() - 1;
358
+ if (newCounter <= 0) {
359
+ document.body.removeAttribute(lockAttribute);
360
+ }
361
+ else {
362
+ document.body.setAttribute(lockAttribute, newCounter.toString());
363
+ }
364
+ };
365
+ }, []);
366
+ };
367
+ /**
368
+ * Removes page scrollbar and blocks page scroll when mounted
369
+ */
370
+ var RemoveScrollBar = function (_a) {
371
+ var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
372
+ useLockAttribute();
373
+ /*
374
+ gap will be measured on every component mount
375
+ however it will be used only by the "first" invocation
376
+ due to singleton nature of <Style
377
+ */
378
+ var gap = React.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
379
+ return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
380
+ };
381
+
382
+ export { RemoveScrollBar as R, createSidecarMedium as c, exportSidecar as e, fullWidthClassName as f, styleSingleton as s, useMergeRefs as u, zeroRightClassName as z };
@@ -1,8 +1,6 @@
1
- import { _ as _extends } from './extends-8cc61aad.js';
2
1
  import * as React from 'react';
3
- import { useLayoutEffect, useEffect, useState, createElement, forwardRef, useRef } from 'react';
4
- import * as $7SXl2$reactdom from 'react-dom';
5
- import { h as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a } from './index-7b531fa7.js';
2
+ import { useLayoutEffect, useEffect } from 'react';
3
+ import * as ReactDOM from 'react-dom';
6
4
 
7
5
  const sides = ['top', 'right', 'bottom', 'left'];
8
6
  const min = Math.min;
@@ -1799,7 +1797,7 @@ function useFloating(options) {
1799
1797
  };
1800
1798
  if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
1801
1799
  dataRef.current = fullData;
1802
- $7SXl2$reactdom.flushSync(() => {
1800
+ ReactDOM.flushSync(() => {
1803
1801
  setData(fullData);
1804
1802
  });
1805
1803
  }
@@ -1877,279 +1875,4 @@ function useFloating(options) {
1877
1875
  }), [data, update, refs, elements, floatingStyles]);
1878
1876
  }
1879
1877
 
1880
- function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
1881
- const [size, setSize] = useState(undefined);
1882
- $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
1883
- if (element) {
1884
- // provide size as early as possible
1885
- setSize({
1886
- width: element.offsetWidth,
1887
- height: element.offsetHeight
1888
- });
1889
- const resizeObserver = new ResizeObserver((entries)=>{
1890
- if (!Array.isArray(entries)) return;
1891
- // Since we only observe the one element, we don't need to loop over the
1892
- // array
1893
- if (!entries.length) return;
1894
- const entry = entries[0];
1895
- let width;
1896
- let height;
1897
- if ('borderBoxSize' in entry) {
1898
- const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
1899
- const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
1900
- width = borderSize['inlineSize'];
1901
- height = borderSize['blockSize'];
1902
- } else {
1903
- // for browsers that don't support `borderBoxSize`
1904
- // we calculate it ourselves to get the correct border box.
1905
- width = element.offsetWidth;
1906
- height = element.offsetHeight;
1907
- }
1908
- setSize({
1909
- width: width,
1910
- height: height
1911
- });
1912
- });
1913
- resizeObserver.observe(element, {
1914
- box: 'border-box'
1915
- });
1916
- return ()=>resizeObserver.unobserve(element)
1917
- ;
1918
- } else // We only want to reset to `undefined` when the element becomes `null`,
1919
- // not if it changes to another element.
1920
- setSize(undefined);
1921
- }, [
1922
- element
1923
- ]);
1924
- return size;
1925
- }
1926
-
1927
- /* -------------------------------------------------------------------------------------------------
1928
- * Popper
1929
- * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$POPPER_NAME = 'Popper';
1930
- const [$cf1ac5d9fe0e8206$var$createPopperContext, $cf1ac5d9fe0e8206$export$722aac194ae923] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($cf1ac5d9fe0e8206$var$POPPER_NAME);
1931
- const [$cf1ac5d9fe0e8206$var$PopperProvider, $cf1ac5d9fe0e8206$var$usePopperContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$POPPER_NAME);
1932
- const $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 = (props)=>{
1933
- const { __scopePopper: __scopePopper , children: children } = props;
1934
- const [anchor, setAnchor] = useState(null);
1935
- return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$var$PopperProvider, {
1936
- scope: __scopePopper,
1937
- anchor: anchor,
1938
- onAnchorChange: setAnchor
1939
- }, children);
1940
- };
1941
- /* -------------------------------------------------------------------------------------------------
1942
- * PopperAnchor
1943
- * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ANCHOR_NAME = 'PopperAnchor';
1944
- const $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
1945
- const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props;
1946
- const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$ANCHOR_NAME, __scopePopper);
1947
- const ref = useRef(null);
1948
- const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
1949
- useEffect(()=>{
1950
- // Consumer can anchor the popper to something that isn't
1951
- // a DOM node e.g. pointer position, so we override the
1952
- // `anchorRef` with their virtual ref in this case.
1953
- context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
1954
- });
1955
- return virtualRef ? null : /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, anchorProps, {
1956
- ref: composedRefs
1957
- }));
1958
- });
1959
- /* -------------------------------------------------------------------------------------------------
1960
- * PopperContent
1961
- * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$CONTENT_NAME = 'PopperContent';
1962
- const [$cf1ac5d9fe0e8206$var$PopperContentProvider, $cf1ac5d9fe0e8206$var$useContentContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME);
1963
- const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
1964
- var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide;
1965
- const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , avoidCollisions: avoidCollisions = true , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , updatePositionStrategy: updatePositionStrategy = 'optimized' , onPlaced: onPlaced , ...contentProps } = props;
1966
- const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
1967
- const [content, setContent] = useState(null);
1968
- const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node)
1969
- );
1970
- const [arrow$1, setArrow] = useState(null);
1971
- const arrowSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(arrow$1);
1972
- const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
1973
- const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
1974
- const desiredPlacement = side + (align !== 'center' ? '-' + align : '');
1975
- const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : {
1976
- top: 0,
1977
- right: 0,
1978
- bottom: 0,
1979
- left: 0,
1980
- ...collisionPaddingProp
1981
- };
1982
- const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [
1983
- collisionBoundary
1984
- ];
1985
- const hasExplicitBoundaries = boundary.length > 0;
1986
- const detectOverflowOptions = {
1987
- padding: collisionPadding,
1988
- boundary: boundary.filter($cf1ac5d9fe0e8206$var$isNotNull),
1989
- // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
1990
- altBoundary: hasExplicitBoundaries
1991
- };
1992
- const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData } = useFloating({
1993
- // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
1994
- strategy: 'fixed',
1995
- placement: desiredPlacement,
1996
- whileElementsMounted: (...args)=>{
1997
- const cleanup = autoUpdate(...args, {
1998
- animationFrame: updatePositionStrategy === 'always'
1999
- });
2000
- return cleanup;
2001
- },
2002
- elements: {
2003
- reference: context.anchor
2004
- },
2005
- middleware: [
2006
- offset({
2007
- mainAxis: sideOffset + arrowHeight,
2008
- alignmentAxis: alignOffset
2009
- }),
2010
- avoidCollisions && shift({
2011
- mainAxis: true,
2012
- crossAxis: false,
2013
- limiter: sticky === 'partial' ? limitShift() : undefined,
2014
- ...detectOverflowOptions
2015
- }),
2016
- avoidCollisions && flip({
2017
- ...detectOverflowOptions
2018
- }),
2019
- size({
2020
- ...detectOverflowOptions,
2021
- apply: ({ elements: elements , rects: rects , availableWidth: availableWidth , availableHeight: availableHeight })=>{
2022
- const { width: anchorWidth , height: anchorHeight } = rects.reference;
2023
- const contentStyle = elements.floating.style;
2024
- contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);
2025
- contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);
2026
- contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);
2027
- contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
2028
- }
2029
- }),
2030
- arrow$1 && arrow({
2031
- element: arrow$1,
2032
- padding: arrowPadding
2033
- }),
2034
- $cf1ac5d9fe0e8206$var$transformOrigin({
2035
- arrowWidth: arrowWidth,
2036
- arrowHeight: arrowHeight
2037
- }),
2038
- hideWhenDetached && hide({
2039
- strategy: 'referenceHidden',
2040
- ...detectOverflowOptions
2041
- })
2042
- ]
2043
- });
2044
- const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
2045
- const handlePlaced = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPlaced);
2046
- $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
2047
- if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
2048
- }, [
2049
- isPositioned,
2050
- handlePlaced
2051
- ]);
2052
- const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
2053
- const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
2054
- const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
2055
- const [contentZIndex, setContentZIndex] = useState();
2056
- $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
2057
- if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
2058
- }, [
2059
- content
2060
- ]);
2061
- return /*#__PURE__*/ createElement("div", {
2062
- ref: refs.setFloating,
2063
- "data-radix-popper-content-wrapper": "",
2064
- style: {
2065
- ...floatingStyles,
2066
- transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
2067
- // keep off the page when measuring
2068
- minWidth: 'max-content',
2069
- zIndex: contentZIndex,
2070
- ['--radix-popper-transform-origin']: [
2071
- (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x,
2072
- (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y
2073
- ].join(' ')
2074
- } // Floating UI interally calculates logical alignment based the `dir` attribute on
2075
- ,
2076
- dir: props.dir
2077
- }, /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$var$PopperContentProvider, {
2078
- scope: __scopePopper,
2079
- placedSide: placedSide,
2080
- onArrowChange: setArrow,
2081
- arrowX: arrowX,
2082
- arrowY: arrowY,
2083
- shouldHideArrow: cannotCenterArrow
2084
- }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
2085
- "data-side": placedSide,
2086
- "data-align": placedAlign
2087
- }, contentProps, {
2088
- ref: composedRefs,
2089
- style: {
2090
- ...contentProps.style,
2091
- // if the PopperContent hasn't been placed yet (not all measurements done)
2092
- // we prevent animations so that users's animation don't kick in too early referring wrong sides
2093
- animation: !isPositioned ? 'none' : undefined,
2094
- // hide the content if using the hide middleware and should be hidden
2095
- opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
2096
- }
2097
- }))));
2098
- });
2099
- /* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) {
2100
- return value !== null;
2101
- }
2102
- const $cf1ac5d9fe0e8206$var$transformOrigin = (options)=>({
2103
- name: 'transformOrigin',
2104
- options: options,
2105
- fn (data) {
2106
- var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8;
2107
- const { placement: placement , rects: rects , middlewareData: middlewareData } = data;
2108
- const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0;
2109
- const isArrowHidden = cannotCenterArrow;
2110
- const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
2111
- const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
2112
- const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
2113
- const noArrowAlign = {
2114
- start: '0%',
2115
- center: '50%',
2116
- end: '100%'
2117
- }[placedAlign];
2118
- const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2;
2119
- const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 0) + arrowHeight / 2;
2120
- let x = '';
2121
- let y = '';
2122
- if (placedSide === 'bottom') {
2123
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
2124
- y = `${-arrowHeight}px`;
2125
- } else if (placedSide === 'top') {
2126
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
2127
- y = `${rects.floating.height + arrowHeight}px`;
2128
- } else if (placedSide === 'right') {
2129
- x = `${-arrowHeight}px`;
2130
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
2131
- } else if (placedSide === 'left') {
2132
- x = `${rects.floating.width + arrowHeight}px`;
2133
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
2134
- }
2135
- return {
2136
- data: {
2137
- x: x,
2138
- y: y
2139
- }
2140
- };
2141
- }
2142
- })
2143
- ;
2144
- function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
2145
- const [side, align = 'center'] = placement.split('-');
2146
- return [
2147
- side,
2148
- align
2149
- ];
2150
- }
2151
- const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
2152
- const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
2153
- const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
2154
-
2155
- export { $cf1ac5d9fe0e8206$export$722aac194ae923 as $, $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 as a, $cf1ac5d9fe0e8206$export$b688253958b8dfe7 as b, $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 as c };
1878
+ export { autoUpdate as a, size as b, arrow as c, flip as f, hide as h, limitShift as l, offset as o, shift as s, useFloating as u };