qaema-ui 0.0.23 → 0.0.25

package/dist/assets/svg/RiyalGreen.svg.js

@@ -0,0 +1,4 @@
+const e = "data:image/svg+xml,%3csvg%20width='18'%20height='20'%20viewBox='0%200%2018%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_7331_6281)'%3e%3cpath%20d='M11.2023%2017.7177C10.8811%2018.4258%2010.6687%2019.1942%2010.5874%2020L17.3848%2018.5635C17.706%2017.8556%2017.9181%2017.0871%2017.9996%2016.2812L11.2023%2017.7177Z'%20fill='%231DBA63'/%3e%3cpath%20d='M17.3851%2014.2599C17.7063%2013.552%2017.9187%2012.7835%2018%2011.9777L12.7051%2013.0972V10.945L17.385%209.9563C17.7062%209.2484%2017.9185%208.47985%2017.9998%207.67405L12.7049%208.79265V1.0527C11.8936%201.50558%2011.173%202.10842%2010.5873%202.81951V9.24028L8.46968%209.68776V0C7.65833%200.452726%206.93778%201.05572%206.35206%201.76681V10.1351L1.61387%2011.136C1.29267%2011.8439%201.08019%2012.6125%200.998683%2013.4183L6.35206%2012.2873V14.9976L0.61487%2016.2096C0.293664%2016.9175%200.0813422%2017.6861%200%2018.4919L6.00523%2017.2232C6.49408%2017.1221%206.91425%2016.8347%207.18741%2016.4393L8.28874%2014.8161V14.8158C8.40306%2014.6478%208.46968%2014.4454%208.46968%2014.2273V11.8398L10.5873%2011.3923V15.6967L17.385%2014.2596L17.3851%2014.2599Z'%20fill='%231DBA63'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_7331_6281'%3e%3crect%20width='18'%20height='20'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+export {
+  e as default
+};

package/dist/assets/svg/RiyalGrey.svg.js

@@ -0,0 +1,4 @@
+const e = "data:image/svg+xml,%3csvg%20width='18'%20height='21'%20viewBox='0%200%2018%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_7331_6256)'%3e%3cpath%20d='M11.2023%2018.7177C10.8811%2019.4258%2010.6687%2020.1942%2010.5874%2021L17.3848%2019.5635C17.706%2018.8556%2017.9181%2018.0871%2017.9996%2017.2812L11.2023%2018.7177Z'%20fill='%236D798A'/%3e%3cpath%20d='M17.3851%2015.2599C17.7063%2014.552%2017.9187%2013.7835%2018%2012.9777L12.7051%2014.0972V11.945L17.385%2010.9563C17.7062%2010.2484%2017.9185%209.47985%2017.9998%208.67405L12.7049%209.79265V2.0527C11.8936%202.50558%2011.173%203.10842%2010.5873%203.81951V10.2403L8.46968%2010.6878V1C7.65833%201.45273%206.93778%202.05572%206.35206%202.76681V11.1351L1.61387%2012.136C1.29267%2012.8439%201.08019%2013.6125%200.998683%2014.4183L6.35206%2013.2873V15.9976L0.61487%2017.2096C0.293664%2017.9175%200.0813422%2018.6861%200%2019.4919L6.00523%2018.2232C6.49408%2018.1221%206.91425%2017.8347%207.18741%2017.4393L8.28874%2015.8161V15.8158C8.40306%2015.6478%208.46968%2015.4454%208.46968%2015.2273V12.8398L10.5873%2012.3923V16.6967L17.385%2015.2596L17.3851%2015.2599Z'%20fill='%236D798A'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_7331_6256'%3e%3crect%20width='18'%20height='20'%20fill='white'%20transform='translate(0%201)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+export {
+  e as default
+};

package/dist/components/DropDown.d.ts

@@ -26,6 +26,7 @@ export type DropDownProps = {
     isInteractive?: boolean;
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     variant?: 'light-primary' | 'default';
+    endIcon?: React.ReactNode;
 };
 declare const DropDown: React.FC<DropDownProps>;
 export default DropDown;

package/dist/components/DropDown.js

@@ -1,16 +1,16 @@
 import { j as r } from "../_virtual/jsx-runtime.js";
-import { useRef as g, useState as w, useCallback as Y, useEffect as C } from "react";
-import { FaTimes as L, FaAngleDown as _ } from "../node_modules/react-icons/fa/index.js";
-import { ImCheckboxChecked as ee, ImCheckboxUnchecked as re } from "../node_modules/react-icons/im/index.js";
-import { useTheme as ne } from "styled-components";
-import le from "../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as te } from "../i18n/i18n.js";
-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";
-import { HelperTextWrapper as je } from "./PhoneInputField.js";
-import pe from "./SearchBar.js";
-import Se from "./Spinner.js";
+import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
+import { FaTimes as L, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
+import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
+import { useTheme as le } from "styled-components";
+import te from "../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as ae } from "../i18n/i18n.js";
+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";
+import { HelperTextWrapper as pe } from "./PhoneInputField.js";
+import Se from "./SearchBar.js";
+import me from "./Spinner.js";
 import z from "./Typography.js";
-const Ee = (f) => {
+const Le = (f) => {
   const {
     label: b,
     options: m,
@@ -31,25 +31,26 @@ const Ee = (f) => {
     multiSelect: c = !1,
     isLoading: B = !1,
     currentSelectedOptions: y = [],
-    isInteractive: I = !1
-  } = 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(() => {
+    isInteractive: I = !1,
+    endIcon: Q
+  } = 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 = _(() => {
     var e, n;
-    (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && Z(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
+    (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && q(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
   }, []);
   C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
     v(y);
   }, [y]);
-  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) => {
+  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) => {
     if (c) {
       const n = $(e);
       let l;
       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));
     } else
       v([e]), j(e.value);
-  }, K = (e) => {
+  }, V = (e) => {
     const n = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[h] !== e.value[h] : l.value !== e.value);
     v(n), j(n.map((l) => l.value));
-  }, V = () => {
+  }, X = () => {
     var e;
     return a.length === 0 ? F : c ? `${a.length} ${T("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
   };
@@ -61,14 +62,14 @@ const Ee = (f) => {
       document.removeEventListener("mousedown", e);
     };
   }, [i, o]);
-  const X = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(je, { error: s, children: s });
-  return /* @__PURE__ */ r.jsxs(ae, { children: [
-    b && /* @__PURE__ */ r.jsxs(se, { children: [
+  const Y = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(pe, { error: s, children: s });
+  return /* @__PURE__ */ r.jsxs(se, { children: [
+    b && /* @__PURE__ */ r.jsxs(oe, { children: [
       /* @__PURE__ */ r.jsx("label", { children: b }),
       H && /* @__PURE__ */ r.jsx("span", { children: T("OPTIONAL") })
     ] }),
     /* @__PURE__ */ r.jsxs(
-      oe,
+      ce,
       {
         show: i,
         onToggle: () => {
@@ -77,7 +78,7 @@ const Ee = (f) => {
         placement: "bottom-start",
         autoClose: c ? "outside" : !0,
         children: [
-          /* @__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: [
+          /* @__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: [
             /* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
               M && typeof O == "function" && /* @__PURE__ */ r.jsx(O, {}),
               /* @__PURE__ */ r.jsx(
@@ -85,12 +86,13 @@ const Ee = (f) => {
                 {
                   component: "span",
                   variant: "mdText",
-                  color: G(s, a.length > 0, x, f.variant || "default"),
-                  children: V()
+                  color: J(s, a.length > 0, x, f.variant || "default"),
+                  children: X()
                 }
               )
             ] }),
-            /* @__PURE__ */ r.jsxs(de, { children: [
+            /* @__PURE__ */ r.jsxs(ie, { children: [
+              Q,
               !c && a.length > 0 && !x && /* @__PURE__ */ r.jsx(
                 L,
                 {
@@ -100,15 +102,15 @@ const Ee = (f) => {
                   }
                 }
               ),
-              !x && /* @__PURE__ */ r.jsx(_, {})
+              !x && /* @__PURE__ */ r.jsx(ee, {})
             ] })
           ] }) }) }),
-          i && /* @__PURE__ */ r.jsxs(ie, { ref: p, $menuWidth: U, $zIndex: q, children: [
-            P && /* @__PURE__ */ r.jsx(fe, { children: /* @__PURE__ */ r.jsx(pe, { placeholder: A, onSearch: R }) }),
+          i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
+            P && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: A, onSearch: R }) }),
             /* @__PURE__ */ r.jsxs(
-              he,
+              ve,
               {
-                ref: Q,
+                ref: U,
                 onScroll: (e) => {
                   var n;
                   (n = f.onScroll) == null || n.call(f, e);
@@ -120,10 +122,10 @@ const Ee = (f) => {
                     return /* @__PURE__ */ r.jsxs(
                       W,
                       {
-                        onClick: () => J(e),
+                        onClick: () => K(e),
                         $selected: n,
                         children: [
-                          c && (n ? /* @__PURE__ */ r.jsx(ee, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n450 })),
+                          c && (n ? /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
                           " ",
                           /* @__PURE__ */ r.jsx(z, { variant: "smText", children: e == null ? void 0 : e.label })
                         ]
@@ -131,7 +133,7 @@ const Ee = (f) => {
                       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()
                     );
                   }),
-                  B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(Se, {}) })
+                  B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
                 ]
               }
             )
@@ -139,22 +141,22 @@ const Ee = (f) => {
         ]
       }
     ),
-    c && a.length > 0 && /* @__PURE__ */ r.jsx(ve, { children: a.map((e) => {
+    c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
       var n, l, t;
       return /* @__PURE__ */ r.jsxs(
-        xe,
+        je,
         {
           children: [
             e.label,
-            /* @__PURE__ */ r.jsx(L, { onClick: () => K(e) })
+            /* @__PURE__ */ r.jsx(L, { onClick: () => V(e) })
           ]
         },
         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()
       );
     }) }),
-    X()
+    Y()
   ] });
 };
 export {
-  Ee as default
+  Le as default
 };

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

@@ -0,0 +1,3 @@
+import { DropDownWithTableProps } from './DropDownWithTable.types';
+declare const DropDownWithTable: <T extends Record<string, unknown>>(props: DropDownWithTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default DropDownWithTable;

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -0,0 +1,184 @@
+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) => {
+  const {
+    label: T,
+    options: P,
+    placeholder: R = "Select Something",
+    optional: W = !1,
+    error: s = "",
+    disabled: S = !1,
+    selectIdentifier: j,
+    keyIdentifier: r = "id",
+    selectCallBack: w,
+    showLeadIcon: z,
+    icon: F,
+    allowSearch: H,
+    searchHandler: M,
+    searchPlaceholder: B,
+    onToggle: i,
+    multiSelect: f = !1,
+    isLoading: N = !1,
+    currentSelectedOptions: h = [],
+    isInteractive: I = !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(() => {
+    if (a != null && a.current) {
+      const e = a.current.getBoundingClientRect();
+      q(a.current.offsetWidth / 16), G({
+        top: e.bottom + window.scrollY,
+        left: e.left + window.scrollX
+      });
+    }
+  }, []);
+  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;
+    (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) => {
+    if (f) {
+      const n = O(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) => {
+    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;
+    if (!f) {
+      const n = e[0];
+      if (y)
+        return y(n);
+      if (j)
+        return String(n == null ? void 0 : n[j]);
+      if (r)
+        return String(n == null ? void 0 : n[r]);
+    }
+    return `${e.length} ${E("SELECTED")}`;
+  };
+  D(() => {
+    const e = (n) => {
+      C.current && a.current && !C.current.contains(n.target) && !a.current.contains(n.target) && (b(!1), i == null || i(!1));
+    };
+    return u && document.addEventListener("mousedown", e), () => {
+      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: [
+      /* @__PURE__ */ t.jsx("label", { children: T }),
+      W && /* @__PURE__ */ t.jsx("span", { children: E("OPTIONAL") })
+    ] }),
+    /* @__PURE__ */ t.jsxs(
+      me,
+      {
+        show: u,
+        onToggle: () => {
+          i == null || i(!u), b((e) => !e);
+        },
+        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.jsxs("div", { className: "heading-container", children: [
+              z && typeof $ == "function" && /* @__PURE__ */ t.jsx($, {}),
+              /* @__PURE__ */ t.jsx(
+                ae,
+                {
+                  component: "span",
+                  variant: "mdText",
+                  color: K(s, l.length > 0, S, d.variant || "default"),
+                  children: ee(l)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsxs(xe, { children: [
+              !f && l.length > 0 && !S && /* @__PURE__ */ t.jsx(
+                k,
+                {
+                  style: { cursor: "pointer", marginLeft: "0.5rem" },
+                  onClick: (e) => {
+                    e.stopPropagation(), x([]), w(f ? [] : null);
+                  }
+                }
+              ),
+              !S && /* @__PURE__ */ t.jsx(oe, {})
+            ] })
+          ] }) }) }),
+          u && re(
+            /* @__PURE__ */ t.jsxs(
+              Se,
+              {
+                ref: C,
+                $menuWidth: Z,
+                $zIndex: J,
+                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,
+                    {
+                      ref: X,
+                      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
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            document.body
+          )
+        ]
+      }
+    ),
+    f && l.length > 0 && /* @__PURE__ */ t.jsx(ge, { children: l.map((e) => /* @__PURE__ */ t.jsxs(ve, { children: [
+      y ? y(e) : String(j ? e[j] : e[r]),
+      /* @__PURE__ */ t.jsx(k, { onClick: () => _(e) })
+    ] }, String(e[r]))) }),
+    te()
+  ] });
+};
+export {
+  He as default
+};

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

@@ -0,0 +1,28 @@
+import { TableColumn } from './Table/Table.types';
+export interface DropDownWithTableProps<T extends Record<string, unknown>> {
+    label?: string;
+    options: T[];
+    placeholder: string;
+    optional?: boolean;
+    disabled?: boolean;
+    error?: string;
+    selectIdentifier?: string;
+    keyIdentifier?: string;
+    showLeadIcon: boolean;
+    icon?: React.FC;
+    selectCallBack: (value: T | T[] | null) => void;
+    allowSearch: boolean;
+    searchPlaceholder?: string;
+    searchHandler?: (value: string) => void;
+    onToggle?: (show: boolean) => void;
+    multiSelect?: boolean;
+    isLoading?: boolean;
+    currentSelectedOptions?: Array<T>;
+    isInteractive?: boolean;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    variant?: 'light-primary' | 'default';
+    columns: TableColumn<T>[];
+    isTableHeadVisible?: boolean;
+    getDisplayValue?: (option: T) => string;
+    isRowDisabled?: (row: T) => boolean;
+}

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

@@ -0,0 +1,3 @@
+import { TableProps } from './Table.types';
+declare function Table<T extends Record<string, unknown>>({ columns, data, keyField, selectable, onRowSelect, rowActions, stickyHeader, loading, emptyStateMessage, pagination, onRowClick, rowClassName, isRowDisabled, breakpoint, alignHeader, isTableHeadVisible, isRowSelected: externalIsRowSelected, }: Readonly<TableProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/DropDownWithTable/Table/Table.js

@@ -0,0 +1,169 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { useState as v, useEffect as L, useMemo as N } from "react";
+import { useTranslation as Q } from "react-i18next";
+import U from "../../Spinner.js";
+import X from "../../Pagination.js";
+import Y from "../../Typography.js";
+import O, { CheckboxCell as Z } from "./components/CellComponents.js";
+import z from "./components/TableHead.js";
+import { TableContainer as H, LoadingOverlay as D, TablesWrapper as k, DataScrollBox as F, StyledTable as R, TableBody as W, EmptyState as w, TableRow as y, TableCellContainer as b, ActionsTable as ee, TableFooter as te } from "./Table.styles.js";
+function me({
+  columns: T,
+  data: i,
+  keyField: r,
+  selectable: u = !1,
+  onRowSelect: m,
+  rowActions: x,
+  stickyHeader: $ = !1,
+  loading: f = !1,
+  emptyStateMessage: I,
+  pagination: n,
+  onRowClick: a,
+  rowClassName: j,
+  isRowDisabled: d,
+  breakpoint: _ = "md",
+  alignHeader: C = "start",
+  // Dropdown related props
+  isTableHeadVisible: K = !1,
+  isRowSelected: S
+}) {
+  const [h, p] = v([]), [B, g] = v(_), [M, A] = v(null), { t: V } = Q();
+  L(() => {
+    const e = () => {
+      A(null);
+    };
+    return document.addEventListener("click", e), () => {
+      document.removeEventListener("click", e);
+    };
+  }, []), L(() => {
+    const e = () => {
+      const l = window.innerWidth;
+      l < 576 ? g("sm") : l < 992 ? g("md") : g("lg");
+    };
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []);
+  const P = N(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(B) : !e.hidden), [T, B]), q = () => {
+    h.length === i.length ? p([]) : p([...i]), m && m(h.length === i.length ? [] : [...i]);
+  }, G = (e) => {
+    const l = h.filter((s) => e[r] === s[r]);
+    return l && l.length > 0;
+  }, J = (e) => {
+    const l = h.some((o) => o[r] === e[r]);
+    let s;
+    l ? s = h.filter((o) => o[r] !== e[r]) : s = [...h, e], p(s), m && m(s);
+  };
+  return /* @__PURE__ */ t.jsxs(H, { children: [
+    f && /* @__PURE__ */ t.jsx(D, { children: /* @__PURE__ */ t.jsx(U, { size: "3rem" }) }),
+    /* @__PURE__ */ t.jsxs(k, { children: [
+      /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsxs(R, { children: [
+        K && /* @__PURE__ */ t.jsx(
+          z,
+          {
+            data: i,
+            handleSelectAll: q,
+            selectedRows: h,
+            visibleColumns: P,
+            alignHeader: C,
+            rowActions: void 0,
+            stickyHeader: $,
+            selectable: u,
+            loading: f
+          }
+        ),
+        /* @__PURE__ */ t.jsx(W, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (u ? 1 : 0) + P.length, children: /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(Y, { variant: "mdText", children: I ?? V("NO_DATA_AVAILABLE") }) }) }) }) : i.map((e, l) => {
+          const s = (d == null ? void 0 : d(e)) ?? !1, o = S ? S(e) : h.some((c) => c[r] === e[r]), E = e[r];
+          return /* @__PURE__ */ t.jsxs(
+            y,
+            {
+              $selected: o,
+              $disabled: s,
+              $clickable: !!a && !s,
+              onClick: () => !s && (a == null ? void 0 : a(e)),
+              className: (j == null ? void 0 : j(e, l)) ?? "",
+              children: [
+                u && /* @__PURE__ */ t.jsx(b, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
+                  Z,
+                  {
+                    checkBoxOptions: {
+                      checked: G(e),
+                      $variant: "primary",
+                      $disabled: s,
+                      $size: "sm",
+                      onChange: () => !s && J(e)
+                    }
+                  }
+                ) }),
+                P.map((c) => /* @__PURE__ */ t.jsx(b, { $align: c.align, children: /* @__PURE__ */ t.jsx(
+                  O,
+                  {
+                    column: c,
+                    row: e,
+                    type: c.cellType ?? "text",
+                    align: c.align,
+                    width: c.width ?? "",
+                    minWidth: c.minWidth ?? "",
+                    maxWidth: c.maxWidth ?? ""
+                  }
+                ) }, `${E}-${c.id}`))
+              ]
+            },
+            E
+          );
+        }) })
+      ] }) }),
+      x && x.length > 0 && /* @__PURE__ */ t.jsxs(ee, { children: [
+        /* @__PURE__ */ t.jsx(
+          z,
+          {
+            data: i,
+            handleSelectAll: () => {
+            },
+            selectedRows: h,
+            visibleColumns: [],
+            alignHeader: C,
+            rowActions: x,
+            stickyHeader: $,
+            selectable: !1,
+            loading: f
+          }
+        ),
+        /* @__PURE__ */ t.jsx(W, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : i.map((e) => {
+          const l = (d == null ? void 0 : d(e)) ?? !1;
+          return /* @__PURE__ */ t.jsx(y, { $disabled: l, children: /* @__PURE__ */ t.jsx(b, { $align: "center", $isActionCell: !0, children: /* @__PURE__ */ t.jsx(
+            O,
+            {
+              row: e,
+              type: "icon",
+              iconOptions: {
+                keyField: r,
+                rowActions: x,
+                activeDropdown: M,
+                setActiveDropdown: A
+              }
+            }
+          ) }) }, `action-${e[r]}`);
+        }) })
+      ] })
+    ] }),
+    n && n.enabled && /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(
+      X,
+      {
+        currentPage: n.currentPage,
+        totalPages: n.totalPages,
+        onChange: n.onPageChange,
+        disabled: f,
+        hidePrevButton: n.hidePrevButton,
+        hideNextButton: n.hideNextButton,
+        siblingCount: n.siblingCount,
+        boundaryCount: n.boundaryCount,
+        itemsPerPage: n.pageSize,
+        totalItems: n.totalItems,
+        itemsPerPageOptions: n.itemsPerPageOptions,
+        onItemsPerPageChange: n.onItemsPerPageChange
+      }
+    ) })
+  ] });
+}
+export {
+  me as default
+};