@entur/menu 5.2.1-beta.0 → 5.2.1-beta.10

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,3462 +1,347 @@
1
- import { useOnClickOutside, useOnEscape, getNodeText, useRandomId, warnAboutMissingStyles } from "@entur/utils";
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";
5
- import { RightArrowIcon, MenuIcon, LeftArrowIcon, VerticalDotsIcon, DownArrowIcon } from "@entur/icons";
6
- import * as ReactDOM from "react-dom";
7
- import { IconButton } from "@entur/button";
8
- import { standardisePlacement } from "@entur/tooltip";
9
- import { space } from "@entur/tokens";
10
- import { VisuallyHidden } from "@entur/a11y";
11
- import { Label } from "@entur/typography";
12
- import { ExpandArrow, BaseExpand } from "@entur/expand";
13
- const BreadcrumbNavigation = ({
14
- "aria-label": ariaLabel = "Brødsmulesti",
15
- children
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)
1
+ import { useOnClickOutside, useOnEscape, getNodeText, useRandomId, warnAboutMissingStyles } from '@entur/utils';
2
+ import React, { useState, useEffect, useRef, cloneElement, useContext } from 'react';
3
+ import classNames from 'classnames';
4
+ import { RightArrowIcon, MenuIcon, LeftArrowIcon, VerticalDotsIcon, DownArrowIcon } from '@entur/icons';
5
+ import { useFloating, offset, flip, shift, autoUpdate, useListNavigation, useTypeahead, useRole, useInteractions, FloatingList, useListItem } from '@floating-ui/react';
6
+ import { IconButton } from '@entur/button';
7
+ import { standardisePlacement } from '@entur/tooltip';
8
+ import { space } from '@entur/tokens';
9
+ import { VisuallyHidden } from '@entur/a11y';
10
+ import { Label } from '@entur/typography';
11
+ import { ExpandArrow, BaseExpand } from '@entur/expand';
12
+
13
+ var BreadcrumbNavigation = function BreadcrumbNavigation(_ref) {
14
+ var _ref$ariaLabel = _ref['aria-label'],
15
+ ariaLabel = _ref$ariaLabel === void 0 ? 'Brødsmulesti' : _ref$ariaLabel,
16
+ children = _ref.children;
17
+ return React.createElement("nav", {
18
+ "aria-label": ariaLabel
19
+ }, React.createElement("ol", {
20
+ className: "eds-breadcrumbs"
21
+ }, React.Children.map(children, function (child, index) {
22
+ // @ts-expect-error should check if children are correct but for now it is only mentioned in the documentation
23
+ return React.cloneElement(child, {
24
+ isCurrent: index + 1 === React.Children.count(children)
20
25
  });
21
- }) }) });
26
+ })));
22
27
  };
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;
28
+
29
+ function _extends() {
30
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
31
+ for (var e = 1; e < arguments.length; e++) {
32
+ var t = arguments[e];
33
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
34
+ }
35
+ return n;
36
+ }, _extends.apply(null, arguments);
37
+ }
38
+ function _objectWithoutPropertiesLoose(r, e) {
39
+ if (null == r) return {};
40
+ var t = {};
41
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
42
+ if (-1 !== e.indexOf(n)) continue;
43
+ t[n] = r[n];
44
+ }
45
+ return t;
46
+ }
47
+
48
+ var _excluded$8 = ["className", "isCurrent", "as"];
49
+ var defaultElement$1 = 'a';
50
+ var BreadcrumbItem = function BreadcrumbItem(_ref) {
51
+ var className = _ref.className,
52
+ isCurrent = _ref.isCurrent,
53
+ as = _ref.as,
54
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
55
+ var Element = as || defaultElement$1;
56
+ return React.createElement(React.Fragment, null, React.createElement("li", {
57
+ className: classNames('eds-breadcrumb__item', className)
58
+ }, React.createElement(Element, _extends({
59
+ "aria-current": isCurrent ? 'page' : undefined,
60
+ className: classNames('eds-breadcrumb__link', {
61
+ 'eds-breadcrumb__link--current': isCurrent
62
+ })
63
+ }, rest))), !isCurrent && React.createElement(RightArrowIcon, {
64
+ className: "eds-breadcrumb__separator",
65
+ inline: true,
66
+ role: "presentation"
67
+ }));
2241
68
  };
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;
69
+
70
+ function useControllableProp(_ref) {
71
+ var prop = _ref.prop,
72
+ _ref$updater = _ref.updater,
73
+ updater = _ref$updater === void 0 ? function () {
74
+ return undefined;
75
+ } : _ref$updater,
76
+ defaultValue = _ref.defaultValue;
77
+ var _useState = useState(defaultValue),
78
+ internalState = _useState[0],
79
+ setInternalState = _useState[1];
80
+ useEffect(function () {
81
+ if (prop !== undefined) {
82
+ setInternalState(prop);
2435
83
  }
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 = () => {
84
+ }, [prop]);
85
+ return prop === undefined ? [internalState, setInternalState] : [prop, updater];
86
+ }
87
+
88
+ var _excluded$7 = ["className", "children", "size", "collapsed", "onCollapseToggle", "collapsibleButtonPosition", "openSideMenuAriaLabel", "closeSideMenuAriaLabel"];
89
+ var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
90
+ var className = _ref.className,
91
+ children = _ref.children,
92
+ size = _ref.size,
93
+ collapsible = _ref.collapsed,
94
+ onCollapseToggle = _ref.onCollapseToggle,
95
+ _ref$collapsibleButto = _ref.collapsibleButtonPosition,
96
+ collapsibleButtonPosition = _ref$collapsibleButto === void 0 ? '50%' : _ref$collapsibleButto,
97
+ _ref$openSideMenuAria = _ref.openSideMenuAriaLabel,
98
+ openSideMenuAriaLabel = _ref$openSideMenuAria === void 0 ? 'Åpne sidemeny' : _ref$openSideMenuAria,
99
+ _ref$closeSideMenuAri = _ref.closeSideMenuAriaLabel,
100
+ closeSideMenuAriaLabel = _ref$closeSideMenuAri === void 0 ? 'Lukk sidemeny' : _ref$closeSideMenuAri,
101
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
102
+ var _useControllableProp = useControllableProp({
103
+ prop: collapsible,
104
+ defaultValue: false,
105
+ updater: onCollapseToggle
106
+ }),
107
+ collapsedMenu = _useControllableProp[0],
108
+ setCollapsedMenu = _useControllableProp[1];
109
+ return React.createElement(SideNavigationContext.Provider, {
110
+ value: {
111
+ isCollapsed: collapsedMenu
112
+ }
113
+ }, React.createElement("ul", _extends({
114
+ className: classNames('eds-side-navigation', {
115
+ 'eds-side-navigation--small': size === 'small'
116
+ }, {
117
+ 'eds-side-navigation--collapsed': collapsedMenu
118
+ }, className)
119
+ }, rest), children, React.createElement("button", {
120
+ className: "eds-side-navigation__collapse-button",
121
+ onClick: function onClick() {
122
+ return setCollapsedMenu(!collapsedMenu);
2571
123
  },
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;
2724
- }
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;
2751
- }
2752
- }
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;
2761
- });
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
- });
2793
- },
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;
3004
- }
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);
3045
- }
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 = {};
124
+ style: {
125
+ top: "" + collapsibleButtonPosition
126
+ }
127
+ }, collapsedMenu ? React.createElement(MenuIcon, {
128
+ "aria-label": openSideMenuAriaLabel
129
+ }) : React.createElement(LeftArrowIcon, {
130
+ "aria-label": closeSideMenuAriaLabel
131
+ }))));
132
+ };
133
+ var SideNavigationContext = /*#__PURE__*/React.createContext({
134
+ isCollapsed: false
135
+ });
136
+ var useSideNavigationContext = function useSideNavigationContext() {
137
+ var context = React.useContext(SideNavigationContext);
138
+ if (!context) {
139
+ console.error('Error reading SideNavigationContext. Please contact maintainer of @entur/menu');
3063
140
  }
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);
3250
- }
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(
3271
- {}
3272
- );
3273
- const OverflowMenu = ({
3274
- children,
3275
- className,
3276
- button,
3277
- buttonIcon,
3278
- placement = "bottom-start",
3279
- "aria-label": ariaLabel = "åpne valgmeny",
3280
- ...rest
3281
- }) => {
3282
- const [isOpen, setIsOpen] = useState(false);
3283
- const [activeIndex, setActiveIndex] = useState(null);
3284
- const listRef = useRef([]);
3285
- const labelsRef = useRef([]);
3286
- const { refs, floatingStyles, context, elements, update } = useFloating({
3287
- placement: standardisePlacement(
141
+ return context;
142
+ };
143
+
144
+ var _excluded$6 = ["children", "className", "button", "buttonIcon", "placement", "aria-label"],
145
+ _excluded2$1 = ["children", "className", "onSelect", "href", "disabled", "as"];
146
+ var SelectContext = /*#__PURE__*/React.createContext({});
147
+ var OverflowMenu = function OverflowMenu(_ref) {
148
+ var children = _ref.children,
149
+ className = _ref.className,
150
+ button = _ref.button,
151
+ buttonIcon = _ref.buttonIcon,
152
+ _ref$placement = _ref.placement,
153
+ placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
154
+ _ref$ariaLabel = _ref['aria-label'],
155
+ ariaLabel = _ref$ariaLabel === void 0 ? 'åpne valgmeny' : _ref$ariaLabel,
156
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
157
+ var _useState = useState(false),
158
+ isOpen = _useState[0],
159
+ setIsOpen = _useState[1];
160
+ var _useState2 = useState(null),
161
+ activeIndex = _useState2[0],
162
+ setActiveIndex = _useState2[1];
163
+ var listRef = useRef([]);
164
+ var labelsRef = useRef([]);
165
+ var _useFloating = useFloating({
166
+ placement: standardisePlacement(
3288
167
  // check for left is added for backwards compatibility
3289
- rest.position === "left" ? "bottom-end" : placement
3290
- ),
3291
- open: isOpen,
3292
- onOpenChange: setIsOpen,
3293
- middleware: [
3294
- offset(space.extraSmall2),
3295
- flip(),
3296
- shift({ padding: space.extraSmall })
3297
- ]
3298
- });
3299
- useEffect(() => {
168
+ rest.position === 'left' ? 'bottom-end' : placement),
169
+ open: isOpen,
170
+ onOpenChange: setIsOpen,
171
+ middleware: [offset(space.extraSmall2), flip(), shift({
172
+ padding: space.extraSmall
173
+ })]
174
+ }),
175
+ refs = _useFloating.refs,
176
+ floatingStyles = _useFloating.floatingStyles,
177
+ context = _useFloating.context,
178
+ elements = _useFloating.elements,
179
+ update = _useFloating.update;
180
+ // Since we use CSS instead of conditional rendering when hiding dropdownlist
181
+ // we can't use the whileElementsMounted option and need to handle
182
+ // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
183
+ useEffect(function () {
3300
184
  if (isOpen && elements.reference && elements.floating) {
3301
- const cleanup = autoUpdate(elements.reference, elements.floating, update);
185
+ var cleanup = autoUpdate(elements.reference, elements.floating, update);
3302
186
  return cleanup;
3303
187
  }
3304
188
  }, [isOpen, elements, update]);
3305
- const listNav = useListNavigation(context, {
3306
- listRef,
3307
- activeIndex,
189
+ var listNav = useListNavigation(context, {
190
+ listRef: listRef,
191
+ activeIndex: activeIndex,
3308
192
  onNavigate: setActiveIndex
3309
193
  });
3310
- const typeahead = useTypeahead(context, {
194
+ var typeahead = useTypeahead(context, {
3311
195
  listRef: labelsRef,
3312
- activeIndex,
3313
- onMatch: (index2) => isOpen && setActiveIndex(index2)
196
+ activeIndex: activeIndex,
197
+ onMatch: function onMatch(index) {
198
+ return isOpen && setActiveIndex(index);
199
+ }
3314
200
  });
3315
- const role = useRole(context, { role: "menu" });
3316
- const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
3317
- [listNav, typeahead, role]
3318
- );
3319
- const closeMenuAndReturnFocus = () => {
201
+ var role = useRole(context, {
202
+ role: 'menu'
203
+ });
204
+ var _useInteractions = useInteractions([listNav, typeahead, role]),
205
+ getReferenceProps = _useInteractions.getReferenceProps,
206
+ getFloatingProps = _useInteractions.getFloatingProps,
207
+ getItemProps = _useInteractions.getItemProps;
208
+ var closeMenuAndReturnFocus = function closeMenuAndReturnFocus() {
209
+ var _refs$reference$curre;
3320
210
  setIsOpen(false);
3321
- refs.reference.current?.focus?.();
211
+ // @ts-expect-error the reference element is actually focusable
212
+ (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus == null || _refs$reference$curre.focus();
3322
213
  };
3323
- useOnClickOutside([refs.floating, refs.reference], () => setIsOpen(false));
214
+ useOnClickOutside([refs.floating, refs.reference], function () {
215
+ return setIsOpen(false);
216
+ });
3324
217
  useOnEscape(refs.floating, closeMenuAndReturnFocus);
3325
218
  useOnEscape(refs.reference, closeMenuAndReturnFocus);
3326
- const selectContext = React__default.useMemo(
3327
- () => ({
3328
- activeIndex,
3329
- getItemProps,
3330
- closeMenuAndReturnFocus
3331
- }),
3332
- [activeIndex, getItemProps, closeMenuAndReturnFocus]
3333
- );
3334
- const _buttonIcon = buttonIcon ?? /* @__PURE__ */ jsx(VerticalDotsIcon, {});
3335
- return /* @__PURE__ */ jsxs(Fragment, { children: [
3336
- !button ? /* @__PURE__ */ jsx(
3337
- IconButton,
3338
- {
3339
- ref: refs.setReference,
3340
- ...getReferenceProps({
3341
- onClick: () => setIsOpen(!isOpen),
3342
- className,
3343
- "aria-label": ariaLabel,
3344
- type: "button"
3345
- }),
3346
- ...rest,
3347
- children: _buttonIcon
3348
- }
3349
- ) : cloneElement(button, {
3350
- ref: refs.setReference,
3351
- ...getReferenceProps({
3352
- onClick: () => setIsOpen(!isOpen),
3353
- className,
3354
- "aria-label": ariaLabel,
3355
- type: "button"
3356
- }),
3357
- ...rest
3358
- }),
3359
- /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContext, children: /* @__PURE__ */ jsx(
3360
- "div",
3361
- {
3362
- ref: refs.setFloating,
3363
- style: { ...floatingStyles, display: isOpen ? "initial" : "none" },
3364
- ...getFloatingProps({
3365
- className: "eds-overflow-menu__menu-list"
3366
- }),
3367
- children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children })
3368
- }
3369
- ) })
3370
- ] });
219
+ var selectContext = React.useMemo(function () {
220
+ return {
221
+ activeIndex: activeIndex,
222
+ getItemProps: getItemProps,
223
+ closeMenuAndReturnFocus: closeMenuAndReturnFocus
224
+ };
225
+ }, [activeIndex, getItemProps, closeMenuAndReturnFocus]);
226
+ var _buttonIcon = buttonIcon != null ? buttonIcon : React.createElement(VerticalDotsIcon, null);
227
+ return React.createElement(React.Fragment, null, !button ? React.createElement(IconButton, _extends({
228
+ ref: refs.setReference
229
+ }, getReferenceProps({
230
+ onClick: function onClick() {
231
+ return setIsOpen(!isOpen);
232
+ },
233
+ className: className,
234
+ 'aria-label': ariaLabel,
235
+ type: 'button'
236
+ }), rest), _buttonIcon) : cloneElement(button, _extends({
237
+ ref: refs.setReference
238
+ }, getReferenceProps({
239
+ onClick: function onClick() {
240
+ return setIsOpen(!isOpen);
241
+ },
242
+ className: className,
243
+ 'aria-label': ariaLabel,
244
+ type: 'button'
245
+ }), rest)), React.createElement(SelectContext.Provider, {
246
+ value: selectContext
247
+ }, React.createElement("div", _extends({
248
+ ref: refs.setFloating,
249
+ style: _extends({}, floatingStyles, {
250
+ display: isOpen ? 'initial' : 'none'
251
+ })
252
+ }, getFloatingProps({
253
+ className: 'eds-overflow-menu__menu-list'
254
+ })), React.createElement(FloatingList, {
255
+ elementsRef: listRef,
256
+ labelsRef: labelsRef
257
+ }, children))));
3371
258
  };
3372
- const OverflowMenuItem = ({
3373
- children,
3374
- className,
3375
- onSelect = () => void 0,
3376
- href,
3377
- disabled,
3378
- as,
3379
- ...rest
3380
- }) => {
3381
- const { activeIndex, getItemProps, closeMenuAndReturnFocus } = useContext(SelectContext);
3382
- const { ref: listItemRef, index: index2 } = useListItem({
3383
- label: !disabled ? getNodeText(children) : null
3384
- });
3385
- const isHighlighted = activeIndex === index2;
3386
- const isLink = href !== void 0;
3387
- const Element2 = as ?? (isLink ? "a" : "button");
3388
- return /* @__PURE__ */ jsx(
3389
- Element2,
3390
- {
3391
- ref: listItemRef,
3392
- className: classNames(
3393
- "eds-overflow-menu__item",
3394
- {
3395
- "eds-overflow-menu__item--disabled": disabled,
3396
- "eds-overflow-menu__item--highlighted": isHighlighted
3397
- },
3398
- className
3399
- ),
3400
- role: "menuitem",
3401
- type: Element2 === "button" ? "button" : void 0,
3402
- "aria-disabled": disabled,
3403
- "aria-selected": isHighlighted,
3404
- ...getItemProps({
3405
- onClick: isLink || disabled ? void 0 : () => {
3406
- onSelect();
3407
- closeMenuAndReturnFocus();
3408
- },
3409
- href: disabled ? void 0 : href,
3410
- tabIndex: isHighlighted ? 0 : -1
3411
- }),
3412
- ...rest,
3413
- children
3414
- }
3415
- );
259
+ var OverflowMenuItem = function OverflowMenuItem(_ref2) {
260
+ var children = _ref2.children,
261
+ className = _ref2.className,
262
+ _ref2$onSelect = _ref2.onSelect,
263
+ onSelect = _ref2$onSelect === void 0 ? function () {
264
+ return undefined;
265
+ } : _ref2$onSelect,
266
+ href = _ref2.href,
267
+ disabled = _ref2.disabled,
268
+ as = _ref2.as,
269
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
270
+ var _useContext = useContext(SelectContext),
271
+ activeIndex = _useContext.activeIndex,
272
+ getItemProps = _useContext.getItemProps,
273
+ closeMenuAndReturnFocus = _useContext.closeMenuAndReturnFocus;
274
+ var _useListItem = useListItem({
275
+ label: !disabled ? getNodeText(children) : null
276
+ }),
277
+ listItemRef = _useListItem.ref,
278
+ index = _useListItem.index;
279
+ var isHighlighted = activeIndex === index;
280
+ var isLink = href !== undefined;
281
+ var Element = as != null ? as : isLink ? 'a' : 'button';
282
+ return React.createElement(Element, _extends({
283
+ ref: listItemRef,
284
+ className: classNames('eds-overflow-menu__item', {
285
+ 'eds-overflow-menu__item--disabled': disabled,
286
+ 'eds-overflow-menu__item--highlighted': isHighlighted
287
+ }, className),
288
+ role: "menuitem",
289
+ type: Element === 'button' ? 'button' : undefined,
290
+ "aria-disabled": disabled,
291
+ "aria-selected": isHighlighted
292
+ }, getItemProps({
293
+ onClick: isLink || disabled ? undefined : function () {
294
+ onSelect();
295
+ closeMenuAndReturnFocus();
296
+ },
297
+ href: disabled ? undefined : href,
298
+ tabIndex: isHighlighted ? 0 : -1
299
+ }), rest), children);
3416
300
  };
3417
- const OverflowMenuLink = (props) => {
3418
- return /* @__PURE__ */ jsx(OverflowMenuItem, { ...props });
301
+ var OverflowMenuLink = function OverflowMenuLink(props) {
302
+ return React.createElement(OverflowMenuItem, _extends({}, props));
3419
303
  };
3420
- const PaginationPage = ({
3421
- children,
3422
- className,
3423
- selected,
3424
- disabled,
3425
- onClick,
3426
- "aria-label": ariaLabel,
3427
- "aria-describedby": ariaDescribedby
3428
- }) => /* @__PURE__ */ jsx(
3429
- "button",
3430
- {
3431
- className: classNames(
3432
- "eds-pagination__controls__page",
3433
- { "eds-pagination__controls__page--selected": selected },
3434
- { "eds-pagination__controls__page--disabled": disabled },
3435
- className
3436
- ),
304
+
305
+ var PaginationPage = function PaginationPage(_ref) {
306
+ var children = _ref.children,
307
+ className = _ref.className,
308
+ selected = _ref.selected,
309
+ disabled = _ref.disabled,
310
+ onClick = _ref.onClick,
311
+ ariaLabel = _ref['aria-label'],
312
+ ariaDescribedby = _ref['aria-describedby'];
313
+ return React.createElement("button", {
314
+ className: classNames('eds-pagination__controls__page', {
315
+ 'eds-pagination__controls__page--selected': selected
316
+ }, {
317
+ 'eds-pagination__controls__page--disabled': disabled
318
+ }, className),
3437
319
  disabled: selected || disabled,
3438
320
  type: "button",
3439
- onClick,
321
+ onClick: onClick,
3440
322
  "aria-label": ariaLabel,
3441
323
  "aria-describedby": ariaDescribedby,
3442
- "aria-current": selected ? "page" : false,
3443
- children
3444
- }
3445
- );
3446
- const PaginationInput = ({
3447
- currentPage,
3448
- pageCount,
3449
- label = "Gå til side",
3450
- onPageChange
3451
- }) => {
3452
- const [input, setInput] = React__default.useState(String(currentPage));
3453
- React__default.useEffect(() => {
324
+ "aria-current": selected ? 'page' : false
325
+ }, children);
326
+ };
327
+
328
+ var PaginationInput = function PaginationInput(_ref) {
329
+ var currentPage = _ref.currentPage,
330
+ pageCount = _ref.pageCount,
331
+ _ref$label = _ref.label,
332
+ label = _ref$label === void 0 ? 'Gå til side' : _ref$label,
333
+ onPageChange = _ref.onPageChange;
334
+ var _React$useState = React.useState(String(currentPage)),
335
+ input = _React$useState[0],
336
+ setInput = _React$useState[1];
337
+ // If the currentPage prop changes, we want to reset the input field
338
+ React.useEffect(function () {
3454
339
  setInput(String(currentPage));
3455
340
  }, [currentPage]);
3456
- const handleSubmit = (e) => {
341
+ var handleSubmit = function handleSubmit(e) {
3457
342
  e.preventDefault();
3458
343
  e.stopPropagation();
3459
- let pageNumber = Number(input);
344
+ var pageNumber = Number(input);
3460
345
  if (pageNumber === currentPage) {
3461
346
  return;
3462
347
  }
@@ -3474,232 +359,210 @@ const PaginationInput = ({
3474
359
  }
3475
360
  onPageChange(pageNumber);
3476
361
  };
3477
- const handleChange = (e) => {
362
+ var handleChange = function handleChange(e) {
3478
363
  setInput(e.target.value);
3479
364
  };
3480
- return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, noValidate: true, "aria-label": "form", children: /* @__PURE__ */ jsxs("label", { className: "eds-pagination__controls__input__wrapper", children: [
3481
- /* @__PURE__ */ jsx("span", { className: "eds-pagination__controls__input__label", children: label }),
3482
- /* @__PURE__ */ jsx(
3483
- "input",
3484
- {
3485
- type: "number",
3486
- max: pageCount,
3487
- className: "eds-pagination__controls__input__field",
3488
- value: input,
3489
- onChange: handleChange
3490
- }
3491
- )
3492
- ] }) });
365
+ return React.createElement("form", {
366
+ onSubmit: handleSubmit,
367
+ noValidate: true,
368
+ "aria-label": "form"
369
+ }, React.createElement("label", {
370
+ className: "eds-pagination__controls__input__wrapper"
371
+ }, React.createElement("span", {
372
+ className: "eds-pagination__controls__input__label"
373
+ }, label), React.createElement("input", {
374
+ type: "number",
375
+ max: pageCount,
376
+ className: "eds-pagination__controls__input__field",
377
+ value: input,
378
+ onChange: handleChange
379
+ })));
3493
380
  };
3494
- const Pagination = ({
3495
- className,
3496
- currentPage,
3497
- inputLabel,
3498
- onPageChange,
3499
- pageCount,
3500
- pageLabel = (pageNumber) => `Gå til side ${pageNumber}`,
3501
- previousPageLabel = "Gå til forrige side",
3502
- currentPageLabelForScreenreader = "Nåværende side:",
3503
- lastPageLabelForScreenreader = ", siste side",
3504
- showInput,
3505
- numberOfResults,
3506
- resultsPerPage,
3507
- resultsPerPageOptions = [10, 25, 50],
3508
- onResultsPerPageChange,
3509
- showNumberOfResultsLabel = "Vis",
3510
- nextPageLabel = "Gå til neste side",
3511
- showingResultsLabel = (minPage, maxPage, pageCount2) => `Viser resultat ${minPage}–${maxPage} av ${pageCount2}`,
3512
- changeNumberOfResultsLabelForScreenreader = `Viser ${resultsPerPage} resultater. Trykk for å endre antall. Åpner en flervalgsmeny.`,
3513
- hideNextButton = false,
3514
- hidePrevButton = false,
3515
- ...rest
3516
- }) => {
3517
- const [listedEntries, setListedEntries] = useState([]);
3518
- const paginationId = useRandomId("eds-pagination");
3519
- const isFirstPostSelected = currentPage === 1;
3520
- const isLastPostSelected = currentPage === pageCount;
3521
- const noEllipsis = pageCount <= 7;
3522
- const onlyLeadingEllipsis = !noEllipsis && currentPage < 5;
3523
- const onlyTrailingEllipsis = !noEllipsis && pageCount - currentPage <= 3;
3524
- useEffect(() => {
381
+
382
+ var _excluded$5 = ["className", "currentPage", "inputLabel", "onPageChange", "pageCount", "pageLabel", "previousPageLabel", "currentPageLabelForScreenreader", "lastPageLabelForScreenreader", "showInput", "numberOfResults", "resultsPerPage", "resultsPerPageOptions", "onResultsPerPageChange", "showNumberOfResultsLabel", "nextPageLabel", "showingResultsLabel", "changeNumberOfResultsLabelForScreenreader", "hideNextButton", "hidePrevButton"];
383
+ var Pagination = function Pagination(_ref) {
384
+ var className = _ref.className,
385
+ currentPage = _ref.currentPage,
386
+ inputLabel = _ref.inputLabel,
387
+ onPageChange = _ref.onPageChange,
388
+ pageCount = _ref.pageCount,
389
+ _ref$pageLabel = _ref.pageLabel,
390
+ pageLabel = _ref$pageLabel === void 0 ? function (pageNumber) {
391
+ return "G\xE5 til side " + pageNumber;
392
+ } : _ref$pageLabel,
393
+ _ref$previousPageLabe = _ref.previousPageLabel,
394
+ previousPageLabel = _ref$previousPageLabe === void 0 ? 'Gå til forrige side' : _ref$previousPageLabe,
395
+ _ref$currentPageLabel = _ref.currentPageLabelForScreenreader,
396
+ currentPageLabelForScreenreader = _ref$currentPageLabel === void 0 ? 'Nåværende side:' : _ref$currentPageLabel,
397
+ _ref$lastPageLabelFor = _ref.lastPageLabelForScreenreader,
398
+ lastPageLabelForScreenreader = _ref$lastPageLabelFor === void 0 ? ', siste side' : _ref$lastPageLabelFor,
399
+ showInput = _ref.showInput,
400
+ numberOfResults = _ref.numberOfResults,
401
+ resultsPerPage = _ref.resultsPerPage,
402
+ _ref$resultsPerPageOp = _ref.resultsPerPageOptions,
403
+ resultsPerPageOptions = _ref$resultsPerPageOp === void 0 ? [10, 25, 50] : _ref$resultsPerPageOp,
404
+ onResultsPerPageChange = _ref.onResultsPerPageChange,
405
+ _ref$showNumberOfResu = _ref.showNumberOfResultsLabel,
406
+ showNumberOfResultsLabel = _ref$showNumberOfResu === void 0 ? 'Vis' : _ref$showNumberOfResu,
407
+ _ref$nextPageLabel = _ref.nextPageLabel,
408
+ nextPageLabel = _ref$nextPageLabel === void 0 ? 'Gå til neste side' : _ref$nextPageLabel,
409
+ _ref$showingResultsLa = _ref.showingResultsLabel,
410
+ showingResultsLabel = _ref$showingResultsLa === void 0 ? function (minPage, maxPage, pageCount) {
411
+ return "Viser resultat " + minPage + "\u2013" + maxPage + " av " + pageCount;
412
+ } : _ref$showingResultsLa,
413
+ _ref$changeNumberOfRe = _ref.changeNumberOfResultsLabelForScreenreader,
414
+ changeNumberOfResultsLabelForScreenreader = _ref$changeNumberOfRe === void 0 ? "Viser " + resultsPerPage + " resultater. Trykk for \xE5 endre antall. \xC5pner en flervalgsmeny." : _ref$changeNumberOfRe,
415
+ _ref$hideNextButton = _ref.hideNextButton,
416
+ hideNextButton = _ref$hideNextButton === void 0 ? false : _ref$hideNextButton,
417
+ _ref$hidePrevButton = _ref.hidePrevButton,
418
+ hidePrevButton = _ref$hidePrevButton === void 0 ? false : _ref$hidePrevButton,
419
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
420
+ var _useState = useState([]),
421
+ listedEntries = _useState[0],
422
+ setListedEntries = _useState[1];
423
+ var paginationId = useRandomId('eds-pagination');
424
+ var isFirstPostSelected = currentPage === 1;
425
+ var isLastPostSelected = currentPage === pageCount;
426
+ var noEllipsis = pageCount <= 7;
427
+ var onlyLeadingEllipsis = !noEllipsis && currentPage < 5;
428
+ var onlyTrailingEllipsis = !noEllipsis && pageCount - currentPage <= 3;
429
+ useEffect(function () {
3525
430
  if (pageCount < 1) return;
3526
431
  if (noEllipsis) {
3527
- setListedEntries(
3528
- Array(pageCount).fill(null).map((_, i) => i + 1)
3529
- );
432
+ setListedEntries(Array(pageCount).fill(null).map(function (_, i) {
433
+ return i + 1;
434
+ }));
3530
435
  } else if (onlyLeadingEllipsis) {
3531
- setListedEntries([1, 2, 3, 4, 5, "", pageCount]);
436
+ setListedEntries([1, 2, 3, 4, 5, '', pageCount]);
3532
437
  } else if (onlyTrailingEllipsis) {
3533
- setListedEntries([
3534
- 1,
3535
- "…",
3536
- pageCount - 4,
3537
- pageCount - 3,
3538
- pageCount - 2,
3539
- pageCount - 1,
3540
- pageCount
3541
- ]);
438
+ setListedEntries([1, '…', pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1, pageCount]);
3542
439
  } else {
3543
- setListedEntries([
3544
- 1,
3545
- "…",
3546
- currentPage - 1,
3547
- currentPage,
3548
- currentPage + 1,
3549
- "…",
3550
- pageCount
3551
- ]);
440
+ // leading and trailing ellipsis
441
+ setListedEntries([1, '…', currentPage - 1, currentPage, currentPage + 1, '…', pageCount]);
3552
442
  }
3553
- }, [
3554
- noEllipsis,
3555
- onlyLeadingEllipsis,
3556
- onlyTrailingEllipsis,
3557
- currentPage,
3558
- pageCount
3559
- ]);
443
+ }, [noEllipsis, onlyLeadingEllipsis, onlyTrailingEllipsis, currentPage, pageCount]);
3560
444
  if (pageCount < 1) {
3561
445
  return null;
3562
446
  }
3563
- return /* @__PURE__ */ jsxs(
3564
- "nav",
3565
- {
3566
- className: classNames("eds-pagination", className),
3567
- "aria-label": "Paginering",
3568
- ...rest,
3569
- children: [
3570
- resultsPerPage && numberOfResults && /* @__PURE__ */ jsxs("div", { className: "eds-pagination__results", children: [
3571
- onResultsPerPageChange && /* @__PURE__ */ jsxs(Fragment, { children: [
3572
- /* @__PURE__ */ jsx(Label, { as: "p", "aria-hidden": "true", children: showNumberOfResultsLabel }),
3573
- /* @__PURE__ */ jsx(
3574
- OverflowMenu,
3575
- {
3576
- className: "eds-pagination__results__change-number-of-results",
3577
- buttonIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
3578
- resultsPerPage,
3579
- " ",
3580
- /* @__PURE__ */ jsx(
3581
- DownArrowIcon,
3582
- {
3583
- className: "eds-pagination__results__change-number-of-results__arrow",
3584
- "aria-hidden": "true"
3585
- }
3586
- )
3587
- ] }),
3588
- "aria-label": changeNumberOfResultsLabelForScreenreader,
3589
- placement: "bottom-end",
3590
- children: resultsPerPageOptions.map((option, key) => /* @__PURE__ */ jsx(
3591
- OverflowMenuItem,
3592
- {
3593
- onSelect: () => onResultsPerPageChange(option),
3594
- children: option
3595
- },
3596
- key
3597
- ))
3598
- }
3599
- )
3600
- ] }),
3601
- /* @__PURE__ */ jsx(Label, { as: "p", children: showingResultsLabel(
3602
- (currentPage - 1) * resultsPerPage + 1,
3603
- currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage,
3604
- numberOfResults
3605
- ) })
3606
- ] }),
3607
- /* @__PURE__ */ jsxs("div", { className: "eds-pagination__controls", children: [
3608
- !hidePrevButton && /* @__PURE__ */ jsx(
3609
- PaginationPage,
3610
- {
3611
- onClick: () => onPageChange(currentPage - 1),
3612
- "aria-label": previousPageLabel,
3613
- "aria-describedby": paginationId,
3614
- disabled: isFirstPostSelected,
3615
- children: /* @__PURE__ */ jsx(LeftArrowIcon, { "aria-hidden": "true" })
3616
- }
3617
- ),
3618
- listedEntries.map(
3619
- (entry, index2) => entry === "" ? /* @__PURE__ */ jsx(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx(
3620
- PaginationPage,
3621
- {
3622
- selected: entry === currentPage,
3623
- onClick: () => onPageChange(entry),
3624
- "aria-label": `${pageLabel(entry)}${entry === pageCount ? lastPageLabelForScreenreader : ""}`,
3625
- "aria-describedby": entry !== currentPage ? paginationId : void 0,
3626
- children: entry
3627
- },
3628
- entry
3629
- )
3630
- ),
3631
- !hideNextButton && /* @__PURE__ */ jsx(
3632
- PaginationPage,
3633
- {
3634
- onClick: () => onPageChange(currentPage + 1),
3635
- "aria-label": nextPageLabel,
3636
- "aria-describedby": paginationId,
3637
- disabled: isLastPostSelected,
3638
- children: /* @__PURE__ */ jsx(RightArrowIcon, { "aria-hidden": "true" })
3639
- }
3640
- ),
3641
- showInput && /* @__PURE__ */ jsx(
3642
- PaginationInput,
3643
- {
3644
- pageCount,
3645
- currentPage,
3646
- onPageChange,
3647
- label: inputLabel
3648
- }
3649
- )
3650
- ] }),
3651
- /* @__PURE__ */ jsxs(VisuallyHidden, { id: paginationId, children: [
3652
- currentPageLabelForScreenreader,
3653
- " ",
3654
- currentPage
3655
- ] })
3656
- ]
3657
- }
3658
- );
447
+ return React.createElement("nav", _extends({
448
+ className: classNames('eds-pagination', className),
449
+ "aria-label": "Paginering"
450
+ }, rest), resultsPerPage && numberOfResults && React.createElement("div", {
451
+ className: "eds-pagination__results"
452
+ }, onResultsPerPageChange && React.createElement(React.Fragment, null, React.createElement(Label, {
453
+ as: "p",
454
+ "aria-hidden": "true"
455
+ }, showNumberOfResultsLabel), React.createElement(OverflowMenu, {
456
+ className: "eds-pagination__results__change-number-of-results",
457
+ buttonIcon: React.createElement(React.Fragment, null, resultsPerPage, ' ', React.createElement(DownArrowIcon, {
458
+ className: "eds-pagination__results__change-number-of-results__arrow",
459
+ "aria-hidden": "true"
460
+ })),
461
+ "aria-label": changeNumberOfResultsLabelForScreenreader,
462
+ placement: "bottom-end"
463
+ }, resultsPerPageOptions.map(function (option, key) {
464
+ return React.createElement(OverflowMenuItem, {
465
+ key: key,
466
+ onSelect: function onSelect() {
467
+ return onResultsPerPageChange(option);
468
+ }
469
+ }, option);
470
+ }))), React.createElement(Label, {
471
+ as: "p"
472
+ }, showingResultsLabel((currentPage - 1) * resultsPerPage + 1, currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage, numberOfResults))), React.createElement("div", {
473
+ className: "eds-pagination__controls"
474
+ }, !hidePrevButton && React.createElement(PaginationPage, {
475
+ onClick: function onClick() {
476
+ return onPageChange(currentPage - 1);
477
+ },
478
+ "aria-label": previousPageLabel,
479
+ "aria-describedby": paginationId,
480
+ disabled: isFirstPostSelected
481
+ }, React.createElement(LeftArrowIcon, {
482
+ "aria-hidden": "true"
483
+ })), listedEntries.map(function (entry, index) {
484
+ return entry === '…' ? React.createElement(Ellipsis, {
485
+ key: "ellipsis-" + index
486
+ }) : React.createElement(PaginationPage, {
487
+ selected: entry === currentPage,
488
+ onClick: function onClick() {
489
+ return onPageChange(entry);
490
+ },
491
+ "aria-label": "" + pageLabel(entry) + (entry === pageCount ? lastPageLabelForScreenreader : ''),
492
+ "aria-describedby": entry !== currentPage ? paginationId : undefined,
493
+ key: entry
494
+ }, entry);
495
+ }), !hideNextButton && React.createElement(PaginationPage, {
496
+ onClick: function onClick() {
497
+ return onPageChange(currentPage + 1);
498
+ },
499
+ "aria-label": nextPageLabel,
500
+ "aria-describedby": paginationId,
501
+ disabled: isLastPostSelected
502
+ }, React.createElement(RightArrowIcon, {
503
+ "aria-hidden": "true"
504
+ })), showInput && React.createElement(PaginationInput, {
505
+ pageCount: pageCount,
506
+ currentPage: currentPage,
507
+ onPageChange: onPageChange,
508
+ label: inputLabel
509
+ })), React.createElement(VisuallyHidden, {
510
+ id: paginationId
511
+ }, currentPageLabelForScreenreader, " ", currentPage));
512
+ };
513
+ var Ellipsis = function Ellipsis() {
514
+ return React.createElement("span", {
515
+ className: "eds-pagination__controls__page__ellipsis",
516
+ "aria-hidden": "true"
517
+ }, "\u2026");
3659
518
  };
3660
- const Ellipsis = () => /* @__PURE__ */ jsx("span", { className: "eds-pagination__controls__page__ellipsis", "aria-hidden": "true", children: "…" });
3661
- const SideNavigation = ({
3662
- className,
3663
- children,
3664
- size = "medium",
3665
- ...rest
3666
- }) => {
3667
- if (!children || !React__default.Children.count(children)) {
519
+
520
+ var _excluded$4 = ["className", "children", "size"];
521
+ var SideNavigation = function SideNavigation(_ref) {
522
+ var className = _ref.className,
523
+ children = _ref.children,
524
+ _ref$size = _ref.size,
525
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
526
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
527
+ if (!children || !React.Children.count(children)) {
3668
528
  return null;
3669
529
  }
3670
- return /* @__PURE__ */ jsx(
3671
- "ul",
3672
- {
3673
- className: classNames(
3674
- "eds-side-navigation",
3675
- { "eds-side-navigation--small": size === "small" },
3676
- className
3677
- ),
3678
- ...rest,
3679
- children
3680
- }
3681
- );
530
+ return React.createElement("ul", _extends({
531
+ className: classNames('eds-side-navigation', {
532
+ 'eds-side-navigation--small': size === 'small'
533
+ }, className)
534
+ }, rest), children);
3682
535
  };
536
+ /** This is required to check that the Menu */
3683
537
  SideNavigation.__IS_ENTUR_MENU__ = true;
3684
- const useShowDelayedLabel = (isCollapsed) => {
3685
- const [showLabel, setShowLabel] = useState(true);
3686
- const hideDelay = 50;
3687
- const showDelay = 200;
3688
- useEffect(() => {
538
+
539
+ var useShowDelayedLabel = function useShowDelayedLabel(isCollapsed) {
540
+ var _useState = useState(true),
541
+ showLabel = _useState[0],
542
+ setShowLabel = _useState[1];
543
+ var hideDelay = 50;
544
+ var showDelay = 200;
545
+ useEffect(function () {
3689
546
  if (isCollapsed) {
3690
- setTimeout(() => {
547
+ setTimeout(function () {
3691
548
  setShowLabel(false);
3692
549
  }, hideDelay);
3693
550
  }
3694
551
  if (!isCollapsed) {
3695
- setTimeout(() => {
552
+ setTimeout(function () {
3696
553
  setShowLabel(true);
3697
554
  }, showDelay);
3698
555
  }
3699
- return () => void 0;
556
+ return function () {
557
+ return undefined;
558
+ };
3700
559
  }, [isCollapsed]);
3701
560
  return [showLabel];
3702
561
  };
562
+
563
+ var _excluded$3 = ["className", "active", "subMenu", "icon", "children", "as"],
564
+ _excluded2 = ["children"],
565
+ _excluded3 = ["active", "disabled", "children", "forceExpandSubMenus", "as"];
3703
566
  function isActiveRecursively(child) {
3704
567
  if (!child.props) {
3705
568
  return false;
@@ -3710,255 +573,205 @@ function isActiveRecursively(child) {
3710
573
  if (!child.props.children) {
3711
574
  return false;
3712
575
  }
3713
- return React__default.Children.toArray(child.props.children).some(
3714
- (child2) => isActiveRecursively(child2)
3715
- );
576
+ return React.Children.toArray(child.props.children).some(function (child) {
577
+ return isActiveRecursively(child);
578
+ });
3716
579
  }
3717
- const defaultElementBaseItem = "a";
3718
- const BaseSideNavigationItem = React__default.forwardRef(
3719
- ({
3720
- className,
3721
- active = false,
3722
- subMenu,
3723
- icon,
3724
- children,
3725
- as,
3726
- ...rest
3727
- }, ref) => {
3728
- const Element2 = as || defaultElementBaseItem;
3729
- const { isCollapsed } = useSideNavigationContext();
3730
- const [showLabel] = useShowDelayedLabel(isCollapsed);
3731
- return /* @__PURE__ */ jsxs("li", { className: classNames("eds-side-navigation__item", className), children: [
3732
- /* @__PURE__ */ jsxs(
3733
- Element2,
3734
- {
3735
- className: classNames("eds-side-navigation__click-target", {
3736
- "eds-side-navigation__click-target--active": active
3737
- }),
3738
- "aria-label": isCollapsed ? children : void 0,
3739
- "aria-current": active ? "page" : void 0,
3740
- ref,
3741
- ...rest,
3742
- children: [
3743
- icon,
3744
- showLabel && children
3745
- ]
3746
- }
3747
- ),
3748
- subMenu
3749
- ] });
3750
- }
3751
- );
3752
- const DisabledSideNavigationItem = React__default.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx(
3753
- BaseSideNavigationItem,
3754
- {
580
+ var defaultElementBaseItem = 'a';
581
+ var BaseSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
582
+ var className = _ref.className,
583
+ _ref$active = _ref.active,
584
+ active = _ref$active === void 0 ? false : _ref$active,
585
+ subMenu = _ref.subMenu,
586
+ icon = _ref.icon,
587
+ children = _ref.children,
588
+ as = _ref.as,
589
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
590
+ var Element = as || defaultElementBaseItem;
591
+ var _useSideNavigationCon = useSideNavigationContext(),
592
+ isCollapsed = _useSideNavigationCon.isCollapsed;
593
+ var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
594
+ showLabel = _useShowDelayedLabel[0];
595
+ return React.createElement("li", {
596
+ className: classNames('eds-side-navigation__item', className)
597
+ }, React.createElement(Element, _extends({
598
+ className: classNames('eds-side-navigation__click-target', {
599
+ 'eds-side-navigation__click-target--active': active
600
+ }),
601
+ "aria-label": isCollapsed ? children : undefined,
602
+ "aria-current": active ? 'page' : undefined,
603
+ ref: ref
604
+ }, rest), icon, showLabel && children), subMenu);
605
+ });
606
+ var DisabledSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
607
+ var children = _ref2.children,
608
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
609
+ return React.createElement(BaseSideNavigationItem, _extends({
3755
610
  as: "button",
3756
611
  disabled: true,
3757
612
  "aria-disabled": true,
3758
- ref,
3759
- type: "button",
3760
- ...rest,
3761
- children
3762
- }
3763
- ));
3764
- const defaultElementItem = "a";
3765
- const SideNavigationItem = React__default.forwardRef(
3766
- ({
3767
- active,
3768
- disabled,
3769
- children,
3770
- forceExpandSubMenus,
3771
- as,
3772
- ...rest
3773
- }, ref) => {
3774
- const Element2 = as || defaultElementItem;
3775
- const childrenArray = React__default.Children.toArray(children);
3776
- const subMenu = childrenArray.find(
3777
- (child) => child && child.type && child.type.__IS_ENTUR_MENU__
3778
- );
3779
- const label = subMenu ? childrenArray.filter((child) => child !== subMenu) : children;
3780
- if (disabled) {
3781
- return /* @__PURE__ */ jsx(DisabledSideNavigationItem, { ref, ...rest, children: label });
3782
- }
3783
- if (!subMenu) {
3784
- return /* @__PURE__ */ jsx(
3785
- BaseSideNavigationItem,
3786
- {
3787
- as: Element2,
3788
- active,
3789
- ref,
3790
- ...rest,
3791
- children: label
3792
- }
3793
- );
3794
- }
3795
- const isExpanded = forceExpandSubMenus || isActiveRecursively({ props: { children, active } });
3796
- return /* @__PURE__ */ jsx(
3797
- BaseSideNavigationItem,
3798
- {
3799
- active,
3800
- subMenu: isExpanded && subMenu,
3801
- "aria-expanded": isExpanded,
3802
- as: Element2,
3803
- ref,
3804
- ...rest,
3805
- children: label
3806
- }
3807
- );
3808
- }
3809
- );
3810
- const SideNavigationGroup = ({
3811
- defaultOpen = false,
3812
- open,
3813
- onToggle,
3814
- className,
3815
- children,
3816
- title,
3817
- icon,
3818
- ...rest
3819
- }) => {
3820
- const [isOpen, setOpen] = useControllableProp({
3821
- prop: open,
3822
- updater: onToggle,
3823
- defaultValue: defaultOpen
613
+ ref: ref,
614
+ type: "button"
615
+ }, rest), children);
616
+ });
617
+ var defaultElementItem = 'a';
618
+ var SideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
619
+ var active = _ref3.active,
620
+ disabled = _ref3.disabled,
621
+ children = _ref3.children,
622
+ forceExpandSubMenus = _ref3.forceExpandSubMenus,
623
+ as = _ref3.as,
624
+ rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
625
+ var Element = as || defaultElementItem;
626
+ var childrenArray = React.Children.toArray(children);
627
+ var subMenu = childrenArray.find(function (child) {
628
+ return child && child.type && child.type.__IS_ENTUR_MENU__;
3824
629
  });
3825
- const { isCollapsed } = useSideNavigationContext();
3826
- const [showLabel] = useShowDelayedLabel(isCollapsed);
3827
- return /* @__PURE__ */ jsxs(
3828
- "div",
3829
- {
3830
- className: classNames("eds-side-navigation-group", className),
3831
- ...rest,
3832
- children: [
3833
- /* @__PURE__ */ jsxs(
3834
- "button",
3835
- {
3836
- onClick: () => setOpen(!isOpen),
3837
- type: "button",
3838
- className: "eds-side-navigation-group__trigger",
3839
- "aria-label": `${title}, utvidbar meny, ${isOpen ? "åpen" : "lukket"}`,
3840
- children: [
3841
- /* @__PURE__ */ jsxs("span", { children: [
3842
- icon && /* @__PURE__ */ jsx("span", { className: "eds-side-navigation-group__trigger-icon", children: icon }),
3843
- showLabel && title
3844
- ] }),
3845
- showLabel && /* @__PURE__ */ jsx(
3846
- ExpandArrow,
3847
- {
3848
- open: isOpen,
3849
- className: "eds-side-navigation-group__expand-icon"
3850
- }
3851
- )
3852
- ]
3853
- }
3854
- ),
3855
- /* @__PURE__ */ jsx(
3856
- BaseExpand,
3857
- {
3858
- className: "eds-side-navigation-group__expand-content",
3859
- open: isOpen,
3860
- children
3861
- }
3862
- )
3863
- ]
3864
- }
3865
- );
3866
- };
3867
- const Stepper = ({
3868
- activeIndex,
3869
- className,
3870
- interactive = false,
3871
- onStepClick,
3872
- showStepperIndex = true,
3873
- steps,
3874
- ariaLabelStep = "Steg",
3875
- ariaLabelOf = "av",
3876
- ariaLabelCompleted = "fullført",
3877
- ariaLabelSummary = `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`,
3878
- ...rest
3879
- }) => {
3880
- return /* @__PURE__ */ jsx(
3881
- "ol",
3882
- {
3883
- className: classNames("eds-stepper", className),
3884
- "aria-label": ariaLabelSummary,
3885
- ...rest,
3886
- children: steps.map((step, i) => {
3887
- const isCurrent = i === activeIndex;
3888
- const isInteractive = interactive && activeIndex > i;
3889
- const Element2 = isInteractive ? "button" : "div";
3890
- const isCompleted = activeIndex > i;
3891
- const currentStepSummary = `${ariaLabelStep} ${i + 1} ${ariaLabelOf} ${steps.length}, ${step} ${isCompleted ? `, ${ariaLabelCompleted}` : ""}`;
3892
- const props = isInteractive ? { onClick: () => onStepClick?.(i) } : {};
3893
- return /* @__PURE__ */ jsx("li", { className: "eds-stepper__step__wrapper", children: /* @__PURE__ */ jsxs(
3894
- Element2,
3895
- {
3896
- className: classNames(
3897
- "eds-stepper__step",
3898
- { "eds-stepper__step--active": isCurrent },
3899
- { "eds-stepper__step--completed": isCompleted },
3900
- { "eds-stepper__step--interactive": isInteractive }
3901
- ),
3902
- "aria-current": isCurrent ? "step" : void 0,
3903
- type: Element2 === "button" ? "button" : void 0,
3904
- ...props,
3905
- children: [
3906
- /* @__PURE__ */ jsx("div", { className: "eds-stepper__step__line", "aria-hidden": true }),
3907
- /* @__PURE__ */ jsxs("span", { className: "eds-stepper__step__label", "aria-hidden": true, children: [
3908
- showStepperIndex && i + 1 + ".",
3909
- " ",
3910
- step
3911
- ] }),
3912
- /* @__PURE__ */ jsx(VisuallyHidden, { children: currentStepSummary })
3913
- ]
3914
- }
3915
- ) }, step);
3916
- })
630
+ var label = subMenu ? childrenArray.filter(function (child) {
631
+ return child !== subMenu;
632
+ }) : children;
633
+ if (disabled) {
634
+ return React.createElement(DisabledSideNavigationItem, _extends({
635
+ ref: ref
636
+ }, rest), label);
637
+ }
638
+ if (!subMenu) {
639
+ return React.createElement(BaseSideNavigationItem, _extends({
640
+ as: Element,
641
+ active: active,
642
+ ref: ref
643
+ }, rest), label);
644
+ }
645
+ var isExpanded = forceExpandSubMenus || isActiveRecursively({
646
+ props: {
647
+ children: children,
648
+ active: active
3917
649
  }
3918
- );
650
+ });
651
+ return React.createElement(BaseSideNavigationItem, _extends({
652
+ active: active,
653
+ subMenu: isExpanded && subMenu,
654
+ "aria-expanded": isExpanded,
655
+ as: Element,
656
+ ref: ref
657
+ }, rest), label);
658
+ });
659
+
660
+ var _excluded$2 = ["defaultOpen", "open", "onToggle", "className", "children", "title", "icon"];
661
+ var SideNavigationGroup = function SideNavigationGroup(_ref) {
662
+ var _ref$defaultOpen = _ref.defaultOpen,
663
+ defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
664
+ open = _ref.open,
665
+ onToggle = _ref.onToggle,
666
+ className = _ref.className,
667
+ children = _ref.children,
668
+ title = _ref.title,
669
+ icon = _ref.icon,
670
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
671
+ var _useControllableProp = useControllableProp({
672
+ prop: open,
673
+ updater: onToggle,
674
+ defaultValue: defaultOpen
675
+ }),
676
+ isOpen = _useControllableProp[0],
677
+ setOpen = _useControllableProp[1];
678
+ var _useSideNavigationCon = useSideNavigationContext(),
679
+ isCollapsed = _useSideNavigationCon.isCollapsed;
680
+ var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
681
+ showLabel = _useShowDelayedLabel[0];
682
+ return React.createElement("div", _extends({
683
+ className: classNames('eds-side-navigation-group', className)
684
+ }, rest), React.createElement("button", {
685
+ onClick: function onClick() {
686
+ return setOpen(!isOpen);
687
+ },
688
+ type: "button",
689
+ className: "eds-side-navigation-group__trigger",
690
+ "aria-label": title + ", utvidbar meny, " + (isOpen ? 'åpen' : 'lukket')
691
+ }, React.createElement("span", null, icon && React.createElement("span", {
692
+ className: "eds-side-navigation-group__trigger-icon"
693
+ }, icon), showLabel && title), showLabel && React.createElement(ExpandArrow, {
694
+ open: isOpen,
695
+ className: "eds-side-navigation-group__expand-icon"
696
+ })), React.createElement(BaseExpand, {
697
+ className: "eds-side-navigation-group__expand-content",
698
+ open: isOpen
699
+ }, children));
3919
700
  };
3920
- const defaultElement = "a";
3921
- const TopNavigationItem = ({
3922
- active = false,
3923
- className,
3924
- as,
3925
- ...rest
3926
- }) => {
3927
- const Element2 = as || defaultElement;
3928
- return /* @__PURE__ */ jsx(
3929
- Element2,
3930
- {
3931
- className: classNames([
3932
- "eds-top-navigation-item",
3933
- className,
3934
- { "eds-top-navigation-item--active": active }
3935
- ]),
3936
- ...rest
3937
- }
3938
- );
701
+
702
+ var _excluded$1 = ["activeIndex", "className", "interactive", "onStepClick", "showStepperIndex", "steps", "ariaLabelStep", "ariaLabelOf", "ariaLabelCompleted", "ariaLabelSummary"];
703
+ var Stepper = function Stepper(_ref) {
704
+ var activeIndex = _ref.activeIndex,
705
+ className = _ref.className,
706
+ _ref$interactive = _ref.interactive,
707
+ interactive = _ref$interactive === void 0 ? false : _ref$interactive,
708
+ onStepClick = _ref.onStepClick,
709
+ _ref$showStepperIndex = _ref.showStepperIndex,
710
+ showStepperIndex = _ref$showStepperIndex === void 0 ? true : _ref$showStepperIndex,
711
+ steps = _ref.steps,
712
+ _ref$ariaLabelStep = _ref.ariaLabelStep,
713
+ ariaLabelStep = _ref$ariaLabelStep === void 0 ? 'Steg' : _ref$ariaLabelStep,
714
+ _ref$ariaLabelOf = _ref.ariaLabelOf,
715
+ ariaLabelOf = _ref$ariaLabelOf === void 0 ? 'av' : _ref$ariaLabelOf,
716
+ _ref$ariaLabelComplet = _ref.ariaLabelCompleted,
717
+ ariaLabelCompleted = _ref$ariaLabelComplet === void 0 ? 'fullført' : _ref$ariaLabelComplet,
718
+ _ref$ariaLabelSummary = _ref.ariaLabelSummary,
719
+ ariaLabelSummary = _ref$ariaLabelSummary === void 0 ? "Stegindikator med " + steps.length + " steg, du er p\xE5 steg " + (activeIndex + 1) + " " + steps[activeIndex] + "," : _ref$ariaLabelSummary,
720
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
721
+ return React.createElement("ol", _extends({
722
+ className: classNames('eds-stepper', className),
723
+ "aria-label": ariaLabelSummary
724
+ }, rest), steps.map(function (step, i) {
725
+ var isCurrent = i === activeIndex;
726
+ var isInteractive = interactive && activeIndex > i;
727
+ var Element = isInteractive ? 'button' : 'div';
728
+ var isCompleted = activeIndex > i;
729
+ var currentStepSummary = ariaLabelStep + " " + (i + 1) + " " + ariaLabelOf + " " + steps.length + ", " + step + " " + (isCompleted ? ", " + ariaLabelCompleted : '');
730
+ var props = isInteractive ? {
731
+ onClick: function onClick() {
732
+ return onStepClick == null ? void 0 : onStepClick(i);
733
+ }
734
+ } : {};
735
+ return React.createElement("li", {
736
+ key: step,
737
+ className: "eds-stepper__step__wrapper"
738
+ }, React.createElement(Element, _extends({
739
+ className: classNames('eds-stepper__step', {
740
+ 'eds-stepper__step--active': isCurrent
741
+ }, {
742
+ 'eds-stepper__step--completed': isCompleted
743
+ }, {
744
+ 'eds-stepper__step--interactive': isInteractive
745
+ }),
746
+ "aria-current": isCurrent ? 'step' : undefined,
747
+ type: Element === 'button' ? 'button' : undefined
748
+ }, props), React.createElement("div", {
749
+ className: "eds-stepper__step__line",
750
+ "aria-hidden": true
751
+ }), React.createElement("span", {
752
+ className: "eds-stepper__step__label",
753
+ "aria-hidden": true
754
+ }, showStepperIndex && i + 1 + '.', " ", step), React.createElement(VisuallyHidden, null, currentStepSummary)));
755
+ }));
3939
756
  };
3940
- warnAboutMissingStyles(
3941
- "menu",
3942
- "expand",
3943
- "icons",
3944
- "typography",
3945
- "button",
3946
- "layout",
3947
- "a11y"
3948
- );
3949
- export {
3950
- BreadcrumbItem,
3951
- BreadcrumbNavigation,
3952
- CollapsibleSideNavigation,
3953
- OverflowMenu,
3954
- OverflowMenuItem,
3955
- OverflowMenuLink,
3956
- Pagination,
3957
- SideNavigation,
3958
- SideNavigationGroup,
3959
- SideNavigationItem,
3960
- Stepper,
3961
- TopNavigationItem,
3962
- useSideNavigationContext
757
+
758
+ var _excluded = ["active", "className", "as"];
759
+ var defaultElement = 'a';
760
+ var TopNavigationItem = function TopNavigationItem(_ref) {
761
+ var _ref$active = _ref.active,
762
+ active = _ref$active === void 0 ? false : _ref$active,
763
+ className = _ref.className,
764
+ as = _ref.as,
765
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
766
+ var Element = as || defaultElement;
767
+ return React.createElement(Element, _extends({
768
+ className: classNames(['eds-top-navigation-item', className, {
769
+ 'eds-top-navigation-item--active': active
770
+ }])
771
+ }, rest));
3963
772
  };
773
+
774
+ warnAboutMissingStyles('menu', 'expand', 'icons', 'typography', 'button', 'layout', 'a11y');
775
+
776
+ export { BreadcrumbItem, BreadcrumbNavigation, CollapsibleSideNavigation, OverflowMenu, OverflowMenuItem, OverflowMenuLink, Pagination, SideNavigation, SideNavigationGroup, SideNavigationItem, Stepper, TopNavigationItem, useSideNavigationContext };
3964
777
  //# sourceMappingURL=menu.esm.js.map