bmi-next-brokers 1.1.8 → 1.1.9

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.
@@ -1 +1 @@
1
- ._modalOverlay_t7516_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_t7516_1 .25s ease-in-out forwards;overflow:hidden}._modalOverlay_t7516_1._closing_t7516_15{animation:_overlayFadeOut_t7516_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_t7516_1{0%{opacity:0}to{opacity:1}}@keyframes _overlayFadeOut_t7516_1{0%{opacity:1}to{opacity:0}}._modal_t7516_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px)}._modalHeader_t7516_47{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalHeader_t7516_47._withBorder_t7516_55{border-bottom:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._modalTitle_t7516_60{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_t7516_71{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_t7516_84{flex:1;overflow-y:auto;padding:0 16px 16px}._modalBody_t7516_84::-webkit-scrollbar{display:none}._modalFooter_t7516_94._withBorder_t7516_55{border-top:1px solid var(--Blacks-Transparencias-Black-20, rgba(0, 0, 0, .2))}._buttonsDiv_t7516_99{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._buttonsDiv_t7516_99 :only-child{grid-column:2}
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}
@@ -7,7 +7,7 @@ export interface IconConfig {
7
7
  name: IconName;
8
8
  position: "before" | "after";
9
9
  }
10
- export interface ButtonProps {
10
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
11
11
  children: React.ReactNode;
12
12
  variant?: ButtonVariant;
13
13
  size?: ButtonSize;
@@ -8,6 +8,7 @@ type ModalButtonProps = {
8
8
  size?: ButtonSize;
9
9
  variant?: ButtonVariant;
10
10
  loading?: boolean;
11
+ id?: string;
11
12
  };
12
13
  /**
13
14
  * Props del Modal
@@ -24,6 +25,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
24
25
  onClickOverlay?: (() => Promise<void> | void) | false;
25
26
  onClose?: (() => Promise<void> | void) | false;
26
27
  closeModal: () => void;
28
+ withScroll?: boolean;
27
29
  }
28
30
  /**
29
31
  * Modal con overlay, header, body y footer configurable.
@@ -76,6 +78,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
76
78
  * variant: "brand",
77
79
  * size: "small",
78
80
  * loading: false
81
+ * id: "form"
79
82
  * }}
80
83
  * cancelButton={{
81
84
  * show: false, // no se renderiza
@@ -1,82 +1,85 @@
1
- import { jsx as l, jsxs as c } from "react/jsx-runtime";
2
- import { useRef as b, useState as p, useEffect as A } from "react";
3
- import { Icon as F } from "../../icons/Icon.js";
4
- import { useScrollLock as L } from "../../hooks/useScrollLock.js";
5
- import { Button as C } from "../Button/Button.js";
6
- import { r as j } from "../../index-CGDUIzcq.js";
7
- import '../../assets/index7.css';const V = "_modalOverlay_t7516_1", W = "_closing_t7516_15", X = "_modal_t7516_1", Y = "_modalHeader_t7516_47", Z = "_withBorder_t7516_55", B = "_modalTitle_t7516_60", M = "_closeIcon_t7516_71", P = "_modalBody_t7516_84", q = "_modalFooter_t7516_94", G = "_buttonsDiv_t7516_99", e = {
8
- modalOverlay: V,
9
- closing: W,
10
- modal: X,
11
- modalHeader: Y,
12
- withBorder: Z,
1
+ import { jsx as a, jsxs as n } from "react/jsx-runtime";
2
+ import { useRef as g, useState as m, useEffect as Y } from "react";
3
+ import { Icon as j } from "../../icons/Icon.js";
4
+ import { useScrollLock as V } from "../../hooks/useScrollLock.js";
5
+ import { Button as p } from "../Button/Button.js";
6
+ import { r as W } from "../../index-CGDUIzcq.js";
7
+ import '../../assets/index7.css';const X = "_modalOverlay_1347c_1", Z = "_closing_1347c_15", M = "_modal_1347c_1", P = "_modalHeader_1347c_48", q = "_withBorder_1347c_56", B = "_modalTitle_1347c_61", G = "_closeIcon_1347c_72", J = "_modalBody_1347c_85", K = "_modalFooter_1347c_96", Q = "_buttonsDiv_1347c_101", e = {
8
+ modalOverlay: X,
9
+ closing: Z,
10
+ modal: M,
11
+ modalHeader: P,
12
+ withBorder: q,
13
13
  modalTitle: B,
14
- closeIcon: M,
15
- modalBody: P,
16
- modalFooter: q,
17
- buttonsDiv: G
18
- }, le = ({
19
- isOpen: m,
20
- title: f,
21
- children: _,
22
- width: I = 752,
14
+ closeIcon: G,
15
+ modalBody: J,
16
+ modalFooter: K,
17
+ buttonsDiv: Q
18
+ }, re = ({
19
+ isOpen: f,
20
+ title: _,
21
+ children: h,
22
+ width: C = 752,
23
23
  confirmButton: o,
24
- cancelButton: a,
25
- zIndex: N,
26
- className: E,
27
- style: k,
28
- onClickOverlay: d,
24
+ cancelButton: l,
25
+ zIndex: E,
26
+ className: I,
27
+ style: N,
28
+ onClickOverlay: c,
29
29
  onClose: r,
30
- closeModal: O,
30
+ closeModal: S,
31
+ withScroll: H = !0,
31
32
  ...$
32
33
  }) => {
33
- const h = b(null), [x, v] = p(!1), n = b(null), [u, D] = p(!1);
34
- L(m);
34
+ const v = g(null), [k, u] = m(!1), d = g(null), [x, D] = m(!1), [O, T] = m(!1);
35
+ V(f);
35
36
  const i = () => {
36
- v(!0), setTimeout(() => {
37
- O(), v(!1);
37
+ u(!0), setTimeout(() => {
38
+ S(), u(!1);
38
39
  }, 250);
39
- }, H = async (s) => {
40
+ }, z = async (s) => {
40
41
  var t;
41
- (t = h.current) != null && t.contains(s.target) || d !== !1 && (typeof d == "function" && await d(), i());
42
- }, z = async () => {
43
- r !== !1 && (typeof r == "function" && await r(), i());
42
+ (t = v.current) != null && t.contains(s.target) || c !== !1 && (typeof c == "function" && await c(), i());
44
43
  }, R = async () => {
44
+ r !== !1 && (typeof r == "function" && await r(), i());
45
+ }, L = async () => {
45
46
  o.action && await o.action(), i();
46
- }, S = async () => {
47
- a.action && await a.action(), i();
48
- }, y = a.show ?? !0, w = o.show ?? !0, T = `${e.modal} ${E || ""}`;
49
- return A(() => {
50
- if (!n.current) return;
51
- const s = n.current, t = () => {
52
- D(s.scrollHeight > s.clientHeight);
47
+ }, A = async () => {
48
+ l.action && await l.action(), i();
49
+ }, y = l.show ?? !0, w = o.show ?? !0, F = `${e.modal} ${I || ""}`;
50
+ return Y(() => {
51
+ if (!d.current) return;
52
+ const s = d.current, t = () => {
53
+ T(s.scrollTop > 0), D(s.scrollHeight > s.clientHeight);
53
54
  };
54
- t();
55
- const g = new ResizeObserver(t);
56
- return g.observe(s), () => g.disconnect();
57
- }, [_]), m ? j.createPortal(
58
- /* @__PURE__ */ l(
55
+ t(), s.addEventListener("scroll", t);
56
+ const b = new ResizeObserver(t);
57
+ return b.observe(s), () => {
58
+ s.removeEventListener("scroll", t), b.disconnect();
59
+ };
60
+ }, [h]), f ? W.createPortal(
61
+ /* @__PURE__ */ a(
59
62
  "div",
60
63
  {
61
- className: `${e.modalOverlay} ${x ? e.closing : ""}`,
62
- style: { zIndex: 3e3 + (N || 0) },
63
- onClick: H,
64
- children: /* @__PURE__ */ c(
64
+ className: `${e.modalOverlay} ${k ? e.closing : ""}`,
65
+ style: { zIndex: 3e3 + (E || 0) },
66
+ onClick: z,
67
+ children: /* @__PURE__ */ n(
65
68
  "div",
66
69
  {
67
- className: T,
68
- style: { width: I, ...k },
69
- ref: h,
70
+ className: F,
71
+ style: { width: C, ...N },
72
+ ref: v,
70
73
  ...$,
71
74
  children: [
72
- /* @__PURE__ */ c(
75
+ /* @__PURE__ */ n(
73
76
  "div",
74
77
  {
75
- className: `${e.modalHeader} ${u ? e.withBorder : ""}`,
78
+ className: `${e.modalHeader} ${O ? e.withBorder : ""}`,
76
79
  children: [
77
- f && /* @__PURE__ */ l("span", { className: e.modalTitle, children: f }),
78
- r !== !1 && /* @__PURE__ */ l("div", { className: e.closeIcon, onClick: z, children: /* @__PURE__ */ l(
79
- F,
80
+ _ && /* @__PURE__ */ a("span", { className: e.modalTitle, children: _ }),
81
+ r !== !1 && /* @__PURE__ */ a("div", { className: e.closeIcon, onClick: R, children: /* @__PURE__ */ a(
82
+ j,
80
83
  {
81
84
  name: "Close",
82
85
  width: 12,
@@ -87,29 +90,41 @@ import '../../assets/index7.css';const V = "_modalOverlay_t7516_1", W = "_closin
87
90
  ]
88
91
  }
89
92
  ),
90
- /* @__PURE__ */ l("div", { className: e.modalBody, ref: n, children: _ }),
91
- (y || w) && /* @__PURE__ */ l(
93
+ /* @__PURE__ */ a(
94
+ "div",
95
+ {
96
+ className: e.modalBody,
97
+ style: {
98
+ overflowY: H ? "auto" : "hidden"
99
+ },
100
+ ref: d,
101
+ children: h
102
+ }
103
+ ),
104
+ (y || w) && /* @__PURE__ */ a(
92
105
  "div",
93
106
  {
94
- className: `${e.modalFooter} ${u ? e.withBorder : ""}`,
95
- children: /* @__PURE__ */ c("div", { className: e.buttonsDiv, children: [
96
- y && /* @__PURE__ */ l(
97
- C,
107
+ className: `${e.modalFooter} ${x ? e.withBorder : ""}`,
108
+ children: /* @__PURE__ */ n("div", { className: e.buttonsDiv, children: [
109
+ y && /* @__PURE__ */ a(
110
+ p,
98
111
  {
99
- variant: a.variant || "outline",
100
- onClick: S,
101
- disabled: a.disabled || !1,
102
- size: a.size || "small",
103
- loading: a.loading,
112
+ variant: l.variant || "outline",
113
+ onClick: A,
114
+ disabled: l.disabled || !1,
115
+ size: l.size || "small",
116
+ loading: l.loading,
104
117
  fullWidth: !0,
105
- children: a.text || "Cancelar"
118
+ children: l.text || "Cancelar"
106
119
  }
107
120
  ),
108
- w && /* @__PURE__ */ l(
109
- C,
121
+ w && /* @__PURE__ */ a(
122
+ p,
110
123
  {
124
+ type: "submit",
125
+ form: o.id,
111
126
  variant: o.variant || "brand",
112
- onClick: R,
127
+ onClick: L,
113
128
  disabled: o.disabled || !1,
114
129
  size: o.size || "small",
115
130
  loading: o.loading,
@@ -129,5 +144,5 @@ import '../../assets/index7.css';const V = "_modalOverlay_t7516_1", W = "_closin
129
144
  ) : null;
130
145
  };
131
146
  export {
132
- le as Modal
147
+ re as Modal
133
148
  };
@@ -1,10 +1,39 @@
1
- import { jsxs as s, jsx as r } from "react/jsx-runtime";
2
- const l = (a) => /* @__PURE__ */ s("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", width: "1em", height: "1em", ...a, children: [
3
- /* @__PURE__ */ r("mask", { id: "arrow_forward_svg__a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
4
- maskType: "alpha"
5
- }, children: /* @__PURE__ */ r("path", { fill: "currentColor", d: "M0 0h20v20H0z" }) }),
6
- /* @__PURE__ */ r("g", { mask: "url(#arrow_forward_svg__a)", children: /* @__PURE__ */ r("path", { fill: "#fff", d: "M13.48 10.835H3.334V9.168H13.48L8.813 4.502 10 3.335l6.667 6.667L10 16.668l-1.187-1.166z" }) })
7
- ] });
1
+ import { jsxs as e, jsx as r } from "react/jsx-runtime";
2
+ const s = (a) => /* @__PURE__ */ e(
3
+ "svg",
4
+ {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ fill: "none",
7
+ viewBox: "0 0 20 20",
8
+ width: "1em",
9
+ height: "1em",
10
+ ...a,
11
+ children: [
12
+ /* @__PURE__ */ r(
13
+ "mask",
14
+ {
15
+ id: "arrow_forward_svg__a",
16
+ width: 20,
17
+ height: 20,
18
+ x: 0,
19
+ y: 0,
20
+ maskUnits: "userSpaceOnUse",
21
+ style: {
22
+ maskType: "alpha"
23
+ },
24
+ children: /* @__PURE__ */ r("path", { fill: "currentColor", d: "M0 0h20v20H0z" })
25
+ }
26
+ ),
27
+ /* @__PURE__ */ r("g", { mask: "url(#arrow_forward_svg__a)", children: /* @__PURE__ */ r(
28
+ "path",
29
+ {
30
+ fill: "currentColor",
31
+ d: "M13.48 10.835H3.334V9.168H13.48L8.813 4.502 10 3.335l6.667 6.667L10 16.668l-1.187-1.166z"
32
+ }
33
+ ) })
34
+ ]
35
+ }
36
+ );
8
37
  export {
9
- l as default
38
+ s as default
10
39
  };
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": "1.1.8",
4
+ "version": "1.1.9",
5
5
  "author": "BMI Ahorro España",
6
6
  "contributors": [
7
7
  "José Ramón Jiménez <jrjimenez@bmicos.com>",