bmi-next-brokers 3.1.5 → 3.1.6

package/dist/components/SearchableInputGroup/index.js

@@ -1,11 +1,11 @@
 import { jsxs as O, jsx as i } from "react/jsx-runtime";
-import { useState as N, useRef as w, useMemo as Y, useEffect as _ } from "react";
+import { useState as _, useRef as x, useMemo as Y, useEffect as $ } from "react";
 import { createPortal as Z } from "react-dom";
 import { Input as z } from "../Input/Input.js";
 import { s as e } from "../../Select.module-DaH0FOvY.js";
 import { useBTC as I } from "../../hooks/btcContext/useBtcContext.js";
 import { useDropdownPosition as R } from "../../hooks/useDropdownPosition.js";
-import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_1kajw_7", tr = "_inputWrapper_1kajw_13", $ = {
+import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_1kajw_7", tr = "_inputWrapper_1kajw_13", C = {
   container: rr,
   inputs: nr,
   inputWrapper: tr
@@ -13,53 +13,53 @@ import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_
   fields: u,
   selectedItem: s = null,
   options: a = [],
-  onSearch: g,
-  onSelect: x,
+  onSearch: f,
+  onSelect: S,
   onReset: c,
   noResultMessage: W = "No se encontraron resultados",
-  disabled: C = !1,
+  disabled: E = !1,
   btc: F = !1,
   size: m = "medium",
-  className: E,
+  className: K,
   containerClassName: L,
   ...P
 }) => {
-  const { btc: T } = I(), M = F ?? T, K = !!g, [S, f] = N(!1), [j, V] = N(
+  const { btc: T } = I(), M = F ?? T, g = !!f, [b, h] = _(!1), [j, V] = _(
     {}
-  ), [o, h] = N(null), v = w(null), k = w(null), b = w({}), D = w({}), q = S && !C, l = o ? j[o] ?? "" : "", Q = (r) => typeof r == "string" ? r.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/\s+/g, "").toLowerCase() : "", y = Y(() => {
-    if (!o || !l || K) return a;
+  ), [o, v] = _(null), k = x(null), w = x(null), N = x({}), D = x({}), q = b && !E, l = o ? j[o] ?? "" : "", Q = (r) => typeof r == "string" ? r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", y = Y(() => {
+    if (!o || !l || g) return a;
     const r = u.find((t) => t.key === o);
     if (!r) return a;
     const n = r.columnKey ?? r.key;
     return a.filter(
       (t) => Q(String(t[n] ?? "")).includes(Q(l))
     );
-  }, [a, l, o, K]), A = R({
-    isOpen: S,
-    containerRef: v,
-    dropdownRef: k,
+  }, [a, l, o, g]), A = R({
+    isOpen: b,
+    containerRef: k,
+    dropdownRef: w,
     size: m,
     optionsLength: y.length
   });
-  _(() => {
+  $(() => {
     const r = (n) => {
-      v.current && !v.current.contains(n.target) && k.current && !k.current.contains(n.target) && (f(!1), h(null));
+      k.current && !k.current.contains(n.target) && w.current && !w.current.contains(n.target) && (h(!1), v(null));
     };
     return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
-  }, []), _(() => {
+  }, []), $(() => {
     if (!o) return;
-    const r = l.trim(), n = (b.current[o] ?? "").trim();
-    s && r.length > 0 && (y.some(
+    const r = l.trim(), n = (N.current[o] ?? "").trim();
+    !g && s && r.length > 0 && (y.some(
       (p) => u.every((d) => {
         const B = d.columnKey ?? d.key;
         return String(p[B] ?? "") === String(s[B] ?? "");
       })
-    ) || c == null || c()), r === "" && n.length > 0 && s && (c == null || c()), b.current = {
-      ...b.current,
+    ) || c == null || c()), r === "" && n.length > 0 && s && (c == null || c()), N.current = {
+      ...N.current,
       [o]: l
     };
-  }, [l, o, s, y]), _(() => {
-    if (!s) return;
+  }, [l, o, s, y]), $(() => {
+    if (!s || g) return;
     a.some(
       (n) => u.every((t) => {
         const p = t.columnKey ?? t.key;
@@ -68,12 +68,12 @@ import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_
     ) || c == null || c();
   }, [a]);
   const G = (r, n) => {
-    V((t) => ({ ...t, [r]: n })), h(r), f(!0), g == null || g(r, n);
+    V((t) => ({ ...t, [r]: n })), v(r), h(!0), f == null || f(r, n);
   }, H = (r) => {
-    h(r), S || f(!0);
+    v(r), b || h(!0);
   }, J = (r) => {
     var n, t;
-    x == null || x(r), f(!1), h(null), o && ((t = (n = D.current[o]) == null ? void 0 : n.querySelector("input")) == null || t.blur());
+    S == null || S(r), h(!1), v(null), o && ((t = (n = D.current[o]) == null ? void 0 : n.querySelector("input")) == null || t.blur());
   }, U = (r) => s ? u.every((n) => {
     const t = n.columnKey ?? n.key;
     return String(r[t] ?? "") === String(s[t] ?? "");
@@ -89,18 +89,18 @@ import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_
   return /* @__PURE__ */ O(
     "div",
     {
-      ref: v,
-      className: [$.container, L].filter(Boolean).join(" "),
+      ref: k,
+      className: [C.container, L].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ i(
           "div",
           {
-            className: `${$.inputs} ${E || ""}`,
+            className: `${C.inputs} ${K || ""}`,
             ...P,
             children: u.map((r) => /* @__PURE__ */ i(
               "div",
               {
-                className: $.inputWrapper,
+                className: C.inputWrapper,
                 ref: (n) => {
                   D.current[r.key] = n;
                 },
@@ -114,7 +114,7 @@ import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_
                     onFocus: () => H(r.key),
                     icon: "SearchIcon",
                     size: m,
-                    disabled: C,
+                    disabled: E,
                     btc: M
                   }
                 )
@@ -127,7 +127,7 @@ import '../../assets/index4.css';const rr = "_container_1kajw_1", nr = "_inputs_
           /* @__PURE__ */ i(
             "div",
             {
-              ref: k,
+              ref: w,
               className: [
                 e.dropdown,
                 e[m],

package/dist/components/Select/Select.js

@@ -1,8 +1,8 @@
 import { jsxs as p, jsx as l, Fragment as G } from "react/jsx-runtime";
-import { useState as J, useRef as L, useEffect as K, useMemo as de } from "react";
+import { useState as J, useRef as I, useEffect as K, useMemo as de } from "react";
 import { createPortal as Re } from "react-dom";
 import { s as e } from "../../Select.module-DaH0FOvY.js";
-import { Icon as P } from "../../icons/Icon.js";
+import { Icon as V } from "../../icons/Icon.js";
 import { HelperText as We } from "../helperText/index.js";
 import { FieldError as xe } from "../fieldError/index.js";
 import { useIsMediaQuery as Pe } from "../../hooks/useMediaQuery.js";
@@ -13,26 +13,26 @@ import { useBTC as Me } from "../../hooks/btcContext/useBtcContext.js";
 import { useDropdownPosition as Be } from "../../hooks/useDropdownPosition.js";
 const nr = ({
   size: s = "medium",
-  label: V,
+  label: F,
   error: U,
-  helperText: F,
-  icon: I,
+  helperText: j,
+  icon: _,
   className: ue,
   required: me,
-  placeholder: j = "Seleccionar...",
+  placeholder: M = "Seleccionar...",
   options: O = [],
   value: h,
   onChange: a,
-  onSearchInput: M,
+  onSearchInput: B,
   disabled: v = !1,
   inverted: g = !1,
   dynamicIcon: fe = !1,
   showPlaceholderIcon: he = !1,
   btc: X,
-  columnHeaders: E,
+  columnHeaders: T,
   searchable: pe = !1,
   noSearchResult: Y = "No se encontraron resultados",
-  searchAndCheckbox: T = !1,
+  searchAndCheckbox: Q = !1,
   customBorderColor: Z,
   responsive: ge = !1,
   title: $e,
@@ -40,7 +40,7 @@ const nr = ({
   highlightMatch: Ne = !1,
   ...Se
 }) => {
-  const B = !!M, { btc: ve } = Me(), ye = X ?? ve, [i, y] = J(!1), [m, be] = J(""), c = 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;
+  const D = !!B, { btc: ve } = Me(), ye = X ?? ve, [i, y] = J(!1), [m, be] = J(""), c = pe || Q, $ = Q, A = I(null), Oe = I(null), R = I(null), z = I(null), b = I(null), [C, w] = J([]), De = i && !v, Ce = Pe(`(max-width: ${we}px)`), W = ge && Ce && !v;
   K(() => {
     if ($)
       if (Array.isArray(h) && h.length > 0) {
@@ -59,61 +59,62 @@ const nr = ({
     } else
       w((r) => r.length === 0 ? r : []);
   }, [h, O, $]);
-  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("");
+  const k = C.map((r) => r.value), o = C[0] ?? null, N = (r) => typeof r == "string" ? r.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", ee = I("");
   K(() => {
     if (!c) return;
     const r = m.trim(), n = ee.current.trim();
     if ($) {
-      if (r.length > 0) {
-        const d = D.filter(
+      if (r.length > 0 && !D) {
+        const d = C.filter(
           (u) => N(u.label).includes(N(r))
         ), t = d.map((u) => u.value);
-        d.length !== D.length && (w(d), a && a(t));
+        d.length !== C.length && (w(d), a && a(t));
       }
       r === "" && n.length > 0 && (w([]), a && a([]));
     } else
-      o && r.length > 0 && !N(o.label).includes(N(r)) && (w([]), a && a("")), r === "" && n.length > 0 && (w([]), a && a(""));
+      !D && o && r.length > 0 && !N(o.label).includes(N(r)) && (w([]), a && a("")), r === "" && n.length > 0 && (w([]), a && a(""));
     ee.current = m;
   }, [
     m,
     o,
-    D,
+    C,
     $,
     c,
+    D,
     a
   ]);
-  const re = de(() => c ? i ? m : !$ && o ? o.label : $ && _.length > 0 ? `${_.length} ${_.length === 1 ? "seleccionado" : "seleccionados"}` : "" : "", [
+  const re = de(() => c ? i ? m : !$ && o ? o.label : $ && k.length > 0 ? `${k.length} ${k.length === 1 ? "seleccionado" : "seleccionados"}` : "" : "", [
     c,
     i,
     m,
     o,
-    _,
+    k,
     $
-  ]), te = (r) => D.some((n) => n.value === r), W = de(() => !c || !m || B ? O : O.filter(
+  ]), te = (r) => C.some((n) => n.value === r), x = de(() => !c || !m || D ? O : O.filter(
     (r) => N(r.label).includes(N(m))
-  ), [O, m, c, B]), k = (() => {
+  ), [O, m, c, D]), E = (() => {
     if (U) return U;
-    if (c && m && m.trim().length > 0 && W.length === 0 && !i && !h)
+    if (c && m && m.trim().length > 0 && x.length === 0 && !i && !h)
       return Y;
   })();
   K(() => {
     const r = (n) => {
-      A.current && !A.current.contains(n.target) && Q.current && !Q.current.contains(n.target) && y(!1);
+      A.current && !A.current.contains(n.target) && R.current && !R.current.contains(n.target) && y(!1);
     };
     return document.addEventListener("mousedown", r), () => {
       document.removeEventListener("mousedown", r);
     };
-  }, [c, B, o]);
+  }, [c, D, o]);
   const Le = [
     e.select,
     ye && e.btc,
     e[s],
-    k ? e.error : "",
+    E ? e.error : "",
     v ? e.disabled : "",
     i ? e.open : "",
     g ? e.inverted : "",
     ue
-  ].filter(Boolean).join(" "), C = s === "small" ? 16 : s === "large" ? 20 : s === "extraLarge" ? 24 : 18, ne = fe && (o != null && o.icon) && !(c && i) ? o.icon : I, Ie = () => {
+  ].filter(Boolean).join(" "), L = s === "small" ? 16 : s === "large" ? 20 : s === "extraLarge" ? 24 : 18, ne = fe && (o != null && o.icon) && !(c && i) ? o.icon : _, Ie = () => {
     var r;
     v || (y(!i), c && !i && (se(), (r = b.current) == null || r.focus()));
   }, q = (r, n = !0) => {
@@ -125,20 +126,20 @@ const nr = ({
         a(r), n && y(!1);
   }, le = (r) => {
     const n = r.target.value;
-    be(n), i || y(!0), M && M(n);
+    be(n), i || y(!0), B && B(n);
   }, se = () => {
     i || y(!0);
   }, _e = (r) => {
-    R && (r.preventDefault(), r.stopPropagation()), c && (r.stopPropagation(), i || (y(!0), b.current && (b.current.readOnly = !1, b.current.focus())));
+    W && (r.preventDefault(), r.stopPropagation()), c && (r.stopPropagation(), i || (y(!0), b.current && (b.current.readOnly = !1, b.current.focus())));
   }, H = (r, n) => {
     if (!Ne || !n.trim()) return r;
     const d = N(r), t = N(n.trim());
     if (!d.includes(t)) return r;
     const u = [], f = [];
-    for (let x = 0; x < r.length; x++) {
-      const Qe = N(r[x]);
+    for (let P = 0; P < r.length; P++) {
+      const Qe = N(r[P]);
       for (let oe = 0; oe < Qe.length; oe++)
-        f.push(x);
+        f.push(P);
     }
     const S = d.indexOf(t), Te = S + t.length - 1, ae = f[S], ie = f[Te] + 1;
     return u.push(r.slice(0, ae)), u.push(
@@ -147,12 +148,12 @@ const nr = ({
   }, ke = Be({
     isOpen: i,
     containerRef: z,
-    dropdownRef: Q,
+    dropdownRef: R,
     size: s,
-    optionsLength: W.length,
-    label: V,
-    helperText: F,
-    displayError: k
+    optionsLength: x.length,
+    label: F,
+    helperText: j,
+    displayError: E
   }), ce = ({
     insideDrawer: r = !1,
     handleOptionClickProp: n
@@ -160,15 +161,15 @@ const nr = ({
     const d = (t) => {
       n ? n(t) : q(t);
     };
-    return W.length > 0 ? W.map((t, u) => /* @__PURE__ */ p(
+    return x.length > 0 ? x.map((t, u) => /* @__PURE__ */ p(
       "div",
       {
-        className: `${e.option} ${r ? e.isDrawer : ""} ${te(t.value) ? e.optionSelected : ""} ${g ? e.option_inverted : ""} ${t.columns ? e.optionTable : ""} ${T ? e.optionWithCheckbox : ""}`,
+        className: `${e.option} ${r ? e.isDrawer : ""} ${te(t.value) ? e.optionSelected : ""} ${g ? e.option_inverted : ""} ${t.columns ? e.optionTable : ""} ${Q ? e.optionWithCheckbox : ""}`,
         onClick: (f) => {
           f.stopPropagation(), d(t.value);
         },
         children: [
-          T && /* @__PURE__ */ l(
+          Q && /* @__PURE__ */ l(
             "input",
             {
               type: "checkbox",
@@ -178,7 +179,7 @@ const nr = ({
               className: e.optionCheckbox
             }
           ),
-          t.columns ? /* @__PURE__ */ l(G, { children: E && Object.entries(E).map(([f, S]) => /* @__PURE__ */ p("div", { className: e.tableColumn, children: [
+          t.columns ? /* @__PURE__ */ l(G, { children: T && Object.entries(T).map(([f, S]) => /* @__PURE__ */ p("div", { className: e.tableColumn, children: [
             /* @__PURE__ */ l("div", { className: `${e.columnHeader} ${e[s]}`, children: S }),
             /* @__PURE__ */ l("div", { className: `${e.columnValue} ${e[s]}`, children: H(
               String(t.columns[f] ?? ""),
@@ -187,12 +188,12 @@ const nr = ({
           ] }, f)) }) : (
             //opción tiene descripción
             t.description ? /* @__PURE__ */ p("div", { className: e.optionWithDescriptionWrapper, children: [
-              (t.icon || I) && /* @__PURE__ */ l(
-                P,
+              (t.icon || _) && /* @__PURE__ */ l(
+                V,
                 {
-                  name: t.icon || I,
-                  width: C,
-                  height: C
+                  name: t.icon || _,
+                  width: L,
+                  height: L
                 }
               ),
               /* @__PURE__ */ p("div", { className: e.optionWithDescription, children: [
@@ -200,12 +201,12 @@ const nr = ({
                 /* @__PURE__ */ l("span", { className: e.optionWithDescriptionValue, children: t.description })
               ] })
             ] }) : /* @__PURE__ */ p(G, { children: [
-              (t.icon || I) && /* @__PURE__ */ l("div", { className: e.optionIcon, children: /* @__PURE__ */ l(
-                P,
+              (t.icon || _) && /* @__PURE__ */ l("div", { className: e.optionIcon, children: /* @__PURE__ */ l(
+                V,
                 {
-                  name: t.icon || I,
-                  width: C,
-                  height: C
+                  name: t.icon || _,
+                  width: L,
+                  height: L
                 }
               ) }),
               /* @__PURE__ */ l("div", { style: { whiteSpace: "pre-line", lineHeight: 1.25 }, children: H(t.label, m) })
@@ -222,7 +223,7 @@ const nr = ({
     return /* @__PURE__ */ l(
       "div",
       {
-        className: `${e.dropdown} ${e.isDrawer} ${e[s]}  ${g ? e.dropdown_inverted : ""} ${E ? e.dropdownTable : ""} ${c ? e.dropdownSearchable : ""}`,
+        className: `${e.dropdown} ${e.isDrawer} ${e[s]}  ${g ? e.dropdown_inverted : ""} ${T ? e.dropdownTable : ""} ${c ? e.dropdownSearchable : ""}`,
         children: /* @__PURE__ */ l(
           ce,
           {
@@ -240,12 +241,12 @@ const nr = ({
       className: `${e.selectContainer} ${s === "medium" ? e.selectContainer_medium : s === "large" ? e.selectContainer_large : s === "extraLarge" ? e.selectContainer_extraLarge : ""} ${v ? e.disabled : ""}`,
       ...Se,
       children: [
-        V && /* @__PURE__ */ p(
+        F && /* @__PURE__ */ p(
           "label",
           {
             className: `${e.label} ${s === "large" ? e.label_large : ""} ${s === "extraLarge" ? e.label_extraLarge : ""} ${g ? e.label_inverted : ""} ${v ? e.disabled : ""} `,
             children: [
-              V,
+              F,
               /* @__PURE__ */ l(
                 "span",
                 {
@@ -271,11 +272,11 @@ const nr = ({
                     {
                       className: `${e.icon} ${g ? e.icon_inverted : ""}`,
                       children: /* @__PURE__ */ l(
-                        P,
+                        V,
                         {
                           name: c ? "SearchIcon" : ne,
-                          width: C,
-                          height: C
+                          width: L,
+                          height: L
                         }
                       )
                     }
@@ -285,27 +286,27 @@ const nr = ({
                     {
                       ref: b,
                       value: re,
-                      className: `${e.selectInput} ${!o && !i && _.length === 0 ? e.placeholder : ""}`,
-                      placeholder: j,
+                      className: `${e.selectInput} ${!o && !i && k.length === 0 ? e.placeholder : ""}`,
+                      placeholder: M,
                       onChange: le,
                       onFocus: se,
                       onClick: _e,
                       onTouchStart: () => {
-                        !R && b.current && (b.current.readOnly = !1);
+                        !W && b.current && (b.current.readOnly = !1);
                       },
                       disabled: v,
-                      readOnly: R || !i
+                      readOnly: W || !i
                     }
                   ) : /* @__PURE__ */ l(
                     "span",
                     {
                       className: `${e.selectValue} ${o ? "" : e.placeholder}`,
-                      children: o ? o.label : j
+                      children: o ? o.label : M
                     }
                   )
                 ] }),
                 /* @__PURE__ */ l(
-                  P,
+                  V,
                   {
                     name: "ArrowDown",
                     width: 16,
@@ -316,7 +317,7 @@ const nr = ({
               ]
             }
           ),
-          R ? /* @__PURE__ */ p(
+          W ? /* @__PURE__ */ p(
             Ve,
             {
               className: e.drawerSelect,
@@ -329,7 +330,7 @@ const nr = ({
                 c && /* @__PURE__ */ l("div", { className: e.drawerSearchInput, children: /* @__PURE__ */ l(
                   je,
                   {
-                    placeholder: j,
+                    placeholder: M,
                     size: s,
                     icon: "SearchIcon",
                     value: re,
@@ -344,8 +345,8 @@ const nr = ({
             /* @__PURE__ */ l(
               "div",
               {
-                ref: Q,
-                className: `${e.dropdown} ${e[s]} ${e.dropdownPortal} ${g ? e.dropdown_inverted : ""} ${E ? e.dropdownTable : ""} ${c ? e.dropdownSearchable : ""}`,
+                ref: R,
+                className: `${e.dropdown} ${e[s]} ${e.dropdownPortal} ${g ? e.dropdown_inverted : ""} ${T ? e.dropdownTable : ""} ${c ? e.dropdownSearchable : ""}`,
                 style: ke,
                 children: /* @__PURE__ */ l(ce, {})
               }
@@ -353,8 +354,8 @@ const nr = ({
             document.getElementById("root") || document.body
           )
         ] }),
-        k && /* @__PURE__ */ l(xe, { message: k, size: s, inverted: g }),
-        F && !k && /* @__PURE__ */ l(We, { message: F, size: s, inverted: g })
+        E && /* @__PURE__ */ l(xe, { message: E, size: s, inverted: g }),
+        j && !E && /* @__PURE__ */ l(We, { message: j, size: s, inverted: g })
       ]
     }
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",