@altinn/altinn-components 0.56.3 → 0.56.5

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.
Files changed (33) hide show
  1. package/dist/MenuHamburger-YjDC-ncP.js +24 -0
  2. package/dist/SearchField-BZo3_1VH.js +639 -0
  3. package/dist/assets/Avatar.css +1 -1
  4. package/dist/assets/SearchField.css +1 -1
  5. package/dist/components/Account/AccountMenu.js +1 -1
  6. package/dist/components/Avatar/Avatar.js +35 -34
  7. package/dist/components/ContextMenu/ContextMenu.js +1 -1
  8. package/dist/components/Dialog/DialogActions.js +1 -1
  9. package/dist/components/Forms/SearchField.js +1 -1
  10. package/dist/components/Forms/index.js +1 -1
  11. package/dist/components/GlobalHeader/AccountSelector.js +1 -1
  12. package/dist/components/GlobalMenu/GlobalMenu.js +1 -1
  13. package/dist/components/GlobalMenu/GlobalMenuButton.js +50 -68
  14. package/dist/components/GlobalMenu/LocaleSwitcher.js +1 -1
  15. package/dist/components/GlobalMenu_old/GlobalMenu.js +1 -1
  16. package/dist/components/Header/LocaleSwitcher.js +1 -1
  17. package/dist/components/Layout/Layout.js +1 -1
  18. package/dist/components/Menu/Menu.js +1 -1
  19. package/dist/components/Menu/MenuItems.js +1 -1
  20. package/dist/components/Menu/MenuListSearch.js +1 -1
  21. package/dist/components/Menu/VirtualizedMenuItems.js +1 -1
  22. package/dist/components/Menu/index.js +1 -1
  23. package/dist/components/Toolbar/SelectDateFilter.js +1 -1
  24. package/dist/components/Toolbar/ToolbarFilterAddMenu.js +1 -1
  25. package/dist/components/Toolbar/ToolbarFilterMenu.js +1 -1
  26. package/dist/components/Toolbar/ToolbarMenu.js +1 -1
  27. package/dist/components/Toolbar/ToolbarSearch.js +1 -1
  28. package/dist/components/Toolbar/example.data.js +77 -36
  29. package/dist/components/index.js +1 -1
  30. package/dist/index.js +1 -1
  31. package/dist/types/lib/components/Toolbar/ToolbarFilter.stories.d.ts +2 -4
  32. package/package.json +1 -1
  33. package/dist/SearchField-CN2mo8ck.js +0 -636
@@ -0,0 +1,24 @@
1
+ "use client";
2
+ import a, { forwardRef as i } from "react";
3
+ import { u as f } from "./useId-BVFxCjkq.js";
4
+ var d = function(t, n) {
5
+ var l = {};
6
+ for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (l[e] = t[e]);
7
+ if (t != null && typeof Object.getOwnPropertySymbols == "function")
8
+ for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
9
+ n.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
10
+ return l;
11
+ };
12
+ const m = i((t, n) => {
13
+ var { title: l, titleId: e } = t, r = d(t, ["title", "titleId"]);
14
+ let o = f();
15
+ return o = l ? e || "title-" + o : void 0, a.createElement(
16
+ "svg",
17
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": o }, r),
18
+ l ? a.createElement("title", { id: o }, l) : null,
19
+ a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M2.75 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17A.75.75 0 0 1 2.75 6m0 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h17a.75.75 0 0 0 0-1.5z", clipRule: "evenodd" })
20
+ );
21
+ });
22
+ export {
23
+ m as S
24
+ };
@@ -0,0 +1,639 @@
1
+ "use client";
2
+ import { jsx as n, jsxs as W } from "react/jsx-runtime";
3
+ import { c as pe } from "./index-p1eeF8LQ.js";
4
+ import { useRef as j, useState as X, useMemo as R, useEffect as G, Fragment as me, useLayoutEffect as oe, useId as ne } from "react";
5
+ import { Icon as he } from "./components/Icon/Icon.js";
6
+ import { Button as xe } from "./components/Button/Button.js";
7
+ import "./components/RootProvider/RootProvider.js";
8
+ import { useMenu as ie } from "./hooks/useMenu.js";
9
+ import { Input as ye } from "./components/Forms/Input.js";
10
+ import { FieldBase as ve } from "./components/Forms/FieldBase.js";
11
+ import "./components/Snackbar/useSnackbar.js";
12
+ import { S as ge } from "./MagnifyingGlass-bwVhw07z.js";
13
+ import { S as Ie } from "./XMark-tKk6aExO.js";
14
+ import { MenuItem as se } from "./components/Menu/MenuItem.js";
15
+ import { MenuList as Z } from "./components/Menu/MenuList.js";
16
+ import { MenuListItem as ae } from "./components/Menu/MenuListItem.js";
17
+ import { MenuListGroup as ce } from "./components/Menu/MenuListGroup.js";
18
+ import { MenuListDivider as le } from "./components/Menu/MenuListDivider.js";
19
+ import { MenuListHeading as ue } 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", _e = "_searchInput_18jfe_8", te = {
23
+ search: Ce,
24
+ searchInput: _e
25
+ }, de = ({
26
+ style: I,
27
+ index: b,
28
+ name: A,
29
+ value: _,
30
+ placeholder: f = "Search",
31
+ clearButtonAltText: s = "Clear search",
32
+ onChange: M,
33
+ onClear: B,
34
+ onNavigate: m,
35
+ combobox: c = !1,
36
+ listId: v,
37
+ "aria-activedescendant": D,
38
+ onKeyDown: h,
39
+ onInput: r,
40
+ onFocus: k,
41
+ ...w
42
+ }) => /* @__PURE__ */ n("li", { className: te.search, style: I, "data-index": b, "data-menu-search": "true", children: c ? (
43
+ // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
44
+ // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
45
+ // biome-ignore lint/a11y/useSemanticElements: <explanation>
46
+ /* @__PURE__ */ n("div", { role: "combobox", "aria-expanded": !0, "aria-haspopup": "listbox", "aria-owns": v, children: /* @__PURE__ */ n(
47
+ re,
48
+ {
49
+ size: "xs",
50
+ className: te.searchInput,
51
+ name: A,
52
+ value: _,
53
+ placeholder: f,
54
+ onChange: M,
55
+ onClear: B,
56
+ clearButtonAltText: s,
57
+ autoComplete: "off",
58
+ autoCorrect: "off",
59
+ autoCapitalize: "off",
60
+ "aria-autocomplete": "list",
61
+ "aria-controls": v,
62
+ "aria-activedescendant": D,
63
+ autoFocus: !0,
64
+ onKeyDown: (a) => {
65
+ (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), m?.()), h?.(a);
66
+ },
67
+ onInput: r,
68
+ onFocus: k,
69
+ ...w
70
+ }
71
+ ) })
72
+ ) : /* @__PURE__ */ n(
73
+ re,
74
+ {
75
+ size: "xs",
76
+ className: te.searchInput,
77
+ name: A,
78
+ value: _,
79
+ placeholder: f,
80
+ onChange: M,
81
+ onClear: B,
82
+ clearButtonAltText: s,
83
+ autoComplete: "off",
84
+ autoCorrect: "off",
85
+ autoCapitalize: "off",
86
+ autoFocus: !0,
87
+ onKeyDown: (a) => {
88
+ (a.key === "ArrowUp" || a.key === "ArrowDown") && (a.preventDefault(), m?.()), h?.(a);
89
+ },
90
+ onInput: r,
91
+ onFocus: k,
92
+ ...w
93
+ }
94
+ ) }), fe = ({
95
+ level: I = 0,
96
+ maxLevels: b,
97
+ expanded: A,
98
+ a11yMode: _ = "menu",
99
+ open: f,
100
+ scrollToTopOnOpen: s = !1,
101
+ autoActivateFirstItem: M = !0,
102
+ autoFocusList: B = !0,
103
+ announceNoResults: m = !1,
104
+ search: c,
105
+ items: v,
106
+ groups: D = {},
107
+ size: h,
108
+ id: r,
109
+ color: k,
110
+ variant: w,
111
+ scrollRefStyles: a = {},
112
+ keyboardEvents: x = !1,
113
+ onSelect: P = () => {
114
+ },
115
+ onActiveItemIdChange: g
116
+ }) => {
117
+ if (b && I >= b)
118
+ return null;
119
+ const p = _ === "combobox", l = p && r ? `${r}-listbox` : r, F = j(f), O = j(f), [Y, C] = X(!1), d = R(
120
+ () => v.map((o, y) => ({
121
+ ...o,
122
+ id: o.id || `${r}-item-${y}`
123
+ })),
124
+ [v, r]
125
+ ), N = j(null), { menu: E, setActiveIndex: H, activeItem: L } = ie({
126
+ items: d,
127
+ groups: D,
128
+ groupByKey: "groupId",
129
+ keyboardEvents: x,
130
+ autoActivateFirstItem: M,
131
+ onSelect: P,
132
+ ref: N
133
+ });
134
+ return G(() => {
135
+ g?.(L?.id);
136
+ }, [L?.id, g]), G(() => {
137
+ if (!s) {
138
+ F.current = f;
139
+ return;
140
+ }
141
+ const o = F.current;
142
+ F.current = f, f && !o && N.current?.scrollTo({ top: 0 });
143
+ }, [f, s]), G(() => {
144
+ const o = O.current;
145
+ O.current = f, !(!x || c || !B) && f && !o && requestAnimationFrame(() => N.current?.focus?.({ preventScroll: !0 }));
146
+ }, [f, x, c]), G(() => {
147
+ if (p && m) {
148
+ H(0), C(!0);
149
+ return;
150
+ }
151
+ }, [m, p, H]), /* @__PURE__ */ W(
152
+ Z,
153
+ {
154
+ variant: w,
155
+ expanded: A,
156
+ ref: N,
157
+ style: a,
158
+ id: l,
159
+ role: p ? "listbox" : void 0,
160
+ tabIndex: x ? -1 : void 0,
161
+ children: [
162
+ c && /* @__PURE__ */ n(
163
+ de,
164
+ {
165
+ ...c,
166
+ combobox: p,
167
+ listId: l,
168
+ "aria-activedescendant": p && Y ? L?.id : void 0,
169
+ onNavigate: p ? () => C(!0) : void 0,
170
+ onChange: (o) => {
171
+ C(!1), c.onChange?.(o);
172
+ },
173
+ onFocus: (o) => {
174
+ C(!1), c.onFocus?.(o);
175
+ },
176
+ onInput: (o) => {
177
+ C(!1), c.onInput?.(o);
178
+ },
179
+ onKeyDown: (o) => {
180
+ const y = o.key === "ArrowUp" || o.key === "ArrowDown", K = o.key.length === 1 || o.key === "Backspace" || o.key === "Delete";
181
+ p && !y && K && C(!1), c.onKeyDown?.(o);
182
+ }
183
+ }
184
+ ),
185
+ E.map((o, y) => {
186
+ const K = o?.props || {}, { title: S, hidden: q = !1, divider: J = !0 } = K;
187
+ return /* @__PURE__ */ W(me, { children: [
188
+ (I > 0 || y) && J ? /* @__PURE__ */ n(le, {}) : "",
189
+ /* @__PURE__ */ n(ce, { hidden: q, children: /* @__PURE__ */ W(Z, { role: "presentation", children: [
190
+ S && /* @__PURE__ */ n(ue, { title: S, level: I }),
191
+ o?.items.filter((U) => !U.props?.hidden).map((U, e) => {
192
+ const { active: t, onMouseEnter: u } = U, { groupId: z, ...i } = U.props || {}, { expanded: T } = i, V = Array.isArray(i?.items) && i.items.length > 0, Q = i.role === "checkbox" || i.role === "radio", ee = p && !Q ? "option" : i.role;
193
+ return /* @__PURE__ */ W(
194
+ ae,
195
+ {
196
+ expanded: T,
197
+ onMouseLeave: () => H(-1),
198
+ role: p || Q ? "presentation" : void 0,
199
+ children: [
200
+ /* @__PURE__ */ n(
201
+ se,
202
+ {
203
+ ...i,
204
+ size: i?.size || K?.size || h,
205
+ color: i?.color || K?.color || k,
206
+ variant: i?.variant || K?.variant || w,
207
+ active: t,
208
+ role: ee,
209
+ selected: p && !Q ? t : i.selected,
210
+ tabIndex: i?.disabled || x ? -1 : i.tabIndex ?? 0,
211
+ onMouseEnter: u,
212
+ "aria-haspopup": V ? "menu" : void 0,
213
+ "aria-expanded": V ? T : void 0,
214
+ "aria-controls": V ? i.id + "-menu" : void 0
215
+ }
216
+ ),
217
+ T && i?.items && /* @__PURE__ */ n(
218
+ fe,
219
+ {
220
+ id: i.id + "-menu",
221
+ expanded: T,
222
+ level: I + 1,
223
+ maxLevels: b,
224
+ items: i?.items,
225
+ groups: D,
226
+ size: h,
227
+ color: k,
228
+ variant: w
229
+ }
230
+ )
231
+ ]
232
+ },
233
+ e
234
+ );
235
+ })
236
+ ] }) }, y)
237
+ ] }, y);
238
+ })
239
+ ]
240
+ }
241
+ );
242
+ }, we = (I) => {
243
+ const b = j(null), A = j(null), [_, f] = X(0), {
244
+ search: s,
245
+ items: M,
246
+ groups: B = {},
247
+ size: m,
248
+ color: c,
249
+ variant: v,
250
+ keyboardEvents: D,
251
+ scrollRefStyles: h = {},
252
+ id: r,
253
+ expanded: k,
254
+ a11yMode: w = "menu",
255
+ open: a,
256
+ scrollToTopOnOpen: x = !1,
257
+ autoActivateFirstItem: P = !0,
258
+ announceNoResults: g = !1,
259
+ onActiveItemIdChange: p
260
+ } = I, l = w === "combobox", F = l && r ? `${r}-listbox` : r, O = j(a), [Y, C] = X(!1), d = R(
261
+ () => M.map((e, t) => ({
262
+ ...e,
263
+ id: e.id || `${r}-item-${t}`
264
+ })),
265
+ [M, r]
266
+ ), { menu: N, activeItem: E, setActiveIndex: H, activeIndex: L } = ie({
267
+ items: d,
268
+ groups: B,
269
+ groupByKey: "groupId",
270
+ keyboardEvents: D,
271
+ autoActivateFirstItem: P,
272
+ ref: b
273
+ }), { flatMenu: o, virtualizer: y, scrollMaxHeight: K } = be({
274
+ menu: N,
275
+ scrollRef: b
276
+ });
277
+ oe(() => {
278
+ const e = A.current;
279
+ if (!e) return;
280
+ const t = Math.round(e.offsetTop);
281
+ f((u) => u === t ? u : t);
282
+ });
283
+ const S = R(() => {
284
+ const e = E?.id;
285
+ if (e)
286
+ return o.findIndex((u) => u.type === "item" && u.itemProps?.id === e);
287
+ if (L < 0) return -1;
288
+ let t = -1;
289
+ for (let u = 0; u < o.length; u++)
290
+ if (o[u]?.type === "item" && (t += 1, t === L))
291
+ return u;
292
+ return -1;
293
+ }, [E?.id, L, o]), q = j(null);
294
+ oe(() => {
295
+ const e = q?.current, t = typeof e == "number" ? S <= e : !1;
296
+ q.current = S;
297
+ const u = t ? S : S + 2;
298
+ if (!t) {
299
+ const V = y.getOffsetForIndex(u, "auto");
300
+ if (!V) return;
301
+ const [Q, ee] = V;
302
+ if (ee === "auto") return;
303
+ y.scrollToOffset(Q + _ + 10, { align: "start" });
304
+ return;
305
+ }
306
+ if (S <= 3) {
307
+ y.scrollToOffset(0);
308
+ return;
309
+ }
310
+ const z = y.getOffsetForIndex(S - 1, "auto");
311
+ if (!z) return;
312
+ const [i, T] = z;
313
+ T !== "auto" && y.scrollToOffset(i + _ + 10, { align: "start" });
314
+ }, [S, _, y, q]);
315
+ const J = R(() => {
316
+ const e = /* @__PURE__ */ new Map();
317
+ let t = 0;
318
+ return o.forEach((u, z) => {
319
+ u.type === "item" && (t += 1, e.set(z, t));
320
+ }), { positions: e, total: t };
321
+ }, [o]);
322
+ G(() => {
323
+ p?.(E?.id);
324
+ }, [E?.id, p]), G(() => {
325
+ if (l && g) {
326
+ H(0), C(!0);
327
+ return;
328
+ }
329
+ }, [g, l, H]), G(() => {
330
+ if (!x) {
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, x]);
337
+ const U = {
338
+ position: "relative",
339
+ maxHeight: h?.maxHeight || K,
340
+ margin: "-0.5rem",
341
+ padding: "0.5rem",
342
+ minWidth: h?.minWidth ?? "20rem",
343
+ overflowY: "auto",
344
+ ...h
345
+ };
346
+ return /* @__PURE__ */ W(
347
+ Z,
348
+ {
349
+ ref: b,
350
+ style: U,
351
+ variant: v,
352
+ color: c,
353
+ expanded: k,
354
+ id: F,
355
+ role: l ? "listbox" : void 0,
356
+ children: [
357
+ s && /* @__PURE__ */ n(
358
+ de,
359
+ {
360
+ ...s,
361
+ combobox: l,
362
+ listId: F,
363
+ "aria-activedescendant": l && Y ? E?.id : void 0,
364
+ onNavigate: l ? () => C(!0) : void 0,
365
+ onChange: (e) => {
366
+ C(!1), s.onChange?.(e);
367
+ },
368
+ onFocus: (e) => {
369
+ C(!1), s.onFocus?.(e);
370
+ },
371
+ onInput: (e) => {
372
+ C(!1), s.onInput?.(e);
373
+ },
374
+ onKeyDown: (e) => {
375
+ const t = e.key === "ArrowUp" || e.key === "ArrowDown", u = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete";
376
+ l && !t && u && C(!1), s.onKeyDown?.(e);
377
+ }
378
+ }
379
+ ),
380
+ /* @__PURE__ */ n(
381
+ ce,
382
+ {
383
+ ref: A,
384
+ style: {
385
+ position: "relative",
386
+ height: `${y.getTotalSize()}px`,
387
+ width: "100%"
388
+ },
389
+ children: /* @__PURE__ */ n(Z, { style: { width: "100%", minWidth: "100%" }, children: y.getVirtualItems().map((e) => {
390
+ const t = o[e.index];
391
+ if (!t) return null;
392
+ const u = {
393
+ position: "absolute",
394
+ top: 0,
395
+ left: 0,
396
+ width: "100%",
397
+ transform: `translateY(${e.start}px)`
398
+ }, z = {
399
+ style: u,
400
+ index: e.index,
401
+ "data-index": e.index,
402
+ ref: y.measureElement
403
+ };
404
+ switch (t.type) {
405
+ case "divider":
406
+ return /* @__PURE__ */ n(
407
+ le,
408
+ {
409
+ ...z,
410
+ style: { ...u, padding: "0.25rem 0" }
411
+ },
412
+ e.key
413
+ );
414
+ case "header":
415
+ return /* @__PURE__ */ n(ue, { ...z, title: t.title || "", level: 1 }, e.key);
416
+ default: {
417
+ const i = t.itemProps?.role === "checkbox" || t.itemProps?.role === "radio", T = l && !i ? "option" : t.itemProps?.role;
418
+ return /* @__PURE__ */ n(
419
+ ae,
420
+ {
421
+ ...z,
422
+ role: l || i ? "presentation" : "menuitem",
423
+ children: /* @__PURE__ */ n(
424
+ se,
425
+ {
426
+ ...t.itemProps || {},
427
+ size: t.itemProps?.size || m,
428
+ color: t.itemProps?.color || c,
429
+ variant: t.itemProps?.variant || v,
430
+ active: t.active,
431
+ role: T,
432
+ selected: l && !i ? t.active : t.itemProps?.selected,
433
+ "aria-posinset": l ? J.positions.get(e.index) : void 0,
434
+ "aria-setsize": l ? J.total : void 0,
435
+ tabIndex: t.itemProps?.disabled || D ? -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: A = [],
453
+ groups: _ = {},
454
+ variant: f = "default",
455
+ size: s,
456
+ level: M = 0,
457
+ maxLevels: B = 3,
458
+ virtualized: m = !1,
459
+ keyboardEvents: c = !1,
460
+ scrollRefStyles: v = {},
461
+ onActiveItemIdChange: D,
462
+ a11yMode: h = "menu",
463
+ open: r,
464
+ scrollToTopOnOpen: k,
465
+ autoFocusList: w,
466
+ id: a
467
+ }) => {
468
+ const x = ke({ ...b, items: A, groups: _ }), P = I ? x.search : b, g = I && x.hasQuery && x.resultCount === 0, p = I ? x.items : A, l = I ? { ..._, ...x.groups } : _, F = h !== "combobox";
469
+ return m ? /* @__PURE__ */ n(
470
+ we,
471
+ {
472
+ id: a,
473
+ search: P,
474
+ announceNoResults: g,
475
+ items: p,
476
+ groups: l,
477
+ variant: f,
478
+ size: s,
479
+ level: M,
480
+ maxLevels: B,
481
+ keyboardEvents: c,
482
+ scrollRefStyles: v,
483
+ onActiveItemIdChange: D,
484
+ a11yMode: h,
485
+ open: r,
486
+ scrollToTopOnOpen: k,
487
+ autoActivateFirstItem: F,
488
+ autoFocusList: w
489
+ }
490
+ ) : /* @__PURE__ */ n(
491
+ fe,
492
+ {
493
+ id: a,
494
+ search: P,
495
+ announceNoResults: g,
496
+ items: p,
497
+ groups: l,
498
+ variant: f,
499
+ size: s,
500
+ level: M,
501
+ maxLevels: B,
502
+ keyboardEvents: c,
503
+ scrollRefStyles: v,
504
+ onActiveItemIdChange: D,
505
+ a11yMode: h,
506
+ open: r,
507
+ scrollToTopOnOpen: k,
508
+ autoActivateFirstItem: F,
509
+ autoFocusList: w
510
+ }
511
+ );
512
+ }, Ae = "_fieldContainer_1ekv9_1", De = "_field_1ekv9_1", Be = "_inputContainer_1ekv9_9", Fe = "_icon_1ekv9_15", Ne = "_input_1ekv9_9", Se = "_clear_1ekv9_58", Pe = "_clearButton_1ekv9_70", ze = "_autocomplete_1ekv9_99", $ = {
513
+ fieldContainer: Ae,
514
+ field: De,
515
+ inputContainer: Be,
516
+ icon: Fe,
517
+ input: Ne,
518
+ clear: Se,
519
+ clearButton: Pe,
520
+ autocomplete: ze
521
+ }, re = ({
522
+ className: I,
523
+ collapsible: b,
524
+ size: A,
525
+ color: _ = "neutral",
526
+ label: f,
527
+ value: s,
528
+ onClear: M,
529
+ clearButtonAltText: B = "Clear search",
530
+ menu: m,
531
+ minLength: c,
532
+ ...v
533
+ }) => {
534
+ const D = ne(), [h, r] = X(!1), k = v.id || `search-field-${D}`, w = `${k}-listbox`, [a, x] = X(void 0), P = "searchfield-clear-button-" + ne(), g = R(() => !s || typeof c == "number" && typeof s == "string" && s.length < c ? !1 : h, [h, c, s]), p = R(() => (m?.items ?? []).map((d) => ({
535
+ ...d,
536
+ onClick: () => {
537
+ d.onClick?.(), r(!1);
538
+ }
539
+ })), [m]), l = (d) => {
540
+ if (d.key === "Enter" && g) {
541
+ m?.items?.[0]?.onClick?.(), r(!1);
542
+ return;
543
+ }
544
+ if (d.key === "Escape" && g) {
545
+ d.preventDefault(), d.stopPropagation(), r(!1), m?.onClose(), document.getElementById(k)?.focus();
546
+ return;
547
+ }
548
+ v.onKeyDown?.(d), r(!0);
549
+ }, F = () => {
550
+ r(!0);
551
+ }, O = (d) => {
552
+ if (!h) return;
553
+ const N = d.relatedTarget;
554
+ N && d.currentTarget.contains(N) || r(!1);
555
+ }, Y = (d) => {
556
+ d.preventDefault();
557
+ }, C = (d) => {
558
+ d.relatedTarget?.id === P && x(void 0), v.onBlur?.(d);
559
+ };
560
+ return /* @__PURE__ */ W("div", { className: $.fieldContainer, children: [
561
+ /* @__PURE__ */ n(
562
+ ve,
563
+ {
564
+ size: A,
565
+ color: _,
566
+ label: f,
567
+ className: pe($.field, I),
568
+ onBlurCapture: O,
569
+ children: /* @__PURE__ */ W("div", { className: $.inputContainer, children: [
570
+ /* @__PURE__ */ n(
571
+ ye,
572
+ {
573
+ ...v,
574
+ id: k,
575
+ type: "search",
576
+ value: s,
577
+ className: $.input,
578
+ "data-collapsible": b,
579
+ autoCapitalize: "off",
580
+ autoComplete: "off",
581
+ minLength: c,
582
+ onKeyDown: l,
583
+ onBlur: C,
584
+ ...m && {
585
+ role: "combobox",
586
+ "aria-autocomplete": "list",
587
+ "aria-expanded": !!g,
588
+ "aria-haspopup": "listbox",
589
+ "aria-controls": w,
590
+ "aria-activedescendant": g ? a : void 0,
591
+ onFocus: F
592
+ }
593
+ }
594
+ ),
595
+ /* @__PURE__ */ n(he, { svgElement: ge, className: $.icon }),
596
+ M && !!s && /* @__PURE__ */ n("span", { className: $.clear, children: /* @__PURE__ */ n(
597
+ xe,
598
+ {
599
+ id: P,
600
+ "data-testid": "clear-button",
601
+ size: "xs",
602
+ rounded: !0,
603
+ icon: !0,
604
+ variant: "tinted",
605
+ className: $.clearButton,
606
+ onClick: () => {
607
+ M?.(), document.getElementById(k)?.focus();
608
+ },
609
+ "aria-label": B,
610
+ "data-action": "clear-input",
611
+ children: /* @__PURE__ */ n(Ie, {})
612
+ }
613
+ ) })
614
+ ] })
615
+ }
616
+ ),
617
+ m && g && /* @__PURE__ */ n("div", { className: $.autocomplete, "aria-hidden": !g, onMouseDown: Y, children: /* @__PURE__ */ n(
618
+ Me,
619
+ {
620
+ ...m,
621
+ id: w,
622
+ items: p,
623
+ groups: m?.groups,
624
+ keyboardEvents: !0,
625
+ a11yMode: "combobox",
626
+ open: g,
627
+ autoFocusList: !1,
628
+ onActiveItemIdChange: x
629
+ }
630
+ ) })
631
+ ] });
632
+ };
633
+ export {
634
+ Me as M,
635
+ re as S,
636
+ we as V,
637
+ fe as a,
638
+ de as b
639
+ };
@@ -1 +1 @@
1
- ._avatar_bmli3_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_bmli3_1[data-shape=circle]{border-radius:50%}._avatar_bmli3_1[data-shape=square]{border-radius:5%}._avatar_bmli3_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_bmli3_20{display:block;font-size:1em;width:1em;height:1em}._shape_bmli3_20[data-variant=outline]{border:1px solid}._label_bmli3_31{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._icon_bmli3_41{width:100%;height:100%;display:flex;justify-content:center;align-items:center}._svg_bmli3_49{width:75%;height:75%}._image_bmli3_54{display:block;width:100%;height:100%}._deletedIcon_bmli3_60{position:absolute;inset:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_bmli3_1[data-size=lg] ._label_bmli3_31{font-size:1.58rem}._avatar_bmli3_1[data-size=md] ._label_bmli3_31{font-size:1.15rem}._avatar_bmli3_1[data-size=sm] ._label_bmli3_31{font-size:.85rem}}
1
+ ._avatar_caglx_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_caglx_1[data-shape=circle]{border-radius:50%}._avatar_caglx_1[data-shape=square]{border-radius:5%}._avatar_caglx_1{outline:1px solid #ffffff;box-sizing:border-box}._avatar_caglx_1[data-image=true]{outline:none}._shape_caglx_24{display:block;font-size:1em;width:1em;height:1em}._shape_caglx_24[data-variant=outline]{border:1px solid}._label_caglx_35{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._icon_caglx_45{width:100%;height:100%;display:flex;justify-content:center;align-items:center}._svg_caglx_53{width:75%;height:75%}._image_caglx_58{display:block;width:100%;height:100%}._deletedIcon_caglx_64{position:absolute;inset:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_caglx_1[data-size=lg] ._label_caglx_35{font-size:1.58rem}._avatar_caglx_1[data-size=md] ._label_caglx_35{font-size:1.15rem}._avatar_caglx_1[data-size=sm] ._label_caglx_35{font-size:.85rem}}
@@ -1 +1 @@
1
- ._search_18jfe_1{position:sticky;top:0;z-index:1;background-color:var(--ds-color-surface-default)}._searchInput_18jfe_8{width:100%}._search_18jfe_1 input:focus-visible{outline-offset:0;outline-width:2px}._field_lyp0p_1{position:relative}._container_lyp0p_5{position:relative;display:inline-flex;width:100%}._icon_lyp0p_11{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_lyp0p_11>*{pointer-events:none}._icon_lyp0p_11>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_lyp0p_35{padding-left:2.25em;padding-right:2.25em}._input_lyp0p_35[type=search]::-webkit-search-decoration,._input_lyp0p_35[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_lyp0p_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_lyp0p_54{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_lyp0p_66[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_lyp0p_66:focus-visible{outline-offset:0;outline-width:2px}._input_lyp0p_35[data-collapsible=true]{transition:width .5s ease-in-out}._input_lyp0p_35[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_lyp0p_35[data-collapsible=true]:focus,._input_lyp0p_35[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_lyp0p_95{--var-min-width: 100%;--var-max-width: 20rem;--var-width: 20rem;min-width:var(--var-min-width);max-width:var(--var-max-width);width:var(--var-width);position:absolute;top:100%;left:0;z-index:1;border-radius:.375rem;margin-top:.5rem;margin-bottom:.5rem;background-color:var(--ds-color-background-default);color:var(--ds-color-text-default);box-shadow:var(--ds-shadow-sm);display:flex;flex-direction:column;row-gap:.5rem;padding:.5rem;white-space:unset}@media(max-width:1023px){._autocomplete_lyp0p_95{--var-max-width: 100%;--var-width: 100%}}._autocomplete_lyp0p_95[aria-hidden=true]{display:none}
1
+ ._search_18jfe_1{position:sticky;top:0;z-index:1;background-color:var(--ds-color-surface-default)}._searchInput_18jfe_8{width:100%}._search_18jfe_1 input:focus-visible{outline-offset:0;outline-width:2px}._fieldContainer_1ekv9_1,._field_1ekv9_1{position:relative}._inputContainer_1ekv9_9{position:relative;display:inline-flex;width:100%}._icon_1ekv9_15{position:absolute;top:0;bottom:0;left:0;width:2.5em;height:100%;color:var(--ds-color-text-subtle);display:flex;justify-content:center;align-items:center;pointer-events:none}._icon_1ekv9_15>*{pointer-events:none}._icon_1ekv9_15>svg{font-size:1.25em;width:1.25em;height:1.25em}._input_1ekv9_9{padding-left:2.25em;padding-right:2.25em}._input_1ekv9_9[type=search]::-webkit-search-decoration,._input_1ekv9_9[type=search]::-webkit-search-cancel-button{appearance:none}@media(max-width:1023px){._field_1ekv9_1[data-size=xs] input[type=search]{font-size:1rem;padding-left:2em;padding-right:2em}}._clear_1ekv9_58{position:absolute;top:0;right:0;bottom:0;width:2.5em;height:100%;display:flex;justify-content:center;align-items:center}._clearButton_1ekv9_70[data-size=xs]{--dsc-button-size: 2.5em;--dsc-button-padding: 0;font-size:.75em;border:none}._clearButton_1ekv9_70:focus-visible{outline-offset:0;outline-width:2px}._input_1ekv9_9[data-collapsible=true]{transition:width .5s ease-in-out}._input_1ekv9_9[data-collapsible=true]:placeholder-shown{background-color:transparent;width:8rem}._input_1ekv9_9[data-collapsible=true]:focus,._input_1ekv9_9[data-collapsible=true]:not(:placeholder-shown){width:auto;background-color:var(--ds-color-background-default)}._autocomplete_1ekv9_99{--var-min-width: 100%;--var-max-width: 20rem;--var-width: 20rem;min-width:var(--var-min-width);max-width:var(--var-max-width);width:var(--var-width);position:absolute;top:100%;left:0;z-index:1;border-radius:.375rem;margin-top:.5rem;margin-bottom:.5rem;background-color:var(--ds-color-background-default);color:var(--ds-color-text-default);box-shadow:var(--ds-shadow-sm);display:flex;flex-direction:column;row-gap:.5rem;padding:.5rem;white-space:unset}@media(max-width:1023px){._autocomplete_1ekv9_99{--var-max-width: 100%;--var-width: 100%}}._autocomplete_1ekv9_99[aria-hidden=true]{display:none}
@@ -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-CN2mo8ck.js";
7
+ import { M as S } from "../../SearchField-BZo3_1VH.js";
8
8
  import "../Snackbar/useSnackbar.js";
9
9
  const F = (n) => `${n} hits`, E = ({
10
10
  items: n = [],