@vritti/quantum-ui 0.3.3 → 0.3.4

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 (108) hide show
  1. package/dist/Alert.js +1 -1
  2. package/dist/Avatar.js +4 -4
  3. package/dist/Badge2.js +2 -2
  4. package/dist/Breadcrumb.js +1 -1
  5. package/dist/Button2.js +2 -2
  6. package/dist/Checkbox2.js +6 -6
  7. package/dist/Combination.js +3 -3
  8. package/dist/DateTimePicker.js +2 -2
  9. package/dist/Dialog.js +1 -1
  10. package/dist/Label.js +1 -1
  11. package/dist/Progress.js +2 -2
  12. package/dist/RadioGroup.js +8 -8
  13. package/dist/Select.js +2 -2
  14. package/dist/SelectFilter.js +2 -2
  15. package/dist/Sidebar.js +3 -3
  16. package/dist/SingleSelect.js +1 -1
  17. package/dist/Sonner.js +1 -1
  18. package/dist/Switch.js +5 -5
  19. package/dist/TabsSkeleton.js +1 -1
  20. package/dist/Toggle.js +2 -2
  21. package/dist/assets/quantum-ui.css +286 -392
  22. package/dist/calendar2.js +1 -1
  23. package/dist/cells.js +2 -2
  24. package/dist/collapsible2.js +1 -1
  25. package/dist/components/FormattedDate.js +2 -2
  26. package/dist/components/RichTextEditor.js +1 -1
  27. package/dist/components/Select.js +4 -4
  28. package/dist/components/TreeView.js +7 -7
  29. package/dist/dropdown-menu.js +9 -9
  30. package/dist/field.js +1 -1
  31. package/dist/image-component.js +1 -1
  32. package/dist/index.js +4 -4
  33. package/dist/index10.js +1499 -102
  34. package/dist/index10.js.map +1 -1
  35. package/dist/index11.js +37 -1499
  36. package/dist/index11.js.map +1 -1
  37. package/dist/index12.js +476 -29
  38. package/dist/index12.js.map +1 -1
  39. package/dist/index13.js +230 -426
  40. package/dist/index13.js.map +1 -1
  41. package/dist/index14.js +1073 -214
  42. package/dist/index14.js.map +1 -1
  43. package/dist/index15.js +14 -1139
  44. package/dist/index15.js.map +1 -1
  45. package/dist/index16.js +20 -14
  46. package/dist/index16.js.map +1 -1
  47. package/dist/index17.js +180 -25
  48. package/dist/index17.js.map +1 -1
  49. package/dist/index18.js +201 -173
  50. package/dist/index18.js.map +1 -1
  51. package/dist/index19.js +69 -203
  52. package/dist/index19.js.map +1 -1
  53. package/dist/index20.js +211 -70
  54. package/dist/index20.js.map +1 -1
  55. package/dist/index21.js +117 -207
  56. package/dist/index21.js.map +1 -1
  57. package/dist/index22.js +71 -123
  58. package/dist/index22.js.map +1 -1
  59. package/dist/index23.js +11 -74
  60. package/dist/index23.js.map +1 -1
  61. package/dist/index24.js +1134 -13
  62. package/dist/index24.js.map +1 -1
  63. package/dist/index25.js +2733 -1103
  64. package/dist/index25.js.map +1 -1
  65. package/dist/index26.js +24 -2755
  66. package/dist/index26.js.map +1 -1
  67. package/dist/index27.js +4 -32
  68. package/dist/index27.js.map +1 -1
  69. package/dist/index28.js +37 -4
  70. package/dist/index28.js.map +1 -1
  71. package/dist/index29.js +310 -36
  72. package/dist/index29.js.map +1 -1
  73. package/dist/index30.js +7 -309
  74. package/dist/index30.js.map +1 -1
  75. package/dist/index31.js +30 -8
  76. package/dist/index31.js.map +1 -1
  77. package/dist/index32.js +59 -29
  78. package/dist/index32.js.map +1 -1
  79. package/dist/index33.js +10 -59
  80. package/dist/index33.js.map +1 -1
  81. package/dist/index34.js +35 -10
  82. package/dist/index34.js.map +1 -1
  83. package/dist/index35.js +36810 -27
  84. package/dist/index35.js.map +1 -1
  85. package/dist/index4.js +136 -86
  86. package/dist/index4.js.map +1 -1
  87. package/dist/index5.js +315 -36745
  88. package/dist/index5.js.map +1 -1
  89. package/dist/index6.js +12 -141
  90. package/dist/index6.js.map +1 -1
  91. package/dist/index7.js +82 -382
  92. package/dist/index7.js.map +1 -1
  93. package/dist/index8.js +42 -12
  94. package/dist/index8.js.map +1 -1
  95. package/dist/index9.js +102 -42
  96. package/dist/index9.js.map +1 -1
  97. package/dist/lib/index.d.ts.map +1 -1
  98. package/dist/popover.js +1 -1
  99. package/dist/select2.js +1 -1
  100. package/dist/separator2.js +1 -1
  101. package/dist/tooltip.js +1 -1
  102. package/dist/useTimer.js +1 -1
  103. package/dist/utils/axios.js +1 -1
  104. package/dist/utils/currency.js +2 -2
  105. package/dist/utils/format.js +2 -2
  106. package/dist/utils/money.js +1 -1
  107. package/dist/utils/timezone.js +1 -1
  108. package/package.json +1 -1
package/dist/index26.js CHANGED
@@ -1,2767 +1,36 @@
1
1
  import * as React from 'react';
2
- import { useLayoutEffect } from 'react';
3
- import { P as Primitive, c as composeEventHandlers, d as dispatchDiscreteCustomEvent } from './index19.js';
4
- import { u as useComposedRefs } from './index12.js';
5
- import { u as useCallbackRef } from './index31.js';
2
+ import { P as Primitive } from './index18.js';
6
3
  import { jsx } from 'react/jsx-runtime';
7
- import * as ReactDOM from 'react-dom';
8
- import ReactDOM__default from 'react-dom';
9
- import { c as createContextScope } from './index20.js';
10
- import { u as useLayoutEffect2 } from './index28.js';
11
- import { u as useSize } from './index35.js';
12
4
 
13
- // packages/react/use-escape-keydown/src/use-escape-keydown.tsx
14
- function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
15
- const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
16
- React.useEffect(() => {
17
- const handleKeyDown = (event) => {
18
- if (event.key === "Escape") {
19
- onEscapeKeyDown(event);
20
- }
21
- };
22
- ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
23
- return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
24
- }, [onEscapeKeyDown, ownerDocument]);
25
- }
26
-
27
- var DISMISSABLE_LAYER_NAME = "DismissableLayer";
28
- var CONTEXT_UPDATE = "dismissableLayer.update";
29
- var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
30
- var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
31
- var originalBodyPointerEvents;
32
- var DismissableLayerContext = React.createContext({
33
- layers: /* @__PURE__ */ new Set(),
34
- layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
35
- branches: /* @__PURE__ */ new Set()
36
- });
37
- var DismissableLayer = React.forwardRef(
5
+ // src/visually-hidden.tsx
6
+ var VISUALLY_HIDDEN_STYLES = Object.freeze({
7
+ // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
8
+ position: "absolute",
9
+ border: 0,
10
+ width: 1,
11
+ height: 1,
12
+ padding: 0,
13
+ margin: -1,
14
+ overflow: "hidden",
15
+ clip: "rect(0, 0, 0, 0)",
16
+ whiteSpace: "nowrap",
17
+ wordWrap: "normal"
18
+ });
19
+ var NAME = "VisuallyHidden";
20
+ var VisuallyHidden = React.forwardRef(
38
21
  (props, forwardedRef) => {
39
- const {
40
- disableOutsidePointerEvents = false,
41
- onEscapeKeyDown,
42
- onPointerDownOutside,
43
- onFocusOutside,
44
- onInteractOutside,
45
- onDismiss,
46
- ...layerProps
47
- } = props;
48
- const context = React.useContext(DismissableLayerContext);
49
- const [node, setNode] = React.useState(null);
50
- const ownerDocument = node?.ownerDocument ?? globalThis?.document;
51
- const [, force] = React.useState({});
52
- const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
53
- const layers = Array.from(context.layers);
54
- const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
55
- const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
56
- const index = node ? layers.indexOf(node) : -1;
57
- const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
58
- const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
59
- const pointerDownOutside = usePointerDownOutside((event) => {
60
- const target = event.target;
61
- const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
62
- if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
63
- onPointerDownOutside?.(event);
64
- onInteractOutside?.(event);
65
- if (!event.defaultPrevented) onDismiss?.();
66
- }, ownerDocument);
67
- const focusOutside = useFocusOutside((event) => {
68
- const target = event.target;
69
- const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
70
- if (isFocusInBranch) return;
71
- onFocusOutside?.(event);
72
- onInteractOutside?.(event);
73
- if (!event.defaultPrevented) onDismiss?.();
74
- }, ownerDocument);
75
- useEscapeKeydown((event) => {
76
- const isHighestLayer = index === context.layers.size - 1;
77
- if (!isHighestLayer) return;
78
- onEscapeKeyDown?.(event);
79
- if (!event.defaultPrevented && onDismiss) {
80
- event.preventDefault();
81
- onDismiss();
82
- }
83
- }, ownerDocument);
84
- React.useEffect(() => {
85
- if (!node) return;
86
- if (disableOutsidePointerEvents) {
87
- if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
88
- originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
89
- ownerDocument.body.style.pointerEvents = "none";
90
- }
91
- context.layersWithOutsidePointerEventsDisabled.add(node);
92
- }
93
- context.layers.add(node);
94
- dispatchUpdate();
95
- return () => {
96
- if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
97
- ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
98
- }
99
- };
100
- }, [node, ownerDocument, disableOutsidePointerEvents, context]);
101
- React.useEffect(() => {
102
- return () => {
103
- if (!node) return;
104
- context.layers.delete(node);
105
- context.layersWithOutsidePointerEventsDisabled.delete(node);
106
- dispatchUpdate();
107
- };
108
- }, [node, context]);
109
- React.useEffect(() => {
110
- const handleUpdate = () => force({});
111
- document.addEventListener(CONTEXT_UPDATE, handleUpdate);
112
- return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
113
- }, []);
114
22
  return /* @__PURE__ */ jsx(
115
- Primitive.div,
23
+ Primitive.span,
116
24
  {
117
- ...layerProps,
118
- ref: composedRefs,
119
- style: {
120
- pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
121
- ...props.style
122
- },
123
- onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
124
- onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
125
- onPointerDownCapture: composeEventHandlers(
126
- props.onPointerDownCapture,
127
- pointerDownOutside.onPointerDownCapture
128
- )
25
+ ...props,
26
+ ref: forwardedRef,
27
+ style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
129
28
  }
130
29
  );
131
30
  }
132
31
  );
133
- DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
134
- var BRANCH_NAME = "DismissableLayerBranch";
135
- var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
136
- const context = React.useContext(DismissableLayerContext);
137
- const ref = React.useRef(null);
138
- const composedRefs = useComposedRefs(forwardedRef, ref);
139
- React.useEffect(() => {
140
- const node = ref.current;
141
- if (node) {
142
- context.branches.add(node);
143
- return () => {
144
- context.branches.delete(node);
145
- };
146
- }
147
- }, [context.branches]);
148
- return /* @__PURE__ */ jsx(Primitive.div, { ...props, ref: composedRefs });
149
- });
150
- DismissableLayerBranch.displayName = BRANCH_NAME;
151
- function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
152
- const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
153
- const isPointerInsideReactTreeRef = React.useRef(false);
154
- const handleClickRef = React.useRef(() => {
155
- });
156
- React.useEffect(() => {
157
- const handlePointerDown = (event) => {
158
- if (event.target && !isPointerInsideReactTreeRef.current) {
159
- let handleAndDispatchPointerDownOutsideEvent2 = function() {
160
- handleAndDispatchCustomEvent(
161
- POINTER_DOWN_OUTSIDE,
162
- handlePointerDownOutside,
163
- eventDetail,
164
- { discrete: true }
165
- );
166
- };
167
- const eventDetail = { originalEvent: event };
168
- if (event.pointerType === "touch") {
169
- ownerDocument.removeEventListener("click", handleClickRef.current);
170
- handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
171
- ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
172
- } else {
173
- handleAndDispatchPointerDownOutsideEvent2();
174
- }
175
- } else {
176
- ownerDocument.removeEventListener("click", handleClickRef.current);
177
- }
178
- isPointerInsideReactTreeRef.current = false;
179
- };
180
- const timerId = window.setTimeout(() => {
181
- ownerDocument.addEventListener("pointerdown", handlePointerDown);
182
- }, 0);
183
- return () => {
184
- window.clearTimeout(timerId);
185
- ownerDocument.removeEventListener("pointerdown", handlePointerDown);
186
- ownerDocument.removeEventListener("click", handleClickRef.current);
187
- };
188
- }, [ownerDocument, handlePointerDownOutside]);
189
- return {
190
- // ensures we check React component tree (not just DOM tree)
191
- onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
192
- };
193
- }
194
- function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
195
- const handleFocusOutside = useCallbackRef(onFocusOutside);
196
- const isFocusInsideReactTreeRef = React.useRef(false);
197
- React.useEffect(() => {
198
- const handleFocus = (event) => {
199
- if (event.target && !isFocusInsideReactTreeRef.current) {
200
- const eventDetail = { originalEvent: event };
201
- handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
202
- discrete: false
203
- });
204
- }
205
- };
206
- ownerDocument.addEventListener("focusin", handleFocus);
207
- return () => ownerDocument.removeEventListener("focusin", handleFocus);
208
- }, [ownerDocument, handleFocusOutside]);
209
- return {
210
- onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
211
- onBlurCapture: () => isFocusInsideReactTreeRef.current = false
212
- };
213
- }
214
- function dispatchUpdate() {
215
- const event = new CustomEvent(CONTEXT_UPDATE);
216
- document.dispatchEvent(event);
217
- }
218
- function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
219
- const target = detail.originalEvent.target;
220
- const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
221
- if (handler) target.addEventListener(name, handler, { once: true });
222
- if (discrete) {
223
- dispatchDiscreteCustomEvent(target, event);
224
- } else {
225
- target.dispatchEvent(event);
226
- }
227
- }
228
-
229
- /**
230
- * Custom positioning reference element.
231
- * @see https://floating-ui.com/docs/virtual-elements
232
- */
233
-
234
- const sides = ['top', 'right', 'bottom', 'left'];
235
- const min = Math.min;
236
- const max = Math.max;
237
- const round = Math.round;
238
- const floor = Math.floor;
239
- const createCoords = v => ({
240
- x: v,
241
- y: v
242
- });
243
- const oppositeSideMap = {
244
- left: 'right',
245
- right: 'left',
246
- bottom: 'top',
247
- top: 'bottom'
248
- };
249
- function clamp(start, value, end) {
250
- return max(start, min(value, end));
251
- }
252
- function evaluate(value, param) {
253
- return typeof value === 'function' ? value(param) : value;
254
- }
255
- function getSide(placement) {
256
- return placement.split('-')[0];
257
- }
258
- function getAlignment(placement) {
259
- return placement.split('-')[1];
260
- }
261
- function getOppositeAxis(axis) {
262
- return axis === 'x' ? 'y' : 'x';
263
- }
264
- function getAxisLength(axis) {
265
- return axis === 'y' ? 'height' : 'width';
266
- }
267
- function getSideAxis(placement) {
268
- const firstChar = placement[0];
269
- return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
270
- }
271
- function getAlignmentAxis(placement) {
272
- return getOppositeAxis(getSideAxis(placement));
273
- }
274
- function getAlignmentSides(placement, rects, rtl) {
275
- if (rtl === void 0) {
276
- rtl = false;
277
- }
278
- const alignment = getAlignment(placement);
279
- const alignmentAxis = getAlignmentAxis(placement);
280
- const length = getAxisLength(alignmentAxis);
281
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
282
- if (rects.reference[length] > rects.floating[length]) {
283
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
284
- }
285
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
286
- }
287
- function getExpandedPlacements(placement) {
288
- const oppositePlacement = getOppositePlacement(placement);
289
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
290
- }
291
- function getOppositeAlignmentPlacement(placement) {
292
- return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
293
- }
294
- const lrPlacement = ['left', 'right'];
295
- const rlPlacement = ['right', 'left'];
296
- const tbPlacement = ['top', 'bottom'];
297
- const btPlacement = ['bottom', 'top'];
298
- function getSideList(side, isStart, rtl) {
299
- switch (side) {
300
- case 'top':
301
- case 'bottom':
302
- if (rtl) return isStart ? rlPlacement : lrPlacement;
303
- return isStart ? lrPlacement : rlPlacement;
304
- case 'left':
305
- case 'right':
306
- return isStart ? tbPlacement : btPlacement;
307
- default:
308
- return [];
309
- }
310
- }
311
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
312
- const alignment = getAlignment(placement);
313
- let list = getSideList(getSide(placement), direction === 'start', rtl);
314
- if (alignment) {
315
- list = list.map(side => side + "-" + alignment);
316
- if (flipAlignment) {
317
- list = list.concat(list.map(getOppositeAlignmentPlacement));
318
- }
319
- }
320
- return list;
321
- }
322
- function getOppositePlacement(placement) {
323
- const side = getSide(placement);
324
- return oppositeSideMap[side] + placement.slice(side.length);
325
- }
326
- function expandPaddingObject(padding) {
327
- return {
328
- top: 0,
329
- right: 0,
330
- bottom: 0,
331
- left: 0,
332
- ...padding
333
- };
334
- }
335
- function getPaddingObject(padding) {
336
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
337
- top: padding,
338
- right: padding,
339
- bottom: padding,
340
- left: padding
341
- };
342
- }
343
- function rectToClientRect(rect) {
344
- const {
345
- x,
346
- y,
347
- width,
348
- height
349
- } = rect;
350
- return {
351
- width,
352
- height,
353
- top: y,
354
- left: x,
355
- right: x + width,
356
- bottom: y + height,
357
- x,
358
- y
359
- };
360
- }
361
-
362
- function computeCoordsFromPlacement(_ref, placement, rtl) {
363
- let {
364
- reference,
365
- floating
366
- } = _ref;
367
- const sideAxis = getSideAxis(placement);
368
- const alignmentAxis = getAlignmentAxis(placement);
369
- const alignLength = getAxisLength(alignmentAxis);
370
- const side = getSide(placement);
371
- const isVertical = sideAxis === 'y';
372
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
373
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
374
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
375
- let coords;
376
- switch (side) {
377
- case 'top':
378
- coords = {
379
- x: commonX,
380
- y: reference.y - floating.height
381
- };
382
- break;
383
- case 'bottom':
384
- coords = {
385
- x: commonX,
386
- y: reference.y + reference.height
387
- };
388
- break;
389
- case 'right':
390
- coords = {
391
- x: reference.x + reference.width,
392
- y: commonY
393
- };
394
- break;
395
- case 'left':
396
- coords = {
397
- x: reference.x - floating.width,
398
- y: commonY
399
- };
400
- break;
401
- default:
402
- coords = {
403
- x: reference.x,
404
- y: reference.y
405
- };
406
- }
407
- switch (getAlignment(placement)) {
408
- case 'start':
409
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
410
- break;
411
- case 'end':
412
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
413
- break;
414
- }
415
- return coords;
416
- }
417
-
418
- /**
419
- * Resolves with an object of overflow side offsets that determine how much the
420
- * element is overflowing a given clipping boundary on each side.
421
- * - positive = overflowing the boundary by that number of pixels
422
- * - negative = how many pixels left before it will overflow
423
- * - 0 = lies flush with the boundary
424
- * @see https://floating-ui.com/docs/detectOverflow
425
- */
426
- async function detectOverflow(state, options) {
427
- var _await$platform$isEle;
428
- if (options === void 0) {
429
- options = {};
430
- }
431
- const {
432
- x,
433
- y,
434
- platform,
435
- rects,
436
- elements,
437
- strategy
438
- } = state;
439
- const {
440
- boundary = 'clippingAncestors',
441
- rootBoundary = 'viewport',
442
- elementContext = 'floating',
443
- altBoundary = false,
444
- padding = 0
445
- } = evaluate(options, state);
446
- const paddingObject = getPaddingObject(padding);
447
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
448
- const element = elements[altBoundary ? altContext : elementContext];
449
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
450
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
451
- boundary,
452
- rootBoundary,
453
- strategy
454
- }));
455
- const rect = elementContext === 'floating' ? {
456
- x,
457
- y,
458
- width: rects.floating.width,
459
- height: rects.floating.height
460
- } : rects.reference;
461
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
462
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
463
- x: 1,
464
- y: 1
465
- } : {
466
- x: 1,
467
- y: 1
468
- };
469
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
470
- elements,
471
- rect,
472
- offsetParent,
473
- strategy
474
- }) : rect);
475
- return {
476
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
477
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
478
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
479
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
480
- };
481
- }
482
-
483
- // Maximum number of resets that can occur before bailing to avoid infinite reset loops.
484
- const MAX_RESET_COUNT = 50;
485
-
486
- /**
487
- * Computes the `x` and `y` coordinates that will place the floating element
488
- * next to a given reference element.
489
- *
490
- * This export does not have any `platform` interface logic. You will need to
491
- * write one for the platform you are using Floating UI with.
492
- */
493
- const computePosition$1 = async (reference, floating, config) => {
494
- const {
495
- placement = 'bottom',
496
- strategy = 'absolute',
497
- middleware = [],
498
- platform
499
- } = config;
500
- const platformWithDetectOverflow = platform.detectOverflow ? platform : {
501
- ...platform,
502
- detectOverflow
503
- };
504
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
505
- let rects = await platform.getElementRects({
506
- reference,
507
- floating,
508
- strategy
509
- });
510
- let {
511
- x,
512
- y
513
- } = computeCoordsFromPlacement(rects, placement, rtl);
514
- let statefulPlacement = placement;
515
- let resetCount = 0;
516
- const middlewareData = {};
517
- for (let i = 0; i < middleware.length; i++) {
518
- const currentMiddleware = middleware[i];
519
- if (!currentMiddleware) {
520
- continue;
521
- }
522
- const {
523
- name,
524
- fn
525
- } = currentMiddleware;
526
- const {
527
- x: nextX,
528
- y: nextY,
529
- data,
530
- reset
531
- } = await fn({
532
- x,
533
- y,
534
- initialPlacement: placement,
535
- placement: statefulPlacement,
536
- strategy,
537
- middlewareData,
538
- rects,
539
- platform: platformWithDetectOverflow,
540
- elements: {
541
- reference,
542
- floating
543
- }
544
- });
545
- x = nextX != null ? nextX : x;
546
- y = nextY != null ? nextY : y;
547
- middlewareData[name] = {
548
- ...middlewareData[name],
549
- ...data
550
- };
551
- if (reset && resetCount < MAX_RESET_COUNT) {
552
- resetCount++;
553
- if (typeof reset === 'object') {
554
- if (reset.placement) {
555
- statefulPlacement = reset.placement;
556
- }
557
- if (reset.rects) {
558
- rects = reset.rects === true ? await platform.getElementRects({
559
- reference,
560
- floating,
561
- strategy
562
- }) : reset.rects;
563
- }
564
- ({
565
- x,
566
- y
567
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
568
- }
569
- i = -1;
570
- }
571
- }
572
- return {
573
- x,
574
- y,
575
- placement: statefulPlacement,
576
- strategy,
577
- middlewareData
578
- };
579
- };
580
-
581
- /**
582
- * Provides data to position an inner element of the floating element so that it
583
- * appears centered to the reference element.
584
- * @see https://floating-ui.com/docs/arrow
585
- */
586
- const arrow$3 = options => ({
587
- name: 'arrow',
588
- options,
589
- async fn(state) {
590
- const {
591
- x,
592
- y,
593
- placement,
594
- rects,
595
- platform,
596
- elements,
597
- middlewareData
598
- } = state;
599
- // Since `element` is required, we don't Partial<> the type.
600
- const {
601
- element,
602
- padding = 0
603
- } = evaluate(options, state) || {};
604
- if (element == null) {
605
- return {};
606
- }
607
- const paddingObject = getPaddingObject(padding);
608
- const coords = {
609
- x,
610
- y
611
- };
612
- const axis = getAlignmentAxis(placement);
613
- const length = getAxisLength(axis);
614
- const arrowDimensions = await platform.getDimensions(element);
615
- const isYAxis = axis === 'y';
616
- const minProp = isYAxis ? 'top' : 'left';
617
- const maxProp = isYAxis ? 'bottom' : 'right';
618
- const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
619
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
620
- const startDiff = coords[axis] - rects.reference[axis];
621
- const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
622
- let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
623
-
624
- // DOM platform can return `window` as the `offsetParent`.
625
- if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
626
- clientSize = elements.floating[clientProp] || rects.floating[length];
627
- }
628
- const centerToReference = endDiff / 2 - startDiff / 2;
629
-
630
- // If the padding is large enough that it causes the arrow to no longer be
631
- // centered, modify the padding so that it is centered.
632
- const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
633
- const minPadding = min(paddingObject[minProp], largestPossiblePadding);
634
- const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
635
-
636
- // Make sure the arrow doesn't overflow the floating element if the center
637
- // point is outside the floating element's bounds.
638
- const min$1 = minPadding;
639
- const max = clientSize - arrowDimensions[length] - maxPadding;
640
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
641
- const offset = clamp(min$1, center, max);
642
-
643
- // If the reference is small enough that the arrow's padding causes it to
644
- // to point to nothing for an aligned placement, adjust the offset of the
645
- // floating element itself. To ensure `shift()` continues to take action,
646
- // a single reset is performed when this is true.
647
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
648
- const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
649
- return {
650
- [axis]: coords[axis] + alignmentOffset,
651
- data: {
652
- [axis]: offset,
653
- centerOffset: center - offset - alignmentOffset,
654
- ...(shouldAddOffset && {
655
- alignmentOffset
656
- })
657
- },
658
- reset: shouldAddOffset
659
- };
660
- }
661
- });
662
-
663
- /**
664
- * Optimizes the visibility of the floating element by flipping the `placement`
665
- * in order to keep it in view when the preferred placement(s) will overflow the
666
- * clipping boundary. Alternative to `autoPlacement`.
667
- * @see https://floating-ui.com/docs/flip
668
- */
669
- const flip$2 = function (options) {
670
- if (options === void 0) {
671
- options = {};
672
- }
673
- return {
674
- name: 'flip',
675
- options,
676
- async fn(state) {
677
- var _middlewareData$arrow, _middlewareData$flip;
678
- const {
679
- placement,
680
- middlewareData,
681
- rects,
682
- initialPlacement,
683
- platform,
684
- elements
685
- } = state;
686
- const {
687
- mainAxis: checkMainAxis = true,
688
- crossAxis: checkCrossAxis = true,
689
- fallbackPlacements: specifiedFallbackPlacements,
690
- fallbackStrategy = 'bestFit',
691
- fallbackAxisSideDirection = 'none',
692
- flipAlignment = true,
693
- ...detectOverflowOptions
694
- } = evaluate(options, state);
695
-
696
- // If a reset by the arrow was caused due to an alignment offset being
697
- // added, we should skip any logic now since `flip()` has already done its
698
- // work.
699
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
700
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
701
- return {};
702
- }
703
- const side = getSide(placement);
704
- const initialSideAxis = getSideAxis(initialPlacement);
705
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
706
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
707
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
708
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
709
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
710
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
711
- }
712
- const placements = [initialPlacement, ...fallbackPlacements];
713
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
714
- const overflows = [];
715
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
716
- if (checkMainAxis) {
717
- overflows.push(overflow[side]);
718
- }
719
- if (checkCrossAxis) {
720
- const sides = getAlignmentSides(placement, rects, rtl);
721
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
722
- }
723
- overflowsData = [...overflowsData, {
724
- placement,
725
- overflows
726
- }];
727
-
728
- // One or more sides is overflowing.
729
- if (!overflows.every(side => side <= 0)) {
730
- var _middlewareData$flip2, _overflowsData$filter;
731
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
732
- const nextPlacement = placements[nextIndex];
733
- if (nextPlacement) {
734
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
735
- if (!ignoreCrossAxisOverflow ||
736
- // We leave the current main axis only if every placement on that axis
737
- // overflows the main axis.
738
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
739
- // Try next placement and re-run the lifecycle.
740
- return {
741
- data: {
742
- index: nextIndex,
743
- overflows: overflowsData
744
- },
745
- reset: {
746
- placement: nextPlacement
747
- }
748
- };
749
- }
750
- }
751
-
752
- // First, find the candidates that fit on the mainAxis side of overflow,
753
- // then find the placement that fits the best on the main crossAxis side.
754
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
755
-
756
- // Otherwise fallback.
757
- if (!resetPlacement) {
758
- switch (fallbackStrategy) {
759
- case 'bestFit':
760
- {
761
- var _overflowsData$filter2;
762
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
763
- if (hasFallbackAxisSideDirection) {
764
- const currentSideAxis = getSideAxis(d.placement);
765
- return currentSideAxis === initialSideAxis ||
766
- // Create a bias to the `y` side axis due to horizontal
767
- // reading directions favoring greater width.
768
- currentSideAxis === 'y';
769
- }
770
- return true;
771
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
772
- if (placement) {
773
- resetPlacement = placement;
774
- }
775
- break;
776
- }
777
- case 'initialPlacement':
778
- resetPlacement = initialPlacement;
779
- break;
780
- }
781
- }
782
- if (placement !== resetPlacement) {
783
- return {
784
- reset: {
785
- placement: resetPlacement
786
- }
787
- };
788
- }
789
- }
790
- return {};
791
- }
792
- };
793
- };
794
-
795
- function getSideOffsets(overflow, rect) {
796
- return {
797
- top: overflow.top - rect.height,
798
- right: overflow.right - rect.width,
799
- bottom: overflow.bottom - rect.height,
800
- left: overflow.left - rect.width
801
- };
802
- }
803
- function isAnySideFullyClipped(overflow) {
804
- return sides.some(side => overflow[side] >= 0);
805
- }
806
- /**
807
- * Provides data to hide the floating element in applicable situations, such as
808
- * when it is not in the same clipping context as the reference element.
809
- * @see https://floating-ui.com/docs/hide
810
- */
811
- const hide$2 = function (options) {
812
- if (options === void 0) {
813
- options = {};
814
- }
815
- return {
816
- name: 'hide',
817
- options,
818
- async fn(state) {
819
- const {
820
- rects,
821
- platform
822
- } = state;
823
- const {
824
- strategy = 'referenceHidden',
825
- ...detectOverflowOptions
826
- } = evaluate(options, state);
827
- switch (strategy) {
828
- case 'referenceHidden':
829
- {
830
- const overflow = await platform.detectOverflow(state, {
831
- ...detectOverflowOptions,
832
- elementContext: 'reference'
833
- });
834
- const offsets = getSideOffsets(overflow, rects.reference);
835
- return {
836
- data: {
837
- referenceHiddenOffsets: offsets,
838
- referenceHidden: isAnySideFullyClipped(offsets)
839
- }
840
- };
841
- }
842
- case 'escaped':
843
- {
844
- const overflow = await platform.detectOverflow(state, {
845
- ...detectOverflowOptions,
846
- altBoundary: true
847
- });
848
- const offsets = getSideOffsets(overflow, rects.floating);
849
- return {
850
- data: {
851
- escapedOffsets: offsets,
852
- escaped: isAnySideFullyClipped(offsets)
853
- }
854
- };
855
- }
856
- default:
857
- {
858
- return {};
859
- }
860
- }
861
- }
862
- };
863
- };
864
-
865
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
866
-
867
- // For type backwards-compatibility, the `OffsetOptions` type was also
868
- // Derivable.
869
-
870
- async function convertValueToCoords(state, options) {
871
- const {
872
- placement,
873
- platform,
874
- elements
875
- } = state;
876
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
877
- const side = getSide(placement);
878
- const alignment = getAlignment(placement);
879
- const isVertical = getSideAxis(placement) === 'y';
880
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
881
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
882
- const rawValue = evaluate(options, state);
883
-
884
- // eslint-disable-next-line prefer-const
885
- let {
886
- mainAxis,
887
- crossAxis,
888
- alignmentAxis
889
- } = typeof rawValue === 'number' ? {
890
- mainAxis: rawValue,
891
- crossAxis: 0,
892
- alignmentAxis: null
893
- } : {
894
- mainAxis: rawValue.mainAxis || 0,
895
- crossAxis: rawValue.crossAxis || 0,
896
- alignmentAxis: rawValue.alignmentAxis
897
- };
898
- if (alignment && typeof alignmentAxis === 'number') {
899
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
900
- }
901
- return isVertical ? {
902
- x: crossAxis * crossAxisMulti,
903
- y: mainAxis * mainAxisMulti
904
- } : {
905
- x: mainAxis * mainAxisMulti,
906
- y: crossAxis * crossAxisMulti
907
- };
908
- }
909
-
910
- /**
911
- * Modifies the placement by translating the floating element along the
912
- * specified axes.
913
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
914
- * object may be passed.
915
- * @see https://floating-ui.com/docs/offset
916
- */
917
- const offset$2 = function (options) {
918
- if (options === void 0) {
919
- options = 0;
920
- }
921
- return {
922
- name: 'offset',
923
- options,
924
- async fn(state) {
925
- var _middlewareData$offse, _middlewareData$arrow;
926
- const {
927
- x,
928
- y,
929
- placement,
930
- middlewareData
931
- } = state;
932
- const diffCoords = await convertValueToCoords(state, options);
933
-
934
- // If the placement is the same and the arrow caused an alignment offset
935
- // then we don't need to change the positioning coordinates.
936
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
937
- return {};
938
- }
939
- return {
940
- x: x + diffCoords.x,
941
- y: y + diffCoords.y,
942
- data: {
943
- ...diffCoords,
944
- placement
945
- }
946
- };
947
- }
948
- };
949
- };
950
-
951
- /**
952
- * Optimizes the visibility of the floating element by shifting it in order to
953
- * keep it in view when it will overflow the clipping boundary.
954
- * @see https://floating-ui.com/docs/shift
955
- */
956
- const shift$2 = function (options) {
957
- if (options === void 0) {
958
- options = {};
959
- }
960
- return {
961
- name: 'shift',
962
- options,
963
- async fn(state) {
964
- const {
965
- x,
966
- y,
967
- placement,
968
- platform
969
- } = state;
970
- const {
971
- mainAxis: checkMainAxis = true,
972
- crossAxis: checkCrossAxis = false,
973
- limiter = {
974
- fn: _ref => {
975
- let {
976
- x,
977
- y
978
- } = _ref;
979
- return {
980
- x,
981
- y
982
- };
983
- }
984
- },
985
- ...detectOverflowOptions
986
- } = evaluate(options, state);
987
- const coords = {
988
- x,
989
- y
990
- };
991
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
992
- const crossAxis = getSideAxis(getSide(placement));
993
- const mainAxis = getOppositeAxis(crossAxis);
994
- let mainAxisCoord = coords[mainAxis];
995
- let crossAxisCoord = coords[crossAxis];
996
- if (checkMainAxis) {
997
- const minSide = mainAxis === 'y' ? 'top' : 'left';
998
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
999
- const min = mainAxisCoord + overflow[minSide];
1000
- const max = mainAxisCoord - overflow[maxSide];
1001
- mainAxisCoord = clamp(min, mainAxisCoord, max);
1002
- }
1003
- if (checkCrossAxis) {
1004
- const minSide = crossAxis === 'y' ? 'top' : 'left';
1005
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
1006
- const min = crossAxisCoord + overflow[minSide];
1007
- const max = crossAxisCoord - overflow[maxSide];
1008
- crossAxisCoord = clamp(min, crossAxisCoord, max);
1009
- }
1010
- const limitedCoords = limiter.fn({
1011
- ...state,
1012
- [mainAxis]: mainAxisCoord,
1013
- [crossAxis]: crossAxisCoord
1014
- });
1015
- return {
1016
- ...limitedCoords,
1017
- data: {
1018
- x: limitedCoords.x - x,
1019
- y: limitedCoords.y - y,
1020
- enabled: {
1021
- [mainAxis]: checkMainAxis,
1022
- [crossAxis]: checkCrossAxis
1023
- }
1024
- }
1025
- };
1026
- }
1027
- };
1028
- };
1029
- /**
1030
- * Built-in `limiter` that will stop `shift()` at a certain point.
1031
- */
1032
- const limitShift$2 = function (options) {
1033
- if (options === void 0) {
1034
- options = {};
1035
- }
1036
- return {
1037
- options,
1038
- fn(state) {
1039
- const {
1040
- x,
1041
- y,
1042
- placement,
1043
- rects,
1044
- middlewareData
1045
- } = state;
1046
- const {
1047
- offset = 0,
1048
- mainAxis: checkMainAxis = true,
1049
- crossAxis: checkCrossAxis = true
1050
- } = evaluate(options, state);
1051
- const coords = {
1052
- x,
1053
- y
1054
- };
1055
- const crossAxis = getSideAxis(placement);
1056
- const mainAxis = getOppositeAxis(crossAxis);
1057
- let mainAxisCoord = coords[mainAxis];
1058
- let crossAxisCoord = coords[crossAxis];
1059
- const rawOffset = evaluate(offset, state);
1060
- const computedOffset = typeof rawOffset === 'number' ? {
1061
- mainAxis: rawOffset,
1062
- crossAxis: 0
1063
- } : {
1064
- mainAxis: 0,
1065
- crossAxis: 0,
1066
- ...rawOffset
1067
- };
1068
- if (checkMainAxis) {
1069
- const len = mainAxis === 'y' ? 'height' : 'width';
1070
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
1071
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
1072
- if (mainAxisCoord < limitMin) {
1073
- mainAxisCoord = limitMin;
1074
- } else if (mainAxisCoord > limitMax) {
1075
- mainAxisCoord = limitMax;
1076
- }
1077
- }
1078
- if (checkCrossAxis) {
1079
- var _middlewareData$offse, _middlewareData$offse2;
1080
- const len = mainAxis === 'y' ? 'width' : 'height';
1081
- const isOriginSide = originSides.has(getSide(placement));
1082
- const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
1083
- const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
1084
- if (crossAxisCoord < limitMin) {
1085
- crossAxisCoord = limitMin;
1086
- } else if (crossAxisCoord > limitMax) {
1087
- crossAxisCoord = limitMax;
1088
- }
1089
- }
1090
- return {
1091
- [mainAxis]: mainAxisCoord,
1092
- [crossAxis]: crossAxisCoord
1093
- };
1094
- }
1095
- };
1096
- };
1097
-
1098
- /**
1099
- * Provides data that allows you to change the size of the floating element —
1100
- * for instance, prevent it from overflowing the clipping boundary or match the
1101
- * width of the reference element.
1102
- * @see https://floating-ui.com/docs/size
1103
- */
1104
- const size$2 = function (options) {
1105
- if (options === void 0) {
1106
- options = {};
1107
- }
1108
- return {
1109
- name: 'size',
1110
- options,
1111
- async fn(state) {
1112
- var _state$middlewareData, _state$middlewareData2;
1113
- const {
1114
- placement,
1115
- rects,
1116
- platform,
1117
- elements
1118
- } = state;
1119
- const {
1120
- apply = () => {},
1121
- ...detectOverflowOptions
1122
- } = evaluate(options, state);
1123
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
1124
- const side = getSide(placement);
1125
- const alignment = getAlignment(placement);
1126
- const isYAxis = getSideAxis(placement) === 'y';
1127
- const {
1128
- width,
1129
- height
1130
- } = rects.floating;
1131
- let heightSide;
1132
- let widthSide;
1133
- if (side === 'top' || side === 'bottom') {
1134
- heightSide = side;
1135
- widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
1136
- } else {
1137
- widthSide = side;
1138
- heightSide = alignment === 'end' ? 'top' : 'bottom';
1139
- }
1140
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
1141
- const maximumClippingWidth = width - overflow.left - overflow.right;
1142
- const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
1143
- const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
1144
- const noShift = !state.middlewareData.shift;
1145
- let availableHeight = overflowAvailableHeight;
1146
- let availableWidth = overflowAvailableWidth;
1147
- if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
1148
- availableWidth = maximumClippingWidth;
1149
- }
1150
- if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
1151
- availableHeight = maximumClippingHeight;
1152
- }
1153
- if (noShift && !alignment) {
1154
- const xMin = max(overflow.left, 0);
1155
- const xMax = max(overflow.right, 0);
1156
- const yMin = max(overflow.top, 0);
1157
- const yMax = max(overflow.bottom, 0);
1158
- if (isYAxis) {
1159
- availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
1160
- } else {
1161
- availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
1162
- }
1163
- }
1164
- await apply({
1165
- ...state,
1166
- availableWidth,
1167
- availableHeight
1168
- });
1169
- const nextDimensions = await platform.getDimensions(elements.floating);
1170
- if (width !== nextDimensions.width || height !== nextDimensions.height) {
1171
- return {
1172
- reset: {
1173
- rects: true
1174
- }
1175
- };
1176
- }
1177
- return {};
1178
- }
1179
- };
1180
- };
1181
-
1182
- function hasWindow() {
1183
- return typeof window !== 'undefined';
1184
- }
1185
- function getNodeName(node) {
1186
- if (isNode(node)) {
1187
- return (node.nodeName || '').toLowerCase();
1188
- }
1189
- // Mocked nodes in testing environments may not be instances of Node. By
1190
- // returning `#document` an infinite loop won't occur.
1191
- // https://github.com/floating-ui/floating-ui/issues/2317
1192
- return '#document';
1193
- }
1194
- function getWindow(node) {
1195
- var _node$ownerDocument;
1196
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
1197
- }
1198
- function getDocumentElement(node) {
1199
- var _ref;
1200
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
1201
- }
1202
- function isNode(value) {
1203
- if (!hasWindow()) {
1204
- return false;
1205
- }
1206
- return value instanceof Node || value instanceof getWindow(value).Node;
1207
- }
1208
- function isElement(value) {
1209
- if (!hasWindow()) {
1210
- return false;
1211
- }
1212
- return value instanceof Element || value instanceof getWindow(value).Element;
1213
- }
1214
- function isHTMLElement(value) {
1215
- if (!hasWindow()) {
1216
- return false;
1217
- }
1218
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
1219
- }
1220
- function isShadowRoot(value) {
1221
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
1222
- return false;
1223
- }
1224
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
1225
- }
1226
- function isOverflowElement(element) {
1227
- const {
1228
- overflow,
1229
- overflowX,
1230
- overflowY,
1231
- display
1232
- } = getComputedStyle$1(element);
1233
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
1234
- }
1235
- function isTableElement(element) {
1236
- return /^(table|td|th)$/.test(getNodeName(element));
1237
- }
1238
- function isTopLayer(element) {
1239
- try {
1240
- if (element.matches(':popover-open')) {
1241
- return true;
1242
- }
1243
- } catch (_e) {
1244
- // no-op
1245
- }
1246
- try {
1247
- return element.matches(':modal');
1248
- } catch (_e) {
1249
- return false;
1250
- }
1251
- }
1252
- const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
1253
- const containRe = /paint|layout|strict|content/;
1254
- const isNotNone = value => !!value && value !== 'none';
1255
- let isWebKitValue;
1256
- function isContainingBlock(elementOrCss) {
1257
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
1258
-
1259
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1260
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
1261
- return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
1262
- }
1263
- function getContainingBlock(element) {
1264
- let currentNode = getParentNode(element);
1265
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
1266
- if (isContainingBlock(currentNode)) {
1267
- return currentNode;
1268
- } else if (isTopLayer(currentNode)) {
1269
- return null;
1270
- }
1271
- currentNode = getParentNode(currentNode);
1272
- }
1273
- return null;
1274
- }
1275
- function isWebKit() {
1276
- if (isWebKitValue == null) {
1277
- isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
1278
- }
1279
- return isWebKitValue;
1280
- }
1281
- function isLastTraversableNode(node) {
1282
- return /^(html|body|#document)$/.test(getNodeName(node));
1283
- }
1284
- function getComputedStyle$1(element) {
1285
- return getWindow(element).getComputedStyle(element);
1286
- }
1287
- function getNodeScroll(element) {
1288
- if (isElement(element)) {
1289
- return {
1290
- scrollLeft: element.scrollLeft,
1291
- scrollTop: element.scrollTop
1292
- };
1293
- }
1294
- return {
1295
- scrollLeft: element.scrollX,
1296
- scrollTop: element.scrollY
1297
- };
1298
- }
1299
- function getParentNode(node) {
1300
- if (getNodeName(node) === 'html') {
1301
- return node;
1302
- }
1303
- const result =
1304
- // Step into the shadow DOM of the parent of a slotted node.
1305
- node.assignedSlot ||
1306
- // DOM Element detected.
1307
- node.parentNode ||
1308
- // ShadowRoot detected.
1309
- isShadowRoot(node) && node.host ||
1310
- // Fallback.
1311
- getDocumentElement(node);
1312
- return isShadowRoot(result) ? result.host : result;
1313
- }
1314
- function getNearestOverflowAncestor(node) {
1315
- const parentNode = getParentNode(node);
1316
- if (isLastTraversableNode(parentNode)) {
1317
- return node.ownerDocument ? node.ownerDocument.body : node.body;
1318
- }
1319
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
1320
- return parentNode;
1321
- }
1322
- return getNearestOverflowAncestor(parentNode);
1323
- }
1324
- function getOverflowAncestors(node, list, traverseIframes) {
1325
- var _node$ownerDocument2;
1326
- if (list === void 0) {
1327
- list = [];
1328
- }
1329
- if (traverseIframes === void 0) {
1330
- traverseIframes = true;
1331
- }
1332
- const scrollableAncestor = getNearestOverflowAncestor(node);
1333
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
1334
- const win = getWindow(scrollableAncestor);
1335
- if (isBody) {
1336
- const frameElement = getFrameElement(win);
1337
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
1338
- } else {
1339
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
1340
- }
1341
- }
1342
- function getFrameElement(win) {
1343
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
1344
- }
1345
-
1346
- function getCssDimensions(element) {
1347
- const css = getComputedStyle$1(element);
1348
- // In testing environments, the `width` and `height` properties are empty
1349
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
1350
- let width = parseFloat(css.width) || 0;
1351
- let height = parseFloat(css.height) || 0;
1352
- const hasOffset = isHTMLElement(element);
1353
- const offsetWidth = hasOffset ? element.offsetWidth : width;
1354
- const offsetHeight = hasOffset ? element.offsetHeight : height;
1355
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
1356
- if (shouldFallback) {
1357
- width = offsetWidth;
1358
- height = offsetHeight;
1359
- }
1360
- return {
1361
- width,
1362
- height,
1363
- $: shouldFallback
1364
- };
1365
- }
1366
-
1367
- function unwrapElement(element) {
1368
- return !isElement(element) ? element.contextElement : element;
1369
- }
1370
-
1371
- function getScale(element) {
1372
- const domElement = unwrapElement(element);
1373
- if (!isHTMLElement(domElement)) {
1374
- return createCoords(1);
1375
- }
1376
- const rect = domElement.getBoundingClientRect();
1377
- const {
1378
- width,
1379
- height,
1380
- $
1381
- } = getCssDimensions(domElement);
1382
- let x = ($ ? round(rect.width) : rect.width) / width;
1383
- let y = ($ ? round(rect.height) : rect.height) / height;
1384
-
1385
- // 0, NaN, or Infinity should always fallback to 1.
1386
-
1387
- if (!x || !Number.isFinite(x)) {
1388
- x = 1;
1389
- }
1390
- if (!y || !Number.isFinite(y)) {
1391
- y = 1;
1392
- }
1393
- return {
1394
- x,
1395
- y
1396
- };
1397
- }
1398
-
1399
- const noOffsets = /*#__PURE__*/createCoords(0);
1400
- function getVisualOffsets(element) {
1401
- const win = getWindow(element);
1402
- if (!isWebKit() || !win.visualViewport) {
1403
- return noOffsets;
1404
- }
1405
- return {
1406
- x: win.visualViewport.offsetLeft,
1407
- y: win.visualViewport.offsetTop
1408
- };
1409
- }
1410
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
1411
- if (isFixed === void 0) {
1412
- isFixed = false;
1413
- }
1414
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
1415
- return false;
1416
- }
1417
- return isFixed;
1418
- }
1419
-
1420
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
1421
- if (includeScale === void 0) {
1422
- includeScale = false;
1423
- }
1424
- if (isFixedStrategy === void 0) {
1425
- isFixedStrategy = false;
1426
- }
1427
- const clientRect = element.getBoundingClientRect();
1428
- const domElement = unwrapElement(element);
1429
- let scale = createCoords(1);
1430
- if (includeScale) {
1431
- if (offsetParent) {
1432
- if (isElement(offsetParent)) {
1433
- scale = getScale(offsetParent);
1434
- }
1435
- } else {
1436
- scale = getScale(element);
1437
- }
1438
- }
1439
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
1440
- let x = (clientRect.left + visualOffsets.x) / scale.x;
1441
- let y = (clientRect.top + visualOffsets.y) / scale.y;
1442
- let width = clientRect.width / scale.x;
1443
- let height = clientRect.height / scale.y;
1444
- if (domElement) {
1445
- const win = getWindow(domElement);
1446
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
1447
- let currentWin = win;
1448
- let currentIFrame = getFrameElement(currentWin);
1449
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1450
- const iframeScale = getScale(currentIFrame);
1451
- const iframeRect = currentIFrame.getBoundingClientRect();
1452
- const css = getComputedStyle$1(currentIFrame);
1453
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1454
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1455
- x *= iframeScale.x;
1456
- y *= iframeScale.y;
1457
- width *= iframeScale.x;
1458
- height *= iframeScale.y;
1459
- x += left;
1460
- y += top;
1461
- currentWin = getWindow(currentIFrame);
1462
- currentIFrame = getFrameElement(currentWin);
1463
- }
1464
- }
1465
- return rectToClientRect({
1466
- width,
1467
- height,
1468
- x,
1469
- y
1470
- });
1471
- }
1472
-
1473
- // If <html> has a CSS width greater than the viewport, then this will be
1474
- // incorrect for RTL.
1475
- function getWindowScrollBarX(element, rect) {
1476
- const leftScroll = getNodeScroll(element).scrollLeft;
1477
- if (!rect) {
1478
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1479
- }
1480
- return rect.left + leftScroll;
1481
- }
1482
-
1483
- function getHTMLOffset(documentElement, scroll) {
1484
- const htmlRect = documentElement.getBoundingClientRect();
1485
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1486
- const y = htmlRect.top + scroll.scrollTop;
1487
- return {
1488
- x,
1489
- y
1490
- };
1491
- }
1492
-
1493
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1494
- let {
1495
- elements,
1496
- rect,
1497
- offsetParent,
1498
- strategy
1499
- } = _ref;
1500
- const isFixed = strategy === 'fixed';
1501
- const documentElement = getDocumentElement(offsetParent);
1502
- const topLayer = elements ? isTopLayer(elements.floating) : false;
1503
- if (offsetParent === documentElement || topLayer && isFixed) {
1504
- return rect;
1505
- }
1506
- let scroll = {
1507
- scrollLeft: 0,
1508
- scrollTop: 0
1509
- };
1510
- let scale = createCoords(1);
1511
- const offsets = createCoords(0);
1512
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1513
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1514
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1515
- scroll = getNodeScroll(offsetParent);
1516
- }
1517
- if (isOffsetParentAnElement) {
1518
- const offsetRect = getBoundingClientRect(offsetParent);
1519
- scale = getScale(offsetParent);
1520
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1521
- offsets.y = offsetRect.y + offsetParent.clientTop;
1522
- }
1523
- }
1524
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1525
- return {
1526
- width: rect.width * scale.x,
1527
- height: rect.height * scale.y,
1528
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1529
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1530
- };
1531
- }
1532
-
1533
- function getClientRects(element) {
1534
- return Array.from(element.getClientRects());
1535
- }
1536
-
1537
- // Gets the entire size of the scrollable document area, even extending outside
1538
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
1539
- function getDocumentRect(element) {
1540
- const html = getDocumentElement(element);
1541
- const scroll = getNodeScroll(element);
1542
- const body = element.ownerDocument.body;
1543
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1544
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1545
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
1546
- const y = -scroll.scrollTop;
1547
- if (getComputedStyle$1(body).direction === 'rtl') {
1548
- x += max(html.clientWidth, body.clientWidth) - width;
1549
- }
1550
- return {
1551
- width,
1552
- height,
1553
- x,
1554
- y
1555
- };
1556
- }
1557
-
1558
- // Safety check: ensure the scrollbar space is reasonable in case this
1559
- // calculation is affected by unusual styles.
1560
- // Most scrollbars leave 15-18px of space.
1561
- const SCROLLBAR_MAX = 25;
1562
- function getViewportRect(element, strategy) {
1563
- const win = getWindow(element);
1564
- const html = getDocumentElement(element);
1565
- const visualViewport = win.visualViewport;
1566
- let width = html.clientWidth;
1567
- let height = html.clientHeight;
1568
- let x = 0;
1569
- let y = 0;
1570
- if (visualViewport) {
1571
- width = visualViewport.width;
1572
- height = visualViewport.height;
1573
- const visualViewportBased = isWebKit();
1574
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
1575
- x = visualViewport.offsetLeft;
1576
- y = visualViewport.offsetTop;
1577
- }
1578
- }
1579
- const windowScrollbarX = getWindowScrollBarX(html);
1580
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1581
- // visual width of the <html> but this is not considered in the size
1582
- // of `html.clientWidth`.
1583
- if (windowScrollbarX <= 0) {
1584
- const doc = html.ownerDocument;
1585
- const body = doc.body;
1586
- const bodyStyles = getComputedStyle(body);
1587
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1588
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1589
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1590
- width -= clippingStableScrollbarWidth;
1591
- }
1592
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1593
- // If the <body> scrollbar is on the left, the width needs to be extended
1594
- // by the scrollbar amount so there isn't extra space on the right.
1595
- width += windowScrollbarX;
1596
- }
1597
- return {
1598
- width,
1599
- height,
1600
- x,
1601
- y
1602
- };
1603
- }
1604
-
1605
- // Returns the inner client rect, subtracting scrollbars if present.
1606
- function getInnerBoundingClientRect(element, strategy) {
1607
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
1608
- const top = clientRect.top + element.clientTop;
1609
- const left = clientRect.left + element.clientLeft;
1610
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
1611
- const width = element.clientWidth * scale.x;
1612
- const height = element.clientHeight * scale.y;
1613
- const x = left * scale.x;
1614
- const y = top * scale.y;
1615
- return {
1616
- width,
1617
- height,
1618
- x,
1619
- y
1620
- };
1621
- }
1622
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
1623
- let rect;
1624
- if (clippingAncestor === 'viewport') {
1625
- rect = getViewportRect(element, strategy);
1626
- } else if (clippingAncestor === 'document') {
1627
- rect = getDocumentRect(getDocumentElement(element));
1628
- } else if (isElement(clippingAncestor)) {
1629
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
1630
- } else {
1631
- const visualOffsets = getVisualOffsets(element);
1632
- rect = {
1633
- x: clippingAncestor.x - visualOffsets.x,
1634
- y: clippingAncestor.y - visualOffsets.y,
1635
- width: clippingAncestor.width,
1636
- height: clippingAncestor.height
1637
- };
1638
- }
1639
- return rectToClientRect(rect);
1640
- }
1641
- function hasFixedPositionAncestor(element, stopNode) {
1642
- const parentNode = getParentNode(element);
1643
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
1644
- return false;
1645
- }
1646
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
1647
- }
1648
-
1649
- // A "clipping ancestor" is an `overflow` element with the characteristic of
1650
- // clipping (or hiding) child elements. This returns all clipping ancestors
1651
- // of the given element up the tree.
1652
- function getClippingElementAncestors(element, cache) {
1653
- const cachedResult = cache.get(element);
1654
- if (cachedResult) {
1655
- return cachedResult;
1656
- }
1657
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
1658
- let currentContainingBlockComputedStyle = null;
1659
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
1660
- let currentNode = elementIsFixed ? getParentNode(element) : element;
1661
-
1662
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1663
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1664
- const computedStyle = getComputedStyle$1(currentNode);
1665
- const currentNodeIsContaining = isContainingBlock(currentNode);
1666
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1667
- currentContainingBlockComputedStyle = null;
1668
- }
1669
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1670
- if (shouldDropCurrentNode) {
1671
- // Drop non-containing blocks.
1672
- result = result.filter(ancestor => ancestor !== currentNode);
1673
- } else {
1674
- // Record last containing block for next iteration.
1675
- currentContainingBlockComputedStyle = computedStyle;
1676
- }
1677
- currentNode = getParentNode(currentNode);
1678
- }
1679
- cache.set(element, result);
1680
- return result;
1681
- }
1682
-
1683
- // Gets the maximum area that the element is visible in due to any number of
1684
- // clipping ancestors.
1685
- function getClippingRect(_ref) {
1686
- let {
1687
- element,
1688
- boundary,
1689
- rootBoundary,
1690
- strategy
1691
- } = _ref;
1692
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1693
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1694
- const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
1695
- let top = firstRect.top;
1696
- let right = firstRect.right;
1697
- let bottom = firstRect.bottom;
1698
- let left = firstRect.left;
1699
- for (let i = 1; i < clippingAncestors.length; i++) {
1700
- const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
1701
- top = max(rect.top, top);
1702
- right = min(rect.right, right);
1703
- bottom = min(rect.bottom, bottom);
1704
- left = max(rect.left, left);
1705
- }
1706
- return {
1707
- width: right - left,
1708
- height: bottom - top,
1709
- x: left,
1710
- y: top
1711
- };
1712
- }
1713
-
1714
- function getDimensions(element) {
1715
- const {
1716
- width,
1717
- height
1718
- } = getCssDimensions(element);
1719
- return {
1720
- width,
1721
- height
1722
- };
1723
- }
1724
-
1725
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1726
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1727
- const documentElement = getDocumentElement(offsetParent);
1728
- const isFixed = strategy === 'fixed';
1729
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1730
- let scroll = {
1731
- scrollLeft: 0,
1732
- scrollTop: 0
1733
- };
1734
- const offsets = createCoords(0);
1735
-
1736
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1737
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1738
- function setLeftRTLScrollbarOffset() {
1739
- offsets.x = getWindowScrollBarX(documentElement);
1740
- }
1741
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1742
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1743
- scroll = getNodeScroll(offsetParent);
1744
- }
1745
- if (isOffsetParentAnElement) {
1746
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1747
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1748
- offsets.y = offsetRect.y + offsetParent.clientTop;
1749
- } else if (documentElement) {
1750
- setLeftRTLScrollbarOffset();
1751
- }
1752
- }
1753
- if (isFixed && !isOffsetParentAnElement && documentElement) {
1754
- setLeftRTLScrollbarOffset();
1755
- }
1756
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1757
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1758
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1759
- return {
1760
- x,
1761
- y,
1762
- width: rect.width,
1763
- height: rect.height
1764
- };
1765
- }
1766
-
1767
- function isStaticPositioned(element) {
1768
- return getComputedStyle$1(element).position === 'static';
1769
- }
1770
-
1771
- function getTrueOffsetParent(element, polyfill) {
1772
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
1773
- return null;
1774
- }
1775
- if (polyfill) {
1776
- return polyfill(element);
1777
- }
1778
- let rawOffsetParent = element.offsetParent;
1779
-
1780
- // Firefox returns the <html> element as the offsetParent if it's non-static,
1781
- // while Chrome and Safari return the <body> element. The <body> element must
1782
- // be used to perform the correct calculations even if the <html> element is
1783
- // non-static.
1784
- if (getDocumentElement(element) === rawOffsetParent) {
1785
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1786
- }
1787
- return rawOffsetParent;
1788
- }
1789
-
1790
- // Gets the closest ancestor positioned element. Handles some edge cases,
1791
- // such as table ancestors and cross browser bugs.
1792
- function getOffsetParent(element, polyfill) {
1793
- const win = getWindow(element);
1794
- if (isTopLayer(element)) {
1795
- return win;
1796
- }
1797
- if (!isHTMLElement(element)) {
1798
- let svgOffsetParent = getParentNode(element);
1799
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1800
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1801
- return svgOffsetParent;
1802
- }
1803
- svgOffsetParent = getParentNode(svgOffsetParent);
1804
- }
1805
- return win;
1806
- }
1807
- let offsetParent = getTrueOffsetParent(element, polyfill);
1808
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1809
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1810
- }
1811
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1812
- return win;
1813
- }
1814
- return offsetParent || getContainingBlock(element) || win;
1815
- }
1816
-
1817
- const getElementRects = async function (data) {
1818
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1819
- const getDimensionsFn = this.getDimensions;
1820
- const floatingDimensions = await getDimensionsFn(data.floating);
1821
- return {
1822
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1823
- floating: {
1824
- x: 0,
1825
- y: 0,
1826
- width: floatingDimensions.width,
1827
- height: floatingDimensions.height
1828
- }
1829
- };
1830
- };
1831
-
1832
- function isRTL(element) {
1833
- return getComputedStyle$1(element).direction === 'rtl';
1834
- }
1835
-
1836
- const platform = {
1837
- convertOffsetParentRelativeRectToViewportRelativeRect,
1838
- getDocumentElement,
1839
- getClippingRect,
1840
- getOffsetParent,
1841
- getElementRects,
1842
- getClientRects,
1843
- getDimensions,
1844
- getScale,
1845
- isElement,
1846
- isRTL
1847
- };
1848
-
1849
- function rectsAreEqual(a, b) {
1850
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
1851
- }
1852
-
1853
- // https://samthor.au/2021/observing-dom/
1854
- function observeMove(element, onMove) {
1855
- let io = null;
1856
- let timeoutId;
1857
- const root = getDocumentElement(element);
1858
- function cleanup() {
1859
- var _io;
1860
- clearTimeout(timeoutId);
1861
- (_io = io) == null || _io.disconnect();
1862
- io = null;
1863
- }
1864
- function refresh(skip, threshold) {
1865
- if (skip === void 0) {
1866
- skip = false;
1867
- }
1868
- if (threshold === void 0) {
1869
- threshold = 1;
1870
- }
1871
- cleanup();
1872
- const elementRectForRootMargin = element.getBoundingClientRect();
1873
- const {
1874
- left,
1875
- top,
1876
- width,
1877
- height
1878
- } = elementRectForRootMargin;
1879
- if (!skip) {
1880
- onMove();
1881
- }
1882
- if (!width || !height) {
1883
- return;
1884
- }
1885
- const insetTop = floor(top);
1886
- const insetRight = floor(root.clientWidth - (left + width));
1887
- const insetBottom = floor(root.clientHeight - (top + height));
1888
- const insetLeft = floor(left);
1889
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1890
- const options = {
1891
- rootMargin,
1892
- threshold: max(0, min(1, threshold)) || 1
1893
- };
1894
- let isFirstUpdate = true;
1895
- function handleObserve(entries) {
1896
- const ratio = entries[0].intersectionRatio;
1897
- if (ratio !== threshold) {
1898
- if (!isFirstUpdate) {
1899
- return refresh();
1900
- }
1901
- if (!ratio) {
1902
- // If the reference is clipped, the ratio is 0. Throttle the refresh
1903
- // to prevent an infinite loop of updates.
1904
- timeoutId = setTimeout(() => {
1905
- refresh(false, 1e-7);
1906
- }, 1000);
1907
- } else {
1908
- refresh(false, ratio);
1909
- }
1910
- }
1911
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
1912
- // It's possible that even though the ratio is reported as 1, the
1913
- // element is not actually fully within the IntersectionObserver's root
1914
- // area anymore. This can happen under performance constraints. This may
1915
- // be a bug in the browser's IntersectionObserver implementation. To
1916
- // work around this, we compare the element's bounding rect now with
1917
- // what it was at the time we created the IntersectionObserver. If they
1918
- // are not equal then the element moved, so we refresh.
1919
- refresh();
1920
- }
1921
- isFirstUpdate = false;
1922
- }
1923
-
1924
- // Older browsers don't support a `document` as the root and will throw an
1925
- // error.
1926
- try {
1927
- io = new IntersectionObserver(handleObserve, {
1928
- ...options,
1929
- // Handle <iframe>s
1930
- root: root.ownerDocument
1931
- });
1932
- } catch (_e) {
1933
- io = new IntersectionObserver(handleObserve, options);
1934
- }
1935
- io.observe(element);
1936
- }
1937
- refresh(true);
1938
- return cleanup;
1939
- }
1940
-
1941
- /**
1942
- * Automatically updates the position of the floating element when necessary.
1943
- * Should only be called when the floating element is mounted on the DOM or
1944
- * visible on the screen.
1945
- * @returns cleanup function that should be invoked when the floating element is
1946
- * removed from the DOM or hidden from the screen.
1947
- * @see https://floating-ui.com/docs/autoUpdate
1948
- */
1949
- function autoUpdate(reference, floating, update, options) {
1950
- if (options === void 0) {
1951
- options = {};
1952
- }
1953
- const {
1954
- ancestorScroll = true,
1955
- ancestorResize = true,
1956
- elementResize = typeof ResizeObserver === 'function',
1957
- layoutShift = typeof IntersectionObserver === 'function',
1958
- animationFrame = false
1959
- } = options;
1960
- const referenceEl = unwrapElement(reference);
1961
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
1962
- ancestors.forEach(ancestor => {
1963
- ancestorScroll && ancestor.addEventListener('scroll', update, {
1964
- passive: true
1965
- });
1966
- ancestorResize && ancestor.addEventListener('resize', update);
1967
- });
1968
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
1969
- let reobserveFrame = -1;
1970
- let resizeObserver = null;
1971
- if (elementResize) {
1972
- resizeObserver = new ResizeObserver(_ref => {
1973
- let [firstEntry] = _ref;
1974
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
1975
- // Prevent update loops when using the `size` middleware.
1976
- // https://github.com/floating-ui/floating-ui/issues/1740
1977
- resizeObserver.unobserve(floating);
1978
- cancelAnimationFrame(reobserveFrame);
1979
- reobserveFrame = requestAnimationFrame(() => {
1980
- var _resizeObserver;
1981
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1982
- });
1983
- }
1984
- update();
1985
- });
1986
- if (referenceEl && !animationFrame) {
1987
- resizeObserver.observe(referenceEl);
1988
- }
1989
- if (floating) {
1990
- resizeObserver.observe(floating);
1991
- }
1992
- }
1993
- let frameId;
1994
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
1995
- if (animationFrame) {
1996
- frameLoop();
1997
- }
1998
- function frameLoop() {
1999
- const nextRefRect = getBoundingClientRect(reference);
2000
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
2001
- update();
2002
- }
2003
- prevRefRect = nextRefRect;
2004
- frameId = requestAnimationFrame(frameLoop);
2005
- }
2006
- update();
2007
- return () => {
2008
- var _resizeObserver2;
2009
- ancestors.forEach(ancestor => {
2010
- ancestorScroll && ancestor.removeEventListener('scroll', update);
2011
- ancestorResize && ancestor.removeEventListener('resize', update);
2012
- });
2013
- cleanupIo == null || cleanupIo();
2014
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
2015
- resizeObserver = null;
2016
- if (animationFrame) {
2017
- cancelAnimationFrame(frameId);
2018
- }
2019
- };
2020
- }
2021
-
2022
- /**
2023
- * Modifies the placement by translating the floating element along the
2024
- * specified axes.
2025
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
2026
- * object may be passed.
2027
- * @see https://floating-ui.com/docs/offset
2028
- */
2029
- const offset$1 = offset$2;
2030
-
2031
- /**
2032
- * Optimizes the visibility of the floating element by shifting it in order to
2033
- * keep it in view when it will overflow the clipping boundary.
2034
- * @see https://floating-ui.com/docs/shift
2035
- */
2036
- const shift$1 = shift$2;
2037
-
2038
- /**
2039
- * Optimizes the visibility of the floating element by flipping the `placement`
2040
- * in order to keep it in view when the preferred placement(s) will overflow the
2041
- * clipping boundary. Alternative to `autoPlacement`.
2042
- * @see https://floating-ui.com/docs/flip
2043
- */
2044
- const flip$1 = flip$2;
2045
-
2046
- /**
2047
- * Provides data that allows you to change the size of the floating element —
2048
- * for instance, prevent it from overflowing the clipping boundary or match the
2049
- * width of the reference element.
2050
- * @see https://floating-ui.com/docs/size
2051
- */
2052
- const size$1 = size$2;
2053
-
2054
- /**
2055
- * Provides data to hide the floating element in applicable situations, such as
2056
- * when it is not in the same clipping context as the reference element.
2057
- * @see https://floating-ui.com/docs/hide
2058
- */
2059
- const hide$1 = hide$2;
2060
-
2061
- /**
2062
- * Provides data to position an inner element of the floating element so that it
2063
- * appears centered to the reference element.
2064
- * @see https://floating-ui.com/docs/arrow
2065
- */
2066
- const arrow$2 = arrow$3;
2067
-
2068
- /**
2069
- * Built-in `limiter` that will stop `shift()` at a certain point.
2070
- */
2071
- const limitShift$1 = limitShift$2;
2072
-
2073
- /**
2074
- * Computes the `x` and `y` coordinates that will place the floating element
2075
- * next to a given reference element.
2076
- */
2077
- const computePosition = (reference, floating, options) => {
2078
- // This caches the expensive `getClippingElementAncestors` function so that
2079
- // multiple lifecycle resets re-use the same result. It only lives for a
2080
- // single call. If other functions become expensive, we can add them as well.
2081
- const cache = new Map();
2082
- const mergedOptions = {
2083
- platform,
2084
- ...options
2085
- };
2086
- const platformWithCache = {
2087
- ...mergedOptions.platform,
2088
- _c: cache
2089
- };
2090
- return computePosition$1(reference, floating, {
2091
- ...mergedOptions,
2092
- platform: platformWithCache
2093
- });
2094
- };
2095
-
2096
- var isClient = typeof document !== 'undefined';
2097
-
2098
- var noop = function noop() {};
2099
- var index = isClient ? useLayoutEffect : noop;
2100
-
2101
- // Fork of `fast-deep-equal` that only does the comparisons we need and compares
2102
- // functions
2103
- function deepEqual(a, b) {
2104
- if (a === b) {
2105
- return true;
2106
- }
2107
- if (typeof a !== typeof b) {
2108
- return false;
2109
- }
2110
- if (typeof a === 'function' && a.toString() === b.toString()) {
2111
- return true;
2112
- }
2113
- let length;
2114
- let i;
2115
- let keys;
2116
- if (a && b && typeof a === 'object') {
2117
- if (Array.isArray(a)) {
2118
- length = a.length;
2119
- if (length !== b.length) return false;
2120
- for (i = length; i-- !== 0;) {
2121
- if (!deepEqual(a[i], b[i])) {
2122
- return false;
2123
- }
2124
- }
2125
- return true;
2126
- }
2127
- keys = Object.keys(a);
2128
- length = keys.length;
2129
- if (length !== Object.keys(b).length) {
2130
- return false;
2131
- }
2132
- for (i = length; i-- !== 0;) {
2133
- if (!{}.hasOwnProperty.call(b, keys[i])) {
2134
- return false;
2135
- }
2136
- }
2137
- for (i = length; i-- !== 0;) {
2138
- const key = keys[i];
2139
- if (key === '_owner' && a.$$typeof) {
2140
- continue;
2141
- }
2142
- if (!deepEqual(a[key], b[key])) {
2143
- return false;
2144
- }
2145
- }
2146
- return true;
2147
- }
2148
- return a !== a && b !== b;
2149
- }
2150
-
2151
- function getDPR(element) {
2152
- if (typeof window === 'undefined') {
2153
- return 1;
2154
- }
2155
- const win = element.ownerDocument.defaultView || window;
2156
- return win.devicePixelRatio || 1;
2157
- }
2158
-
2159
- function roundByDPR(element, value) {
2160
- const dpr = getDPR(element);
2161
- return Math.round(value * dpr) / dpr;
2162
- }
2163
-
2164
- function useLatestRef(value) {
2165
- const ref = React.useRef(value);
2166
- index(() => {
2167
- ref.current = value;
2168
- });
2169
- return ref;
2170
- }
2171
-
2172
- /**
2173
- * Provides data to position a floating element.
2174
- * @see https://floating-ui.com/docs/useFloating
2175
- */
2176
- function useFloating(options) {
2177
- if (options === void 0) {
2178
- options = {};
2179
- }
2180
- const {
2181
- placement = 'bottom',
2182
- strategy = 'absolute',
2183
- middleware = [],
2184
- platform,
2185
- elements: {
2186
- reference: externalReference,
2187
- floating: externalFloating
2188
- } = {},
2189
- transform = true,
2190
- whileElementsMounted,
2191
- open
2192
- } = options;
2193
- const [data, setData] = React.useState({
2194
- x: 0,
2195
- y: 0,
2196
- strategy,
2197
- placement,
2198
- middlewareData: {},
2199
- isPositioned: false
2200
- });
2201
- const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
2202
- if (!deepEqual(latestMiddleware, middleware)) {
2203
- setLatestMiddleware(middleware);
2204
- }
2205
- const [_reference, _setReference] = React.useState(null);
2206
- const [_floating, _setFloating] = React.useState(null);
2207
- const setReference = React.useCallback(node => {
2208
- if (node !== referenceRef.current) {
2209
- referenceRef.current = node;
2210
- _setReference(node);
2211
- }
2212
- }, []);
2213
- const setFloating = React.useCallback(node => {
2214
- if (node !== floatingRef.current) {
2215
- floatingRef.current = node;
2216
- _setFloating(node);
2217
- }
2218
- }, []);
2219
- const referenceEl = externalReference || _reference;
2220
- const floatingEl = externalFloating || _floating;
2221
- const referenceRef = React.useRef(null);
2222
- const floatingRef = React.useRef(null);
2223
- const dataRef = React.useRef(data);
2224
- const hasWhileElementsMounted = whileElementsMounted != null;
2225
- const whileElementsMountedRef = useLatestRef(whileElementsMounted);
2226
- const platformRef = useLatestRef(platform);
2227
- const openRef = useLatestRef(open);
2228
- const update = React.useCallback(() => {
2229
- if (!referenceRef.current || !floatingRef.current) {
2230
- return;
2231
- }
2232
- const config = {
2233
- placement,
2234
- strategy,
2235
- middleware: latestMiddleware
2236
- };
2237
- if (platformRef.current) {
2238
- config.platform = platformRef.current;
2239
- }
2240
- computePosition(referenceRef.current, floatingRef.current, config).then(data => {
2241
- const fullData = {
2242
- ...data,
2243
- // The floating element's position may be recomputed while it's closed
2244
- // but still mounted (such as when transitioning out). To ensure
2245
- // `isPositioned` will be `false` initially on the next open, avoid
2246
- // setting it to `true` when `open === false` (must be specified).
2247
- isPositioned: openRef.current !== false
2248
- };
2249
- if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
2250
- dataRef.current = fullData;
2251
- ReactDOM.flushSync(() => {
2252
- setData(fullData);
2253
- });
2254
- }
2255
- });
2256
- }, [latestMiddleware, placement, strategy, platformRef, openRef]);
2257
- index(() => {
2258
- if (open === false && dataRef.current.isPositioned) {
2259
- dataRef.current.isPositioned = false;
2260
- setData(data => ({
2261
- ...data,
2262
- isPositioned: false
2263
- }));
2264
- }
2265
- }, [open]);
2266
- const isMountedRef = React.useRef(false);
2267
- index(() => {
2268
- isMountedRef.current = true;
2269
- return () => {
2270
- isMountedRef.current = false;
2271
- };
2272
- }, []);
2273
- index(() => {
2274
- if (referenceEl) referenceRef.current = referenceEl;
2275
- if (floatingEl) floatingRef.current = floatingEl;
2276
- if (referenceEl && floatingEl) {
2277
- if (whileElementsMountedRef.current) {
2278
- return whileElementsMountedRef.current(referenceEl, floatingEl, update);
2279
- }
2280
- update();
2281
- }
2282
- }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
2283
- const refs = React.useMemo(() => ({
2284
- reference: referenceRef,
2285
- floating: floatingRef,
2286
- setReference,
2287
- setFloating
2288
- }), [setReference, setFloating]);
2289
- const elements = React.useMemo(() => ({
2290
- reference: referenceEl,
2291
- floating: floatingEl
2292
- }), [referenceEl, floatingEl]);
2293
- const floatingStyles = React.useMemo(() => {
2294
- const initialStyles = {
2295
- position: strategy,
2296
- left: 0,
2297
- top: 0
2298
- };
2299
- if (!elements.floating) {
2300
- return initialStyles;
2301
- }
2302
- const x = roundByDPR(elements.floating, data.x);
2303
- const y = roundByDPR(elements.floating, data.y);
2304
- if (transform) {
2305
- return {
2306
- ...initialStyles,
2307
- transform: "translate(" + x + "px, " + y + "px)",
2308
- ...(getDPR(elements.floating) >= 1.5 && {
2309
- willChange: 'transform'
2310
- })
2311
- };
2312
- }
2313
- return {
2314
- position: strategy,
2315
- left: x,
2316
- top: y
2317
- };
2318
- }, [strategy, transform, elements.floating, data.x, data.y]);
2319
- return React.useMemo(() => ({
2320
- ...data,
2321
- update,
2322
- refs,
2323
- elements,
2324
- floatingStyles
2325
- }), [data, update, refs, elements, floatingStyles]);
2326
- }
2327
-
2328
- /**
2329
- * Provides data to position an inner element of the floating element so that it
2330
- * appears centered to the reference element.
2331
- * This wraps the core `arrow` middleware to allow React refs as the element.
2332
- * @see https://floating-ui.com/docs/arrow
2333
- */
2334
- const arrow$1 = options => {
2335
- function isRef(value) {
2336
- return {}.hasOwnProperty.call(value, 'current');
2337
- }
2338
- return {
2339
- name: 'arrow',
2340
- options,
2341
- fn(state) {
2342
- const {
2343
- element,
2344
- padding
2345
- } = typeof options === 'function' ? options(state) : options;
2346
- if (element && isRef(element)) {
2347
- if (element.current != null) {
2348
- return arrow$2({
2349
- element: element.current,
2350
- padding
2351
- }).fn(state);
2352
- }
2353
- return {};
2354
- }
2355
- if (element) {
2356
- return arrow$2({
2357
- element,
2358
- padding
2359
- }).fn(state);
2360
- }
2361
- return {};
2362
- }
2363
- };
2364
- };
2365
-
2366
- /**
2367
- * Modifies the placement by translating the floating element along the
2368
- * specified axes.
2369
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
2370
- * object may be passed.
2371
- * @see https://floating-ui.com/docs/offset
2372
- */
2373
- const offset = (options, deps) => {
2374
- const result = offset$1(options);
2375
- return {
2376
- name: result.name,
2377
- fn: result.fn,
2378
- options: [options, deps]
2379
- };
2380
- };
2381
-
2382
- /**
2383
- * Optimizes the visibility of the floating element by shifting it in order to
2384
- * keep it in view when it will overflow the clipping boundary.
2385
- * @see https://floating-ui.com/docs/shift
2386
- */
2387
- const shift = (options, deps) => {
2388
- const result = shift$1(options);
2389
- return {
2390
- name: result.name,
2391
- fn: result.fn,
2392
- options: [options, deps]
2393
- };
2394
- };
2395
-
2396
- /**
2397
- * Built-in `limiter` that will stop `shift()` at a certain point.
2398
- */
2399
- const limitShift = (options, deps) => {
2400
- const result = limitShift$1(options);
2401
- return {
2402
- fn: result.fn,
2403
- options: [options, deps]
2404
- };
2405
- };
2406
-
2407
- /**
2408
- * Optimizes the visibility of the floating element by flipping the `placement`
2409
- * in order to keep it in view when the preferred placement(s) will overflow the
2410
- * clipping boundary. Alternative to `autoPlacement`.
2411
- * @see https://floating-ui.com/docs/flip
2412
- */
2413
- const flip = (options, deps) => {
2414
- const result = flip$1(options);
2415
- return {
2416
- name: result.name,
2417
- fn: result.fn,
2418
- options: [options, deps]
2419
- };
2420
- };
2421
-
2422
- /**
2423
- * Provides data that allows you to change the size of the floating element —
2424
- * for instance, prevent it from overflowing the clipping boundary or match the
2425
- * width of the reference element.
2426
- * @see https://floating-ui.com/docs/size
2427
- */
2428
- const size = (options, deps) => {
2429
- const result = size$1(options);
2430
- return {
2431
- name: result.name,
2432
- fn: result.fn,
2433
- options: [options, deps]
2434
- };
2435
- };
2436
-
2437
- /**
2438
- * Provides data to hide the floating element in applicable situations, such as
2439
- * when it is not in the same clipping context as the reference element.
2440
- * @see https://floating-ui.com/docs/hide
2441
- */
2442
- const hide = (options, deps) => {
2443
- const result = hide$1(options);
2444
- return {
2445
- name: result.name,
2446
- fn: result.fn,
2447
- options: [options, deps]
2448
- };
2449
- };
2450
-
2451
- /**
2452
- * Provides data to position an inner element of the floating element so that it
2453
- * appears centered to the reference element.
2454
- * This wraps the core `arrow` middleware to allow React refs as the element.
2455
- * @see https://floating-ui.com/docs/arrow
2456
- */
2457
- const arrow = (options, deps) => {
2458
- const result = arrow$1(options);
2459
- return {
2460
- name: result.name,
2461
- fn: result.fn,
2462
- options: [options, deps]
2463
- };
2464
- };
2465
-
2466
- // src/arrow.tsx
2467
- var NAME = "Arrow";
2468
- var Arrow$1 = React.forwardRef((props, forwardedRef) => {
2469
- const { children, width = 10, height = 5, ...arrowProps } = props;
2470
- return /* @__PURE__ */ jsx(
2471
- Primitive.svg,
2472
- {
2473
- ...arrowProps,
2474
- ref: forwardedRef,
2475
- width,
2476
- height,
2477
- viewBox: "0 0 30 10",
2478
- preserveAspectRatio: "none",
2479
- children: props.asChild ? children : /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" })
2480
- }
2481
- );
2482
- });
2483
- Arrow$1.displayName = NAME;
2484
- var Root = Arrow$1;
2485
-
2486
- var POPPER_NAME = "Popper";
2487
- var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
2488
- var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
2489
- var Popper = (props) => {
2490
- const { __scopePopper, children } = props;
2491
- const [anchor, setAnchor] = React.useState(null);
2492
- return /* @__PURE__ */ jsx(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
2493
- };
2494
- Popper.displayName = POPPER_NAME;
2495
- var ANCHOR_NAME = "PopperAnchor";
2496
- var PopperAnchor = React.forwardRef(
2497
- (props, forwardedRef) => {
2498
- const { __scopePopper, virtualRef, ...anchorProps } = props;
2499
- const context = usePopperContext(ANCHOR_NAME, __scopePopper);
2500
- const ref = React.useRef(null);
2501
- const composedRefs = useComposedRefs(forwardedRef, ref);
2502
- const anchorRef = React.useRef(null);
2503
- React.useEffect(() => {
2504
- const previousAnchor = anchorRef.current;
2505
- anchorRef.current = virtualRef?.current || ref.current;
2506
- if (previousAnchor !== anchorRef.current) {
2507
- context.onAnchorChange(anchorRef.current);
2508
- }
2509
- });
2510
- return virtualRef ? null : /* @__PURE__ */ jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
2511
- }
2512
- );
2513
- PopperAnchor.displayName = ANCHOR_NAME;
2514
- var CONTENT_NAME = "PopperContent";
2515
- var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
2516
- var PopperContent = React.forwardRef(
2517
- (props, forwardedRef) => {
2518
- const {
2519
- __scopePopper,
2520
- side = "bottom",
2521
- sideOffset = 0,
2522
- align = "center",
2523
- alignOffset = 0,
2524
- arrowPadding = 0,
2525
- avoidCollisions = true,
2526
- collisionBoundary = [],
2527
- collisionPadding: collisionPaddingProp = 0,
2528
- sticky = "partial",
2529
- hideWhenDetached = false,
2530
- updatePositionStrategy = "optimized",
2531
- onPlaced,
2532
- ...contentProps
2533
- } = props;
2534
- const context = usePopperContext(CONTENT_NAME, __scopePopper);
2535
- const [content, setContent] = React.useState(null);
2536
- const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
2537
- const [arrow$1, setArrow] = React.useState(null);
2538
- const arrowSize = useSize(arrow$1);
2539
- const arrowWidth = arrowSize?.width ?? 0;
2540
- const arrowHeight = arrowSize?.height ?? 0;
2541
- const desiredPlacement = side + (align !== "center" ? "-" + align : "");
2542
- const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
2543
- const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
2544
- const hasExplicitBoundaries = boundary.length > 0;
2545
- const detectOverflowOptions = {
2546
- padding: collisionPadding,
2547
- boundary: boundary.filter(isNotNull),
2548
- // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
2549
- altBoundary: hasExplicitBoundaries
2550
- };
2551
- const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
2552
- // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
2553
- strategy: "fixed",
2554
- placement: desiredPlacement,
2555
- whileElementsMounted: (...args) => {
2556
- const cleanup = autoUpdate(...args, {
2557
- animationFrame: updatePositionStrategy === "always"
2558
- });
2559
- return cleanup;
2560
- },
2561
- elements: {
2562
- reference: context.anchor
2563
- },
2564
- middleware: [
2565
- offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
2566
- avoidCollisions && shift({
2567
- mainAxis: true,
2568
- crossAxis: false,
2569
- limiter: sticky === "partial" ? limitShift() : void 0,
2570
- ...detectOverflowOptions
2571
- }),
2572
- avoidCollisions && flip({ ...detectOverflowOptions }),
2573
- size({
2574
- ...detectOverflowOptions,
2575
- apply: ({ elements, rects, availableWidth, availableHeight }) => {
2576
- const { width: anchorWidth, height: anchorHeight } = rects.reference;
2577
- const contentStyle = elements.floating.style;
2578
- contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
2579
- contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
2580
- contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
2581
- contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
2582
- }
2583
- }),
2584
- arrow$1 && arrow({ element: arrow$1, padding: arrowPadding }),
2585
- transformOrigin({ arrowWidth, arrowHeight }),
2586
- hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions })
2587
- ]
2588
- });
2589
- const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
2590
- const handlePlaced = useCallbackRef(onPlaced);
2591
- useLayoutEffect2(() => {
2592
- if (isPositioned) {
2593
- handlePlaced?.();
2594
- }
2595
- }, [isPositioned, handlePlaced]);
2596
- const arrowX = middlewareData.arrow?.x;
2597
- const arrowY = middlewareData.arrow?.y;
2598
- const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
2599
- const [contentZIndex, setContentZIndex] = React.useState();
2600
- useLayoutEffect2(() => {
2601
- if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
2602
- }, [content]);
2603
- return /* @__PURE__ */ jsx(
2604
- "div",
2605
- {
2606
- ref: refs.setFloating,
2607
- "data-radix-popper-content-wrapper": "",
2608
- style: {
2609
- ...floatingStyles,
2610
- transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
2611
- // keep off the page when measuring
2612
- minWidth: "max-content",
2613
- zIndex: contentZIndex,
2614
- ["--radix-popper-transform-origin"]: [
2615
- middlewareData.transformOrigin?.x,
2616
- middlewareData.transformOrigin?.y
2617
- ].join(" "),
2618
- // hide the content if using the hide middleware and should be hidden
2619
- // set visibility to hidden and disable pointer events so the UI behaves
2620
- // as if the PopperContent isn't there at all
2621
- ...middlewareData.hide?.referenceHidden && {
2622
- visibility: "hidden",
2623
- pointerEvents: "none"
2624
- }
2625
- },
2626
- dir: props.dir,
2627
- children: /* @__PURE__ */ jsx(
2628
- PopperContentProvider,
2629
- {
2630
- scope: __scopePopper,
2631
- placedSide,
2632
- onArrowChange: setArrow,
2633
- arrowX,
2634
- arrowY,
2635
- shouldHideArrow: cannotCenterArrow,
2636
- children: /* @__PURE__ */ jsx(
2637
- Primitive.div,
2638
- {
2639
- "data-side": placedSide,
2640
- "data-align": placedAlign,
2641
- ...contentProps,
2642
- ref: composedRefs,
2643
- style: {
2644
- ...contentProps.style,
2645
- // if the PopperContent hasn't been placed yet (not all measurements done)
2646
- // we prevent animations so that users's animation don't kick in too early referring wrong sides
2647
- animation: !isPositioned ? "none" : void 0
2648
- }
2649
- }
2650
- )
2651
- }
2652
- )
2653
- }
2654
- );
2655
- }
2656
- );
2657
- PopperContent.displayName = CONTENT_NAME;
2658
- var ARROW_NAME = "PopperArrow";
2659
- var OPPOSITE_SIDE = {
2660
- top: "bottom",
2661
- right: "left",
2662
- bottom: "top",
2663
- left: "right"
2664
- };
2665
- var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
2666
- const { __scopePopper, ...arrowProps } = props;
2667
- const contentContext = useContentContext(ARROW_NAME, __scopePopper);
2668
- const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
2669
- return (
2670
- // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
2671
- // doesn't report size as we'd expect on SVG elements.
2672
- // it reports their bounding box which is effectively the largest path inside the SVG.
2673
- /* @__PURE__ */ jsx(
2674
- "span",
2675
- {
2676
- ref: contentContext.onArrowChange,
2677
- style: {
2678
- position: "absolute",
2679
- left: contentContext.arrowX,
2680
- top: contentContext.arrowY,
2681
- [baseSide]: 0,
2682
- transformOrigin: {
2683
- top: "",
2684
- right: "0 0",
2685
- bottom: "center 0",
2686
- left: "100% 0"
2687
- }[contentContext.placedSide],
2688
- transform: {
2689
- top: "translateY(100%)",
2690
- right: "translateY(50%) rotate(90deg) translateX(-50%)",
2691
- bottom: `rotate(180deg)`,
2692
- left: "translateY(50%) rotate(-90deg) translateX(50%)"
2693
- }[contentContext.placedSide],
2694
- visibility: contentContext.shouldHideArrow ? "hidden" : void 0
2695
- },
2696
- children: /* @__PURE__ */ jsx(
2697
- Root,
2698
- {
2699
- ...arrowProps,
2700
- ref: forwardedRef,
2701
- style: {
2702
- ...arrowProps.style,
2703
- // ensures the element can be measured correctly (mostly for if SVG)
2704
- display: "block"
2705
- }
2706
- }
2707
- )
2708
- }
2709
- )
2710
- );
2711
- });
2712
- PopperArrow.displayName = ARROW_NAME;
2713
- function isNotNull(value) {
2714
- return value !== null;
2715
- }
2716
- var transformOrigin = (options) => ({
2717
- name: "transformOrigin",
2718
- options,
2719
- fn(data) {
2720
- const { placement, rects, middlewareData } = data;
2721
- const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
2722
- const isArrowHidden = cannotCenterArrow;
2723
- const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
2724
- const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
2725
- const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
2726
- const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
2727
- const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
2728
- const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
2729
- let x = "";
2730
- let y = "";
2731
- if (placedSide === "bottom") {
2732
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
2733
- y = `${-arrowHeight}px`;
2734
- } else if (placedSide === "top") {
2735
- x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
2736
- y = `${rects.floating.height + arrowHeight}px`;
2737
- } else if (placedSide === "right") {
2738
- x = `${-arrowHeight}px`;
2739
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
2740
- } else if (placedSide === "left") {
2741
- x = `${rects.floating.width + arrowHeight}px`;
2742
- y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
2743
- }
2744
- return { data: { x, y } };
2745
- }
2746
- });
2747
- function getSideAndAlignFromPlacement(placement) {
2748
- const [side, align = "center"] = placement.split("-");
2749
- return [side, align];
2750
- }
2751
- var Root2 = Popper;
2752
- var Anchor = PopperAnchor;
2753
- var Content = PopperContent;
2754
- var Arrow = PopperArrow;
2755
-
2756
- var PORTAL_NAME = "Portal";
2757
- var Portal = React.forwardRef((props, forwardedRef) => {
2758
- const { container: containerProp, ...portalProps } = props;
2759
- const [mounted, setMounted] = React.useState(false);
2760
- useLayoutEffect2(() => setMounted(true), []);
2761
- const container = containerProp || mounted && globalThis?.document?.body;
2762
- return container ? ReactDOM__default.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
2763
- });
2764
- Portal.displayName = PORTAL_NAME;
32
+ VisuallyHidden.displayName = NAME;
33
+ var Root = VisuallyHidden;
2765
34
 
2766
- export { Anchor as A, Content as C, DismissableLayer as D, Portal as P, Root2 as R, Arrow as a, isHTMLElement as b, createPopperScope as c, isElement as d, isWebKit as e, floor as f, getOverflowAncestors as g, isLastTraversableNode as h, isShadowRoot as i, getParentNode as j, getComputedStyle$1 as k, isNode as l, getNodeName as m, autoUpdate as n, offset as o, flip as p, shift as s, useFloating as u };
35
+ export { Root as R, VISUALLY_HIDDEN_STYLES as V };
2767
36
  //# sourceMappingURL=index26.js.map