@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/BreadcrumbItem.d.ts +19 -0
- package/dist/BreadcrumbNavigation.d.ts +11 -0
- package/dist/CollapsibleSideNavigation.d.ts +27 -0
- package/dist/OverflowMenu.d.ts +55 -0
- package/dist/Pagination.d.ts +69 -0
- package/dist/PaginationInput.d.ts +8 -0
- package/dist/PaginationPage.d.ts +17 -0
- package/dist/SideNavigation.d.ts +16 -0
- package/dist/SideNavigationGroup.d.ts +20 -0
- package/dist/SideNavigationItem.d.ts +33 -0
- package/dist/Stepper.d.ts +39 -0
- package/dist/TopNavigationItem.d.ts +21 -0
- package/dist/index.d.ts +11 -352
- package/dist/index.js +8 -0
- package/dist/menu.cjs.development.js +793 -0
- package/dist/menu.cjs.development.js.map +1 -0
- package/dist/menu.cjs.production.min.js +2 -0
- package/dist/menu.cjs.production.min.js.map +1 -0
- package/dist/menu.esm.js +682 -3869
- package/dist/menu.esm.js.map +1 -1
- package/dist/styles.css +684 -655
- package/dist/useControllableProp.d.ts +6 -0
- package/dist/useShowDelayedLabel.d.ts +1 -0
- package/package.json +20 -38
- package/dist/menu.cjs.js +0 -3981
- package/dist/menu.cjs.js.map +0 -1
package/dist/menu.esm.js
CHANGED
|
@@ -1,3462 +1,347 @@
|
|
|
1
|
-
import { useOnClickOutside, useOnEscape, getNodeText, useRandomId, warnAboutMissingStyles } from
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
function
|
|
34
|
-
if (
|
|
35
|
-
|
|
36
|
-
(
|
|
37
|
-
(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
-
|
|
2243
|
-
function
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
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
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
}
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
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
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
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
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
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 ===
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
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
|
-
|
|
185
|
+
var cleanup = autoUpdate(elements.reference, elements.floating, update);
|
|
3302
186
|
return cleanup;
|
|
3303
187
|
}
|
|
3304
188
|
}, [isOpen, elements, update]);
|
|
3305
|
-
|
|
3306
|
-
listRef,
|
|
3307
|
-
activeIndex,
|
|
189
|
+
var listNav = useListNavigation(context, {
|
|
190
|
+
listRef: listRef,
|
|
191
|
+
activeIndex: activeIndex,
|
|
3308
192
|
onNavigate: setActiveIndex
|
|
3309
193
|
});
|
|
3310
|
-
|
|
194
|
+
var typeahead = useTypeahead(context, {
|
|
3311
195
|
listRef: labelsRef,
|
|
3312
|
-
activeIndex,
|
|
3313
|
-
onMatch: (
|
|
196
|
+
activeIndex: activeIndex,
|
|
197
|
+
onMatch: function onMatch(index) {
|
|
198
|
+
return isOpen && setActiveIndex(index);
|
|
199
|
+
}
|
|
3314
200
|
});
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
)
|
|
3319
|
-
|
|
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
|
-
|
|
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], ()
|
|
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
|
-
|
|
3327
|
-
|
|
3328
|
-
activeIndex,
|
|
3329
|
-
getItemProps,
|
|
3330
|
-
closeMenuAndReturnFocus
|
|
3331
|
-
}
|
|
3332
|
-
|
|
3333
|
-
);
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
})
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
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
|
-
|
|
3373
|
-
children,
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
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
|
-
|
|
3418
|
-
return
|
|
301
|
+
var OverflowMenuLink = function OverflowMenuLink(props) {
|
|
302
|
+
return React.createElement(OverflowMenuItem, _extends({}, props));
|
|
3419
303
|
};
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
"button",
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
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 ?
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
currentPage,
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
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
|
-
|
|
341
|
+
var handleSubmit = function handleSubmit(e) {
|
|
3457
342
|
e.preventDefault();
|
|
3458
343
|
e.stopPropagation();
|
|
3459
|
-
|
|
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
|
-
|
|
362
|
+
var handleChange = function handleChange(e) {
|
|
3478
363
|
setInput(e.target.value);
|
|
3479
364
|
};
|
|
3480
|
-
return
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
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
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
3544
|
-
|
|
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
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
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
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
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
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
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
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
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 ()
|
|
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
|
|
3714
|
-
|
|
3715
|
-
);
|
|
576
|
+
return React.Children.toArray(child.props.children).some(function (child) {
|
|
577
|
+
return isActiveRecursively(child);
|
|
578
|
+
});
|
|
3716
579
|
}
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
active = false,
|
|
3722
|
-
subMenu,
|
|
3723
|
-
icon,
|
|
3724
|
-
children,
|
|
3725
|
-
as,
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
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
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
)
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
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
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
{
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
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
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
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
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
);
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
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
|