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