@entur/menu 5.2.1-beta.0 → 5.2.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/menu.cjs.js +33 -3194
- package/dist/menu.cjs.js.map +1 -1
- package/dist/menu.esm.js +128 -3272
- package/dist/menu.esm.js.map +1 -1
- package/package.json +11 -19
package/dist/menu.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { useOnClickOutside, useOnEscape, getNodeText, useRandomId, warnAboutMissingStyles } from "@entur/utils";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import React, { useState, useEffect, useRef, cloneElement, useContext } from "react";
|
|
4
|
+
import classNames from "classnames";
|
|
5
5
|
import { RightArrowIcon, MenuIcon, LeftArrowIcon, VerticalDotsIcon, DownArrowIcon } from "@entur/icons";
|
|
6
|
-
import
|
|
6
|
+
import { useFloating, offset, flip, shift, autoUpdate, useListNavigation, useTypeahead, useRole, useInteractions, FloatingList, useListItem } from "@floating-ui/react";
|
|
7
7
|
import { IconButton } from "@entur/button";
|
|
8
8
|
import { standardisePlacement } from "@entur/tooltip";
|
|
9
9
|
import { space } from "@entur/tokens";
|
|
@@ -14,3260 +14,116 @@ const BreadcrumbNavigation = ({
|
|
|
14
14
|
"aria-label": ariaLabel = "Brødsmulesti",
|
|
15
15
|
children
|
|
16
16
|
}) => {
|
|
17
|
-
return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ol", { className: "eds-breadcrumbs", children:
|
|
18
|
-
return
|
|
19
|
-
isCurrent:
|
|
17
|
+
return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ol", { className: "eds-breadcrumbs", children: React.Children.map(children, (child, index) => {
|
|
18
|
+
return React.cloneElement(child, {
|
|
19
|
+
isCurrent: index + 1 === React.Children.count(children)
|
|
20
20
|
});
|
|
21
21
|
}) }) });
|
|
22
22
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var classes = "";
|
|
41
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
42
|
-
var arg = arguments[i];
|
|
43
|
-
if (arg) {
|
|
44
|
-
classes = appendClass(classes, parseValue(arg));
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
return classes;
|
|
48
|
-
}
|
|
49
|
-
function parseValue(arg) {
|
|
50
|
-
if (typeof arg === "string" || typeof arg === "number") {
|
|
51
|
-
return arg;
|
|
52
|
-
}
|
|
53
|
-
if (typeof arg !== "object") {
|
|
54
|
-
return "";
|
|
55
|
-
}
|
|
56
|
-
if (Array.isArray(arg)) {
|
|
57
|
-
return classNames2.apply(null, arg);
|
|
58
|
-
}
|
|
59
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
60
|
-
return arg.toString();
|
|
61
|
-
}
|
|
62
|
-
var classes = "";
|
|
63
|
-
for (var key in arg) {
|
|
64
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
65
|
-
classes = appendClass(classes, key);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
return classes;
|
|
69
|
-
}
|
|
70
|
-
function appendClass(value, newClass) {
|
|
71
|
-
if (!newClass) {
|
|
72
|
-
return value;
|
|
73
|
-
}
|
|
74
|
-
if (value) {
|
|
75
|
-
return value + " " + newClass;
|
|
76
|
-
}
|
|
77
|
-
return value + newClass;
|
|
78
|
-
}
|
|
79
|
-
if (module.exports) {
|
|
80
|
-
classNames2.default = classNames2;
|
|
81
|
-
module.exports = classNames2;
|
|
82
|
-
} else {
|
|
83
|
-
window.classNames = classNames2;
|
|
84
|
-
}
|
|
85
|
-
})();
|
|
86
|
-
})(classnames);
|
|
87
|
-
return classnames.exports;
|
|
88
|
-
}
|
|
89
|
-
var classnamesExports = requireClassnames();
|
|
90
|
-
const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
|
|
91
|
-
const defaultElement$1 = "a";
|
|
92
|
-
const BreadcrumbItem = ({
|
|
93
|
-
className,
|
|
94
|
-
isCurrent,
|
|
95
|
-
as,
|
|
96
|
-
...rest
|
|
97
|
-
}) => {
|
|
98
|
-
const Element2 = as || defaultElement$1;
|
|
99
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
100
|
-
/* @__PURE__ */ jsx("li", { className: classNames("eds-breadcrumb__item", className), children: /* @__PURE__ */ jsx(
|
|
101
|
-
Element2,
|
|
102
|
-
{
|
|
103
|
-
"aria-current": isCurrent ? "page" : void 0,
|
|
104
|
-
className: classNames("eds-breadcrumb__link", {
|
|
105
|
-
"eds-breadcrumb__link--current": isCurrent
|
|
106
|
-
}),
|
|
107
|
-
...rest
|
|
108
|
-
}
|
|
109
|
-
) }),
|
|
110
|
-
!isCurrent && /* @__PURE__ */ jsx(
|
|
111
|
-
RightArrowIcon,
|
|
112
|
-
{
|
|
113
|
-
className: "eds-breadcrumb__separator",
|
|
114
|
-
inline: true,
|
|
115
|
-
role: "presentation"
|
|
116
|
-
}
|
|
117
|
-
)
|
|
118
|
-
] });
|
|
119
|
-
};
|
|
120
|
-
function useControllableProp({
|
|
121
|
-
prop,
|
|
122
|
-
updater = () => void 0,
|
|
123
|
-
defaultValue
|
|
124
|
-
}) {
|
|
125
|
-
const [internalState, setInternalState] = useState(defaultValue);
|
|
126
|
-
useEffect(() => {
|
|
127
|
-
if (prop !== void 0) {
|
|
128
|
-
setInternalState(prop);
|
|
129
|
-
}
|
|
130
|
-
}, [prop]);
|
|
131
|
-
return prop === void 0 ? [internalState, setInternalState] : [prop, updater];
|
|
132
|
-
}
|
|
133
|
-
const CollapsibleSideNavigation = ({
|
|
134
|
-
className,
|
|
135
|
-
children,
|
|
136
|
-
size,
|
|
137
|
-
collapsed: collapsible,
|
|
138
|
-
onCollapseToggle,
|
|
139
|
-
collapsibleButtonPosition = "50%",
|
|
140
|
-
openSideMenuAriaLabel = "Åpne sidemeny",
|
|
141
|
-
closeSideMenuAriaLabel = "Lukk sidemeny",
|
|
142
|
-
...rest
|
|
143
|
-
}) => {
|
|
144
|
-
const [collapsedMenu, setCollapsedMenu] = useControllableProp({
|
|
145
|
-
prop: collapsible,
|
|
146
|
-
defaultValue: false,
|
|
147
|
-
updater: onCollapseToggle
|
|
148
|
-
});
|
|
149
|
-
return /* @__PURE__ */ jsx(
|
|
150
|
-
SideNavigationContext.Provider,
|
|
151
|
-
{
|
|
152
|
-
value: {
|
|
153
|
-
isCollapsed: collapsedMenu
|
|
154
|
-
},
|
|
155
|
-
children: /* @__PURE__ */ jsxs(
|
|
156
|
-
"ul",
|
|
157
|
-
{
|
|
158
|
-
className: classNames(
|
|
159
|
-
"eds-side-navigation",
|
|
160
|
-
{ "eds-side-navigation--small": size === "small" },
|
|
161
|
-
{ "eds-side-navigation--collapsed": collapsedMenu },
|
|
162
|
-
className
|
|
163
|
-
),
|
|
164
|
-
...rest,
|
|
165
|
-
children: [
|
|
166
|
-
children,
|
|
167
|
-
/* @__PURE__ */ jsx(
|
|
168
|
-
"button",
|
|
169
|
-
{
|
|
170
|
-
className: "eds-side-navigation__collapse-button",
|
|
171
|
-
onClick: () => setCollapsedMenu(!collapsedMenu),
|
|
172
|
-
style: { top: `${collapsibleButtonPosition}` },
|
|
173
|
-
children: collapsedMenu ? /* @__PURE__ */ jsx(MenuIcon, { "aria-label": openSideMenuAriaLabel }) : /* @__PURE__ */ jsx(LeftArrowIcon, { "aria-label": closeSideMenuAriaLabel })
|
|
174
|
-
}
|
|
175
|
-
)
|
|
176
|
-
]
|
|
177
|
-
}
|
|
178
|
-
)
|
|
179
|
-
}
|
|
180
|
-
);
|
|
181
|
-
};
|
|
182
|
-
const SideNavigationContext = React__default.createContext({
|
|
183
|
-
isCollapsed: false
|
|
184
|
-
});
|
|
185
|
-
const useSideNavigationContext = () => {
|
|
186
|
-
const context = React__default.useContext(SideNavigationContext);
|
|
187
|
-
if (!context) {
|
|
188
|
-
console.error(
|
|
189
|
-
"Error reading SideNavigationContext. Please contact maintainer of @entur/menu"
|
|
190
|
-
);
|
|
191
|
-
}
|
|
192
|
-
return context;
|
|
193
|
-
};
|
|
194
|
-
function hasWindow() {
|
|
195
|
-
return typeof window !== "undefined";
|
|
196
|
-
}
|
|
197
|
-
function getNodeName(node) {
|
|
198
|
-
if (isNode(node)) {
|
|
199
|
-
return (node.nodeName || "").toLowerCase();
|
|
200
|
-
}
|
|
201
|
-
return "#document";
|
|
202
|
-
}
|
|
203
|
-
function getWindow(node) {
|
|
204
|
-
var _node$ownerDocument;
|
|
205
|
-
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
206
|
-
}
|
|
207
|
-
function getDocumentElement(node) {
|
|
208
|
-
var _ref;
|
|
209
|
-
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
210
|
-
}
|
|
211
|
-
function isNode(value) {
|
|
212
|
-
if (!hasWindow()) {
|
|
213
|
-
return false;
|
|
214
|
-
}
|
|
215
|
-
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
216
|
-
}
|
|
217
|
-
function isElement(value) {
|
|
218
|
-
if (!hasWindow()) {
|
|
219
|
-
return false;
|
|
220
|
-
}
|
|
221
|
-
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
222
|
-
}
|
|
223
|
-
function isHTMLElement(value) {
|
|
224
|
-
if (!hasWindow()) {
|
|
225
|
-
return false;
|
|
226
|
-
}
|
|
227
|
-
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
228
|
-
}
|
|
229
|
-
function isShadowRoot(value) {
|
|
230
|
-
if (!hasWindow() || typeof ShadowRoot === "undefined") {
|
|
231
|
-
return false;
|
|
232
|
-
}
|
|
233
|
-
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
234
|
-
}
|
|
235
|
-
function isOverflowElement(element) {
|
|
236
|
-
const {
|
|
237
|
-
overflow,
|
|
238
|
-
overflowX,
|
|
239
|
-
overflowY,
|
|
240
|
-
display
|
|
241
|
-
} = getComputedStyle(element);
|
|
242
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
|
|
243
|
-
}
|
|
244
|
-
function isTableElement(element) {
|
|
245
|
-
return ["table", "td", "th"].includes(getNodeName(element));
|
|
246
|
-
}
|
|
247
|
-
function isTopLayer(element) {
|
|
248
|
-
return [":popover-open", ":modal"].some((selector) => {
|
|
249
|
-
try {
|
|
250
|
-
return element.matches(selector);
|
|
251
|
-
} catch (e) {
|
|
252
|
-
return false;
|
|
253
|
-
}
|
|
254
|
-
});
|
|
255
|
-
}
|
|
256
|
-
function isContainingBlock(elementOrCss) {
|
|
257
|
-
const webkit = isWebKit();
|
|
258
|
-
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
|
259
|
-
return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
|
|
260
|
-
}
|
|
261
|
-
function getContainingBlock(element) {
|
|
262
|
-
let currentNode = getParentNode(element);
|
|
263
|
-
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
264
|
-
if (isContainingBlock(currentNode)) {
|
|
265
|
-
return currentNode;
|
|
266
|
-
} else if (isTopLayer(currentNode)) {
|
|
267
|
-
return null;
|
|
268
|
-
}
|
|
269
|
-
currentNode = getParentNode(currentNode);
|
|
270
|
-
}
|
|
271
|
-
return null;
|
|
272
|
-
}
|
|
273
|
-
function isWebKit() {
|
|
274
|
-
if (typeof CSS === "undefined" || !CSS.supports) return false;
|
|
275
|
-
return CSS.supports("-webkit-backdrop-filter", "none");
|
|
276
|
-
}
|
|
277
|
-
function isLastTraversableNode(node) {
|
|
278
|
-
return ["html", "body", "#document"].includes(getNodeName(node));
|
|
279
|
-
}
|
|
280
|
-
function getComputedStyle(element) {
|
|
281
|
-
return getWindow(element).getComputedStyle(element);
|
|
282
|
-
}
|
|
283
|
-
function getNodeScroll(element) {
|
|
284
|
-
if (isElement(element)) {
|
|
285
|
-
return {
|
|
286
|
-
scrollLeft: element.scrollLeft,
|
|
287
|
-
scrollTop: element.scrollTop
|
|
288
|
-
};
|
|
289
|
-
}
|
|
290
|
-
return {
|
|
291
|
-
scrollLeft: element.scrollX,
|
|
292
|
-
scrollTop: element.scrollY
|
|
293
|
-
};
|
|
294
|
-
}
|
|
295
|
-
function getParentNode(node) {
|
|
296
|
-
if (getNodeName(node) === "html") {
|
|
297
|
-
return node;
|
|
298
|
-
}
|
|
299
|
-
const result = (
|
|
300
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
301
|
-
node.assignedSlot || // DOM Element detected.
|
|
302
|
-
node.parentNode || // ShadowRoot detected.
|
|
303
|
-
isShadowRoot(node) && node.host || // Fallback.
|
|
304
|
-
getDocumentElement(node)
|
|
305
|
-
);
|
|
306
|
-
return isShadowRoot(result) ? result.host : result;
|
|
307
|
-
}
|
|
308
|
-
function getNearestOverflowAncestor(node) {
|
|
309
|
-
const parentNode = getParentNode(node);
|
|
310
|
-
if (isLastTraversableNode(parentNode)) {
|
|
311
|
-
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
312
|
-
}
|
|
313
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
314
|
-
return parentNode;
|
|
315
|
-
}
|
|
316
|
-
return getNearestOverflowAncestor(parentNode);
|
|
317
|
-
}
|
|
318
|
-
function getOverflowAncestors(node, list, traverseIframes) {
|
|
319
|
-
var _node$ownerDocument2;
|
|
320
|
-
if (list === void 0) {
|
|
321
|
-
list = [];
|
|
322
|
-
}
|
|
323
|
-
if (traverseIframes === void 0) {
|
|
324
|
-
traverseIframes = true;
|
|
325
|
-
}
|
|
326
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
327
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
328
|
-
const win = getWindow(scrollableAncestor);
|
|
329
|
-
if (isBody) {
|
|
330
|
-
const frameElement = getFrameElement(win);
|
|
331
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
332
|
-
}
|
|
333
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
334
|
-
}
|
|
335
|
-
function getFrameElement(win) {
|
|
336
|
-
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
337
|
-
}
|
|
338
|
-
function activeElement(doc) {
|
|
339
|
-
let activeElement2 = doc.activeElement;
|
|
340
|
-
while (((_activeElement = activeElement2) == null || (_activeElement = _activeElement.shadowRoot) == null ? void 0 : _activeElement.activeElement) != null) {
|
|
341
|
-
var _activeElement;
|
|
342
|
-
activeElement2 = activeElement2.shadowRoot.activeElement;
|
|
343
|
-
}
|
|
344
|
-
return activeElement2;
|
|
345
|
-
}
|
|
346
|
-
function contains(parent, child) {
|
|
347
|
-
if (!parent || !child) {
|
|
348
|
-
return false;
|
|
349
|
-
}
|
|
350
|
-
const rootNode = child.getRootNode == null ? void 0 : child.getRootNode();
|
|
351
|
-
if (parent.contains(child)) {
|
|
352
|
-
return true;
|
|
353
|
-
}
|
|
354
|
-
if (rootNode && isShadowRoot(rootNode)) {
|
|
355
|
-
let next = child;
|
|
356
|
-
while (next) {
|
|
357
|
-
if (parent === next) {
|
|
358
|
-
return true;
|
|
359
|
-
}
|
|
360
|
-
next = next.parentNode || next.host;
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
return false;
|
|
364
|
-
}
|
|
365
|
-
function getPlatform() {
|
|
366
|
-
const uaData = navigator.userAgentData;
|
|
367
|
-
if (uaData != null && uaData.platform) {
|
|
368
|
-
return uaData.platform;
|
|
369
|
-
}
|
|
370
|
-
return navigator.platform;
|
|
371
|
-
}
|
|
372
|
-
function getUserAgent() {
|
|
373
|
-
const uaData = navigator.userAgentData;
|
|
374
|
-
if (uaData && Array.isArray(uaData.brands)) {
|
|
375
|
-
return uaData.brands.map((_ref) => {
|
|
376
|
-
let {
|
|
377
|
-
brand,
|
|
378
|
-
version
|
|
379
|
-
} = _ref;
|
|
380
|
-
return brand + "/" + version;
|
|
381
|
-
}).join(" ");
|
|
382
|
-
}
|
|
383
|
-
return navigator.userAgent;
|
|
384
|
-
}
|
|
385
|
-
function isVirtualClick(event) {
|
|
386
|
-
if (event.mozInputSource === 0 && event.isTrusted) {
|
|
387
|
-
return true;
|
|
388
|
-
}
|
|
389
|
-
if (isAndroid() && event.pointerType) {
|
|
390
|
-
return event.type === "click" && event.buttons === 1;
|
|
391
|
-
}
|
|
392
|
-
return event.detail === 0 && !event.pointerType;
|
|
393
|
-
}
|
|
394
|
-
function isVirtualPointerEvent(event) {
|
|
395
|
-
if (isJSDOM()) return false;
|
|
396
|
-
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.
|
|
397
|
-
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "touch";
|
|
398
|
-
}
|
|
399
|
-
function isSafari() {
|
|
400
|
-
return /apple/i.test(navigator.vendor);
|
|
401
|
-
}
|
|
402
|
-
function isAndroid() {
|
|
403
|
-
const re = /android/i;
|
|
404
|
-
return re.test(getPlatform()) || re.test(getUserAgent());
|
|
405
|
-
}
|
|
406
|
-
function isMac() {
|
|
407
|
-
return getPlatform().toLowerCase().startsWith("mac") && !navigator.maxTouchPoints;
|
|
408
|
-
}
|
|
409
|
-
function isJSDOM() {
|
|
410
|
-
return getUserAgent().includes("jsdom/");
|
|
411
|
-
}
|
|
412
|
-
function getDocument(node) {
|
|
413
|
-
return (node == null ? void 0 : node.ownerDocument) || document;
|
|
414
|
-
}
|
|
415
|
-
const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
|
|
416
|
-
function isTypeableElement(element) {
|
|
417
|
-
return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
|
|
418
|
-
}
|
|
419
|
-
function stopEvent(event) {
|
|
420
|
-
event.preventDefault();
|
|
421
|
-
event.stopPropagation();
|
|
422
|
-
}
|
|
423
|
-
function isTypeableCombobox(element) {
|
|
424
|
-
if (!element) return false;
|
|
425
|
-
return element.getAttribute("role") === "combobox" && isTypeableElement(element);
|
|
426
|
-
}
|
|
427
|
-
const min = Math.min;
|
|
428
|
-
const max = Math.max;
|
|
429
|
-
const round = Math.round;
|
|
430
|
-
const floor = Math.floor;
|
|
431
|
-
const createCoords = (v) => ({
|
|
432
|
-
x: v,
|
|
433
|
-
y: v
|
|
434
|
-
});
|
|
435
|
-
const oppositeSideMap = {
|
|
436
|
-
left: "right",
|
|
437
|
-
right: "left",
|
|
438
|
-
bottom: "top",
|
|
439
|
-
top: "bottom"
|
|
440
|
-
};
|
|
441
|
-
const oppositeAlignmentMap = {
|
|
442
|
-
start: "end",
|
|
443
|
-
end: "start"
|
|
444
|
-
};
|
|
445
|
-
function clamp(start, value, end) {
|
|
446
|
-
return max(start, min(value, end));
|
|
447
|
-
}
|
|
448
|
-
function evaluate(value, param) {
|
|
449
|
-
return typeof value === "function" ? value(param) : value;
|
|
450
|
-
}
|
|
451
|
-
function getSide(placement) {
|
|
452
|
-
return placement.split("-")[0];
|
|
453
|
-
}
|
|
454
|
-
function getAlignment(placement) {
|
|
455
|
-
return placement.split("-")[1];
|
|
456
|
-
}
|
|
457
|
-
function getOppositeAxis(axis) {
|
|
458
|
-
return axis === "x" ? "y" : "x";
|
|
459
|
-
}
|
|
460
|
-
function getAxisLength(axis) {
|
|
461
|
-
return axis === "y" ? "height" : "width";
|
|
462
|
-
}
|
|
463
|
-
function getSideAxis(placement) {
|
|
464
|
-
return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
|
|
465
|
-
}
|
|
466
|
-
function getAlignmentAxis(placement) {
|
|
467
|
-
return getOppositeAxis(getSideAxis(placement));
|
|
468
|
-
}
|
|
469
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
470
|
-
if (rtl === void 0) {
|
|
471
|
-
rtl = false;
|
|
472
|
-
}
|
|
473
|
-
const alignment = getAlignment(placement);
|
|
474
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
475
|
-
const length = getAxisLength(alignmentAxis);
|
|
476
|
-
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
|
|
477
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
478
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
479
|
-
}
|
|
480
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
481
|
-
}
|
|
482
|
-
function getExpandedPlacements(placement) {
|
|
483
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
484
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
485
|
-
}
|
|
486
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
487
|
-
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
|
|
488
|
-
}
|
|
489
|
-
function getSideList(side, isStart, rtl) {
|
|
490
|
-
const lr = ["left", "right"];
|
|
491
|
-
const rl = ["right", "left"];
|
|
492
|
-
const tb = ["top", "bottom"];
|
|
493
|
-
const bt = ["bottom", "top"];
|
|
494
|
-
switch (side) {
|
|
495
|
-
case "top":
|
|
496
|
-
case "bottom":
|
|
497
|
-
if (rtl) return isStart ? rl : lr;
|
|
498
|
-
return isStart ? lr : rl;
|
|
499
|
-
case "left":
|
|
500
|
-
case "right":
|
|
501
|
-
return isStart ? tb : bt;
|
|
502
|
-
default:
|
|
503
|
-
return [];
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
507
|
-
const alignment = getAlignment(placement);
|
|
508
|
-
let list = getSideList(getSide(placement), direction === "start", rtl);
|
|
509
|
-
if (alignment) {
|
|
510
|
-
list = list.map((side) => side + "-" + alignment);
|
|
511
|
-
if (flipAlignment) {
|
|
512
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
return list;
|
|
516
|
-
}
|
|
517
|
-
function getOppositePlacement(placement) {
|
|
518
|
-
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
|
|
519
|
-
}
|
|
520
|
-
function expandPaddingObject(padding) {
|
|
521
|
-
return {
|
|
522
|
-
top: 0,
|
|
523
|
-
right: 0,
|
|
524
|
-
bottom: 0,
|
|
525
|
-
left: 0,
|
|
526
|
-
...padding
|
|
527
|
-
};
|
|
528
|
-
}
|
|
529
|
-
function getPaddingObject(padding) {
|
|
530
|
-
return typeof padding !== "number" ? expandPaddingObject(padding) : {
|
|
531
|
-
top: padding,
|
|
532
|
-
right: padding,
|
|
533
|
-
bottom: padding,
|
|
534
|
-
left: padding
|
|
535
|
-
};
|
|
536
|
-
}
|
|
537
|
-
function rectToClientRect(rect) {
|
|
538
|
-
const {
|
|
539
|
-
x,
|
|
540
|
-
y,
|
|
541
|
-
width,
|
|
542
|
-
height
|
|
543
|
-
} = rect;
|
|
544
|
-
return {
|
|
545
|
-
width,
|
|
546
|
-
height,
|
|
547
|
-
top: y,
|
|
548
|
-
left: x,
|
|
549
|
-
right: x + width,
|
|
550
|
-
bottom: y + height,
|
|
551
|
-
x,
|
|
552
|
-
y
|
|
553
|
-
};
|
|
554
|
-
}
|
|
555
|
-
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
556
|
-
let {
|
|
557
|
-
reference,
|
|
558
|
-
floating
|
|
559
|
-
} = _ref;
|
|
560
|
-
const sideAxis = getSideAxis(placement);
|
|
561
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
562
|
-
const alignLength = getAxisLength(alignmentAxis);
|
|
563
|
-
const side = getSide(placement);
|
|
564
|
-
const isVertical = sideAxis === "y";
|
|
565
|
-
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
566
|
-
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
567
|
-
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
568
|
-
let coords;
|
|
569
|
-
switch (side) {
|
|
570
|
-
case "top":
|
|
571
|
-
coords = {
|
|
572
|
-
x: commonX,
|
|
573
|
-
y: reference.y - floating.height
|
|
574
|
-
};
|
|
575
|
-
break;
|
|
576
|
-
case "bottom":
|
|
577
|
-
coords = {
|
|
578
|
-
x: commonX,
|
|
579
|
-
y: reference.y + reference.height
|
|
580
|
-
};
|
|
581
|
-
break;
|
|
582
|
-
case "right":
|
|
583
|
-
coords = {
|
|
584
|
-
x: reference.x + reference.width,
|
|
585
|
-
y: commonY
|
|
586
|
-
};
|
|
587
|
-
break;
|
|
588
|
-
case "left":
|
|
589
|
-
coords = {
|
|
590
|
-
x: reference.x - floating.width,
|
|
591
|
-
y: commonY
|
|
592
|
-
};
|
|
593
|
-
break;
|
|
594
|
-
default:
|
|
595
|
-
coords = {
|
|
596
|
-
x: reference.x,
|
|
597
|
-
y: reference.y
|
|
598
|
-
};
|
|
599
|
-
}
|
|
600
|
-
switch (getAlignment(placement)) {
|
|
601
|
-
case "start":
|
|
602
|
-
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
603
|
-
break;
|
|
604
|
-
case "end":
|
|
605
|
-
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
606
|
-
break;
|
|
607
|
-
}
|
|
608
|
-
return coords;
|
|
609
|
-
}
|
|
610
|
-
const computePosition$1 = async (reference, floating, config) => {
|
|
611
|
-
const {
|
|
612
|
-
placement = "bottom",
|
|
613
|
-
strategy = "absolute",
|
|
614
|
-
middleware = [],
|
|
615
|
-
platform: platform2
|
|
616
|
-
} = config;
|
|
617
|
-
const validMiddleware = middleware.filter(Boolean);
|
|
618
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
|
|
619
|
-
let rects = await platform2.getElementRects({
|
|
620
|
-
reference,
|
|
621
|
-
floating,
|
|
622
|
-
strategy
|
|
623
|
-
});
|
|
624
|
-
let {
|
|
625
|
-
x,
|
|
626
|
-
y
|
|
627
|
-
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
628
|
-
let statefulPlacement = placement;
|
|
629
|
-
let middlewareData = {};
|
|
630
|
-
let resetCount = 0;
|
|
631
|
-
for (let i = 0; i < validMiddleware.length; i++) {
|
|
632
|
-
const {
|
|
633
|
-
name,
|
|
634
|
-
fn
|
|
635
|
-
} = validMiddleware[i];
|
|
636
|
-
const {
|
|
637
|
-
x: nextX,
|
|
638
|
-
y: nextY,
|
|
639
|
-
data,
|
|
640
|
-
reset
|
|
641
|
-
} = await fn({
|
|
642
|
-
x,
|
|
643
|
-
y,
|
|
644
|
-
initialPlacement: placement,
|
|
645
|
-
placement: statefulPlacement,
|
|
646
|
-
strategy,
|
|
647
|
-
middlewareData,
|
|
648
|
-
rects,
|
|
649
|
-
platform: platform2,
|
|
650
|
-
elements: {
|
|
651
|
-
reference,
|
|
652
|
-
floating
|
|
653
|
-
}
|
|
654
|
-
});
|
|
655
|
-
x = nextX != null ? nextX : x;
|
|
656
|
-
y = nextY != null ? nextY : y;
|
|
657
|
-
middlewareData = {
|
|
658
|
-
...middlewareData,
|
|
659
|
-
[name]: {
|
|
660
|
-
...middlewareData[name],
|
|
661
|
-
...data
|
|
662
|
-
}
|
|
663
|
-
};
|
|
664
|
-
if (reset && resetCount <= 50) {
|
|
665
|
-
resetCount++;
|
|
666
|
-
if (typeof reset === "object") {
|
|
667
|
-
if (reset.placement) {
|
|
668
|
-
statefulPlacement = reset.placement;
|
|
669
|
-
}
|
|
670
|
-
if (reset.rects) {
|
|
671
|
-
rects = reset.rects === true ? await platform2.getElementRects({
|
|
672
|
-
reference,
|
|
673
|
-
floating,
|
|
674
|
-
strategy
|
|
675
|
-
}) : reset.rects;
|
|
676
|
-
}
|
|
677
|
-
({
|
|
678
|
-
x,
|
|
679
|
-
y
|
|
680
|
-
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
681
|
-
}
|
|
682
|
-
i = -1;
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
return {
|
|
686
|
-
x,
|
|
687
|
-
y,
|
|
688
|
-
placement: statefulPlacement,
|
|
689
|
-
strategy,
|
|
690
|
-
middlewareData
|
|
691
|
-
};
|
|
692
|
-
};
|
|
693
|
-
async function detectOverflow(state, options) {
|
|
694
|
-
var _await$platform$isEle;
|
|
695
|
-
if (options === void 0) {
|
|
696
|
-
options = {};
|
|
697
|
-
}
|
|
698
|
-
const {
|
|
699
|
-
x,
|
|
700
|
-
y,
|
|
701
|
-
platform: platform2,
|
|
702
|
-
rects,
|
|
703
|
-
elements,
|
|
704
|
-
strategy
|
|
705
|
-
} = state;
|
|
706
|
-
const {
|
|
707
|
-
boundary = "clippingAncestors",
|
|
708
|
-
rootBoundary = "viewport",
|
|
709
|
-
elementContext = "floating",
|
|
710
|
-
altBoundary = false,
|
|
711
|
-
padding = 0
|
|
712
|
-
} = evaluate(options, state);
|
|
713
|
-
const paddingObject = getPaddingObject(padding);
|
|
714
|
-
const altContext = elementContext === "floating" ? "reference" : "floating";
|
|
715
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
716
|
-
const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
|
|
717
|
-
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)),
|
|
718
|
-
boundary,
|
|
719
|
-
rootBoundary,
|
|
720
|
-
strategy
|
|
721
|
-
}));
|
|
722
|
-
const rect = elementContext === "floating" ? {
|
|
723
|
-
x,
|
|
724
|
-
y,
|
|
725
|
-
width: rects.floating.width,
|
|
726
|
-
height: rects.floating.height
|
|
727
|
-
} : rects.reference;
|
|
728
|
-
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
|
|
729
|
-
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
|
|
730
|
-
x: 1,
|
|
731
|
-
y: 1
|
|
732
|
-
} : {
|
|
733
|
-
x: 1,
|
|
734
|
-
y: 1
|
|
735
|
-
};
|
|
736
|
-
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
737
|
-
elements,
|
|
738
|
-
rect,
|
|
739
|
-
offsetParent,
|
|
740
|
-
strategy
|
|
741
|
-
}) : rect);
|
|
742
|
-
return {
|
|
743
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
744
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
745
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
746
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
747
|
-
};
|
|
748
|
-
}
|
|
749
|
-
const flip$2 = function(options) {
|
|
750
|
-
if (options === void 0) {
|
|
751
|
-
options = {};
|
|
752
|
-
}
|
|
753
|
-
return {
|
|
754
|
-
name: "flip",
|
|
755
|
-
options,
|
|
756
|
-
async fn(state) {
|
|
757
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
758
|
-
const {
|
|
759
|
-
placement,
|
|
760
|
-
middlewareData,
|
|
761
|
-
rects,
|
|
762
|
-
initialPlacement,
|
|
763
|
-
platform: platform2,
|
|
764
|
-
elements
|
|
765
|
-
} = state;
|
|
766
|
-
const {
|
|
767
|
-
mainAxis: checkMainAxis = true,
|
|
768
|
-
crossAxis: checkCrossAxis = true,
|
|
769
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
770
|
-
fallbackStrategy = "bestFit",
|
|
771
|
-
fallbackAxisSideDirection = "none",
|
|
772
|
-
flipAlignment = true,
|
|
773
|
-
...detectOverflowOptions
|
|
774
|
-
} = evaluate(options, state);
|
|
775
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
776
|
-
return {};
|
|
777
|
-
}
|
|
778
|
-
const side = getSide(placement);
|
|
779
|
-
const initialSideAxis = getSideAxis(initialPlacement);
|
|
780
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
781
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
782
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
783
|
-
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
|
|
784
|
-
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
785
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
786
|
-
}
|
|
787
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
788
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
789
|
-
const overflows = [];
|
|
790
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
791
|
-
if (checkMainAxis) {
|
|
792
|
-
overflows.push(overflow[side]);
|
|
793
|
-
}
|
|
794
|
-
if (checkCrossAxis) {
|
|
795
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
796
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
797
|
-
}
|
|
798
|
-
overflowsData = [...overflowsData, {
|
|
799
|
-
placement,
|
|
800
|
-
overflows
|
|
801
|
-
}];
|
|
802
|
-
if (!overflows.every((side2) => side2 <= 0)) {
|
|
803
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
804
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
805
|
-
const nextPlacement = placements[nextIndex];
|
|
806
|
-
if (nextPlacement) {
|
|
807
|
-
return {
|
|
808
|
-
data: {
|
|
809
|
-
index: nextIndex,
|
|
810
|
-
overflows: overflowsData
|
|
811
|
-
},
|
|
812
|
-
reset: {
|
|
813
|
-
placement: nextPlacement
|
|
814
|
-
}
|
|
815
|
-
};
|
|
816
|
-
}
|
|
817
|
-
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;
|
|
818
|
-
if (!resetPlacement) {
|
|
819
|
-
switch (fallbackStrategy) {
|
|
820
|
-
case "bestFit": {
|
|
821
|
-
var _overflowsData$filter2;
|
|
822
|
-
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
|
|
823
|
-
if (hasFallbackAxisSideDirection) {
|
|
824
|
-
const currentSideAxis = getSideAxis(d.placement);
|
|
825
|
-
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
|
|
826
|
-
// reading directions favoring greater width.
|
|
827
|
-
currentSideAxis === "y";
|
|
828
|
-
}
|
|
829
|
-
return true;
|
|
830
|
-
}).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];
|
|
831
|
-
if (placement2) {
|
|
832
|
-
resetPlacement = placement2;
|
|
833
|
-
}
|
|
834
|
-
break;
|
|
835
|
-
}
|
|
836
|
-
case "initialPlacement":
|
|
837
|
-
resetPlacement = initialPlacement;
|
|
838
|
-
break;
|
|
839
|
-
}
|
|
840
|
-
}
|
|
841
|
-
if (placement !== resetPlacement) {
|
|
842
|
-
return {
|
|
843
|
-
reset: {
|
|
844
|
-
placement: resetPlacement
|
|
845
|
-
}
|
|
846
|
-
};
|
|
847
|
-
}
|
|
848
|
-
}
|
|
849
|
-
return {};
|
|
850
|
-
}
|
|
851
|
-
};
|
|
852
|
-
};
|
|
853
|
-
async function convertValueToCoords(state, options) {
|
|
854
|
-
const {
|
|
855
|
-
placement,
|
|
856
|
-
platform: platform2,
|
|
857
|
-
elements
|
|
858
|
-
} = state;
|
|
859
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
860
|
-
const side = getSide(placement);
|
|
861
|
-
const alignment = getAlignment(placement);
|
|
862
|
-
const isVertical = getSideAxis(placement) === "y";
|
|
863
|
-
const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
|
|
864
|
-
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
865
|
-
const rawValue = evaluate(options, state);
|
|
866
|
-
let {
|
|
867
|
-
mainAxis,
|
|
868
|
-
crossAxis,
|
|
869
|
-
alignmentAxis
|
|
870
|
-
} = typeof rawValue === "number" ? {
|
|
871
|
-
mainAxis: rawValue,
|
|
872
|
-
crossAxis: 0,
|
|
873
|
-
alignmentAxis: null
|
|
874
|
-
} : {
|
|
875
|
-
mainAxis: rawValue.mainAxis || 0,
|
|
876
|
-
crossAxis: rawValue.crossAxis || 0,
|
|
877
|
-
alignmentAxis: rawValue.alignmentAxis
|
|
878
|
-
};
|
|
879
|
-
if (alignment && typeof alignmentAxis === "number") {
|
|
880
|
-
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
|
|
881
|
-
}
|
|
882
|
-
return isVertical ? {
|
|
883
|
-
x: crossAxis * crossAxisMulti,
|
|
884
|
-
y: mainAxis * mainAxisMulti
|
|
885
|
-
} : {
|
|
886
|
-
x: mainAxis * mainAxisMulti,
|
|
887
|
-
y: crossAxis * crossAxisMulti
|
|
888
|
-
};
|
|
889
|
-
}
|
|
890
|
-
const offset$2 = function(options) {
|
|
891
|
-
if (options === void 0) {
|
|
892
|
-
options = 0;
|
|
893
|
-
}
|
|
894
|
-
return {
|
|
895
|
-
name: "offset",
|
|
896
|
-
options,
|
|
897
|
-
async fn(state) {
|
|
898
|
-
var _middlewareData$offse, _middlewareData$arrow;
|
|
899
|
-
const {
|
|
900
|
-
x,
|
|
901
|
-
y,
|
|
902
|
-
placement,
|
|
903
|
-
middlewareData
|
|
904
|
-
} = state;
|
|
905
|
-
const diffCoords = await convertValueToCoords(state, options);
|
|
906
|
-
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
907
|
-
return {};
|
|
908
|
-
}
|
|
909
|
-
return {
|
|
910
|
-
x: x + diffCoords.x,
|
|
911
|
-
y: y + diffCoords.y,
|
|
912
|
-
data: {
|
|
913
|
-
...diffCoords,
|
|
914
|
-
placement
|
|
915
|
-
}
|
|
916
|
-
};
|
|
917
|
-
}
|
|
918
|
-
};
|
|
919
|
-
};
|
|
920
|
-
const shift$2 = function(options) {
|
|
921
|
-
if (options === void 0) {
|
|
922
|
-
options = {};
|
|
923
|
-
}
|
|
924
|
-
return {
|
|
925
|
-
name: "shift",
|
|
926
|
-
options,
|
|
927
|
-
async fn(state) {
|
|
928
|
-
const {
|
|
929
|
-
x,
|
|
930
|
-
y,
|
|
931
|
-
placement
|
|
932
|
-
} = state;
|
|
933
|
-
const {
|
|
934
|
-
mainAxis: checkMainAxis = true,
|
|
935
|
-
crossAxis: checkCrossAxis = false,
|
|
936
|
-
limiter = {
|
|
937
|
-
fn: (_ref) => {
|
|
938
|
-
let {
|
|
939
|
-
x: x2,
|
|
940
|
-
y: y2
|
|
941
|
-
} = _ref;
|
|
942
|
-
return {
|
|
943
|
-
x: x2,
|
|
944
|
-
y: y2
|
|
945
|
-
};
|
|
946
|
-
}
|
|
947
|
-
},
|
|
948
|
-
...detectOverflowOptions
|
|
949
|
-
} = evaluate(options, state);
|
|
950
|
-
const coords = {
|
|
951
|
-
x,
|
|
952
|
-
y
|
|
953
|
-
};
|
|
954
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
955
|
-
const crossAxis = getSideAxis(getSide(placement));
|
|
956
|
-
const mainAxis = getOppositeAxis(crossAxis);
|
|
957
|
-
let mainAxisCoord = coords[mainAxis];
|
|
958
|
-
let crossAxisCoord = coords[crossAxis];
|
|
959
|
-
if (checkMainAxis) {
|
|
960
|
-
const minSide = mainAxis === "y" ? "top" : "left";
|
|
961
|
-
const maxSide = mainAxis === "y" ? "bottom" : "right";
|
|
962
|
-
const min2 = mainAxisCoord + overflow[minSide];
|
|
963
|
-
const max2 = mainAxisCoord - overflow[maxSide];
|
|
964
|
-
mainAxisCoord = clamp(min2, mainAxisCoord, max2);
|
|
965
|
-
}
|
|
966
|
-
if (checkCrossAxis) {
|
|
967
|
-
const minSide = crossAxis === "y" ? "top" : "left";
|
|
968
|
-
const maxSide = crossAxis === "y" ? "bottom" : "right";
|
|
969
|
-
const min2 = crossAxisCoord + overflow[minSide];
|
|
970
|
-
const max2 = crossAxisCoord - overflow[maxSide];
|
|
971
|
-
crossAxisCoord = clamp(min2, crossAxisCoord, max2);
|
|
972
|
-
}
|
|
973
|
-
const limitedCoords = limiter.fn({
|
|
974
|
-
...state,
|
|
975
|
-
[mainAxis]: mainAxisCoord,
|
|
976
|
-
[crossAxis]: crossAxisCoord
|
|
977
|
-
});
|
|
978
|
-
return {
|
|
979
|
-
...limitedCoords,
|
|
980
|
-
data: {
|
|
981
|
-
x: limitedCoords.x - x,
|
|
982
|
-
y: limitedCoords.y - y,
|
|
983
|
-
enabled: {
|
|
984
|
-
[mainAxis]: checkMainAxis,
|
|
985
|
-
[crossAxis]: checkCrossAxis
|
|
986
|
-
}
|
|
987
|
-
}
|
|
988
|
-
};
|
|
989
|
-
}
|
|
990
|
-
};
|
|
991
|
-
};
|
|
992
|
-
function getCssDimensions(element) {
|
|
993
|
-
const css = getComputedStyle(element);
|
|
994
|
-
let width = parseFloat(css.width) || 0;
|
|
995
|
-
let height = parseFloat(css.height) || 0;
|
|
996
|
-
const hasOffset = isHTMLElement(element);
|
|
997
|
-
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
998
|
-
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
999
|
-
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
1000
|
-
if (shouldFallback) {
|
|
1001
|
-
width = offsetWidth;
|
|
1002
|
-
height = offsetHeight;
|
|
1003
|
-
}
|
|
1004
|
-
return {
|
|
1005
|
-
width,
|
|
1006
|
-
height,
|
|
1007
|
-
$: shouldFallback
|
|
1008
|
-
};
|
|
1009
|
-
}
|
|
1010
|
-
function unwrapElement(element) {
|
|
1011
|
-
return !isElement(element) ? element.contextElement : element;
|
|
1012
|
-
}
|
|
1013
|
-
function getScale(element) {
|
|
1014
|
-
const domElement = unwrapElement(element);
|
|
1015
|
-
if (!isHTMLElement(domElement)) {
|
|
1016
|
-
return createCoords(1);
|
|
1017
|
-
}
|
|
1018
|
-
const rect = domElement.getBoundingClientRect();
|
|
1019
|
-
const {
|
|
1020
|
-
width,
|
|
1021
|
-
height,
|
|
1022
|
-
$
|
|
1023
|
-
} = getCssDimensions(domElement);
|
|
1024
|
-
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
1025
|
-
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
1026
|
-
if (!x || !Number.isFinite(x)) {
|
|
1027
|
-
x = 1;
|
|
1028
|
-
}
|
|
1029
|
-
if (!y || !Number.isFinite(y)) {
|
|
1030
|
-
y = 1;
|
|
1031
|
-
}
|
|
1032
|
-
return {
|
|
1033
|
-
x,
|
|
1034
|
-
y
|
|
1035
|
-
};
|
|
1036
|
-
}
|
|
1037
|
-
const noOffsets = /* @__PURE__ */ createCoords(0);
|
|
1038
|
-
function getVisualOffsets(element) {
|
|
1039
|
-
const win = getWindow(element);
|
|
1040
|
-
if (!isWebKit() || !win.visualViewport) {
|
|
1041
|
-
return noOffsets;
|
|
1042
|
-
}
|
|
1043
|
-
return {
|
|
1044
|
-
x: win.visualViewport.offsetLeft,
|
|
1045
|
-
y: win.visualViewport.offsetTop
|
|
1046
|
-
};
|
|
1047
|
-
}
|
|
1048
|
-
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
1049
|
-
if (isFixed === void 0) {
|
|
1050
|
-
isFixed = false;
|
|
1051
|
-
}
|
|
1052
|
-
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
1053
|
-
return false;
|
|
1054
|
-
}
|
|
1055
|
-
return isFixed;
|
|
1056
|
-
}
|
|
1057
|
-
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
1058
|
-
if (includeScale === void 0) {
|
|
1059
|
-
includeScale = false;
|
|
1060
|
-
}
|
|
1061
|
-
if (isFixedStrategy === void 0) {
|
|
1062
|
-
isFixedStrategy = false;
|
|
1063
|
-
}
|
|
1064
|
-
const clientRect = element.getBoundingClientRect();
|
|
1065
|
-
const domElement = unwrapElement(element);
|
|
1066
|
-
let scale = createCoords(1);
|
|
1067
|
-
if (includeScale) {
|
|
1068
|
-
if (offsetParent) {
|
|
1069
|
-
if (isElement(offsetParent)) {
|
|
1070
|
-
scale = getScale(offsetParent);
|
|
1071
|
-
}
|
|
1072
|
-
} else {
|
|
1073
|
-
scale = getScale(element);
|
|
1074
|
-
}
|
|
1075
|
-
}
|
|
1076
|
-
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
1077
|
-
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
1078
|
-
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
1079
|
-
let width = clientRect.width / scale.x;
|
|
1080
|
-
let height = clientRect.height / scale.y;
|
|
1081
|
-
if (domElement) {
|
|
1082
|
-
const win = getWindow(domElement);
|
|
1083
|
-
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
1084
|
-
let currentWin = win;
|
|
1085
|
-
let currentIFrame = getFrameElement(currentWin);
|
|
1086
|
-
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
1087
|
-
const iframeScale = getScale(currentIFrame);
|
|
1088
|
-
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
1089
|
-
const css = getComputedStyle(currentIFrame);
|
|
1090
|
-
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
1091
|
-
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
1092
|
-
x *= iframeScale.x;
|
|
1093
|
-
y *= iframeScale.y;
|
|
1094
|
-
width *= iframeScale.x;
|
|
1095
|
-
height *= iframeScale.y;
|
|
1096
|
-
x += left;
|
|
1097
|
-
y += top;
|
|
1098
|
-
currentWin = getWindow(currentIFrame);
|
|
1099
|
-
currentIFrame = getFrameElement(currentWin);
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
return rectToClientRect({
|
|
1103
|
-
width,
|
|
1104
|
-
height,
|
|
1105
|
-
x,
|
|
1106
|
-
y
|
|
1107
|
-
});
|
|
1108
|
-
}
|
|
1109
|
-
function getWindowScrollBarX(element, rect) {
|
|
1110
|
-
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1111
|
-
if (!rect) {
|
|
1112
|
-
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1113
|
-
}
|
|
1114
|
-
return rect.left + leftScroll;
|
|
1115
|
-
}
|
|
1116
|
-
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
|
|
1117
|
-
if (ignoreScrollbarX === void 0) {
|
|
1118
|
-
ignoreScrollbarX = false;
|
|
1119
|
-
}
|
|
1120
|
-
const htmlRect = documentElement.getBoundingClientRect();
|
|
1121
|
-
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
|
|
1122
|
-
// RTL <body> scrollbar.
|
|
1123
|
-
getWindowScrollBarX(documentElement, htmlRect)
|
|
1124
|
-
));
|
|
1125
|
-
const y = htmlRect.top + scroll.scrollTop;
|
|
1126
|
-
return {
|
|
1127
|
-
x,
|
|
1128
|
-
y
|
|
1129
|
-
};
|
|
1130
|
-
}
|
|
1131
|
-
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
1132
|
-
let {
|
|
1133
|
-
elements,
|
|
1134
|
-
rect,
|
|
1135
|
-
offsetParent,
|
|
1136
|
-
strategy
|
|
1137
|
-
} = _ref;
|
|
1138
|
-
const isFixed = strategy === "fixed";
|
|
1139
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
1140
|
-
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
1141
|
-
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
1142
|
-
return rect;
|
|
1143
|
-
}
|
|
1144
|
-
let scroll = {
|
|
1145
|
-
scrollLeft: 0,
|
|
1146
|
-
scrollTop: 0
|
|
1147
|
-
};
|
|
1148
|
-
let scale = createCoords(1);
|
|
1149
|
-
const offsets = createCoords(0);
|
|
1150
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1151
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1152
|
-
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1153
|
-
scroll = getNodeScroll(offsetParent);
|
|
1154
|
-
}
|
|
1155
|
-
if (isHTMLElement(offsetParent)) {
|
|
1156
|
-
const offsetRect = getBoundingClientRect(offsetParent);
|
|
1157
|
-
scale = getScale(offsetParent);
|
|
1158
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1159
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1160
|
-
}
|
|
1161
|
-
}
|
|
1162
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
|
|
1163
|
-
return {
|
|
1164
|
-
width: rect.width * scale.x,
|
|
1165
|
-
height: rect.height * scale.y,
|
|
1166
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
1167
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
1168
|
-
};
|
|
1169
|
-
}
|
|
1170
|
-
function getClientRects(element) {
|
|
1171
|
-
return Array.from(element.getClientRects());
|
|
1172
|
-
}
|
|
1173
|
-
function getDocumentRect(element) {
|
|
1174
|
-
const html = getDocumentElement(element);
|
|
1175
|
-
const scroll = getNodeScroll(element);
|
|
1176
|
-
const body = element.ownerDocument.body;
|
|
1177
|
-
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
1178
|
-
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
1179
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
1180
|
-
const y = -scroll.scrollTop;
|
|
1181
|
-
if (getComputedStyle(body).direction === "rtl") {
|
|
1182
|
-
x += max(html.clientWidth, body.clientWidth) - width;
|
|
1183
|
-
}
|
|
1184
|
-
return {
|
|
1185
|
-
width,
|
|
1186
|
-
height,
|
|
1187
|
-
x,
|
|
1188
|
-
y
|
|
1189
|
-
};
|
|
1190
|
-
}
|
|
1191
|
-
function getViewportRect(element, strategy) {
|
|
1192
|
-
const win = getWindow(element);
|
|
1193
|
-
const html = getDocumentElement(element);
|
|
1194
|
-
const visualViewport = win.visualViewport;
|
|
1195
|
-
let width = html.clientWidth;
|
|
1196
|
-
let height = html.clientHeight;
|
|
1197
|
-
let x = 0;
|
|
1198
|
-
let y = 0;
|
|
1199
|
-
if (visualViewport) {
|
|
1200
|
-
width = visualViewport.width;
|
|
1201
|
-
height = visualViewport.height;
|
|
1202
|
-
const visualViewportBased = isWebKit();
|
|
1203
|
-
if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
|
|
1204
|
-
x = visualViewport.offsetLeft;
|
|
1205
|
-
y = visualViewport.offsetTop;
|
|
1206
|
-
}
|
|
1207
|
-
}
|
|
1208
|
-
return {
|
|
1209
|
-
width,
|
|
1210
|
-
height,
|
|
1211
|
-
x,
|
|
1212
|
-
y
|
|
1213
|
-
};
|
|
1214
|
-
}
|
|
1215
|
-
function getInnerBoundingClientRect(element, strategy) {
|
|
1216
|
-
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
|
|
1217
|
-
const top = clientRect.top + element.clientTop;
|
|
1218
|
-
const left = clientRect.left + element.clientLeft;
|
|
1219
|
-
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
1220
|
-
const width = element.clientWidth * scale.x;
|
|
1221
|
-
const height = element.clientHeight * scale.y;
|
|
1222
|
-
const x = left * scale.x;
|
|
1223
|
-
const y = top * scale.y;
|
|
1224
|
-
return {
|
|
1225
|
-
width,
|
|
1226
|
-
height,
|
|
1227
|
-
x,
|
|
1228
|
-
y
|
|
1229
|
-
};
|
|
1230
|
-
}
|
|
1231
|
-
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
1232
|
-
let rect;
|
|
1233
|
-
if (clippingAncestor === "viewport") {
|
|
1234
|
-
rect = getViewportRect(element, strategy);
|
|
1235
|
-
} else if (clippingAncestor === "document") {
|
|
1236
|
-
rect = getDocumentRect(getDocumentElement(element));
|
|
1237
|
-
} else if (isElement(clippingAncestor)) {
|
|
1238
|
-
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
1239
|
-
} else {
|
|
1240
|
-
const visualOffsets = getVisualOffsets(element);
|
|
1241
|
-
rect = {
|
|
1242
|
-
x: clippingAncestor.x - visualOffsets.x,
|
|
1243
|
-
y: clippingAncestor.y - visualOffsets.y,
|
|
1244
|
-
width: clippingAncestor.width,
|
|
1245
|
-
height: clippingAncestor.height
|
|
1246
|
-
};
|
|
1247
|
-
}
|
|
1248
|
-
return rectToClientRect(rect);
|
|
1249
|
-
}
|
|
1250
|
-
function hasFixedPositionAncestor(element, stopNode) {
|
|
1251
|
-
const parentNode = getParentNode(element);
|
|
1252
|
-
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1253
|
-
return false;
|
|
1254
|
-
}
|
|
1255
|
-
return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1256
|
-
}
|
|
1257
|
-
function getClippingElementAncestors(element, cache) {
|
|
1258
|
-
const cachedResult = cache.get(element);
|
|
1259
|
-
if (cachedResult) {
|
|
1260
|
-
return cachedResult;
|
|
1261
|
-
}
|
|
1262
|
-
let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
|
|
1263
|
-
let currentContainingBlockComputedStyle = null;
|
|
1264
|
-
const elementIsFixed = getComputedStyle(element).position === "fixed";
|
|
1265
|
-
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1266
|
-
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1267
|
-
const computedStyle = getComputedStyle(currentNode);
|
|
1268
|
-
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1269
|
-
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
|
|
1270
|
-
currentContainingBlockComputedStyle = null;
|
|
1271
|
-
}
|
|
1272
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
1273
|
-
if (shouldDropCurrentNode) {
|
|
1274
|
-
result = result.filter((ancestor) => ancestor !== currentNode);
|
|
1275
|
-
} else {
|
|
1276
|
-
currentContainingBlockComputedStyle = computedStyle;
|
|
1277
|
-
}
|
|
1278
|
-
currentNode = getParentNode(currentNode);
|
|
1279
|
-
}
|
|
1280
|
-
cache.set(element, result);
|
|
1281
|
-
return result;
|
|
1282
|
-
}
|
|
1283
|
-
function getClippingRect(_ref) {
|
|
1284
|
-
let {
|
|
1285
|
-
element,
|
|
1286
|
-
boundary,
|
|
1287
|
-
rootBoundary,
|
|
1288
|
-
strategy
|
|
1289
|
-
} = _ref;
|
|
1290
|
-
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1291
|
-
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1292
|
-
const firstClippingAncestor = clippingAncestors[0];
|
|
1293
|
-
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
1294
|
-
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
1295
|
-
accRect.top = max(rect.top, accRect.top);
|
|
1296
|
-
accRect.right = min(rect.right, accRect.right);
|
|
1297
|
-
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
1298
|
-
accRect.left = max(rect.left, accRect.left);
|
|
1299
|
-
return accRect;
|
|
1300
|
-
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
1301
|
-
return {
|
|
1302
|
-
width: clippingRect.right - clippingRect.left,
|
|
1303
|
-
height: clippingRect.bottom - clippingRect.top,
|
|
1304
|
-
x: clippingRect.left,
|
|
1305
|
-
y: clippingRect.top
|
|
1306
|
-
};
|
|
1307
|
-
}
|
|
1308
|
-
function getDimensions(element) {
|
|
1309
|
-
const {
|
|
1310
|
-
width,
|
|
1311
|
-
height
|
|
1312
|
-
} = getCssDimensions(element);
|
|
1313
|
-
return {
|
|
1314
|
-
width,
|
|
1315
|
-
height
|
|
1316
|
-
};
|
|
1317
|
-
}
|
|
1318
|
-
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1319
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1320
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
1321
|
-
const isFixed = strategy === "fixed";
|
|
1322
|
-
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
1323
|
-
let scroll = {
|
|
1324
|
-
scrollLeft: 0,
|
|
1325
|
-
scrollTop: 0
|
|
1326
|
-
};
|
|
1327
|
-
const offsets = createCoords(0);
|
|
1328
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1329
|
-
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1330
|
-
scroll = getNodeScroll(offsetParent);
|
|
1331
|
-
}
|
|
1332
|
-
if (isOffsetParentAnElement) {
|
|
1333
|
-
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1334
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1335
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1336
|
-
} else if (documentElement) {
|
|
1337
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1341
|
-
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1342
|
-
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1343
|
-
return {
|
|
1344
|
-
x,
|
|
1345
|
-
y,
|
|
1346
|
-
width: rect.width,
|
|
1347
|
-
height: rect.height
|
|
1348
|
-
};
|
|
1349
|
-
}
|
|
1350
|
-
function isStaticPositioned(element) {
|
|
1351
|
-
return getComputedStyle(element).position === "static";
|
|
1352
|
-
}
|
|
1353
|
-
function getTrueOffsetParent(element, polyfill) {
|
|
1354
|
-
if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
|
|
1355
|
-
return null;
|
|
1356
|
-
}
|
|
1357
|
-
if (polyfill) {
|
|
1358
|
-
return polyfill(element);
|
|
1359
|
-
}
|
|
1360
|
-
let rawOffsetParent = element.offsetParent;
|
|
1361
|
-
if (getDocumentElement(element) === rawOffsetParent) {
|
|
1362
|
-
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
1363
|
-
}
|
|
1364
|
-
return rawOffsetParent;
|
|
1365
|
-
}
|
|
1366
|
-
function getOffsetParent(element, polyfill) {
|
|
1367
|
-
const win = getWindow(element);
|
|
1368
|
-
if (isTopLayer(element)) {
|
|
1369
|
-
return win;
|
|
1370
|
-
}
|
|
1371
|
-
if (!isHTMLElement(element)) {
|
|
1372
|
-
let svgOffsetParent = getParentNode(element);
|
|
1373
|
-
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
1374
|
-
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
1375
|
-
return svgOffsetParent;
|
|
1376
|
-
}
|
|
1377
|
-
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
1378
|
-
}
|
|
1379
|
-
return win;
|
|
1380
|
-
}
|
|
1381
|
-
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1382
|
-
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1383
|
-
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1384
|
-
}
|
|
1385
|
-
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1386
|
-
return win;
|
|
1387
|
-
}
|
|
1388
|
-
return offsetParent || getContainingBlock(element) || win;
|
|
1389
|
-
}
|
|
1390
|
-
const getElementRects = async function(data) {
|
|
1391
|
-
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1392
|
-
const getDimensionsFn = this.getDimensions;
|
|
1393
|
-
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
1394
|
-
return {
|
|
1395
|
-
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
1396
|
-
floating: {
|
|
1397
|
-
x: 0,
|
|
1398
|
-
y: 0,
|
|
1399
|
-
width: floatingDimensions.width,
|
|
1400
|
-
height: floatingDimensions.height
|
|
1401
|
-
}
|
|
1402
|
-
};
|
|
1403
|
-
};
|
|
1404
|
-
function isRTL(element) {
|
|
1405
|
-
return getComputedStyle(element).direction === "rtl";
|
|
1406
|
-
}
|
|
1407
|
-
const platform = {
|
|
1408
|
-
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
1409
|
-
getDocumentElement,
|
|
1410
|
-
getClippingRect,
|
|
1411
|
-
getOffsetParent,
|
|
1412
|
-
getElementRects,
|
|
1413
|
-
getClientRects,
|
|
1414
|
-
getDimensions,
|
|
1415
|
-
getScale,
|
|
1416
|
-
isElement,
|
|
1417
|
-
isRTL
|
|
1418
|
-
};
|
|
1419
|
-
function observeMove(element, onMove) {
|
|
1420
|
-
let io = null;
|
|
1421
|
-
let timeoutId;
|
|
1422
|
-
const root = getDocumentElement(element);
|
|
1423
|
-
function cleanup() {
|
|
1424
|
-
var _io;
|
|
1425
|
-
clearTimeout(timeoutId);
|
|
1426
|
-
(_io = io) == null || _io.disconnect();
|
|
1427
|
-
io = null;
|
|
1428
|
-
}
|
|
1429
|
-
function refresh(skip, threshold) {
|
|
1430
|
-
if (skip === void 0) {
|
|
1431
|
-
skip = false;
|
|
1432
|
-
}
|
|
1433
|
-
if (threshold === void 0) {
|
|
1434
|
-
threshold = 1;
|
|
1435
|
-
}
|
|
1436
|
-
cleanup();
|
|
1437
|
-
const {
|
|
1438
|
-
left,
|
|
1439
|
-
top,
|
|
1440
|
-
width,
|
|
1441
|
-
height
|
|
1442
|
-
} = element.getBoundingClientRect();
|
|
1443
|
-
if (!skip) {
|
|
1444
|
-
onMove();
|
|
1445
|
-
}
|
|
1446
|
-
if (!width || !height) {
|
|
1447
|
-
return;
|
|
1448
|
-
}
|
|
1449
|
-
const insetTop = floor(top);
|
|
1450
|
-
const insetRight = floor(root.clientWidth - (left + width));
|
|
1451
|
-
const insetBottom = floor(root.clientHeight - (top + height));
|
|
1452
|
-
const insetLeft = floor(left);
|
|
1453
|
-
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
1454
|
-
const options = {
|
|
1455
|
-
rootMargin,
|
|
1456
|
-
threshold: max(0, min(1, threshold)) || 1
|
|
1457
|
-
};
|
|
1458
|
-
let isFirstUpdate = true;
|
|
1459
|
-
function handleObserve(entries) {
|
|
1460
|
-
const ratio = entries[0].intersectionRatio;
|
|
1461
|
-
if (ratio !== threshold) {
|
|
1462
|
-
if (!isFirstUpdate) {
|
|
1463
|
-
return refresh();
|
|
1464
|
-
}
|
|
1465
|
-
if (!ratio) {
|
|
1466
|
-
timeoutId = setTimeout(() => {
|
|
1467
|
-
refresh(false, 1e-7);
|
|
1468
|
-
}, 1e3);
|
|
1469
|
-
} else {
|
|
1470
|
-
refresh(false, ratio);
|
|
1471
|
-
}
|
|
1472
|
-
}
|
|
1473
|
-
isFirstUpdate = false;
|
|
1474
|
-
}
|
|
1475
|
-
try {
|
|
1476
|
-
io = new IntersectionObserver(handleObserve, {
|
|
1477
|
-
...options,
|
|
1478
|
-
// Handle <iframe>s
|
|
1479
|
-
root: root.ownerDocument
|
|
1480
|
-
});
|
|
1481
|
-
} catch (e) {
|
|
1482
|
-
io = new IntersectionObserver(handleObserve, options);
|
|
1483
|
-
}
|
|
1484
|
-
io.observe(element);
|
|
1485
|
-
}
|
|
1486
|
-
refresh(true);
|
|
1487
|
-
return cleanup;
|
|
1488
|
-
}
|
|
1489
|
-
function autoUpdate(reference, floating, update, options) {
|
|
1490
|
-
if (options === void 0) {
|
|
1491
|
-
options = {};
|
|
1492
|
-
}
|
|
1493
|
-
const {
|
|
1494
|
-
ancestorScroll = true,
|
|
1495
|
-
ancestorResize = true,
|
|
1496
|
-
elementResize = typeof ResizeObserver === "function",
|
|
1497
|
-
layoutShift = typeof IntersectionObserver === "function",
|
|
1498
|
-
animationFrame = false
|
|
1499
|
-
} = options;
|
|
1500
|
-
const referenceEl = unwrapElement(reference);
|
|
1501
|
-
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
|
|
1502
|
-
ancestors.forEach((ancestor) => {
|
|
1503
|
-
ancestorScroll && ancestor.addEventListener("scroll", update, {
|
|
1504
|
-
passive: true
|
|
1505
|
-
});
|
|
1506
|
-
ancestorResize && ancestor.addEventListener("resize", update);
|
|
1507
|
-
});
|
|
1508
|
-
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
1509
|
-
let reobserveFrame = -1;
|
|
1510
|
-
let resizeObserver = null;
|
|
1511
|
-
if (elementResize) {
|
|
1512
|
-
resizeObserver = new ResizeObserver((_ref) => {
|
|
1513
|
-
let [firstEntry] = _ref;
|
|
1514
|
-
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
1515
|
-
resizeObserver.unobserve(floating);
|
|
1516
|
-
cancelAnimationFrame(reobserveFrame);
|
|
1517
|
-
reobserveFrame = requestAnimationFrame(() => {
|
|
1518
|
-
var _resizeObserver;
|
|
1519
|
-
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
1520
|
-
});
|
|
1521
|
-
}
|
|
1522
|
-
update();
|
|
1523
|
-
});
|
|
1524
|
-
if (referenceEl && !animationFrame) {
|
|
1525
|
-
resizeObserver.observe(referenceEl);
|
|
1526
|
-
}
|
|
1527
|
-
resizeObserver.observe(floating);
|
|
1528
|
-
}
|
|
1529
|
-
let frameId;
|
|
1530
|
-
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
1531
|
-
if (animationFrame) {
|
|
1532
|
-
frameLoop();
|
|
1533
|
-
}
|
|
1534
|
-
function frameLoop() {
|
|
1535
|
-
const nextRefRect = getBoundingClientRect(reference);
|
|
1536
|
-
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
1537
|
-
update();
|
|
1538
|
-
}
|
|
1539
|
-
prevRefRect = nextRefRect;
|
|
1540
|
-
frameId = requestAnimationFrame(frameLoop);
|
|
1541
|
-
}
|
|
1542
|
-
update();
|
|
1543
|
-
return () => {
|
|
1544
|
-
var _resizeObserver2;
|
|
1545
|
-
ancestors.forEach((ancestor) => {
|
|
1546
|
-
ancestorScroll && ancestor.removeEventListener("scroll", update);
|
|
1547
|
-
ancestorResize && ancestor.removeEventListener("resize", update);
|
|
1548
|
-
});
|
|
1549
|
-
cleanupIo == null || cleanupIo();
|
|
1550
|
-
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
1551
|
-
resizeObserver = null;
|
|
1552
|
-
if (animationFrame) {
|
|
1553
|
-
cancelAnimationFrame(frameId);
|
|
1554
|
-
}
|
|
1555
|
-
};
|
|
1556
|
-
}
|
|
1557
|
-
const offset$1 = offset$2;
|
|
1558
|
-
const shift$1 = shift$2;
|
|
1559
|
-
const flip$1 = flip$2;
|
|
1560
|
-
const computePosition = (reference, floating, options) => {
|
|
1561
|
-
const cache = /* @__PURE__ */ new Map();
|
|
1562
|
-
const mergedOptions = {
|
|
1563
|
-
platform,
|
|
1564
|
-
...options
|
|
1565
|
-
};
|
|
1566
|
-
const platformWithCache = {
|
|
1567
|
-
...mergedOptions.platform,
|
|
1568
|
-
_c: cache
|
|
1569
|
-
};
|
|
1570
|
-
return computePosition$1(reference, floating, {
|
|
1571
|
-
...mergedOptions,
|
|
1572
|
-
platform: platformWithCache
|
|
1573
|
-
});
|
|
1574
|
-
};
|
|
1575
|
-
var index$1 = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
1576
|
-
function deepEqual(a, b) {
|
|
1577
|
-
if (a === b) {
|
|
1578
|
-
return true;
|
|
1579
|
-
}
|
|
1580
|
-
if (typeof a !== typeof b) {
|
|
1581
|
-
return false;
|
|
1582
|
-
}
|
|
1583
|
-
if (typeof a === "function" && a.toString() === b.toString()) {
|
|
1584
|
-
return true;
|
|
1585
|
-
}
|
|
1586
|
-
let length;
|
|
1587
|
-
let i;
|
|
1588
|
-
let keys;
|
|
1589
|
-
if (a && b && typeof a === "object") {
|
|
1590
|
-
if (Array.isArray(a)) {
|
|
1591
|
-
length = a.length;
|
|
1592
|
-
if (length !== b.length) return false;
|
|
1593
|
-
for (i = length; i-- !== 0; ) {
|
|
1594
|
-
if (!deepEqual(a[i], b[i])) {
|
|
1595
|
-
return false;
|
|
1596
|
-
}
|
|
1597
|
-
}
|
|
1598
|
-
return true;
|
|
1599
|
-
}
|
|
1600
|
-
keys = Object.keys(a);
|
|
1601
|
-
length = keys.length;
|
|
1602
|
-
if (length !== Object.keys(b).length) {
|
|
1603
|
-
return false;
|
|
1604
|
-
}
|
|
1605
|
-
for (i = length; i-- !== 0; ) {
|
|
1606
|
-
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
1607
|
-
return false;
|
|
1608
|
-
}
|
|
1609
|
-
}
|
|
1610
|
-
for (i = length; i-- !== 0; ) {
|
|
1611
|
-
const key = keys[i];
|
|
1612
|
-
if (key === "_owner" && a.$$typeof) {
|
|
1613
|
-
continue;
|
|
1614
|
-
}
|
|
1615
|
-
if (!deepEqual(a[key], b[key])) {
|
|
1616
|
-
return false;
|
|
1617
|
-
}
|
|
1618
|
-
}
|
|
1619
|
-
return true;
|
|
1620
|
-
}
|
|
1621
|
-
return a !== a && b !== b;
|
|
1622
|
-
}
|
|
1623
|
-
function getDPR(element) {
|
|
1624
|
-
if (typeof window === "undefined") {
|
|
1625
|
-
return 1;
|
|
1626
|
-
}
|
|
1627
|
-
const win = element.ownerDocument.defaultView || window;
|
|
1628
|
-
return win.devicePixelRatio || 1;
|
|
1629
|
-
}
|
|
1630
|
-
function roundByDPR(element, value) {
|
|
1631
|
-
const dpr = getDPR(element);
|
|
1632
|
-
return Math.round(value * dpr) / dpr;
|
|
1633
|
-
}
|
|
1634
|
-
function useLatestRef$1(value) {
|
|
1635
|
-
const ref = React.useRef(value);
|
|
1636
|
-
index$1(() => {
|
|
1637
|
-
ref.current = value;
|
|
1638
|
-
});
|
|
1639
|
-
return ref;
|
|
1640
|
-
}
|
|
1641
|
-
function useFloating$1(options) {
|
|
1642
|
-
if (options === void 0) {
|
|
1643
|
-
options = {};
|
|
1644
|
-
}
|
|
1645
|
-
const {
|
|
1646
|
-
placement = "bottom",
|
|
1647
|
-
strategy = "absolute",
|
|
1648
|
-
middleware = [],
|
|
1649
|
-
platform: platform2,
|
|
1650
|
-
elements: {
|
|
1651
|
-
reference: externalReference,
|
|
1652
|
-
floating: externalFloating
|
|
1653
|
-
} = {},
|
|
1654
|
-
transform = true,
|
|
1655
|
-
whileElementsMounted,
|
|
1656
|
-
open
|
|
1657
|
-
} = options;
|
|
1658
|
-
const [data, setData] = React.useState({
|
|
1659
|
-
x: 0,
|
|
1660
|
-
y: 0,
|
|
1661
|
-
strategy,
|
|
1662
|
-
placement,
|
|
1663
|
-
middlewareData: {},
|
|
1664
|
-
isPositioned: false
|
|
1665
|
-
});
|
|
1666
|
-
const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
|
|
1667
|
-
if (!deepEqual(latestMiddleware, middleware)) {
|
|
1668
|
-
setLatestMiddleware(middleware);
|
|
1669
|
-
}
|
|
1670
|
-
const [_reference, _setReference] = React.useState(null);
|
|
1671
|
-
const [_floating, _setFloating] = React.useState(null);
|
|
1672
|
-
const setReference = React.useCallback((node) => {
|
|
1673
|
-
if (node !== referenceRef.current) {
|
|
1674
|
-
referenceRef.current = node;
|
|
1675
|
-
_setReference(node);
|
|
1676
|
-
}
|
|
1677
|
-
}, []);
|
|
1678
|
-
const setFloating = React.useCallback((node) => {
|
|
1679
|
-
if (node !== floatingRef.current) {
|
|
1680
|
-
floatingRef.current = node;
|
|
1681
|
-
_setFloating(node);
|
|
1682
|
-
}
|
|
1683
|
-
}, []);
|
|
1684
|
-
const referenceEl = externalReference || _reference;
|
|
1685
|
-
const floatingEl = externalFloating || _floating;
|
|
1686
|
-
const referenceRef = React.useRef(null);
|
|
1687
|
-
const floatingRef = React.useRef(null);
|
|
1688
|
-
const dataRef = React.useRef(data);
|
|
1689
|
-
const hasWhileElementsMounted = whileElementsMounted != null;
|
|
1690
|
-
const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
|
|
1691
|
-
const platformRef = useLatestRef$1(platform2);
|
|
1692
|
-
const openRef = useLatestRef$1(open);
|
|
1693
|
-
const update = React.useCallback(() => {
|
|
1694
|
-
if (!referenceRef.current || !floatingRef.current) {
|
|
1695
|
-
return;
|
|
1696
|
-
}
|
|
1697
|
-
const config = {
|
|
1698
|
-
placement,
|
|
1699
|
-
strategy,
|
|
1700
|
-
middleware: latestMiddleware
|
|
1701
|
-
};
|
|
1702
|
-
if (platformRef.current) {
|
|
1703
|
-
config.platform = platformRef.current;
|
|
1704
|
-
}
|
|
1705
|
-
computePosition(referenceRef.current, floatingRef.current, config).then((data2) => {
|
|
1706
|
-
const fullData = {
|
|
1707
|
-
...data2,
|
|
1708
|
-
// The floating element's position may be recomputed while it's closed
|
|
1709
|
-
// but still mounted (such as when transitioning out). To ensure
|
|
1710
|
-
// `isPositioned` will be `false` initially on the next open, avoid
|
|
1711
|
-
// setting it to `true` when `open === false` (must be specified).
|
|
1712
|
-
isPositioned: openRef.current !== false
|
|
1713
|
-
};
|
|
1714
|
-
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
|
1715
|
-
dataRef.current = fullData;
|
|
1716
|
-
ReactDOM.flushSync(() => {
|
|
1717
|
-
setData(fullData);
|
|
1718
|
-
});
|
|
1719
|
-
}
|
|
1720
|
-
});
|
|
1721
|
-
}, [latestMiddleware, placement, strategy, platformRef, openRef]);
|
|
1722
|
-
index$1(() => {
|
|
1723
|
-
if (open === false && dataRef.current.isPositioned) {
|
|
1724
|
-
dataRef.current.isPositioned = false;
|
|
1725
|
-
setData((data2) => ({
|
|
1726
|
-
...data2,
|
|
1727
|
-
isPositioned: false
|
|
1728
|
-
}));
|
|
1729
|
-
}
|
|
1730
|
-
}, [open]);
|
|
1731
|
-
const isMountedRef = React.useRef(false);
|
|
1732
|
-
index$1(() => {
|
|
1733
|
-
isMountedRef.current = true;
|
|
1734
|
-
return () => {
|
|
1735
|
-
isMountedRef.current = false;
|
|
1736
|
-
};
|
|
1737
|
-
}, []);
|
|
1738
|
-
index$1(() => {
|
|
1739
|
-
if (referenceEl) referenceRef.current = referenceEl;
|
|
1740
|
-
if (floatingEl) floatingRef.current = floatingEl;
|
|
1741
|
-
if (referenceEl && floatingEl) {
|
|
1742
|
-
if (whileElementsMountedRef.current) {
|
|
1743
|
-
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
1744
|
-
}
|
|
1745
|
-
update();
|
|
1746
|
-
}
|
|
1747
|
-
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
|
1748
|
-
const refs = React.useMemo(() => ({
|
|
1749
|
-
reference: referenceRef,
|
|
1750
|
-
floating: floatingRef,
|
|
1751
|
-
setReference,
|
|
1752
|
-
setFloating
|
|
1753
|
-
}), [setReference, setFloating]);
|
|
1754
|
-
const elements = React.useMemo(() => ({
|
|
1755
|
-
reference: referenceEl,
|
|
1756
|
-
floating: floatingEl
|
|
1757
|
-
}), [referenceEl, floatingEl]);
|
|
1758
|
-
const floatingStyles = React.useMemo(() => {
|
|
1759
|
-
const initialStyles = {
|
|
1760
|
-
position: strategy,
|
|
1761
|
-
left: 0,
|
|
1762
|
-
top: 0
|
|
1763
|
-
};
|
|
1764
|
-
if (!elements.floating) {
|
|
1765
|
-
return initialStyles;
|
|
1766
|
-
}
|
|
1767
|
-
const x = roundByDPR(elements.floating, data.x);
|
|
1768
|
-
const y = roundByDPR(elements.floating, data.y);
|
|
1769
|
-
if (transform) {
|
|
1770
|
-
return {
|
|
1771
|
-
...initialStyles,
|
|
1772
|
-
transform: "translate(" + x + "px, " + y + "px)",
|
|
1773
|
-
...getDPR(elements.floating) >= 1.5 && {
|
|
1774
|
-
willChange: "transform"
|
|
1775
|
-
}
|
|
1776
|
-
};
|
|
1777
|
-
}
|
|
1778
|
-
return {
|
|
1779
|
-
position: strategy,
|
|
1780
|
-
left: x,
|
|
1781
|
-
top: y
|
|
1782
|
-
};
|
|
1783
|
-
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
1784
|
-
return React.useMemo(() => ({
|
|
1785
|
-
...data,
|
|
1786
|
-
update,
|
|
1787
|
-
refs,
|
|
1788
|
-
elements,
|
|
1789
|
-
floatingStyles
|
|
1790
|
-
}), [data, update, refs, elements, floatingStyles]);
|
|
1791
|
-
}
|
|
1792
|
-
const offset = (options, deps) => ({
|
|
1793
|
-
...offset$1(options),
|
|
1794
|
-
options: [options, deps]
|
|
1795
|
-
});
|
|
1796
|
-
const shift = (options, deps) => ({
|
|
1797
|
-
...shift$1(options),
|
|
1798
|
-
options: [options, deps]
|
|
1799
|
-
});
|
|
1800
|
-
const flip = (options, deps) => ({
|
|
1801
|
-
...flip$1(options),
|
|
1802
|
-
options: [options, deps]
|
|
1803
|
-
});
|
|
1804
|
-
const SafeReact = {
|
|
1805
|
-
...React
|
|
1806
|
-
};
|
|
1807
|
-
const useInsertionEffect = SafeReact.useInsertionEffect;
|
|
1808
|
-
const useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
|
|
1809
|
-
function useEffectEvent(callback) {
|
|
1810
|
-
const ref = React.useRef(() => {
|
|
1811
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1812
|
-
throw new Error("Cannot call an event handler while rendering.");
|
|
1813
|
-
}
|
|
1814
|
-
});
|
|
1815
|
-
useSafeInsertionEffect(() => {
|
|
1816
|
-
ref.current = callback;
|
|
1817
|
-
});
|
|
1818
|
-
return React.useCallback(function() {
|
|
1819
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1820
|
-
args[_key] = arguments[_key];
|
|
1821
|
-
}
|
|
1822
|
-
return ref.current == null ? void 0 : ref.current(...args);
|
|
1823
|
-
}, []);
|
|
1824
|
-
}
|
|
1825
|
-
const ARROW_UP = "ArrowUp";
|
|
1826
|
-
const ARROW_DOWN = "ArrowDown";
|
|
1827
|
-
const ARROW_LEFT = "ArrowLeft";
|
|
1828
|
-
const ARROW_RIGHT = "ArrowRight";
|
|
1829
|
-
function isDifferentRow(index2, cols, prevRow) {
|
|
1830
|
-
return Math.floor(index2 / cols) !== prevRow;
|
|
1831
|
-
}
|
|
1832
|
-
function isIndexOutOfBounds(listRef, index2) {
|
|
1833
|
-
return index2 < 0 || index2 >= listRef.current.length;
|
|
1834
|
-
}
|
|
1835
|
-
function getMinIndex(listRef, disabledIndices) {
|
|
1836
|
-
return findNonDisabledIndex(listRef, {
|
|
1837
|
-
disabledIndices
|
|
1838
|
-
});
|
|
1839
|
-
}
|
|
1840
|
-
function getMaxIndex(listRef, disabledIndices) {
|
|
1841
|
-
return findNonDisabledIndex(listRef, {
|
|
1842
|
-
decrement: true,
|
|
1843
|
-
startingIndex: listRef.current.length,
|
|
1844
|
-
disabledIndices
|
|
1845
|
-
});
|
|
1846
|
-
}
|
|
1847
|
-
function findNonDisabledIndex(listRef, _temp) {
|
|
1848
|
-
let {
|
|
1849
|
-
startingIndex = -1,
|
|
1850
|
-
decrement = false,
|
|
1851
|
-
disabledIndices,
|
|
1852
|
-
amount = 1
|
|
1853
|
-
} = _temp === void 0 ? {} : _temp;
|
|
1854
|
-
const list = listRef.current;
|
|
1855
|
-
let index2 = startingIndex;
|
|
1856
|
-
do {
|
|
1857
|
-
index2 += decrement ? -amount : amount;
|
|
1858
|
-
} while (index2 >= 0 && index2 <= list.length - 1 && isDisabled(list, index2, disabledIndices));
|
|
1859
|
-
return index2;
|
|
1860
|
-
}
|
|
1861
|
-
function getGridNavigatedIndex(elementsRef, _ref) {
|
|
1862
|
-
let {
|
|
1863
|
-
event,
|
|
1864
|
-
orientation,
|
|
1865
|
-
loop,
|
|
1866
|
-
rtl,
|
|
1867
|
-
cols,
|
|
1868
|
-
disabledIndices,
|
|
1869
|
-
minIndex,
|
|
1870
|
-
maxIndex,
|
|
1871
|
-
prevIndex,
|
|
1872
|
-
stopEvent: stop = false
|
|
1873
|
-
} = _ref;
|
|
1874
|
-
let nextIndex = prevIndex;
|
|
1875
|
-
if (event.key === ARROW_UP) {
|
|
1876
|
-
stop && stopEvent(event);
|
|
1877
|
-
if (prevIndex === -1) {
|
|
1878
|
-
nextIndex = maxIndex;
|
|
1879
|
-
} else {
|
|
1880
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1881
|
-
startingIndex: nextIndex,
|
|
1882
|
-
amount: cols,
|
|
1883
|
-
decrement: true,
|
|
1884
|
-
disabledIndices
|
|
1885
|
-
});
|
|
1886
|
-
if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
|
|
1887
|
-
const col = prevIndex % cols;
|
|
1888
|
-
const maxCol = maxIndex % cols;
|
|
1889
|
-
const offset2 = maxIndex - (maxCol - col);
|
|
1890
|
-
if (maxCol === col) {
|
|
1891
|
-
nextIndex = maxIndex;
|
|
1892
|
-
} else {
|
|
1893
|
-
nextIndex = maxCol > col ? offset2 : offset2 - cols;
|
|
1894
|
-
}
|
|
1895
|
-
}
|
|
1896
|
-
}
|
|
1897
|
-
if (isIndexOutOfBounds(elementsRef, nextIndex)) {
|
|
1898
|
-
nextIndex = prevIndex;
|
|
1899
|
-
}
|
|
1900
|
-
}
|
|
1901
|
-
if (event.key === ARROW_DOWN) {
|
|
1902
|
-
stop && stopEvent(event);
|
|
1903
|
-
if (prevIndex === -1) {
|
|
1904
|
-
nextIndex = minIndex;
|
|
1905
|
-
} else {
|
|
1906
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1907
|
-
startingIndex: prevIndex,
|
|
1908
|
-
amount: cols,
|
|
1909
|
-
disabledIndices
|
|
1910
|
-
});
|
|
1911
|
-
if (loop && prevIndex + cols > maxIndex) {
|
|
1912
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1913
|
-
startingIndex: prevIndex % cols - cols,
|
|
1914
|
-
amount: cols,
|
|
1915
|
-
disabledIndices
|
|
1916
|
-
});
|
|
1917
|
-
}
|
|
1918
|
-
}
|
|
1919
|
-
if (isIndexOutOfBounds(elementsRef, nextIndex)) {
|
|
1920
|
-
nextIndex = prevIndex;
|
|
1921
|
-
}
|
|
1922
|
-
}
|
|
1923
|
-
if (orientation === "both") {
|
|
1924
|
-
const prevRow = floor(prevIndex / cols);
|
|
1925
|
-
if (event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT)) {
|
|
1926
|
-
stop && stopEvent(event);
|
|
1927
|
-
if (prevIndex % cols !== cols - 1) {
|
|
1928
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1929
|
-
startingIndex: prevIndex,
|
|
1930
|
-
disabledIndices
|
|
1931
|
-
});
|
|
1932
|
-
if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
|
|
1933
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1934
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1935
|
-
disabledIndices
|
|
1936
|
-
});
|
|
1937
|
-
}
|
|
1938
|
-
} else if (loop) {
|
|
1939
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1940
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1941
|
-
disabledIndices
|
|
1942
|
-
});
|
|
1943
|
-
}
|
|
1944
|
-
if (isDifferentRow(nextIndex, cols, prevRow)) {
|
|
1945
|
-
nextIndex = prevIndex;
|
|
1946
|
-
}
|
|
1947
|
-
}
|
|
1948
|
-
if (event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT)) {
|
|
1949
|
-
stop && stopEvent(event);
|
|
1950
|
-
if (prevIndex % cols !== 0) {
|
|
1951
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1952
|
-
startingIndex: prevIndex,
|
|
1953
|
-
decrement: true,
|
|
1954
|
-
disabledIndices
|
|
1955
|
-
});
|
|
1956
|
-
if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
|
|
1957
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1958
|
-
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
1959
|
-
decrement: true,
|
|
1960
|
-
disabledIndices
|
|
1961
|
-
});
|
|
1962
|
-
}
|
|
1963
|
-
} else if (loop) {
|
|
1964
|
-
nextIndex = findNonDisabledIndex(elementsRef, {
|
|
1965
|
-
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
1966
|
-
decrement: true,
|
|
1967
|
-
disabledIndices
|
|
1968
|
-
});
|
|
1969
|
-
}
|
|
1970
|
-
if (isDifferentRow(nextIndex, cols, prevRow)) {
|
|
1971
|
-
nextIndex = prevIndex;
|
|
1972
|
-
}
|
|
1973
|
-
}
|
|
1974
|
-
const lastRow = floor(maxIndex / cols) === prevRow;
|
|
1975
|
-
if (isIndexOutOfBounds(elementsRef, nextIndex)) {
|
|
1976
|
-
if (loop && lastRow) {
|
|
1977
|
-
nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledIndex(elementsRef, {
|
|
1978
|
-
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
1979
|
-
disabledIndices
|
|
1980
|
-
});
|
|
1981
|
-
} else {
|
|
1982
|
-
nextIndex = prevIndex;
|
|
1983
|
-
}
|
|
1984
|
-
}
|
|
1985
|
-
}
|
|
1986
|
-
return nextIndex;
|
|
1987
|
-
}
|
|
1988
|
-
function buildCellMap(sizes, cols, dense) {
|
|
1989
|
-
const cellMap = [];
|
|
1990
|
-
let startIndex = 0;
|
|
1991
|
-
sizes.forEach((_ref2, index2) => {
|
|
1992
|
-
let {
|
|
1993
|
-
width,
|
|
1994
|
-
height
|
|
1995
|
-
} = _ref2;
|
|
1996
|
-
if (width > cols) {
|
|
1997
|
-
if (process.env.NODE_ENV !== "production") {
|
|
1998
|
-
throw new Error("[Floating UI]: Invalid grid - item width at index " + index2 + " is greater than grid columns");
|
|
1999
|
-
}
|
|
2000
|
-
}
|
|
2001
|
-
let itemPlaced = false;
|
|
2002
|
-
if (dense) {
|
|
2003
|
-
startIndex = 0;
|
|
2004
|
-
}
|
|
2005
|
-
while (!itemPlaced) {
|
|
2006
|
-
const targetCells = [];
|
|
2007
|
-
for (let i = 0; i < width; i++) {
|
|
2008
|
-
for (let j = 0; j < height; j++) {
|
|
2009
|
-
targetCells.push(startIndex + i + j * cols);
|
|
2010
|
-
}
|
|
2011
|
-
}
|
|
2012
|
-
if (startIndex % cols + width <= cols && targetCells.every((cell) => cellMap[cell] == null)) {
|
|
2013
|
-
targetCells.forEach((cell) => {
|
|
2014
|
-
cellMap[cell] = index2;
|
|
2015
|
-
});
|
|
2016
|
-
itemPlaced = true;
|
|
2017
|
-
} else {
|
|
2018
|
-
startIndex++;
|
|
2019
|
-
}
|
|
2020
|
-
}
|
|
2021
|
-
});
|
|
2022
|
-
return [...cellMap];
|
|
2023
|
-
}
|
|
2024
|
-
function getCellIndexOfCorner(index2, sizes, cellMap, cols, corner) {
|
|
2025
|
-
if (index2 === -1) return -1;
|
|
2026
|
-
const firstCellIndex = cellMap.indexOf(index2);
|
|
2027
|
-
const sizeItem = sizes[index2];
|
|
2028
|
-
switch (corner) {
|
|
2029
|
-
case "tl":
|
|
2030
|
-
return firstCellIndex;
|
|
2031
|
-
case "tr":
|
|
2032
|
-
if (!sizeItem) {
|
|
2033
|
-
return firstCellIndex;
|
|
2034
|
-
}
|
|
2035
|
-
return firstCellIndex + sizeItem.width - 1;
|
|
2036
|
-
case "bl":
|
|
2037
|
-
if (!sizeItem) {
|
|
2038
|
-
return firstCellIndex;
|
|
2039
|
-
}
|
|
2040
|
-
return firstCellIndex + (sizeItem.height - 1) * cols;
|
|
2041
|
-
case "br":
|
|
2042
|
-
return cellMap.lastIndexOf(index2);
|
|
2043
|
-
}
|
|
2044
|
-
}
|
|
2045
|
-
function getCellIndices(indices, cellMap) {
|
|
2046
|
-
return cellMap.flatMap((index2, cellIndex) => indices.includes(index2) ? [cellIndex] : []);
|
|
2047
|
-
}
|
|
2048
|
-
function isDisabled(list, index2, disabledIndices) {
|
|
2049
|
-
if (disabledIndices) {
|
|
2050
|
-
return disabledIndices.includes(index2);
|
|
2051
|
-
}
|
|
2052
|
-
const element = list[index2];
|
|
2053
|
-
return element == null || element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
|
|
2054
|
-
}
|
|
2055
|
-
var index = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
2056
|
-
function sortByDocumentPosition(a, b) {
|
|
2057
|
-
const position = a.compareDocumentPosition(b);
|
|
2058
|
-
if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
|
|
2059
|
-
return -1;
|
|
2060
|
-
}
|
|
2061
|
-
if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
|
|
2062
|
-
return 1;
|
|
2063
|
-
}
|
|
2064
|
-
return 0;
|
|
2065
|
-
}
|
|
2066
|
-
function areMapsEqual(map1, map2) {
|
|
2067
|
-
if (map1.size !== map2.size) {
|
|
2068
|
-
return false;
|
|
2069
|
-
}
|
|
2070
|
-
for (const [key, value] of map1.entries()) {
|
|
2071
|
-
if (value !== map2.get(key)) {
|
|
2072
|
-
return false;
|
|
2073
|
-
}
|
|
2074
|
-
}
|
|
2075
|
-
return true;
|
|
2076
|
-
}
|
|
2077
|
-
const FloatingListContext = /* @__PURE__ */ React.createContext({
|
|
2078
|
-
register: () => {
|
|
2079
|
-
},
|
|
2080
|
-
unregister: () => {
|
|
2081
|
-
},
|
|
2082
|
-
map: /* @__PURE__ */ new Map(),
|
|
2083
|
-
elementsRef: {
|
|
2084
|
-
current: []
|
|
2085
|
-
}
|
|
2086
|
-
});
|
|
2087
|
-
function FloatingList(props) {
|
|
2088
|
-
const {
|
|
2089
|
-
children,
|
|
2090
|
-
elementsRef,
|
|
2091
|
-
labelsRef
|
|
2092
|
-
} = props;
|
|
2093
|
-
const [map, setMap] = React.useState(() => /* @__PURE__ */ new Map());
|
|
2094
|
-
const register = React.useCallback((node) => {
|
|
2095
|
-
setMap((prevMap) => new Map(prevMap).set(node, null));
|
|
2096
|
-
}, []);
|
|
2097
|
-
const unregister = React.useCallback((node) => {
|
|
2098
|
-
setMap((prevMap) => {
|
|
2099
|
-
const map2 = new Map(prevMap);
|
|
2100
|
-
map2.delete(node);
|
|
2101
|
-
return map2;
|
|
2102
|
-
});
|
|
2103
|
-
}, []);
|
|
2104
|
-
index(() => {
|
|
2105
|
-
const newMap = new Map(map);
|
|
2106
|
-
const nodes = Array.from(newMap.keys()).sort(sortByDocumentPosition);
|
|
2107
|
-
nodes.forEach((node, index2) => {
|
|
2108
|
-
newMap.set(node, index2);
|
|
2109
|
-
});
|
|
2110
|
-
if (!areMapsEqual(map, newMap)) {
|
|
2111
|
-
setMap(newMap);
|
|
2112
|
-
}
|
|
2113
|
-
}, [map]);
|
|
2114
|
-
return /* @__PURE__ */ React.createElement(FloatingListContext.Provider, {
|
|
2115
|
-
value: React.useMemo(() => ({
|
|
2116
|
-
register,
|
|
2117
|
-
unregister,
|
|
2118
|
-
map,
|
|
2119
|
-
elementsRef,
|
|
2120
|
-
labelsRef
|
|
2121
|
-
}), [register, unregister, map, elementsRef, labelsRef])
|
|
2122
|
-
}, children);
|
|
2123
|
-
}
|
|
2124
|
-
function useListItem(props) {
|
|
2125
|
-
if (props === void 0) {
|
|
2126
|
-
props = {};
|
|
2127
|
-
}
|
|
2128
|
-
const {
|
|
2129
|
-
label
|
|
2130
|
-
} = props;
|
|
2131
|
-
const {
|
|
2132
|
-
register,
|
|
2133
|
-
unregister,
|
|
2134
|
-
map,
|
|
2135
|
-
elementsRef,
|
|
2136
|
-
labelsRef
|
|
2137
|
-
} = React.useContext(FloatingListContext);
|
|
2138
|
-
const [index$12, setIndex] = React.useState(null);
|
|
2139
|
-
const componentRef = React.useRef(null);
|
|
2140
|
-
const ref = React.useCallback((node) => {
|
|
2141
|
-
componentRef.current = node;
|
|
2142
|
-
if (index$12 !== null) {
|
|
2143
|
-
elementsRef.current[index$12] = node;
|
|
2144
|
-
if (labelsRef) {
|
|
2145
|
-
var _node$textContent;
|
|
2146
|
-
const isLabelDefined = label !== void 0;
|
|
2147
|
-
labelsRef.current[index$12] = isLabelDefined ? label : (_node$textContent = node == null ? void 0 : node.textContent) != null ? _node$textContent : null;
|
|
2148
|
-
}
|
|
2149
|
-
}
|
|
2150
|
-
}, [index$12, elementsRef, labelsRef, label]);
|
|
2151
|
-
index(() => {
|
|
2152
|
-
const node = componentRef.current;
|
|
2153
|
-
if (node) {
|
|
2154
|
-
register(node);
|
|
2155
|
-
return () => {
|
|
2156
|
-
unregister(node);
|
|
2157
|
-
};
|
|
2158
|
-
}
|
|
2159
|
-
}, [register, unregister]);
|
|
2160
|
-
index(() => {
|
|
2161
|
-
const index2 = componentRef.current ? map.get(componentRef.current) : null;
|
|
2162
|
-
if (index2 != null) {
|
|
2163
|
-
setIndex(index2);
|
|
2164
|
-
}
|
|
2165
|
-
}, [map]);
|
|
2166
|
-
return React.useMemo(() => ({
|
|
2167
|
-
ref,
|
|
2168
|
-
index: index$12 == null ? -1 : index$12
|
|
2169
|
-
}), [index$12, ref]);
|
|
2170
|
-
}
|
|
2171
|
-
let serverHandoffComplete = false;
|
|
2172
|
-
let count = 0;
|
|
2173
|
-
const genId = () => (
|
|
2174
|
-
// Ensure the id is unique with multiple independent versions of Floating UI
|
|
2175
|
-
// on <React 18
|
|
2176
|
-
"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
|
|
2177
|
-
);
|
|
2178
|
-
function useFloatingId() {
|
|
2179
|
-
const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : void 0);
|
|
2180
|
-
index(() => {
|
|
2181
|
-
if (id == null) {
|
|
2182
|
-
setId(genId());
|
|
2183
|
-
}
|
|
2184
|
-
}, []);
|
|
2185
|
-
React.useEffect(() => {
|
|
2186
|
-
serverHandoffComplete = true;
|
|
2187
|
-
}, []);
|
|
2188
|
-
return id;
|
|
2189
|
-
}
|
|
2190
|
-
const useReactId = SafeReact.useId;
|
|
2191
|
-
const useId = useReactId || useFloatingId;
|
|
2192
|
-
let devMessageSet;
|
|
2193
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2194
|
-
devMessageSet = /* @__PURE__ */ new Set();
|
|
2195
|
-
}
|
|
2196
|
-
function warn() {
|
|
2197
|
-
var _devMessageSet;
|
|
2198
|
-
for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2199
|
-
messages[_key] = arguments[_key];
|
|
2200
|
-
}
|
|
2201
|
-
const message = "Floating UI: " + messages.join(" ");
|
|
2202
|
-
if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
|
|
2203
|
-
var _devMessageSet2;
|
|
2204
|
-
(_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
|
|
2205
|
-
console.warn(message);
|
|
2206
|
-
}
|
|
2207
|
-
}
|
|
2208
|
-
function error() {
|
|
2209
|
-
var _devMessageSet3;
|
|
2210
|
-
for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
2211
|
-
messages[_key2] = arguments[_key2];
|
|
2212
|
-
}
|
|
2213
|
-
const message = "Floating UI: " + messages.join(" ");
|
|
2214
|
-
if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
|
|
2215
|
-
var _devMessageSet4;
|
|
2216
|
-
(_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
|
|
2217
|
-
console.error(message);
|
|
2218
|
-
}
|
|
2219
|
-
}
|
|
2220
|
-
function createPubSub() {
|
|
2221
|
-
const map = /* @__PURE__ */ new Map();
|
|
2222
|
-
return {
|
|
2223
|
-
emit(event, data) {
|
|
2224
|
-
var _map$get;
|
|
2225
|
-
(_map$get = map.get(event)) == null || _map$get.forEach((handler) => handler(data));
|
|
2226
|
-
},
|
|
2227
|
-
on(event, listener) {
|
|
2228
|
-
map.set(event, [...map.get(event) || [], listener]);
|
|
2229
|
-
},
|
|
2230
|
-
off(event, listener) {
|
|
2231
|
-
var _map$get2;
|
|
2232
|
-
map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter((l) => l !== listener)) || []);
|
|
2233
|
-
}
|
|
2234
|
-
};
|
|
2235
|
-
}
|
|
2236
|
-
const FloatingNodeContext = /* @__PURE__ */ React.createContext(null);
|
|
2237
|
-
const FloatingTreeContext = /* @__PURE__ */ React.createContext(null);
|
|
2238
|
-
const useFloatingParentNodeId = () => {
|
|
2239
|
-
var _React$useContext;
|
|
2240
|
-
return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
|
|
2241
|
-
};
|
|
2242
|
-
const useFloatingTree = () => React.useContext(FloatingTreeContext);
|
|
2243
|
-
function useLatestRef(value) {
|
|
2244
|
-
const ref = useRef(value);
|
|
2245
|
-
index(() => {
|
|
2246
|
-
ref.current = value;
|
|
2247
|
-
});
|
|
2248
|
-
return ref;
|
|
2249
|
-
}
|
|
2250
|
-
let rafId = 0;
|
|
2251
|
-
function enqueueFocus(el, options) {
|
|
2252
|
-
if (options === void 0) {
|
|
2253
|
-
options = {};
|
|
2254
|
-
}
|
|
2255
|
-
const {
|
|
2256
|
-
preventScroll = false,
|
|
2257
|
-
cancelPrevious = true,
|
|
2258
|
-
sync = false
|
|
2259
|
-
} = options;
|
|
2260
|
-
cancelPrevious && cancelAnimationFrame(rafId);
|
|
2261
|
-
const exec = () => el == null ? void 0 : el.focus({
|
|
2262
|
-
preventScroll
|
|
2263
|
-
});
|
|
2264
|
-
if (sync) {
|
|
2265
|
-
exec();
|
|
2266
|
-
} else {
|
|
2267
|
-
rafId = requestAnimationFrame(exec);
|
|
2268
|
-
}
|
|
2269
|
-
}
|
|
2270
|
-
function getChildren(nodes, id) {
|
|
2271
|
-
let allChildren = nodes.filter((node) => {
|
|
2272
|
-
var _node$context;
|
|
2273
|
-
return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
|
|
2274
|
-
});
|
|
2275
|
-
let currentChildren = allChildren;
|
|
2276
|
-
while (currentChildren.length) {
|
|
2277
|
-
currentChildren = nodes.filter((node) => {
|
|
2278
|
-
var _currentChildren;
|
|
2279
|
-
return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some((n) => {
|
|
2280
|
-
var _node$context2;
|
|
2281
|
-
return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
|
|
2282
|
-
});
|
|
2283
|
-
});
|
|
2284
|
-
allChildren = allChildren.concat(currentChildren);
|
|
2285
|
-
}
|
|
2286
|
-
return allChildren;
|
|
2287
|
-
}
|
|
2288
|
-
function getDeepestNode(nodes, id) {
|
|
2289
|
-
let deepestNodeId;
|
|
2290
|
-
let maxDepth = -1;
|
|
2291
|
-
function findDeepest(nodeId, depth) {
|
|
2292
|
-
if (depth > maxDepth) {
|
|
2293
|
-
deepestNodeId = nodeId;
|
|
2294
|
-
maxDepth = depth;
|
|
2295
|
-
}
|
|
2296
|
-
const children = getChildren(nodes, nodeId);
|
|
2297
|
-
children.forEach((child) => {
|
|
2298
|
-
findDeepest(child.id, depth + 1);
|
|
2299
|
-
});
|
|
2300
|
-
}
|
|
2301
|
-
findDeepest(id, 0);
|
|
2302
|
-
return nodes.find((node) => node.id === deepestNodeId);
|
|
2303
|
-
}
|
|
2304
|
-
const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
|
|
2305
|
-
function getFloatingFocusElement(floatingElement) {
|
|
2306
|
-
if (!floatingElement) {
|
|
2307
|
-
return null;
|
|
2308
|
-
}
|
|
2309
|
-
return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector("[" + FOCUSABLE_ATTRIBUTE + "]") || floatingElement;
|
|
2310
|
-
}
|
|
2311
|
-
function useFloatingRootContext(options) {
|
|
2312
|
-
const {
|
|
2313
|
-
open = false,
|
|
2314
|
-
onOpenChange: onOpenChangeProp,
|
|
2315
|
-
elements: elementsProp
|
|
2316
|
-
} = options;
|
|
2317
|
-
const floatingId = useId();
|
|
2318
|
-
const dataRef = React.useRef({});
|
|
2319
|
-
const [events] = React.useState(() => createPubSub());
|
|
2320
|
-
const nested = useFloatingParentNodeId() != null;
|
|
2321
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2322
|
-
const optionDomReference = elementsProp.reference;
|
|
2323
|
-
if (optionDomReference && !isElement(optionDomReference)) {
|
|
2324
|
-
error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
|
|
2325
|
-
}
|
|
2326
|
-
}
|
|
2327
|
-
const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
|
|
2328
|
-
const onOpenChange = useEffectEvent((open2, event, reason) => {
|
|
2329
|
-
dataRef.current.openEvent = open2 ? event : void 0;
|
|
2330
|
-
events.emit("openchange", {
|
|
2331
|
-
open: open2,
|
|
2332
|
-
event,
|
|
2333
|
-
reason,
|
|
2334
|
-
nested
|
|
2335
|
-
});
|
|
2336
|
-
onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
|
|
2337
|
-
});
|
|
2338
|
-
const refs = React.useMemo(() => ({
|
|
2339
|
-
setPositionReference
|
|
2340
|
-
}), []);
|
|
2341
|
-
const elements = React.useMemo(() => ({
|
|
2342
|
-
reference: positionReference || elementsProp.reference || null,
|
|
2343
|
-
floating: elementsProp.floating || null,
|
|
2344
|
-
domReference: elementsProp.reference
|
|
2345
|
-
}), [positionReference, elementsProp.reference, elementsProp.floating]);
|
|
2346
|
-
return React.useMemo(() => ({
|
|
2347
|
-
dataRef,
|
|
2348
|
-
open,
|
|
2349
|
-
onOpenChange,
|
|
2350
|
-
elements,
|
|
2351
|
-
events,
|
|
2352
|
-
floatingId,
|
|
2353
|
-
refs
|
|
2354
|
-
}), [open, onOpenChange, elements, events, floatingId, refs]);
|
|
2355
|
-
}
|
|
2356
|
-
function useFloating(options) {
|
|
2357
|
-
if (options === void 0) {
|
|
2358
|
-
options = {};
|
|
2359
|
-
}
|
|
2360
|
-
const {
|
|
2361
|
-
nodeId
|
|
2362
|
-
} = options;
|
|
2363
|
-
const internalRootContext = useFloatingRootContext({
|
|
2364
|
-
...options,
|
|
2365
|
-
elements: {
|
|
2366
|
-
reference: null,
|
|
2367
|
-
floating: null,
|
|
2368
|
-
...options.elements
|
|
2369
|
-
}
|
|
2370
|
-
});
|
|
2371
|
-
const rootContext = options.rootContext || internalRootContext;
|
|
2372
|
-
const computedElements = rootContext.elements;
|
|
2373
|
-
const [_domReference, setDomReference] = React.useState(null);
|
|
2374
|
-
const [positionReference, _setPositionReference] = React.useState(null);
|
|
2375
|
-
const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
|
|
2376
|
-
const domReference = optionDomReference || _domReference;
|
|
2377
|
-
const domReferenceRef = React.useRef(null);
|
|
2378
|
-
const tree = useFloatingTree();
|
|
2379
|
-
index(() => {
|
|
2380
|
-
if (domReference) {
|
|
2381
|
-
domReferenceRef.current = domReference;
|
|
2382
|
-
}
|
|
2383
|
-
}, [domReference]);
|
|
2384
|
-
const position = useFloating$1({
|
|
2385
|
-
...options,
|
|
2386
|
-
elements: {
|
|
2387
|
-
...computedElements,
|
|
2388
|
-
...positionReference && {
|
|
2389
|
-
reference: positionReference
|
|
2390
|
-
}
|
|
2391
|
-
}
|
|
2392
|
-
});
|
|
2393
|
-
const setPositionReference = React.useCallback((node) => {
|
|
2394
|
-
const computedPositionReference = isElement(node) ? {
|
|
2395
|
-
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
2396
|
-
contextElement: node
|
|
2397
|
-
} : node;
|
|
2398
|
-
_setPositionReference(computedPositionReference);
|
|
2399
|
-
position.refs.setReference(computedPositionReference);
|
|
2400
|
-
}, [position.refs]);
|
|
2401
|
-
const setReference = React.useCallback((node) => {
|
|
2402
|
-
if (isElement(node) || node === null) {
|
|
2403
|
-
domReferenceRef.current = node;
|
|
2404
|
-
setDomReference(node);
|
|
2405
|
-
}
|
|
2406
|
-
if (isElement(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
|
|
2407
|
-
// `null` to support `positionReference` + an unstable `reference`
|
|
2408
|
-
// callback ref.
|
|
2409
|
-
node !== null && !isElement(node)) {
|
|
2410
|
-
position.refs.setReference(node);
|
|
2411
|
-
}
|
|
2412
|
-
}, [position.refs]);
|
|
2413
|
-
const refs = React.useMemo(() => ({
|
|
2414
|
-
...position.refs,
|
|
2415
|
-
setReference,
|
|
2416
|
-
setPositionReference,
|
|
2417
|
-
domReference: domReferenceRef
|
|
2418
|
-
}), [position.refs, setReference, setPositionReference]);
|
|
2419
|
-
const elements = React.useMemo(() => ({
|
|
2420
|
-
...position.elements,
|
|
2421
|
-
domReference
|
|
2422
|
-
}), [position.elements, domReference]);
|
|
2423
|
-
const context = React.useMemo(() => ({
|
|
2424
|
-
...position,
|
|
2425
|
-
...rootContext,
|
|
2426
|
-
refs,
|
|
2427
|
-
elements,
|
|
2428
|
-
nodeId
|
|
2429
|
-
}), [position, refs, elements, nodeId, rootContext]);
|
|
2430
|
-
index(() => {
|
|
2431
|
-
rootContext.dataRef.current.floatingContext = context;
|
|
2432
|
-
const node = tree == null ? void 0 : tree.nodesRef.current.find((node2) => node2.id === nodeId);
|
|
2433
|
-
if (node) {
|
|
2434
|
-
node.context = context;
|
|
2435
|
-
}
|
|
2436
|
-
});
|
|
2437
|
-
return React.useMemo(() => ({
|
|
2438
|
-
...position,
|
|
2439
|
-
context,
|
|
2440
|
-
refs,
|
|
2441
|
-
elements
|
|
2442
|
-
}), [position, refs, elements, context]);
|
|
2443
|
-
}
|
|
2444
|
-
const ACTIVE_KEY = "active";
|
|
2445
|
-
const SELECTED_KEY = "selected";
|
|
2446
|
-
function mergeProps(userProps, propsList, elementKey) {
|
|
2447
|
-
const map = /* @__PURE__ */ new Map();
|
|
2448
|
-
const isItem = elementKey === "item";
|
|
2449
|
-
let domUserProps = userProps;
|
|
2450
|
-
if (isItem && userProps) {
|
|
2451
|
-
const {
|
|
2452
|
-
[ACTIVE_KEY]: _,
|
|
2453
|
-
[SELECTED_KEY]: __,
|
|
2454
|
-
...validProps
|
|
2455
|
-
} = userProps;
|
|
2456
|
-
domUserProps = validProps;
|
|
2457
|
-
}
|
|
2458
|
-
return {
|
|
2459
|
-
...elementKey === "floating" && {
|
|
2460
|
-
tabIndex: -1,
|
|
2461
|
-
[FOCUSABLE_ATTRIBUTE]: ""
|
|
2462
|
-
},
|
|
2463
|
-
...domUserProps,
|
|
2464
|
-
...propsList.map((value) => {
|
|
2465
|
-
const propsOrGetProps = value ? value[elementKey] : null;
|
|
2466
|
-
if (typeof propsOrGetProps === "function") {
|
|
2467
|
-
return userProps ? propsOrGetProps(userProps) : null;
|
|
2468
|
-
}
|
|
2469
|
-
return propsOrGetProps;
|
|
2470
|
-
}).concat(userProps).reduce((acc, props) => {
|
|
2471
|
-
if (!props) {
|
|
2472
|
-
return acc;
|
|
2473
|
-
}
|
|
2474
|
-
Object.entries(props).forEach((_ref) => {
|
|
2475
|
-
let [key, value] = _ref;
|
|
2476
|
-
if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
|
|
2477
|
-
return;
|
|
2478
|
-
}
|
|
2479
|
-
if (key.indexOf("on") === 0) {
|
|
2480
|
-
if (!map.has(key)) {
|
|
2481
|
-
map.set(key, []);
|
|
2482
|
-
}
|
|
2483
|
-
if (typeof value === "function") {
|
|
2484
|
-
var _map$get;
|
|
2485
|
-
(_map$get = map.get(key)) == null || _map$get.push(value);
|
|
2486
|
-
acc[key] = function() {
|
|
2487
|
-
var _map$get2;
|
|
2488
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2489
|
-
args[_key] = arguments[_key];
|
|
2490
|
-
}
|
|
2491
|
-
return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map((fn) => fn(...args)).find((val) => val !== void 0);
|
|
2492
|
-
};
|
|
2493
|
-
}
|
|
2494
|
-
} else {
|
|
2495
|
-
acc[key] = value;
|
|
2496
|
-
}
|
|
2497
|
-
});
|
|
2498
|
-
return acc;
|
|
2499
|
-
}, {})
|
|
2500
|
-
};
|
|
2501
|
-
}
|
|
2502
|
-
function useInteractions(propsList) {
|
|
2503
|
-
if (propsList === void 0) {
|
|
2504
|
-
propsList = [];
|
|
2505
|
-
}
|
|
2506
|
-
const referenceDeps = propsList.map((key) => key == null ? void 0 : key.reference);
|
|
2507
|
-
const floatingDeps = propsList.map((key) => key == null ? void 0 : key.floating);
|
|
2508
|
-
const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
|
|
2509
|
-
const getReferenceProps = React.useCallback(
|
|
2510
|
-
(userProps) => mergeProps(userProps, propsList, "reference"),
|
|
2511
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2512
|
-
referenceDeps
|
|
2513
|
-
);
|
|
2514
|
-
const getFloatingProps = React.useCallback(
|
|
2515
|
-
(userProps) => mergeProps(userProps, propsList, "floating"),
|
|
2516
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2517
|
-
floatingDeps
|
|
2518
|
-
);
|
|
2519
|
-
const getItemProps = React.useCallback(
|
|
2520
|
-
(userProps) => mergeProps(userProps, propsList, "item"),
|
|
2521
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2522
|
-
itemDeps
|
|
2523
|
-
);
|
|
2524
|
-
return React.useMemo(() => ({
|
|
2525
|
-
getReferenceProps,
|
|
2526
|
-
getFloatingProps,
|
|
2527
|
-
getItemProps
|
|
2528
|
-
}), [getReferenceProps, getFloatingProps, getItemProps]);
|
|
2529
|
-
}
|
|
2530
|
-
let isPreventScrollSupported = false;
|
|
2531
|
-
function doSwitch(orientation, vertical, horizontal) {
|
|
2532
|
-
switch (orientation) {
|
|
2533
|
-
case "vertical":
|
|
2534
|
-
return vertical;
|
|
2535
|
-
case "horizontal":
|
|
2536
|
-
return horizontal;
|
|
2537
|
-
default:
|
|
2538
|
-
return vertical || horizontal;
|
|
2539
|
-
}
|
|
2540
|
-
}
|
|
2541
|
-
function isMainOrientationKey(key, orientation) {
|
|
2542
|
-
const vertical = key === ARROW_UP || key === ARROW_DOWN;
|
|
2543
|
-
const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
|
|
2544
|
-
return doSwitch(orientation, vertical, horizontal);
|
|
2545
|
-
}
|
|
2546
|
-
function isMainOrientationToEndKey(key, orientation, rtl) {
|
|
2547
|
-
const vertical = key === ARROW_DOWN;
|
|
2548
|
-
const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
|
|
2549
|
-
return doSwitch(orientation, vertical, horizontal) || key === "Enter" || key === " " || key === "";
|
|
2550
|
-
}
|
|
2551
|
-
function isCrossOrientationOpenKey(key, orientation, rtl) {
|
|
2552
|
-
const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
|
|
2553
|
-
const horizontal = key === ARROW_DOWN;
|
|
2554
|
-
return doSwitch(orientation, vertical, horizontal);
|
|
2555
|
-
}
|
|
2556
|
-
function isCrossOrientationCloseKey(key, orientation, rtl) {
|
|
2557
|
-
const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
|
|
2558
|
-
const horizontal = key === ARROW_UP;
|
|
2559
|
-
return doSwitch(orientation, vertical, horizontal);
|
|
2560
|
-
}
|
|
2561
|
-
function useListNavigation(context, props) {
|
|
2562
|
-
const {
|
|
2563
|
-
open,
|
|
2564
|
-
onOpenChange,
|
|
2565
|
-
elements
|
|
2566
|
-
} = context;
|
|
2567
|
-
const {
|
|
2568
|
-
listRef,
|
|
2569
|
-
activeIndex,
|
|
2570
|
-
onNavigate: unstable_onNavigate = () => {
|
|
2571
|
-
},
|
|
2572
|
-
enabled = true,
|
|
2573
|
-
selectedIndex = null,
|
|
2574
|
-
allowEscape = false,
|
|
2575
|
-
loop = false,
|
|
2576
|
-
nested = false,
|
|
2577
|
-
rtl = false,
|
|
2578
|
-
virtual = false,
|
|
2579
|
-
focusItemOnOpen = "auto",
|
|
2580
|
-
focusItemOnHover = true,
|
|
2581
|
-
openOnArrowKeyDown = true,
|
|
2582
|
-
disabledIndices = void 0,
|
|
2583
|
-
orientation = "vertical",
|
|
2584
|
-
cols = 1,
|
|
2585
|
-
scrollItemIntoView = true,
|
|
2586
|
-
virtualItemRef,
|
|
2587
|
-
itemSizes,
|
|
2588
|
-
dense = false
|
|
2589
|
-
} = props;
|
|
2590
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2591
|
-
if (allowEscape) {
|
|
2592
|
-
if (!loop) {
|
|
2593
|
-
warn("`useListNavigation` looping must be enabled to allow escaping.");
|
|
2594
|
-
}
|
|
2595
|
-
if (!virtual) {
|
|
2596
|
-
warn("`useListNavigation` must be virtual to allow escaping.");
|
|
2597
|
-
}
|
|
2598
|
-
}
|
|
2599
|
-
if (orientation === "vertical" && cols > 1) {
|
|
2600
|
-
warn("In grid list navigation mode (`cols` > 1), the `orientation` should", 'be either "horizontal" or "both".');
|
|
2601
|
-
}
|
|
2602
|
-
}
|
|
2603
|
-
const floatingFocusElement = getFloatingFocusElement(elements.floating);
|
|
2604
|
-
const floatingFocusElementRef = useLatestRef(floatingFocusElement);
|
|
2605
|
-
const parentId = useFloatingParentNodeId();
|
|
2606
|
-
const tree = useFloatingTree();
|
|
2607
|
-
const onNavigate = useEffectEvent(unstable_onNavigate);
|
|
2608
|
-
const typeableComboboxReference = isTypeableCombobox(elements.domReference);
|
|
2609
|
-
const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
|
|
2610
|
-
const indexRef = React.useRef(selectedIndex != null ? selectedIndex : -1);
|
|
2611
|
-
const keyRef = React.useRef(null);
|
|
2612
|
-
const isPointerModalityRef = React.useRef(true);
|
|
2613
|
-
const previousOnNavigateRef = React.useRef(onNavigate);
|
|
2614
|
-
const previousMountedRef = React.useRef(!!elements.floating);
|
|
2615
|
-
const previousOpenRef = React.useRef(open);
|
|
2616
|
-
const forceSyncFocus = React.useRef(false);
|
|
2617
|
-
const forceScrollIntoViewRef = React.useRef(false);
|
|
2618
|
-
const disabledIndicesRef = useLatestRef(disabledIndices);
|
|
2619
|
-
const latestOpenRef = useLatestRef(open);
|
|
2620
|
-
const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
|
|
2621
|
-
const selectedIndexRef = useLatestRef(selectedIndex);
|
|
2622
|
-
const [activeId, setActiveId] = React.useState();
|
|
2623
|
-
const [virtualId, setVirtualId] = React.useState();
|
|
2624
|
-
const focusItem = useEffectEvent(function(listRef2, indexRef2, forceScrollIntoView) {
|
|
2625
|
-
if (forceScrollIntoView === void 0) {
|
|
2626
|
-
forceScrollIntoView = false;
|
|
2627
|
-
}
|
|
2628
|
-
function runFocus(item2) {
|
|
2629
|
-
if (virtual) {
|
|
2630
|
-
setActiveId(item2.id);
|
|
2631
|
-
tree == null || tree.events.emit("virtualfocus", item2);
|
|
2632
|
-
if (virtualItemRef) {
|
|
2633
|
-
virtualItemRef.current = item2;
|
|
2634
|
-
}
|
|
2635
|
-
} else {
|
|
2636
|
-
enqueueFocus(item2, {
|
|
2637
|
-
preventScroll: true,
|
|
2638
|
-
// Mac Safari does not move the virtual cursor unless the focus call
|
|
2639
|
-
// is sync. However, for the very first focus call, we need to wait
|
|
2640
|
-
// for the position to be ready in order to prevent unwanted
|
|
2641
|
-
// scrolling. This means the virtual cursor will not move to the first
|
|
2642
|
-
// item when first opening the floating element, but will on
|
|
2643
|
-
// subsequent calls. `preventScroll` is supported in modern Safari,
|
|
2644
|
-
// so we can use that instead.
|
|
2645
|
-
// iOS Safari must be async or the first item will not be focused.
|
|
2646
|
-
sync: isMac() && isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false
|
|
2647
|
-
});
|
|
2648
|
-
}
|
|
2649
|
-
}
|
|
2650
|
-
const initialItem = listRef2.current[indexRef2.current];
|
|
2651
|
-
if (initialItem) {
|
|
2652
|
-
runFocus(initialItem);
|
|
2653
|
-
}
|
|
2654
|
-
requestAnimationFrame(() => {
|
|
2655
|
-
const waitedItem = listRef2.current[indexRef2.current] || initialItem;
|
|
2656
|
-
if (!waitedItem) return;
|
|
2657
|
-
if (!initialItem) {
|
|
2658
|
-
runFocus(waitedItem);
|
|
2659
|
-
}
|
|
2660
|
-
const scrollIntoViewOptions = scrollItemIntoViewRef.current;
|
|
2661
|
-
const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current);
|
|
2662
|
-
if (shouldScrollIntoView) {
|
|
2663
|
-
waitedItem.scrollIntoView == null || waitedItem.scrollIntoView(typeof scrollIntoViewOptions === "boolean" ? {
|
|
2664
|
-
block: "nearest",
|
|
2665
|
-
inline: "nearest"
|
|
2666
|
-
} : scrollIntoViewOptions);
|
|
2667
|
-
}
|
|
2668
|
-
});
|
|
2669
|
-
});
|
|
2670
|
-
index(() => {
|
|
2671
|
-
document.createElement("div").focus({
|
|
2672
|
-
get preventScroll() {
|
|
2673
|
-
isPreventScrollSupported = true;
|
|
2674
|
-
return false;
|
|
2675
|
-
}
|
|
2676
|
-
});
|
|
2677
|
-
}, []);
|
|
2678
|
-
index(() => {
|
|
2679
|
-
if (!enabled) return;
|
|
2680
|
-
if (open && elements.floating) {
|
|
2681
|
-
if (focusItemOnOpenRef.current && selectedIndex != null) {
|
|
2682
|
-
forceScrollIntoViewRef.current = true;
|
|
2683
|
-
indexRef.current = selectedIndex;
|
|
2684
|
-
onNavigate(selectedIndex);
|
|
2685
|
-
}
|
|
2686
|
-
} else if (previousMountedRef.current) {
|
|
2687
|
-
indexRef.current = -1;
|
|
2688
|
-
previousOnNavigateRef.current(null);
|
|
2689
|
-
}
|
|
2690
|
-
}, [enabled, open, elements.floating, selectedIndex, onNavigate]);
|
|
2691
|
-
index(() => {
|
|
2692
|
-
if (!enabled) return;
|
|
2693
|
-
if (open && elements.floating) {
|
|
2694
|
-
if (activeIndex == null) {
|
|
2695
|
-
forceSyncFocus.current = false;
|
|
2696
|
-
if (selectedIndexRef.current != null) {
|
|
2697
|
-
return;
|
|
2698
|
-
}
|
|
2699
|
-
if (previousMountedRef.current) {
|
|
2700
|
-
indexRef.current = -1;
|
|
2701
|
-
focusItem(listRef, indexRef);
|
|
2702
|
-
}
|
|
2703
|
-
if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
|
|
2704
|
-
let runs = 0;
|
|
2705
|
-
const waitForListPopulated = () => {
|
|
2706
|
-
if (listRef.current[0] == null) {
|
|
2707
|
-
if (runs < 2) {
|
|
2708
|
-
const scheduler = runs ? requestAnimationFrame : queueMicrotask;
|
|
2709
|
-
scheduler(waitForListPopulated);
|
|
2710
|
-
}
|
|
2711
|
-
runs++;
|
|
2712
|
-
} else {
|
|
2713
|
-
indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinIndex(listRef, disabledIndicesRef.current) : getMaxIndex(listRef, disabledIndicesRef.current);
|
|
2714
|
-
keyRef.current = null;
|
|
2715
|
-
onNavigate(indexRef.current);
|
|
2716
|
-
}
|
|
2717
|
-
};
|
|
2718
|
-
waitForListPopulated();
|
|
2719
|
-
}
|
|
2720
|
-
} else if (!isIndexOutOfBounds(listRef, activeIndex)) {
|
|
2721
|
-
indexRef.current = activeIndex;
|
|
2722
|
-
focusItem(listRef, indexRef, forceScrollIntoViewRef.current);
|
|
2723
|
-
forceScrollIntoViewRef.current = false;
|
|
23
|
+
const defaultElement$1 = "a";
|
|
24
|
+
const BreadcrumbItem = ({
|
|
25
|
+
className,
|
|
26
|
+
isCurrent,
|
|
27
|
+
as,
|
|
28
|
+
...rest
|
|
29
|
+
}) => {
|
|
30
|
+
const Element = as || defaultElement$1;
|
|
31
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
32
|
+
/* @__PURE__ */ jsx("li", { className: classNames("eds-breadcrumb__item", className), children: /* @__PURE__ */ jsx(
|
|
33
|
+
Element,
|
|
34
|
+
{
|
|
35
|
+
"aria-current": isCurrent ? "page" : void 0,
|
|
36
|
+
className: classNames("eds-breadcrumb__link", {
|
|
37
|
+
"eds-breadcrumb__link--current": isCurrent
|
|
38
|
+
}),
|
|
39
|
+
...rest
|
|
2724
40
|
}
|
|
2725
|
-
}
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
const nodes = tree.nodesRef.current;
|
|
2733
|
-
const parent = (_nodes$find = nodes.find((node) => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;
|
|
2734
|
-
const activeEl = activeElement(getDocument(elements.floating));
|
|
2735
|
-
const treeContainsActiveEl = nodes.some((node) => node.context && contains(node.context.elements.floating, activeEl));
|
|
2736
|
-
if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
|
|
2737
|
-
parent.focus({
|
|
2738
|
-
preventScroll: true
|
|
2739
|
-
});
|
|
2740
|
-
}
|
|
2741
|
-
}, [enabled, elements.floating, tree, parentId, virtual]);
|
|
2742
|
-
index(() => {
|
|
2743
|
-
if (!enabled) return;
|
|
2744
|
-
if (!tree) return;
|
|
2745
|
-
if (!virtual) return;
|
|
2746
|
-
if (parentId) return;
|
|
2747
|
-
function handleVirtualFocus(item2) {
|
|
2748
|
-
setVirtualId(item2.id);
|
|
2749
|
-
if (virtualItemRef) {
|
|
2750
|
-
virtualItemRef.current = item2;
|
|
41
|
+
) }),
|
|
42
|
+
!isCurrent && /* @__PURE__ */ jsx(
|
|
43
|
+
RightArrowIcon,
|
|
44
|
+
{
|
|
45
|
+
className: "eds-breadcrumb__separator",
|
|
46
|
+
inline: true,
|
|
47
|
+
role: "presentation"
|
|
2751
48
|
}
|
|
49
|
+
)
|
|
50
|
+
] });
|
|
51
|
+
};
|
|
52
|
+
function useControllableProp({
|
|
53
|
+
prop,
|
|
54
|
+
updater = () => void 0,
|
|
55
|
+
defaultValue
|
|
56
|
+
}) {
|
|
57
|
+
const [internalState, setInternalState] = useState(defaultValue);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
if (prop !== void 0) {
|
|
60
|
+
setInternalState(prop);
|
|
2752
61
|
}
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
62
|
+
}, [prop]);
|
|
63
|
+
return prop === void 0 ? [internalState, setInternalState] : [prop, updater];
|
|
64
|
+
}
|
|
65
|
+
const CollapsibleSideNavigation = ({
|
|
66
|
+
className,
|
|
67
|
+
children,
|
|
68
|
+
size,
|
|
69
|
+
collapsed: collapsible,
|
|
70
|
+
onCollapseToggle,
|
|
71
|
+
collapsibleButtonPosition = "50%",
|
|
72
|
+
openSideMenuAriaLabel = "Åpne sidemeny",
|
|
73
|
+
closeSideMenuAriaLabel = "Lukk sidemeny",
|
|
74
|
+
...rest
|
|
75
|
+
}) => {
|
|
76
|
+
const [collapsedMenu, setCollapsedMenu] = useControllableProp({
|
|
77
|
+
prop: collapsible,
|
|
78
|
+
defaultValue: false,
|
|
79
|
+
updater: onCollapseToggle
|
|
2761
80
|
});
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
index(() => {
|
|
2768
|
-
previousOpenRef.current = open;
|
|
2769
|
-
}, [open]);
|
|
2770
|
-
const hasActiveIndex = activeIndex != null;
|
|
2771
|
-
const item = React.useMemo(() => {
|
|
2772
|
-
function syncCurrentTarget(currentTarget) {
|
|
2773
|
-
if (!open) return;
|
|
2774
|
-
const index2 = listRef.current.indexOf(currentTarget);
|
|
2775
|
-
if (index2 !== -1) {
|
|
2776
|
-
onNavigate(index2);
|
|
2777
|
-
}
|
|
2778
|
-
}
|
|
2779
|
-
const props2 = {
|
|
2780
|
-
onFocus(_ref) {
|
|
2781
|
-
let {
|
|
2782
|
-
currentTarget
|
|
2783
|
-
} = _ref;
|
|
2784
|
-
syncCurrentTarget(currentTarget);
|
|
2785
|
-
},
|
|
2786
|
-
onClick: (_ref2) => {
|
|
2787
|
-
let {
|
|
2788
|
-
currentTarget
|
|
2789
|
-
} = _ref2;
|
|
2790
|
-
return currentTarget.focus({
|
|
2791
|
-
preventScroll: true
|
|
2792
|
-
});
|
|
81
|
+
return /* @__PURE__ */ jsx(
|
|
82
|
+
SideNavigationContext.Provider,
|
|
83
|
+
{
|
|
84
|
+
value: {
|
|
85
|
+
isCollapsed: collapsedMenu
|
|
2793
86
|
},
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
enqueueFocus(floatingFocusElementRef.current, {
|
|
2814
|
-
preventScroll: true
|
|
2815
|
-
});
|
|
2816
|
-
}
|
|
2817
|
-
}
|
|
2818
|
-
}
|
|
2819
|
-
};
|
|
2820
|
-
return props2;
|
|
2821
|
-
}, [open, floatingFocusElementRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
|
|
2822
|
-
const commonOnKeyDown = useEffectEvent((event) => {
|
|
2823
|
-
isPointerModalityRef.current = false;
|
|
2824
|
-
forceSyncFocus.current = true;
|
|
2825
|
-
if (event.which === 229) {
|
|
2826
|
-
return;
|
|
2827
|
-
}
|
|
2828
|
-
if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
|
|
2829
|
-
return;
|
|
2830
|
-
}
|
|
2831
|
-
if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
|
|
2832
|
-
stopEvent(event);
|
|
2833
|
-
onOpenChange(false, event.nativeEvent, "list-navigation");
|
|
2834
|
-
if (isHTMLElement(elements.domReference)) {
|
|
2835
|
-
if (virtual) {
|
|
2836
|
-
tree == null || tree.events.emit("virtualfocus", elements.domReference);
|
|
2837
|
-
} else {
|
|
2838
|
-
elements.domReference.focus();
|
|
2839
|
-
}
|
|
2840
|
-
}
|
|
2841
|
-
return;
|
|
2842
|
-
}
|
|
2843
|
-
const currentIndex = indexRef.current;
|
|
2844
|
-
const minIndex = getMinIndex(listRef, disabledIndices);
|
|
2845
|
-
const maxIndex = getMaxIndex(listRef, disabledIndices);
|
|
2846
|
-
if (!typeableComboboxReference) {
|
|
2847
|
-
if (event.key === "Home") {
|
|
2848
|
-
stopEvent(event);
|
|
2849
|
-
indexRef.current = minIndex;
|
|
2850
|
-
onNavigate(indexRef.current);
|
|
2851
|
-
}
|
|
2852
|
-
if (event.key === "End") {
|
|
2853
|
-
stopEvent(event);
|
|
2854
|
-
indexRef.current = maxIndex;
|
|
2855
|
-
onNavigate(indexRef.current);
|
|
2856
|
-
}
|
|
2857
|
-
}
|
|
2858
|
-
if (cols > 1) {
|
|
2859
|
-
const sizes = itemSizes || Array.from({
|
|
2860
|
-
length: listRef.current.length
|
|
2861
|
-
}, () => ({
|
|
2862
|
-
width: 1,
|
|
2863
|
-
height: 1
|
|
2864
|
-
}));
|
|
2865
|
-
const cellMap = buildCellMap(sizes, cols, dense);
|
|
2866
|
-
const minGridIndex = cellMap.findIndex((index3) => index3 != null && !isDisabled(listRef.current, index3, disabledIndices));
|
|
2867
|
-
const maxGridIndex = cellMap.reduce((foundIndex, index3, cellIndex) => index3 != null && !isDisabled(listRef.current, index3, disabledIndices) ? cellIndex : foundIndex, -1);
|
|
2868
|
-
const index2 = cellMap[getGridNavigatedIndex({
|
|
2869
|
-
current: cellMap.map((itemIndex) => itemIndex != null ? listRef.current[itemIndex] : null)
|
|
2870
|
-
}, {
|
|
2871
|
-
event,
|
|
2872
|
-
orientation,
|
|
2873
|
-
loop,
|
|
2874
|
-
rtl,
|
|
2875
|
-
cols,
|
|
2876
|
-
// treat undefined (empty grid spaces) as disabled indices so we
|
|
2877
|
-
// don't end up in them
|
|
2878
|
-
disabledIndices: getCellIndices([...disabledIndices || listRef.current.map((_, index3) => isDisabled(listRef.current, index3) ? index3 : void 0), void 0], cellMap),
|
|
2879
|
-
minIndex: minGridIndex,
|
|
2880
|
-
maxIndex: maxGridIndex,
|
|
2881
|
-
prevIndex: getCellIndexOfCorner(
|
|
2882
|
-
indexRef.current > maxIndex ? minIndex : indexRef.current,
|
|
2883
|
-
sizes,
|
|
2884
|
-
cellMap,
|
|
2885
|
-
cols,
|
|
2886
|
-
// use a corner matching the edge closest to the direction
|
|
2887
|
-
// we're moving in so we don't end up in the same item. Prefer
|
|
2888
|
-
// top/left over bottom/right.
|
|
2889
|
-
event.key === ARROW_DOWN ? "bl" : event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT) ? "tr" : "tl"
|
|
2890
|
-
),
|
|
2891
|
-
stopEvent: true
|
|
2892
|
-
})];
|
|
2893
|
-
if (index2 != null) {
|
|
2894
|
-
indexRef.current = index2;
|
|
2895
|
-
onNavigate(indexRef.current);
|
|
2896
|
-
}
|
|
2897
|
-
if (orientation === "both") {
|
|
2898
|
-
return;
|
|
2899
|
-
}
|
|
2900
|
-
}
|
|
2901
|
-
if (isMainOrientationKey(event.key, orientation)) {
|
|
2902
|
-
stopEvent(event);
|
|
2903
|
-
if (open && !virtual && activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
|
|
2904
|
-
indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
|
|
2905
|
-
onNavigate(indexRef.current);
|
|
2906
|
-
return;
|
|
2907
|
-
}
|
|
2908
|
-
if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
|
|
2909
|
-
if (loop) {
|
|
2910
|
-
indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {
|
|
2911
|
-
startingIndex: currentIndex,
|
|
2912
|
-
disabledIndices
|
|
2913
|
-
});
|
|
2914
|
-
} else {
|
|
2915
|
-
indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {
|
|
2916
|
-
startingIndex: currentIndex,
|
|
2917
|
-
disabledIndices
|
|
2918
|
-
}));
|
|
2919
|
-
}
|
|
2920
|
-
} else {
|
|
2921
|
-
if (loop) {
|
|
2922
|
-
indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {
|
|
2923
|
-
startingIndex: currentIndex,
|
|
2924
|
-
decrement: true,
|
|
2925
|
-
disabledIndices
|
|
2926
|
-
});
|
|
2927
|
-
} else {
|
|
2928
|
-
indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {
|
|
2929
|
-
startingIndex: currentIndex,
|
|
2930
|
-
decrement: true,
|
|
2931
|
-
disabledIndices
|
|
2932
|
-
}));
|
|
2933
|
-
}
|
|
2934
|
-
}
|
|
2935
|
-
if (isIndexOutOfBounds(listRef, indexRef.current)) {
|
|
2936
|
-
onNavigate(null);
|
|
2937
|
-
} else {
|
|
2938
|
-
onNavigate(indexRef.current);
|
|
2939
|
-
}
|
|
2940
|
-
}
|
|
2941
|
-
});
|
|
2942
|
-
const ariaActiveDescendantProp = React.useMemo(() => {
|
|
2943
|
-
return virtual && open && hasActiveIndex && {
|
|
2944
|
-
"aria-activedescendant": virtualId || activeId
|
|
2945
|
-
};
|
|
2946
|
-
}, [virtual, open, hasActiveIndex, virtualId, activeId]);
|
|
2947
|
-
const floating = React.useMemo(() => {
|
|
2948
|
-
return {
|
|
2949
|
-
"aria-orientation": orientation === "both" ? void 0 : orientation,
|
|
2950
|
-
...!isTypeableCombobox(elements.domReference) && ariaActiveDescendantProp,
|
|
2951
|
-
onKeyDown: commonOnKeyDown,
|
|
2952
|
-
onPointerMove() {
|
|
2953
|
-
isPointerModalityRef.current = true;
|
|
2954
|
-
}
|
|
2955
|
-
};
|
|
2956
|
-
}, [ariaActiveDescendantProp, commonOnKeyDown, elements.domReference, orientation]);
|
|
2957
|
-
const reference = React.useMemo(() => {
|
|
2958
|
-
function checkVirtualMouse(event) {
|
|
2959
|
-
if (focusItemOnOpen === "auto" && isVirtualClick(event.nativeEvent)) {
|
|
2960
|
-
focusItemOnOpenRef.current = true;
|
|
2961
|
-
}
|
|
2962
|
-
}
|
|
2963
|
-
function checkVirtualPointer(event) {
|
|
2964
|
-
focusItemOnOpenRef.current = focusItemOnOpen;
|
|
2965
|
-
if (focusItemOnOpen === "auto" && isVirtualPointerEvent(event.nativeEvent)) {
|
|
2966
|
-
focusItemOnOpenRef.current = true;
|
|
2967
|
-
}
|
|
2968
|
-
}
|
|
2969
|
-
return {
|
|
2970
|
-
...ariaActiveDescendantProp,
|
|
2971
|
-
onKeyDown(event) {
|
|
2972
|
-
isPointerModalityRef.current = false;
|
|
2973
|
-
const isArrowKey = event.key.startsWith("Arrow");
|
|
2974
|
-
const isHomeOrEndKey = ["Home", "End"].includes(event.key);
|
|
2975
|
-
const isMoveKey = isArrowKey || isHomeOrEndKey;
|
|
2976
|
-
const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
|
|
2977
|
-
const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);
|
|
2978
|
-
const isMainKey = isMainOrientationKey(event.key, orientation);
|
|
2979
|
-
const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
|
|
2980
|
-
if (virtual && open) {
|
|
2981
|
-
const rootNode = tree == null ? void 0 : tree.nodesRef.current.find((node) => node.parentId == null);
|
|
2982
|
-
const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
|
|
2983
|
-
if (isMoveKey && deepestNode && virtualItemRef) {
|
|
2984
|
-
const eventObject = new KeyboardEvent("keydown", {
|
|
2985
|
-
key: event.key,
|
|
2986
|
-
bubbles: true
|
|
2987
|
-
});
|
|
2988
|
-
if (isCrossOpenKey || isCrossCloseKey) {
|
|
2989
|
-
var _deepestNode$context, _deepestNode$context2;
|
|
2990
|
-
const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
|
|
2991
|
-
const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? listRef.current.find((item2) => (item2 == null ? void 0 : item2.id) === activeId) : null;
|
|
2992
|
-
if (dispatchItem) {
|
|
2993
|
-
stopEvent(event);
|
|
2994
|
-
dispatchItem.dispatchEvent(eventObject);
|
|
2995
|
-
setVirtualId(void 0);
|
|
2996
|
-
}
|
|
2997
|
-
}
|
|
2998
|
-
if ((isMainKey || isHomeOrEndKey) && deepestNode.context) {
|
|
2999
|
-
if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {
|
|
3000
|
-
var _deepestNode$context$;
|
|
3001
|
-
stopEvent(event);
|
|
3002
|
-
(_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);
|
|
3003
|
-
return;
|
|
87
|
+
children: /* @__PURE__ */ jsxs(
|
|
88
|
+
"ul",
|
|
89
|
+
{
|
|
90
|
+
className: classNames(
|
|
91
|
+
"eds-side-navigation",
|
|
92
|
+
{ "eds-side-navigation--small": size === "small" },
|
|
93
|
+
{ "eds-side-navigation--collapsed": collapsedMenu },
|
|
94
|
+
className
|
|
95
|
+
),
|
|
96
|
+
...rest,
|
|
97
|
+
children: [
|
|
98
|
+
children,
|
|
99
|
+
/* @__PURE__ */ jsx(
|
|
100
|
+
"button",
|
|
101
|
+
{
|
|
102
|
+
className: "eds-side-navigation__collapse-button",
|
|
103
|
+
onClick: () => setCollapsedMenu(!collapsedMenu),
|
|
104
|
+
style: { top: `${collapsibleButtonPosition}` },
|
|
105
|
+
children: collapsedMenu ? /* @__PURE__ */ jsx(MenuIcon, { "aria-label": openSideMenuAriaLabel }) : /* @__PURE__ */ jsx(LeftArrowIcon, { "aria-label": closeSideMenuAriaLabel })
|
|
3004
106
|
}
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
return commonOnKeyDown(event);
|
|
3008
|
-
}
|
|
3009
|
-
if (!open && !openOnArrowKeyDown && isArrowKey) {
|
|
3010
|
-
return;
|
|
3011
|
-
}
|
|
3012
|
-
if (isNavigationKey) {
|
|
3013
|
-
keyRef.current = nested && isMainKey ? null : event.key;
|
|
3014
|
-
}
|
|
3015
|
-
if (nested) {
|
|
3016
|
-
if (isCrossOpenKey) {
|
|
3017
|
-
stopEvent(event);
|
|
3018
|
-
if (open) {
|
|
3019
|
-
indexRef.current = getMinIndex(listRef, disabledIndicesRef.current);
|
|
3020
|
-
onNavigate(indexRef.current);
|
|
3021
|
-
} else {
|
|
3022
|
-
onOpenChange(true, event.nativeEvent, "list-navigation");
|
|
3023
|
-
}
|
|
3024
|
-
}
|
|
3025
|
-
return;
|
|
3026
|
-
}
|
|
3027
|
-
if (isMainKey) {
|
|
3028
|
-
if (selectedIndex != null) {
|
|
3029
|
-
indexRef.current = selectedIndex;
|
|
3030
|
-
}
|
|
3031
|
-
stopEvent(event);
|
|
3032
|
-
if (!open && openOnArrowKeyDown) {
|
|
3033
|
-
onOpenChange(true, event.nativeEvent, "list-navigation");
|
|
3034
|
-
} else {
|
|
3035
|
-
commonOnKeyDown(event);
|
|
3036
|
-
}
|
|
3037
|
-
if (open) {
|
|
3038
|
-
onNavigate(indexRef.current);
|
|
3039
|
-
}
|
|
3040
|
-
}
|
|
3041
|
-
},
|
|
3042
|
-
onFocus() {
|
|
3043
|
-
if (open && !virtual) {
|
|
3044
|
-
onNavigate(null);
|
|
107
|
+
)
|
|
108
|
+
]
|
|
3045
109
|
}
|
|
3046
|
-
|
|
3047
|
-
onPointerDown: checkVirtualPointer,
|
|
3048
|
-
onMouseDown: checkVirtualMouse,
|
|
3049
|
-
onClick: checkVirtualMouse
|
|
3050
|
-
};
|
|
3051
|
-
}, [activeId, ariaActiveDescendantProp, commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, onOpenChange, open, openOnArrowKeyDown, orientation, rtl, selectedIndex, tree, virtual, virtualItemRef]);
|
|
3052
|
-
return React.useMemo(() => enabled ? {
|
|
3053
|
-
reference,
|
|
3054
|
-
floating,
|
|
3055
|
-
item
|
|
3056
|
-
} : {}, [enabled, reference, floating, item]);
|
|
3057
|
-
}
|
|
3058
|
-
const componentRoleToAriaRoleMap = /* @__PURE__ */ new Map([["select", "listbox"], ["combobox", "listbox"], ["label", false]]);
|
|
3059
|
-
function useRole(context, props) {
|
|
3060
|
-
var _componentRoleToAriaR;
|
|
3061
|
-
if (props === void 0) {
|
|
3062
|
-
props = {};
|
|
3063
|
-
}
|
|
3064
|
-
const {
|
|
3065
|
-
open,
|
|
3066
|
-
floatingId
|
|
3067
|
-
} = context;
|
|
3068
|
-
const {
|
|
3069
|
-
enabled = true,
|
|
3070
|
-
role = "dialog"
|
|
3071
|
-
} = props;
|
|
3072
|
-
const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
|
|
3073
|
-
const referenceId = useId();
|
|
3074
|
-
const parentId = useFloatingParentNodeId();
|
|
3075
|
-
const isNested = parentId != null;
|
|
3076
|
-
const reference = React.useMemo(() => {
|
|
3077
|
-
if (ariaRole === "tooltip" || role === "label") {
|
|
3078
|
-
return {
|
|
3079
|
-
["aria-" + (role === "label" ? "labelledby" : "describedby")]: open ? floatingId : void 0
|
|
3080
|
-
};
|
|
3081
|
-
}
|
|
3082
|
-
return {
|
|
3083
|
-
"aria-expanded": open ? "true" : "false",
|
|
3084
|
-
"aria-haspopup": ariaRole === "alertdialog" ? "dialog" : ariaRole,
|
|
3085
|
-
"aria-controls": open ? floatingId : void 0,
|
|
3086
|
-
...ariaRole === "listbox" && {
|
|
3087
|
-
role: "combobox"
|
|
3088
|
-
},
|
|
3089
|
-
...ariaRole === "menu" && {
|
|
3090
|
-
id: referenceId
|
|
3091
|
-
},
|
|
3092
|
-
...ariaRole === "menu" && isNested && {
|
|
3093
|
-
role: "menuitem"
|
|
3094
|
-
},
|
|
3095
|
-
...role === "select" && {
|
|
3096
|
-
"aria-autocomplete": "none"
|
|
3097
|
-
},
|
|
3098
|
-
...role === "combobox" && {
|
|
3099
|
-
"aria-autocomplete": "list"
|
|
3100
|
-
}
|
|
3101
|
-
};
|
|
3102
|
-
}, [ariaRole, floatingId, isNested, open, referenceId, role]);
|
|
3103
|
-
const floating = React.useMemo(() => {
|
|
3104
|
-
const floatingProps = {
|
|
3105
|
-
id: floatingId,
|
|
3106
|
-
...ariaRole && {
|
|
3107
|
-
role: ariaRole
|
|
3108
|
-
}
|
|
3109
|
-
};
|
|
3110
|
-
if (ariaRole === "tooltip" || role === "label") {
|
|
3111
|
-
return floatingProps;
|
|
3112
|
-
}
|
|
3113
|
-
return {
|
|
3114
|
-
...floatingProps,
|
|
3115
|
-
...ariaRole === "menu" && {
|
|
3116
|
-
"aria-labelledby": referenceId
|
|
3117
|
-
}
|
|
3118
|
-
};
|
|
3119
|
-
}, [ariaRole, floatingId, referenceId, role]);
|
|
3120
|
-
const item = React.useCallback((_ref) => {
|
|
3121
|
-
let {
|
|
3122
|
-
active,
|
|
3123
|
-
selected
|
|
3124
|
-
} = _ref;
|
|
3125
|
-
const commonProps = {
|
|
3126
|
-
role: "option",
|
|
3127
|
-
...active && {
|
|
3128
|
-
id: floatingId + "-option"
|
|
3129
|
-
}
|
|
3130
|
-
};
|
|
3131
|
-
switch (role) {
|
|
3132
|
-
case "select":
|
|
3133
|
-
return {
|
|
3134
|
-
...commonProps,
|
|
3135
|
-
"aria-selected": active && selected
|
|
3136
|
-
};
|
|
3137
|
-
case "combobox": {
|
|
3138
|
-
return {
|
|
3139
|
-
...commonProps,
|
|
3140
|
-
...active && {
|
|
3141
|
-
"aria-selected": true
|
|
3142
|
-
}
|
|
3143
|
-
};
|
|
3144
|
-
}
|
|
3145
|
-
}
|
|
3146
|
-
return {};
|
|
3147
|
-
}, [floatingId, role]);
|
|
3148
|
-
return React.useMemo(() => enabled ? {
|
|
3149
|
-
reference,
|
|
3150
|
-
floating,
|
|
3151
|
-
item
|
|
3152
|
-
} : {}, [enabled, reference, floating, item]);
|
|
3153
|
-
}
|
|
3154
|
-
function useTypeahead(context, props) {
|
|
3155
|
-
var _ref;
|
|
3156
|
-
const {
|
|
3157
|
-
open,
|
|
3158
|
-
dataRef
|
|
3159
|
-
} = context;
|
|
3160
|
-
const {
|
|
3161
|
-
listRef,
|
|
3162
|
-
activeIndex,
|
|
3163
|
-
onMatch: unstable_onMatch,
|
|
3164
|
-
onTypingChange: unstable_onTypingChange,
|
|
3165
|
-
enabled = true,
|
|
3166
|
-
findMatch = null,
|
|
3167
|
-
resetMs = 750,
|
|
3168
|
-
ignoreKeys = [],
|
|
3169
|
-
selectedIndex = null
|
|
3170
|
-
} = props;
|
|
3171
|
-
const timeoutIdRef = React.useRef();
|
|
3172
|
-
const stringRef = React.useRef("");
|
|
3173
|
-
const prevIndexRef = React.useRef((_ref = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref : -1);
|
|
3174
|
-
const matchIndexRef = React.useRef(null);
|
|
3175
|
-
const onMatch = useEffectEvent(unstable_onMatch);
|
|
3176
|
-
const onTypingChange = useEffectEvent(unstable_onTypingChange);
|
|
3177
|
-
const findMatchRef = useLatestRef(findMatch);
|
|
3178
|
-
const ignoreKeysRef = useLatestRef(ignoreKeys);
|
|
3179
|
-
index(() => {
|
|
3180
|
-
if (open) {
|
|
3181
|
-
clearTimeout(timeoutIdRef.current);
|
|
3182
|
-
matchIndexRef.current = null;
|
|
3183
|
-
stringRef.current = "";
|
|
3184
|
-
}
|
|
3185
|
-
}, [open]);
|
|
3186
|
-
index(() => {
|
|
3187
|
-
if (open && stringRef.current === "") {
|
|
3188
|
-
var _ref2;
|
|
3189
|
-
prevIndexRef.current = (_ref2 = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref2 : -1;
|
|
3190
|
-
}
|
|
3191
|
-
}, [open, selectedIndex, activeIndex]);
|
|
3192
|
-
const setTypingChange = useEffectEvent((value) => {
|
|
3193
|
-
if (value) {
|
|
3194
|
-
if (!dataRef.current.typing) {
|
|
3195
|
-
dataRef.current.typing = value;
|
|
3196
|
-
onTypingChange(value);
|
|
3197
|
-
}
|
|
3198
|
-
} else {
|
|
3199
|
-
if (dataRef.current.typing) {
|
|
3200
|
-
dataRef.current.typing = value;
|
|
3201
|
-
onTypingChange(value);
|
|
3202
|
-
}
|
|
3203
|
-
}
|
|
3204
|
-
});
|
|
3205
|
-
const onKeyDown = useEffectEvent((event) => {
|
|
3206
|
-
function getMatchingIndex(list, orderedList, string) {
|
|
3207
|
-
const str = findMatchRef.current ? findMatchRef.current(orderedList, string) : orderedList.find((text) => (text == null ? void 0 : text.toLocaleLowerCase().indexOf(string.toLocaleLowerCase())) === 0);
|
|
3208
|
-
return str ? list.indexOf(str) : -1;
|
|
3209
|
-
}
|
|
3210
|
-
const listContent = listRef.current;
|
|
3211
|
-
if (stringRef.current.length > 0 && stringRef.current[0] !== " ") {
|
|
3212
|
-
if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) {
|
|
3213
|
-
setTypingChange(false);
|
|
3214
|
-
} else if (event.key === " ") {
|
|
3215
|
-
stopEvent(event);
|
|
3216
|
-
}
|
|
3217
|
-
}
|
|
3218
|
-
if (listContent == null || ignoreKeysRef.current.includes(event.key) || // Character key.
|
|
3219
|
-
event.key.length !== 1 || // Modifier key.
|
|
3220
|
-
event.ctrlKey || event.metaKey || event.altKey) {
|
|
3221
|
-
return;
|
|
3222
|
-
}
|
|
3223
|
-
if (open && event.key !== " ") {
|
|
3224
|
-
stopEvent(event);
|
|
3225
|
-
setTypingChange(true);
|
|
3226
|
-
}
|
|
3227
|
-
const allowRapidSuccessionOfFirstLetter = listContent.every((text) => {
|
|
3228
|
-
var _text$, _text$2;
|
|
3229
|
-
return text ? ((_text$ = text[0]) == null ? void 0 : _text$.toLocaleLowerCase()) !== ((_text$2 = text[1]) == null ? void 0 : _text$2.toLocaleLowerCase()) : true;
|
|
3230
|
-
});
|
|
3231
|
-
if (allowRapidSuccessionOfFirstLetter && stringRef.current === event.key) {
|
|
3232
|
-
stringRef.current = "";
|
|
3233
|
-
prevIndexRef.current = matchIndexRef.current;
|
|
3234
|
-
}
|
|
3235
|
-
stringRef.current += event.key;
|
|
3236
|
-
clearTimeout(timeoutIdRef.current);
|
|
3237
|
-
timeoutIdRef.current = setTimeout(() => {
|
|
3238
|
-
stringRef.current = "";
|
|
3239
|
-
prevIndexRef.current = matchIndexRef.current;
|
|
3240
|
-
setTypingChange(false);
|
|
3241
|
-
}, resetMs);
|
|
3242
|
-
const prevIndex = prevIndexRef.current;
|
|
3243
|
-
const index2 = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
|
|
3244
|
-
if (index2 !== -1) {
|
|
3245
|
-
onMatch(index2);
|
|
3246
|
-
matchIndexRef.current = index2;
|
|
3247
|
-
} else if (event.key !== " ") {
|
|
3248
|
-
stringRef.current = "";
|
|
3249
|
-
setTypingChange(false);
|
|
110
|
+
)
|
|
3250
111
|
}
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
reference,
|
|
3267
|
-
floating
|
|
3268
|
-
} : {}, [enabled, reference, floating]);
|
|
3269
|
-
}
|
|
3270
|
-
const SelectContext = React__default.createContext(
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
const SideNavigationContext = React.createContext({
|
|
115
|
+
isCollapsed: false
|
|
116
|
+
});
|
|
117
|
+
const useSideNavigationContext = () => {
|
|
118
|
+
const context = React.useContext(SideNavigationContext);
|
|
119
|
+
if (!context) {
|
|
120
|
+
console.error(
|
|
121
|
+
"Error reading SideNavigationContext. Please contact maintainer of @entur/menu"
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
return context;
|
|
125
|
+
};
|
|
126
|
+
const SelectContext = React.createContext(
|
|
3271
127
|
{}
|
|
3272
128
|
);
|
|
3273
129
|
const OverflowMenu = ({
|
|
@@ -3310,7 +166,7 @@ const OverflowMenu = ({
|
|
|
3310
166
|
const typeahead = useTypeahead(context, {
|
|
3311
167
|
listRef: labelsRef,
|
|
3312
168
|
activeIndex,
|
|
3313
|
-
onMatch: (
|
|
169
|
+
onMatch: (index) => isOpen && setActiveIndex(index)
|
|
3314
170
|
});
|
|
3315
171
|
const role = useRole(context, { role: "menu" });
|
|
3316
172
|
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
|
|
@@ -3323,7 +179,7 @@ const OverflowMenu = ({
|
|
|
3323
179
|
useOnClickOutside([refs.floating, refs.reference], () => setIsOpen(false));
|
|
3324
180
|
useOnEscape(refs.floating, closeMenuAndReturnFocus);
|
|
3325
181
|
useOnEscape(refs.reference, closeMenuAndReturnFocus);
|
|
3326
|
-
const selectContext =
|
|
182
|
+
const selectContext = React.useMemo(
|
|
3327
183
|
() => ({
|
|
3328
184
|
activeIndex,
|
|
3329
185
|
getItemProps,
|
|
@@ -3379,14 +235,14 @@ const OverflowMenuItem = ({
|
|
|
3379
235
|
...rest
|
|
3380
236
|
}) => {
|
|
3381
237
|
const { activeIndex, getItemProps, closeMenuAndReturnFocus } = useContext(SelectContext);
|
|
3382
|
-
const { ref: listItemRef, index
|
|
238
|
+
const { ref: listItemRef, index } = useListItem({
|
|
3383
239
|
label: !disabled ? getNodeText(children) : null
|
|
3384
240
|
});
|
|
3385
|
-
const isHighlighted = activeIndex ===
|
|
241
|
+
const isHighlighted = activeIndex === index;
|
|
3386
242
|
const isLink = href !== void 0;
|
|
3387
|
-
const
|
|
243
|
+
const Element = as ?? (isLink ? "a" : "button");
|
|
3388
244
|
return /* @__PURE__ */ jsx(
|
|
3389
|
-
|
|
245
|
+
Element,
|
|
3390
246
|
{
|
|
3391
247
|
ref: listItemRef,
|
|
3392
248
|
className: classNames(
|
|
@@ -3398,7 +254,7 @@ const OverflowMenuItem = ({
|
|
|
3398
254
|
className
|
|
3399
255
|
),
|
|
3400
256
|
role: "menuitem",
|
|
3401
|
-
type:
|
|
257
|
+
type: Element === "button" ? "button" : void 0,
|
|
3402
258
|
"aria-disabled": disabled,
|
|
3403
259
|
"aria-selected": isHighlighted,
|
|
3404
260
|
...getItemProps({
|
|
@@ -3449,8 +305,8 @@ const PaginationInput = ({
|
|
|
3449
305
|
label = "Gå til side",
|
|
3450
306
|
onPageChange
|
|
3451
307
|
}) => {
|
|
3452
|
-
const [input, setInput] =
|
|
3453
|
-
|
|
308
|
+
const [input, setInput] = React.useState(String(currentPage));
|
|
309
|
+
React.useEffect(() => {
|
|
3454
310
|
setInput(String(currentPage));
|
|
3455
311
|
}, [currentPage]);
|
|
3456
312
|
const handleSubmit = (e) => {
|
|
@@ -3616,7 +472,7 @@ const Pagination = ({
|
|
|
3616
472
|
}
|
|
3617
473
|
),
|
|
3618
474
|
listedEntries.map(
|
|
3619
|
-
(entry,
|
|
475
|
+
(entry, index) => entry === "…" ? /* @__PURE__ */ jsx(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx(
|
|
3620
476
|
PaginationPage,
|
|
3621
477
|
{
|
|
3622
478
|
selected: entry === currentPage,
|
|
@@ -3664,7 +520,7 @@ const SideNavigation = ({
|
|
|
3664
520
|
size = "medium",
|
|
3665
521
|
...rest
|
|
3666
522
|
}) => {
|
|
3667
|
-
if (!children || !
|
|
523
|
+
if (!children || !React.Children.count(children)) {
|
|
3668
524
|
return null;
|
|
3669
525
|
}
|
|
3670
526
|
return /* @__PURE__ */ jsx(
|
|
@@ -3710,12 +566,12 @@ function isActiveRecursively(child) {
|
|
|
3710
566
|
if (!child.props.children) {
|
|
3711
567
|
return false;
|
|
3712
568
|
}
|
|
3713
|
-
return
|
|
569
|
+
return React.Children.toArray(child.props.children).some(
|
|
3714
570
|
(child2) => isActiveRecursively(child2)
|
|
3715
571
|
);
|
|
3716
572
|
}
|
|
3717
573
|
const defaultElementBaseItem = "a";
|
|
3718
|
-
const BaseSideNavigationItem =
|
|
574
|
+
const BaseSideNavigationItem = React.forwardRef(
|
|
3719
575
|
({
|
|
3720
576
|
className,
|
|
3721
577
|
active = false,
|
|
@@ -3725,12 +581,12 @@ const BaseSideNavigationItem = React__default.forwardRef(
|
|
|
3725
581
|
as,
|
|
3726
582
|
...rest
|
|
3727
583
|
}, ref) => {
|
|
3728
|
-
const
|
|
584
|
+
const Element = as || defaultElementBaseItem;
|
|
3729
585
|
const { isCollapsed } = useSideNavigationContext();
|
|
3730
586
|
const [showLabel] = useShowDelayedLabel(isCollapsed);
|
|
3731
587
|
return /* @__PURE__ */ jsxs("li", { className: classNames("eds-side-navigation__item", className), children: [
|
|
3732
588
|
/* @__PURE__ */ jsxs(
|
|
3733
|
-
|
|
589
|
+
Element,
|
|
3734
590
|
{
|
|
3735
591
|
className: classNames("eds-side-navigation__click-target", {
|
|
3736
592
|
"eds-side-navigation__click-target--active": active
|
|
@@ -3749,7 +605,7 @@ const BaseSideNavigationItem = React__default.forwardRef(
|
|
|
3749
605
|
] });
|
|
3750
606
|
}
|
|
3751
607
|
);
|
|
3752
|
-
const DisabledSideNavigationItem =
|
|
608
|
+
const DisabledSideNavigationItem = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(
|
|
3753
609
|
BaseSideNavigationItem,
|
|
3754
610
|
{
|
|
3755
611
|
as: "button",
|
|
@@ -3762,7 +618,7 @@ const DisabledSideNavigationItem = React__default.forwardRef(({ children, ...res
|
|
|
3762
618
|
}
|
|
3763
619
|
));
|
|
3764
620
|
const defaultElementItem = "a";
|
|
3765
|
-
const SideNavigationItem =
|
|
621
|
+
const SideNavigationItem = React.forwardRef(
|
|
3766
622
|
({
|
|
3767
623
|
active,
|
|
3768
624
|
disabled,
|
|
@@ -3771,8 +627,8 @@ const SideNavigationItem = React__default.forwardRef(
|
|
|
3771
627
|
as,
|
|
3772
628
|
...rest
|
|
3773
629
|
}, ref) => {
|
|
3774
|
-
const
|
|
3775
|
-
const childrenArray =
|
|
630
|
+
const Element = as || defaultElementItem;
|
|
631
|
+
const childrenArray = React.Children.toArray(children);
|
|
3776
632
|
const subMenu = childrenArray.find(
|
|
3777
633
|
(child) => child && child.type && child.type.__IS_ENTUR_MENU__
|
|
3778
634
|
);
|
|
@@ -3784,7 +640,7 @@ const SideNavigationItem = React__default.forwardRef(
|
|
|
3784
640
|
return /* @__PURE__ */ jsx(
|
|
3785
641
|
BaseSideNavigationItem,
|
|
3786
642
|
{
|
|
3787
|
-
as:
|
|
643
|
+
as: Element,
|
|
3788
644
|
active,
|
|
3789
645
|
ref,
|
|
3790
646
|
...rest,
|
|
@@ -3799,7 +655,7 @@ const SideNavigationItem = React__default.forwardRef(
|
|
|
3799
655
|
active,
|
|
3800
656
|
subMenu: isExpanded && subMenu,
|
|
3801
657
|
"aria-expanded": isExpanded,
|
|
3802
|
-
as:
|
|
658
|
+
as: Element,
|
|
3803
659
|
ref,
|
|
3804
660
|
...rest,
|
|
3805
661
|
children: label
|
|
@@ -3886,12 +742,12 @@ const Stepper = ({
|
|
|
3886
742
|
children: steps.map((step, i) => {
|
|
3887
743
|
const isCurrent = i === activeIndex;
|
|
3888
744
|
const isInteractive = interactive && activeIndex > i;
|
|
3889
|
-
const
|
|
745
|
+
const Element = isInteractive ? "button" : "div";
|
|
3890
746
|
const isCompleted = activeIndex > i;
|
|
3891
747
|
const currentStepSummary = `${ariaLabelStep} ${i + 1} ${ariaLabelOf} ${steps.length}, ${step} ${isCompleted ? `, ${ariaLabelCompleted}` : ""}`;
|
|
3892
748
|
const props = isInteractive ? { onClick: () => onStepClick?.(i) } : {};
|
|
3893
749
|
return /* @__PURE__ */ jsx("li", { className: "eds-stepper__step__wrapper", children: /* @__PURE__ */ jsxs(
|
|
3894
|
-
|
|
750
|
+
Element,
|
|
3895
751
|
{
|
|
3896
752
|
className: classNames(
|
|
3897
753
|
"eds-stepper__step",
|
|
@@ -3900,7 +756,7 @@ const Stepper = ({
|
|
|
3900
756
|
{ "eds-stepper__step--interactive": isInteractive }
|
|
3901
757
|
),
|
|
3902
758
|
"aria-current": isCurrent ? "step" : void 0,
|
|
3903
|
-
type:
|
|
759
|
+
type: Element === "button" ? "button" : void 0,
|
|
3904
760
|
...props,
|
|
3905
761
|
children: [
|
|
3906
762
|
/* @__PURE__ */ jsx("div", { className: "eds-stepper__step__line", "aria-hidden": true }),
|
|
@@ -3924,9 +780,9 @@ const TopNavigationItem = ({
|
|
|
3924
780
|
as,
|
|
3925
781
|
...rest
|
|
3926
782
|
}) => {
|
|
3927
|
-
const
|
|
783
|
+
const Element = as || defaultElement;
|
|
3928
784
|
return /* @__PURE__ */ jsx(
|
|
3929
|
-
|
|
785
|
+
Element,
|
|
3930
786
|
{
|
|
3931
787
|
className: classNames([
|
|
3932
788
|
"eds-top-navigation-item",
|