bmi-next-brokers 1.4.4 → 1.4.5

package/dist/assets/index7.css

@@ -1 +1 @@
-._modalOverlay_1347c_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_1347c_1 .25s ease-in-out forwards;overflow:hidden}._modalOverlay_1347c_1._closing_1347c_15{animation:_overlayFadeOut_1347c_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_1347c_1{0%{opacity:0}to{opacity:1}}@keyframes _overlayFadeOut_1347c_1{0%{opacity:1}to{opacity:0}}._modal_1347c_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px);margin-inline:15px}._modalHeader_1347c_48{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalHeader_1347c_48._withBorder_1347c_56{border-bottom:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._modalTitle_1347c_61{color:var(--Blacks-Black, #000);font-size:20px;font-style:normal;font-weight:600;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._closeIcon_1347c_72{display:flex;flex-direction:column;border-radius:50%;background-color:#d9d9d9;align-items:center;justify-content:center;aspect-ratio:1/1;padding:6.2px;cursor:pointer;margin-left:auto}._modalBody_1347c_85{display:flex;flex-direction:column;flex:1;padding:0 16px 16px}._modalBody_1347c_85::-webkit-scrollbar{display:none}._modalFooter_1347c_96._withBorder_1347c_56{border-top:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._buttonsDiv_1347c_101{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._buttonsDiv_1347c_101 :only-child{grid-column:2}
+._modalOverlay_1yekd_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_1yekd_1 .25s ease-in-out forwards;overflow:hidden}._modalOverlay_1yekd_1._closing_1yekd_15{animation:_overlayFadeOut_1yekd_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_1yekd_1{0%{opacity:0}to{opacity:1}}@keyframes _overlayFadeOut_1yekd_1{0%{opacity:1}to{opacity:0}}._modalLayout_1yekd_37{display:flex;gap:20px;justify-content:center;align-items:flex-start}._modal_1yekd_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px);margin-inline:15px}._modalHeader_1yekd_55{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalHeader_1yekd_55._withBorder_1yekd_63{border-bottom:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._modalTitle_1yekd_68{color:var(--Blacks-Black, #000);font-size:20px;font-style:normal;font-weight:600;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}._closeIcon_1yekd_80{display:flex;flex-direction:column;border-radius:50%;background-color:#d9d9d9;align-items:center;justify-content:center;aspect-ratio:1/1;padding:6.2px;cursor:pointer;margin-left:auto}._modalBody_1yekd_93{display:flex;flex-direction:column;flex:1;padding:0 16px 16px}._modalBody_1yekd_93::-webkit-scrollbar{display:none}._modalFooter_1yekd_104._withBorder_1yekd_63{border-top:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._buttonsDiv_1yekd_109{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._buttonsDiv_1yekd_109._fullWidthFooter_1yekd_119{width:100%}._buttonsDiv_1yekd_109 :only-child{grid-column:2}

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

@@ -26,6 +26,8 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
     onClose?: (() => Promise<void> | void) | false;
     closeModal: () => void;
     withScroll?: boolean;
+    fullWidthFooter?: boolean;
+    helperElement?: React.ReactNode;
 }
 /**
  * Modal con overlay, header, body y footer configurable.
@@ -51,11 +53,15 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
  * @param onClickOverlay - Callback opcional al hacer click fuera del modal. Si se pasa `false`, el overlay no cierra el modal ni ejecuta acción.
  * @param onClose - Callback opcional al pulsar el icono de cierre. Si se pasa `false`, no se renderiza el icono de cierre.
  * @param closeModal - Función obligatoria que cierra el modal desde el exterior.
+ * @param withScroll - Scroll automático en modalBody. Aparece línea de separación en el header y en el footer.
+ * @param fullWidthFooter - Footer ocupa el 100% del ancho en lugar de fit-content.
+ * @param helperElement - Componente a renderizar como helper a la derecha del modal, dentro del mismo layout de overlay.
  *
  * @example
  * ```tsx
  * import { useState } from "react";
  * import { Modal, Button } from "bmi-next-brokers";
+ * import MiComponente from "@componentes";
  *
  * export default function Example() {
  *   const [isOpen, setIsOpen] = useState(false);
@@ -72,12 +78,15 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
  *         closeModal={() => setIsOpen(false)}
  *         title="Ejemplo de Modal"
  *         width={500}
+ *         fullWidthFooter
+ *         withScroll={false}
+ *         helperElement={< MiComponente />}
  *         confirmButton={{
  *           text: "Guardar",
  *           action: handleConfirm,
  *           variant: "brand",
  *           size: "small",
- *           loading: false
+ *           loading: false,
  *           id: "form"
  *         }}
  *         cancelButton={{

package/dist/components/modal/index.js

@@ -1,148 +1,161 @@
-import { jsx as d, jsxs as v } from "react/jsx-runtime";
-import { useRef as I, useState as m, useEffect as X } from "react";
-import { Icon as Z } from "../../icons/Icon.js";
-import { useScrollLock as M } from "../../hooks/useScrollLock.js";
-import { Button as N } from "../Button/Button.js";
-import { r as P } from "../../index-CGDUIzcq.js";
-import '../../assets/index7.css';const q = "_modalOverlay_1347c_1", G = "_closing_1347c_15", J = "_modal_1347c_1", K = "_modalHeader_1347c_48", Q = "_withBorder_1347c_56", U = "_modalTitle_1347c_61", n = "_closeIcon_1347c_72", u = "_modalBody_1347c_85", B = "_modalFooter_1347c_96", ss = "_buttonsDiv_1347c_101", l = {
-  modalOverlay: q,
-  closing: G,
-  modal: J,
-  modalHeader: K,
-  withBorder: Q,
-  modalTitle: U,
-  closeIcon: n,
-  modalBody: u,
-  modalFooter: B,
-  buttonsDiv: ss
-}, hs = ({
-  isOpen: y,
-  title: b,
-  children: g,
-  width: S = 752,
-  confirmButton: s,
-  cancelButton: e,
-  zIndex: k,
-  className: O,
-  style: f,
-  onClickOverlay: h,
-  onClose: i,
-  closeModal: H,
-  withScroll: $ = !0,
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { useRef as C, useState as v, useEffect as M } from "react";
+import { Icon as P } from "../../icons/Icon.js";
+import { useScrollLock as q } from "../../hooks/useScrollLock.js";
+import { Button as E } from "../Button/Button.js";
+import { r as G } from "../../index-CGDUIzcq.js";
+import '../../assets/index7.css';const J = "_modalOverlay_1yekd_1", K = "_closing_1yekd_15", Q = "_modalLayout_1yekd_37", U = "_modal_1yekd_1", n = "_modalHeader_1yekd_55", u = "_withBorder_1yekd_63", B = "_modalTitle_1yekd_68", ee = "_closeIcon_1yekd_80", se = "_modalBody_1yekd_93", le = "_modalFooter_1yekd_104", de = "_buttonsDiv_1yekd_109", ae = "_fullWidthFooter_1yekd_119", l = {
+  modalOverlay: J,
+  closing: K,
+  modalLayout: Q,
+  modal: U,
+  modalHeader: n,
+  withBorder: u,
+  modalTitle: B,
+  closeIcon: ee,
+  modalBody: se,
+  modalFooter: le,
+  buttonsDiv: de,
+  fullWidthFooter: ae
+}, me = ({
+  isOpen: m,
+  title: k,
+  children: b,
+  width: N = 752,
+  confirmButton: e,
+  cancelButton: s,
+  zIndex: I,
+  className: S,
+  style: $,
+  onClickOverlay: _,
+  onClose: o,
+  closeModal: L,
+  withScroll: O = !0,
+  fullWidthFooter: F = !1,
+  helperElement: H,
   ...x
 }) => {
-  const w = I(null), [D, p] = m(!1), _ = I(null), [T, z] = m(!1), [R, L] = m(!1);
-  M(y);
-  const o = () => {
-    p(!0), setTimeout(() => {
-      H(), p(!1);
+  const g = C(null), [D, t] = v(!1), y = C(null), [T, c] = v(!1), [z, R] = v(!1);
+  q(m);
+  const i = () => {
+    t(!0), setTimeout(() => {
+      L(), t(!1);
     }, 250);
-  }, j = async (a) => {
+  }, W = async (d) => {
     var r;
-    (r = w.current) != null && r.contains(a.target) || h !== !1 && (typeof h == "function" && await h(), o());
-  }, t = async () => {
-    i !== !1 && (typeof i == "function" && await i(), o());
+    (r = g.current) != null && r.contains(d.target) || _ !== !1 && (typeof _ == "function" && await _(), i());
+  }, j = async () => {
+    o !== !1 && (typeof o == "function" && await o(), i());
   }, A = async () => {
-    s != null && s.action && await s.action(), o();
-  }, F = async () => {
-    e != null && e.action && await e.action(), o();
-  }, Y = e && Object.keys(e).length > 0, V = s && Object.keys(s).length > 0, C = Y && (e.show ?? !0), c = V && (s.show ?? !0), W = `${l.modal} ${O || ""}`;
-  return X(() => {
-    if (!_.current) return;
-    const a = _.current, r = () => {
-      L(a.scrollTop > 0), z(a.scrollHeight > a.clientHeight);
+    e != null && e.action && await e.action(), i();
+  }, Y = async () => {
+    s != null && s.action && await s.action(), i();
+  }, V = s && Object.keys(s).length > 0, X = e && Object.keys(e).length > 0, w = V && (s.show ?? !0), p = X && (e.show ?? !0), Z = `${l.modal} ${S || ""}`;
+  return M(() => {
+    if (!y.current) return;
+    const d = y.current, r = () => {
+      R(d.scrollTop > 0), c(d.scrollHeight > d.clientHeight);
     };
-    r(), a.addEventListener("scroll", r);
-    const E = new ResizeObserver(r);
-    return E.observe(a), () => {
-      a.removeEventListener("scroll", r), E.disconnect();
+    r(), d.addEventListener("scroll", r);
+    const f = new ResizeObserver(r);
+    return f.observe(d), () => {
+      d.removeEventListener("scroll", r), f.disconnect();
     };
-  }, [g]), y ? P.createPortal(
-    /* @__PURE__ */ d(
+  }, [b]), m ? G.createPortal(
+    /* @__PURE__ */ a(
       "div",
       {
         className: `${l.modalOverlay} ${D ? l.closing : ""}`,
-        style: { zIndex: 3e3 + (k || 0) },
-        onClick: j,
-        children: /* @__PURE__ */ v(
-          "div",
-          {
-            className: W,
-            style: { width: S, ...f },
-            ref: w,
-            ...x,
-            children: [
-              /* @__PURE__ */ v(
-                "div",
-                {
-                  className: `${l.modalHeader} ${R ? l.withBorder : ""}`,
-                  children: [
-                    b && /* @__PURE__ */ d("span", { className: l.modalTitle, children: b }),
-                    i !== !1 && /* @__PURE__ */ d("div", { className: l.closeIcon, onClick: t, children: /* @__PURE__ */ d(
-                      Z,
+        style: { zIndex: 3e3 + (I || 0) },
+        onClick: W,
+        children: /* @__PURE__ */ h("div", { className: l.modalLayout, children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: Z,
+              style: { width: N, ...$ },
+              ref: g,
+              ...x,
+              children: [
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    className: `${l.modalHeader} ${z ? l.withBorder : ""}`,
+                    children: [
+                      k && /* @__PURE__ */ a("span", { className: l.modalTitle, children: k }),
+                      o !== !1 && /* @__PURE__ */ a("div", { className: l.closeIcon, onClick: j, children: /* @__PURE__ */ a(
+                        P,
+                        {
+                          name: "Close",
+                          width: 12,
+                          height: 12,
+                          fill: "var(--Blacks-Transparencias-Black-40, rgba(0, 0, 0, 0.40)"
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: l.modalBody,
+                    style: {
+                      overflowY: O ? "auto" : "hidden"
+                    },
+                    ref: y,
+                    children: b
+                  }
+                ),
+                (w || p) && /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: `${l.modalFooter} ${T ? l.withBorder : ""}`,
+                    children: /* @__PURE__ */ h(
+                      "div",
                       {
-                        name: "Close",
-                        width: 12,
-                        height: 12,
-                        fill: "var(--Blacks-Transparencias-Black-40, rgba(0, 0, 0, 0.40)"
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ d(
-                "div",
-                {
-                  className: l.modalBody,
-                  style: {
-                    overflowY: $ ? "auto" : "hidden"
-                  },
-                  ref: _,
-                  children: g
-                }
-              ),
-              (C || c) && /* @__PURE__ */ d(
-                "div",
-                {
-                  className: `${l.modalFooter} ${T ? l.withBorder : ""}`,
-                  children: /* @__PURE__ */ v("div", { className: l.buttonsDiv, children: [
-                    C && /* @__PURE__ */ d(
-                      N,
-                      {
-                        variant: (e == null ? void 0 : e.variant) || "outline",
-                        onClick: F,
-                        disabled: (e == null ? void 0 : e.disabled) || !1,
-                        size: (e == null ? void 0 : e.size) || "small",
-                        loading: e == null ? void 0 : e.loading,
-                        fullWidth: !0,
-                        children: (e == null ? void 0 : e.text) || "Cancelar"
-                      }
-                    ),
-                    c && /* @__PURE__ */ d(
-                      N,
-                      {
-                        type: "submit",
-                        form: s == null ? void 0 : s.id,
-                        variant: (s == null ? void 0 : s.variant) || "brand",
-                        onClick: A,
-                        disabled: (s == null ? void 0 : s.disabled) || !1,
-                        size: (s == null ? void 0 : s.size) || "small",
-                        loading: s == null ? void 0 : s.loading,
-                        fullWidth: !0,
-                        children: (s == null ? void 0 : s.text) || "Confirmar"
+                        className: `${l.buttonsDiv} ${F ? l.fullWidthFooter : ""}`,
+                        children: [
+                          w && /* @__PURE__ */ a(
+                            E,
+                            {
+                              variant: (s == null ? void 0 : s.variant) || "outline",
+                              onClick: Y,
+                              disabled: (s == null ? void 0 : s.disabled) || !1,
+                              size: (s == null ? void 0 : s.size) || "small",
+                              loading: s == null ? void 0 : s.loading,
+                              fullWidth: !0,
+                              children: (s == null ? void 0 : s.text) || "Cancelar"
+                            }
+                          ),
+                          p && /* @__PURE__ */ a(
+                            E,
+                            {
+                              type: "submit",
+                              form: e == null ? void 0 : e.id,
+                              variant: (e == null ? void 0 : e.variant) || "brand",
+                              onClick: A,
+                              disabled: (e == null ? void 0 : e.disabled) || !1,
+                              size: (e == null ? void 0 : e.size) || "small",
+                              loading: e == null ? void 0 : e.loading,
+                              fullWidth: !0,
+                              children: (e == null ? void 0 : e.text) || "Confirmar"
+                            }
+                          )
+                        ]
                       }
                     )
-                  ] })
-                }
-              )
-            ]
-          }
-        )
+                  }
+                )
+              ]
+            }
+          ),
+          H
+        ] })
       }
     ),
     document.getElementById("root") || document.body
   ) : null;
 };
 export {
-  hs as Modal
+  me as Modal
 };

package/package.json

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