bmi-next-brokers 2.5.9 → 2.6.0

package/dist/components/SearchableInputGroup/index.d.ts

@@ -11,21 +11,20 @@ export interface SearchableInputGroupField {
 }
 export interface SearchableInputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     fields: SearchableInputGroupField[];
-    /** Valores controlados que se muestran en los inputs. */
-    values?: Record<string, string>;
-    /** Resultados de búsqueda actuales, provistos por el padre. */
+    /** Opción seleccionada actualmente. Controlado por el padre. */
+    selectedItem?: Record<string, unknown> | null;
+    /** Opciones del dropdown. Si no se pasa onSearch, el filtrado es interno. */
     options?: Record<string, unknown>[];
-    /** Se llama al cambiar cualquier input, con la clave del campo y el nuevo valor. */
-    onSearch: (key: string, value: string) => void;
+    /** Búsqueda remota: el padre filtra las opciones. Si se omite, el filtrado es interno. */
+    onSearch?: (key: string, value: string) => void;
     /** Se llama al seleccionar una fila del dropdown. */
     onSelect?: (item: Record<string, unknown>) => void;
-    /** Mensaje cuando no hay resultados (solo visible si loading es false). */
+    /** Se llama cuando selectedItem ya no está en las opciones filtradas. */
+    onReset?: () => void;
     noResultMessage?: string;
-    /** Mientras loading=true no se muestra el mensaje de sin resultados. */
-    loading?: boolean;
     disabled?: boolean;
     size?: SelectSize;
     btc?: boolean;
     containerClassName?: string;
 }
-export declare const SearchableInputGroup: ({ fields, values, options, onSearch, onSelect, noResultMessage, loading, disabled, btc, size, className, containerClassName, ...rest }: SearchableInputGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchableInputGroup: ({ fields, selectedItem, options, onSearch, onSelect, onReset, noResultMessage, disabled, btc, size, className, containerClassName, ...rest }: SearchableInputGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchableInputGroup/index.js

@@ -1,112 +1,157 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import { useState as W, useRef as N, useEffect as y } from "react";
-import { createPortal as L } from "react-dom";
-import { Input as O } from "../Input/Input.js";
-import { s as n } from "../../Select.module-D_7bjq9u.js";
-import { useBTC as k } from "../../hooks/btcContext/useBtcContext.js";
-import { useDropdownPosition as F } from "../../hooks/useDropdownPosition.js";
-import '../../assets/index4.css';const G = "_container_1kajw_1", M = "_inputs_1kajw_7", V = "_inputWrapper_1kajw_13", p = {
-  container: G,
-  inputs: M,
-  inputWrapper: V
-}, X = ({
-  fields: m,
-  values: _ = {},
-  options: a = [],
-  onSearch: b,
-  onSelect: u,
-  noResultMessage: $ = "No se encontraron resultados",
-  loading: j = !1,
-  disabled: f = !1,
-  btc: C = !1,
-  size: s = "medium",
-  className: h,
-  containerClassName: I,
-  ...R
+import { jsxs as Q, jsx as c } from "react/jsx-runtime";
+import { useState as N, useRef as S, useMemo as U, useEffect as B } from "react";
+import { createPortal as X } from "react-dom";
+import { Input as Y } from "../Input/Input.js";
+import { s as t } from "../../Select.module-D_7bjq9u.js";
+import { useBTC as Z } from "../../hooks/btcContext/useBtcContext.js";
+import { useDropdownPosition as z } from "../../hooks/useDropdownPosition.js";
+import '../../assets/index4.css';const R = "_container_1kajw_1", nn = "_inputs_1kajw_7", rn = "_inputWrapper_1kajw_13", _ = {
+  container: R,
+  inputs: nn,
+  inputWrapper: rn
+}, ln = ({
+  fields: u,
+  selectedItem: s = null,
+  options: l = [],
+  onSearch: d,
+  onSelect: k,
+  onReset: a,
+  noResultMessage: O = "No se encontraron resultados",
+  disabled: $ = !1,
+  btc: F = !1,
+  size: p = "medium",
+  className: C,
+  containerClassName: L,
+  ...P
 }) => {
-  const { btc: x } = k(), B = C ?? x, [w, c] = W(!1), l = N(null), i = N(null), D = w && !f, E = F({
+  const { btc: T } = Z(), W = F ?? T, j = !!d, [w, y] = N(!1), [K, M] = N(
+    {}
+  ), [o, g] = N(null), f = S(null), h = S(null), b = S({}), V = w && !$, i = o ? K[o] ?? "" : "", A = z({
     isOpen: w,
-    containerRef: l,
-    dropdownRef: i,
-    size: s,
-    optionsLength: a.length,
+    containerRef: f,
+    dropdownRef: h,
+    size: p,
+    optionsLength: l.length,
     isSearchable: !0
-  });
-  y(() => {
-    const e = (t) => {
-      l.current && !l.current.contains(t.target) && i.current && !i.current.contains(t.target) && c(!1);
+  }), D = (n) => typeof n == "string" ? n.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/\s+/g, "").toLowerCase() : "", v = U(() => {
+    if (!o || !i || j) return l;
+    const n = u.find((e) => e.key === o);
+    if (!n) return l;
+    const r = n.columnKey ?? n.key;
+    return l.filter(
+      (e) => D(String(e[r] ?? "")).includes(D(i))
+    );
+  }, [l, i, o, j]);
+  B(() => {
+    const n = (r) => {
+      f.current && !f.current.contains(r.target) && h.current && !h.current.contains(r.target) && (y(!1), g(null));
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const P = (e, t) => {
-    b(e, t), t.trim() ? c(!0) : c(!1);
-  }, S = (e) => {
-    u == null || u(e), c(!1);
-  }, T = !j && a.length === 0;
-  return /* @__PURE__ */ v(
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, []), B(() => {
+    if (!o) return;
+    const n = i.trim(), r = (b.current[o] ?? "").trim();
+    s && n.length > 0 && (v.some(
+      (x) => u.every((m) => {
+        const E = m.columnKey ?? m.key;
+        return String(x[E] ?? "") === String(s[E] ?? "");
+      })
+    ) || a == null || a()), n === "" && r.length > 0 && s && (a == null || a()), b.current = {
+      ...b.current,
+      [o]: i
+    };
+  }, [i, o, s, v]);
+  const G = (n, r) => {
+    M((e) => ({ ...e, [n]: r })), g(n), y(!0), d == null || d(n, r);
+  }, q = (n) => {
+    g(n), w || y(!0);
+  }, H = (n) => {
+    k == null || k(n), y(!1), g(null);
+  }, I = (n) => s ? u.every((r) => {
+    const e = r.columnKey ?? r.key;
+    return String(n[e] ?? "") === String(s[e] ?? "");
+  }) : !1, J = (n) => {
+    if (o === n.key)
+      return K[n.key] ?? "";
+    if (s) {
+      const r = n.columnKey ?? n.key;
+      return String(s[r] ?? "");
+    }
+    return "";
+  };
+  return /* @__PURE__ */ Q(
     "div",
     {
-      ref: l,
-      className: [p.container, I].filter(Boolean).join(" "),
+      ref: f,
+      className: [_.container, L].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ c(
           "div",
           {
-            className: `${p.inputs} ${h || ""}`,
-            ...R,
-            children: m.map(({ key: e, label: t, placeholder: r }) => /* @__PURE__ */ o("div", { className: p.inputWrapper, children: /* @__PURE__ */ o(
-              O,
+            className: `${_.inputs} ${C || ""}`,
+            ...P,
+            children: u.map((n) => /* @__PURE__ */ c("div", { className: _.inputWrapper, children: /* @__PURE__ */ c(
+              Y,
               {
-                label: t,
-                placeholder: r,
-                value: _[e] ?? "",
-                onChange: (d) => P(e, d.target.value),
+                label: n.label,
+                placeholder: n.placeholder,
+                value: J(n),
+                onChange: (r) => G(n.key, r.target.value),
+                onFocus: () => q(n.key),
                 icon: "SearchIcon",
-                size: s,
-                disabled: f,
-                btc: B
+                size: p,
+                disabled: $,
+                btc: W
               }
-            ) }, e))
+            ) }, n.key))
           }
         ),
-        D && L(
-          /* @__PURE__ */ o(
+        V && X(
+          /* @__PURE__ */ c(
             "div",
             {
-              ref: i,
+              ref: h,
               className: [
-                n.dropdown,
-                n[s],
-                n.dropdownPortal,
-                n.dropdownTable
+                t.dropdown,
+                t[p],
+                t.dropdownPortal,
+                t.dropdownTable
               ].join(" "),
-              style: E,
-              children: a.length > 0 ? a.map((e, t) => /* @__PURE__ */ o(
+              style: A,
+              children: v.length > 0 ? v.map((n, r) => /* @__PURE__ */ c(
                 "div",
                 {
-                  className: `${n.option} ${n.optionTable}`,
-                  onMouseDown: (r) => {
-                    r.preventDefault(), r.stopPropagation(), S(e);
+                  className: `${t.option} ${t.optionTable} ${I(n) ? t.optionSelected : ""}`,
+                  onMouseDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), H(n);
                   },
-                  children: m.map(({ key: r, columnKey: d, columnHeader: g }) => /* @__PURE__ */ v("div", { className: n.tableColumn, children: [
-                    g && /* @__PURE__ */ o(
-                      "div",
-                      {
-                        className: `${n.columnHeader} ${n[s]}`,
-                        children: g
-                      }
-                    ),
-                    /* @__PURE__ */ o(
-                      "div",
-                      {
-                        className: `${n.columnValue} ${n[s]}`,
-                        children: String(e[d ?? r] ?? "")
-                      }
-                    )
-                  ] }, r))
+                  style: { padding: 0, gap: 0 },
+                  children: u.map(({ key: e, columnKey: x, columnHeader: m }) => /* @__PURE__ */ Q(
+                    "div",
+                    {
+                      className: t.tableColumn,
+                      style: { padding: "8px 12px 8px 18px" },
+                      children: [
+                        m && /* @__PURE__ */ c(
+                          "div",
+                          {
+                            className: `${t.columnHeader} ${t[p]}`,
+                            children: m
+                          }
+                        ),
+                        /* @__PURE__ */ c(
+                          "div",
+                          {
+                            className: `${t.columnValue} ${t[p]}`,
+                            children: String(n[x ?? e] ?? "")
+                          }
+                        )
+                      ]
+                    },
+                    e
+                  ))
                 },
-                t
-              )) : T && /* @__PURE__ */ o("span", { className: n.noResults, children: $ })
+                r
+              )) : /* @__PURE__ */ c("span", { className: t.noResults, children: O })
             }
           ),
           document.getElementById("root") || document.body
@@ -116,5 +161,5 @@ import '../../assets/index4.css';const G = "_container_1kajw_1", M = "_inputs_1k
   );
 };
 export {
-  X as SearchableInputGroup
+  ln as SearchableInputGroup
 };

package/package.json

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