@entur/menu 5.1.12 → 5.2.1-beta.0

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.
@@ -1,797 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var utils = require('@entur/utils');
6
- var React = require('react');
7
- var classNames = require('classnames');
8
- var icons = require('@entur/icons');
9
- var react = require('@floating-ui/react');
10
- var button = require('@entur/button');
11
- var tooltip = require('@entur/tooltip');
12
- var tokens = require('@entur/tokens');
13
- var a11y = require('@entur/a11y');
14
- var typography = require('@entur/typography');
15
- var expand = require('@entur/expand');
16
-
17
- var BreadcrumbNavigation = function BreadcrumbNavigation(_ref) {
18
- var _ref$ariaLabel = _ref['aria-label'],
19
- ariaLabel = _ref$ariaLabel === void 0 ? 'Brødsmulesti' : _ref$ariaLabel,
20
- children = _ref.children;
21
- return React.createElement("nav", {
22
- "aria-label": ariaLabel
23
- }, React.createElement("ol", {
24
- className: "eds-breadcrumbs"
25
- }, React.Children.map(children, function (child, index) {
26
- // @ts-expect-error should check if children are correct but for now it is only mentioned in the documentation
27
- return React.cloneElement(child, {
28
- isCurrent: index + 1 === React.Children.count(children)
29
- });
30
- })));
31
- };
32
-
33
- function _extends() {
34
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
35
- for (var e = 1; e < arguments.length; e++) {
36
- var t = arguments[e];
37
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
38
- }
39
- return n;
40
- }, _extends.apply(null, arguments);
41
- }
42
- function _objectWithoutPropertiesLoose(r, e) {
43
- if (null == r) return {};
44
- var t = {};
45
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
46
- if (e.includes(n)) continue;
47
- t[n] = r[n];
48
- }
49
- return t;
50
- }
51
-
52
- var _excluded$8 = ["className", "isCurrent", "as"];
53
- var defaultElement$1 = 'a';
54
- var BreadcrumbItem = function BreadcrumbItem(_ref) {
55
- var className = _ref.className,
56
- isCurrent = _ref.isCurrent,
57
- as = _ref.as,
58
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
59
- var Element = as || defaultElement$1;
60
- return React.createElement(React.Fragment, null, React.createElement("li", {
61
- className: classNames('eds-breadcrumb__item', className)
62
- }, React.createElement(Element, _extends({
63
- "aria-current": isCurrent ? 'page' : undefined,
64
- className: classNames('eds-breadcrumb__link', {
65
- 'eds-breadcrumb__link--current': isCurrent
66
- })
67
- }, rest))), !isCurrent && React.createElement(icons.RightArrowIcon, {
68
- className: "eds-breadcrumb__separator",
69
- inline: true,
70
- role: "presentation"
71
- }));
72
- };
73
-
74
- function useControllableProp(_ref) {
75
- var prop = _ref.prop,
76
- _ref$updater = _ref.updater,
77
- updater = _ref$updater === void 0 ? function () {
78
- return undefined;
79
- } : _ref$updater,
80
- defaultValue = _ref.defaultValue;
81
- var _useState = React.useState(defaultValue),
82
- internalState = _useState[0],
83
- setInternalState = _useState[1];
84
- React.useEffect(function () {
85
- if (prop !== undefined) {
86
- setInternalState(prop);
87
- }
88
- }, [prop]);
89
- return prop === undefined ? [internalState, setInternalState] : [prop, updater];
90
- }
91
-
92
- var _excluded$7 = ["className", "children", "size", "collapsed", "onCollapseToggle", "collapsibleButtonPosition", "openSideMenuAriaLabel", "closeSideMenuAriaLabel"];
93
- var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
94
- var className = _ref.className,
95
- children = _ref.children,
96
- size = _ref.size,
97
- collapsible = _ref.collapsed,
98
- onCollapseToggle = _ref.onCollapseToggle,
99
- _ref$collapsibleButto = _ref.collapsibleButtonPosition,
100
- collapsibleButtonPosition = _ref$collapsibleButto === void 0 ? '50%' : _ref$collapsibleButto,
101
- _ref$openSideMenuAria = _ref.openSideMenuAriaLabel,
102
- openSideMenuAriaLabel = _ref$openSideMenuAria === void 0 ? 'Åpne sidemeny' : _ref$openSideMenuAria,
103
- _ref$closeSideMenuAri = _ref.closeSideMenuAriaLabel,
104
- closeSideMenuAriaLabel = _ref$closeSideMenuAri === void 0 ? 'Lukk sidemeny' : _ref$closeSideMenuAri,
105
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
106
- var _useControllableProp = useControllableProp({
107
- prop: collapsible,
108
- defaultValue: false,
109
- updater: onCollapseToggle
110
- }),
111
- collapsedMenu = _useControllableProp[0],
112
- setCollapsedMenu = _useControllableProp[1];
113
- return React.createElement(SideNavigationContext.Provider, {
114
- value: {
115
- isCollapsed: collapsedMenu
116
- }
117
- }, React.createElement("ul", _extends({
118
- className: classNames('eds-side-navigation', {
119
- 'eds-side-navigation--small': size === 'small'
120
- }, {
121
- 'eds-side-navigation--collapsed': collapsedMenu
122
- }, className)
123
- }, rest), children, React.createElement("button", {
124
- className: "eds-side-navigation__collapse-button",
125
- onClick: function onClick() {
126
- return setCollapsedMenu(!collapsedMenu);
127
- },
128
- style: {
129
- top: "" + collapsibleButtonPosition
130
- }
131
- }, collapsedMenu ? React.createElement(icons.MenuIcon, {
132
- "aria-label": openSideMenuAriaLabel
133
- }) : React.createElement(icons.LeftArrowIcon, {
134
- "aria-label": closeSideMenuAriaLabel
135
- }))));
136
- };
137
- var SideNavigationContext = /*#__PURE__*/React.createContext({
138
- isCollapsed: false
139
- });
140
- var useSideNavigationContext = function useSideNavigationContext() {
141
- var context = React.useContext(SideNavigationContext);
142
- if (!context) {
143
- console.error('Error reading SideNavigationContext. Please contact maintainer of @entur/menu');
144
- }
145
- return context;
146
- };
147
-
148
- var _excluded$6 = ["children", "className", "button", "buttonIcon", "placement", "aria-label"],
149
- _excluded2$1 = ["children", "className", "onSelect", "href", "disabled"],
150
- _excluded3$1 = ["href"];
151
- var SelectContext = /*#__PURE__*/React.createContext({});
152
- var OverflowMenu = function OverflowMenu(_ref) {
153
- var children = _ref.children,
154
- className = _ref.className,
155
- button$1 = _ref.button,
156
- buttonIcon = _ref.buttonIcon,
157
- _ref$placement = _ref.placement,
158
- placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
159
- _ref$ariaLabel = _ref['aria-label'],
160
- ariaLabel = _ref$ariaLabel === void 0 ? 'åpne valgmeny' : _ref$ariaLabel,
161
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
162
- var _useState = React.useState(false),
163
- isOpen = _useState[0],
164
- setIsOpen = _useState[1];
165
- var _useState2 = React.useState(null),
166
- activeIndex = _useState2[0],
167
- setActiveIndex = _useState2[1];
168
- var listRef = React.useRef([]);
169
- var labelsRef = React.useRef([]);
170
- var _useFloating = react.useFloating({
171
- placement: tooltip.standardisePlacement(
172
- // check for left is added for backwards compatibility
173
- rest.position === 'left' ? 'bottom-end' : placement),
174
- open: isOpen,
175
- onOpenChange: setIsOpen,
176
- middleware: [react.offset(tokens.space.extraSmall2), react.flip(), react.shift({
177
- padding: tokens.space.extraSmall
178
- })]
179
- }),
180
- refs = _useFloating.refs,
181
- floatingStyles = _useFloating.floatingStyles,
182
- context = _useFloating.context,
183
- elements = _useFloating.elements,
184
- update = _useFloating.update;
185
- // Since we use CSS instead of conditional rendering when hiding dropdownlist
186
- // we can't use the whileElementsMounted option and need to handle
187
- // cleanup ourselves. See https://floating-ui.com/docs/autoupdate
188
- React.useEffect(function () {
189
- if (isOpen && elements.reference && elements.floating) {
190
- var cleanup = react.autoUpdate(elements.reference, elements.floating, update);
191
- return cleanup;
192
- }
193
- }, [isOpen, elements, update]);
194
- var listNav = react.useListNavigation(context, {
195
- listRef: listRef,
196
- activeIndex: activeIndex,
197
- onNavigate: setActiveIndex
198
- });
199
- var typeahead = react.useTypeahead(context, {
200
- listRef: labelsRef,
201
- activeIndex: activeIndex,
202
- onMatch: function onMatch(index) {
203
- return isOpen && setActiveIndex(index);
204
- }
205
- });
206
- var role = react.useRole(context, {
207
- role: 'menu'
208
- });
209
- var _useInteractions = react.useInteractions([listNav, typeahead, role]),
210
- getReferenceProps = _useInteractions.getReferenceProps,
211
- getFloatingProps = _useInteractions.getFloatingProps,
212
- getItemProps = _useInteractions.getItemProps;
213
- var closeMenuAndReturnFocus = function closeMenuAndReturnFocus() {
214
- var _refs$reference$curre;
215
- setIsOpen(false);
216
- // @ts-expect-error the reference element is actually focusable
217
- (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus == null || _refs$reference$curre.focus();
218
- };
219
- utils.useOnClickOutside([refs.floating, refs.reference], function () {
220
- return setIsOpen(false);
221
- });
222
- utils.useOnEscape(refs.floating, closeMenuAndReturnFocus);
223
- utils.useOnEscape(refs.reference, closeMenuAndReturnFocus);
224
- var selectContext = React.useMemo(function () {
225
- return {
226
- activeIndex: activeIndex,
227
- getItemProps: getItemProps,
228
- closeMenuAndReturnFocus: closeMenuAndReturnFocus
229
- };
230
- }, [activeIndex, getItemProps, closeMenuAndReturnFocus]);
231
- var _buttonIcon = buttonIcon != null ? buttonIcon : React.createElement(icons.VerticalDotsIcon, null);
232
- return React.createElement(React.Fragment, null, !button$1 ? React.createElement(button.IconButton, _extends({
233
- ref: refs.setReference
234
- }, getReferenceProps({
235
- onClick: function onClick() {
236
- return setIsOpen(!isOpen);
237
- },
238
- className: className,
239
- 'aria-label': ariaLabel,
240
- type: 'button'
241
- }), rest), _buttonIcon) : React.cloneElement(button$1, _extends({
242
- ref: refs.setReference
243
- }, getReferenceProps({
244
- onClick: function onClick() {
245
- return setIsOpen(!isOpen);
246
- },
247
- className: className,
248
- 'aria-label': ariaLabel,
249
- type: 'button'
250
- }), rest)), React.createElement(SelectContext.Provider, {
251
- value: selectContext
252
- }, React.createElement("div", _extends({
253
- ref: refs.setFloating,
254
- style: _extends({}, floatingStyles, {
255
- display: isOpen ? 'initial' : 'none'
256
- })
257
- }, getFloatingProps({
258
- className: 'eds-overflow-menu__menu-list'
259
- })), React.createElement(react.FloatingList, {
260
- elementsRef: listRef,
261
- labelsRef: labelsRef
262
- }, children))));
263
- };
264
- var OverflowMenuItem = function OverflowMenuItem(_ref2) {
265
- var children = _ref2.children,
266
- className = _ref2.className,
267
- _ref2$onSelect = _ref2.onSelect,
268
- onSelect = _ref2$onSelect === void 0 ? function () {
269
- return undefined;
270
- } : _ref2$onSelect,
271
- href = _ref2.href,
272
- disabled = _ref2.disabled,
273
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
274
- var _useContext = React.useContext(SelectContext),
275
- activeIndex = _useContext.activeIndex,
276
- getItemProps = _useContext.getItemProps,
277
- closeMenuAndReturnFocus = _useContext.closeMenuAndReturnFocus;
278
- var _useListItem = react.useListItem({
279
- label: !disabled ? utils.getNodeText(children) : null
280
- }),
281
- listItemRef = _useListItem.ref,
282
- index = _useListItem.index;
283
- var isHighlighted = activeIndex === index;
284
- var isLink = href !== undefined;
285
- var Element = isLink ? 'a' : 'button';
286
- return React.createElement(Element, _extends({
287
- ref: listItemRef,
288
- className: classNames('eds-overflow-menu__item', {
289
- 'eds-overflow-menu__item--disabled': disabled,
290
- 'eds-overflow-menu__item--highlighted': isHighlighted
291
- }, className),
292
- role: "menuitem",
293
- type: Element === 'button' ? 'button' : undefined,
294
- "aria-disabled": disabled,
295
- "aria-selected": isHighlighted
296
- }, getItemProps({
297
- onClick: isLink || disabled ? undefined : function () {
298
- onSelect();
299
- closeMenuAndReturnFocus();
300
- },
301
- href: disabled ? undefined : href,
302
- tabIndex: isHighlighted ? 0 : -1
303
- }), rest), children);
304
- };
305
- var OverflowMenuLink = function OverflowMenuLink(_ref3) {
306
- var href = _ref3.href,
307
- rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
308
- return React.createElement(OverflowMenuItem, _extends({
309
- href: href
310
- }, rest));
311
- };
312
-
313
- var PaginationPage = function PaginationPage(_ref) {
314
- var children = _ref.children,
315
- className = _ref.className,
316
- selected = _ref.selected,
317
- disabled = _ref.disabled,
318
- onClick = _ref.onClick,
319
- ariaLabel = _ref['aria-label'],
320
- ariaDescribedby = _ref['aria-describedby'];
321
- return React.createElement("button", {
322
- className: classNames('eds-pagination__controls__page', {
323
- 'eds-pagination__controls__page--selected': selected
324
- }, {
325
- 'eds-pagination__controls__page--disabled': disabled
326
- }, className),
327
- disabled: selected || disabled,
328
- type: "button",
329
- onClick: onClick,
330
- "aria-label": ariaLabel,
331
- "aria-describedby": ariaDescribedby,
332
- "aria-current": selected ? 'page' : false
333
- }, children);
334
- };
335
-
336
- var PaginationInput = function PaginationInput(_ref) {
337
- var currentPage = _ref.currentPage,
338
- pageCount = _ref.pageCount,
339
- _ref$label = _ref.label,
340
- label = _ref$label === void 0 ? 'Gå til side' : _ref$label,
341
- onPageChange = _ref.onPageChange;
342
- var _React$useState = React.useState(String(currentPage)),
343
- input = _React$useState[0],
344
- setInput = _React$useState[1];
345
- // If the currentPage prop changes, we want to reset the input field
346
- React.useEffect(function () {
347
- setInput(String(currentPage));
348
- }, [currentPage]);
349
- var handleSubmit = function handleSubmit(e) {
350
- e.preventDefault();
351
- e.stopPropagation();
352
- var pageNumber = Number(input);
353
- if (pageNumber === currentPage) {
354
- return;
355
- }
356
- if (Number.isNaN(pageNumber)) {
357
- pageNumber = currentPage;
358
- setInput(String(currentPage));
359
- return;
360
- }
361
- if (pageNumber > pageCount) {
362
- pageNumber = pageCount;
363
- setInput(String(pageCount));
364
- } else if (pageNumber < 1) {
365
- pageNumber = 1;
366
- setInput(String(1));
367
- }
368
- onPageChange(pageNumber);
369
- };
370
- var handleChange = function handleChange(e) {
371
- setInput(e.target.value);
372
- };
373
- return React.createElement("form", {
374
- onSubmit: handleSubmit,
375
- noValidate: true,
376
- "aria-label": "form"
377
- }, React.createElement("label", {
378
- className: "eds-pagination__controls__input__wrapper"
379
- }, React.createElement("span", {
380
- className: "eds-pagination__controls__input__label"
381
- }, label), React.createElement("input", {
382
- type: "number",
383
- max: pageCount,
384
- className: "eds-pagination__controls__input__field",
385
- value: input,
386
- onChange: handleChange
387
- })));
388
- };
389
-
390
- var _excluded$5 = ["className", "currentPage", "inputLabel", "onPageChange", "pageCount", "pageLabel", "previousPageLabel", "currentPageLabelForScreenreader", "lastPageLabelForScreenreader", "showInput", "numberOfResults", "resultsPerPage", "resultsPerPageOptions", "onResultsPerPageChange", "showNumberOfResultsLabel", "nextPageLabel", "showingResultsLabel", "changeNumberOfResultsLabelForScreenreader", "hideNextButton", "hidePrevButton"];
391
- var Pagination = function Pagination(_ref) {
392
- var className = _ref.className,
393
- currentPage = _ref.currentPage,
394
- inputLabel = _ref.inputLabel,
395
- onPageChange = _ref.onPageChange,
396
- pageCount = _ref.pageCount,
397
- _ref$pageLabel = _ref.pageLabel,
398
- pageLabel = _ref$pageLabel === void 0 ? function (pageNumber) {
399
- return "G\xE5 til side " + pageNumber;
400
- } : _ref$pageLabel,
401
- _ref$previousPageLabe = _ref.previousPageLabel,
402
- previousPageLabel = _ref$previousPageLabe === void 0 ? 'Gå til forrige side' : _ref$previousPageLabe,
403
- _ref$currentPageLabel = _ref.currentPageLabelForScreenreader,
404
- currentPageLabelForScreenreader = _ref$currentPageLabel === void 0 ? 'Nåværende side:' : _ref$currentPageLabel,
405
- _ref$lastPageLabelFor = _ref.lastPageLabelForScreenreader,
406
- lastPageLabelForScreenreader = _ref$lastPageLabelFor === void 0 ? ', siste side' : _ref$lastPageLabelFor,
407
- showInput = _ref.showInput,
408
- numberOfResults = _ref.numberOfResults,
409
- resultsPerPage = _ref.resultsPerPage,
410
- _ref$resultsPerPageOp = _ref.resultsPerPageOptions,
411
- resultsPerPageOptions = _ref$resultsPerPageOp === void 0 ? [10, 25, 50] : _ref$resultsPerPageOp,
412
- onResultsPerPageChange = _ref.onResultsPerPageChange,
413
- _ref$showNumberOfResu = _ref.showNumberOfResultsLabel,
414
- showNumberOfResultsLabel = _ref$showNumberOfResu === void 0 ? 'Vis' : _ref$showNumberOfResu,
415
- _ref$nextPageLabel = _ref.nextPageLabel,
416
- nextPageLabel = _ref$nextPageLabel === void 0 ? 'Gå til neste side' : _ref$nextPageLabel,
417
- _ref$showingResultsLa = _ref.showingResultsLabel,
418
- showingResultsLabel = _ref$showingResultsLa === void 0 ? function (minPage, maxPage, pageCount) {
419
- return "Viser resultat " + minPage + "\u2013" + maxPage + " av " + pageCount;
420
- } : _ref$showingResultsLa,
421
- _ref$changeNumberOfRe = _ref.changeNumberOfResultsLabelForScreenreader,
422
- changeNumberOfResultsLabelForScreenreader = _ref$changeNumberOfRe === void 0 ? "Viser " + resultsPerPage + " resultater. Trykk for \xE5 endre antall. \xC5pner en flervalgsmeny." : _ref$changeNumberOfRe,
423
- _ref$hideNextButton = _ref.hideNextButton,
424
- hideNextButton = _ref$hideNextButton === void 0 ? false : _ref$hideNextButton,
425
- _ref$hidePrevButton = _ref.hidePrevButton,
426
- hidePrevButton = _ref$hidePrevButton === void 0 ? false : _ref$hidePrevButton,
427
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
428
- var _useState = React.useState([]),
429
- listedEntries = _useState[0],
430
- setListedEntries = _useState[1];
431
- var paginationId = utils.useRandomId('eds-pagination');
432
- var isFirstPostSelected = currentPage === 1;
433
- var isLastPostSelected = currentPage === pageCount;
434
- var noEllipsis = pageCount <= 7;
435
- var onlyLeadingEllipsis = !noEllipsis && currentPage < 5;
436
- var onlyTrailingEllipsis = !noEllipsis && pageCount - currentPage <= 3;
437
- React.useEffect(function () {
438
- if (pageCount < 1) return;
439
- if (noEllipsis) {
440
- setListedEntries(Array(pageCount).fill(null).map(function (_, i) {
441
- return i + 1;
442
- }));
443
- } else if (onlyLeadingEllipsis) {
444
- setListedEntries([1, 2, 3, 4, 5, '…', pageCount]);
445
- } else if (onlyTrailingEllipsis) {
446
- setListedEntries([1, '…', pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1, pageCount]);
447
- } else {
448
- // leading and trailing ellipsis
449
- setListedEntries([1, '…', currentPage - 1, currentPage, currentPage + 1, '…', pageCount]);
450
- }
451
- }, [noEllipsis, onlyLeadingEllipsis, onlyTrailingEllipsis, currentPage, pageCount]);
452
- if (pageCount < 1) {
453
- return null;
454
- }
455
- return React.createElement("nav", _extends({
456
- className: classNames('eds-pagination', className),
457
- "aria-label": "Paginering"
458
- }, rest), resultsPerPage && numberOfResults && React.createElement("div", {
459
- className: "eds-pagination__results"
460
- }, onResultsPerPageChange && React.createElement(React.Fragment, null, React.createElement(typography.Label, {
461
- as: "p",
462
- "aria-hidden": "true"
463
- }, showNumberOfResultsLabel), React.createElement(OverflowMenu, {
464
- className: "eds-pagination__results__change-number-of-results",
465
- buttonIcon: React.createElement(React.Fragment, null, resultsPerPage, ' ', React.createElement(icons.DownArrowIcon, {
466
- className: "eds-pagination__results__change-number-of-results__arrow",
467
- "aria-hidden": "true"
468
- })),
469
- "aria-label": changeNumberOfResultsLabelForScreenreader,
470
- placement: "bottom-end"
471
- }, resultsPerPageOptions.map(function (option, key) {
472
- return React.createElement(OverflowMenuItem, {
473
- key: key,
474
- onSelect: function onSelect() {
475
- return onResultsPerPageChange(option);
476
- }
477
- }, option);
478
- }))), React.createElement(typography.Label, {
479
- as: "p"
480
- }, showingResultsLabel((currentPage - 1) * resultsPerPage + 1, currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage, numberOfResults))), React.createElement("div", {
481
- className: "eds-pagination__controls"
482
- }, !hidePrevButton && React.createElement(PaginationPage, {
483
- onClick: function onClick() {
484
- return onPageChange(currentPage - 1);
485
- },
486
- "aria-label": previousPageLabel,
487
- "aria-describedby": paginationId,
488
- disabled: isFirstPostSelected
489
- }, React.createElement(icons.LeftArrowIcon, {
490
- "aria-hidden": "true"
491
- })), listedEntries.map(function (entry, index) {
492
- return entry === '…' ? React.createElement(Ellipsis, {
493
- key: "ellipsis-" + index
494
- }) : React.createElement(PaginationPage, {
495
- selected: entry === currentPage,
496
- onClick: function onClick() {
497
- return onPageChange(entry);
498
- },
499
- "aria-label": "" + pageLabel(entry) + (entry === pageCount ? lastPageLabelForScreenreader : ''),
500
- "aria-describedby": entry !== currentPage ? paginationId : undefined,
501
- key: entry
502
- }, entry);
503
- }), !hideNextButton && React.createElement(PaginationPage, {
504
- onClick: function onClick() {
505
- return onPageChange(currentPage + 1);
506
- },
507
- "aria-label": nextPageLabel,
508
- "aria-describedby": paginationId,
509
- disabled: isLastPostSelected
510
- }, React.createElement(icons.RightArrowIcon, {
511
- "aria-hidden": "true"
512
- })), showInput && React.createElement(PaginationInput, {
513
- pageCount: pageCount,
514
- currentPage: currentPage,
515
- onPageChange: onPageChange,
516
- label: inputLabel
517
- })), React.createElement(a11y.VisuallyHidden, {
518
- id: paginationId
519
- }, currentPageLabelForScreenreader, " ", currentPage));
520
- };
521
- var Ellipsis = function Ellipsis() {
522
- return React.createElement("span", {
523
- className: "eds-pagination__controls__page__ellipsis",
524
- "aria-hidden": "true"
525
- }, "\u2026");
526
- };
527
-
528
- var _excluded$4 = ["className", "children", "size"];
529
- var SideNavigation = function SideNavigation(_ref) {
530
- var className = _ref.className,
531
- children = _ref.children,
532
- _ref$size = _ref.size,
533
- size = _ref$size === void 0 ? 'medium' : _ref$size,
534
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
535
- if (!children || !React.Children.count(children)) {
536
- return null;
537
- }
538
- return React.createElement("ul", _extends({
539
- className: classNames('eds-side-navigation', {
540
- 'eds-side-navigation--small': size === 'small'
541
- }, className)
542
- }, rest), children);
543
- };
544
- /** This is required to check that the Menu */
545
- SideNavigation.__IS_ENTUR_MENU__ = true;
546
-
547
- var useShowDelayedLabel = function useShowDelayedLabel(isCollapsed) {
548
- var _useState = React.useState(true),
549
- showLabel = _useState[0],
550
- setShowLabel = _useState[1];
551
- var hideDelay = 50;
552
- var showDelay = 200;
553
- React.useEffect(function () {
554
- if (isCollapsed) {
555
- setTimeout(function () {
556
- setShowLabel(false);
557
- }, hideDelay);
558
- }
559
- if (!isCollapsed) {
560
- setTimeout(function () {
561
- setShowLabel(true);
562
- }, showDelay);
563
- }
564
- return function () {
565
- return undefined;
566
- };
567
- }, [isCollapsed]);
568
- return [showLabel];
569
- };
570
-
571
- var _excluded$3 = ["className", "active", "subMenu", "icon", "children", "as"],
572
- _excluded2 = ["children"],
573
- _excluded3 = ["active", "disabled", "children", "forceExpandSubMenus", "as"];
574
- function isActiveRecursively(child) {
575
- if (!child.props) {
576
- return false;
577
- }
578
- if (child.props.active) {
579
- return true;
580
- }
581
- if (!child.props.children) {
582
- return false;
583
- }
584
- return React.Children.toArray(child.props.children).some(function (child) {
585
- return isActiveRecursively(child);
586
- });
587
- }
588
- var defaultElementBaseItem = 'a';
589
- var BaseSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
590
- var className = _ref.className,
591
- _ref$active = _ref.active,
592
- active = _ref$active === void 0 ? false : _ref$active,
593
- subMenu = _ref.subMenu,
594
- icon = _ref.icon,
595
- children = _ref.children,
596
- as = _ref.as,
597
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
598
- var Element = as || defaultElementBaseItem;
599
- var _useSideNavigationCon = useSideNavigationContext(),
600
- isCollapsed = _useSideNavigationCon.isCollapsed;
601
- var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
602
- showLabel = _useShowDelayedLabel[0];
603
- return React.createElement("li", {
604
- className: classNames('eds-side-navigation__item', className)
605
- }, React.createElement(Element, _extends({
606
- className: classNames('eds-side-navigation__click-target', {
607
- 'eds-side-navigation__click-target--active': active
608
- }),
609
- "aria-label": isCollapsed ? children : undefined,
610
- "aria-current": active ? 'page' : undefined,
611
- ref: ref
612
- }, rest), icon, showLabel && children), subMenu);
613
- });
614
- var DisabledSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
615
- var children = _ref2.children,
616
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
617
- return React.createElement(BaseSideNavigationItem, _extends({
618
- as: "button",
619
- disabled: true,
620
- "aria-disabled": true,
621
- ref: ref,
622
- type: "button"
623
- }, rest), children);
624
- });
625
- var defaultElementItem = 'a';
626
- var SideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
627
- var active = _ref3.active,
628
- disabled = _ref3.disabled,
629
- children = _ref3.children,
630
- forceExpandSubMenus = _ref3.forceExpandSubMenus,
631
- as = _ref3.as,
632
- rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
633
- var Element = as || defaultElementItem;
634
- var childrenArray = React.Children.toArray(children);
635
- var subMenu = childrenArray.find(function (child) {
636
- return child && child.type && child.type.__IS_ENTUR_MENU__;
637
- });
638
- var label = subMenu ? childrenArray.filter(function (child) {
639
- return child !== subMenu;
640
- }) : children;
641
- if (disabled) {
642
- return React.createElement(DisabledSideNavigationItem, _extends({
643
- ref: ref
644
- }, rest), label);
645
- }
646
- if (!subMenu) {
647
- return React.createElement(BaseSideNavigationItem, _extends({
648
- as: Element,
649
- active: active,
650
- ref: ref
651
- }, rest), label);
652
- }
653
- var isExpanded = forceExpandSubMenus || isActiveRecursively({
654
- props: {
655
- children: children,
656
- active: active
657
- }
658
- });
659
- return React.createElement(BaseSideNavigationItem, _extends({
660
- active: active,
661
- subMenu: isExpanded && subMenu,
662
- "aria-expanded": isExpanded,
663
- as: Element,
664
- ref: ref
665
- }, rest), label);
666
- });
667
-
668
- var _excluded$2 = ["defaultOpen", "open", "onToggle", "className", "children", "title", "icon"];
669
- var SideNavigationGroup = function SideNavigationGroup(_ref) {
670
- var _ref$defaultOpen = _ref.defaultOpen,
671
- defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
672
- open = _ref.open,
673
- onToggle = _ref.onToggle,
674
- className = _ref.className,
675
- children = _ref.children,
676
- title = _ref.title,
677
- icon = _ref.icon,
678
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
679
- var _useControllableProp = useControllableProp({
680
- prop: open,
681
- updater: onToggle,
682
- defaultValue: defaultOpen
683
- }),
684
- isOpen = _useControllableProp[0],
685
- setOpen = _useControllableProp[1];
686
- var _useSideNavigationCon = useSideNavigationContext(),
687
- isCollapsed = _useSideNavigationCon.isCollapsed;
688
- var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
689
- showLabel = _useShowDelayedLabel[0];
690
- return React.createElement("div", _extends({
691
- className: classNames('eds-side-navigation-group', className)
692
- }, rest), React.createElement("button", {
693
- onClick: function onClick() {
694
- return setOpen(!isOpen);
695
- },
696
- type: "button",
697
- className: "eds-side-navigation-group__trigger",
698
- "aria-label": title + ", utvidbar meny, " + (isOpen ? 'åpen' : 'lukket')
699
- }, React.createElement("span", null, icon && React.createElement("span", {
700
- className: "eds-side-navigation-group__trigger-icon"
701
- }, icon), showLabel && title), showLabel && React.createElement(expand.ExpandArrow, {
702
- open: isOpen,
703
- className: "eds-side-navigation-group__expand-icon"
704
- })), React.createElement(expand.BaseExpand, {
705
- className: "eds-side-navigation-group__expand-content",
706
- open: isOpen
707
- }, children));
708
- };
709
-
710
- var _excluded$1 = ["activeIndex", "className", "interactive", "onStepClick", "showStepperIndex", "steps", "ariaLabelStep", "ariaLabelOf", "ariaLabelCompleted", "ariaLabelSummary"];
711
- var Stepper = function Stepper(_ref) {
712
- var activeIndex = _ref.activeIndex,
713
- className = _ref.className,
714
- _ref$interactive = _ref.interactive,
715
- interactive = _ref$interactive === void 0 ? false : _ref$interactive,
716
- onStepClick = _ref.onStepClick,
717
- _ref$showStepperIndex = _ref.showStepperIndex,
718
- showStepperIndex = _ref$showStepperIndex === void 0 ? true : _ref$showStepperIndex,
719
- steps = _ref.steps,
720
- _ref$ariaLabelStep = _ref.ariaLabelStep,
721
- ariaLabelStep = _ref$ariaLabelStep === void 0 ? 'Steg' : _ref$ariaLabelStep,
722
- _ref$ariaLabelOf = _ref.ariaLabelOf,
723
- ariaLabelOf = _ref$ariaLabelOf === void 0 ? 'av' : _ref$ariaLabelOf,
724
- _ref$ariaLabelComplet = _ref.ariaLabelCompleted,
725
- ariaLabelCompleted = _ref$ariaLabelComplet === void 0 ? 'fullført' : _ref$ariaLabelComplet,
726
- _ref$ariaLabelSummary = _ref.ariaLabelSummary,
727
- ariaLabelSummary = _ref$ariaLabelSummary === void 0 ? "Stegindikator med " + steps.length + " steg, du er p\xE5 steg " + (activeIndex + 1) + " " + steps[activeIndex] + "," : _ref$ariaLabelSummary,
728
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
729
- return React.createElement("ol", _extends({
730
- className: classNames('eds-stepper', className),
731
- "aria-label": ariaLabelSummary
732
- }, rest), steps.map(function (step, i) {
733
- var isCurrent = i === activeIndex;
734
- var isInteractive = interactive && activeIndex > i;
735
- var Element = isInteractive ? 'button' : 'div';
736
- var isCompleted = activeIndex > i;
737
- var currentStepSummary = ariaLabelStep + " " + (i + 1) + " " + ariaLabelOf + " " + steps.length + ", " + step + " " + (isCompleted ? ", " + ariaLabelCompleted : '');
738
- var props = isInteractive ? {
739
- onClick: function onClick() {
740
- return onStepClick == null ? void 0 : onStepClick(i);
741
- }
742
- } : {};
743
- return React.createElement("li", {
744
- key: step,
745
- className: "eds-stepper__step__wrapper"
746
- }, React.createElement(Element, _extends({
747
- className: classNames('eds-stepper__step', {
748
- 'eds-stepper__step--active': isCurrent
749
- }, {
750
- 'eds-stepper__step--completed': isCompleted
751
- }, {
752
- 'eds-stepper__step--interactive': isInteractive
753
- }),
754
- "aria-current": isCurrent ? 'step' : undefined,
755
- type: Element === 'button' ? 'button' : undefined
756
- }, props), React.createElement("div", {
757
- className: "eds-stepper__step__line",
758
- "aria-hidden": true
759
- }), React.createElement("span", {
760
- className: "eds-stepper__step__label",
761
- "aria-hidden": true
762
- }, showStepperIndex && i + 1 + '.', " ", step), React.createElement(a11y.VisuallyHidden, null, currentStepSummary)));
763
- }));
764
- };
765
-
766
- var _excluded = ["active", "className", "as"];
767
- var defaultElement = 'a';
768
- var TopNavigationItem = function TopNavigationItem(_ref) {
769
- var _ref$active = _ref.active,
770
- active = _ref$active === void 0 ? false : _ref$active,
771
- className = _ref.className,
772
- as = _ref.as,
773
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
774
- var Element = as || defaultElement;
775
- return React.createElement(Element, _extends({
776
- className: classNames(['eds-top-navigation-item', className, {
777
- 'eds-top-navigation-item--active': active
778
- }])
779
- }, rest));
780
- };
781
-
782
- utils.warnAboutMissingStyles('menu', 'expand', 'icons', 'typography', 'button', 'layout', 'a11y');
783
-
784
- exports.BreadcrumbItem = BreadcrumbItem;
785
- exports.BreadcrumbNavigation = BreadcrumbNavigation;
786
- exports.CollapsibleSideNavigation = CollapsibleSideNavigation;
787
- exports.OverflowMenu = OverflowMenu;
788
- exports.OverflowMenuItem = OverflowMenuItem;
789
- exports.OverflowMenuLink = OverflowMenuLink;
790
- exports.Pagination = Pagination;
791
- exports.SideNavigation = SideNavigation;
792
- exports.SideNavigationGroup = SideNavigationGroup;
793
- exports.SideNavigationItem = SideNavigationItem;
794
- exports.Stepper = Stepper;
795
- exports.TopNavigationItem = TopNavigationItem;
796
- exports.useSideNavigationContext = useSideNavigationContext;
797
- //# sourceMappingURL=menu.cjs.development.js.map