@altinn/altinn-components 0.56.6 → 0.56.7

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.
@@ -0,0 +1,685 @@
1
+ "use client";
2
+ import { jsx as t, jsxs as E } from "react/jsx-runtime";
3
+ import { c as oe } from "./index-p1eeF8LQ.js";
4
+ import { useRef as j, useState as Q, useMemo as R, useEffect as G, Fragment as Ie, useLayoutEffect as ne, useId as re } from "react";
5
+ import { Icon as ie } from "./components/Icon/Icon.js";
6
+ import { Button as se } from "./components/Button/Button.js";
7
+ import "./components/RootProvider/RootProvider.js";
8
+ import { useMenu as fe } from "./hooks/useMenu.js";
9
+ import { Input as ae } from "./components/Forms/Input.js";
10
+ import { FieldBase as ce } from "./components/Forms/FieldBase.js";
11
+ import "./components/Snackbar/useSnackbar.js";
12
+ import { S as le } from "./MagnifyingGlass-bwVhw07z.js";
13
+ import { S as ue } from "./XMark-tKk6aExO.js";
14
+ import { MenuItem as pe } from "./components/Menu/MenuItem.js";
15
+ import { MenuList as Z } from "./components/Menu/MenuList.js";
16
+ import { MenuListItem as me } from "./components/Menu/MenuListItem.js";
17
+ import { MenuListGroup as he } from "./components/Menu/MenuListGroup.js";
18
+ import { MenuListDivider as ye } from "./components/Menu/MenuListDivider.js";
19
+ import { MenuListHeading as xe } from "./components/Menu/MenuListHeading.js";
20
+ import { a as be } from "./useMenuVirtualization-Cs426RCN.js";
21
+ import { useMenuSearch as ke } from "./components/Menu/useMenuSearch.js";
22
+ import './assets/SearchField.css';const Ce = "_search_18jfe_1", we = "_searchInput_18jfe_8", te = {
23
+ search: Ce,
24
+ searchInput: we
25
+ }, ve = ({
26
+ style: I,
27
+ index: b,
28
+ name: D,
29
+ value: w,
30
+ placeholder: d = "Search",
31
+ clearButtonAltText: r = "Clear search",
32
+ onChange: _,
33
+ onClear: N,
34
+ onNavigate: p,
35
+ combobox: s = !1,
36
+ listId: h,
37
+ "aria-activedescendant": B,
38
+ onKeyDown: y,
39
+ onInput: i,
40
+ onFocus: x,
41
+ ...M
42
+ }) => /* @__PURE__ */ t("li", { className: te.search, style: I, "data-index": b, "data-menu-search": "true", children: s ? (
43
+ // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
44
+ // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
45
+ // biome-ignore lint/a11y/useSemanticElements: <explanation>
46
+ /* @__PURE__ */ t("div", { role: "combobox", "aria-expanded": !0, "aria-haspopup": "listbox", "aria-owns": h, children: /* @__PURE__ */ t(
47
+ de,
48
+ {
49
+ size: "xs",
50
+ className: te.searchInput,
51
+ name: D,
52
+ value: w,
53
+ placeholder: d,
54
+ onChange: _,
55
+ onClear: N,
56
+ clearButtonAltText: r,
57
+ autoComplete: "off",
58
+ autoCorrect: "off",
59
+ autoCapitalize: "off",
60
+ "aria-autocomplete": "list",
61
+ "aria-controls": h,
62
+ "aria-activedescendant": B,
63
+ autoFocus: !0,
64
+ onKeyDown: (a) => {
65
+ (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), p?.()), y?.(a);
66
+ },
67
+ onInput: i,
68
+ onFocus: x,
69
+ ...M
70
+ }
71
+ ) })
72
+ ) : /* @__PURE__ */ t(
73
+ de,
74
+ {
75
+ size: "xs",
76
+ className: te.searchInput,
77
+ name: D,
78
+ value: w,
79
+ placeholder: d,
80
+ onChange: _,
81
+ onClear: N,
82
+ clearButtonAltText: r,
83
+ autoComplete: "off",
84
+ autoCorrect: "off",
85
+ autoCapitalize: "off",
86
+ autoFocus: !0,
87
+ onKeyDown: (a) => {
88
+ (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), p?.()), y?.(a);
89
+ },
90
+ onInput: i,
91
+ onFocus: x,
92
+ ...M
93
+ }
94
+ ) }), ge = ({
95
+ level: I = 0,
96
+ maxLevels: b,
97
+ expanded: D,
98
+ a11yMode: w = "menu",
99
+ open: d,
100
+ scrollToTopOnOpen: r = !1,
101
+ autoActivateFirstItem: _ = !0,
102
+ autoFocusList: N = !0,
103
+ announceNoResults: p = !1,
104
+ search: s,
105
+ items: h,
106
+ groups: B = {},
107
+ size: y,
108
+ id: i,
109
+ color: x,
110
+ variant: M,
111
+ scrollRefStyles: a = {},
112
+ keyboardEvents: v = !1,
113
+ onSelect: z = () => {
114
+ },
115
+ onActiveItemIdChange: k
116
+ }) => {
117
+ if (b && I >= b)
118
+ return null;
119
+ const m = w === "combobox", l = m && i ? `${i}-listbox` : i, F = j(d), O = j(d), [Y, C] = Q(!1), f = R(
120
+ () => h.map((n, g) => ({
121
+ ...n,
122
+ id: n.id || `${i}-item-${g}`
123
+ })),
124
+ [h, i]
125
+ ), S = j(null), { menu: L, setActiveIndex: H, activeItem: W } = fe({
126
+ items: f,
127
+ groups: B,
128
+ groupByKey: "groupId",
129
+ keyboardEvents: v,
130
+ autoActivateFirstItem: _,
131
+ onSelect: z,
132
+ ref: S
133
+ });
134
+ return G(() => {
135
+ k?.(W?.id);
136
+ }, [W?.id, k]), G(() => {
137
+ if (!r) {
138
+ F.current = d;
139
+ return;
140
+ }
141
+ const n = F.current;
142
+ F.current = d, d && !n && S.current?.scrollTo({ top: 0 });
143
+ }, [d, r]), G(() => {
144
+ const n = O.current;
145
+ O.current = d, !(!v || s || !N) && d && !n && requestAnimationFrame(() => S.current?.focus?.({ preventScroll: !0 }));
146
+ }, [d, v, s]), G(() => {
147
+ if (m && p) {
148
+ H(0), C(!0);
149
+ return;
150
+ }
151
+ }, [p, m, H]), /* @__PURE__ */ E(
152
+ Z,
153
+ {
154
+ variant: M,
155
+ expanded: D,
156
+ ref: S,
157
+ style: a,
158
+ id: l,
159
+ role: m ? "listbox" : void 0,
160
+ tabIndex: v ? -1 : void 0,
161
+ children: [
162
+ s && /* @__PURE__ */ t(
163
+ ve,
164
+ {
165
+ ...s,
166
+ combobox: m,
167
+ listId: l,
168
+ "aria-activedescendant": m && Y ? W?.id : void 0,
169
+ onNavigate: m ? () => C(!0) : void 0,
170
+ onChange: (n) => {
171
+ C(!1), s.onChange?.(n);
172
+ },
173
+ onFocus: (n) => {
174
+ C(!1), s.onFocus?.(n);
175
+ },
176
+ onInput: (n) => {
177
+ C(!1), s.onInput?.(n);
178
+ },
179
+ onKeyDown: (n) => {
180
+ const g = n.key === "ArrowUp" || n.key === "ArrowDown", T = n.key.length === 1 || n.key === "Backspace" || n.key === "Delete";
181
+ m && !g && T && C(!1), s.onKeyDown?.(n);
182
+ }
183
+ }
184
+ ),
185
+ L.map((n, g) => {
186
+ const T = n?.props || {}, { title: P, hidden: q = !1, divider: X = !0 } = T;
187
+ return /* @__PURE__ */ E(Ie, { children: [
188
+ (I > 0 || g) && X ? /* @__PURE__ */ t(ye, {}) : "",
189
+ /* @__PURE__ */ t(he, { hidden: q, children: /* @__PURE__ */ E(Z, { role: "presentation", children: [
190
+ P && /* @__PURE__ */ t(xe, { title: P, level: I }),
191
+ n?.items.filter((U) => !U.props?.hidden).map((U, e) => {
192
+ const { active: o, onMouseEnter: u } = U, { groupId: K, ...c } = U.props || {}, { expanded: $ } = c, V = Array.isArray(c?.items) && c.items.length > 0, J = c.role === "checkbox" || c.role === "radio", ee = m && !J ? "option" : c.role;
193
+ return /* @__PURE__ */ E(
194
+ me,
195
+ {
196
+ expanded: $,
197
+ onMouseLeave: () => H(-1),
198
+ role: m || J ? "presentation" : void 0,
199
+ children: [
200
+ /* @__PURE__ */ t(
201
+ pe,
202
+ {
203
+ ...c,
204
+ size: c?.size || T?.size || y,
205
+ color: c?.color || T?.color || x,
206
+ variant: c?.variant || T?.variant || M,
207
+ active: o,
208
+ role: ee,
209
+ selected: c.selected,
210
+ tabIndex: c?.disabled || v ? -1 : c.tabIndex ?? 0,
211
+ onMouseEnter: u,
212
+ "aria-haspopup": V ? "menu" : void 0,
213
+ "aria-expanded": V ? $ : void 0,
214
+ "aria-controls": V ? c.id + "-menu" : void 0
215
+ }
216
+ ),
217
+ $ && c?.items && /* @__PURE__ */ t(
218
+ ge,
219
+ {
220
+ id: c.id + "-menu",
221
+ expanded: $,
222
+ level: I + 1,
223
+ maxLevels: b,
224
+ items: c?.items,
225
+ groups: B,
226
+ size: y,
227
+ color: x,
228
+ variant: M
229
+ }
230
+ )
231
+ ]
232
+ },
233
+ e
234
+ );
235
+ })
236
+ ] }) }, g)
237
+ ] }, g);
238
+ })
239
+ ]
240
+ }
241
+ );
242
+ }, _e = (I) => {
243
+ const b = j(null), D = j(null), [w, d] = Q(0), {
244
+ search: r,
245
+ items: _,
246
+ groups: N = {},
247
+ size: p,
248
+ color: s,
249
+ variant: h,
250
+ keyboardEvents: B,
251
+ scrollRefStyles: y = {},
252
+ id: i,
253
+ expanded: x,
254
+ a11yMode: M = "menu",
255
+ open: a,
256
+ scrollToTopOnOpen: v = !1,
257
+ autoActivateFirstItem: z = !0,
258
+ announceNoResults: k = !1,
259
+ onActiveItemIdChange: m
260
+ } = I, l = M === "combobox", F = l && i ? `${i}-listbox` : i, O = j(a), [Y, C] = Q(!1), f = R(
261
+ () => _.map((e, o) => ({
262
+ ...e,
263
+ id: e.id || `${i}-item-${o}`
264
+ })),
265
+ [_, i]
266
+ ), { menu: S, activeItem: L, setActiveIndex: H, activeIndex: W } = fe({
267
+ items: f,
268
+ groups: N,
269
+ groupByKey: "groupId",
270
+ keyboardEvents: B,
271
+ autoActivateFirstItem: z,
272
+ ref: b
273
+ }), { flatMenu: n, virtualizer: g, scrollMaxHeight: T } = be({
274
+ menu: S,
275
+ scrollRef: b
276
+ });
277
+ ne(() => {
278
+ const e = D.current;
279
+ if (!e) return;
280
+ const o = Math.round(e.offsetTop);
281
+ d((u) => u === o ? u : o);
282
+ });
283
+ const P = R(() => {
284
+ const e = L?.id;
285
+ if (e)
286
+ return n.findIndex((u) => u.type === "item" && u.itemProps?.id === e);
287
+ if (W < 0) return -1;
288
+ let o = -1;
289
+ for (let u = 0; u < n.length; u++)
290
+ if (n[u]?.type === "item" && (o += 1, o === W))
291
+ return u;
292
+ return -1;
293
+ }, [L?.id, W, n]), q = j(null);
294
+ ne(() => {
295
+ const e = q?.current, o = typeof e == "number" ? P <= e : !1;
296
+ q.current = P;
297
+ const u = o ? P : P + 2;
298
+ if (!o) {
299
+ const V = g.getOffsetForIndex(u, "auto");
300
+ if (!V) return;
301
+ const [J, ee] = V;
302
+ if (ee === "auto") return;
303
+ g.scrollToOffset(J + w + 10, { align: "start" });
304
+ return;
305
+ }
306
+ if (P <= 3) {
307
+ g.scrollToOffset(0);
308
+ return;
309
+ }
310
+ const K = g.getOffsetForIndex(P - 1, "auto");
311
+ if (!K) return;
312
+ const [c, $] = K;
313
+ $ !== "auto" && g.scrollToOffset(c + w + 10, { align: "start" });
314
+ }, [P, w, g, q]);
315
+ const X = R(() => {
316
+ const e = /* @__PURE__ */ new Map();
317
+ let o = 0;
318
+ return n.forEach((u, K) => {
319
+ u.type === "item" && (o += 1, e.set(K, o));
320
+ }), { positions: e, total: o };
321
+ }, [n]);
322
+ G(() => {
323
+ m?.(L?.id);
324
+ }, [L?.id, m]), G(() => {
325
+ if (l && k) {
326
+ H(0), C(!0);
327
+ return;
328
+ }
329
+ }, [k, l, H]), G(() => {
330
+ if (!v) {
331
+ O.current = a;
332
+ return;
333
+ }
334
+ const e = O.current;
335
+ O.current = a, a && !e && b.current?.scrollTo({ top: 0 });
336
+ }, [a, v]);
337
+ const U = {
338
+ position: "relative",
339
+ maxHeight: y?.maxHeight || T,
340
+ margin: "-0.5rem",
341
+ padding: "0.5rem",
342
+ minWidth: y?.minWidth ?? "20rem",
343
+ overflowY: "auto",
344
+ ...y
345
+ };
346
+ return /* @__PURE__ */ E(
347
+ Z,
348
+ {
349
+ ref: b,
350
+ style: U,
351
+ variant: h,
352
+ color: s,
353
+ expanded: x,
354
+ id: F,
355
+ role: l ? "listbox" : void 0,
356
+ children: [
357
+ r && /* @__PURE__ */ t(
358
+ ve,
359
+ {
360
+ ...r,
361
+ combobox: l,
362
+ listId: F,
363
+ "aria-activedescendant": l && Y ? L?.id : void 0,
364
+ onNavigate: l ? () => C(!0) : void 0,
365
+ onChange: (e) => {
366
+ C(!1), r.onChange?.(e);
367
+ },
368
+ onFocus: (e) => {
369
+ C(!1), r.onFocus?.(e);
370
+ },
371
+ onInput: (e) => {
372
+ C(!1), r.onInput?.(e);
373
+ },
374
+ onKeyDown: (e) => {
375
+ const o = e.key === "ArrowUp" || e.key === "ArrowDown", u = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
376
+ l && !o && u && C(!1), r.onKeyDown?.(e);
377
+ }
378
+ }
379
+ ),
380
+ /* @__PURE__ */ t(
381
+ he,
382
+ {
383
+ ref: D,
384
+ style: {
385
+ position: "relative",
386
+ height: `${g.getTotalSize()}px`,
387
+ width: "100%"
388
+ },
389
+ children: /* @__PURE__ */ t(Z, { style: { width: "100%", minWidth: "100%" }, children: g.getVirtualItems().map((e) => {
390
+ const o = n[e.index];
391
+ if (!o) return null;
392
+ const u = {
393
+ position: "absolute",
394
+ top: 0,
395
+ left: 0,
396
+ width: "100%",
397
+ transform: `translateY(${e.start}px)`
398
+ }, K = {
399
+ style: u,
400
+ index: e.index,
401
+ "data-index": e.index,
402
+ ref: g.measureElement
403
+ };
404
+ switch (o.type) {
405
+ case "divider":
406
+ return /* @__PURE__ */ t(
407
+ ye,
408
+ {
409
+ ...K,
410
+ style: { ...u, padding: "0.25rem 0" }
411
+ },
412
+ e.key
413
+ );
414
+ case "header":
415
+ return /* @__PURE__ */ t(xe, { ...K, title: o.title || "", level: 1 }, e.key);
416
+ default: {
417
+ const c = o.itemProps?.role === "checkbox" || o.itemProps?.role === "radio", $ = l && !c ? "option" : o.itemProps?.role;
418
+ return /* @__PURE__ */ t(
419
+ me,
420
+ {
421
+ ...K,
422
+ role: l || c ? "presentation" : "menuitem",
423
+ children: /* @__PURE__ */ t(
424
+ pe,
425
+ {
426
+ ...o.itemProps || {},
427
+ size: o.itemProps?.size || p,
428
+ color: o.itemProps?.color || s,
429
+ variant: o.itemProps?.variant || h,
430
+ active: o.active,
431
+ role: $,
432
+ selected: o.itemProps?.selected,
433
+ "aria-posinset": l ? X.positions.get(e.index) : void 0,
434
+ "aria-setsize": l ? X.total : void 0,
435
+ tabIndex: o.itemProps?.disabled || B ? -1 : 0
436
+ }
437
+ )
438
+ },
439
+ e.key
440
+ );
441
+ }
442
+ }
443
+ }) })
444
+ }
445
+ )
446
+ ]
447
+ }
448
+ );
449
+ }, Me = ({
450
+ searchable: I,
451
+ search: b,
452
+ items: D = [],
453
+ groups: w = {},
454
+ variant: d = "default",
455
+ size: r,
456
+ level: _ = 0,
457
+ maxLevels: N = 3,
458
+ virtualized: p = !1,
459
+ keyboardEvents: s = !1,
460
+ scrollRefStyles: h = {},
461
+ onActiveItemIdChange: B,
462
+ a11yMode: y = "menu",
463
+ open: i,
464
+ scrollToTopOnOpen: x,
465
+ autoFocusList: M,
466
+ id: a
467
+ }) => {
468
+ const v = ke({ ...b, items: D, groups: w }), z = I ? v.search : b, k = I && v.hasQuery && v.resultCount === 0, m = I ? v.items : D, l = I ? { ...w, ...v.groups } : w, F = y !== "combobox";
469
+ return p ? /* @__PURE__ */ t(
470
+ _e,
471
+ {
472
+ id: a,
473
+ search: z,
474
+ announceNoResults: k,
475
+ items: m,
476
+ groups: l,
477
+ variant: d,
478
+ size: r,
479
+ level: _,
480
+ maxLevels: N,
481
+ keyboardEvents: s,
482
+ scrollRefStyles: h,
483
+ onActiveItemIdChange: B,
484
+ a11yMode: y,
485
+ open: i,
486
+ scrollToTopOnOpen: x,
487
+ autoActivateFirstItem: F,
488
+ autoFocusList: M
489
+ }
490
+ ) : /* @__PURE__ */ t(
491
+ ge,
492
+ {
493
+ id: a,
494
+ search: z,
495
+ announceNoResults: k,
496
+ items: m,
497
+ groups: l,
498
+ variant: d,
499
+ size: r,
500
+ level: _,
501
+ maxLevels: N,
502
+ keyboardEvents: s,
503
+ scrollRefStyles: h,
504
+ onActiveItemIdChange: B,
505
+ a11yMode: y,
506
+ open: i,
507
+ scrollToTopOnOpen: x,
508
+ autoActivateFirstItem: F,
509
+ autoFocusList: M
510
+ }
511
+ );
512
+ }, Ae = "_fieldContainer_1ekv9_1", De = "_field_1ekv9_1", Ne = "_inputContainer_1ekv9_9", Be = "_icon_1ekv9_15", Fe = "_input_1ekv9_9", Se = "_clear_1ekv9_58", ze = "_clearButton_1ekv9_70", Pe = "_autocomplete_1ekv9_99", A = {
513
+ fieldContainer: Ae,
514
+ field: De,
515
+ inputContainer: Ne,
516
+ icon: Be,
517
+ input: Fe,
518
+ clear: Se,
519
+ clearButton: ze,
520
+ autocomplete: Pe
521
+ }, de = ({
522
+ className: I,
523
+ collapsible: b,
524
+ size: D,
525
+ color: w = "neutral",
526
+ label: d,
527
+ value: r,
528
+ onClear: _,
529
+ clearButtonAltText: N = "Clear search",
530
+ menu: p,
531
+ minLength: s,
532
+ ...h
533
+ }) => {
534
+ const B = re(), [y, i] = Q(!1), x = h.id || `search-field-${B}`, M = `${x}-listbox`, [a, v] = Q(void 0), z = "searchfield-clear-button-" + re(), k = R(() => !r || typeof s == "number" && typeof r == "string" && r.length < s ? !1 : y, [y, s, r]), m = R(() => (p?.items ?? []).map((f) => ({
535
+ ...f,
536
+ onClick: () => {
537
+ f.onClick?.(), i(!1);
538
+ }
539
+ })), [p]), l = (f) => {
540
+ if (f.key === "Enter" && k) {
541
+ p?.items?.[0]?.onClick?.(), i(!1);
542
+ return;
543
+ }
544
+ if (f.key === "Escape" && k) {
545
+ f.preventDefault(), f.stopPropagation(), i(!1), p?.onClose(), document.getElementById(x)?.focus();
546
+ return;
547
+ }
548
+ h.onKeyDown?.(f), i(!0);
549
+ }, F = () => {
550
+ i(!0);
551
+ }, O = (f) => {
552
+ if (!y) return;
553
+ const S = f.relatedTarget;
554
+ S && f.currentTarget.contains(S) || i(!1);
555
+ }, Y = (f) => {
556
+ f.preventDefault();
557
+ }, C = (f) => {
558
+ f.relatedTarget?.id === z && v(void 0), h.onBlur?.(f);
559
+ };
560
+ return p ? /* @__PURE__ */ E("div", { className: A.fieldContainer, children: [
561
+ /* @__PURE__ */ t(
562
+ ce,
563
+ {
564
+ size: D,
565
+ color: w,
566
+ label: d,
567
+ className: oe(A.field, I),
568
+ onBlurCapture: O,
569
+ children: /* @__PURE__ */ E("div", { className: A.inputContainer, children: [
570
+ /* @__PURE__ */ t(
571
+ ae,
572
+ {
573
+ ...h,
574
+ id: x,
575
+ type: "search",
576
+ value: r,
577
+ className: A.input,
578
+ "data-collapsible": b,
579
+ autoCapitalize: "off",
580
+ autoComplete: "off",
581
+ minLength: s,
582
+ onKeyDown: l,
583
+ onBlur: C,
584
+ ...p && {
585
+ role: "combobox",
586
+ "aria-autocomplete": "list",
587
+ "aria-expanded": !!k,
588
+ "aria-haspopup": "listbox",
589
+ "aria-controls": M,
590
+ "aria-activedescendant": k ? a : void 0,
591
+ onFocus: F
592
+ }
593
+ }
594
+ ),
595
+ /* @__PURE__ */ t(ie, { svgElement: le, className: A.icon }),
596
+ _ && !!r && /* @__PURE__ */ t("span", { className: A.clear, children: /* @__PURE__ */ t(
597
+ se,
598
+ {
599
+ id: z,
600
+ "data-testid": "clear-button",
601
+ size: "xs",
602
+ rounded: !0,
603
+ icon: !0,
604
+ variant: "tinted",
605
+ className: A.clearButton,
606
+ onClick: () => {
607
+ _?.(), document.getElementById(x)?.focus();
608
+ },
609
+ "aria-label": N,
610
+ "data-action": "clear-input",
611
+ children: /* @__PURE__ */ t(ue, {})
612
+ }
613
+ ) })
614
+ ] })
615
+ }
616
+ ),
617
+ p && k && /* @__PURE__ */ t("div", { className: A.autocomplete, "aria-hidden": !k, onMouseDown: Y, children: /* @__PURE__ */ t(
618
+ Me,
619
+ {
620
+ ...p,
621
+ id: M,
622
+ items: m,
623
+ groups: p?.groups,
624
+ keyboardEvents: !0,
625
+ a11yMode: "combobox",
626
+ open: k,
627
+ autoFocusList: !1,
628
+ onActiveItemIdChange: v
629
+ }
630
+ ) })
631
+ ] }) : /* @__PURE__ */ t(
632
+ ce,
633
+ {
634
+ size: D,
635
+ color: w,
636
+ label: d,
637
+ className: oe(A.field, I),
638
+ onBlurCapture: O,
639
+ children: /* @__PURE__ */ E("div", { className: A.inputContainer, children: [
640
+ /* @__PURE__ */ t(
641
+ ae,
642
+ {
643
+ ...h,
644
+ id: x,
645
+ type: "search",
646
+ value: r,
647
+ className: A.input,
648
+ "data-collapsible": b,
649
+ autoCapitalize: "off",
650
+ autoComplete: "off",
651
+ minLength: s,
652
+ onKeyDown: l,
653
+ onBlur: C
654
+ }
655
+ ),
656
+ /* @__PURE__ */ t(ie, { svgElement: le, className: A.icon }),
657
+ _ && !!r && /* @__PURE__ */ t("span", { className: A.clear, children: /* @__PURE__ */ t(
658
+ se,
659
+ {
660
+ id: z,
661
+ "data-testid": "clear-button",
662
+ size: "xs",
663
+ rounded: !0,
664
+ icon: !0,
665
+ variant: "tinted",
666
+ className: A.clearButton,
667
+ onClick: () => {
668
+ _?.(), document.getElementById(x)?.focus();
669
+ },
670
+ "aria-label": N,
671
+ "data-action": "clear-input",
672
+ children: /* @__PURE__ */ t(ue, {})
673
+ }
674
+ ) })
675
+ ] })
676
+ }
677
+ );
678
+ };
679
+ export {
680
+ Me as M,
681
+ de as S,
682
+ _e as V,
683
+ ge as a,
684
+ ve as b
685
+ };
@@ -4,7 +4,7 @@ import { useState as M, useEffect as w, useMemo as L } from "react";
4
4
  import "../../index-p1eeF8LQ.js";
5
5
  import "../Button/Button.js";
6
6
  import "../RootProvider/RootProvider.js";
7
- import { M as S } from "../../SearchField-d2UqvD48.js";
7
+ import { M as S } from "../../SearchField-CqdLwxvV.js";
8
8
  import "../Snackbar/useSnackbar.js";
9
9
  const F = (n) => `${n} hits`, E = ({
10
10
  items: n = [],
@@ -5,7 +5,7 @@ import "../../index-p1eeF8LQ.js";
5
5
  import u, { forwardRef as s } from "react";
6
6
  import { Dropdown as m } from "../Dropdown/Dropdown.js";
7
7
  import { useRootContext as c } from "../RootProvider/RootProvider.js";
8
- import { M as f } from "../../SearchField-d2UqvD48.js";
8
+ import { M as f } from "../../SearchField-CqdLwxvV.js";
9
9
  import "../Snackbar/useSnackbar.js";
10
10
  import { useDropdownMenuController as g } from "../Menu/useDropdownMenuController.js";
11
11
  import { Tooltip as b } from "../Tooltip/Tooltip.js";
@@ -7,7 +7,7 @@ import { ButtonGroup as C } from "../Button/ButtonGroup.js";
7
7
  import { ButtonGroupDivider as B } from "../Button/ButtonGroupDivider.js";
8
8
  import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
9
9
  import { useRootContext as _ } from "../RootProvider/RootProvider.js";
10
- import { M as v } from "../../SearchField-d2UqvD48.js";
10
+ import { M as v } from "../../SearchField-CqdLwxvV.js";
11
11
  import "../Snackbar/useSnackbar.js";
12
12
  import { S as k, a as D } from "../../ChevronUp-_BBfEirx.js";
13
13
  import '../../assets/DialogActions.css';const I = "_action_1n930_1", M = "_comboButton_1n930_8", m = {