qaema-ui 0.0.72 → 0.0.73

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -1,126 +1,127 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useRef as g, useState as v, useCallback as oe, useEffect as D } from "react";
-import { createPortal as le } from "react-dom";
-import { FaTimes as R, FaAngleDown as ie } from "../../node_modules/react-icons/fa/index.js";
-import { useTheme as se } from "styled-components";
-import { HelperTextWrapper as ae } from "../PhoneInputField.js";
-import ce from "../SearchBar.js";
-import de from "../Spinner.js";
-import ue from "../Typography.js";
-import fe from "../../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as me } from "../../i18n/i18n.js";
-import { StyledDropDownContainer as he, StyledlabelContainer as pe, StyledDropDown as xe, StyledDropDownToggle as Se, StyledDropDownTitle as je, IconsContainer as we, StyledDropDownMenu as ye, SearchContainer as ge, StyledOptionsContainer as ve, SpinnerRow as Ce, SelectedTagsContainer as be, SelectedTag as De } from "../../styles/Dropdown.styles.js";
-import Te from "./Table/Table.js";
-const Ne = (d) => {
+import { useRef as y, useState as v, useCallback as le, useEffect as T } from "react";
+import { createPortal as ie } from "react-dom";
+import { FaTimes as P, FaAngleDown as se } from "../../node_modules/react-icons/fa/index.js";
+import { useTheme as ae } from "styled-components";
+import { HelperTextWrapper as ce } from "../PhoneInputField.js";
+import de from "../SearchBar.js";
+import ue from "../Spinner.js";
+import fe from "../Typography.js";
+import me from "../../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as he } from "../../i18n/i18n.js";
+import { StyledDropDownContainer as pe, StyledlabelContainer as xe, StyledDropDown as Se, StyledDropDownToggle as je, StyledDropDownTitle as we, IconsContainer as ge, StyledDropDownMenu as ye, SearchContainer as ve, StyledOptionsContainer as Ce, SpinnerRow as be, SelectedTagsContainer as De, SelectedTag as Te } from "../../styles/Dropdown.styles.js";
+import Ie from "./Table/Table.js";
+const Be = (d) => {
   const {
-    label: T,
-    options: P,
-    placeholder: W = "Select Something",
-    optional: z = !1,
+    label: I,
+    options: W,
+    placeholder: z = "Select Something",
+    optional: F = !1,
     error: s = "",
     disabled: f = !1,
     selectIdentifier: j,
     keyIdentifier: r = "id",
     selectCallBack: w,
-    showLeadIcon: F,
-    icon: H,
-    allowSearch: M,
-    searchHandler: N,
-    searchPlaceholder: B,
+    showLeadIcon: H,
+    icon: M,
+    allowSearch: N,
+    searchHandler: B,
+    searchPlaceholder: A,
     onToggle: i,
     multiSelect: m = !1,
-    isLoading: A = !1,
+    isLoading: V = !1,
     currentSelectedOptions: p = [],
-    isInteractive: I = !1,
+    isInteractive: L = !1,
     //Table related props
-    columns: V,
-    isTableHeadVisible: Q = !1,
-    getDisplayValue: y,
-    isRowDisabled: X,
-    rowClassName: Y,
-    endIcon: E
-  } = 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(() => {
+    columns: Q,
+    isTableHeadVisible: X = !1,
+    getDisplayValue: g,
+    isRowDisabled: Y,
+    rowClassName: Z,
+    endIcon: E,
+    optionTooltipLabel: C
+  } = d, x = ae(), { t: $ } = he(), b = y(null), a = y(null), q = y(null), G = y(d.currentSelectedOptions !== void 0), [u, D] = v(!1), [J, K] = v(0), [O, U] = v({ top: 0, left: 0 }), [l, S] = v(p), k = M ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), _ = me("dropdown"), h = le(() => {
     if (a != null && a.current) {
       const e = a.current.getBoundingClientRect();
-      J(a.current.offsetWidth / 16), K({
+      K(a.current.offsetWidth / 16), U({
         top: e.bottom + window.scrollY,
         left: e.left + window.scrollX
       });
     }
   }, []);
-  D(() => (u && (h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0)), () => {
+  T(() => (u && (h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0)), () => {
     window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
-  }), [u, h]), D(() => {
-    if (!q.current) return;
+  }), [u, h]), T(() => {
+    if (!G.current) return;
     (p.length !== l.length || p.some((n, o) => {
       var c;
       return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
     })) && S(p);
   }, [p]);
-  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) => {
+  const ee = (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, R = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), te = (e) => {
     if (m) {
-      const n = k(e);
+      const n = R(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], S(o), w(o);
     } else
-      S([e]), w(e), b(!1), i == null || i(!1);
-  }, te = (e) => {
+      S([e]), w(e), D(!1), i == null || i(!1);
+  }, ne = (e) => {
     const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
     S(n), w(n);
-  }, ne = (e) => {
-    if (e.length === 0) return W;
+  }, re = (e) => {
+    if (e.length === 0) return z;
     if (!m) {
       const n = e[0];
-      if (y)
-        return y(n);
+      if (g)
+        return g(n);
       if (j)
         return String(n == null ? void 0 : n[j]);
       if (r)
         return String(n == null ? void 0 : n[r]);
     }
-    return `${e.length} ${L("SELECTED")}`;
+    return `${e.length} ${$("SELECTED")}`;
   };
-  D(() => {
+  T(() => {
     const e = (n) => {
-      C.current && a.current && !C.current.contains(n.target) && !a.current.contains(n.target) && (b(!1), i == null || i(!1));
+      b.current && a.current && !b.current.contains(n.target) && !a.current.contains(n.target) && (D(!1), i == null || i(!1));
     };
     return u && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
   }, [u, i]);
-  const re = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ae, { error: s, children: s });
-  return /* @__PURE__ */ t.jsxs(he, { children: [
-    T && /* @__PURE__ */ t.jsxs(pe, { children: [
-      /* @__PURE__ */ t.jsx("label", { children: T }),
-      z && /* @__PURE__ */ t.jsx("span", { children: L("OPTIONAL") })
+  const oe = () => L || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ce, { error: s, children: s });
+  return /* @__PURE__ */ t.jsxs(pe, { children: [
+    I && /* @__PURE__ */ t.jsxs(xe, { children: [
+      /* @__PURE__ */ t.jsx("label", { children: I }),
+      F && /* @__PURE__ */ t.jsx("span", { children: $("OPTIONAL") })
     ] }),
     /* @__PURE__ */ t.jsxs(
-      xe,
+      Se,
       {
         show: u,
         onToggle: () => {
-          i == null || i(!u), b((e) => !e);
+          i == null || i(!u), D((e) => !e);
         },
         placement: "bottom-start",
         autoClose: m ? "outside" : !0,
         children: [
-          /* @__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: [
+          /* @__PURE__ */ t.jsx(je, { disabled: f, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(we, { $valid: !s, $isInteractive: L, $hasDyncWidth: !f, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
-              F && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
+              H && typeof k == "function" && /* @__PURE__ */ t.jsx(k, {}),
               /* @__PURE__ */ t.jsx(
-                ue,
+                fe,
                 {
                   component: "span",
                   variant: "mdText",
-                  color: _(s, l.length > 0, f, d.variant || "default"),
-                  children: ne(l)
+                  color: ee(s, l.length > 0, f, d.variant || "default"),
+                  children: re(l)
                 }
               )
             ] }),
-            (E || !f) && /* @__PURE__ */ t.jsxs(we, { children: [
+            (E || !f) && /* @__PURE__ */ t.jsxs(ge, { children: [
               E,
               !m && l.length > 0 && !f && /* @__PURE__ */ t.jsx(
-                R,
+                P,
                 {
                   style: { cursor: "pointer", marginLeft: "0.5rem" },
                   onClick: (e) => {
@@ -128,46 +129,47 @@ const Ne = (d) => {
                   }
                 }
               ),
-              !f && /* @__PURE__ */ t.jsx(ie, {})
+              !f && /* @__PURE__ */ t.jsx(se, {})
             ] })
           ] }) }) }),
-          u && le(
+          u && ie(
             /* @__PURE__ */ t.jsxs(
               ye,
               {
-                ref: C,
-                $menuWidth: G,
-                $zIndex: U,
+                ref: b,
+                $menuWidth: J,
+                $zIndex: _,
                 style: {
                   position: "fixed",
-                  top: `${$.top}px`,
-                  left: `${$.left}px`
+                  top: `${O.top}px`,
+                  left: `${O.left}px`
                 },
                 children: [
-                  M && /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(ce, { placeholder: B, onSearch: N }) }),
+                  N && /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(de, { placeholder: A, onSearch: B }) }),
                   /* @__PURE__ */ t.jsxs(
-                    ve,
+                    Ce,
                     {
-                      ref: Z,
+                      ref: q,
                       onScroll: (e) => {
                         var n;
                         (n = d.onScroll) == null || n.call(d, e);
                       },
                       children: [
                         /* @__PURE__ */ t.jsx(
-                          Te,
+                          Ie,
                           {
                             keyField: r,
-                            data: P,
-                            columns: V,
-                            onRowClick: (e) => ee(e),
-                            isRowSelected: (e) => k(e),
-                            isTableHeadVisible: Q,
-                            isRowDisabled: X,
-                            rowClassName: Y
+                            data: W,
+                            columns: Q,
+                            onRowClick: (e) => te(e),
+                            isRowSelected: (e) => R(e),
+                            isTableHeadVisible: X,
+                            isRowDisabled: Y,
+                            rowClassName: Z,
+                            getRowTooltip: C ? (e) => e[C] != null ? String(e[C]) : void 0 : void 0
                           }
                         ),
-                        A && /* @__PURE__ */ t.jsx(Ce, { children: /* @__PURE__ */ t.jsx(de, {}) })
+                        V && /* @__PURE__ */ t.jsx(be, { children: /* @__PURE__ */ t.jsx(ue, {}) })
                       ]
                     }
                   )
@@ -179,13 +181,13 @@ const Ne = (d) => {
         ]
       }
     ),
-    m && l.length > 0 && /* @__PURE__ */ t.jsx(be, { children: l.map((e) => /* @__PURE__ */ t.jsxs(De, { children: [
-      y ? y(e) : String(j ? e[j] : e[r]),
-      /* @__PURE__ */ t.jsx(R, { onClick: () => te(e) })
+    m && l.length > 0 && /* @__PURE__ */ t.jsx(De, { children: l.map((e) => /* @__PURE__ */ t.jsxs(Te, { children: [
+      g ? g(e) : String(j ? e[j] : e[r]),
+      /* @__PURE__ */ t.jsx(P, { onClick: () => ne(e) })
     ] }, String(e[r]))) }),
-    re()
+    oe()
   ] });
 };
 export {
-  Ne as default
+  Be as default
 };

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

@@ -27,4 +27,5 @@ export interface DropDownWithTableProps<T extends Record<string, unknown>> {
     isRowDisabled?: (row: T) => boolean;
     rowClassName?: (row: T, index: number) => string;
     endIcon?: React.ReactNode;
+    optionTooltipLabel?: keyof T;
 }

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

@@ -1,3 +1,3 @@
 import type { 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;
+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, getRowTooltip, }: Readonly<TableProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default Table;

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

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

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

@@ -56,6 +56,7 @@ export type TableProps<T> = {
     alignHeader?: ColumnAlignment;
     isTableHeadVisible?: boolean;
     isRowSelected?: (row: T) => boolean;
+    getRowTooltip?: (row: T) => string | undefined;
 };
 export type CurrencyCode = 'SAR';
 export type CellType = 'user' | 'product' | 'flag' | 'text' | 'amount' | 'badge' | 'progress' | 'icon' | 'header' | 'checkbox' | 'radioButton' | 'custom' | 'transaction';