@yoopta/ui 6.0.1 → 6.0.2

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