@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.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 * as React from "react";
4
- import React__default, { useState, useEffect, useLayoutEffect, useRef, cloneElement, useContext } from "react";
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 * as ReactDOM from "react-dom";
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: React__default.Children.map(children, (child, index2) => {
18
- return React__default.cloneElement(child, {
19
- isCurrent: index2 + 1 === React__default.Children.count(children)
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
- function getDefaultExportFromCjs(x) {
24
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
25
- }
26
- var classnames = { exports: {} };
27
- /*!
28
- Copyright (c) 2018 Jed Watson.
29
- Licensed under the MIT License (MIT), see
30
- http://jedwatson.github.io/classnames
31
- */
32
- var hasRequiredClassnames;
33
- function requireClassnames() {
34
- if (hasRequiredClassnames) return classnames.exports;
35
- hasRequiredClassnames = 1;
36
- (function(module) {
37
- (function() {
38
- var hasOwn = {}.hasOwnProperty;
39
- function classNames2() {
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
- }, [enabled, open, elements.floating, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
2727
- index(() => {
2728
- var _nodes$find;
2729
- if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) {
2730
- return;
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
- tree.events.on("virtualfocus", handleVirtualFocus);
2754
- return () => {
2755
- tree.events.off("virtualfocus", handleVirtualFocus);
2756
- };
2757
- }, [enabled, tree, virtual, parentId, virtualItemRef]);
2758
- index(() => {
2759
- previousOnNavigateRef.current = onNavigate;
2760
- previousMountedRef.current = !!elements.floating;
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
- index(() => {
2763
- if (!open) {
2764
- keyRef.current = null;
2765
- }
2766
- }, [open]);
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
- // Safari
2795
- ...focusItemOnHover && {
2796
- onMouseMove(_ref3) {
2797
- let {
2798
- currentTarget
2799
- } = _ref3;
2800
- syncCurrentTarget(currentTarget);
2801
- },
2802
- onPointerLeave(_ref4) {
2803
- let {
2804
- pointerType
2805
- } = _ref4;
2806
- if (!isPointerModalityRef.current || pointerType === "touch") {
2807
- return;
2808
- }
2809
- indexRef.current = -1;
2810
- focusItem(listRef, indexRef);
2811
- onNavigate(null);
2812
- if (!virtual) {
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
- const reference = React.useMemo(() => ({
3253
- onKeyDown
3254
- }), [onKeyDown]);
3255
- const floating = React.useMemo(() => {
3256
- return {
3257
- onKeyDown,
3258
- onKeyUp(event) {
3259
- if (event.key === " ") {
3260
- setTypingChange(false);
3261
- }
3262
- }
3263
- };
3264
- }, [onKeyDown, setTypingChange]);
3265
- return React.useMemo(() => enabled ? {
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: (index2) => isOpen && setActiveIndex(index2)
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 = React__default.useMemo(
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: index2 } = useListItem({
238
+ const { ref: listItemRef, index } = useListItem({
3383
239
  label: !disabled ? getNodeText(children) : null
3384
240
  });
3385
- const isHighlighted = activeIndex === index2;
241
+ const isHighlighted = activeIndex === index;
3386
242
  const isLink = href !== void 0;
3387
- const Element2 = as ?? (isLink ? "a" : "button");
243
+ const Element = as ?? (isLink ? "a" : "button");
3388
244
  return /* @__PURE__ */ jsx(
3389
- Element2,
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: Element2 === "button" ? "button" : void 0,
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] = React__default.useState(String(currentPage));
3453
- React__default.useEffect(() => {
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, index2) => entry === "…" ? /* @__PURE__ */ jsx(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx(
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 || !React__default.Children.count(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 React__default.Children.toArray(child.props.children).some(
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 = React__default.forwardRef(
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 Element2 = as || defaultElementBaseItem;
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
- Element2,
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 = React__default.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(
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 = React__default.forwardRef(
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 Element2 = as || defaultElementItem;
3775
- const childrenArray = React__default.Children.toArray(children);
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: Element2,
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: Element2,
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 Element2 = isInteractive ? "button" : "div";
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
- Element2,
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: Element2 === "button" ? "button" : void 0,
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 Element2 = as || defaultElement;
783
+ const Element = as || defaultElement;
3928
784
  return /* @__PURE__ */ jsx(
3929
- Element2,
785
+ Element,
3930
786
  {
3931
787
  className: classNames([
3932
788
  "eds-top-navigation-item",