@entur/menu 4.0.5 → 4.0.6
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/CHANGELOG.md +4 -0
- package/dist/BreadcrumbItem.d.ts +1 -3
- package/dist/TopNavigationItem.d.ts +1 -3
- package/dist/menu.cjs.development.js +125 -109
- package/dist/menu.cjs.development.js.map +1 -1
- package/dist/menu.cjs.production.min.js +1 -1
- package/dist/menu.cjs.production.min.js.map +1 -1
- package/dist/menu.esm.js +47 -33
- package/dist/menu.esm.js.map +1 -1
- package/dist/styles.css +185 -185
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.5...@entur/menu@4.0.6) (2022-02-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @entur/menu
|
|
9
|
+
|
|
6
10
|
## [4.0.5](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.4...@entur/menu@4.0.5) (2021-11-17)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @entur/menu
|
package/dist/BreadcrumbItem.d.ts
CHANGED
|
@@ -15,7 +15,5 @@ export declare type BreadcrumbItemOwnProps = {
|
|
|
15
15
|
};
|
|
16
16
|
export declare type BreadcrumbItemProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<BreadcrumbItemOwnProps, E>;
|
|
17
17
|
declare const defaultElement = "a";
|
|
18
|
-
export declare const BreadcrumbItem: <E extends React.ElementType<any> = "a">({ className, isCurrent, as, ...rest }:
|
|
19
|
-
as?: E | undefined;
|
|
20
|
-
}) => JSX.Element;
|
|
18
|
+
export declare const BreadcrumbItem: <E extends React.ElementType<any> = "a">({ className, isCurrent, as, ...rest }: BreadcrumbItemProps<E>) => JSX.Element;
|
|
21
19
|
export {};
|
|
@@ -17,7 +17,5 @@ export declare type TopNavigationItemOwnProps = {
|
|
|
17
17
|
};
|
|
18
18
|
export declare type TopNavigationItemProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<TopNavigationItemOwnProps, E>;
|
|
19
19
|
declare const defaultElement = "a";
|
|
20
|
-
export declare const TopNavigationItem: <E extends React.ElementType<any> = "a">({ active, className, as, ...rest }:
|
|
21
|
-
as?: E | undefined;
|
|
22
|
-
}) => JSX.Element;
|
|
20
|
+
export declare const TopNavigationItem: <E extends React.ElementType<any> = "a">({ active, className, as, ...rest }: TopNavigationItemProps<E>) => JSX.Element;
|
|
23
21
|
export {};
|
|
@@ -2,12 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
5
|
var utils = require('@entur/utils');
|
|
8
6
|
var React = require('react');
|
|
9
|
-
var
|
|
10
|
-
var classNames = _interopDefault(require('classnames'));
|
|
7
|
+
var classNames = require('classnames');
|
|
11
8
|
var icons = require('@entur/icons');
|
|
12
9
|
var expand = require('@entur/expand');
|
|
13
10
|
var menuButton = require('@reach/menu-button');
|
|
@@ -15,17 +12,22 @@ var typography = require('@entur/typography');
|
|
|
15
12
|
var button = require('@entur/button');
|
|
16
13
|
var layout = require('@entur/layout');
|
|
17
14
|
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
19
|
+
|
|
18
20
|
var BreadcrumbNavigation = function BreadcrumbNavigation(_ref) {
|
|
19
21
|
var _ref$ariaLabel = _ref['aria-label'],
|
|
20
22
|
ariaLabel = _ref$ariaLabel === void 0 ? 'Brødsmulesti' : _ref$ariaLabel,
|
|
21
23
|
children = _ref.children;
|
|
22
|
-
return React__default.createElement("nav", {
|
|
24
|
+
return React__default["default"].createElement("nav", {
|
|
23
25
|
"aria-label": ariaLabel
|
|
24
|
-
}, React__default.createElement("ol", {
|
|
26
|
+
}, React__default["default"].createElement("ol", {
|
|
25
27
|
className: "eds-breadcrumbs"
|
|
26
|
-
}, React__default.Children.map(children, function (child, index) {
|
|
27
|
-
return React__default.cloneElement(child, {
|
|
28
|
-
isCurrent: index + 1 === React__default.Children.count(children)
|
|
28
|
+
}, React__default["default"].Children.map(children, function (child, index) {
|
|
29
|
+
return React__default["default"].cloneElement(child, {
|
|
30
|
+
isCurrent: index + 1 === React__default["default"].Children.count(children)
|
|
29
31
|
});
|
|
30
32
|
})));
|
|
31
33
|
};
|
|
@@ -63,41 +65,43 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
63
65
|
return target;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
|
-
var
|
|
68
|
+
var _excluded$8 = ["className", "isCurrent", "as"];
|
|
69
|
+
var defaultElement$1 = 'a';
|
|
67
70
|
var BreadcrumbItem = function BreadcrumbItem(_ref) {
|
|
68
71
|
var className = _ref.className,
|
|
69
72
|
isCurrent = _ref.isCurrent,
|
|
70
73
|
as = _ref.as,
|
|
71
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
74
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
72
75
|
|
|
73
|
-
var Element = as || defaultElement;
|
|
74
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
|
|
75
|
-
className:
|
|
76
|
-
}, React__default.createElement(Element,
|
|
76
|
+
var Element = as || defaultElement$1;
|
|
77
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("li", {
|
|
78
|
+
className: classNames__default["default"]('eds-breadcrumb__item', className)
|
|
79
|
+
}, React__default["default"].createElement(Element, _extends({
|
|
77
80
|
"aria-current": isCurrent ? 'page' : undefined,
|
|
78
|
-
className:
|
|
81
|
+
className: classNames__default["default"]('eds-breadcrumb__link', {
|
|
79
82
|
'eds-breadcrumb__link--current': isCurrent
|
|
80
83
|
})
|
|
81
|
-
}, rest))), !isCurrent && React__default.createElement(icons.RightArrowIcon, {
|
|
84
|
+
}, rest))), !isCurrent && React__default["default"].createElement(icons.RightArrowIcon, {
|
|
82
85
|
className: "eds-breadcrumb__separator",
|
|
83
86
|
inline: true,
|
|
84
87
|
role: "presentation"
|
|
85
88
|
}));
|
|
86
89
|
};
|
|
87
90
|
|
|
91
|
+
var _excluded$7 = ["className", "children", "size"];
|
|
88
92
|
var SideNavigation = function SideNavigation(_ref) {
|
|
89
93
|
var className = _ref.className,
|
|
90
94
|
children = _ref.children,
|
|
91
95
|
_ref$size = _ref.size,
|
|
92
96
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
93
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
97
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
94
98
|
|
|
95
|
-
if (!children || !React__default.Children.count(children)) {
|
|
99
|
+
if (!children || !React__default["default"].Children.count(children)) {
|
|
96
100
|
return null;
|
|
97
101
|
}
|
|
98
102
|
|
|
99
|
-
return React__default.createElement("ul",
|
|
100
|
-
className:
|
|
103
|
+
return React__default["default"].createElement("ul", _extends({
|
|
104
|
+
className: classNames__default["default"]('eds-side-navigation', {
|
|
101
105
|
'eds-side-navigation--small': size === 'small'
|
|
102
106
|
}, className)
|
|
103
107
|
}, rest), children);
|
|
@@ -124,6 +128,7 @@ function useControllableProp(_ref) {
|
|
|
124
128
|
return prop === undefined ? [internalState, setInternalState] : [prop, updater];
|
|
125
129
|
}
|
|
126
130
|
|
|
131
|
+
var _excluded$6 = ["className", "children", "size", "collapsed", "onCollapseToggle", "collapsibleButtonPosition"];
|
|
127
132
|
var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
|
|
128
133
|
var className = _ref.className,
|
|
129
134
|
children = _ref.children,
|
|
@@ -132,7 +137,7 @@ var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
|
|
|
132
137
|
onCollapseToggle = _ref.onCollapseToggle,
|
|
133
138
|
_ref$collapsibleButto = _ref.collapsibleButtonPosition,
|
|
134
139
|
collapsibleButtonPosition = _ref$collapsibleButto === void 0 ? '50%' : _ref$collapsibleButto,
|
|
135
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
140
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
136
141
|
|
|
137
142
|
var _useControllableProp = useControllableProp({
|
|
138
143
|
prop: collapsible,
|
|
@@ -142,17 +147,17 @@ var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
|
|
|
142
147
|
collapsedMenu = _useControllableProp[0],
|
|
143
148
|
setCollapsedMenu = _useControllableProp[1];
|
|
144
149
|
|
|
145
|
-
return React__default.createElement(SideNavigationContext.Provider, {
|
|
150
|
+
return React__default["default"].createElement(SideNavigationContext.Provider, {
|
|
146
151
|
value: {
|
|
147
152
|
isCollapsed: collapsedMenu
|
|
148
153
|
}
|
|
149
|
-
}, React__default.createElement("ul",
|
|
150
|
-
className:
|
|
154
|
+
}, React__default["default"].createElement("ul", _extends({
|
|
155
|
+
className: classNames__default["default"]('eds-side-navigation', {
|
|
151
156
|
'eds-side-navigation--small': size === 'small'
|
|
152
157
|
}, {
|
|
153
158
|
'eds-side-navigation--collapsed': collapsedMenu
|
|
154
159
|
}, className)
|
|
155
|
-
}, rest), children, React__default.createElement("button", {
|
|
160
|
+
}, rest), children, React__default["default"].createElement("button", {
|
|
156
161
|
className: "eds-side-navigation__collapse-button",
|
|
157
162
|
onClick: function onClick() {
|
|
158
163
|
return setCollapsedMenu(!collapsedMenu);
|
|
@@ -160,13 +165,13 @@ var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
|
|
|
160
165
|
style: {
|
|
161
166
|
top: "" + collapsibleButtonPosition
|
|
162
167
|
}
|
|
163
|
-
}, collapsedMenu ? React__default.createElement(icons.MenuIcon, null) : React__default.createElement(icons.LeftArrowIcon, null))));
|
|
168
|
+
}, collapsedMenu ? React__default["default"].createElement(icons.MenuIcon, null) : React__default["default"].createElement(icons.LeftArrowIcon, null))));
|
|
164
169
|
};
|
|
165
|
-
var SideNavigationContext = /*#__PURE__*/React__default.createContext({
|
|
170
|
+
var SideNavigationContext = /*#__PURE__*/React__default["default"].createContext({
|
|
166
171
|
isCollapsed: false
|
|
167
172
|
});
|
|
168
173
|
var useSideNavigationContext = function useSideNavigationContext() {
|
|
169
|
-
var context = React__default.useContext(SideNavigationContext);
|
|
174
|
+
var context = React__default["default"].useContext(SideNavigationContext);
|
|
170
175
|
|
|
171
176
|
if (!context) {
|
|
172
177
|
console.error('Error reading SideNavigationContext. Please contact maintainer of @entur/menu');
|
|
@@ -200,6 +205,10 @@ var useShowDelayedLabel = function useShowDelayedLabel(isCollapsed) {
|
|
|
200
205
|
return [showLabel];
|
|
201
206
|
};
|
|
202
207
|
|
|
208
|
+
var _excluded$5 = ["className", "active", "subMenu", "icon", "children", "as"],
|
|
209
|
+
_excluded2$1 = ["children"],
|
|
210
|
+
_excluded3$1 = ["active", "disabled", "children", "forceExpandSubMenus", "as"];
|
|
211
|
+
|
|
203
212
|
function isActiveRecursively(child) {
|
|
204
213
|
if (!child.props) {
|
|
205
214
|
return false;
|
|
@@ -213,13 +222,13 @@ function isActiveRecursively(child) {
|
|
|
213
222
|
return false;
|
|
214
223
|
}
|
|
215
224
|
|
|
216
|
-
return React__default.Children.toArray(child.props.children).some(function (child) {
|
|
225
|
+
return React__default["default"].Children.toArray(child.props.children).some(function (child) {
|
|
217
226
|
return isActiveRecursively(child);
|
|
218
227
|
});
|
|
219
228
|
}
|
|
220
229
|
|
|
221
230
|
var defaultElementBaseItem = 'a';
|
|
222
|
-
var BaseSideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
231
|
+
var BaseSideNavigationItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
223
232
|
var className = _ref.className,
|
|
224
233
|
_ref$active = _ref.active,
|
|
225
234
|
active = _ref$active === void 0 ? false : _ref$active,
|
|
@@ -227,7 +236,7 @@ var BaseSideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_r
|
|
|
227
236
|
icon = _ref.icon,
|
|
228
237
|
children = _ref.children,
|
|
229
238
|
as = _ref.as,
|
|
230
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
239
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
231
240
|
|
|
232
241
|
var Element = as || defaultElementBaseItem;
|
|
233
242
|
|
|
@@ -237,20 +246,20 @@ var BaseSideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_r
|
|
|
237
246
|
var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
|
|
238
247
|
showLabel = _useShowDelayedLabel[0];
|
|
239
248
|
|
|
240
|
-
return React__default.createElement("li", {
|
|
241
|
-
className:
|
|
242
|
-
}, React__default.createElement(Element,
|
|
243
|
-
className:
|
|
249
|
+
return React__default["default"].createElement("li", {
|
|
250
|
+
className: classNames__default["default"]('eds-side-navigation__item', className)
|
|
251
|
+
}, React__default["default"].createElement(Element, _extends({
|
|
252
|
+
className: classNames__default["default"]('eds-side-navigation__click-target', {
|
|
244
253
|
'eds-side-navigation__click-target--active': active
|
|
245
254
|
}),
|
|
246
255
|
ref: ref
|
|
247
256
|
}, rest), icon, showLabel && children), subMenu);
|
|
248
257
|
});
|
|
249
|
-
var DisabledSideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
|
|
258
|
+
var DisabledSideNavigationItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
250
259
|
var children = _ref2.children,
|
|
251
|
-
rest = _objectWithoutPropertiesLoose(_ref2,
|
|
260
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
252
261
|
|
|
253
|
-
return React__default.createElement(BaseSideNavigationItem,
|
|
262
|
+
return React__default["default"].createElement(BaseSideNavigationItem, _extends({
|
|
254
263
|
as: "button",
|
|
255
264
|
disabled: true,
|
|
256
265
|
"aria-disabled": true,
|
|
@@ -258,16 +267,16 @@ var DisabledSideNavigationItem = /*#__PURE__*/React__default.forwardRef(function
|
|
|
258
267
|
}, rest), children);
|
|
259
268
|
});
|
|
260
269
|
var defaultElementItem = 'a';
|
|
261
|
-
var SideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
270
|
+
var SideNavigationItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref3, ref) {
|
|
262
271
|
var active = _ref3.active,
|
|
263
272
|
disabled = _ref3.disabled,
|
|
264
273
|
children = _ref3.children,
|
|
265
274
|
forceExpandSubMenus = _ref3.forceExpandSubMenus,
|
|
266
275
|
as = _ref3.as,
|
|
267
|
-
rest = _objectWithoutPropertiesLoose(_ref3,
|
|
276
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
|
|
268
277
|
|
|
269
278
|
var Element = as || defaultElementItem;
|
|
270
|
-
var childrenArray = React__default.Children.toArray(children);
|
|
279
|
+
var childrenArray = React__default["default"].Children.toArray(children);
|
|
271
280
|
var subMenu = childrenArray.find(function (child) {
|
|
272
281
|
return child && child.type && child.type.__IS_ENTUR_MENU__;
|
|
273
282
|
});
|
|
@@ -276,13 +285,13 @@ var SideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref3,
|
|
|
276
285
|
}) : children;
|
|
277
286
|
|
|
278
287
|
if (disabled) {
|
|
279
|
-
return React__default.createElement(DisabledSideNavigationItem,
|
|
288
|
+
return React__default["default"].createElement(DisabledSideNavigationItem, _extends({
|
|
280
289
|
ref: ref
|
|
281
290
|
}, rest), label);
|
|
282
291
|
}
|
|
283
292
|
|
|
284
293
|
if (!subMenu) {
|
|
285
|
-
return React__default.createElement(BaseSideNavigationItem,
|
|
294
|
+
return React__default["default"].createElement(BaseSideNavigationItem, _extends({
|
|
286
295
|
as: Element,
|
|
287
296
|
active: active,
|
|
288
297
|
ref: ref
|
|
@@ -295,7 +304,7 @@ var SideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref3,
|
|
|
295
304
|
active: active
|
|
296
305
|
}
|
|
297
306
|
});
|
|
298
|
-
return React__default.createElement(BaseSideNavigationItem,
|
|
307
|
+
return React__default["default"].createElement(BaseSideNavigationItem, _extends({
|
|
299
308
|
active: active,
|
|
300
309
|
subMenu: isExpanded && subMenu,
|
|
301
310
|
"aria-expanded": isExpanded,
|
|
@@ -304,6 +313,7 @@ var SideNavigationItem = /*#__PURE__*/React__default.forwardRef(function (_ref3,
|
|
|
304
313
|
}, rest), label);
|
|
305
314
|
});
|
|
306
315
|
|
|
316
|
+
var _excluded$4 = ["defaultOpen", "open", "onToggle", "className", "children", "title", "icon"];
|
|
307
317
|
var SideNavigationGroup = function SideNavigationGroup(_ref) {
|
|
308
318
|
var _ref$defaultOpen = _ref.defaultOpen,
|
|
309
319
|
defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
|
|
@@ -313,7 +323,7 @@ var SideNavigationGroup = function SideNavigationGroup(_ref) {
|
|
|
313
323
|
children = _ref.children,
|
|
314
324
|
title = _ref.title,
|
|
315
325
|
icon = _ref.icon,
|
|
316
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
326
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
317
327
|
|
|
318
328
|
var _useControllableProp = useControllableProp({
|
|
319
329
|
prop: open,
|
|
@@ -329,35 +339,36 @@ var SideNavigationGroup = function SideNavigationGroup(_ref) {
|
|
|
329
339
|
var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
|
|
330
340
|
showLabel = _useShowDelayedLabel[0];
|
|
331
341
|
|
|
332
|
-
return React__default.createElement("div",
|
|
333
|
-
className:
|
|
334
|
-
}, rest), React__default.createElement("button", {
|
|
342
|
+
return React__default["default"].createElement("div", _extends({
|
|
343
|
+
className: classNames__default["default"]('eds-side-navigation-group', className)
|
|
344
|
+
}, rest), React__default["default"].createElement("button", {
|
|
335
345
|
onClick: function onClick() {
|
|
336
346
|
return setOpen(!isOpen);
|
|
337
347
|
},
|
|
338
348
|
type: "button",
|
|
339
349
|
className: "eds-side-navigation-group__trigger"
|
|
340
|
-
}, React__default.createElement("span", null, icon && React__default.createElement("span", {
|
|
350
|
+
}, React__default["default"].createElement("span", null, icon && React__default["default"].createElement("span", {
|
|
341
351
|
className: "eds-side-navigation-group__trigger-icon"
|
|
342
|
-
}, icon), showLabel && title), showLabel && React__default.createElement(expand.ExpandArrow, {
|
|
352
|
+
}, icon), showLabel && title), showLabel && React__default["default"].createElement(expand.ExpandArrow, {
|
|
343
353
|
open: isOpen,
|
|
344
354
|
className: "eds-side-navigation-group__expand-icon"
|
|
345
|
-
})), React__default.createElement(expand.BaseExpand, {
|
|
355
|
+
})), React__default["default"].createElement(expand.BaseExpand, {
|
|
346
356
|
open: isOpen
|
|
347
357
|
}, children));
|
|
348
358
|
};
|
|
349
359
|
|
|
350
|
-
var
|
|
360
|
+
var _excluded$3 = ["active", "className", "as"];
|
|
361
|
+
var defaultElement = 'a';
|
|
351
362
|
var TopNavigationItem = function TopNavigationItem(_ref) {
|
|
352
363
|
var _ref$active = _ref.active,
|
|
353
364
|
active = _ref$active === void 0 ? false : _ref$active,
|
|
354
365
|
className = _ref.className,
|
|
355
366
|
as = _ref.as,
|
|
356
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
367
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
357
368
|
|
|
358
|
-
var Element = as || defaultElement
|
|
359
|
-
return React__default.createElement(Element,
|
|
360
|
-
className:
|
|
369
|
+
var Element = as || defaultElement;
|
|
370
|
+
return React__default["default"].createElement(Element, _extends({
|
|
371
|
+
className: classNames__default["default"](['eds-top-navigation-item', className, {
|
|
361
372
|
'eds-top-navigation-item--active': active
|
|
362
373
|
}])
|
|
363
374
|
}, rest));
|
|
@@ -369,8 +380,8 @@ var PaginationPage = function PaginationPage(_ref) {
|
|
|
369
380
|
selected = _ref.selected,
|
|
370
381
|
onClick = _ref.onClick,
|
|
371
382
|
ariaLabel = _ref['aria-label'];
|
|
372
|
-
return React__default.createElement("button", {
|
|
373
|
-
className:
|
|
383
|
+
return React__default["default"].createElement("button", {
|
|
384
|
+
className: classNames__default["default"]('eds-pagination__page', {
|
|
374
385
|
'eds-pagination__page--selected': selected
|
|
375
386
|
}, className),
|
|
376
387
|
disabled: selected,
|
|
@@ -388,12 +399,12 @@ var PaginationInput = function PaginationInput(_ref) {
|
|
|
388
399
|
label = _ref$label === void 0 ? 'Gå til side' : _ref$label,
|
|
389
400
|
onPageChange = _ref.onPageChange;
|
|
390
401
|
|
|
391
|
-
var _React$useState = React__default.useState(String(currentPage)),
|
|
402
|
+
var _React$useState = React__default["default"].useState(String(currentPage)),
|
|
392
403
|
input = _React$useState[0],
|
|
393
404
|
setInput = _React$useState[1]; // If the currentPage prop changes, we want to reset the input field
|
|
394
405
|
|
|
395
406
|
|
|
396
|
-
React__default.useEffect(function () {
|
|
407
|
+
React__default["default"].useEffect(function () {
|
|
397
408
|
setInput(String(currentPage));
|
|
398
409
|
}, [currentPage]);
|
|
399
410
|
|
|
@@ -427,13 +438,13 @@ var PaginationInput = function PaginationInput(_ref) {
|
|
|
427
438
|
setInput(e.target.value);
|
|
428
439
|
};
|
|
429
440
|
|
|
430
|
-
return React__default.createElement("form", {
|
|
441
|
+
return React__default["default"].createElement("form", {
|
|
431
442
|
onSubmit: handleSubmit,
|
|
432
443
|
noValidate: true,
|
|
433
444
|
"aria-label": "form"
|
|
434
|
-
}, React__default.createElement("label", null, React__default.createElement("span", {
|
|
445
|
+
}, React__default["default"].createElement("label", null, React__default["default"].createElement("span", {
|
|
435
446
|
className: "eds-pagination__input-label"
|
|
436
|
-
}, label), React__default.createElement("input", {
|
|
447
|
+
}, label), React__default["default"].createElement("input", {
|
|
437
448
|
type: "number",
|
|
438
449
|
max: pageCount,
|
|
439
450
|
className: "eds-pagination__input-field",
|
|
@@ -442,42 +453,45 @@ var PaginationInput = function PaginationInput(_ref) {
|
|
|
442
453
|
})));
|
|
443
454
|
};
|
|
444
455
|
|
|
456
|
+
var _excluded$2 = ["children", "className", "button", "position"],
|
|
457
|
+
_excluded2 = ["children", "className", "onSelect", "disabled", "as"],
|
|
458
|
+
_excluded3 = ["children", "as", "className", "onSelect", "disabled"];
|
|
445
459
|
var OverflowMenu = function OverflowMenu(_ref) {
|
|
446
460
|
var children = _ref.children,
|
|
447
461
|
className = _ref.className,
|
|
448
462
|
button$1 = _ref.button,
|
|
449
463
|
_ref$position = _ref.position,
|
|
450
464
|
position = _ref$position === void 0 ? 'right' : _ref$position,
|
|
451
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
465
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
452
466
|
|
|
453
|
-
return React__default.createElement("div", null, React__default.createElement(menuButton.Menu, null, !button$1 ? React__default.createElement(button.IconButton,
|
|
467
|
+
return React__default["default"].createElement("div", null, React__default["default"].createElement(menuButton.Menu, null, !button$1 ? React__default["default"].createElement(button.IconButton, _extends({
|
|
454
468
|
as: menuButton.MenuButton,
|
|
455
|
-
className:
|
|
456
|
-
}, rest), React__default.createElement(icons.VerticalDotsIcon, null)) : React.cloneElement(button$1, _extends({
|
|
469
|
+
className: classNames__default["default"](className, 'eds-overflow-menu__menu-button')
|
|
470
|
+
}, rest), React__default["default"].createElement(icons.VerticalDotsIcon, null)) : React.cloneElement(button$1, _extends({
|
|
457
471
|
as: menuButton.MenuButton,
|
|
458
|
-
className:
|
|
459
|
-
}, rest)), layout.useContrast() ? React__default.createElement(layout.Contrast, {
|
|
460
|
-
className:
|
|
472
|
+
className: classNames__default["default"](className, 'eds-overflow-menu__menu-button')
|
|
473
|
+
}, rest)), layout.useContrast() ? React__default["default"].createElement(layout.Contrast, {
|
|
474
|
+
className: classNames__default["default"]('eds-overflow-menu__menu-list'),
|
|
461
475
|
as: menuButton.MenuList,
|
|
462
476
|
portal: false
|
|
463
|
-
}, [children]) : React__default.createElement(menuButton.MenuList, {
|
|
464
|
-
className:
|
|
477
|
+
}, [children]) : React__default["default"].createElement(menuButton.MenuList, {
|
|
478
|
+
className: classNames__default["default"]('eds-overflow-menu__menu-list', {
|
|
465
479
|
'eds-overflow-menu__menu-list--left': position === 'left'
|
|
466
480
|
}),
|
|
467
481
|
portal: false
|
|
468
482
|
}, [children])));
|
|
469
483
|
};
|
|
470
|
-
var OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
|
|
484
|
+
var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
471
485
|
var children = _ref2.children,
|
|
472
486
|
className = _ref2.className,
|
|
473
487
|
onSelect = _ref2.onSelect,
|
|
474
488
|
disabled = _ref2.disabled,
|
|
475
489
|
_ref2$as = _ref2.as,
|
|
476
490
|
as = _ref2$as === void 0 ? 'div' : _ref2$as,
|
|
477
|
-
rest = _objectWithoutPropertiesLoose(_ref2,
|
|
491
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
478
492
|
|
|
479
|
-
return React__default.createElement(menuButton.MenuItem,
|
|
480
|
-
className:
|
|
493
|
+
return React__default["default"].createElement(menuButton.MenuItem, _extends({
|
|
494
|
+
className: classNames__default["default"]('eds-overflow-menu__item', {
|
|
481
495
|
'eds-overflow-menu__item--disabled': disabled
|
|
482
496
|
}, className),
|
|
483
497
|
onSelect: onSelect,
|
|
@@ -486,18 +500,18 @@ var OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref2, r
|
|
|
486
500
|
as: as
|
|
487
501
|
}, rest), children);
|
|
488
502
|
});
|
|
489
|
-
var OverflowMenuLink = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
503
|
+
var OverflowMenuLink = /*#__PURE__*/React__default["default"].forwardRef(function (_ref3, ref) {
|
|
490
504
|
var children = _ref3.children,
|
|
491
505
|
_ref3$as = _ref3.as,
|
|
492
506
|
as = _ref3$as === void 0 ? 'a' : _ref3$as,
|
|
493
507
|
className = _ref3.className,
|
|
494
508
|
onSelect = _ref3.onSelect,
|
|
495
509
|
disabled = _ref3.disabled,
|
|
496
|
-
rest = _objectWithoutPropertiesLoose(_ref3,
|
|
510
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
|
|
497
511
|
|
|
498
|
-
return React__default.createElement(menuButton.MenuLink,
|
|
512
|
+
return React__default["default"].createElement(menuButton.MenuLink, _extends({
|
|
499
513
|
as: as,
|
|
500
|
-
className:
|
|
514
|
+
className: classNames__default["default"]('eds-overflow-menu__item', {
|
|
501
515
|
'eds-overflow-menu__item--disabled': disabled
|
|
502
516
|
}, className),
|
|
503
517
|
onSelect: onSelect,
|
|
@@ -506,6 +520,7 @@ var OverflowMenuLink = /*#__PURE__*/React__default.forwardRef(function (_ref3, r
|
|
|
506
520
|
}, rest), children);
|
|
507
521
|
});
|
|
508
522
|
|
|
523
|
+
var _excluded$1 = ["className", "currentPage", "inputLabel", "onPageChange", "pageCount", "pageLabel", "previousPageLabel", "showInput", "numberOfResults", "resultsPerPage", "resultsPerPageOptions", "onResultsPerPageChange", "showNumberOfResultsLabel", "nextPageLabel", "showingResultsLabel", "hideNextButton", "hidePrevButton"];
|
|
509
524
|
var Pagination = function Pagination(_ref) {
|
|
510
525
|
var className = _ref.className,
|
|
511
526
|
currentPage = _ref.currentPage,
|
|
@@ -536,7 +551,7 @@ var Pagination = function Pagination(_ref) {
|
|
|
536
551
|
hideNextButton = _ref$hideNextButton === void 0 ? false : _ref$hideNextButton,
|
|
537
552
|
_ref$hidePrevButton = _ref.hidePrevButton,
|
|
538
553
|
hidePrevButton = _ref$hidePrevButton === void 0 ? false : _ref$hidePrevButton,
|
|
539
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
554
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
540
555
|
|
|
541
556
|
var isContrast = layout.useContrast();
|
|
542
557
|
|
|
@@ -561,41 +576,41 @@ var Pagination = function Pagination(_ref) {
|
|
|
561
576
|
entries = [].concat(entries.slice(0, currentPageIndex), [currentPage, currentPage + 1, currentPage + 2, '…', pageCount]);
|
|
562
577
|
}
|
|
563
578
|
|
|
564
|
-
return React__default.createElement("div",
|
|
565
|
-
className:
|
|
566
|
-
}, rest), resultsPerPage && numberOfResults && React__default.createElement("div", {
|
|
579
|
+
return React__default["default"].createElement("div", _extends({
|
|
580
|
+
className: classNames__default["default"]('eds-pagination', className)
|
|
581
|
+
}, rest), resultsPerPage && numberOfResults && React__default["default"].createElement("div", {
|
|
567
582
|
className: "eds-pagination__results"
|
|
568
|
-
}, onResultsPerPageChange && React__default.createElement(menuButton.Menu, null, function (_ref2) {
|
|
583
|
+
}, onResultsPerPageChange && React__default["default"].createElement(menuButton.Menu, null, function (_ref2) {
|
|
569
584
|
var isOpen = _ref2.isOpen;
|
|
570
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement(typography.Label, null, showNumberOfResultsLabel), React__default.createElement(menuButton.MenuButton, {
|
|
571
|
-
className:
|
|
585
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(typography.Label, null, showNumberOfResultsLabel), React__default["default"].createElement(menuButton.MenuButton, {
|
|
586
|
+
className: classNames__default["default"]('eds-pagination-menu__menu-button', {
|
|
572
587
|
'eds-pagination-menu__menu-button--open': isOpen
|
|
573
588
|
})
|
|
574
|
-
}, resultsPerPage, isOpen ? React__default.createElement(icons.UpArrowIcon, null) : React__default.createElement(icons.DownArrowIcon, null)), React__default.createElement(menuButton.MenuList, {
|
|
575
|
-
className:
|
|
589
|
+
}, resultsPerPage, isOpen ? React__default["default"].createElement(icons.UpArrowIcon, null) : React__default["default"].createElement(icons.DownArrowIcon, null)), React__default["default"].createElement(menuButton.MenuList, {
|
|
590
|
+
className: classNames__default["default"]('eds-pagination-menu__menu-list', 'eds-overflow-menu__menu-list', {
|
|
576
591
|
'eds-contrast': isContrast
|
|
577
592
|
})
|
|
578
593
|
}, resultsPerPageOptions.map(function (option, key) {
|
|
579
|
-
return React__default.createElement(OverflowMenuItem, {
|
|
594
|
+
return React__default["default"].createElement(OverflowMenuItem, {
|
|
580
595
|
key: key,
|
|
581
596
|
onSelect: function onSelect() {
|
|
582
597
|
return onResultsPerPageChange(option);
|
|
583
598
|
}
|
|
584
599
|
}, option);
|
|
585
600
|
})));
|
|
586
|
-
}), React__default.createElement(typography.Label, {
|
|
601
|
+
}), React__default["default"].createElement(typography.Label, {
|
|
587
602
|
className: "eds-pagination__results-label"
|
|
588
|
-
}, showingResultsLabel((currentPage - 1) * resultsPerPage + 1, currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage, numberOfResults))), React__default.createElement("div", {
|
|
603
|
+
}, showingResultsLabel((currentPage - 1) * resultsPerPage + 1, currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage, numberOfResults))), React__default["default"].createElement("div", {
|
|
589
604
|
className: "eds-pagination__controls"
|
|
590
|
-
}, !isFirstPostSelected && !hidePrevButton && React__default.createElement(PaginationPage, {
|
|
605
|
+
}, !isFirstPostSelected && !hidePrevButton && React__default["default"].createElement(PaginationPage, {
|
|
591
606
|
onClick: function onClick() {
|
|
592
607
|
return onPageChange(currentPage - 1);
|
|
593
608
|
},
|
|
594
609
|
"aria-label": previousPageLabel
|
|
595
|
-
}, React__default.createElement(icons.LeftArrowIcon, null)), entries.map(function (entry, index) {
|
|
596
|
-
return entry === '…' ? React__default.createElement(Ellipsis, {
|
|
610
|
+
}, React__default["default"].createElement(icons.LeftArrowIcon, null)), entries.map(function (entry, index) {
|
|
611
|
+
return entry === '…' ? React__default["default"].createElement(Ellipsis, {
|
|
597
612
|
key: "ellipsis-" + index
|
|
598
|
-
}) : React__default.createElement(PaginationPage, {
|
|
613
|
+
}) : React__default["default"].createElement(PaginationPage, {
|
|
599
614
|
selected: entry === currentPage,
|
|
600
615
|
onClick: function onClick() {
|
|
601
616
|
return onPageChange(entry);
|
|
@@ -603,12 +618,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
603
618
|
"aria-label": pageLabel(entry),
|
|
604
619
|
key: entry
|
|
605
620
|
}, entry);
|
|
606
|
-
}), !isLastPostSelected && !hideNextButton && React__default.createElement(PaginationPage, {
|
|
621
|
+
}), !isLastPostSelected && !hideNextButton && React__default["default"].createElement(PaginationPage, {
|
|
607
622
|
onClick: function onClick() {
|
|
608
623
|
return onPageChange(currentPage + 1);
|
|
609
624
|
},
|
|
610
625
|
"aria-label": nextPageLabel
|
|
611
|
-
}, React__default.createElement(icons.RightArrowIcon, null)), showInput && React__default.createElement(PaginationInput, {
|
|
626
|
+
}, React__default["default"].createElement(icons.RightArrowIcon, null)), showInput && React__default["default"].createElement(PaginationInput, {
|
|
612
627
|
pageCount: pageCount,
|
|
613
628
|
currentPage: currentPage,
|
|
614
629
|
onPageChange: onPageChange,
|
|
@@ -617,12 +632,13 @@ var Pagination = function Pagination(_ref) {
|
|
|
617
632
|
};
|
|
618
633
|
|
|
619
634
|
var Ellipsis = function Ellipsis() {
|
|
620
|
-
return React__default.createElement("span", {
|
|
635
|
+
return React__default["default"].createElement("span", {
|
|
621
636
|
className: "eds-pagination__ellipsis",
|
|
622
637
|
"aria-hidden": "true"
|
|
623
638
|
}, "\u2026");
|
|
624
639
|
};
|
|
625
640
|
|
|
641
|
+
var _excluded = ["className", "onStepClick", "steps", "activeIndex", "interactive", "showStepperIndex"];
|
|
626
642
|
var Stepper = function Stepper(_ref) {
|
|
627
643
|
var className = _ref.className,
|
|
628
644
|
onStepClick = _ref.onStepClick,
|
|
@@ -632,11 +648,11 @@ var Stepper = function Stepper(_ref) {
|
|
|
632
648
|
interactive = _ref$interactive === void 0 ? false : _ref$interactive,
|
|
633
649
|
_ref$showStepperIndex = _ref.showStepperIndex,
|
|
634
650
|
showStepperIndex = _ref$showStepperIndex === void 0 ? true : _ref$showStepperIndex,
|
|
635
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
651
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
636
652
|
|
|
637
653
|
var Element = interactive ? 'button' : 'div';
|
|
638
|
-
return React__default.createElement("div",
|
|
639
|
-
className:
|
|
654
|
+
return React__default["default"].createElement("div", _extends({
|
|
655
|
+
className: classNames__default["default"]('eds-stepper', className)
|
|
640
656
|
}, rest), steps.map(function (step, i) {
|
|
641
657
|
var isActive = i === activeIndex;
|
|
642
658
|
var hasBeenActive = activeIndex > i;
|
|
@@ -645,21 +661,21 @@ var Stepper = function Stepper(_ref) {
|
|
|
645
661
|
return onStepClick(i);
|
|
646
662
|
}
|
|
647
663
|
} : {};
|
|
648
|
-
return React__default.createElement(Element,
|
|
664
|
+
return React__default["default"].createElement(Element, _extends({
|
|
649
665
|
key: step,
|
|
650
|
-
className:
|
|
666
|
+
className: classNames__default["default"]('eds-stepper__item__container', {
|
|
651
667
|
'eds-stepper__item__container--non-interactive': !interactive
|
|
652
668
|
})
|
|
653
|
-
}, props), React__default.createElement("div", {
|
|
654
|
-
className:
|
|
669
|
+
}, props), React__default["default"].createElement("div", {
|
|
670
|
+
className: classNames__default["default"]('eds-stepper__item__square', {
|
|
655
671
|
'eds-stepper__item__square--active': isActive
|
|
656
672
|
}, {
|
|
657
673
|
'eds-stepper__item__square--inactive': activeIndex < i
|
|
658
674
|
}, {
|
|
659
675
|
'eds-stepper__item__square--has-been': hasBeenActive
|
|
660
676
|
})
|
|
661
|
-
}), React__default.createElement(typography.Label, {
|
|
662
|
-
className:
|
|
677
|
+
}), React__default["default"].createElement(typography.Label, {
|
|
678
|
+
className: classNames__default["default"]('eds-stepper__item__label', {
|
|
663
679
|
'eds-stepper__item__label--has-been': hasBeenActive
|
|
664
680
|
}, {
|
|
665
681
|
'eds-stepper__item__label--active': isActive
|