@radui/ui 0.0.10 → 0.0.11
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.
- package/dist/components/Accordion.js +1 -81
- package/dist/components/Avatar.js +1 -165
- package/dist/components/AvatarImage.d.ts.map +1 -1
- package/dist/components/Badge.js +1 -80
- package/dist/components/BlockQuote.js +1 -75
- package/dist/components/Button.js +1 -69
- package/dist/components/Callout.js +1 -95
- package/dist/components/Code.js +1 -11
- package/dist/components/Dropdown.js +1 -1809
- package/dist/components/Em.js +1 -75
- package/dist/components/Heading.js +1 -80
- package/dist/components/Kbd.js +1 -74
- package/dist/components/Link.js +1 -81
- package/dist/components/Quote.js +1 -75
- package/dist/components/Separator.js +1 -33
- package/dist/components/Strong.js +1 -7
- package/dist/components/Tabs.js +1 -231
- package/dist/components/Text.js +1 -80
- package/dist/components/TextArea.js +1 -9
- package/dist/components/Tooltip.js +1 -58
- package/package.json +1 -1
|
@@ -1,1809 +1 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import * as React$1 from 'react';
|
|
3
|
-
import { useLayoutEffect, useEffect, useState } from 'react';
|
|
4
|
-
import * as ReactDOM from 'react-dom';
|
|
5
|
-
|
|
6
|
-
function _iterableToArrayLimit(r, l) {
|
|
7
|
-
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
8
|
-
if (null != t) {
|
|
9
|
-
var e,
|
|
10
|
-
n,
|
|
11
|
-
i,
|
|
12
|
-
u,
|
|
13
|
-
a = [],
|
|
14
|
-
f = !0,
|
|
15
|
-
o = !1;
|
|
16
|
-
try {
|
|
17
|
-
if (i = (t = t.call(r)).next, 0 === l) {
|
|
18
|
-
if (Object(t) !== t) return;
|
|
19
|
-
f = !1;
|
|
20
|
-
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
21
|
-
} catch (r) {
|
|
22
|
-
o = !0, n = r;
|
|
23
|
-
} finally {
|
|
24
|
-
try {
|
|
25
|
-
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
26
|
-
} finally {
|
|
27
|
-
if (o) throw n;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return a;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
function _slicedToArray(arr, i) {
|
|
34
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
35
|
-
}
|
|
36
|
-
function _arrayWithHoles(arr) {
|
|
37
|
-
if (Array.isArray(arr)) return arr;
|
|
38
|
-
}
|
|
39
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
40
|
-
if (!o) return;
|
|
41
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
42
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
43
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
44
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
45
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
46
|
-
}
|
|
47
|
-
function _arrayLikeToArray(arr, len) {
|
|
48
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
49
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
50
|
-
return arr2;
|
|
51
|
-
}
|
|
52
|
-
function _nonIterableRest() {
|
|
53
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function getNodeName(node) {
|
|
57
|
-
if (isNode(node)) {
|
|
58
|
-
return (node.nodeName || '').toLowerCase();
|
|
59
|
-
}
|
|
60
|
-
// Mocked nodes in testing environments may not be instances of Node. By
|
|
61
|
-
// returning `#document` an infinite loop won't occur.
|
|
62
|
-
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
63
|
-
return '#document';
|
|
64
|
-
}
|
|
65
|
-
function getWindow(node) {
|
|
66
|
-
var _node$ownerDocument;
|
|
67
|
-
return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
68
|
-
}
|
|
69
|
-
function getDocumentElement(node) {
|
|
70
|
-
var _ref;
|
|
71
|
-
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
72
|
-
}
|
|
73
|
-
function isNode(value) {
|
|
74
|
-
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
75
|
-
}
|
|
76
|
-
function isElement(value) {
|
|
77
|
-
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
78
|
-
}
|
|
79
|
-
function isHTMLElement(value) {
|
|
80
|
-
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
81
|
-
}
|
|
82
|
-
function isShadowRoot(value) {
|
|
83
|
-
// Browsers without `ShadowRoot` support.
|
|
84
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
85
|
-
return false;
|
|
86
|
-
}
|
|
87
|
-
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
88
|
-
}
|
|
89
|
-
function isOverflowElement(element) {
|
|
90
|
-
const {
|
|
91
|
-
overflow,
|
|
92
|
-
overflowX,
|
|
93
|
-
overflowY,
|
|
94
|
-
display
|
|
95
|
-
} = getComputedStyle(element);
|
|
96
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
97
|
-
}
|
|
98
|
-
function isTableElement(element) {
|
|
99
|
-
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
100
|
-
}
|
|
101
|
-
function isContainingBlock(element) {
|
|
102
|
-
const webkit = isWebKit();
|
|
103
|
-
const css = getComputedStyle(element);
|
|
104
|
-
|
|
105
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
106
|
-
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));
|
|
107
|
-
}
|
|
108
|
-
function getContainingBlock(element) {
|
|
109
|
-
let currentNode = getParentNode(element);
|
|
110
|
-
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
111
|
-
if (isContainingBlock(currentNode)) {
|
|
112
|
-
return currentNode;
|
|
113
|
-
} else {
|
|
114
|
-
currentNode = getParentNode(currentNode);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
return null;
|
|
118
|
-
}
|
|
119
|
-
function isWebKit() {
|
|
120
|
-
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
121
|
-
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
122
|
-
}
|
|
123
|
-
function isLastTraversableNode(node) {
|
|
124
|
-
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
125
|
-
}
|
|
126
|
-
function getComputedStyle(element) {
|
|
127
|
-
return getWindow(element).getComputedStyle(element);
|
|
128
|
-
}
|
|
129
|
-
function getNodeScroll(element) {
|
|
130
|
-
if (isElement(element)) {
|
|
131
|
-
return {
|
|
132
|
-
scrollLeft: element.scrollLeft,
|
|
133
|
-
scrollTop: element.scrollTop
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
return {
|
|
137
|
-
scrollLeft: element.pageXOffset,
|
|
138
|
-
scrollTop: element.pageYOffset
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
function getParentNode(node) {
|
|
142
|
-
if (getNodeName(node) === 'html') {
|
|
143
|
-
return node;
|
|
144
|
-
}
|
|
145
|
-
const result =
|
|
146
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
147
|
-
node.assignedSlot ||
|
|
148
|
-
// DOM Element detected.
|
|
149
|
-
node.parentNode ||
|
|
150
|
-
// ShadowRoot detected.
|
|
151
|
-
isShadowRoot(node) && node.host ||
|
|
152
|
-
// Fallback.
|
|
153
|
-
getDocumentElement(node);
|
|
154
|
-
return isShadowRoot(result) ? result.host : result;
|
|
155
|
-
}
|
|
156
|
-
function getNearestOverflowAncestor(node) {
|
|
157
|
-
const parentNode = getParentNode(node);
|
|
158
|
-
if (isLastTraversableNode(parentNode)) {
|
|
159
|
-
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
160
|
-
}
|
|
161
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
162
|
-
return parentNode;
|
|
163
|
-
}
|
|
164
|
-
return getNearestOverflowAncestor(parentNode);
|
|
165
|
-
}
|
|
166
|
-
function getOverflowAncestors(node, list, traverseIframes) {
|
|
167
|
-
var _node$ownerDocument2;
|
|
168
|
-
if (list === void 0) {
|
|
169
|
-
list = [];
|
|
170
|
-
}
|
|
171
|
-
if (traverseIframes === void 0) {
|
|
172
|
-
traverseIframes = true;
|
|
173
|
-
}
|
|
174
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
175
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
176
|
-
const win = getWindow(scrollableAncestor);
|
|
177
|
-
if (isBody) {
|
|
178
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
|
|
179
|
-
}
|
|
180
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
const min = Math.min;
|
|
184
|
-
const max = Math.max;
|
|
185
|
-
const round = Math.round;
|
|
186
|
-
const floor = Math.floor;
|
|
187
|
-
const createCoords = v => ({
|
|
188
|
-
x: v,
|
|
189
|
-
y: v
|
|
190
|
-
});
|
|
191
|
-
const oppositeSideMap = {
|
|
192
|
-
left: 'right',
|
|
193
|
-
right: 'left',
|
|
194
|
-
bottom: 'top',
|
|
195
|
-
top: 'bottom'
|
|
196
|
-
};
|
|
197
|
-
const oppositeAlignmentMap = {
|
|
198
|
-
start: 'end',
|
|
199
|
-
end: 'start'
|
|
200
|
-
};
|
|
201
|
-
function clamp(start, value, end) {
|
|
202
|
-
return max(start, min(value, end));
|
|
203
|
-
}
|
|
204
|
-
function evaluate(value, param) {
|
|
205
|
-
return typeof value === 'function' ? value(param) : value;
|
|
206
|
-
}
|
|
207
|
-
function getSide(placement) {
|
|
208
|
-
return placement.split('-')[0];
|
|
209
|
-
}
|
|
210
|
-
function getAlignment(placement) {
|
|
211
|
-
return placement.split('-')[1];
|
|
212
|
-
}
|
|
213
|
-
function getOppositeAxis(axis) {
|
|
214
|
-
return axis === 'x' ? 'y' : 'x';
|
|
215
|
-
}
|
|
216
|
-
function getAxisLength(axis) {
|
|
217
|
-
return axis === 'y' ? 'height' : 'width';
|
|
218
|
-
}
|
|
219
|
-
function getSideAxis(placement) {
|
|
220
|
-
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
|
221
|
-
}
|
|
222
|
-
function getAlignmentAxis(placement) {
|
|
223
|
-
return getOppositeAxis(getSideAxis(placement));
|
|
224
|
-
}
|
|
225
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
226
|
-
if (rtl === void 0) {
|
|
227
|
-
rtl = false;
|
|
228
|
-
}
|
|
229
|
-
const alignment = getAlignment(placement);
|
|
230
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
231
|
-
const length = getAxisLength(alignmentAxis);
|
|
232
|
-
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
233
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
234
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
235
|
-
}
|
|
236
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
237
|
-
}
|
|
238
|
-
function getExpandedPlacements(placement) {
|
|
239
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
240
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
241
|
-
}
|
|
242
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
243
|
-
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
244
|
-
}
|
|
245
|
-
function getSideList(side, isStart, rtl) {
|
|
246
|
-
const lr = ['left', 'right'];
|
|
247
|
-
const rl = ['right', 'left'];
|
|
248
|
-
const tb = ['top', 'bottom'];
|
|
249
|
-
const bt = ['bottom', 'top'];
|
|
250
|
-
switch (side) {
|
|
251
|
-
case 'top':
|
|
252
|
-
case 'bottom':
|
|
253
|
-
if (rtl) return isStart ? rl : lr;
|
|
254
|
-
return isStart ? lr : rl;
|
|
255
|
-
case 'left':
|
|
256
|
-
case 'right':
|
|
257
|
-
return isStart ? tb : bt;
|
|
258
|
-
default:
|
|
259
|
-
return [];
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
263
|
-
const alignment = getAlignment(placement);
|
|
264
|
-
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
265
|
-
if (alignment) {
|
|
266
|
-
list = list.map(side => side + "-" + alignment);
|
|
267
|
-
if (flipAlignment) {
|
|
268
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
return list;
|
|
272
|
-
}
|
|
273
|
-
function getOppositePlacement(placement) {
|
|
274
|
-
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
275
|
-
}
|
|
276
|
-
function expandPaddingObject(padding) {
|
|
277
|
-
return {
|
|
278
|
-
top: 0,
|
|
279
|
-
right: 0,
|
|
280
|
-
bottom: 0,
|
|
281
|
-
left: 0,
|
|
282
|
-
...padding
|
|
283
|
-
};
|
|
284
|
-
}
|
|
285
|
-
function getPaddingObject(padding) {
|
|
286
|
-
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
287
|
-
top: padding,
|
|
288
|
-
right: padding,
|
|
289
|
-
bottom: padding,
|
|
290
|
-
left: padding
|
|
291
|
-
};
|
|
292
|
-
}
|
|
293
|
-
function rectToClientRect(rect) {
|
|
294
|
-
return {
|
|
295
|
-
...rect,
|
|
296
|
-
top: rect.y,
|
|
297
|
-
left: rect.x,
|
|
298
|
-
right: rect.x + rect.width,
|
|
299
|
-
bottom: rect.y + rect.height
|
|
300
|
-
};
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
304
|
-
let {
|
|
305
|
-
reference,
|
|
306
|
-
floating
|
|
307
|
-
} = _ref;
|
|
308
|
-
const sideAxis = getSideAxis(placement);
|
|
309
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
310
|
-
const alignLength = getAxisLength(alignmentAxis);
|
|
311
|
-
const side = getSide(placement);
|
|
312
|
-
const isVertical = sideAxis === 'y';
|
|
313
|
-
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
314
|
-
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
315
|
-
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
316
|
-
let coords;
|
|
317
|
-
switch (side) {
|
|
318
|
-
case 'top':
|
|
319
|
-
coords = {
|
|
320
|
-
x: commonX,
|
|
321
|
-
y: reference.y - floating.height
|
|
322
|
-
};
|
|
323
|
-
break;
|
|
324
|
-
case 'bottom':
|
|
325
|
-
coords = {
|
|
326
|
-
x: commonX,
|
|
327
|
-
y: reference.y + reference.height
|
|
328
|
-
};
|
|
329
|
-
break;
|
|
330
|
-
case 'right':
|
|
331
|
-
coords = {
|
|
332
|
-
x: reference.x + reference.width,
|
|
333
|
-
y: commonY
|
|
334
|
-
};
|
|
335
|
-
break;
|
|
336
|
-
case 'left':
|
|
337
|
-
coords = {
|
|
338
|
-
x: reference.x - floating.width,
|
|
339
|
-
y: commonY
|
|
340
|
-
};
|
|
341
|
-
break;
|
|
342
|
-
default:
|
|
343
|
-
coords = {
|
|
344
|
-
x: reference.x,
|
|
345
|
-
y: reference.y
|
|
346
|
-
};
|
|
347
|
-
}
|
|
348
|
-
switch (getAlignment(placement)) {
|
|
349
|
-
case 'start':
|
|
350
|
-
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
351
|
-
break;
|
|
352
|
-
case 'end':
|
|
353
|
-
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
354
|
-
break;
|
|
355
|
-
}
|
|
356
|
-
return coords;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
/**
|
|
360
|
-
* Computes the `x` and `y` coordinates that will place the floating element
|
|
361
|
-
* next to a reference element when it is given a certain positioning strategy.
|
|
362
|
-
*
|
|
363
|
-
* This export does not have any `platform` interface logic. You will need to
|
|
364
|
-
* write one for the platform you are using Floating UI with.
|
|
365
|
-
*/
|
|
366
|
-
const computePosition$1 = async (reference, floating, config) => {
|
|
367
|
-
const {
|
|
368
|
-
placement = 'bottom',
|
|
369
|
-
strategy = 'absolute',
|
|
370
|
-
middleware = [],
|
|
371
|
-
platform
|
|
372
|
-
} = config;
|
|
373
|
-
const validMiddleware = middleware.filter(Boolean);
|
|
374
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
375
|
-
let rects = await platform.getElementRects({
|
|
376
|
-
reference,
|
|
377
|
-
floating,
|
|
378
|
-
strategy
|
|
379
|
-
});
|
|
380
|
-
let {
|
|
381
|
-
x,
|
|
382
|
-
y
|
|
383
|
-
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
384
|
-
let statefulPlacement = placement;
|
|
385
|
-
let middlewareData = {};
|
|
386
|
-
let resetCount = 0;
|
|
387
|
-
for (let i = 0; i < validMiddleware.length; i++) {
|
|
388
|
-
const {
|
|
389
|
-
name,
|
|
390
|
-
fn
|
|
391
|
-
} = validMiddleware[i];
|
|
392
|
-
const {
|
|
393
|
-
x: nextX,
|
|
394
|
-
y: nextY,
|
|
395
|
-
data,
|
|
396
|
-
reset
|
|
397
|
-
} = await fn({
|
|
398
|
-
x,
|
|
399
|
-
y,
|
|
400
|
-
initialPlacement: placement,
|
|
401
|
-
placement: statefulPlacement,
|
|
402
|
-
strategy,
|
|
403
|
-
middlewareData,
|
|
404
|
-
rects,
|
|
405
|
-
platform,
|
|
406
|
-
elements: {
|
|
407
|
-
reference,
|
|
408
|
-
floating
|
|
409
|
-
}
|
|
410
|
-
});
|
|
411
|
-
x = nextX != null ? nextX : x;
|
|
412
|
-
y = nextY != null ? nextY : y;
|
|
413
|
-
middlewareData = {
|
|
414
|
-
...middlewareData,
|
|
415
|
-
[name]: {
|
|
416
|
-
...middlewareData[name],
|
|
417
|
-
...data
|
|
418
|
-
}
|
|
419
|
-
};
|
|
420
|
-
if (reset && resetCount <= 50) {
|
|
421
|
-
resetCount++;
|
|
422
|
-
if (typeof reset === 'object') {
|
|
423
|
-
if (reset.placement) {
|
|
424
|
-
statefulPlacement = reset.placement;
|
|
425
|
-
}
|
|
426
|
-
if (reset.rects) {
|
|
427
|
-
rects = reset.rects === true ? await platform.getElementRects({
|
|
428
|
-
reference,
|
|
429
|
-
floating,
|
|
430
|
-
strategy
|
|
431
|
-
}) : reset.rects;
|
|
432
|
-
}
|
|
433
|
-
({
|
|
434
|
-
x,
|
|
435
|
-
y
|
|
436
|
-
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
437
|
-
}
|
|
438
|
-
i = -1;
|
|
439
|
-
continue;
|
|
440
|
-
}
|
|
441
|
-
}
|
|
442
|
-
return {
|
|
443
|
-
x,
|
|
444
|
-
y,
|
|
445
|
-
placement: statefulPlacement,
|
|
446
|
-
strategy,
|
|
447
|
-
middlewareData
|
|
448
|
-
};
|
|
449
|
-
};
|
|
450
|
-
|
|
451
|
-
/**
|
|
452
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
453
|
-
* element is overflowing a given clipping boundary on each side.
|
|
454
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
455
|
-
* - negative = how many pixels left before it will overflow
|
|
456
|
-
* - 0 = lies flush with the boundary
|
|
457
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
458
|
-
*/
|
|
459
|
-
async function detectOverflow(state, options) {
|
|
460
|
-
var _await$platform$isEle;
|
|
461
|
-
if (options === void 0) {
|
|
462
|
-
options = {};
|
|
463
|
-
}
|
|
464
|
-
const {
|
|
465
|
-
x,
|
|
466
|
-
y,
|
|
467
|
-
platform,
|
|
468
|
-
rects,
|
|
469
|
-
elements,
|
|
470
|
-
strategy
|
|
471
|
-
} = state;
|
|
472
|
-
const {
|
|
473
|
-
boundary = 'clippingAncestors',
|
|
474
|
-
rootBoundary = 'viewport',
|
|
475
|
-
elementContext = 'floating',
|
|
476
|
-
altBoundary = false,
|
|
477
|
-
padding = 0
|
|
478
|
-
} = evaluate(options, state);
|
|
479
|
-
const paddingObject = getPaddingObject(padding);
|
|
480
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
481
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
482
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
483
|
-
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
484
|
-
boundary,
|
|
485
|
-
rootBoundary,
|
|
486
|
-
strategy
|
|
487
|
-
}));
|
|
488
|
-
const rect = elementContext === 'floating' ? {
|
|
489
|
-
...rects.floating,
|
|
490
|
-
x,
|
|
491
|
-
y
|
|
492
|
-
} : rects.reference;
|
|
493
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
494
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
495
|
-
x: 1,
|
|
496
|
-
y: 1
|
|
497
|
-
} : {
|
|
498
|
-
x: 1,
|
|
499
|
-
y: 1
|
|
500
|
-
};
|
|
501
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
502
|
-
rect,
|
|
503
|
-
offsetParent,
|
|
504
|
-
strategy
|
|
505
|
-
}) : rect);
|
|
506
|
-
return {
|
|
507
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
508
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
509
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
510
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
511
|
-
};
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
/**
|
|
515
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
516
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
517
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
518
|
-
* @see https://floating-ui.com/docs/flip
|
|
519
|
-
*/
|
|
520
|
-
const flip = function (options) {
|
|
521
|
-
if (options === void 0) {
|
|
522
|
-
options = {};
|
|
523
|
-
}
|
|
524
|
-
return {
|
|
525
|
-
name: 'flip',
|
|
526
|
-
options,
|
|
527
|
-
async fn(state) {
|
|
528
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
529
|
-
const {
|
|
530
|
-
placement,
|
|
531
|
-
middlewareData,
|
|
532
|
-
rects,
|
|
533
|
-
initialPlacement,
|
|
534
|
-
platform,
|
|
535
|
-
elements
|
|
536
|
-
} = state;
|
|
537
|
-
const {
|
|
538
|
-
mainAxis: checkMainAxis = true,
|
|
539
|
-
crossAxis: checkCrossAxis = true,
|
|
540
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
541
|
-
fallbackStrategy = 'bestFit',
|
|
542
|
-
fallbackAxisSideDirection = 'none',
|
|
543
|
-
flipAlignment = true,
|
|
544
|
-
...detectOverflowOptions
|
|
545
|
-
} = evaluate(options, state);
|
|
546
|
-
|
|
547
|
-
// If a reset by the arrow was caused due to an alignment offset being
|
|
548
|
-
// added, we should skip any logic now since `flip()` has already done its
|
|
549
|
-
// work.
|
|
550
|
-
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
551
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
552
|
-
return {};
|
|
553
|
-
}
|
|
554
|
-
const side = getSide(placement);
|
|
555
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
556
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
557
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
558
|
-
if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
|
|
559
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
560
|
-
}
|
|
561
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
562
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
563
|
-
const overflows = [];
|
|
564
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
565
|
-
if (checkMainAxis) {
|
|
566
|
-
overflows.push(overflow[side]);
|
|
567
|
-
}
|
|
568
|
-
if (checkCrossAxis) {
|
|
569
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
570
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
571
|
-
}
|
|
572
|
-
overflowsData = [...overflowsData, {
|
|
573
|
-
placement,
|
|
574
|
-
overflows
|
|
575
|
-
}];
|
|
576
|
-
|
|
577
|
-
// One or more sides is overflowing.
|
|
578
|
-
if (!overflows.every(side => side <= 0)) {
|
|
579
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
580
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
581
|
-
const nextPlacement = placements[nextIndex];
|
|
582
|
-
if (nextPlacement) {
|
|
583
|
-
// Try next placement and re-run the lifecycle.
|
|
584
|
-
return {
|
|
585
|
-
data: {
|
|
586
|
-
index: nextIndex,
|
|
587
|
-
overflows: overflowsData
|
|
588
|
-
},
|
|
589
|
-
reset: {
|
|
590
|
-
placement: nextPlacement
|
|
591
|
-
}
|
|
592
|
-
};
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
596
|
-
// then find the placement that fits the best on the main crossAxis side.
|
|
597
|
-
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;
|
|
598
|
-
|
|
599
|
-
// Otherwise fallback.
|
|
600
|
-
if (!resetPlacement) {
|
|
601
|
-
switch (fallbackStrategy) {
|
|
602
|
-
case 'bestFit':
|
|
603
|
-
{
|
|
604
|
-
var _overflowsData$map$so;
|
|
605
|
-
const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
|
|
606
|
-
if (placement) {
|
|
607
|
-
resetPlacement = placement;
|
|
608
|
-
}
|
|
609
|
-
break;
|
|
610
|
-
}
|
|
611
|
-
case 'initialPlacement':
|
|
612
|
-
resetPlacement = initialPlacement;
|
|
613
|
-
break;
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
if (placement !== resetPlacement) {
|
|
617
|
-
return {
|
|
618
|
-
reset: {
|
|
619
|
-
placement: resetPlacement
|
|
620
|
-
}
|
|
621
|
-
};
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
return {};
|
|
625
|
-
}
|
|
626
|
-
};
|
|
627
|
-
};
|
|
628
|
-
|
|
629
|
-
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
630
|
-
// Derivable.
|
|
631
|
-
async function convertValueToCoords(state, options) {
|
|
632
|
-
const {
|
|
633
|
-
placement,
|
|
634
|
-
platform,
|
|
635
|
-
elements
|
|
636
|
-
} = state;
|
|
637
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
638
|
-
const side = getSide(placement);
|
|
639
|
-
const alignment = getAlignment(placement);
|
|
640
|
-
const isVertical = getSideAxis(placement) === 'y';
|
|
641
|
-
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
642
|
-
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
643
|
-
const rawValue = evaluate(options, state);
|
|
644
|
-
|
|
645
|
-
// eslint-disable-next-line prefer-const
|
|
646
|
-
let {
|
|
647
|
-
mainAxis,
|
|
648
|
-
crossAxis,
|
|
649
|
-
alignmentAxis
|
|
650
|
-
} = typeof rawValue === 'number' ? {
|
|
651
|
-
mainAxis: rawValue,
|
|
652
|
-
crossAxis: 0,
|
|
653
|
-
alignmentAxis: null
|
|
654
|
-
} : {
|
|
655
|
-
mainAxis: 0,
|
|
656
|
-
crossAxis: 0,
|
|
657
|
-
alignmentAxis: null,
|
|
658
|
-
...rawValue
|
|
659
|
-
};
|
|
660
|
-
if (alignment && typeof alignmentAxis === 'number') {
|
|
661
|
-
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
662
|
-
}
|
|
663
|
-
return isVertical ? {
|
|
664
|
-
x: crossAxis * crossAxisMulti,
|
|
665
|
-
y: mainAxis * mainAxisMulti
|
|
666
|
-
} : {
|
|
667
|
-
x: mainAxis * mainAxisMulti,
|
|
668
|
-
y: crossAxis * crossAxisMulti
|
|
669
|
-
};
|
|
670
|
-
}
|
|
671
|
-
|
|
672
|
-
/**
|
|
673
|
-
* Modifies the placement by translating the floating element along the
|
|
674
|
-
* specified axes.
|
|
675
|
-
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
676
|
-
* object may be passed.
|
|
677
|
-
* @see https://floating-ui.com/docs/offset
|
|
678
|
-
*/
|
|
679
|
-
const offset = function (options) {
|
|
680
|
-
if (options === void 0) {
|
|
681
|
-
options = 0;
|
|
682
|
-
}
|
|
683
|
-
return {
|
|
684
|
-
name: 'offset',
|
|
685
|
-
options,
|
|
686
|
-
async fn(state) {
|
|
687
|
-
var _middlewareData$offse, _middlewareData$arrow;
|
|
688
|
-
const {
|
|
689
|
-
x,
|
|
690
|
-
y,
|
|
691
|
-
placement,
|
|
692
|
-
middlewareData
|
|
693
|
-
} = state;
|
|
694
|
-
const diffCoords = await convertValueToCoords(state, options);
|
|
695
|
-
|
|
696
|
-
// If the placement is the same and the arrow caused an alignment offset
|
|
697
|
-
// then we don't need to change the positioning coordinates.
|
|
698
|
-
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
699
|
-
return {};
|
|
700
|
-
}
|
|
701
|
-
return {
|
|
702
|
-
x: x + diffCoords.x,
|
|
703
|
-
y: y + diffCoords.y,
|
|
704
|
-
data: {
|
|
705
|
-
...diffCoords,
|
|
706
|
-
placement
|
|
707
|
-
}
|
|
708
|
-
};
|
|
709
|
-
}
|
|
710
|
-
};
|
|
711
|
-
};
|
|
712
|
-
|
|
713
|
-
/**
|
|
714
|
-
* Optimizes the visibility of the floating element by shifting it in order to
|
|
715
|
-
* keep it in view when it will overflow the clipping boundary.
|
|
716
|
-
* @see https://floating-ui.com/docs/shift
|
|
717
|
-
*/
|
|
718
|
-
const shift = function (options) {
|
|
719
|
-
if (options === void 0) {
|
|
720
|
-
options = {};
|
|
721
|
-
}
|
|
722
|
-
return {
|
|
723
|
-
name: 'shift',
|
|
724
|
-
options,
|
|
725
|
-
async fn(state) {
|
|
726
|
-
const {
|
|
727
|
-
x,
|
|
728
|
-
y,
|
|
729
|
-
placement
|
|
730
|
-
} = state;
|
|
731
|
-
const {
|
|
732
|
-
mainAxis: checkMainAxis = true,
|
|
733
|
-
crossAxis: checkCrossAxis = false,
|
|
734
|
-
limiter = {
|
|
735
|
-
fn: _ref => {
|
|
736
|
-
let {
|
|
737
|
-
x,
|
|
738
|
-
y
|
|
739
|
-
} = _ref;
|
|
740
|
-
return {
|
|
741
|
-
x,
|
|
742
|
-
y
|
|
743
|
-
};
|
|
744
|
-
}
|
|
745
|
-
},
|
|
746
|
-
...detectOverflowOptions
|
|
747
|
-
} = evaluate(options, state);
|
|
748
|
-
const coords = {
|
|
749
|
-
x,
|
|
750
|
-
y
|
|
751
|
-
};
|
|
752
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
753
|
-
const crossAxis = getSideAxis(getSide(placement));
|
|
754
|
-
const mainAxis = getOppositeAxis(crossAxis);
|
|
755
|
-
let mainAxisCoord = coords[mainAxis];
|
|
756
|
-
let crossAxisCoord = coords[crossAxis];
|
|
757
|
-
if (checkMainAxis) {
|
|
758
|
-
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
759
|
-
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
760
|
-
const min = mainAxisCoord + overflow[minSide];
|
|
761
|
-
const max = mainAxisCoord - overflow[maxSide];
|
|
762
|
-
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
763
|
-
}
|
|
764
|
-
if (checkCrossAxis) {
|
|
765
|
-
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
766
|
-
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
767
|
-
const min = crossAxisCoord + overflow[minSide];
|
|
768
|
-
const max = crossAxisCoord - overflow[maxSide];
|
|
769
|
-
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
770
|
-
}
|
|
771
|
-
const limitedCoords = limiter.fn({
|
|
772
|
-
...state,
|
|
773
|
-
[mainAxis]: mainAxisCoord,
|
|
774
|
-
[crossAxis]: crossAxisCoord
|
|
775
|
-
});
|
|
776
|
-
return {
|
|
777
|
-
...limitedCoords,
|
|
778
|
-
data: {
|
|
779
|
-
x: limitedCoords.x - x,
|
|
780
|
-
y: limitedCoords.y - y
|
|
781
|
-
}
|
|
782
|
-
};
|
|
783
|
-
}
|
|
784
|
-
};
|
|
785
|
-
};
|
|
786
|
-
|
|
787
|
-
function getCssDimensions(element) {
|
|
788
|
-
const css = getComputedStyle(element);
|
|
789
|
-
// In testing environments, the `width` and `height` properties are empty
|
|
790
|
-
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
791
|
-
let width = parseFloat(css.width) || 0;
|
|
792
|
-
let height = parseFloat(css.height) || 0;
|
|
793
|
-
const hasOffset = isHTMLElement(element);
|
|
794
|
-
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
795
|
-
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
796
|
-
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
797
|
-
if (shouldFallback) {
|
|
798
|
-
width = offsetWidth;
|
|
799
|
-
height = offsetHeight;
|
|
800
|
-
}
|
|
801
|
-
return {
|
|
802
|
-
width,
|
|
803
|
-
height,
|
|
804
|
-
$: shouldFallback
|
|
805
|
-
};
|
|
806
|
-
}
|
|
807
|
-
|
|
808
|
-
function unwrapElement(element) {
|
|
809
|
-
return !isElement(element) ? element.contextElement : element;
|
|
810
|
-
}
|
|
811
|
-
|
|
812
|
-
function getScale(element) {
|
|
813
|
-
const domElement = unwrapElement(element);
|
|
814
|
-
if (!isHTMLElement(domElement)) {
|
|
815
|
-
return createCoords(1);
|
|
816
|
-
}
|
|
817
|
-
const rect = domElement.getBoundingClientRect();
|
|
818
|
-
const {
|
|
819
|
-
width,
|
|
820
|
-
height,
|
|
821
|
-
$
|
|
822
|
-
} = getCssDimensions(domElement);
|
|
823
|
-
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
824
|
-
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
825
|
-
|
|
826
|
-
// 0, NaN, or Infinity should always fallback to 1.
|
|
827
|
-
|
|
828
|
-
if (!x || !Number.isFinite(x)) {
|
|
829
|
-
x = 1;
|
|
830
|
-
}
|
|
831
|
-
if (!y || !Number.isFinite(y)) {
|
|
832
|
-
y = 1;
|
|
833
|
-
}
|
|
834
|
-
return {
|
|
835
|
-
x,
|
|
836
|
-
y
|
|
837
|
-
};
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
841
|
-
function getVisualOffsets(element) {
|
|
842
|
-
const win = getWindow(element);
|
|
843
|
-
if (!isWebKit() || !win.visualViewport) {
|
|
844
|
-
return noOffsets;
|
|
845
|
-
}
|
|
846
|
-
return {
|
|
847
|
-
x: win.visualViewport.offsetLeft,
|
|
848
|
-
y: win.visualViewport.offsetTop
|
|
849
|
-
};
|
|
850
|
-
}
|
|
851
|
-
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
852
|
-
if (isFixed === void 0) {
|
|
853
|
-
isFixed = false;
|
|
854
|
-
}
|
|
855
|
-
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
856
|
-
return false;
|
|
857
|
-
}
|
|
858
|
-
return isFixed;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
862
|
-
if (includeScale === void 0) {
|
|
863
|
-
includeScale = false;
|
|
864
|
-
}
|
|
865
|
-
if (isFixedStrategy === void 0) {
|
|
866
|
-
isFixedStrategy = false;
|
|
867
|
-
}
|
|
868
|
-
const clientRect = element.getBoundingClientRect();
|
|
869
|
-
const domElement = unwrapElement(element);
|
|
870
|
-
let scale = createCoords(1);
|
|
871
|
-
if (includeScale) {
|
|
872
|
-
if (offsetParent) {
|
|
873
|
-
if (isElement(offsetParent)) {
|
|
874
|
-
scale = getScale(offsetParent);
|
|
875
|
-
}
|
|
876
|
-
} else {
|
|
877
|
-
scale = getScale(element);
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
881
|
-
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
882
|
-
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
883
|
-
let width = clientRect.width / scale.x;
|
|
884
|
-
let height = clientRect.height / scale.y;
|
|
885
|
-
if (domElement) {
|
|
886
|
-
const win = getWindow(domElement);
|
|
887
|
-
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
888
|
-
let currentIFrame = win.frameElement;
|
|
889
|
-
while (currentIFrame && offsetParent && offsetWin !== win) {
|
|
890
|
-
const iframeScale = getScale(currentIFrame);
|
|
891
|
-
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
892
|
-
const css = getComputedStyle(currentIFrame);
|
|
893
|
-
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
894
|
-
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
895
|
-
x *= iframeScale.x;
|
|
896
|
-
y *= iframeScale.y;
|
|
897
|
-
width *= iframeScale.x;
|
|
898
|
-
height *= iframeScale.y;
|
|
899
|
-
x += left;
|
|
900
|
-
y += top;
|
|
901
|
-
currentIFrame = getWindow(currentIFrame).frameElement;
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
return rectToClientRect({
|
|
905
|
-
width,
|
|
906
|
-
height,
|
|
907
|
-
x,
|
|
908
|
-
y
|
|
909
|
-
});
|
|
910
|
-
}
|
|
911
|
-
|
|
912
|
-
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
913
|
-
let {
|
|
914
|
-
rect,
|
|
915
|
-
offsetParent,
|
|
916
|
-
strategy
|
|
917
|
-
} = _ref;
|
|
918
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
919
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
920
|
-
if (offsetParent === documentElement) {
|
|
921
|
-
return rect;
|
|
922
|
-
}
|
|
923
|
-
let scroll = {
|
|
924
|
-
scrollLeft: 0,
|
|
925
|
-
scrollTop: 0
|
|
926
|
-
};
|
|
927
|
-
let scale = createCoords(1);
|
|
928
|
-
const offsets = createCoords(0);
|
|
929
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
930
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
931
|
-
scroll = getNodeScroll(offsetParent);
|
|
932
|
-
}
|
|
933
|
-
if (isHTMLElement(offsetParent)) {
|
|
934
|
-
const offsetRect = getBoundingClientRect(offsetParent);
|
|
935
|
-
scale = getScale(offsetParent);
|
|
936
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
937
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
return {
|
|
941
|
-
width: rect.width * scale.x,
|
|
942
|
-
height: rect.height * scale.y,
|
|
943
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
|
|
944
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
|
|
945
|
-
};
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
function getClientRects(element) {
|
|
949
|
-
return Array.from(element.getClientRects());
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
function getWindowScrollBarX(element) {
|
|
953
|
-
// If <html> has a CSS width greater than the viewport, then this will be
|
|
954
|
-
// incorrect for RTL.
|
|
955
|
-
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
|
|
956
|
-
}
|
|
957
|
-
|
|
958
|
-
// Gets the entire size of the scrollable document area, even extending outside
|
|
959
|
-
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
960
|
-
function getDocumentRect(element) {
|
|
961
|
-
const html = getDocumentElement(element);
|
|
962
|
-
const scroll = getNodeScroll(element);
|
|
963
|
-
const body = element.ownerDocument.body;
|
|
964
|
-
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
965
|
-
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
966
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
967
|
-
const y = -scroll.scrollTop;
|
|
968
|
-
if (getComputedStyle(body).direction === 'rtl') {
|
|
969
|
-
x += max(html.clientWidth, body.clientWidth) - width;
|
|
970
|
-
}
|
|
971
|
-
return {
|
|
972
|
-
width,
|
|
973
|
-
height,
|
|
974
|
-
x,
|
|
975
|
-
y
|
|
976
|
-
};
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
function getViewportRect(element, strategy) {
|
|
980
|
-
const win = getWindow(element);
|
|
981
|
-
const html = getDocumentElement(element);
|
|
982
|
-
const visualViewport = win.visualViewport;
|
|
983
|
-
let width = html.clientWidth;
|
|
984
|
-
let height = html.clientHeight;
|
|
985
|
-
let x = 0;
|
|
986
|
-
let y = 0;
|
|
987
|
-
if (visualViewport) {
|
|
988
|
-
width = visualViewport.width;
|
|
989
|
-
height = visualViewport.height;
|
|
990
|
-
const visualViewportBased = isWebKit();
|
|
991
|
-
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
992
|
-
x = visualViewport.offsetLeft;
|
|
993
|
-
y = visualViewport.offsetTop;
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
return {
|
|
997
|
-
width,
|
|
998
|
-
height,
|
|
999
|
-
x,
|
|
1000
|
-
y
|
|
1001
|
-
};
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
// Returns the inner client rect, subtracting scrollbars if present.
|
|
1005
|
-
function getInnerBoundingClientRect(element, strategy) {
|
|
1006
|
-
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
1007
|
-
const top = clientRect.top + element.clientTop;
|
|
1008
|
-
const left = clientRect.left + element.clientLeft;
|
|
1009
|
-
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
1010
|
-
const width = element.clientWidth * scale.x;
|
|
1011
|
-
const height = element.clientHeight * scale.y;
|
|
1012
|
-
const x = left * scale.x;
|
|
1013
|
-
const y = top * scale.y;
|
|
1014
|
-
return {
|
|
1015
|
-
width,
|
|
1016
|
-
height,
|
|
1017
|
-
x,
|
|
1018
|
-
y
|
|
1019
|
-
};
|
|
1020
|
-
}
|
|
1021
|
-
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
1022
|
-
let rect;
|
|
1023
|
-
if (clippingAncestor === 'viewport') {
|
|
1024
|
-
rect = getViewportRect(element, strategy);
|
|
1025
|
-
} else if (clippingAncestor === 'document') {
|
|
1026
|
-
rect = getDocumentRect(getDocumentElement(element));
|
|
1027
|
-
} else if (isElement(clippingAncestor)) {
|
|
1028
|
-
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
1029
|
-
} else {
|
|
1030
|
-
const visualOffsets = getVisualOffsets(element);
|
|
1031
|
-
rect = {
|
|
1032
|
-
...clippingAncestor,
|
|
1033
|
-
x: clippingAncestor.x - visualOffsets.x,
|
|
1034
|
-
y: clippingAncestor.y - visualOffsets.y
|
|
1035
|
-
};
|
|
1036
|
-
}
|
|
1037
|
-
return rectToClientRect(rect);
|
|
1038
|
-
}
|
|
1039
|
-
function hasFixedPositionAncestor(element, stopNode) {
|
|
1040
|
-
const parentNode = getParentNode(element);
|
|
1041
|
-
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1042
|
-
return false;
|
|
1043
|
-
}
|
|
1044
|
-
return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1045
|
-
}
|
|
1046
|
-
|
|
1047
|
-
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
1048
|
-
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
1049
|
-
// of the given element up the tree.
|
|
1050
|
-
function getClippingElementAncestors(element, cache) {
|
|
1051
|
-
const cachedResult = cache.get(element);
|
|
1052
|
-
if (cachedResult) {
|
|
1053
|
-
return cachedResult;
|
|
1054
|
-
}
|
|
1055
|
-
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
1056
|
-
let currentContainingBlockComputedStyle = null;
|
|
1057
|
-
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
1058
|
-
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1059
|
-
|
|
1060
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
1061
|
-
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1062
|
-
const computedStyle = getComputedStyle(currentNode);
|
|
1063
|
-
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1064
|
-
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
1065
|
-
currentContainingBlockComputedStyle = null;
|
|
1066
|
-
}
|
|
1067
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
1068
|
-
if (shouldDropCurrentNode) {
|
|
1069
|
-
// Drop non-containing blocks.
|
|
1070
|
-
result = result.filter(ancestor => ancestor !== currentNode);
|
|
1071
|
-
} else {
|
|
1072
|
-
// Record last containing block for next iteration.
|
|
1073
|
-
currentContainingBlockComputedStyle = computedStyle;
|
|
1074
|
-
}
|
|
1075
|
-
currentNode = getParentNode(currentNode);
|
|
1076
|
-
}
|
|
1077
|
-
cache.set(element, result);
|
|
1078
|
-
return result;
|
|
1079
|
-
}
|
|
1080
|
-
|
|
1081
|
-
// Gets the maximum area that the element is visible in due to any number of
|
|
1082
|
-
// clipping ancestors.
|
|
1083
|
-
function getClippingRect(_ref) {
|
|
1084
|
-
let {
|
|
1085
|
-
element,
|
|
1086
|
-
boundary,
|
|
1087
|
-
rootBoundary,
|
|
1088
|
-
strategy
|
|
1089
|
-
} = _ref;
|
|
1090
|
-
const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1091
|
-
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1092
|
-
const firstClippingAncestor = clippingAncestors[0];
|
|
1093
|
-
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
1094
|
-
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
1095
|
-
accRect.top = max(rect.top, accRect.top);
|
|
1096
|
-
accRect.right = min(rect.right, accRect.right);
|
|
1097
|
-
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
1098
|
-
accRect.left = max(rect.left, accRect.left);
|
|
1099
|
-
return accRect;
|
|
1100
|
-
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
1101
|
-
return {
|
|
1102
|
-
width: clippingRect.right - clippingRect.left,
|
|
1103
|
-
height: clippingRect.bottom - clippingRect.top,
|
|
1104
|
-
x: clippingRect.left,
|
|
1105
|
-
y: clippingRect.top
|
|
1106
|
-
};
|
|
1107
|
-
}
|
|
1108
|
-
|
|
1109
|
-
function getDimensions(element) {
|
|
1110
|
-
return getCssDimensions(element);
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1114
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1115
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
1116
|
-
const isFixed = strategy === 'fixed';
|
|
1117
|
-
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
1118
|
-
let scroll = {
|
|
1119
|
-
scrollLeft: 0,
|
|
1120
|
-
scrollTop: 0
|
|
1121
|
-
};
|
|
1122
|
-
const offsets = createCoords(0);
|
|
1123
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1124
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1125
|
-
scroll = getNodeScroll(offsetParent);
|
|
1126
|
-
}
|
|
1127
|
-
if (isOffsetParentAnElement) {
|
|
1128
|
-
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1129
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1130
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1131
|
-
} else if (documentElement) {
|
|
1132
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
return {
|
|
1136
|
-
x: rect.left + scroll.scrollLeft - offsets.x,
|
|
1137
|
-
y: rect.top + scroll.scrollTop - offsets.y,
|
|
1138
|
-
width: rect.width,
|
|
1139
|
-
height: rect.height
|
|
1140
|
-
};
|
|
1141
|
-
}
|
|
1142
|
-
|
|
1143
|
-
function getTrueOffsetParent(element, polyfill) {
|
|
1144
|
-
if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
|
|
1145
|
-
return null;
|
|
1146
|
-
}
|
|
1147
|
-
if (polyfill) {
|
|
1148
|
-
return polyfill(element);
|
|
1149
|
-
}
|
|
1150
|
-
return element.offsetParent;
|
|
1151
|
-
}
|
|
1152
|
-
|
|
1153
|
-
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
1154
|
-
// such as table ancestors and cross browser bugs.
|
|
1155
|
-
function getOffsetParent(element, polyfill) {
|
|
1156
|
-
const window = getWindow(element);
|
|
1157
|
-
if (!isHTMLElement(element)) {
|
|
1158
|
-
return window;
|
|
1159
|
-
}
|
|
1160
|
-
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1161
|
-
while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
|
|
1162
|
-
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1163
|
-
}
|
|
1164
|
-
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
|
|
1165
|
-
return window;
|
|
1166
|
-
}
|
|
1167
|
-
return offsetParent || getContainingBlock(element) || window;
|
|
1168
|
-
}
|
|
1169
|
-
|
|
1170
|
-
const getElementRects = async function (_ref) {
|
|
1171
|
-
let {
|
|
1172
|
-
reference,
|
|
1173
|
-
floating,
|
|
1174
|
-
strategy
|
|
1175
|
-
} = _ref;
|
|
1176
|
-
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1177
|
-
const getDimensionsFn = this.getDimensions;
|
|
1178
|
-
return {
|
|
1179
|
-
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
1180
|
-
floating: {
|
|
1181
|
-
x: 0,
|
|
1182
|
-
y: 0,
|
|
1183
|
-
...(await getDimensionsFn(floating))
|
|
1184
|
-
}
|
|
1185
|
-
};
|
|
1186
|
-
};
|
|
1187
|
-
|
|
1188
|
-
function isRTL(element) {
|
|
1189
|
-
return getComputedStyle(element).direction === 'rtl';
|
|
1190
|
-
}
|
|
1191
|
-
|
|
1192
|
-
const platform = {
|
|
1193
|
-
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
1194
|
-
getDocumentElement,
|
|
1195
|
-
getClippingRect,
|
|
1196
|
-
getOffsetParent,
|
|
1197
|
-
getElementRects,
|
|
1198
|
-
getClientRects,
|
|
1199
|
-
getDimensions,
|
|
1200
|
-
getScale,
|
|
1201
|
-
isElement,
|
|
1202
|
-
isRTL
|
|
1203
|
-
};
|
|
1204
|
-
|
|
1205
|
-
// https://samthor.au/2021/observing-dom/
|
|
1206
|
-
function observeMove(element, onMove) {
|
|
1207
|
-
let io = null;
|
|
1208
|
-
let timeoutId;
|
|
1209
|
-
const root = getDocumentElement(element);
|
|
1210
|
-
function cleanup() {
|
|
1211
|
-
clearTimeout(timeoutId);
|
|
1212
|
-
io && io.disconnect();
|
|
1213
|
-
io = null;
|
|
1214
|
-
}
|
|
1215
|
-
function refresh(skip, threshold) {
|
|
1216
|
-
if (skip === void 0) {
|
|
1217
|
-
skip = false;
|
|
1218
|
-
}
|
|
1219
|
-
if (threshold === void 0) {
|
|
1220
|
-
threshold = 1;
|
|
1221
|
-
}
|
|
1222
|
-
cleanup();
|
|
1223
|
-
const {
|
|
1224
|
-
left,
|
|
1225
|
-
top,
|
|
1226
|
-
width,
|
|
1227
|
-
height
|
|
1228
|
-
} = element.getBoundingClientRect();
|
|
1229
|
-
if (!skip) {
|
|
1230
|
-
onMove();
|
|
1231
|
-
}
|
|
1232
|
-
if (!width || !height) {
|
|
1233
|
-
return;
|
|
1234
|
-
}
|
|
1235
|
-
const insetTop = floor(top);
|
|
1236
|
-
const insetRight = floor(root.clientWidth - (left + width));
|
|
1237
|
-
const insetBottom = floor(root.clientHeight - (top + height));
|
|
1238
|
-
const insetLeft = floor(left);
|
|
1239
|
-
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
1240
|
-
const options = {
|
|
1241
|
-
rootMargin,
|
|
1242
|
-
threshold: max(0, min(1, threshold)) || 1
|
|
1243
|
-
};
|
|
1244
|
-
let isFirstUpdate = true;
|
|
1245
|
-
function handleObserve(entries) {
|
|
1246
|
-
const ratio = entries[0].intersectionRatio;
|
|
1247
|
-
if (ratio !== threshold) {
|
|
1248
|
-
if (!isFirstUpdate) {
|
|
1249
|
-
return refresh();
|
|
1250
|
-
}
|
|
1251
|
-
if (!ratio) {
|
|
1252
|
-
timeoutId = setTimeout(() => {
|
|
1253
|
-
refresh(false, 1e-7);
|
|
1254
|
-
}, 100);
|
|
1255
|
-
} else {
|
|
1256
|
-
refresh(false, ratio);
|
|
1257
|
-
}
|
|
1258
|
-
}
|
|
1259
|
-
isFirstUpdate = false;
|
|
1260
|
-
}
|
|
1261
|
-
|
|
1262
|
-
// Older browsers don't support a `document` as the root and will throw an
|
|
1263
|
-
// error.
|
|
1264
|
-
try {
|
|
1265
|
-
io = new IntersectionObserver(handleObserve, {
|
|
1266
|
-
...options,
|
|
1267
|
-
// Handle <iframe>s
|
|
1268
|
-
root: root.ownerDocument
|
|
1269
|
-
});
|
|
1270
|
-
} catch (e) {
|
|
1271
|
-
io = new IntersectionObserver(handleObserve, options);
|
|
1272
|
-
}
|
|
1273
|
-
io.observe(element);
|
|
1274
|
-
}
|
|
1275
|
-
refresh(true);
|
|
1276
|
-
return cleanup;
|
|
1277
|
-
}
|
|
1278
|
-
|
|
1279
|
-
/**
|
|
1280
|
-
* Automatically updates the position of the floating element when necessary.
|
|
1281
|
-
* Should only be called when the floating element is mounted on the DOM or
|
|
1282
|
-
* visible on the screen.
|
|
1283
|
-
* @returns cleanup function that should be invoked when the floating element is
|
|
1284
|
-
* removed from the DOM or hidden from the screen.
|
|
1285
|
-
* @see https://floating-ui.com/docs/autoUpdate
|
|
1286
|
-
*/
|
|
1287
|
-
function autoUpdate(reference, floating, update, options) {
|
|
1288
|
-
if (options === void 0) {
|
|
1289
|
-
options = {};
|
|
1290
|
-
}
|
|
1291
|
-
const {
|
|
1292
|
-
ancestorScroll = true,
|
|
1293
|
-
ancestorResize = true,
|
|
1294
|
-
elementResize = typeof ResizeObserver === 'function',
|
|
1295
|
-
layoutShift = typeof IntersectionObserver === 'function',
|
|
1296
|
-
animationFrame = false
|
|
1297
|
-
} = options;
|
|
1298
|
-
const referenceEl = unwrapElement(reference);
|
|
1299
|
-
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
1300
|
-
ancestors.forEach(ancestor => {
|
|
1301
|
-
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
1302
|
-
passive: true
|
|
1303
|
-
});
|
|
1304
|
-
ancestorResize && ancestor.addEventListener('resize', update);
|
|
1305
|
-
});
|
|
1306
|
-
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
1307
|
-
let reobserveFrame = -1;
|
|
1308
|
-
let resizeObserver = null;
|
|
1309
|
-
if (elementResize) {
|
|
1310
|
-
resizeObserver = new ResizeObserver(_ref => {
|
|
1311
|
-
let [firstEntry] = _ref;
|
|
1312
|
-
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
1313
|
-
// Prevent update loops when using the `size` middleware.
|
|
1314
|
-
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
1315
|
-
resizeObserver.unobserve(floating);
|
|
1316
|
-
cancelAnimationFrame(reobserveFrame);
|
|
1317
|
-
reobserveFrame = requestAnimationFrame(() => {
|
|
1318
|
-
resizeObserver && resizeObserver.observe(floating);
|
|
1319
|
-
});
|
|
1320
|
-
}
|
|
1321
|
-
update();
|
|
1322
|
-
});
|
|
1323
|
-
if (referenceEl && !animationFrame) {
|
|
1324
|
-
resizeObserver.observe(referenceEl);
|
|
1325
|
-
}
|
|
1326
|
-
resizeObserver.observe(floating);
|
|
1327
|
-
}
|
|
1328
|
-
let frameId;
|
|
1329
|
-
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
1330
|
-
if (animationFrame) {
|
|
1331
|
-
frameLoop();
|
|
1332
|
-
}
|
|
1333
|
-
function frameLoop() {
|
|
1334
|
-
const nextRefRect = getBoundingClientRect(reference);
|
|
1335
|
-
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
1336
|
-
update();
|
|
1337
|
-
}
|
|
1338
|
-
prevRefRect = nextRefRect;
|
|
1339
|
-
frameId = requestAnimationFrame(frameLoop);
|
|
1340
|
-
}
|
|
1341
|
-
update();
|
|
1342
|
-
return () => {
|
|
1343
|
-
ancestors.forEach(ancestor => {
|
|
1344
|
-
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
1345
|
-
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
1346
|
-
});
|
|
1347
|
-
cleanupIo && cleanupIo();
|
|
1348
|
-
resizeObserver && resizeObserver.disconnect();
|
|
1349
|
-
resizeObserver = null;
|
|
1350
|
-
if (animationFrame) {
|
|
1351
|
-
cancelAnimationFrame(frameId);
|
|
1352
|
-
}
|
|
1353
|
-
};
|
|
1354
|
-
}
|
|
1355
|
-
|
|
1356
|
-
/**
|
|
1357
|
-
* Computes the `x` and `y` coordinates that will place the floating element
|
|
1358
|
-
* next to a reference element when it is given a certain CSS positioning
|
|
1359
|
-
* strategy.
|
|
1360
|
-
*/
|
|
1361
|
-
const computePosition = (reference, floating, options) => {
|
|
1362
|
-
// This caches the expensive `getClippingElementAncestors` function so that
|
|
1363
|
-
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
1364
|
-
// single call. If other functions become expensive, we can add them as well.
|
|
1365
|
-
const cache = new Map();
|
|
1366
|
-
const mergedOptions = {
|
|
1367
|
-
platform,
|
|
1368
|
-
...options
|
|
1369
|
-
};
|
|
1370
|
-
const platformWithCache = {
|
|
1371
|
-
...mergedOptions.platform,
|
|
1372
|
-
_c: cache
|
|
1373
|
-
};
|
|
1374
|
-
return computePosition$1(reference, floating, {
|
|
1375
|
-
...mergedOptions,
|
|
1376
|
-
platform: platformWithCache
|
|
1377
|
-
});
|
|
1378
|
-
};
|
|
1379
|
-
|
|
1380
|
-
var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
|
|
1381
|
-
|
|
1382
|
-
// Fork of `fast-deep-equal` that only does the comparisons we need and compares
|
|
1383
|
-
// functions
|
|
1384
|
-
function deepEqual(a, b) {
|
|
1385
|
-
if (a === b) {
|
|
1386
|
-
return true;
|
|
1387
|
-
}
|
|
1388
|
-
if (typeof a !== typeof b) {
|
|
1389
|
-
return false;
|
|
1390
|
-
}
|
|
1391
|
-
if (typeof a === 'function' && a.toString() === b.toString()) {
|
|
1392
|
-
return true;
|
|
1393
|
-
}
|
|
1394
|
-
let length, i, keys;
|
|
1395
|
-
if (a && b && typeof a == 'object') {
|
|
1396
|
-
if (Array.isArray(a)) {
|
|
1397
|
-
length = a.length;
|
|
1398
|
-
if (length != b.length) return false;
|
|
1399
|
-
for (i = length; i-- !== 0;) {
|
|
1400
|
-
if (!deepEqual(a[i], b[i])) {
|
|
1401
|
-
return false;
|
|
1402
|
-
}
|
|
1403
|
-
}
|
|
1404
|
-
return true;
|
|
1405
|
-
}
|
|
1406
|
-
keys = Object.keys(a);
|
|
1407
|
-
length = keys.length;
|
|
1408
|
-
if (length !== Object.keys(b).length) {
|
|
1409
|
-
return false;
|
|
1410
|
-
}
|
|
1411
|
-
for (i = length; i-- !== 0;) {
|
|
1412
|
-
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
1413
|
-
return false;
|
|
1414
|
-
}
|
|
1415
|
-
}
|
|
1416
|
-
for (i = length; i-- !== 0;) {
|
|
1417
|
-
const key = keys[i];
|
|
1418
|
-
if (key === '_owner' && a.$$typeof) {
|
|
1419
|
-
continue;
|
|
1420
|
-
}
|
|
1421
|
-
if (!deepEqual(a[key], b[key])) {
|
|
1422
|
-
return false;
|
|
1423
|
-
}
|
|
1424
|
-
}
|
|
1425
|
-
return true;
|
|
1426
|
-
}
|
|
1427
|
-
return a !== a && b !== b;
|
|
1428
|
-
}
|
|
1429
|
-
|
|
1430
|
-
function getDPR(element) {
|
|
1431
|
-
if (typeof window === 'undefined') {
|
|
1432
|
-
return 1;
|
|
1433
|
-
}
|
|
1434
|
-
const win = element.ownerDocument.defaultView || window;
|
|
1435
|
-
return win.devicePixelRatio || 1;
|
|
1436
|
-
}
|
|
1437
|
-
|
|
1438
|
-
function roundByDPR(element, value) {
|
|
1439
|
-
const dpr = getDPR(element);
|
|
1440
|
-
return Math.round(value * dpr) / dpr;
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
function useLatestRef(value) {
|
|
1444
|
-
const ref = React$1.useRef(value);
|
|
1445
|
-
index$1(() => {
|
|
1446
|
-
ref.current = value;
|
|
1447
|
-
});
|
|
1448
|
-
return ref;
|
|
1449
|
-
}
|
|
1450
|
-
|
|
1451
|
-
/**
|
|
1452
|
-
* Provides data to position a floating element.
|
|
1453
|
-
* @see https://floating-ui.com/docs/useFloating
|
|
1454
|
-
*/
|
|
1455
|
-
function useFloating$1(options) {
|
|
1456
|
-
if (options === void 0) {
|
|
1457
|
-
options = {};
|
|
1458
|
-
}
|
|
1459
|
-
const {
|
|
1460
|
-
placement = 'bottom',
|
|
1461
|
-
strategy = 'absolute',
|
|
1462
|
-
middleware = [],
|
|
1463
|
-
platform,
|
|
1464
|
-
elements: {
|
|
1465
|
-
reference: externalReference,
|
|
1466
|
-
floating: externalFloating
|
|
1467
|
-
} = {},
|
|
1468
|
-
transform = true,
|
|
1469
|
-
whileElementsMounted,
|
|
1470
|
-
open
|
|
1471
|
-
} = options;
|
|
1472
|
-
const [data, setData] = React$1.useState({
|
|
1473
|
-
x: 0,
|
|
1474
|
-
y: 0,
|
|
1475
|
-
strategy,
|
|
1476
|
-
placement,
|
|
1477
|
-
middlewareData: {},
|
|
1478
|
-
isPositioned: false
|
|
1479
|
-
});
|
|
1480
|
-
const [latestMiddleware, setLatestMiddleware] = React$1.useState(middleware);
|
|
1481
|
-
if (!deepEqual(latestMiddleware, middleware)) {
|
|
1482
|
-
setLatestMiddleware(middleware);
|
|
1483
|
-
}
|
|
1484
|
-
const [_reference, _setReference] = React$1.useState(null);
|
|
1485
|
-
const [_floating, _setFloating] = React$1.useState(null);
|
|
1486
|
-
const setReference = React$1.useCallback(node => {
|
|
1487
|
-
if (node != referenceRef.current) {
|
|
1488
|
-
referenceRef.current = node;
|
|
1489
|
-
_setReference(node);
|
|
1490
|
-
}
|
|
1491
|
-
}, [_setReference]);
|
|
1492
|
-
const setFloating = React$1.useCallback(node => {
|
|
1493
|
-
if (node !== floatingRef.current) {
|
|
1494
|
-
floatingRef.current = node;
|
|
1495
|
-
_setFloating(node);
|
|
1496
|
-
}
|
|
1497
|
-
}, [_setFloating]);
|
|
1498
|
-
const referenceEl = externalReference || _reference;
|
|
1499
|
-
const floatingEl = externalFloating || _floating;
|
|
1500
|
-
const referenceRef = React$1.useRef(null);
|
|
1501
|
-
const floatingRef = React$1.useRef(null);
|
|
1502
|
-
const dataRef = React$1.useRef(data);
|
|
1503
|
-
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
1504
|
-
const platformRef = useLatestRef(platform);
|
|
1505
|
-
const update = React$1.useCallback(() => {
|
|
1506
|
-
if (!referenceRef.current || !floatingRef.current) {
|
|
1507
|
-
return;
|
|
1508
|
-
}
|
|
1509
|
-
const config = {
|
|
1510
|
-
placement,
|
|
1511
|
-
strategy,
|
|
1512
|
-
middleware: latestMiddleware
|
|
1513
|
-
};
|
|
1514
|
-
if (platformRef.current) {
|
|
1515
|
-
config.platform = platformRef.current;
|
|
1516
|
-
}
|
|
1517
|
-
computePosition(referenceRef.current, floatingRef.current, config).then(data => {
|
|
1518
|
-
const fullData = {
|
|
1519
|
-
...data,
|
|
1520
|
-
isPositioned: true
|
|
1521
|
-
};
|
|
1522
|
-
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
1523
|
-
dataRef.current = fullData;
|
|
1524
|
-
ReactDOM.flushSync(() => {
|
|
1525
|
-
setData(fullData);
|
|
1526
|
-
});
|
|
1527
|
-
}
|
|
1528
|
-
});
|
|
1529
|
-
}, [latestMiddleware, placement, strategy, platformRef]);
|
|
1530
|
-
index$1(() => {
|
|
1531
|
-
if (open === false && dataRef.current.isPositioned) {
|
|
1532
|
-
dataRef.current.isPositioned = false;
|
|
1533
|
-
setData(data => ({
|
|
1534
|
-
...data,
|
|
1535
|
-
isPositioned: false
|
|
1536
|
-
}));
|
|
1537
|
-
}
|
|
1538
|
-
}, [open]);
|
|
1539
|
-
const isMountedRef = React$1.useRef(false);
|
|
1540
|
-
index$1(() => {
|
|
1541
|
-
isMountedRef.current = true;
|
|
1542
|
-
return () => {
|
|
1543
|
-
isMountedRef.current = false;
|
|
1544
|
-
};
|
|
1545
|
-
}, []);
|
|
1546
|
-
index$1(() => {
|
|
1547
|
-
if (referenceEl) referenceRef.current = referenceEl;
|
|
1548
|
-
if (floatingEl) floatingRef.current = floatingEl;
|
|
1549
|
-
if (referenceEl && floatingEl) {
|
|
1550
|
-
if (whileElementsMountedRef.current) {
|
|
1551
|
-
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
1552
|
-
} else {
|
|
1553
|
-
update();
|
|
1554
|
-
}
|
|
1555
|
-
}
|
|
1556
|
-
}, [referenceEl, floatingEl, update, whileElementsMountedRef]);
|
|
1557
|
-
const refs = React$1.useMemo(() => ({
|
|
1558
|
-
reference: referenceRef,
|
|
1559
|
-
floating: floatingRef,
|
|
1560
|
-
setReference,
|
|
1561
|
-
setFloating
|
|
1562
|
-
}), [setReference, setFloating]);
|
|
1563
|
-
const elements = React$1.useMemo(() => ({
|
|
1564
|
-
reference: referenceEl,
|
|
1565
|
-
floating: floatingEl
|
|
1566
|
-
}), [referenceEl, floatingEl]);
|
|
1567
|
-
const floatingStyles = React$1.useMemo(() => {
|
|
1568
|
-
const initialStyles = {
|
|
1569
|
-
position: strategy,
|
|
1570
|
-
left: 0,
|
|
1571
|
-
top: 0
|
|
1572
|
-
};
|
|
1573
|
-
if (!elements.floating) {
|
|
1574
|
-
return initialStyles;
|
|
1575
|
-
}
|
|
1576
|
-
const x = roundByDPR(elements.floating, data.x);
|
|
1577
|
-
const y = roundByDPR(elements.floating, data.y);
|
|
1578
|
-
if (transform) {
|
|
1579
|
-
return {
|
|
1580
|
-
...initialStyles,
|
|
1581
|
-
transform: "translate(" + x + "px, " + y + "px)",
|
|
1582
|
-
...(getDPR(elements.floating) >= 1.5 && {
|
|
1583
|
-
willChange: 'transform'
|
|
1584
|
-
})
|
|
1585
|
-
};
|
|
1586
|
-
}
|
|
1587
|
-
return {
|
|
1588
|
-
position: strategy,
|
|
1589
|
-
left: x,
|
|
1590
|
-
top: y
|
|
1591
|
-
};
|
|
1592
|
-
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
1593
|
-
return React$1.useMemo(() => ({
|
|
1594
|
-
...data,
|
|
1595
|
-
update,
|
|
1596
|
-
refs,
|
|
1597
|
-
elements,
|
|
1598
|
-
floatingStyles
|
|
1599
|
-
}), [data, update, refs, elements, floatingStyles]);
|
|
1600
|
-
}
|
|
1601
|
-
|
|
1602
|
-
// `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
|
|
1603
|
-
const useInsertionEffect = React$1[/*#__PURE__*/'useInsertionEffect'.toString()];
|
|
1604
|
-
const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
|
|
1605
|
-
function useEffectEvent(callback) {
|
|
1606
|
-
const ref = React$1.useRef(() => {
|
|
1607
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1608
|
-
throw new Error('Cannot call an event handler while rendering.');
|
|
1609
|
-
}
|
|
1610
|
-
});
|
|
1611
|
-
useSafeInsertionEffect(() => {
|
|
1612
|
-
ref.current = callback;
|
|
1613
|
-
});
|
|
1614
|
-
return React$1.useCallback(function () {
|
|
1615
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1616
|
-
args[_key] = arguments[_key];
|
|
1617
|
-
}
|
|
1618
|
-
return ref.current == null ? void 0 : ref.current(...args);
|
|
1619
|
-
}, []);
|
|
1620
|
-
}
|
|
1621
|
-
|
|
1622
|
-
var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
|
|
1623
|
-
|
|
1624
|
-
let serverHandoffComplete = false;
|
|
1625
|
-
let count = 0;
|
|
1626
|
-
const genId = () => "floating-ui-" + count++;
|
|
1627
|
-
function useFloatingId() {
|
|
1628
|
-
const [id, setId] = React$1.useState(() => serverHandoffComplete ? genId() : undefined);
|
|
1629
|
-
index(() => {
|
|
1630
|
-
if (id == null) {
|
|
1631
|
-
setId(genId());
|
|
1632
|
-
}
|
|
1633
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1634
|
-
}, []);
|
|
1635
|
-
React$1.useEffect(() => {
|
|
1636
|
-
if (!serverHandoffComplete) {
|
|
1637
|
-
serverHandoffComplete = true;
|
|
1638
|
-
}
|
|
1639
|
-
}, []);
|
|
1640
|
-
return id;
|
|
1641
|
-
}
|
|
1642
|
-
|
|
1643
|
-
// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
|
|
1644
|
-
const useReactId = React$1[/*#__PURE__*/'useId'.toString()];
|
|
1645
|
-
|
|
1646
|
-
/**
|
|
1647
|
-
* Uses React 18's built-in `useId()` when available, or falls back to a
|
|
1648
|
-
* slightly less performant (requiring a double render) implementation for
|
|
1649
|
-
* earlier React versions.
|
|
1650
|
-
* @see https://floating-ui.com/docs/useId
|
|
1651
|
-
*/
|
|
1652
|
-
const useId = useReactId || useFloatingId;
|
|
1653
|
-
|
|
1654
|
-
function createPubSub() {
|
|
1655
|
-
const map = new Map();
|
|
1656
|
-
return {
|
|
1657
|
-
emit(event, data) {
|
|
1658
|
-
var _map$get;
|
|
1659
|
-
(_map$get = map.get(event)) == null || _map$get.forEach(handler => handler(data));
|
|
1660
|
-
},
|
|
1661
|
-
on(event, listener) {
|
|
1662
|
-
map.set(event, [...(map.get(event) || []), listener]);
|
|
1663
|
-
},
|
|
1664
|
-
off(event, listener) {
|
|
1665
|
-
var _map$get2;
|
|
1666
|
-
map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter(l => l !== listener)) || []);
|
|
1667
|
-
}
|
|
1668
|
-
};
|
|
1669
|
-
}
|
|
1670
|
-
|
|
1671
|
-
const FloatingNodeContext = /*#__PURE__*/React$1.createContext(null);
|
|
1672
|
-
const FloatingTreeContext = /*#__PURE__*/React$1.createContext(null);
|
|
1673
|
-
const useFloatingParentNodeId = () => {
|
|
1674
|
-
var _React$useContext;
|
|
1675
|
-
return ((_React$useContext = React$1.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
|
|
1676
|
-
};
|
|
1677
|
-
const useFloatingTree = () => React$1.useContext(FloatingTreeContext);
|
|
1678
|
-
|
|
1679
|
-
let devMessageSet;
|
|
1680
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1681
|
-
devMessageSet = /*#__PURE__*/new Set();
|
|
1682
|
-
}
|
|
1683
|
-
|
|
1684
|
-
/**
|
|
1685
|
-
* Provides data to position a floating element and context to add interactions.
|
|
1686
|
-
* @see https://floating-ui.com/docs/useFloating
|
|
1687
|
-
*/
|
|
1688
|
-
function useFloating(options) {
|
|
1689
|
-
var _options$elements2;
|
|
1690
|
-
if (options === void 0) {
|
|
1691
|
-
options = {};
|
|
1692
|
-
}
|
|
1693
|
-
const {
|
|
1694
|
-
open = false,
|
|
1695
|
-
onOpenChange: unstable_onOpenChange,
|
|
1696
|
-
nodeId
|
|
1697
|
-
} = options;
|
|
1698
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1699
|
-
var _options$elements;
|
|
1700
|
-
const err = 'Floating UI: Cannot pass a virtual element to the ' + '`elements.reference` option, as it must be a real DOM element. ' + 'Use `refs.setPositionReference` instead.';
|
|
1701
|
-
if ((_options$elements = options.elements) != null && _options$elements.reference && !isElement(options.elements.reference)) {
|
|
1702
|
-
var _devMessageSet;
|
|
1703
|
-
if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(err))) {
|
|
1704
|
-
var _devMessageSet2;
|
|
1705
|
-
(_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(err);
|
|
1706
|
-
console.error(err);
|
|
1707
|
-
}
|
|
1708
|
-
}
|
|
1709
|
-
}
|
|
1710
|
-
const [_domReference, setDomReference] = React$1.useState(null);
|
|
1711
|
-
const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
|
|
1712
|
-
const position = useFloating$1(options);
|
|
1713
|
-
const tree = useFloatingTree();
|
|
1714
|
-
const nested = useFloatingParentNodeId() != null;
|
|
1715
|
-
const onOpenChange = useEffectEvent((open, event, reason) => {
|
|
1716
|
-
if (open) {
|
|
1717
|
-
dataRef.current.openEvent = event;
|
|
1718
|
-
}
|
|
1719
|
-
events.emit('openchange', {
|
|
1720
|
-
open,
|
|
1721
|
-
event,
|
|
1722
|
-
reason,
|
|
1723
|
-
nested
|
|
1724
|
-
});
|
|
1725
|
-
unstable_onOpenChange == null || unstable_onOpenChange(open, event, reason);
|
|
1726
|
-
});
|
|
1727
|
-
const domReferenceRef = React$1.useRef(null);
|
|
1728
|
-
const dataRef = React$1.useRef({});
|
|
1729
|
-
const events = React$1.useState(() => createPubSub())[0];
|
|
1730
|
-
const floatingId = useId();
|
|
1731
|
-
const setPositionReference = React$1.useCallback(node => {
|
|
1732
|
-
const positionReference = isElement(node) ? {
|
|
1733
|
-
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
1734
|
-
contextElement: node
|
|
1735
|
-
} : node;
|
|
1736
|
-
position.refs.setReference(positionReference);
|
|
1737
|
-
}, [position.refs]);
|
|
1738
|
-
const setReference = React$1.useCallback(node => {
|
|
1739
|
-
if (isElement(node) || node === null) {
|
|
1740
|
-
domReferenceRef.current = node;
|
|
1741
|
-
setDomReference(node);
|
|
1742
|
-
}
|
|
1743
|
-
|
|
1744
|
-
// Backwards-compatibility for passing a virtual element to `reference`
|
|
1745
|
-
// after it has set the DOM reference.
|
|
1746
|
-
if (isElement(position.refs.reference.current) || position.refs.reference.current === null ||
|
|
1747
|
-
// Don't allow setting virtual elements using the old technique back to
|
|
1748
|
-
// `null` to support `positionReference` + an unstable `reference`
|
|
1749
|
-
// callback ref.
|
|
1750
|
-
node !== null && !isElement(node)) {
|
|
1751
|
-
position.refs.setReference(node);
|
|
1752
|
-
}
|
|
1753
|
-
}, [position.refs]);
|
|
1754
|
-
const refs = React$1.useMemo(() => ({
|
|
1755
|
-
...position.refs,
|
|
1756
|
-
setReference,
|
|
1757
|
-
setPositionReference,
|
|
1758
|
-
domReference: domReferenceRef
|
|
1759
|
-
}), [position.refs, setReference, setPositionReference]);
|
|
1760
|
-
const elements = React$1.useMemo(() => ({
|
|
1761
|
-
...position.elements,
|
|
1762
|
-
domReference: domReference
|
|
1763
|
-
}), [position.elements, domReference]);
|
|
1764
|
-
const context = React$1.useMemo(() => ({
|
|
1765
|
-
...position,
|
|
1766
|
-
refs,
|
|
1767
|
-
elements,
|
|
1768
|
-
dataRef,
|
|
1769
|
-
nodeId,
|
|
1770
|
-
floatingId,
|
|
1771
|
-
events,
|
|
1772
|
-
open,
|
|
1773
|
-
onOpenChange
|
|
1774
|
-
}), [position, nodeId, floatingId, events, open, onOpenChange, refs, elements]);
|
|
1775
|
-
index(() => {
|
|
1776
|
-
const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
|
|
1777
|
-
if (node) {
|
|
1778
|
-
node.context = context;
|
|
1779
|
-
}
|
|
1780
|
-
});
|
|
1781
|
-
return React$1.useMemo(() => ({
|
|
1782
|
-
...position,
|
|
1783
|
-
context,
|
|
1784
|
-
refs,
|
|
1785
|
-
elements
|
|
1786
|
-
}), [position, refs, elements, context]);
|
|
1787
|
-
}
|
|
1788
|
-
|
|
1789
|
-
var Dropdown = function Dropdown(_ref) {
|
|
1790
|
-
_ref.list;
|
|
1791
|
-
_ref.selected;
|
|
1792
|
-
var _useState = useState(false),
|
|
1793
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1794
|
-
isOpen = _useState2[0],
|
|
1795
|
-
setIsOpen = _useState2[1];
|
|
1796
|
-
// todo
|
|
1797
|
-
var _useFloating = useFloating({
|
|
1798
|
-
open: isOpen,
|
|
1799
|
-
onOpenChange: setIsOpen,
|
|
1800
|
-
middleware: [offset(10), flip(), shift()],
|
|
1801
|
-
whileElementsMounted: autoUpdate
|
|
1802
|
-
});
|
|
1803
|
-
_useFloating.refs;
|
|
1804
|
-
_useFloating.floatingStyles;
|
|
1805
|
-
_useFloating.context;
|
|
1806
|
-
return /*#__PURE__*/React.createElement("div", null, "Dropdown");
|
|
1807
|
-
};
|
|
1808
|
-
|
|
1809
|
-
export { Dropdown as default };
|
|
1
|
+
import*as t from"react";import{useLayoutEffect as e,useEffect as n,useState as o}from"react";import*as r from"react-dom";function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var o,r,i,l,c=[],s=!0,a=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;s=!1}else for(;!(s=(o=i.call(n)).done)&&(c.push(o.value),c.length!==e);s=!0);}catch(t){a=!0,r=t}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(a)throw r}}return c}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return l(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function c(t){return f(t)?(t.nodeName||"").toLowerCase():"#document"}function s(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function a(t){var e;return null==(e=(f(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function f(t){return t instanceof Node||t instanceof s(t).Node}function u(t){return t instanceof Element||t instanceof s(t).Element}function d(t){return t instanceof HTMLElement||t instanceof s(t).HTMLElement}function m(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof s(t).ShadowRoot)}function p(t){const{overflow:e,overflowX:n,overflowY:o,display:r}=v(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(r)}function g(t){return["table","td","th"].includes(c(t))}function h(t){const e=y(),n=v(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function y(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function w(t){return["html","body","#document"].includes(c(t))}function v(t){return s(t).getComputedStyle(t)}function x(t){return u(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function b(t){if("html"===c(t))return t;const e=t.assignedSlot||t.parentNode||m(t)&&t.host||a(t);return m(e)?e.host:e}function R(t){const e=b(t);return w(e)?t.ownerDocument?t.ownerDocument.body:t.body:d(e)&&p(e)?e:R(e)}function E(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const r=R(t),i=r===(null==(o=t.ownerDocument)?void 0:o.body),l=s(r);return i?e.concat(l,l.visualViewport||[],p(r)?r:[],l.frameElement&&n?E(l.frameElement):[]):e.concat(r,E(r,[],n))}const S=Math.min,C=Math.max,T=Math.round,A=Math.floor,L=t=>({x:t,y:t}),O={left:"right",right:"left",bottom:"top",top:"bottom"},D={start:"end",end:"start"};function P(t,e,n){return C(t,S(e,n))}function M(t,e){return"function"==typeof t?t(e):t}function k(t){return t.split("-")[0]}function F(t){return t.split("-")[1]}function V(t){return"x"===t?"y":"x"}function I(t){return"y"===t?"height":"width"}function N(t){return["top","bottom"].includes(k(t))?"y":"x"}function B(t){return V(N(t))}function H(t){return t.replace(/start|end/g,(t=>D[t]))}function W(t){return t.replace(/left|right|bottom|top/g,(t=>O[t]))}function j(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function z(t,e,n){let{reference:o,floating:r}=t;const i=N(e),l=B(e),c=I(l),s=k(e),a="y"===i,f=o.x+o.width/2-r.width/2,u=o.y+o.height/2-r.height/2,d=o[c]/2-r[c]/2;let m;switch(s){case"top":m={x:f,y:o.y-r.height};break;case"bottom":m={x:f,y:o.y+o.height};break;case"right":m={x:o.x+o.width,y:u};break;case"left":m={x:o.x-r.width,y:u};break;default:m={x:o.x,y:o.y}}switch(F(e)){case"start":m[l]-=d*(n&&a?-1:1);break;case"end":m[l]+=d*(n&&a?-1:1)}return m}async function _(t,e){var n;void 0===e&&(e={});const{x:o,y:r,platform:i,rects:l,elements:c,strategy:s}=t,{boundary:a="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:d=!1,padding:m=0}=M(e,t),p=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(m),g=c[d?"floating"===u?"reference":"floating":u],h=j(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(g)))||n?g:g.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(c.floating)),boundary:a,rootBoundary:f,strategy:s})),y="floating"===u?{...l.floating,x:o,y:r}:l.reference,w=await(null==i.getOffsetParent?void 0:i.getOffsetParent(c.floating)),v=await(null==i.isElement?void 0:i.isElement(w))&&await(null==i.getScale?void 0:i.getScale(w))||{x:1,y:1},x=j(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:y,offsetParent:w,strategy:s}):y);return{top:(h.top-x.top+p.top)/v.y,bottom:(x.bottom-h.bottom+p.bottom)/v.y,left:(h.left-x.left+p.left)/v.x,right:(x.right-h.right+p.right)/v.x}}const $=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:r,middlewareData:i,rects:l,initialPlacement:c,platform:s,elements:a}=e,{mainAxis:f=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:g=!0,...h}=M(t,e);if(null!=(n=i.arrow)&&n.alignmentOffset)return{};const y=k(r),w=k(c)===c,v=await(null==s.isRTL?void 0:s.isRTL(a.floating)),x=d||(w||!g?[W(c)]:function(t){const e=W(t);return[H(t),e,H(e)]}(c));d||"none"===p||x.push(...function(t,e,n,o){const r=F(t);let i=function(t,e,n){const o=["left","right"],r=["right","left"],i=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?r:o:e?o:r;case"left":case"right":return e?i:l;default:return[]}}(k(t),"start"===n,o);return r&&(i=i.map((t=>t+"-"+r)),e&&(i=i.concat(i.map(H)))),i}(c,g,p,v));const b=[c,...x],R=await _(e,h),E=[];let S=(null==(o=i.flip)?void 0:o.overflows)||[];if(f&&E.push(R[y]),u){const t=function(t,e,n){void 0===n&&(n=!1);const o=F(t),r=B(t),i=I(r);let l="x"===r?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[i]>e.floating[i]&&(l=W(l)),[l,W(l)]}(r,l,v);E.push(R[t[0]],R[t[1]])}if(S=[...S,{placement:r,overflows:E}],!E.every((t=>t<=0))){var C,T;const t=((null==(C=i.flip)?void 0:C.index)||0)+1,e=b[t];if(e)return{data:{index:t,overflows:S},reset:{placement:e}};let n=null==(T=S.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:T.placement;if(!n)switch(m){case"bestFit":{var A;const t=null==(A=S.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:A[0];t&&(n=t);break}case"initialPlacement":n=c}if(r!==n)return{reset:{placement:n}}}return{}}}};const U=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:r,y:i,placement:l,middlewareData:c}=e,s=await async function(t,e){const{placement:n,platform:o,elements:r}=t,i=await(null==o.isRTL?void 0:o.isRTL(r.floating)),l=k(n),c=F(n),s="y"===N(n),a=["left","top"].includes(l)?-1:1,f=i&&s?-1:1,u=M(e,t);let{mainAxis:d,crossAxis:m,alignmentAxis:p}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...u};return c&&"number"==typeof p&&(m="end"===c?-1*p:p),s?{x:m*f,y:d*a}:{x:d*a,y:m*f}}(e,t);return l===(null==(n=c.offset)?void 0:n.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:r+s.x,y:i+s.y,data:{...s,placement:l}}}}};function q(t){const e=v(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const r=d(t),i=r?t.offsetWidth:n,l=r?t.offsetHeight:o,c=T(n)!==i||T(o)!==l;return c&&(n=i,o=l),{width:n,height:o,$:c}}function X(t){return u(t)?t:t.contextElement}function Y(t){const e=X(t);if(!d(e))return L(1);const n=e.getBoundingClientRect(),{width:o,height:r,$:i}=q(e);let l=(i?T(n.width):n.width)/o,c=(i?T(n.height):n.height)/r;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const G=L(0);function J(t){const e=s(t);return y()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:G}function K(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const r=t.getBoundingClientRect(),i=X(t);let l=L(1);e&&(o?u(o)&&(l=Y(o)):l=Y(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==s(t))&&e}(i,n,o)?J(i):L(0);let a=(r.left+c.x)/l.x,f=(r.top+c.y)/l.y,d=r.width/l.x,m=r.height/l.y;if(i){const t=s(i),e=o&&u(o)?s(o):o;let n=t.frameElement;for(;n&&o&&e!==t;){const t=Y(n),e=n.getBoundingClientRect(),o=v(n),r=e.left+(n.clientLeft+parseFloat(o.paddingLeft))*t.x,i=e.top+(n.clientTop+parseFloat(o.paddingTop))*t.y;a*=t.x,f*=t.y,d*=t.x,m*=t.y,a+=r,f+=i,n=s(n).frameElement}}return j({width:d,height:m,x:a,y:f})}function Q(t){return K(a(t)).left+x(t).scrollLeft}function Z(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=s(t),o=a(t),r=n.visualViewport;let i=o.clientWidth,l=o.clientHeight,c=0,f=0;if(r){i=r.width,l=r.height;const t=y();(!t||t&&"fixed"===e)&&(c=r.offsetLeft,f=r.offsetTop)}return{width:i,height:l,x:c,y:f}}(t,n);else if("document"===e)o=function(t){const e=a(t),n=x(t),o=t.ownerDocument.body,r=C(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),i=C(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+Q(t);const c=-n.scrollTop;return"rtl"===v(o).direction&&(l+=C(e.clientWidth,o.clientWidth)-r),{width:r,height:i,x:l,y:c}}(a(t));else if(u(e))o=function(t,e){const n=K(t,!0,"fixed"===e),o=n.top+t.clientTop,r=n.left+t.clientLeft,i=d(t)?Y(t):L(1);return{width:t.clientWidth*i.x,height:t.clientHeight*i.y,x:r*i.x,y:o*i.y}}(e,n);else{const n=J(t);o={...e,x:e.x-n.x,y:e.y-n.y}}return j(o)}function tt(t,e){const n=b(t);return!(n===e||!u(n)||w(n))&&("fixed"===v(n).position||tt(n,e))}function et(t,e,n){const o=d(e),r=a(e),i="fixed"===n,l=K(t,!0,i,e);let s={scrollLeft:0,scrollTop:0};const f=L(0);if(o||!o&&!i)if(("body"!==c(e)||p(r))&&(s=x(e)),o){const t=K(e,!0,i,e);f.x=t.x+e.clientLeft,f.y=t.y+e.clientTop}else r&&(f.x=Q(r));return{x:l.left+s.scrollLeft-f.x,y:l.top+s.scrollTop-f.y,width:l.width,height:l.height}}function nt(t,e){return d(t)&&"fixed"!==v(t).position?e?e(t):t.offsetParent:null}function ot(t,e){const n=s(t);if(!d(t))return n;let o=nt(t,e);for(;o&&g(o)&&"static"===v(o).position;)o=nt(o,e);return o&&("html"===c(o)||"body"===c(o)&&"static"===v(o).position&&!h(o))?n:o||function(t){let e=b(t);for(;d(e)&&!w(e);){if(h(e))return e;e=b(e)}return null}(t)||n}const rt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const r=d(n),i=a(n);if(n===i)return e;let l={scrollLeft:0,scrollTop:0},s=L(1);const f=L(0);if((r||!r&&"fixed"!==o)&&(("body"!==c(n)||p(i))&&(l=x(n)),d(n))){const t=K(n);s=Y(n),f.x=t.x+n.clientLeft,f.y=t.y+n.clientTop}return{width:e.width*s.x,height:e.height*s.y,x:e.x*s.x-l.scrollLeft*s.x+f.x,y:e.y*s.y-l.scrollTop*s.y+f.y}},getDocumentElement:a,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:r}=t;const i=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let o=E(t,[],!1).filter((t=>u(t)&&"body"!==c(t))),r=null;const i="fixed"===v(t).position;let l=i?b(t):t;for(;u(l)&&!w(l);){const e=v(l),n=h(l);n||"fixed"!==e.position||(r=null),(i?!n&&!r:!n&&"static"===e.position&&r&&["absolute","fixed"].includes(r.position)||p(l)&&!n&&tt(t,l))?o=o.filter((t=>t!==l)):r=e,l=b(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=i[0],s=i.reduce(((t,n)=>{const o=Z(e,n,r);return t.top=C(o.top,t.top),t.right=S(o.right,t.right),t.bottom=S(o.bottom,t.bottom),t.left=C(o.left,t.left),t}),Z(e,l,r));return{width:s.right-s.left,height:s.bottom-s.top,x:s.left,y:s.top}},getOffsetParent:ot,getElementRects:async function(t){let{reference:e,floating:n,strategy:o}=t;const r=this.getOffsetParent||ot,i=this.getDimensions;return{reference:et(e,await r(n),o),floating:{x:0,y:0,...await i(n)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){return q(t)},getScale:Y,isElement:u,isRTL:function(t){return"rtl"===v(t).direction}};function it(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:r=!0,ancestorResize:i=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=X(t),u=r||i?[...f?E(f):[],...E(e)]:[];u.forEach((t=>{r&&t.addEventListener("scroll",n,{passive:!0}),i&&t.addEventListener("resize",n)}));const d=f&&c?function(t,e){let n,o=null;const r=a(t);function i(){clearTimeout(n),o&&o.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),i();const{left:a,top:f,width:u,height:d}=t.getBoundingClientRect();if(c||e(),!u||!d)return;const m={rootMargin:-A(f)+"px "+-A(r.clientWidth-(a+u))+"px "+-A(r.clientHeight-(f+d))+"px "+-A(a)+"px",threshold:C(0,S(1,s))||1};let p=!0;function g(t){const e=t[0].intersectionRatio;if(e!==s){if(!p)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),100)}p=!1}try{o=new IntersectionObserver(g,{...m,root:r.ownerDocument})}catch(t){o=new IntersectionObserver(g,m)}o.observe(t)}(!0),i}(f,n):null;let m,p=-1,g=null;l&&(g=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&g&&(g.unobserve(e),cancelAnimationFrame(p),p=requestAnimationFrame((()=>{g&&g.observe(e)}))),n()})),f&&!s&&g.observe(f),g.observe(e));let h=s?K(t):null;return s&&function e(){const o=K(t);!h||o.x===h.x&&o.y===h.y&&o.width===h.width&&o.height===h.height||n();h=o,m=requestAnimationFrame(e)}(),n(),()=>{u.forEach((t=>{r&&t.removeEventListener("scroll",n),i&&t.removeEventListener("resize",n)})),d&&d(),g&&g.disconnect(),g=null,s&&cancelAnimationFrame(m)}}const lt=(t,e,n)=>{const o=new Map,r={platform:rt,...n},i={...r.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:r="absolute",middleware:i=[],platform:l}=n,c=i.filter(Boolean),s=await(null==l.isRTL?void 0:l.isRTL(e));let a=await l.getElementRects({reference:t,floating:e,strategy:r}),{x:f,y:u}=z(a,o,s),d=o,m={},p=0;for(let n=0;n<c.length;n++){const{name:i,fn:g}=c[n],{x:h,y:y,data:w,reset:v}=await g({x:f,y:u,initialPlacement:o,placement:d,strategy:r,middlewareData:m,rects:a,platform:l,elements:{reference:t,floating:e}});f=null!=h?h:f,u=null!=y?y:u,m={...m,[i]:{...m[i],...w}},v&&p<=50&&(p++,"object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(a=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:r}):v.rects),({x:f,y:u}=z(a,d,s))),n=-1)}return{x:f,y:u,placement:d,strategy:r,middlewareData:m}})(t,e,{...r,platform:i})};var ct="undefined"!=typeof document?e:n;function st(t,e){if(t===e)return!0;if(typeof t!=typeof e)return!1;if("function"==typeof t&&t.toString()===e.toString())return!0;let n,o,r;if(t&&e&&"object"==typeof t){if(Array.isArray(t)){if(n=t.length,n!=e.length)return!1;for(o=n;0!=o--;)if(!st(t[o],e[o]))return!1;return!0}if(r=Object.keys(t),n=r.length,n!==Object.keys(e).length)return!1;for(o=n;0!=o--;)if(!{}.hasOwnProperty.call(e,r[o]))return!1;for(o=n;0!=o--;){const n=r[o];if(("_owner"!==n||!t.$$typeof)&&!st(t[n],e[n]))return!1}return!0}return t!=t&&e!=e}function at(t){if("undefined"==typeof window)return 1;return(t.ownerDocument.defaultView||window).devicePixelRatio||1}function ft(t,e){const n=at(t);return Math.round(e*n)/n}function ut(e){const n=t.useRef(e);return ct((()=>{n.current=e})),n}const dt=t["useInsertionEffect".toString()]||(t=>t());var mt="undefined"!=typeof document?e:n;let pt=!1,gt=0;const ht=()=>"floating-ui-"+gt++;const yt=t["useId".toString()]||function(){const[e,n]=t.useState((()=>pt?ht():void 0));return mt((()=>{null==e&&n(ht())}),[]),t.useEffect((()=>{pt||(pt=!0)}),[]),e};const wt=t.createContext(null),vt=t.createContext(null);let xt;function bt(e){var n;void 0===e&&(e={});const{open:o=!1,onOpenChange:i,nodeId:l}=e;if("production"!==process.env.NODE_ENV){var c;const t="Floating UI: Cannot pass a virtual element to the `elements.reference` option, as it must be a real DOM element. Use `refs.setPositionReference` instead.";var s,a;if(null!=(c=e.elements)&&c.reference&&!u(e.elements.reference))if(null==(s=xt)||!s.has(t))null==(a=xt)||a.add(t),console.error(t)}const[f,d]=t.useState(null),m=(null==(n=e.elements)?void 0:n.reference)||f,p=function(e){void 0===e&&(e={});const{placement:n="bottom",strategy:o="absolute",middleware:i=[],platform:l,elements:{reference:c,floating:s}={},transform:a=!0,whileElementsMounted:f,open:u}=e,[d,m]=t.useState({x:0,y:0,strategy:o,placement:n,middlewareData:{},isPositioned:!1}),[p,g]=t.useState(i);st(p,i)||g(i);const[h,y]=t.useState(null),[w,v]=t.useState(null),x=t.useCallback((t=>{t!=S.current&&(S.current=t,y(t))}),[y]),b=t.useCallback((t=>{t!==C.current&&(C.current=t,v(t))}),[v]),R=c||h,E=s||w,S=t.useRef(null),C=t.useRef(null),T=t.useRef(d),A=ut(f),L=ut(l),O=t.useCallback((()=>{if(!S.current||!C.current)return;const t={placement:n,strategy:o,middleware:p};L.current&&(t.platform=L.current),lt(S.current,C.current,t).then((t=>{const e={...t,isPositioned:!0};D.current&&!st(T.current,e)&&(T.current=e,r.flushSync((()=>{m(e)})))}))}),[p,n,o,L]);ct((()=>{!1===u&&T.current.isPositioned&&(T.current.isPositioned=!1,m((t=>({...t,isPositioned:!1}))))}),[u]);const D=t.useRef(!1);ct((()=>(D.current=!0,()=>{D.current=!1})),[]),ct((()=>{if(R&&(S.current=R),E&&(C.current=E),R&&E){if(A.current)return A.current(R,E,O);O()}}),[R,E,O,A]);const P=t.useMemo((()=>({reference:S,floating:C,setReference:x,setFloating:b})),[x,b]),M=t.useMemo((()=>({reference:R,floating:E})),[R,E]),k=t.useMemo((()=>{const t={position:o,left:0,top:0};if(!M.floating)return t;const e=ft(M.floating,d.x),n=ft(M.floating,d.y);return a?{...t,transform:"translate("+e+"px, "+n+"px)",...at(M.floating)>=1.5&&{willChange:"transform"}}:{position:o,left:e,top:n}}),[o,a,M.floating,d.x,d.y]);return t.useMemo((()=>({...d,update:O,refs:P,elements:M,floatingStyles:k})),[d,O,P,M,k])}(e),g=t.useContext(vt),h=null!=((null==(y=t.useContext(wt))?void 0:y.id)||null);var y;const w=function(e){const n=t.useRef((()=>{if("production"!==process.env.NODE_ENV)throw new Error("Cannot call an event handler while rendering.")}));return dt((()=>{n.current=e})),t.useCallback((function(){for(var t=arguments.length,e=new Array(t),o=0;o<t;o++)e[o]=arguments[o];return null==n.current?void 0:n.current(...e)}),[])}(((t,e,n)=>{t&&(x.current.openEvent=e),b.emit("openchange",{open:t,event:e,reason:n,nested:h}),null==i||i(t,e,n)})),v=t.useRef(null),x=t.useRef({}),b=t.useState((()=>function(){const t=new Map;return{emit(e,n){var o;null==(o=t.get(e))||o.forEach((t=>t(n)))},on(e,n){t.set(e,[...t.get(e)||[],n])},off(e,n){var o;t.set(e,(null==(o=t.get(e))?void 0:o.filter((t=>t!==n)))||[])}}}()))[0],R=yt(),E=t.useCallback((t=>{const e=u(t)?{getBoundingClientRect:()=>t.getBoundingClientRect(),contextElement:t}:t;p.refs.setReference(e)}),[p.refs]),S=t.useCallback((t=>{(u(t)||null===t)&&(v.current=t,d(t)),(u(p.refs.reference.current)||null===p.refs.reference.current||null!==t&&!u(t))&&p.refs.setReference(t)}),[p.refs]),C=t.useMemo((()=>({...p.refs,setReference:S,setPositionReference:E,domReference:v})),[p.refs,S,E]),T=t.useMemo((()=>({...p.elements,domReference:m})),[p.elements,m]),A=t.useMemo((()=>({...p,refs:C,elements:T,dataRef:x,nodeId:l,floatingId:R,events:b,open:o,onOpenChange:w})),[p,l,R,b,o,w,C,T]);return mt((()=>{const t=null==g?void 0:g.nodesRef.current.find((t=>t.id===l));t&&(t.context=A)})),t.useMemo((()=>({...p,context:A,refs:C,elements:T})),[p,C,T,A])}"production"!==process.env.NODE_ENV&&(xt=new Set);var Rt=function(t){t.list,t.selected;var e,n=i(o(!1),2),r=bt({open:n[0],onOpenChange:n[1],middleware:[U(10),$(),(void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:o,placement:r}=t,{mainAxis:i=!0,crossAxis:l=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...s}=M(e,t),a={x:n,y:o},f=await _(t,s),u=N(k(r)),d=V(u);let m=a[d],p=a[u];if(i){const t="y"===d?"bottom":"right";m=P(m+f["y"===d?"top":"left"],m,m-f[t])}if(l){const t="y"===u?"bottom":"right";p=P(p+f["y"===u?"top":"left"],p,p-f[t])}const g=c.fn({...t,[d]:m,[u]:p});return{...g,data:{x:g.x-n,y:g.y-o}}}})],whileElementsMounted:it});return r.refs,r.floatingStyles,r.context,React.createElement("div",null,"Dropdown")};export{Rt as default};
|