@entur/dropdown 6.0.11 → 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 +446 -1186
- 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 +421 -1159
- 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
|
@@ -4,1239 +4,361 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var utils = require('@entur/utils');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var
|
|
7
|
+
var downshift = require('downshift');
|
|
8
8
|
var classNames = require('classnames');
|
|
9
|
+
var reactDom = require('@floating-ui/react-dom');
|
|
9
10
|
var form = require('@entur/form');
|
|
10
|
-
var icons = require('@entur/icons');
|
|
11
|
-
var a11y = require('@entur/a11y');
|
|
12
|
-
var loader = require('@entur/loader');
|
|
13
11
|
var tokens = require('@entur/tokens');
|
|
14
|
-
var
|
|
12
|
+
var a11y = require('@entur/a11y');
|
|
15
13
|
var button = require('@entur/button');
|
|
16
14
|
var chip = require('@entur/chip');
|
|
15
|
+
var icons = require('@entur/icons');
|
|
16
|
+
var loader = require('@entur/loader');
|
|
17
17
|
var tooltip = require('@entur/tooltip');
|
|
18
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
|
+
}
|
|
19
62
|
function _regeneratorRuntime() {
|
|
20
63
|
_regeneratorRuntime = function () {
|
|
21
|
-
return
|
|
64
|
+
return e;
|
|
22
65
|
};
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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;
|
|
28
72
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
function define(
|
|
34
|
-
return Object.defineProperty(
|
|
35
|
-
value:
|
|
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,
|
|
36
80
|
enumerable: !0,
|
|
37
81
|
configurable: !0,
|
|
38
82
|
writable: !0
|
|
39
|
-
}),
|
|
83
|
+
}), t[e];
|
|
40
84
|
}
|
|
41
85
|
try {
|
|
42
86
|
define({}, "");
|
|
43
|
-
} catch (
|
|
44
|
-
define = function (
|
|
45
|
-
return
|
|
87
|
+
} catch (t) {
|
|
88
|
+
define = function (t, e, r) {
|
|
89
|
+
return t[e] = r;
|
|
46
90
|
};
|
|
47
91
|
}
|
|
48
|
-
function wrap(
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return
|
|
53
|
-
value: makeInvokeMethod(
|
|
54
|
-
}),
|
|
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;
|
|
55
99
|
}
|
|
56
|
-
function tryCatch(
|
|
100
|
+
function tryCatch(t, e, r) {
|
|
57
101
|
try {
|
|
58
102
|
return {
|
|
59
103
|
type: "normal",
|
|
60
|
-
arg:
|
|
104
|
+
arg: t.call(e, r)
|
|
61
105
|
};
|
|
62
|
-
} catch (
|
|
106
|
+
} catch (t) {
|
|
63
107
|
return {
|
|
64
108
|
type: "throw",
|
|
65
|
-
arg:
|
|
109
|
+
arg: t
|
|
66
110
|
};
|
|
67
111
|
}
|
|
68
112
|
}
|
|
69
|
-
|
|
70
|
-
var
|
|
113
|
+
e.wrap = wrap;
|
|
114
|
+
var h = "suspendedStart",
|
|
115
|
+
l = "suspendedYield",
|
|
116
|
+
f = "executing",
|
|
117
|
+
s = "completed",
|
|
118
|
+
y = {};
|
|
71
119
|
function Generator() {}
|
|
72
120
|
function GeneratorFunction() {}
|
|
73
121
|
function GeneratorFunctionPrototype() {}
|
|
74
|
-
var
|
|
75
|
-
define(
|
|
122
|
+
var p = {};
|
|
123
|
+
define(p, a, function () {
|
|
76
124
|
return this;
|
|
77
125
|
});
|
|
78
|
-
var
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
var
|
|
82
|
-
function defineIteratorMethods(
|
|
83
|
-
["next", "throw", "return"].forEach(function (
|
|
84
|
-
define(
|
|
85
|
-
return this._invoke(
|
|
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);
|
|
86
134
|
});
|
|
87
135
|
});
|
|
88
136
|
}
|
|
89
|
-
function AsyncIterator(
|
|
90
|
-
function invoke(
|
|
91
|
-
var
|
|
92
|
-
if ("throw" !==
|
|
93
|
-
var
|
|
94
|
-
|
|
95
|
-
return
|
|
96
|
-
invoke("next",
|
|
97
|
-
}, function (
|
|
98
|
-
invoke("throw",
|
|
99
|
-
}) :
|
|
100
|
-
|
|
101
|
-
}, function (
|
|
102
|
-
return invoke("throw",
|
|
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);
|
|
103
151
|
});
|
|
104
152
|
}
|
|
105
|
-
|
|
153
|
+
a(c.arg);
|
|
106
154
|
}
|
|
107
|
-
var
|
|
108
|
-
|
|
109
|
-
value: function (
|
|
155
|
+
var r;
|
|
156
|
+
o(this, "_invoke", {
|
|
157
|
+
value: function (t, n) {
|
|
110
158
|
function callInvokeWithMethodAndArg() {
|
|
111
|
-
return new
|
|
112
|
-
invoke(
|
|
159
|
+
return new e(function (e, r) {
|
|
160
|
+
invoke(t, n, e, r);
|
|
113
161
|
});
|
|
114
162
|
}
|
|
115
|
-
return
|
|
163
|
+
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
|
116
164
|
}
|
|
117
165
|
});
|
|
118
166
|
}
|
|
119
|
-
function makeInvokeMethod(
|
|
120
|
-
var
|
|
121
|
-
return function (
|
|
122
|
-
if (
|
|
123
|
-
if (
|
|
124
|
-
if ("throw" ===
|
|
125
|
-
return
|
|
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
|
+
};
|
|
126
177
|
}
|
|
127
|
-
for (
|
|
128
|
-
var
|
|
129
|
-
if (
|
|
130
|
-
var
|
|
131
|
-
if (
|
|
132
|
-
if (
|
|
133
|
-
return
|
|
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;
|
|
134
185
|
}
|
|
135
186
|
}
|
|
136
|
-
if ("next" ===
|
|
137
|
-
if (
|
|
138
|
-
|
|
139
|
-
} else "return" ===
|
|
140
|
-
|
|
141
|
-
var
|
|
142
|
-
if ("normal" ===
|
|
143
|
-
if (
|
|
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;
|
|
144
195
|
return {
|
|
145
|
-
value:
|
|
146
|
-
done:
|
|
196
|
+
value: p.arg,
|
|
197
|
+
done: n.done
|
|
147
198
|
};
|
|
148
199
|
}
|
|
149
|
-
"throw" ===
|
|
200
|
+
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
|
|
150
201
|
}
|
|
151
202
|
};
|
|
152
203
|
}
|
|
153
|
-
function maybeInvokeDelegate(
|
|
154
|
-
var
|
|
155
|
-
|
|
156
|
-
if (
|
|
157
|
-
var
|
|
158
|
-
if ("throw" ===
|
|
159
|
-
var
|
|
160
|
-
return
|
|
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);
|
|
161
212
|
}
|
|
162
|
-
function pushTryEntry(
|
|
163
|
-
var
|
|
164
|
-
tryLoc:
|
|
213
|
+
function pushTryEntry(t) {
|
|
214
|
+
var e = {
|
|
215
|
+
tryLoc: t[0]
|
|
165
216
|
};
|
|
166
|
-
1 in
|
|
217
|
+
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
|
|
167
218
|
}
|
|
168
|
-
function resetTryEntry(
|
|
169
|
-
var
|
|
170
|
-
|
|
219
|
+
function resetTryEntry(t) {
|
|
220
|
+
var e = t.completion || {};
|
|
221
|
+
e.type = "normal", delete e.arg, t.completion = e;
|
|
171
222
|
}
|
|
172
|
-
function Context(
|
|
223
|
+
function Context(t) {
|
|
173
224
|
this.tryEntries = [{
|
|
174
225
|
tryLoc: "root"
|
|
175
|
-
}],
|
|
226
|
+
}], t.forEach(pushTryEntry, this), this.reset(!0);
|
|
176
227
|
}
|
|
177
|
-
function values(
|
|
178
|
-
if (
|
|
179
|
-
var
|
|
180
|
-
if (
|
|
181
|
-
if ("function" == typeof
|
|
182
|
-
if (!isNaN(
|
|
183
|
-
var
|
|
184
|
-
|
|
185
|
-
for (; ++
|
|
186
|
-
return next.value =
|
|
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;
|
|
187
238
|
};
|
|
188
|
-
return
|
|
239
|
+
return i.next = i;
|
|
189
240
|
}
|
|
190
241
|
}
|
|
191
|
-
|
|
192
|
-
next: doneResult
|
|
193
|
-
};
|
|
242
|
+
throw new TypeError(typeof e + " is not iterable");
|
|
194
243
|
}
|
|
195
|
-
|
|
196
|
-
return {
|
|
197
|
-
value: undefined,
|
|
198
|
-
done: !0
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
|
|
244
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
|
|
202
245
|
value: GeneratorFunctionPrototype,
|
|
203
246
|
configurable: !0
|
|
204
|
-
}),
|
|
247
|
+
}), o(GeneratorFunctionPrototype, "constructor", {
|
|
205
248
|
value: GeneratorFunction,
|
|
206
249
|
configurable: !0
|
|
207
|
-
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype,
|
|
208
|
-
var
|
|
209
|
-
return !!
|
|
210
|
-
},
|
|
211
|
-
return Object.setPrototypeOf ? Object.setPrototypeOf(
|
|
212
|
-
},
|
|
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) {
|
|
213
256
|
return {
|
|
214
|
-
__await:
|
|
257
|
+
__await: t
|
|
215
258
|
};
|
|
216
|
-
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype,
|
|
259
|
+
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
|
|
217
260
|
return this;
|
|
218
|
-
}),
|
|
219
|
-
void 0 ===
|
|
220
|
-
var
|
|
221
|
-
return
|
|
222
|
-
return
|
|
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();
|
|
223
266
|
});
|
|
224
|
-
}, defineIteratorMethods(
|
|
267
|
+
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
|
|
225
268
|
return this;
|
|
226
|
-
}), define(
|
|
269
|
+
}), define(g, "toString", function () {
|
|
227
270
|
return "[object Generator]";
|
|
228
|
-
}),
|
|
229
|
-
var
|
|
230
|
-
|
|
231
|
-
for (var
|
|
232
|
-
return
|
|
233
|
-
for (;
|
|
234
|
-
var
|
|
235
|
-
if (
|
|
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;
|
|
236
279
|
}
|
|
237
280
|
return next.done = !0, next;
|
|
238
281
|
};
|
|
239
|
-
},
|
|
282
|
+
}, e.values = values, Context.prototype = {
|
|
240
283
|
constructor: Context,
|
|
241
|
-
reset: function (
|
|
242
|
-
if (this.prev = 0, this.next = 0, this.sent = this._sent =
|
|
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);
|
|
243
286
|
},
|
|
244
287
|
stop: function () {
|
|
245
288
|
this.done = !0;
|
|
246
|
-
var
|
|
247
|
-
if ("throw" ===
|
|
289
|
+
var t = this.tryEntries[0].completion;
|
|
290
|
+
if ("throw" === t.type) throw t.arg;
|
|
248
291
|
return this.rval;
|
|
249
292
|
},
|
|
250
|
-
dispatchException: function (
|
|
251
|
-
if (this.done) throw
|
|
252
|
-
var
|
|
253
|
-
function handle(
|
|
254
|
-
return
|
|
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;
|
|
255
298
|
}
|
|
256
|
-
for (var
|
|
257
|
-
var
|
|
258
|
-
|
|
259
|
-
if ("root" ===
|
|
260
|
-
if (
|
|
261
|
-
var
|
|
262
|
-
|
|
263
|
-
if (
|
|
264
|
-
if (this.prev <
|
|
265
|
-
if (this.prev <
|
|
266
|
-
} else if (
|
|
267
|
-
if (this.prev <
|
|
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);
|
|
268
311
|
} else {
|
|
269
|
-
if (!
|
|
270
|
-
if (this.prev <
|
|
312
|
+
if (!u) throw Error("try statement without catch or finally");
|
|
313
|
+
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
|
271
314
|
}
|
|
272
315
|
}
|
|
273
316
|
}
|
|
274
317
|
},
|
|
275
|
-
abrupt: function (
|
|
276
|
-
for (var
|
|
277
|
-
var
|
|
278
|
-
if (
|
|
279
|
-
var
|
|
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;
|
|
280
323
|
break;
|
|
281
324
|
}
|
|
282
325
|
}
|
|
283
|
-
|
|
284
|
-
var
|
|
285
|
-
return
|
|
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);
|
|
286
329
|
},
|
|
287
|
-
complete: function (
|
|
288
|
-
if ("throw" ===
|
|
289
|
-
return "break" ===
|
|
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;
|
|
290
333
|
},
|
|
291
|
-
finish: function (
|
|
292
|
-
for (var
|
|
293
|
-
var
|
|
294
|
-
if (
|
|
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;
|
|
295
338
|
}
|
|
296
339
|
},
|
|
297
|
-
catch: function (
|
|
298
|
-
for (var
|
|
299
|
-
var
|
|
300
|
-
if (
|
|
301
|
-
var
|
|
302
|
-
if ("throw" ===
|
|
303
|
-
var
|
|
304
|
-
resetTryEntry(
|
|
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);
|
|
305
348
|
}
|
|
306
|
-
return
|
|
349
|
+
return o;
|
|
307
350
|
}
|
|
308
351
|
}
|
|
309
|
-
throw
|
|
352
|
+
throw Error("illegal catch attempt");
|
|
310
353
|
},
|
|
311
|
-
delegateYield: function (
|
|
354
|
+
delegateYield: function (e, r, n) {
|
|
312
355
|
return this.delegate = {
|
|
313
|
-
iterator: values(
|
|
314
|
-
resultName:
|
|
315
|
-
nextLoc:
|
|
316
|
-
}, "next" === this.method && (this.arg =
|
|
317
|
-
}
|
|
318
|
-
}, exports;
|
|
319
|
-
}
|
|
320
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
321
|
-
try {
|
|
322
|
-
var info = gen[key](arg);
|
|
323
|
-
var value = info.value;
|
|
324
|
-
} catch (error) {
|
|
325
|
-
reject(error);
|
|
326
|
-
return;
|
|
327
|
-
}
|
|
328
|
-
if (info.done) {
|
|
329
|
-
resolve(value);
|
|
330
|
-
} else {
|
|
331
|
-
Promise.resolve(value).then(_next, _throw);
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
function _asyncToGenerator(fn) {
|
|
335
|
-
return function () {
|
|
336
|
-
var self = this,
|
|
337
|
-
args = arguments;
|
|
338
|
-
return new Promise(function (resolve, reject) {
|
|
339
|
-
var gen = fn.apply(self, args);
|
|
340
|
-
function _next(value) {
|
|
341
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
342
|
-
}
|
|
343
|
-
function _throw(err) {
|
|
344
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
345
|
-
}
|
|
346
|
-
_next(undefined);
|
|
347
|
-
});
|
|
348
|
-
};
|
|
349
|
-
}
|
|
350
|
-
function _extends() {
|
|
351
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
352
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
353
|
-
var source = arguments[i];
|
|
354
|
-
for (var key in source) {
|
|
355
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
356
|
-
target[key] = source[key];
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
return target;
|
|
361
|
-
};
|
|
362
|
-
return _extends.apply(this, arguments);
|
|
363
|
-
}
|
|
364
|
-
function _objectDestructuringEmpty(obj) {
|
|
365
|
-
if (obj == null) throw new TypeError("Cannot destructure " + obj);
|
|
366
|
-
}
|
|
367
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
368
|
-
if (source == null) return {};
|
|
369
|
-
var target = {};
|
|
370
|
-
var sourceKeys = Object.keys(source);
|
|
371
|
-
var key, i;
|
|
372
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
373
|
-
key = sourceKeys[i];
|
|
374
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
375
|
-
target[key] = source[key];
|
|
376
|
-
}
|
|
377
|
-
return target;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
var _excluded$d = ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"];
|
|
381
|
-
var DownshiftContext = /*#__PURE__*/React.createContext(null);
|
|
382
|
-
var DownshiftProvider = function DownshiftProvider(_ref) {
|
|
383
|
-
var children = _ref.children,
|
|
384
|
-
_ref$onChange = _ref.onChange,
|
|
385
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
386
|
-
return undefined;
|
|
387
|
-
} : _ref$onChange,
|
|
388
|
-
_ref$onInputValueChan = _ref.onInputValueChange,
|
|
389
|
-
onInputValueChange = _ref$onInputValueChan === void 0 ? function () {
|
|
390
|
-
return undefined;
|
|
391
|
-
} : _ref$onInputValueChan,
|
|
392
|
-
_ref$highlightFirstIt = _ref.highlightFirstItemOnOpen,
|
|
393
|
-
highlightFirstItemOnOpen = _ref$highlightFirstIt === void 0 ? false : _ref$highlightFirstIt,
|
|
394
|
-
className = _ref.className,
|
|
395
|
-
style = _ref.style,
|
|
396
|
-
_ref$searchable = _ref.searchable,
|
|
397
|
-
searchable = _ref$searchable === void 0 ? false : _ref$searchable,
|
|
398
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
399
|
-
var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
|
|
400
|
-
if (changes.type === Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem) {
|
|
401
|
-
return;
|
|
402
|
-
}
|
|
403
|
-
if ('selectedItem' in changes) {
|
|
404
|
-
onChange(changes.selectedItem, stateAndHelpers);
|
|
405
|
-
} else if ('inputValue' in changes) {
|
|
406
|
-
onInputValueChange(changes.inputValue);
|
|
407
|
-
}
|
|
408
|
-
};
|
|
409
|
-
var stateReducer = function stateReducer(_, changes) {
|
|
410
|
-
var highlightFirstOnOpen = highlightFirstItemOnOpen && 'isOpen' in changes && changes.isOpen;
|
|
411
|
-
var highlightFirstItemIndex = highlightFirstOnOpen ? {
|
|
412
|
-
highlightedIndex: 0
|
|
413
|
-
} : {};
|
|
414
|
-
if (searchable) {
|
|
415
|
-
var type = changes.type;
|
|
416
|
-
switch (type) {
|
|
417
|
-
case '__autocomplete_change_input__':
|
|
418
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
419
|
-
case '__autocomplete_click_item__':
|
|
420
|
-
case '__autocomplete_keydown_enter__':
|
|
421
|
-
case '__autocomplete_blur_input__':
|
|
422
|
-
case '__autocomplete_mouseup__':
|
|
423
|
-
return _extends({}, changes, {
|
|
424
|
-
// if we had an item highlighted in the previous state.
|
|
425
|
-
// we will reset input field value to blank
|
|
426
|
-
inputValue: ''
|
|
427
|
-
}, highlightFirstItemIndex);
|
|
428
|
-
default:
|
|
429
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
430
|
-
}
|
|
431
|
-
} else {
|
|
432
|
-
return _extends({}, changes, highlightFirstItemIndex);
|
|
433
|
-
}
|
|
434
|
-
};
|
|
435
|
-
return React.createElement(Downshift, _extends({
|
|
436
|
-
itemToString: function itemToString(item) {
|
|
437
|
-
return item ? item.label : '';
|
|
438
|
-
},
|
|
439
|
-
onStateChange: handleStateChange,
|
|
440
|
-
stateReducer: stateReducer
|
|
441
|
-
}, rest), function (args) {
|
|
442
|
-
return React.createElement("div", {
|
|
443
|
-
className: classNames('eds-input-group', className),
|
|
444
|
-
style: style
|
|
445
|
-
}, React.createElement(DownshiftContext.Provider, {
|
|
446
|
-
value: args
|
|
447
|
-
}, children));
|
|
448
|
-
});
|
|
449
|
-
};
|
|
450
|
-
var useDownshift = function useDownshift() {
|
|
451
|
-
var context = React.useContext(DownshiftContext);
|
|
452
|
-
if (!context) {
|
|
453
|
-
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
454
|
-
}
|
|
455
|
-
return context;
|
|
456
|
-
};
|
|
457
|
-
|
|
458
|
-
var _excluded$c = ["items"];
|
|
459
|
-
var DropdownListDeprecated = function DropdownListDeprecated(_ref) {
|
|
460
|
-
var items = _ref.items,
|
|
461
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
462
|
-
var _useDownshift = useDownshift(),
|
|
463
|
-
highlightedIndex = _useDownshift.highlightedIndex,
|
|
464
|
-
isOpen = _useDownshift.isOpen,
|
|
465
|
-
selectedItem = _useDownshift.selectedItem,
|
|
466
|
-
getItemProps = _useDownshift.getItemProps,
|
|
467
|
-
getMenuProps = _useDownshift.getMenuProps;
|
|
468
|
-
return React.createElement("ul", _extends({
|
|
469
|
-
className: classNames('eds-dropdown-list', {
|
|
470
|
-
'eds-dropdown-list--open': isOpen
|
|
471
|
-
})
|
|
472
|
-
}, getMenuProps(), rest), isOpen ? items.map(function (item, index) {
|
|
473
|
-
return (
|
|
474
|
-
// eslint-disable-next-line react/jsx-key
|
|
475
|
-
React.createElement("li", _extends({
|
|
476
|
-
className: classNames('eds-dropdown-list__item', {
|
|
477
|
-
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
478
|
-
'eds-dropdown-list__item--selected': selectedItem === item
|
|
479
|
-
})
|
|
480
|
-
}, getItemProps({
|
|
481
|
-
key: "" + index + item.value,
|
|
482
|
-
item: item,
|
|
483
|
-
index: index
|
|
484
|
-
})), React.createElement("span", null, item.label), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
485
|
-
return React.createElement(Icon, {
|
|
486
|
-
key: index,
|
|
487
|
-
inline: true,
|
|
488
|
-
className: "eds-dropdown-list__item-icon"
|
|
489
|
-
});
|
|
490
|
-
})), selectedItem === item && React.createElement(icons.CheckIcon, null))
|
|
491
|
-
);
|
|
492
|
-
}) : null);
|
|
493
|
-
};
|
|
494
|
-
|
|
495
|
-
var DropdownDeprecatedToggleButton = function DropdownDeprecatedToggleButton() {
|
|
496
|
-
var _useDownshift = useDownshift(),
|
|
497
|
-
getToggleButtonProps = _useDownshift.getToggleButtonProps,
|
|
498
|
-
isOpen = _useDownshift.isOpen;
|
|
499
|
-
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
500
|
-
className: classNames('eds-dropdown__toggle-button', {
|
|
501
|
-
'eds-dropdown__toggle-button--open': isOpen
|
|
502
|
-
})
|
|
503
|
-
}), {
|
|
504
|
-
tabIndex: -1,
|
|
505
|
-
type: "button"
|
|
506
|
-
}), React.createElement(icons.DownArrowIcon, null));
|
|
507
|
-
};
|
|
508
|
-
|
|
509
|
-
var _excluded$b = ["className", "children"];
|
|
510
|
-
var DropdownDeprecatedLoadingDots = function DropdownDeprecatedLoadingDots(_ref) {
|
|
511
|
-
var className = _ref.className,
|
|
512
|
-
children = _ref.children,
|
|
513
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
514
|
-
return React.createElement("div", _extends({
|
|
515
|
-
className: classNames('eds-inline-spinner', className)
|
|
516
|
-
}, rest), React.createElement(loader.LoadingDots, null), React.createElement(a11y.VisuallyHidden, null, children));
|
|
517
|
-
};
|
|
518
|
-
|
|
519
|
-
var _excluded$a = ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable", "label", "isFilled", "disableLabelAnimation"];
|
|
520
|
-
var BaseDropdownDeprecated = function BaseDropdownDeprecated(_ref) {
|
|
521
|
-
var children = _ref.children,
|
|
522
|
-
className = _ref.className,
|
|
523
|
-
items = _ref.items,
|
|
524
|
-
_ref$loading = _ref.loading,
|
|
525
|
-
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
526
|
-
_ref$loadingText = _ref.loadingText,
|
|
527
|
-
loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
|
|
528
|
-
style = _ref.style,
|
|
529
|
-
listStyle = _ref.listStyle,
|
|
530
|
-
clearable = _ref.clearable,
|
|
531
|
-
label = _ref.label,
|
|
532
|
-
_ref$isFilled = _ref.isFilled,
|
|
533
|
-
isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
|
|
534
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
535
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
536
|
-
var _useDownshift = useDownshift(),
|
|
537
|
-
getLabelProps = _useDownshift.getLabelProps;
|
|
538
|
-
return React.createElement("div", {
|
|
539
|
-
className: "eds-dropdown-wrapper",
|
|
540
|
-
style: style
|
|
541
|
-
}, React.createElement(form.BaseFormControl, _extends({
|
|
542
|
-
append: React.createElement(Appendix$1, {
|
|
543
|
-
clearable: clearable,
|
|
544
|
-
loading: loading,
|
|
545
|
-
loadingText: loadingText,
|
|
546
|
-
readOnly: rest.readOnly
|
|
547
|
-
}),
|
|
548
|
-
className: className,
|
|
549
|
-
label: label,
|
|
550
|
-
isFilled: isFilled,
|
|
551
|
-
labelProps: getLabelProps(),
|
|
552
|
-
disableLabelAnimation: disableLabelAnimation
|
|
553
|
-
}, rest), children), React.createElement(DropdownListDeprecated, _extends({
|
|
554
|
-
items: items,
|
|
555
|
-
style: _extends({
|
|
556
|
-
position: 'absolute',
|
|
557
|
-
top: tokens.space.extraLarge3 + tokens.space.extraSmall + "px"
|
|
558
|
-
}, listStyle)
|
|
559
|
-
}, rest)));
|
|
560
|
-
};
|
|
561
|
-
var ClearButton$1 = function ClearButton(_ref2) {
|
|
562
|
-
var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
563
|
-
var _useDownshift2 = useDownshift(),
|
|
564
|
-
clearSelection = _useDownshift2.clearSelection,
|
|
565
|
-
selectedItem = _useDownshift2.selectedItem;
|
|
566
|
-
return React.createElement(React.Fragment, null, selectedItem && React.createElement("button", _extends({
|
|
567
|
-
className: "eds-dropdown__clear-button",
|
|
568
|
-
type: "button",
|
|
569
|
-
tabIndex: -1,
|
|
570
|
-
onClick: function onClick() {
|
|
571
|
-
return clearSelection();
|
|
572
|
-
},
|
|
573
|
-
"aria-label": "Trykk for \xE5 fjerne valg"
|
|
574
|
-
}, props), React.createElement(icons.CloseSmallIcon, null)), selectedItem && React.createElement("div", {
|
|
575
|
-
className: "eds-dropdown__divider"
|
|
576
|
-
}));
|
|
577
|
-
};
|
|
578
|
-
var Appendix$1 = function Appendix(_ref3) {
|
|
579
|
-
var clearable = _ref3.clearable,
|
|
580
|
-
loading = _ref3.loading,
|
|
581
|
-
loadingText = _ref3.loadingText,
|
|
582
|
-
readOnly = _ref3.readOnly;
|
|
583
|
-
if (loading) {
|
|
584
|
-
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
585
|
-
}
|
|
586
|
-
if (readOnly) {
|
|
587
|
-
return null;
|
|
588
|
-
}
|
|
589
|
-
return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton$1, null), " ", React.createElement(DropdownDeprecatedToggleButton, null)) : React.createElement(DropdownDeprecatedToggleButton, null);
|
|
590
|
-
};
|
|
591
|
-
|
|
592
|
-
var _excluded$9 = ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle", "items", "label", "disableLabelAnimation", "loading", "loadingText", "className", "clearable"];
|
|
593
|
-
var RegularDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
594
|
-
var disabled = _ref.disabled,
|
|
595
|
-
_ref$placeholder = _ref.placeholder,
|
|
596
|
-
placeholder = _ref$placeholder === void 0 ? 'Vennligst velg' : _ref$placeholder,
|
|
597
|
-
_ref$selectOnTab = _ref.selectOnTab,
|
|
598
|
-
selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
|
|
599
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
600
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
601
|
-
listStyle = _ref.listStyle,
|
|
602
|
-
items = _ref.items,
|
|
603
|
-
label = _ref.label,
|
|
604
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
605
|
-
loading = _ref.loading,
|
|
606
|
-
loadingText = _ref.loadingText,
|
|
607
|
-
className = _ref.className,
|
|
608
|
-
clearable = _ref.clearable,
|
|
609
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
610
|
-
var _useDownshift = useDownshift(),
|
|
611
|
-
getToggleButtonProps = _useDownshift.getToggleButtonProps,
|
|
612
|
-
selectedItem = _useDownshift.selectedItem,
|
|
613
|
-
selectHighlightedItem = _useDownshift.selectHighlightedItem,
|
|
614
|
-
openMenu = _useDownshift.openMenu,
|
|
615
|
-
isOpen = _useDownshift.isOpen,
|
|
616
|
-
highlightedIndex = _useDownshift.highlightedIndex,
|
|
617
|
-
setHighlightedIndex = _useDownshift.setHighlightedIndex;
|
|
618
|
-
return React.createElement(BaseDropdownDeprecated, _extends({
|
|
619
|
-
disabled: disabled,
|
|
620
|
-
listStyle: listStyle,
|
|
621
|
-
items: items,
|
|
622
|
-
label: label,
|
|
623
|
-
isFilled: selectedItem ? true : placeholder.length !== 0,
|
|
624
|
-
disableLabelAnimation: disableLabelAnimation,
|
|
625
|
-
loading: loading,
|
|
626
|
-
loadingText: loadingText,
|
|
627
|
-
className: className,
|
|
628
|
-
clearable: clearable
|
|
629
|
-
}, rest), React.createElement("button", _extends({}, getToggleButtonProps(_extends({
|
|
630
|
-
className: 'eds-form-control eds-dropdown__selected-item',
|
|
631
|
-
style: {
|
|
632
|
-
textAlign: 'left'
|
|
633
|
-
},
|
|
634
|
-
disabled: disabled,
|
|
635
|
-
type: 'button',
|
|
636
|
-
onKeyDown: function onKeyDown(e) {
|
|
637
|
-
if (selectOnTab && e.key === 'Tab') {
|
|
638
|
-
selectHighlightedItem();
|
|
639
|
-
}
|
|
640
|
-
if (isOpen) {
|
|
641
|
-
var keyDownValue = e.key;
|
|
642
|
-
var matchedItems = items.map(function (item, index) {
|
|
643
|
-
return _extends({}, item, {
|
|
644
|
-
index: index
|
|
645
|
-
});
|
|
646
|
-
}).filter(function (item) {
|
|
647
|
-
var firstCharacter = item.label.trim().charAt(0).toLowerCase();
|
|
648
|
-
return firstCharacter === keyDownValue;
|
|
649
|
-
});
|
|
650
|
-
var nextHighlightItem = matchedItems.find(function (item) {
|
|
651
|
-
return item.index > (highlightedIndex != null ? highlightedIndex : 0);
|
|
652
|
-
});
|
|
653
|
-
if (nextHighlightItem) {
|
|
654
|
-
setHighlightedIndex(nextHighlightItem.index);
|
|
655
|
-
} else if (matchedItems.length > 0) {
|
|
656
|
-
setHighlightedIndex(matchedItems[0].index);
|
|
657
|
-
}
|
|
658
|
-
}
|
|
659
|
-
},
|
|
660
|
-
onFocus: function onFocus() {
|
|
661
|
-
if (openOnFocus) {
|
|
662
|
-
!isOpen && openMenu();
|
|
663
|
-
}
|
|
664
|
-
}
|
|
665
|
-
}, rest)), {
|
|
666
|
-
ref: ref
|
|
667
|
-
}), selectedItem ? selectedItem.label : placeholder));
|
|
668
|
-
});
|
|
669
|
-
|
|
670
|
-
var _excluded$8 = ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"];
|
|
671
|
-
function LowerCaseFilterTest(item, input) {
|
|
672
|
-
if (!input) {
|
|
673
|
-
return true;
|
|
674
|
-
}
|
|
675
|
-
var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
676
|
-
var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
|
|
677
|
-
return inputRegex.test(item.label);
|
|
678
|
-
}
|
|
679
|
-
/**
|
|
680
|
-
* @deprecated
|
|
681
|
-
* New SearchableDropdown available
|
|
682
|
-
*
|
|
683
|
-
* migration guide to new dropdown:
|
|
684
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
685
|
-
* - change from 'value' to 'selectedItem'
|
|
686
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
687
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
688
|
-
*/
|
|
689
|
-
var SearchableDropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
690
|
-
var _ref$disabled = _ref.disabled,
|
|
691
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
692
|
-
className = _ref.className,
|
|
693
|
-
items = _ref.items,
|
|
694
|
-
loading = _ref.loading,
|
|
695
|
-
loadingText = _ref.loadingText,
|
|
696
|
-
_ref$readOnly = _ref.readOnly,
|
|
697
|
-
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
698
|
-
prepend = _ref.prepend,
|
|
699
|
-
_ref$selectOnTab = _ref.selectOnTab,
|
|
700
|
-
selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
|
|
701
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
702
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
703
|
-
listStyle = _ref.listStyle,
|
|
704
|
-
clearable = _ref.clearable,
|
|
705
|
-
_ref$itemFilter = _ref.itemFilter,
|
|
706
|
-
itemFilter = _ref$itemFilter === void 0 ? function (item, inputValue) {
|
|
707
|
-
return LowerCaseFilterTest(item, inputValue);
|
|
708
|
-
} : _ref$itemFilter,
|
|
709
|
-
label = _ref.label,
|
|
710
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
711
|
-
placeholder = _ref.placeholder,
|
|
712
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
713
|
-
var _useDownshift = useDownshift(),
|
|
714
|
-
getInputProps = _useDownshift.getInputProps,
|
|
715
|
-
inputValue = _useDownshift.inputValue,
|
|
716
|
-
selectHighlightedItem = _useDownshift.selectHighlightedItem,
|
|
717
|
-
isOpen = _useDownshift.isOpen,
|
|
718
|
-
openMenu = _useDownshift.openMenu,
|
|
719
|
-
closeMenu = _useDownshift.closeMenu,
|
|
720
|
-
selectedItem = _useDownshift.selectedItem;
|
|
721
|
-
var _useState = React.useState(false),
|
|
722
|
-
hideSelectedItem = _useState[0],
|
|
723
|
-
setHideSelectedItem = _useState[1];
|
|
724
|
-
var inputRef = React.useRef(null);
|
|
725
|
-
var filteredItems = React.useMemo(function () {
|
|
726
|
-
return items.filter(function (item) {
|
|
727
|
-
return itemFilter(item, inputValue);
|
|
728
|
-
});
|
|
729
|
-
}, [inputValue, items, itemFilter]);
|
|
730
|
-
return React.createElement(BaseDropdownDeprecated, {
|
|
731
|
-
items: filteredItems,
|
|
732
|
-
disabled: disabled,
|
|
733
|
-
readOnly: readOnly,
|
|
734
|
-
className: className,
|
|
735
|
-
loading: loading,
|
|
736
|
-
loadingText: loadingText,
|
|
737
|
-
prepend: prepend,
|
|
738
|
-
listStyle: listStyle,
|
|
739
|
-
clearable: clearable,
|
|
740
|
-
label: label,
|
|
741
|
-
isFilled: selectedItem ? true : false,
|
|
742
|
-
disableLabelAnimation: disableLabelAnimation
|
|
743
|
-
}, !hideSelectedItem && selectedItem && !inputValue && React.createElement("span", {
|
|
744
|
-
className: "eds-dropdown__searchable-selected-item__wrapper"
|
|
745
|
-
}, React.createElement("span", {
|
|
746
|
-
className: "eds-dropdown__searchable-selected-item",
|
|
747
|
-
onClick: function onClick() {
|
|
748
|
-
var _inputRef$current;
|
|
749
|
-
return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
750
|
-
}
|
|
751
|
-
}, selectedItem.label)), React.createElement("input", _extends({}, getInputProps(_extends({
|
|
752
|
-
disabled: disabled,
|
|
753
|
-
readOnly: readOnly,
|
|
754
|
-
className: 'eds-form-control eds-dropdown__input',
|
|
755
|
-
onKeyDown: function onKeyDown(e) {
|
|
756
|
-
if (selectOnTab && e.key === 'Tab') selectHighlightedItem();
|
|
757
|
-
},
|
|
758
|
-
onFocus: function onFocus() {
|
|
759
|
-
if (!isOpen && openOnFocus) openMenu();
|
|
760
|
-
setHideSelectedItem(true);
|
|
761
|
-
},
|
|
762
|
-
placeholder: selectedItem ? selectedItem.label : placeholder
|
|
763
|
-
}, rest)), {
|
|
764
|
-
onBlur: function onBlur() {
|
|
765
|
-
setHideSelectedItem(false);
|
|
766
|
-
closeMenu();
|
|
767
|
-
},
|
|
768
|
-
ref: utils.mergeRefs(ref, inputRef)
|
|
769
|
-
})));
|
|
770
|
-
});
|
|
771
|
-
|
|
772
|
-
var DropdownInputGroupDeprecated = function DropdownInputGroupDeprecated(_ref) {
|
|
773
|
-
var children = _ref.children,
|
|
774
|
-
feedback = _ref.feedback,
|
|
775
|
-
variant = _ref.variant,
|
|
776
|
-
className = _ref.className,
|
|
777
|
-
style = _ref.style;
|
|
778
|
-
return React.createElement(form.VariantProvider, {
|
|
779
|
-
variant: variant
|
|
780
|
-
}, React.createElement("div", {
|
|
781
|
-
className: className,
|
|
782
|
-
style: style
|
|
783
|
-
}, children, feedback && variant && React.createElement(form.FeedbackText, {
|
|
784
|
-
variant: variant
|
|
785
|
-
}, feedback)));
|
|
786
|
-
};
|
|
787
|
-
|
|
788
|
-
var useNormalizedItems = function useNormalizedItems(items) {
|
|
789
|
-
return React.useMemo(function () {
|
|
790
|
-
return items.map(function (item) {
|
|
791
|
-
if (typeof item == 'string') {
|
|
792
|
-
return {
|
|
793
|
-
value: item,
|
|
794
|
-
label: item
|
|
795
|
-
};
|
|
796
|
-
}
|
|
797
|
-
if ((item == null ? void 0 : item.value) === undefined) {
|
|
798
|
-
return _extends({}, item, {
|
|
799
|
-
value: item.label
|
|
800
|
-
});
|
|
801
|
-
}
|
|
802
|
-
return _extends({}, item, {
|
|
803
|
-
value: item.value
|
|
804
|
-
});
|
|
805
|
-
});
|
|
806
|
-
}, [items]);
|
|
807
|
-
};
|
|
808
|
-
|
|
809
|
-
var useResolvedItems = function useResolvedItems( /** The list of items, or an async function that resolves the list of items */
|
|
810
|
-
itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
|
|
811
|
-
debounceTimeout) {
|
|
812
|
-
if (debounceTimeout === void 0) {
|
|
813
|
-
debounceTimeout = 250;
|
|
814
|
-
}
|
|
815
|
-
var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
|
|
816
|
-
var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
|
|
817
|
-
items = _React$useState[0],
|
|
818
|
-
setItems = _React$useState[1];
|
|
819
|
-
var _React$useState2 = React.useState(false),
|
|
820
|
-
loading = _React$useState2[0],
|
|
821
|
-
setLoading = _React$useState2[1];
|
|
822
|
-
var abortControllerRef = React.useRef(new AbortController());
|
|
823
|
-
// We normalize the itemsResolver argument to an async function, so we
|
|
824
|
-
// can use it without thinking about the differences later
|
|
825
|
-
var itemsResolver = React.useMemo(function () {
|
|
826
|
-
if (itemsIsAFunction) return itemsOrItemsResolver;
|
|
827
|
-
return function () {
|
|
828
|
-
return Promise.resolve(itemsOrItemsResolver);
|
|
829
|
-
};
|
|
830
|
-
}, [itemsOrItemsResolver, itemsIsAFunction]);
|
|
831
|
-
// This should be called whenever the input value changes
|
|
832
|
-
var updateItems = /*#__PURE__*/function () {
|
|
833
|
-
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
|
|
834
|
-
var _abortControllerRef$c;
|
|
835
|
-
var abortController, _abortControllerRef$c2, _abortControllerRef$c3, resolvedItems;
|
|
836
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
837
|
-
while (1) {
|
|
838
|
-
switch (_context.prev = _context.next) {
|
|
839
|
-
case 0:
|
|
840
|
-
// The abortController handles cleanup of the previous request and unmounting
|
|
841
|
-
if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null ? void 0 : (_abortControllerRef$c = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c.abort();
|
|
842
|
-
abortController = new AbortController();
|
|
843
|
-
abortControllerRef.current = abortController;
|
|
844
|
-
setLoading(true);
|
|
845
|
-
_context.prev = 4;
|
|
846
|
-
_context.next = 7;
|
|
847
|
-
return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
|
|
848
|
-
case 7:
|
|
849
|
-
resolvedItems = _context.sent;
|
|
850
|
-
if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c3 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c3.aborted)) {
|
|
851
|
-
_context.next = 11;
|
|
852
|
-
break;
|
|
853
|
-
}
|
|
854
|
-
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');
|
|
855
|
-
return _context.abrupt("return");
|
|
856
|
-
case 11:
|
|
857
|
-
setLoading(false);
|
|
858
|
-
setItems(resolvedItems);
|
|
859
|
-
_context.next = 21;
|
|
860
|
-
break;
|
|
861
|
-
case 15:
|
|
862
|
-
_context.prev = 15;
|
|
863
|
-
_context.t0 = _context["catch"](4);
|
|
864
|
-
if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
|
|
865
|
-
_context.next = 19;
|
|
866
|
-
break;
|
|
867
|
-
}
|
|
868
|
-
return _context.abrupt("return");
|
|
869
|
-
case 19:
|
|
870
|
-
console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
|
|
871
|
-
throw _context.t0;
|
|
872
|
-
case 21:
|
|
873
|
-
case "end":
|
|
874
|
-
return _context.stop();
|
|
875
|
-
}
|
|
876
|
-
}
|
|
877
|
-
}, _callee, null, [[4, 15]]);
|
|
878
|
-
}));
|
|
879
|
-
return function updateItems(_x) {
|
|
880
|
-
return _ref.apply(this, arguments);
|
|
881
|
-
};
|
|
882
|
-
}();
|
|
883
|
-
var debouncedFetchItems = utils.useDebounce(updateItems, debounceTimeout);
|
|
884
|
-
var normalizedItems = useNormalizedItems(items);
|
|
885
|
-
React.useEffect(function () {
|
|
886
|
-
// send abort signal to previous request on unmount for cleanup
|
|
887
|
-
return function () {
|
|
888
|
-
var _abortControllerRef$c4;
|
|
889
|
-
return abortControllerRef == null ? void 0 : (_abortControllerRef$c4 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c4.abort('Component unmounted');
|
|
890
|
-
};
|
|
891
|
-
}, []);
|
|
892
|
-
React.useEffect(function () {
|
|
893
|
-
// Let's fetch the list initially if it's specified
|
|
894
|
-
if (itemsIsAFunction) {
|
|
895
|
-
debouncedFetchItems('');
|
|
356
|
+
iterator: values(e),
|
|
357
|
+
resultName: r,
|
|
358
|
+
nextLoc: n
|
|
359
|
+
}, "next" === this.method && (this.arg = t), y;
|
|
896
360
|
}
|
|
897
|
-
},
|
|
898
|
-
return {
|
|
899
|
-
items: normalizedItems,
|
|
900
|
-
loading: itemsIsAFunction ? loading : false,
|
|
901
|
-
fetchItems: debouncedFetchItems
|
|
902
|
-
};
|
|
903
|
-
};
|
|
904
|
-
|
|
905
|
-
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"];
|
|
906
|
-
/**
|
|
907
|
-
* @deprecated
|
|
908
|
-
* New Dropdown available
|
|
909
|
-
*
|
|
910
|
-
* migration guide to new dropdown:
|
|
911
|
-
* - change import from 'DropdownDeprecated' to 'Dropdown'
|
|
912
|
-
* + if 'searchable', switch to 'SearchableDropdown'
|
|
913
|
-
* - change from 'value' to 'selectedItem'
|
|
914
|
-
* + type of 'selectedItem' is 'NormalizedDropdownType' and does not include 'string'
|
|
915
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
916
|
-
*/
|
|
917
|
-
var DropdownDeprecated = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
918
|
-
var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
|
|
919
|
-
debounceTimeout = _ref.debounceTimeout,
|
|
920
|
-
disabled = _ref.disabled,
|
|
921
|
-
feedback = _ref.feedback,
|
|
922
|
-
items = _ref.items,
|
|
923
|
-
label = _ref.label,
|
|
924
|
-
loadingText = _ref.loadingText,
|
|
925
|
-
_ref$onChange = _ref.onChange,
|
|
926
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
927
|
-
return undefined;
|
|
928
|
-
} : _ref$onChange,
|
|
929
|
-
placeholder = _ref.placeholder,
|
|
930
|
-
prepend = _ref.prepend,
|
|
931
|
-
readOnly = _ref.readOnly,
|
|
932
|
-
searchable = _ref.searchable,
|
|
933
|
-
selectOnTab = _ref.selectOnTab,
|
|
934
|
-
openOnFocus = _ref.openOnFocus,
|
|
935
|
-
variant = _ref.variant,
|
|
936
|
-
value = _ref.value,
|
|
937
|
-
_ref$clearable = _ref.clearable,
|
|
938
|
-
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
939
|
-
className = _ref.className,
|
|
940
|
-
style = _ref.style,
|
|
941
|
-
listStyle = _ref.listStyle,
|
|
942
|
-
itemFilter = _ref.itemFilter,
|
|
943
|
-
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
944
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
945
|
-
var _useResolvedItems = useResolvedItems(items, debounceTimeout),
|
|
946
|
-
normalizedItems = _useResolvedItems.items,
|
|
947
|
-
loading = _useResolvedItems.loading,
|
|
948
|
-
fetchItems = _useResolvedItems.fetchItems;
|
|
949
|
-
var selectedItem = value === undefined ? undefined : normalizedItems.find(function (item) {
|
|
950
|
-
return value === item.value;
|
|
951
|
-
}) || null;
|
|
952
|
-
var RenderedDropdown = searchable ? SearchableDropdownDeprecated : RegularDropdownDeprecated;
|
|
953
|
-
var searchAbleProps = searchable ? {
|
|
954
|
-
itemFilter: itemFilter,
|
|
955
|
-
name: rest.name,
|
|
956
|
-
'data-cy': rest['data-cy']
|
|
957
|
-
} : {
|
|
958
|
-
name: rest.name,
|
|
959
|
-
'data-cy': rest['data-cy']
|
|
960
|
-
};
|
|
961
|
-
return React.createElement(DownshiftProvider, _extends({
|
|
962
|
-
selectedItem: selectedItem,
|
|
963
|
-
onInputValueChange: fetchItems,
|
|
964
|
-
onChange: onChange,
|
|
965
|
-
value: value,
|
|
966
|
-
highlightFirstItemOnOpen: highlightFirstItemOnOpen,
|
|
967
|
-
className: className,
|
|
968
|
-
style: style,
|
|
969
|
-
searchable: searchable
|
|
970
|
-
}, rest), React.createElement(DropdownInputGroupDeprecated, {
|
|
971
|
-
feedback: feedback,
|
|
972
|
-
variant: variant
|
|
973
|
-
}, React.createElement(RenderedDropdown, _extends({
|
|
974
|
-
label: label,
|
|
975
|
-
items: normalizedItems,
|
|
976
|
-
loading: loading,
|
|
977
|
-
loadingText: loadingText,
|
|
978
|
-
disabled: disabled,
|
|
979
|
-
readOnly: readOnly,
|
|
980
|
-
placeholder: placeholder,
|
|
981
|
-
prepend: prepend,
|
|
982
|
-
selectOnTab: selectOnTab,
|
|
983
|
-
openOnFocus: openOnFocus,
|
|
984
|
-
listStyle: listStyle,
|
|
985
|
-
clearable: clearable,
|
|
986
|
-
disableLabelAnimation: disableLabelAnimation,
|
|
987
|
-
ref: ref
|
|
988
|
-
}, searchAbleProps))));
|
|
989
|
-
});
|
|
990
|
-
|
|
991
|
-
var _excluded$6 = ["className", "clearable", "debounceTimeout", "disabled", "feedback", "initialSelectedItems", "items", "itemsSelectedLabel", "label", "listStyle", "loading", "loadingText", "onChange", "openOnFocus", "readOnly", "style", "variant"];
|
|
992
|
-
var MultiSelectOldContext = /*#__PURE__*/React.createContext(null);
|
|
993
|
-
var useMultiSelectOldContext = function useMultiSelectOldContext() {
|
|
994
|
-
var context = React.useContext(MultiSelectOldContext);
|
|
995
|
-
if (!context) {
|
|
996
|
-
throw new Error('You need to wrap your component in a DownshiftProvider');
|
|
997
|
-
}
|
|
998
|
-
return context;
|
|
999
|
-
};
|
|
1000
|
-
function stateReducer(state,
|
|
1001
|
-
//StateChangeOptions<NormalizedDropdownItemDeprecatedType>,
|
|
1002
|
-
actionAndChanges) {
|
|
1003
|
-
var changes = actionAndChanges.changes,
|
|
1004
|
-
type = actionAndChanges.type;
|
|
1005
|
-
switch (type) {
|
|
1006
|
-
case Downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
|
|
1007
|
-
case Downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
|
|
1008
|
-
case Downshift.useSelect.stateChangeTypes.ItemClick:
|
|
1009
|
-
return _extends({}, changes, {
|
|
1010
|
-
isOpen: true,
|
|
1011
|
-
highlightedIndex: state.highlightedIndex
|
|
1012
|
-
});
|
|
1013
|
-
default:
|
|
1014
|
-
return changes;
|
|
1015
|
-
}
|
|
1016
|
-
}
|
|
1017
|
-
/**
|
|
1018
|
-
* @deprecated
|
|
1019
|
-
* New MultiSelect available
|
|
1020
|
-
*
|
|
1021
|
-
* migration guide to new dropdown:
|
|
1022
|
-
* - change import from 'MultiSelectDeprecated' to 'MultiSelect'
|
|
1023
|
-
* - add state containing selected items to 'selectedItems' prop
|
|
1024
|
-
* + type of 'selectedItems' is 'NormalizedDropdownType[]' and does not include 'string'
|
|
1025
|
-
* - 'onChange' must update value of 'selectedItem'
|
|
1026
|
-
*/
|
|
1027
|
-
var MultiSelectDeprecated = function MultiSelectDeprecated(_ref) {
|
|
1028
|
-
var className = _ref.className,
|
|
1029
|
-
_ref$clearable = _ref.clearable,
|
|
1030
|
-
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
1031
|
-
debounceTimeout = _ref.debounceTimeout,
|
|
1032
|
-
disabled = _ref.disabled,
|
|
1033
|
-
feedback = _ref.feedback,
|
|
1034
|
-
_ref$initialSelectedI = _ref.initialSelectedItems,
|
|
1035
|
-
initialSelectedItems = _ref$initialSelectedI === void 0 ? [] : _ref$initialSelectedI,
|
|
1036
|
-
input = _ref.items,
|
|
1037
|
-
_ref$itemsSelectedLab = _ref.itemsSelectedLabel,
|
|
1038
|
-
itemsSelectedLabel = _ref$itemsSelectedLab === void 0 ? function (items) {
|
|
1039
|
-
return SelectedItemsLabel(items);
|
|
1040
|
-
} : _ref$itemsSelectedLab,
|
|
1041
|
-
label = _ref.label,
|
|
1042
|
-
listStyle = _ref.listStyle,
|
|
1043
|
-
_ref$loading = _ref.loading,
|
|
1044
|
-
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
1045
|
-
_ref$loadingText = _ref.loadingText,
|
|
1046
|
-
loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
|
|
1047
|
-
_ref$onChange = _ref.onChange,
|
|
1048
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
1049
|
-
return undefined;
|
|
1050
|
-
} : _ref$onChange,
|
|
1051
|
-
_ref$openOnFocus = _ref.openOnFocus,
|
|
1052
|
-
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
|
|
1053
|
-
_ref$readOnly = _ref.readOnly,
|
|
1054
|
-
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
1055
|
-
style = _ref.style,
|
|
1056
|
-
variant = _ref.variant,
|
|
1057
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
1058
|
-
var _useResolvedItems = useResolvedItems(input, debounceTimeout),
|
|
1059
|
-
items = _useResolvedItems.items;
|
|
1060
|
-
var _useState = React.useState(initialSelectedItems),
|
|
1061
|
-
selectedItems = _useState[0],
|
|
1062
|
-
setSelectedItems = _useState[1];
|
|
1063
|
-
var reset = React.useCallback(function () {
|
|
1064
|
-
setSelectedItems([]);
|
|
1065
|
-
}, []);
|
|
1066
|
-
function isSelected(selectedCheckboxItem) {
|
|
1067
|
-
return selectedItems.some(function (selected) {
|
|
1068
|
-
return selected.value === selectedCheckboxItem.value;
|
|
1069
|
-
});
|
|
1070
|
-
}
|
|
1071
|
-
var _useSelect = Downshift.useSelect(_extends({
|
|
1072
|
-
items: items,
|
|
1073
|
-
stateReducer: stateReducer,
|
|
1074
|
-
selectedItem: null,
|
|
1075
|
-
onSelectedItemChange: function onSelectedItemChange(_ref2) {
|
|
1076
|
-
var selectedItem = _ref2.selectedItem;
|
|
1077
|
-
if (!selectedItem) {
|
|
1078
|
-
return;
|
|
1079
|
-
}
|
|
1080
|
-
var itemIsFound = isSelected(selectedItem);
|
|
1081
|
-
if (itemIsFound) {
|
|
1082
|
-
var slicedItemList = selectedItems.filter(function (item) {
|
|
1083
|
-
return item.value !== selectedItem.value;
|
|
1084
|
-
});
|
|
1085
|
-
setSelectedItems(slicedItemList);
|
|
1086
|
-
onChange(slicedItemList);
|
|
1087
|
-
} else {
|
|
1088
|
-
var _slicedItemList = [].concat(selectedItems, [selectedItem]);
|
|
1089
|
-
setSelectedItems(_slicedItemList);
|
|
1090
|
-
onChange(_slicedItemList);
|
|
1091
|
-
}
|
|
1092
|
-
}
|
|
1093
|
-
}, rest)),
|
|
1094
|
-
isOpen = _useSelect.isOpen,
|
|
1095
|
-
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
1096
|
-
getLabelProps = _useSelect.getLabelProps,
|
|
1097
|
-
getMenuProps = _useSelect.getMenuProps,
|
|
1098
|
-
highlightedIndex = _useSelect.highlightedIndex,
|
|
1099
|
-
getItemProps = _useSelect.getItemProps,
|
|
1100
|
-
openMenu = _useSelect.openMenu;
|
|
1101
|
-
var buttonText = selectedItems.length ? itemsSelectedLabel(selectedItems) : '';
|
|
1102
|
-
var multiSelectId = utils.useRandomId('eds-multiselect');
|
|
1103
|
-
return React.createElement(MultiSelectOldContext.Provider, {
|
|
1104
|
-
value: {
|
|
1105
|
-
isOpen: isOpen,
|
|
1106
|
-
reset: reset,
|
|
1107
|
-
getToggleButtonProps: getToggleButtonProps,
|
|
1108
|
-
openMenu: openMenu,
|
|
1109
|
-
openOnFocus: openOnFocus
|
|
1110
|
-
}
|
|
1111
|
-
}, React.createElement("div", {
|
|
1112
|
-
className: classNames('eds-multiselect', 'eds-dropdown-wrapper', className),
|
|
1113
|
-
style: style
|
|
1114
|
-
}, React.createElement(form.BaseFormControl, {
|
|
1115
|
-
label: label,
|
|
1116
|
-
labelId: multiSelectId,
|
|
1117
|
-
labelProps: getLabelProps,
|
|
1118
|
-
feedback: feedback,
|
|
1119
|
-
variant: variant,
|
|
1120
|
-
isFilled: selectedItems.length > 0 || isOpen,
|
|
1121
|
-
disabled: disabled,
|
|
1122
|
-
readOnly: readOnly,
|
|
1123
|
-
append: React.createElement(Appendix, {
|
|
1124
|
-
hasSelected: clearable && selectedItems.length > 0,
|
|
1125
|
-
loading: loading,
|
|
1126
|
-
loadingText: loadingText,
|
|
1127
|
-
readOnly: readOnly
|
|
1128
|
-
})
|
|
1129
|
-
}, React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1130
|
-
style: {
|
|
1131
|
-
textAlign: 'left'
|
|
1132
|
-
},
|
|
1133
|
-
type: 'button',
|
|
1134
|
-
className: 'eds-form-control eds-multiselect__button'
|
|
1135
|
-
})), buttonText)), React.createElement("ul", _extends({
|
|
1136
|
-
className: classNames('eds-dropdown-list', {
|
|
1137
|
-
'eds-dropdown-list--open': isOpen
|
|
1138
|
-
})
|
|
1139
|
-
}, getMenuProps({
|
|
1140
|
-
style: _extends({
|
|
1141
|
-
position: 'absolute',
|
|
1142
|
-
top: tokens.space.extraLarge3 + tokens.space.extraSmall + "px"
|
|
1143
|
-
}, listStyle)
|
|
1144
|
-
})), isOpen && items.map(function (item, index) {
|
|
1145
|
-
return React.createElement("li", _extends({
|
|
1146
|
-
className: classNames('eds-dropdown-list__item', {
|
|
1147
|
-
'eds-dropdown-list__item--highlighted': highlightedIndex === index,
|
|
1148
|
-
'eds-dropdown-list__item--selected': isSelected(item)
|
|
1149
|
-
}),
|
|
1150
|
-
key: "" + item.value + index
|
|
1151
|
-
}, getItemProps({
|
|
1152
|
-
item: item,
|
|
1153
|
-
index: index
|
|
1154
|
-
}), {
|
|
1155
|
-
style: {
|
|
1156
|
-
display: 'flex'
|
|
1157
|
-
}
|
|
1158
|
-
}), React.createElement("span", {
|
|
1159
|
-
style: {
|
|
1160
|
-
display: 'flex'
|
|
1161
|
-
}
|
|
1162
|
-
}, React.createElement("span", {
|
|
1163
|
-
className: classNames('eds-multiselect-checkbox', {
|
|
1164
|
-
'eds-multiselect-checkbox--checked': isSelected(item)
|
|
1165
|
-
})
|
|
1166
|
-
}, React.createElement(CheckboxIcon, null)), React.createElement("span", {
|
|
1167
|
-
className: "eds-multiselect__item-label"
|
|
1168
|
-
}, item.label)), item.icons && React.createElement("span", null, item.icons.map(function (Icon, index) {
|
|
1169
|
-
return React.createElement(Icon, {
|
|
1170
|
-
key: index,
|
|
1171
|
-
inline: true,
|
|
1172
|
-
className: "eds-dropdown-list__item-icon"
|
|
1173
|
-
});
|
|
1174
|
-
})));
|
|
1175
|
-
}))));
|
|
1176
|
-
};
|
|
1177
|
-
var ClearButton = function ClearButton(_ref3) {
|
|
1178
|
-
var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
|
1179
|
-
var _useMultiSelectOldCon = useMultiSelectOldContext(),
|
|
1180
|
-
reset = _useMultiSelectOldCon.reset;
|
|
1181
|
-
return React.createElement(React.Fragment, null, React.createElement("button", _extends({
|
|
1182
|
-
className: "eds-dropdown__clear-button",
|
|
1183
|
-
type: "button",
|
|
1184
|
-
tabIndex: -1,
|
|
1185
|
-
onClick: function onClick() {
|
|
1186
|
-
return reset();
|
|
1187
|
-
}
|
|
1188
|
-
}, props), React.createElement(icons.CloseIcon, null)), React.createElement("div", {
|
|
1189
|
-
className: "eds-dropdown__divider"
|
|
1190
|
-
}));
|
|
1191
|
-
};
|
|
1192
|
-
var Appendix = function Appendix(_ref4) {
|
|
1193
|
-
var loading = _ref4.loading,
|
|
1194
|
-
loadingText = _ref4.loadingText,
|
|
1195
|
-
readOnly = _ref4.readOnly,
|
|
1196
|
-
hasSelected = _ref4.hasSelected;
|
|
1197
|
-
if (loading) {
|
|
1198
|
-
return React.createElement(DropdownDeprecatedLoadingDots, null, loadingText);
|
|
1199
|
-
}
|
|
1200
|
-
if (readOnly) {
|
|
1201
|
-
return null;
|
|
1202
|
-
}
|
|
1203
|
-
return hasSelected ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
|
|
1204
|
-
};
|
|
1205
|
-
var DropdownToggleButton = function DropdownToggleButton() {
|
|
1206
|
-
var _useMultiSelectOldCon2 = useMultiSelectOldContext(),
|
|
1207
|
-
getToggleButtonProps = _useMultiSelectOldCon2.getToggleButtonProps,
|
|
1208
|
-
isOpen = _useMultiSelectOldCon2.isOpen,
|
|
1209
|
-
openMenu = _useMultiSelectOldCon2.openMenu,
|
|
1210
|
-
openOnFocus = _useMultiSelectOldCon2.openOnFocus;
|
|
1211
|
-
return React.createElement("button", _extends({}, getToggleButtonProps({
|
|
1212
|
-
className: classNames('eds-dropdown__toggle-button', {
|
|
1213
|
-
'eds-dropdown__toggle-button--open': isOpen
|
|
1214
|
-
}),
|
|
1215
|
-
onFocus: function onFocus() {
|
|
1216
|
-
if (openOnFocus) {
|
|
1217
|
-
openMenu();
|
|
1218
|
-
}
|
|
1219
|
-
}
|
|
1220
|
-
}), {
|
|
1221
|
-
type: "button"
|
|
1222
|
-
}), React.createElement(icons.DownArrowIcon, null));
|
|
1223
|
-
};
|
|
1224
|
-
var CheckboxIcon = function CheckboxIcon() {
|
|
1225
|
-
return React.createElement("svg", {
|
|
1226
|
-
className: "eds-checkbox-icon",
|
|
1227
|
-
width: "11px",
|
|
1228
|
-
height: "9px",
|
|
1229
|
-
viewBox: "6 11 37 33"
|
|
1230
|
-
}, React.createElement("path", {
|
|
1231
|
-
className: "eds-checkbox-icon__path",
|
|
1232
|
-
d: "M14.1 27.2l7.1 7.2 14.6-14.8",
|
|
1233
|
-
fill: "none"
|
|
1234
|
-
}));
|
|
1235
|
-
};
|
|
1236
|
-
function SelectedItemsLabel(items) {
|
|
1237
|
-
return items.length < 3 ? items.map(function (item) {
|
|
1238
|
-
return item.label;
|
|
1239
|
-
}).toString() : items.length + " elementer valgt";
|
|
361
|
+
}, e;
|
|
1240
362
|
}
|
|
1241
363
|
|
|
1242
364
|
var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "inputValue", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "showSelectAllInList"];
|
|
@@ -1264,7 +386,7 @@ var DropdownList = function DropdownList(_ref) {
|
|
|
1264
386
|
selectedItems = _ref.selectedItems,
|
|
1265
387
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
1266
388
|
var isMultiselect = selectAllItem !== undefined;
|
|
1267
|
-
var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null
|
|
389
|
+
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));
|
|
1268
390
|
var isItemSelected = function isItemSelected(item) {
|
|
1269
391
|
return selectedItems.some(function (selectedItem) {
|
|
1270
392
|
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);
|
|
@@ -1500,6 +622,121 @@ var ToggleButton = function ToggleButton(_ref5) {
|
|
|
1500
622
|
}));
|
|
1501
623
|
};
|
|
1502
624
|
|
|
625
|
+
var useNormalizedItems = function useNormalizedItems(items) {
|
|
626
|
+
return React.useMemo(function () {
|
|
627
|
+
return items.map(function (item) {
|
|
628
|
+
if (typeof item == 'string') {
|
|
629
|
+
return {
|
|
630
|
+
value: item,
|
|
631
|
+
label: item
|
|
632
|
+
};
|
|
633
|
+
}
|
|
634
|
+
if ((item == null ? void 0 : item.value) === undefined) {
|
|
635
|
+
return _extends({}, item, {
|
|
636
|
+
value: item.label
|
|
637
|
+
});
|
|
638
|
+
}
|
|
639
|
+
return _extends({}, item, {
|
|
640
|
+
value: item.value
|
|
641
|
+
});
|
|
642
|
+
});
|
|
643
|
+
}, [items]);
|
|
644
|
+
};
|
|
645
|
+
|
|
646
|
+
var useResolvedItems = function useResolvedItems(/** The list of items, or an async function that resolves the list of items */
|
|
647
|
+
itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
|
|
648
|
+
debounceTimeout) {
|
|
649
|
+
if (debounceTimeout === void 0) {
|
|
650
|
+
debounceTimeout = 250;
|
|
651
|
+
}
|
|
652
|
+
var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
|
|
653
|
+
var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
|
|
654
|
+
items = _React$useState[0],
|
|
655
|
+
setItems = _React$useState[1];
|
|
656
|
+
var _React$useState2 = React.useState(false),
|
|
657
|
+
loading = _React$useState2[0],
|
|
658
|
+
setLoading = _React$useState2[1];
|
|
659
|
+
var abortControllerRef = React.useRef(new AbortController());
|
|
660
|
+
// We normalize the itemsResolver argument to an async function, so we
|
|
661
|
+
// can use it without thinking about the differences later
|
|
662
|
+
var itemsResolver = React.useMemo(function () {
|
|
663
|
+
if (itemsIsAFunction) return itemsOrItemsResolver;
|
|
664
|
+
return function () {
|
|
665
|
+
return Promise.resolve(itemsOrItemsResolver);
|
|
666
|
+
};
|
|
667
|
+
}, [itemsOrItemsResolver, itemsIsAFunction]);
|
|
668
|
+
// This should be called whenever the input value changes
|
|
669
|
+
var updateItems = /*#__PURE__*/function () {
|
|
670
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
|
|
671
|
+
var _abortControllerRef$c;
|
|
672
|
+
var abortController, _abortControllerRef$c2, resolvedItems;
|
|
673
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
674
|
+
while (1) switch (_context.prev = _context.next) {
|
|
675
|
+
case 0:
|
|
676
|
+
// The abortController handles cleanup of the previous request and unmounting
|
|
677
|
+
if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null || (_abortControllerRef$c = abortControllerRef.current) == null || _abortControllerRef$c.abort();
|
|
678
|
+
abortController = new AbortController();
|
|
679
|
+
abortControllerRef.current = abortController;
|
|
680
|
+
setLoading(true);
|
|
681
|
+
_context.prev = 4;
|
|
682
|
+
_context.next = 7;
|
|
683
|
+
return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
|
|
684
|
+
case 7:
|
|
685
|
+
resolvedItems = _context.sent;
|
|
686
|
+
if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c2 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c2.aborted)) {
|
|
687
|
+
_context.next = 11;
|
|
688
|
+
break;
|
|
689
|
+
}
|
|
690
|
+
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');
|
|
691
|
+
return _context.abrupt("return");
|
|
692
|
+
case 11:
|
|
693
|
+
setLoading(false);
|
|
694
|
+
setItems(resolvedItems);
|
|
695
|
+
_context.next = 21;
|
|
696
|
+
break;
|
|
697
|
+
case 15:
|
|
698
|
+
_context.prev = 15;
|
|
699
|
+
_context.t0 = _context["catch"](4);
|
|
700
|
+
if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
|
|
701
|
+
_context.next = 19;
|
|
702
|
+
break;
|
|
703
|
+
}
|
|
704
|
+
return _context.abrupt("return");
|
|
705
|
+
case 19:
|
|
706
|
+
console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
|
|
707
|
+
throw _context.t0;
|
|
708
|
+
case 21:
|
|
709
|
+
case "end":
|
|
710
|
+
return _context.stop();
|
|
711
|
+
}
|
|
712
|
+
}, _callee, null, [[4, 15]]);
|
|
713
|
+
}));
|
|
714
|
+
return function updateItems(_x) {
|
|
715
|
+
return _ref.apply(this, arguments);
|
|
716
|
+
};
|
|
717
|
+
}();
|
|
718
|
+
var debouncedFetchItems = utils.useDebounce(updateItems, debounceTimeout);
|
|
719
|
+
var normalizedItems = useNormalizedItems(items);
|
|
720
|
+
React.useEffect(function () {
|
|
721
|
+
// send abort signal to previous request on unmount for cleanup
|
|
722
|
+
return function () {
|
|
723
|
+
var _abortControllerRef$c3;
|
|
724
|
+
return abortControllerRef == null || (_abortControllerRef$c3 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c3.abort('Component unmounted');
|
|
725
|
+
};
|
|
726
|
+
}, []);
|
|
727
|
+
React.useEffect(function () {
|
|
728
|
+
// Let's fetch the list initially if it's specified
|
|
729
|
+
if (itemsIsAFunction) {
|
|
730
|
+
debouncedFetchItems('');
|
|
731
|
+
}
|
|
732
|
+
}, [itemsIsAFunction, itemsResolver]);
|
|
733
|
+
return {
|
|
734
|
+
items: normalizedItems,
|
|
735
|
+
loading: itemsIsAFunction ? loading : false,
|
|
736
|
+
fetchItems: debouncedFetchItems
|
|
737
|
+
};
|
|
738
|
+
};
|
|
739
|
+
|
|
1503
740
|
/* start general utils */
|
|
1504
741
|
var EMPTY_INPUT = '';
|
|
1505
742
|
function lowerCaseFilterTest(item, input) {
|
|
@@ -1725,9 +962,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1725
962
|
}
|
|
1726
963
|
switch (type) {
|
|
1727
964
|
// empty input to show selected item and reset dropdown list on item selection
|
|
1728
|
-
case
|
|
1729
|
-
case
|
|
1730
|
-
case
|
|
965
|
+
case downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
966
|
+
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
967
|
+
case downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
1731
968
|
{
|
|
1732
969
|
updateListItems({
|
|
1733
970
|
inputValue: EMPTY_INPUT
|
|
@@ -1736,7 +973,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1736
973
|
inputValue: EMPTY_INPUT
|
|
1737
974
|
});
|
|
1738
975
|
}
|
|
1739
|
-
case
|
|
976
|
+
case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
|
|
1740
977
|
if (changes.selectedItem !== null && !inputHasFocus) setShowSelectedItem(true);
|
|
1741
978
|
updateListItems({
|
|
1742
979
|
inputValue: EMPTY_INPUT
|
|
@@ -1745,7 +982,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1745
982
|
inputValue: EMPTY_INPUT
|
|
1746
983
|
});
|
|
1747
984
|
// remove leading whitespace, select element with spacebar on empty input, and filter list based on input
|
|
1748
|
-
case
|
|
985
|
+
case downshift.useCombobox.stateChangeTypes.InputChange:
|
|
1749
986
|
{
|
|
1750
987
|
var _changes$inputValue;
|
|
1751
988
|
var leadingWhitespaceTest = /^\s+/g;
|
|
@@ -1771,7 +1008,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1771
1008
|
return changes;
|
|
1772
1009
|
}
|
|
1773
1010
|
}, [fetchItems, filterListItems]);
|
|
1774
|
-
var _useCombobox =
|
|
1011
|
+
var _useCombobox = downshift.useCombobox(_extends({
|
|
1775
1012
|
defaultHighlightedIndex: lastHighlightedIndex,
|
|
1776
1013
|
items: listItems,
|
|
1777
1014
|
itemToString: itemToString,
|
|
@@ -1782,10 +1019,10 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1782
1019
|
newSelectedItem = _ref5.selectedItem;
|
|
1783
1020
|
switch (type) {
|
|
1784
1021
|
// @ts-expect-error This falltrough is wanted
|
|
1785
|
-
case
|
|
1022
|
+
case downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
1786
1023
|
if (!selectOnBlur) break;
|
|
1787
|
-
case
|
|
1788
|
-
case
|
|
1024
|
+
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
|
|
1025
|
+
case downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
1789
1026
|
if (newSelectedItem === undefined) return;
|
|
1790
1027
|
onChange(newSelectedItem != null ? newSelectedItem : null);
|
|
1791
1028
|
}
|
|
@@ -1810,20 +1047,28 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1810
1047
|
inputValue = _useCombobox.inputValue,
|
|
1811
1048
|
setInputValue = _useCombobox.setInputValue;
|
|
1812
1049
|
var _useFloating = reactDom.useFloating({
|
|
1813
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
1814
|
-
return reactDom.autoUpdate(ref, _float, update);
|
|
1815
|
-
},
|
|
1816
1050
|
placement: 'bottom-start',
|
|
1817
1051
|
open: isOpen,
|
|
1818
1052
|
middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
|
|
1819
1053
|
}),
|
|
1820
1054
|
refs = _useFloating.refs,
|
|
1821
|
-
floatingStyles = _useFloating.floatingStyles
|
|
1055
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
1056
|
+
elements = _useFloating.elements,
|
|
1057
|
+
update = _useFloating.update;
|
|
1058
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
1059
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
1060
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
1061
|
+
React.useEffect(function () {
|
|
1062
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
1063
|
+
var cleanup = reactDom.autoUpdate(elements.reference, elements.floating, update);
|
|
1064
|
+
return cleanup;
|
|
1065
|
+
}
|
|
1066
|
+
}, [isOpen, elements, update]);
|
|
1822
1067
|
var handleOnClear = function handleOnClear() {
|
|
1823
1068
|
var _inputRef$current;
|
|
1824
1069
|
onChange(null);
|
|
1825
1070
|
setInputValue(EMPTY_INPUT);
|
|
1826
|
-
(_inputRef$current = inputRef.current) == null
|
|
1071
|
+
(_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
|
|
1827
1072
|
updateListItems({
|
|
1828
1073
|
inputValue: inputValue
|
|
1829
1074
|
});
|
|
@@ -1857,7 +1102,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1857
1102
|
labelTooltip: labelTooltip,
|
|
1858
1103
|
onClick: function onClick(e) {
|
|
1859
1104
|
var _inputRef$current2;
|
|
1860
|
-
if (e.target === e.currentTarget) (_inputRef$current2 = inputRef.current) == null
|
|
1105
|
+
if (e.target === e.currentTarget) (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
|
|
1861
1106
|
},
|
|
1862
1107
|
prepend: prepend,
|
|
1863
1108
|
readOnly: readOnly,
|
|
@@ -1871,7 +1116,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1871
1116
|
"aria-hidden": "true",
|
|
1872
1117
|
onClick: function onClick() {
|
|
1873
1118
|
var _inputRef$current3;
|
|
1874
|
-
(_inputRef$current3 = inputRef.current) == null
|
|
1119
|
+
(_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
|
|
1875
1120
|
openMenu();
|
|
1876
1121
|
}
|
|
1877
1122
|
}, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
|
|
@@ -1888,7 +1133,7 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1888
1133
|
setShowSelectedItem(false);
|
|
1889
1134
|
},
|
|
1890
1135
|
onKeyDown: function onKeyDown(e) {
|
|
1891
|
-
if (selectOnTab && isOpen && e.key === 'Tab') onChange == null
|
|
1136
|
+
if (selectOnTab && isOpen && e.key === 'Tab') onChange == null || onChange(listItems[highlightedIndex]);
|
|
1892
1137
|
},
|
|
1893
1138
|
ref: inputRef
|
|
1894
1139
|
}))), React.createElement(DropdownList, {
|
|
@@ -2023,7 +1268,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2023
1268
|
hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
|
|
2024
1269
|
handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
|
|
2025
1270
|
selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState;
|
|
2026
|
-
var _useMultipleSelection =
|
|
1271
|
+
var _useMultipleSelection = downshift.useMultipleSelection({
|
|
2027
1272
|
selectedItems: selectedItems,
|
|
2028
1273
|
// @ts-expect-error prop missing from library types
|
|
2029
1274
|
itemToString: itemToString,
|
|
@@ -2032,10 +1277,10 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2032
1277
|
var newSelectedItems = _ref4.selectedItems,
|
|
2033
1278
|
type = _ref4.type;
|
|
2034
1279
|
switch (type) {
|
|
2035
|
-
case
|
|
2036
|
-
case
|
|
2037
|
-
case
|
|
2038
|
-
case
|
|
1280
|
+
case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
|
|
1281
|
+
case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
|
|
1282
|
+
case downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
|
|
1283
|
+
case downshift.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
|
|
2039
1284
|
{
|
|
2040
1285
|
if (newSelectedItems !== undefined) onChange(newSelectedItems);
|
|
2041
1286
|
break;
|
|
@@ -2053,8 +1298,8 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2053
1298
|
}
|
|
2054
1299
|
switch (type) {
|
|
2055
1300
|
// keep menu open and edit input value on item selection
|
|
2056
|
-
case
|
|
2057
|
-
case
|
|
1301
|
+
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
1302
|
+
case downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
2058
1303
|
{
|
|
2059
1304
|
var _inputRef$current$val, _inputRef$current;
|
|
2060
1305
|
if (clearInputOnSelect) {
|
|
@@ -2064,19 +1309,19 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2064
1309
|
}
|
|
2065
1310
|
return _extends({}, changes, {
|
|
2066
1311
|
isOpen: true,
|
|
2067
|
-
inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null
|
|
1312
|
+
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
|
|
2068
1313
|
});
|
|
2069
1314
|
}
|
|
2070
1315
|
// edit input value when selected items is updated outside component
|
|
2071
|
-
case
|
|
1316
|
+
case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
|
|
2072
1317
|
{
|
|
2073
1318
|
var _inputRef$current$val2, _inputRef$current2;
|
|
2074
1319
|
return _extends({}, changes, {
|
|
2075
|
-
inputValue: (_inputRef$current$val2 = inputRef == null
|
|
1320
|
+
inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
|
|
2076
1321
|
});
|
|
2077
1322
|
}
|
|
2078
1323
|
// remove leading whitespace, select item with spacebar if input is empty and filter list items
|
|
2079
|
-
case
|
|
1324
|
+
case downshift.useCombobox.stateChangeTypes.InputChange:
|
|
2080
1325
|
{
|
|
2081
1326
|
var _changes$inputValue;
|
|
2082
1327
|
var leadingWhitespaceTest = /^\s+/g;
|
|
@@ -2105,7 +1350,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2105
1350
|
return changes;
|
|
2106
1351
|
}
|
|
2107
1352
|
// reset input value when leaving input field
|
|
2108
|
-
case
|
|
1353
|
+
case downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
2109
1354
|
{
|
|
2110
1355
|
updateListItems({
|
|
2111
1356
|
inputValue: EMPTY_INPUT
|
|
@@ -2118,8 +1363,9 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2118
1363
|
return changes;
|
|
2119
1364
|
}
|
|
2120
1365
|
}, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
|
|
2121
|
-
var _useCombobox =
|
|
1366
|
+
var _useCombobox = downshift.useCombobox(_extends({
|
|
2122
1367
|
defaultHighlightedIndex: lastHighlightedIndex,
|
|
1368
|
+
// after selection, highlight previously selected item.
|
|
2123
1369
|
items: listItems,
|
|
2124
1370
|
itemToString: itemToString,
|
|
2125
1371
|
selectedItem: null,
|
|
@@ -2131,10 +1377,10 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2131
1377
|
if (!clickedItem) return;
|
|
2132
1378
|
switch (type) {
|
|
2133
1379
|
// @ts-expect-error This falltrough is wanted
|
|
2134
|
-
case
|
|
1380
|
+
case downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
2135
1381
|
if (!selectOnBlur) break;
|
|
2136
|
-
case
|
|
2137
|
-
case
|
|
1382
|
+
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter: // eslint-disable-line no-fallthrough
|
|
1383
|
+
case downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
2138
1384
|
{
|
|
2139
1385
|
handleListItemClicked({
|
|
2140
1386
|
clickedItem: clickedItem,
|
|
@@ -2162,20 +1408,28 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2162
1408
|
openMenu = _useCombobox.openMenu,
|
|
2163
1409
|
setInputValue = _useCombobox.setInputValue;
|
|
2164
1410
|
var _useFloating = reactDom.useFloating({
|
|
2165
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
2166
|
-
return reactDom.autoUpdate(ref, _float, update);
|
|
2167
|
-
},
|
|
2168
1411
|
placement: 'bottom-start',
|
|
2169
1412
|
open: isOpen,
|
|
2170
1413
|
middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
|
|
2171
1414
|
}),
|
|
2172
1415
|
refs = _useFloating.refs,
|
|
2173
|
-
floatingStyles = _useFloating.floatingStyles
|
|
1416
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
1417
|
+
elements = _useFloating.elements,
|
|
1418
|
+
update = _useFloating.update;
|
|
1419
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
1420
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
1421
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
1422
|
+
React.useEffect(function () {
|
|
1423
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
1424
|
+
var cleanup = reactDom.autoUpdate(elements.reference, elements.floating, update);
|
|
1425
|
+
return cleanup;
|
|
1426
|
+
}
|
|
1427
|
+
}, [isOpen, elements, update]);
|
|
2174
1428
|
var handleOnClear = function handleOnClear() {
|
|
2175
1429
|
var _inputRef$current3;
|
|
2176
1430
|
onChange([]);
|
|
2177
1431
|
setInputValue(EMPTY_INPUT);
|
|
2178
|
-
(_inputRef$current3 = inputRef.current) == null
|
|
1432
|
+
(_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
|
|
2179
1433
|
updateListItems({
|
|
2180
1434
|
inputValue: inputValue
|
|
2181
1435
|
});
|
|
@@ -2208,7 +1462,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2208
1462
|
labelTooltip: labelTooltip,
|
|
2209
1463
|
onClick: function onClick(e) {
|
|
2210
1464
|
var _inputRef$current4;
|
|
2211
|
-
if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null
|
|
1465
|
+
if (e.target === e.currentTarget) (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.focus();
|
|
2212
1466
|
},
|
|
2213
1467
|
readOnly: readOnly,
|
|
2214
1468
|
ref: refs.setReference,
|
|
@@ -2241,7 +1495,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2241
1495
|
clickedItem: selectedItem,
|
|
2242
1496
|
onChange: onChange
|
|
2243
1497
|
});
|
|
2244
|
-
inputRef == null
|
|
1498
|
+
inputRef == null || (_inputRef$current6 = inputRef.current) == null || _inputRef$current6.focus();
|
|
2245
1499
|
},
|
|
2246
1500
|
selectedItem: selectedItem
|
|
2247
1501
|
});
|
|
@@ -2336,7 +1590,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2336
1590
|
loading = _useResolvedItems.loading;
|
|
2337
1591
|
var toggleButtonRef = React.useRef(null);
|
|
2338
1592
|
var isFilled = selectedItem !== null || placeholder !== undefined;
|
|
2339
|
-
var _useSelect =
|
|
1593
|
+
var _useSelect = downshift.useSelect({
|
|
2340
1594
|
items: normalizedItems,
|
|
2341
1595
|
defaultHighlightedIndex: selectedItem ? undefined : 0,
|
|
2342
1596
|
selectedItem: selectedItem,
|
|
@@ -2345,14 +1599,14 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2345
1599
|
newSelectedItem = _ref2.selectedItem;
|
|
2346
1600
|
switch (type) {
|
|
2347
1601
|
// @ts-expect-error This falltrough is wanted
|
|
2348
|
-
case
|
|
1602
|
+
case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
|
|
2349
1603
|
if (!selectOnBlur) break;
|
|
2350
|
-
case
|
|
2351
|
-
case
|
|
2352
|
-
case
|
|
1604
|
+
case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter: // eslint-disable-line no-fallthrough
|
|
1605
|
+
case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
|
|
1606
|
+
case downshift.useSelect.stateChangeTypes.ItemClick:
|
|
2353
1607
|
{
|
|
2354
1608
|
if (newSelectedItem === undefined) return;
|
|
2355
|
-
onChange == null
|
|
1609
|
+
onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
|
|
2356
1610
|
}
|
|
2357
1611
|
}
|
|
2358
1612
|
},
|
|
@@ -2366,15 +1620,23 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2366
1620
|
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
2367
1621
|
highlightedIndex = _useSelect.highlightedIndex;
|
|
2368
1622
|
var _useFloating = reactDom.useFloating({
|
|
2369
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
2370
|
-
return reactDom.autoUpdate(ref, _float, update);
|
|
2371
|
-
},
|
|
2372
1623
|
placement: 'bottom-start',
|
|
2373
1624
|
open: isOpen,
|
|
2374
1625
|
middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip()]
|
|
2375
1626
|
}),
|
|
2376
1627
|
refs = _useFloating.refs,
|
|
2377
|
-
floatingStyles = _useFloating.floatingStyles
|
|
1628
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
1629
|
+
elements = _useFloating.elements,
|
|
1630
|
+
update = _useFloating.update;
|
|
1631
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
1632
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
1633
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
1634
|
+
React.useEffect(function () {
|
|
1635
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
1636
|
+
var cleanup = reactDom.autoUpdate(elements.reference, elements.floating, update);
|
|
1637
|
+
return cleanup;
|
|
1638
|
+
}
|
|
1639
|
+
}, [isOpen, elements, update]);
|
|
2378
1640
|
return React.createElement(form.BaseFormControl, _extends({
|
|
2379
1641
|
append: React.createElement(FieldAppend$1, {
|
|
2380
1642
|
ariaHiddenToggleButton: true,
|
|
@@ -2389,8 +1651,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2389
1651
|
loadingText: loadingText,
|
|
2390
1652
|
onClear: function onClear() {
|
|
2391
1653
|
var _toggleButtonRef$curr;
|
|
2392
|
-
onChange == null
|
|
2393
|
-
(_toggleButtonRef$curr = toggleButtonRef.current) == null
|
|
1654
|
+
onChange == null || onChange(null);
|
|
1655
|
+
(_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
|
|
2394
1656
|
},
|
|
2395
1657
|
disabled: readOnly || disabled,
|
|
2396
1658
|
selectedItems: [selectedItem]
|
|
@@ -2423,7 +1685,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2423
1685
|
// we don't want to clear selection with tab
|
|
2424
1686
|
var highlitedItem = normalizedItems[highlightedIndex];
|
|
2425
1687
|
if (highlitedItem) {
|
|
2426
|
-
onChange == null
|
|
1688
|
+
onChange == null || onChange(highlitedItem);
|
|
2427
1689
|
}
|
|
2428
1690
|
}
|
|
2429
1691
|
},
|
|
@@ -2501,7 +1763,7 @@ var NativeDropdown = function NativeDropdown(_ref) {
|
|
|
2501
1763
|
disabled: disabled || readOnly,
|
|
2502
1764
|
onChange: function onChange(event) {
|
|
2503
1765
|
var _normalizedItems$find;
|
|
2504
|
-
_onChange == null
|
|
1766
|
+
_onChange == null || _onChange({
|
|
2505
1767
|
value: event.target.value,
|
|
2506
1768
|
selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
|
|
2507
1769
|
return item.value === event.target.value;
|
|
@@ -2539,9 +1801,7 @@ var FieldAppend = function FieldAppend(_ref3) {
|
|
|
2539
1801
|
utils.warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
|
|
2540
1802
|
|
|
2541
1803
|
exports.Dropdown = Dropdown;
|
|
2542
|
-
exports.DropdownDeprecated = DropdownDeprecated;
|
|
2543
1804
|
exports.MultiSelect = MultiSelect;
|
|
2544
|
-
exports.MultiSelectDeprecated = MultiSelectDeprecated;
|
|
2545
1805
|
exports.NativeDropdown = NativeDropdown;
|
|
2546
1806
|
exports.SearchableDropdown = SearchableDropdown;
|
|
2547
1807
|
//# sourceMappingURL=dropdown.cjs.development.js.map
|