qaema-ui 0.0.26 → 0.0.27

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -1,21 +1,21 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useRef as g, useState as v, useCallback as ne, useEffect as D } from "react";
-import { createPortal as re } from "react-dom";
-import { FaTimes as k, FaAngleDown as oe } from "../../node_modules/react-icons/fa/index.js";
-import { useTheme as le } from "styled-components";
-import { HelperTextWrapper as ie } from "../PhoneInputField.js";
-import se from "../SearchBar.js";
-import ae from "../Typography.js";
-import ce from "../../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as de } from "../../i18n/i18n.js";
-import { StyledDropDownContainer as ue, StyledlabelContainer as fe, StyledDropDown as me, StyledDropDownToggle as he, StyledDropDownTitle as pe, IconsContainer as xe, StyledDropDownMenu as Se, SearchContainer as je, StyledOptionsContainer as we, StyledDropItem as ye, SelectedTagsContainer as ge, SelectedTag as ve } from "../../styles/Dropdown.styles.js";
-import Ce from "./Table/Table.js";
-import be from "../../node_modules/react-bootstrap/esm/Spinner.js";
-const He = (d) => {
+import { useRef as g, useState as v, useCallback as re, useEffect as D } from "react";
+import { createPortal as oe } from "react-dom";
+import { FaTimes as k, FaAngleDown as le } from "../../node_modules/react-icons/fa/index.js";
+import { useTheme as ie } from "styled-components";
+import { HelperTextWrapper as se } from "../PhoneInputField.js";
+import ae from "../SearchBar.js";
+import ce from "../Spinner.js";
+import de from "../Typography.js";
+import ue from "../../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as fe } from "../../i18n/i18n.js";
+import { StyledDropDownContainer as me, StyledlabelContainer as he, StyledDropDown as pe, StyledDropDownToggle as xe, StyledDropDownTitle as Se, IconsContainer as je, StyledDropDownMenu as we, SearchContainer as ye, StyledOptionsContainer as ge, SpinnerRow as ve, SelectedTagsContainer as Ce, SelectedTag as be } from "../../styles/Dropdown.styles.js";
+import De from "./Table/Table.js";
+const Me = (d) => {
   const {
     label: T,
-    options: P,
-    placeholder: R = "Select Something",
+    options: R,
+    placeholder: P = "Select Something",
     optional: W = !1,
     error: s = "",
     disabled: S = !1,
@@ -26,21 +26,22 @@ const He = (d) => {
     icon: F,
     allowSearch: H,
     searchHandler: M,
-    searchPlaceholder: B,
+    searchPlaceholder: N,
     onToggle: i,
     multiSelect: f = !1,
-    isLoading: N = !1,
+    isLoading: B = !1,
     currentSelectedOptions: h = [],
-    isInteractive: I = !1,
+    isInteractive: E = !1,
     //Table related props
     columns: A,
     isTableHeadVisible: V = !1,
     getDisplayValue: y,
-    isRowDisabled: Q
-  } = d, p = le(), { t: E } = de(), C = g(null), a = g(null), X = g(null), Y = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [Z, q] = v(0), [L, G] = v({ top: 0, left: 0 }), [l, x] = v(h), $ = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), J = ce("dropdown"), m = ne(() => {
+    isRowDisabled: Q,
+    rowClassName: X
+  } = d, p = ie(), { t: I } = fe(), C = g(null), a = g(null), Y = g(null), Z = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [q, G] = v(0), [L, J] = v({ top: 0, left: 0 }), [l, x] = v(h), O = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), K = ue("dropdown"), m = re(() => {
     if (a != null && a.current) {
       const e = a.current.getBoundingClientRect();
-      q(a.current.offsetWidth / 16), G({
+      G(a.current.offsetWidth / 16), J({
         top: e.bottom + window.scrollY,
         left: e.left + window.scrollX
       });
@@ -49,24 +50,24 @@ const He = (d) => {
   D(() => (u && (m(), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0)), () => {
     window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
   }), [u, m]), D(() => {
-    if (!Y.current) return;
+    if (!Z.current) return;
     (h.length !== l.length || h.some((n, o) => {
       var c;
       return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
     })) && x(h);
   }, [h]);
-  const K = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, O = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), U = (e) => {
+  const U = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, $ = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), _ = (e) => {
     if (f) {
-      const n = O(e);
+      const n = $(e);
       let o;
       n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], x(o), w(o);
     } else
       x([e]), w(e), b(!1), i == null || i(!1);
-  }, _ = (e) => {
+  }, ee = (e) => {
     const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
     x(n), w(n);
-  }, ee = (e) => {
-    if (e.length === 0) return R;
+  }, te = (e) => {
+    if (e.length === 0) return P;
     if (!f) {
       const n = e[0];
       if (y)
@@ -76,7 +77,7 @@ const He = (d) => {
       if (r)
         return String(n == null ? void 0 : n[r]);
     }
-    return `${e.length} ${E("SELECTED")}`;
+    return `${e.length} ${I("SELECTED")}`;
   };
   D(() => {
     const e = (n) => {
@@ -86,14 +87,14 @@ const He = (d) => {
       document.removeEventListener("mousedown", e);
     };
   }, [u, i]);
-  const te = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ie, { error: s, children: s });
-  return /* @__PURE__ */ t.jsxs(ue, { children: [
-    T && /* @__PURE__ */ t.jsxs(fe, { children: [
+  const ne = () => E || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(se, { error: s, children: s });
+  return /* @__PURE__ */ t.jsxs(me, { children: [
+    T && /* @__PURE__ */ t.jsxs(he, { children: [
       /* @__PURE__ */ t.jsx("label", { children: T }),
-      W && /* @__PURE__ */ t.jsx("span", { children: E("OPTIONAL") })
+      W && /* @__PURE__ */ t.jsx("span", { children: I("OPTIONAL") })
     ] }),
     /* @__PURE__ */ t.jsxs(
-      me,
+      pe,
       {
         show: u,
         onToggle: () => {
@@ -102,20 +103,20 @@ const He = (d) => {
         placement: "bottom-start",
         autoClose: f ? "outside" : !0,
         children: [
-          /* @__PURE__ */ t.jsx(he, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(pe, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ t.jsx(xe, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(Se, { $valid: !s, $isInteractive: E, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
-              z && typeof $ == "function" && /* @__PURE__ */ t.jsx($, {}),
+              z && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
               /* @__PURE__ */ t.jsx(
-                ae,
+                de,
                 {
                   component: "span",
                   variant: "mdText",
-                  color: K(s, l.length > 0, S, d.variant || "default"),
-                  children: ee(l)
+                  color: U(s, l.length > 0, S, d.variant || "default"),
+                  children: te(l)
                 }
               )
             ] }),
-            /* @__PURE__ */ t.jsxs(xe, { children: [
+            /* @__PURE__ */ t.jsxs(je, { children: [
               !f && l.length > 0 && !S && /* @__PURE__ */ t.jsx(
                 k,
                 {
@@ -125,43 +126,47 @@ const He = (d) => {
                   }
                 }
               ),
-              !S && /* @__PURE__ */ t.jsx(oe, {})
+              !S && /* @__PURE__ */ t.jsx(le, {})
             ] })
           ] }) }) }),
-          u && re(
+          u && oe(
             /* @__PURE__ */ t.jsxs(
-              Se,
+              we,
               {
                 ref: C,
-                $menuWidth: Z,
-                $zIndex: J,
+                $menuWidth: q,
+                $zIndex: K,
                 style: {
                   position: "fixed",
                   top: `${L.top}px`,
                   left: `${L.left}px`
                 },
                 children: [
-                  H && /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsx(se, { placeholder: B, onSearch: M }) }),
-                  /* @__PURE__ */ t.jsx(
-                    we,
+                  H && /* @__PURE__ */ t.jsx(ye, { children: /* @__PURE__ */ t.jsx(ae, { placeholder: N, onSearch: M }) }),
+                  /* @__PURE__ */ t.jsxs(
+                    ge,
                     {
-                      ref: X,
+                      ref: Y,
                       onScroll: (e) => {
                         var n;
                         (n = d.onScroll) == null || n.call(d, e);
                       },
-                      children: N ? /* @__PURE__ */ t.jsx(ye, { $selected: !1, children: /* @__PURE__ */ t.jsx(be, {}) }) : /* @__PURE__ */ t.jsx(
-                        Ce,
-                        {
-                          keyField: r,
-                          data: P,
-                          columns: A,
-                          onRowClick: (e) => U(e),
-                          isRowSelected: (e) => O(e),
-                          isTableHeadVisible: V,
-                          isRowDisabled: Q
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ t.jsx(
+                          De,
+                          {
+                            keyField: r,
+                            data: R,
+                            columns: A,
+                            onRowClick: (e) => _(e),
+                            isRowSelected: (e) => $(e),
+                            isTableHeadVisible: V,
+                            isRowDisabled: Q,
+                            rowClassName: X
+                          }
+                        ),
+                        B && /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(ce, {}) })
+                      ]
                     }
                   )
                 ]
@@ -172,13 +177,13 @@ const He = (d) => {
         ]
       }
     ),
-    f && l.length > 0 && /* @__PURE__ */ t.jsx(ge, { children: l.map((e) => /* @__PURE__ */ t.jsxs(ve, { children: [
+    f && l.length > 0 && /* @__PURE__ */ t.jsx(Ce, { children: l.map((e) => /* @__PURE__ */ t.jsxs(be, { children: [
       y ? y(e) : String(j ? e[j] : e[r]),
-      /* @__PURE__ */ t.jsx(k, { onClick: () => _(e) })
+      /* @__PURE__ */ t.jsx(k, { onClick: () => ee(e) })
     ] }, String(e[r]))) }),
-    te()
+    ne()
   ] });
 };
 export {
-  He as default
+  Me as default
 };

package/dist/components/DropDownWithTable/DropDownWithTable.types.d.ts

@@ -25,4 +25,5 @@ export interface DropDownWithTableProps<T extends Record<string, unknown>> {
     isTableHeadVisible?: boolean;
     getDisplayValue?: (option: T) => string;
     isRowDisabled?: (row: T) => boolean;
+    rowClassName?: (row: T, index: number) => string;
 }

package/dist/styles/Dropdown.styles.d.ts

@@ -35,6 +35,7 @@ export declare const StyledDropItem: import('styled-components/dist/types').ISty
 }, {
     $selected: boolean;
 }>> & string & Omit<import('react-bootstrap/esm/helpers').BsPrefixRefForwardingComponent<"a", import('react-bootstrap').DropdownItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const SpinnerRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TypographyContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const IconsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SearchContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/styles/Dropdown.styles.js

@@ -1,7 +1,7 @@
 import r, { css as n } from "styled-components";
 import { Scrollbar as i } from "./Scrollbar.styles.js";
-import s from "../node_modules/react-bootstrap/esm/Dropdown.js";
-import t from "../node_modules/react-bootstrap/esm/DropdownToggle.js";
+import t from "../node_modules/react-bootstrap/esm/Dropdown.js";
+import s from "../node_modules/react-bootstrap/esm/DropdownToggle.js";
 import a from "../node_modules/react-bootstrap/esm/DropdownMenu.js";
 import l from "../node_modules/react-bootstrap/esm/DropdownItem.js";
 const x = r.div`
@@ -30,7 +30,7 @@ const x = r.div`
   flex-wrap: wrap;
   gap: ${({ theme: o }) => o.spacing.xs};
   margin-top: ${({ theme: o }) => o.spacing.xs};
-`, u = r.div`
+`, w = r.div`
   display: flex;
   align-items: center;
   background-color: ${({ theme: o }) => o.colors.grey.n100};
@@ -47,11 +47,11 @@ const x = r.div`
       color: ${({ theme: o }) => o.colors.state.error.n450};
     }
   }
-`, w = r(s)`
+`, u = r(t)`
   width: 100%;
   max-height: 3.5rem;
   min-width: 5rem !important;
-`, f = r(t)`
+`, f = r(s)`
   width: 100%;
   box-shadow: ${({ $valid: o }) => o ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);" : "none"};
   padding: 0px;
@@ -150,6 +150,12 @@ const x = r.div`
   &:hover {
     background-color: ${({ theme: o }) => o.colors.grey.n100};
   }
+`, k = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.sm};
+  width: 100%;
 `;
 r.div`
   overflow: hidden;
@@ -157,13 +163,13 @@ r.div`
   white-space: nowrap;
   width: 100%;
 `;
-const k = r.div`
+const z = r.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   gap: ${({ theme: o }) => o.spacing.xs};
-`, z = r.div`
+`, C = r.div`
   display: flex;
   align-items: center;
   column-gap: 0.625rem;
@@ -171,11 +177,12 @@ const k = r.div`
   padding: ${({ theme: o }) => o.spacing.xs} 1.25rem;
 `;
 export {
-  k as IconsContainer,
-  z as SearchContainer,
-  u as SelectedTag,
+  z as IconsContainer,
+  C as SearchContainer,
+  w as SelectedTag,
   h as SelectedTagsContainer,
-  w as StyledDropDown,
+  k as SpinnerRow,
+  u as StyledDropDown,
   x as StyledDropDownContainer,
   v as StyledDropDownMenu,
   b as StyledDropDownTitle,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/dist/node_modules/react-bootstrap/esm/Spinner.js

@@ -1,26 +0,0 @@
-import i from "../../../_virtual/index.js";
-import * as f from "react";
-import { useBootstrapPrefix as c } from "./ThemeProvider.js";
-import { j as d } from "../../../_virtual/jsx-runtime.js";
-const x = /* @__PURE__ */ f.forwardRef(({
-  bsPrefix: r,
-  variant: e,
-  animation: t = "border",
-  size: o,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: a = "div",
-  className: m,
-  ...p
-}, n) => {
-  r = c(r, "spinner");
-  const s = `${r}-${t}`;
-  return /* @__PURE__ */ d.jsx(a, {
-    ref: n,
-    ...p,
-    className: i(m, s, o && `${s}-${o}`, e && `text-${e}`)
-  });
-});
-x.displayName = "Spinner";
-export {
-  x as default
-};