@entur/dropdown 6.0.12 → 6.0.13-RC.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.
- package/README.md +2 -2
- package/dist/components/FieldComponents.d.ts +5 -5
- package/dist/dropdown.cjs.development.js +410 -1174
- package/dist/dropdown.cjs.development.js.map +1 -1
- package/dist/dropdown.cjs.production.min.js +1 -1
- package/dist/dropdown.cjs.production.min.js.map +1 -1
- package/dist/dropdown.esm.js +385 -1147
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/styles.css +0 -273
- package/dist/types.d.ts +0 -1
- package/package.json +14 -11
- package/dist/deprecated/BaseDropdown.d.ts +0 -22
- package/dist/deprecated/DownshiftProvider.d.ts +0 -16
- package/dist/deprecated/Dropdown.d.ts +0 -71
- package/dist/deprecated/DropdownInputGroup.d.ts +0 -11
- package/dist/deprecated/DropdownList.d.ts +0 -8
- package/dist/deprecated/DropdownLoadingDots.d.ts +0 -10
- package/dist/deprecated/DropdownToggleButton.d.ts +0 -3
- package/dist/deprecated/MultiSelect.d.ts +0 -63
- package/dist/deprecated/RegularDropdown.d.ts +0 -20
- package/dist/deprecated/SearchableDropdown.d.ts +0 -34
- package/dist/deprecated/index.d.ts +0 -2
- package/dist/deprecated/types.d.ts +0 -15
package/dist/dropdown.esm.js
CHANGED
|
@@ -1,1238 +1,360 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useDebounce, useRandomId, warnAboutMissingStyles } from '@entur/utils';
|
|
2
2
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import { useCombobox, useMultipleSelection, useSelect } from 'downshift';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
|
-
import { BaseFormControl, VariantProvider, FeedbackText, Checkbox } from '@entur/form';
|
|
6
|
-
import { CheckIcon, DownArrowIcon, CloseSmallIcon, CloseIcon } from '@entur/icons';
|
|
7
|
-
import { VisuallyHidden } from '@entur/a11y';
|
|
8
|
-
import { LoadingDots } from '@entur/loader';
|
|
9
|
-
import { space } from '@entur/tokens';
|
|
10
5
|
import { useFloating, offset, flip, autoUpdate } from '@floating-ui/react-dom';
|
|
6
|
+
import { Checkbox, BaseFormControl } from '@entur/form';
|
|
7
|
+
import { space } from '@entur/tokens';
|
|
8
|
+
import { VisuallyHidden } from '@entur/a11y';
|
|
11
9
|
import { IconButton } from '@entur/button';
|
|
12
10
|
import { TagChip } from '@entur/chip';
|
|
11
|
+
import { CloseSmallIcon, DownArrowIcon } from '@entur/icons';
|
|
12
|
+
import { LoadingDots } from '@entur/loader';
|
|
13
13
|
import { Tooltip } from '@entur/tooltip';
|
|
14
14
|
|
|
15
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
16
|
+
try {
|
|
17
|
+
var i = n[a](c),
|
|
18
|
+
u = i.value;
|
|
19
|
+
} catch (n) {
|
|
20
|
+
return void e(n);
|
|
21
|
+
}
|
|
22
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
23
|
+
}
|
|
24
|
+
function _asyncToGenerator(n) {
|
|
25
|
+
return function () {
|
|
26
|
+
var t = this,
|
|
27
|
+
e = arguments;
|
|
28
|
+
return new Promise(function (r, o) {
|
|
29
|
+
var a = n.apply(t, e);
|
|
30
|
+
function _next(n) {
|
|
31
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
32
|
+
}
|
|
33
|
+
function _throw(n) {
|
|
34
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
35
|
+
}
|
|
36
|
+
_next(void 0);
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function _extends() {
|
|
41
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
42
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
43
|
+
var t = arguments[e];
|
|
44
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
45
|
+
}
|
|
46
|
+
return n;
|
|
47
|
+
}, _extends.apply(null, arguments);
|
|
48
|
+
}
|
|
49
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
50
|
+
if (null == r) return {};
|
|
51
|
+
var t = {};
|
|
52
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
53
|
+
if (e.includes(n)) continue;
|
|
54
|
+
t[n] = r[n];
|
|
55
|
+
}
|
|
56
|
+
return t;
|
|
57
|
+
}
|
|
15
58
|
function _regeneratorRuntime() {
|
|
16
59
|
_regeneratorRuntime = function () {
|
|
17
|
-
return
|
|
60
|
+
return e;
|
|
18
61
|
};
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
62
|
+
var t,
|
|
63
|
+
e = {},
|
|
64
|
+
r = Object.prototype,
|
|
65
|
+
n = r.hasOwnProperty,
|
|
66
|
+
o = Object.defineProperty || function (t, e, r) {
|
|
67
|
+
t[e] = r.value;
|
|
24
68
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
function define(
|
|
30
|
-
return Object.defineProperty(
|
|
31
|
-
value:
|
|
69
|
+
i = "function" == typeof Symbol ? Symbol : {},
|
|
70
|
+
a = i.iterator || "@@iterator",
|
|
71
|
+
c = i.asyncIterator || "@@asyncIterator",
|
|
72
|
+
u = i.toStringTag || "@@toStringTag";
|
|
73
|
+
function define(t, e, r) {
|
|
74
|
+
return Object.defineProperty(t, e, {
|
|
75
|
+
value: r,
|
|
32
76
|
enumerable: !0,
|
|
33
77
|
configurable: !0,
|
|
34
78
|
writable: !0
|
|
35
|
-
}),
|
|
79
|
+
}), t[e];
|
|
36
80
|
}
|
|
37
81
|
try {
|
|
38
82
|
define({}, "");
|
|
39
|
-
} catch (
|
|
40
|
-
define = function (
|
|
41
|
-
return
|
|
83
|
+
} catch (t) {
|
|
84
|
+
define = function (t, e, r) {
|
|
85
|
+
return t[e] = r;
|
|
42
86
|
};
|
|
43
87
|
}
|
|
44
|
-
function wrap(
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return
|
|
49
|
-
value: makeInvokeMethod(
|
|
50
|
-
}),
|
|
88
|
+
function wrap(t, e, r, n) {
|
|
89
|
+
var i = e && e.prototype instanceof Generator ? e : Generator,
|
|
90
|
+
a = Object.create(i.prototype),
|
|
91
|
+
c = new Context(n || []);
|
|
92
|
+
return o(a, "_invoke", {
|
|
93
|
+
value: makeInvokeMethod(t, r, c)
|
|
94
|
+
}), a;
|
|
51
95
|
}
|
|
52
|
-
function tryCatch(
|
|
96
|
+
function tryCatch(t, e, r) {
|
|
53
97
|
try {
|
|
54
98
|
return {
|
|
55
99
|
type: "normal",
|
|
56
|
-
arg:
|
|
100
|
+
arg: t.call(e, r)
|
|
57
101
|
};
|
|
58
|
-
} catch (
|
|
102
|
+
} catch (t) {
|
|
59
103
|
return {
|
|
60
104
|
type: "throw",
|
|
61
|
-
arg:
|
|
105
|
+
arg: t
|
|
62
106
|
};
|
|
63
107
|
}
|
|
64
108
|
}
|
|
65
|
-
|
|
66
|
-
var
|
|
109
|
+
e.wrap = wrap;
|
|
110
|
+
var h = "suspendedStart",
|
|
111
|
+
l = "suspendedYield",
|
|
112
|
+
f = "executing",
|
|
113
|
+
s = "completed",
|
|
114
|
+
y = {};
|
|
67
115
|
function Generator() {}
|
|
68
116
|
function GeneratorFunction() {}
|
|
69
117
|
function GeneratorFunctionPrototype() {}
|
|
70
|
-
var
|
|
71
|
-
define(
|
|
118
|
+
var p = {};
|
|
119
|
+
define(p, a, function () {
|
|
72
120
|
return this;
|
|
73
121
|
});
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var
|
|
78
|
-
function defineIteratorMethods(
|
|
79
|
-
["next", "throw", "return"].forEach(function (
|
|
80
|
-
define(
|
|
81
|
-
return this._invoke(
|
|
122
|
+
var d = Object.getPrototypeOf,
|
|
123
|
+
v = d && d(d(values([])));
|
|
124
|
+
v && v !== r && n.call(v, a) && (p = v);
|
|
125
|
+
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
|
|
126
|
+
function defineIteratorMethods(t) {
|
|
127
|
+
["next", "throw", "return"].forEach(function (e) {
|
|
128
|
+
define(t, e, function (t) {
|
|
129
|
+
return this._invoke(e, t);
|
|
82
130
|
});
|
|
83
131
|
});
|
|
84
132
|
}
|
|
85
|
-
function AsyncIterator(
|
|
86
|
-
function invoke(
|
|
87
|
-
var
|
|
88
|
-
if ("throw" !==
|
|
89
|
-
var
|
|
90
|
-
|
|
91
|
-
return
|
|
92
|
-
invoke("next",
|
|
93
|
-
}, function (
|
|
94
|
-
invoke("throw",
|
|
95
|
-
}) :
|
|
96
|
-
|
|
97
|
-
}, function (
|
|
98
|
-
return invoke("throw",
|
|
133
|
+
function AsyncIterator(t, e) {
|
|
134
|
+
function invoke(r, o, i, a) {
|
|
135
|
+
var c = tryCatch(t[r], t, o);
|
|
136
|
+
if ("throw" !== c.type) {
|
|
137
|
+
var u = c.arg,
|
|
138
|
+
h = u.value;
|
|
139
|
+
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
|
|
140
|
+
invoke("next", t, i, a);
|
|
141
|
+
}, function (t) {
|
|
142
|
+
invoke("throw", t, i, a);
|
|
143
|
+
}) : e.resolve(h).then(function (t) {
|
|
144
|
+
u.value = t, i(u);
|
|
145
|
+
}, function (t) {
|
|
146
|
+
return invoke("throw", t, i, a);
|
|
99
147
|
});
|
|
100
148
|
}
|
|
101
|
-
|
|
149
|
+
a(c.arg);
|
|
102
150
|
}
|
|
103
|
-
var
|
|
104
|
-
|
|
105
|
-
value: function (
|
|
151
|
+
var r;
|
|
152
|
+
o(this, "_invoke", {
|
|
153
|
+
value: function (t, n) {
|
|
106
154
|
function callInvokeWithMethodAndArg() {
|
|
107
|
-
return new
|
|
108
|
-
invoke(
|
|
155
|
+
return new e(function (e, r) {
|
|
156
|
+
invoke(t, n, e, r);
|
|
109
157
|
});
|
|
110
158
|
}
|
|
111
|
-
return
|
|
159
|
+
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
|
112
160
|
}
|
|
113
161
|
});
|
|
114
162
|
}
|
|
115
|
-
function makeInvokeMethod(
|
|
116
|
-
var
|
|
117
|
-
return function (
|
|
118
|
-
if (
|
|
119
|
-
if (
|
|
120
|
-
if ("throw" ===
|
|
121
|
-
return
|
|
163
|
+
function makeInvokeMethod(e, r, n) {
|
|
164
|
+
var o = h;
|
|
165
|
+
return function (i, a) {
|
|
166
|
+
if (o === f) throw Error("Generator is already running");
|
|
167
|
+
if (o === s) {
|
|
168
|
+
if ("throw" === i) throw a;
|
|
169
|
+
return {
|
|
170
|
+
value: t,
|
|
171
|
+
done: !0
|
|
172
|
+
};
|
|
122
173
|
}
|
|
123
|
-
for (
|
|
124
|
-
var
|
|
125
|
-
if (
|
|
126
|
-
var
|
|
127
|
-
if (
|
|
128
|
-
if (
|
|
129
|
-
return
|
|
174
|
+
for (n.method = i, n.arg = a;;) {
|
|
175
|
+
var c = n.delegate;
|
|
176
|
+
if (c) {
|
|
177
|
+
var u = maybeInvokeDelegate(c, n);
|
|
178
|
+
if (u) {
|
|
179
|
+
if (u === y) continue;
|
|
180
|
+
return u;
|
|
130
181
|
}
|
|
131
182
|
}
|
|
132
|
-
if ("next" ===
|
|
133
|
-
if (
|
|
134
|
-
|
|
135
|
-
} else "return" ===
|
|
136
|
-
|
|
137
|
-
var
|
|
138
|
-
if ("normal" ===
|
|
139
|
-
if (
|
|
183
|
+
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
|
|
184
|
+
if (o === h) throw o = s, n.arg;
|
|
185
|
+
n.dispatchException(n.arg);
|
|
186
|
+
} else "return" === n.method && n.abrupt("return", n.arg);
|
|
187
|
+
o = f;
|
|
188
|
+
var p = tryCatch(e, r, n);
|
|
189
|
+
if ("normal" === p.type) {
|
|
190
|
+
if (o = n.done ? s : l, p.arg === y) continue;
|
|
140
191
|
return {
|
|
141
|
-
value:
|
|
142
|
-
done:
|
|
192
|
+
value: p.arg,
|
|
193
|
+
done: n.done
|
|
143
194
|
};
|
|
144
195
|
}
|
|
145
|
-
"throw" ===
|
|
196
|
+
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
|
|
146
197
|
}
|
|
147
198
|
};
|
|
148
199
|
}
|
|
149
|
-
function maybeInvokeDelegate(
|
|
150
|
-
var
|
|
151
|
-
|
|
152
|
-
if (
|
|
153
|
-
var
|
|
154
|
-
if ("throw" ===
|
|
155
|
-
var
|
|
156
|
-
return
|
|
200
|
+
function maybeInvokeDelegate(e, r) {
|
|
201
|
+
var n = r.method,
|
|
202
|
+
o = e.iterator[n];
|
|
203
|
+
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;
|
|
204
|
+
var i = tryCatch(o, e.iterator, r.arg);
|
|
205
|
+
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
|
|
206
|
+
var a = i.arg;
|
|
207
|
+
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);
|
|
157
208
|
}
|
|
158
|
-
function pushTryEntry(
|
|
159
|
-
var
|
|
160
|
-
tryLoc:
|
|
209
|
+
function pushTryEntry(t) {
|
|
210
|
+
var e = {
|
|
211
|
+
tryLoc: t[0]
|
|
161
212
|
};
|
|
162
|
-
1 in
|
|
213
|
+
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
|
|
163
214
|
}
|
|
164
|
-
function resetTryEntry(
|
|
165
|
-
var
|
|
166
|
-
|
|
215
|
+
function resetTryEntry(t) {
|
|
216
|
+
var e = t.completion || {};
|
|
217
|
+
e.type = "normal", delete e.arg, t.completion = e;
|
|
167
218
|
}
|
|
168
|
-
function Context(
|
|
219
|
+
function Context(t) {
|
|
169
220
|
this.tryEntries = [{
|
|
170
221
|
tryLoc: "root"
|
|
171
|
-
}],
|
|
222
|
+
}], t.forEach(pushTryEntry, this), this.reset(!0);
|
|
172
223
|
}
|
|
173
|
-
function values(
|
|
174
|
-
if (
|
|
175
|
-
var
|
|
176
|
-
if (
|
|
177
|
-
if ("function" == typeof
|
|
178
|
-
if (!isNaN(
|
|
179
|
-
var
|
|
180
|
-
|
|
181
|
-
for (; ++
|
|
182
|
-
return next.value =
|
|
224
|
+
function values(e) {
|
|
225
|
+
if (e || "" === e) {
|
|
226
|
+
var r = e[a];
|
|
227
|
+
if (r) return r.call(e);
|
|
228
|
+
if ("function" == typeof e.next) return e;
|
|
229
|
+
if (!isNaN(e.length)) {
|
|
230
|
+
var o = -1,
|
|
231
|
+
i = function next() {
|
|
232
|
+
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
|
|
233
|
+
return next.value = t, next.done = !0, next;
|
|
183
234
|
};
|
|
184
|
-
return
|
|
235
|
+
return i.next = i;
|
|
185
236
|
}
|
|
186
237
|
}
|
|
187
|
-
|
|
188
|
-
next: doneResult
|
|
189
|
-
};
|
|
190
|
-
}
|
|
191
|
-
function doneResult() {
|
|
192
|
-
return {
|
|
193
|
-
value: undefined,
|
|
194
|
-
done: !0
|
|
195
|
-
};
|
|
238
|
+
throw new TypeError(typeof e + " is not iterable");
|
|
196
239
|
}
|
|
197
|
-
return GeneratorFunction.prototype = GeneratorFunctionPrototype,
|
|
240
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
|
|
198
241
|
value: GeneratorFunctionPrototype,
|
|
199
242
|
configurable: !0
|
|
200
|
-
}),
|
|
243
|
+
}), o(GeneratorFunctionPrototype, "constructor", {
|
|
201
244
|
value: GeneratorFunction,
|
|
202
245
|
configurable: !0
|
|
203
|
-
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype,
|
|
204
|
-
var
|
|
205
|
-
return !!
|
|
206
|
-
},
|
|
207
|
-
return Object.setPrototypeOf ? Object.setPrototypeOf(
|
|
208
|
-
},
|
|
246
|
+
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
|
|
247
|
+
var e = "function" == typeof t && t.constructor;
|
|
248
|
+
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
|
|
249
|
+
}, e.mark = function (t) {
|
|
250
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
|
|
251
|
+
}, e.awrap = function (t) {
|
|
209
252
|
return {
|
|
210
|
-
__await:
|
|
253
|
+
__await: t
|
|
211
254
|
};
|
|
212
|
-
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype,
|
|
255
|
+
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
|
|
213
256
|
return this;
|
|
214
|
-
}),
|
|
215
|
-
void 0 ===
|
|
216
|
-
var
|
|
217
|
-
return
|
|
218
|
-
return
|
|
257
|
+
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
|
|
258
|
+
void 0 === i && (i = Promise);
|
|
259
|
+
var a = new AsyncIterator(wrap(t, r, n, o), i);
|
|
260
|
+
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
|
|
261
|
+
return t.done ? t.value : a.next();
|
|
219
262
|
});
|
|
220
|
-
}, defineIteratorMethods(
|
|
263
|
+
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
|
|
221
264
|
return this;
|
|
222
|
-
}), define(
|
|
265
|
+
}), define(g, "toString", function () {
|
|
223
266
|
return "[object Generator]";
|
|
224
|
-
}),
|
|
225
|
-
var
|
|
226
|
-
|
|
227
|
-
for (var
|
|
228
|
-
return
|
|
229
|
-
for (;
|
|
230
|
-
var
|
|
231
|
-
if (
|
|
267
|
+
}), e.keys = function (t) {
|
|
268
|
+
var e = Object(t),
|
|
269
|
+
r = [];
|
|
270
|
+
for (var n in e) r.push(n);
|
|
271
|
+
return r.reverse(), function next() {
|
|
272
|
+
for (; r.length;) {
|
|
273
|
+
var t = r.pop();
|
|
274
|
+
if (t in e) return next.value = t, next.done = !1, next;
|
|
232
275
|
}
|
|
233
276
|
return next.done = !0, next;
|
|
234
277
|
};
|
|
235
|
-
},
|
|
278
|
+
}, e.values = values, Context.prototype = {
|
|
236
279
|
constructor: Context,
|
|
237
|
-
reset: function (
|
|
238
|
-
if (this.prev = 0, this.next = 0, this.sent = this._sent =
|
|
280
|
+
reset: function (e) {
|
|
281
|
+
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);
|
|
239
282
|
},
|
|
240
283
|
stop: function () {
|
|
241
284
|
this.done = !0;
|
|
242
|
-
var
|
|
243
|
-
if ("throw" ===
|
|
285
|
+
var t = this.tryEntries[0].completion;
|
|
286
|
+
if ("throw" === t.type) throw t.arg;
|
|
244
287
|
return this.rval;
|
|
245
288
|
},
|
|
246
|
-
dispatchException: function (
|
|
247
|
-
if (this.done) throw
|
|
248
|
-
var
|
|
249
|
-
function handle(
|
|
250
|
-
return
|
|
289
|
+
dispatchException: function (e) {
|
|
290
|
+
if (this.done) throw e;
|
|
291
|
+
var r = this;
|
|
292
|
+
function handle(n, o) {
|
|
293
|
+
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
|
|
251
294
|
}
|
|
252
|
-
for (var
|
|
253
|
-
var
|
|
254
|
-
|
|
255
|
-
if ("root" ===
|
|
256
|
-
if (
|
|
257
|
-
var
|
|
258
|
-
|
|
259
|
-
if (
|
|
260
|
-
if (this.prev <
|
|
261
|
-
if (this.prev <
|
|
262
|
-
} else if (
|
|
263
|
-
if (this.prev <
|
|
295
|
+
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
|
|
296
|
+
var i = this.tryEntries[o],
|
|
297
|
+
a = i.completion;
|
|
298
|
+
if ("root" === i.tryLoc) return handle("end");
|
|
299
|
+
if (i.tryLoc <= this.prev) {
|
|
300
|
+
var c = n.call(i, "catchLoc"),
|
|
301
|
+
u = n.call(i, "finallyLoc");
|
|
302
|
+
if (c && u) {
|
|
303
|
+
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
|
304
|
+
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
|
305
|
+
} else if (c) {
|
|
306
|
+
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
|
264
307
|
} else {
|
|
265
|
-
if (!
|
|
266
|
-
if (this.prev <
|
|
308
|
+
if (!u) throw Error("try statement without catch or finally");
|
|
309
|
+
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
|
267
310
|
}
|
|
268
311
|
}
|
|
269
312
|
}
|
|
270
313
|
},
|
|
271
|
-
abrupt: function (
|
|
272
|
-
for (var
|
|
273
|
-
var
|
|
274
|
-
if (
|
|
275
|
-
var
|
|
314
|
+
abrupt: function (t, e) {
|
|
315
|
+
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
|
|
316
|
+
var o = this.tryEntries[r];
|
|
317
|
+
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
|
|
318
|
+
var i = o;
|
|
276
319
|
break;
|
|
277
320
|
}
|
|
278
321
|
}
|
|
279
|
-
|
|
280
|
-
var
|
|
281
|
-
return
|
|
322
|
+
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
|
|
323
|
+
var a = i ? i.completion : {};
|
|
324
|
+
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
|
|
282
325
|
},
|
|
283
|
-
complete: function (
|
|
284
|
-
if ("throw" ===
|
|
285
|
-
return "break" ===
|
|
326
|
+
complete: function (t, e) {
|
|
327
|
+
if ("throw" === t.type) throw t.arg;
|
|
328
|
+
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;
|
|
286
329
|
},
|
|
287
|
-
finish: function (
|
|
288
|
-
for (var
|
|
289
|
-
var
|
|
290
|
-
if (
|
|
330
|
+
finish: function (t) {
|
|
331
|
+
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
|
332
|
+
var r = this.tryEntries[e];
|
|
333
|
+
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
|
|
291
334
|
}
|
|
292
335
|
},
|
|
293
|
-
catch: function (
|
|
294
|
-
for (var
|
|
295
|
-
var
|
|
296
|
-
if (
|
|
297
|
-
var
|
|
298
|
-
if ("throw" ===
|
|
299
|
-
var
|
|
300
|
-
resetTryEntry(
|
|
336
|
+
catch: function (t) {
|
|
337
|
+
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
|
338
|
+
var r = this.tryEntries[e];
|
|
339
|
+
if (r.tryLoc === t) {
|
|
340
|
+
var n = r.completion;
|
|
341
|
+
if ("throw" === n.type) {
|
|
342
|
+
var o = n.arg;
|
|
343
|
+
resetTryEntry(r);
|
|
301
344
|
}
|
|
302
|
-
return
|
|
345
|
+
return o;
|
|
303
346
|
}
|
|
304
347
|
}
|
|
305
|
-
throw
|
|
348
|
+
throw Error("illegal catch attempt");
|
|
306
349
|
},
|
|
307
|
-
delegateYield: function (
|
|
350
|
+
delegateYield: function (e, r, n) {
|
|
308
351
|
return this.delegate = {
|
|
309
|
-
iterator: values(
|
|
310
|
-
resultName:
|
|
311
|
-
nextLoc:
|
|
312
|
-
}, "next" === this.method && (this.arg =
|
|
313
|
-
}
|
|
314
|
-
}, exports;
|
|
315
|
-
}
|
|
316
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
317
|
-
try {
|
|
318
|
-
var info = gen[key](arg);
|
|
319
|
-
var value = info.value;
|
|
320
|
-
} catch (error) {
|
|
321
|
-
reject(error);
|
|
322
|
-
return;
|
|
323
|
-
}
|
|
324
|
-
if (info.done) {
|
|
325
|
-
resolve(value);
|
|
326
|
-
} else {
|
|
327
|
-
Promise.resolve(value).then(_next, _throw);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
function _asyncToGenerator(fn) {
|
|
331
|
-
return function () {
|
|
332
|
-
var self = this,
|
|
333
|
-
args = arguments;
|
|
334
|
-
return new Promise(function (resolve, reject) {
|
|
335
|
-
var gen = fn.apply(self, args);
|
|
336
|
-
function _next(value) {
|
|
337
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
338
|
-
}
|
|
339
|
-
function _throw(err) {
|
|
340
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
341
|
-
}
|
|
342
|
-
_next(undefined);
|
|
343
|
-
});
|
|
344
|
-
};
|
|
345
|
-
}
|
|
346
|
-
function _extends() {
|
|
347
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
348
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
349
|
-
var source = arguments[i];
|
|
350
|
-
for (var key in source) {
|
|
351
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
352
|
-
target[key] = source[key];
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
return target;
|
|
357
|
-
};
|
|
358
|
-
return _extends.apply(this, arguments);
|
|
359
|
-
}
|
|
360
|
-
function _objectDestructuringEmpty(obj) {
|
|
361
|
-
if (obj == null) throw new TypeError("Cannot destructure " + obj);
|
|
362
|
-
}
|
|
363
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
364
|
-
if (source == null) return {};
|
|
365
|
-
var target = {};
|
|
366
|
-
var sourceKeys = Object.keys(source);
|
|
367
|
-
var key, i;
|
|
368
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
369
|
-
key = sourceKeys[i];
|
|
370
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
371
|
-
target[key] = source[key];
|
|
372
|
-
}
|
|
373
|
-
return target;
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
var _excluded$d = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
|
|
377
|
-
var DownshiftContext = /*#__PURE__*/React.createContext(null);
|
|
378
|
-
var DownshiftProvider = function DownshiftProvider(_ref) {
|
|
379
|
-
var children = _ref.children,
|
|
380
|
-
_ref$onChange = _ref.onChange,
|
|
381
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
382
|
-
return undefined;
|
|
383
|
-
} : _ref$onChange,
|
|
384
|
-
_ref$onInputValueChan = _ref.onInputValueChange,
|
|
385
|
-
onInputValueChange = _ref$onInputValueChan === void 0 ? function () {
|
|
386
|
-
return undefined;
|
|
387
|
-
} : _ref$onInputValueChan,
|
|
388
|
-
_ref$highlightFirstIt = _ref.highlightFirstItemOnOpen,
|
|
389
|
-
highlightFirstItemOnOpen = _ref$highlightFirstIt === void 0 ? false : _ref$highlightFirstIt,
|
|
390
|
-
className = _ref.className,
|
|
391
|
-
style = _ref.style,
|
|
392
|
-
_ref$searchable = _ref.searchable,
|
|
393
|
-
searchable = _ref$searchable === void 0 ? false : _ref$searchable,
|
|
394
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
395
|
-
var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
|
|
396
|
-
if (changes.type === Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem) {
|
|
397
|
-
return;
|
|
398
|
-
}
|
|
399
|
-
if ('selectedItem' in changes) {
|
|
400
|
-
onChange(changes.selectedItem, stateAndHelpers);
|
|
401
|
-
} else if ('inputValue' in changes) {
|
|
402
|
-
onInputValueChange(changes.inputValue);
|
|
403
|
-
}
|
|
404
|
-
};
|
|
405
|
-
var stateReducer = function stateReducer(_, changes) {
|
|
406
|
-
var highlightFirstOnOpen = highlightFirstItemOnOpen && 'isOpen' in changes && changes.isOpen;
|
|
407
|
-
var highlightFirstItemIndex = highlightFirstOnOpen ? {
|
|
408
|
-
highlightedIndex: 0
|
|
409
|
-
} : {};
|
|
410
|
-
if (searchable) {
|
|
411
|
-
var type = changes.type;
|
|
412
|
-
switch (type) {
|
|
413
|
-
case '__autocomplete_change_input__':
|
|
414
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
415
|
-
case '__autocomplete_click_item__':
|
|
416
|
-
case '__autocomplete_keydown_enter__':
|
|
417
|
-
case '__autocomplete_blur_input__':
|
|
418
|
-
case '__autocomplete_mouseup__':
|
|
419
|
-
return _extends({}, changes, {
|
|
420
|
-
// if we had an item highlighted in the previous state.
|
|
421
|
-
// we will reset input field value to blank
|
|
422
|
-
inputValue: ''
|
|
423
|
-
}, highlightFirstItemIndex);
|
|
424
|
-
default:
|
|
425
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
426
|
-
}
|
|
427
|
-
} else {
|
|
428
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
429
|
-
}
|
|
430
|
-
};
|
|
431
|
-
return React.createElement(Downshift, _extends({
|
|
432
|
-
itemToString: function itemToString(item) {
|
|
433
|
-
return item ? item.label : '';
|
|
434
|
-
},
|
|
435
|
-
onStateChange: handleStateChange,
|
|
436
|
-
stateReducer: stateReducer
|
|
437
|
-
}, rest), function (args) {
|
|
438
|
-
return React.createElement("div", {
|
|
439
|
-
className: classNames('eds-input-group', className),
|
|
440
|
-
style: style
|
|
441
|
-
}, React.createElement(DownshiftContext.Provider, {
|
|
442
|
-
value: args
|
|
443
|
-
}, children));
|
|
444
|
-
});
|
|
445
|
-
};
|
|
446
|
-
var useDownshift = function useDownshift() {
|
|
447
|
-
var context = React.useContext(DownshiftContext);
|
|
448
|
-
if (!context) {
|
|
449
|
-
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
450
|
-
}
|
|
451
|
-
return context;
|
|
452
|
-
};
|
|
453
|
-
|
|
454
|
-
var _excluded$c = ["items"];
|
|
455
|
-
var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
|
|
456
|
-
var items = _ref.items,
|
|
457
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
458
|
-
var _useDownshift = useDownshift(),
|
|
459
|
-
highlightedIndex = _useDownshift.highlightedIndex,
|
|
460
|
-
isOpen = _useDownshift.isOpen,
|
|
461
|
-
selectedItem = _useDownshift.selectedItem,
|
|
462
|
-
getItemProps = _useDownshift.getItemProps,
|
|
463
|
-
getMenuProps = _useDownshift.getMenuProps;
|
|
464
|
-
return React.createElement("ul", _extends({
|
|
465
|
-
className: classNames('eds-dropdown-list', {
|
|
466
|
-
'eds-dropdown-list--open': isOpen
|
|
467
|
-
})
|
|
468
|
-
}, getMenuProps(), rest), isOpen ? items.map(function (item, index) {
|
|
469
|
-
return (
|
|
470
|
-
// eslint-disable-next-line react/jsx-key
|
|
471
|
-
React.createElement("li", _extends({
|
|
472
|
-
className: classNames('eds-dropdown-list__item', {
|
|
473
|
-
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
474
|
-
'eds-dropdown-list__item--selected': selectedItem === item
|
|
475
|
-
})
|
|
476
|
-
}, getItemProps({
|
|
477
|
-
key: "" + index + item.value,
|
|
478
|
-
item: item,
|
|
479
|
-
index: index
|
|
480
|
-
})), React.createElement("span", null, item.label), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
481
|
-
return React.createElement(Icon, {
|
|
482
|
-
key: index,
|
|
483
|
-
inline: true,
|
|
484
|
-
className: "eds-dropdown-list__item-icon"
|
|
485
|
-
});
|
|
486
|
-
})), selectedItem === item && React.createElement(CheckIcon, null))
|
|
487
|
-
);
|
|
488
|
-
}) : null);
|
|
489
|
-
};
|
|
490
|
-
|
|
491
|
-
var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
|
|
492
|
-
var _useDownshift = useDownshift(),
|
|
493
|
-
getToggleButtonProps = _useDownshift.getToggleButtonProps,
|
|
494
|
-
isOpen = _useDownshift.isOpen;
|
|
495
|
-
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
496
|
-
className: classNames('eds-dropdown__toggle-button', {
|
|
497
|
-
'eds-dropdown__toggle-button--open': isOpen
|
|
498
|
-
})
|
|
499
|
-
}), {
|
|
500
|
-
tabIndex: -1,
|
|
501
|
-
type: "button"
|
|
502
|
-
}), React.createElement(DownArrowIcon, null));
|
|
503
|
-
};
|
|
504
|
-
|
|
505
|
-
var _excluded$b = ["className", "children"];
|
|
506
|
-
var DropdownDeprecatedLoadingDots = function DropdownDeprecatedLoadingDots(_ref) {
|
|
507
|
-
var className = _ref.className,
|
|
508
|
-
children = _ref.children,
|
|
509
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
510
|
-
return React.createElement("div", _extends({
|
|
511
|
-
className: classNames('eds-inline-spinner', className)
|
|
512
|
-
}, rest), React.createElement(LoadingDots, null), React.createElement(VisuallyHidden, null, children));
|
|
513
|
-
};
|
|
514
|
-
|
|
515
|
-
var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
|
|
516
|
-
var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
|
|
517
|
-
var children = _ref.children,
|
|
518
|
-
className = _ref.className,
|
|
519
|
-
items = _ref.items,
|
|
520
|
-
_ref$loading = _ref.loading,
|
|
521
|
-
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
522
|
-
_ref$loadingText = _ref.loadingText,
|
|
523
|
-
loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
|
|
524
|
-
style = _ref.style,
|
|
525
|
-
listStyle = _ref.listStyle,
|
|
526
|
-
clearable = _ref.clearable,
|
|
527
|
-
label = _ref.label,
|
|
528
|
-
_ref$isFilled = _ref.isFilled,
|
|
529
|
-
isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
|
|
530
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
531
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
532
|
-
var _useDownshift = useDownshift(),
|
|
533
|
-
getLabelProps = _useDownshift.getLabelProps;
|
|
534
|
-
return React.createElement("div", {
|
|
535
|
-
className: "eds-dropdown-wrapper",
|
|
536
|
-
style: style
|
|
537
|
-
}, React.createElement(BaseFormControl, _extends({
|
|
538
|
-
append: React.createElement(Appendix$1, {
|
|
539
|
-
clearable: clearable,
|
|
540
|
-
loading: loading,
|
|
541
|
-
loadingText: loadingText,
|
|
542
|
-
readOnly: rest.readOnly
|
|
543
|
-
}),
|
|
544
|
-
className: className,
|
|
545
|
-
label: label,
|
|
546
|
-
isFilled: isFilled,
|
|
547
|
-
labelProps: getLabelProps(),
|
|
548
|
-
disableLabelAnimation: disableLabelAnimation
|
|
549
|
-
}, rest), children), React.createElement(DropdownListDeprecated, _extends({
|
|
550
|
-
items: items,
|
|
551
|
-
style: _extends({
|
|
552
|
-
position: 'absolute',
|
|
553
|
-
top: space.extraLarge3 + space.extraSmall + "px"
|
|
554
|
-
}, listStyle)
|
|
555
|
-
}, rest)));
|
|
556
|
-
};
|
|
557
|
-
var ClearButton$1 = function ClearButton(_ref2) {
|
|
558
|
-
var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
559
|
-
var _useDownshift2 = useDownshift(),
|
|
560
|
-
clearSelection = _useDownshift2.clearSelection,
|
|
561
|
-
selectedItem = _useDownshift2.selectedItem;
|
|
562
|
-
return React.createElement(React.Fragment, null, selectedItem && React.createElement("button", _extends({
|
|
563
|
-
className: "eds-dropdown__clear-button",
|
|
564
|
-
type: "button",
|
|
565
|
-
tabIndex: -1,
|
|
566
|
-
onClick: function onClick() {
|
|
567
|
-
return clearSelection();
|
|
568
|
-
},
|
|
569
|
-
"aria-label": "Trykk for \xE5 fjerne valg"
|
|
570
|
-
}, props), React.createElement(CloseSmallIcon, null)), selectedItem && React.createElement("div", {
|
|
571
|
-
className: "eds-dropdown__divider"
|
|
572
|
-
}));
|
|
573
|
-
};
|
|
574
|
-
var Appendix$1 = function Appendix(_ref3) {
|
|
575
|
-
var clearable = _ref3.clearable,
|
|
576
|
-
loading = _ref3.loading,
|
|
577
|
-
loadingText = _ref3.loadingText,
|
|
578
|
-
readOnly = _ref3.readOnly;
|
|
579
|
-
if (loading) {
|
|
580
|
-
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
581
|
-
}
|
|
582
|
-
if (readOnly) {
|
|
583
|
-
return null;
|
|
584
|
-
}
|
|
585
|
-
return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownDeprecatedToggleButton, null)) : React.createElement(DropdownDeprecatedToggleButton, null);
|
|
586
|
-
};
|
|
587
|
-
|
|
588
|
-
var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
|
|
589
|
-
var RegularDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
590
|
-
var disabled = _ref.disabled,
|
|
591
|
-
_ref$placeholder = _ref.placeholder,
|
|
592
|
-
placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
|
|
593
|
-
_ref$selectOnTab = _ref.selectOnTab,
|
|
594
|
-
selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
|
|
595
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
596
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
597
|
-
listStyle = _ref.listStyle,
|
|
598
|
-
items = _ref.items,
|
|
599
|
-
label = _ref.label,
|
|
600
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
601
|
-
loading = _ref.loading,
|
|
602
|
-
loadingText = _ref.loadingText,
|
|
603
|
-
className = _ref.className,
|
|
604
|
-
clearable = _ref.clearable,
|
|
605
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
606
|
-
var _useDownshift = useDownshift(),
|
|
607
|
-
getToggleButtonProps = _useDownshift.getToggleButtonProps,
|
|
608
|
-
selectedItem = _useDownshift.selectedItem,
|
|
609
|
-
selectHighlightedItem = _useDownshift.selectHighlightedItem,
|
|
610
|
-
openMenu = _useDownshift.openMenu,
|
|
611
|
-
isOpen = _useDownshift.isOpen,
|
|
612
|
-
highlightedIndex = _useDownshift.highlightedIndex,
|
|
613
|
-
setHighlightedIndex = _useDownshift.setHighlightedIndex;
|
|
614
|
-
return React.createElement(BaseDropdownDeprecated, _extends({
|
|
615
|
-
disabled: disabled,
|
|
616
|
-
listStyle: listStyle,
|
|
617
|
-
items: items,
|
|
618
|
-
label: label,
|
|
619
|
-
isFilled: selectedItem ? true : placeholder.length !== 0,
|
|
620
|
-
disableLabelAnimation: disableLabelAnimation,
|
|
621
|
-
loading: loading,
|
|
622
|
-
loadingText: loadingText,
|
|
623
|
-
className: className,
|
|
624
|
-
clearable: clearable
|
|
625
|
-
}, rest), React.createElement("button", _extends({}, getToggleButtonProps(_extends({
|
|
626
|
-
className: 'eds-form-control eds-dropdown__selected-item',
|
|
627
|
-
style: {
|
|
628
|
-
textAlign: 'left'
|
|
629
|
-
},
|
|
630
|
-
disabled: disabled,
|
|
631
|
-
type: 'button',
|
|
632
|
-
onKeyDown: function onKeyDown(e) {
|
|
633
|
-
if (selectOnTab && e.key === 'Tab') {
|
|
634
|
-
selectHighlightedItem();
|
|
635
|
-
}
|
|
636
|
-
if (isOpen) {
|
|
637
|
-
var keyDownValue = e.key;
|
|
638
|
-
var matchedItems = items.map(function (item, index) {
|
|
639
|
-
return _extends({}, item, {
|
|
640
|
-
index: index
|
|
641
|
-
});
|
|
642
|
-
}).filter(function (item) {
|
|
643
|
-
var firstCharacter = item.label.trim().charAt(0).toLowerCase();
|
|
644
|
-
return firstCharacter === keyDownValue;
|
|
645
|
-
});
|
|
646
|
-
var nextHighlightItem = matchedItems.find(function (item) {
|
|
647
|
-
return item.index > (highlightedIndex != null ? highlightedIndex : 0);
|
|
648
|
-
});
|
|
649
|
-
if (nextHighlightItem) {
|
|
650
|
-
setHighlightedIndex(nextHighlightItem.index);
|
|
651
|
-
} else if (matchedItems.length > 0) {
|
|
652
|
-
setHighlightedIndex(matchedItems[0].index);
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
},
|
|
656
|
-
onFocus: function onFocus() {
|
|
657
|
-
if (openOnFocus) {
|
|
658
|
-
!isOpen && openMenu();
|
|
659
|
-
}
|
|
352
|
+
iterator: values(e),
|
|
353
|
+
resultName: r,
|
|
354
|
+
nextLoc: n
|
|
355
|
+
}, "next" === this.method && (this.arg = t), y;
|
|
660
356
|
}
|
|
661
|
-
},
|
|
662
|
-
ref: ref
|
|
663
|
-
}), selectedItem ? selectedItem.label : placeholder));
|
|
664
|
-
});
|
|
665
|
-
|
|
666
|
-
var _excluded$8 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
|
|
667
|
-
function LowerCaseFilterTest(item, input) {
|
|
668
|
-
if (!input) {
|
|
669
|
-
return true;
|
|
670
|
-
}
|
|
671
|
-
var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
672
|
-
var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
|
|
673
|
-
return inputRegex.test(item.label);
|
|
674
|
-
}
|
|
675
|
-
/**
|
|
676
|
-
* @deprecated
|
|
677
|
-
* New SearchableDropdown available
|
|
678
|
-
*
|
|
679
|
-
* migration guide to new dropdown:
|
|
680
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
681
|
-
* - change from 'value' to 'selectedItem'
|
|
682
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
683
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
684
|
-
*/
|
|
685
|
-
var SearchableDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
686
|
-
var _ref$disabled = _ref.disabled,
|
|
687
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
688
|
-
className = _ref.className,
|
|
689
|
-
items = _ref.items,
|
|
690
|
-
loading = _ref.loading,
|
|
691
|
-
loadingText = _ref.loadingText,
|
|
692
|
-
_ref$readOnly = _ref.readOnly,
|
|
693
|
-
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
694
|
-
prepend = _ref.prepend,
|
|
695
|
-
_ref$selectOnTab = _ref.selectOnTab,
|
|
696
|
-
selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
|
|
697
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
698
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
699
|
-
listStyle = _ref.listStyle,
|
|
700
|
-
clearable = _ref.clearable,
|
|
701
|
-
_ref$itemFilter = _ref.itemFilter,
|
|
702
|
-
itemFilter = _ref$itemFilter === void 0 ? function (item, inputValue) {
|
|
703
|
-
return LowerCaseFilterTest(item, inputValue);
|
|
704
|
-
} : _ref$itemFilter,
|
|
705
|
-
label = _ref.label,
|
|
706
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
707
|
-
placeholder = _ref.placeholder,
|
|
708
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
709
|
-
var _useDownshift = useDownshift(),
|
|
710
|
-
getInputProps = _useDownshift.getInputProps,
|
|
711
|
-
inputValue = _useDownshift.inputValue,
|
|
712
|
-
selectHighlightedItem = _useDownshift.selectHighlightedItem,
|
|
713
|
-
isOpen = _useDownshift.isOpen,
|
|
714
|
-
openMenu = _useDownshift.openMenu,
|
|
715
|
-
closeMenu = _useDownshift.closeMenu,
|
|
716
|
-
selectedItem = _useDownshift.selectedItem;
|
|
717
|
-
var _useState = useState(false),
|
|
718
|
-
hideSelectedItem = _useState[0],
|
|
719
|
-
setHideSelectedItem = _useState[1];
|
|
720
|
-
var inputRef = useRef(null);
|
|
721
|
-
var filteredItems = React.useMemo(function () {
|
|
722
|
-
return items.filter(function (item) {
|
|
723
|
-
return itemFilter(item, inputValue);
|
|
724
|
-
});
|
|
725
|
-
}, [inputValue, items, itemFilter]);
|
|
726
|
-
return React.createElement(BaseDropdownDeprecated, {
|
|
727
|
-
items: filteredItems,
|
|
728
|
-
disabled: disabled,
|
|
729
|
-
readOnly: readOnly,
|
|
730
|
-
className: className,
|
|
731
|
-
loading: loading,
|
|
732
|
-
loadingText: loadingText,
|
|
733
|
-
prepend: prepend,
|
|
734
|
-
listStyle: listStyle,
|
|
735
|
-
clearable: clearable,
|
|
736
|
-
label: label,
|
|
737
|
-
isFilled: selectedItem ? true : false,
|
|
738
|
-
disableLabelAnimation: disableLabelAnimation
|
|
739
|
-
}, !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
|
|
740
|
-
className: "eds-dropdown__searchable-selected-item__wrapper"
|
|
741
|
-
}, React.createElement("span", {
|
|
742
|
-
className: "eds-dropdown__searchable-selected-item",
|
|
743
|
-
onClick: function onClick() {
|
|
744
|
-
var _inputRef$current;
|
|
745
|
-
return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
746
|
-
}
|
|
747
|
-
}, selectedItem.label)), React.createElement("input", _extends({}, getInputProps(_extends({
|
|
748
|
-
disabled: disabled,
|
|
749
|
-
readOnly: readOnly,
|
|
750
|
-
className: 'eds-form-control eds-dropdown__input',
|
|
751
|
-
onKeyDown: function onKeyDown(e) {
|
|
752
|
-
if (selectOnTab && e.key === 'Tab') selectHighlightedItem();
|
|
753
|
-
},
|
|
754
|
-
onFocus: function onFocus() {
|
|
755
|
-
if (!isOpen && openOnFocus) openMenu();
|
|
756
|
-
setHideSelectedItem(true);
|
|
757
|
-
},
|
|
758
|
-
placeholder: selectedItem ? selectedItem.label : placeholder
|
|
759
|
-
}, rest)), {
|
|
760
|
-
onBlur: function onBlur() {
|
|
761
|
-
setHideSelectedItem(false);
|
|
762
|
-
closeMenu();
|
|
763
|
-
},
|
|
764
|
-
ref: mergeRefs(ref, inputRef)
|
|
765
|
-
})));
|
|
766
|
-
});
|
|
767
|
-
|
|
768
|
-
var DropdownInputGroupDeprecated = function DropdownInputGroupDeprecated(_ref) {
|
|
769
|
-
var children = _ref.children,
|
|
770
|
-
feedback = _ref.feedback,
|
|
771
|
-
variant = _ref.variant,
|
|
772
|
-
className = _ref.className,
|
|
773
|
-
style = _ref.style;
|
|
774
|
-
return React.createElement(VariantProvider, {
|
|
775
|
-
variant: variant
|
|
776
|
-
}, React.createElement("div", {
|
|
777
|
-
className: className,
|
|
778
|
-
style: style
|
|
779
|
-
}, children, feedback && variant && React.createElement(FeedbackText, {
|
|
780
|
-
variant: variant
|
|
781
|
-
}, feedback)));
|
|
782
|
-
};
|
|
783
|
-
|
|
784
|
-
var useNormalizedItems = function useNormalizedItems(items) {
|
|
785
|
-
return React.useMemo(function () {
|
|
786
|
-
return items.map(function (item) {
|
|
787
|
-
if (typeof item == 'string') {
|
|
788
|
-
return {
|
|
789
|
-
value: item,
|
|
790
|
-
label: item
|
|
791
|
-
};
|
|
792
|
-
}
|
|
793
|
-
if ((item == null ? void 0 : item.value) === undefined) {
|
|
794
|
-
return _extends({}, item, {
|
|
795
|
-
value: item.label
|
|
796
|
-
});
|
|
797
|
-
}
|
|
798
|
-
return _extends({}, item, {
|
|
799
|
-
value: item.value
|
|
800
|
-
});
|
|
801
|
-
});
|
|
802
|
-
}, [items]);
|
|
803
|
-
};
|
|
804
|
-
|
|
805
|
-
var useResolvedItems = function useResolvedItems( /** The list of items, or an async function that resolves the list of items */
|
|
806
|
-
itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
|
|
807
|
-
debounceTimeout) {
|
|
808
|
-
if (debounceTimeout === void 0) {
|
|
809
|
-
debounceTimeout = 250;
|
|
810
|
-
}
|
|
811
|
-
var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
|
|
812
|
-
var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
|
|
813
|
-
items = _React$useState[0],
|
|
814
|
-
setItems = _React$useState[1];
|
|
815
|
-
var _React$useState2 = React.useState(false),
|
|
816
|
-
loading = _React$useState2[0],
|
|
817
|
-
setLoading = _React$useState2[1];
|
|
818
|
-
var abortControllerRef = React.useRef(new AbortController());
|
|
819
|
-
// We normalize the itemsResolver argument to an async function, so we
|
|
820
|
-
// can use it without thinking about the differences later
|
|
821
|
-
var itemsResolver = React.useMemo(function () {
|
|
822
|
-
if (itemsIsAFunction) return itemsOrItemsResolver;
|
|
823
|
-
return function () {
|
|
824
|
-
return Promise.resolve(itemsOrItemsResolver);
|
|
825
|
-
};
|
|
826
|
-
}, [itemsOrItemsResolver, itemsIsAFunction]);
|
|
827
|
-
// This should be called whenever the input value changes
|
|
828
|
-
var updateItems = /*#__PURE__*/function () {
|
|
829
|
-
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
|
|
830
|
-
var _abortControllerRef$c;
|
|
831
|
-
var abortController, _abortControllerRef$c2, _abortControllerRef$c3, resolvedItems;
|
|
832
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
833
|
-
while (1) {
|
|
834
|
-
switch (_context.prev = _context.next) {
|
|
835
|
-
case 0:
|
|
836
|
-
// The abortController handles cleanup of the previous request and unmounting
|
|
837
|
-
if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null ? void 0 : (_abortControllerRef$c = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c.abort();
|
|
838
|
-
abortController = new AbortController();
|
|
839
|
-
abortControllerRef.current = abortController;
|
|
840
|
-
setLoading(true);
|
|
841
|
-
_context.prev = 4;
|
|
842
|
-
_context.next = 7;
|
|
843
|
-
return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
|
|
844
|
-
case 7:
|
|
845
|
-
resolvedItems = _context.sent;
|
|
846
|
-
if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c3 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c3.aborted)) {
|
|
847
|
-
_context.next = 11;
|
|
848
|
-
break;
|
|
849
|
-
}
|
|
850
|
-
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://design.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');
|
|
851
|
-
return _context.abrupt("return");
|
|
852
|
-
case 11:
|
|
853
|
-
setLoading(false);
|
|
854
|
-
setItems(resolvedItems);
|
|
855
|
-
_context.next = 21;
|
|
856
|
-
break;
|
|
857
|
-
case 15:
|
|
858
|
-
_context.prev = 15;
|
|
859
|
-
_context.t0 = _context["catch"](4);
|
|
860
|
-
if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
|
|
861
|
-
_context.next = 19;
|
|
862
|
-
break;
|
|
863
|
-
}
|
|
864
|
-
return _context.abrupt("return");
|
|
865
|
-
case 19:
|
|
866
|
-
console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
|
|
867
|
-
throw _context.t0;
|
|
868
|
-
case 21:
|
|
869
|
-
case "end":
|
|
870
|
-
return _context.stop();
|
|
871
|
-
}
|
|
872
|
-
}
|
|
873
|
-
}, _callee, null, [[4, 15]]);
|
|
874
|
-
}));
|
|
875
|
-
return function updateItems(_x) {
|
|
876
|
-
return _ref.apply(this, arguments);
|
|
877
|
-
};
|
|
878
|
-
}();
|
|
879
|
-
var debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
|
|
880
|
-
var normalizedItems = useNormalizedItems(items);
|
|
881
|
-
React.useEffect(function () {
|
|
882
|
-
// send abort signal to previous request on unmount for cleanup
|
|
883
|
-
return function () {
|
|
884
|
-
var _abortControllerRef$c4;
|
|
885
|
-
return abortControllerRef == null ? void 0 : (_abortControllerRef$c4 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c4.abort('Component unmounted');
|
|
886
|
-
};
|
|
887
|
-
}, []);
|
|
888
|
-
React.useEffect(function () {
|
|
889
|
-
// Let's fetch the list initially if it's specified
|
|
890
|
-
if (itemsIsAFunction) {
|
|
891
|
-
debouncedFetchItems('');
|
|
892
|
-
}
|
|
893
|
-
}, [itemsIsAFunction, itemsResolver]);
|
|
894
|
-
return {
|
|
895
|
-
items: normalizedItems,
|
|
896
|
-
loading: itemsIsAFunction ? loading : false,
|
|
897
|
-
fetchItems: debouncedFetchItems
|
|
898
|
-
};
|
|
899
|
-
};
|
|
900
|
-
|
|
901
|
-
var _excluded$7 = ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle", "itemFilter", "disableLabelAnimation"];
|
|
902
|
-
/**
|
|
903
|
-
* @deprecated
|
|
904
|
-
* New Dropdown available
|
|
905
|
-
*
|
|
906
|
-
* migration guide to new dropdown:
|
|
907
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
908
|
-
* + if 'searchable', switch to 'SearchableDropdown'
|
|
909
|
-
* - change from 'value' to 'selectedItem'
|
|
910
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
911
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
912
|
-
*/
|
|
913
|
-
var DropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
914
|
-
var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
|
|
915
|
-
debounceTimeout = _ref.debounceTimeout,
|
|
916
|
-
disabled = _ref.disabled,
|
|
917
|
-
feedback = _ref.feedback,
|
|
918
|
-
items = _ref.items,
|
|
919
|
-
label = _ref.label,
|
|
920
|
-
loadingText = _ref.loadingText,
|
|
921
|
-
_ref$onChange = _ref.onChange,
|
|
922
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
923
|
-
return undefined;
|
|
924
|
-
} : _ref$onChange,
|
|
925
|
-
placeholder = _ref.placeholder,
|
|
926
|
-
prepend = _ref.prepend,
|
|
927
|
-
readOnly = _ref.readOnly,
|
|
928
|
-
searchable = _ref.searchable,
|
|
929
|
-
selectOnTab = _ref.selectOnTab,
|
|
930
|
-
openOnFocus = _ref.openOnFocus,
|
|
931
|
-
variant = _ref.variant,
|
|
932
|
-
value = _ref.value,
|
|
933
|
-
_ref$clearable = _ref.clearable,
|
|
934
|
-
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
935
|
-
className = _ref.className,
|
|
936
|
-
style = _ref.style,
|
|
937
|
-
listStyle = _ref.listStyle,
|
|
938
|
-
itemFilter = _ref.itemFilter,
|
|
939
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
940
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
941
|
-
var _useResolvedItems = useResolvedItems(items, debounceTimeout),
|
|
942
|
-
normalizedItems = _useResolvedItems.items,
|
|
943
|
-
loading = _useResolvedItems.loading,
|
|
944
|
-
fetchItems = _useResolvedItems.fetchItems;
|
|
945
|
-
var selectedItem = value === undefined ? undefined : normalizedItems.find(function (item) {
|
|
946
|
-
return value === item.value;
|
|
947
|
-
}) || null;
|
|
948
|
-
var RenderedDropdown = searchable ? SearchableDropdownDeprecated : RegularDropdownDeprecated;
|
|
949
|
-
var searchAbleProps = searchable ? {
|
|
950
|
-
itemFilter: itemFilter,
|
|
951
|
-
name: rest.name,
|
|
952
|
-
'data-cy': rest['data-cy']
|
|
953
|
-
} : {
|
|
954
|
-
name: rest.name,
|
|
955
|
-
'data-cy': rest['data-cy']
|
|
956
|
-
};
|
|
957
|
-
return React.createElement(DownshiftProvider, _extends({
|
|
958
|
-
selectedItem: selectedItem,
|
|
959
|
-
onInputValueChange: fetchItems,
|
|
960
|
-
onChange: onChange,
|
|
961
|
-
value: value,
|
|
962
|
-
highlightFirstItemOnOpen: highlightFirstItemOnOpen,
|
|
963
|
-
className: className,
|
|
964
|
-
style: style,
|
|
965
|
-
searchable: searchable
|
|
966
|
-
}, rest), React.createElement(DropdownInputGroupDeprecated, {
|
|
967
|
-
feedback: feedback,
|
|
968
|
-
variant: variant
|
|
969
|
-
}, React.createElement(RenderedDropdown, _extends({
|
|
970
|
-
label: label,
|
|
971
|
-
items: normalizedItems,
|
|
972
|
-
loading: loading,
|
|
973
|
-
loadingText: loadingText,
|
|
974
|
-
disabled: disabled,
|
|
975
|
-
readOnly: readOnly,
|
|
976
|
-
placeholder: placeholder,
|
|
977
|
-
prepend: prepend,
|
|
978
|
-
selectOnTab: selectOnTab,
|
|
979
|
-
openOnFocus: openOnFocus,
|
|
980
|
-
listStyle: listStyle,
|
|
981
|
-
clearable: clearable,
|
|
982
|
-
disableLabelAnimation: disableLabelAnimation,
|
|
983
|
-
ref: ref
|
|
984
|
-
}, searchAbleProps))));
|
|
985
|
-
});
|
|
986
|
-
|
|
987
|
-
var _excluded$6 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
|
|
988
|
-
var MultiSelectOldContext = /*#__PURE__*/React.createContext(null);
|
|
989
|
-
var useMultiSelectOldContext = function useMultiSelectOldContext() {
|
|
990
|
-
var context = React.useContext(MultiSelectOldContext);
|
|
991
|
-
if (!context) {
|
|
992
|
-
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
993
|
-
}
|
|
994
|
-
return context;
|
|
995
|
-
};
|
|
996
|
-
function stateReducer(state,
|
|
997
|
-
//StateChangeOptions<NormalizedDropdownItemDeprecatedType>,
|
|
998
|
-
actionAndChanges) {
|
|
999
|
-
var changes = actionAndChanges.changes,
|
|
1000
|
-
type = actionAndChanges.type;
|
|
1001
|
-
switch (type) {
|
|
1002
|
-
case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
|
|
1003
|
-
case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
|
|
1004
|
-
case useSelect.stateChangeTypes.ItemClick:
|
|
1005
|
-
return _extends({}, changes, {
|
|
1006
|
-
isOpen: true,
|
|
1007
|
-
highlightedIndex: state.highlightedIndex
|
|
1008
|
-
});
|
|
1009
|
-
default:
|
|
1010
|
-
return changes;
|
|
1011
|
-
}
|
|
1012
|
-
}
|
|
1013
|
-
/**
|
|
1014
|
-
* @deprecated
|
|
1015
|
-
* New MultiSelect available
|
|
1016
|
-
*
|
|
1017
|
-
* migration guide to new dropdown:
|
|
1018
|
-
* - change import from 'MultiSelectDeprecated' to 'MultiSelect'
|
|
1019
|
-
* - add state containing selected items to 'selectedItems' prop
|
|
1020
|
-
* + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
|
|
1021
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
1022
|
-
*/
|
|
1023
|
-
var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
1024
|
-
var className = _ref.className,
|
|
1025
|
-
_ref$clearable = _ref.clearable,
|
|
1026
|
-
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
1027
|
-
debounceTimeout = _ref.debounceTimeout,
|
|
1028
|
-
disabled = _ref.disabled,
|
|
1029
|
-
feedback = _ref.feedback,
|
|
1030
|
-
_ref$initialSelectedI = _ref.initialSelectedItems,
|
|
1031
|
-
initialSelectedItems = _ref$initialSelectedI === void 0 ? [] : _ref$initialSelectedI,
|
|
1032
|
-
input = _ref.items,
|
|
1033
|
-
_ref$itemsSelectedLab = _ref.itemsSelectedLabel,
|
|
1034
|
-
itemsSelectedLabel = _ref$itemsSelectedLab === void 0 ? function (items) {
|
|
1035
|
-
return SelectedItemsLabel(items);
|
|
1036
|
-
} : _ref$itemsSelectedLab,
|
|
1037
|
-
label = _ref.label,
|
|
1038
|
-
listStyle = _ref.listStyle,
|
|
1039
|
-
_ref$loading = _ref.loading,
|
|
1040
|
-
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
1041
|
-
_ref$loadingText = _ref.loadingText,
|
|
1042
|
-
loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
|
|
1043
|
-
_ref$onChange = _ref.onChange,
|
|
1044
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
1045
|
-
return undefined;
|
|
1046
|
-
} : _ref$onChange,
|
|
1047
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
1048
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
1049
|
-
_ref$readOnly = _ref.readOnly,
|
|
1050
|
-
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
1051
|
-
style = _ref.style,
|
|
1052
|
-
variant = _ref.variant,
|
|
1053
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
1054
|
-
var _useResolvedItems = useResolvedItems(input, debounceTimeout),
|
|
1055
|
-
items = _useResolvedItems.items;
|
|
1056
|
-
var _useState = useState(initialSelectedItems),
|
|
1057
|
-
selectedItems = _useState[0],
|
|
1058
|
-
setSelectedItems = _useState[1];
|
|
1059
|
-
var reset = React.useCallback(function () {
|
|
1060
|
-
setSelectedItems([]);
|
|
1061
|
-
}, []);
|
|
1062
|
-
function isSelected(selectedCheckboxItem) {
|
|
1063
|
-
return selectedItems.some(function (selected) {
|
|
1064
|
-
return selected.value === selectedCheckboxItem.value;
|
|
1065
|
-
});
|
|
1066
|
-
}
|
|
1067
|
-
var _useSelect = useSelect(_extends({
|
|
1068
|
-
items: items,
|
|
1069
|
-
stateReducer: stateReducer,
|
|
1070
|
-
selectedItem: null,
|
|
1071
|
-
onSelectedItemChange: function onSelectedItemChange(_ref2) {
|
|
1072
|
-
var selectedItem = _ref2.selectedItem;
|
|
1073
|
-
if (!selectedItem) {
|
|
1074
|
-
return;
|
|
1075
|
-
}
|
|
1076
|
-
var itemIsFound = isSelected(selectedItem);
|
|
1077
|
-
if (itemIsFound) {
|
|
1078
|
-
var slicedItemList = selectedItems.filter(function (item) {
|
|
1079
|
-
return item.value !== selectedItem.value;
|
|
1080
|
-
});
|
|
1081
|
-
setSelectedItems(slicedItemList);
|
|
1082
|
-
onChange(slicedItemList);
|
|
1083
|
-
} else {
|
|
1084
|
-
var _slicedItemList = [].concat(selectedItems, [selectedItem]);
|
|
1085
|
-
setSelectedItems(_slicedItemList);
|
|
1086
|
-
onChange(_slicedItemList);
|
|
1087
|
-
}
|
|
1088
|
-
}
|
|
1089
|
-
}, rest)),
|
|
1090
|
-
isOpen = _useSelect.isOpen,
|
|
1091
|
-
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
1092
|
-
getLabelProps = _useSelect.getLabelProps,
|
|
1093
|
-
getMenuProps = _useSelect.getMenuProps,
|
|
1094
|
-
highlightedIndex = _useSelect.highlightedIndex,
|
|
1095
|
-
getItemProps = _useSelect.getItemProps,
|
|
1096
|
-
openMenu = _useSelect.openMenu;
|
|
1097
|
-
var buttonText = selectedItems.length ? itemsSelectedLabel(selectedItems) : '';
|
|
1098
|
-
var multiSelectId = useRandomId('eds-multiselect');
|
|
1099
|
-
return React.createElement(MultiSelectOldContext.Provider, {
|
|
1100
|
-
value: {
|
|
1101
|
-
isOpen: isOpen,
|
|
1102
|
-
reset: reset,
|
|
1103
|
-
getToggleButtonProps: getToggleButtonProps,
|
|
1104
|
-
openMenu: openMenu,
|
|
1105
|
-
openOnFocus: openOnFocus
|
|
1106
|
-
}
|
|
1107
|
-
}, React.createElement("div", {
|
|
1108
|
-
className: classNames('eds-multiselect', 'eds-dropdown-wrapper', className),
|
|
1109
|
-
style: style
|
|
1110
|
-
}, React.createElement(BaseFormControl, {
|
|
1111
|
-
label: label,
|
|
1112
|
-
labelId: multiSelectId,
|
|
1113
|
-
labelProps: getLabelProps,
|
|
1114
|
-
feedback: feedback,
|
|
1115
|
-
variant: variant,
|
|
1116
|
-
isFilled: selectedItems.length > 0 || isOpen,
|
|
1117
|
-
disabled: disabled,
|
|
1118
|
-
readOnly: readOnly,
|
|
1119
|
-
append: React.createElement(Appendix, {
|
|
1120
|
-
hasSelected: clearable && selectedItems.length > 0,
|
|
1121
|
-
loading: loading,
|
|
1122
|
-
loadingText: loadingText,
|
|
1123
|
-
readOnly: readOnly
|
|
1124
|
-
})
|
|
1125
|
-
}, React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1126
|
-
style: {
|
|
1127
|
-
textAlign: 'left'
|
|
1128
|
-
},
|
|
1129
|
-
type: 'button',
|
|
1130
|
-
className: 'eds-form-control eds-multiselect__button'
|
|
1131
|
-
})), buttonText)), React.createElement("ul", _extends({
|
|
1132
|
-
className: classNames('eds-dropdown-list', {
|
|
1133
|
-
'eds-dropdown-list--open': isOpen
|
|
1134
|
-
})
|
|
1135
|
-
}, getMenuProps({
|
|
1136
|
-
style: _extends({
|
|
1137
|
-
position: 'absolute',
|
|
1138
|
-
top: space.extraLarge3 + space.extraSmall + "px"
|
|
1139
|
-
}, listStyle)
|
|
1140
|
-
})), isOpen && items.map(function (item, index) {
|
|
1141
|
-
return React.createElement("li", _extends({
|
|
1142
|
-
className: classNames('eds-dropdown-list__item', {
|
|
1143
|
-
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
1144
|
-
'eds-dropdown-list__item--selected': isSelected(item)
|
|
1145
|
-
}),
|
|
1146
|
-
key: "" + item.value + index
|
|
1147
|
-
}, getItemProps({
|
|
1148
|
-
item: item,
|
|
1149
|
-
index: index
|
|
1150
|
-
}), {
|
|
1151
|
-
style: {
|
|
1152
|
-
display: 'flex'
|
|
1153
|
-
}
|
|
1154
|
-
}), React.createElement("span", {
|
|
1155
|
-
style: {
|
|
1156
|
-
display: 'flex'
|
|
1157
|
-
}
|
|
1158
|
-
}, React.createElement("span", {
|
|
1159
|
-
className: classNames('eds-multiselect-checkbox', {
|
|
1160
|
-
'eds-multiselect-checkbox--checked': isSelected(item)
|
|
1161
|
-
})
|
|
1162
|
-
}, React.createElement(CheckboxIcon, null)), React.createElement("span", {
|
|
1163
|
-
className: "eds-multiselect__item-label"
|
|
1164
|
-
}, item.label)), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
1165
|
-
return React.createElement(Icon, {
|
|
1166
|
-
key: index,
|
|
1167
|
-
inline: true,
|
|
1168
|
-
className: "eds-dropdown-list__item-icon"
|
|
1169
|
-
});
|
|
1170
|
-
})));
|
|
1171
|
-
}))));
|
|
1172
|
-
};
|
|
1173
|
-
var ClearButton = function ClearButton(_ref3) {
|
|
1174
|
-
var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
|
1175
|
-
var _useMultiSelectOldCon = useMultiSelectOldContext(),
|
|
1176
|
-
reset = _useMultiSelectOldCon.reset;
|
|
1177
|
-
return React.createElement(React.Fragment, null, React.createElement("button", _extends({
|
|
1178
|
-
className: "eds-dropdown__clear-button",
|
|
1179
|
-
type: "button",
|
|
1180
|
-
tabIndex: -1,
|
|
1181
|
-
onClick: function onClick() {
|
|
1182
|
-
return reset();
|
|
1183
|
-
}
|
|
1184
|
-
}, props), React.createElement(CloseIcon, null)), React.createElement("div", {
|
|
1185
|
-
className: "eds-dropdown__divider"
|
|
1186
|
-
}));
|
|
1187
|
-
};
|
|
1188
|
-
var Appendix = function Appendix(_ref4) {
|
|
1189
|
-
var loading = _ref4.loading,
|
|
1190
|
-
loadingText = _ref4.loadingText,
|
|
1191
|
-
readOnly = _ref4.readOnly,
|
|
1192
|
-
hasSelected = _ref4.hasSelected;
|
|
1193
|
-
if (loading) {
|
|
1194
|
-
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
1195
|
-
}
|
|
1196
|
-
if (readOnly) {
|
|
1197
|
-
return null;
|
|
1198
|
-
}
|
|
1199
|
-
return hasSelected ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
|
|
1200
|
-
};
|
|
1201
|
-
var DropdownToggleButton = function DropdownToggleButton() {
|
|
1202
|
-
var _useMultiSelectOldCon2 = useMultiSelectOldContext(),
|
|
1203
|
-
getToggleButtonProps = _useMultiSelectOldCon2.getToggleButtonProps,
|
|
1204
|
-
isOpen = _useMultiSelectOldCon2.isOpen,
|
|
1205
|
-
openMenu = _useMultiSelectOldCon2.openMenu,
|
|
1206
|
-
openOnFocus = _useMultiSelectOldCon2.openOnFocus;
|
|
1207
|
-
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1208
|
-
className: classNames('eds-dropdown__toggle-button', {
|
|
1209
|
-
'eds-dropdown__toggle-button--open': isOpen
|
|
1210
|
-
}),
|
|
1211
|
-
onFocus: function onFocus() {
|
|
1212
|
-
if (openOnFocus) {
|
|
1213
|
-
openMenu();
|
|
1214
|
-
}
|
|
1215
|
-
}
|
|
1216
|
-
}), {
|
|
1217
|
-
type: "button"
|
|
1218
|
-
}), React.createElement(DownArrowIcon, null));
|
|
1219
|
-
};
|
|
1220
|
-
var CheckboxIcon = function CheckboxIcon() {
|
|
1221
|
-
return React.createElement("svg", {
|
|
1222
|
-
className: "eds-checkbox-icon",
|
|
1223
|
-
width: "11px",
|
|
1224
|
-
height: "9px",
|
|
1225
|
-
viewBox: "6 11 37 33"
|
|
1226
|
-
}, React.createElement("path", {
|
|
1227
|
-
className: "eds-checkbox-icon__path",
|
|
1228
|
-
d: "M14.1 27.2l7.1 7.2 14.6-14.8",
|
|
1229
|
-
fill: "none"
|
|
1230
|
-
}));
|
|
1231
|
-
};
|
|
1232
|
-
function SelectedItemsLabel(items) {
|
|
1233
|
-
return items.length < 3 ? items.map(function (item) {
|
|
1234
|
-
return item.label;
|
|
1235
|
-
}).toString() : items.length + " elementer valgt";
|
|
357
|
+
}, e;
|
|
1236
358
|
}
|
|
1237
359
|
|
|
1238
360
|
var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
|
|
@@ -1260,7 +382,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1260
382
|
selectedItems = _ref.selectedItems,
|
|
1261
383
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
1262
384
|
var isMultiselect = selectAllItem !== undefined;
|
|
1263
|
-
var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null
|
|
385
|
+
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));
|
|
1264
386
|
var isItemSelected = function isItemSelected(item) {
|
|
1265
387
|
return selectedItems.some(function (selectedItem) {
|
|
1266
388
|
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);
|
|
@@ -1496,6 +618,121 @@ var ToggleButton = function ToggleButton(_ref5) {
|
|
|
1496
618
|
}));
|
|
1497
619
|
};
|
|
1498
620
|
|
|
621
|
+
var useNormalizedItems = function useNormalizedItems(items) {
|
|
622
|
+
return React.useMemo(function () {
|
|
623
|
+
return items.map(function (item) {
|
|
624
|
+
if (typeof item == 'string') {
|
|
625
|
+
return {
|
|
626
|
+
value: item,
|
|
627
|
+
label: item
|
|
628
|
+
};
|
|
629
|
+
}
|
|
630
|
+
if ((item == null ? void 0 : item.value) === undefined) {
|
|
631
|
+
return _extends({}, item, {
|
|
632
|
+
value: item.label
|
|
633
|
+
});
|
|
634
|
+
}
|
|
635
|
+
return _extends({}, item, {
|
|
636
|
+
value: item.value
|
|
637
|
+
});
|
|
638
|
+
});
|
|
639
|
+
}, [items]);
|
|
640
|
+
};
|
|
641
|
+
|
|
642
|
+
var useResolvedItems = function useResolvedItems(/** The list of items, or an async function that resolves the list of items */
|
|
643
|
+
itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
|
|
644
|
+
debounceTimeout) {
|
|
645
|
+
if (debounceTimeout === void 0) {
|
|
646
|
+
debounceTimeout = 250;
|
|
647
|
+
}
|
|
648
|
+
var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
|
|
649
|
+
var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
|
|
650
|
+
items = _React$useState[0],
|
|
651
|
+
setItems = _React$useState[1];
|
|
652
|
+
var _React$useState2 = React.useState(false),
|
|
653
|
+
loading = _React$useState2[0],
|
|
654
|
+
setLoading = _React$useState2[1];
|
|
655
|
+
var abortControllerRef = React.useRef(new AbortController());
|
|
656
|
+
// We normalize the itemsResolver argument to an async function, so we
|
|
657
|
+
// can use it without thinking about the differences later
|
|
658
|
+
var itemsResolver = React.useMemo(function () {
|
|
659
|
+
if (itemsIsAFunction) return itemsOrItemsResolver;
|
|
660
|
+
return function () {
|
|
661
|
+
return Promise.resolve(itemsOrItemsResolver);
|
|
662
|
+
};
|
|
663
|
+
}, [itemsOrItemsResolver, itemsIsAFunction]);
|
|
664
|
+
// This should be called whenever the input value changes
|
|
665
|
+
var updateItems = /*#__PURE__*/function () {
|
|
666
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
|
|
667
|
+
var _abortControllerRef$c;
|
|
668
|
+
var abortController, _abortControllerRef$c2, resolvedItems;
|
|
669
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
670
|
+
while (1) switch (_context.prev = _context.next) {
|
|
671
|
+
case 0:
|
|
672
|
+
// The abortController handles cleanup of the previous request and unmounting
|
|
673
|
+
if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null || (_abortControllerRef$c = abortControllerRef.current) == null || _abortControllerRef$c.abort();
|
|
674
|
+
abortController = new AbortController();
|
|
675
|
+
abortControllerRef.current = abortController;
|
|
676
|
+
setLoading(true);
|
|
677
|
+
_context.prev = 4;
|
|
678
|
+
_context.next = 7;
|
|
679
|
+
return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
|
|
680
|
+
case 7:
|
|
681
|
+
resolvedItems = _context.sent;
|
|
682
|
+
if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c2 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c2.aborted)) {
|
|
683
|
+
_context.next = 11;
|
|
684
|
+
break;
|
|
685
|
+
}
|
|
686
|
+
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://design.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');
|
|
687
|
+
return _context.abrupt("return");
|
|
688
|
+
case 11:
|
|
689
|
+
setLoading(false);
|
|
690
|
+
setItems(resolvedItems);
|
|
691
|
+
_context.next = 21;
|
|
692
|
+
break;
|
|
693
|
+
case 15:
|
|
694
|
+
_context.prev = 15;
|
|
695
|
+
_context.t0 = _context["catch"](4);
|
|
696
|
+
if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
|
|
697
|
+
_context.next = 19;
|
|
698
|
+
break;
|
|
699
|
+
}
|
|
700
|
+
return _context.abrupt("return");
|
|
701
|
+
case 19:
|
|
702
|
+
console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
|
|
703
|
+
throw _context.t0;
|
|
704
|
+
case 21:
|
|
705
|
+
case "end":
|
|
706
|
+
return _context.stop();
|
|
707
|
+
}
|
|
708
|
+
}, _callee, null, [[4, 15]]);
|
|
709
|
+
}));
|
|
710
|
+
return function updateItems(_x) {
|
|
711
|
+
return _ref.apply(this, arguments);
|
|
712
|
+
};
|
|
713
|
+
}();
|
|
714
|
+
var debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
|
|
715
|
+
var normalizedItems = useNormalizedItems(items);
|
|
716
|
+
React.useEffect(function () {
|
|
717
|
+
// send abort signal to previous request on unmount for cleanup
|
|
718
|
+
return function () {
|
|
719
|
+
var _abortControllerRef$c3;
|
|
720
|
+
return abortControllerRef == null || (_abortControllerRef$c3 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c3.abort('Component unmounted');
|
|
721
|
+
};
|
|
722
|
+
}, []);
|
|
723
|
+
React.useEffect(function () {
|
|
724
|
+
// Let's fetch the list initially if it's specified
|
|
725
|
+
if (itemsIsAFunction) {
|
|
726
|
+
debouncedFetchItems('');
|
|
727
|
+
}
|
|
728
|
+
}, [itemsIsAFunction, itemsResolver]);
|
|
729
|
+
return {
|
|
730
|
+
items: normalizedItems,
|
|
731
|
+
loading: itemsIsAFunction ? loading : false,
|
|
732
|
+
fetchItems: debouncedFetchItems
|
|
733
|
+
};
|
|
734
|
+
};
|
|
735
|
+
|
|
1499
736
|
/* start general utils */
|
|
1500
737
|
var EMPTY_INPUT = '';
|
|
1501
738
|
function lowerCaseFilterTest(item, input) {
|
|
@@ -1827,7 +1064,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1827
1064
|
var _inputRef$current;
|
|
1828
1065
|
onChange(null);
|
|
1829
1066
|
setInputValue(EMPTY_INPUT);
|
|
1830
|
-
(_inputRef$current = inputRef.current) == null
|
|
1067
|
+
(_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
|
|
1831
1068
|
updateListItems({
|
|
1832
1069
|
inputValue: inputValue
|
|
1833
1070
|
});
|
|
@@ -1861,7 +1098,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1861
1098
|
labelTooltip: labelTooltip,
|
|
1862
1099
|
onClick: function onClick(e) {
|
|
1863
1100
|
var _inputRef$current2;
|
|
1864
|
-
if (e.target === e.currentTarget) (_inputRef$current2 = inputRef.current) == null
|
|
1101
|
+
if (e.target === e.currentTarget) (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
|
|
1865
1102
|
},
|
|
1866
1103
|
prepend: prepend,
|
|
1867
1104
|
readOnly: readOnly,
|
|
@@ -1875,7 +1112,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1875
1112
|
"aria-hidden": "true",
|
|
1876
1113
|
onClick: function onClick() {
|
|
1877
1114
|
var _inputRef$current3;
|
|
1878
|
-
(_inputRef$current3 = inputRef.current) == null
|
|
1115
|
+
(_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
|
|
1879
1116
|
openMenu();
|
|
1880
1117
|
}
|
|
1881
1118
|
}, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
|
|
@@ -1892,7 +1129,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1892
1129
|
setShowSelectedItem(false);
|
|
1893
1130
|
},
|
|
1894
1131
|
onKeyDown: function onKeyDown(e) {
|
|
1895
|
-
if (selectOnTab && isOpen && e.key === 'Tab') onChange == null
|
|
1132
|
+
if (selectOnTab && isOpen && e.key === 'Tab') onChange == null || onChange(listItems[highlightedIndex]);
|
|
1896
1133
|
},
|
|
1897
1134
|
ref: inputRef
|
|
1898
1135
|
}))), React.createElement(DropdownList, {
|
|
@@ -2068,7 +1305,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2068
1305
|
}
|
|
2069
1306
|
return _extends({}, changes, {
|
|
2070
1307
|
isOpen: true,
|
|
2071
|
-
inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null
|
|
1308
|
+
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
|
|
2072
1309
|
});
|
|
2073
1310
|
}
|
|
2074
1311
|
// edit input value when selected items is updated outside component
|
|
@@ -2076,7 +1313,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2076
1313
|
{
|
|
2077
1314
|
var _inputRef$current$val2, _inputRef$current2;
|
|
2078
1315
|
return _extends({}, changes, {
|
|
2079
|
-
inputValue: (_inputRef$current$val2 = inputRef == null
|
|
1316
|
+
inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
|
|
2080
1317
|
});
|
|
2081
1318
|
}
|
|
2082
1319
|
// remove leading whitespace, select item with spacebar if input is empty and filter list items
|
|
@@ -2124,6 +1361,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2124
1361
|
}, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
|
|
2125
1362
|
var _useCombobox = useCombobox(_extends({
|
|
2126
1363
|
defaultHighlightedIndex: lastHighlightedIndex,
|
|
1364
|
+
// after selection, highlight previously selected item.
|
|
2127
1365
|
items: listItems,
|
|
2128
1366
|
itemToString: itemToString,
|
|
2129
1367
|
selectedItem: null,
|
|
@@ -2187,7 +1425,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2187
1425
|
var _inputRef$current3;
|
|
2188
1426
|
onChange([]);
|
|
2189
1427
|
setInputValue(EMPTY_INPUT);
|
|
2190
|
-
(_inputRef$current3 = inputRef.current) == null
|
|
1428
|
+
(_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
|
|
2191
1429
|
updateListItems({
|
|
2192
1430
|
inputValue: inputValue
|
|
2193
1431
|
});
|
|
@@ -2220,7 +1458,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2220
1458
|
labelTooltip: labelTooltip,
|
|
2221
1459
|
onClick: function onClick(e) {
|
|
2222
1460
|
var _inputRef$current4;
|
|
2223
|
-
if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null
|
|
1461
|
+
if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.focus();
|
|
2224
1462
|
},
|
|
2225
1463
|
readOnly: readOnly,
|
|
2226
1464
|
ref: refs.setReference,
|
|
@@ -2253,7 +1491,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2253
1491
|
clickedItem: selectedItem,
|
|
2254
1492
|
onChange: onChange
|
|
2255
1493
|
});
|
|
2256
|
-
inputRef == null
|
|
1494
|
+
inputRef == null || (_inputRef$current6 = inputRef.current) == null || _inputRef$current6.focus();
|
|
2257
1495
|
},
|
|
2258
1496
|
selectedItem: selectedItem
|
|
2259
1497
|
});
|
|
@@ -2364,7 +1602,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2364
1602
|
case useSelect.stateChangeTypes.ItemClick:
|
|
2365
1603
|
{
|
|
2366
1604
|
if (newSelectedItem === undefined) return;
|
|
2367
|
-
onChange == null
|
|
1605
|
+
onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
|
|
2368
1606
|
}
|
|
2369
1607
|
}
|
|
2370
1608
|
},
|
|
@@ -2409,8 +1647,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2409
1647
|
loadingText: loadingText,
|
|
2410
1648
|
onClear: function onClear() {
|
|
2411
1649
|
var _toggleButtonRef$curr;
|
|
2412
|
-
onChange == null
|
|
2413
|
-
(_toggleButtonRef$curr = toggleButtonRef.current) == null
|
|
1650
|
+
onChange == null || onChange(null);
|
|
1651
|
+
(_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
|
|
2414
1652
|
},
|
|
2415
1653
|
disabled: readOnly || disabled,
|
|
2416
1654
|
selectedItems: [selectedItem]
|
|
@@ -2443,7 +1681,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2443
1681
|
// we don't want to clear selection with tab
|
|
2444
1682
|
var highlitedItem = normalizedItems[highlightedIndex];
|
|
2445
1683
|
if (highlitedItem) {
|
|
2446
|
-
onChange == null
|
|
1684
|
+
onChange == null || onChange(highlitedItem);
|
|
2447
1685
|
}
|
|
2448
1686
|
}
|
|
2449
1687
|
},
|
|
@@ -2521,7 +1759,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
|
|
|
2521
1759
|
disabled: disabled || readOnly,
|
|
2522
1760
|
onChange: function onChange(event) {
|
|
2523
1761
|
var _normalizedItems$find;
|
|
2524
|
-
_onChange == null
|
|
1762
|
+
_onChange == null || _onChange({
|
|
2525
1763
|
value: event.target.value,
|
|
2526
1764
|
selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
|
|
2527
1765
|
return item.value === event.target.value;
|
|
@@ -2558,5 +1796,5 @@ var FieldAppend = function FieldAppend(_ref3) {
|
|
|
2558
1796
|
|
|
2559
1797
|
warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
|
|
2560
1798
|
|
|
2561
|
-
export { Dropdown,
|
|
1799
|
+
export { Dropdown, MultiSelect, NativeDropdown, SearchableDropdown };
|
|
2562
1800
|
//# sourceMappingURL=dropdown.esm.js.map
|