@entur/tooltip 5.2.13-beta.0 → 5.2.13-beta.3

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,3779 +1,178 @@
1
1
  import { useRandomId, mergeRefs, useOnClickOutside, warnAboutMissingStyles } from "@entur/utils";
2
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
- import * as React from "react";
4
- import React__default, { useLayoutEffect, useEffect, useState, useRef, cloneElement, createContext, useContext } from "react";
5
- import * as ReactDOM from "react-dom";
3
+ import React, { useState, useRef, useEffect, cloneElement, createContext, useContext } from "react";
4
+ import classNames from "classnames";
5
+ import { useFloating, offset, flip, shift, arrow, limitShift, autoUpdate } from "@floating-ui/react";
6
6
  import { CloseIcon } from "@entur/icons";
7
7
  import { IconButton } from "@entur/button";
8
8
  import { space, borderRadiuses } from "@entur/tokens";
9
+ import { useFloating as useFloating$1, offset as offset$1, flip as flip$1, shift as shift$1, limitShift as limitShift$1, autoUpdate as autoUpdate$1 } from "@floating-ui/react-dom";
9
10
  import { Contrast } from "@entur/layout";
10
- function getDefaultExportFromCjs(x) {
11
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
12
- }
13
- var classnames = { exports: {} };
14
- /*!
15
- Copyright (c) 2018 Jed Watson.
16
- Licensed under the MIT License (MIT), see
17
- http://jedwatson.github.io/classnames
18
- */
19
- var hasRequiredClassnames;
20
- function requireClassnames() {
21
- if (hasRequiredClassnames) return classnames.exports;
22
- hasRequiredClassnames = 1;
23
- (function(module) {
24
- (function() {
25
- var hasOwn = {}.hasOwnProperty;
26
- function classNames2() {
27
- var classes = "";
28
- for (var i = 0; i < arguments.length; i++) {
29
- var arg = arguments[i];
30
- if (arg) {
31
- classes = appendClass(classes, parseValue(arg));
32
- }
33
- }
34
- return classes;
35
- }
36
- function parseValue(arg) {
37
- if (typeof arg === "string" || typeof arg === "number") {
38
- return arg;
39
- }
40
- if (typeof arg !== "object") {
41
- return "";
42
- }
43
- if (Array.isArray(arg)) {
44
- return classNames2.apply(null, arg);
45
- }
46
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
47
- return arg.toString();
48
- }
49
- var classes = "";
50
- for (var key in arg) {
51
- if (hasOwn.call(arg, key) && arg[key]) {
52
- classes = appendClass(classes, key);
53
- }
54
- }
55
- return classes;
56
- }
57
- function appendClass(value, newClass) {
58
- if (!newClass) {
59
- return value;
60
- }
61
- if (value) {
62
- return value + " " + newClass;
63
- }
64
- return value + newClass;
65
- }
66
- if (module.exports) {
67
- classNames2.default = classNames2;
68
- module.exports = classNames2;
69
- } else {
70
- window.classNames = classNames2;
71
- }
72
- })();
73
- })(classnames);
74
- return classnames.exports;
75
- }
76
- var classnamesExports = requireClassnames();
77
- const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
78
- function hasWindow$1() {
79
- return typeof window !== "undefined";
80
- }
81
- function getNodeName$1(node) {
82
- if (isNode$1(node)) {
83
- return (node.nodeName || "").toLowerCase();
84
- }
85
- return "#document";
86
- }
87
- function getWindow$1(node) {
88
- var _node$ownerDocument;
89
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
90
- }
91
- function getDocumentElement$1(node) {
92
- var _ref;
93
- return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
94
- }
95
- function isNode$1(value) {
96
- if (!hasWindow$1()) {
97
- return false;
98
- }
99
- return value instanceof Node || value instanceof getWindow$1(value).Node;
100
- }
101
- function isElement$1(value) {
102
- if (!hasWindow$1()) {
103
- return false;
104
- }
105
- return value instanceof Element || value instanceof getWindow$1(value).Element;
106
- }
107
- function isHTMLElement$1(value) {
108
- if (!hasWindow$1()) {
109
- return false;
110
- }
111
- return value instanceof HTMLElement || value instanceof getWindow$1(value).HTMLElement;
112
- }
113
- function isShadowRoot$1(value) {
114
- if (!hasWindow$1() || typeof ShadowRoot === "undefined") {
115
- return false;
116
- }
117
- return value instanceof ShadowRoot || value instanceof getWindow$1(value).ShadowRoot;
118
- }
119
- function isOverflowElement$1(element) {
120
- const {
121
- overflow,
122
- overflowX,
123
- overflowY,
124
- display
125
- } = getComputedStyle$2(element);
126
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
127
- }
128
- function isTableElement$1(element) {
129
- return ["table", "td", "th"].includes(getNodeName$1(element));
130
- }
131
- function isTopLayer$1(element) {
132
- return [":popover-open", ":modal"].some((selector) => {
133
- try {
134
- return element.matches(selector);
135
- } catch (e) {
136
- return false;
137
- }
138
- });
139
- }
140
- function isContainingBlock$1(elementOrCss) {
141
- const webkit = isWebKit$1();
142
- const css = isElement$1(elementOrCss) ? getComputedStyle$2(elementOrCss) : elementOrCss;
143
- return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
144
- }
145
- function getContainingBlock$1(element) {
146
- let currentNode = getParentNode$1(element);
147
- while (isHTMLElement$1(currentNode) && !isLastTraversableNode$1(currentNode)) {
148
- if (isContainingBlock$1(currentNode)) {
149
- return currentNode;
150
- } else if (isTopLayer$1(currentNode)) {
151
- return null;
152
- }
153
- currentNode = getParentNode$1(currentNode);
154
- }
155
- return null;
156
- }
157
- function isWebKit$1() {
158
- if (typeof CSS === "undefined" || !CSS.supports) return false;
159
- return CSS.supports("-webkit-backdrop-filter", "none");
160
- }
161
- function isLastTraversableNode$1(node) {
162
- return ["html", "body", "#document"].includes(getNodeName$1(node));
163
- }
164
- function getComputedStyle$2(element) {
165
- return getWindow$1(element).getComputedStyle(element);
166
- }
167
- function getNodeScroll$1(element) {
168
- if (isElement$1(element)) {
169
- return {
170
- scrollLeft: element.scrollLeft,
171
- scrollTop: element.scrollTop
172
- };
173
- }
174
- return {
175
- scrollLeft: element.scrollX,
176
- scrollTop: element.scrollY
177
- };
178
- }
179
- function getParentNode$1(node) {
180
- if (getNodeName$1(node) === "html") {
181
- return node;
182
- }
183
- const result = (
184
- // Step into the shadow DOM of the parent of a slotted node.
185
- node.assignedSlot || // DOM Element detected.
186
- node.parentNode || // ShadowRoot detected.
187
- isShadowRoot$1(node) && node.host || // Fallback.
188
- getDocumentElement$1(node)
189
- );
190
- return isShadowRoot$1(result) ? result.host : result;
191
- }
192
- function getNearestOverflowAncestor$1(node) {
193
- const parentNode = getParentNode$1(node);
194
- if (isLastTraversableNode$1(parentNode)) {
195
- return node.ownerDocument ? node.ownerDocument.body : node.body;
196
- }
197
- if (isHTMLElement$1(parentNode) && isOverflowElement$1(parentNode)) {
198
- return parentNode;
199
- }
200
- return getNearestOverflowAncestor$1(parentNode);
201
- }
202
- function getOverflowAncestors$1(node, list, traverseIframes) {
203
- var _node$ownerDocument2;
204
- if (list === void 0) {
205
- list = [];
206
- }
207
- if (traverseIframes === void 0) {
208
- traverseIframes = true;
209
- }
210
- const scrollableAncestor = getNearestOverflowAncestor$1(node);
211
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
212
- const win = getWindow$1(scrollableAncestor);
213
- if (isBody) {
214
- const frameElement = getFrameElement$1(win);
215
- return list.concat(win, win.visualViewport || [], isOverflowElement$1(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors$1(frameElement) : []);
216
- }
217
- return list.concat(scrollableAncestor, getOverflowAncestors$1(scrollableAncestor, [], traverseIframes));
218
- }
219
- function getFrameElement$1(win) {
220
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
221
- }
222
- const min$1 = Math.min;
223
- const max$1 = Math.max;
224
- const round$1 = Math.round;
225
- const floor$1 = Math.floor;
226
- const createCoords$1 = (v) => ({
227
- x: v,
228
- y: v
229
- });
230
- const oppositeSideMap$1 = {
231
- left: "right",
232
- right: "left",
233
- bottom: "top",
234
- top: "bottom"
235
- };
236
- const oppositeAlignmentMap$1 = {
237
- start: "end",
238
- end: "start"
239
- };
240
- function clamp$1(start, value, end) {
241
- return max$1(start, min$1(value, end));
242
- }
243
- function evaluate$1(value, param) {
244
- return typeof value === "function" ? value(param) : value;
245
- }
246
- function getSide$1(placement) {
247
- return placement.split("-")[0];
248
- }
249
- function getAlignment$1(placement) {
250
- return placement.split("-")[1];
251
- }
252
- function getOppositeAxis$1(axis) {
253
- return axis === "x" ? "y" : "x";
254
- }
255
- function getAxisLength$1(axis) {
256
- return axis === "y" ? "height" : "width";
257
- }
258
- function getSideAxis$1(placement) {
259
- return ["top", "bottom"].includes(getSide$1(placement)) ? "y" : "x";
260
- }
261
- function getAlignmentAxis$1(placement) {
262
- return getOppositeAxis$1(getSideAxis$1(placement));
263
- }
264
- function getAlignmentSides$1(placement, rects, rtl) {
265
- if (rtl === void 0) {
266
- rtl = false;
267
- }
268
- const alignment = getAlignment$1(placement);
269
- const alignmentAxis = getAlignmentAxis$1(placement);
270
- const length = getAxisLength$1(alignmentAxis);
271
- let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
272
- if (rects.reference[length] > rects.floating[length]) {
273
- mainAlignmentSide = getOppositePlacement$1(mainAlignmentSide);
274
- }
275
- return [mainAlignmentSide, getOppositePlacement$1(mainAlignmentSide)];
276
- }
277
- function getExpandedPlacements$1(placement) {
278
- const oppositePlacement = getOppositePlacement$1(placement);
279
- return [getOppositeAlignmentPlacement$1(placement), oppositePlacement, getOppositeAlignmentPlacement$1(oppositePlacement)];
280
- }
281
- function getOppositeAlignmentPlacement$1(placement) {
282
- return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap$1[alignment]);
283
- }
284
- function getSideList$1(side, isStart, rtl) {
285
- const lr = ["left", "right"];
286
- const rl = ["right", "left"];
287
- const tb = ["top", "bottom"];
288
- const bt = ["bottom", "top"];
289
- switch (side) {
290
- case "top":
291
- case "bottom":
292
- if (rtl) return isStart ? rl : lr;
293
- return isStart ? lr : rl;
294
- case "left":
295
- case "right":
296
- return isStart ? tb : bt;
297
- default:
298
- return [];
299
- }
300
- }
301
- function getOppositeAxisPlacements$1(placement, flipAlignment, direction, rtl) {
302
- const alignment = getAlignment$1(placement);
303
- let list = getSideList$1(getSide$1(placement), direction === "start", rtl);
304
- if (alignment) {
305
- list = list.map((side) => side + "-" + alignment);
306
- if (flipAlignment) {
307
- list = list.concat(list.map(getOppositeAlignmentPlacement$1));
308
- }
309
- }
310
- return list;
311
- }
312
- function getOppositePlacement$1(placement) {
313
- return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap$1[side]);
314
- }
315
- function expandPaddingObject$1(padding) {
316
- return {
317
- top: 0,
318
- right: 0,
319
- bottom: 0,
320
- left: 0,
321
- ...padding
322
- };
323
- }
324
- function getPaddingObject$1(padding) {
325
- return typeof padding !== "number" ? expandPaddingObject$1(padding) : {
326
- top: padding,
327
- right: padding,
328
- bottom: padding,
329
- left: padding
330
- };
331
- }
332
- function rectToClientRect$1(rect) {
333
- const {
334
- x,
335
- y,
336
- width,
337
- height
338
- } = rect;
339
- return {
340
- width,
341
- height,
342
- top: y,
343
- left: x,
344
- right: x + width,
345
- bottom: y + height,
346
- x,
347
- y
348
- };
349
- }
350
- function computeCoordsFromPlacement$1(_ref, placement, rtl) {
351
- let {
352
- reference,
353
- floating
354
- } = _ref;
355
- const sideAxis = getSideAxis$1(placement);
356
- const alignmentAxis = getAlignmentAxis$1(placement);
357
- const alignLength = getAxisLength$1(alignmentAxis);
358
- const side = getSide$1(placement);
359
- const isVertical = sideAxis === "y";
360
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
361
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
362
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
363
- let coords;
364
- switch (side) {
365
- case "top":
366
- coords = {
367
- x: commonX,
368
- y: reference.y - floating.height
369
- };
370
- break;
371
- case "bottom":
372
- coords = {
373
- x: commonX,
374
- y: reference.y + reference.height
375
- };
376
- break;
377
- case "right":
378
- coords = {
379
- x: reference.x + reference.width,
380
- y: commonY
381
- };
382
- break;
383
- case "left":
384
- coords = {
385
- x: reference.x - floating.width,
386
- y: commonY
387
- };
388
- break;
389
- default:
390
- coords = {
391
- x: reference.x,
392
- y: reference.y
393
- };
394
- }
395
- switch (getAlignment$1(placement)) {
396
- case "start":
397
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
398
- break;
399
- case "end":
400
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
401
- break;
402
- }
403
- return coords;
404
- }
405
- const computePosition$3 = async (reference, floating, config) => {
406
- const {
407
- placement = "bottom",
408
- strategy = "absolute",
409
- middleware = [],
410
- platform: platform2
411
- } = config;
412
- const validMiddleware = middleware.filter(Boolean);
413
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
414
- let rects = await platform2.getElementRects({
415
- reference,
416
- floating,
417
- strategy
418
- });
419
- let {
420
- x,
421
- y
422
- } = computeCoordsFromPlacement$1(rects, placement, rtl);
423
- let statefulPlacement = placement;
424
- let middlewareData = {};
425
- let resetCount = 0;
426
- for (let i = 0; i < validMiddleware.length; i++) {
427
- const {
428
- name,
429
- fn
430
- } = validMiddleware[i];
431
- const {
432
- x: nextX,
433
- y: nextY,
434
- data,
435
- reset
436
- } = await fn({
437
- x,
438
- y,
439
- initialPlacement: placement,
440
- placement: statefulPlacement,
441
- strategy,
442
- middlewareData,
443
- rects,
444
- platform: platform2,
445
- elements: {
446
- reference,
447
- floating
448
- }
449
- });
450
- x = nextX != null ? nextX : x;
451
- y = nextY != null ? nextY : y;
452
- middlewareData = {
453
- ...middlewareData,
454
- [name]: {
455
- ...middlewareData[name],
456
- ...data
457
- }
458
- };
459
- if (reset && resetCount <= 50) {
460
- resetCount++;
461
- if (typeof reset === "object") {
462
- if (reset.placement) {
463
- statefulPlacement = reset.placement;
464
- }
465
- if (reset.rects) {
466
- rects = reset.rects === true ? await platform2.getElementRects({
467
- reference,
468
- floating,
469
- strategy
470
- }) : reset.rects;
471
- }
472
- ({
473
- x,
474
- y
475
- } = computeCoordsFromPlacement$1(rects, statefulPlacement, rtl));
476
- }
477
- i = -1;
478
- }
479
- }
480
- return {
481
- x,
482
- y,
483
- placement: statefulPlacement,
484
- strategy,
485
- middlewareData
486
- };
487
- };
488
- async function detectOverflow$1(state, options) {
489
- var _await$platform$isEle;
490
- if (options === void 0) {
491
- options = {};
492
- }
493
- const {
494
- x,
495
- y,
496
- platform: platform2,
497
- rects,
498
- elements,
499
- strategy
500
- } = state;
501
- const {
502
- boundary = "clippingAncestors",
503
- rootBoundary = "viewport",
504
- elementContext = "floating",
505
- altBoundary = false,
506
- padding = 0
507
- } = evaluate$1(options, state);
508
- const paddingObject = getPaddingObject$1(padding);
509
- const altContext = elementContext === "floating" ? "reference" : "floating";
510
- const element = elements[altBoundary ? altContext : elementContext];
511
- const clippingClientRect = rectToClientRect$1(await platform2.getClippingRect({
512
- element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
513
- boundary,
514
- rootBoundary,
515
- strategy
516
- }));
517
- const rect = elementContext === "floating" ? {
518
- x,
519
- y,
520
- width: rects.floating.width,
521
- height: rects.floating.height
522
- } : rects.reference;
523
- const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
524
- const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
525
- x: 1,
526
- y: 1
527
- } : {
528
- x: 1,
529
- y: 1
530
- };
531
- const elementClientRect = rectToClientRect$1(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
532
- elements,
533
- rect,
534
- offsetParent,
535
- strategy
536
- }) : rect);
537
- return {
538
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
539
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
540
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
541
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
542
- };
543
- }
544
- const arrow$3 = (options) => ({
545
- name: "arrow",
546
- options,
547
- async fn(state) {
548
- const {
549
- x,
550
- y,
551
- placement,
552
- rects,
553
- platform: platform2,
554
- elements,
555
- middlewareData
556
- } = state;
557
- const {
558
- element,
559
- padding = 0
560
- } = evaluate$1(options, state) || {};
561
- if (element == null) {
562
- return {};
563
- }
564
- const paddingObject = getPaddingObject$1(padding);
565
- const coords = {
566
- x,
567
- y
568
- };
569
- const axis = getAlignmentAxis$1(placement);
570
- const length = getAxisLength$1(axis);
571
- const arrowDimensions = await platform2.getDimensions(element);
572
- const isYAxis = axis === "y";
573
- const minProp = isYAxis ? "top" : "left";
574
- const maxProp = isYAxis ? "bottom" : "right";
575
- const clientProp = isYAxis ? "clientHeight" : "clientWidth";
576
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
577
- const startDiff = coords[axis] - rects.reference[axis];
578
- const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
579
- let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
580
- if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
581
- clientSize = elements.floating[clientProp] || rects.floating[length];
582
- }
583
- const centerToReference = endDiff / 2 - startDiff / 2;
584
- const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
585
- const minPadding = min$1(paddingObject[minProp], largestPossiblePadding);
586
- const maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding);
587
- const min$1$1 = minPadding;
588
- const max2 = clientSize - arrowDimensions[length] - maxPadding;
589
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
590
- const offset2 = clamp$1(min$1$1, center, max2);
591
- const shouldAddOffset = !middlewareData.arrow && getAlignment$1(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
592
- const alignmentOffset = shouldAddOffset ? center < min$1$1 ? center - min$1$1 : center - max2 : 0;
593
- return {
594
- [axis]: coords[axis] + alignmentOffset,
595
- data: {
596
- [axis]: offset2,
597
- centerOffset: center - offset2 - alignmentOffset,
598
- ...shouldAddOffset && {
599
- alignmentOffset
600
- }
601
- },
602
- reset: shouldAddOffset
603
- };
604
- }
605
- });
606
- const flip$5 = function(options) {
607
- if (options === void 0) {
608
- options = {};
609
- }
610
- return {
611
- name: "flip",
612
- options,
613
- async fn(state) {
614
- var _middlewareData$arrow, _middlewareData$flip;
615
- const {
616
- placement,
617
- middlewareData,
618
- rects,
619
- initialPlacement,
620
- platform: platform2,
621
- elements
622
- } = state;
623
- const {
624
- mainAxis: checkMainAxis = true,
625
- crossAxis: checkCrossAxis = true,
626
- fallbackPlacements: specifiedFallbackPlacements,
627
- fallbackStrategy = "bestFit",
628
- fallbackAxisSideDirection = "none",
629
- flipAlignment = true,
630
- ...detectOverflowOptions
631
- } = evaluate$1(options, state);
632
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
633
- return {};
634
- }
635
- const side = getSide$1(placement);
636
- const initialSideAxis = getSideAxis$1(initialPlacement);
637
- const isBasePlacement = getSide$1(initialPlacement) === initialPlacement;
638
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
639
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement$1(initialPlacement)] : getExpandedPlacements$1(initialPlacement));
640
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
641
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
642
- fallbackPlacements.push(...getOppositeAxisPlacements$1(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
643
- }
644
- const placements = [initialPlacement, ...fallbackPlacements];
645
- const overflow = await detectOverflow$1(state, detectOverflowOptions);
646
- const overflows = [];
647
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
648
- if (checkMainAxis) {
649
- overflows.push(overflow[side]);
650
- }
651
- if (checkCrossAxis) {
652
- const sides = getAlignmentSides$1(placement, rects, rtl);
653
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
654
- }
655
- overflowsData = [...overflowsData, {
656
- placement,
657
- overflows
658
- }];
659
- if (!overflows.every((side2) => side2 <= 0)) {
660
- var _middlewareData$flip2, _overflowsData$filter;
661
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
662
- const nextPlacement = placements[nextIndex];
663
- if (nextPlacement) {
664
- return {
665
- data: {
666
- index: nextIndex,
667
- overflows: overflowsData
668
- },
669
- reset: {
670
- placement: nextPlacement
671
- }
672
- };
673
- }
674
- 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;
675
- if (!resetPlacement) {
676
- switch (fallbackStrategy) {
677
- case "bestFit": {
678
- var _overflowsData$filter2;
679
- const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
680
- if (hasFallbackAxisSideDirection) {
681
- const currentSideAxis = getSideAxis$1(d.placement);
682
- return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
683
- // reading directions favoring greater width.
684
- currentSideAxis === "y";
685
- }
686
- return true;
687
- }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
688
- if (placement2) {
689
- resetPlacement = placement2;
690
- }
691
- break;
692
- }
693
- case "initialPlacement":
694
- resetPlacement = initialPlacement;
695
- break;
696
- }
697
- }
698
- if (placement !== resetPlacement) {
699
- return {
700
- reset: {
701
- placement: resetPlacement
702
- }
703
- };
704
- }
705
- }
706
- return {};
707
- }
708
- };
709
- };
710
- async function convertValueToCoords$1(state, options) {
711
- const {
712
- placement,
713
- platform: platform2,
714
- elements
715
- } = state;
716
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
717
- const side = getSide$1(placement);
718
- const alignment = getAlignment$1(placement);
719
- const isVertical = getSideAxis$1(placement) === "y";
720
- const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
721
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
722
- const rawValue = evaluate$1(options, state);
723
- let {
724
- mainAxis,
725
- crossAxis,
726
- alignmentAxis
727
- } = typeof rawValue === "number" ? {
728
- mainAxis: rawValue,
729
- crossAxis: 0,
730
- alignmentAxis: null
731
- } : {
732
- mainAxis: rawValue.mainAxis || 0,
733
- crossAxis: rawValue.crossAxis || 0,
734
- alignmentAxis: rawValue.alignmentAxis
735
- };
736
- if (alignment && typeof alignmentAxis === "number") {
737
- crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
738
- }
739
- return isVertical ? {
740
- x: crossAxis * crossAxisMulti,
741
- y: mainAxis * mainAxisMulti
742
- } : {
743
- x: mainAxis * mainAxisMulti,
744
- y: crossAxis * crossAxisMulti
745
- };
746
- }
747
- const offset$5 = function(options) {
748
- if (options === void 0) {
749
- options = 0;
750
- }
751
- return {
752
- name: "offset",
753
- options,
754
- async fn(state) {
755
- var _middlewareData$offse, _middlewareData$arrow;
756
- const {
757
- x,
758
- y,
759
- placement,
760
- middlewareData
761
- } = state;
762
- const diffCoords = await convertValueToCoords$1(state, options);
763
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
764
- return {};
765
- }
766
- return {
767
- x: x + diffCoords.x,
768
- y: y + diffCoords.y,
769
- data: {
770
- ...diffCoords,
771
- placement
772
- }
773
- };
774
- }
775
- };
776
- };
777
- const shift$5 = function(options) {
778
- if (options === void 0) {
779
- options = {};
780
- }
781
- return {
782
- name: "shift",
783
- options,
784
- async fn(state) {
785
- const {
786
- x,
787
- y,
788
- placement
789
- } = state;
790
- const {
791
- mainAxis: checkMainAxis = true,
792
- crossAxis: checkCrossAxis = false,
793
- limiter = {
794
- fn: (_ref) => {
795
- let {
796
- x: x2,
797
- y: y2
798
- } = _ref;
799
- return {
800
- x: x2,
801
- y: y2
802
- };
803
- }
804
- },
805
- ...detectOverflowOptions
806
- } = evaluate$1(options, state);
807
- const coords = {
808
- x,
809
- y
810
- };
811
- const overflow = await detectOverflow$1(state, detectOverflowOptions);
812
- const crossAxis = getSideAxis$1(getSide$1(placement));
813
- const mainAxis = getOppositeAxis$1(crossAxis);
814
- let mainAxisCoord = coords[mainAxis];
815
- let crossAxisCoord = coords[crossAxis];
816
- if (checkMainAxis) {
817
- const minSide = mainAxis === "y" ? "top" : "left";
818
- const maxSide = mainAxis === "y" ? "bottom" : "right";
819
- const min2 = mainAxisCoord + overflow[minSide];
820
- const max2 = mainAxisCoord - overflow[maxSide];
821
- mainAxisCoord = clamp$1(min2, mainAxisCoord, max2);
822
- }
823
- if (checkCrossAxis) {
824
- const minSide = crossAxis === "y" ? "top" : "left";
825
- const maxSide = crossAxis === "y" ? "bottom" : "right";
826
- const min2 = crossAxisCoord + overflow[minSide];
827
- const max2 = crossAxisCoord - overflow[maxSide];
828
- crossAxisCoord = clamp$1(min2, crossAxisCoord, max2);
829
- }
830
- const limitedCoords = limiter.fn({
831
- ...state,
832
- [mainAxis]: mainAxisCoord,
833
- [crossAxis]: crossAxisCoord
834
- });
835
- return {
836
- ...limitedCoords,
837
- data: {
838
- x: limitedCoords.x - x,
839
- y: limitedCoords.y - y,
840
- enabled: {
841
- [mainAxis]: checkMainAxis,
842
- [crossAxis]: checkCrossAxis
843
- }
844
- }
845
- };
846
- }
847
- };
848
- };
849
- const limitShift$5 = function(options) {
850
- if (options === void 0) {
851
- options = {};
852
- }
853
- return {
854
- options,
855
- fn(state) {
856
- const {
857
- x,
858
- y,
859
- placement,
860
- rects,
861
- middlewareData
862
- } = state;
863
- const {
864
- offset: offset2 = 0,
865
- mainAxis: checkMainAxis = true,
866
- crossAxis: checkCrossAxis = true
867
- } = evaluate$1(options, state);
868
- const coords = {
869
- x,
870
- y
871
- };
872
- const crossAxis = getSideAxis$1(placement);
873
- const mainAxis = getOppositeAxis$1(crossAxis);
874
- let mainAxisCoord = coords[mainAxis];
875
- let crossAxisCoord = coords[crossAxis];
876
- const rawOffset = evaluate$1(offset2, state);
877
- const computedOffset = typeof rawOffset === "number" ? {
878
- mainAxis: rawOffset,
879
- crossAxis: 0
880
- } : {
881
- mainAxis: 0,
882
- crossAxis: 0,
883
- ...rawOffset
884
- };
885
- if (checkMainAxis) {
886
- const len = mainAxis === "y" ? "height" : "width";
887
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
888
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
889
- if (mainAxisCoord < limitMin) {
890
- mainAxisCoord = limitMin;
891
- } else if (mainAxisCoord > limitMax) {
892
- mainAxisCoord = limitMax;
893
- }
894
- }
895
- if (checkCrossAxis) {
896
- var _middlewareData$offse, _middlewareData$offse2;
897
- const len = mainAxis === "y" ? "width" : "height";
898
- const isOriginSide = ["top", "left"].includes(getSide$1(placement));
899
- 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);
900
- 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);
901
- if (crossAxisCoord < limitMin) {
902
- crossAxisCoord = limitMin;
903
- } else if (crossAxisCoord > limitMax) {
904
- crossAxisCoord = limitMax;
905
- }
906
- }
907
- return {
908
- [mainAxis]: mainAxisCoord,
909
- [crossAxis]: crossAxisCoord
910
- };
911
- }
912
- };
913
- };
914
- function getCssDimensions$1(element) {
915
- const css = getComputedStyle$2(element);
916
- let width = parseFloat(css.width) || 0;
917
- let height = parseFloat(css.height) || 0;
918
- const hasOffset = isHTMLElement$1(element);
919
- const offsetWidth = hasOffset ? element.offsetWidth : width;
920
- const offsetHeight = hasOffset ? element.offsetHeight : height;
921
- const shouldFallback = round$1(width) !== offsetWidth || round$1(height) !== offsetHeight;
922
- if (shouldFallback) {
923
- width = offsetWidth;
924
- height = offsetHeight;
925
- }
926
- return {
927
- width,
928
- height,
929
- $: shouldFallback
930
- };
931
- }
932
- function unwrapElement$1(element) {
933
- return !isElement$1(element) ? element.contextElement : element;
934
- }
935
- function getScale$1(element) {
936
- const domElement = unwrapElement$1(element);
937
- if (!isHTMLElement$1(domElement)) {
938
- return createCoords$1(1);
939
- }
940
- const rect = domElement.getBoundingClientRect();
941
- const {
942
- width,
943
- height,
944
- $
945
- } = getCssDimensions$1(domElement);
946
- let x = ($ ? round$1(rect.width) : rect.width) / width;
947
- let y = ($ ? round$1(rect.height) : rect.height) / height;
948
- if (!x || !Number.isFinite(x)) {
949
- x = 1;
950
- }
951
- if (!y || !Number.isFinite(y)) {
952
- y = 1;
953
- }
954
- return {
955
- x,
956
- y
957
- };
958
- }
959
- const noOffsets$1 = /* @__PURE__ */ createCoords$1(0);
960
- function getVisualOffsets$1(element) {
961
- const win = getWindow$1(element);
962
- if (!isWebKit$1() || !win.visualViewport) {
963
- return noOffsets$1;
964
- }
965
- return {
966
- x: win.visualViewport.offsetLeft,
967
- y: win.visualViewport.offsetTop
968
- };
969
- }
970
- function shouldAddVisualOffsets$1(element, isFixed, floatingOffsetParent) {
971
- if (isFixed === void 0) {
972
- isFixed = false;
973
- }
974
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow$1(element)) {
975
- return false;
976
- }
977
- return isFixed;
978
- }
979
- function getBoundingClientRect$1(element, includeScale, isFixedStrategy, offsetParent) {
980
- if (includeScale === void 0) {
981
- includeScale = false;
982
- }
983
- if (isFixedStrategy === void 0) {
984
- isFixedStrategy = false;
985
- }
986
- const clientRect = element.getBoundingClientRect();
987
- const domElement = unwrapElement$1(element);
988
- let scale = createCoords$1(1);
989
- if (includeScale) {
990
- if (offsetParent) {
991
- if (isElement$1(offsetParent)) {
992
- scale = getScale$1(offsetParent);
993
- }
994
- } else {
995
- scale = getScale$1(element);
996
- }
997
- }
998
- const visualOffsets = shouldAddVisualOffsets$1(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets$1(domElement) : createCoords$1(0);
999
- let x = (clientRect.left + visualOffsets.x) / scale.x;
1000
- let y = (clientRect.top + visualOffsets.y) / scale.y;
1001
- let width = clientRect.width / scale.x;
1002
- let height = clientRect.height / scale.y;
1003
- if (domElement) {
1004
- const win = getWindow$1(domElement);
1005
- const offsetWin = offsetParent && isElement$1(offsetParent) ? getWindow$1(offsetParent) : offsetParent;
1006
- let currentWin = win;
1007
- let currentIFrame = getFrameElement$1(currentWin);
1008
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1009
- const iframeScale = getScale$1(currentIFrame);
1010
- const iframeRect = currentIFrame.getBoundingClientRect();
1011
- const css = getComputedStyle$2(currentIFrame);
1012
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1013
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1014
- x *= iframeScale.x;
1015
- y *= iframeScale.y;
1016
- width *= iframeScale.x;
1017
- height *= iframeScale.y;
1018
- x += left;
1019
- y += top;
1020
- currentWin = getWindow$1(currentIFrame);
1021
- currentIFrame = getFrameElement$1(currentWin);
1022
- }
1023
- }
1024
- return rectToClientRect$1({
1025
- width,
1026
- height,
1027
- x,
1028
- y
1029
- });
1030
- }
1031
- function getWindowScrollBarX$1(element, rect) {
1032
- const leftScroll = getNodeScroll$1(element).scrollLeft;
1033
- if (!rect) {
1034
- return getBoundingClientRect$1(getDocumentElement$1(element)).left + leftScroll;
1035
- }
1036
- return rect.left + leftScroll;
1037
- }
1038
- function getHTMLOffset$1(documentElement, scroll, ignoreScrollbarX) {
1039
- if (ignoreScrollbarX === void 0) {
1040
- ignoreScrollbarX = false;
1041
- }
1042
- const htmlRect = documentElement.getBoundingClientRect();
1043
- const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
1044
- // RTL <body> scrollbar.
1045
- getWindowScrollBarX$1(documentElement, htmlRect)
1046
- ));
1047
- const y = htmlRect.top + scroll.scrollTop;
1048
- return {
1049
- x,
1050
- y
1051
- };
1052
- }
1053
- function convertOffsetParentRelativeRectToViewportRelativeRect$1(_ref) {
1054
- let {
1055
- elements,
1056
- rect,
1057
- offsetParent,
1058
- strategy
1059
- } = _ref;
1060
- const isFixed = strategy === "fixed";
1061
- const documentElement = getDocumentElement$1(offsetParent);
1062
- const topLayer = elements ? isTopLayer$1(elements.floating) : false;
1063
- if (offsetParent === documentElement || topLayer && isFixed) {
1064
- return rect;
1065
- }
1066
- let scroll = {
1067
- scrollLeft: 0,
1068
- scrollTop: 0
1069
- };
1070
- let scale = createCoords$1(1);
1071
- const offsets = createCoords$1(0);
1072
- const isOffsetParentAnElement = isHTMLElement$1(offsetParent);
1073
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1074
- if (getNodeName$1(offsetParent) !== "body" || isOverflowElement$1(documentElement)) {
1075
- scroll = getNodeScroll$1(offsetParent);
1076
- }
1077
- if (isHTMLElement$1(offsetParent)) {
1078
- const offsetRect = getBoundingClientRect$1(offsetParent);
1079
- scale = getScale$1(offsetParent);
1080
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1081
- offsets.y = offsetRect.y + offsetParent.clientTop;
1082
- }
1083
- }
1084
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset$1(documentElement, scroll, true) : createCoords$1(0);
1085
- return {
1086
- width: rect.width * scale.x,
1087
- height: rect.height * scale.y,
1088
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1089
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1090
- };
1091
- }
1092
- function getClientRects$1(element) {
1093
- return Array.from(element.getClientRects());
1094
- }
1095
- function getDocumentRect$1(element) {
1096
- const html = getDocumentElement$1(element);
1097
- const scroll = getNodeScroll$1(element);
1098
- const body = element.ownerDocument.body;
1099
- const width = max$1(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1100
- const height = max$1(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1101
- let x = -scroll.scrollLeft + getWindowScrollBarX$1(element);
1102
- const y = -scroll.scrollTop;
1103
- if (getComputedStyle$2(body).direction === "rtl") {
1104
- x += max$1(html.clientWidth, body.clientWidth) - width;
1105
- }
1106
- return {
1107
- width,
1108
- height,
1109
- x,
1110
- y
1111
- };
1112
- }
1113
- function getViewportRect$1(element, strategy) {
1114
- const win = getWindow$1(element);
1115
- const html = getDocumentElement$1(element);
1116
- const visualViewport = win.visualViewport;
1117
- let width = html.clientWidth;
1118
- let height = html.clientHeight;
1119
- let x = 0;
1120
- let y = 0;
1121
- if (visualViewport) {
1122
- width = visualViewport.width;
1123
- height = visualViewport.height;
1124
- const visualViewportBased = isWebKit$1();
1125
- if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
1126
- x = visualViewport.offsetLeft;
1127
- y = visualViewport.offsetTop;
1128
- }
1129
- }
1130
- return {
1131
- width,
1132
- height,
1133
- x,
1134
- y
1135
- };
1136
- }
1137
- function getInnerBoundingClientRect$1(element, strategy) {
1138
- const clientRect = getBoundingClientRect$1(element, true, strategy === "fixed");
1139
- const top = clientRect.top + element.clientTop;
1140
- const left = clientRect.left + element.clientLeft;
1141
- const scale = isHTMLElement$1(element) ? getScale$1(element) : createCoords$1(1);
1142
- const width = element.clientWidth * scale.x;
1143
- const height = element.clientHeight * scale.y;
1144
- const x = left * scale.x;
1145
- const y = top * scale.y;
1146
- return {
1147
- width,
1148
- height,
1149
- x,
1150
- y
1151
- };
1152
- }
1153
- function getClientRectFromClippingAncestor$1(element, clippingAncestor, strategy) {
1154
- let rect;
1155
- if (clippingAncestor === "viewport") {
1156
- rect = getViewportRect$1(element, strategy);
1157
- } else if (clippingAncestor === "document") {
1158
- rect = getDocumentRect$1(getDocumentElement$1(element));
1159
- } else if (isElement$1(clippingAncestor)) {
1160
- rect = getInnerBoundingClientRect$1(clippingAncestor, strategy);
1161
- } else {
1162
- const visualOffsets = getVisualOffsets$1(element);
1163
- rect = {
1164
- x: clippingAncestor.x - visualOffsets.x,
1165
- y: clippingAncestor.y - visualOffsets.y,
1166
- width: clippingAncestor.width,
1167
- height: clippingAncestor.height
1168
- };
1169
- }
1170
- return rectToClientRect$1(rect);
1171
- }
1172
- function hasFixedPositionAncestor$1(element, stopNode) {
1173
- const parentNode = getParentNode$1(element);
1174
- if (parentNode === stopNode || !isElement$1(parentNode) || isLastTraversableNode$1(parentNode)) {
1175
- return false;
1176
- }
1177
- return getComputedStyle$2(parentNode).position === "fixed" || hasFixedPositionAncestor$1(parentNode, stopNode);
1178
- }
1179
- function getClippingElementAncestors$1(element, cache) {
1180
- const cachedResult = cache.get(element);
1181
- if (cachedResult) {
1182
- return cachedResult;
1183
- }
1184
- let result = getOverflowAncestors$1(element, [], false).filter((el) => isElement$1(el) && getNodeName$1(el) !== "body");
1185
- let currentContainingBlockComputedStyle = null;
1186
- const elementIsFixed = getComputedStyle$2(element).position === "fixed";
1187
- let currentNode = elementIsFixed ? getParentNode$1(element) : element;
1188
- while (isElement$1(currentNode) && !isLastTraversableNode$1(currentNode)) {
1189
- const computedStyle = getComputedStyle$2(currentNode);
1190
- const currentNodeIsContaining = isContainingBlock$1(currentNode);
1191
- if (!currentNodeIsContaining && computedStyle.position === "fixed") {
1192
- currentContainingBlockComputedStyle = null;
1193
- }
1194
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement$1(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor$1(element, currentNode);
1195
- if (shouldDropCurrentNode) {
1196
- result = result.filter((ancestor) => ancestor !== currentNode);
1197
- } else {
1198
- currentContainingBlockComputedStyle = computedStyle;
1199
- }
1200
- currentNode = getParentNode$1(currentNode);
1201
- }
1202
- cache.set(element, result);
1203
- return result;
1204
- }
1205
- function getClippingRect$1(_ref) {
1206
- let {
1207
- element,
1208
- boundary,
1209
- rootBoundary,
1210
- strategy
1211
- } = _ref;
1212
- const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer$1(element) ? [] : getClippingElementAncestors$1(element, this._c) : [].concat(boundary);
1213
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1214
- const firstClippingAncestor = clippingAncestors[0];
1215
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
1216
- const rect = getClientRectFromClippingAncestor$1(element, clippingAncestor, strategy);
1217
- accRect.top = max$1(rect.top, accRect.top);
1218
- accRect.right = min$1(rect.right, accRect.right);
1219
- accRect.bottom = min$1(rect.bottom, accRect.bottom);
1220
- accRect.left = max$1(rect.left, accRect.left);
1221
- return accRect;
1222
- }, getClientRectFromClippingAncestor$1(element, firstClippingAncestor, strategy));
1223
- return {
1224
- width: clippingRect.right - clippingRect.left,
1225
- height: clippingRect.bottom - clippingRect.top,
1226
- x: clippingRect.left,
1227
- y: clippingRect.top
1228
- };
1229
- }
1230
- function getDimensions$1(element) {
1231
- const {
1232
- width,
1233
- height
1234
- } = getCssDimensions$1(element);
1235
- return {
1236
- width,
1237
- height
1238
- };
1239
- }
1240
- function getRectRelativeToOffsetParent$1(element, offsetParent, strategy) {
1241
- const isOffsetParentAnElement = isHTMLElement$1(offsetParent);
1242
- const documentElement = getDocumentElement$1(offsetParent);
1243
- const isFixed = strategy === "fixed";
1244
- const rect = getBoundingClientRect$1(element, true, isFixed, offsetParent);
1245
- let scroll = {
1246
- scrollLeft: 0,
1247
- scrollTop: 0
1248
- };
1249
- const offsets = createCoords$1(0);
1250
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1251
- if (getNodeName$1(offsetParent) !== "body" || isOverflowElement$1(documentElement)) {
1252
- scroll = getNodeScroll$1(offsetParent);
1253
- }
1254
- if (isOffsetParentAnElement) {
1255
- const offsetRect = getBoundingClientRect$1(offsetParent, true, isFixed, offsetParent);
1256
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1257
- offsets.y = offsetRect.y + offsetParent.clientTop;
1258
- } else if (documentElement) {
1259
- offsets.x = getWindowScrollBarX$1(documentElement);
1260
- }
1261
- }
1262
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset$1(documentElement, scroll) : createCoords$1(0);
1263
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1264
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1265
- return {
1266
- x,
1267
- y,
1268
- width: rect.width,
1269
- height: rect.height
1270
- };
1271
- }
1272
- function isStaticPositioned$1(element) {
1273
- return getComputedStyle$2(element).position === "static";
1274
- }
1275
- function getTrueOffsetParent$1(element, polyfill) {
1276
- if (!isHTMLElement$1(element) || getComputedStyle$2(element).position === "fixed") {
1277
- return null;
1278
- }
1279
- if (polyfill) {
1280
- return polyfill(element);
1281
- }
1282
- let rawOffsetParent = element.offsetParent;
1283
- if (getDocumentElement$1(element) === rawOffsetParent) {
1284
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1285
- }
1286
- return rawOffsetParent;
1287
- }
1288
- function getOffsetParent$1(element, polyfill) {
1289
- const win = getWindow$1(element);
1290
- if (isTopLayer$1(element)) {
1291
- return win;
1292
- }
1293
- if (!isHTMLElement$1(element)) {
1294
- let svgOffsetParent = getParentNode$1(element);
1295
- while (svgOffsetParent && !isLastTraversableNode$1(svgOffsetParent)) {
1296
- if (isElement$1(svgOffsetParent) && !isStaticPositioned$1(svgOffsetParent)) {
1297
- return svgOffsetParent;
1298
- }
1299
- svgOffsetParent = getParentNode$1(svgOffsetParent);
1300
- }
1301
- return win;
1302
- }
1303
- let offsetParent = getTrueOffsetParent$1(element, polyfill);
1304
- while (offsetParent && isTableElement$1(offsetParent) && isStaticPositioned$1(offsetParent)) {
1305
- offsetParent = getTrueOffsetParent$1(offsetParent, polyfill);
1306
- }
1307
- if (offsetParent && isLastTraversableNode$1(offsetParent) && isStaticPositioned$1(offsetParent) && !isContainingBlock$1(offsetParent)) {
1308
- return win;
1309
- }
1310
- return offsetParent || getContainingBlock$1(element) || win;
1311
- }
1312
- const getElementRects$1 = async function(data) {
1313
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent$1;
1314
- const getDimensionsFn = this.getDimensions;
1315
- const floatingDimensions = await getDimensionsFn(data.floating);
1316
- return {
1317
- reference: getRectRelativeToOffsetParent$1(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1318
- floating: {
1319
- x: 0,
1320
- y: 0,
1321
- width: floatingDimensions.width,
1322
- height: floatingDimensions.height
1323
- }
1324
- };
1325
- };
1326
- function isRTL$1(element) {
1327
- return getComputedStyle$2(element).direction === "rtl";
1328
- }
1329
- const platform$1 = {
1330
- convertOffsetParentRelativeRectToViewportRelativeRect: convertOffsetParentRelativeRectToViewportRelativeRect$1,
1331
- getDocumentElement: getDocumentElement$1,
1332
- getClippingRect: getClippingRect$1,
1333
- getOffsetParent: getOffsetParent$1,
1334
- getElementRects: getElementRects$1,
1335
- getClientRects: getClientRects$1,
1336
- getDimensions: getDimensions$1,
1337
- getScale: getScale$1,
1338
- isElement: isElement$1,
1339
- isRTL: isRTL$1
1340
- };
1341
- function observeMove$1(element, onMove) {
1342
- let io = null;
1343
- let timeoutId;
1344
- const root = getDocumentElement$1(element);
1345
- function cleanup() {
1346
- var _io;
1347
- clearTimeout(timeoutId);
1348
- (_io = io) == null || _io.disconnect();
1349
- io = null;
1350
- }
1351
- function refresh(skip, threshold) {
1352
- if (skip === void 0) {
1353
- skip = false;
1354
- }
1355
- if (threshold === void 0) {
1356
- threshold = 1;
1357
- }
1358
- cleanup();
1359
- const {
1360
- left,
1361
- top,
1362
- width,
1363
- height
1364
- } = element.getBoundingClientRect();
1365
- if (!skip) {
1366
- onMove();
1367
- }
1368
- if (!width || !height) {
1369
- return;
1370
- }
1371
- const insetTop = floor$1(top);
1372
- const insetRight = floor$1(root.clientWidth - (left + width));
1373
- const insetBottom = floor$1(root.clientHeight - (top + height));
1374
- const insetLeft = floor$1(left);
1375
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1376
- const options = {
1377
- rootMargin,
1378
- threshold: max$1(0, min$1(1, threshold)) || 1
1379
- };
1380
- let isFirstUpdate = true;
1381
- function handleObserve(entries) {
1382
- const ratio = entries[0].intersectionRatio;
1383
- if (ratio !== threshold) {
1384
- if (!isFirstUpdate) {
1385
- return refresh();
1386
- }
1387
- if (!ratio) {
1388
- timeoutId = setTimeout(() => {
1389
- refresh(false, 1e-7);
1390
- }, 1e3);
1391
- } else {
1392
- refresh(false, ratio);
1393
- }
1394
- }
1395
- isFirstUpdate = false;
1396
- }
1397
- try {
1398
- io = new IntersectionObserver(handleObserve, {
1399
- ...options,
1400
- // Handle <iframe>s
1401
- root: root.ownerDocument
1402
- });
1403
- } catch (e) {
1404
- io = new IntersectionObserver(handleObserve, options);
1405
- }
1406
- io.observe(element);
1407
- }
1408
- refresh(true);
1409
- return cleanup;
1410
- }
1411
- function autoUpdate$1(reference, floating, update, options) {
1412
- if (options === void 0) {
1413
- options = {};
1414
- }
1415
- const {
1416
- ancestorScroll = true,
1417
- ancestorResize = true,
1418
- elementResize = typeof ResizeObserver === "function",
1419
- layoutShift = typeof IntersectionObserver === "function",
1420
- animationFrame = false
1421
- } = options;
1422
- const referenceEl = unwrapElement$1(reference);
1423
- const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors$1(referenceEl) : [], ...getOverflowAncestors$1(floating)] : [];
1424
- ancestors.forEach((ancestor) => {
1425
- ancestorScroll && ancestor.addEventListener("scroll", update, {
1426
- passive: true
1427
- });
1428
- ancestorResize && ancestor.addEventListener("resize", update);
1429
- });
1430
- const cleanupIo = referenceEl && layoutShift ? observeMove$1(referenceEl, update) : null;
1431
- let reobserveFrame = -1;
1432
- let resizeObserver = null;
1433
- if (elementResize) {
1434
- resizeObserver = new ResizeObserver((_ref) => {
1435
- let [firstEntry] = _ref;
1436
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
1437
- resizeObserver.unobserve(floating);
1438
- cancelAnimationFrame(reobserveFrame);
1439
- reobserveFrame = requestAnimationFrame(() => {
1440
- var _resizeObserver;
1441
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1442
- });
1443
- }
1444
- update();
1445
- });
1446
- if (referenceEl && !animationFrame) {
1447
- resizeObserver.observe(referenceEl);
1448
- }
1449
- resizeObserver.observe(floating);
1450
- }
1451
- let frameId;
1452
- let prevRefRect = animationFrame ? getBoundingClientRect$1(reference) : null;
1453
- if (animationFrame) {
1454
- frameLoop();
1455
- }
1456
- function frameLoop() {
1457
- const nextRefRect = getBoundingClientRect$1(reference);
1458
- if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
1459
- update();
1460
- }
1461
- prevRefRect = nextRefRect;
1462
- frameId = requestAnimationFrame(frameLoop);
1463
- }
1464
- update();
1465
- return () => {
1466
- var _resizeObserver2;
1467
- ancestors.forEach((ancestor) => {
1468
- ancestorScroll && ancestor.removeEventListener("scroll", update);
1469
- ancestorResize && ancestor.removeEventListener("resize", update);
1470
- });
1471
- cleanupIo == null || cleanupIo();
1472
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1473
- resizeObserver = null;
1474
- if (animationFrame) {
1475
- cancelAnimationFrame(frameId);
1476
- }
1477
- };
1478
- }
1479
- const offset$4 = offset$5;
1480
- const shift$4 = shift$5;
1481
- const flip$4 = flip$5;
1482
- const arrow$2 = arrow$3;
1483
- const limitShift$4 = limitShift$5;
1484
- const computePosition$2 = (reference, floating, options) => {
1485
- const cache = /* @__PURE__ */ new Map();
1486
- const mergedOptions = {
1487
- platform: platform$1,
1488
- ...options
1489
- };
1490
- const platformWithCache = {
1491
- ...mergedOptions.platform,
1492
- _c: cache
1493
- };
1494
- return computePosition$3(reference, floating, {
1495
- ...mergedOptions,
1496
- platform: platformWithCache
1497
- });
1498
- };
1499
- var index$2 = typeof document !== "undefined" ? useLayoutEffect : useEffect;
1500
- function deepEqual$1(a, b) {
1501
- if (a === b) {
1502
- return true;
1503
- }
1504
- if (typeof a !== typeof b) {
1505
- return false;
1506
- }
1507
- if (typeof a === "function" && a.toString() === b.toString()) {
1508
- return true;
1509
- }
1510
- let length;
1511
- let i;
1512
- let keys;
1513
- if (a && b && typeof a === "object") {
1514
- if (Array.isArray(a)) {
1515
- length = a.length;
1516
- if (length !== b.length) return false;
1517
- for (i = length; i-- !== 0; ) {
1518
- if (!deepEqual$1(a[i], b[i])) {
1519
- return false;
1520
- }
1521
- }
1522
- return true;
1523
- }
1524
- keys = Object.keys(a);
1525
- length = keys.length;
1526
- if (length !== Object.keys(b).length) {
1527
- return false;
1528
- }
1529
- for (i = length; i-- !== 0; ) {
1530
- if (!{}.hasOwnProperty.call(b, keys[i])) {
1531
- return false;
1532
- }
1533
- }
1534
- for (i = length; i-- !== 0; ) {
1535
- const key = keys[i];
1536
- if (key === "_owner" && a.$$typeof) {
1537
- continue;
1538
- }
1539
- if (!deepEqual$1(a[key], b[key])) {
1540
- return false;
1541
- }
1542
- }
1543
- return true;
1544
- }
1545
- return a !== a && b !== b;
1546
- }
1547
- function getDPR$1(element) {
1548
- if (typeof window === "undefined") {
1549
- return 1;
1550
- }
1551
- const win = element.ownerDocument.defaultView || window;
1552
- return win.devicePixelRatio || 1;
1553
- }
1554
- function roundByDPR$1(element, value) {
1555
- const dpr = getDPR$1(element);
1556
- return Math.round(value * dpr) / dpr;
1557
- }
1558
- function useLatestRef$1(value) {
1559
- const ref = React.useRef(value);
1560
- index$2(() => {
1561
- ref.current = value;
1562
- });
1563
- return ref;
1564
- }
1565
- function useFloating$2(options) {
1566
- if (options === void 0) {
1567
- options = {};
1568
- }
1569
- const {
1570
- placement = "bottom",
1571
- strategy = "absolute",
1572
- middleware = [],
1573
- platform: platform2,
1574
- elements: {
1575
- reference: externalReference,
1576
- floating: externalFloating
1577
- } = {},
1578
- transform = true,
1579
- whileElementsMounted,
1580
- open
1581
- } = options;
1582
- const [data, setData] = React.useState({
1583
- x: 0,
1584
- y: 0,
1585
- strategy,
1586
- placement,
1587
- middlewareData: {},
1588
- isPositioned: false
1589
- });
1590
- const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
1591
- if (!deepEqual$1(latestMiddleware, middleware)) {
1592
- setLatestMiddleware(middleware);
1593
- }
1594
- const [_reference, _setReference] = React.useState(null);
1595
- const [_floating, _setFloating] = React.useState(null);
1596
- const setReference = React.useCallback((node) => {
1597
- if (node !== referenceRef.current) {
1598
- referenceRef.current = node;
1599
- _setReference(node);
1600
- }
1601
- }, []);
1602
- const setFloating = React.useCallback((node) => {
1603
- if (node !== floatingRef.current) {
1604
- floatingRef.current = node;
1605
- _setFloating(node);
1606
- }
1607
- }, []);
1608
- const referenceEl = externalReference || _reference;
1609
- const floatingEl = externalFloating || _floating;
1610
- const referenceRef = React.useRef(null);
1611
- const floatingRef = React.useRef(null);
1612
- const dataRef = React.useRef(data);
1613
- const hasWhileElementsMounted = whileElementsMounted != null;
1614
- const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
1615
- const platformRef = useLatestRef$1(platform2);
1616
- const openRef = useLatestRef$1(open);
1617
- const update = React.useCallback(() => {
1618
- if (!referenceRef.current || !floatingRef.current) {
1619
- return;
1620
- }
1621
- const config = {
1622
- placement,
1623
- strategy,
1624
- middleware: latestMiddleware
1625
- };
1626
- if (platformRef.current) {
1627
- config.platform = platformRef.current;
1628
- }
1629
- computePosition$2(referenceRef.current, floatingRef.current, config).then((data2) => {
1630
- const fullData = {
1631
- ...data2,
1632
- // The floating element's position may be recomputed while it's closed
1633
- // but still mounted (such as when transitioning out). To ensure
1634
- // `isPositioned` will be `false` initially on the next open, avoid
1635
- // setting it to `true` when `open === false` (must be specified).
1636
- isPositioned: openRef.current !== false
1637
- };
1638
- if (isMountedRef.current && !deepEqual$1(dataRef.current, fullData)) {
1639
- dataRef.current = fullData;
1640
- ReactDOM.flushSync(() => {
1641
- setData(fullData);
1642
- });
1643
- }
1644
- });
1645
- }, [latestMiddleware, placement, strategy, platformRef, openRef]);
1646
- index$2(() => {
1647
- if (open === false && dataRef.current.isPositioned) {
1648
- dataRef.current.isPositioned = false;
1649
- setData((data2) => ({
1650
- ...data2,
1651
- isPositioned: false
1652
- }));
1653
- }
1654
- }, [open]);
1655
- const isMountedRef = React.useRef(false);
1656
- index$2(() => {
1657
- isMountedRef.current = true;
1658
- return () => {
1659
- isMountedRef.current = false;
1660
- };
1661
- }, []);
1662
- index$2(() => {
1663
- if (referenceEl) referenceRef.current = referenceEl;
1664
- if (floatingEl) floatingRef.current = floatingEl;
1665
- if (referenceEl && floatingEl) {
1666
- if (whileElementsMountedRef.current) {
1667
- return whileElementsMountedRef.current(referenceEl, floatingEl, update);
1668
- }
1669
- update();
1670
- }
1671
- }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
1672
- const refs = React.useMemo(() => ({
1673
- reference: referenceRef,
1674
- floating: floatingRef,
1675
- setReference,
1676
- setFloating
1677
- }), [setReference, setFloating]);
1678
- const elements = React.useMemo(() => ({
1679
- reference: referenceEl,
1680
- floating: floatingEl
1681
- }), [referenceEl, floatingEl]);
1682
- const floatingStyles = React.useMemo(() => {
1683
- const initialStyles = {
1684
- position: strategy,
1685
- left: 0,
1686
- top: 0
1687
- };
1688
- if (!elements.floating) {
1689
- return initialStyles;
1690
- }
1691
- const x = roundByDPR$1(elements.floating, data.x);
1692
- const y = roundByDPR$1(elements.floating, data.y);
1693
- if (transform) {
1694
- return {
1695
- ...initialStyles,
1696
- transform: "translate(" + x + "px, " + y + "px)",
1697
- ...getDPR$1(elements.floating) >= 1.5 && {
1698
- willChange: "transform"
1699
- }
1700
- };
1701
- }
1702
- return {
1703
- position: strategy,
1704
- left: x,
1705
- top: y
1706
- };
1707
- }, [strategy, transform, elements.floating, data.x, data.y]);
1708
- return React.useMemo(() => ({
1709
- ...data,
1710
- update,
1711
- refs,
1712
- elements,
1713
- floatingStyles
1714
- }), [data, update, refs, elements, floatingStyles]);
1715
- }
1716
- const arrow$1 = (options) => {
1717
- function isRef(value) {
1718
- return {}.hasOwnProperty.call(value, "current");
1719
- }
1720
- return {
1721
- name: "arrow",
1722
- options,
1723
- fn(state) {
1724
- const {
1725
- element,
1726
- padding
1727
- } = typeof options === "function" ? options(state) : options;
1728
- if (element && isRef(element)) {
1729
- if (element.current != null) {
1730
- return arrow$2({
1731
- element: element.current,
1732
- padding
1733
- }).fn(state);
1734
- }
1735
- return {};
1736
- }
1737
- if (element) {
1738
- return arrow$2({
1739
- element,
1740
- padding
1741
- }).fn(state);
1742
- }
1743
- return {};
1744
- }
1745
- };
1746
- };
1747
- const offset$3 = (options, deps) => ({
1748
- ...offset$4(options),
1749
- options: [options, deps]
1750
- });
1751
- const shift$3 = (options, deps) => ({
1752
- ...shift$4(options),
1753
- options: [options, deps]
1754
- });
1755
- const limitShift$3 = (options, deps) => ({
1756
- ...limitShift$4(options),
1757
- options: [options, deps]
1758
- });
1759
- const flip$3 = (options, deps) => ({
1760
- ...flip$4(options),
1761
- options: [options, deps]
1762
- });
1763
- const arrow = (options, deps) => ({
1764
- ...arrow$1(options),
1765
- options: [options, deps]
1766
- });
1767
- const SafeReact = {
1768
- ...React
1769
- };
1770
- const useInsertionEffect = SafeReact.useInsertionEffect;
1771
- const useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
1772
- function useEffectEvent(callback) {
1773
- const ref = React.useRef(() => {
1774
- if (process.env.NODE_ENV !== "production") {
1775
- throw new Error("Cannot call an event handler while rendering.");
1776
- }
1777
- });
1778
- useSafeInsertionEffect(() => {
1779
- ref.current = callback;
1780
- });
1781
- return React.useCallback(function() {
1782
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1783
- args[_key] = arguments[_key];
1784
- }
1785
- return ref.current == null ? void 0 : ref.current(...args);
1786
- }, []);
1787
- }
1788
- var index$1 = typeof document !== "undefined" ? useLayoutEffect : useEffect;
1789
- let serverHandoffComplete = false;
1790
- let count = 0;
1791
- const genId = () => (
1792
- // Ensure the id is unique with multiple independent versions of Floating UI
1793
- // on <React 18
1794
- "floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
1795
- );
1796
- function useFloatingId() {
1797
- const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : void 0);
1798
- index$1(() => {
1799
- if (id == null) {
1800
- setId(genId());
1801
- }
1802
- }, []);
1803
- React.useEffect(() => {
1804
- serverHandoffComplete = true;
1805
- }, []);
1806
- return id;
1807
- }
1808
- const useReactId = SafeReact.useId;
1809
- const useId = useReactId || useFloatingId;
1810
- let devMessageSet;
1811
- if (process.env.NODE_ENV !== "production") {
1812
- devMessageSet = /* @__PURE__ */ new Set();
1813
- }
1814
- function error$1() {
1815
- var _devMessageSet3;
1816
- for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
1817
- messages[_key2] = arguments[_key2];
1818
- }
1819
- const message = "Floating UI: " + messages.join(" ");
1820
- if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
1821
- var _devMessageSet4;
1822
- (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
1823
- console.error(message);
1824
- }
1825
- }
1826
- function createPubSub() {
1827
- const map = /* @__PURE__ */ new Map();
1828
- return {
1829
- emit(event, data) {
1830
- var _map$get;
1831
- (_map$get = map.get(event)) == null || _map$get.forEach((handler) => handler(data));
1832
- },
1833
- on(event, listener) {
1834
- map.set(event, [...map.get(event) || [], listener]);
1835
- },
1836
- off(event, listener) {
1837
- var _map$get2;
1838
- map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter((l) => l !== listener)) || []);
1839
- }
1840
- };
1841
- }
1842
- const FloatingNodeContext = /* @__PURE__ */ React.createContext(null);
1843
- const FloatingTreeContext = /* @__PURE__ */ React.createContext(null);
1844
- const useFloatingParentNodeId = () => {
1845
- var _React$useContext;
1846
- return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
1847
- };
1848
- const useFloatingTree = () => React.useContext(FloatingTreeContext);
1849
- function useFloatingRootContext(options) {
1850
- const {
1851
- open = false,
1852
- onOpenChange: onOpenChangeProp,
1853
- elements: elementsProp
1854
- } = options;
1855
- const floatingId = useId();
1856
- const dataRef = React.useRef({});
1857
- const [events] = React.useState(() => createPubSub());
1858
- const nested = useFloatingParentNodeId() != null;
1859
- if (process.env.NODE_ENV !== "production") {
1860
- const optionDomReference = elementsProp.reference;
1861
- if (optionDomReference && !isElement$1(optionDomReference)) {
1862
- error$1("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
1863
- }
1864
- }
1865
- const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
1866
- const onOpenChange = useEffectEvent((open2, event, reason) => {
1867
- dataRef.current.openEvent = open2 ? event : void 0;
1868
- events.emit("openchange", {
1869
- open: open2,
1870
- event,
1871
- reason,
1872
- nested
1873
- });
1874
- onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
1875
- });
1876
- const refs = React.useMemo(() => ({
1877
- setPositionReference
1878
- }), []);
1879
- const elements = React.useMemo(() => ({
1880
- reference: positionReference || elementsProp.reference || null,
1881
- floating: elementsProp.floating || null,
1882
- domReference: elementsProp.reference
1883
- }), [positionReference, elementsProp.reference, elementsProp.floating]);
1884
- return React.useMemo(() => ({
1885
- dataRef,
1886
- open,
1887
- onOpenChange,
1888
- elements,
1889
- events,
1890
- floatingId,
1891
- refs
1892
- }), [open, onOpenChange, elements, events, floatingId, refs]);
1893
- }
1894
- function useFloating$1(options) {
1895
- if (options === void 0) {
1896
- options = {};
1897
- }
1898
- const {
1899
- nodeId
1900
- } = options;
1901
- const internalRootContext = useFloatingRootContext({
1902
- ...options,
1903
- elements: {
1904
- reference: null,
1905
- floating: null,
1906
- ...options.elements
1907
- }
1908
- });
1909
- const rootContext = options.rootContext || internalRootContext;
1910
- const computedElements = rootContext.elements;
1911
- const [_domReference, setDomReference] = React.useState(null);
1912
- const [positionReference, _setPositionReference] = React.useState(null);
1913
- const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
1914
- const domReference = optionDomReference || _domReference;
1915
- const domReferenceRef = React.useRef(null);
1916
- const tree = useFloatingTree();
1917
- index$1(() => {
1918
- if (domReference) {
1919
- domReferenceRef.current = domReference;
1920
- }
1921
- }, [domReference]);
1922
- const position = useFloating$2({
1923
- ...options,
1924
- elements: {
1925
- ...computedElements,
1926
- ...positionReference && {
1927
- reference: positionReference
1928
- }
1929
- }
1930
- });
1931
- const setPositionReference = React.useCallback((node) => {
1932
- const computedPositionReference = isElement$1(node) ? {
1933
- getBoundingClientRect: () => node.getBoundingClientRect(),
1934
- contextElement: node
1935
- } : node;
1936
- _setPositionReference(computedPositionReference);
1937
- position.refs.setReference(computedPositionReference);
1938
- }, [position.refs]);
1939
- const setReference = React.useCallback((node) => {
1940
- if (isElement$1(node) || node === null) {
1941
- domReferenceRef.current = node;
1942
- setDomReference(node);
1943
- }
1944
- if (isElement$1(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
1945
- // `null` to support `positionReference` + an unstable `reference`
1946
- // callback ref.
1947
- node !== null && !isElement$1(node)) {
1948
- position.refs.setReference(node);
1949
- }
1950
- }, [position.refs]);
1951
- const refs = React.useMemo(() => ({
1952
- ...position.refs,
1953
- setReference,
1954
- setPositionReference,
1955
- domReference: domReferenceRef
1956
- }), [position.refs, setReference, setPositionReference]);
1957
- const elements = React.useMemo(() => ({
1958
- ...position.elements,
1959
- domReference
1960
- }), [position.elements, domReference]);
1961
- const context = React.useMemo(() => ({
1962
- ...position,
1963
- ...rootContext,
1964
- refs,
1965
- elements,
1966
- nodeId
1967
- }), [position, refs, elements, nodeId, rootContext]);
1968
- index$1(() => {
1969
- rootContext.dataRef.current.floatingContext = context;
1970
- const node = tree == null ? void 0 : tree.nodesRef.current.find((node2) => node2.id === nodeId);
1971
- if (node) {
1972
- node.context = context;
1973
- }
1974
- });
1975
- return React.useMemo(() => ({
1976
- ...position,
1977
- context,
1978
- refs,
1979
- elements
1980
- }), [position, refs, elements, context]);
1981
- }
1982
- function standardisePlacement(placement) {
1983
- switch (placement) {
1984
- case "top-left":
1985
- return "top-start";
1986
- case "top-right":
1987
- return "top-end";
1988
- case "bottom-left":
1989
- return "bottom-start";
1990
- case "bottom-right":
1991
- return "bottom-end";
1992
- default:
1993
- return placement;
1994
- }
1995
- }
1996
- const error = "error";
1997
- const Tooltip = ({
1998
- placement,
1999
- content,
2000
- children,
2001
- className,
2002
- isOpen,
2003
- onClickCloseButton = () => void 0,
2004
- disableHoverListener = false,
2005
- disableFocusListener = false,
2006
- disableKeyboardListener = true,
2007
- disableClickListner = true,
2008
- showCloseButton = true,
2009
- variant,
2010
- hoverDelay,
2011
- style,
2012
- ...rest
2013
- }) => {
2014
- const [showTooltip, setShowTooltip] = useState(isOpen ?? false);
2015
- const tooltipArrowRef = useRef(null);
2016
- const tooltipId = useRandomId("eds-tooltip");
2017
- const hoverOpenTimer = useRef();
2018
- const hoverCloseTimer = useRef();
2019
- const isControlled = isOpen !== void 0;
2020
- const {
2021
- refs,
2022
- floatingStyles,
2023
- middlewareData,
2024
- placement: actualPlacement,
2025
- isPositioned,
2026
- update,
2027
- elements
2028
- } = useFloating$1({
2029
- placement: standardisePlacement(placement),
2030
- open: showTooltip,
2031
- middleware: [
2032
- offset$3(space.extraSmall),
2033
- flip$3(),
2034
- shift$3({ padding: space.extraSmall, limiter: limitShift$3({ offset: 8 }) }),
2035
- arrow({
2036
- element: tooltipArrowRef,
2037
- padding: borderRadiuses.medium
2038
- })
2039
- ]
2040
- });
2041
- useEffect(() => {
2042
- if (showTooltip && elements.reference && elements.floating) {
2043
- const cleanup = autoUpdate$1(elements.reference, elements.floating, update);
2044
- return cleanup;
2045
- }
2046
- }, [showTooltip, elements, update]);
2047
- const onMouseEnter = () => {
2048
- if (isControlled) return;
2049
- clearTimeout(hoverCloseTimer.current);
2050
- hoverOpenTimer.current = setTimeout(() => {
2051
- setShowTooltip(true);
2052
- }, hoverDelay?.enter ?? 150);
2053
- };
2054
- const onMouseLeave = () => {
2055
- if (isControlled) return;
2056
- clearTimeout(hoverOpenTimer.current);
2057
- hoverCloseTimer.current = setTimeout(() => {
2058
- setShowTooltip(false);
2059
- }, hoverDelay?.leave ?? 300);
2060
- };
2061
- React__default.useEffect(() => {
2062
- return () => {
2063
- clearTimeout(hoverOpenTimer.current);
2064
- clearTimeout(hoverCloseTimer.current);
2065
- };
2066
- }, []);
2067
- React__default.useEffect(() => {
2068
- if (isOpen !== void 0) setShowTooltip(isOpen);
2069
- }, [isOpen]);
2070
- const referenceListenerProps = {
2071
- "aria-describedby": showTooltip ? tooltipId : void 0,
2072
- // focusListner
2073
- ...!disableFocusListener && !isControlled && { onFocus: () => setShowTooltip(true) },
2074
- ...!disableFocusListener && !isControlled && { onBlur: () => setShowTooltip(false) },
2075
- // hoverListner
2076
- ...!disableHoverListener && !isControlled && { onMouseEnter },
2077
- ...!disableHoverListener && !isControlled && { onMouseLeave },
2078
- // keyboardListner
2079
- ...!disableKeyboardListener && !isControlled && {
2080
- onKeyDown: (e) => {
2081
- if (e.key === "Escape") setShowTooltip(false);
2082
- if (e.key === " " || e.key === "Enter") {
2083
- e.preventDefault();
2084
- setShowTooltip(!showTooltip);
2085
- }
2086
- }
2087
- },
2088
- // clickListner
2089
- ...!disableClickListner && !isControlled && {
2090
- onClick: () => setShowTooltip(!showTooltip)
2091
- }
2092
- };
2093
- const displayTooltipStyle = (!isControlled || isPositioned) && showTooltip && content ? void 0 : "none";
2094
- return /* @__PURE__ */ jsxs(Fragment, { children: [
2095
- cloneElement(children, {
2096
- ref: refs.setReference,
2097
- ...referenceListenerProps
2098
- }),
2099
- /* @__PURE__ */ jsxs(
2100
- "div",
2101
- {
2102
- className: classNames(className, "eds-tooltip", {
2103
- "eds-tooltip--negative": variant === error || variant === "negative"
2104
- }),
2105
- ref: refs.setFloating,
2106
- style: {
2107
- ...floatingStyles,
2108
- display: displayTooltipStyle,
2109
- ...style
2110
- },
2111
- role: "tooltip",
2112
- id: tooltipId,
2113
- onMouseEnter: !disableHoverListener ? onMouseEnter : void 0,
2114
- onMouseLeave: !disableHoverListener ? onMouseLeave : void 0,
2115
- ...rest,
2116
- children: [
2117
- content,
2118
- isOpen && showCloseButton && /* @__PURE__ */ jsx(
2119
- IconButton,
2120
- {
2121
- className: "eds-tooltip__close-button",
2122
- onClick: () => {
2123
- setShowTooltip(false);
2124
- onClickCloseButton();
2125
- },
2126
- type: "button",
2127
- "aria-label": "Lukk tooltip",
2128
- children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
2129
- }
2130
- ),
2131
- /* @__PURE__ */ jsx(
2132
- "div",
2133
- {
2134
- className: `eds-tooltip__arrow--${actualPlacement?.split("-")?.[0]}`,
2135
- ref: tooltipArrowRef,
2136
- style: {
2137
- left: middlewareData.arrow?.x,
2138
- top: middlewareData.arrow?.y
2139
- }
2140
- }
2141
- )
2142
- ]
2143
- }
2144
- )
2145
- ] });
2146
- };
2147
- const min = Math.min;
2148
- const max = Math.max;
2149
- const round = Math.round;
2150
- const floor = Math.floor;
2151
- const createCoords = (v) => ({
2152
- x: v,
2153
- y: v
2154
- });
2155
- const oppositeSideMap = {
2156
- left: "right",
2157
- right: "left",
2158
- bottom: "top",
2159
- top: "bottom"
2160
- };
2161
- const oppositeAlignmentMap = {
2162
- start: "end",
2163
- end: "start"
2164
- };
2165
- function clamp(start, value, end) {
2166
- return max(start, min(value, end));
2167
- }
2168
- function evaluate(value, param) {
2169
- return typeof value === "function" ? value(param) : value;
2170
- }
2171
- function getSide(placement) {
2172
- return placement.split("-")[0];
2173
- }
2174
- function getAlignment(placement) {
2175
- return placement.split("-")[1];
2176
- }
2177
- function getOppositeAxis(axis) {
2178
- return axis === "x" ? "y" : "x";
2179
- }
2180
- function getAxisLength(axis) {
2181
- return axis === "y" ? "height" : "width";
2182
- }
2183
- const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
2184
- function getSideAxis(placement) {
2185
- return yAxisSides.has(getSide(placement)) ? "y" : "x";
2186
- }
2187
- function getAlignmentAxis(placement) {
2188
- return getOppositeAxis(getSideAxis(placement));
2189
- }
2190
- function getAlignmentSides(placement, rects, rtl) {
2191
- if (rtl === void 0) {
2192
- rtl = false;
2193
- }
2194
- const alignment = getAlignment(placement);
2195
- const alignmentAxis = getAlignmentAxis(placement);
2196
- const length = getAxisLength(alignmentAxis);
2197
- let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
2198
- if (rects.reference[length] > rects.floating[length]) {
2199
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
2200
- }
2201
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
2202
- }
2203
- function getExpandedPlacements(placement) {
2204
- const oppositePlacement = getOppositePlacement(placement);
2205
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
2206
- }
2207
- function getOppositeAlignmentPlacement(placement) {
2208
- return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
2209
- }
2210
- const lrPlacement = ["left", "right"];
2211
- const rlPlacement = ["right", "left"];
2212
- const tbPlacement = ["top", "bottom"];
2213
- const btPlacement = ["bottom", "top"];
2214
- function getSideList(side, isStart, rtl) {
2215
- switch (side) {
2216
- case "top":
2217
- case "bottom":
2218
- if (rtl) return isStart ? rlPlacement : lrPlacement;
2219
- return isStart ? lrPlacement : rlPlacement;
2220
- case "left":
2221
- case "right":
2222
- return isStart ? tbPlacement : btPlacement;
2223
- default:
2224
- return [];
2225
- }
2226
- }
2227
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
2228
- const alignment = getAlignment(placement);
2229
- let list = getSideList(getSide(placement), direction === "start", rtl);
2230
- if (alignment) {
2231
- list = list.map((side) => side + "-" + alignment);
2232
- if (flipAlignment) {
2233
- list = list.concat(list.map(getOppositeAlignmentPlacement));
2234
- }
2235
- }
2236
- return list;
2237
- }
2238
- function getOppositePlacement(placement) {
2239
- return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
2240
- }
2241
- function expandPaddingObject(padding) {
2242
- return {
2243
- top: 0,
2244
- right: 0,
2245
- bottom: 0,
2246
- left: 0,
2247
- ...padding
2248
- };
2249
- }
2250
- function getPaddingObject(padding) {
2251
- return typeof padding !== "number" ? expandPaddingObject(padding) : {
2252
- top: padding,
2253
- right: padding,
2254
- bottom: padding,
2255
- left: padding
2256
- };
2257
- }
2258
- function rectToClientRect(rect) {
2259
- const {
2260
- x,
2261
- y,
2262
- width,
2263
- height
2264
- } = rect;
2265
- return {
2266
- width,
2267
- height,
2268
- top: y,
2269
- left: x,
2270
- right: x + width,
2271
- bottom: y + height,
2272
- x,
2273
- y
2274
- };
2275
- }
2276
- function computeCoordsFromPlacement(_ref, placement, rtl) {
2277
- let {
2278
- reference,
2279
- floating
2280
- } = _ref;
2281
- const sideAxis = getSideAxis(placement);
2282
- const alignmentAxis = getAlignmentAxis(placement);
2283
- const alignLength = getAxisLength(alignmentAxis);
2284
- const side = getSide(placement);
2285
- const isVertical = sideAxis === "y";
2286
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
2287
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
2288
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
2289
- let coords;
2290
- switch (side) {
2291
- case "top":
2292
- coords = {
2293
- x: commonX,
2294
- y: reference.y - floating.height
2295
- };
2296
- break;
2297
- case "bottom":
2298
- coords = {
2299
- x: commonX,
2300
- y: reference.y + reference.height
2301
- };
2302
- break;
2303
- case "right":
2304
- coords = {
2305
- x: reference.x + reference.width,
2306
- y: commonY
2307
- };
2308
- break;
2309
- case "left":
2310
- coords = {
2311
- x: reference.x - floating.width,
2312
- y: commonY
2313
- };
2314
- break;
2315
- default:
2316
- coords = {
2317
- x: reference.x,
2318
- y: reference.y
2319
- };
2320
- }
2321
- switch (getAlignment(placement)) {
2322
- case "start":
2323
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
2324
- break;
2325
- case "end":
2326
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
2327
- break;
2328
- }
2329
- return coords;
2330
- }
2331
- const computePosition$1 = async (reference, floating, config) => {
2332
- const {
2333
- placement = "bottom",
2334
- strategy = "absolute",
2335
- middleware = [],
2336
- platform: platform2
2337
- } = config;
2338
- const validMiddleware = middleware.filter(Boolean);
2339
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
2340
- let rects = await platform2.getElementRects({
2341
- reference,
2342
- floating,
2343
- strategy
2344
- });
2345
- let {
2346
- x,
2347
- y
2348
- } = computeCoordsFromPlacement(rects, placement, rtl);
2349
- let statefulPlacement = placement;
2350
- let middlewareData = {};
2351
- let resetCount = 0;
2352
- for (let i = 0; i < validMiddleware.length; i++) {
2353
- const {
2354
- name,
2355
- fn
2356
- } = validMiddleware[i];
2357
- const {
2358
- x: nextX,
2359
- y: nextY,
2360
- data,
2361
- reset
2362
- } = await fn({
2363
- x,
2364
- y,
2365
- initialPlacement: placement,
2366
- placement: statefulPlacement,
2367
- strategy,
2368
- middlewareData,
2369
- rects,
2370
- platform: platform2,
2371
- elements: {
2372
- reference,
2373
- floating
2374
- }
2375
- });
2376
- x = nextX != null ? nextX : x;
2377
- y = nextY != null ? nextY : y;
2378
- middlewareData = {
2379
- ...middlewareData,
2380
- [name]: {
2381
- ...middlewareData[name],
2382
- ...data
2383
- }
2384
- };
2385
- if (reset && resetCount <= 50) {
2386
- resetCount++;
2387
- if (typeof reset === "object") {
2388
- if (reset.placement) {
2389
- statefulPlacement = reset.placement;
2390
- }
2391
- if (reset.rects) {
2392
- rects = reset.rects === true ? await platform2.getElementRects({
2393
- reference,
2394
- floating,
2395
- strategy
2396
- }) : reset.rects;
2397
- }
2398
- ({
2399
- x,
2400
- y
2401
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
2402
- }
2403
- i = -1;
2404
- }
2405
- }
2406
- return {
2407
- x,
2408
- y,
2409
- placement: statefulPlacement,
2410
- strategy,
2411
- middlewareData
2412
- };
2413
- };
2414
- async function detectOverflow(state, options) {
2415
- var _await$platform$isEle;
2416
- if (options === void 0) {
2417
- options = {};
2418
- }
2419
- const {
2420
- x,
2421
- y,
2422
- platform: platform2,
2423
- rects,
2424
- elements,
2425
- strategy
2426
- } = state;
2427
- const {
2428
- boundary = "clippingAncestors",
2429
- rootBoundary = "viewport",
2430
- elementContext = "floating",
2431
- altBoundary = false,
2432
- padding = 0
2433
- } = evaluate(options, state);
2434
- const paddingObject = getPaddingObject(padding);
2435
- const altContext = elementContext === "floating" ? "reference" : "floating";
2436
- const element = elements[altBoundary ? altContext : elementContext];
2437
- const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
2438
- element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
2439
- boundary,
2440
- rootBoundary,
2441
- strategy
2442
- }));
2443
- const rect = elementContext === "floating" ? {
2444
- x,
2445
- y,
2446
- width: rects.floating.width,
2447
- height: rects.floating.height
2448
- } : rects.reference;
2449
- const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
2450
- const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
2451
- x: 1,
2452
- y: 1
2453
- } : {
2454
- x: 1,
2455
- y: 1
2456
- };
2457
- const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
2458
- elements,
2459
- rect,
2460
- offsetParent,
2461
- strategy
2462
- }) : rect);
2463
- return {
2464
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
2465
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
2466
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
2467
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
2468
- };
2469
- }
2470
- const flip$2 = function(options) {
2471
- if (options === void 0) {
2472
- options = {};
2473
- }
2474
- return {
2475
- name: "flip",
2476
- options,
2477
- async fn(state) {
2478
- var _middlewareData$arrow, _middlewareData$flip;
2479
- const {
2480
- placement,
2481
- middlewareData,
2482
- rects,
2483
- initialPlacement,
2484
- platform: platform2,
2485
- elements
2486
- } = state;
2487
- const {
2488
- mainAxis: checkMainAxis = true,
2489
- crossAxis: checkCrossAxis = true,
2490
- fallbackPlacements: specifiedFallbackPlacements,
2491
- fallbackStrategy = "bestFit",
2492
- fallbackAxisSideDirection = "none",
2493
- flipAlignment = true,
2494
- ...detectOverflowOptions
2495
- } = evaluate(options, state);
2496
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
2497
- return {};
2498
- }
2499
- const side = getSide(placement);
2500
- const initialSideAxis = getSideAxis(initialPlacement);
2501
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
2502
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
2503
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
2504
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
2505
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
2506
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
2507
- }
2508
- const placements = [initialPlacement, ...fallbackPlacements];
2509
- const overflow = await detectOverflow(state, detectOverflowOptions);
2510
- const overflows = [];
2511
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
2512
- if (checkMainAxis) {
2513
- overflows.push(overflow[side]);
2514
- }
2515
- if (checkCrossAxis) {
2516
- const sides = getAlignmentSides(placement, rects, rtl);
2517
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
2518
- }
2519
- overflowsData = [...overflowsData, {
2520
- placement,
2521
- overflows
2522
- }];
2523
- if (!overflows.every((side2) => side2 <= 0)) {
2524
- var _middlewareData$flip2, _overflowsData$filter;
2525
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
2526
- const nextPlacement = placements[nextIndex];
2527
- if (nextPlacement) {
2528
- const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
2529
- if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
2530
- // overflows the main axis.
2531
- overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
2532
- return {
2533
- data: {
2534
- index: nextIndex,
2535
- overflows: overflowsData
2536
- },
2537
- reset: {
2538
- placement: nextPlacement
2539
- }
2540
- };
2541
- }
2542
- }
2543
- 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;
2544
- if (!resetPlacement) {
2545
- switch (fallbackStrategy) {
2546
- case "bestFit": {
2547
- var _overflowsData$filter2;
2548
- const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
2549
- if (hasFallbackAxisSideDirection) {
2550
- const currentSideAxis = getSideAxis(d.placement);
2551
- return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
2552
- // reading directions favoring greater width.
2553
- currentSideAxis === "y";
2554
- }
2555
- return true;
2556
- }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
2557
- if (placement2) {
2558
- resetPlacement = placement2;
2559
- }
2560
- break;
2561
- }
2562
- case "initialPlacement":
2563
- resetPlacement = initialPlacement;
2564
- break;
2565
- }
2566
- }
2567
- if (placement !== resetPlacement) {
2568
- return {
2569
- reset: {
2570
- placement: resetPlacement
2571
- }
2572
- };
2573
- }
2574
- }
2575
- return {};
2576
- }
2577
- };
2578
- };
2579
- const originSides = /* @__PURE__ */ new Set(["left", "top"]);
2580
- async function convertValueToCoords(state, options) {
2581
- const {
2582
- placement,
2583
- platform: platform2,
2584
- elements
2585
- } = state;
2586
- const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
2587
- const side = getSide(placement);
2588
- const alignment = getAlignment(placement);
2589
- const isVertical = getSideAxis(placement) === "y";
2590
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
2591
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
2592
- const rawValue = evaluate(options, state);
2593
- let {
2594
- mainAxis,
2595
- crossAxis,
2596
- alignmentAxis
2597
- } = typeof rawValue === "number" ? {
2598
- mainAxis: rawValue,
2599
- crossAxis: 0,
2600
- alignmentAxis: null
2601
- } : {
2602
- mainAxis: rawValue.mainAxis || 0,
2603
- crossAxis: rawValue.crossAxis || 0,
2604
- alignmentAxis: rawValue.alignmentAxis
2605
- };
2606
- if (alignment && typeof alignmentAxis === "number") {
2607
- crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
2608
- }
2609
- return isVertical ? {
2610
- x: crossAxis * crossAxisMulti,
2611
- y: mainAxis * mainAxisMulti
2612
- } : {
2613
- x: mainAxis * mainAxisMulti,
2614
- y: crossAxis * crossAxisMulti
2615
- };
2616
- }
2617
- const offset$2 = function(options) {
2618
- if (options === void 0) {
2619
- options = 0;
2620
- }
2621
- return {
2622
- name: "offset",
2623
- options,
2624
- async fn(state) {
2625
- var _middlewareData$offse, _middlewareData$arrow;
2626
- const {
2627
- x,
2628
- y,
2629
- placement,
2630
- middlewareData
2631
- } = state;
2632
- const diffCoords = await convertValueToCoords(state, options);
2633
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
2634
- return {};
2635
- }
2636
- return {
2637
- x: x + diffCoords.x,
2638
- y: y + diffCoords.y,
2639
- data: {
2640
- ...diffCoords,
2641
- placement
2642
- }
2643
- };
2644
- }
2645
- };
2646
- };
2647
- const shift$2 = function(options) {
2648
- if (options === void 0) {
2649
- options = {};
2650
- }
2651
- return {
2652
- name: "shift",
2653
- options,
2654
- async fn(state) {
2655
- const {
2656
- x,
2657
- y,
2658
- placement
2659
- } = state;
2660
- const {
2661
- mainAxis: checkMainAxis = true,
2662
- crossAxis: checkCrossAxis = false,
2663
- limiter = {
2664
- fn: (_ref) => {
2665
- let {
2666
- x: x2,
2667
- y: y2
2668
- } = _ref;
2669
- return {
2670
- x: x2,
2671
- y: y2
2672
- };
2673
- }
2674
- },
2675
- ...detectOverflowOptions
2676
- } = evaluate(options, state);
2677
- const coords = {
2678
- x,
2679
- y
2680
- };
2681
- const overflow = await detectOverflow(state, detectOverflowOptions);
2682
- const crossAxis = getSideAxis(getSide(placement));
2683
- const mainAxis = getOppositeAxis(crossAxis);
2684
- let mainAxisCoord = coords[mainAxis];
2685
- let crossAxisCoord = coords[crossAxis];
2686
- if (checkMainAxis) {
2687
- const minSide = mainAxis === "y" ? "top" : "left";
2688
- const maxSide = mainAxis === "y" ? "bottom" : "right";
2689
- const min2 = mainAxisCoord + overflow[minSide];
2690
- const max2 = mainAxisCoord - overflow[maxSide];
2691
- mainAxisCoord = clamp(min2, mainAxisCoord, max2);
2692
- }
2693
- if (checkCrossAxis) {
2694
- const minSide = crossAxis === "y" ? "top" : "left";
2695
- const maxSide = crossAxis === "y" ? "bottom" : "right";
2696
- const min2 = crossAxisCoord + overflow[minSide];
2697
- const max2 = crossAxisCoord - overflow[maxSide];
2698
- crossAxisCoord = clamp(min2, crossAxisCoord, max2);
2699
- }
2700
- const limitedCoords = limiter.fn({
2701
- ...state,
2702
- [mainAxis]: mainAxisCoord,
2703
- [crossAxis]: crossAxisCoord
2704
- });
2705
- return {
2706
- ...limitedCoords,
2707
- data: {
2708
- x: limitedCoords.x - x,
2709
- y: limitedCoords.y - y,
2710
- enabled: {
2711
- [mainAxis]: checkMainAxis,
2712
- [crossAxis]: checkCrossAxis
2713
- }
2714
- }
2715
- };
2716
- }
2717
- };
2718
- };
2719
- const limitShift$2 = function(options) {
2720
- if (options === void 0) {
2721
- options = {};
2722
- }
2723
- return {
2724
- options,
2725
- fn(state) {
2726
- const {
2727
- x,
2728
- y,
2729
- placement,
2730
- rects,
2731
- middlewareData
2732
- } = state;
2733
- const {
2734
- offset: offset2 = 0,
2735
- mainAxis: checkMainAxis = true,
2736
- crossAxis: checkCrossAxis = true
2737
- } = evaluate(options, state);
2738
- const coords = {
2739
- x,
2740
- y
2741
- };
2742
- const crossAxis = getSideAxis(placement);
2743
- const mainAxis = getOppositeAxis(crossAxis);
2744
- let mainAxisCoord = coords[mainAxis];
2745
- let crossAxisCoord = coords[crossAxis];
2746
- const rawOffset = evaluate(offset2, state);
2747
- const computedOffset = typeof rawOffset === "number" ? {
2748
- mainAxis: rawOffset,
2749
- crossAxis: 0
2750
- } : {
2751
- mainAxis: 0,
2752
- crossAxis: 0,
2753
- ...rawOffset
2754
- };
2755
- if (checkMainAxis) {
2756
- const len = mainAxis === "y" ? "height" : "width";
2757
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
2758
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
2759
- if (mainAxisCoord < limitMin) {
2760
- mainAxisCoord = limitMin;
2761
- } else if (mainAxisCoord > limitMax) {
2762
- mainAxisCoord = limitMax;
2763
- }
2764
- }
2765
- if (checkCrossAxis) {
2766
- var _middlewareData$offse, _middlewareData$offse2;
2767
- const len = mainAxis === "y" ? "width" : "height";
2768
- const isOriginSide = originSides.has(getSide(placement));
2769
- 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);
2770
- 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);
2771
- if (crossAxisCoord < limitMin) {
2772
- crossAxisCoord = limitMin;
2773
- } else if (crossAxisCoord > limitMax) {
2774
- crossAxisCoord = limitMax;
2775
- }
2776
- }
2777
- return {
2778
- [mainAxis]: mainAxisCoord,
2779
- [crossAxis]: crossAxisCoord
2780
- };
2781
- }
2782
- };
2783
- };
2784
- function hasWindow() {
2785
- return typeof window !== "undefined";
2786
- }
2787
- function getNodeName(node) {
2788
- if (isNode(node)) {
2789
- return (node.nodeName || "").toLowerCase();
2790
- }
2791
- return "#document";
2792
- }
2793
- function getWindow(node) {
2794
- var _node$ownerDocument;
2795
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
2796
- }
2797
- function getDocumentElement(node) {
2798
- var _ref;
2799
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
2800
- }
2801
- function isNode(value) {
2802
- if (!hasWindow()) {
2803
- return false;
2804
- }
2805
- return value instanceof Node || value instanceof getWindow(value).Node;
2806
- }
2807
- function isElement(value) {
2808
- if (!hasWindow()) {
2809
- return false;
2810
- }
2811
- return value instanceof Element || value instanceof getWindow(value).Element;
2812
- }
2813
- function isHTMLElement(value) {
2814
- if (!hasWindow()) {
2815
- return false;
2816
- }
2817
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
2818
- }
2819
- function isShadowRoot(value) {
2820
- if (!hasWindow() || typeof ShadowRoot === "undefined") {
2821
- return false;
2822
- }
2823
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
2824
- }
2825
- const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
2826
- function isOverflowElement(element) {
2827
- const {
2828
- overflow,
2829
- overflowX,
2830
- overflowY,
2831
- display
2832
- } = getComputedStyle$1(element);
2833
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
2834
- }
2835
- const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
2836
- function isTableElement(element) {
2837
- return tableElements.has(getNodeName(element));
2838
- }
2839
- const topLayerSelectors = [":popover-open", ":modal"];
2840
- function isTopLayer(element) {
2841
- return topLayerSelectors.some((selector) => {
2842
- try {
2843
- return element.matches(selector);
2844
- } catch (_e) {
2845
- return false;
2846
- }
2847
- });
2848
- }
2849
- const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
2850
- const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
2851
- const containValues = ["paint", "layout", "strict", "content"];
2852
- function isContainingBlock(elementOrCss) {
2853
- const webkit = isWebKit();
2854
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
2855
- 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));
2856
- }
2857
- function getContainingBlock(element) {
2858
- let currentNode = getParentNode(element);
2859
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
2860
- if (isContainingBlock(currentNode)) {
2861
- return currentNode;
2862
- } else if (isTopLayer(currentNode)) {
2863
- return null;
2864
- }
2865
- currentNode = getParentNode(currentNode);
2866
- }
2867
- return null;
2868
- }
2869
- function isWebKit() {
2870
- if (typeof CSS === "undefined" || !CSS.supports) return false;
2871
- return CSS.supports("-webkit-backdrop-filter", "none");
2872
- }
2873
- const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
2874
- function isLastTraversableNode(node) {
2875
- return lastTraversableNodeNames.has(getNodeName(node));
2876
- }
2877
- function getComputedStyle$1(element) {
2878
- return getWindow(element).getComputedStyle(element);
2879
- }
2880
- function getNodeScroll(element) {
2881
- if (isElement(element)) {
2882
- return {
2883
- scrollLeft: element.scrollLeft,
2884
- scrollTop: element.scrollTop
2885
- };
2886
- }
2887
- return {
2888
- scrollLeft: element.scrollX,
2889
- scrollTop: element.scrollY
2890
- };
2891
- }
2892
- function getParentNode(node) {
2893
- if (getNodeName(node) === "html") {
2894
- return node;
2895
- }
2896
- const result = (
2897
- // Step into the shadow DOM of the parent of a slotted node.
2898
- node.assignedSlot || // DOM Element detected.
2899
- node.parentNode || // ShadowRoot detected.
2900
- isShadowRoot(node) && node.host || // Fallback.
2901
- getDocumentElement(node)
2902
- );
2903
- return isShadowRoot(result) ? result.host : result;
2904
- }
2905
- function getNearestOverflowAncestor(node) {
2906
- const parentNode = getParentNode(node);
2907
- if (isLastTraversableNode(parentNode)) {
2908
- return node.ownerDocument ? node.ownerDocument.body : node.body;
2909
- }
2910
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
2911
- return parentNode;
2912
- }
2913
- return getNearestOverflowAncestor(parentNode);
2914
- }
2915
- function getOverflowAncestors(node, list, traverseIframes) {
2916
- var _node$ownerDocument2;
2917
- if (list === void 0) {
2918
- list = [];
2919
- }
2920
- if (traverseIframes === void 0) {
2921
- traverseIframes = true;
2922
- }
2923
- const scrollableAncestor = getNearestOverflowAncestor(node);
2924
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
2925
- const win = getWindow(scrollableAncestor);
2926
- if (isBody) {
2927
- const frameElement = getFrameElement(win);
2928
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
2929
- }
2930
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
2931
- }
2932
- function getFrameElement(win) {
2933
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
2934
- }
2935
- function getCssDimensions(element) {
2936
- const css = getComputedStyle$1(element);
2937
- let width = parseFloat(css.width) || 0;
2938
- let height = parseFloat(css.height) || 0;
2939
- const hasOffset = isHTMLElement(element);
2940
- const offsetWidth = hasOffset ? element.offsetWidth : width;
2941
- const offsetHeight = hasOffset ? element.offsetHeight : height;
2942
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
2943
- if (shouldFallback) {
2944
- width = offsetWidth;
2945
- height = offsetHeight;
2946
- }
2947
- return {
2948
- width,
2949
- height,
2950
- $: shouldFallback
2951
- };
2952
- }
2953
- function unwrapElement(element) {
2954
- return !isElement(element) ? element.contextElement : element;
2955
- }
2956
- function getScale(element) {
2957
- const domElement = unwrapElement(element);
2958
- if (!isHTMLElement(domElement)) {
2959
- return createCoords(1);
2960
- }
2961
- const rect = domElement.getBoundingClientRect();
2962
- const {
2963
- width,
2964
- height,
2965
- $
2966
- } = getCssDimensions(domElement);
2967
- let x = ($ ? round(rect.width) : rect.width) / width;
2968
- let y = ($ ? round(rect.height) : rect.height) / height;
2969
- if (!x || !Number.isFinite(x)) {
2970
- x = 1;
2971
- }
2972
- if (!y || !Number.isFinite(y)) {
2973
- y = 1;
2974
- }
2975
- return {
2976
- x,
2977
- y
2978
- };
2979
- }
2980
- const noOffsets = /* @__PURE__ */ createCoords(0);
2981
- function getVisualOffsets(element) {
2982
- const win = getWindow(element);
2983
- if (!isWebKit() || !win.visualViewport) {
2984
- return noOffsets;
2985
- }
2986
- return {
2987
- x: win.visualViewport.offsetLeft,
2988
- y: win.visualViewport.offsetTop
2989
- };
2990
- }
2991
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
2992
- if (isFixed === void 0) {
2993
- isFixed = false;
2994
- }
2995
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
2996
- return false;
2997
- }
2998
- return isFixed;
2999
- }
3000
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
3001
- if (includeScale === void 0) {
3002
- includeScale = false;
3003
- }
3004
- if (isFixedStrategy === void 0) {
3005
- isFixedStrategy = false;
3006
- }
3007
- const clientRect = element.getBoundingClientRect();
3008
- const domElement = unwrapElement(element);
3009
- let scale = createCoords(1);
3010
- if (includeScale) {
3011
- if (offsetParent) {
3012
- if (isElement(offsetParent)) {
3013
- scale = getScale(offsetParent);
3014
- }
3015
- } else {
3016
- scale = getScale(element);
3017
- }
3018
- }
3019
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
3020
- let x = (clientRect.left + visualOffsets.x) / scale.x;
3021
- let y = (clientRect.top + visualOffsets.y) / scale.y;
3022
- let width = clientRect.width / scale.x;
3023
- let height = clientRect.height / scale.y;
3024
- if (domElement) {
3025
- const win = getWindow(domElement);
3026
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
3027
- let currentWin = win;
3028
- let currentIFrame = getFrameElement(currentWin);
3029
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
3030
- const iframeScale = getScale(currentIFrame);
3031
- const iframeRect = currentIFrame.getBoundingClientRect();
3032
- const css = getComputedStyle$1(currentIFrame);
3033
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
3034
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
3035
- x *= iframeScale.x;
3036
- y *= iframeScale.y;
3037
- width *= iframeScale.x;
3038
- height *= iframeScale.y;
3039
- x += left;
3040
- y += top;
3041
- currentWin = getWindow(currentIFrame);
3042
- currentIFrame = getFrameElement(currentWin);
3043
- }
3044
- }
3045
- return rectToClientRect({
3046
- width,
3047
- height,
3048
- x,
3049
- y
3050
- });
3051
- }
3052
- function getWindowScrollBarX(element, rect) {
3053
- const leftScroll = getNodeScroll(element).scrollLeft;
3054
- if (!rect) {
3055
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
3056
- }
3057
- return rect.left + leftScroll;
3058
- }
3059
- function getHTMLOffset(documentElement, scroll) {
3060
- const htmlRect = documentElement.getBoundingClientRect();
3061
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
3062
- const y = htmlRect.top + scroll.scrollTop;
3063
- return {
3064
- x,
3065
- y
3066
- };
3067
- }
3068
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
3069
- let {
3070
- elements,
3071
- rect,
3072
- offsetParent,
3073
- strategy
3074
- } = _ref;
3075
- const isFixed = strategy === "fixed";
3076
- const documentElement = getDocumentElement(offsetParent);
3077
- const topLayer = elements ? isTopLayer(elements.floating) : false;
3078
- if (offsetParent === documentElement || topLayer && isFixed) {
3079
- return rect;
3080
- }
3081
- let scroll = {
3082
- scrollLeft: 0,
3083
- scrollTop: 0
3084
- };
3085
- let scale = createCoords(1);
3086
- const offsets = createCoords(0);
3087
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
3088
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
3089
- if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
3090
- scroll = getNodeScroll(offsetParent);
3091
- }
3092
- if (isHTMLElement(offsetParent)) {
3093
- const offsetRect = getBoundingClientRect(offsetParent);
3094
- scale = getScale(offsetParent);
3095
- offsets.x = offsetRect.x + offsetParent.clientLeft;
3096
- offsets.y = offsetRect.y + offsetParent.clientTop;
3097
- }
3098
- }
3099
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
3100
- return {
3101
- width: rect.width * scale.x,
3102
- height: rect.height * scale.y,
3103
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
3104
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
3105
- };
3106
- }
3107
- function getClientRects(element) {
3108
- return Array.from(element.getClientRects());
3109
- }
3110
- function getDocumentRect(element) {
3111
- const html = getDocumentElement(element);
3112
- const scroll = getNodeScroll(element);
3113
- const body = element.ownerDocument.body;
3114
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
3115
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
3116
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
3117
- const y = -scroll.scrollTop;
3118
- if (getComputedStyle$1(body).direction === "rtl") {
3119
- x += max(html.clientWidth, body.clientWidth) - width;
3120
- }
3121
- return {
3122
- width,
3123
- height,
3124
- x,
3125
- y
3126
- };
3127
- }
3128
- const SCROLLBAR_MAX = 25;
3129
- function getViewportRect(element, strategy) {
3130
- const win = getWindow(element);
3131
- const html = getDocumentElement(element);
3132
- const visualViewport = win.visualViewport;
3133
- let width = html.clientWidth;
3134
- let height = html.clientHeight;
3135
- let x = 0;
3136
- let y = 0;
3137
- if (visualViewport) {
3138
- width = visualViewport.width;
3139
- height = visualViewport.height;
3140
- const visualViewportBased = isWebKit();
3141
- if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
3142
- x = visualViewport.offsetLeft;
3143
- y = visualViewport.offsetTop;
3144
- }
3145
- }
3146
- const windowScrollbarX = getWindowScrollBarX(html);
3147
- if (windowScrollbarX <= 0) {
3148
- const doc = html.ownerDocument;
3149
- const body = doc.body;
3150
- const bodyStyles = getComputedStyle(body);
3151
- const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
3152
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
3153
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
3154
- width -= clippingStableScrollbarWidth;
3155
- }
3156
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
3157
- width += windowScrollbarX;
3158
- }
3159
- return {
3160
- width,
3161
- height,
3162
- x,
3163
- y
3164
- };
3165
- }
3166
- const absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
3167
- function getInnerBoundingClientRect(element, strategy) {
3168
- const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
3169
- const top = clientRect.top + element.clientTop;
3170
- const left = clientRect.left + element.clientLeft;
3171
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
3172
- const width = element.clientWidth * scale.x;
3173
- const height = element.clientHeight * scale.y;
3174
- const x = left * scale.x;
3175
- const y = top * scale.y;
3176
- return {
3177
- width,
3178
- height,
3179
- x,
3180
- y
3181
- };
3182
- }
3183
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
3184
- let rect;
3185
- if (clippingAncestor === "viewport") {
3186
- rect = getViewportRect(element, strategy);
3187
- } else if (clippingAncestor === "document") {
3188
- rect = getDocumentRect(getDocumentElement(element));
3189
- } else if (isElement(clippingAncestor)) {
3190
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
3191
- } else {
3192
- const visualOffsets = getVisualOffsets(element);
3193
- rect = {
3194
- x: clippingAncestor.x - visualOffsets.x,
3195
- y: clippingAncestor.y - visualOffsets.y,
3196
- width: clippingAncestor.width,
3197
- height: clippingAncestor.height
3198
- };
3199
- }
3200
- return rectToClientRect(rect);
3201
- }
3202
- function hasFixedPositionAncestor(element, stopNode) {
3203
- const parentNode = getParentNode(element);
3204
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
3205
- return false;
3206
- }
3207
- return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
3208
- }
3209
- function getClippingElementAncestors(element, cache) {
3210
- const cachedResult = cache.get(element);
3211
- if (cachedResult) {
3212
- return cachedResult;
3213
- }
3214
- let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
3215
- let currentContainingBlockComputedStyle = null;
3216
- const elementIsFixed = getComputedStyle$1(element).position === "fixed";
3217
- let currentNode = elementIsFixed ? getParentNode(element) : element;
3218
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
3219
- const computedStyle = getComputedStyle$1(currentNode);
3220
- const currentNodeIsContaining = isContainingBlock(currentNode);
3221
- if (!currentNodeIsContaining && computedStyle.position === "fixed") {
3222
- currentContainingBlockComputedStyle = null;
3223
- }
3224
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
3225
- if (shouldDropCurrentNode) {
3226
- result = result.filter((ancestor) => ancestor !== currentNode);
3227
- } else {
3228
- currentContainingBlockComputedStyle = computedStyle;
3229
- }
3230
- currentNode = getParentNode(currentNode);
3231
- }
3232
- cache.set(element, result);
3233
- return result;
3234
- }
3235
- function getClippingRect(_ref) {
3236
- let {
3237
- element,
3238
- boundary,
3239
- rootBoundary,
3240
- strategy
3241
- } = _ref;
3242
- const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
3243
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
3244
- const firstClippingAncestor = clippingAncestors[0];
3245
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
3246
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
3247
- accRect.top = max(rect.top, accRect.top);
3248
- accRect.right = min(rect.right, accRect.right);
3249
- accRect.bottom = min(rect.bottom, accRect.bottom);
3250
- accRect.left = max(rect.left, accRect.left);
3251
- return accRect;
3252
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
3253
- return {
3254
- width: clippingRect.right - clippingRect.left,
3255
- height: clippingRect.bottom - clippingRect.top,
3256
- x: clippingRect.left,
3257
- y: clippingRect.top
3258
- };
3259
- }
3260
- function getDimensions(element) {
3261
- const {
3262
- width,
3263
- height
3264
- } = getCssDimensions(element);
3265
- return {
3266
- width,
3267
- height
3268
- };
3269
- }
3270
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
3271
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
3272
- const documentElement = getDocumentElement(offsetParent);
3273
- const isFixed = strategy === "fixed";
3274
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
3275
- let scroll = {
3276
- scrollLeft: 0,
3277
- scrollTop: 0
3278
- };
3279
- const offsets = createCoords(0);
3280
- function setLeftRTLScrollbarOffset() {
3281
- offsets.x = getWindowScrollBarX(documentElement);
3282
- }
3283
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
3284
- if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
3285
- scroll = getNodeScroll(offsetParent);
3286
- }
3287
- if (isOffsetParentAnElement) {
3288
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
3289
- offsets.x = offsetRect.x + offsetParent.clientLeft;
3290
- offsets.y = offsetRect.y + offsetParent.clientTop;
3291
- } else if (documentElement) {
3292
- setLeftRTLScrollbarOffset();
3293
- }
3294
- }
3295
- if (isFixed && !isOffsetParentAnElement && documentElement) {
3296
- setLeftRTLScrollbarOffset();
3297
- }
3298
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
3299
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
3300
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
3301
- return {
3302
- x,
3303
- y,
3304
- width: rect.width,
3305
- height: rect.height
3306
- };
3307
- }
3308
- function isStaticPositioned(element) {
3309
- return getComputedStyle$1(element).position === "static";
3310
- }
3311
- function getTrueOffsetParent(element, polyfill) {
3312
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
3313
- return null;
3314
- }
3315
- if (polyfill) {
3316
- return polyfill(element);
3317
- }
3318
- let rawOffsetParent = element.offsetParent;
3319
- if (getDocumentElement(element) === rawOffsetParent) {
3320
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
3321
- }
3322
- return rawOffsetParent;
3323
- }
3324
- function getOffsetParent(element, polyfill) {
3325
- const win = getWindow(element);
3326
- if (isTopLayer(element)) {
3327
- return win;
3328
- }
3329
- if (!isHTMLElement(element)) {
3330
- let svgOffsetParent = getParentNode(element);
3331
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
3332
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
3333
- return svgOffsetParent;
3334
- }
3335
- svgOffsetParent = getParentNode(svgOffsetParent);
3336
- }
3337
- return win;
3338
- }
3339
- let offsetParent = getTrueOffsetParent(element, polyfill);
3340
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
3341
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
3342
- }
3343
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
3344
- return win;
3345
- }
3346
- return offsetParent || getContainingBlock(element) || win;
3347
- }
3348
- const getElementRects = async function(data) {
3349
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
3350
- const getDimensionsFn = this.getDimensions;
3351
- const floatingDimensions = await getDimensionsFn(data.floating);
3352
- return {
3353
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
3354
- floating: {
3355
- x: 0,
3356
- y: 0,
3357
- width: floatingDimensions.width,
3358
- height: floatingDimensions.height
3359
- }
3360
- };
3361
- };
3362
- function isRTL(element) {
3363
- return getComputedStyle$1(element).direction === "rtl";
3364
- }
3365
- const platform = {
3366
- convertOffsetParentRelativeRectToViewportRelativeRect,
3367
- getDocumentElement,
3368
- getClippingRect,
3369
- getOffsetParent,
3370
- getElementRects,
3371
- getClientRects,
3372
- getDimensions,
3373
- getScale,
3374
- isElement,
3375
- isRTL
3376
- };
3377
- function rectsAreEqual(a, b) {
3378
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
3379
- }
3380
- function observeMove(element, onMove) {
3381
- let io = null;
3382
- let timeoutId;
3383
- const root = getDocumentElement(element);
3384
- function cleanup() {
3385
- var _io;
3386
- clearTimeout(timeoutId);
3387
- (_io = io) == null || _io.disconnect();
3388
- io = null;
3389
- }
3390
- function refresh(skip, threshold) {
3391
- if (skip === void 0) {
3392
- skip = false;
3393
- }
3394
- if (threshold === void 0) {
3395
- threshold = 1;
3396
- }
3397
- cleanup();
3398
- const elementRectForRootMargin = element.getBoundingClientRect();
3399
- const {
3400
- left,
3401
- top,
3402
- width,
3403
- height
3404
- } = elementRectForRootMargin;
3405
- if (!skip) {
3406
- onMove();
3407
- }
3408
- if (!width || !height) {
3409
- return;
3410
- }
3411
- const insetTop = floor(top);
3412
- const insetRight = floor(root.clientWidth - (left + width));
3413
- const insetBottom = floor(root.clientHeight - (top + height));
3414
- const insetLeft = floor(left);
3415
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
3416
- const options = {
3417
- rootMargin,
3418
- threshold: max(0, min(1, threshold)) || 1
3419
- };
3420
- let isFirstUpdate = true;
3421
- function handleObserve(entries) {
3422
- const ratio = entries[0].intersectionRatio;
3423
- if (ratio !== threshold) {
3424
- if (!isFirstUpdate) {
3425
- return refresh();
3426
- }
3427
- if (!ratio) {
3428
- timeoutId = setTimeout(() => {
3429
- refresh(false, 1e-7);
3430
- }, 1e3);
3431
- } else {
3432
- refresh(false, ratio);
3433
- }
3434
- }
3435
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
3436
- refresh();
3437
- }
3438
- isFirstUpdate = false;
3439
- }
3440
- try {
3441
- io = new IntersectionObserver(handleObserve, {
3442
- ...options,
3443
- // Handle <iframe>s
3444
- root: root.ownerDocument
3445
- });
3446
- } catch (_e) {
3447
- io = new IntersectionObserver(handleObserve, options);
3448
- }
3449
- io.observe(element);
11
+ function standardisePlacement(placement) {
12
+ switch (placement) {
13
+ case "top-left":
14
+ return "top-start";
15
+ case "top-right":
16
+ return "top-end";
17
+ case "bottom-left":
18
+ return "bottom-start";
19
+ case "bottom-right":
20
+ return "bottom-end";
21
+ default:
22
+ return placement;
3450
23
  }
3451
- refresh(true);
3452
- return cleanup;
3453
24
  }
3454
- function autoUpdate(reference, floating, update, options) {
3455
- if (options === void 0) {
3456
- options = {};
3457
- }
25
+ const error = "error";
26
+ const Tooltip = ({
27
+ placement,
28
+ content,
29
+ children,
30
+ className,
31
+ isOpen,
32
+ onClickCloseButton = () => void 0,
33
+ disableHoverListener = false,
34
+ disableFocusListener = false,
35
+ disableKeyboardListener = true,
36
+ disableClickListner = true,
37
+ showCloseButton = true,
38
+ variant,
39
+ hoverDelay,
40
+ style,
41
+ ...rest
42
+ }) => {
43
+ const [showTooltip, setShowTooltip] = useState(isOpen ?? false);
44
+ const tooltipArrowRef = useRef(null);
45
+ const tooltipId = useRandomId("eds-tooltip");
46
+ const hoverOpenTimer = useRef();
47
+ const hoverCloseTimer = useRef();
48
+ const isControlled = isOpen !== void 0;
3458
49
  const {
3459
- ancestorScroll = true,
3460
- ancestorResize = true,
3461
- elementResize = typeof ResizeObserver === "function",
3462
- layoutShift = typeof IntersectionObserver === "function",
3463
- animationFrame = false
3464
- } = options;
3465
- const referenceEl = unwrapElement(reference);
3466
- const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
3467
- ancestors.forEach((ancestor) => {
3468
- ancestorScroll && ancestor.addEventListener("scroll", update, {
3469
- passive: true
3470
- });
3471
- ancestorResize && ancestor.addEventListener("resize", update);
50
+ refs,
51
+ floatingStyles,
52
+ middlewareData,
53
+ placement: actualPlacement,
54
+ isPositioned,
55
+ update,
56
+ elements
57
+ } = useFloating({
58
+ placement: standardisePlacement(placement),
59
+ open: showTooltip,
60
+ middleware: [
61
+ offset(space.extraSmall),
62
+ flip(),
63
+ shift({ padding: space.extraSmall, limiter: limitShift({ offset: 8 }) }),
64
+ arrow({
65
+ element: tooltipArrowRef,
66
+ padding: borderRadiuses.medium
67
+ })
68
+ ]
3472
69
  });
3473
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
3474
- let reobserveFrame = -1;
3475
- let resizeObserver = null;
3476
- if (elementResize) {
3477
- resizeObserver = new ResizeObserver((_ref) => {
3478
- let [firstEntry] = _ref;
3479
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
3480
- resizeObserver.unobserve(floating);
3481
- cancelAnimationFrame(reobserveFrame);
3482
- reobserveFrame = requestAnimationFrame(() => {
3483
- var _resizeObserver;
3484
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
3485
- });
3486
- }
3487
- update();
3488
- });
3489
- if (referenceEl && !animationFrame) {
3490
- resizeObserver.observe(referenceEl);
3491
- }
3492
- resizeObserver.observe(floating);
3493
- }
3494
- let frameId;
3495
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
3496
- if (animationFrame) {
3497
- frameLoop();
3498
- }
3499
- function frameLoop() {
3500
- const nextRefRect = getBoundingClientRect(reference);
3501
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
3502
- update();
3503
- }
3504
- prevRefRect = nextRefRect;
3505
- frameId = requestAnimationFrame(frameLoop);
3506
- }
3507
- update();
3508
- return () => {
3509
- var _resizeObserver2;
3510
- ancestors.forEach((ancestor) => {
3511
- ancestorScroll && ancestor.removeEventListener("scroll", update);
3512
- ancestorResize && ancestor.removeEventListener("resize", update);
3513
- });
3514
- cleanupIo == null || cleanupIo();
3515
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
3516
- resizeObserver = null;
3517
- if (animationFrame) {
3518
- cancelAnimationFrame(frameId);
70
+ useEffect(() => {
71
+ if (showTooltip && elements.reference && elements.floating) {
72
+ const cleanup = autoUpdate(elements.reference, elements.floating, update);
73
+ return cleanup;
3519
74
  }
75
+ }, [showTooltip, elements, update]);
76
+ const onMouseEnter = () => {
77
+ if (isControlled) return;
78
+ clearTimeout(hoverCloseTimer.current);
79
+ hoverOpenTimer.current = setTimeout(() => {
80
+ setShowTooltip(true);
81
+ }, hoverDelay?.enter ?? 150);
3520
82
  };
3521
- }
3522
- const offset$1 = offset$2;
3523
- const shift$1 = shift$2;
3524
- const flip$1 = flip$2;
3525
- const limitShift$1 = limitShift$2;
3526
- const computePosition = (reference, floating, options) => {
3527
- const cache = /* @__PURE__ */ new Map();
3528
- const mergedOptions = {
3529
- platform,
3530
- ...options
3531
- };
3532
- const platformWithCache = {
3533
- ...mergedOptions.platform,
3534
- _c: cache
83
+ const onMouseLeave = () => {
84
+ if (isControlled) return;
85
+ clearTimeout(hoverOpenTimer.current);
86
+ hoverCloseTimer.current = setTimeout(() => {
87
+ setShowTooltip(false);
88
+ }, hoverDelay?.leave ?? 300);
3535
89
  };
3536
- return computePosition$1(reference, floating, {
3537
- ...mergedOptions,
3538
- platform: platformWithCache
3539
- });
3540
- };
3541
- var isClient = typeof document !== "undefined";
3542
- var noop = function noop2() {
3543
- };
3544
- var index = isClient ? useLayoutEffect : noop;
3545
- function deepEqual(a, b) {
3546
- if (a === b) {
3547
- return true;
3548
- }
3549
- if (typeof a !== typeof b) {
3550
- return false;
3551
- }
3552
- if (typeof a === "function" && a.toString() === b.toString()) {
3553
- return true;
3554
- }
3555
- let length;
3556
- let i;
3557
- let keys;
3558
- if (a && b && typeof a === "object") {
3559
- if (Array.isArray(a)) {
3560
- length = a.length;
3561
- if (length !== b.length) return false;
3562
- for (i = length; i-- !== 0; ) {
3563
- if (!deepEqual(a[i], b[i])) {
3564
- return false;
3565
- }
3566
- }
3567
- return true;
3568
- }
3569
- keys = Object.keys(a);
3570
- length = keys.length;
3571
- if (length !== Object.keys(b).length) {
3572
- return false;
3573
- }
3574
- for (i = length; i-- !== 0; ) {
3575
- if (!{}.hasOwnProperty.call(b, keys[i])) {
3576
- return false;
3577
- }
3578
- }
3579
- for (i = length; i-- !== 0; ) {
3580
- const key = keys[i];
3581
- if (key === "_owner" && a.$$typeof) {
3582
- continue;
3583
- }
3584
- if (!deepEqual(a[key], b[key])) {
3585
- return false;
3586
- }
3587
- }
3588
- return true;
3589
- }
3590
- return a !== a && b !== b;
3591
- }
3592
- function getDPR(element) {
3593
- if (typeof window === "undefined") {
3594
- return 1;
3595
- }
3596
- const win = element.ownerDocument.defaultView || window;
3597
- return win.devicePixelRatio || 1;
3598
- }
3599
- function roundByDPR(element, value) {
3600
- const dpr = getDPR(element);
3601
- return Math.round(value * dpr) / dpr;
3602
- }
3603
- function useLatestRef(value) {
3604
- const ref = React.useRef(value);
3605
- index(() => {
3606
- ref.current = value;
3607
- });
3608
- return ref;
3609
- }
3610
- function useFloating(options) {
3611
- if (options === void 0) {
3612
- options = {};
3613
- }
3614
- const {
3615
- placement = "bottom",
3616
- strategy = "absolute",
3617
- middleware = [],
3618
- platform: platform2,
3619
- elements: {
3620
- reference: externalReference,
3621
- floating: externalFloating
3622
- } = {},
3623
- transform = true,
3624
- whileElementsMounted,
3625
- open
3626
- } = options;
3627
- const [data, setData] = React.useState({
3628
- x: 0,
3629
- y: 0,
3630
- strategy,
3631
- placement,
3632
- middlewareData: {},
3633
- isPositioned: false
3634
- });
3635
- const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
3636
- if (!deepEqual(latestMiddleware, middleware)) {
3637
- setLatestMiddleware(middleware);
3638
- }
3639
- const [_reference, _setReference] = React.useState(null);
3640
- const [_floating, _setFloating] = React.useState(null);
3641
- const setReference = React.useCallback((node) => {
3642
- if (node !== referenceRef.current) {
3643
- referenceRef.current = node;
3644
- _setReference(node);
3645
- }
3646
- }, []);
3647
- const setFloating = React.useCallback((node) => {
3648
- if (node !== floatingRef.current) {
3649
- floatingRef.current = node;
3650
- _setFloating(node);
3651
- }
3652
- }, []);
3653
- const referenceEl = externalReference || _reference;
3654
- const floatingEl = externalFloating || _floating;
3655
- const referenceRef = React.useRef(null);
3656
- const floatingRef = React.useRef(null);
3657
- const dataRef = React.useRef(data);
3658
- const hasWhileElementsMounted = whileElementsMounted != null;
3659
- const whileElementsMountedRef = useLatestRef(whileElementsMounted);
3660
- const platformRef = useLatestRef(platform2);
3661
- const openRef = useLatestRef(open);
3662
- const update = React.useCallback(() => {
3663
- if (!referenceRef.current || !floatingRef.current) {
3664
- return;
3665
- }
3666
- const config = {
3667
- placement,
3668
- strategy,
3669
- middleware: latestMiddleware
3670
- };
3671
- if (platformRef.current) {
3672
- config.platform = platformRef.current;
3673
- }
3674
- computePosition(referenceRef.current, floatingRef.current, config).then((data2) => {
3675
- const fullData = {
3676
- ...data2,
3677
- // The floating element's position may be recomputed while it's closed
3678
- // but still mounted (such as when transitioning out). To ensure
3679
- // `isPositioned` will be `false` initially on the next open, avoid
3680
- // setting it to `true` when `open === false` (must be specified).
3681
- isPositioned: openRef.current !== false
3682
- };
3683
- if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
3684
- dataRef.current = fullData;
3685
- ReactDOM.flushSync(() => {
3686
- setData(fullData);
3687
- });
3688
- }
3689
- });
3690
- }, [latestMiddleware, placement, strategy, platformRef, openRef]);
3691
- index(() => {
3692
- if (open === false && dataRef.current.isPositioned) {
3693
- dataRef.current.isPositioned = false;
3694
- setData((data2) => ({
3695
- ...data2,
3696
- isPositioned: false
3697
- }));
3698
- }
3699
- }, [open]);
3700
- const isMountedRef = React.useRef(false);
3701
- index(() => {
3702
- isMountedRef.current = true;
90
+ React.useEffect(() => {
3703
91
  return () => {
3704
- isMountedRef.current = false;
92
+ clearTimeout(hoverOpenTimer.current);
93
+ clearTimeout(hoverCloseTimer.current);
3705
94
  };
3706
95
  }, []);
3707
- index(() => {
3708
- if (referenceEl) referenceRef.current = referenceEl;
3709
- if (floatingEl) floatingRef.current = floatingEl;
3710
- if (referenceEl && floatingEl) {
3711
- if (whileElementsMountedRef.current) {
3712
- return whileElementsMountedRef.current(referenceEl, floatingEl, update);
3713
- }
3714
- update();
3715
- }
3716
- }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
3717
- const refs = React.useMemo(() => ({
3718
- reference: referenceRef,
3719
- floating: floatingRef,
3720
- setReference,
3721
- setFloating
3722
- }), [setReference, setFloating]);
3723
- const elements = React.useMemo(() => ({
3724
- reference: referenceEl,
3725
- floating: floatingEl
3726
- }), [referenceEl, floatingEl]);
3727
- const floatingStyles = React.useMemo(() => {
3728
- const initialStyles = {
3729
- position: strategy,
3730
- left: 0,
3731
- top: 0
3732
- };
3733
- if (!elements.floating) {
3734
- return initialStyles;
3735
- }
3736
- const x = roundByDPR(elements.floating, data.x);
3737
- const y = roundByDPR(elements.floating, data.y);
3738
- if (transform) {
3739
- return {
3740
- ...initialStyles,
3741
- transform: "translate(" + x + "px, " + y + "px)",
3742
- ...getDPR(elements.floating) >= 1.5 && {
3743
- willChange: "transform"
96
+ React.useEffect(() => {
97
+ if (isOpen !== void 0) setShowTooltip(isOpen);
98
+ }, [isOpen]);
99
+ const referenceListenerProps = {
100
+ "aria-describedby": showTooltip ? tooltipId : void 0,
101
+ // focusListner
102
+ ...!disableFocusListener && !isControlled && { onFocus: () => setShowTooltip(true) },
103
+ ...!disableFocusListener && !isControlled && { onBlur: () => setShowTooltip(false) },
104
+ // hoverListner
105
+ ...!disableHoverListener && !isControlled && { onMouseEnter },
106
+ ...!disableHoverListener && !isControlled && { onMouseLeave },
107
+ // keyboardListner
108
+ ...!disableKeyboardListener && !isControlled && {
109
+ onKeyDown: (e) => {
110
+ if (e.key === "Escape") setShowTooltip(false);
111
+ if (e.key === " " || e.key === "Enter") {
112
+ e.preventDefault();
113
+ setShowTooltip(!showTooltip);
3744
114
  }
3745
- };
115
+ }
116
+ },
117
+ // clickListner
118
+ ...!disableClickListner && !isControlled && {
119
+ onClick: () => setShowTooltip(!showTooltip)
3746
120
  }
3747
- return {
3748
- position: strategy,
3749
- left: x,
3750
- top: y
3751
- };
3752
- }, [strategy, transform, elements.floating, data.x, data.y]);
3753
- return React.useMemo(() => ({
3754
- ...data,
3755
- update,
3756
- refs,
3757
- elements,
3758
- floatingStyles
3759
- }), [data, update, refs, elements, floatingStyles]);
3760
- }
3761
- const offset = (options, deps) => ({
3762
- ...offset$1(options),
3763
- options: [options, deps]
3764
- });
3765
- const shift = (options, deps) => ({
3766
- ...shift$1(options),
3767
- options: [options, deps]
3768
- });
3769
- const limitShift = (options, deps) => ({
3770
- ...limitShift$1(options),
3771
- options: [options, deps]
3772
- });
3773
- const flip = (options, deps) => ({
3774
- ...flip$1(options),
3775
- options: [options, deps]
3776
- });
121
+ };
122
+ const displayTooltipStyle = (!isControlled || isPositioned) && showTooltip && content ? void 0 : "none";
123
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
124
+ cloneElement(children, {
125
+ ref: refs.setReference,
126
+ ...referenceListenerProps
127
+ }),
128
+ /* @__PURE__ */ jsxs(
129
+ "div",
130
+ {
131
+ className: classNames(className, "eds-tooltip", {
132
+ "eds-tooltip--negative": variant === error || variant === "negative"
133
+ }),
134
+ ref: refs.setFloating,
135
+ style: {
136
+ ...floatingStyles,
137
+ display: displayTooltipStyle,
138
+ ...style
139
+ },
140
+ role: "tooltip",
141
+ id: tooltipId,
142
+ onMouseEnter: !disableHoverListener ? onMouseEnter : void 0,
143
+ onMouseLeave: !disableHoverListener ? onMouseLeave : void 0,
144
+ ...rest,
145
+ children: [
146
+ content,
147
+ isOpen && showCloseButton && /* @__PURE__ */ jsx(
148
+ IconButton,
149
+ {
150
+ className: "eds-tooltip__close-button",
151
+ onClick: () => {
152
+ setShowTooltip(false);
153
+ onClickCloseButton();
154
+ },
155
+ type: "button",
156
+ "aria-label": "Lukk tooltip",
157
+ children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
158
+ }
159
+ ),
160
+ /* @__PURE__ */ jsx(
161
+ "div",
162
+ {
163
+ className: `eds-tooltip__arrow--${actualPlacement?.split("-")?.[0]}`,
164
+ ref: tooltipArrowRef,
165
+ style: {
166
+ left: middlewareData.arrow?.x,
167
+ top: middlewareData.arrow?.y
168
+ }
169
+ }
170
+ )
171
+ ]
172
+ }
173
+ )
174
+ ] });
175
+ };
3777
176
  const Popover = ({
3778
177
  children,
3779
178
  placement = "bottom-start",
@@ -3784,20 +183,20 @@ const Popover = ({
3784
183
  controlledState,
3785
184
  setControlledState
3786
185
  );
3787
- const { refs, floatingStyles, elements, update } = useFloating({
186
+ const { refs, floatingStyles, elements, update } = useFloating$1({
3788
187
  placement: standardisePlacement(placement),
3789
188
  middleware: [
3790
- offset(space.extraSmall),
3791
- flip(),
3792
- shift({
189
+ offset$1(space.extraSmall),
190
+ flip$1(),
191
+ shift$1({
3793
192
  padding: space.extraSmall,
3794
- limiter: limitShift({ offset: 8 })
193
+ limiter: limitShift$1({ offset: 8 })
3795
194
  })
3796
195
  ]
3797
196
  });
3798
197
  useEffect(() => {
3799
198
  if (showPopover && elements.reference && elements.floating) {
3800
- const cleanup = autoUpdate(elements.reference, elements.floating, update);
199
+ const cleanup = autoUpdate$1(elements.reference, elements.floating, update);
3801
200
  return cleanup;
3802
201
  }
3803
202
  }, [showPopover, elements, update]);
@@ -3854,7 +253,7 @@ const Popover = ({
3854
253
  };
3855
254
  const PopoverTrigger = ({ children }) => {
3856
255
  const { popoverTriggerProps } = usePopoverContext();
3857
- const child = React__default.Children.only(children);
256
+ const child = React.Children.only(children);
3858
257
  return cloneElement(child, popoverTriggerProps);
3859
258
  };
3860
259
  const PopoverCloseButton = ({
@@ -3864,7 +263,7 @@ const PopoverCloseButton = ({
3864
263
  const { closeButtonProps } = usePopoverContext();
3865
264
  return cloneElement(children, { ...closeButtonProps, ...rest });
3866
265
  };
3867
- const PopoverContent = React__default.forwardRef(({ children, className, style }, ref) => {
266
+ const PopoverContent = React.forwardRef(({ children, className, style }, ref) => {
3868
267
  const { floatingStyles, popoverContentProps } = usePopoverContext();
3869
268
  return /* @__PURE__ */ jsx(
3870
269
  Contrast,
@@ -3888,7 +287,7 @@ const usePopoverContext = () => {
3888
287
  return context;
3889
288
  };
3890
289
  const useCustomState = (state, setState) => {
3891
- const [internalState, setInternalState] = React__default.useState(false);
290
+ const [internalState, setInternalState] = React.useState(false);
3892
291
  const controlled = state !== void 0 && setState !== void 0;
3893
292
  if (controlled) return [state, setState, controlled];
3894
293
  return [internalState, setInternalState, controlled];