qaema-ui 0.0.23 → 0.0.24

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.
Files changed (3) hide show
  1. package/dist/components/DropDown.d.ts +1 -0
  2. package/dist/components/DropDown.js +40 -38
  3. package/package.json +1 -1
package/dist/components/DropDown.d.ts CHANGED
@@ -26,6 +26,7 @@ export type DropDownProps = {
26
26
  isInteractive?: boolean;
27
27
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
28
28
  variant?: 'light-primary' | 'default';
29
+ endIcon?: React.ReactNode;
29
30
  };
30
31
  declare const DropDown: React.FC<DropDownProps>;
31
32
  export default DropDown;
package/dist/components/DropDown.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { j as r } from "../_virtual/jsx-runtime.js";
2
- import { useRef as g, useState as w, useCallback as Y, useEffect as C } from "react";
3
- import { FaTimes as L, FaAngleDown as _ } from "../node_modules/react-icons/fa/index.js";
4
- import { ImCheckboxChecked as ee, ImCheckboxUnchecked as re } from "../node_modules/react-icons/im/index.js";
5
- import { useTheme as ne } from "styled-components";
6
- import le from "../hooks/useZIndex.js";
7
- import { useQaemaCoreTranslation as te } from "../i18n/i18n.js";
8
- import { StyledDropDownContainer as ae, StyledlabelContainer as se, StyledDropDown as oe, StyledDropDownToggle as ce, StyledDropDownTitle as ue, IconsContainer as de, StyledDropDownMenu as ie, SearchContainer as fe, StyledOptionsContainer as he, StyledDropItem as W, SelectedTagsContainer as ve, SelectedTag as xe } from "../styles/Dropdown.styles.js";
9
- import { HelperTextWrapper as je } from "./PhoneInputField.js";
10
- import pe from "./SearchBar.js";
11
- import Se from "./Spinner.js";
2
+ import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
3
+ import { FaTimes as L, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
4
+ import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
5
+ import { useTheme as le } from "styled-components";
6
+ import te from "../hooks/useZIndex.js";
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 W, SelectedTagsContainer as xe, SelectedTag as je } from "../styles/Dropdown.styles.js";
9
+ import { HelperTextWrapper as pe } from "./PhoneInputField.js";
10
+ import Se from "./SearchBar.js";
11
+ import me from "./Spinner.js";
12
12
  import z from "./Typography.js";
13
- const Ee = (f) => {
13
+ const Le = (f) => {
14
14
  const {
15
15
  label: b,
16
16
  options: m,
@@ -31,25 +31,26 @@ const Ee = (f) => {
31
31
  multiSelect: c = !1,
32
32
  isLoading: B = !1,
33
33
  currentSelectedOptions: y = [],
34
- isInteractive: I = !1
35
- } = f, u = g(null), p = g(null), d = ne(), { t: T } = te(), Q = g(null), [a, v] = w(y), [i, k] = w(!1), [U, Z] = w(0), O = N ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), q = le("dropdown"), S = Y(() => {
34
+ isInteractive: I = !1,
35
+ endIcon: Q
36
+ } = f, u = g(null), p = g(null), d = le(), { t: T } = ae(), U = g(null), [a, v] = w(y), [i, k] = w(!1), [Z, q] = w(0), O = N ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = te("dropdown"), S = _(() => {
36
37
  var e, n;
37
- (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && Z(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
38
+ (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && q(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
38
39
  }, []);
39
40
  C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
40
41
  v(y);
41
42
  }, [y]);
42
- const G = (e, n, l, t = "default") => l ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : t === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, $ = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[h] === e.value[h] : n.value === e.value), J = (e) => {
43
+ const J = (e, n, l, t = "default") => l ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : t === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, $ = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[h] === e.value[h] : n.value === e.value), K = (e) => {
43
44
  if (c) {
44
45
  const n = $(e);
45
46
  let l;
46
47
  n ? l = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[h] !== e.value[h] : t.value !== e.value) : l = [...a, e], v(l), j(l.map((t) => t.value));
47
48
  } else
48
49
  v([e]), j(e.value);
49
- }, K = (e) => {
50
+ }, V = (e) => {
50
51
  const n = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[h] !== e.value[h] : l.value !== e.value);
51
52
  v(n), j(n.map((l) => l.value));
52
- }, V = () => {
53
+ }, X = () => {
53
54
  var e;
54
55
  return a.length === 0 ? F : c ? `${a.length} ${T("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
55
56
  };
@@ -61,14 +62,14 @@ const Ee = (f) => {
61
62
  document.removeEventListener("mousedown", e);
62
63
  };
63
64
  }, [i, o]);
64
- const X = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(je, { error: s, children: s });
65
- return /* @__PURE__ */ r.jsxs(ae, { children: [
66
- b && /* @__PURE__ */ r.jsxs(se, { children: [
65
+ const Y = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(pe, { error: s, children: s });
66
+ return /* @__PURE__ */ r.jsxs(se, { children: [
67
+ b && /* @__PURE__ */ r.jsxs(oe, { children: [
67
68
  /* @__PURE__ */ r.jsx("label", { children: b }),
68
69
  H && /* @__PURE__ */ r.jsx("span", { children: T("OPTIONAL") })
69
70
  ] }),
70
71
  /* @__PURE__ */ r.jsxs(
71
- oe,
72
+ ce,
72
73
  {
73
74
  show: i,
74
75
  onToggle: () => {
@@ -77,7 +78,7 @@ const Ee = (f) => {
77
78
  placement: "bottom-start",
78
79
  autoClose: c ? "outside" : !0,
79
80
  children: [
80
- /* @__PURE__ */ r.jsx(ce, { disabled: x, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(ue, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
81
+ /* @__PURE__ */ r.jsx(ue, { disabled: x, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
81
82
  /* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
82
83
  M && typeof O == "function" && /* @__PURE__ */ r.jsx(O, {}),
83
84
  /* @__PURE__ */ r.jsx(
@@ -85,12 +86,13 @@ const Ee = (f) => {
85
86
  {
86
87
  component: "span",
87
88
  variant: "mdText",
88
- color: G(s, a.length > 0, x, f.variant || "default"),
89
- children: V()
89
+ color: J(s, a.length > 0, x, f.variant || "default"),
90
+ children: X()
90
91
  }
91
92
  )
92
93
  ] }),
93
- /* @__PURE__ */ r.jsxs(de, { children: [
94
+ /* @__PURE__ */ r.jsxs(ie, { children: [
95
+ Q,
94
96
  !c && a.length > 0 && !x && /* @__PURE__ */ r.jsx(
95
97
  L,
96
98
  {
@@ -100,15 +102,15 @@ const Ee = (f) => {
100
102
  }
101
103
  }
102
104
  ),
103
- !x && /* @__PURE__ */ r.jsx(_, {})
105
+ !x && /* @__PURE__ */ r.jsx(ee, {})
104
106
  ] })
105
107
  ] }) }) }),
106
- i && /* @__PURE__ */ r.jsxs(ie, { ref: p, $menuWidth: U, $zIndex: q, children: [
107
- P && /* @__PURE__ */ r.jsx(fe, { children: /* @__PURE__ */ r.jsx(pe, { placeholder: A, onSearch: R }) }),
108
+ i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
109
+ P && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: A, onSearch: R }) }),
108
110
  /* @__PURE__ */ r.jsxs(
109
- he,
111
+ ve,
110
112
  {
111
- ref: Q,
113
+ ref: U,
112
114
  onScroll: (e) => {
113
115
  var n;
114
116
  (n = f.onScroll) == null || n.call(f, e);
@@ -120,10 +122,10 @@ const Ee = (f) => {
120
122
  return /* @__PURE__ */ r.jsxs(
121
123
  W,
122
124
  {
123
- onClick: () => J(e),
125
+ onClick: () => K(e),
124
126
  $selected: n,
125
127
  children: [
126
- c && (n ? /* @__PURE__ */ r.jsx(ee, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n450 })),
128
+ c && (n ? /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
127
129
  " ",
128
130
  /* @__PURE__ */ r.jsx(z, { variant: "smText", children: e == null ? void 0 : e.label })
129
131
  ]
@@ -131,7 +133,7 @@ const Ee = (f) => {
131
133
  typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (t = (l = e == null ? void 0 : e.value) == null ? void 0 : l[D]) == null ? void 0 : t.toString() : (E = e == null ? void 0 : e.value) == null ? void 0 : E.toString()
132
134
  );
133
135
  }),
134
- B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(Se, {}) })
136
+ B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
135
137
  ]
136
138
  }
137
139
  )
@@ -139,22 +141,22 @@ const Ee = (f) => {
139
141
  ]
140
142
  }
141
143
  ),
142
- c && a.length > 0 && /* @__PURE__ */ r.jsx(ve, { children: a.map((e) => {
144
+ c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
143
145
  var n, l, t;
144
146
  return /* @__PURE__ */ r.jsxs(
145
- xe,
147
+ je,
146
148
  {
147
149
  children: [
148
150
  e.label,
149
- /* @__PURE__ */ r.jsx(L, { onClick: () => K(e) })
151
+ /* @__PURE__ */ r.jsx(L, { onClick: () => V(e) })
150
152
  ]
151
153
  },
152
154
  typeof (e == null ? void 0 : e.value) == "object" ? (l = (n = e == null ? void 0 : e.value) == null ? void 0 : n[D]) == null ? void 0 : l.toString() : (t = e == null ? void 0 : e.value) == null ? void 0 : t.toString()
153
155
  );
154
156
  }) }),
155
- X()
157
+ Y()
156
158
  ] });
157
159
  };
158
160
  export {
159
- Ee as default
161
+ Le as default
160
162
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "qaema-ui",
3
3
  "private": false,
4
- "version": "0.0.23",
4
+ "version": "0.0.24",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"