@helsenorge/designsystem-react 11.3.0 → 12.0.0-beta.1
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/CHANGELOG.md +28 -1
- package/DictionaryTrigger.js +28 -0
- package/DictionaryTrigger.js.map +1 -0
- package/HelpDetails.js +65 -0
- package/HelpDetails.js.map +1 -0
- package/HelpTriggerIcon.js +113 -0
- package/HelpTriggerIcon.js.map +1 -0
- package/HelpTriggerStandalone.js +37 -0
- package/HelpTriggerStandalone.js.map +1 -0
- package/HighlightPanel.js +5 -59
- package/HighlightPanel.js.map +1 -1
- package/PopOver.js +48 -175
- package/PopOver.js.map +1 -1
- package/components/DictionaryTrigger/index.js +1 -24
- package/components/DictionaryTrigger/index.js.map +1 -1
- package/components/DictionaryTrigger/styles.module.scss +12 -7
- package/components/HelpBubble/HelpBubble.d.ts +3 -6
- package/components/HelpBubble/index.js +55 -3
- package/components/HelpBubble/index.js.map +1 -1
- package/components/HelpBubble/styles.module.scss +5 -7
- package/components/HelpBubble/styles.module.scss.d.ts +0 -1
- package/components/HelpDetails/HelpDetails.d.ts +11 -0
- package/components/HelpDetails/styles.module.scss +49 -0
- package/components/HelpDetails/styles.module.scss.d.ts +13 -0
- package/components/HelpExpanderInline/HelpExpanderInline.d.ts +17 -0
- package/components/HelpExpanderInline/index.d.ts +3 -0
- package/components/HelpExpanderInline/index.js +16 -0
- package/components/HelpExpanderInline/index.js.map +1 -0
- package/components/HelpExpanderStandalone/HelpExpanderStandalone.d.ts +28 -0
- package/components/HelpExpanderStandalone/HelpExpanderStandalone.test.d.ts +1 -0
- package/components/HelpExpanderStandalone/index.d.ts +3 -0
- package/components/HelpExpanderStandalone/index.js +50 -0
- package/components/HelpExpanderStandalone/index.js.map +1 -0
- package/components/HelpExpanderStandalone/styles.module.scss +5 -0
- package/components/{HelpTooltip/HelpTooltipWord → HelpExpanderStandalone}/styles.module.scss.d.ts +1 -1
- package/components/HelpPanel/HelpPanel.d.ts +0 -3
- package/components/HelpPanel/index.js +2 -13
- package/components/HelpPanel/index.js.map +1 -1
- package/components/HelpPanel/styles.module.scss +3 -2
- package/components/HelpTooltip/HelpTooltip.d.ts +2 -8
- package/components/HelpTooltip/index.js +21 -78
- package/components/HelpTooltip/index.js.map +1 -1
- package/components/HelpTriggerIcon/HelpSign.d.ts +8 -0
- package/components/HelpTriggerIcon/HelpTriggerIcon.d.ts +34 -0
- package/components/HelpTriggerIcon/HelpTriggerIcon.test.d.ts +1 -0
- package/components/HelpTriggerIcon/index.d.ts +3 -0
- package/components/HelpTriggerIcon/index.js +7 -0
- package/components/{HelpTrigger → HelpTriggerIcon}/index.js.map +1 -1
- package/components/HelpTriggerIcon/styles.module.scss +157 -0
- package/components/HelpTriggerIcon/styles.module.scss.d.ts +15 -0
- package/components/HelpTriggerInline/HelpTriggerInline.d.ts +28 -0
- package/components/HelpTriggerInline/HelpTriggerInline.test.d.ts +1 -0
- package/components/HelpTriggerInline/index.d.ts +3 -0
- package/components/HelpTriggerInline/index.js +35 -0
- package/components/HelpTriggerInline/index.js.map +1 -0
- package/components/HelpTriggerInline/styles.module.scss +41 -0
- package/components/{HelpQuestion → HelpTriggerInline}/styles.module.scss.d.ts +2 -2
- package/components/HelpTriggerStandalone/HelpTriggerStandalone.d.ts +28 -0
- package/components/HelpTriggerStandalone/HelpTriggerStandalone.test.d.ts +1 -0
- package/components/HelpTriggerStandalone/index.d.ts +3 -0
- package/components/HelpTriggerStandalone/index.js +5 -0
- package/components/HelpTriggerStandalone/styles.module.scss +70 -0
- package/components/HelpTriggerStandalone/styles.module.scss.d.ts +11 -0
- package/components/HighlightPanel/HighlightPanel.d.ts +0 -9
- package/components/HighlightPanel/index.js +0 -2
- package/components/HighlightPanel/index.js.map +1 -1
- package/components/HighlightPanel/styles.module.scss +23 -165
- package/components/HighlightPanel/styles.module.scss.d.ts +1 -8
- package/components/PopMenu/index.js +3 -4
- package/components/PopMenu/index.js.map +1 -1
- package/components/PopMenu/styles.module.scss +10 -10
- package/components/PopMenu/styles.module.scss.d.ts +0 -1
- package/components/PopOver/PopOver.d.ts +7 -6
- package/components/PopOver/index.js +3 -3
- package/components/PopOver/styles.module.scss +13 -50
- package/components/PopOver/styles.module.scss.d.ts +0 -5
- package/constants.d.ts +5 -2
- package/constants.js +5 -2
- package/constants.js.map +1 -1
- package/floating-ui.react.js +4232 -0
- package/floating-ui.react.js.map +1 -0
- package/hooks/useHover.d.ts +1 -1
- package/hooks/useHover.js +2 -2
- package/hooks/useHover.js.map +1 -1
- package/package.json +2 -1
- package/scss/_font-mixins.scss +22 -0
- package/scss/typography.module.scss +8 -0
- package/scss/typography.module.scss.d.ts +2 -0
- package/scss/typography.stories.tsx +8 -0
- package/HelpBubble.js +0 -78
- package/HelpBubble.js.map +0 -1
- package/HelpTooltipWord.js +0 -28
- package/HelpTooltipWord.js.map +0 -1
- package/HelpTrigger.js +0 -80
- package/HelpTrigger.js.map +0 -1
- package/components/HelpQuestion/HelpQuestion.d.ts +0 -21
- package/components/HelpQuestion/index.d.ts +0 -3
- package/components/HelpQuestion/index.js +0 -35
- package/components/HelpQuestion/index.js.map +0 -1
- package/components/HelpQuestion/styles.module.scss +0 -49
- package/components/HelpTooltip/HelpTooltipWord/HelpTooltipWord.d.ts +0 -19
- package/components/HelpTooltip/HelpTooltipWord/index.d.ts +0 -3
- package/components/HelpTooltip/HelpTooltipWord/index.js +0 -5
- package/components/HelpTooltip/HelpTooltipWord/styles.module.scss +0 -18
- package/components/HelpTrigger/HelpSign.d.ts +0 -4
- package/components/HelpTrigger/HelpTrigger.d.ts +0 -44
- package/components/HelpTrigger/index.d.ts +0 -3
- package/components/HelpTrigger/index.js +0 -5
- package/components/HelpTrigger/styles.module.scss +0 -101
- package/components/HelpTrigger/styles.module.scss.d.ts +0 -15
- package/hooks/useDelayedState.d.ts +0 -8
- package/hooks/useDelayedState.js +0 -23
- package/hooks/useDelayedState.js.map +0 -1
- /package/components/{HelpQuestion/HelpQuestion.test.d.ts → HelpDetails/HelpDetails.test.d.ts} +0 -0
- /package/components/{HelpTrigger/HelpTrigger.test.d.ts → HelpExpanderInline/HelpExpanderInline.test.d.ts} +0 -0
- /package/components/{HelpTooltip/HelpTooltipWord → HelpTriggerStandalone}/index.js.map +0 -0
|
@@ -0,0 +1,4232 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useLayoutEffect, useEffect } from "react";
|
|
3
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
4
|
+
import * as ReactDOM from "react-dom";
|
|
5
|
+
function hasWindow() {
|
|
6
|
+
return typeof window !== "undefined";
|
|
7
|
+
}
|
|
8
|
+
function getNodeName(node) {
|
|
9
|
+
if (isNode(node)) {
|
|
10
|
+
return (node.nodeName || "").toLowerCase();
|
|
11
|
+
}
|
|
12
|
+
return "#document";
|
|
13
|
+
}
|
|
14
|
+
function getWindow(node) {
|
|
15
|
+
var _node$ownerDocument;
|
|
16
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
17
|
+
}
|
|
18
|
+
function getDocumentElement(node) {
|
|
19
|
+
var _ref;
|
|
20
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
21
|
+
}
|
|
22
|
+
function isNode(value) {
|
|
23
|
+
if (!hasWindow()) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
27
|
+
}
|
|
28
|
+
function isElement(value) {
|
|
29
|
+
if (!hasWindow()) {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
33
|
+
}
|
|
34
|
+
function isHTMLElement(value) {
|
|
35
|
+
if (!hasWindow()) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
39
|
+
}
|
|
40
|
+
function isShadowRoot(value) {
|
|
41
|
+
if (!hasWindow() || typeof ShadowRoot === "undefined") {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
45
|
+
}
|
|
46
|
+
function isOverflowElement(element) {
|
|
47
|
+
const {
|
|
48
|
+
overflow,
|
|
49
|
+
overflowX,
|
|
50
|
+
overflowY,
|
|
51
|
+
display
|
|
52
|
+
} = getComputedStyle$1(element);
|
|
53
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
|
|
54
|
+
}
|
|
55
|
+
function isTableElement(element) {
|
|
56
|
+
return ["table", "td", "th"].includes(getNodeName(element));
|
|
57
|
+
}
|
|
58
|
+
function isTopLayer(element) {
|
|
59
|
+
return [":popover-open", ":modal"].some((selector) => {
|
|
60
|
+
try {
|
|
61
|
+
return element.matches(selector);
|
|
62
|
+
} catch (e) {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
function isContainingBlock(elementOrCss) {
|
|
68
|
+
const webkit = isWebKit();
|
|
69
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
70
|
+
return ["transform", "translate", "scale", "rotate", "perspective"].some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
|
|
71
|
+
}
|
|
72
|
+
function getContainingBlock(element) {
|
|
73
|
+
let currentNode = getParentNode(element);
|
|
74
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
75
|
+
if (isContainingBlock(currentNode)) {
|
|
76
|
+
return currentNode;
|
|
77
|
+
} else if (isTopLayer(currentNode)) {
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
currentNode = getParentNode(currentNode);
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
function isWebKit() {
|
|
85
|
+
if (typeof CSS === "undefined" || !CSS.supports) return false;
|
|
86
|
+
return CSS.supports("-webkit-backdrop-filter", "none");
|
|
87
|
+
}
|
|
88
|
+
function isLastTraversableNode(node) {
|
|
89
|
+
return ["html", "body", "#document"].includes(getNodeName(node));
|
|
90
|
+
}
|
|
91
|
+
function getComputedStyle$1(element) {
|
|
92
|
+
return getWindow(element).getComputedStyle(element);
|
|
93
|
+
}
|
|
94
|
+
function getNodeScroll(element) {
|
|
95
|
+
if (isElement(element)) {
|
|
96
|
+
return {
|
|
97
|
+
scrollLeft: element.scrollLeft,
|
|
98
|
+
scrollTop: element.scrollTop
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
return {
|
|
102
|
+
scrollLeft: element.scrollX,
|
|
103
|
+
scrollTop: element.scrollY
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
function getParentNode(node) {
|
|
107
|
+
if (getNodeName(node) === "html") {
|
|
108
|
+
return node;
|
|
109
|
+
}
|
|
110
|
+
const result = (
|
|
111
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
112
|
+
node.assignedSlot || // DOM Element detected.
|
|
113
|
+
node.parentNode || // ShadowRoot detected.
|
|
114
|
+
isShadowRoot(node) && node.host || // Fallback.
|
|
115
|
+
getDocumentElement(node)
|
|
116
|
+
);
|
|
117
|
+
return isShadowRoot(result) ? result.host : result;
|
|
118
|
+
}
|
|
119
|
+
function getNearestOverflowAncestor(node) {
|
|
120
|
+
const parentNode = getParentNode(node);
|
|
121
|
+
if (isLastTraversableNode(parentNode)) {
|
|
122
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
123
|
+
}
|
|
124
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
125
|
+
return parentNode;
|
|
126
|
+
}
|
|
127
|
+
return getNearestOverflowAncestor(parentNode);
|
|
128
|
+
}
|
|
129
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
130
|
+
var _node$ownerDocument2;
|
|
131
|
+
if (list === void 0) {
|
|
132
|
+
list = [];
|
|
133
|
+
}
|
|
134
|
+
if (traverseIframes === void 0) {
|
|
135
|
+
traverseIframes = true;
|
|
136
|
+
}
|
|
137
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
138
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
139
|
+
const win = getWindow(scrollableAncestor);
|
|
140
|
+
if (isBody) {
|
|
141
|
+
const frameElement = getFrameElement(win);
|
|
142
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
143
|
+
}
|
|
144
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
145
|
+
}
|
|
146
|
+
function getFrameElement(win) {
|
|
147
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
148
|
+
}
|
|
149
|
+
const sides = ["top", "right", "bottom", "left"];
|
|
150
|
+
const min = Math.min;
|
|
151
|
+
const max = Math.max;
|
|
152
|
+
const round = Math.round;
|
|
153
|
+
const floor = Math.floor;
|
|
154
|
+
const createCoords = (v) => ({
|
|
155
|
+
x: v,
|
|
156
|
+
y: v
|
|
157
|
+
});
|
|
158
|
+
const oppositeSideMap = {
|
|
159
|
+
left: "right",
|
|
160
|
+
right: "left",
|
|
161
|
+
bottom: "top",
|
|
162
|
+
top: "bottom"
|
|
163
|
+
};
|
|
164
|
+
const oppositeAlignmentMap = {
|
|
165
|
+
start: "end",
|
|
166
|
+
end: "start"
|
|
167
|
+
};
|
|
168
|
+
function clamp(start, value, end) {
|
|
169
|
+
return max(start, min(value, end));
|
|
170
|
+
}
|
|
171
|
+
function evaluate(value, param) {
|
|
172
|
+
return typeof value === "function" ? value(param) : value;
|
|
173
|
+
}
|
|
174
|
+
function getSide(placement) {
|
|
175
|
+
return placement.split("-")[0];
|
|
176
|
+
}
|
|
177
|
+
function getAlignment(placement) {
|
|
178
|
+
return placement.split("-")[1];
|
|
179
|
+
}
|
|
180
|
+
function getOppositeAxis(axis) {
|
|
181
|
+
return axis === "x" ? "y" : "x";
|
|
182
|
+
}
|
|
183
|
+
function getAxisLength(axis) {
|
|
184
|
+
return axis === "y" ? "height" : "width";
|
|
185
|
+
}
|
|
186
|
+
function getSideAxis(placement) {
|
|
187
|
+
return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
|
|
188
|
+
}
|
|
189
|
+
function getAlignmentAxis(placement) {
|
|
190
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
191
|
+
}
|
|
192
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
193
|
+
if (rtl === void 0) {
|
|
194
|
+
rtl = false;
|
|
195
|
+
}
|
|
196
|
+
const alignment = getAlignment(placement);
|
|
197
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
198
|
+
const length = getAxisLength(alignmentAxis);
|
|
199
|
+
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
|
|
200
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
201
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
202
|
+
}
|
|
203
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
204
|
+
}
|
|
205
|
+
function getExpandedPlacements(placement) {
|
|
206
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
207
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
208
|
+
}
|
|
209
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
210
|
+
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
|
|
211
|
+
}
|
|
212
|
+
function getSideList(side, isStart, rtl) {
|
|
213
|
+
const lr = ["left", "right"];
|
|
214
|
+
const rl = ["right", "left"];
|
|
215
|
+
const tb = ["top", "bottom"];
|
|
216
|
+
const bt = ["bottom", "top"];
|
|
217
|
+
switch (side) {
|
|
218
|
+
case "top":
|
|
219
|
+
case "bottom":
|
|
220
|
+
if (rtl) return isStart ? rl : lr;
|
|
221
|
+
return isStart ? lr : rl;
|
|
222
|
+
case "left":
|
|
223
|
+
case "right":
|
|
224
|
+
return isStart ? tb : bt;
|
|
225
|
+
default:
|
|
226
|
+
return [];
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
230
|
+
const alignment = getAlignment(placement);
|
|
231
|
+
let list = getSideList(getSide(placement), direction === "start", rtl);
|
|
232
|
+
if (alignment) {
|
|
233
|
+
list = list.map((side) => side + "-" + alignment);
|
|
234
|
+
if (flipAlignment) {
|
|
235
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return list;
|
|
239
|
+
}
|
|
240
|
+
function getOppositePlacement(placement) {
|
|
241
|
+
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
|
|
242
|
+
}
|
|
243
|
+
function expandPaddingObject(padding) {
|
|
244
|
+
return {
|
|
245
|
+
top: 0,
|
|
246
|
+
right: 0,
|
|
247
|
+
bottom: 0,
|
|
248
|
+
left: 0,
|
|
249
|
+
...padding
|
|
250
|
+
};
|
|
251
|
+
}
|
|
252
|
+
function getPaddingObject(padding) {
|
|
253
|
+
return typeof padding !== "number" ? expandPaddingObject(padding) : {
|
|
254
|
+
top: padding,
|
|
255
|
+
right: padding,
|
|
256
|
+
bottom: padding,
|
|
257
|
+
left: padding
|
|
258
|
+
};
|
|
259
|
+
}
|
|
260
|
+
function rectToClientRect(rect) {
|
|
261
|
+
const {
|
|
262
|
+
x,
|
|
263
|
+
y,
|
|
264
|
+
width,
|
|
265
|
+
height
|
|
266
|
+
} = rect;
|
|
267
|
+
return {
|
|
268
|
+
width,
|
|
269
|
+
height,
|
|
270
|
+
top: y,
|
|
271
|
+
left: x,
|
|
272
|
+
right: x + width,
|
|
273
|
+
bottom: y + height,
|
|
274
|
+
x,
|
|
275
|
+
y
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
/*!
|
|
279
|
+
* tabbable 6.2.0
|
|
280
|
+
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
|
|
281
|
+
*/
|
|
282
|
+
var candidateSelectors = ["input:not([inert])", "select:not([inert])", "textarea:not([inert])", "a[href]:not([inert])", "button:not([inert])", "[tabindex]:not(slot):not([inert])", "audio[controls]:not([inert])", "video[controls]:not([inert])", '[contenteditable]:not([contenteditable="false"]):not([inert])', "details>summary:first-of-type:not([inert])", "details:not([inert])"];
|
|
283
|
+
var candidateSelector = /* @__PURE__ */ candidateSelectors.join(",");
|
|
284
|
+
var NoElement = typeof Element === "undefined";
|
|
285
|
+
var matches = NoElement ? function() {
|
|
286
|
+
} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
|
|
287
|
+
var getRootNode = !NoElement && Element.prototype.getRootNode ? function(element) {
|
|
288
|
+
var _element$getRootNode;
|
|
289
|
+
return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
|
|
290
|
+
} : function(element) {
|
|
291
|
+
return element === null || element === void 0 ? void 0 : element.ownerDocument;
|
|
292
|
+
};
|
|
293
|
+
var isInert = function isInert2(node, lookUp) {
|
|
294
|
+
var _node$getAttribute;
|
|
295
|
+
if (lookUp === void 0) {
|
|
296
|
+
lookUp = true;
|
|
297
|
+
}
|
|
298
|
+
var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, "inert");
|
|
299
|
+
var inert = inertAtt === "" || inertAtt === "true";
|
|
300
|
+
var result = inert || lookUp && node && isInert2(node.parentNode);
|
|
301
|
+
return result;
|
|
302
|
+
};
|
|
303
|
+
var isContentEditable = function isContentEditable2(node) {
|
|
304
|
+
var _node$getAttribute2;
|
|
305
|
+
var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, "contenteditable");
|
|
306
|
+
return attValue === "" || attValue === "true";
|
|
307
|
+
};
|
|
308
|
+
var getCandidates = function getCandidates2(el, includeContainer, filter) {
|
|
309
|
+
if (isInert(el)) {
|
|
310
|
+
return [];
|
|
311
|
+
}
|
|
312
|
+
var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
|
|
313
|
+
if (includeContainer && matches.call(el, candidateSelector)) {
|
|
314
|
+
candidates.unshift(el);
|
|
315
|
+
}
|
|
316
|
+
candidates = candidates.filter(filter);
|
|
317
|
+
return candidates;
|
|
318
|
+
};
|
|
319
|
+
var getCandidatesIteratively = function getCandidatesIteratively2(elements, includeContainer, options) {
|
|
320
|
+
var candidates = [];
|
|
321
|
+
var elementsToCheck = Array.from(elements);
|
|
322
|
+
while (elementsToCheck.length) {
|
|
323
|
+
var element = elementsToCheck.shift();
|
|
324
|
+
if (isInert(element, false)) {
|
|
325
|
+
continue;
|
|
326
|
+
}
|
|
327
|
+
if (element.tagName === "SLOT") {
|
|
328
|
+
var assigned = element.assignedElements();
|
|
329
|
+
var content = assigned.length ? assigned : element.children;
|
|
330
|
+
var nestedCandidates = getCandidatesIteratively2(content, true, options);
|
|
331
|
+
if (options.flatten) {
|
|
332
|
+
candidates.push.apply(candidates, nestedCandidates);
|
|
333
|
+
} else {
|
|
334
|
+
candidates.push({
|
|
335
|
+
scopeParent: element,
|
|
336
|
+
candidates: nestedCandidates
|
|
337
|
+
});
|
|
338
|
+
}
|
|
339
|
+
} else {
|
|
340
|
+
var validCandidate = matches.call(element, candidateSelector);
|
|
341
|
+
if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
|
|
342
|
+
candidates.push(element);
|
|
343
|
+
}
|
|
344
|
+
var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
|
|
345
|
+
typeof options.getShadowRoot === "function" && options.getShadowRoot(element);
|
|
346
|
+
var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
|
|
347
|
+
if (shadowRoot && validShadowRoot) {
|
|
348
|
+
var _nestedCandidates = getCandidatesIteratively2(shadowRoot === true ? element.children : shadowRoot.children, true, options);
|
|
349
|
+
if (options.flatten) {
|
|
350
|
+
candidates.push.apply(candidates, _nestedCandidates);
|
|
351
|
+
} else {
|
|
352
|
+
candidates.push({
|
|
353
|
+
scopeParent: element,
|
|
354
|
+
candidates: _nestedCandidates
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
} else {
|
|
358
|
+
elementsToCheck.unshift.apply(elementsToCheck, element.children);
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
return candidates;
|
|
363
|
+
};
|
|
364
|
+
var hasTabIndex = function hasTabIndex2(node) {
|
|
365
|
+
return !isNaN(parseInt(node.getAttribute("tabindex"), 10));
|
|
366
|
+
};
|
|
367
|
+
var getTabIndex = function getTabIndex2(node) {
|
|
368
|
+
if (!node) {
|
|
369
|
+
throw new Error("No node provided");
|
|
370
|
+
}
|
|
371
|
+
if (node.tabIndex < 0) {
|
|
372
|
+
if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
|
|
373
|
+
return 0;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
return node.tabIndex;
|
|
377
|
+
};
|
|
378
|
+
var getSortOrderTabIndex = function getSortOrderTabIndex2(node, isScope) {
|
|
379
|
+
var tabIndex = getTabIndex(node);
|
|
380
|
+
if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
|
|
381
|
+
return 0;
|
|
382
|
+
}
|
|
383
|
+
return tabIndex;
|
|
384
|
+
};
|
|
385
|
+
var sortOrderedTabbables = function sortOrderedTabbables2(a, b) {
|
|
386
|
+
return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
|
|
387
|
+
};
|
|
388
|
+
var isInput = function isInput2(node) {
|
|
389
|
+
return node.tagName === "INPUT";
|
|
390
|
+
};
|
|
391
|
+
var isHiddenInput = function isHiddenInput2(node) {
|
|
392
|
+
return isInput(node) && node.type === "hidden";
|
|
393
|
+
};
|
|
394
|
+
var isDetailsWithSummary = function isDetailsWithSummary2(node) {
|
|
395
|
+
var r = node.tagName === "DETAILS" && Array.prototype.slice.apply(node.children).some(function(child) {
|
|
396
|
+
return child.tagName === "SUMMARY";
|
|
397
|
+
});
|
|
398
|
+
return r;
|
|
399
|
+
};
|
|
400
|
+
var getCheckedRadio = function getCheckedRadio2(nodes, form) {
|
|
401
|
+
for (var i = 0; i < nodes.length; i++) {
|
|
402
|
+
if (nodes[i].checked && nodes[i].form === form) {
|
|
403
|
+
return nodes[i];
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
};
|
|
407
|
+
var isTabbableRadio = function isTabbableRadio2(node) {
|
|
408
|
+
if (!node.name) {
|
|
409
|
+
return true;
|
|
410
|
+
}
|
|
411
|
+
var radioScope = node.form || getRootNode(node);
|
|
412
|
+
var queryRadios = function queryRadios2(name) {
|
|
413
|
+
return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
|
|
414
|
+
};
|
|
415
|
+
var radioSet;
|
|
416
|
+
if (typeof window !== "undefined" && typeof window.CSS !== "undefined" && typeof window.CSS.escape === "function") {
|
|
417
|
+
radioSet = queryRadios(window.CSS.escape(node.name));
|
|
418
|
+
} else {
|
|
419
|
+
try {
|
|
420
|
+
radioSet = queryRadios(node.name);
|
|
421
|
+
} catch (err) {
|
|
422
|
+
console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", err.message);
|
|
423
|
+
return false;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
var checked = getCheckedRadio(radioSet, node.form);
|
|
427
|
+
return !checked || checked === node;
|
|
428
|
+
};
|
|
429
|
+
var isRadio = function isRadio2(node) {
|
|
430
|
+
return isInput(node) && node.type === "radio";
|
|
431
|
+
};
|
|
432
|
+
var isNonTabbableRadio = function isNonTabbableRadio2(node) {
|
|
433
|
+
return isRadio(node) && !isTabbableRadio(node);
|
|
434
|
+
};
|
|
435
|
+
var isNodeAttached = function isNodeAttached2(node) {
|
|
436
|
+
var _nodeRoot;
|
|
437
|
+
var nodeRoot = node && getRootNode(node);
|
|
438
|
+
var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
|
|
439
|
+
var attached = false;
|
|
440
|
+
if (nodeRoot && nodeRoot !== node) {
|
|
441
|
+
var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
|
|
442
|
+
attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
|
|
443
|
+
while (!attached && nodeRootHost) {
|
|
444
|
+
var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
|
|
445
|
+
nodeRoot = getRootNode(nodeRootHost);
|
|
446
|
+
nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
|
|
447
|
+
attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
return attached;
|
|
451
|
+
};
|
|
452
|
+
var isZeroArea = function isZeroArea2(node) {
|
|
453
|
+
var _node$getBoundingClie = node.getBoundingClientRect(), width = _node$getBoundingClie.width, height = _node$getBoundingClie.height;
|
|
454
|
+
return width === 0 && height === 0;
|
|
455
|
+
};
|
|
456
|
+
var isHidden = function isHidden2(node, _ref) {
|
|
457
|
+
var displayCheck = _ref.displayCheck, getShadowRoot = _ref.getShadowRoot;
|
|
458
|
+
if (getComputedStyle(node).visibility === "hidden") {
|
|
459
|
+
return true;
|
|
460
|
+
}
|
|
461
|
+
var isDirectSummary = matches.call(node, "details>summary:first-of-type");
|
|
462
|
+
var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
|
|
463
|
+
if (matches.call(nodeUnderDetails, "details:not([open]) *")) {
|
|
464
|
+
return true;
|
|
465
|
+
}
|
|
466
|
+
if (!displayCheck || displayCheck === "full" || displayCheck === "legacy-full") {
|
|
467
|
+
if (typeof getShadowRoot === "function") {
|
|
468
|
+
var originalNode = node;
|
|
469
|
+
while (node) {
|
|
470
|
+
var parentElement = node.parentElement;
|
|
471
|
+
var rootNode = getRootNode(node);
|
|
472
|
+
if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true) {
|
|
473
|
+
return isZeroArea(node);
|
|
474
|
+
} else if (node.assignedSlot) {
|
|
475
|
+
node = node.assignedSlot;
|
|
476
|
+
} else if (!parentElement && rootNode !== node.ownerDocument) {
|
|
477
|
+
node = rootNode.host;
|
|
478
|
+
} else {
|
|
479
|
+
node = parentElement;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
node = originalNode;
|
|
483
|
+
}
|
|
484
|
+
if (isNodeAttached(node)) {
|
|
485
|
+
return !node.getClientRects().length;
|
|
486
|
+
}
|
|
487
|
+
if (displayCheck !== "legacy-full") {
|
|
488
|
+
return true;
|
|
489
|
+
}
|
|
490
|
+
} else if (displayCheck === "non-zero-area") {
|
|
491
|
+
return isZeroArea(node);
|
|
492
|
+
}
|
|
493
|
+
return false;
|
|
494
|
+
};
|
|
495
|
+
var isDisabledFromFieldset = function isDisabledFromFieldset2(node) {
|
|
496
|
+
if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
|
|
497
|
+
var parentNode = node.parentElement;
|
|
498
|
+
while (parentNode) {
|
|
499
|
+
if (parentNode.tagName === "FIELDSET" && parentNode.disabled) {
|
|
500
|
+
for (var i = 0; i < parentNode.children.length; i++) {
|
|
501
|
+
var child = parentNode.children.item(i);
|
|
502
|
+
if (child.tagName === "LEGEND") {
|
|
503
|
+
return matches.call(parentNode, "fieldset[disabled] *") ? true : !child.contains(node);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
return true;
|
|
507
|
+
}
|
|
508
|
+
parentNode = parentNode.parentElement;
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
return false;
|
|
512
|
+
};
|
|
513
|
+
var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable2(options, node) {
|
|
514
|
+
if (node.disabled || // we must do an inert look up to filter out any elements inside an inert ancestor
|
|
515
|
+
// because we're limited in the type of selectors we can use in JSDom (see related
|
|
516
|
+
// note related to `candidateSelectors`)
|
|
517
|
+
isInert(node) || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
|
|
518
|
+
isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
|
|
519
|
+
return false;
|
|
520
|
+
}
|
|
521
|
+
return true;
|
|
522
|
+
};
|
|
523
|
+
var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable2(options, node) {
|
|
524
|
+
if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
|
|
525
|
+
return false;
|
|
526
|
+
}
|
|
527
|
+
return true;
|
|
528
|
+
};
|
|
529
|
+
var isValidShadowRootTabbable = function isValidShadowRootTabbable2(shadowHostNode) {
|
|
530
|
+
var tabIndex = parseInt(shadowHostNode.getAttribute("tabindex"), 10);
|
|
531
|
+
if (isNaN(tabIndex) || tabIndex >= 0) {
|
|
532
|
+
return true;
|
|
533
|
+
}
|
|
534
|
+
return false;
|
|
535
|
+
};
|
|
536
|
+
var sortByOrder = function sortByOrder2(candidates) {
|
|
537
|
+
var regularTabbables = [];
|
|
538
|
+
var orderedTabbables = [];
|
|
539
|
+
candidates.forEach(function(item, i) {
|
|
540
|
+
var isScope = !!item.scopeParent;
|
|
541
|
+
var element = isScope ? item.scopeParent : item;
|
|
542
|
+
var candidateTabindex = getSortOrderTabIndex(element, isScope);
|
|
543
|
+
var elements = isScope ? sortByOrder2(item.candidates) : element;
|
|
544
|
+
if (candidateTabindex === 0) {
|
|
545
|
+
isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
|
|
546
|
+
} else {
|
|
547
|
+
orderedTabbables.push({
|
|
548
|
+
documentOrder: i,
|
|
549
|
+
tabIndex: candidateTabindex,
|
|
550
|
+
item,
|
|
551
|
+
isScope,
|
|
552
|
+
content: elements
|
|
553
|
+
});
|
|
554
|
+
}
|
|
555
|
+
});
|
|
556
|
+
return orderedTabbables.sort(sortOrderedTabbables).reduce(function(acc, sortable) {
|
|
557
|
+
sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
|
|
558
|
+
return acc;
|
|
559
|
+
}, []).concat(regularTabbables);
|
|
560
|
+
};
|
|
561
|
+
var tabbable = function tabbable2(container, options) {
|
|
562
|
+
options = options || {};
|
|
563
|
+
var candidates;
|
|
564
|
+
if (options.getShadowRoot) {
|
|
565
|
+
candidates = getCandidatesIteratively([container], options.includeContainer, {
|
|
566
|
+
filter: isNodeMatchingSelectorTabbable.bind(null, options),
|
|
567
|
+
flatten: false,
|
|
568
|
+
getShadowRoot: options.getShadowRoot,
|
|
569
|
+
shadowRootFilter: isValidShadowRootTabbable
|
|
570
|
+
});
|
|
571
|
+
} else {
|
|
572
|
+
candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
|
|
573
|
+
}
|
|
574
|
+
return sortByOrder(candidates);
|
|
575
|
+
};
|
|
576
|
+
var focusable = function focusable2(container, options) {
|
|
577
|
+
options = options || {};
|
|
578
|
+
var candidates;
|
|
579
|
+
if (options.getShadowRoot) {
|
|
580
|
+
candidates = getCandidatesIteratively([container], options.includeContainer, {
|
|
581
|
+
filter: isNodeMatchingSelectorFocusable.bind(null, options),
|
|
582
|
+
flatten: true,
|
|
583
|
+
getShadowRoot: options.getShadowRoot
|
|
584
|
+
});
|
|
585
|
+
} else {
|
|
586
|
+
candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
|
|
587
|
+
}
|
|
588
|
+
return candidates;
|
|
589
|
+
};
|
|
590
|
+
var isTabbable = function isTabbable2(node, options) {
|
|
591
|
+
options = options || {};
|
|
592
|
+
if (!node) {
|
|
593
|
+
throw new Error("No node provided");
|
|
594
|
+
}
|
|
595
|
+
if (matches.call(node, candidateSelector) === false) {
|
|
596
|
+
return false;
|
|
597
|
+
}
|
|
598
|
+
return isNodeMatchingSelectorTabbable(options, node);
|
|
599
|
+
};
|
|
600
|
+
function getPlatform() {
|
|
601
|
+
const uaData = navigator.userAgentData;
|
|
602
|
+
if (uaData != null && uaData.platform) {
|
|
603
|
+
return uaData.platform;
|
|
604
|
+
}
|
|
605
|
+
return navigator.platform;
|
|
606
|
+
}
|
|
607
|
+
function getUserAgent() {
|
|
608
|
+
const uaData = navigator.userAgentData;
|
|
609
|
+
if (uaData && Array.isArray(uaData.brands)) {
|
|
610
|
+
return uaData.brands.map((_ref) => {
|
|
611
|
+
let {
|
|
612
|
+
brand,
|
|
613
|
+
version
|
|
614
|
+
} = _ref;
|
|
615
|
+
return brand + "/" + version;
|
|
616
|
+
}).join(" ");
|
|
617
|
+
}
|
|
618
|
+
return navigator.userAgent;
|
|
619
|
+
}
|
|
620
|
+
function isSafari() {
|
|
621
|
+
return /apple/i.test(navigator.vendor);
|
|
622
|
+
}
|
|
623
|
+
function isAndroid() {
|
|
624
|
+
const re = /android/i;
|
|
625
|
+
return re.test(getPlatform()) || re.test(getUserAgent());
|
|
626
|
+
}
|
|
627
|
+
function isMac() {
|
|
628
|
+
return getPlatform().toLowerCase().startsWith("mac") && !navigator.maxTouchPoints;
|
|
629
|
+
}
|
|
630
|
+
function isJSDOM() {
|
|
631
|
+
return getUserAgent().includes("jsdom/");
|
|
632
|
+
}
|
|
633
|
+
const FOCUSABLE_ATTRIBUTE$1 = "data-floating-ui-focusable";
|
|
634
|
+
const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
|
|
635
|
+
function activeElement(doc) {
|
|
636
|
+
let activeElement2 = doc.activeElement;
|
|
637
|
+
while (((_activeElement = activeElement2) == null || (_activeElement = _activeElement.shadowRoot) == null ? void 0 : _activeElement.activeElement) != null) {
|
|
638
|
+
var _activeElement;
|
|
639
|
+
activeElement2 = activeElement2.shadowRoot.activeElement;
|
|
640
|
+
}
|
|
641
|
+
return activeElement2;
|
|
642
|
+
}
|
|
643
|
+
function contains(parent, child) {
|
|
644
|
+
if (!parent || !child) {
|
|
645
|
+
return false;
|
|
646
|
+
}
|
|
647
|
+
const rootNode = child.getRootNode == null ? void 0 : child.getRootNode();
|
|
648
|
+
if (parent.contains(child)) {
|
|
649
|
+
return true;
|
|
650
|
+
}
|
|
651
|
+
if (rootNode && isShadowRoot(rootNode)) {
|
|
652
|
+
let next = child;
|
|
653
|
+
while (next) {
|
|
654
|
+
if (parent === next) {
|
|
655
|
+
return true;
|
|
656
|
+
}
|
|
657
|
+
next = next.parentNode || next.host;
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
return false;
|
|
661
|
+
}
|
|
662
|
+
function getTarget(event) {
|
|
663
|
+
if ("composedPath" in event) {
|
|
664
|
+
return event.composedPath()[0];
|
|
665
|
+
}
|
|
666
|
+
return event.target;
|
|
667
|
+
}
|
|
668
|
+
function isEventTargetWithin(event, node) {
|
|
669
|
+
if (node == null) {
|
|
670
|
+
return false;
|
|
671
|
+
}
|
|
672
|
+
if ("composedPath" in event) {
|
|
673
|
+
return event.composedPath().includes(node);
|
|
674
|
+
}
|
|
675
|
+
const e = event;
|
|
676
|
+
return e.target != null && node.contains(e.target);
|
|
677
|
+
}
|
|
678
|
+
function isRootElement(element) {
|
|
679
|
+
return element.matches("html,body");
|
|
680
|
+
}
|
|
681
|
+
function getDocument$1(node) {
|
|
682
|
+
return (node == null ? void 0 : node.ownerDocument) || document;
|
|
683
|
+
}
|
|
684
|
+
function isTypeableElement(element) {
|
|
685
|
+
return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
|
|
686
|
+
}
|
|
687
|
+
function isTypeableCombobox(element) {
|
|
688
|
+
if (!element) return false;
|
|
689
|
+
return element.getAttribute("role") === "combobox" && isTypeableElement(element);
|
|
690
|
+
}
|
|
691
|
+
function matchesFocusVisible(element) {
|
|
692
|
+
if (!element || isJSDOM()) return true;
|
|
693
|
+
try {
|
|
694
|
+
return element.matches(":focus-visible");
|
|
695
|
+
} catch (_e) {
|
|
696
|
+
return true;
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
function getFloatingFocusElement(floatingElement) {
|
|
700
|
+
if (!floatingElement) {
|
|
701
|
+
return null;
|
|
702
|
+
}
|
|
703
|
+
return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE$1) ? floatingElement : floatingElement.querySelector("[" + FOCUSABLE_ATTRIBUTE$1 + "]") || floatingElement;
|
|
704
|
+
}
|
|
705
|
+
function getNodeChildren(nodes, id, onlyOpenChildren) {
|
|
706
|
+
if (onlyOpenChildren === void 0) {
|
|
707
|
+
onlyOpenChildren = true;
|
|
708
|
+
}
|
|
709
|
+
let allChildren = nodes.filter((node) => {
|
|
710
|
+
var _node$context;
|
|
711
|
+
return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
|
|
712
|
+
});
|
|
713
|
+
let currentChildren = allChildren;
|
|
714
|
+
while (currentChildren.length) {
|
|
715
|
+
currentChildren = onlyOpenChildren ? nodes.filter((node) => {
|
|
716
|
+
var _currentChildren;
|
|
717
|
+
return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some((n) => {
|
|
718
|
+
var _node$context2;
|
|
719
|
+
return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
|
|
720
|
+
});
|
|
721
|
+
}) : nodes;
|
|
722
|
+
allChildren = allChildren.concat(currentChildren);
|
|
723
|
+
}
|
|
724
|
+
return allChildren;
|
|
725
|
+
}
|
|
726
|
+
function getNodeAncestors(nodes, id) {
|
|
727
|
+
var _nodes$find;
|
|
728
|
+
let allAncestors = [];
|
|
729
|
+
let currentParentId = (_nodes$find = nodes.find((node) => node.id === id)) == null ? void 0 : _nodes$find.parentId;
|
|
730
|
+
while (currentParentId) {
|
|
731
|
+
const currentNode = nodes.find((node) => node.id === currentParentId);
|
|
732
|
+
currentParentId = currentNode == null ? void 0 : currentNode.parentId;
|
|
733
|
+
if (currentNode) {
|
|
734
|
+
allAncestors = allAncestors.concat(currentNode);
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
return allAncestors;
|
|
738
|
+
}
|
|
739
|
+
function stopEvent(event) {
|
|
740
|
+
event.preventDefault();
|
|
741
|
+
event.stopPropagation();
|
|
742
|
+
}
|
|
743
|
+
function isReactEvent(event) {
|
|
744
|
+
return "nativeEvent" in event;
|
|
745
|
+
}
|
|
746
|
+
function isVirtualClick(event) {
|
|
747
|
+
if (event.mozInputSource === 0 && event.isTrusted) {
|
|
748
|
+
return true;
|
|
749
|
+
}
|
|
750
|
+
if (isAndroid() && event.pointerType) {
|
|
751
|
+
return event.type === "click" && event.buttons === 1;
|
|
752
|
+
}
|
|
753
|
+
return event.detail === 0 && !event.pointerType;
|
|
754
|
+
}
|
|
755
|
+
function isVirtualPointerEvent(event) {
|
|
756
|
+
if (isJSDOM()) return false;
|
|
757
|
+
return !isAndroid() && event.width === 0 && event.height === 0 || isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse" || // iOS VoiceOver returns 0.333• for width/height.
|
|
758
|
+
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "touch";
|
|
759
|
+
}
|
|
760
|
+
function isMouseLikePointerType(pointerType, strict) {
|
|
761
|
+
const values = ["mouse", "pen"];
|
|
762
|
+
if (!strict) {
|
|
763
|
+
values.push("", void 0);
|
|
764
|
+
}
|
|
765
|
+
return values.includes(pointerType);
|
|
766
|
+
}
|
|
767
|
+
var index$1 = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
768
|
+
const SafeReact$1 = {
|
|
769
|
+
...React
|
|
770
|
+
};
|
|
771
|
+
function useLatestRef$1(value) {
|
|
772
|
+
const ref = React.useRef(value);
|
|
773
|
+
index$1(() => {
|
|
774
|
+
ref.current = value;
|
|
775
|
+
});
|
|
776
|
+
return ref;
|
|
777
|
+
}
|
|
778
|
+
const useInsertionEffect = SafeReact$1.useInsertionEffect;
|
|
779
|
+
const useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
|
|
780
|
+
function useEffectEvent(callback) {
|
|
781
|
+
const ref = React.useRef(() => {
|
|
782
|
+
if (process.env.NODE_ENV !== "production") {
|
|
783
|
+
throw new Error("Cannot call an event handler while rendering.");
|
|
784
|
+
}
|
|
785
|
+
});
|
|
786
|
+
useSafeInsertionEffect(() => {
|
|
787
|
+
ref.current = callback;
|
|
788
|
+
});
|
|
789
|
+
return React.useCallback(function() {
|
|
790
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
791
|
+
args[_key] = arguments[_key];
|
|
792
|
+
}
|
|
793
|
+
return ref.current == null ? void 0 : ref.current(...args);
|
|
794
|
+
}, []);
|
|
795
|
+
}
|
|
796
|
+
const getTabbableOptions = () => ({
|
|
797
|
+
getShadowRoot: true,
|
|
798
|
+
displayCheck: (
|
|
799
|
+
// JSDOM does not support the `tabbable` library. To solve this we can
|
|
800
|
+
// check if `ResizeObserver` is a real function (not polyfilled), which
|
|
801
|
+
// determines if the current environment is JSDOM-like.
|
|
802
|
+
typeof ResizeObserver === "function" && ResizeObserver.toString().includes("[native code]") ? "full" : "none"
|
|
803
|
+
)
|
|
804
|
+
});
|
|
805
|
+
function getTabbableIn(container, dir) {
|
|
806
|
+
const list = tabbable(container, getTabbableOptions());
|
|
807
|
+
const len = list.length;
|
|
808
|
+
if (len === 0) return;
|
|
809
|
+
const active = activeElement(getDocument$1(container));
|
|
810
|
+
const index2 = list.indexOf(active);
|
|
811
|
+
const nextIndex = index2 === -1 ? dir === 1 ? 0 : len - 1 : index2 + dir;
|
|
812
|
+
return list[nextIndex];
|
|
813
|
+
}
|
|
814
|
+
function getNextTabbable(referenceElement) {
|
|
815
|
+
return getTabbableIn(getDocument$1(referenceElement).body, 1) || referenceElement;
|
|
816
|
+
}
|
|
817
|
+
function getPreviousTabbable(referenceElement) {
|
|
818
|
+
return getTabbableIn(getDocument$1(referenceElement).body, -1) || referenceElement;
|
|
819
|
+
}
|
|
820
|
+
function isOutsideEvent(event, container) {
|
|
821
|
+
const containerElement = container || event.currentTarget;
|
|
822
|
+
const relatedTarget = event.relatedTarget;
|
|
823
|
+
return !relatedTarget || !contains(containerElement, relatedTarget);
|
|
824
|
+
}
|
|
825
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
826
|
+
let {
|
|
827
|
+
reference,
|
|
828
|
+
floating
|
|
829
|
+
} = _ref;
|
|
830
|
+
const sideAxis = getSideAxis(placement);
|
|
831
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
832
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
833
|
+
const side = getSide(placement);
|
|
834
|
+
const isVertical = sideAxis === "y";
|
|
835
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
836
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
837
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
838
|
+
let coords;
|
|
839
|
+
switch (side) {
|
|
840
|
+
case "top":
|
|
841
|
+
coords = {
|
|
842
|
+
x: commonX,
|
|
843
|
+
y: reference.y - floating.height
|
|
844
|
+
};
|
|
845
|
+
break;
|
|
846
|
+
case "bottom":
|
|
847
|
+
coords = {
|
|
848
|
+
x: commonX,
|
|
849
|
+
y: reference.y + reference.height
|
|
850
|
+
};
|
|
851
|
+
break;
|
|
852
|
+
case "right":
|
|
853
|
+
coords = {
|
|
854
|
+
x: reference.x + reference.width,
|
|
855
|
+
y: commonY
|
|
856
|
+
};
|
|
857
|
+
break;
|
|
858
|
+
case "left":
|
|
859
|
+
coords = {
|
|
860
|
+
x: reference.x - floating.width,
|
|
861
|
+
y: commonY
|
|
862
|
+
};
|
|
863
|
+
break;
|
|
864
|
+
default:
|
|
865
|
+
coords = {
|
|
866
|
+
x: reference.x,
|
|
867
|
+
y: reference.y
|
|
868
|
+
};
|
|
869
|
+
}
|
|
870
|
+
switch (getAlignment(placement)) {
|
|
871
|
+
case "start":
|
|
872
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
873
|
+
break;
|
|
874
|
+
case "end":
|
|
875
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
876
|
+
break;
|
|
877
|
+
}
|
|
878
|
+
return coords;
|
|
879
|
+
}
|
|
880
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
881
|
+
const {
|
|
882
|
+
placement = "bottom",
|
|
883
|
+
strategy = "absolute",
|
|
884
|
+
middleware = [],
|
|
885
|
+
platform: platform2
|
|
886
|
+
} = config;
|
|
887
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
888
|
+
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
|
|
889
|
+
let rects = await platform2.getElementRects({
|
|
890
|
+
reference,
|
|
891
|
+
floating,
|
|
892
|
+
strategy
|
|
893
|
+
});
|
|
894
|
+
let {
|
|
895
|
+
x,
|
|
896
|
+
y
|
|
897
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
898
|
+
let statefulPlacement = placement;
|
|
899
|
+
let middlewareData = {};
|
|
900
|
+
let resetCount = 0;
|
|
901
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
902
|
+
const {
|
|
903
|
+
name,
|
|
904
|
+
fn
|
|
905
|
+
} = validMiddleware[i];
|
|
906
|
+
const {
|
|
907
|
+
x: nextX,
|
|
908
|
+
y: nextY,
|
|
909
|
+
data,
|
|
910
|
+
reset
|
|
911
|
+
} = await fn({
|
|
912
|
+
x,
|
|
913
|
+
y,
|
|
914
|
+
initialPlacement: placement,
|
|
915
|
+
placement: statefulPlacement,
|
|
916
|
+
strategy,
|
|
917
|
+
middlewareData,
|
|
918
|
+
rects,
|
|
919
|
+
platform: platform2,
|
|
920
|
+
elements: {
|
|
921
|
+
reference,
|
|
922
|
+
floating
|
|
923
|
+
}
|
|
924
|
+
});
|
|
925
|
+
x = nextX != null ? nextX : x;
|
|
926
|
+
y = nextY != null ? nextY : y;
|
|
927
|
+
middlewareData = {
|
|
928
|
+
...middlewareData,
|
|
929
|
+
[name]: {
|
|
930
|
+
...middlewareData[name],
|
|
931
|
+
...data
|
|
932
|
+
}
|
|
933
|
+
};
|
|
934
|
+
if (reset && resetCount <= 50) {
|
|
935
|
+
resetCount++;
|
|
936
|
+
if (typeof reset === "object") {
|
|
937
|
+
if (reset.placement) {
|
|
938
|
+
statefulPlacement = reset.placement;
|
|
939
|
+
}
|
|
940
|
+
if (reset.rects) {
|
|
941
|
+
rects = reset.rects === true ? await platform2.getElementRects({
|
|
942
|
+
reference,
|
|
943
|
+
floating,
|
|
944
|
+
strategy
|
|
945
|
+
}) : reset.rects;
|
|
946
|
+
}
|
|
947
|
+
({
|
|
948
|
+
x,
|
|
949
|
+
y
|
|
950
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
951
|
+
}
|
|
952
|
+
i = -1;
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
return {
|
|
956
|
+
x,
|
|
957
|
+
y,
|
|
958
|
+
placement: statefulPlacement,
|
|
959
|
+
strategy,
|
|
960
|
+
middlewareData
|
|
961
|
+
};
|
|
962
|
+
};
|
|
963
|
+
async function detectOverflow(state, options) {
|
|
964
|
+
var _await$platform$isEle;
|
|
965
|
+
if (options === void 0) {
|
|
966
|
+
options = {};
|
|
967
|
+
}
|
|
968
|
+
const {
|
|
969
|
+
x,
|
|
970
|
+
y,
|
|
971
|
+
platform: platform2,
|
|
972
|
+
rects,
|
|
973
|
+
elements,
|
|
974
|
+
strategy
|
|
975
|
+
} = state;
|
|
976
|
+
const {
|
|
977
|
+
boundary = "clippingAncestors",
|
|
978
|
+
rootBoundary = "viewport",
|
|
979
|
+
elementContext = "floating",
|
|
980
|
+
altBoundary = false,
|
|
981
|
+
padding = 0
|
|
982
|
+
} = evaluate(options, state);
|
|
983
|
+
const paddingObject = getPaddingObject(padding);
|
|
984
|
+
const altContext = elementContext === "floating" ? "reference" : "floating";
|
|
985
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
986
|
+
const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
|
|
987
|
+
element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
|
|
988
|
+
boundary,
|
|
989
|
+
rootBoundary,
|
|
990
|
+
strategy
|
|
991
|
+
}));
|
|
992
|
+
const rect = elementContext === "floating" ? {
|
|
993
|
+
x,
|
|
994
|
+
y,
|
|
995
|
+
width: rects.floating.width,
|
|
996
|
+
height: rects.floating.height
|
|
997
|
+
} : rects.reference;
|
|
998
|
+
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
|
|
999
|
+
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
|
|
1000
|
+
x: 1,
|
|
1001
|
+
y: 1
|
|
1002
|
+
} : {
|
|
1003
|
+
x: 1,
|
|
1004
|
+
y: 1
|
|
1005
|
+
};
|
|
1006
|
+
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1007
|
+
elements,
|
|
1008
|
+
rect,
|
|
1009
|
+
offsetParent,
|
|
1010
|
+
strategy
|
|
1011
|
+
}) : rect);
|
|
1012
|
+
return {
|
|
1013
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1014
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1015
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1016
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1017
|
+
};
|
|
1018
|
+
}
|
|
1019
|
+
const arrow$3 = (options) => ({
|
|
1020
|
+
name: "arrow",
|
|
1021
|
+
options,
|
|
1022
|
+
async fn(state) {
|
|
1023
|
+
const {
|
|
1024
|
+
x,
|
|
1025
|
+
y,
|
|
1026
|
+
placement,
|
|
1027
|
+
rects,
|
|
1028
|
+
platform: platform2,
|
|
1029
|
+
elements,
|
|
1030
|
+
middlewareData
|
|
1031
|
+
} = state;
|
|
1032
|
+
const {
|
|
1033
|
+
element,
|
|
1034
|
+
padding = 0
|
|
1035
|
+
} = evaluate(options, state) || {};
|
|
1036
|
+
if (element == null) {
|
|
1037
|
+
return {};
|
|
1038
|
+
}
|
|
1039
|
+
const paddingObject = getPaddingObject(padding);
|
|
1040
|
+
const coords = {
|
|
1041
|
+
x,
|
|
1042
|
+
y
|
|
1043
|
+
};
|
|
1044
|
+
const axis = getAlignmentAxis(placement);
|
|
1045
|
+
const length = getAxisLength(axis);
|
|
1046
|
+
const arrowDimensions = await platform2.getDimensions(element);
|
|
1047
|
+
const isYAxis = axis === "y";
|
|
1048
|
+
const minProp = isYAxis ? "top" : "left";
|
|
1049
|
+
const maxProp = isYAxis ? "bottom" : "right";
|
|
1050
|
+
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
|
|
1051
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
1052
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
1053
|
+
const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
|
|
1054
|
+
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
1055
|
+
if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
|
|
1056
|
+
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
1057
|
+
}
|
|
1058
|
+
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
1059
|
+
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
1060
|
+
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
1061
|
+
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
1062
|
+
const min$1 = minPadding;
|
|
1063
|
+
const max2 = clientSize - arrowDimensions[length] - maxPadding;
|
|
1064
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
1065
|
+
const offset2 = clamp(min$1, center, max2);
|
|
1066
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
1067
|
+
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
|
|
1068
|
+
return {
|
|
1069
|
+
[axis]: coords[axis] + alignmentOffset,
|
|
1070
|
+
data: {
|
|
1071
|
+
[axis]: offset2,
|
|
1072
|
+
centerOffset: center - offset2 - alignmentOffset,
|
|
1073
|
+
...shouldAddOffset && {
|
|
1074
|
+
alignmentOffset
|
|
1075
|
+
}
|
|
1076
|
+
},
|
|
1077
|
+
reset: shouldAddOffset
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1080
|
+
});
|
|
1081
|
+
const flip$2 = function(options) {
|
|
1082
|
+
if (options === void 0) {
|
|
1083
|
+
options = {};
|
|
1084
|
+
}
|
|
1085
|
+
return {
|
|
1086
|
+
name: "flip",
|
|
1087
|
+
options,
|
|
1088
|
+
async fn(state) {
|
|
1089
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
1090
|
+
const {
|
|
1091
|
+
placement,
|
|
1092
|
+
middlewareData,
|
|
1093
|
+
rects,
|
|
1094
|
+
initialPlacement,
|
|
1095
|
+
platform: platform2,
|
|
1096
|
+
elements
|
|
1097
|
+
} = state;
|
|
1098
|
+
const {
|
|
1099
|
+
mainAxis: checkMainAxis = true,
|
|
1100
|
+
crossAxis: checkCrossAxis = true,
|
|
1101
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
1102
|
+
fallbackStrategy = "bestFit",
|
|
1103
|
+
fallbackAxisSideDirection = "none",
|
|
1104
|
+
flipAlignment = true,
|
|
1105
|
+
...detectOverflowOptions
|
|
1106
|
+
} = evaluate(options, state);
|
|
1107
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1108
|
+
return {};
|
|
1109
|
+
}
|
|
1110
|
+
const side = getSide(placement);
|
|
1111
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
1112
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
1113
|
+
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
1114
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
1115
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
|
|
1116
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
1117
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1118
|
+
}
|
|
1119
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1120
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1121
|
+
const overflows = [];
|
|
1122
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1123
|
+
if (checkMainAxis) {
|
|
1124
|
+
overflows.push(overflow[side]);
|
|
1125
|
+
}
|
|
1126
|
+
if (checkCrossAxis) {
|
|
1127
|
+
const sides2 = getAlignmentSides(placement, rects, rtl);
|
|
1128
|
+
overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
|
|
1129
|
+
}
|
|
1130
|
+
overflowsData = [...overflowsData, {
|
|
1131
|
+
placement,
|
|
1132
|
+
overflows
|
|
1133
|
+
}];
|
|
1134
|
+
if (!overflows.every((side2) => side2 <= 0)) {
|
|
1135
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
1136
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1137
|
+
const nextPlacement = placements[nextIndex];
|
|
1138
|
+
if (nextPlacement) {
|
|
1139
|
+
return {
|
|
1140
|
+
data: {
|
|
1141
|
+
index: nextIndex,
|
|
1142
|
+
overflows: overflowsData
|
|
1143
|
+
},
|
|
1144
|
+
reset: {
|
|
1145
|
+
placement: nextPlacement
|
|
1146
|
+
}
|
|
1147
|
+
};
|
|
1148
|
+
}
|
|
1149
|
+
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;
|
|
1150
|
+
if (!resetPlacement) {
|
|
1151
|
+
switch (fallbackStrategy) {
|
|
1152
|
+
case "bestFit": {
|
|
1153
|
+
var _overflowsData$filter2;
|
|
1154
|
+
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
|
|
1155
|
+
if (hasFallbackAxisSideDirection) {
|
|
1156
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
1157
|
+
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
|
|
1158
|
+
// reading directions favoring greater width.
|
|
1159
|
+
currentSideAxis === "y";
|
|
1160
|
+
}
|
|
1161
|
+
return true;
|
|
1162
|
+
}).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
1163
|
+
if (placement2) {
|
|
1164
|
+
resetPlacement = placement2;
|
|
1165
|
+
}
|
|
1166
|
+
break;
|
|
1167
|
+
}
|
|
1168
|
+
case "initialPlacement":
|
|
1169
|
+
resetPlacement = initialPlacement;
|
|
1170
|
+
break;
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
if (placement !== resetPlacement) {
|
|
1174
|
+
return {
|
|
1175
|
+
reset: {
|
|
1176
|
+
placement: resetPlacement
|
|
1177
|
+
}
|
|
1178
|
+
};
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
return {};
|
|
1182
|
+
}
|
|
1183
|
+
};
|
|
1184
|
+
};
|
|
1185
|
+
function getSideOffsets(overflow, rect) {
|
|
1186
|
+
return {
|
|
1187
|
+
top: overflow.top - rect.height,
|
|
1188
|
+
right: overflow.right - rect.width,
|
|
1189
|
+
bottom: overflow.bottom - rect.height,
|
|
1190
|
+
left: overflow.left - rect.width
|
|
1191
|
+
};
|
|
1192
|
+
}
|
|
1193
|
+
function isAnySideFullyClipped(overflow) {
|
|
1194
|
+
return sides.some((side) => overflow[side] >= 0);
|
|
1195
|
+
}
|
|
1196
|
+
const hide$2 = function(options) {
|
|
1197
|
+
if (options === void 0) {
|
|
1198
|
+
options = {};
|
|
1199
|
+
}
|
|
1200
|
+
return {
|
|
1201
|
+
name: "hide",
|
|
1202
|
+
options,
|
|
1203
|
+
async fn(state) {
|
|
1204
|
+
const {
|
|
1205
|
+
rects
|
|
1206
|
+
} = state;
|
|
1207
|
+
const {
|
|
1208
|
+
strategy = "referenceHidden",
|
|
1209
|
+
...detectOverflowOptions
|
|
1210
|
+
} = evaluate(options, state);
|
|
1211
|
+
switch (strategy) {
|
|
1212
|
+
case "referenceHidden": {
|
|
1213
|
+
const overflow = await detectOverflow(state, {
|
|
1214
|
+
...detectOverflowOptions,
|
|
1215
|
+
elementContext: "reference"
|
|
1216
|
+
});
|
|
1217
|
+
const offsets = getSideOffsets(overflow, rects.reference);
|
|
1218
|
+
return {
|
|
1219
|
+
data: {
|
|
1220
|
+
referenceHiddenOffsets: offsets,
|
|
1221
|
+
referenceHidden: isAnySideFullyClipped(offsets)
|
|
1222
|
+
}
|
|
1223
|
+
};
|
|
1224
|
+
}
|
|
1225
|
+
case "escaped": {
|
|
1226
|
+
const overflow = await detectOverflow(state, {
|
|
1227
|
+
...detectOverflowOptions,
|
|
1228
|
+
altBoundary: true
|
|
1229
|
+
});
|
|
1230
|
+
const offsets = getSideOffsets(overflow, rects.floating);
|
|
1231
|
+
return {
|
|
1232
|
+
data: {
|
|
1233
|
+
escapedOffsets: offsets,
|
|
1234
|
+
escaped: isAnySideFullyClipped(offsets)
|
|
1235
|
+
}
|
|
1236
|
+
};
|
|
1237
|
+
}
|
|
1238
|
+
default: {
|
|
1239
|
+
return {};
|
|
1240
|
+
}
|
|
1241
|
+
}
|
|
1242
|
+
}
|
|
1243
|
+
};
|
|
1244
|
+
};
|
|
1245
|
+
async function convertValueToCoords(state, options) {
|
|
1246
|
+
const {
|
|
1247
|
+
placement,
|
|
1248
|
+
platform: platform2,
|
|
1249
|
+
elements
|
|
1250
|
+
} = state;
|
|
1251
|
+
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
1252
|
+
const side = getSide(placement);
|
|
1253
|
+
const alignment = getAlignment(placement);
|
|
1254
|
+
const isVertical = getSideAxis(placement) === "y";
|
|
1255
|
+
const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
|
|
1256
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
1257
|
+
const rawValue = evaluate(options, state);
|
|
1258
|
+
let {
|
|
1259
|
+
mainAxis,
|
|
1260
|
+
crossAxis,
|
|
1261
|
+
alignmentAxis
|
|
1262
|
+
} = typeof rawValue === "number" ? {
|
|
1263
|
+
mainAxis: rawValue,
|
|
1264
|
+
crossAxis: 0,
|
|
1265
|
+
alignmentAxis: null
|
|
1266
|
+
} : {
|
|
1267
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
1268
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
1269
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
1270
|
+
};
|
|
1271
|
+
if (alignment && typeof alignmentAxis === "number") {
|
|
1272
|
+
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
|
|
1273
|
+
}
|
|
1274
|
+
return isVertical ? {
|
|
1275
|
+
x: crossAxis * crossAxisMulti,
|
|
1276
|
+
y: mainAxis * mainAxisMulti
|
|
1277
|
+
} : {
|
|
1278
|
+
x: mainAxis * mainAxisMulti,
|
|
1279
|
+
y: crossAxis * crossAxisMulti
|
|
1280
|
+
};
|
|
1281
|
+
}
|
|
1282
|
+
const offset$2 = function(options) {
|
|
1283
|
+
if (options === void 0) {
|
|
1284
|
+
options = 0;
|
|
1285
|
+
}
|
|
1286
|
+
return {
|
|
1287
|
+
name: "offset",
|
|
1288
|
+
options,
|
|
1289
|
+
async fn(state) {
|
|
1290
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
1291
|
+
const {
|
|
1292
|
+
x,
|
|
1293
|
+
y,
|
|
1294
|
+
placement,
|
|
1295
|
+
middlewareData
|
|
1296
|
+
} = state;
|
|
1297
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
1298
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1299
|
+
return {};
|
|
1300
|
+
}
|
|
1301
|
+
return {
|
|
1302
|
+
x: x + diffCoords.x,
|
|
1303
|
+
y: y + diffCoords.y,
|
|
1304
|
+
data: {
|
|
1305
|
+
...diffCoords,
|
|
1306
|
+
placement
|
|
1307
|
+
}
|
|
1308
|
+
};
|
|
1309
|
+
}
|
|
1310
|
+
};
|
|
1311
|
+
};
|
|
1312
|
+
const shift$2 = function(options) {
|
|
1313
|
+
if (options === void 0) {
|
|
1314
|
+
options = {};
|
|
1315
|
+
}
|
|
1316
|
+
return {
|
|
1317
|
+
name: "shift",
|
|
1318
|
+
options,
|
|
1319
|
+
async fn(state) {
|
|
1320
|
+
const {
|
|
1321
|
+
x,
|
|
1322
|
+
y,
|
|
1323
|
+
placement
|
|
1324
|
+
} = state;
|
|
1325
|
+
const {
|
|
1326
|
+
mainAxis: checkMainAxis = true,
|
|
1327
|
+
crossAxis: checkCrossAxis = false,
|
|
1328
|
+
limiter = {
|
|
1329
|
+
fn: (_ref) => {
|
|
1330
|
+
let {
|
|
1331
|
+
x: x2,
|
|
1332
|
+
y: y2
|
|
1333
|
+
} = _ref;
|
|
1334
|
+
return {
|
|
1335
|
+
x: x2,
|
|
1336
|
+
y: y2
|
|
1337
|
+
};
|
|
1338
|
+
}
|
|
1339
|
+
},
|
|
1340
|
+
...detectOverflowOptions
|
|
1341
|
+
} = evaluate(options, state);
|
|
1342
|
+
const coords = {
|
|
1343
|
+
x,
|
|
1344
|
+
y
|
|
1345
|
+
};
|
|
1346
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1347
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
1348
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
1349
|
+
let mainAxisCoord = coords[mainAxis];
|
|
1350
|
+
let crossAxisCoord = coords[crossAxis];
|
|
1351
|
+
if (checkMainAxis) {
|
|
1352
|
+
const minSide = mainAxis === "y" ? "top" : "left";
|
|
1353
|
+
const maxSide = mainAxis === "y" ? "bottom" : "right";
|
|
1354
|
+
const min2 = mainAxisCoord + overflow[minSide];
|
|
1355
|
+
const max2 = mainAxisCoord - overflow[maxSide];
|
|
1356
|
+
mainAxisCoord = clamp(min2, mainAxisCoord, max2);
|
|
1357
|
+
}
|
|
1358
|
+
if (checkCrossAxis) {
|
|
1359
|
+
const minSide = crossAxis === "y" ? "top" : "left";
|
|
1360
|
+
const maxSide = crossAxis === "y" ? "bottom" : "right";
|
|
1361
|
+
const min2 = crossAxisCoord + overflow[minSide];
|
|
1362
|
+
const max2 = crossAxisCoord - overflow[maxSide];
|
|
1363
|
+
crossAxisCoord = clamp(min2, crossAxisCoord, max2);
|
|
1364
|
+
}
|
|
1365
|
+
const limitedCoords = limiter.fn({
|
|
1366
|
+
...state,
|
|
1367
|
+
[mainAxis]: mainAxisCoord,
|
|
1368
|
+
[crossAxis]: crossAxisCoord
|
|
1369
|
+
});
|
|
1370
|
+
return {
|
|
1371
|
+
...limitedCoords,
|
|
1372
|
+
data: {
|
|
1373
|
+
x: limitedCoords.x - x,
|
|
1374
|
+
y: limitedCoords.y - y,
|
|
1375
|
+
enabled: {
|
|
1376
|
+
[mainAxis]: checkMainAxis,
|
|
1377
|
+
[crossAxis]: checkCrossAxis
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
};
|
|
1381
|
+
}
|
|
1382
|
+
};
|
|
1383
|
+
};
|
|
1384
|
+
const size$2 = function(options) {
|
|
1385
|
+
if (options === void 0) {
|
|
1386
|
+
options = {};
|
|
1387
|
+
}
|
|
1388
|
+
return {
|
|
1389
|
+
name: "size",
|
|
1390
|
+
options,
|
|
1391
|
+
async fn(state) {
|
|
1392
|
+
var _state$middlewareData, _state$middlewareData2;
|
|
1393
|
+
const {
|
|
1394
|
+
placement,
|
|
1395
|
+
rects,
|
|
1396
|
+
platform: platform2,
|
|
1397
|
+
elements
|
|
1398
|
+
} = state;
|
|
1399
|
+
const {
|
|
1400
|
+
apply = () => {
|
|
1401
|
+
},
|
|
1402
|
+
...detectOverflowOptions
|
|
1403
|
+
} = evaluate(options, state);
|
|
1404
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1405
|
+
const side = getSide(placement);
|
|
1406
|
+
const alignment = getAlignment(placement);
|
|
1407
|
+
const isYAxis = getSideAxis(placement) === "y";
|
|
1408
|
+
const {
|
|
1409
|
+
width,
|
|
1410
|
+
height
|
|
1411
|
+
} = rects.floating;
|
|
1412
|
+
let heightSide;
|
|
1413
|
+
let widthSide;
|
|
1414
|
+
if (side === "top" || side === "bottom") {
|
|
1415
|
+
heightSide = side;
|
|
1416
|
+
widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
|
|
1417
|
+
} else {
|
|
1418
|
+
widthSide = side;
|
|
1419
|
+
heightSide = alignment === "end" ? "top" : "bottom";
|
|
1420
|
+
}
|
|
1421
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
1422
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
1423
|
+
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
1424
|
+
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
1425
|
+
const noShift = !state.middlewareData.shift;
|
|
1426
|
+
let availableHeight = overflowAvailableHeight;
|
|
1427
|
+
let availableWidth = overflowAvailableWidth;
|
|
1428
|
+
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
1429
|
+
availableWidth = maximumClippingWidth;
|
|
1430
|
+
}
|
|
1431
|
+
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
1432
|
+
availableHeight = maximumClippingHeight;
|
|
1433
|
+
}
|
|
1434
|
+
if (noShift && !alignment) {
|
|
1435
|
+
const xMin = max(overflow.left, 0);
|
|
1436
|
+
const xMax = max(overflow.right, 0);
|
|
1437
|
+
const yMin = max(overflow.top, 0);
|
|
1438
|
+
const yMax = max(overflow.bottom, 0);
|
|
1439
|
+
if (isYAxis) {
|
|
1440
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
1441
|
+
} else {
|
|
1442
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
1443
|
+
}
|
|
1444
|
+
}
|
|
1445
|
+
await apply({
|
|
1446
|
+
...state,
|
|
1447
|
+
availableWidth,
|
|
1448
|
+
availableHeight
|
|
1449
|
+
});
|
|
1450
|
+
const nextDimensions = await platform2.getDimensions(elements.floating);
|
|
1451
|
+
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
1452
|
+
return {
|
|
1453
|
+
reset: {
|
|
1454
|
+
rects: true
|
|
1455
|
+
}
|
|
1456
|
+
};
|
|
1457
|
+
}
|
|
1458
|
+
return {};
|
|
1459
|
+
}
|
|
1460
|
+
};
|
|
1461
|
+
};
|
|
1462
|
+
function getCssDimensions(element) {
|
|
1463
|
+
const css = getComputedStyle$1(element);
|
|
1464
|
+
let width = parseFloat(css.width) || 0;
|
|
1465
|
+
let height = parseFloat(css.height) || 0;
|
|
1466
|
+
const hasOffset = isHTMLElement(element);
|
|
1467
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
1468
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
1469
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
1470
|
+
if (shouldFallback) {
|
|
1471
|
+
width = offsetWidth;
|
|
1472
|
+
height = offsetHeight;
|
|
1473
|
+
}
|
|
1474
|
+
return {
|
|
1475
|
+
width,
|
|
1476
|
+
height,
|
|
1477
|
+
$: shouldFallback
|
|
1478
|
+
};
|
|
1479
|
+
}
|
|
1480
|
+
function unwrapElement(element) {
|
|
1481
|
+
return !isElement(element) ? element.contextElement : element;
|
|
1482
|
+
}
|
|
1483
|
+
function getScale(element) {
|
|
1484
|
+
const domElement = unwrapElement(element);
|
|
1485
|
+
if (!isHTMLElement(domElement)) {
|
|
1486
|
+
return createCoords(1);
|
|
1487
|
+
}
|
|
1488
|
+
const rect = domElement.getBoundingClientRect();
|
|
1489
|
+
const {
|
|
1490
|
+
width,
|
|
1491
|
+
height,
|
|
1492
|
+
$
|
|
1493
|
+
} = getCssDimensions(domElement);
|
|
1494
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
1495
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
1496
|
+
if (!x || !Number.isFinite(x)) {
|
|
1497
|
+
x = 1;
|
|
1498
|
+
}
|
|
1499
|
+
if (!y || !Number.isFinite(y)) {
|
|
1500
|
+
y = 1;
|
|
1501
|
+
}
|
|
1502
|
+
return {
|
|
1503
|
+
x,
|
|
1504
|
+
y
|
|
1505
|
+
};
|
|
1506
|
+
}
|
|
1507
|
+
const noOffsets = /* @__PURE__ */ createCoords(0);
|
|
1508
|
+
function getVisualOffsets(element) {
|
|
1509
|
+
const win = getWindow(element);
|
|
1510
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
1511
|
+
return noOffsets;
|
|
1512
|
+
}
|
|
1513
|
+
return {
|
|
1514
|
+
x: win.visualViewport.offsetLeft,
|
|
1515
|
+
y: win.visualViewport.offsetTop
|
|
1516
|
+
};
|
|
1517
|
+
}
|
|
1518
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
1519
|
+
if (isFixed === void 0) {
|
|
1520
|
+
isFixed = false;
|
|
1521
|
+
}
|
|
1522
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
1523
|
+
return false;
|
|
1524
|
+
}
|
|
1525
|
+
return isFixed;
|
|
1526
|
+
}
|
|
1527
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
1528
|
+
if (includeScale === void 0) {
|
|
1529
|
+
includeScale = false;
|
|
1530
|
+
}
|
|
1531
|
+
if (isFixedStrategy === void 0) {
|
|
1532
|
+
isFixedStrategy = false;
|
|
1533
|
+
}
|
|
1534
|
+
const clientRect = element.getBoundingClientRect();
|
|
1535
|
+
const domElement = unwrapElement(element);
|
|
1536
|
+
let scale = createCoords(1);
|
|
1537
|
+
if (includeScale) {
|
|
1538
|
+
if (offsetParent) {
|
|
1539
|
+
if (isElement(offsetParent)) {
|
|
1540
|
+
scale = getScale(offsetParent);
|
|
1541
|
+
}
|
|
1542
|
+
} else {
|
|
1543
|
+
scale = getScale(element);
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
1547
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
1548
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
1549
|
+
let width = clientRect.width / scale.x;
|
|
1550
|
+
let height = clientRect.height / scale.y;
|
|
1551
|
+
if (domElement) {
|
|
1552
|
+
const win = getWindow(domElement);
|
|
1553
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
1554
|
+
let currentWin = win;
|
|
1555
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
1556
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
1557
|
+
const iframeScale = getScale(currentIFrame);
|
|
1558
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
1559
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
1560
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
1561
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
1562
|
+
x *= iframeScale.x;
|
|
1563
|
+
y *= iframeScale.y;
|
|
1564
|
+
width *= iframeScale.x;
|
|
1565
|
+
height *= iframeScale.y;
|
|
1566
|
+
x += left;
|
|
1567
|
+
y += top;
|
|
1568
|
+
currentWin = getWindow(currentIFrame);
|
|
1569
|
+
currentIFrame = getFrameElement(currentWin);
|
|
1570
|
+
}
|
|
1571
|
+
}
|
|
1572
|
+
return rectToClientRect({
|
|
1573
|
+
width,
|
|
1574
|
+
height,
|
|
1575
|
+
x,
|
|
1576
|
+
y
|
|
1577
|
+
});
|
|
1578
|
+
}
|
|
1579
|
+
function getWindowScrollBarX(element, rect) {
|
|
1580
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1581
|
+
if (!rect) {
|
|
1582
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1583
|
+
}
|
|
1584
|
+
return rect.left + leftScroll;
|
|
1585
|
+
}
|
|
1586
|
+
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
|
|
1587
|
+
if (ignoreScrollbarX === void 0) {
|
|
1588
|
+
ignoreScrollbarX = false;
|
|
1589
|
+
}
|
|
1590
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
1591
|
+
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
|
|
1592
|
+
// RTL <body> scrollbar.
|
|
1593
|
+
getWindowScrollBarX(documentElement, htmlRect)
|
|
1594
|
+
));
|
|
1595
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
1596
|
+
return {
|
|
1597
|
+
x,
|
|
1598
|
+
y
|
|
1599
|
+
};
|
|
1600
|
+
}
|
|
1601
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
1602
|
+
let {
|
|
1603
|
+
elements,
|
|
1604
|
+
rect,
|
|
1605
|
+
offsetParent,
|
|
1606
|
+
strategy
|
|
1607
|
+
} = _ref;
|
|
1608
|
+
const isFixed = strategy === "fixed";
|
|
1609
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
1610
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
1611
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
1612
|
+
return rect;
|
|
1613
|
+
}
|
|
1614
|
+
let scroll = {
|
|
1615
|
+
scrollLeft: 0,
|
|
1616
|
+
scrollTop: 0
|
|
1617
|
+
};
|
|
1618
|
+
let scale = createCoords(1);
|
|
1619
|
+
const offsets = createCoords(0);
|
|
1620
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1621
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1622
|
+
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1623
|
+
scroll = getNodeScroll(offsetParent);
|
|
1624
|
+
}
|
|
1625
|
+
if (isHTMLElement(offsetParent)) {
|
|
1626
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
1627
|
+
scale = getScale(offsetParent);
|
|
1628
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1629
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1630
|
+
}
|
|
1631
|
+
}
|
|
1632
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
|
|
1633
|
+
return {
|
|
1634
|
+
width: rect.width * scale.x,
|
|
1635
|
+
height: rect.height * scale.y,
|
|
1636
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
1637
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
1638
|
+
};
|
|
1639
|
+
}
|
|
1640
|
+
function getClientRects(element) {
|
|
1641
|
+
return Array.from(element.getClientRects());
|
|
1642
|
+
}
|
|
1643
|
+
function getDocumentRect(element) {
|
|
1644
|
+
const html = getDocumentElement(element);
|
|
1645
|
+
const scroll = getNodeScroll(element);
|
|
1646
|
+
const body = element.ownerDocument.body;
|
|
1647
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
1648
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
1649
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
1650
|
+
const y = -scroll.scrollTop;
|
|
1651
|
+
if (getComputedStyle$1(body).direction === "rtl") {
|
|
1652
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
1653
|
+
}
|
|
1654
|
+
return {
|
|
1655
|
+
width,
|
|
1656
|
+
height,
|
|
1657
|
+
x,
|
|
1658
|
+
y
|
|
1659
|
+
};
|
|
1660
|
+
}
|
|
1661
|
+
function getViewportRect(element, strategy) {
|
|
1662
|
+
const win = getWindow(element);
|
|
1663
|
+
const html = getDocumentElement(element);
|
|
1664
|
+
const visualViewport = win.visualViewport;
|
|
1665
|
+
let width = html.clientWidth;
|
|
1666
|
+
let height = html.clientHeight;
|
|
1667
|
+
let x = 0;
|
|
1668
|
+
let y = 0;
|
|
1669
|
+
if (visualViewport) {
|
|
1670
|
+
width = visualViewport.width;
|
|
1671
|
+
height = visualViewport.height;
|
|
1672
|
+
const visualViewportBased = isWebKit();
|
|
1673
|
+
if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
|
|
1674
|
+
x = visualViewport.offsetLeft;
|
|
1675
|
+
y = visualViewport.offsetTop;
|
|
1676
|
+
}
|
|
1677
|
+
}
|
|
1678
|
+
return {
|
|
1679
|
+
width,
|
|
1680
|
+
height,
|
|
1681
|
+
x,
|
|
1682
|
+
y
|
|
1683
|
+
};
|
|
1684
|
+
}
|
|
1685
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
1686
|
+
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
|
|
1687
|
+
const top = clientRect.top + element.clientTop;
|
|
1688
|
+
const left = clientRect.left + element.clientLeft;
|
|
1689
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
1690
|
+
const width = element.clientWidth * scale.x;
|
|
1691
|
+
const height = element.clientHeight * scale.y;
|
|
1692
|
+
const x = left * scale.x;
|
|
1693
|
+
const y = top * scale.y;
|
|
1694
|
+
return {
|
|
1695
|
+
width,
|
|
1696
|
+
height,
|
|
1697
|
+
x,
|
|
1698
|
+
y
|
|
1699
|
+
};
|
|
1700
|
+
}
|
|
1701
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
1702
|
+
let rect;
|
|
1703
|
+
if (clippingAncestor === "viewport") {
|
|
1704
|
+
rect = getViewportRect(element, strategy);
|
|
1705
|
+
} else if (clippingAncestor === "document") {
|
|
1706
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
1707
|
+
} else if (isElement(clippingAncestor)) {
|
|
1708
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
1709
|
+
} else {
|
|
1710
|
+
const visualOffsets = getVisualOffsets(element);
|
|
1711
|
+
rect = {
|
|
1712
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
1713
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
1714
|
+
width: clippingAncestor.width,
|
|
1715
|
+
height: clippingAncestor.height
|
|
1716
|
+
};
|
|
1717
|
+
}
|
|
1718
|
+
return rectToClientRect(rect);
|
|
1719
|
+
}
|
|
1720
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
1721
|
+
const parentNode = getParentNode(element);
|
|
1722
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1723
|
+
return false;
|
|
1724
|
+
}
|
|
1725
|
+
return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1726
|
+
}
|
|
1727
|
+
function getClippingElementAncestors(element, cache) {
|
|
1728
|
+
const cachedResult = cache.get(element);
|
|
1729
|
+
if (cachedResult) {
|
|
1730
|
+
return cachedResult;
|
|
1731
|
+
}
|
|
1732
|
+
let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
|
|
1733
|
+
let currentContainingBlockComputedStyle = null;
|
|
1734
|
+
const elementIsFixed = getComputedStyle$1(element).position === "fixed";
|
|
1735
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1736
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1737
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
1738
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1739
|
+
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
|
|
1740
|
+
currentContainingBlockComputedStyle = null;
|
|
1741
|
+
}
|
|
1742
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
1743
|
+
if (shouldDropCurrentNode) {
|
|
1744
|
+
result = result.filter((ancestor) => ancestor !== currentNode);
|
|
1745
|
+
} else {
|
|
1746
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
1747
|
+
}
|
|
1748
|
+
currentNode = getParentNode(currentNode);
|
|
1749
|
+
}
|
|
1750
|
+
cache.set(element, result);
|
|
1751
|
+
return result;
|
|
1752
|
+
}
|
|
1753
|
+
function getClippingRect(_ref) {
|
|
1754
|
+
let {
|
|
1755
|
+
element,
|
|
1756
|
+
boundary,
|
|
1757
|
+
rootBoundary,
|
|
1758
|
+
strategy
|
|
1759
|
+
} = _ref;
|
|
1760
|
+
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1761
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1762
|
+
const firstClippingAncestor = clippingAncestors[0];
|
|
1763
|
+
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
1764
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
1765
|
+
accRect.top = max(rect.top, accRect.top);
|
|
1766
|
+
accRect.right = min(rect.right, accRect.right);
|
|
1767
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
1768
|
+
accRect.left = max(rect.left, accRect.left);
|
|
1769
|
+
return accRect;
|
|
1770
|
+
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
1771
|
+
return {
|
|
1772
|
+
width: clippingRect.right - clippingRect.left,
|
|
1773
|
+
height: clippingRect.bottom - clippingRect.top,
|
|
1774
|
+
x: clippingRect.left,
|
|
1775
|
+
y: clippingRect.top
|
|
1776
|
+
};
|
|
1777
|
+
}
|
|
1778
|
+
function getDimensions(element) {
|
|
1779
|
+
const {
|
|
1780
|
+
width,
|
|
1781
|
+
height
|
|
1782
|
+
} = getCssDimensions(element);
|
|
1783
|
+
return {
|
|
1784
|
+
width,
|
|
1785
|
+
height
|
|
1786
|
+
};
|
|
1787
|
+
}
|
|
1788
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1789
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1790
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
1791
|
+
const isFixed = strategy === "fixed";
|
|
1792
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
1793
|
+
let scroll = {
|
|
1794
|
+
scrollLeft: 0,
|
|
1795
|
+
scrollTop: 0
|
|
1796
|
+
};
|
|
1797
|
+
const offsets = createCoords(0);
|
|
1798
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1799
|
+
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1800
|
+
scroll = getNodeScroll(offsetParent);
|
|
1801
|
+
}
|
|
1802
|
+
if (isOffsetParentAnElement) {
|
|
1803
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1804
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1805
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1806
|
+
} else if (documentElement) {
|
|
1807
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
1808
|
+
}
|
|
1809
|
+
}
|
|
1810
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1811
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1812
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1813
|
+
return {
|
|
1814
|
+
x,
|
|
1815
|
+
y,
|
|
1816
|
+
width: rect.width,
|
|
1817
|
+
height: rect.height
|
|
1818
|
+
};
|
|
1819
|
+
}
|
|
1820
|
+
function isStaticPositioned(element) {
|
|
1821
|
+
return getComputedStyle$1(element).position === "static";
|
|
1822
|
+
}
|
|
1823
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
1824
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
|
|
1825
|
+
return null;
|
|
1826
|
+
}
|
|
1827
|
+
if (polyfill) {
|
|
1828
|
+
return polyfill(element);
|
|
1829
|
+
}
|
|
1830
|
+
let rawOffsetParent = element.offsetParent;
|
|
1831
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
1832
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
1833
|
+
}
|
|
1834
|
+
return rawOffsetParent;
|
|
1835
|
+
}
|
|
1836
|
+
function getOffsetParent(element, polyfill) {
|
|
1837
|
+
const win = getWindow(element);
|
|
1838
|
+
if (isTopLayer(element)) {
|
|
1839
|
+
return win;
|
|
1840
|
+
}
|
|
1841
|
+
if (!isHTMLElement(element)) {
|
|
1842
|
+
let svgOffsetParent = getParentNode(element);
|
|
1843
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
1844
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
1845
|
+
return svgOffsetParent;
|
|
1846
|
+
}
|
|
1847
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
1848
|
+
}
|
|
1849
|
+
return win;
|
|
1850
|
+
}
|
|
1851
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1852
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1853
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1854
|
+
}
|
|
1855
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1856
|
+
return win;
|
|
1857
|
+
}
|
|
1858
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
1859
|
+
}
|
|
1860
|
+
const getElementRects = async function(data) {
|
|
1861
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1862
|
+
const getDimensionsFn = this.getDimensions;
|
|
1863
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
1864
|
+
return {
|
|
1865
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
1866
|
+
floating: {
|
|
1867
|
+
x: 0,
|
|
1868
|
+
y: 0,
|
|
1869
|
+
width: floatingDimensions.width,
|
|
1870
|
+
height: floatingDimensions.height
|
|
1871
|
+
}
|
|
1872
|
+
};
|
|
1873
|
+
};
|
|
1874
|
+
function isRTL(element) {
|
|
1875
|
+
return getComputedStyle$1(element).direction === "rtl";
|
|
1876
|
+
}
|
|
1877
|
+
const platform = {
|
|
1878
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
1879
|
+
getDocumentElement,
|
|
1880
|
+
getClippingRect,
|
|
1881
|
+
getOffsetParent,
|
|
1882
|
+
getElementRects,
|
|
1883
|
+
getClientRects,
|
|
1884
|
+
getDimensions,
|
|
1885
|
+
getScale,
|
|
1886
|
+
isElement,
|
|
1887
|
+
isRTL
|
|
1888
|
+
};
|
|
1889
|
+
function rectsAreEqual(a, b) {
|
|
1890
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
1891
|
+
}
|
|
1892
|
+
function observeMove(element, onMove) {
|
|
1893
|
+
let io = null;
|
|
1894
|
+
let timeoutId;
|
|
1895
|
+
const root = getDocumentElement(element);
|
|
1896
|
+
function cleanup() {
|
|
1897
|
+
var _io;
|
|
1898
|
+
clearTimeout(timeoutId);
|
|
1899
|
+
(_io = io) == null || _io.disconnect();
|
|
1900
|
+
io = null;
|
|
1901
|
+
}
|
|
1902
|
+
function refresh(skip, threshold) {
|
|
1903
|
+
if (skip === void 0) {
|
|
1904
|
+
skip = false;
|
|
1905
|
+
}
|
|
1906
|
+
if (threshold === void 0) {
|
|
1907
|
+
threshold = 1;
|
|
1908
|
+
}
|
|
1909
|
+
cleanup();
|
|
1910
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
1911
|
+
const {
|
|
1912
|
+
left,
|
|
1913
|
+
top,
|
|
1914
|
+
width,
|
|
1915
|
+
height
|
|
1916
|
+
} = elementRectForRootMargin;
|
|
1917
|
+
if (!skip) {
|
|
1918
|
+
onMove();
|
|
1919
|
+
}
|
|
1920
|
+
if (!width || !height) {
|
|
1921
|
+
return;
|
|
1922
|
+
}
|
|
1923
|
+
const insetTop = floor(top);
|
|
1924
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
1925
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
1926
|
+
const insetLeft = floor(left);
|
|
1927
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
1928
|
+
const options = {
|
|
1929
|
+
rootMargin,
|
|
1930
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
1931
|
+
};
|
|
1932
|
+
let isFirstUpdate = true;
|
|
1933
|
+
function handleObserve(entries) {
|
|
1934
|
+
const ratio = entries[0].intersectionRatio;
|
|
1935
|
+
if (ratio !== threshold) {
|
|
1936
|
+
if (!isFirstUpdate) {
|
|
1937
|
+
return refresh();
|
|
1938
|
+
}
|
|
1939
|
+
if (!ratio) {
|
|
1940
|
+
timeoutId = setTimeout(() => {
|
|
1941
|
+
refresh(false, 1e-7);
|
|
1942
|
+
}, 1e3);
|
|
1943
|
+
} else {
|
|
1944
|
+
refresh(false, ratio);
|
|
1945
|
+
}
|
|
1946
|
+
}
|
|
1947
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
1948
|
+
refresh();
|
|
1949
|
+
}
|
|
1950
|
+
isFirstUpdate = false;
|
|
1951
|
+
}
|
|
1952
|
+
try {
|
|
1953
|
+
io = new IntersectionObserver(handleObserve, {
|
|
1954
|
+
...options,
|
|
1955
|
+
// Handle <iframe>s
|
|
1956
|
+
root: root.ownerDocument
|
|
1957
|
+
});
|
|
1958
|
+
} catch (e) {
|
|
1959
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
1960
|
+
}
|
|
1961
|
+
io.observe(element);
|
|
1962
|
+
}
|
|
1963
|
+
refresh(true);
|
|
1964
|
+
return cleanup;
|
|
1965
|
+
}
|
|
1966
|
+
function autoUpdate(reference, floating, update, options) {
|
|
1967
|
+
if (options === void 0) {
|
|
1968
|
+
options = {};
|
|
1969
|
+
}
|
|
1970
|
+
const {
|
|
1971
|
+
ancestorScroll = true,
|
|
1972
|
+
ancestorResize = true,
|
|
1973
|
+
elementResize = typeof ResizeObserver === "function",
|
|
1974
|
+
layoutShift = typeof IntersectionObserver === "function",
|
|
1975
|
+
animationFrame = false
|
|
1976
|
+
} = options;
|
|
1977
|
+
const referenceEl = unwrapElement(reference);
|
|
1978
|
+
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
|
|
1979
|
+
ancestors.forEach((ancestor) => {
|
|
1980
|
+
ancestorScroll && ancestor.addEventListener("scroll", update, {
|
|
1981
|
+
passive: true
|
|
1982
|
+
});
|
|
1983
|
+
ancestorResize && ancestor.addEventListener("resize", update);
|
|
1984
|
+
});
|
|
1985
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
1986
|
+
let reobserveFrame = -1;
|
|
1987
|
+
let resizeObserver = null;
|
|
1988
|
+
if (elementResize) {
|
|
1989
|
+
resizeObserver = new ResizeObserver((_ref) => {
|
|
1990
|
+
let [firstEntry] = _ref;
|
|
1991
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
1992
|
+
resizeObserver.unobserve(floating);
|
|
1993
|
+
cancelAnimationFrame(reobserveFrame);
|
|
1994
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
1995
|
+
var _resizeObserver;
|
|
1996
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
1997
|
+
});
|
|
1998
|
+
}
|
|
1999
|
+
update();
|
|
2000
|
+
});
|
|
2001
|
+
if (referenceEl && !animationFrame) {
|
|
2002
|
+
resizeObserver.observe(referenceEl);
|
|
2003
|
+
}
|
|
2004
|
+
resizeObserver.observe(floating);
|
|
2005
|
+
}
|
|
2006
|
+
let frameId;
|
|
2007
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
2008
|
+
if (animationFrame) {
|
|
2009
|
+
frameLoop();
|
|
2010
|
+
}
|
|
2011
|
+
function frameLoop() {
|
|
2012
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
2013
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
2014
|
+
update();
|
|
2015
|
+
}
|
|
2016
|
+
prevRefRect = nextRefRect;
|
|
2017
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
2018
|
+
}
|
|
2019
|
+
update();
|
|
2020
|
+
return () => {
|
|
2021
|
+
var _resizeObserver2;
|
|
2022
|
+
ancestors.forEach((ancestor) => {
|
|
2023
|
+
ancestorScroll && ancestor.removeEventListener("scroll", update);
|
|
2024
|
+
ancestorResize && ancestor.removeEventListener("resize", update);
|
|
2025
|
+
});
|
|
2026
|
+
cleanupIo == null || cleanupIo();
|
|
2027
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
2028
|
+
resizeObserver = null;
|
|
2029
|
+
if (animationFrame) {
|
|
2030
|
+
cancelAnimationFrame(frameId);
|
|
2031
|
+
}
|
|
2032
|
+
};
|
|
2033
|
+
}
|
|
2034
|
+
const offset$1 = offset$2;
|
|
2035
|
+
const shift$1 = shift$2;
|
|
2036
|
+
const flip$1 = flip$2;
|
|
2037
|
+
const size$1 = size$2;
|
|
2038
|
+
const hide$1 = hide$2;
|
|
2039
|
+
const arrow$2 = arrow$3;
|
|
2040
|
+
const computePosition = (reference, floating, options) => {
|
|
2041
|
+
const cache = /* @__PURE__ */ new Map();
|
|
2042
|
+
const mergedOptions = {
|
|
2043
|
+
platform,
|
|
2044
|
+
...options
|
|
2045
|
+
};
|
|
2046
|
+
const platformWithCache = {
|
|
2047
|
+
...mergedOptions.platform,
|
|
2048
|
+
_c: cache
|
|
2049
|
+
};
|
|
2050
|
+
return computePosition$1(reference, floating, {
|
|
2051
|
+
...mergedOptions,
|
|
2052
|
+
platform: platformWithCache
|
|
2053
|
+
});
|
|
2054
|
+
};
|
|
2055
|
+
var index = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
2056
|
+
function deepEqual(a, b) {
|
|
2057
|
+
if (a === b) {
|
|
2058
|
+
return true;
|
|
2059
|
+
}
|
|
2060
|
+
if (typeof a !== typeof b) {
|
|
2061
|
+
return false;
|
|
2062
|
+
}
|
|
2063
|
+
if (typeof a === "function" && a.toString() === b.toString()) {
|
|
2064
|
+
return true;
|
|
2065
|
+
}
|
|
2066
|
+
let length;
|
|
2067
|
+
let i;
|
|
2068
|
+
let keys;
|
|
2069
|
+
if (a && b && typeof a === "object") {
|
|
2070
|
+
if (Array.isArray(a)) {
|
|
2071
|
+
length = a.length;
|
|
2072
|
+
if (length !== b.length) return false;
|
|
2073
|
+
for (i = length; i-- !== 0; ) {
|
|
2074
|
+
if (!deepEqual(a[i], b[i])) {
|
|
2075
|
+
return false;
|
|
2076
|
+
}
|
|
2077
|
+
}
|
|
2078
|
+
return true;
|
|
2079
|
+
}
|
|
2080
|
+
keys = Object.keys(a);
|
|
2081
|
+
length = keys.length;
|
|
2082
|
+
if (length !== Object.keys(b).length) {
|
|
2083
|
+
return false;
|
|
2084
|
+
}
|
|
2085
|
+
for (i = length; i-- !== 0; ) {
|
|
2086
|
+
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
2087
|
+
return false;
|
|
2088
|
+
}
|
|
2089
|
+
}
|
|
2090
|
+
for (i = length; i-- !== 0; ) {
|
|
2091
|
+
const key = keys[i];
|
|
2092
|
+
if (key === "_owner" && a.$$typeof) {
|
|
2093
|
+
continue;
|
|
2094
|
+
}
|
|
2095
|
+
if (!deepEqual(a[key], b[key])) {
|
|
2096
|
+
return false;
|
|
2097
|
+
}
|
|
2098
|
+
}
|
|
2099
|
+
return true;
|
|
2100
|
+
}
|
|
2101
|
+
return a !== a && b !== b;
|
|
2102
|
+
}
|
|
2103
|
+
function getDPR(element) {
|
|
2104
|
+
if (typeof window === "undefined") {
|
|
2105
|
+
return 1;
|
|
2106
|
+
}
|
|
2107
|
+
const win = element.ownerDocument.defaultView || window;
|
|
2108
|
+
return win.devicePixelRatio || 1;
|
|
2109
|
+
}
|
|
2110
|
+
function roundByDPR(element, value) {
|
|
2111
|
+
const dpr = getDPR(element);
|
|
2112
|
+
return Math.round(value * dpr) / dpr;
|
|
2113
|
+
}
|
|
2114
|
+
function useLatestRef(value) {
|
|
2115
|
+
const ref = React.useRef(value);
|
|
2116
|
+
index(() => {
|
|
2117
|
+
ref.current = value;
|
|
2118
|
+
});
|
|
2119
|
+
return ref;
|
|
2120
|
+
}
|
|
2121
|
+
function useFloating$1(options) {
|
|
2122
|
+
if (options === void 0) {
|
|
2123
|
+
options = {};
|
|
2124
|
+
}
|
|
2125
|
+
const {
|
|
2126
|
+
placement = "bottom",
|
|
2127
|
+
strategy = "absolute",
|
|
2128
|
+
middleware = [],
|
|
2129
|
+
platform: platform2,
|
|
2130
|
+
elements: {
|
|
2131
|
+
reference: externalReference,
|
|
2132
|
+
floating: externalFloating
|
|
2133
|
+
} = {},
|
|
2134
|
+
transform = true,
|
|
2135
|
+
whileElementsMounted,
|
|
2136
|
+
open
|
|
2137
|
+
} = options;
|
|
2138
|
+
const [data, setData] = React.useState({
|
|
2139
|
+
x: 0,
|
|
2140
|
+
y: 0,
|
|
2141
|
+
strategy,
|
|
2142
|
+
placement,
|
|
2143
|
+
middlewareData: {},
|
|
2144
|
+
isPositioned: false
|
|
2145
|
+
});
|
|
2146
|
+
const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
|
|
2147
|
+
if (!deepEqual(latestMiddleware, middleware)) {
|
|
2148
|
+
setLatestMiddleware(middleware);
|
|
2149
|
+
}
|
|
2150
|
+
const [_reference, _setReference] = React.useState(null);
|
|
2151
|
+
const [_floating, _setFloating] = React.useState(null);
|
|
2152
|
+
const setReference = React.useCallback((node) => {
|
|
2153
|
+
if (node !== referenceRef.current) {
|
|
2154
|
+
referenceRef.current = node;
|
|
2155
|
+
_setReference(node);
|
|
2156
|
+
}
|
|
2157
|
+
}, []);
|
|
2158
|
+
const setFloating = React.useCallback((node) => {
|
|
2159
|
+
if (node !== floatingRef.current) {
|
|
2160
|
+
floatingRef.current = node;
|
|
2161
|
+
_setFloating(node);
|
|
2162
|
+
}
|
|
2163
|
+
}, []);
|
|
2164
|
+
const referenceEl = externalReference || _reference;
|
|
2165
|
+
const floatingEl = externalFloating || _floating;
|
|
2166
|
+
const referenceRef = React.useRef(null);
|
|
2167
|
+
const floatingRef = React.useRef(null);
|
|
2168
|
+
const dataRef = React.useRef(data);
|
|
2169
|
+
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
2170
|
+
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
|
2171
|
+
const platformRef = useLatestRef(platform2);
|
|
2172
|
+
const openRef = useLatestRef(open);
|
|
2173
|
+
const update = React.useCallback(() => {
|
|
2174
|
+
if (!referenceRef.current || !floatingRef.current) {
|
|
2175
|
+
return;
|
|
2176
|
+
}
|
|
2177
|
+
const config = {
|
|
2178
|
+
placement,
|
|
2179
|
+
strategy,
|
|
2180
|
+
middleware: latestMiddleware
|
|
2181
|
+
};
|
|
2182
|
+
if (platformRef.current) {
|
|
2183
|
+
config.platform = platformRef.current;
|
|
2184
|
+
}
|
|
2185
|
+
computePosition(referenceRef.current, floatingRef.current, config).then((data2) => {
|
|
2186
|
+
const fullData = {
|
|
2187
|
+
...data2,
|
|
2188
|
+
// The floating element's position may be recomputed while it's closed
|
|
2189
|
+
// but still mounted (such as when transitioning out). To ensure
|
|
2190
|
+
// `isPositioned` will be `false` initially on the next open, avoid
|
|
2191
|
+
// setting it to `true` when `open === false` (must be specified).
|
|
2192
|
+
isPositioned: openRef.current !== false
|
|
2193
|
+
};
|
|
2194
|
+
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
2195
|
+
dataRef.current = fullData;
|
|
2196
|
+
ReactDOM.flushSync(() => {
|
|
2197
|
+
setData(fullData);
|
|
2198
|
+
});
|
|
2199
|
+
}
|
|
2200
|
+
});
|
|
2201
|
+
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
|
|
2202
|
+
index(() => {
|
|
2203
|
+
if (open === false && dataRef.current.isPositioned) {
|
|
2204
|
+
dataRef.current.isPositioned = false;
|
|
2205
|
+
setData((data2) => ({
|
|
2206
|
+
...data2,
|
|
2207
|
+
isPositioned: false
|
|
2208
|
+
}));
|
|
2209
|
+
}
|
|
2210
|
+
}, [open]);
|
|
2211
|
+
const isMountedRef = React.useRef(false);
|
|
2212
|
+
index(() => {
|
|
2213
|
+
isMountedRef.current = true;
|
|
2214
|
+
return () => {
|
|
2215
|
+
isMountedRef.current = false;
|
|
2216
|
+
};
|
|
2217
|
+
}, []);
|
|
2218
|
+
index(() => {
|
|
2219
|
+
if (referenceEl) referenceRef.current = referenceEl;
|
|
2220
|
+
if (floatingEl) floatingRef.current = floatingEl;
|
|
2221
|
+
if (referenceEl && floatingEl) {
|
|
2222
|
+
if (whileElementsMountedRef.current) {
|
|
2223
|
+
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
2224
|
+
}
|
|
2225
|
+
update();
|
|
2226
|
+
}
|
|
2227
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
2228
|
+
const refs = React.useMemo(() => ({
|
|
2229
|
+
reference: referenceRef,
|
|
2230
|
+
floating: floatingRef,
|
|
2231
|
+
setReference,
|
|
2232
|
+
setFloating
|
|
2233
|
+
}), [setReference, setFloating]);
|
|
2234
|
+
const elements = React.useMemo(() => ({
|
|
2235
|
+
reference: referenceEl,
|
|
2236
|
+
floating: floatingEl
|
|
2237
|
+
}), [referenceEl, floatingEl]);
|
|
2238
|
+
const floatingStyles = React.useMemo(() => {
|
|
2239
|
+
const initialStyles = {
|
|
2240
|
+
position: strategy,
|
|
2241
|
+
left: 0,
|
|
2242
|
+
top: 0
|
|
2243
|
+
};
|
|
2244
|
+
if (!elements.floating) {
|
|
2245
|
+
return initialStyles;
|
|
2246
|
+
}
|
|
2247
|
+
const x = roundByDPR(elements.floating, data.x);
|
|
2248
|
+
const y = roundByDPR(elements.floating, data.y);
|
|
2249
|
+
if (transform) {
|
|
2250
|
+
return {
|
|
2251
|
+
...initialStyles,
|
|
2252
|
+
transform: "translate(" + x + "px, " + y + "px)",
|
|
2253
|
+
...getDPR(elements.floating) >= 1.5 && {
|
|
2254
|
+
willChange: "transform"
|
|
2255
|
+
}
|
|
2256
|
+
};
|
|
2257
|
+
}
|
|
2258
|
+
return {
|
|
2259
|
+
position: strategy,
|
|
2260
|
+
left: x,
|
|
2261
|
+
top: y
|
|
2262
|
+
};
|
|
2263
|
+
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
2264
|
+
return React.useMemo(() => ({
|
|
2265
|
+
...data,
|
|
2266
|
+
update,
|
|
2267
|
+
refs,
|
|
2268
|
+
elements,
|
|
2269
|
+
floatingStyles
|
|
2270
|
+
}), [data, update, refs, elements, floatingStyles]);
|
|
2271
|
+
}
|
|
2272
|
+
const arrow$1 = (options) => {
|
|
2273
|
+
function isRef(value) {
|
|
2274
|
+
return {}.hasOwnProperty.call(value, "current");
|
|
2275
|
+
}
|
|
2276
|
+
return {
|
|
2277
|
+
name: "arrow",
|
|
2278
|
+
options,
|
|
2279
|
+
fn(state) {
|
|
2280
|
+
const {
|
|
2281
|
+
element,
|
|
2282
|
+
padding
|
|
2283
|
+
} = typeof options === "function" ? options(state) : options;
|
|
2284
|
+
if (element && isRef(element)) {
|
|
2285
|
+
if (element.current != null) {
|
|
2286
|
+
return arrow$2({
|
|
2287
|
+
element: element.current,
|
|
2288
|
+
padding
|
|
2289
|
+
}).fn(state);
|
|
2290
|
+
}
|
|
2291
|
+
return {};
|
|
2292
|
+
}
|
|
2293
|
+
if (element) {
|
|
2294
|
+
return arrow$2({
|
|
2295
|
+
element,
|
|
2296
|
+
padding
|
|
2297
|
+
}).fn(state);
|
|
2298
|
+
}
|
|
2299
|
+
return {};
|
|
2300
|
+
}
|
|
2301
|
+
};
|
|
2302
|
+
};
|
|
2303
|
+
const offset = (options, deps) => ({
|
|
2304
|
+
...offset$1(options),
|
|
2305
|
+
options: [options, deps]
|
|
2306
|
+
});
|
|
2307
|
+
const shift = (options, deps) => ({
|
|
2308
|
+
...shift$1(options),
|
|
2309
|
+
options: [options, deps]
|
|
2310
|
+
});
|
|
2311
|
+
const flip = (options, deps) => ({
|
|
2312
|
+
...flip$1(options),
|
|
2313
|
+
options: [options, deps]
|
|
2314
|
+
});
|
|
2315
|
+
const size = (options, deps) => ({
|
|
2316
|
+
...size$1(options),
|
|
2317
|
+
options: [options, deps]
|
|
2318
|
+
});
|
|
2319
|
+
const hide = (options, deps) => ({
|
|
2320
|
+
...hide$1(options),
|
|
2321
|
+
options: [options, deps]
|
|
2322
|
+
});
|
|
2323
|
+
const arrow = (options, deps) => ({
|
|
2324
|
+
...arrow$1(options),
|
|
2325
|
+
options: [options, deps]
|
|
2326
|
+
});
|
|
2327
|
+
function useMergeRefs(refs) {
|
|
2328
|
+
const cleanupRef = React.useRef(void 0);
|
|
2329
|
+
const refEffect = React.useCallback((instance) => {
|
|
2330
|
+
const cleanups = refs.map((ref) => {
|
|
2331
|
+
if (ref == null) {
|
|
2332
|
+
return;
|
|
2333
|
+
}
|
|
2334
|
+
if (typeof ref === "function") {
|
|
2335
|
+
const refCallback = ref;
|
|
2336
|
+
const refCleanup = refCallback(instance);
|
|
2337
|
+
return typeof refCleanup === "function" ? refCleanup : () => {
|
|
2338
|
+
refCallback(null);
|
|
2339
|
+
};
|
|
2340
|
+
}
|
|
2341
|
+
ref.current = instance;
|
|
2342
|
+
return () => {
|
|
2343
|
+
ref.current = null;
|
|
2344
|
+
};
|
|
2345
|
+
});
|
|
2346
|
+
return () => {
|
|
2347
|
+
cleanups.forEach((refCleanup) => refCleanup == null ? void 0 : refCleanup());
|
|
2348
|
+
};
|
|
2349
|
+
}, refs);
|
|
2350
|
+
return React.useMemo(() => {
|
|
2351
|
+
if (refs.every((ref) => ref == null)) {
|
|
2352
|
+
return null;
|
|
2353
|
+
}
|
|
2354
|
+
return (value) => {
|
|
2355
|
+
if (cleanupRef.current) {
|
|
2356
|
+
cleanupRef.current();
|
|
2357
|
+
cleanupRef.current = void 0;
|
|
2358
|
+
}
|
|
2359
|
+
if (value != null) {
|
|
2360
|
+
cleanupRef.current = refEffect(value);
|
|
2361
|
+
}
|
|
2362
|
+
};
|
|
2363
|
+
}, refs);
|
|
2364
|
+
}
|
|
2365
|
+
const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
|
|
2366
|
+
const ACTIVE_KEY = "active";
|
|
2367
|
+
const SELECTED_KEY = "selected";
|
|
2368
|
+
const SafeReact = {
|
|
2369
|
+
...React
|
|
2370
|
+
};
|
|
2371
|
+
let serverHandoffComplete = false;
|
|
2372
|
+
let count = 0;
|
|
2373
|
+
const genId = () => (
|
|
2374
|
+
// Ensure the id is unique with multiple independent versions of Floating UI
|
|
2375
|
+
// on <React 18
|
|
2376
|
+
"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
|
|
2377
|
+
);
|
|
2378
|
+
function useFloatingId() {
|
|
2379
|
+
const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : void 0);
|
|
2380
|
+
index$1(() => {
|
|
2381
|
+
if (id == null) {
|
|
2382
|
+
setId(genId());
|
|
2383
|
+
}
|
|
2384
|
+
}, []);
|
|
2385
|
+
React.useEffect(() => {
|
|
2386
|
+
serverHandoffComplete = true;
|
|
2387
|
+
}, []);
|
|
2388
|
+
return id;
|
|
2389
|
+
}
|
|
2390
|
+
const useReactId = SafeReact.useId;
|
|
2391
|
+
const useId = useReactId || useFloatingId;
|
|
2392
|
+
let devMessageSet;
|
|
2393
|
+
if (process.env.NODE_ENV !== "production") {
|
|
2394
|
+
devMessageSet = /* @__PURE__ */ new Set();
|
|
2395
|
+
}
|
|
2396
|
+
function warn() {
|
|
2397
|
+
var _devMessageSet;
|
|
2398
|
+
for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2399
|
+
messages[_key] = arguments[_key];
|
|
2400
|
+
}
|
|
2401
|
+
const message = "Floating UI: " + messages.join(" ");
|
|
2402
|
+
if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
|
|
2403
|
+
var _devMessageSet2;
|
|
2404
|
+
(_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
|
|
2405
|
+
console.warn(message);
|
|
2406
|
+
}
|
|
2407
|
+
}
|
|
2408
|
+
function error() {
|
|
2409
|
+
var _devMessageSet3;
|
|
2410
|
+
for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
2411
|
+
messages[_key2] = arguments[_key2];
|
|
2412
|
+
}
|
|
2413
|
+
const message = "Floating UI: " + messages.join(" ");
|
|
2414
|
+
if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
|
|
2415
|
+
var _devMessageSet4;
|
|
2416
|
+
(_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
|
|
2417
|
+
console.error(message);
|
|
2418
|
+
}
|
|
2419
|
+
}
|
|
2420
|
+
const FloatingArrow = /* @__PURE__ */ React.forwardRef(function FloatingArrow2(props, ref) {
|
|
2421
|
+
const {
|
|
2422
|
+
context: {
|
|
2423
|
+
placement,
|
|
2424
|
+
elements: {
|
|
2425
|
+
floating
|
|
2426
|
+
},
|
|
2427
|
+
middlewareData: {
|
|
2428
|
+
arrow: arrow2,
|
|
2429
|
+
shift: shift2
|
|
2430
|
+
}
|
|
2431
|
+
},
|
|
2432
|
+
width = 14,
|
|
2433
|
+
height = 7,
|
|
2434
|
+
tipRadius = 0,
|
|
2435
|
+
strokeWidth = 0,
|
|
2436
|
+
staticOffset,
|
|
2437
|
+
stroke,
|
|
2438
|
+
d,
|
|
2439
|
+
style: {
|
|
2440
|
+
transform,
|
|
2441
|
+
...restStyle
|
|
2442
|
+
} = {},
|
|
2443
|
+
...rest
|
|
2444
|
+
} = props;
|
|
2445
|
+
if (process.env.NODE_ENV !== "production") {
|
|
2446
|
+
if (!ref) {
|
|
2447
|
+
warn("The `ref` prop is required for `FloatingArrow`.");
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
2450
|
+
const clipPathId = useId();
|
|
2451
|
+
const [isRTL2, setIsRTL] = React.useState(false);
|
|
2452
|
+
index$1(() => {
|
|
2453
|
+
if (!floating) return;
|
|
2454
|
+
const isRTL3 = getComputedStyle$1(floating).direction === "rtl";
|
|
2455
|
+
if (isRTL3) {
|
|
2456
|
+
setIsRTL(true);
|
|
2457
|
+
}
|
|
2458
|
+
}, [floating]);
|
|
2459
|
+
if (!floating) {
|
|
2460
|
+
return null;
|
|
2461
|
+
}
|
|
2462
|
+
const [side, alignment] = placement.split("-");
|
|
2463
|
+
const isVerticalSide = side === "top" || side === "bottom";
|
|
2464
|
+
let computedStaticOffset = staticOffset;
|
|
2465
|
+
if (isVerticalSide && shift2 != null && shift2.x || !isVerticalSide && shift2 != null && shift2.y) {
|
|
2466
|
+
computedStaticOffset = null;
|
|
2467
|
+
}
|
|
2468
|
+
const computedStrokeWidth = strokeWidth * 2;
|
|
2469
|
+
const halfStrokeWidth = computedStrokeWidth / 2;
|
|
2470
|
+
const svgX = width / 2 * (tipRadius / -8 + 1);
|
|
2471
|
+
const svgY = height / 2 * tipRadius / 4;
|
|
2472
|
+
const isCustomShape = !!d;
|
|
2473
|
+
const yOffsetProp = computedStaticOffset && alignment === "end" ? "bottom" : "top";
|
|
2474
|
+
let xOffsetProp = computedStaticOffset && alignment === "end" ? "right" : "left";
|
|
2475
|
+
if (computedStaticOffset && isRTL2) {
|
|
2476
|
+
xOffsetProp = alignment === "end" ? "left" : "right";
|
|
2477
|
+
}
|
|
2478
|
+
const arrowX = (arrow2 == null ? void 0 : arrow2.x) != null ? computedStaticOffset || arrow2.x : "";
|
|
2479
|
+
const arrowY = (arrow2 == null ? void 0 : arrow2.y) != null ? computedStaticOffset || arrow2.y : "";
|
|
2480
|
+
const dValue = d || "M0,0" + (" H" + width) + (" L" + (width - svgX) + "," + (height - svgY)) + (" Q" + width / 2 + "," + height + " " + svgX + "," + (height - svgY)) + " Z";
|
|
2481
|
+
const rotation = {
|
|
2482
|
+
top: isCustomShape ? "rotate(180deg)" : "",
|
|
2483
|
+
left: isCustomShape ? "rotate(90deg)" : "rotate(-90deg)",
|
|
2484
|
+
bottom: isCustomShape ? "" : "rotate(180deg)",
|
|
2485
|
+
right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
|
|
2486
|
+
}[side];
|
|
2487
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
2488
|
+
...rest,
|
|
2489
|
+
"aria-hidden": true,
|
|
2490
|
+
ref,
|
|
2491
|
+
width: isCustomShape ? width : width + computedStrokeWidth,
|
|
2492
|
+
height: width,
|
|
2493
|
+
viewBox: "0 0 " + width + " " + (height > width ? height : width),
|
|
2494
|
+
style: {
|
|
2495
|
+
position: "absolute",
|
|
2496
|
+
pointerEvents: "none",
|
|
2497
|
+
[xOffsetProp]: arrowX,
|
|
2498
|
+
[yOffsetProp]: arrowY,
|
|
2499
|
+
[side]: isVerticalSide || isCustomShape ? "100%" : "calc(100% - " + computedStrokeWidth / 2 + "px)",
|
|
2500
|
+
transform: [rotation, transform].filter((t) => !!t).join(" "),
|
|
2501
|
+
...restStyle
|
|
2502
|
+
},
|
|
2503
|
+
children: [computedStrokeWidth > 0 && /* @__PURE__ */ jsx("path", {
|
|
2504
|
+
clipPath: "url(#" + clipPathId + ")",
|
|
2505
|
+
fill: "none",
|
|
2506
|
+
stroke,
|
|
2507
|
+
strokeWidth: computedStrokeWidth + (d ? 0 : 1),
|
|
2508
|
+
d: dValue
|
|
2509
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
2510
|
+
stroke: computedStrokeWidth && !d ? rest.fill : "none",
|
|
2511
|
+
d: dValue
|
|
2512
|
+
}), /* @__PURE__ */ jsx("clipPath", {
|
|
2513
|
+
id: clipPathId,
|
|
2514
|
+
children: /* @__PURE__ */ jsx("rect", {
|
|
2515
|
+
x: -halfStrokeWidth,
|
|
2516
|
+
y: halfStrokeWidth * (isCustomShape ? -1 : 1),
|
|
2517
|
+
width: width + computedStrokeWidth,
|
|
2518
|
+
height: width
|
|
2519
|
+
})
|
|
2520
|
+
})]
|
|
2521
|
+
});
|
|
2522
|
+
});
|
|
2523
|
+
function createEventEmitter() {
|
|
2524
|
+
const map = /* @__PURE__ */ new Map();
|
|
2525
|
+
return {
|
|
2526
|
+
emit(event, data) {
|
|
2527
|
+
var _map$get;
|
|
2528
|
+
(_map$get = map.get(event)) == null || _map$get.forEach((listener) => listener(data));
|
|
2529
|
+
},
|
|
2530
|
+
on(event, listener) {
|
|
2531
|
+
if (!map.has(event)) {
|
|
2532
|
+
map.set(event, /* @__PURE__ */ new Set());
|
|
2533
|
+
}
|
|
2534
|
+
map.get(event).add(listener);
|
|
2535
|
+
},
|
|
2536
|
+
off(event, listener) {
|
|
2537
|
+
var _map$get2;
|
|
2538
|
+
(_map$get2 = map.get(event)) == null || _map$get2.delete(listener);
|
|
2539
|
+
}
|
|
2540
|
+
};
|
|
2541
|
+
}
|
|
2542
|
+
const FloatingNodeContext = /* @__PURE__ */ React.createContext(null);
|
|
2543
|
+
const FloatingTreeContext = /* @__PURE__ */ React.createContext(null);
|
|
2544
|
+
const useFloatingParentNodeId = () => {
|
|
2545
|
+
var _React$useContext;
|
|
2546
|
+
return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
|
|
2547
|
+
};
|
|
2548
|
+
const useFloatingTree = () => React.useContext(FloatingTreeContext);
|
|
2549
|
+
function createAttribute(name) {
|
|
2550
|
+
return "data-floating-ui-" + name;
|
|
2551
|
+
}
|
|
2552
|
+
function clearTimeoutIfSet(timeoutRef) {
|
|
2553
|
+
if (timeoutRef.current !== -1) {
|
|
2554
|
+
clearTimeout(timeoutRef.current);
|
|
2555
|
+
timeoutRef.current = -1;
|
|
2556
|
+
}
|
|
2557
|
+
}
|
|
2558
|
+
const safePolygonIdentifier = /* @__PURE__ */ createAttribute("safe-polygon");
|
|
2559
|
+
function getDelay(value, prop, pointerType) {
|
|
2560
|
+
if (pointerType && !isMouseLikePointerType(pointerType)) {
|
|
2561
|
+
return 0;
|
|
2562
|
+
}
|
|
2563
|
+
if (typeof value === "number") {
|
|
2564
|
+
return value;
|
|
2565
|
+
}
|
|
2566
|
+
if (typeof value === "function") {
|
|
2567
|
+
const result = value();
|
|
2568
|
+
if (typeof result === "number") {
|
|
2569
|
+
return result;
|
|
2570
|
+
}
|
|
2571
|
+
return result == null ? void 0 : result[prop];
|
|
2572
|
+
}
|
|
2573
|
+
return value == null ? void 0 : value[prop];
|
|
2574
|
+
}
|
|
2575
|
+
function getRestMs(value) {
|
|
2576
|
+
if (typeof value === "function") {
|
|
2577
|
+
return value();
|
|
2578
|
+
}
|
|
2579
|
+
return value;
|
|
2580
|
+
}
|
|
2581
|
+
function useHover(context, props) {
|
|
2582
|
+
if (props === void 0) {
|
|
2583
|
+
props = {};
|
|
2584
|
+
}
|
|
2585
|
+
const {
|
|
2586
|
+
open,
|
|
2587
|
+
onOpenChange,
|
|
2588
|
+
dataRef,
|
|
2589
|
+
events,
|
|
2590
|
+
elements
|
|
2591
|
+
} = context;
|
|
2592
|
+
const {
|
|
2593
|
+
enabled = true,
|
|
2594
|
+
delay = 0,
|
|
2595
|
+
handleClose = null,
|
|
2596
|
+
mouseOnly = false,
|
|
2597
|
+
restMs = 0,
|
|
2598
|
+
move = true
|
|
2599
|
+
} = props;
|
|
2600
|
+
const tree = useFloatingTree();
|
|
2601
|
+
const parentId = useFloatingParentNodeId();
|
|
2602
|
+
const handleCloseRef = useLatestRef$1(handleClose);
|
|
2603
|
+
const delayRef = useLatestRef$1(delay);
|
|
2604
|
+
const openRef = useLatestRef$1(open);
|
|
2605
|
+
const restMsRef = useLatestRef$1(restMs);
|
|
2606
|
+
const pointerTypeRef = React.useRef();
|
|
2607
|
+
const timeoutRef = React.useRef(-1);
|
|
2608
|
+
const handlerRef = React.useRef();
|
|
2609
|
+
const restTimeoutRef = React.useRef(-1);
|
|
2610
|
+
const blockMouseMoveRef = React.useRef(true);
|
|
2611
|
+
const performedPointerEventsMutationRef = React.useRef(false);
|
|
2612
|
+
const unbindMouseMoveRef = React.useRef(() => {
|
|
2613
|
+
});
|
|
2614
|
+
const restTimeoutPendingRef = React.useRef(false);
|
|
2615
|
+
const isHoverOpen = React.useCallback(() => {
|
|
2616
|
+
var _dataRef$current$open;
|
|
2617
|
+
const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
|
|
2618
|
+
return (type == null ? void 0 : type.includes("mouse")) && type !== "mousedown";
|
|
2619
|
+
}, [dataRef]);
|
|
2620
|
+
React.useEffect(() => {
|
|
2621
|
+
if (!enabled) return;
|
|
2622
|
+
function onOpenChange2(_ref) {
|
|
2623
|
+
let {
|
|
2624
|
+
open: open2
|
|
2625
|
+
} = _ref;
|
|
2626
|
+
if (!open2) {
|
|
2627
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2628
|
+
clearTimeoutIfSet(restTimeoutRef);
|
|
2629
|
+
blockMouseMoveRef.current = true;
|
|
2630
|
+
restTimeoutPendingRef.current = false;
|
|
2631
|
+
}
|
|
2632
|
+
}
|
|
2633
|
+
events.on("openchange", onOpenChange2);
|
|
2634
|
+
return () => {
|
|
2635
|
+
events.off("openchange", onOpenChange2);
|
|
2636
|
+
};
|
|
2637
|
+
}, [enabled, events]);
|
|
2638
|
+
React.useEffect(() => {
|
|
2639
|
+
if (!enabled) return;
|
|
2640
|
+
if (!handleCloseRef.current) return;
|
|
2641
|
+
if (!open) return;
|
|
2642
|
+
function onLeave(event) {
|
|
2643
|
+
if (isHoverOpen()) {
|
|
2644
|
+
onOpenChange(false, event, "hover");
|
|
2645
|
+
}
|
|
2646
|
+
}
|
|
2647
|
+
const html = getDocument$1(elements.floating).documentElement;
|
|
2648
|
+
html.addEventListener("mouseleave", onLeave);
|
|
2649
|
+
return () => {
|
|
2650
|
+
html.removeEventListener("mouseleave", onLeave);
|
|
2651
|
+
};
|
|
2652
|
+
}, [elements.floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
|
|
2653
|
+
const closeWithDelay = React.useCallback(function(event, runElseBranch, reason) {
|
|
2654
|
+
if (runElseBranch === void 0) {
|
|
2655
|
+
runElseBranch = true;
|
|
2656
|
+
}
|
|
2657
|
+
if (reason === void 0) {
|
|
2658
|
+
reason = "hover";
|
|
2659
|
+
}
|
|
2660
|
+
const closeDelay = getDelay(delayRef.current, "close", pointerTypeRef.current);
|
|
2661
|
+
if (closeDelay && !handlerRef.current) {
|
|
2662
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2663
|
+
timeoutRef.current = window.setTimeout(() => onOpenChange(false, event, reason), closeDelay);
|
|
2664
|
+
} else if (runElseBranch) {
|
|
2665
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2666
|
+
onOpenChange(false, event, reason);
|
|
2667
|
+
}
|
|
2668
|
+
}, [delayRef, onOpenChange]);
|
|
2669
|
+
const cleanupMouseMoveHandler = useEffectEvent(() => {
|
|
2670
|
+
unbindMouseMoveRef.current();
|
|
2671
|
+
handlerRef.current = void 0;
|
|
2672
|
+
});
|
|
2673
|
+
const clearPointerEvents = useEffectEvent(() => {
|
|
2674
|
+
if (performedPointerEventsMutationRef.current) {
|
|
2675
|
+
const body = getDocument$1(elements.floating).body;
|
|
2676
|
+
body.style.pointerEvents = "";
|
|
2677
|
+
body.removeAttribute(safePolygonIdentifier);
|
|
2678
|
+
performedPointerEventsMutationRef.current = false;
|
|
2679
|
+
}
|
|
2680
|
+
});
|
|
2681
|
+
const isClickLikeOpenEvent = useEffectEvent(() => {
|
|
2682
|
+
return dataRef.current.openEvent ? ["click", "mousedown"].includes(dataRef.current.openEvent.type) : false;
|
|
2683
|
+
});
|
|
2684
|
+
React.useEffect(() => {
|
|
2685
|
+
if (!enabled) return;
|
|
2686
|
+
function onReferenceMouseEnter(event) {
|
|
2687
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2688
|
+
blockMouseMoveRef.current = false;
|
|
2689
|
+
if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, "open")) {
|
|
2690
|
+
return;
|
|
2691
|
+
}
|
|
2692
|
+
const openDelay = getDelay(delayRef.current, "open", pointerTypeRef.current);
|
|
2693
|
+
if (openDelay) {
|
|
2694
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
2695
|
+
if (!openRef.current) {
|
|
2696
|
+
onOpenChange(true, event, "hover");
|
|
2697
|
+
}
|
|
2698
|
+
}, openDelay);
|
|
2699
|
+
} else if (!open) {
|
|
2700
|
+
onOpenChange(true, event, "hover");
|
|
2701
|
+
}
|
|
2702
|
+
}
|
|
2703
|
+
function onReferenceMouseLeave(event) {
|
|
2704
|
+
if (isClickLikeOpenEvent()) {
|
|
2705
|
+
clearPointerEvents();
|
|
2706
|
+
return;
|
|
2707
|
+
}
|
|
2708
|
+
unbindMouseMoveRef.current();
|
|
2709
|
+
const doc = getDocument$1(elements.floating);
|
|
2710
|
+
clearTimeoutIfSet(restTimeoutRef);
|
|
2711
|
+
restTimeoutPendingRef.current = false;
|
|
2712
|
+
if (handleCloseRef.current && dataRef.current.floatingContext) {
|
|
2713
|
+
if (!open) {
|
|
2714
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2715
|
+
}
|
|
2716
|
+
handlerRef.current = handleCloseRef.current({
|
|
2717
|
+
...dataRef.current.floatingContext,
|
|
2718
|
+
tree,
|
|
2719
|
+
x: event.clientX,
|
|
2720
|
+
y: event.clientY,
|
|
2721
|
+
onClose() {
|
|
2722
|
+
clearPointerEvents();
|
|
2723
|
+
cleanupMouseMoveHandler();
|
|
2724
|
+
if (!isClickLikeOpenEvent()) {
|
|
2725
|
+
closeWithDelay(event, true, "safe-polygon");
|
|
2726
|
+
}
|
|
2727
|
+
}
|
|
2728
|
+
});
|
|
2729
|
+
const handler = handlerRef.current;
|
|
2730
|
+
doc.addEventListener("mousemove", handler);
|
|
2731
|
+
unbindMouseMoveRef.current = () => {
|
|
2732
|
+
doc.removeEventListener("mousemove", handler);
|
|
2733
|
+
};
|
|
2734
|
+
return;
|
|
2735
|
+
}
|
|
2736
|
+
const shouldClose = pointerTypeRef.current === "touch" ? !contains(elements.floating, event.relatedTarget) : true;
|
|
2737
|
+
if (shouldClose) {
|
|
2738
|
+
closeWithDelay(event);
|
|
2739
|
+
}
|
|
2740
|
+
}
|
|
2741
|
+
function onScrollMouseLeave(event) {
|
|
2742
|
+
if (isClickLikeOpenEvent()) return;
|
|
2743
|
+
if (!dataRef.current.floatingContext) return;
|
|
2744
|
+
handleCloseRef.current == null || handleCloseRef.current({
|
|
2745
|
+
...dataRef.current.floatingContext,
|
|
2746
|
+
tree,
|
|
2747
|
+
x: event.clientX,
|
|
2748
|
+
y: event.clientY,
|
|
2749
|
+
onClose() {
|
|
2750
|
+
clearPointerEvents();
|
|
2751
|
+
cleanupMouseMoveHandler();
|
|
2752
|
+
if (!isClickLikeOpenEvent()) {
|
|
2753
|
+
closeWithDelay(event);
|
|
2754
|
+
}
|
|
2755
|
+
}
|
|
2756
|
+
})(event);
|
|
2757
|
+
}
|
|
2758
|
+
function onFloatingMouseEnter() {
|
|
2759
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2760
|
+
}
|
|
2761
|
+
function onFloatingMouseLeave(event) {
|
|
2762
|
+
if (!isClickLikeOpenEvent()) {
|
|
2763
|
+
closeWithDelay(event, false);
|
|
2764
|
+
}
|
|
2765
|
+
}
|
|
2766
|
+
if (isElement(elements.domReference)) {
|
|
2767
|
+
const reference2 = elements.domReference;
|
|
2768
|
+
const floating = elements.floating;
|
|
2769
|
+
if (open) {
|
|
2770
|
+
reference2.addEventListener("mouseleave", onScrollMouseLeave);
|
|
2771
|
+
}
|
|
2772
|
+
if (move) {
|
|
2773
|
+
reference2.addEventListener("mousemove", onReferenceMouseEnter, {
|
|
2774
|
+
once: true
|
|
2775
|
+
});
|
|
2776
|
+
}
|
|
2777
|
+
reference2.addEventListener("mouseenter", onReferenceMouseEnter);
|
|
2778
|
+
reference2.addEventListener("mouseleave", onReferenceMouseLeave);
|
|
2779
|
+
if (floating) {
|
|
2780
|
+
floating.addEventListener("mouseleave", onScrollMouseLeave);
|
|
2781
|
+
floating.addEventListener("mouseenter", onFloatingMouseEnter);
|
|
2782
|
+
floating.addEventListener("mouseleave", onFloatingMouseLeave);
|
|
2783
|
+
}
|
|
2784
|
+
return () => {
|
|
2785
|
+
if (open) {
|
|
2786
|
+
reference2.removeEventListener("mouseleave", onScrollMouseLeave);
|
|
2787
|
+
}
|
|
2788
|
+
if (move) {
|
|
2789
|
+
reference2.removeEventListener("mousemove", onReferenceMouseEnter);
|
|
2790
|
+
}
|
|
2791
|
+
reference2.removeEventListener("mouseenter", onReferenceMouseEnter);
|
|
2792
|
+
reference2.removeEventListener("mouseleave", onReferenceMouseLeave);
|
|
2793
|
+
if (floating) {
|
|
2794
|
+
floating.removeEventListener("mouseleave", onScrollMouseLeave);
|
|
2795
|
+
floating.removeEventListener("mouseenter", onFloatingMouseEnter);
|
|
2796
|
+
floating.removeEventListener("mouseleave", onFloatingMouseLeave);
|
|
2797
|
+
}
|
|
2798
|
+
};
|
|
2799
|
+
}
|
|
2800
|
+
}, [elements, enabled, context, mouseOnly, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, openRef, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef]);
|
|
2801
|
+
index$1(() => {
|
|
2802
|
+
var _handleCloseRef$curre;
|
|
2803
|
+
if (!enabled) return;
|
|
2804
|
+
if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
|
|
2805
|
+
performedPointerEventsMutationRef.current = true;
|
|
2806
|
+
const floatingEl = elements.floating;
|
|
2807
|
+
if (isElement(elements.domReference) && floatingEl) {
|
|
2808
|
+
var _tree$nodesRef$curren;
|
|
2809
|
+
const body = getDocument$1(elements.floating).body;
|
|
2810
|
+
body.setAttribute(safePolygonIdentifier, "");
|
|
2811
|
+
const ref = elements.domReference;
|
|
2812
|
+
const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find((node) => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
|
|
2813
|
+
if (parentFloating) {
|
|
2814
|
+
parentFloating.style.pointerEvents = "";
|
|
2815
|
+
}
|
|
2816
|
+
body.style.pointerEvents = "none";
|
|
2817
|
+
ref.style.pointerEvents = "auto";
|
|
2818
|
+
floatingEl.style.pointerEvents = "auto";
|
|
2819
|
+
return () => {
|
|
2820
|
+
body.style.pointerEvents = "";
|
|
2821
|
+
ref.style.pointerEvents = "";
|
|
2822
|
+
floatingEl.style.pointerEvents = "";
|
|
2823
|
+
};
|
|
2824
|
+
}
|
|
2825
|
+
}
|
|
2826
|
+
}, [enabled, open, parentId, elements, tree, handleCloseRef, isHoverOpen]);
|
|
2827
|
+
index$1(() => {
|
|
2828
|
+
if (!open) {
|
|
2829
|
+
pointerTypeRef.current = void 0;
|
|
2830
|
+
restTimeoutPendingRef.current = false;
|
|
2831
|
+
cleanupMouseMoveHandler();
|
|
2832
|
+
clearPointerEvents();
|
|
2833
|
+
}
|
|
2834
|
+
}, [open, cleanupMouseMoveHandler, clearPointerEvents]);
|
|
2835
|
+
React.useEffect(() => {
|
|
2836
|
+
return () => {
|
|
2837
|
+
cleanupMouseMoveHandler();
|
|
2838
|
+
clearTimeoutIfSet(timeoutRef);
|
|
2839
|
+
clearTimeoutIfSet(restTimeoutRef);
|
|
2840
|
+
clearPointerEvents();
|
|
2841
|
+
};
|
|
2842
|
+
}, [enabled, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents]);
|
|
2843
|
+
const reference = React.useMemo(() => {
|
|
2844
|
+
function setPointerRef(event) {
|
|
2845
|
+
pointerTypeRef.current = event.pointerType;
|
|
2846
|
+
}
|
|
2847
|
+
return {
|
|
2848
|
+
onPointerDown: setPointerRef,
|
|
2849
|
+
onPointerEnter: setPointerRef,
|
|
2850
|
+
onMouseMove(event) {
|
|
2851
|
+
const {
|
|
2852
|
+
nativeEvent
|
|
2853
|
+
} = event;
|
|
2854
|
+
function handleMouseMove() {
|
|
2855
|
+
if (!blockMouseMoveRef.current && !openRef.current) {
|
|
2856
|
+
onOpenChange(true, nativeEvent, "hover");
|
|
2857
|
+
}
|
|
2858
|
+
}
|
|
2859
|
+
if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
|
|
2860
|
+
return;
|
|
2861
|
+
}
|
|
2862
|
+
if (open || getRestMs(restMsRef.current) === 0) {
|
|
2863
|
+
return;
|
|
2864
|
+
}
|
|
2865
|
+
if (restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
|
|
2866
|
+
return;
|
|
2867
|
+
}
|
|
2868
|
+
clearTimeoutIfSet(restTimeoutRef);
|
|
2869
|
+
if (pointerTypeRef.current === "touch") {
|
|
2870
|
+
handleMouseMove();
|
|
2871
|
+
} else {
|
|
2872
|
+
restTimeoutPendingRef.current = true;
|
|
2873
|
+
restTimeoutRef.current = window.setTimeout(handleMouseMove, getRestMs(restMsRef.current));
|
|
2874
|
+
}
|
|
2875
|
+
}
|
|
2876
|
+
};
|
|
2877
|
+
}, [mouseOnly, onOpenChange, open, openRef, restMsRef]);
|
|
2878
|
+
return React.useMemo(() => enabled ? {
|
|
2879
|
+
reference
|
|
2880
|
+
} : {}, [enabled, reference]);
|
|
2881
|
+
}
|
|
2882
|
+
const NOOP = () => {
|
|
2883
|
+
};
|
|
2884
|
+
const FloatingDelayGroupContext = /* @__PURE__ */ React.createContext({
|
|
2885
|
+
delay: 0,
|
|
2886
|
+
initialDelay: 0,
|
|
2887
|
+
timeoutMs: 0,
|
|
2888
|
+
currentId: null,
|
|
2889
|
+
setCurrentId: NOOP,
|
|
2890
|
+
setState: NOOP,
|
|
2891
|
+
isInstantPhase: false
|
|
2892
|
+
});
|
|
2893
|
+
function FloatingDelayGroup(props) {
|
|
2894
|
+
const {
|
|
2895
|
+
children,
|
|
2896
|
+
delay,
|
|
2897
|
+
timeoutMs = 0
|
|
2898
|
+
} = props;
|
|
2899
|
+
const [state, setState] = React.useReducer((prev, next) => ({
|
|
2900
|
+
...prev,
|
|
2901
|
+
...next
|
|
2902
|
+
}), {
|
|
2903
|
+
delay,
|
|
2904
|
+
timeoutMs,
|
|
2905
|
+
initialDelay: delay,
|
|
2906
|
+
currentId: null,
|
|
2907
|
+
isInstantPhase: false
|
|
2908
|
+
});
|
|
2909
|
+
const initialCurrentIdRef = React.useRef(null);
|
|
2910
|
+
const setCurrentId = React.useCallback((currentId) => {
|
|
2911
|
+
setState({
|
|
2912
|
+
currentId
|
|
2913
|
+
});
|
|
2914
|
+
}, []);
|
|
2915
|
+
index$1(() => {
|
|
2916
|
+
if (state.currentId) {
|
|
2917
|
+
if (initialCurrentIdRef.current === null) {
|
|
2918
|
+
initialCurrentIdRef.current = state.currentId;
|
|
2919
|
+
} else if (!state.isInstantPhase) {
|
|
2920
|
+
setState({
|
|
2921
|
+
isInstantPhase: true
|
|
2922
|
+
});
|
|
2923
|
+
}
|
|
2924
|
+
} else {
|
|
2925
|
+
if (state.isInstantPhase) {
|
|
2926
|
+
setState({
|
|
2927
|
+
isInstantPhase: false
|
|
2928
|
+
});
|
|
2929
|
+
}
|
|
2930
|
+
initialCurrentIdRef.current = null;
|
|
2931
|
+
}
|
|
2932
|
+
}, [state.currentId, state.isInstantPhase]);
|
|
2933
|
+
return /* @__PURE__ */ jsx(FloatingDelayGroupContext.Provider, {
|
|
2934
|
+
value: React.useMemo(() => ({
|
|
2935
|
+
...state,
|
|
2936
|
+
setState,
|
|
2937
|
+
setCurrentId
|
|
2938
|
+
}), [state, setCurrentId]),
|
|
2939
|
+
children
|
|
2940
|
+
});
|
|
2941
|
+
}
|
|
2942
|
+
let rafId = 0;
|
|
2943
|
+
function enqueueFocus(el, options) {
|
|
2944
|
+
if (options === void 0) {
|
|
2945
|
+
options = {};
|
|
2946
|
+
}
|
|
2947
|
+
const {
|
|
2948
|
+
preventScroll = false,
|
|
2949
|
+
cancelPrevious = true,
|
|
2950
|
+
sync = false
|
|
2951
|
+
} = options;
|
|
2952
|
+
cancelPrevious && cancelAnimationFrame(rafId);
|
|
2953
|
+
const exec = () => el == null ? void 0 : el.focus({
|
|
2954
|
+
preventScroll
|
|
2955
|
+
});
|
|
2956
|
+
if (sync) {
|
|
2957
|
+
exec();
|
|
2958
|
+
} else {
|
|
2959
|
+
rafId = requestAnimationFrame(exec);
|
|
2960
|
+
}
|
|
2961
|
+
}
|
|
2962
|
+
function getDocument(node) {
|
|
2963
|
+
return (node == null ? void 0 : node.ownerDocument) || document;
|
|
2964
|
+
}
|
|
2965
|
+
let counterMap = /* @__PURE__ */ new WeakMap();
|
|
2966
|
+
let uncontrolledElementsSet = /* @__PURE__ */ new WeakSet();
|
|
2967
|
+
let markerMap = {};
|
|
2968
|
+
let lockCount$1 = 0;
|
|
2969
|
+
const supportsInert = () => typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
|
|
2970
|
+
const unwrapHost = (node) => node && (node.host || unwrapHost(node.parentNode));
|
|
2971
|
+
const correctElements = (parent, targets) => targets.map((target) => {
|
|
2972
|
+
if (parent.contains(target)) {
|
|
2973
|
+
return target;
|
|
2974
|
+
}
|
|
2975
|
+
const correctedTarget = unwrapHost(target);
|
|
2976
|
+
if (parent.contains(correctedTarget)) {
|
|
2977
|
+
return correctedTarget;
|
|
2978
|
+
}
|
|
2979
|
+
return null;
|
|
2980
|
+
}).filter((x) => x != null);
|
|
2981
|
+
function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
|
|
2982
|
+
const markerName = "data-floating-ui-inert";
|
|
2983
|
+
const controlAttribute = inert ? "inert" : ariaHidden ? "aria-hidden" : null;
|
|
2984
|
+
const avoidElements = correctElements(body, uncorrectedAvoidElements);
|
|
2985
|
+
const elementsToKeep = /* @__PURE__ */ new Set();
|
|
2986
|
+
const elementsToStop = new Set(avoidElements);
|
|
2987
|
+
const hiddenElements = [];
|
|
2988
|
+
if (!markerMap[markerName]) {
|
|
2989
|
+
markerMap[markerName] = /* @__PURE__ */ new WeakMap();
|
|
2990
|
+
}
|
|
2991
|
+
const markerCounter = markerMap[markerName];
|
|
2992
|
+
avoidElements.forEach(keep);
|
|
2993
|
+
deep(body);
|
|
2994
|
+
elementsToKeep.clear();
|
|
2995
|
+
function keep(el) {
|
|
2996
|
+
if (!el || elementsToKeep.has(el)) {
|
|
2997
|
+
return;
|
|
2998
|
+
}
|
|
2999
|
+
elementsToKeep.add(el);
|
|
3000
|
+
el.parentNode && keep(el.parentNode);
|
|
3001
|
+
}
|
|
3002
|
+
function deep(parent) {
|
|
3003
|
+
if (!parent || elementsToStop.has(parent)) {
|
|
3004
|
+
return;
|
|
3005
|
+
}
|
|
3006
|
+
[].forEach.call(parent.children, (node) => {
|
|
3007
|
+
if (getNodeName(node) === "script") return;
|
|
3008
|
+
if (elementsToKeep.has(node)) {
|
|
3009
|
+
deep(node);
|
|
3010
|
+
} else {
|
|
3011
|
+
const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
|
|
3012
|
+
const alreadyHidden = attr !== null && attr !== "false";
|
|
3013
|
+
const currentCounterValue = counterMap.get(node) || 0;
|
|
3014
|
+
const counterValue = controlAttribute ? currentCounterValue + 1 : currentCounterValue;
|
|
3015
|
+
const markerValue = (markerCounter.get(node) || 0) + 1;
|
|
3016
|
+
counterMap.set(node, counterValue);
|
|
3017
|
+
markerCounter.set(node, markerValue);
|
|
3018
|
+
hiddenElements.push(node);
|
|
3019
|
+
if (counterValue === 1 && alreadyHidden) {
|
|
3020
|
+
uncontrolledElementsSet.add(node);
|
|
3021
|
+
}
|
|
3022
|
+
if (markerValue === 1) {
|
|
3023
|
+
node.setAttribute(markerName, "");
|
|
3024
|
+
}
|
|
3025
|
+
if (!alreadyHidden && controlAttribute) {
|
|
3026
|
+
node.setAttribute(controlAttribute, controlAttribute === "inert" ? "" : "true");
|
|
3027
|
+
}
|
|
3028
|
+
}
|
|
3029
|
+
});
|
|
3030
|
+
}
|
|
3031
|
+
lockCount$1++;
|
|
3032
|
+
return () => {
|
|
3033
|
+
hiddenElements.forEach((element) => {
|
|
3034
|
+
const currentCounterValue = counterMap.get(element) || 0;
|
|
3035
|
+
const counterValue = controlAttribute ? currentCounterValue - 1 : currentCounterValue;
|
|
3036
|
+
const markerValue = (markerCounter.get(element) || 0) - 1;
|
|
3037
|
+
counterMap.set(element, counterValue);
|
|
3038
|
+
markerCounter.set(element, markerValue);
|
|
3039
|
+
if (!counterValue) {
|
|
3040
|
+
if (!uncontrolledElementsSet.has(element) && controlAttribute) {
|
|
3041
|
+
element.removeAttribute(controlAttribute);
|
|
3042
|
+
}
|
|
3043
|
+
uncontrolledElementsSet.delete(element);
|
|
3044
|
+
}
|
|
3045
|
+
if (!markerValue) {
|
|
3046
|
+
element.removeAttribute(markerName);
|
|
3047
|
+
}
|
|
3048
|
+
});
|
|
3049
|
+
lockCount$1--;
|
|
3050
|
+
if (!lockCount$1) {
|
|
3051
|
+
counterMap = /* @__PURE__ */ new WeakMap();
|
|
3052
|
+
counterMap = /* @__PURE__ */ new WeakMap();
|
|
3053
|
+
uncontrolledElementsSet = /* @__PURE__ */ new WeakSet();
|
|
3054
|
+
markerMap = {};
|
|
3055
|
+
}
|
|
3056
|
+
};
|
|
3057
|
+
}
|
|
3058
|
+
function markOthers(avoidElements, ariaHidden, inert) {
|
|
3059
|
+
if (ariaHidden === void 0) {
|
|
3060
|
+
ariaHidden = false;
|
|
3061
|
+
}
|
|
3062
|
+
if (inert === void 0) {
|
|
3063
|
+
inert = false;
|
|
3064
|
+
}
|
|
3065
|
+
const body = getDocument(avoidElements[0]).body;
|
|
3066
|
+
return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll("[aria-live]"))), body, ariaHidden, inert);
|
|
3067
|
+
}
|
|
3068
|
+
const HIDDEN_STYLES = {
|
|
3069
|
+
border: 0,
|
|
3070
|
+
clip: "rect(0 0 0 0)",
|
|
3071
|
+
height: "1px",
|
|
3072
|
+
margin: "-1px",
|
|
3073
|
+
overflow: "hidden",
|
|
3074
|
+
padding: 0,
|
|
3075
|
+
position: "fixed",
|
|
3076
|
+
whiteSpace: "nowrap",
|
|
3077
|
+
width: "1px",
|
|
3078
|
+
top: 0,
|
|
3079
|
+
left: 0
|
|
3080
|
+
};
|
|
3081
|
+
const FocusGuard = /* @__PURE__ */ React.forwardRef(function FocusGuard2(props, ref) {
|
|
3082
|
+
const [role, setRole] = React.useState();
|
|
3083
|
+
index$1(() => {
|
|
3084
|
+
if (isSafari()) {
|
|
3085
|
+
setRole("button");
|
|
3086
|
+
}
|
|
3087
|
+
}, []);
|
|
3088
|
+
const restProps = {
|
|
3089
|
+
ref,
|
|
3090
|
+
tabIndex: 0,
|
|
3091
|
+
// Role is only for VoiceOver
|
|
3092
|
+
role,
|
|
3093
|
+
"aria-hidden": role ? void 0 : true,
|
|
3094
|
+
[createAttribute("focus-guard")]: "",
|
|
3095
|
+
style: HIDDEN_STYLES
|
|
3096
|
+
};
|
|
3097
|
+
return /* @__PURE__ */ jsx("span", {
|
|
3098
|
+
...props,
|
|
3099
|
+
...restProps
|
|
3100
|
+
});
|
|
3101
|
+
});
|
|
3102
|
+
const PortalContext = /* @__PURE__ */ React.createContext(null);
|
|
3103
|
+
const usePortalContext = () => React.useContext(PortalContext);
|
|
3104
|
+
function useLiteMergeRefs(refs) {
|
|
3105
|
+
return React.useMemo(() => {
|
|
3106
|
+
return (value) => {
|
|
3107
|
+
refs.forEach((ref) => {
|
|
3108
|
+
if (ref) {
|
|
3109
|
+
ref.current = value;
|
|
3110
|
+
}
|
|
3111
|
+
});
|
|
3112
|
+
};
|
|
3113
|
+
}, refs);
|
|
3114
|
+
}
|
|
3115
|
+
const LIST_LIMIT = 20;
|
|
3116
|
+
let previouslyFocusedElements = [];
|
|
3117
|
+
function addPreviouslyFocusedElement(element) {
|
|
3118
|
+
previouslyFocusedElements = previouslyFocusedElements.filter((el) => el.isConnected);
|
|
3119
|
+
if (element && getNodeName(element) !== "body") {
|
|
3120
|
+
previouslyFocusedElements.push(element);
|
|
3121
|
+
if (previouslyFocusedElements.length > LIST_LIMIT) {
|
|
3122
|
+
previouslyFocusedElements = previouslyFocusedElements.slice(-20);
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
}
|
|
3126
|
+
function getPreviouslyFocusedElement() {
|
|
3127
|
+
return previouslyFocusedElements.slice().reverse().find((el) => el.isConnected);
|
|
3128
|
+
}
|
|
3129
|
+
function getFirstTabbableElement(container) {
|
|
3130
|
+
const tabbableOptions = getTabbableOptions();
|
|
3131
|
+
if (isTabbable(container, tabbableOptions)) {
|
|
3132
|
+
return container;
|
|
3133
|
+
}
|
|
3134
|
+
return tabbable(container, tabbableOptions)[0] || container;
|
|
3135
|
+
}
|
|
3136
|
+
function handleTabIndex(floatingFocusElement, orderRef) {
|
|
3137
|
+
var _floatingFocusElement;
|
|
3138
|
+
if (!orderRef.current.includes("floating") && !((_floatingFocusElement = floatingFocusElement.getAttribute("role")) != null && _floatingFocusElement.includes("dialog"))) {
|
|
3139
|
+
return;
|
|
3140
|
+
}
|
|
3141
|
+
const options = getTabbableOptions();
|
|
3142
|
+
const focusableElements = focusable(floatingFocusElement, options);
|
|
3143
|
+
const tabbableContent = focusableElements.filter((element) => {
|
|
3144
|
+
const dataTabIndex = element.getAttribute("data-tabindex") || "";
|
|
3145
|
+
return isTabbable(element, options) || element.hasAttribute("data-tabindex") && !dataTabIndex.startsWith("-");
|
|
3146
|
+
});
|
|
3147
|
+
const tabIndex = floatingFocusElement.getAttribute("tabindex");
|
|
3148
|
+
if (orderRef.current.includes("floating") || tabbableContent.length === 0) {
|
|
3149
|
+
if (tabIndex !== "0") {
|
|
3150
|
+
floatingFocusElement.setAttribute("tabindex", "0");
|
|
3151
|
+
}
|
|
3152
|
+
} else if (tabIndex !== "-1" || floatingFocusElement.hasAttribute("data-tabindex") && floatingFocusElement.getAttribute("data-tabindex") !== "-1") {
|
|
3153
|
+
floatingFocusElement.setAttribute("tabindex", "-1");
|
|
3154
|
+
floatingFocusElement.setAttribute("data-tabindex", "-1");
|
|
3155
|
+
}
|
|
3156
|
+
}
|
|
3157
|
+
const VisuallyHiddenDismiss = /* @__PURE__ */ React.forwardRef(function VisuallyHiddenDismiss2(props, ref) {
|
|
3158
|
+
return /* @__PURE__ */ jsx("button", {
|
|
3159
|
+
...props,
|
|
3160
|
+
type: "button",
|
|
3161
|
+
ref,
|
|
3162
|
+
tabIndex: -1,
|
|
3163
|
+
style: HIDDEN_STYLES
|
|
3164
|
+
});
|
|
3165
|
+
});
|
|
3166
|
+
function FloatingFocusManager(props) {
|
|
3167
|
+
const {
|
|
3168
|
+
context,
|
|
3169
|
+
children,
|
|
3170
|
+
disabled = false,
|
|
3171
|
+
order = ["content"],
|
|
3172
|
+
guards: _guards = true,
|
|
3173
|
+
initialFocus = 0,
|
|
3174
|
+
returnFocus = true,
|
|
3175
|
+
restoreFocus = false,
|
|
3176
|
+
modal = true,
|
|
3177
|
+
visuallyHiddenDismiss = false,
|
|
3178
|
+
closeOnFocusOut = true,
|
|
3179
|
+
outsideElementsInert = false,
|
|
3180
|
+
getInsideElements: _getInsideElements = () => []
|
|
3181
|
+
} = props;
|
|
3182
|
+
const {
|
|
3183
|
+
open,
|
|
3184
|
+
onOpenChange,
|
|
3185
|
+
events,
|
|
3186
|
+
dataRef,
|
|
3187
|
+
elements: {
|
|
3188
|
+
domReference,
|
|
3189
|
+
floating
|
|
3190
|
+
}
|
|
3191
|
+
} = context;
|
|
3192
|
+
const getNodeId = useEffectEvent(() => {
|
|
3193
|
+
var _dataRef$current$floa;
|
|
3194
|
+
return (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
|
|
3195
|
+
});
|
|
3196
|
+
const getInsideElements = useEffectEvent(_getInsideElements);
|
|
3197
|
+
const ignoreInitialFocus = typeof initialFocus === "number" && initialFocus < 0;
|
|
3198
|
+
const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
|
|
3199
|
+
const inertSupported = supportsInert();
|
|
3200
|
+
const guards = inertSupported ? _guards : true;
|
|
3201
|
+
const useInert = !guards || inertSupported && outsideElementsInert;
|
|
3202
|
+
const orderRef = useLatestRef$1(order);
|
|
3203
|
+
const initialFocusRef = useLatestRef$1(initialFocus);
|
|
3204
|
+
const returnFocusRef = useLatestRef$1(returnFocus);
|
|
3205
|
+
const tree = useFloatingTree();
|
|
3206
|
+
const portalContext = usePortalContext();
|
|
3207
|
+
const startDismissButtonRef = React.useRef(null);
|
|
3208
|
+
const endDismissButtonRef = React.useRef(null);
|
|
3209
|
+
const preventReturnFocusRef = React.useRef(false);
|
|
3210
|
+
const isPointerDownRef = React.useRef(false);
|
|
3211
|
+
const tabbableIndexRef = React.useRef(-1);
|
|
3212
|
+
const isInsidePortal = portalContext != null;
|
|
3213
|
+
const floatingFocusElement = getFloatingFocusElement(floating);
|
|
3214
|
+
const getTabbableContent = useEffectEvent(function(container) {
|
|
3215
|
+
if (container === void 0) {
|
|
3216
|
+
container = floatingFocusElement;
|
|
3217
|
+
}
|
|
3218
|
+
return container ? tabbable(container, getTabbableOptions()) : [];
|
|
3219
|
+
});
|
|
3220
|
+
const getTabbableElements = useEffectEvent((container) => {
|
|
3221
|
+
const content = getTabbableContent(container);
|
|
3222
|
+
return orderRef.current.map((type) => {
|
|
3223
|
+
if (domReference && type === "reference") {
|
|
3224
|
+
return domReference;
|
|
3225
|
+
}
|
|
3226
|
+
if (floatingFocusElement && type === "floating") {
|
|
3227
|
+
return floatingFocusElement;
|
|
3228
|
+
}
|
|
3229
|
+
return content;
|
|
3230
|
+
}).filter(Boolean).flat();
|
|
3231
|
+
});
|
|
3232
|
+
React.useEffect(() => {
|
|
3233
|
+
if (disabled) return;
|
|
3234
|
+
if (!modal) return;
|
|
3235
|
+
function onKeyDown(event) {
|
|
3236
|
+
if (event.key === "Tab") {
|
|
3237
|
+
if (contains(floatingFocusElement, activeElement(getDocument$1(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
3238
|
+
stopEvent(event);
|
|
3239
|
+
}
|
|
3240
|
+
const els = getTabbableElements();
|
|
3241
|
+
const target = getTarget(event);
|
|
3242
|
+
if (orderRef.current[0] === "reference" && target === domReference) {
|
|
3243
|
+
stopEvent(event);
|
|
3244
|
+
if (event.shiftKey) {
|
|
3245
|
+
enqueueFocus(els[els.length - 1]);
|
|
3246
|
+
} else {
|
|
3247
|
+
enqueueFocus(els[1]);
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3250
|
+
if (orderRef.current[1] === "floating" && target === floatingFocusElement && event.shiftKey) {
|
|
3251
|
+
stopEvent(event);
|
|
3252
|
+
enqueueFocus(els[0]);
|
|
3253
|
+
}
|
|
3254
|
+
}
|
|
3255
|
+
}
|
|
3256
|
+
const doc = getDocument$1(floatingFocusElement);
|
|
3257
|
+
doc.addEventListener("keydown", onKeyDown);
|
|
3258
|
+
return () => {
|
|
3259
|
+
doc.removeEventListener("keydown", onKeyDown);
|
|
3260
|
+
};
|
|
3261
|
+
}, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
|
|
3262
|
+
React.useEffect(() => {
|
|
3263
|
+
if (disabled) return;
|
|
3264
|
+
if (!floating) return;
|
|
3265
|
+
function handleFocusIn(event) {
|
|
3266
|
+
const target = getTarget(event);
|
|
3267
|
+
const tabbableContent = getTabbableContent();
|
|
3268
|
+
const tabbableIndex = tabbableContent.indexOf(target);
|
|
3269
|
+
if (tabbableIndex !== -1) {
|
|
3270
|
+
tabbableIndexRef.current = tabbableIndex;
|
|
3271
|
+
}
|
|
3272
|
+
}
|
|
3273
|
+
floating.addEventListener("focusin", handleFocusIn);
|
|
3274
|
+
return () => {
|
|
3275
|
+
floating.removeEventListener("focusin", handleFocusIn);
|
|
3276
|
+
};
|
|
3277
|
+
}, [disabled, floating, getTabbableContent]);
|
|
3278
|
+
React.useEffect(() => {
|
|
3279
|
+
if (disabled) return;
|
|
3280
|
+
if (!closeOnFocusOut) return;
|
|
3281
|
+
function handlePointerDown() {
|
|
3282
|
+
isPointerDownRef.current = true;
|
|
3283
|
+
setTimeout(() => {
|
|
3284
|
+
isPointerDownRef.current = false;
|
|
3285
|
+
});
|
|
3286
|
+
}
|
|
3287
|
+
function handleFocusOutside(event) {
|
|
3288
|
+
const relatedTarget = event.relatedTarget;
|
|
3289
|
+
const currentTarget = event.currentTarget;
|
|
3290
|
+
queueMicrotask(() => {
|
|
3291
|
+
const nodeId = getNodeId();
|
|
3292
|
+
const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute("focus-guard")) || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find((node) => {
|
|
3293
|
+
var _node$context, _node$context2;
|
|
3294
|
+
return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
|
|
3295
|
+
}) || getNodeAncestors(tree.nodesRef.current, nodeId).find((node) => {
|
|
3296
|
+
var _node$context3, _node$context4, _node$context5;
|
|
3297
|
+
return [(_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating, getFloatingFocusElement((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.floating)].includes(relatedTarget) || ((_node$context5 = node.context) == null ? void 0 : _node$context5.elements.domReference) === relatedTarget;
|
|
3298
|
+
})));
|
|
3299
|
+
if (currentTarget === domReference && floatingFocusElement) {
|
|
3300
|
+
handleTabIndex(floatingFocusElement, orderRef);
|
|
3301
|
+
}
|
|
3302
|
+
if (restoreFocus && movedToUnrelatedNode && activeElement(getDocument$1(floatingFocusElement)) === getDocument$1(floatingFocusElement).body) {
|
|
3303
|
+
if (isHTMLElement(floatingFocusElement)) {
|
|
3304
|
+
floatingFocusElement.focus();
|
|
3305
|
+
}
|
|
3306
|
+
const prevTabbableIndex = tabbableIndexRef.current;
|
|
3307
|
+
const tabbableContent = getTabbableContent();
|
|
3308
|
+
const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
|
|
3309
|
+
if (isHTMLElement(nodeToFocus)) {
|
|
3310
|
+
nodeToFocus.focus();
|
|
3311
|
+
}
|
|
3312
|
+
}
|
|
3313
|
+
if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current && // Fix React 18 Strict Mode returnFocus due to double rendering.
|
|
3314
|
+
relatedTarget !== getPreviouslyFocusedElement()) {
|
|
3315
|
+
preventReturnFocusRef.current = true;
|
|
3316
|
+
onOpenChange(false, event, "focus-out");
|
|
3317
|
+
}
|
|
3318
|
+
});
|
|
3319
|
+
}
|
|
3320
|
+
if (floating && isHTMLElement(domReference)) {
|
|
3321
|
+
domReference.addEventListener("focusout", handleFocusOutside);
|
|
3322
|
+
domReference.addEventListener("pointerdown", handlePointerDown);
|
|
3323
|
+
floating.addEventListener("focusout", handleFocusOutside);
|
|
3324
|
+
return () => {
|
|
3325
|
+
domReference.removeEventListener("focusout", handleFocusOutside);
|
|
3326
|
+
domReference.removeEventListener("pointerdown", handlePointerDown);
|
|
3327
|
+
floating.removeEventListener("focusout", handleFocusOutside);
|
|
3328
|
+
};
|
|
3329
|
+
}
|
|
3330
|
+
}, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef]);
|
|
3331
|
+
const beforeGuardRef = React.useRef(null);
|
|
3332
|
+
const afterGuardRef = React.useRef(null);
|
|
3333
|
+
const mergedBeforeGuardRef = useLiteMergeRefs([beforeGuardRef, portalContext == null ? void 0 : portalContext.beforeInsideRef]);
|
|
3334
|
+
const mergedAfterGuardRef = useLiteMergeRefs([afterGuardRef, portalContext == null ? void 0 : portalContext.afterInsideRef]);
|
|
3335
|
+
React.useEffect(() => {
|
|
3336
|
+
var _portalContext$portal, _ancestors$find;
|
|
3337
|
+
if (disabled) return;
|
|
3338
|
+
if (!floating) return;
|
|
3339
|
+
const portalNodes = Array.from((portalContext == null || (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute("portal") + "]")) || []);
|
|
3340
|
+
const ancestors = tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : [];
|
|
3341
|
+
const ancestorFloatingNodes = tree && !modal ? ancestors.map((node) => {
|
|
3342
|
+
var _node$context6;
|
|
3343
|
+
return (_node$context6 = node.context) == null ? void 0 : _node$context6.elements.floating;
|
|
3344
|
+
}) : [];
|
|
3345
|
+
const rootAncestorComboboxDomReference = (_ancestors$find = ancestors.find((node) => {
|
|
3346
|
+
var _node$context7;
|
|
3347
|
+
return isTypeableCombobox(((_node$context7 = node.context) == null ? void 0 : _node$context7.elements.domReference) || null);
|
|
3348
|
+
})) == null || (_ancestors$find = _ancestors$find.context) == null ? void 0 : _ancestors$find.elements.domReference;
|
|
3349
|
+
const insideElements = [floating, rootAncestorComboboxDomReference, ...portalNodes, ...ancestorFloatingNodes, ...getInsideElements(), startDismissButtonRef.current, endDismissButtonRef.current, beforeGuardRef.current, afterGuardRef.current, portalContext == null ? void 0 : portalContext.beforeOutsideRef.current, portalContext == null ? void 0 : portalContext.afterOutsideRef.current, orderRef.current.includes("reference") || isUntrappedTypeableCombobox ? domReference : null].filter((x) => x != null);
|
|
3350
|
+
const cleanup = modal || isUntrappedTypeableCombobox ? markOthers(insideElements, !useInert, useInert) : markOthers(insideElements);
|
|
3351
|
+
return () => {
|
|
3352
|
+
cleanup();
|
|
3353
|
+
};
|
|
3354
|
+
}, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards, useInert, tree, getNodeId, getInsideElements]);
|
|
3355
|
+
index$1(() => {
|
|
3356
|
+
if (disabled || !isHTMLElement(floatingFocusElement)) return;
|
|
3357
|
+
const doc = getDocument$1(floatingFocusElement);
|
|
3358
|
+
const previouslyFocusedElement = activeElement(doc);
|
|
3359
|
+
queueMicrotask(() => {
|
|
3360
|
+
const focusableElements = getTabbableElements(floatingFocusElement);
|
|
3361
|
+
const initialFocusValue = initialFocusRef.current;
|
|
3362
|
+
const elToFocus = (typeof initialFocusValue === "number" ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusElement;
|
|
3363
|
+
const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
|
|
3364
|
+
if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
|
|
3365
|
+
enqueueFocus(elToFocus, {
|
|
3366
|
+
preventScroll: elToFocus === floatingFocusElement
|
|
3367
|
+
});
|
|
3368
|
+
}
|
|
3369
|
+
});
|
|
3370
|
+
}, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
|
|
3371
|
+
index$1(() => {
|
|
3372
|
+
if (disabled || !floatingFocusElement) return;
|
|
3373
|
+
let preventReturnFocusScroll = false;
|
|
3374
|
+
const doc = getDocument$1(floatingFocusElement);
|
|
3375
|
+
const previouslyFocusedElement = activeElement(doc);
|
|
3376
|
+
addPreviouslyFocusedElement(previouslyFocusedElement);
|
|
3377
|
+
function onOpenChange2(_ref) {
|
|
3378
|
+
let {
|
|
3379
|
+
reason,
|
|
3380
|
+
event,
|
|
3381
|
+
nested
|
|
3382
|
+
} = _ref;
|
|
3383
|
+
if (["hover", "safe-polygon"].includes(reason) && event.type === "mouseleave") {
|
|
3384
|
+
preventReturnFocusRef.current = true;
|
|
3385
|
+
}
|
|
3386
|
+
if (reason !== "outside-press") return;
|
|
3387
|
+
if (nested) {
|
|
3388
|
+
preventReturnFocusRef.current = false;
|
|
3389
|
+
preventReturnFocusScroll = true;
|
|
3390
|
+
} else if (isVirtualClick(event) || isVirtualPointerEvent(event)) {
|
|
3391
|
+
preventReturnFocusRef.current = false;
|
|
3392
|
+
} else {
|
|
3393
|
+
let isPreventScrollSupported = false;
|
|
3394
|
+
document.createElement("div").focus({
|
|
3395
|
+
get preventScroll() {
|
|
3396
|
+
isPreventScrollSupported = true;
|
|
3397
|
+
return false;
|
|
3398
|
+
}
|
|
3399
|
+
});
|
|
3400
|
+
if (isPreventScrollSupported) {
|
|
3401
|
+
preventReturnFocusRef.current = false;
|
|
3402
|
+
preventReturnFocusScroll = true;
|
|
3403
|
+
} else {
|
|
3404
|
+
preventReturnFocusRef.current = true;
|
|
3405
|
+
}
|
|
3406
|
+
}
|
|
3407
|
+
}
|
|
3408
|
+
events.on("openchange", onOpenChange2);
|
|
3409
|
+
const fallbackEl = doc.createElement("span");
|
|
3410
|
+
fallbackEl.setAttribute("tabindex", "-1");
|
|
3411
|
+
fallbackEl.setAttribute("aria-hidden", "true");
|
|
3412
|
+
Object.assign(fallbackEl.style, HIDDEN_STYLES);
|
|
3413
|
+
if (isInsidePortal && domReference) {
|
|
3414
|
+
domReference.insertAdjacentElement("afterend", fallbackEl);
|
|
3415
|
+
}
|
|
3416
|
+
function getReturnElement() {
|
|
3417
|
+
if (typeof returnFocusRef.current === "boolean") {
|
|
3418
|
+
const el = domReference || getPreviouslyFocusedElement();
|
|
3419
|
+
return el && el.isConnected ? el : fallbackEl;
|
|
3420
|
+
}
|
|
3421
|
+
return returnFocusRef.current.current || fallbackEl;
|
|
3422
|
+
}
|
|
3423
|
+
return () => {
|
|
3424
|
+
events.off("openchange", onOpenChange2);
|
|
3425
|
+
const activeEl = activeElement(doc);
|
|
3426
|
+
const isFocusInsideFloatingTree = contains(floating, activeEl) || tree && getNodeChildren(tree.nodesRef.current, getNodeId()).some((node) => {
|
|
3427
|
+
var _node$context8;
|
|
3428
|
+
return contains((_node$context8 = node.context) == null ? void 0 : _node$context8.elements.floating, activeEl);
|
|
3429
|
+
});
|
|
3430
|
+
const returnElement = getReturnElement();
|
|
3431
|
+
queueMicrotask(() => {
|
|
3432
|
+
const tabbableReturnElement = getFirstTabbableElement(returnElement);
|
|
3433
|
+
if (
|
|
3434
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3435
|
+
returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && // If the focus moved somewhere else after mount, avoid returning focus
|
|
3436
|
+
// since it likely entered a different element which should be
|
|
3437
|
+
// respected: https://github.com/floating-ui/floating-ui/issues/2607
|
|
3438
|
+
(tabbableReturnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)
|
|
3439
|
+
) {
|
|
3440
|
+
tabbableReturnElement.focus({
|
|
3441
|
+
preventScroll: preventReturnFocusScroll
|
|
3442
|
+
});
|
|
3443
|
+
}
|
|
3444
|
+
fallbackEl.remove();
|
|
3445
|
+
});
|
|
3446
|
+
};
|
|
3447
|
+
}, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, isInsidePortal, domReference, getNodeId]);
|
|
3448
|
+
React.useEffect(() => {
|
|
3449
|
+
queueMicrotask(() => {
|
|
3450
|
+
preventReturnFocusRef.current = false;
|
|
3451
|
+
});
|
|
3452
|
+
}, [disabled]);
|
|
3453
|
+
index$1(() => {
|
|
3454
|
+
if (disabled) return;
|
|
3455
|
+
if (!portalContext) return;
|
|
3456
|
+
portalContext.setFocusManagerState({
|
|
3457
|
+
modal,
|
|
3458
|
+
closeOnFocusOut,
|
|
3459
|
+
open,
|
|
3460
|
+
onOpenChange,
|
|
3461
|
+
domReference
|
|
3462
|
+
});
|
|
3463
|
+
return () => {
|
|
3464
|
+
portalContext.setFocusManagerState(null);
|
|
3465
|
+
};
|
|
3466
|
+
}, [disabled, portalContext, modal, open, onOpenChange, closeOnFocusOut, domReference]);
|
|
3467
|
+
index$1(() => {
|
|
3468
|
+
if (disabled) return;
|
|
3469
|
+
if (!floatingFocusElement) return;
|
|
3470
|
+
handleTabIndex(floatingFocusElement, orderRef);
|
|
3471
|
+
}, [disabled, floatingFocusElement, orderRef]);
|
|
3472
|
+
function renderDismissButton(location) {
|
|
3473
|
+
if (disabled || !visuallyHiddenDismiss || !modal) {
|
|
3474
|
+
return null;
|
|
3475
|
+
}
|
|
3476
|
+
return /* @__PURE__ */ jsx(VisuallyHiddenDismiss, {
|
|
3477
|
+
ref: location === "start" ? startDismissButtonRef : endDismissButtonRef,
|
|
3478
|
+
onClick: (event) => onOpenChange(false, event.nativeEvent),
|
|
3479
|
+
children: typeof visuallyHiddenDismiss === "string" ? visuallyHiddenDismiss : "Dismiss"
|
|
3480
|
+
});
|
|
3481
|
+
}
|
|
3482
|
+
const shouldRenderGuards = !disabled && guards && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
|
|
3483
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
3484
|
+
children: [shouldRenderGuards && /* @__PURE__ */ jsx(FocusGuard, {
|
|
3485
|
+
"data-type": "inside",
|
|
3486
|
+
ref: mergedBeforeGuardRef,
|
|
3487
|
+
onFocus: (event) => {
|
|
3488
|
+
if (modal) {
|
|
3489
|
+
const els = getTabbableElements();
|
|
3490
|
+
enqueueFocus(order[0] === "reference" ? els[0] : els[els.length - 1]);
|
|
3491
|
+
} else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
|
|
3492
|
+
preventReturnFocusRef.current = false;
|
|
3493
|
+
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
3494
|
+
const nextTabbable = getNextTabbable(domReference);
|
|
3495
|
+
nextTabbable == null || nextTabbable.focus();
|
|
3496
|
+
} else {
|
|
3497
|
+
var _portalContext$before;
|
|
3498
|
+
(_portalContext$before = portalContext.beforeOutsideRef.current) == null || _portalContext$before.focus();
|
|
3499
|
+
}
|
|
3500
|
+
}
|
|
3501
|
+
}
|
|
3502
|
+
}), !isUntrappedTypeableCombobox && renderDismissButton("start"), children, renderDismissButton("end"), shouldRenderGuards && /* @__PURE__ */ jsx(FocusGuard, {
|
|
3503
|
+
"data-type": "inside",
|
|
3504
|
+
ref: mergedAfterGuardRef,
|
|
3505
|
+
onFocus: (event) => {
|
|
3506
|
+
if (modal) {
|
|
3507
|
+
enqueueFocus(getTabbableElements()[0]);
|
|
3508
|
+
} else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
|
|
3509
|
+
if (closeOnFocusOut) {
|
|
3510
|
+
preventReturnFocusRef.current = true;
|
|
3511
|
+
}
|
|
3512
|
+
if (isOutsideEvent(event, portalContext.portalNode)) {
|
|
3513
|
+
const prevTabbable = getPreviousTabbable(domReference);
|
|
3514
|
+
prevTabbable == null || prevTabbable.focus();
|
|
3515
|
+
} else {
|
|
3516
|
+
var _portalContext$afterO;
|
|
3517
|
+
(_portalContext$afterO = portalContext.afterOutsideRef.current) == null || _portalContext$afterO.focus();
|
|
3518
|
+
}
|
|
3519
|
+
}
|
|
3520
|
+
}
|
|
3521
|
+
})]
|
|
3522
|
+
});
|
|
3523
|
+
}
|
|
3524
|
+
function isButtonTarget(event) {
|
|
3525
|
+
return isHTMLElement(event.target) && event.target.tagName === "BUTTON";
|
|
3526
|
+
}
|
|
3527
|
+
function isAnchorTarget(event) {
|
|
3528
|
+
return isHTMLElement(event.target) && event.target.tagName === "A";
|
|
3529
|
+
}
|
|
3530
|
+
function isSpaceIgnored(element) {
|
|
3531
|
+
return isTypeableElement(element);
|
|
3532
|
+
}
|
|
3533
|
+
function useClick(context, props) {
|
|
3534
|
+
if (props === void 0) {
|
|
3535
|
+
props = {};
|
|
3536
|
+
}
|
|
3537
|
+
const {
|
|
3538
|
+
open,
|
|
3539
|
+
onOpenChange,
|
|
3540
|
+
dataRef,
|
|
3541
|
+
elements: {
|
|
3542
|
+
domReference
|
|
3543
|
+
}
|
|
3544
|
+
} = context;
|
|
3545
|
+
const {
|
|
3546
|
+
enabled = true,
|
|
3547
|
+
event: eventOption = "click",
|
|
3548
|
+
toggle = true,
|
|
3549
|
+
ignoreMouse = false,
|
|
3550
|
+
keyboardHandlers = true,
|
|
3551
|
+
stickIfOpen = true
|
|
3552
|
+
} = props;
|
|
3553
|
+
const pointerTypeRef = React.useRef();
|
|
3554
|
+
const didKeyDownRef = React.useRef(false);
|
|
3555
|
+
const reference = React.useMemo(() => ({
|
|
3556
|
+
onPointerDown(event) {
|
|
3557
|
+
pointerTypeRef.current = event.pointerType;
|
|
3558
|
+
},
|
|
3559
|
+
onMouseDown(event) {
|
|
3560
|
+
const pointerType = pointerTypeRef.current;
|
|
3561
|
+
if (event.button !== 0) return;
|
|
3562
|
+
if (eventOption === "click") return;
|
|
3563
|
+
if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
|
|
3564
|
+
if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === "mousedown" : true)) {
|
|
3565
|
+
onOpenChange(false, event.nativeEvent, "click");
|
|
3566
|
+
} else {
|
|
3567
|
+
event.preventDefault();
|
|
3568
|
+
onOpenChange(true, event.nativeEvent, "click");
|
|
3569
|
+
}
|
|
3570
|
+
},
|
|
3571
|
+
onClick(event) {
|
|
3572
|
+
const pointerType = pointerTypeRef.current;
|
|
3573
|
+
if (eventOption === "mousedown" && pointerTypeRef.current) {
|
|
3574
|
+
pointerTypeRef.current = void 0;
|
|
3575
|
+
return;
|
|
3576
|
+
}
|
|
3577
|
+
if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
|
|
3578
|
+
if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === "click" : true)) {
|
|
3579
|
+
onOpenChange(false, event.nativeEvent, "click");
|
|
3580
|
+
} else {
|
|
3581
|
+
onOpenChange(true, event.nativeEvent, "click");
|
|
3582
|
+
}
|
|
3583
|
+
},
|
|
3584
|
+
onKeyDown(event) {
|
|
3585
|
+
pointerTypeRef.current = void 0;
|
|
3586
|
+
if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
|
|
3587
|
+
return;
|
|
3588
|
+
}
|
|
3589
|
+
if (event.key === " " && !isSpaceIgnored(domReference)) {
|
|
3590
|
+
event.preventDefault();
|
|
3591
|
+
didKeyDownRef.current = true;
|
|
3592
|
+
}
|
|
3593
|
+
if (isAnchorTarget(event)) {
|
|
3594
|
+
return;
|
|
3595
|
+
}
|
|
3596
|
+
if (event.key === "Enter") {
|
|
3597
|
+
if (open && toggle) {
|
|
3598
|
+
onOpenChange(false, event.nativeEvent, "click");
|
|
3599
|
+
} else {
|
|
3600
|
+
onOpenChange(true, event.nativeEvent, "click");
|
|
3601
|
+
}
|
|
3602
|
+
}
|
|
3603
|
+
},
|
|
3604
|
+
onKeyUp(event) {
|
|
3605
|
+
if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
|
|
3606
|
+
return;
|
|
3607
|
+
}
|
|
3608
|
+
if (event.key === " " && didKeyDownRef.current) {
|
|
3609
|
+
didKeyDownRef.current = false;
|
|
3610
|
+
if (open && toggle) {
|
|
3611
|
+
onOpenChange(false, event.nativeEvent, "click");
|
|
3612
|
+
} else {
|
|
3613
|
+
onOpenChange(true, event.nativeEvent, "click");
|
|
3614
|
+
}
|
|
3615
|
+
}
|
|
3616
|
+
}
|
|
3617
|
+
}), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, stickIfOpen, toggle]);
|
|
3618
|
+
return React.useMemo(() => enabled ? {
|
|
3619
|
+
reference
|
|
3620
|
+
} : {}, [enabled, reference]);
|
|
3621
|
+
}
|
|
3622
|
+
const bubbleHandlerKeys = {
|
|
3623
|
+
pointerdown: "onPointerDown",
|
|
3624
|
+
mousedown: "onMouseDown",
|
|
3625
|
+
click: "onClick"
|
|
3626
|
+
};
|
|
3627
|
+
const captureHandlerKeys = {
|
|
3628
|
+
pointerdown: "onPointerDownCapture",
|
|
3629
|
+
mousedown: "onMouseDownCapture",
|
|
3630
|
+
click: "onClickCapture"
|
|
3631
|
+
};
|
|
3632
|
+
const normalizeProp = (normalizable) => {
|
|
3633
|
+
var _normalizable$escapeK, _normalizable$outside;
|
|
3634
|
+
return {
|
|
3635
|
+
escapeKey: typeof normalizable === "boolean" ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
|
|
3636
|
+
outsidePress: typeof normalizable === "boolean" ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
|
|
3637
|
+
};
|
|
3638
|
+
};
|
|
3639
|
+
function useDismiss(context, props) {
|
|
3640
|
+
if (props === void 0) {
|
|
3641
|
+
props = {};
|
|
3642
|
+
}
|
|
3643
|
+
const {
|
|
3644
|
+
open,
|
|
3645
|
+
onOpenChange,
|
|
3646
|
+
elements,
|
|
3647
|
+
dataRef
|
|
3648
|
+
} = context;
|
|
3649
|
+
const {
|
|
3650
|
+
enabled = true,
|
|
3651
|
+
escapeKey = true,
|
|
3652
|
+
outsidePress: unstable_outsidePress = true,
|
|
3653
|
+
outsidePressEvent = "pointerdown",
|
|
3654
|
+
referencePress = false,
|
|
3655
|
+
referencePressEvent = "pointerdown",
|
|
3656
|
+
ancestorScroll = false,
|
|
3657
|
+
bubbles,
|
|
3658
|
+
capture
|
|
3659
|
+
} = props;
|
|
3660
|
+
const tree = useFloatingTree();
|
|
3661
|
+
const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === "function" ? unstable_outsidePress : () => false);
|
|
3662
|
+
const outsidePress = typeof unstable_outsidePress === "function" ? outsidePressFn : unstable_outsidePress;
|
|
3663
|
+
const insideReactTreeRef = React.useRef(false);
|
|
3664
|
+
const endedOrStartedInsideRef = React.useRef(false);
|
|
3665
|
+
const {
|
|
3666
|
+
escapeKey: escapeKeyBubbles,
|
|
3667
|
+
outsidePress: outsidePressBubbles
|
|
3668
|
+
} = normalizeProp(bubbles);
|
|
3669
|
+
const {
|
|
3670
|
+
escapeKey: escapeKeyCapture,
|
|
3671
|
+
outsidePress: outsidePressCapture
|
|
3672
|
+
} = normalizeProp(capture);
|
|
3673
|
+
const isComposingRef = React.useRef(false);
|
|
3674
|
+
const closeOnEscapeKeyDown = useEffectEvent((event) => {
|
|
3675
|
+
var _dataRef$current$floa;
|
|
3676
|
+
if (!open || !enabled || !escapeKey || event.key !== "Escape") {
|
|
3677
|
+
return;
|
|
3678
|
+
}
|
|
3679
|
+
if (isComposingRef.current) {
|
|
3680
|
+
return;
|
|
3681
|
+
}
|
|
3682
|
+
const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
|
|
3683
|
+
const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
|
|
3684
|
+
if (!escapeKeyBubbles) {
|
|
3685
|
+
event.stopPropagation();
|
|
3686
|
+
if (children.length > 0) {
|
|
3687
|
+
let shouldDismiss = true;
|
|
3688
|
+
children.forEach((child) => {
|
|
3689
|
+
var _child$context;
|
|
3690
|
+
if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
|
|
3691
|
+
shouldDismiss = false;
|
|
3692
|
+
return;
|
|
3693
|
+
}
|
|
3694
|
+
});
|
|
3695
|
+
if (!shouldDismiss) {
|
|
3696
|
+
return;
|
|
3697
|
+
}
|
|
3698
|
+
}
|
|
3699
|
+
}
|
|
3700
|
+
onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, "escape-key");
|
|
3701
|
+
});
|
|
3702
|
+
const closeOnEscapeKeyDownCapture = useEffectEvent((event) => {
|
|
3703
|
+
var _getTarget2;
|
|
3704
|
+
const callback = () => {
|
|
3705
|
+
var _getTarget;
|
|
3706
|
+
closeOnEscapeKeyDown(event);
|
|
3707
|
+
(_getTarget = getTarget(event)) == null || _getTarget.removeEventListener("keydown", callback);
|
|
3708
|
+
};
|
|
3709
|
+
(_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener("keydown", callback);
|
|
3710
|
+
});
|
|
3711
|
+
const closeOnPressOutside = useEffectEvent((event) => {
|
|
3712
|
+
var _dataRef$current$floa2;
|
|
3713
|
+
const insideReactTree = insideReactTreeRef.current;
|
|
3714
|
+
insideReactTreeRef.current = false;
|
|
3715
|
+
const endedOrStartedInside = endedOrStartedInsideRef.current;
|
|
3716
|
+
endedOrStartedInsideRef.current = false;
|
|
3717
|
+
if (outsidePressEvent === "click" && endedOrStartedInside) {
|
|
3718
|
+
return;
|
|
3719
|
+
}
|
|
3720
|
+
if (insideReactTree) {
|
|
3721
|
+
return;
|
|
3722
|
+
}
|
|
3723
|
+
if (typeof outsidePress === "function" && !outsidePress(event)) {
|
|
3724
|
+
return;
|
|
3725
|
+
}
|
|
3726
|
+
const target = getTarget(event);
|
|
3727
|
+
const inertSelector = "[" + createAttribute("inert") + "]";
|
|
3728
|
+
const markers = getDocument$1(elements.floating).querySelectorAll(inertSelector);
|
|
3729
|
+
let targetRootAncestor = isElement(target) ? target : null;
|
|
3730
|
+
while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
|
|
3731
|
+
const nextParent = getParentNode(targetRootAncestor);
|
|
3732
|
+
if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
|
|
3733
|
+
break;
|
|
3734
|
+
}
|
|
3735
|
+
targetRootAncestor = nextParent;
|
|
3736
|
+
}
|
|
3737
|
+
if (markers.length && isElement(target) && !isRootElement(target) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
3738
|
+
!contains(target, elements.floating) && // If the target root element contains none of the markers, then the
|
|
3739
|
+
// element was injected after the floating element rendered.
|
|
3740
|
+
Array.from(markers).every((marker) => !contains(targetRootAncestor, marker))) {
|
|
3741
|
+
return;
|
|
3742
|
+
}
|
|
3743
|
+
if (isHTMLElement(target) && floating) {
|
|
3744
|
+
const lastTraversableNode = isLastTraversableNode(target);
|
|
3745
|
+
const style = getComputedStyle$1(target);
|
|
3746
|
+
const scrollRe = /auto|scroll/;
|
|
3747
|
+
const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
|
|
3748
|
+
const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
|
|
3749
|
+
const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
|
|
3750
|
+
const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
|
|
3751
|
+
const isRTL2 = style.direction === "rtl";
|
|
3752
|
+
const pressedVerticalScrollbar = canScrollY && (isRTL2 ? event.offsetX <= target.offsetWidth - target.clientWidth : event.offsetX > target.clientWidth);
|
|
3753
|
+
const pressedHorizontalScrollbar = canScrollX && event.offsetY > target.clientHeight;
|
|
3754
|
+
if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
|
|
3755
|
+
return;
|
|
3756
|
+
}
|
|
3757
|
+
}
|
|
3758
|
+
const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
|
|
3759
|
+
const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some((node) => {
|
|
3760
|
+
var _node$context;
|
|
3761
|
+
return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
|
|
3762
|
+
});
|
|
3763
|
+
if (isEventTargetWithin(event, elements.floating) || isEventTargetWithin(event, elements.domReference) || targetIsInsideChildren) {
|
|
3764
|
+
return;
|
|
3765
|
+
}
|
|
3766
|
+
const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
|
|
3767
|
+
if (children.length > 0) {
|
|
3768
|
+
let shouldDismiss = true;
|
|
3769
|
+
children.forEach((child) => {
|
|
3770
|
+
var _child$context2;
|
|
3771
|
+
if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
|
|
3772
|
+
shouldDismiss = false;
|
|
3773
|
+
return;
|
|
3774
|
+
}
|
|
3775
|
+
});
|
|
3776
|
+
if (!shouldDismiss) {
|
|
3777
|
+
return;
|
|
3778
|
+
}
|
|
3779
|
+
}
|
|
3780
|
+
onOpenChange(false, event, "outside-press");
|
|
3781
|
+
});
|
|
3782
|
+
const closeOnPressOutsideCapture = useEffectEvent((event) => {
|
|
3783
|
+
var _getTarget4;
|
|
3784
|
+
const callback = () => {
|
|
3785
|
+
var _getTarget3;
|
|
3786
|
+
closeOnPressOutside(event);
|
|
3787
|
+
(_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
|
|
3788
|
+
};
|
|
3789
|
+
(_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
|
|
3790
|
+
});
|
|
3791
|
+
React.useEffect(() => {
|
|
3792
|
+
if (!open || !enabled) {
|
|
3793
|
+
return;
|
|
3794
|
+
}
|
|
3795
|
+
dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
|
|
3796
|
+
dataRef.current.__outsidePressBubbles = outsidePressBubbles;
|
|
3797
|
+
let compositionTimeout = -1;
|
|
3798
|
+
function onScroll(event) {
|
|
3799
|
+
onOpenChange(false, event, "ancestor-scroll");
|
|
3800
|
+
}
|
|
3801
|
+
function handleCompositionStart() {
|
|
3802
|
+
window.clearTimeout(compositionTimeout);
|
|
3803
|
+
isComposingRef.current = true;
|
|
3804
|
+
}
|
|
3805
|
+
function handleCompositionEnd() {
|
|
3806
|
+
compositionTimeout = window.setTimeout(
|
|
3807
|
+
() => {
|
|
3808
|
+
isComposingRef.current = false;
|
|
3809
|
+
},
|
|
3810
|
+
// 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
|
|
3811
|
+
// Only apply to WebKit for the test to remain 0ms.
|
|
3812
|
+
isWebKit() ? 5 : 0
|
|
3813
|
+
);
|
|
3814
|
+
}
|
|
3815
|
+
const doc = getDocument$1(elements.floating);
|
|
3816
|
+
if (escapeKey) {
|
|
3817
|
+
doc.addEventListener("keydown", escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
|
|
3818
|
+
doc.addEventListener("compositionstart", handleCompositionStart);
|
|
3819
|
+
doc.addEventListener("compositionend", handleCompositionEnd);
|
|
3820
|
+
}
|
|
3821
|
+
outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
|
|
3822
|
+
let ancestors = [];
|
|
3823
|
+
if (ancestorScroll) {
|
|
3824
|
+
if (isElement(elements.domReference)) {
|
|
3825
|
+
ancestors = getOverflowAncestors(elements.domReference);
|
|
3826
|
+
}
|
|
3827
|
+
if (isElement(elements.floating)) {
|
|
3828
|
+
ancestors = ancestors.concat(getOverflowAncestors(elements.floating));
|
|
3829
|
+
}
|
|
3830
|
+
if (!isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
|
|
3831
|
+
ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement));
|
|
3832
|
+
}
|
|
3833
|
+
}
|
|
3834
|
+
ancestors = ancestors.filter((ancestor) => {
|
|
3835
|
+
var _doc$defaultView;
|
|
3836
|
+
return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
|
|
3837
|
+
});
|
|
3838
|
+
ancestors.forEach((ancestor) => {
|
|
3839
|
+
ancestor.addEventListener("scroll", onScroll, {
|
|
3840
|
+
passive: true
|
|
3841
|
+
});
|
|
3842
|
+
});
|
|
3843
|
+
return () => {
|
|
3844
|
+
if (escapeKey) {
|
|
3845
|
+
doc.removeEventListener("keydown", escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
|
|
3846
|
+
doc.removeEventListener("compositionstart", handleCompositionStart);
|
|
3847
|
+
doc.removeEventListener("compositionend", handleCompositionEnd);
|
|
3848
|
+
}
|
|
3849
|
+
outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
|
|
3850
|
+
ancestors.forEach((ancestor) => {
|
|
3851
|
+
ancestor.removeEventListener("scroll", onScroll);
|
|
3852
|
+
});
|
|
3853
|
+
window.clearTimeout(compositionTimeout);
|
|
3854
|
+
};
|
|
3855
|
+
}, [dataRef, elements, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
|
|
3856
|
+
React.useEffect(() => {
|
|
3857
|
+
insideReactTreeRef.current = false;
|
|
3858
|
+
}, [outsidePress, outsidePressEvent]);
|
|
3859
|
+
const reference = React.useMemo(() => ({
|
|
3860
|
+
onKeyDown: closeOnEscapeKeyDown,
|
|
3861
|
+
...referencePress && {
|
|
3862
|
+
[bubbleHandlerKeys[referencePressEvent]]: (event) => {
|
|
3863
|
+
onOpenChange(false, event.nativeEvent, "reference-press");
|
|
3864
|
+
},
|
|
3865
|
+
...referencePressEvent !== "click" && {
|
|
3866
|
+
onClick(event) {
|
|
3867
|
+
onOpenChange(false, event.nativeEvent, "reference-press");
|
|
3868
|
+
}
|
|
3869
|
+
}
|
|
3870
|
+
}
|
|
3871
|
+
}), [closeOnEscapeKeyDown, onOpenChange, referencePress, referencePressEvent]);
|
|
3872
|
+
const floating = React.useMemo(() => ({
|
|
3873
|
+
onKeyDown: closeOnEscapeKeyDown,
|
|
3874
|
+
onMouseDown() {
|
|
3875
|
+
endedOrStartedInsideRef.current = true;
|
|
3876
|
+
},
|
|
3877
|
+
onMouseUp() {
|
|
3878
|
+
endedOrStartedInsideRef.current = true;
|
|
3879
|
+
},
|
|
3880
|
+
[captureHandlerKeys[outsidePressEvent]]: () => {
|
|
3881
|
+
insideReactTreeRef.current = true;
|
|
3882
|
+
}
|
|
3883
|
+
}), [closeOnEscapeKeyDown, outsidePressEvent]);
|
|
3884
|
+
return React.useMemo(() => enabled ? {
|
|
3885
|
+
reference,
|
|
3886
|
+
floating
|
|
3887
|
+
} : {}, [enabled, reference, floating]);
|
|
3888
|
+
}
|
|
3889
|
+
function useFloatingRootContext(options) {
|
|
3890
|
+
const {
|
|
3891
|
+
open = false,
|
|
3892
|
+
onOpenChange: onOpenChangeProp,
|
|
3893
|
+
elements: elementsProp
|
|
3894
|
+
} = options;
|
|
3895
|
+
const floatingId = useId();
|
|
3896
|
+
const dataRef = React.useRef({});
|
|
3897
|
+
const [events] = React.useState(() => createEventEmitter());
|
|
3898
|
+
const nested = useFloatingParentNodeId() != null;
|
|
3899
|
+
if (process.env.NODE_ENV !== "production") {
|
|
3900
|
+
const optionDomReference = elementsProp.reference;
|
|
3901
|
+
if (optionDomReference && !isElement(optionDomReference)) {
|
|
3902
|
+
error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
|
|
3903
|
+
}
|
|
3904
|
+
}
|
|
3905
|
+
const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
|
|
3906
|
+
const onOpenChange = useEffectEvent((open2, event, reason) => {
|
|
3907
|
+
dataRef.current.openEvent = open2 ? event : void 0;
|
|
3908
|
+
events.emit("openchange", {
|
|
3909
|
+
open: open2,
|
|
3910
|
+
event,
|
|
3911
|
+
reason,
|
|
3912
|
+
nested
|
|
3913
|
+
});
|
|
3914
|
+
onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
|
|
3915
|
+
});
|
|
3916
|
+
const refs = React.useMemo(() => ({
|
|
3917
|
+
setPositionReference
|
|
3918
|
+
}), []);
|
|
3919
|
+
const elements = React.useMemo(() => ({
|
|
3920
|
+
reference: positionReference || elementsProp.reference || null,
|
|
3921
|
+
floating: elementsProp.floating || null,
|
|
3922
|
+
domReference: elementsProp.reference
|
|
3923
|
+
}), [positionReference, elementsProp.reference, elementsProp.floating]);
|
|
3924
|
+
return React.useMemo(() => ({
|
|
3925
|
+
dataRef,
|
|
3926
|
+
open,
|
|
3927
|
+
onOpenChange,
|
|
3928
|
+
elements,
|
|
3929
|
+
events,
|
|
3930
|
+
floatingId,
|
|
3931
|
+
refs
|
|
3932
|
+
}), [open, onOpenChange, elements, events, floatingId, refs]);
|
|
3933
|
+
}
|
|
3934
|
+
function useFloating(options) {
|
|
3935
|
+
if (options === void 0) {
|
|
3936
|
+
options = {};
|
|
3937
|
+
}
|
|
3938
|
+
const {
|
|
3939
|
+
nodeId
|
|
3940
|
+
} = options;
|
|
3941
|
+
const internalRootContext = useFloatingRootContext({
|
|
3942
|
+
...options,
|
|
3943
|
+
elements: {
|
|
3944
|
+
reference: null,
|
|
3945
|
+
floating: null,
|
|
3946
|
+
...options.elements
|
|
3947
|
+
}
|
|
3948
|
+
});
|
|
3949
|
+
const rootContext = options.rootContext || internalRootContext;
|
|
3950
|
+
const computedElements = rootContext.elements;
|
|
3951
|
+
const [_domReference, setDomReference] = React.useState(null);
|
|
3952
|
+
const [positionReference, _setPositionReference] = React.useState(null);
|
|
3953
|
+
const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
|
|
3954
|
+
const domReference = optionDomReference || _domReference;
|
|
3955
|
+
const domReferenceRef = React.useRef(null);
|
|
3956
|
+
const tree = useFloatingTree();
|
|
3957
|
+
index$1(() => {
|
|
3958
|
+
if (domReference) {
|
|
3959
|
+
domReferenceRef.current = domReference;
|
|
3960
|
+
}
|
|
3961
|
+
}, [domReference]);
|
|
3962
|
+
const position = useFloating$1({
|
|
3963
|
+
...options,
|
|
3964
|
+
elements: {
|
|
3965
|
+
...computedElements,
|
|
3966
|
+
...positionReference && {
|
|
3967
|
+
reference: positionReference
|
|
3968
|
+
}
|
|
3969
|
+
}
|
|
3970
|
+
});
|
|
3971
|
+
const setPositionReference = React.useCallback((node) => {
|
|
3972
|
+
const computedPositionReference = isElement(node) ? {
|
|
3973
|
+
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
3974
|
+
getClientRects: () => node.getClientRects(),
|
|
3975
|
+
contextElement: node
|
|
3976
|
+
} : node;
|
|
3977
|
+
_setPositionReference(computedPositionReference);
|
|
3978
|
+
position.refs.setReference(computedPositionReference);
|
|
3979
|
+
}, [position.refs]);
|
|
3980
|
+
const setReference = React.useCallback((node) => {
|
|
3981
|
+
if (isElement(node) || node === null) {
|
|
3982
|
+
domReferenceRef.current = node;
|
|
3983
|
+
setDomReference(node);
|
|
3984
|
+
}
|
|
3985
|
+
if (isElement(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
|
|
3986
|
+
// `null` to support `positionReference` + an unstable `reference`
|
|
3987
|
+
// callback ref.
|
|
3988
|
+
node !== null && !isElement(node)) {
|
|
3989
|
+
position.refs.setReference(node);
|
|
3990
|
+
}
|
|
3991
|
+
}, [position.refs]);
|
|
3992
|
+
const refs = React.useMemo(() => ({
|
|
3993
|
+
...position.refs,
|
|
3994
|
+
setReference,
|
|
3995
|
+
setPositionReference,
|
|
3996
|
+
domReference: domReferenceRef
|
|
3997
|
+
}), [position.refs, setReference, setPositionReference]);
|
|
3998
|
+
const elements = React.useMemo(() => ({
|
|
3999
|
+
...position.elements,
|
|
4000
|
+
domReference
|
|
4001
|
+
}), [position.elements, domReference]);
|
|
4002
|
+
const context = React.useMemo(() => ({
|
|
4003
|
+
...position,
|
|
4004
|
+
...rootContext,
|
|
4005
|
+
refs,
|
|
4006
|
+
elements,
|
|
4007
|
+
nodeId
|
|
4008
|
+
}), [position, refs, elements, nodeId, rootContext]);
|
|
4009
|
+
index$1(() => {
|
|
4010
|
+
rootContext.dataRef.current.floatingContext = context;
|
|
4011
|
+
const node = tree == null ? void 0 : tree.nodesRef.current.find((node2) => node2.id === nodeId);
|
|
4012
|
+
if (node) {
|
|
4013
|
+
node.context = context;
|
|
4014
|
+
}
|
|
4015
|
+
});
|
|
4016
|
+
return React.useMemo(() => ({
|
|
4017
|
+
...position,
|
|
4018
|
+
context,
|
|
4019
|
+
refs,
|
|
4020
|
+
elements
|
|
4021
|
+
}), [position, refs, elements, context]);
|
|
4022
|
+
}
|
|
4023
|
+
function isMacSafari() {
|
|
4024
|
+
return isMac() && isSafari();
|
|
4025
|
+
}
|
|
4026
|
+
function useFocus(context, props) {
|
|
4027
|
+
if (props === void 0) {
|
|
4028
|
+
props = {};
|
|
4029
|
+
}
|
|
4030
|
+
const {
|
|
4031
|
+
open,
|
|
4032
|
+
onOpenChange,
|
|
4033
|
+
events,
|
|
4034
|
+
dataRef,
|
|
4035
|
+
elements
|
|
4036
|
+
} = context;
|
|
4037
|
+
const {
|
|
4038
|
+
enabled = true,
|
|
4039
|
+
visibleOnly = true
|
|
4040
|
+
} = props;
|
|
4041
|
+
const blockFocusRef = React.useRef(false);
|
|
4042
|
+
const timeoutRef = React.useRef(-1);
|
|
4043
|
+
const keyboardModalityRef = React.useRef(true);
|
|
4044
|
+
React.useEffect(() => {
|
|
4045
|
+
if (!enabled) return;
|
|
4046
|
+
const win = getWindow(elements.domReference);
|
|
4047
|
+
function onBlur() {
|
|
4048
|
+
if (!open && isHTMLElement(elements.domReference) && elements.domReference === activeElement(getDocument$1(elements.domReference))) {
|
|
4049
|
+
blockFocusRef.current = true;
|
|
4050
|
+
}
|
|
4051
|
+
}
|
|
4052
|
+
function onKeyDown() {
|
|
4053
|
+
keyboardModalityRef.current = true;
|
|
4054
|
+
}
|
|
4055
|
+
function onPointerDown() {
|
|
4056
|
+
keyboardModalityRef.current = false;
|
|
4057
|
+
}
|
|
4058
|
+
win.addEventListener("blur", onBlur);
|
|
4059
|
+
if (isMacSafari()) {
|
|
4060
|
+
win.addEventListener("keydown", onKeyDown, true);
|
|
4061
|
+
win.addEventListener("pointerdown", onPointerDown, true);
|
|
4062
|
+
}
|
|
4063
|
+
return () => {
|
|
4064
|
+
win.removeEventListener("blur", onBlur);
|
|
4065
|
+
if (isMacSafari()) {
|
|
4066
|
+
win.removeEventListener("keydown", onKeyDown, true);
|
|
4067
|
+
win.removeEventListener("pointerdown", onPointerDown, true);
|
|
4068
|
+
}
|
|
4069
|
+
};
|
|
4070
|
+
}, [elements.domReference, open, enabled]);
|
|
4071
|
+
React.useEffect(() => {
|
|
4072
|
+
if (!enabled) return;
|
|
4073
|
+
function onOpenChange2(_ref) {
|
|
4074
|
+
let {
|
|
4075
|
+
reason
|
|
4076
|
+
} = _ref;
|
|
4077
|
+
if (reason === "reference-press" || reason === "escape-key") {
|
|
4078
|
+
blockFocusRef.current = true;
|
|
4079
|
+
}
|
|
4080
|
+
}
|
|
4081
|
+
events.on("openchange", onOpenChange2);
|
|
4082
|
+
return () => {
|
|
4083
|
+
events.off("openchange", onOpenChange2);
|
|
4084
|
+
};
|
|
4085
|
+
}, [events, enabled]);
|
|
4086
|
+
React.useEffect(() => {
|
|
4087
|
+
return () => {
|
|
4088
|
+
clearTimeoutIfSet(timeoutRef);
|
|
4089
|
+
};
|
|
4090
|
+
}, []);
|
|
4091
|
+
const reference = React.useMemo(() => ({
|
|
4092
|
+
onMouseLeave() {
|
|
4093
|
+
blockFocusRef.current = false;
|
|
4094
|
+
},
|
|
4095
|
+
onFocus(event) {
|
|
4096
|
+
if (blockFocusRef.current) return;
|
|
4097
|
+
const target = getTarget(event.nativeEvent);
|
|
4098
|
+
if (visibleOnly && isElement(target)) {
|
|
4099
|
+
if (isMacSafari() && !event.relatedTarget) {
|
|
4100
|
+
if (!keyboardModalityRef.current && !isTypeableElement(target)) {
|
|
4101
|
+
return;
|
|
4102
|
+
}
|
|
4103
|
+
} else if (!matchesFocusVisible(target)) {
|
|
4104
|
+
return;
|
|
4105
|
+
}
|
|
4106
|
+
}
|
|
4107
|
+
onOpenChange(true, event.nativeEvent, "focus");
|
|
4108
|
+
},
|
|
4109
|
+
onBlur(event) {
|
|
4110
|
+
blockFocusRef.current = false;
|
|
4111
|
+
const relatedTarget = event.relatedTarget;
|
|
4112
|
+
const nativeEvent = event.nativeEvent;
|
|
4113
|
+
const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute("focus-guard")) && relatedTarget.getAttribute("data-type") === "outside";
|
|
4114
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
4115
|
+
var _dataRef$current$floa;
|
|
4116
|
+
const activeEl = activeElement(elements.domReference ? elements.domReference.ownerDocument : document);
|
|
4117
|
+
if (!relatedTarget && activeEl === elements.domReference) return;
|
|
4118
|
+
if (contains((_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.refs.floating.current, activeEl) || contains(elements.domReference, activeEl) || movedToFocusGuard) {
|
|
4119
|
+
return;
|
|
4120
|
+
}
|
|
4121
|
+
onOpenChange(false, nativeEvent, "focus");
|
|
4122
|
+
});
|
|
4123
|
+
}
|
|
4124
|
+
}), [dataRef, elements.domReference, onOpenChange, visibleOnly]);
|
|
4125
|
+
return React.useMemo(() => enabled ? {
|
|
4126
|
+
reference
|
|
4127
|
+
} : {}, [enabled, reference]);
|
|
4128
|
+
}
|
|
4129
|
+
function mergeProps(userProps, propsList, elementKey) {
|
|
4130
|
+
const map = /* @__PURE__ */ new Map();
|
|
4131
|
+
const isItem = elementKey === "item";
|
|
4132
|
+
let domUserProps = userProps;
|
|
4133
|
+
if (isItem && userProps) {
|
|
4134
|
+
const {
|
|
4135
|
+
[ACTIVE_KEY]: _,
|
|
4136
|
+
[SELECTED_KEY]: __,
|
|
4137
|
+
...validProps
|
|
4138
|
+
} = userProps;
|
|
4139
|
+
domUserProps = validProps;
|
|
4140
|
+
}
|
|
4141
|
+
return {
|
|
4142
|
+
...elementKey === "floating" && {
|
|
4143
|
+
tabIndex: -1,
|
|
4144
|
+
[FOCUSABLE_ATTRIBUTE]: ""
|
|
4145
|
+
},
|
|
4146
|
+
...domUserProps,
|
|
4147
|
+
...propsList.map((value) => {
|
|
4148
|
+
const propsOrGetProps = value ? value[elementKey] : null;
|
|
4149
|
+
if (typeof propsOrGetProps === "function") {
|
|
4150
|
+
return userProps ? propsOrGetProps(userProps) : null;
|
|
4151
|
+
}
|
|
4152
|
+
return propsOrGetProps;
|
|
4153
|
+
}).concat(userProps).reduce((acc, props) => {
|
|
4154
|
+
if (!props) {
|
|
4155
|
+
return acc;
|
|
4156
|
+
}
|
|
4157
|
+
Object.entries(props).forEach((_ref) => {
|
|
4158
|
+
let [key, value] = _ref;
|
|
4159
|
+
if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
|
|
4160
|
+
return;
|
|
4161
|
+
}
|
|
4162
|
+
if (key.indexOf("on") === 0) {
|
|
4163
|
+
if (!map.has(key)) {
|
|
4164
|
+
map.set(key, []);
|
|
4165
|
+
}
|
|
4166
|
+
if (typeof value === "function") {
|
|
4167
|
+
var _map$get;
|
|
4168
|
+
(_map$get = map.get(key)) == null || _map$get.push(value);
|
|
4169
|
+
acc[key] = function() {
|
|
4170
|
+
var _map$get2;
|
|
4171
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
4172
|
+
args[_key] = arguments[_key];
|
|
4173
|
+
}
|
|
4174
|
+
return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map((fn) => fn(...args)).find((val) => val !== void 0);
|
|
4175
|
+
};
|
|
4176
|
+
}
|
|
4177
|
+
} else {
|
|
4178
|
+
acc[key] = value;
|
|
4179
|
+
}
|
|
4180
|
+
});
|
|
4181
|
+
return acc;
|
|
4182
|
+
}, {})
|
|
4183
|
+
};
|
|
4184
|
+
}
|
|
4185
|
+
function useInteractions(propsList) {
|
|
4186
|
+
if (propsList === void 0) {
|
|
4187
|
+
propsList = [];
|
|
4188
|
+
}
|
|
4189
|
+
const referenceDeps = propsList.map((key) => key == null ? void 0 : key.reference);
|
|
4190
|
+
const floatingDeps = propsList.map((key) => key == null ? void 0 : key.floating);
|
|
4191
|
+
const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
|
|
4192
|
+
const getReferenceProps = React.useCallback(
|
|
4193
|
+
(userProps) => mergeProps(userProps, propsList, "reference"),
|
|
4194
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4195
|
+
referenceDeps
|
|
4196
|
+
);
|
|
4197
|
+
const getFloatingProps = React.useCallback(
|
|
4198
|
+
(userProps) => mergeProps(userProps, propsList, "floating"),
|
|
4199
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4200
|
+
floatingDeps
|
|
4201
|
+
);
|
|
4202
|
+
const getItemProps = React.useCallback(
|
|
4203
|
+
(userProps) => mergeProps(userProps, propsList, "item"),
|
|
4204
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4205
|
+
itemDeps
|
|
4206
|
+
);
|
|
4207
|
+
return React.useMemo(() => ({
|
|
4208
|
+
getReferenceProps,
|
|
4209
|
+
getFloatingProps,
|
|
4210
|
+
getItemProps
|
|
4211
|
+
}), [getReferenceProps, getFloatingProps, getItemProps]);
|
|
4212
|
+
}
|
|
4213
|
+
export {
|
|
4214
|
+
FloatingFocusManager as F,
|
|
4215
|
+
useClick as a,
|
|
4216
|
+
useDismiss as b,
|
|
4217
|
+
useInteractions as c,
|
|
4218
|
+
useMergeRefs as d,
|
|
4219
|
+
FloatingArrow as e,
|
|
4220
|
+
autoUpdate as f,
|
|
4221
|
+
flip as g,
|
|
4222
|
+
hide as h,
|
|
4223
|
+
arrow as i,
|
|
4224
|
+
size as j,
|
|
4225
|
+
FloatingDelayGroup as k,
|
|
4226
|
+
useHover as l,
|
|
4227
|
+
useFocus as m,
|
|
4228
|
+
offset as o,
|
|
4229
|
+
shift as s,
|
|
4230
|
+
useFloating as u
|
|
4231
|
+
};
|
|
4232
|
+
//# sourceMappingURL=floating-ui.react.js.map
|