bmi-next-brokers 2.4.4 → 2.4.5

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { ButtonSize, ButtonVariant } from '../Button';
+import { IconConfig } from '../Button/Button';
 type ModalButtonProps = {
     show?: boolean;
     text?: string;
@@ -10,6 +11,7 @@ type ModalButtonProps = {
     loading?: boolean;
     id?: string;
     className?: string;
+    icon?: IconConfig;
 };
 /**
  * Props del Modal
@@ -29,6 +31,9 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
     withScroll?: boolean;
     fullWidthFooter?: boolean;
     helperElement?: React.ReactNode;
+    titleClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
 }
 /**
  * Modal con overlay, header, body y footer configurable.
@@ -109,5 +114,5 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  */
-export declare const Modal: ({ isOpen, title, children, width, confirmButton, cancelButton, zIndex, className, style, onClickOverlay, onClose, closeModal, withScroll, fullWidthFooter, helperElement, ...props }: ModalProps) => React.ReactPortal | null;
+export declare const Modal: ({ isOpen, title, children, width, confirmButton, cancelButton, zIndex, className, titleClassName, contentClassName, footerClassName, style, onClickOverlay, onClose, closeModal, withScroll, fullWidthFooter, helperElement, ...props }: ModalProps) => React.ReactPortal | null;
 export {};

package/dist/components/modal/index.js

@@ -1,98 +1,107 @@
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
-import { useRef as p, useState as v, useEffect as M } from "react";
-import { Icon as q } from "../../icons/Icon.js";
-import { useScrollLock as G } from "../../hooks/useScrollLock.js";
-import { CloseContext as J } from "../../hooks/useClose.js";
-import { Button as E } from "../Button/Button.js";
-import { createPortal as K } from "react-dom";
-import '../../assets/index7.css';const Q = "_modalOverlay_1hyzx_1", U = "_closing_1hyzx_15", c = "_modalLayout_1hyzx_37", u = "_modal_1hyzx_1", n = "_modalHeader_1hyzx_57", B = "_withBorder_1hyzx_65", ss = "_modalTitle_1hyzx_70", es = "_closeIcon_1hyzx_82", ls = "_modalBody_1hyzx_95", as = "_modalFooter_1hyzx_106", ds = "_buttonsDiv_1hyzx_111", rs = "_fullWidthFooter_1hyzx_121", l = {
-  modalOverlay: Q,
-  closing: U,
-  modalLayout: c,
-  modal: u,
-  modalHeader: n,
-  withBorder: B,
-  modalTitle: ss,
-  closeIcon: es,
-  modalBody: ls,
-  modalFooter: as,
-  buttonsDiv: ds,
-  fullWidthFooter: rs
-}, bs = ({
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useRef as I, useState as v, useEffect as K } from "react";
+import { Icon as Q } from "../../icons/Icon.js";
+import { useScrollLock as U } from "../../hooks/useScrollLock.js";
+import { CloseContext as c } from "../../hooks/useClose.js";
+import { Button as S } from "../Button/Button.js";
+import { createPortal as t } from "react-dom";
+import '../../assets/index7.css';const u = "_modalOverlay_1hyzx_1", n = "_closing_1hyzx_15", B = "_modalLayout_1hyzx_37", ss = "_modal_1hyzx_1", es = "_modalHeader_1hyzx_57", ls = "_withBorder_1hyzx_65", as = "_modalTitle_1hyzx_70", ds = "_closeIcon_1hyzx_82", rs = "_modalBody_1hyzx_95", is = "_modalFooter_1hyzx_106", hs = "_buttonsDiv_1hyzx_111", os = "_fullWidthFooter_1hyzx_121", l = {
+  modalOverlay: u,
+  closing: n,
+  modalLayout: B,
+  modal: ss,
+  modalHeader: es,
+  withBorder: ls,
+  modalTitle: as,
+  closeIcon: ds,
+  modalBody: rs,
+  modalFooter: is,
+  buttonsDiv: hs,
+  fullWidthFooter: os
+}, zs = ({
   isOpen: m,
   title: x,
   children: b,
-  width: I = 752,
+  width: k = 752,
   confirmButton: s,
   cancelButton: e,
-  zIndex: S,
-  className: $,
-  style: f,
+  zIndex: L,
+  className: O,
+  titleClassName: g,
+  contentClassName: w,
+  footerClassName: z,
+  style: F,
   onClickOverlay: y,
-  onClose: o,
-  closeModal: k,
-  withScroll: L = !0,
-  fullWidthFooter: O = !1,
-  helperElement: F,
-  ...H
+  onClose: h,
+  closeModal: H,
+  withScroll: f = !0,
+  fullWidthFooter: T = !1,
+  helperElement: W,
+  ...D
 }) => {
-  const g = p(null), [T, w] = v(!1), _ = p(null), [W, t] = v(!1), [D, R] = v(!1);
-  G(m);
+  const $ = I(null), [R, p] = v(!1), _ = I(null), [j, A] = v(!1), [Y, P] = v(!1);
+  U(m);
   const i = () => {
-    w(!0), setTimeout(() => {
-      k(), w(!1);
+    p(!0), setTimeout(() => {
+      H(), p(!1);
     }, 250);
-  }, j = async (d) => {
+  }, V = async (d) => {
     var r;
-    (r = g.current) != null && r.contains(d.target) || y !== !1 && (typeof y == "function" && await y(), i());
-  }, A = async () => {
-    o !== !1 && (typeof o == "function" && await o(), i());
-  }, Y = async () => {
+    (r = $.current) != null && r.contains(d.target) || y !== !1 && (typeof y == "function" && await y(), i());
+  }, X = async () => {
+    h !== !1 && (typeof h == "function" && await h(), i());
+  }, Z = async () => {
     try {
       s != null && s.action && await s.action(), i();
     } catch {
       return;
     }
-  }, P = async () => {
+  }, M = async () => {
     try {
       e != null && e.action && await e.action(), i();
     } catch {
       return;
     }
-  }, V = e && Object.keys(e).length > 0, X = s && Object.keys(s).length > 0, z = V && (e.show ?? !0), C = X && (s.show ?? !0), Z = `${l.modal} ${$ || ""}`;
-  return M(() => {
+  }, q = e && Object.keys(e).length > 0, G = s && Object.keys(s).length > 0, C = q && (e.show ?? !0), N = G && (s.show ?? !0), J = `${l.modal} ${O || ""}`;
+  return K(() => {
     if (!_.current) return;
     const d = _.current, r = () => {
-      R(d.scrollTop > 0), t(d.scrollHeight > d.clientHeight);
+      P(d.scrollTop > 0), A(d.scrollHeight > d.clientHeight);
     };
     r(), d.addEventListener("scroll", r);
-    const N = new ResizeObserver(r);
-    return N.observe(d), () => {
-      d.removeEventListener("scroll", r), N.disconnect();
+    const E = new ResizeObserver(r);
+    return E.observe(d), () => {
+      d.removeEventListener("scroll", r), E.disconnect();
     };
-  }, [b]), m ? K(
+  }, [b]), m ? t(
     /* @__PURE__ */ a(
       "div",
       {
-        className: `${l.modalOverlay} ${T ? l.closing : ""}`,
-        style: { zIndex: 3e3 + (S || 0) },
-        onClick: j,
-        children: /* @__PURE__ */ h("div", { ref: g, className: l.modalLayout, children: [
-          /* @__PURE__ */ h(
+        className: `${l.modalOverlay} ${R ? l.closing : ""}`,
+        style: { zIndex: 3e3 + (L || 0) },
+        onClick: V,
+        children: /* @__PURE__ */ o("div", { ref: $, className: l.modalLayout, children: [
+          /* @__PURE__ */ o(
             "div",
             {
-              className: Z,
-              style: { maxWidth: I, ...f },
-              ...H,
+              className: J,
+              style: { maxWidth: k, ...F },
+              ...D,
               children: [
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ o(
                   "div",
                   {
-                    className: `${l.modalHeader} ${D ? l.withBorder : ""}`,
+                    className: `${l.modalHeader} ${Y ? l.withBorder : ""} `,
                     children: [
-                      x && /* @__PURE__ */ a("span", { className: l.modalTitle, children: x }),
-                      o !== !1 && /* @__PURE__ */ a("div", { className: l.closeIcon, onClick: A, children: /* @__PURE__ */ a(
-                        q,
+                      x && /* @__PURE__ */ a(
+                        "span",
+                        {
+                          className: `${l.modalTitle} ${g || ""}`,
+                          children: x
+                        }
+                      ),
+                      h !== !1 && /* @__PURE__ */ a("div", { className: l.closeIcon, onClick: X, children: /* @__PURE__ */ a(
+                        Q,
                         {
                           name: "Close",
                           width: 12,
@@ -106,47 +115,49 @@ import '../../assets/index7.css';const Q = "_modalOverlay_1hyzx_1", U = "_closin
                 /* @__PURE__ */ a(
                   "div",
                   {
-                    className: l.modalBody,
+                    className: `${l.modalBody} ${w || ""}`,
                     style: {
-                      overflowY: L ? "auto" : "hidden"
+                      overflowY: f ? "auto" : "hidden"
                     },
                     ref: _,
-                    children: /* @__PURE__ */ a(J.Provider, { value: i, children: b })
+                    children: /* @__PURE__ */ a(c.Provider, { value: i, children: b })
                   }
                 ),
-                (z || C) && /* @__PURE__ */ a(
+                (C || N) && /* @__PURE__ */ a(
                   "div",
                   {
-                    className: `${l.modalFooter} ${W ? l.withBorder : ""}`,
-                    children: /* @__PURE__ */ h(
+                    className: `${l.modalFooter} ${j ? l.withBorder : ""}`,
+                    children: /* @__PURE__ */ o(
                       "div",
                       {
-                        className: `${l.buttonsDiv} ${O ? l.fullWidthFooter : ""}`,
+                        className: `${l.buttonsDiv} ${T ? l.fullWidthFooter : ""} ${z || ""}`,
                         children: [
-                          z && /* @__PURE__ */ a(
-                            E,
+                          C && /* @__PURE__ */ a(
+                            S,
                             {
                               variant: (e == null ? void 0 : e.variant) || "outline",
-                              onClick: P,
+                              onClick: M,
                               disabled: (e == null ? void 0 : e.disabled) || !1,
                               size: (e == null ? void 0 : e.size) || "small",
                               loading: e == null ? void 0 : e.loading,
                               className: e == null ? void 0 : e.className,
+                              icon: e.icon,
                               fullWidth: !0,
                               children: (e == null ? void 0 : e.text) || "Cancelar"
                             }
                           ),
-                          C && /* @__PURE__ */ a(
-                            E,
+                          N && /* @__PURE__ */ a(
+                            S,
                             {
                               type: "submit",
                               form: s == null ? void 0 : s.id,
                               variant: (s == null ? void 0 : s.variant) || "brand",
-                              onClick: Y,
+                              onClick: Z,
                               disabled: (s == null ? void 0 : s.disabled) || !1,
                               size: (s == null ? void 0 : s.size) || "small",
                               loading: s == null ? void 0 : s.loading,
                               className: s == null ? void 0 : s.className,
+                              icon: s.icon,
                               fullWidth: !0,
                               children: (s == null ? void 0 : s.text) || "Confirmar"
                             }
@@ -159,7 +170,7 @@ import '../../assets/index7.css';const Q = "_modalOverlay_1hyzx_1", U = "_closin
               ]
             }
           ),
-          F
+          W
         ] })
       }
     ),
@@ -167,5 +178,5 @@ import '../../assets/index7.css';const Q = "_modalOverlay_1hyzx_1", U = "_closin
   ) : null;
 };
 export {
-  bs as Modal
+  zs as Modal
 };

package/package.json

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