@mattermost/compass-ui 0.1.0-alpha.25 → 0.1.0-alpha.26
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/dist/components/combobox/Combobox.cjs +1 -1
- package/dist/components/combobox/Combobox.cjs.map +1 -1
- package/dist/components/combobox/Combobox.d.ts +12 -4
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +151 -149
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/empty-state/EmptyState.css +1 -1
- package/dist/components/empty-state/EmptyState.module.scss.cjs +1 -1
- package/dist/components/empty-state/EmptyState.module.scss.js +7 -7
- package/package.json +1 -1
|
@@ -1,55 +1,55 @@
|
|
|
1
1
|
import { jsxs as M, jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as Mr, useId as Er, useRef as O, useCallback as d, useState as E, useMemo as I, useEffect as de } from "react";
|
|
3
3
|
import __Ir from "@mattermost/compass-icons/components/chevron-down.js";const Ir=__Ir&&__Ir.default?__Ir.default:__Ir;
|
|
4
4
|
import __Vr from "@mattermost/compass-icons/components/close-circle.js";const Vr=__Vr&&__Vr.default?__Vr.default:__Vr;
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import me, { IconSlotContext as
|
|
5
|
+
import __Rr from "@mattermost/compass-icons/components/plus.js";const Rr=__Rr&&__Rr.default?__Rr.default:__Rr;
|
|
6
|
+
import Sr from "../chip/Chip.js";
|
|
7
|
+
import Tr from "../chip/ChipGroup.js";
|
|
8
|
+
import me, { IconSlotContext as Lr } from "../icon/Icon.js";
|
|
9
9
|
import Te from "../menu-item/MenuItem.js";
|
|
10
|
-
import
|
|
10
|
+
import Cr, { PopoverMenuScroll as Fr } from "../popover-menu/PopoverMenu.js";
|
|
11
11
|
import zr from "../spinner/Spinner.js";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import { useAnchoredPopupPortal as
|
|
15
|
-
import { useOutsideClose as
|
|
16
|
-
import { usePopoverTransition as
|
|
17
|
-
import { mergeMenuItemProps as
|
|
18
|
-
import { mergeClassNames as
|
|
19
|
-
import { toKebab as
|
|
12
|
+
import Hr from "../team-avatar/TeamAvatar.js";
|
|
13
|
+
import $r from "../user-avatar/UserAvatar.js";
|
|
14
|
+
import { useAnchoredPopupPortal as Or } from "../../hooks/use-anchored-popup-portal.js";
|
|
15
|
+
import { useOutsideClose as jr } from "../../hooks/use-outside-close.js";
|
|
16
|
+
import { usePopoverTransition as Ur } from "../../hooks/use-popover-transition.js";
|
|
17
|
+
import { mergeMenuItemProps as qr } from "../../utils/menuItemProps.js";
|
|
18
|
+
import { mergeClassNames as Gr } from "../../utils/props.js";
|
|
19
|
+
import { toKebab as Kr } from "../../utils/string.js";
|
|
20
20
|
import o from "./Combobox.module.scss.js";
|
|
21
|
-
const Le = 280,
|
|
21
|
+
const Le = 280, Qr = {
|
|
22
22
|
small: "small",
|
|
23
23
|
medium: "medium",
|
|
24
24
|
large: "large"
|
|
25
|
-
},
|
|
25
|
+
}, Xr = {
|
|
26
26
|
small: "12",
|
|
27
27
|
medium: "16",
|
|
28
28
|
large: "16"
|
|
29
29
|
};
|
|
30
|
-
function
|
|
30
|
+
function Zr(n) {
|
|
31
31
|
return typeof n == "string" ? `${n} selections` : "Selected";
|
|
32
32
|
}
|
|
33
|
-
function
|
|
33
|
+
function Wr(n) {
|
|
34
34
|
return `Create "${n}"`;
|
|
35
35
|
}
|
|
36
36
|
function W(n) {
|
|
37
37
|
return n.kind === "option" && n.option.disabled === !0;
|
|
38
38
|
}
|
|
39
|
-
function
|
|
39
|
+
function Yr(n, v) {
|
|
40
40
|
return v ? n.label.toLowerCase().includes(v.toLowerCase()) : !0;
|
|
41
41
|
}
|
|
42
|
-
function
|
|
42
|
+
function Jr(n) {
|
|
43
43
|
return n == null ? null : Array.isArray(n) ? n[0] ?? null : n === "" ? null : n;
|
|
44
44
|
}
|
|
45
|
-
function
|
|
45
|
+
function Pr(n) {
|
|
46
46
|
return n == null ? [] : Array.isArray(n) ? n : n === "" ? [] : [n];
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function Br(n) {
|
|
49
49
|
if (n.leadingVisual != null) return n.leadingVisual;
|
|
50
50
|
if (n.leadingAvatar != null)
|
|
51
51
|
return /* @__PURE__ */ l(
|
|
52
|
-
|
|
52
|
+
$r,
|
|
53
53
|
{
|
|
54
54
|
src: n.leadingAvatar.src,
|
|
55
55
|
alt: n.leadingAvatar.alt,
|
|
@@ -58,7 +58,7 @@ function Pr(n) {
|
|
|
58
58
|
);
|
|
59
59
|
if (n.leadingTeamAvatar != null)
|
|
60
60
|
return /* @__PURE__ */ l(
|
|
61
|
-
|
|
61
|
+
Hr,
|
|
62
62
|
{
|
|
63
63
|
src: n.leadingTeamAvatar.src,
|
|
64
64
|
initials: n.leadingTeamAvatar.initials ?? (n.leadingTeamAvatar.src ? void 0 : Array.from(n.label).slice(0, 2).join("")),
|
|
@@ -68,18 +68,18 @@ function Pr(n) {
|
|
|
68
68
|
}
|
|
69
69
|
);
|
|
70
70
|
}
|
|
71
|
-
const
|
|
71
|
+
const pn = Mr(function({
|
|
72
72
|
options: v,
|
|
73
|
-
menuItemProps:
|
|
73
|
+
menuItemProps: Ce,
|
|
74
74
|
multiple: t = !1,
|
|
75
75
|
value: be,
|
|
76
76
|
defaultValue: ve,
|
|
77
77
|
onChange: j,
|
|
78
78
|
inputValue: Y,
|
|
79
|
-
defaultInputValue:
|
|
79
|
+
defaultInputValue: Fe = "",
|
|
80
80
|
onInputChange: u,
|
|
81
81
|
label: N,
|
|
82
|
-
placeholder:
|
|
82
|
+
placeholder: ze,
|
|
83
83
|
leadingIcon: J,
|
|
84
84
|
size: P = "medium",
|
|
85
85
|
invalid: he = !1,
|
|
@@ -88,98 +88,99 @@ const yn = wr(function({
|
|
|
88
88
|
emptyMessage: He = "No results",
|
|
89
89
|
loading: xe = !1,
|
|
90
90
|
loadingMessage: $e = "Loading…",
|
|
91
|
-
selectedOptions:
|
|
92
|
-
creatable:
|
|
91
|
+
selectedOptions: A,
|
|
92
|
+
creatable: V = !1,
|
|
93
93
|
onCreateOption: B,
|
|
94
|
-
formatCreateLabel: Oe =
|
|
94
|
+
formatCreateLabel: Oe = Wr,
|
|
95
95
|
clearable: je = !1,
|
|
96
96
|
openOnFocus: Ue = !1,
|
|
97
|
-
|
|
97
|
+
submitOnEnter: qe = !0,
|
|
98
|
+
clearLabel: Ge = "Clear",
|
|
98
99
|
clearButtonProps: m,
|
|
99
|
-
selectionsLabel:
|
|
100
|
-
listboxLabel:
|
|
101
|
-
className:
|
|
102
|
-
id:
|
|
100
|
+
selectionsLabel: Ke,
|
|
101
|
+
listboxLabel: Qe = "Options",
|
|
102
|
+
className: Xe = "",
|
|
103
|
+
id: Ze,
|
|
103
104
|
"aria-label": ge,
|
|
104
|
-
"aria-describedby":
|
|
105
|
-
required:
|
|
105
|
+
"aria-describedby": We,
|
|
106
|
+
required: Ye = !1,
|
|
106
107
|
onFocus: ee,
|
|
107
108
|
onBlur: re,
|
|
108
109
|
onKeyDown: ne,
|
|
109
|
-
portalContainer:
|
|
110
|
-
zIndex:
|
|
111
|
-
...
|
|
110
|
+
portalContainer: Je = null,
|
|
111
|
+
zIndex: Pe,
|
|
112
|
+
...Be
|
|
112
113
|
}, R) {
|
|
113
|
-
const
|
|
114
|
+
const er = Er(), te = Ze ?? er, S = `${te}-listbox`, ae = O(null), _e = O(null), D = O(null), rr = d(
|
|
114
115
|
(e) => {
|
|
115
116
|
D.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
|
|
116
117
|
},
|
|
117
118
|
[R]
|
|
118
|
-
), le = be !== void 0, [
|
|
119
|
-
() => t ?
|
|
119
|
+
), le = be !== void 0, [nr, tr] = E(() => ve !== void 0 ? ve : t ? [] : null), oe = le ? be : nr, h = t ? null : Jr(oe), i = I(
|
|
120
|
+
() => t ? Pr(oe) : [],
|
|
120
121
|
[t, oe]
|
|
121
|
-
), b = Y !== void 0, [ie, T] =
|
|
122
|
+
), b = Y !== void 0, [ie, T] = E(Fe), [c, ye] = E(!1), [ar, pe] = E(!1), [x, y] = E(-1), q = O(!1), L = O(null), ke = d(
|
|
122
123
|
(e) => {
|
|
123
124
|
e !== x && (q.current = !0, y(e));
|
|
124
125
|
},
|
|
125
126
|
[x]
|
|
126
|
-
), [G,
|
|
127
|
-
(e) => v.find((r) => r.value === e) ?? (
|
|
128
|
-
[v,
|
|
129
|
-
), Q =
|
|
127
|
+
), [G, C] = E(null), K = d(
|
|
128
|
+
(e) => v.find((r) => r.value === e) ?? (A == null ? void 0 : A.find((r) => r.value === e)) ?? (V ? { value: e, label: e } : void 0),
|
|
129
|
+
[v, A, V]
|
|
130
|
+
), Q = I(
|
|
130
131
|
() => h == null ? void 0 : K(h),
|
|
131
132
|
[K, h]
|
|
132
|
-
), se = b ? Y : t ? ie : G !== null ? G : (Q == null ? void 0 : Q.label) ?? ie, ce = b ? Y : t ? ie : G !== null ? G : "",
|
|
133
|
+
), se = b ? Y : t ? ie : G !== null ? G : (Q == null ? void 0 : Q.label) ?? ie, ce = b ? Y : t ? ie : G !== null ? G : "", F = d(
|
|
133
134
|
(e) => {
|
|
134
|
-
b || (T(e), t ||
|
|
135
|
+
b || (T(e), t || C(e)), u == null || u(e);
|
|
135
136
|
},
|
|
136
137
|
[b, t, u]
|
|
137
138
|
), g = d(
|
|
138
139
|
(e) => {
|
|
139
|
-
le ||
|
|
140
|
+
le || tr(e), j == null || j(e);
|
|
140
141
|
},
|
|
141
142
|
[le, j]
|
|
142
|
-
),
|
|
143
|
+
), Ae = I(() => {
|
|
143
144
|
if (U === !1) return v;
|
|
144
|
-
const e = typeof U == "function" ? U :
|
|
145
|
+
const e = typeof U == "function" ? U : Yr;
|
|
145
146
|
return v.filter((r) => e(r, ce));
|
|
146
|
-
}, [v, U, ce]),
|
|
147
|
-
if (
|
|
148
|
-
const e =
|
|
149
|
-
return [...v, ...
|
|
147
|
+
}, [v, U, ce]), z = V ? ce.trim() : "", De = I(() => {
|
|
148
|
+
if (z === "") return !1;
|
|
149
|
+
const e = z.toLowerCase(), r = (k) => k.toLowerCase() === e;
|
|
150
|
+
return [...v, ...A ?? []].some((k) => r(k.label) || r(k.value)) ? !1 : !(t ? i : h != null ? [h] : []).some(r);
|
|
150
151
|
}, [
|
|
151
|
-
|
|
152
|
+
z,
|
|
152
153
|
v,
|
|
153
|
-
|
|
154
|
+
A,
|
|
154
155
|
t,
|
|
155
156
|
i,
|
|
156
157
|
h
|
|
157
|
-
]), s =
|
|
158
|
+
]), s = I(
|
|
158
159
|
() => [
|
|
159
|
-
...
|
|
160
|
-
...De ? [{ kind: "create", inputValue:
|
|
160
|
+
...Ae.map((e) => ({ kind: "option", option: e })),
|
|
161
|
+
...De ? [{ kind: "create", inputValue: z }] : []
|
|
161
162
|
],
|
|
162
|
-
[
|
|
163
|
+
[Ae, De, z]
|
|
163
164
|
), w = d(
|
|
164
165
|
(e) => e.kind === "option" ? `${S}-option-${e.option.value}` : `${S}-create`,
|
|
165
166
|
[S]
|
|
166
|
-
), { mounted: Ne, visible:
|
|
167
|
-
placement:
|
|
168
|
-
maxHeight:
|
|
169
|
-
style:
|
|
167
|
+
), { mounted: Ne, visible: lr } = Ur(c), {
|
|
168
|
+
placement: or,
|
|
169
|
+
maxHeight: ir,
|
|
170
|
+
style: sr,
|
|
170
171
|
portalRef: we,
|
|
171
|
-
renderPortal:
|
|
172
|
-
} =
|
|
172
|
+
renderPortal: cr
|
|
173
|
+
} = Or(_e, Ne, {
|
|
173
174
|
preferredHeight: Le,
|
|
174
175
|
maxHeightCap: Le,
|
|
175
|
-
portalContainer:
|
|
176
|
-
zIndex:
|
|
176
|
+
portalContainer: Je,
|
|
177
|
+
zIndex: Pe
|
|
177
178
|
}), p = d(() => {
|
|
178
|
-
ye(!1), y(-1), !t && !b && (
|
|
179
|
+
ye(!1), y(-1), !t && !b && (C(null), T(""));
|
|
179
180
|
}, [t, b]), H = d(() => {
|
|
180
181
|
_ || ye(!0);
|
|
181
182
|
}, [_]);
|
|
182
|
-
|
|
183
|
+
jr(ae, c, p, we), de(() => {
|
|
183
184
|
c && y((e) => {
|
|
184
185
|
if (s.length === 0) return -1;
|
|
185
186
|
if (e >= 0 && e < s.length) return e;
|
|
@@ -189,7 +190,7 @@ const yn = wr(function({
|
|
|
189
190
|
return r >= 0 ? r : 0;
|
|
190
191
|
});
|
|
191
192
|
}, [c, s, t, i, h]);
|
|
192
|
-
const
|
|
193
|
+
const ur = d(
|
|
193
194
|
(e) => t ? i.includes(e) : h === e,
|
|
194
195
|
[t, i, h]
|
|
195
196
|
), ue = d(
|
|
@@ -198,17 +199,17 @@ const yn = wr(function({
|
|
|
198
199
|
if (!e.disabled) {
|
|
199
200
|
if (t) {
|
|
200
201
|
const a = i.includes(e.value) ? i.filter((f) => f !== e.value) : [...i, e.value];
|
|
201
|
-
g(a),
|
|
202
|
+
g(a), F(""), p(), (r = D.current) == null || r.focus();
|
|
202
203
|
return;
|
|
203
204
|
}
|
|
204
|
-
g(e.value), b ? u == null || u(e.label) : (T(""),
|
|
205
|
+
g(e.value), b ? u == null || u(e.label) : (T(""), C(null)), p();
|
|
205
206
|
}
|
|
206
207
|
},
|
|
207
208
|
[
|
|
208
209
|
t,
|
|
209
210
|
i,
|
|
210
211
|
g,
|
|
211
|
-
|
|
212
|
+
F,
|
|
212
213
|
b,
|
|
213
214
|
u,
|
|
214
215
|
p
|
|
@@ -217,35 +218,35 @@ const yn = wr(function({
|
|
|
217
218
|
(e) => {
|
|
218
219
|
var r;
|
|
219
220
|
if (B ? B(e) : g(t ? [...i, e] : e), t) {
|
|
220
|
-
|
|
221
|
+
F(""), p(), (r = D.current) == null || r.focus();
|
|
221
222
|
return;
|
|
222
223
|
}
|
|
223
|
-
b ? u == null || u(e) : (T(""),
|
|
224
|
+
b ? u == null || u(e) : (T(""), C(null)), p();
|
|
224
225
|
},
|
|
225
226
|
[
|
|
226
227
|
B,
|
|
227
228
|
t,
|
|
228
229
|
i,
|
|
229
230
|
g,
|
|
230
|
-
|
|
231
|
+
F,
|
|
231
232
|
b,
|
|
232
233
|
u,
|
|
233
234
|
p
|
|
234
235
|
]
|
|
235
|
-
),
|
|
236
|
+
), fr = d(
|
|
236
237
|
(e) => {
|
|
237
238
|
e.kind === "create" ? fe(e.inputValue) : ue(e.option);
|
|
238
239
|
},
|
|
239
240
|
[fe, ue]
|
|
240
241
|
), Me = d(() => {
|
|
241
242
|
var e;
|
|
242
|
-
g(null), b ? u == null || u("") : (T(""),
|
|
243
|
-
}, [g, b, u]),
|
|
243
|
+
g(null), b ? u == null || u("") : (T(""), C(null)), (e = D.current) == null || e.focus();
|
|
244
|
+
}, [g, b, u]), Ee = d(
|
|
244
245
|
(e) => {
|
|
245
246
|
t && g(i.filter((r) => r !== e));
|
|
246
247
|
},
|
|
247
248
|
[t, i, g]
|
|
248
|
-
),
|
|
249
|
+
), Ie = d(
|
|
249
250
|
(e) => {
|
|
250
251
|
q.current = !1;
|
|
251
252
|
const r = s.map((a, f) => ({ row: a, i: f })).filter(({ row: a }) => !W(a));
|
|
@@ -254,8 +255,8 @@ const yn = wr(function({
|
|
|
254
255
|
return;
|
|
255
256
|
}
|
|
256
257
|
y((a) => {
|
|
257
|
-
const f = r.findIndex(({ i: Z }) => Z === a),
|
|
258
|
-
return r[
|
|
258
|
+
const f = r.findIndex(({ i: Z }) => Z === a), k = f < 0 ? e > 0 ? 0 : r.length - 1 : (f + e + r.length) % r.length;
|
|
259
|
+
return r[k].i;
|
|
259
260
|
});
|
|
260
261
|
},
|
|
261
262
|
[s]
|
|
@@ -270,32 +271,32 @@ const yn = wr(function({
|
|
|
270
271
|
const e = s[x];
|
|
271
272
|
e && ((a = (r = document.getElementById(w(e))) == null ? void 0 : r.scrollIntoView) == null || a.call(r, { block: "nearest" }));
|
|
272
273
|
}, [c, x, s, w]);
|
|
273
|
-
const
|
|
274
|
+
const dr = (e) => {
|
|
274
275
|
$();
|
|
275
276
|
const r = e.target.value;
|
|
276
|
-
|
|
277
|
+
F(r), c || H(), y(0);
|
|
277
278
|
}, $ = () => {
|
|
278
279
|
L.current !== null && (cancelAnimationFrame(L.current), L.current = null);
|
|
279
280
|
};
|
|
280
281
|
de(() => $, []);
|
|
281
|
-
const
|
|
282
|
+
const mr = () => {
|
|
282
283
|
pe(!0), Ue && H(), !t && !b && Q && ($(), L.current = requestAnimationFrame(() => {
|
|
283
284
|
var e;
|
|
284
285
|
L.current = null, (e = D.current) == null || e.select();
|
|
285
286
|
}));
|
|
286
|
-
},
|
|
287
|
+
}, Ve = (e) => {
|
|
287
288
|
var a;
|
|
288
289
|
const r = e.relatedTarget;
|
|
289
290
|
r && ((a = ae.current) != null && a.contains(r)) || ($(), pe(!1));
|
|
290
|
-
},
|
|
291
|
+
}, br = (e) => {
|
|
291
292
|
if (!_)
|
|
292
293
|
switch ($(), e.key) {
|
|
293
294
|
case "ArrowDown":
|
|
294
|
-
e.preventDefault(), c ?
|
|
295
|
+
e.preventDefault(), c ? Ie(1) : H();
|
|
295
296
|
break;
|
|
296
297
|
case "ArrowUp":
|
|
297
298
|
if (e.preventDefault(), c)
|
|
298
|
-
|
|
299
|
+
Ie(-1);
|
|
299
300
|
else {
|
|
300
301
|
for (let r = s.length - 1; r >= 0; r--)
|
|
301
302
|
if (!W(s[r])) {
|
|
@@ -324,36 +325,37 @@ const yn = wr(function({
|
|
|
324
325
|
}
|
|
325
326
|
break;
|
|
326
327
|
case "Enter":
|
|
327
|
-
|
|
328
|
+
if (e.nativeEvent.isComposing || e.keyCode === 229) break;
|
|
329
|
+
(c || !qe) && (e.preventDefault(), e.stopPropagation()), c && x >= 0 && s[x] && fr(s[x]);
|
|
328
330
|
break;
|
|
329
331
|
case "Escape":
|
|
330
332
|
c && (e.preventDefault(), e.stopPropagation(), p());
|
|
331
333
|
break;
|
|
332
334
|
case "Backspace":
|
|
333
|
-
t && se === "" && i.length > 0 && (e.preventDefault(),
|
|
335
|
+
t && se === "" && i.length > 0 && (e.preventDefault(), Ee(i[i.length - 1]));
|
|
334
336
|
break;
|
|
335
337
|
case "Tab":
|
|
336
338
|
p();
|
|
337
339
|
break;
|
|
338
340
|
}
|
|
339
|
-
}, br = (e) => {
|
|
340
|
-
dr(), ee == null || ee(e);
|
|
341
341
|
}, vr = (e) => {
|
|
342
|
-
|
|
342
|
+
mr(), ee == null || ee(e);
|
|
343
343
|
}, hr = (e) => {
|
|
344
|
-
|
|
344
|
+
Ve(e), re == null || re(e);
|
|
345
345
|
}, xr = (e) => {
|
|
346
|
+
br(e), ne == null || ne(e);
|
|
347
|
+
}, gr = (e) => {
|
|
346
348
|
var r;
|
|
347
349
|
_ || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== D.current && (e.preventDefault(), (r = D.current) == null || r.focus()), c || H());
|
|
348
|
-
},
|
|
350
|
+
}, _r = (e) => {
|
|
349
351
|
e.target.closest(
|
|
350
352
|
'input, textarea, select, [contenteditable="true"]'
|
|
351
353
|
) || e.preventDefault();
|
|
352
|
-
}, Re = t ? i.length > 0 : h != null && h !== "",
|
|
354
|
+
}, Re = t ? i.length > 0 : h != null && h !== "", yr = se.length > 0, pr = je && !t && Re && !_, kr = ar || c || Re || yr, Se = x >= 0 ? s[x] : void 0, Ar = Se != null ? w(Se) : void 0, X = I(() => {
|
|
353
355
|
if (!t) return [];
|
|
354
|
-
if (
|
|
356
|
+
if (A == null) {
|
|
355
357
|
const e = v.filter((a) => i.includes(a.value));
|
|
356
|
-
if (!
|
|
358
|
+
if (!V) return e;
|
|
357
359
|
const r = new Set(e.map((a) => a.value));
|
|
358
360
|
return [
|
|
359
361
|
...e,
|
|
@@ -363,46 +365,46 @@ const yn = wr(function({
|
|
|
363
365
|
return i.map(K).filter((e) => e != null);
|
|
364
366
|
}, [
|
|
365
367
|
t,
|
|
366
|
-
|
|
368
|
+
A,
|
|
367
369
|
v,
|
|
368
370
|
i,
|
|
369
|
-
|
|
371
|
+
V,
|
|
370
372
|
K
|
|
371
|
-
]),
|
|
373
|
+
]), Dr = o[`combobox--size-${Kr(P)}`], Nr = t && X.length > 0, wr = [
|
|
372
374
|
o.combobox,
|
|
373
|
-
|
|
375
|
+
Dr,
|
|
374
376
|
he ? o["combobox--invalid"] : "",
|
|
375
|
-
N != null &&
|
|
377
|
+
N != null && kr ? o["combobox--label-floated"] : "",
|
|
376
378
|
J != null ? o["combobox--has-leading-icon"] : "",
|
|
377
|
-
|
|
379
|
+
Nr ? o["combobox--has-chips"] : "",
|
|
378
380
|
c ? o["combobox--open"] : "",
|
|
379
381
|
_ ? o["combobox--disabled"] : "",
|
|
380
|
-
|
|
382
|
+
Xe
|
|
381
383
|
].filter(Boolean).join(" ");
|
|
382
|
-
return /* @__PURE__ */ M("div", { className:
|
|
384
|
+
return /* @__PURE__ */ M("div", { className: wr, ref: ae, children: [
|
|
383
385
|
/* @__PURE__ */ M("div", { className: o.combobox__wrapper, ref: _e, children: [
|
|
384
386
|
N != null && /* @__PURE__ */ l("label", { className: o.combobox__label, htmlFor: te, children: N }),
|
|
385
387
|
/* @__PURE__ */ M(
|
|
386
388
|
"div",
|
|
387
389
|
{
|
|
388
390
|
className: o.combobox__inner,
|
|
389
|
-
onMouseDown:
|
|
391
|
+
onMouseDown: gr,
|
|
390
392
|
children: [
|
|
391
|
-
J != null && /* @__PURE__ */ l("span", { className: o["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(
|
|
393
|
+
J != null && /* @__PURE__ */ l("span", { className: o["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(Lr.Provider, { value: { size: "16" }, children: J }) }),
|
|
392
394
|
/* @__PURE__ */ M("div", { className: o.combobox__value, children: [
|
|
393
395
|
t && X.length > 0 && /* @__PURE__ */ l(
|
|
394
|
-
|
|
396
|
+
Tr,
|
|
395
397
|
{
|
|
396
|
-
"aria-label":
|
|
398
|
+
"aria-label": Ke ?? Zr(N),
|
|
397
399
|
disabled: _,
|
|
398
400
|
children: X.map((e) => /* @__PURE__ */ l(
|
|
399
|
-
|
|
401
|
+
Sr,
|
|
400
402
|
{
|
|
401
|
-
size:
|
|
403
|
+
size: Qr[P],
|
|
402
404
|
leadingAvatar: e.leadingAvatar,
|
|
403
405
|
leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
|
|
404
406
|
onRemove: _ ? void 0 : (r) => {
|
|
405
|
-
r.stopPropagation(),
|
|
407
|
+
r.stopPropagation(), Ee(e.value);
|
|
406
408
|
},
|
|
407
409
|
children: e.label
|
|
408
410
|
},
|
|
@@ -413,8 +415,8 @@ const yn = wr(function({
|
|
|
413
415
|
/* @__PURE__ */ l(
|
|
414
416
|
"input",
|
|
415
417
|
{
|
|
416
|
-
...
|
|
417
|
-
ref:
|
|
418
|
+
...Be,
|
|
419
|
+
ref: rr,
|
|
418
420
|
id: te,
|
|
419
421
|
className: o.combobox__control,
|
|
420
422
|
type: "text",
|
|
@@ -422,34 +424,34 @@ const yn = wr(function({
|
|
|
422
424
|
autoComplete: "off",
|
|
423
425
|
spellCheck: !1,
|
|
424
426
|
disabled: _,
|
|
425
|
-
placeholder: t && X.length > 0 ? void 0 :
|
|
427
|
+
placeholder: t && X.length > 0 ? void 0 : ze,
|
|
426
428
|
value: se,
|
|
427
429
|
"aria-label": ge,
|
|
428
|
-
"aria-describedby":
|
|
429
|
-
"aria-required":
|
|
430
|
+
"aria-describedby": We || void 0,
|
|
431
|
+
"aria-required": Ye ? !0 : void 0,
|
|
430
432
|
"aria-invalid": he ? !0 : void 0,
|
|
431
433
|
"aria-expanded": c,
|
|
432
434
|
"aria-controls": S,
|
|
433
435
|
"aria-autocomplete": "list",
|
|
434
436
|
"aria-activedescendant": Ar,
|
|
435
437
|
"aria-busy": xe || void 0,
|
|
436
|
-
onChange:
|
|
437
|
-
onFocus:
|
|
438
|
-
onBlur:
|
|
439
|
-
onKeyDown:
|
|
438
|
+
onChange: dr,
|
|
439
|
+
onFocus: vr,
|
|
440
|
+
onBlur: hr,
|
|
441
|
+
onKeyDown: xr
|
|
440
442
|
}
|
|
441
443
|
)
|
|
442
444
|
] }),
|
|
443
|
-
|
|
445
|
+
pr && /* @__PURE__ */ l(
|
|
444
446
|
"button",
|
|
445
447
|
{
|
|
446
448
|
...m,
|
|
447
449
|
type: "button",
|
|
448
|
-
className:
|
|
450
|
+
className: Gr(
|
|
449
451
|
o.combobox__clear,
|
|
450
452
|
m == null ? void 0 : m.className
|
|
451
453
|
),
|
|
452
|
-
"aria-label":
|
|
454
|
+
"aria-label": Ge,
|
|
453
455
|
"data-combobox-clear": "",
|
|
454
456
|
onClick: Me,
|
|
455
457
|
onKeyDown: (e) => {
|
|
@@ -458,9 +460,9 @@ const yn = wr(function({
|
|
|
458
460
|
},
|
|
459
461
|
onBlur: (e) => {
|
|
460
462
|
var r;
|
|
461
|
-
(r = m == null ? void 0 : m.onBlur) == null || r.call(m, e),
|
|
463
|
+
(r = m == null ? void 0 : m.onBlur) == null || r.call(m, e), Ve(e);
|
|
462
464
|
},
|
|
463
|
-
children: /* @__PURE__ */ l(me, { size:
|
|
465
|
+
children: /* @__PURE__ */ l(me, { size: Xr[P], glyph: /* @__PURE__ */ l(Vr, {}) })
|
|
464
466
|
}
|
|
465
467
|
),
|
|
466
468
|
/* @__PURE__ */ l("span", { className: o["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(me, { size: "12", glyph: /* @__PURE__ */ l(Ir, {}) }) })
|
|
@@ -468,7 +470,7 @@ const yn = wr(function({
|
|
|
468
470
|
}
|
|
469
471
|
)
|
|
470
472
|
] }),
|
|
471
|
-
Ne &&
|
|
473
|
+
Ne && cr(
|
|
472
474
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions -- keeps focus on the input for presses anywhere in the menu
|
|
473
475
|
/* @__PURE__ */ l(
|
|
474
476
|
"div",
|
|
@@ -476,12 +478,12 @@ const yn = wr(function({
|
|
|
476
478
|
ref: we,
|
|
477
479
|
className: [
|
|
478
480
|
o.combobox__popup,
|
|
479
|
-
|
|
480
|
-
|
|
481
|
+
or === "above" ? o["combobox__popup--above"] : "",
|
|
482
|
+
lr ? o["combobox__popup--visible"] : ""
|
|
481
483
|
].filter(Boolean).join(" "),
|
|
482
|
-
style:
|
|
483
|
-
onMouseDown:
|
|
484
|
-
children: /* @__PURE__ */ l(
|
|
484
|
+
style: sr,
|
|
485
|
+
onMouseDown: _r,
|
|
486
|
+
children: /* @__PURE__ */ l(Cr, { className: o.combobox__menu, children: /* @__PURE__ */ M(Fr, { maxHeight: ir, children: [
|
|
485
487
|
s.length > 0 && /* @__PURE__ */ l(
|
|
486
488
|
"ul",
|
|
487
489
|
{
|
|
@@ -489,7 +491,7 @@ const yn = wr(function({
|
|
|
489
491
|
className: o.combobox__list,
|
|
490
492
|
role: "listbox",
|
|
491
493
|
"aria-multiselectable": t || void 0,
|
|
492
|
-
"aria-label": typeof N == "string" ? N : ge ??
|
|
494
|
+
"aria-label": typeof N == "string" ? N : ge ?? Qe,
|
|
493
495
|
children: s.map((e, r) => {
|
|
494
496
|
const a = r === x;
|
|
495
497
|
if (e.kind === "create")
|
|
@@ -504,17 +506,17 @@ const yn = wr(function({
|
|
|
504
506
|
id: w(e),
|
|
505
507
|
role: "option",
|
|
506
508
|
label: Oe(e.inputValue),
|
|
507
|
-
leadingVisual: /* @__PURE__ */ l(me, { glyph: /* @__PURE__ */ l(
|
|
509
|
+
leadingVisual: /* @__PURE__ */ l(me, { glyph: /* @__PURE__ */ l(Rr, {}) }),
|
|
508
510
|
active: a,
|
|
509
511
|
"aria-selected": !1,
|
|
510
|
-
onMouseEnter: () =>
|
|
512
|
+
onMouseEnter: () => ke(r),
|
|
511
513
|
onClick: () => fe(e.inputValue)
|
|
512
514
|
}
|
|
513
515
|
)
|
|
514
516
|
},
|
|
515
517
|
w(e)
|
|
516
518
|
);
|
|
517
|
-
const { option: f } = e,
|
|
519
|
+
const { option: f } = e, k = ur(f.value), Z = Br(f);
|
|
518
520
|
return /* @__PURE__ */ l(
|
|
519
521
|
"li",
|
|
520
522
|
{
|
|
@@ -523,8 +525,8 @@ const yn = wr(function({
|
|
|
523
525
|
children: /* @__PURE__ */ l(
|
|
524
526
|
Te,
|
|
525
527
|
{
|
|
526
|
-
...
|
|
527
|
-
|
|
528
|
+
...qr(
|
|
529
|
+
Ce,
|
|
528
530
|
f.menuItemProps
|
|
529
531
|
),
|
|
530
532
|
id: w(e),
|
|
@@ -533,11 +535,11 @@ const yn = wr(function({
|
|
|
533
535
|
secondaryLabel: f.secondaryLabel,
|
|
534
536
|
leadingElement: Z != null,
|
|
535
537
|
leadingVisual: Z,
|
|
536
|
-
trailingElement:
|
|
538
|
+
trailingElement: k,
|
|
537
539
|
active: a,
|
|
538
540
|
disabled: f.disabled,
|
|
539
|
-
"aria-selected":
|
|
540
|
-
onMouseEnter: () =>
|
|
541
|
+
"aria-selected": k,
|
|
542
|
+
onMouseEnter: () => ke(r),
|
|
541
543
|
onClick: () => ue(f)
|
|
542
544
|
}
|
|
543
545
|
)
|
|
@@ -558,6 +560,6 @@ const yn = wr(function({
|
|
|
558
560
|
] });
|
|
559
561
|
});
|
|
560
562
|
export {
|
|
561
|
-
|
|
563
|
+
pn as default
|
|
562
564
|
};
|
|
563
565
|
//# sourceMappingURL=Combobox.js.map
|