qaema-ui 0.0.47 → 0.0.48
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.
- package/dist/components/DropDown.js +49 -49
- package/dist/components/DropDownWithTable/DropDownWithTable.js +57 -57
- package/dist/components/SummaryCard.js +13 -12
- package/dist/constants/breakPoints.constant.js +1 -1
- package/dist/hooks/useBreakpointCheck.js +10 -9
- package/dist/styles/Dropdown.styles.d.ts +1 -0
- package/dist/styles/Dropdown.styles.js +1 -1
- package/package.json +1 -1
|
@@ -1,62 +1,62 @@
|
|
|
1
1
|
import { j as r } from "../_virtual/jsx-runtime.js";
|
|
2
2
|
import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
|
|
3
|
-
import { FaTimes as
|
|
3
|
+
import { FaTimes as W, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
|
|
4
4
|
import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
|
|
5
|
-
import { useTheme as
|
|
6
|
-
import
|
|
5
|
+
import { useTheme as te } from "styled-components";
|
|
6
|
+
import le from "../hooks/useZIndex.js";
|
|
7
7
|
import { useQaemaCoreTranslation as ae } from "../i18n/i18n.js";
|
|
8
|
-
import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as
|
|
8
|
+
import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as z, SelectedTagsContainer as xe, SelectedTag as je } from "../styles/Dropdown.styles.js";
|
|
9
9
|
import { HelperTextWrapper as pe } from "./PhoneInputField.js";
|
|
10
10
|
import Se from "./SearchBar.js";
|
|
11
11
|
import me from "./Spinner.js";
|
|
12
|
-
import
|
|
12
|
+
import F from "./Typography.js";
|
|
13
13
|
const Le = (f) => {
|
|
14
14
|
const {
|
|
15
15
|
label: b,
|
|
16
16
|
options: m,
|
|
17
17
|
// value,
|
|
18
|
-
placeholder:
|
|
19
|
-
optional:
|
|
18
|
+
placeholder: H = "Select Something",
|
|
19
|
+
optional: M = !1,
|
|
20
20
|
error: s = "",
|
|
21
|
-
disabled:
|
|
21
|
+
disabled: h = !1,
|
|
22
22
|
selectIdentifier: D,
|
|
23
|
-
keyIdentifier:
|
|
23
|
+
keyIdentifier: v = "id",
|
|
24
24
|
selectCallBack: j,
|
|
25
|
-
showLeadIcon:
|
|
26
|
-
icon:
|
|
27
|
-
allowSearch:
|
|
28
|
-
searchHandler:
|
|
29
|
-
searchPlaceholder:
|
|
25
|
+
showLeadIcon: N,
|
|
26
|
+
icon: P,
|
|
27
|
+
allowSearch: R,
|
|
28
|
+
searchHandler: A,
|
|
29
|
+
searchPlaceholder: B,
|
|
30
30
|
onToggle: o,
|
|
31
31
|
multiSelect: c = !1,
|
|
32
|
-
isLoading:
|
|
32
|
+
isLoading: Q = !1,
|
|
33
33
|
currentSelectedOptions: y = [],
|
|
34
34
|
isInteractive: I = !1,
|
|
35
|
-
endIcon:
|
|
36
|
-
} = f, u = g(null), p = g(null), d =
|
|
35
|
+
endIcon: T
|
|
36
|
+
} = f, u = g(null), p = g(null), d = te(), { t: k } = ae(), U = g(null), [a, x] = w(y), [i, O] = w(!1), [Z, q] = w(0), $ = P ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = le("dropdown"), S = _(() => {
|
|
37
37
|
var e, n;
|
|
38
38
|
(e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && q(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
|
|
39
39
|
}, []);
|
|
40
40
|
C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
|
|
41
|
-
|
|
41
|
+
x(y);
|
|
42
42
|
}, [y]);
|
|
43
|
-
const J = (e, n,
|
|
43
|
+
const J = (e, n, t, l = "default") => t ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : l === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, E = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[v] === e.value[v] : n.value === e.value), K = (e) => {
|
|
44
44
|
if (c) {
|
|
45
|
-
const n =
|
|
46
|
-
let
|
|
47
|
-
n ?
|
|
45
|
+
const n = E(e);
|
|
46
|
+
let t;
|
|
47
|
+
n ? t = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[v] !== e.value[v] : l.value !== e.value) : t = [...a, e], x(t), j(t.map((l) => l.value));
|
|
48
48
|
} else
|
|
49
|
-
|
|
49
|
+
x([e]), j(e.value);
|
|
50
50
|
}, V = (e) => {
|
|
51
|
-
const n = a.filter((
|
|
52
|
-
|
|
51
|
+
const n = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[v] !== e.value[v] : t.value !== e.value);
|
|
52
|
+
x(n), j(n.map((t) => t.value));
|
|
53
53
|
}, X = () => {
|
|
54
54
|
var e;
|
|
55
|
-
return a.length === 0 ?
|
|
55
|
+
return a.length === 0 ? H : c ? `${a.length} ${k("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
|
|
56
56
|
};
|
|
57
57
|
C(() => {
|
|
58
58
|
const e = (n) => {
|
|
59
|
-
p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (
|
|
59
|
+
p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (O(!1), o == null || o(!1));
|
|
60
60
|
};
|
|
61
61
|
return i && document.addEventListener("mousedown", e), () => {
|
|
62
62
|
document.removeEventListener("mousedown", e);
|
|
@@ -66,47 +66,47 @@ const Le = (f) => {
|
|
|
66
66
|
return /* @__PURE__ */ r.jsxs(se, { children: [
|
|
67
67
|
b && /* @__PURE__ */ r.jsxs(oe, { children: [
|
|
68
68
|
/* @__PURE__ */ r.jsx("label", { children: b }),
|
|
69
|
-
|
|
69
|
+
M && /* @__PURE__ */ r.jsx("span", { children: k("OPTIONAL") })
|
|
70
70
|
] }),
|
|
71
71
|
/* @__PURE__ */ r.jsxs(
|
|
72
72
|
ce,
|
|
73
73
|
{
|
|
74
74
|
show: i,
|
|
75
75
|
onToggle: () => {
|
|
76
|
-
o == null || o(!i),
|
|
76
|
+
o == null || o(!i), O((e) => !e);
|
|
77
77
|
},
|
|
78
78
|
placement: "bottom-start",
|
|
79
79
|
autoClose: c ? "outside" : !0,
|
|
80
80
|
children: [
|
|
81
|
-
/* @__PURE__ */ r.jsx(ue, { disabled:
|
|
81
|
+
/* @__PURE__ */ r.jsx(ue, { disabled: h, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !s, $isInteractive: I, $hasDyncWidth: !h, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
|
|
82
82
|
/* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
|
|
83
|
-
|
|
83
|
+
N && typeof $ == "function" && /* @__PURE__ */ r.jsx($, {}),
|
|
84
84
|
/* @__PURE__ */ r.jsx(
|
|
85
|
-
|
|
85
|
+
F,
|
|
86
86
|
{
|
|
87
87
|
component: "span",
|
|
88
88
|
variant: "mdText",
|
|
89
|
-
color: J(s, a.length > 0,
|
|
89
|
+
color: J(s, a.length > 0, h, f.variant || "default"),
|
|
90
90
|
children: X()
|
|
91
91
|
}
|
|
92
92
|
)
|
|
93
93
|
] }),
|
|
94
|
-
/* @__PURE__ */ r.jsxs(ie, { children: [
|
|
95
|
-
|
|
96
|
-
!c && a.length > 0 && !
|
|
97
|
-
|
|
94
|
+
(T || !h) && /* @__PURE__ */ r.jsxs(ie, { children: [
|
|
95
|
+
T,
|
|
96
|
+
!c && a.length > 0 && !h && /* @__PURE__ */ r.jsx(
|
|
97
|
+
W,
|
|
98
98
|
{
|
|
99
99
|
style: { cursor: "pointer", marginLeft: "0.5rem" },
|
|
100
100
|
onClick: (e) => {
|
|
101
|
-
e.stopPropagation(),
|
|
101
|
+
e.stopPropagation(), x([]), j(c ? [] : "");
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
),
|
|
105
|
-
!
|
|
105
|
+
!h && /* @__PURE__ */ r.jsx(ee, {})
|
|
106
106
|
] })
|
|
107
107
|
] }) }) }),
|
|
108
108
|
i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
|
|
109
|
-
|
|
109
|
+
R && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: B, onSearch: A }) }),
|
|
110
110
|
/* @__PURE__ */ r.jsxs(
|
|
111
111
|
ve,
|
|
112
112
|
{
|
|
@@ -117,23 +117,23 @@ const Le = (f) => {
|
|
|
117
117
|
},
|
|
118
118
|
children: [
|
|
119
119
|
m == null ? void 0 : m.map((e) => {
|
|
120
|
-
var
|
|
121
|
-
const n =
|
|
120
|
+
var t, l, L;
|
|
121
|
+
const n = E(e);
|
|
122
122
|
return /* @__PURE__ */ r.jsxs(
|
|
123
|
-
|
|
123
|
+
z,
|
|
124
124
|
{
|
|
125
125
|
onClick: () => K(e),
|
|
126
126
|
$selected: n,
|
|
127
127
|
children: [
|
|
128
128
|
c && (n ? /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
|
|
129
129
|
" ",
|
|
130
|
-
/* @__PURE__ */ r.jsx(
|
|
130
|
+
/* @__PURE__ */ r.jsx(F, { variant: "smText", children: e == null ? void 0 : e.label })
|
|
131
131
|
]
|
|
132
132
|
},
|
|
133
|
-
typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (
|
|
133
|
+
typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t[D]) == null ? void 0 : l.toString() : (L = e == null ? void 0 : e.value) == null ? void 0 : L.toString()
|
|
134
134
|
);
|
|
135
135
|
}),
|
|
136
|
-
|
|
136
|
+
Q && /* @__PURE__ */ r.jsx(z, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
|
|
137
137
|
]
|
|
138
138
|
}
|
|
139
139
|
)
|
|
@@ -142,16 +142,16 @@ const Le = (f) => {
|
|
|
142
142
|
}
|
|
143
143
|
),
|
|
144
144
|
c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
|
|
145
|
-
var n,
|
|
145
|
+
var n, t, l;
|
|
146
146
|
return /* @__PURE__ */ r.jsxs(
|
|
147
147
|
je,
|
|
148
148
|
{
|
|
149
149
|
children: [
|
|
150
150
|
e.label,
|
|
151
|
-
/* @__PURE__ */ r.jsx(
|
|
151
|
+
/* @__PURE__ */ r.jsx(W, { onClick: () => V(e) })
|
|
152
152
|
]
|
|
153
153
|
},
|
|
154
|
-
typeof (e == null ? void 0 : e.value) == "object" ? (
|
|
154
|
+
typeof (e == null ? void 0 : e.value) == "object" ? (t = (n = e == null ? void 0 : e.value) == null ? void 0 : n[D]) == null ? void 0 : t.toString() : (l = e == null ? void 0 : e.value) == null ? void 0 : l.toString()
|
|
155
155
|
);
|
|
156
156
|
}) }),
|
|
157
157
|
Y()
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as t } from "../../_virtual/jsx-runtime.js";
|
|
2
2
|
import { useRef as g, useState as v, useCallback as oe, useEffect as D } from "react";
|
|
3
3
|
import { createPortal as le } from "react-dom";
|
|
4
|
-
import { FaTimes as
|
|
4
|
+
import { FaTimes as R, FaAngleDown as ie } from "../../node_modules/react-icons/fa/index.js";
|
|
5
5
|
import { useTheme as se } from "styled-components";
|
|
6
6
|
import { HelperTextWrapper as ae } from "../PhoneInputField.js";
|
|
7
7
|
import ce from "../SearchBar.js";
|
|
@@ -14,32 +14,32 @@ import Te from "./Table/Table.js";
|
|
|
14
14
|
const Ne = (d) => {
|
|
15
15
|
const {
|
|
16
16
|
label: T,
|
|
17
|
-
options:
|
|
18
|
-
placeholder:
|
|
19
|
-
optional:
|
|
17
|
+
options: P,
|
|
18
|
+
placeholder: W = "Select Something",
|
|
19
|
+
optional: z = !1,
|
|
20
20
|
error: s = "",
|
|
21
|
-
disabled:
|
|
21
|
+
disabled: f = !1,
|
|
22
22
|
selectIdentifier: j,
|
|
23
23
|
keyIdentifier: r = "id",
|
|
24
24
|
selectCallBack: w,
|
|
25
|
-
showLeadIcon:
|
|
26
|
-
icon:
|
|
27
|
-
allowSearch:
|
|
28
|
-
searchHandler:
|
|
29
|
-
searchPlaceholder:
|
|
25
|
+
showLeadIcon: F,
|
|
26
|
+
icon: H,
|
|
27
|
+
allowSearch: M,
|
|
28
|
+
searchHandler: N,
|
|
29
|
+
searchPlaceholder: B,
|
|
30
30
|
onToggle: i,
|
|
31
|
-
multiSelect:
|
|
32
|
-
isLoading:
|
|
33
|
-
currentSelectedOptions:
|
|
31
|
+
multiSelect: m = !1,
|
|
32
|
+
isLoading: A = !1,
|
|
33
|
+
currentSelectedOptions: p = [],
|
|
34
34
|
isInteractive: I = !1,
|
|
35
35
|
//Table related props
|
|
36
|
-
columns:
|
|
37
|
-
isTableHeadVisible:
|
|
36
|
+
columns: V,
|
|
37
|
+
isTableHeadVisible: Q = !1,
|
|
38
38
|
getDisplayValue: y,
|
|
39
|
-
isRowDisabled:
|
|
40
|
-
rowClassName:
|
|
41
|
-
endIcon:
|
|
42
|
-
} = d,
|
|
39
|
+
isRowDisabled: X,
|
|
40
|
+
rowClassName: Y,
|
|
41
|
+
endIcon: E
|
|
42
|
+
} = d, x = se(), { t: L } = me(), C = g(null), a = g(null), Z = g(null), q = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [G, J] = v(0), [$, K] = v({ top: 0, left: 0 }), [l, S] = v(p), O = H ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), U = fe("dropdown"), h = oe(() => {
|
|
43
43
|
if (a != null && a.current) {
|
|
44
44
|
const e = a.current.getBoundingClientRect();
|
|
45
45
|
J(a.current.offsetWidth / 16), K({
|
|
@@ -48,28 +48,28 @@ const Ne = (d) => {
|
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
}, []);
|
|
51
|
-
D(() => (u && (
|
|
52
|
-
window.removeEventListener("resize",
|
|
53
|
-
}), [u,
|
|
51
|
+
D(() => (u && (h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0)), () => {
|
|
52
|
+
window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
|
|
53
|
+
}), [u, h]), D(() => {
|
|
54
54
|
if (!q.current) return;
|
|
55
|
-
(
|
|
55
|
+
(p.length !== l.length || p.some((n, o) => {
|
|
56
56
|
var c;
|
|
57
57
|
return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
|
|
58
|
-
})) &&
|
|
59
|
-
}, [
|
|
60
|
-
const _ = (e, n, o, c = "default") => o ?
|
|
61
|
-
if (
|
|
62
|
-
const n =
|
|
58
|
+
})) && S(p);
|
|
59
|
+
}, [p]);
|
|
60
|
+
const _ = (e, n, o, c = "default") => o ? x.colors.grey.n400 : e ? x.colors.state.error.n450 : n ? x.colors.primary.dark.n600 : c === "light-primary" ? x.colors.primary.purple.n450 : x.colors.grey.n300, k = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), ee = (e) => {
|
|
61
|
+
if (m) {
|
|
62
|
+
const n = k(e);
|
|
63
63
|
let o;
|
|
64
|
-
n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e],
|
|
64
|
+
n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], S(o), w(o);
|
|
65
65
|
} else
|
|
66
|
-
|
|
66
|
+
S([e]), w(e), b(!1), i == null || i(!1);
|
|
67
67
|
}, te = (e) => {
|
|
68
68
|
const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
|
|
69
|
-
|
|
69
|
+
S(n), w(n);
|
|
70
70
|
}, ne = (e) => {
|
|
71
|
-
if (e.length === 0) return
|
|
72
|
-
if (!
|
|
71
|
+
if (e.length === 0) return W;
|
|
72
|
+
if (!m) {
|
|
73
73
|
const n = e[0];
|
|
74
74
|
if (y)
|
|
75
75
|
return y(n);
|
|
@@ -78,7 +78,7 @@ const Ne = (d) => {
|
|
|
78
78
|
if (r)
|
|
79
79
|
return String(n == null ? void 0 : n[r]);
|
|
80
80
|
}
|
|
81
|
-
return `${e.length} ${
|
|
81
|
+
return `${e.length} ${L("SELECTED")}`;
|
|
82
82
|
};
|
|
83
83
|
D(() => {
|
|
84
84
|
const e = (n) => {
|
|
@@ -92,7 +92,7 @@ const Ne = (d) => {
|
|
|
92
92
|
return /* @__PURE__ */ t.jsxs(he, { children: [
|
|
93
93
|
T && /* @__PURE__ */ t.jsxs(pe, { children: [
|
|
94
94
|
/* @__PURE__ */ t.jsx("label", { children: T }),
|
|
95
|
-
|
|
95
|
+
z && /* @__PURE__ */ t.jsx("span", { children: L("OPTIONAL") })
|
|
96
96
|
] }),
|
|
97
97
|
/* @__PURE__ */ t.jsxs(
|
|
98
98
|
xe,
|
|
@@ -102,33 +102,33 @@ const Ne = (d) => {
|
|
|
102
102
|
i == null || i(!u), b((e) => !e);
|
|
103
103
|
},
|
|
104
104
|
placement: "bottom-start",
|
|
105
|
-
autoClose:
|
|
105
|
+
autoClose: m ? "outside" : !0,
|
|
106
106
|
children: [
|
|
107
|
-
/* @__PURE__ */ t.jsx(Se, { disabled:
|
|
107
|
+
/* @__PURE__ */ t.jsx(Se, { disabled: f, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(je, { $valid: !s, $isInteractive: I, $hasDyncWidth: !f, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
|
|
108
108
|
/* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
|
|
109
|
-
|
|
109
|
+
F && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
|
|
110
110
|
/* @__PURE__ */ t.jsx(
|
|
111
111
|
ue,
|
|
112
112
|
{
|
|
113
113
|
component: "span",
|
|
114
114
|
variant: "mdText",
|
|
115
|
-
color: _(s, l.length > 0,
|
|
115
|
+
color: _(s, l.length > 0, f, d.variant || "default"),
|
|
116
116
|
children: ne(l)
|
|
117
117
|
}
|
|
118
118
|
)
|
|
119
119
|
] }),
|
|
120
|
-
/* @__PURE__ */ t.jsxs(we, { children: [
|
|
121
|
-
|
|
122
|
-
!
|
|
123
|
-
|
|
120
|
+
(E || !f) && /* @__PURE__ */ t.jsxs(we, { children: [
|
|
121
|
+
E,
|
|
122
|
+
!m && l.length > 0 && !f && /* @__PURE__ */ t.jsx(
|
|
123
|
+
R,
|
|
124
124
|
{
|
|
125
125
|
style: { cursor: "pointer", marginLeft: "0.5rem" },
|
|
126
126
|
onClick: (e) => {
|
|
127
|
-
e.stopPropagation(),
|
|
127
|
+
e.stopPropagation(), S([]), w(m ? [] : null);
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
),
|
|
131
|
-
!
|
|
131
|
+
!f && /* @__PURE__ */ t.jsx(ie, {})
|
|
132
132
|
] })
|
|
133
133
|
] }) }) }),
|
|
134
134
|
u && le(
|
|
@@ -140,11 +140,11 @@ const Ne = (d) => {
|
|
|
140
140
|
$zIndex: U,
|
|
141
141
|
style: {
|
|
142
142
|
position: "fixed",
|
|
143
|
-
top: `${
|
|
144
|
-
left: `${
|
|
143
|
+
top: `${$.top}px`,
|
|
144
|
+
left: `${$.left}px`
|
|
145
145
|
},
|
|
146
146
|
children: [
|
|
147
|
-
|
|
147
|
+
M && /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(ce, { placeholder: B, onSearch: N }) }),
|
|
148
148
|
/* @__PURE__ */ t.jsxs(
|
|
149
149
|
ve,
|
|
150
150
|
{
|
|
@@ -158,16 +158,16 @@ const Ne = (d) => {
|
|
|
158
158
|
Te,
|
|
159
159
|
{
|
|
160
160
|
keyField: r,
|
|
161
|
-
data:
|
|
162
|
-
columns:
|
|
161
|
+
data: P,
|
|
162
|
+
columns: V,
|
|
163
163
|
onRowClick: (e) => ee(e),
|
|
164
|
-
isRowSelected: (e) =>
|
|
165
|
-
isTableHeadVisible:
|
|
166
|
-
isRowDisabled:
|
|
167
|
-
rowClassName:
|
|
164
|
+
isRowSelected: (e) => k(e),
|
|
165
|
+
isTableHeadVisible: Q,
|
|
166
|
+
isRowDisabled: X,
|
|
167
|
+
rowClassName: Y
|
|
168
168
|
}
|
|
169
169
|
),
|
|
170
|
-
|
|
170
|
+
A && /* @__PURE__ */ t.jsx(Ce, { children: /* @__PURE__ */ t.jsx(de, {}) })
|
|
171
171
|
]
|
|
172
172
|
}
|
|
173
173
|
)
|
|
@@ -179,9 +179,9 @@ const Ne = (d) => {
|
|
|
179
179
|
]
|
|
180
180
|
}
|
|
181
181
|
),
|
|
182
|
-
|
|
182
|
+
m && l.length > 0 && /* @__PURE__ */ t.jsx(be, { children: l.map((e) => /* @__PURE__ */ t.jsxs(De, { children: [
|
|
183
183
|
y ? y(e) : String(j ? e[j] : e[r]),
|
|
184
|
-
/* @__PURE__ */ t.jsx(
|
|
184
|
+
/* @__PURE__ */ t.jsx(R, { onClick: () => te(e) })
|
|
185
185
|
] }, String(e[r]))) }),
|
|
186
186
|
re()
|
|
187
187
|
] });
|
|
@@ -3,8 +3,8 @@ import i, { useTheme as y } from "styled-components";
|
|
|
3
3
|
import v from "./AmountItem.js";
|
|
4
4
|
import w from "./Badge.js";
|
|
5
5
|
import j from "./Button.js";
|
|
6
|
-
import
|
|
7
|
-
import { Card as
|
|
6
|
+
import $ from "./CallOutBox.js";
|
|
7
|
+
import { Card as T } from "./Card.js";
|
|
8
8
|
import d from "./Typography.js";
|
|
9
9
|
const S = i.div`
|
|
10
10
|
padding-bottom: ${(r) => r.theme.spacing.s};
|
|
@@ -28,11 +28,12 @@ const S = i.div`
|
|
|
28
28
|
display: flex;
|
|
29
29
|
flex-direction: column;
|
|
30
30
|
gap: ${(r) => r.theme.spacing.s};
|
|
31
|
-
`,
|
|
31
|
+
`, g = i.div`
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: space-between;
|
|
34
34
|
align-items: center;
|
|
35
|
-
|
|
35
|
+
gap: ${(r) => r.theme.spacing.xs};
|
|
36
|
+
`, E = i(g)``, f = ({
|
|
36
37
|
variant: r = "text",
|
|
37
38
|
label: o,
|
|
38
39
|
value: l,
|
|
@@ -44,8 +45,8 @@ const S = i.div`
|
|
|
44
45
|
const n = l;
|
|
45
46
|
t = /* @__PURE__ */ e.jsx(w, { ...n });
|
|
46
47
|
} else if (r === "trend") {
|
|
47
|
-
const n = typeof l == "object" && l !== null ? l : { value: l }, a = n.direction ?? "neutral", c = x.colors.state.success.n450, s = x.colors.state.error.n450,
|
|
48
|
-
t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color:
|
|
48
|
+
const n = typeof l == "object" && l !== null ? l : { value: l }, a = n.direction ?? "neutral", c = x.colors.state.success.n450, s = x.colors.state.error.n450, h = a === "up" ? c : a === "down" ? s : p;
|
|
49
|
+
t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color: h, children: typeof n.value == "number" ? n.value.toString() : n.value });
|
|
49
50
|
} else if (r === "component")
|
|
50
51
|
t = l;
|
|
51
52
|
else if (r === "amount") {
|
|
@@ -71,7 +72,7 @@ function z({
|
|
|
71
72
|
callout: a
|
|
72
73
|
}) {
|
|
73
74
|
const c = y();
|
|
74
|
-
return /* @__PURE__ */ e.jsxs(
|
|
75
|
+
return /* @__PURE__ */ e.jsxs(T, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${c.colors.grey.n100}`, children: [
|
|
75
76
|
/* @__PURE__ */ e.jsxs(S, { children: [
|
|
76
77
|
/* @__PURE__ */ e.jsxs(B, { children: [
|
|
77
78
|
/* @__PURE__ */ e.jsx(d, { variant: "h6", weight: "semiBold", children: l }),
|
|
@@ -83,16 +84,16 @@ function z({
|
|
|
83
84
|
/* @__PURE__ */ e.jsx(d, { variant: "caption", color: c.colors.grey.n400, children: p })
|
|
84
85
|
] }),
|
|
85
86
|
/* @__PURE__ */ e.jsxs(R, { children: [
|
|
86
|
-
r.map((s,
|
|
87
|
-
var
|
|
88
|
-
return ((
|
|
87
|
+
r.map((s, u) => {
|
|
88
|
+
var h;
|
|
89
|
+
return ((h = s == null ? void 0 : s.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ e.jsxs(V, { children: [
|
|
89
90
|
/* @__PURE__ */ e.jsx(d, { variant: "span", weight: "regular", color: c.colors.grey.n400, children: s.title }),
|
|
90
|
-
s.items.map((m,
|
|
91
|
+
s.items.map((m, b) => /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(f, { variant: m == null ? void 0 : m.variant, label: m.label, value: m.value, color: c.colors.grey.n400 }) }, `${u}-${b}`))
|
|
91
92
|
] }, s.title);
|
|
92
93
|
}),
|
|
93
94
|
o && /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(f, { variant: o == null ? void 0 : o.variant, label: (o == null ? void 0 : o.label) ?? "", value: (o == null ? void 0 : o.value) ?? "", color: c.colors.grey.n400 }) }),
|
|
94
95
|
n && (n == null ? void 0 : n.length) > 0 && n.map((s) => /* @__PURE__ */ e.jsx(j, { ...s == null ? void 0 : s.btnConfig, children: (s == null ? void 0 : s.label) ?? "" })),
|
|
95
|
-
a && /* @__PURE__ */ e.jsx(
|
|
96
|
+
a && /* @__PURE__ */ e.jsx($, { callout: a })
|
|
96
97
|
] })
|
|
97
98
|
] });
|
|
98
99
|
}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { useState as r, useEffect as s } from "react";
|
|
2
|
+
import { breakPoints as o } from "../constants/breakPoints.constant.js";
|
|
3
|
+
const a = (e = o.tablet) => {
|
|
4
|
+
const [i, n] = r(() => window.innerWidth <= e);
|
|
5
|
+
return s(() => {
|
|
6
|
+
const t = () => {
|
|
7
|
+
n(window.innerWidth <= e);
|
|
7
8
|
};
|
|
8
|
-
return window.addEventListener("resize",
|
|
9
|
-
}, [e]),
|
|
9
|
+
return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
|
|
10
|
+
}, [e]), i;
|
|
10
11
|
};
|
|
11
12
|
export {
|
|
12
|
-
|
|
13
|
+
a as default
|
|
13
14
|
};
|
|
@@ -20,6 +20,7 @@ export declare const StyledDropDownToggle: import("styled-components/dist/types"
|
|
|
20
20
|
export declare const StyledDropDownTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
21
21
|
$valid: boolean;
|
|
22
22
|
$isInteractive: boolean;
|
|
23
|
+
$hasDyncWidth: boolean;
|
|
23
24
|
}>> & string;
|
|
24
25
|
export declare const StyledDropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap").DropdownMenuProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap").DropdownMenuProps & {
|
|
25
26
|
children?: import("react").ReactNode | undefined;
|
|
@@ -105,7 +105,7 @@ const x = r.div`
|
|
|
105
105
|
justify-content: space-between;
|
|
106
106
|
align-items: center;
|
|
107
107
|
gap: ${({ theme: o }) => `${o.spacing.s}`};
|
|
108
|
-
width: calc(100% - 2.688rem);
|
|
108
|
+
width: ${({ $hasDyncWidth: o }) => o ? "calc(100% - 2.688rem)" : "100%"};
|
|
109
109
|
span {
|
|
110
110
|
display: block;
|
|
111
111
|
width: 100%;
|