bmi-next-brokers 2.7.9 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/Select/Select.js +102 -99
  2. package/package.json +1 -1
package/dist/components/Select/Select.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsxs as p, jsx as l, Fragment as G } from "react/jsx-runtime";
2
- import { useState as J, useRef as C, useEffect as K, useMemo as de } from "react";
3
- import { createPortal as Te } from "react-dom";
2
+ import { useState as J, useRef as L, useEffect as K, useMemo as de } from "react";
3
+ import { createPortal as Re } from "react-dom";
4
4
  import { s as e } from "../../Select.module-C2pwN-re.js";
5
- import { Icon as x } from "../../icons/Icon.js";
5
+ import { Icon as P } from "../../icons/Icon.js";
6
6
  import { HelperText as We } from "../helperText/index.js";
7
7
  import { FieldError as xe } from "../fieldError/index.js";
8
8
  import { useIsMediaQuery as Pe } from "../../hooks/useMediaQuery.js";
@@ -13,26 +13,26 @@ import { useBTC as Me } from "../../hooks/btcContext/useBtcContext.js";
13
13
  import { useDropdownPosition as Be } from "../../hooks/useDropdownPosition.js";
14
14
  const nr = ({
15
15
  size: c = "medium",
16
- label: P,
16
+ label: V,
17
17
  error: U,
18
- helperText: V,
19
- icon: L,
18
+ helperText: F,
19
+ icon: I,
20
20
  className: ue,
21
21
  required: me,
22
- placeholder: F = "Seleccionar...",
23
- options: b = [],
24
- value: f,
25
- onChange: i,
26
- onSearchInput: j,
22
+ placeholder: j = "Seleccionar...",
23
+ options: O = [],
24
+ value: h,
25
+ onChange: a,
26
+ onSearchInput: M,
27
27
  disabled: v = !1,
28
28
  inverted: g = !1,
29
- dynamicIcon: he = !1,
30
- showPlaceholderIcon: fe = !1,
29
+ dynamicIcon: fe = !1,
30
+ showPlaceholderIcon: he = !1,
31
31
  btc: X,
32
32
  columnHeaders: E,
33
33
  searchable: pe = !1,
34
34
  noSearchResult: Y = "No se encontraron resultados",
35
- searchAndCheckbox: Q = !1,
35
+ searchAndCheckbox: T = !1,
36
36
  customBorderColor: Z,
37
37
  responsive: ge = !1,
38
38
  title: $e,
@@ -40,118 +40,118 @@ const nr = ({
40
40
  highlightMatch: Ne = !1,
41
41
  ...Se
42
42
  }) => {
43
- const M = !!j, { btc: ve } = Me(), ye = X ?? ve, [a, y] = J(!1), [m, be] = J(""), s = pe || Q, $ = Q, B = C(null), Oe = C(null), R = C(null), z = C(null), I = C(null), [O, w] = J([]), De = a && !v, Ce = Pe(`(max-width: ${we}px)`), A = ge && Ce && !v;
43
+ const B = !!M, { btc: ve } = Me(), ye = X ?? ve, [i, y] = J(!1), [m, be] = J(""), s = pe || T, $ = T, A = L(null), Oe = L(null), Q = L(null), z = L(null), b = L(null), [D, w] = J([]), De = i && !v, Ce = Pe(`(max-width: ${we}px)`), R = ge && Ce && !v;
44
44
  K(() => {
45
45
  if ($)
46
- if (Array.isArray(f) && f.length > 0) {
47
- const r = b.filter((t) => f.includes(t.value)), n = r.map((t) => t.value);
46
+ if (Array.isArray(h) && h.length > 0) {
47
+ const r = O.filter((t) => h.includes(t.value)), n = r.map((t) => t.value);
48
48
  w((t) => {
49
49
  const u = t.map((S) => S.value);
50
50
  return u.length === r.length && r.every((S) => u.includes(S.value)) ? t : r;
51
- }), (n.length !== f.length || !n.every((t) => f.includes(t))) && i && i(n);
51
+ }), (n.length !== h.length || !n.every((t) => h.includes(t))) && a && a(n);
52
52
  } else
53
53
  w((r) => r.length === 0 ? r : []);
54
- else if (f) {
55
- const r = b.find((n) => n.value === f);
54
+ else if (h) {
55
+ const r = O.find((n) => n.value === h);
56
56
  r ? w(
57
57
  (n) => n.length === 1 && n[0].value === r.value ? n : [r]
58
- ) : (w((n) => n.length === 0 ? n : []), i && i(""));
58
+ ) : (w((n) => n.length === 0 ? n : []), a && a(""));
59
59
  } else
60
60
  w((r) => r.length === 0 ? r : []);
61
- }, [f, b, $]);
62
- const _ = O.map((r) => r.value), o = O[0] ?? null, N = (r) => typeof r == "string" ? r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", ee = C("");
61
+ }, [h, O, $]);
62
+ const _ = D.map((r) => r.value), o = D[0] ?? null, N = (r) => typeof r == "string" ? r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", ee = L("");
63
63
  K(() => {
64
64
  if (!s) return;
65
65
  const r = m.trim(), n = ee.current.trim();
66
66
  if ($) {
67
67
  if (r.length > 0) {
68
- const d = O.filter(
68
+ const d = D.filter(
69
69
  (u) => N(u.label).includes(N(r))
70
70
  ), t = d.map((u) => u.value);
71
- d.length !== O.length && (w(d), i && i(t));
71
+ d.length !== D.length && (w(d), a && a(t));
72
72
  }
73
- r === "" && n.length > 0 && (w([]), i && i([]));
73
+ r === "" && n.length > 0 && (w([]), a && a([]));
74
74
  } else
75
- o && r.length > 0 && !N(o.label).includes(N(r)) && (w([]), i && i("")), r === "" && n.length > 0 && (w([]), i && i(""));
75
+ o && r.length > 0 && !N(o.label).includes(N(r)) && (w([]), a && a("")), r === "" && n.length > 0 && (w([]), a && a(""));
76
76
  ee.current = m;
77
77
  }, [
78
78
  m,
79
79
  o,
80
- O,
80
+ D,
81
81
  $,
82
82
  s,
83
- i
83
+ a
84
84
  ]);
85
- const re = de(() => s ? a ? m : !$ && o ? o.label : $ && _.length > 0 ? `${_.length} ${_.length === 1 ? "seleccionado" : "seleccionados"}` : "" : "", [
85
+ const re = de(() => s ? i ? m : !$ && o ? o.label : $ && _.length > 0 ? `${_.length} ${_.length === 1 ? "seleccionado" : "seleccionados"}` : "" : "", [
86
86
  s,
87
- a,
87
+ i,
88
88
  m,
89
89
  o,
90
90
  _,
91
91
  $
92
- ]), te = (r) => O.some((n) => n.value === r), T = de(() => !s || !m || M ? b : b.filter(
92
+ ]), te = (r) => D.some((n) => n.value === r), W = de(() => !s || !m || B ? O : O.filter(
93
93
  (r) => N(r.label).includes(N(m))
94
- ), [b, m, s, M]), k = (() => {
94
+ ), [O, m, s, B]), k = (() => {
95
95
  if (U) return U;
96
- if (s && m && m.trim().length > 0 && T.length === 0 && !a && !f)
96
+ if (s && m && m.trim().length > 0 && W.length === 0 && !i && !h)
97
97
  return Y;
98
98
  })();
99
99
  K(() => {
100
100
  const r = (n) => {
101
- B.current && !B.current.contains(n.target) && R.current && !R.current.contains(n.target) && y(!1);
101
+ A.current && !A.current.contains(n.target) && Q.current && !Q.current.contains(n.target) && y(!1);
102
102
  };
103
103
  return document.addEventListener("mousedown", r), () => {
104
104
  document.removeEventListener("mousedown", r);
105
105
  };
106
- }, [s, M, o]);
106
+ }, [s, B, o]);
107
107
  const Le = [
108
108
  e.select,
109
109
  ye && e.btc,
110
110
  e[c],
111
111
  k ? e.error : "",
112
112
  v ? e.disabled : "",
113
- a ? e.open : "",
113
+ i ? e.open : "",
114
114
  g ? e.inverted : "",
115
115
  ue
116
- ].filter(Boolean).join(" "), D = c === "small" ? 16 : c === "large" ? 20 : c === "extraLarge" ? 24 : 18, ne = he && (o != null && o.icon) && !(s && a) ? o.icon : L, Ie = () => {
116
+ ].filter(Boolean).join(" "), C = c === "small" ? 16 : c === "large" ? 20 : c === "extraLarge" ? 24 : 18, ne = fe && (o != null && o.icon) && !(s && i) ? o.icon : I, Ie = () => {
117
117
  var r;
118
- v || (y(!a), s && !a && (se(), (r = I.current) == null || r.focus()));
118
+ v || (y(!i), s && !i && (se(), (r = b.current) == null || r.focus()));
119
119
  }, q = (r, n = !0) => {
120
- if (i)
120
+ if (a)
121
121
  if ($) {
122
- const d = Array.isArray(f) ? f : [], u = d.includes(r) ? d.filter((h) => h !== r) : [...d, r];
123
- i(u);
122
+ const d = Array.isArray(h) ? h : [], u = d.includes(r) ? d.filter((f) => f !== r) : [...d, r];
123
+ a(u);
124
124
  } else
125
- i(r), n && y(!1);
125
+ a(r), n && y(!1);
126
126
  }, le = (r) => {
127
127
  const n = r.target.value;
128
- be(n), a || y(!0), j && j(n);
128
+ be(n), i || y(!0), M && M(n);
129
129
  }, se = () => {
130
- a || y(!0);
130
+ i || y(!0);
131
131
  }, _e = (r) => {
132
- A && (r.preventDefault(), r.stopPropagation()), s && (r.stopPropagation(), a || (y(!0), I.current && (I.current.readOnly = !1, I.current.focus())));
132
+ R && (r.preventDefault(), r.stopPropagation()), s && (r.stopPropagation(), i || (y(!0), b.current && (b.current.readOnly = !1, b.current.focus())));
133
133
  }, H = (r, n) => {
134
134
  if (!Ne || !n.trim()) return r;
135
135
  const d = N(r), t = N(n.trim());
136
136
  if (!d.includes(t)) return r;
137
- const u = [], h = [];
138
- for (let W = 0; W < r.length; W++) {
139
- const Re = N(r[W]);
140
- for (let oe = 0; oe < Re.length; oe++)
141
- h.push(W);
137
+ const u = [], f = [];
138
+ for (let x = 0; x < r.length; x++) {
139
+ const Qe = N(r[x]);
140
+ for (let oe = 0; oe < Qe.length; oe++)
141
+ f.push(x);
142
142
  }
143
- const S = d.indexOf(t), Qe = S + t.length - 1, ie = h[S], ae = h[Qe] + 1;
144
- return u.push(r.slice(0, ie)), u.push(
145
- /* @__PURE__ */ l("mark", { className: e.highlight, children: r.slice(ie, ae) }, "highlight")
146
- ), u.push(r.slice(ae)), /* @__PURE__ */ l(G, { children: u });
143
+ const S = d.indexOf(t), Te = S + t.length - 1, ae = f[S], ie = f[Te] + 1;
144
+ return u.push(r.slice(0, ae)), u.push(
145
+ /* @__PURE__ */ l("mark", { className: e.highlight, children: r.slice(ae, ie) }, "highlight")
146
+ ), u.push(r.slice(ie)), /* @__PURE__ */ l(G, { children: u });
147
147
  }, ke = Be({
148
- isOpen: a,
148
+ isOpen: i,
149
149
  containerRef: z,
150
- dropdownRef: R,
150
+ dropdownRef: Q,
151
151
  size: c,
152
- optionsLength: T.length,
153
- label: P,
154
- helperText: V,
152
+ optionsLength: W.length,
153
+ label: V,
154
+ helperText: F,
155
155
  displayError: k
156
156
  }), ce = ({
157
157
  insideDrawer: r = !1,
@@ -160,39 +160,39 @@ const nr = ({
160
160
  const d = (t) => {
161
161
  n ? n(t) : q(t);
162
162
  };
163
- return T.length > 0 ? T.map((t, u) => /* @__PURE__ */ p(
163
+ return W.length > 0 ? W.map((t, u) => /* @__PURE__ */ p(
164
164
  "div",
165
165
  {
166
- className: `${e.option} ${r ? e.isDrawer : ""} ${te(t.value) ? e.optionSelected : ""} ${g ? e.option_inverted : ""} ${t.columns ? e.optionTable : ""} ${Q ? e.optionWithCheckbox : ""}`,
167
- onClick: (h) => {
168
- h.stopPropagation(), d(t.value);
166
+ className: `${e.option} ${r ? e.isDrawer : ""} ${te(t.value) ? e.optionSelected : ""} ${g ? e.option_inverted : ""} ${t.columns ? e.optionTable : ""} ${T ? e.optionWithCheckbox : ""}`,
167
+ onClick: (f) => {
168
+ f.stopPropagation(), d(t.value);
169
169
  },
170
170
  children: [
171
- Q && /* @__PURE__ */ l(
171
+ T && /* @__PURE__ */ l(
172
172
  "input",
173
173
  {
174
174
  type: "checkbox",
175
175
  checked: te(t.value),
176
176
  onChange: () => q(t.value),
177
- onClick: (h) => h.stopPropagation(),
177
+ onClick: (f) => f.stopPropagation(),
178
178
  className: e.optionCheckbox
179
179
  }
180
180
  ),
181
- t.columns ? /* @__PURE__ */ l(G, { children: E && Object.entries(E).map(([h, S]) => /* @__PURE__ */ p("div", { className: e.tableColumn, children: [
181
+ t.columns ? /* @__PURE__ */ l(G, { children: E && Object.entries(E).map(([f, S]) => /* @__PURE__ */ p("div", { className: e.tableColumn, children: [
182
182
  /* @__PURE__ */ l("div", { className: `${e.columnHeader} ${e[c]}`, children: S }),
183
183
  /* @__PURE__ */ l("div", { className: `${e.columnValue} ${e[c]}`, children: H(
184
- String(t.columns[h] ?? ""),
184
+ String(t.columns[f] ?? ""),
185
185
  m
186
186
  ) })
187
- ] }, h)) }) : (
187
+ ] }, f)) }) : (
188
188
  //opción tiene descripción
189
189
  t.description ? /* @__PURE__ */ p("div", { className: e.optionWithDescriptionWrapper, children: [
190
- (t.icon || L) && /* @__PURE__ */ l(
191
- x,
190
+ (t.icon || I) && /* @__PURE__ */ l(
191
+ P,
192
192
  {
193
- name: t.icon || L,
194
- width: D,
195
- height: D
193
+ name: t.icon || I,
194
+ width: C,
195
+ height: C
196
196
  }
197
197
  ),
198
198
  /* @__PURE__ */ p("div", { className: e.optionWithDescription, children: [
@@ -200,12 +200,12 @@ const nr = ({
200
200
  /* @__PURE__ */ l("span", { className: e.optionWithDescriptionValue, children: t.description })
201
201
  ] })
202
202
  ] }) : /* @__PURE__ */ p(G, { children: [
203
- (t.icon || L) && /* @__PURE__ */ l("div", { className: e.optionIcon, children: /* @__PURE__ */ l(
204
- x,
203
+ (t.icon || I) && /* @__PURE__ */ l("div", { className: e.optionIcon, children: /* @__PURE__ */ l(
204
+ P,
205
205
  {
206
- name: t.icon || L,
207
- width: D,
208
- height: D
206
+ name: t.icon || I,
207
+ width: C,
208
+ height: C
209
209
  }
210
210
  ) }),
211
211
  /* @__PURE__ */ l("div", { style: { whiteSpace: "pre-line", lineHeight: 1.25 }, children: H(t.label, m) })
@@ -240,12 +240,12 @@ const nr = ({
240
240
  className: `${e.selectContainer} ${c === "medium" ? e.selectContainer_medium : c === "large" ? e.selectContainer_large : c === "extraLarge" ? e.selectContainer_extraLarge : ""} ${v ? e.disabled : ""}`,
241
241
  ...Se,
242
242
  children: [
243
- P && /* @__PURE__ */ p(
243
+ V && /* @__PURE__ */ p(
244
244
  "label",
245
245
  {
246
246
  className: `${e.label} ${c === "large" ? e.label_large : ""} ${c === "extraLarge" ? e.label_extraLarge : ""} ${g ? e.label_inverted : ""} ${v ? e.disabled : ""} `,
247
247
  children: [
248
- P,
248
+ V,
249
249
  /* @__PURE__ */ l(
250
250
  "span",
251
251
  {
@@ -262,20 +262,20 @@ const nr = ({
262
262
  {
263
263
  className: Le,
264
264
  onClick: Ie,
265
- ref: B,
265
+ ref: A,
266
266
  style: Z ? { borderColor: Z } : void 0,
267
267
  children: [
268
268
  /* @__PURE__ */ p("div", { className: e.iconLabel, children: [
269
- (s || ne && fe) && /* @__PURE__ */ l(
269
+ (s || ne && he) && /* @__PURE__ */ l(
270
270
  "div",
271
271
  {
272
272
  className: `${e.icon} ${g ? e.icon_inverted : ""}`,
273
273
  children: /* @__PURE__ */ l(
274
- x,
274
+ P,
275
275
  {
276
276
  name: s ? "SearchIcon" : ne,
277
- width: D,
278
- height: D
277
+ width: C,
278
+ height: C
279
279
  }
280
280
  )
281
281
  }
@@ -283,42 +283,45 @@ const nr = ({
283
283
  s ? /* @__PURE__ */ l(
284
284
  "input",
285
285
  {
286
- ref: I,
286
+ ref: b,
287
287
  value: re,
288
- className: `${e.selectInput} ${!o && !a && _.length === 0 ? e.placeholder : ""}`,
289
- placeholder: F,
288
+ className: `${e.selectInput} ${!o && !i && _.length === 0 ? e.placeholder : ""}`,
289
+ placeholder: j,
290
290
  onChange: le,
291
291
  onFocus: se,
292
292
  onClick: _e,
293
+ onTouchStart: () => {
294
+ !R && b.current && (b.current.readOnly = !1);
295
+ },
293
296
  disabled: v,
294
- readOnly: A || !a
297
+ readOnly: R || !i
295
298
  }
296
299
  ) : /* @__PURE__ */ l(
297
300
  "span",
298
301
  {
299
302
  className: `${e.selectValue} ${o ? "" : e.placeholder}`,
300
- children: o ? o.label : F
303
+ children: o ? o.label : j
301
304
  }
302
305
  )
303
306
  ] }),
304
307
  /* @__PURE__ */ l(
305
- x,
308
+ P,
306
309
  {
307
310
  name: "ArrowDown",
308
311
  width: 16,
309
312
  height: 16,
310
- className: `${e.chevron} ${a ? e.chevronOpen : ""}`
313
+ className: `${e.chevron} ${i ? e.chevronOpen : ""}`
311
314
  }
312
315
  )
313
316
  ]
314
317
  }
315
318
  ),
316
- A ? /* @__PURE__ */ p(
319
+ R ? /* @__PURE__ */ p(
317
320
  Ve,
318
321
  {
319
322
  className: e.drawerSelect,
320
323
  headerClassName: e.drawerSelectHeader,
321
- isOpen: a,
324
+ isOpen: i,
322
325
  setIsOpen: y,
323
326
  title: $e,
324
327
  zIndex: 1,
@@ -326,7 +329,7 @@ const nr = ({
326
329
  s && /* @__PURE__ */ l("div", { className: e.drawerSearchInput, children: /* @__PURE__ */ l(
327
330
  je,
328
331
  {
329
- placeholder: F,
332
+ placeholder: j,
330
333
  icon: "SearchIcon",
331
334
  value: re,
332
335
  onChange: le,
@@ -336,11 +339,11 @@ const nr = ({
336
339
  /* @__PURE__ */ l(Ee, {})
337
340
  ]
338
341
  }
339
- ) : De && Te(
342
+ ) : De && Re(
340
343
  /* @__PURE__ */ l(
341
344
  "div",
342
345
  {
343
- ref: R,
346
+ ref: Q,
344
347
  className: `${e.dropdown} ${e[c]} ${e.dropdownPortal} ${g ? e.dropdown_inverted : ""} ${E ? e.dropdownTable : ""} ${s ? e.dropdownSearchable : ""}`,
345
348
  style: ke,
346
349
  children: /* @__PURE__ */ l(ce, {})
@@ -350,7 +353,7 @@ const nr = ({
350
353
  )
351
354
  ] }),
352
355
  k && /* @__PURE__ */ l(xe, { message: k, size: c, inverted: g }),
353
- V && !k && /* @__PURE__ */ l(We, { message: V, size: c, inverted: g })
356
+ F && !k && /* @__PURE__ */ l(We, { message: F, size: c, inverted: g })
354
357
  ]
355
358
  }
356
359
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bmi-next-brokers",
3
3
  "description": "Componentes de UI para proyecto BMI Next Brokers",
4
- "version": "2.7.9",
4
+ "version": "2.8.0",
5
5
  "author": "BMI Ahorro España",
6
6
  "contributors": [
7
7
  "José Ramón Jiménez <jrjimenez@bmicos.com>",