prometeo-design-system 2.5.3 → 2.5.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 (58) hide show
  1. package/dist/Avatar.es.js +1 -1
  2. package/dist/{Button-DsbEyjth.js → Button-Bc0LYLfg.js} +1 -1
  3. package/dist/Button.es.js +1 -1
  4. package/dist/{CardProfile-DV3gwvqE.js → CardProfile-DA-HDUpi.js} +1 -1
  5. package/dist/CardProfile.es.js +1 -1
  6. package/dist/CheckBox.es.js +1 -1
  7. package/dist/CheckboxFormik.es.js +1 -1
  8. package/dist/DatePicker.es.js +3 -3
  9. package/dist/DialogModal.es.js +1 -1
  10. package/dist/DrawerDesktop.es.js +2 -2
  11. package/dist/DrawerMobile.es.js +1 -3
  12. package/dist/DropZone.es.js +1 -1
  13. package/dist/Header.es.js +1 -1
  14. package/dist/Icons.es.js +1 -1
  15. package/dist/Image.es.js +1 -1
  16. package/dist/{ImageGallery-DnoRTpCr.js → ImageGallery-BeADef_g.js} +2 -2
  17. package/dist/ImageGallery.es.js +1 -1
  18. package/dist/{Input-PNwH7rb6.js → Input-DwIAUqcc.js} +2 -2
  19. package/dist/Input.es.js +1 -1
  20. package/dist/InputFormik.es.js +1 -1
  21. package/dist/InputMultiple.es.js +1 -1
  22. package/dist/LayoutGeneric-B6E-yOYJ.js +26 -0
  23. package/dist/LayoutGeneric.es.js +1 -1
  24. package/dist/Logo.es.js +1 -1
  25. package/dist/Menu.es.js +1 -1
  26. package/dist/OtpInput.es.js +1 -1
  27. package/dist/Pagination.es.js +1 -1
  28. package/dist/ProfilePictureUpload.es.js +1 -1
  29. package/dist/ProgressBar.es.js +1 -1
  30. package/dist/SegmentedButton.es.js +1 -1
  31. package/dist/Select-C1MxM6yq.js +813 -0
  32. package/dist/Select.es.js +1 -1
  33. package/dist/SelectFormik.es.js +55 -29
  34. package/dist/SelectFormikLegacy.es.js +1 -1
  35. package/dist/SelectSearch.es.js +167 -132
  36. package/dist/Skeleton.es.js +1 -1
  37. package/dist/Spinner.es.js +1 -1
  38. package/dist/Steps.es.js +1 -1
  39. package/dist/SwipeContainer.es.js +1 -1
  40. package/dist/Switch.es.js +1 -1
  41. package/dist/TabLinks.es.js +1 -1
  42. package/dist/Table.es.js +1 -1
  43. package/dist/TextArea.es.js +1 -1
  44. package/dist/Toast.es.js +2 -2
  45. package/dist/ToastProvider.es.js +1 -1
  46. package/dist/Tooltip.es.js +1 -1
  47. package/dist/components/Autocomplete/useAutocomplete.d.ts +14 -6
  48. package/dist/components/Select/Select.d.ts +19 -7
  49. package/dist/components/SelectFormik/SelectFormik.d.ts +5 -3
  50. package/dist/components/SelectSearch/SelectSearch.d.ts +12 -4
  51. package/dist/components/Sidebar/context/SidebarContext.d.ts +2 -0
  52. package/dist/components/TabSwitch/TabSwitch.d.ts +1 -1
  53. package/dist/index.d.ts +1 -1
  54. package/dist/{jsx-runtime-DKDX3adD.js → jsx-runtime-ByW6EXIE.js} +96 -94
  55. package/dist/prometeo-design-system.es.js +141 -134
  56. package/package.json +1 -1
  57. package/dist/LayoutGeneric-p4Pll4Cm.js +0 -24
  58. package/dist/Select-C-aLaiJu.js +0 -804
@@ -1,804 +0,0 @@
1
- import { j as s } from "./jsx-runtime-DKDX3adD.js";
2
- import { Icons as J } from "./Icons.es.js";
3
- import { c as i } from "./cn-B6yFEsav.js";
4
- import je, { memo as W, useState as fe, useRef as G, useMemo as Z, useCallback as V, useEffect as ee, useImperativeHandle as We } from "react";
5
- import Be from "./Spinner.es.js";
6
- import { createPortal as Ke } from "react-dom";
7
- import { u as Ue } from "./useDragScroll-CHN9OMwn.js";
8
- import { u as qe, I as Fe } from "./Input-PNwH7rb6.js";
9
- import Ge from "./CheckBox.es.js";
10
- import { Skeleton as Ce } from "./Skeleton.es.js";
11
- const He = (r) => {
12
- const { variant: e, className: d } = r, c = {
13
- default: "text-neutral-medium-default pt-[1px]",
14
- error: "text-error-medium-default pt-[1px]",
15
- success: "text-success-medium-default"
16
- }, o = {
17
- default: /* @__PURE__ */ s.jsx(J.Info, { size: 16, className: "text-neutral-medium-default " }),
18
- error: /* @__PURE__ */ s.jsx(J.Error, { size: 16, className: "text-error-medium-default" }),
19
- success: /* @__PURE__ */ s.jsx(J.Check, { size: 16, className: "text-success-medium-default" })
20
- };
21
- return /* @__PURE__ */ s.jsx("div", { ref: r.ref, className: i("pl-3", d), children: typeof r.children == "string" ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-0.5 items-start", children: [
22
- o[e],
23
- /* @__PURE__ */ s.jsx("p", { className: i(" prometeo-fonts-body-small", c[e]), children: r.children })
24
- ] }) : r.children });
25
- };
26
- He.displayName = "HelperText";
27
- const Je = W(He), Qe = {
28
- default: {
29
- container: "text-neutral-default-default border-neutral-default-default ",
30
- icon: ""
31
- },
32
- error: {
33
- container: "",
34
- icon: ""
35
- },
36
- success: {
37
- container: "",
38
- icon: ""
39
- }
40
- }, ke = {
41
- icon: " text-neutral-default-disabled",
42
- container: " border-neutral-strong-default text-neutral-default-disabled"
43
- }, Ie = ({ id: r, label: e, onRemove: d, className: c, disabled: o, variant: l = "default", tabIndex: y }) => /* @__PURE__ */ s.jsxs(
44
- "div",
45
- {
46
- tabIndex: y,
47
- className: i(
48
- "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border h-[30px]",
49
- Qe[l].container,
50
- o && ke.container
51
- ),
52
- children: [
53
- /* @__PURE__ */ s.jsx("span", { className: "truncate w-max ", children: e }),
54
- d && /* @__PURE__ */ s.jsx(
55
- "button",
56
- {
57
- onMouseDown: (p) => {
58
- o || (p.stopPropagation(), p.preventDefault(), d?.(r));
59
- },
60
- className: i(
61
- "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
62
- o && "cursor-default hover:scale-100",
63
- c
64
- ),
65
- type: "button",
66
- tabIndex: y,
67
- children: /* @__PURE__ */ s.jsx(J.Close, { size: 18, className: i(o && ke.icon) })
68
- }
69
- )
70
- ]
71
- }
72
- );
73
- Ie.displayName = "Chip";
74
- const Xe = W(Ie);
75
- function P(r, e) {
76
- if (typeof e == "function")
77
- return e(r);
78
- const d = e?.split(".");
79
- let c = r;
80
- for (const o of d)
81
- if (c && typeof c == "object" && o in c)
82
- c = c[o];
83
- else
84
- return;
85
- return c;
86
- }
87
- const Ee = (r, e) => {
88
- if (!e) return !0;
89
- const d = 0.1, c = String(r).toLowerCase(), o = String(e).toLowerCase().trim();
90
- if (c.includes(o)) return !0;
91
- const l = o.split(/\s+/).filter(Boolean), y = l.filter((m) => /^\d+$/.test(m));
92
- if (l.length > 1 || y.length > 0) {
93
- for (const m of y)
94
- if (!new RegExp(`(^|\\D)${m}(\\D|$)`).test(c)) return !1;
95
- for (const m of l)
96
- if (!/^\d+$/.test(m) && !c.includes(m))
97
- return !1;
98
- return !0;
99
- }
100
- if (o.length > c.length) return !1;
101
- const p = Math.floor(o.length * d);
102
- if (p <= 0) return !1;
103
- const k = (m, A) => {
104
- const v = m.length, N = A.length;
105
- if (v === 0) return N;
106
- if (N === 0) return v;
107
- const S = new Array(N + 1);
108
- for (let x = 0; x <= N; x++) S[x] = x;
109
- for (let x = 1; x <= v; x++) {
110
- let E = x - 1;
111
- S[0] = x;
112
- for (let f = 1; f <= N; f++) {
113
- const _ = S[f], B = m.charCodeAt(x - 1) === A.charCodeAt(f - 1) ? 0 : 1, z = S[f] + 1, C = S[f - 1] + 1, T = E + B;
114
- S[f] = z < C ? z < T ? z : T : C < T ? C : T, E = _;
115
- }
116
- }
117
- return S[N];
118
- };
119
- for (let m = 0; m <= c.length - o.length; m++) {
120
- const A = c.slice(m, m + o.length);
121
- if (k(A, o) <= p) return !0;
122
- }
123
- return !1;
124
- }, ve = {
125
- default: {
126
- container: "",
127
- input: i(
128
- "border-neutral-default-default text-neutral-default-default",
129
- "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
130
- "hover:border-primary-default-default"
131
- ),
132
- label: i(
133
- "text-neutral-medium-default",
134
- "peer-focus:text-primary-default-default"
135
- ),
136
- icon: i(
137
- "text-neutral-medium-default",
138
- "peer-focus:text-primary-default-default"
139
- )
140
- },
141
- error: {
142
- container: "",
143
- input: i(
144
- "border-error-default-default text-neutral-default-default hover:border-error-default-hover",
145
- "focus:border-error-default focus:border-2",
146
- "focus:ring-0 focus:ring-error-default/20"
147
- ),
148
- label: i(
149
- "text-error-light",
150
- "peer-focus:text-error-light"
151
- ),
152
- icon: i(
153
- "text-error-medium-default",
154
- "peer-focus:text-error-light"
155
- )
156
- },
157
- success: {
158
- container: "",
159
- input: i(
160
- "border-success-default-default text-neutral-default-default",
161
- "focus:border-success-default focus:border-2",
162
- "focus:ring-0 focus:ring-success-default/20"
163
- ),
164
- label: i(
165
- "text-success",
166
- "peer-focus:text-success-light"
167
- ),
168
- icon: i(
169
- "text-success-medium-default",
170
- "peer-focus:text-success-light"
171
- )
172
- }
173
- }, De = {
174
- input: i(
175
- "border-neutral-strong-default text-neutral-default-default",
176
- "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
177
- "hover:border-primary-default-default"
178
- ),
179
- label: i(
180
- "text-neutral-medium-disabled",
181
- "peer-focus:text-primary-default-default"
182
- ),
183
- icon: i(
184
- "text-neutral-medium-disabled",
185
- "peer-focus:text-primary-default-default"
186
- )
187
- }, Ye = ({
188
- id: r,
189
- name: e,
190
- value: d,
191
- label: c,
192
- height: o,
193
- options: l,
194
- controls: y,
195
- className: p,
196
- placeholder: k,
197
- optionValue: m,
198
- optionLabel: A,
199
- renderOption: v,
200
- renderSelection: N,
201
- buttonClassName: S,
202
- dropdownClassName: x,
203
- containerClassName: E,
204
- dropdownOptions: f,
205
- helperComponent: _,
206
- errorComponent: B,
207
- onRemoveOption: z,
208
- onOptionClick: C,
209
- onChange: T,
210
- onClose: te,
211
- onClear: K,
212
- disabled: j = !1,
213
- overflow: ae = "wrap",
214
- variant: $ = "default",
215
- multiple: H = !1,
216
- isLoading: de = !1,
217
- attachToParent: Ne = !1,
218
- displayMode: re = "compact",
219
- labelVariant: U = "default",
220
- disableOpenOnFocus: q = !1,
221
- emptyMessage: Q = "No hay opciones disponibles"
222
- }) => {
223
- const [b, D] = fe(!1), [me, he] = fe([]), [oe, ie] = fe(""), ne = G(null), X = G(null), Y = G(null), ce = G(null), se = G(() => {
224
- }), le = G(null), n = G(/* @__PURE__ */ new Set()), { ref: a } = qe(), { bind: u, ref: g } = Ue({
225
- axis: "x",
226
- cursor: { idle: "default", dragging: "grabbing" }
227
- }), I = d && d.length > 0, M = {}, R = Z(() => U === "static" && k ? k : "", [U, k]), ge = Z(
228
- () => f?.controledSearchValue || oe,
229
- [f?.controledSearchValue, oe]
230
- ), w = () => {
231
- const t = {
232
- static: {
233
- active: "relative prometeo-fonts-label-large",
234
- default: "relative prometeo-fonts-label-large"
235
- },
236
- default: {
237
- active: "absolute top-0 -translate-y-1/2 left-3 px-1 prometeo-fonts-body-small",
238
- default: "absolute top-1/2 -translate-y-1/2 "
239
- }
240
- }, h = b || I ? "active" : "default";
241
- return t[U][h];
242
- }, O = (t) => ({
243
- id: P(t, m),
244
- value: P(t, m),
245
- label: P(t, A)
246
- }), ue = Z(
247
- () => l.map(O),
248
- [l]
249
- ), pe = Z(
250
- () => {
251
- const t = [];
252
- return d?.forEach((h) => {
253
- const L = l?.find((F) => P(F, m) === h);
254
- L && t.push(L);
255
- }), t;
256
- },
257
- [d, m, l]
258
- ), xe = Z(
259
- () => pe.map(O),
260
- [pe]
261
- ), ze = Z(
262
- () => new Set(xe.map((t) => t.id)),
263
- [xe]
264
- ), Te = V(() => {
265
- D((t) => !t);
266
- }, []);
267
- se.current = (t) => {
268
- let h;
269
- if (!H)
270
- h = [t];
271
- else {
272
- const L = d || [], F = [], Me = L.includes(t.value);
273
- L.forEach((ye) => {
274
- const Se = ue.find((Re) => Re.value === ye);
275
- Se && F.push(Se);
276
- }), h = Me ? F.filter((ye) => ye.value !== t.value) : [...F, t];
277
- }
278
- T?.(h, e);
279
- };
280
- const Ae = V((t) => {
281
- C?.(t, e), se.current?.(t), H || (D(!1), te?.());
282
- }, [H, C, te, e]), $e = (t) => {
283
- t.preventDefault(), t.stopPropagation(), t.target.blur(), K?.(), T?.([], e);
284
- }, be = V((t) => {
285
- H || T?.([], e);
286
- const h = l.find((F) => P(F, m) === t);
287
- if (!h) return;
288
- const L = O(h);
289
- C?.(L, e), se.current?.(L), z?.(h);
290
- }, [C, z, l, e, H, T]), Oe = V((t) => {
291
- be(t);
292
- }, [be]);
293
- ee(() => {
294
- if (!b) return;
295
- const t = (h) => {
296
- const L = h.target;
297
- if (h.type === "mousedown") {
298
- if (ne.current?.contains(L) || X.current?.contains(L)) return;
299
- D(!1);
300
- }
301
- if (h.type === "scroll") {
302
- if (X.current?.contains(L)) return;
303
- D(!1);
304
- }
305
- h.type === "resize" && D(!1);
306
- };
307
- return document.addEventListener("mousedown", t), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t, !0), () => {
308
- document.removeEventListener("mousedown", t), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t, !0);
309
- };
310
- }, [b]), ee(() => {
311
- n.current.forEach((t) => {
312
- try {
313
- t(b);
314
- } catch {
315
- }
316
- });
317
- }, [b]), We(y, () => ({
318
- open: () => {
319
- !b && D(!0);
320
- },
321
- close: () => {
322
- b && D(!1);
323
- },
324
- toggle: () => D((t) => !t),
325
- subscribeOpenChange: (t) => (n.current.add(t), () => {
326
- n.current.delete(t);
327
- }),
328
- searchInputRef: Y
329
- }), [b]);
330
- const Pe = (t) => {
331
- t.preventDefault(), t.stopPropagation(), t.target.matches(":focus-visible") && !q && !b && (D(!0), setTimeout(() => {
332
- Y.current?.focus();
333
- }, 10));
334
- }, _e = (t) => {
335
- t.key === "Tab" && b && D(!1), (t.keyCode === 32 || t.key === "ArrowDown") && (D(!0), setTimeout(() => {
336
- Y.current?.focus();
337
- }, 10));
338
- };
339
- return /* @__PURE__ */ s.jsxs(
340
- "div",
341
- {
342
- className: i(
343
- "relative bg-inherit select-none w-full",
344
- p,
345
- U === "static" && "mt-2"
346
- ),
347
- ref: ne,
348
- draggable: !1,
349
- style: M,
350
- children: [
351
- /* @__PURE__ */ s.jsxs("div", { className: i("relative bg-inherit ", E), children: [
352
- /* @__PURE__ */ s.jsx(
353
- "label",
354
- {
355
- htmlFor: r,
356
- ref: a,
357
- className: i(
358
- "left-3 pointer-events-none bg-inherit z-10",
359
- U === "default" && "transition-all duration-200 ease-in-out",
360
- w(),
361
- I || b ? ve[$].label : "text-neutral-medium-default",
362
- j && De.label
363
- ),
364
- children: c
365
- }
366
- ),
367
- /* @__PURE__ */ s.jsxs(
368
- "div",
369
- {
370
- id: r,
371
- tabIndex: 0,
372
- role: "button",
373
- ref: ce,
374
- onFocus: Pe,
375
- onKeyDown: _e,
376
- onClick: (t) => {
377
- t.preventDefault(), t.stopPropagation(), Te();
378
- },
379
- className: i(
380
- "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
381
- "flex items-center justify-start bg-inherit ",
382
- "focus:outline-none",
383
- re === "chips" && "mt-1.5",
384
- re === "chips" && H && I ? "min-h-14 py-3 " : !o && "h-14 min-h-14",
385
- ve[$].input,
386
- j && De.input,
387
- S
388
- ),
389
- children: [
390
- /* @__PURE__ */ s.jsx(
391
- "div",
392
- {
393
- className: i("flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none "),
394
- ref: g,
395
- onPointerUp: u.onPointerUp,
396
- onPointerDown: u.onPointerDown,
397
- onPointerMove: u.onPointerMove,
398
- onPointerLeave: u.onPointerLeave,
399
- onPointerCancel: u.onPointerCancel,
400
- onClickCapture: u.onClickCapture,
401
- children: N ? je.createElement(
402
- W(
403
- N,
404
- (t, h) => t.disabled === h.disabled && t.multiple === h.multiple
405
- ),
406
- {
407
- disabled: j,
408
- multiple: H,
409
- placeholder: k,
410
- selectedOptions: pe,
411
- onRemoveOption: Oe
412
- }
413
- ) : /* @__PURE__ */ s.jsx(
414
- Le,
415
- {
416
- displayMode: re,
417
- selectedOptions: xe,
418
- placeholder: R,
419
- onRemoveOption: be,
420
- multiple: H,
421
- className: i(ae === "scroll" ? "flex-nowrap" : "flex-wrap"),
422
- disabled: j
423
- }
424
- )
425
- }
426
- ),
427
- /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
428
- de && /* @__PURE__ */ s.jsx(Be, { size: "small", variant: "clip", className: " translate-y-1", speedMultiplier: 0.7 }),
429
- I && K && /* @__PURE__ */ s.jsx(
430
- "button",
431
- {
432
- onMouseDown: (t) => {
433
- t.preventDefault(), t.stopPropagation(), $e(t);
434
- },
435
- type: "button",
436
- tabIndex: -1,
437
- children: /* @__PURE__ */ s.jsx(J.Cancel, { size: 20, className: i(" cursor-pointer transition-all", ve[$].icon) })
438
- }
439
- ),
440
- /* @__PURE__ */ s.jsx(
441
- J.ChevronDown,
442
- {
443
- size: 20,
444
- className: i(
445
- "transition-transform text-neutral-default-default",
446
- b ? "rotate-180" : "",
447
- j && De.icon
448
- )
449
- }
450
- )
451
- ] })
452
- ]
453
- }
454
- )
455
- ] }),
456
- b && /* @__PURE__ */ s.jsx(
457
- Ve,
458
- {
459
- isOpen: b,
460
- multiple: H,
461
- disabled: j,
462
- optionLabel: A,
463
- optionValue: m,
464
- labelVariant: U,
465
- renderOption: v,
466
- emptyMessage: Q,
467
- attachToParent: Ne,
468
- filteredOptions: me,
469
- dropdownClassName: x,
470
- setFilteredOptions: he,
471
- selectedOptionsIds: ze,
472
- options: v ? l : ue,
473
- selectRef: ne,
474
- dropdownRef: X,
475
- selectButtonRef: ce,
476
- helperComponentRef: le,
477
- onOptionClick: Ae,
478
- onCloseDropdown: () => D(!1),
479
- searchValue: ge,
480
- setSearchValue: ie,
481
- searchInputRef: Y,
482
- isLoading: f?.isLoading,
483
- onSearchClear: f?.onSearchClear,
484
- hideSearchBar: f?.hideSearchBar,
485
- dropdownHeight: f?.dropdownHeight,
486
- onSearchValueChange: f?.onSearchValueChange,
487
- inputSearchPlaceholder: f?.inputSearchPlaceholder
488
- }
489
- ),
490
- (B || _) && /* @__PURE__ */ s.jsx(
491
- Je,
492
- {
493
- ref: le,
494
- variant: $,
495
- className: "mt-1",
496
- children: B || _
497
- }
498
- )
499
- ]
500
- }
501
- );
502
- }, ut = W(Ye, (r, e) => r.value === e.value && r.options === e.options && r.isLoading === e.isLoading && r.disabled === e.disabled && r.errorComponent === e.errorComponent && r.helperComponent === e.helperComponent && r.variant === e.variant && r.label === e.label && r.id === e.id && r.name === e.name && r.placeholder === e.placeholder && r.dropdownOptions?.controledSearchValue === e.dropdownOptions?.controledSearchValue && r.dropdownOptions?.isLoading === e.dropdownOptions?.isLoading);
503
- function Ze({
504
- isOpen: r,
505
- options: e,
506
- multiple: d,
507
- disabled: c,
508
- selectRef: o,
509
- dropdownRef: l,
510
- optionLabel: y,
511
- optionValue: p,
512
- searchValue: k,
513
- labelVariant: m,
514
- emptyMessage: A,
515
- renderOption: v,
516
- onOptionClick: N,
517
- onSearchClear: S,
518
- searchInputRef: x,
519
- setSearchValue: E,
520
- dropdownHeight: f,
521
- attachToParent: _,
522
- filteredOptions: B,
523
- selectButtonRef: z,
524
- onCloseDropdown: C,
525
- dropdownClassName: T,
526
- helperComponentRef: te,
527
- selectedOptionsIds: K,
528
- setFilteredOptions: j,
529
- onSearchValueChange: ae,
530
- isLoading: $ = !1,
531
- hideSearchBar: H = !1,
532
- inputSearchPlaceholder: de = "Buscar opciones"
533
- }) {
534
- const re = m === "static" ? -20 : 7, q = V(() => f ? f.endsWith("px") ? Number(f.replace("px", "")) : f.endsWith("vh") ? window.innerHeight * Number(f.replace("vh", "")) / 100 : f.endsWith("%") ? window.innerHeight * Number(f.replace("%", "")) / 100 : 320 : 320, [f])(), [Q, b] = fe({ direction: "down", height: q }), D = (n) => {
535
- if (!l.current || !o.current) return;
536
- const a = o.current.getBoundingClientRect();
537
- switch (n || Q.direction) {
538
- case "down":
539
- l.current.style.top = `${a.top + a.height - (te?.current?.offsetHeight ? te?.current?.offsetHeight + 4 : 0)}px`;
540
- break;
541
- case "up":
542
- l.current.style.top = "auto", l.current.style.bottom = `${window.innerHeight - a.top + re}px`;
543
- break;
544
- }
545
- l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`;
546
- }, me = (n) => {
547
- l.current && (l.current.style.maxHeight = `${n}px`);
548
- }, he = () => {
549
- if (!l.current || !o.current) return Q;
550
- const n = o.current.getBoundingClientRect(), a = window.innerHeight - (window.innerHeight - n.top), u = window.innerHeight - n.bottom, g = u >= q, I = a >= q;
551
- let M = "down", R;
552
- return g ? (M = "down", R = q) : I ? (M = "up", R = q) : u > a ? (M = "down", R = u - 16) : (M = "up", R = a - 16), { direction: M, height: R };
553
- }, oe = (n) => {
554
- if (!(!l.current || !o.current)) {
555
- if (l.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !n) {
556
- l.current.style.maxHeight = "0", l.current.style.opacity = "0", l.current.style.pointerEvents = "none";
557
- return;
558
- }
559
- if (!_) {
560
- const a = he();
561
- b(a), D(a.direction), me(a.height);
562
- }
563
- l.current.style.opacity = "1", l.current.style.pointerEvents = "auto";
564
- }
565
- };
566
- ee(() => {
567
- _ || !o.current || !r || D();
568
- }, [K]), ee(() => {
569
- oe(r);
570
- }, [r]), ee(() => {
571
- e && j(e);
572
- }, [e]), ee(() => {
573
- if ($ || !k) return;
574
- const n = ie(e, k);
575
- j(n);
576
- }, [e]);
577
- const ie = (n, a) => n.filter((u) => Ee(v ? P(u, y) : u.label, a)), ne = (n) => {
578
- const a = ie(e, n);
579
- if (j(a), ae) {
580
- if (n === "") {
581
- X();
582
- return;
583
- }
584
- ae(n);
585
- return;
586
- }
587
- E && e && E(n);
588
- }, X = V(() => {
589
- if (S) {
590
- S(), j(
591
- e.filter((n) => {
592
- const a = v ? P(n, p) : n.id;
593
- return K.has(a);
594
- })
595
- );
596
- return;
597
- }
598
- E && (E(""), j(e));
599
- }, [e, K, p, S, j, E]), Y = (n) => {
600
- n.key === "ArrowDown" ? (n.preventDefault(), l.current?.querySelector("[role=listitem]")?.focus()) : (n.key === "Tab" || n.key === "Escape") && setTimeout(() => {
601
- z.current?.focus(), C();
602
- }, 10);
603
- }, ce = (n, a) => {
604
- const u = Array.from(l.current?.querySelectorAll("[role=listitem]") || []), g = u.indexOf(n.currentTarget);
605
- if (n.key === "ArrowDown") {
606
- n.preventDefault();
607
- const I = g < u.length - 1 ? g + 1 : g;
608
- u[I]?.focus();
609
- } else if (n.key === "ArrowUp")
610
- if (n.preventDefault(), g === 0)
611
- x && x.current?.focus();
612
- else {
613
- const I = g - 1;
614
- u[I]?.focus();
615
- }
616
- else if (n.key === "Enter" || n.key === " ") {
617
- if (n.preventDefault(), c) return;
618
- N(a), d || setTimeout(() => {
619
- z.current?.focus(), C();
620
- }, 10);
621
- } else n.key === "Escape" ? (n.preventDefault(), setTimeout(() => {
622
- z.current?.focus(), C();
623
- }, 10)) : n.key === "Tab" && setTimeout(() => {
624
- z.current?.focus(), C();
625
- }, 10);
626
- }, se = Array.from({ length: 5 }).map((n, a) => v ? je.createElement(
627
- W(
628
- v,
629
- (u, g) => u.isSelected === g.isSelected && u.option === g.option && u.disabled === g.disabled && u.multiple === g.multiple
630
- ),
631
- {
632
- key: `skeleton-option-${a}`,
633
- option: { id: a, label: "", value: "" },
634
- isSelected: !1,
635
- multiple: !1,
636
- onSelect: () => {
637
- },
638
- disabled: !1,
639
- isLoading: !0
640
- }
641
- ) : /* @__PURE__ */ s.jsx(
642
- we,
643
- {
644
- multiple: !1,
645
- isLoading: !0,
646
- onSelect: () => {
647
- },
648
- isSelected: !1,
649
- option: { id: a, label: "", value: "" }
650
- },
651
- `skeleton-option-${a}`
652
- )), le = /* @__PURE__ */ s.jsx(
653
- "div",
654
- {
655
- tabIndex: 0,
656
- ref: l,
657
- style: { opacity: "0" },
658
- className: i(
659
- " z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-lg shadow-lg",
660
- " overflow-hidden focus-visible:bg-neutral-default-hover ",
661
- _ ? "absolute z-50 " : "fixed z-100 top-0 left-0",
662
- Q.direction === "up" ? "h-auto" : " h-max",
663
- T
664
- ),
665
- children: /* @__PURE__ */ s.jsxs(
666
- "div",
667
- {
668
- className: i(
669
- "flex flex-col ",
670
- H ? "p-0" : "p-2 pt-0 gap-2"
671
- ),
672
- style: {
673
- height: "auto",
674
- maxHeight: Q.height
675
- },
676
- children: [
677
- !H && /* @__PURE__ */ s.jsx(
678
- Fe,
679
- {
680
- name: "",
681
- label: "",
682
- size: "small",
683
- tabIndex: 0,
684
- value: k,
685
- disabled: c,
686
- ref: x,
687
- labelVariant: "static",
688
- icon: /* @__PURE__ */ s.jsx(J.Search, {}),
689
- isFetching: $,
690
- onKeyDown: Y,
691
- onClear: X,
692
- onChange: ne,
693
- placeholder: de,
694
- className: " bg-neutral-medium-pressed"
695
- }
696
- ),
697
- /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: B.length === 0 ? $ ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: se }) : /* @__PURE__ */ s.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: k ? `No se encontraron resultados para "${k}"` : A }) : B.map((n) => {
698
- const a = v ? P(n, p) : n.id, u = K.has(a), g = (w) => v ? {
699
- id: a,
700
- label: String(P(w, y)),
701
- value: P(w, p)
702
- } : w, I = () => {
703
- N(g(n));
704
- }, M = (w) => {
705
- if (N(w), !d) {
706
- if (!E) return;
707
- E(""), j(e);
708
- }
709
- }, R = (w, O) => /* @__PURE__ */ s.jsx(
710
- "div",
711
- {
712
- tabIndex: 0,
713
- role: "listitem",
714
- onKeyDown: (ue) => ce(ue, O),
715
- className: i(
716
- "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover ",
717
- u && "bg-neutral-medium-selected"
718
- ),
719
- children: w
720
- }
721
- ), ge = v ? je.createElement(
722
- W(
723
- v,
724
- (w, O) => w.isSelected === O.isSelected && w.option === O.option && w.disabled === O.disabled && w.multiple === O.multiple
725
- ),
726
- {
727
- key: a,
728
- option: n,
729
- isSelected: u,
730
- multiple: d,
731
- onSelect: I,
732
- disabled: c,
733
- isLoading: $
734
- }
735
- ) : /* @__PURE__ */ s.jsx(
736
- we,
737
- {
738
- disabled: c,
739
- multiple: d,
740
- isLoading: $,
741
- isSelected: u,
742
- onSelect: M,
743
- option: n
744
- },
745
- a
746
- );
747
- return R(ge, g(n));
748
- }) })
749
- ]
750
- }
751
- )
752
- }
753
- );
754
- return _ ? le : Ke(le, document.body);
755
- }
756
- const Ve = W(Ze, (r, e) => r.options === e.options && r.selectedOptionsIds === e.selectedOptionsIds && r.multiple === e.multiple && r.disabled === e.disabled && r.emptyMessage === e.emptyMessage && r.renderOption === e.renderOption && r.isOpen === e.isOpen && r.attachToParent === e.attachToParent && r.optionValue === e.optionValue && r.optionLabel === e.optionLabel && r.filteredOptions === e.filteredOptions && r.isLoading === e.isLoading), we = W(({ option: r, isSelected: e, onSelect: d, multiple: c, disabled: o, isLoading: l }) => l ? /* @__PURE__ */ s.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
757
- /* @__PURE__ */ s.jsx(Ce, { className: "size-6 aspect-square" }),
758
- /* @__PURE__ */ s.jsx(Ce, { className: "flex-1 h-6" })
759
- ] }) : (
760
- // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
761
- /* @__PURE__ */ s.jsxs(
762
- "div",
763
- {
764
- onMouseDown: (y) => {
765
- y.preventDefault(), y.stopPropagation(), !o && d?.(r);
766
- },
767
- className: i(
768
- "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
769
- e ? " text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
770
- o && "text-neutral-default-disabled hover:bg-neutral-default-default"
771
- ),
772
- children: [
773
- c && /* @__PURE__ */ s.jsx(
774
- Ge,
775
- {
776
- checked: e,
777
- disabled: o
778
- }
779
- ),
780
- /* @__PURE__ */ s.jsx("span", { children: r.label })
781
- ]
782
- }
783
- )
784
- ), (r, e) => r.isSelected === e.isSelected);
785
- we.displayName = "DefaultOptionRenderer";
786
- const Le = W(({ selectedOptions: r, placeholder: e, onRemoveOption: d, displayMode: c, multiple: o, className: l, disabled: y }) => r?.length === 0 ? e ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: e }) : null : c === "chips" && o ? /* @__PURE__ */ s.jsx("div", { className: i("flex items-center gap-1 ", l), children: r.map((p) => /* @__PURE__ */ s.jsx(
787
- Xe,
788
- {
789
- tabIndex: -1,
790
- id: p.id,
791
- label: p.label,
792
- onRemove: d,
793
- disabled: y
794
- },
795
- p.id
796
- )) }) : r?.length === 1 ? /* @__PURE__ */ s.jsx("span", { children: r[0].label }) : /* @__PURE__ */ s.jsxs("span", { children: [
797
- r?.length,
798
- " seleccionados"
799
- ] }), (r, e) => r.selectedOptions === e.selectedOptions);
800
- Le.displayName = "DefaultSelectionDisplay";
801
- export {
802
- ut as S,
803
- P as g
804
- };