@entur/dropdown 7.3.0 → 7.3.2-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,1879 +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 downshift = require('downshift');
8
- var classNames = require('classnames');
9
- var reactDom = require('@floating-ui/react-dom');
10
- var form = require('@entur/form');
11
- var tokens = require('@entur/tokens');
12
- var a11y = require('@entur/a11y');
13
- var button = require('@entur/button');
14
- var chip = require('@entur/chip');
15
- var icons = require('@entur/icons');
16
- var loader = require('@entur/loader');
17
- var tooltip = require('@entur/tooltip');
18
-
19
- function asyncGeneratorStep(n, t, e, r, o, a, c) {
20
- try {
21
- var i = n[a](c),
22
- u = i.value;
23
- } catch (n) {
24
- return void e(n);
25
- }
26
- i.done ? t(u) : Promise.resolve(u).then(r, o);
27
- }
28
- function _asyncToGenerator(n) {
29
- return function () {
30
- var t = this,
31
- e = arguments;
32
- return new Promise(function (r, o) {
33
- var a = n.apply(t, e);
34
- function _next(n) {
35
- asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
36
- }
37
- function _throw(n) {
38
- asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
39
- }
40
- _next(void 0);
41
- });
42
- };
43
- }
44
- function _extends() {
45
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
46
- for (var e = 1; e < arguments.length; e++) {
47
- var t = arguments[e];
48
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
49
- }
50
- return n;
51
- }, _extends.apply(null, arguments);
52
- }
53
- function _objectWithoutPropertiesLoose(r, e) {
54
- if (null == r) return {};
55
- var t = {};
56
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
57
- if (e.includes(n)) continue;
58
- t[n] = r[n];
59
- }
60
- return t;
61
- }
62
- function _regeneratorRuntime() {
63
- _regeneratorRuntime = function () {
64
- return e;
65
- };
66
- var t,
67
- e = {},
68
- r = Object.prototype,
69
- n = r.hasOwnProperty,
70
- o = Object.defineProperty || function (t, e, r) {
71
- t[e] = r.value;
72
- },
73
- i = "function" == typeof Symbol ? Symbol : {},
74
- a = i.iterator || "@@iterator",
75
- c = i.asyncIterator || "@@asyncIterator",
76
- u = i.toStringTag || "@@toStringTag";
77
- function define(t, e, r) {
78
- return Object.defineProperty(t, e, {
79
- value: r,
80
- enumerable: !0,
81
- configurable: !0,
82
- writable: !0
83
- }), t[e];
84
- }
85
- try {
86
- define({}, "");
87
- } catch (t) {
88
- define = function (t, e, r) {
89
- return t[e] = r;
90
- };
91
- }
92
- function wrap(t, e, r, n) {
93
- var i = e && e.prototype instanceof Generator ? e : Generator,
94
- a = Object.create(i.prototype),
95
- c = new Context(n || []);
96
- return o(a, "_invoke", {
97
- value: makeInvokeMethod(t, r, c)
98
- }), a;
99
- }
100
- function tryCatch(t, e, r) {
101
- try {
102
- return {
103
- type: "normal",
104
- arg: t.call(e, r)
105
- };
106
- } catch (t) {
107
- return {
108
- type: "throw",
109
- arg: t
110
- };
111
- }
112
- }
113
- e.wrap = wrap;
114
- var h = "suspendedStart",
115
- l = "suspendedYield",
116
- f = "executing",
117
- s = "completed",
118
- y = {};
119
- function Generator() {}
120
- function GeneratorFunction() {}
121
- function GeneratorFunctionPrototype() {}
122
- var p = {};
123
- define(p, a, function () {
124
- return this;
125
- });
126
- var d = Object.getPrototypeOf,
127
- v = d && d(d(values([])));
128
- v && v !== r && n.call(v, a) && (p = v);
129
- var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
130
- function defineIteratorMethods(t) {
131
- ["next", "throw", "return"].forEach(function (e) {
132
- define(t, e, function (t) {
133
- return this._invoke(e, t);
134
- });
135
- });
136
- }
137
- function AsyncIterator(t, e) {
138
- function invoke(r, o, i, a) {
139
- var c = tryCatch(t[r], t, o);
140
- if ("throw" !== c.type) {
141
- var u = c.arg,
142
- h = u.value;
143
- return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
144
- invoke("next", t, i, a);
145
- }, function (t) {
146
- invoke("throw", t, i, a);
147
- }) : e.resolve(h).then(function (t) {
148
- u.value = t, i(u);
149
- }, function (t) {
150
- return invoke("throw", t, i, a);
151
- });
152
- }
153
- a(c.arg);
154
- }
155
- var r;
156
- o(this, "_invoke", {
157
- value: function (t, n) {
158
- function callInvokeWithMethodAndArg() {
159
- return new e(function (e, r) {
160
- invoke(t, n, e, r);
161
- });
162
- }
163
- return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
164
- }
165
- });
166
- }
167
- function makeInvokeMethod(e, r, n) {
168
- var o = h;
169
- return function (i, a) {
170
- if (o === f) throw Error("Generator is already running");
171
- if (o === s) {
172
- if ("throw" === i) throw a;
173
- return {
174
- value: t,
175
- done: !0
176
- };
177
- }
178
- for (n.method = i, n.arg = a;;) {
179
- var c = n.delegate;
180
- if (c) {
181
- var u = maybeInvokeDelegate(c, n);
182
- if (u) {
183
- if (u === y) continue;
184
- return u;
185
- }
186
- }
187
- if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
188
- if (o === h) throw o = s, n.arg;
189
- n.dispatchException(n.arg);
190
- } else "return" === n.method && n.abrupt("return", n.arg);
191
- o = f;
192
- var p = tryCatch(e, r, n);
193
- if ("normal" === p.type) {
194
- if (o = n.done ? s : l, p.arg === y) continue;
195
- return {
196
- value: p.arg,
197
- done: n.done
198
- };
199
- }
200
- "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
201
- }
202
- };
203
- }
204
- function maybeInvokeDelegate(e, r) {
205
- var n = r.method,
206
- o = e.iterator[n];
207
- if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
208
- var i = tryCatch(o, e.iterator, r.arg);
209
- if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
210
- var a = i.arg;
211
- return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
212
- }
213
- function pushTryEntry(t) {
214
- var e = {
215
- tryLoc: t[0]
216
- };
217
- 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
218
- }
219
- function resetTryEntry(t) {
220
- var e = t.completion || {};
221
- e.type = "normal", delete e.arg, t.completion = e;
222
- }
223
- function Context(t) {
224
- this.tryEntries = [{
225
- tryLoc: "root"
226
- }], t.forEach(pushTryEntry, this), this.reset(!0);
227
- }
228
- function values(e) {
229
- if (e || "" === e) {
230
- var r = e[a];
231
- if (r) return r.call(e);
232
- if ("function" == typeof e.next) return e;
233
- if (!isNaN(e.length)) {
234
- var o = -1,
235
- i = function next() {
236
- for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
237
- return next.value = t, next.done = !0, next;
238
- };
239
- return i.next = i;
240
- }
241
- }
242
- throw new TypeError(typeof e + " is not iterable");
243
- }
244
- return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
245
- value: GeneratorFunctionPrototype,
246
- configurable: !0
247
- }), o(GeneratorFunctionPrototype, "constructor", {
248
- value: GeneratorFunction,
249
- configurable: !0
250
- }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
251
- var e = "function" == typeof t && t.constructor;
252
- return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
253
- }, e.mark = function (t) {
254
- return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
255
- }, e.awrap = function (t) {
256
- return {
257
- __await: t
258
- };
259
- }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
260
- return this;
261
- }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
262
- void 0 === i && (i = Promise);
263
- var a = new AsyncIterator(wrap(t, r, n, o), i);
264
- return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
265
- return t.done ? t.value : a.next();
266
- });
267
- }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
268
- return this;
269
- }), define(g, "toString", function () {
270
- return "[object Generator]";
271
- }), e.keys = function (t) {
272
- var e = Object(t),
273
- r = [];
274
- for (var n in e) r.push(n);
275
- return r.reverse(), function next() {
276
- for (; r.length;) {
277
- var t = r.pop();
278
- if (t in e) return next.value = t, next.done = !1, next;
279
- }
280
- return next.done = !0, next;
281
- };
282
- }, e.values = values, Context.prototype = {
283
- constructor: Context,
284
- reset: function (e) {
285
- if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
286
- },
287
- stop: function () {
288
- this.done = !0;
289
- var t = this.tryEntries[0].completion;
290
- if ("throw" === t.type) throw t.arg;
291
- return this.rval;
292
- },
293
- dispatchException: function (e) {
294
- if (this.done) throw e;
295
- var r = this;
296
- function handle(n, o) {
297
- return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
298
- }
299
- for (var o = this.tryEntries.length - 1; o >= 0; --o) {
300
- var i = this.tryEntries[o],
301
- a = i.completion;
302
- if ("root" === i.tryLoc) return handle("end");
303
- if (i.tryLoc <= this.prev) {
304
- var c = n.call(i, "catchLoc"),
305
- u = n.call(i, "finallyLoc");
306
- if (c && u) {
307
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
308
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
309
- } else if (c) {
310
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
311
- } else {
312
- if (!u) throw Error("try statement without catch or finally");
313
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
314
- }
315
- }
316
- }
317
- },
318
- abrupt: function (t, e) {
319
- for (var r = this.tryEntries.length - 1; r >= 0; --r) {
320
- var o = this.tryEntries[r];
321
- if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
322
- var i = o;
323
- break;
324
- }
325
- }
326
- i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
327
- var a = i ? i.completion : {};
328
- return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
329
- },
330
- complete: function (t, e) {
331
- if ("throw" === t.type) throw t.arg;
332
- return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
333
- },
334
- finish: function (t) {
335
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
336
- var r = this.tryEntries[e];
337
- if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
338
- }
339
- },
340
- catch: function (t) {
341
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
342
- var r = this.tryEntries[e];
343
- if (r.tryLoc === t) {
344
- var n = r.completion;
345
- if ("throw" === n.type) {
346
- var o = n.arg;
347
- resetTryEntry(r);
348
- }
349
- return o;
350
- }
351
- }
352
- throw Error("illegal catch attempt");
353
- },
354
- delegateYield: function (e, r, n) {
355
- return this.delegate = {
356
- iterator: values(e),
357
- resultName: r,
358
- nextLoc: n
359
- }, "next" === this.method && (this.arg = t), y;
360
- }
361
- }, e;
362
- }
363
-
364
- var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "readOnly"];
365
- var DropdownList = function DropdownList(_ref) {
366
- var _listItems$;
367
- var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
368
- ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
369
- _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
370
- ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
371
- getItemProps = _ref.getItemProps,
372
- getMenuProps = _ref.getMenuProps,
373
- isOpen = _ref.isOpen,
374
- highlightedIndex = _ref.highlightedIndex,
375
- listItems = _ref.listItems,
376
- floatingStyles = _ref.floatingStyles,
377
- setListRef = _ref.setListRef,
378
- _ref$loading = _ref.loading,
379
- loading = _ref$loading === void 0 ? false : _ref$loading,
380
- _ref$loadingText = _ref.loadingText,
381
- loadingText = _ref$loadingText === void 0 ? 'Laster inn …' : _ref$loadingText,
382
- _ref$noMatchesText = _ref.noMatchesText,
383
- noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen treff for søket' : _ref$noMatchesText,
384
- selectAllCheckboxState = _ref.selectAllCheckboxState,
385
- selectAllItem = _ref.selectAllItem,
386
- selectedItems = _ref.selectedItems,
387
- _ref$readOnly = _ref.readOnly,
388
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
389
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
390
- var isMultiselect = selectAllItem !== undefined;
391
- var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null || (_listItems$ = listItems[0]) == null ? void 0 : _listItems$.value) === (selectAllItem == null ? void 0 : selectAllItem.value));
392
- var isItemSelected = function isItemSelected(item) {
393
- return selectedItems.some(function (selectedItem) {
394
- return (selectedItem == null ? void 0 : selectedItem.value) === (item == null ? void 0 : item.value) && (selectedItem == null ? void 0 : selectedItem.label) === (item == null ? void 0 : item.label);
395
- });
396
- };
397
- var ariaValuesSelectAll = function ariaValuesSelectAll() {
398
- switch (selectAllCheckboxState == null ? void 0 : selectAllCheckboxState()) {
399
- case 'indeterminate':
400
- {
401
- return {
402
- label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt",
403
- selected: false
404
- };
405
- }
406
- case true:
407
- {
408
- return {
409
- label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular,
410
- selected: true
411
- };
412
- }
413
- default:
414
- {
415
- return {
416
- label: "" + (selectAllItem == null ? void 0 : selectAllItem.label),
417
- selected: false
418
- };
419
- }
420
- }
421
- };
422
- var selectAllListItemContent = function selectAllListItemContent() {
423
- return React.createElement(React.Fragment, null, React.createElement(form.Checkbox, {
424
- "aria-hidden": "true",
425
- checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
426
- className: "eds-dropdown__list__item__checkbox",
427
- tabIndex: -1,
428
- onChange: function onChange() {
429
- return undefined;
430
- }
431
- }), React.createElement("span", {
432
- className: "eds-dropdown__list__item__text",
433
- "aria-label": ariaValuesSelectAll().label
434
- }, selectAllItem == null ? void 0 : selectAllItem.label));
435
- };
436
- var isReactComponent = function isReactComponent(icon) {
437
- return typeof icon === 'function' || typeof icon === 'object' && icon !== null && '$$typeof' in icon && typeof icon.$$typeof === 'symbol';
438
- };
439
- var listItemContent = function listItemContent(item) {
440
- return React.createElement(React.Fragment, null, isMultiselect && React.createElement(form.Checkbox, {
441
- "aria-hidden": "true",
442
- checked: isItemSelected(item),
443
- className: "eds-dropdown__list__item__checkbox",
444
- tabIndex: -1,
445
- onChange: function onChange() {
446
- return undefined;
447
- }
448
- }), React.createElement("span", {
449
- className: "eds-dropdown__list__item__text"
450
- }, item.label, React.createElement(a11y.VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
451
- var _ref2, _Icon$displayName;
452
- var key = ((_ref2 = (_Icon$displayName = Icon.displayName) != null ? _Icon$displayName : Icon.name) != null ? _ref2 : Icon.name) + "-" + index;
453
- return React.createElement(Icon, {
454
- key: key,
455
- inline: true,
456
- className: "eds-dropdown__list__item__icon"
457
- });
458
- }) : null);
459
- };
460
- return (
461
- // use popover from @entur/tooltip when that package upgrades to floating-ui
462
- React.createElement("ul", _extends({}, getMenuProps({
463
- 'aria-multiselectable': isMultiselect,
464
- ref: setListRef,
465
- className: 'eds-dropdown__list',
466
- style: _extends({}, floatingStyles, {
467
- display: isOpen && !readOnly ? undefined : 'none'
468
- }, rest.style)
469
- })), function () {
470
- if (!isOpen || readOnly) {
471
- return null;
472
- }
473
- if (loading) {
474
- return React.createElement("li", {
475
- key: "dropdown-list-loading",
476
- className: "eds-dropdown__list__item"
477
- }, loadingText);
478
- }
479
- if (isNoMatches) {
480
- return React.createElement("li", {
481
- key: "dropdown-list-no-match",
482
- className: "eds-dropdown__list__item"
483
- }, noMatchesText);
484
- }
485
- return listItems.map(function (item, index) {
486
- var _item$itemKey, _item$label, _item$value, _item$icons;
487
- var key = (_item$itemKey = item.itemKey) != null ? _item$itemKey : ((_item$label = item.label) != null ? _item$label : '') + "-" + ((_item$value = item.value) != null ? _item$value : '') + "-" + ((_item$icons = item.icons) != null ? _item$icons : []).map(function (icon) {
488
- var _ref3, _icon$displayName;
489
- return (_ref3 = (_icon$displayName = icon == null ? void 0 : icon.displayName) != null ? _icon$displayName : icon == null ? void 0 : icon.name) != null ? _ref3 : 'unknown';
490
- }).join('-');
491
- var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
492
- if (itemIsSelectAll && listItems.length <= 2) return null;
493
- return React.createElement("li", _extends({
494
- className: classNames('eds-dropdown__list__item', {
495
- 'eds-dropdown__list__item--select-all': itemIsSelectAll,
496
- 'eds-dropdown__list__item--highlighted': highlightedIndex === index,
497
- 'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
498
- }),
499
- key: key
500
- }, getItemProps({
501
- // @ts-expect-error Since getItemProps expects the same item type
502
- // here as items, it throws error when selectAllItem is a string.
503
- // This does, however, not cause any functional issues.
504
- item: item,
505
- index: index,
506
- 'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
507
- })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
508
- });
509
- }())
510
- );
511
- };
512
-
513
- var _excluded$4 = ["tabIndex"],
514
- _excluded2 = ["ariaLabelCloseList", "ariaLabelOpenList", "clearable", "labelClearSelected", "focusable", "disabled", "isOpen", "loading", "loadingText", "onClear", "itemIsSelected"];
515
- var SelectedItemTag = function SelectedItemTag(_ref) {
516
- var _getSelectedItemProps;
517
- var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
518
- _ref$ariaLabelChosen = _ref.ariaLabelChosen,
519
- ariaLabelChosen = _ref$ariaLabelChosen === void 0 ? 'valgt' : _ref$ariaLabelChosen,
520
- disabled = _ref.disabled,
521
- getSelectedItemProps = _ref.getSelectedItemProps,
522
- index = _ref.index,
523
- readOnly = _ref.readOnly,
524
- removeSelectedItem = _ref.removeSelectedItem,
525
- selectedItem = _ref.selectedItem;
526
- var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
527
- selectedItem: selectedItem,
528
- index: index
529
- })) != null ? _getSelectedItemProps : {},
530
- selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
531
- return React.createElement(chip.TagChip, _extends({
532
- size: "small",
533
- className: classNames('eds-dropdown__selected-item-tag', {
534
- 'eds-dropdown__selected-item-tag--readonly': readOnly,
535
- 'eds-dropdown__selected-item-tag--disabled': disabled
536
- })
537
- }, selectedItemProps, {
538
- onClose: function onClose(e) {
539
- e.stopPropagation();
540
- removeSelectedItem(selectedItem);
541
- },
542
- onClick: function onClick(e) {
543
- return e.stopPropagation();
544
- },
545
- closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
546
- key: selectedItem.value,
547
- "aria-live": "polite"
548
- }), React.createElement("span", {
549
- "aria-hidden": "true",
550
- className: "eds-dropdown__selected-item-tag__text"
551
- }, selectedItem.label));
552
- };
553
- var DropdownFieldAppendix = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
554
- var ariaLabelCloseList = _ref3.ariaLabelCloseList,
555
- ariaLabelOpenList = _ref3.ariaLabelOpenList,
556
- _ref3$clearable = _ref3.clearable,
557
- clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
558
- labelClearSelected = _ref3.labelClearSelected,
559
- _ref3$focusable = _ref3.focusable,
560
- focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
561
- disabled = _ref3.disabled,
562
- isOpen = _ref3.isOpen,
563
- _ref3$loading = _ref3.loading,
564
- loading = _ref3$loading === void 0 ? false : _ref3$loading,
565
- loadingText = _ref3.loadingText,
566
- onClear = _ref3.onClear,
567
- itemIsSelected = _ref3.itemIsSelected,
568
- rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
569
- function getToggleAriaLabel() {
570
- if (loading) return loadingText;
571
- if (isOpen) return ariaLabelCloseList;
572
- return ariaLabelOpenList;
573
- }
574
- return React.createElement(React.Fragment, null, !disabled && React.createElement("div", {
575
- className: "eds-dropdown__appendix"
576
- }, clearable && itemIsSelected && React.createElement(ClearableButton, {
577
- onClear: onClear,
578
- focusable: true,
579
- labelClearSelectedItems: labelClearSelected
580
- }), React.createElement(button.IconButton, _extends({
581
- className: classNames('eds-dropdown__appendix__toggle-button', {
582
- 'eds-dropdown__appendix__toggle-button--open': isOpen
583
- }),
584
- ref: ref,
585
- "aria-label": getToggleAriaLabel()
586
- }, rest, {
587
- type: "button",
588
- tabIndex: focusable ? 0 : -1
589
- }), !loading ? React.createElement(icons.DownArrowIcon, {
590
- "aria-hidden": "true"
591
- }) : React.createElement(loader.LoadingDots, {
592
- "aria-hidden": "true"
593
- }))));
594
- });
595
- var ClearableButton = function ClearableButton(_ref4) {
596
- var onClear = _ref4.onClear,
597
- _ref4$labelClearSelec = _ref4.labelClearSelectedItems,
598
- labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
599
- _ref4$focusable = _ref4.focusable,
600
- focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
601
- return React.createElement(React.Fragment, null, React.createElement(tooltip.Tooltip, {
602
- "aria-hidden": "true",
603
- placement: "top",
604
- content: labelClearSelectedItems,
605
- className: "eds-dropdown__appendix__clear-button__tooltip"
606
- }, React.createElement(button.IconButton, {
607
- className: "eds-dropdown__appendix__clear-button",
608
- type: "button",
609
- tabIndex: focusable ? 0 : -1,
610
- // These events bubble up to the Dropdown container and trigger openMenu.
611
- // To avoid this, stopPropagation and preventDefault are added.
612
- onClick: function onClick(e) {
613
- e.stopPropagation();
614
- onClear();
615
- },
616
- onKeyDown: function onKeyDown(e) {
617
- if (e.key === 'Enter' || e.key === ' ') {
618
- e.preventDefault();
619
- e.stopPropagation();
620
- onClear();
621
- }
622
- },
623
- "aria-label": labelClearSelectedItems
624
- }, React.createElement(icons.CloseSmallIcon, {
625
- "aria-hidden": "true"
626
- }))), React.createElement("div", {
627
- className: "eds-dropdown__appendix__divider"
628
- }));
629
- };
630
-
631
- var useNormalizedItems = function useNormalizedItems(items) {
632
- return React.useMemo(function () {
633
- return items.map(function (item) {
634
- if (typeof item == 'string') {
635
- return {
636
- value: item,
637
- label: item
638
- };
639
- }
640
- if ((item == null ? void 0 : item.value) === undefined) {
641
- return _extends({}, item, {
642
- value: item.label
643
- });
644
- }
645
- return _extends({}, item, {
646
- value: item.value
647
- });
648
- });
649
- }, [items]);
650
- };
651
-
652
- var useResolvedItems = function useResolvedItems(/** The list of items, or an async function that resolves the list of items */
653
- itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
654
- debounceTimeout) {
655
- if (debounceTimeout === void 0) {
656
- debounceTimeout = 250;
657
- }
658
- var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
659
- var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
660
- items = _React$useState[0],
661
- setItems = _React$useState[1];
662
- var _React$useState2 = React.useState(false),
663
- loading = _React$useState2[0],
664
- setLoading = _React$useState2[1];
665
- var abortControllerRef = React.useRef(new AbortController());
666
- // We normalize the itemsResolver argument to an async function, so we
667
- // can use it without thinking about the differences later
668
- var itemsResolver = React.useMemo(function () {
669
- if (itemsIsAFunction) return itemsOrItemsResolver;
670
- return function () {
671
- return Promise.resolve(itemsOrItemsResolver);
672
- };
673
- }, [itemsOrItemsResolver, itemsIsAFunction]);
674
- // This should be called whenever the input value changes
675
- var updateItems = /*#__PURE__*/function () {
676
- var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
677
- var _abortControllerRef$c;
678
- var abortController, _abortControllerRef$c2, resolvedItems;
679
- return _regeneratorRuntime().wrap(function _callee$(_context) {
680
- while (1) switch (_context.prev = _context.next) {
681
- case 0:
682
- // The abortController handles cleanup of the previous request and unmounting
683
- if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null || (_abortControllerRef$c = abortControllerRef.current) == null || _abortControllerRef$c.abort();
684
- abortController = new AbortController();
685
- abortControllerRef.current = abortController;
686
- setLoading(true);
687
- _context.prev = 4;
688
- _context.next = 7;
689
- return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
690
- case 7:
691
- resolvedItems = _context.sent;
692
- if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c2 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c2.aborted)) {
693
- _context.next = 11;
694
- break;
695
- }
696
- console.warn('Avbryt den asynkrone funksjonen din med signalet fra AbortController-en for å for å unngå minnelekkasje.', 'Funksjonen bør kaste en DOMException med navnet "AbortError" når den avbrytes.', '', '\n\nSe eksempel her: https://linje.entur.no/komponenter/skjemaelementer/dropdown#s%C3%B8kbar-dropdown-med-valg-fra-nettverkskall-bassert-p%C3%A5-tekstinput', '\nLes mer om AbortController her: https://developer.mozilla.org/en-US/docs/Web/API/AbortController');
697
- return _context.abrupt("return");
698
- case 11:
699
- setLoading(false);
700
- setItems(resolvedItems);
701
- _context.next = 21;
702
- break;
703
- case 15:
704
- _context.prev = 15;
705
- _context.t0 = _context["catch"](4);
706
- if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
707
- _context.next = 19;
708
- break;
709
- }
710
- return _context.abrupt("return");
711
- case 19:
712
- console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
713
- throw _context.t0;
714
- case 21:
715
- case "end":
716
- return _context.stop();
717
- }
718
- }, _callee, null, [[4, 15]]);
719
- }));
720
- return function updateItems(_x) {
721
- return _ref.apply(this, arguments);
722
- };
723
- }();
724
- var debouncedFetchItems = utils.useDebounce(updateItems, debounceTimeout);
725
- var normalizedItems = useNormalizedItems(items);
726
- React.useEffect(function () {
727
- // send abort signal to previous request on unmount for cleanup
728
- return function () {
729
- var _abortControllerRef$c3;
730
- return abortControllerRef == null || (_abortControllerRef$c3 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c3.abort('Component unmounted');
731
- };
732
- }, []);
733
- React.useEffect(function () {
734
- // Let's fetch the list initially if it's specified
735
- if (itemsIsAFunction) {
736
- debouncedFetchItems('');
737
- }
738
- }, [itemsIsAFunction, itemsResolver]);
739
- return {
740
- items: normalizedItems,
741
- loading: itemsIsAFunction ? loading : false,
742
- fetchItems: debouncedFetchItems
743
- };
744
- };
745
-
746
- /* start general utils */
747
- var EMPTY_INPUT = '';
748
- function lowerCaseFilterTest(item, input) {
749
- if (!input) {
750
- return true;
751
- }
752
- var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
753
- var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
754
- return inputRegex.test(item.label);
755
- }
756
- function noFilter(
757
- //@ts-expect-error only here to comply with dropdown filter API
758
- item,
759
- //@ts-expect-error only here to comply with dropdown filter API
760
- input) {
761
- return true;
762
- }
763
- var itemToString = function itemToString(item) {
764
- return item ? item.label : '';
765
- };
766
- var itemToKey = function itemToKey(item) {
767
- return (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value);
768
- };
769
- var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
770
- return typeof object === 'function' && object.length > 0;
771
- };
772
- var clamp = function clamp(val, min, max) {
773
- if (min === void 0) {
774
- min = 1;
775
- }
776
- if (max === void 0) {
777
- max = 10;
778
- }
779
- return Math.min(Math.max(val, min), max);
780
- };
781
- var useMultiselectUtils = function useMultiselectUtils(_ref) {
782
- var listItems = _ref.listItems,
783
- selectedItems = _ref.selectedItems,
784
- selectAll = _ref.selectAll;
785
- var hasSelectedItems = selectedItems.length > 0;
786
- var listItemsWithoutSelectAll = listItems.filter(function (item) {
787
- return item.value !== selectAll.value;
788
- });
789
- var unselectedItemsInListItems = listItemsWithoutSelectAll.filter(function (listItem) {
790
- return !selectedItems.some(function (selectedItem) {
791
- return selectedItem.value === listItem.value;
792
- });
793
- });
794
- var allListItemsAreSelected = !listItemsWithoutSelectAll.some(function (listItem) {
795
- return !selectedItems.some(function (selectedItem) {
796
- return selectedItem.value === listItem.value;
797
- });
798
- });
799
- var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (listItem) {
800
- return selectedItems.some(function (selectedItem) {
801
- return selectedItem.value === listItem.value;
802
- });
803
- });
804
- var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
805
- return onChange([].concat(selectedItems, [clickedItem]));
806
- };
807
- var clickedItemIsInSelectedItems = function clickedItemIsInSelectedItems(clickedItem) {
808
- return selectedItems.some(function (selectedItem) {
809
- return selectedItem.value === clickedItem.value;
810
- });
811
- };
812
- var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
813
- return clickedItem.value === selectAll.value;
814
- };
815
- var handleListItemClicked = function handleListItemClicked(_ref2) {
816
- var clickedItem = _ref2.clickedItem,
817
- onChange = _ref2.onChange;
818
- if (clickedItemIsSelectAll(clickedItem)) {
819
- if (allListItemsAreSelected) {
820
- return unselectAllListItems(onChange);
821
- }
822
- return selectAllUnselectedItemsInListItems(onChange);
823
- }
824
- if (clickedItemIsInSelectedItems(clickedItem)) {
825
- return removeClickedItemFromSelectedItems(clickedItem, onChange);
826
- }
827
- addClickedItemToSelectedItems(clickedItem, onChange);
828
- };
829
- var removeClickedItemFromSelectedItems = function removeClickedItemFromSelectedItems(clickedItem, onChange) {
830
- return onChange(selectedItems.filter(function (selectedItem) {
831
- return selectedItem.value !== clickedItem.value;
832
- }));
833
- };
834
- var selectAllCheckboxState = function selectAllCheckboxState() {
835
- if (allListItemsAreSelected) return true;
836
- if (someListItemsAreSelected) return 'indeterminate';
837
- return false;
838
- };
839
- var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
840
- onChange([].concat(selectedItems, unselectedItemsInListItems));
841
- };
842
- var unselectAllListItems = function unselectAllListItems(onChange) {
843
- var selectedItemsWithoutItemsInListItems = selectedItems.filter(function (selectedItem) {
844
- return !listItemsWithoutSelectAll.some(function (listItem) {
845
- return listItem.value === selectedItem.value;
846
- });
847
- });
848
- onChange(selectedItemsWithoutItemsInListItems);
849
- };
850
- return {
851
- addClickedItemToSelectedItems: addClickedItemToSelectedItems,
852
- allListItemsAreSelected: allListItemsAreSelected,
853
- clickedItemIsInSelectedItems: clickedItemIsInSelectedItems,
854
- clickedItemIsSelectAll: clickedItemIsSelectAll,
855
- handleListItemClicked: handleListItemClicked,
856
- hasSelectedItems: hasSelectedItems,
857
- listItemsWithoutSelectAll: listItemsWithoutSelectAll,
858
- removeClickedItemFromSelectedItems: removeClickedItemFromSelectedItems,
859
- selectAllCheckboxState: selectAllCheckboxState,
860
- selectAllUnselectedItemsInListItems: selectAllUnselectedItemsInListItems,
861
- someListItemsAreSelected: someListItemsAreSelected,
862
- unselectAllListItems: unselectAllListItems
863
- };
864
- };
865
- /* end multiselect utils */
866
- /* start a11y utils */
867
- // called when the state changes:
868
- // selectedItem, highlightedIndex, inputValue or isOpen.
869
- function getA11yStatusMessage(options) {
870
- var isOpen = options.isOpen,
871
- _options$selectAllIte = options.selectAllItemIncluded,
872
- selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
873
- resultCount = options.resultCount;
874
- if (!isOpen) {
875
- return '';
876
- }
877
- var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
878
- if (resultCountWithoutSelectAll === 0) {
879
- return 'Ingen resultater';
880
- }
881
- return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.";
882
- }
883
- /* end a11y utils */
884
-
885
- var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
886
- var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
887
- var _document, _getInputProps2, _selectedItem$label;
888
- var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
889
- _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
890
- ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
891
- _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
892
- ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
893
- ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
894
- className = _ref.className,
895
- _ref$clearable = _ref.clearable,
896
- clearable = _ref$clearable === void 0 ? true : _ref$clearable,
897
- debounceTimeout = _ref.debounceTimeout,
898
- _ref$disabled = _ref.disabled,
899
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
900
- _ref$disableLabelAnim = _ref.disableLabelAnimation,
901
- disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
902
- feedback = _ref.feedback,
903
- initialItems = _ref.items,
904
- _ref$itemFilter = _ref.itemFilter,
905
- itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
906
- label = _ref.label,
907
- _ref$labelClearSelect = _ref.labelClearSelectedItem,
908
- labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
909
- labelTooltip = _ref.labelTooltip,
910
- listStyle = _ref.listStyle,
911
- loading = _ref.loading,
912
- _ref$loadingText = _ref.loadingText,
913
- loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
914
- _ref$noMatchesText = _ref.noMatchesText,
915
- noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
916
- _ref$onChange = _ref.onChange,
917
- onChange = _ref$onChange === void 0 ? function () {
918
- return undefined;
919
- } : _ref$onChange,
920
- placeholder = _ref.placeholder,
921
- prepend = _ref.prepend,
922
- _ref$readOnly = _ref.readOnly,
923
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
924
- value = _ref.selectedItem,
925
- _ref$selectOnBlur = _ref.selectOnBlur,
926
- selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
927
- _ref$selectOnTab = _ref.selectOnTab,
928
- selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
929
- style = _ref.style,
930
- _ref$variant = _ref.variant,
931
- variant = _ref$variant === void 0 ? 'info' : _ref$variant,
932
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
933
- var _useState = React.useState(value !== null),
934
- showSelectedItem = _useState[0],
935
- setShowSelectedItem = _useState[1];
936
- var _useState2 = React.useState(0),
937
- lastHighlightedIndex = _useState2[0],
938
- setLastHighlightedIndex = _useState2[1];
939
- var inputRef = React.useRef(null);
940
- var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
941
- normalizedItems = _useResolvedItems.items,
942
- resolvedItemsLoading = _useResolvedItems.loading,
943
- fetchItems = _useResolvedItems.fetchItems;
944
- var _useState3 = React.useState(normalizedItems),
945
- listItems = _useState3[0],
946
- setListItems = _useState3[1];
947
- var filterListItems = function filterListItems(_ref2) {
948
- var inputValue = _ref2.inputValue;
949
- return setListItems(normalizedItems.filter(function (item) {
950
- return itemFilter(item, inputValue);
951
- }));
952
- };
953
- var updateListItems = function updateListItems(_ref3) {
954
- var inputValue = _ref3.inputValue;
955
- var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
956
- if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
957
- filterListItems({
958
- inputValue: inputValue != null ? inputValue : EMPTY_INPUT
959
- });
960
- };
961
- var resetInputState = function resetInputState(_ref4) {
962
- var changes = _ref4.changes;
963
- updateListItems({
964
- inputValue: EMPTY_INPUT
965
- });
966
- return _extends({}, changes, {
967
- inputValue: EMPTY_INPUT
968
- });
969
- };
970
- var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
971
- React.useEffect(function () {
972
- filterListItems({
973
- inputValue: inputValue
974
- });
975
- }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
976
- React.useEffect(function () {
977
- // sync internal state on initial render
978
- if (selectedItem !== null && !inputHasFocus) {
979
- setShowSelectedItem(true);
980
- updateListItems({
981
- inputValue: EMPTY_INPUT
982
- });
983
- setInputValue(EMPTY_INPUT);
984
- }
985
- }, []);
986
- var stateReducer = React.useCallback(function (state, _ref5) {
987
- var type = _ref5.type,
988
- changes = _ref5.changes;
989
- if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
990
- setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
991
- }
992
- switch (type) {
993
- // empty input to show selected item and reset dropdown list on item selection
994
- case downshift.useCombobox.stateChangeTypes.ItemClick:
995
- case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
996
- case downshift.useCombobox.stateChangeTypes.InputBlur:
997
- return resetInputState({
998
- changes: changes
999
- });
1000
- case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
1001
- if (changes.selectedItem !== null && !inputHasFocus) setShowSelectedItem(true);
1002
- return resetInputState({
1003
- changes: changes
1004
- });
1005
- // remove leading whitespace, select element with spacebar on empty input
1006
- case downshift.useCombobox.stateChangeTypes.InputChange:
1007
- {
1008
- var _changes$inputValue;
1009
- var leadingWhitespaceTest = /^\s+/g;
1010
- var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
1011
- if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
1012
- if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
1013
- var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
1014
- if (isSpacePressedOnEmptyInput) {
1015
- if (!state.isOpen) return _extends({}, changes, {
1016
- inputValue: sanitizedInputValue,
1017
- isOpen: true
1018
- });
1019
- if (changes.highlightedIndex !== undefined) {
1020
- return _extends({}, changes, {
1021
- inputValue: sanitizedInputValue,
1022
- selectedItem: listItems[changes.highlightedIndex]
1023
- });
1024
- }
1025
- }
1026
- }
1027
- return _extends({}, changes, {
1028
- highlightedIndex: 0
1029
- });
1030
- }
1031
- default:
1032
- return changes;
1033
- }
1034
- }, [fetchItems, filterListItems, inputHasFocus, resetInputState]);
1035
- var _useCombobox = downshift.useCombobox({
1036
- defaultHighlightedIndex: lastHighlightedIndex,
1037
- items: listItems,
1038
- itemToString: itemToString,
1039
- selectedItem: value,
1040
- stateReducer: stateReducer,
1041
- onInputValueChange: function onInputValueChange(changes) {
1042
- updateListItems({
1043
- inputValue: changes.inputValue
1044
- });
1045
- },
1046
- onSelectedItemChange: function onSelectedItemChange(_ref6) {
1047
- var newSelectedItem = _ref6.selectedItem;
1048
- onChange(newSelectedItem);
1049
- },
1050
- // Accessibility
1051
- getA11yStatusMessage: function getA11yStatusMessage$1(options) {
1052
- return getA11yStatusMessage(_extends({}, options, {
1053
- resultCount: listItems.length
1054
- }));
1055
- }
1056
- }),
1057
- isOpen = _useCombobox.isOpen,
1058
- getToggleButtonProps = _useCombobox.getToggleButtonProps,
1059
- getLabelProps = _useCombobox.getLabelProps,
1060
- getMenuProps = _useCombobox.getMenuProps,
1061
- getInputProps = _useCombobox.getInputProps,
1062
- highlightedIndex = _useCombobox.highlightedIndex,
1063
- getItemProps = _useCombobox.getItemProps,
1064
- selectedItem = _useCombobox.selectedItem,
1065
- inputValue = _useCombobox.inputValue,
1066
- setInputValue = _useCombobox.setInputValue,
1067
- selectItem = _useCombobox.selectItem,
1068
- reset = _useCombobox.reset;
1069
- // calculations for floating-UI popover position
1070
- var _useFloating = reactDom.useFloating({
1071
- open: isOpen,
1072
- placement: 'bottom-start',
1073
- middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
1074
- padding: tokens.space.extraSmall
1075
- }), reactDom.size({
1076
- apply: function apply(_ref7) {
1077
- var rects = _ref7.rects,
1078
- elements = _ref7.elements,
1079
- availableHeight = _ref7.availableHeight;
1080
- Object.assign(elements.floating.style, {
1081
- width: rects.reference.width + "px",
1082
- // Floating will flip when smaller than 10*16 px
1083
- // and never exceed 20*16 px.
1084
- maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
1085
- });
1086
- }
1087
- }), reactDom.flip({
1088
- fallbackStrategy: 'initialPlacement'
1089
- })]
1090
- }),
1091
- refs = _useFloating.refs,
1092
- floatingStyles = _useFloating.floatingStyles,
1093
- update = _useFloating.update;
1094
- // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
1095
- // the useFloating hook but this requires the floating element to be conditionally rendered.
1096
- // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
1097
- // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
1098
- React.useEffect(function () {
1099
- if (isOpen && refs.reference.current && refs.floating.current) {
1100
- return reactDom.autoUpdate(refs.reference.current, refs.floating.current, update);
1101
- }
1102
- }, [isOpen, refs.reference, refs.floating, update]);
1103
- var handleOnClear = function handleOnClear() {
1104
- var _inputRef$current;
1105
- (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
1106
- reset();
1107
- };
1108
- return React.createElement(form.BaseFormControl, _extends({
1109
- className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
1110
- 'eds-dropdown--has-tooltip': labelTooltip !== undefined
1111
- }),
1112
- disabled: disabled,
1113
- disableLabelAnimation: disableLabelAnimation,
1114
- feedback: feedback,
1115
- isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
1116
- label: label,
1117
- labelId: getLabelProps().id,
1118
- labelProps: getLabelProps(),
1119
- labelTooltip: labelTooltip,
1120
- onBlur: function onBlur() {
1121
- return setInputValue('');
1122
- },
1123
- onClick: function onClick(e) {
1124
- if (e.target === e.currentTarget) {
1125
- var _getInputProps;
1126
- (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
1127
- }
1128
- },
1129
- prepend: prepend,
1130
- readOnly: readOnly,
1131
- ref: refs.setReference,
1132
- style: style,
1133
- tabIndex: disabled || readOnly ? -1 : undefined,
1134
- variant: variant,
1135
- after: React.createElement(DropdownList, {
1136
- ariaLabelChosenSingular: ariaLabelChosenSingular,
1137
- ariaLabelSelectedItem: ariaLabelSelectedItem,
1138
- floatingStyles: floatingStyles,
1139
- getItemProps: getItemProps,
1140
- getMenuProps: getMenuProps,
1141
- highlightedIndex: highlightedIndex,
1142
- isOpen: isOpen,
1143
- listItems: listItems,
1144
- style: listStyle,
1145
- setListRef: refs.setFloating,
1146
- loading: loading != null ? loading : resolvedItemsLoading,
1147
- loadingText: loadingText,
1148
- noMatchesText: noMatchesText,
1149
- selectedItems: selectedItem !== null ? [selectedItem] : [],
1150
- readOnly: readOnly
1151
- })
1152
- }, rest, {
1153
- // Append is not supported as of now
1154
- append: undefined
1155
- }), React.createElement("span", {
1156
- className: classNames('eds-dropdown--searchable__selected-item', {
1157
- 'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
1158
- }),
1159
- onClick: readOnly ? undefined : (_getInputProps2 = getInputProps()) == null ? void 0 : _getInputProps2.onClick,
1160
- tabIndex: readOnly ? 0 : -1
1161
- }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
1162
- className: classNames('eds-dropdown__input eds-form-control', {
1163
- 'eds-dropdown__input--hidden': showSelectedItem
1164
- })
1165
- }, getInputProps({
1166
- onKeyDown: function onKeyDown(e) {
1167
- if (isOpen && e.key === 'Tab') {
1168
- var highlitedItem = listItems[highlightedIndex];
1169
- // we don't want to clear selection with tab
1170
- if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
1171
- selectItem(highlitedItem);
1172
- }
1173
- }
1174
- },
1175
- onBlur: function onBlur() {
1176
- if (selectedItem !== null) setShowSelectedItem(true);
1177
- },
1178
- onFocus: function onFocus() {
1179
- if (!readOnly) {
1180
- setShowSelectedItem(false);
1181
- }
1182
- },
1183
- disabled: disabled,
1184
- readOnly: readOnly,
1185
- placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
1186
- tabIndex: disabled || readOnly ? -1 : undefined,
1187
- ref: utils.mergeRefs(inputRef, ref)
1188
- }))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
1189
- 'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
1190
- }), {
1191
- ariaLabelCloseList: ariaLabelCloseList,
1192
- ariaLabelOpenList: ariaLabelOpenList,
1193
- clearable: clearable,
1194
- disabled: disabled || readOnly,
1195
- onClear: handleOnClear,
1196
- focusable: false,
1197
- labelClearSelected: labelClearSelectedItem,
1198
- isOpen: isOpen,
1199
- itemIsSelected: selectedItem !== null,
1200
- loadingText: loadingText,
1201
- loading: loading != null ? loading : resolvedItemsLoading
1202
- })));
1203
- });
1204
-
1205
- var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loading", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
1206
- var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1207
- var _inputRef$current4;
1208
- var className = _ref.className,
1209
- _ref$clearable = _ref.clearable,
1210
- clearable = _ref$clearable === void 0 ? true : _ref$clearable,
1211
- _ref$clearInputOnSele = _ref.clearInputOnSelect,
1212
- clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
1213
- debounceTimeout = _ref.debounceTimeout,
1214
- _ref$disabled = _ref.disabled,
1215
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
1216
- disableLabelAnimation = _ref.disableLabelAnimation,
1217
- feedback = _ref.feedback,
1218
- _ref$hideSelectAll = _ref.hideSelectAll,
1219
- hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
1220
- initialItems = _ref.items,
1221
- _ref$itemFilter = _ref.itemFilter,
1222
- itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
1223
- label = _ref.label,
1224
- _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
1225
- labelAllItemsSelected = _ref$labelAllItemsSel === void 0 ? 'Alle valgt' : _ref$labelAllItemsSel,
1226
- _ref$labelClearAllIte = _ref.labelClearAllItems,
1227
- labelClearAllItems = _ref$labelClearAllIte === void 0 ? 'Fjern valgte' : _ref$labelClearAllIte,
1228
- _ref$labelSelectAll = _ref.labelSelectAll,
1229
- labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
1230
- labelTooltip = _ref.labelTooltip,
1231
- listStyle = _ref.listStyle,
1232
- loading = _ref.loading,
1233
- _ref$loadingText = _ref.loadingText,
1234
- loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
1235
- _ref$maxChips = _ref.maxChips,
1236
- maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
1237
- noMatchesText = _ref.noMatchesText,
1238
- _ref$onChange = _ref.onChange,
1239
- onChange = _ref$onChange === void 0 ? function () {
1240
- return undefined;
1241
- } : _ref$onChange,
1242
- placeholder = _ref.placeholder,
1243
- _ref$readOnly = _ref.readOnly,
1244
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
1245
- _ref$selectedItems = _ref.selectedItems,
1246
- selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
1247
- _ref$selectOnTab = _ref.selectOnTab,
1248
- selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
1249
- style = _ref.style,
1250
- _ref$variant = _ref.variant,
1251
- variant = _ref$variant === void 0 ? 'information' : _ref$variant,
1252
- ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
1253
- _ref$ariaLabelChosenP = _ref.ariaLabelChosenPlural,
1254
- ariaLabelChosenPlural = _ref$ariaLabelChosenP === void 0 ? 'valgte' : _ref$ariaLabelChosenP,
1255
- _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
1256
- ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
1257
- _ref$ariaLabelJumpToI = _ref.ariaLabelJumpToInput,
1258
- ariaLabelJumpToInput = _ref$ariaLabelJumpToI === void 0 ? selectedItems.length + " valgte elementer, trykk for \xE5 hoppe til tekstfeltet" : _ref$ariaLabelJumpToI,
1259
- _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
1260
- ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
1261
- _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
1262
- ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
1263
- ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
1264
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
1265
- var _React$useState = React.useState(0),
1266
- lastHighlightedIndex = _React$useState[0],
1267
- setLastHighlightedIndex = _React$useState[1];
1268
- var inputRef = React.useRef(null);
1269
- React.useEffect(function () {
1270
- //@ts-expect-error this is done to aid developers debug wrong prop usage
1271
- if (rest.selectedItem !== undefined) console.warn("Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?");
1272
- //@ts-expect-error selectedItem should not actually exist in rest
1273
- }, [rest.selectedItem]);
1274
- var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
1275
- normalizedItems = _useResolvedItems.items,
1276
- resolvedItemsLoading = _useResolvedItems.loading,
1277
- fetchItems = _useResolvedItems.fetchItems;
1278
- var isAllNonAsyncItemsSelected = typeof initialItems !== 'function' && selectedItems.length === normalizedItems.length;
1279
- // special 'item' used as Select All entry in the dropdown list
1280
- var selectAll = {
1281
- value: utils.useRandomId('select-all'),
1282
- label: labelSelectAll
1283
- };
1284
- // special 'item' used as a replacement selected item tag for when
1285
- // there are more selected element than maxChips
1286
- var summarySelectedItems = React.useMemo(function () {
1287
- return {
1288
- value: EMPTY_INPUT,
1289
- label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
1290
- };
1291
- }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
1292
- var _useState = React.useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
1293
- listItems = _useState[0],
1294
- setListItems = _useState[1];
1295
- var filterListItems = function filterListItems(_ref2) {
1296
- var inputValue = _ref2.inputValue;
1297
- return setListItems([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems.filter(function (item) {
1298
- return itemFilter(item, inputValue);
1299
- })));
1300
- };
1301
- var updateListItems = function updateListItems(_ref3) {
1302
- var inputValue = _ref3.inputValue;
1303
- var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
1304
- if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
1305
- filterListItems({
1306
- inputValue: inputValue != null ? inputValue : EMPTY_INPUT
1307
- });
1308
- };
1309
- React.useEffect(function () {
1310
- filterListItems({
1311
- inputValue: inputValue
1312
- });
1313
- }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
1314
- var _useMultiselectUtils = useMultiselectUtils({
1315
- listItems: listItems,
1316
- selectAll: selectAll,
1317
- selectedItems: selectedItems
1318
- }),
1319
- hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
1320
- handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
1321
- selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState,
1322
- clickedItemIsInSelectedItems = _useMultiselectUtils.clickedItemIsInSelectedItems,
1323
- clickedItemIsSelectAll = _useMultiselectUtils.clickedItemIsSelectAll;
1324
- var _useMultipleSelection = downshift.useMultipleSelection({
1325
- selectedItems: selectedItems,
1326
- // @ts-expect-error prop missing from library types
1327
- itemToString: itemToString,
1328
- itemToKey: itemToKey,
1329
- onSelectedItemsChange: function onSelectedItemsChange(_ref4) {
1330
- var newSelectedItems = _ref4.selectedItems;
1331
- onChange(newSelectedItems);
1332
- }
1333
- }),
1334
- getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
1335
- getDropdownProps = _useMultipleSelection.getDropdownProps,
1336
- reset = _useMultipleSelection.reset,
1337
- _removeSelectedItem = _useMultipleSelection.removeSelectedItem,
1338
- setSelectedItems = _useMultipleSelection.setSelectedItems;
1339
- var stateReducer = React.useCallback(function (state, _ref5) {
1340
- var changes = _ref5.changes,
1341
- type = _ref5.type;
1342
- if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
1343
- setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
1344
- }
1345
- switch (type) {
1346
- // reset input value when leaving input field
1347
- case downshift.useCombobox.stateChangeTypes.InputBlur:
1348
- return _extends({}, changes, {
1349
- inputValue: EMPTY_INPUT
1350
- });
1351
- // keep menu open and edit input value on item selection
1352
- case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
1353
- case downshift.useCombobox.stateChangeTypes.ItemClick:
1354
- {
1355
- var _inputRef$current$val, _inputRef$current;
1356
- return _extends({}, changes, {
1357
- isOpen: true,
1358
- inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
1359
- });
1360
- }
1361
- // edit input value when selected items is updated outside component
1362
- case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
1363
- {
1364
- var _inputRef$current$val2, _inputRef$current2;
1365
- return _extends({}, changes, {
1366
- inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
1367
- });
1368
- }
1369
- // remove leading whitespace, select item with spacebar if input is empty and filter list items
1370
- case downshift.useCombobox.stateChangeTypes.InputChange:
1371
- {
1372
- var _changes$inputValue;
1373
- var leadingWhitespaceTest = /^\s+/g;
1374
- var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
1375
- if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
1376
- var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
1377
- if (isSpacePressedOnEmptyInput) {
1378
- if (!state.isOpen) return _extends({}, changes, {
1379
- inputValue: sanitizedInputValue,
1380
- isOpen: true
1381
- });
1382
- if (changes.highlightedIndex !== undefined) {
1383
- return _extends({}, changes, {
1384
- inputValue: sanitizedInputValue,
1385
- selectedItem: listItems[changes.highlightedIndex]
1386
- });
1387
- }
1388
- }
1389
- }
1390
- return changes;
1391
- }
1392
- default:
1393
- return changes;
1394
- }
1395
- }, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
1396
- var _useCombobox = downshift.useCombobox(_extends({
1397
- defaultHighlightedIndex: lastHighlightedIndex,
1398
- // after selection, highlight previously selected item.
1399
- items: listItems,
1400
- itemToString: itemToString,
1401
- selectedItem: null,
1402
- stateReducer: stateReducer,
1403
- onInputValueChange: function onInputValueChange(changes) {
1404
- updateListItems({
1405
- inputValue: changes.inputValue
1406
- });
1407
- // set highlighted item to first item after search
1408
- setHighlightedIndex(hideSelectAll ? 0 : 1);
1409
- setLastHighlightedIndex(hideSelectAll ? 0 : 1);
1410
- },
1411
- onSelectedItemChange: function onSelectedItemChange(_ref6) {
1412
- var clickedItem = _ref6.selectedItem;
1413
- // clickedItem means item chosen either via mouse or keyboard
1414
- if (!clickedItem) return;
1415
- handleListItemClicked({
1416
- clickedItem: clickedItem,
1417
- onChange: setSelectedItems
1418
- });
1419
- },
1420
- // Accessibility
1421
- getA11yStatusMessage: function getA11yStatusMessage$1(options) {
1422
- return getA11yStatusMessage(_extends({}, options, {
1423
- selectAllItemIncluded: !hideSelectAll,
1424
- resultCount: listItems.length
1425
- }));
1426
- }
1427
- }, rest)),
1428
- getInputProps = _useCombobox.getInputProps,
1429
- getItemProps = _useCombobox.getItemProps,
1430
- getLabelProps = _useCombobox.getLabelProps,
1431
- getMenuProps = _useCombobox.getMenuProps,
1432
- getToggleButtonProps = _useCombobox.getToggleButtonProps,
1433
- highlightedIndex = _useCombobox.highlightedIndex,
1434
- setHighlightedIndex = _useCombobox.setHighlightedIndex,
1435
- inputValue = _useCombobox.inputValue,
1436
- isOpen = _useCombobox.isOpen,
1437
- setInputValue = _useCombobox.setInputValue;
1438
- // calculations for floating-UI popover position
1439
- var _useFloating = reactDom.useFloating({
1440
- open: isOpen,
1441
- placement: 'bottom-start',
1442
- middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
1443
- padding: tokens.space.extraSmall
1444
- }), reactDom.size({
1445
- apply: function apply(_ref7) {
1446
- var rects = _ref7.rects,
1447
- elements = _ref7.elements,
1448
- availableHeight = _ref7.availableHeight;
1449
- Object.assign(elements.floating.style, {
1450
- width: rects.reference.width + "px",
1451
- // Floating will flip when smaller than 10*16 px
1452
- // and never exceed 20*16 px.
1453
- maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
1454
- });
1455
- }
1456
- }), reactDom.flip({
1457
- fallbackStrategy: 'initialPlacement'
1458
- })]
1459
- }),
1460
- refs = _useFloating.refs,
1461
- floatingStyles = _useFloating.floatingStyles,
1462
- update = _useFloating.update;
1463
- // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
1464
- // the useFloating hook but this requires the floating element to be conditionally rendered.
1465
- // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
1466
- // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
1467
- React.useEffect(function () {
1468
- if (isOpen && refs.reference.current && refs.floating.current) {
1469
- return reactDom.autoUpdate(refs.reference.current, refs.floating.current, update);
1470
- }
1471
- }, [isOpen, refs.reference, refs.floating, update]);
1472
- var handleOnClear = function handleOnClear() {
1473
- var _inputRef$current3;
1474
- (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
1475
- reset();
1476
- };
1477
- return React.createElement(form.BaseFormControl, _extends({
1478
- className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
1479
- 'eds-dropdown--has-tooltip': labelTooltip !== undefined
1480
- }),
1481
- disabled: disabled,
1482
- disableLabelAnimation: disableLabelAnimation,
1483
- feedback: feedback,
1484
- isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
1485
- label: label,
1486
- labelId: getLabelProps().id,
1487
- labelProps: getLabelProps(),
1488
- labelTooltip: labelTooltip,
1489
- onBlur: function onBlur() {
1490
- return setInputValue('');
1491
- },
1492
- onClick: function onClick(e) {
1493
- if (e.target === e.currentTarget) {
1494
- var _getInputProps;
1495
- (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
1496
- }
1497
- },
1498
- readOnly: readOnly,
1499
- ref: refs.setReference,
1500
- style: style,
1501
- variant: variant,
1502
- after: React.createElement(DropdownList, {
1503
- ariaLabelChosenSingular: ariaLabelChosenSingular,
1504
- ariaLabelSelectedItem: ariaLabelSelectedItem,
1505
- floatingStyles: floatingStyles,
1506
- getItemProps: getItemProps,
1507
- getMenuProps: getMenuProps,
1508
- highlightedIndex: highlightedIndex,
1509
- isOpen: isOpen,
1510
- listItems: listItems,
1511
- style: listStyle,
1512
- setListRef: refs.setFloating,
1513
- loading: loading != null ? loading : resolvedItemsLoading,
1514
- loadingText: loadingText,
1515
- noMatchesText: noMatchesText,
1516
- selectAllCheckboxState: selectAllCheckboxState,
1517
- selectAllItem: selectAll,
1518
- selectedItems: selectedItems,
1519
- readOnly: readOnly
1520
- })
1521
- }, rest), React.createElement("div", {
1522
- className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
1523
- 'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
1524
- })
1525
- }, selectedItems.length > 1 ? React.createElement(a11y.VisuallyHidden, {
1526
- onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
1527
- }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
1528
- return React.createElement(SelectedItemTag, {
1529
- ariaLabelChosen: ariaLabelChosenSingular,
1530
- ariaLabelRemoveSelected: ariaLabelRemoveSelected,
1531
- disabled: disabled,
1532
- getSelectedItemProps: getSelectedItemProps,
1533
- index: index,
1534
- key: (selectedItem == null ? void 0 : selectedItem.label) + (typeof (selectedItem == null ? void 0 : selectedItem.value) === 'string' ? selectedItem.value : ''),
1535
- readOnly: readOnly,
1536
- removeSelectedItem: function removeSelectedItem() {
1537
- var _inputRef$current5;
1538
- _removeSelectedItem(selectedItem);
1539
- inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
1540
- },
1541
- selectedItem: selectedItem
1542
- });
1543
- }) : React.createElement(SelectedItemTag, {
1544
- ariaLabelRemoveSelected: labelClearAllItems,
1545
- ariaLabelChosen: "",
1546
- disabled: disabled,
1547
- readOnly: readOnly,
1548
- removeSelectedItem: handleOnClear,
1549
- selectedItem: summarySelectedItems
1550
- }), React.createElement("input", _extends({}, getInputProps(_extends({
1551
- onKeyDown: function onKeyDown(e) {
1552
- if (selectOnTab && isOpen && e.key === 'Tab') {
1553
- var highlitedItem = listItems[highlightedIndex];
1554
- if (!highlitedItem) return;
1555
- // Skip tab selection for select all or if item already is selected
1556
- var shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
1557
- if (shouldSkipTabSelection) return;
1558
- handleListItemClicked({
1559
- clickedItem: highlitedItem,
1560
- onChange: setSelectedItems
1561
- });
1562
- }
1563
- }
1564
- }, getDropdownProps({
1565
- preventKeyAction: isOpen,
1566
- value: inputValue != null ? inputValue : EMPTY_INPUT,
1567
- ref: utils.mergeRefs(inputRef, ref)
1568
- }), {
1569
- className: 'eds-dropdown__input eds-form-control',
1570
- disabled: readOnly || disabled,
1571
- placeholder: placeholder,
1572
- tabIndex: disabled || readOnly ? -1 : undefined
1573
- }))))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
1574
- 'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
1575
- }), {
1576
- ariaLabelCloseList: ariaLabelCloseList,
1577
- ariaLabelOpenList: ariaLabelOpenList,
1578
- clearable: clearable,
1579
- disabled: disabled || readOnly,
1580
- onClear: handleOnClear,
1581
- focusable: false,
1582
- labelClearSelected: labelClearAllItems,
1583
- isOpen: isOpen,
1584
- itemIsSelected: selectedItems.length > 0,
1585
- loadingText: loadingText,
1586
- loading: loading != null ? loading : resolvedItemsLoading
1587
- })));
1588
- });
1589
-
1590
- var _excluded$1 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
1591
- var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1592
- var _getLabelProps, _selectedItem$label;
1593
- var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
1594
- _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
1595
- ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
1596
- _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
1597
- ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
1598
- ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
1599
- className = _ref.className,
1600
- _ref$clearable = _ref.clearable,
1601
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
1602
- _ref$disabled = _ref.disabled,
1603
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
1604
- disableLabelAnimation = _ref.disableLabelAnimation,
1605
- feedback = _ref.feedback,
1606
- initialItems = _ref.items,
1607
- label = _ref.label,
1608
- _ref$labelClearSelect = _ref.labelClearSelectedItem,
1609
- labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
1610
- labelTooltip = _ref.labelTooltip,
1611
- listStyle = _ref.listStyle,
1612
- loading = _ref.loading,
1613
- _ref$loadingText = _ref.loadingText,
1614
- loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
1615
- _ref$noMatchesText = _ref.noMatchesText,
1616
- noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
1617
- onChange = _ref.onChange,
1618
- placeholder = _ref.placeholder,
1619
- prepend = _ref.prepend,
1620
- _ref$readOnly = _ref.readOnly,
1621
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
1622
- selectedItem = _ref.selectedItem,
1623
- _ref$selectOnBlur = _ref.selectOnBlur,
1624
- selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
1625
- _ref$selectOnTab = _ref.selectOnTab,
1626
- selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
1627
- style = _ref.style,
1628
- _ref$variant = _ref.variant,
1629
- variant = _ref$variant === void 0 ? 'information' : _ref$variant,
1630
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
1631
- var _useResolvedItems = useResolvedItems(initialItems),
1632
- normalizedItems = _useResolvedItems.items,
1633
- resolvedItemsLoading = _useResolvedItems.loading;
1634
- var isFilled = selectedItem !== null || placeholder !== undefined;
1635
- var _useSelect = downshift.useSelect({
1636
- items: normalizedItems,
1637
- defaultHighlightedIndex: selectedItem ? undefined : 0,
1638
- selectedItem: selectedItem,
1639
- stateReducer: function stateReducer(_, _ref2) {
1640
- var changes = _ref2.changes,
1641
- type = _ref2.type;
1642
- var toggleButtonIsFocused = typeof document !== 'undefined' && document.activeElement === refs.reference.current;
1643
- switch (type) {
1644
- case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
1645
- case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
1646
- if (!toggleButtonIsFocused) return _extends({}, changes, {
1647
- isOpen: false
1648
- });
1649
- }
1650
- return changes;
1651
- },
1652
- onStateChange: function onStateChange(_ref3) {
1653
- var type = _ref3.type,
1654
- newSelectedItem = _ref3.selectedItem;
1655
- switch (type) {
1656
- case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
1657
- if (!selectOnBlur) return;
1658
- }
1659
- if (newSelectedItem === undefined) return;
1660
- onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
1661
- },
1662
- itemToString: itemToString
1663
- }),
1664
- isOpen = _useSelect.isOpen,
1665
- getItemProps = _useSelect.getItemProps,
1666
- getLabelProps = _useSelect.getLabelProps,
1667
- getMenuProps = _useSelect.getMenuProps,
1668
- getToggleButtonProps = _useSelect.getToggleButtonProps,
1669
- highlightedIndex = _useSelect.highlightedIndex,
1670
- selectItem = _useSelect.selectItem,
1671
- reset = _useSelect.reset;
1672
- // calculations for floating-UI popover position
1673
- var _useFloating = reactDom.useFloating({
1674
- open: isOpen,
1675
- placement: 'bottom-start',
1676
- middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.shift({
1677
- padding: tokens.space.extraSmall
1678
- }), reactDom.size({
1679
- apply: function apply(_ref4) {
1680
- var rects = _ref4.rects,
1681
- elements = _ref4.elements,
1682
- availableHeight = _ref4.availableHeight;
1683
- Object.assign(elements.floating.style, {
1684
- width: rects.reference.width + "px",
1685
- // Floating will flip when smaller than 10*16 px
1686
- // and never exceed 20*16 px.
1687
- maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
1688
- });
1689
- }
1690
- }), reactDom.flip({
1691
- fallbackStrategy: 'initialPlacement'
1692
- })]
1693
- }),
1694
- refs = _useFloating.refs,
1695
- floatingStyles = _useFloating.floatingStyles,
1696
- update = _useFloating.update;
1697
- // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
1698
- // the useFloating hook but this requires the floating element to be conditionally rendered.
1699
- // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
1700
- // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
1701
- React.useEffect(function () {
1702
- if (isOpen && refs.reference.current && refs.floating.current) {
1703
- return reactDom.autoUpdate(refs.reference.current, refs.floating.current, update);
1704
- }
1705
- }, [isOpen, refs.reference, refs.floating, update]);
1706
- var handleOnClear = function handleOnClear() {
1707
- var _refs$reference$curre;
1708
- reset();
1709
- (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus();
1710
- };
1711
- return React.createElement(form.BaseFormControl, _extends({
1712
- className: classNames('eds-dropdown', className, {
1713
- 'eds-dropdown--has-tooltip': labelTooltip !== undefined
1714
- }),
1715
- disableLabelAnimation: disableLabelAnimation,
1716
- feedback: feedback,
1717
- isFilled: isFilled,
1718
- labelProps: getLabelProps(),
1719
- labelTooltip: labelTooltip,
1720
- prepend: prepend,
1721
- style: style,
1722
- variant: variant
1723
- }, getToggleButtonProps({
1724
- ref: utils.mergeRefs(ref, refs.setReference),
1725
- 'aria-disabled': disabled,
1726
- 'aria-label': disabled ? 'Disabled dropdown' : '',
1727
- disabled: disabled,
1728
- readOnly: readOnly,
1729
- label: label,
1730
- labelId: (_getLabelProps = getLabelProps()) == null ? void 0 : _getLabelProps.id,
1731
- children: undefined,
1732
- tabIndex: disabled || readOnly ? -1 : 0,
1733
- onKeyDown: function onKeyDown(e) {
1734
- if (isOpen && e.key === 'Tab') {
1735
- var highlitedItem = normalizedItems[highlightedIndex];
1736
- // we don't want to clear selection with tab
1737
- if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
1738
- selectItem(highlitedItem);
1739
- }
1740
- }
1741
- }
1742
- }), {
1743
- after: React.createElement(DropdownList, {
1744
- ariaLabelChosenSingular: ariaLabelChosenSingular,
1745
- ariaLabelSelectedItem: ariaLabelSelectedItem,
1746
- floatingStyles: floatingStyles,
1747
- getItemProps: getItemProps,
1748
- getMenuProps: getMenuProps,
1749
- highlightedIndex: highlightedIndex,
1750
- isOpen: isOpen,
1751
- listItems: normalizedItems,
1752
- noMatchesText: noMatchesText,
1753
- style: listStyle,
1754
- setListRef: refs.setFloating,
1755
- loading: loading != null ? loading : resolvedItemsLoading,
1756
- loadingText: loadingText,
1757
- selectedItems: selectedItem !== null ? [selectedItem] : [],
1758
- readOnly: readOnly
1759
- })
1760
- }, rest, {
1761
- // Append is not supported as of now
1762
- append: undefined
1763
- }), React.createElement("div", {
1764
- className: "eds-dropdown__selected-item"
1765
- }, (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
1766
- className: classNames('eds-dropdown__selected-item__placeholder', {
1767
- 'eds-dropdown__selected-item__placeholder--readonly': readOnly
1768
- })
1769
- }, placeholder)), React.createElement(DropdownFieldAppendix, {
1770
- "aria-busy": !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true',
1771
- "aria-expanded": isOpen,
1772
- clearable: clearable,
1773
- onClear: handleOnClear,
1774
- disabled: disabled || readOnly,
1775
- focusable: false,
1776
- labelClearSelected: labelClearSelectedItem,
1777
- isOpen: isOpen,
1778
- itemIsSelected: selectedItem !== null,
1779
- ariaLabelCloseList: ariaLabelCloseList,
1780
- ariaLabelOpenList: ariaLabelOpenList,
1781
- loading: false,
1782
- loadingText: undefined
1783
- }));
1784
- });
1785
-
1786
- var _excluded = ["className", "disabled", "disableLabelAnimation", "feedback", "items", "label", "loadingText", "onChange", "prepend", "readOnly", "selectedItem", "style", "value", "variant"];
1787
- /** @deprecated use variant="negative" instead */
1788
- var error = 'error';
1789
- var NativeDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1790
- var _ref2;
1791
- var className = _ref.className,
1792
- _ref$disabled = _ref.disabled,
1793
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
1794
- disableLabelAnimation = _ref.disableLabelAnimation,
1795
- feedback = _ref.feedback,
1796
- items = _ref.items,
1797
- label = _ref.label,
1798
- loadingText = _ref.loadingText,
1799
- _onChange = _ref.onChange,
1800
- prepend = _ref.prepend,
1801
- _ref$readOnly = _ref.readOnly,
1802
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
1803
- selectedItem = _ref.selectedItem,
1804
- style = _ref.style,
1805
- value = _ref.value,
1806
- variant = _ref.variant,
1807
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
1808
- var _useResolvedItems = useResolvedItems(items),
1809
- normalizedItems = _useResolvedItems.items,
1810
- loading = _useResolvedItems.loading;
1811
- var nativeDropdownId = utils.useRandomId('eds-dropdown-native');
1812
- return React.createElement(form.BaseFormControl, {
1813
- disabled: disabled,
1814
- readOnly: readOnly,
1815
- prepend: prepend,
1816
- append: React.createElement(FieldAppend, {
1817
- hidden: disabled || readOnly,
1818
- loading: loading,
1819
- loadingText: loadingText
1820
- }),
1821
- className: className,
1822
- style: style,
1823
- label: label,
1824
- labelId: nativeDropdownId,
1825
- variant: variant,
1826
- feedback: feedback,
1827
- disableLabelAnimation: disableLabelAnimation,
1828
- isFilled: true
1829
- }, React.createElement("select", _extends({
1830
- "aria-invalid": variant === 'negative' || variant === error,
1831
- "aria-labelledby": nativeDropdownId,
1832
- "aria-busy": loading,
1833
- className: "eds-form-control eds-dropdown--native",
1834
- disabled: disabled || readOnly,
1835
- onChange: function onChange(event) {
1836
- var _normalizedItems$find;
1837
- _onChange == null || _onChange({
1838
- value: event.target.value,
1839
- selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
1840
- return item.value === event.target.value;
1841
- })) != null ? _normalizedItems$find : null,
1842
- target: event.target
1843
- });
1844
- },
1845
- value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined,
1846
- ref: ref
1847
- }, rest), normalizedItems.map(function (item) {
1848
- return React.createElement("option", {
1849
- key: item.value,
1850
- value: item.value
1851
- }, item.label);
1852
- })));
1853
- });
1854
- var FieldAppend = function FieldAppend(_ref3) {
1855
- var loading = _ref3.loading,
1856
- loadingText = _ref3.loadingText,
1857
- hidden = _ref3.hidden;
1858
- if (loading) {
1859
- return React.createElement("div", {
1860
- className: "eds-dropdown-native__loading-dots"
1861
- }, React.createElement(loader.LoadingDots, {
1862
- "aria-label": loadingText
1863
- }));
1864
- }
1865
- if (hidden) {
1866
- return React.createElement(React.Fragment, null);
1867
- }
1868
- return React.createElement(icons.DownArrowIcon, {
1869
- inline: true
1870
- });
1871
- };
1872
-
1873
- utils.warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
1874
-
1875
- exports.Dropdown = Dropdown;
1876
- exports.MultiSelect = MultiSelect;
1877
- exports.NativeDropdown = NativeDropdown;
1878
- exports.SearchableDropdown = SearchableDropdown;
1879
- //# sourceMappingURL=dropdown.cjs.development.js.map