@cryptlex/web-components 2.0.1 → 3.0.0

package/README.md

@@ -4,14 +4,10 @@ A React component library for Cryptlex.
 
 # Usage
 
-In your root React file or global CSS, import the index.css
-
-TS
-```ts
-import '@cryptlex/web-components/index.css';
-```
+In your global CSS file, import the index.css and add the web-components as an explicit source for Tailwind.
 
 CSS
 ```css
-@import url('@cryptlex/web-components/index.css');
+@import '@cryptlex/web-components/index.css';
+@source "@cryptlex/web-components";
 ```

package/dist/_virtual/index.es.js

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=index.es.js.map

package/dist/_virtual/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.es.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.development.es.js.map

package/dist/_virtual/use-sync-external-store-shim.development.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.es.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.production.es.js.map

package/dist/_virtual/use-sync-external-store-shim.production.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/data-table/column-picker.es.js

@@ -1,79 +1,40 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import { Button as c } from "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import "../ui/card.es.js";
-import "../ui/chart.es.js";
-import { Checkbox as l } from "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import { Columns3 as a } from "lucide-react";
-import { useState as d } from "react";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import { Label as s } from "../ui/label.es.js";
-import "@tanstack/react-router";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import { Popover as h, PopoverTrigger as f, PopoverContent as g } from "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import { SearchInput as u } from "../ui/search-input.es.js";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/textarea.es.js";
-import "../ui/tooltip.es.js";
-import { getResourceDisplayName as C } from "./table-utils/constants.es.js";
-function ie({ table: r }) {
-  const [t, p] = d(""), m = r.getAllColumns().filter(
-    (e) => e.getCanHide() && e.id.toLowerCase().includes(t.toLowerCase())
-  );
-  return /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", size: "sm", children: "Columns" }) }),
-    /* @__PURE__ */ i(g, { className: "flex flex-col gap-4 divide-y-1", children: [
-      /* @__PURE__ */ o("div", { className: " flex gap-1 justify-center items-center sticky top-0", children: /* @__PURE__ */ o(u, { value: t, onChange: (e) => p(e) }) }),
-      /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ o(
-          l,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "react";
+import "../../utils/form-context.es.js";
+import "../../utils/form-hook.es.js";
+import { Columns3 as m } from "lucide-react";
+import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as a, DropdownMenuGroup as c, DropdownMenuCheckboxItem as n } from "../ui/dropdown-menu.es.js";
+import { Button as s } from "../ui/button.es.js";
+import { getResourceDisplayName as h } from "./table-utils/constants.es.js";
+function x({ toggleAllColumnsVisible: o, getIsAllColumnsVisible: t, getAllColumns: d }) {
+  return /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(s, { icon: () => m, variant: "outline", children: "Columns" }) }),
+    /* @__PURE__ */ r(a, { children: /* @__PURE__ */ i(c, { children: [
+      /* @__PURE__ */ r(n, { className: "italic", onSelect: (e) => {
+        e.preventDefault(), o();
+      }, checked: t(), children: "(Select all)" }),
+      d().map(
+        (e) => /* @__PURE__ */ i(
+          n,
           {
-            id: "selectAll",
-            checked: r.getIsAllColumnsVisible(),
-            onCheckedChange: () => r.toggleAllColumnsVisible()
-          }
-        ),
-        /* @__PURE__ */ o(s, { className: "font-normal cursor-pointer", htmlFor: "selectAll", children: "Show All Columns" })
-      ] }),
-      /* @__PURE__ */ i("div", { className: "flex flex-col gap-3 max-h-96 overflow-auto", children: [
-        m.map((e) => /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ o(
-            l,
-            {
-              id: e.id,
-              checked: e.getIsVisible(),
-              onCheckedChange: (n) => e.toggleVisibility(!!n)
-            }
-          ),
-          /* @__PURE__ */ o(s, { className: "font-normal cursor-pointer", htmlFor: e.id, children: C(e.id, "admin-portal") })
-        ] }, e.id)),
-        " ",
-        m.length === 0 && /* @__PURE__ */ o("p", { className: "text-gray-500 text-sm italic", children: "No matching columns found." })
-      ] })
-    ] })
+            onSelect: (l) => {
+              l.preventDefault(), e.toggleVisibility();
+            },
+            disabled: !e.getCanHide(),
+            checked: e.getIsVisible(),
+            children: [
+              e.getIsSorted(),
+              " ",
+              h(e.id, "admin-portal")
+            ]
+          },
+          e.id
+        )
+      )
+    ] }) })
   ] });
 }
 export {
-  ie as ColumnPicker
+  x as ColumnPicker
 };
 //# sourceMappingURL=column-picker.es.js.map

package/dist/components/data-table/column-picker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\" size=\"sm\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAMC,GAAU,SAAQ,WAAU,MAAK,MAAK,UAAA,UAEpD,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuTrigger,\n  getResourceDisplayName\n} from '@/index';\nimport type { Column } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\n\nexport function ColumnPicker({ toggleAllColumnsVisible, getIsAllColumnsVisible, getAllColumns }: { toggleAllColumnsVisible: () => void; getIsAllColumnsVisible: () => boolean, getAllColumns: () => Column<any, any>[] }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button icon={() => Columns3} variant={'outline'}>Columns</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem className=\"italic\" onSelect={(e) => { e.preventDefault(); toggleAllColumnsVisible(); }} checked={getIsAllColumnsVisible()}>(Select all)</DropdownMenuCheckboxItem>\n          {getAllColumns().map(col =>\n            <DropdownMenuCheckboxItem\n              onSelect={(e) => {\n                e.preventDefault();\n                col.toggleVisibility()\n              }}\n              key={col.id}\n              disabled={!col.getCanHide()}\n              checked={col.getIsVisible()}>{col.getIsSorted()} {getResourceDisplayName(col.id, 'admin-portal')}</DropdownMenuCheckboxItem>\n          )}\n          {/* TODO getResourceDisplayName needs some review here. */}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["ColumnPicker","toggleAllColumnsVisible","getIsAllColumnsVisible","getAllColumns","DropdownMenu","jsx","DropdownMenuTrigger","Button","Columns3","DropdownMenuContent","jsxs","DropdownMenuGroup","DropdownMenuCheckboxItem","col","e","getResourceDisplayName"],"mappings":";;;;;;;;AAYO,SAASA,EAAa,EAAE,yBAAAC,GAAyB,wBAAAC,GAAwB,eAAAC,KAA0I;AACxN,2BACGC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAM,MAAMC,GAAU,SAAS,WAAW,UAAA,UAAO,CAAA,GAC3D;AAAA,IACA,gBAAAH,EAACI,GACC,EAAA,UAAA,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAyB,EAAA,WAAU,UAAS,UAAU,CAAC,MAAM;AAAE,UAAE,eAAe,GAA2BX,EAAA;AAAA,MAAM,GAAA,SAASC,EAAuB,GAAG,UAAY,eAAA,CAAA;AAAA,MAChKC,EAAgB,EAAA;AAAA,QAAI,CACnBU,MAAA,gBAAAH;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,UAAU,CAACE,MAAM;AACf,cAAAA,EAAE,eAAe,GACjBD,EAAI,iBAAiB;AAAA,YACvB;AAAA,YAEA,UAAU,CAACA,EAAI,WAAW;AAAA,YAC1B,SAASA,EAAI,aAAa;AAAA,YAAI,UAAA;AAAA,cAAAA,EAAI,YAAY;AAAA,cAAE;AAAA,cAAEE,EAAuBF,EAAI,IAAI,cAAc;AAAA,YAAA;AAAA,UAAA;AAAA,UAF1FA,EAAI;AAAA,QAAA;AAAA,MAEwF;AAAA,IACrG,EAAA,CAEF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/data-table/data-table.es.js

@@ -1,62 +1,30 @@
 "use client";
-import { jsx as i, jsxs as c, Fragment as H } from "react/jsx-runtime";
-import { TableFilter as W } from "./table-filter.es.js";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import "../ui/card.es.js";
-import "../ui/chart.es.js";
-import "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import { Info as G } from "lucide-react";
-import { useState as M, useEffect as X, useMemo as d } from "react";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import "../ui/label.es.js";
-import "@tanstack/react-router";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/textarea.es.js";
-import { TooltipProvider as J, Tooltip as Y, TooltipTrigger as Z, TooltipContent as $ } from "../ui/tooltip.es.js";
-import { useQuery as Q, keepPreviousData as tt } from "@tanstack/react-query";
-import { createColumnHelper as ot, useReactTable as et, getCoreRowModel as it } from "@tanstack/react-table";
-import { useDebounce as rt } from "use-debounce";
-import { ColumnPicker as nt } from "./column-picker.es.js";
-import { PageSize as at } from "./page-size.es.js";
-import { Paginator as lt } from "./paginator.es.js";
-import mt from "./table-actions.es.js";
-import { TableContent as st } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as ct, TABLE_ID_COLUMN as pt, TABLE_DEFAULT_DATE_COLUMNS as ft } from "./table-commons.es.js";
-import { DEFAULT_FILTERABLE_FIELDS as ut } from "./table-utils/constants.es.js";
-const N = "actions_button";
-function lo({
-  columns: g,
-  fetchFn: O,
-  tableName: I,
-  tableActions: h,
-  columnsToHideByDefault: S,
-  filterableFields: V
+import { jsx as n, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { useState as z, useEffect as U, useMemo as M } from "react";
+import "../../utils/form-context.es.js";
+import "../../utils/form-hook.es.js";
+import { useQuery as H, keepPreviousData as K } from "@tanstack/react-query";
+import { createColumnHelper as j, useReactTable as k, getCoreRowModel as q } from "@tanstack/react-table";
+import { Info as B } from "lucide-react";
+import { useDebounce as G } from "use-debounce";
+import { ColumnPicker as Q } from "./column-picker.es.js";
+import { PageSize as W } from "./page-size.es.js";
+import { Paginator as X } from "./paginator.es.js";
+import J from "./table-actions.es.js";
+import { TableContent as Y } from "./table-content.es.js";
+import { TABLE_CHECK_BOX_COLUMN as Z, TABLE_ID_COLUMN as $, TABLE_DEFAULT_DATE_COLUMNS as ee } from "./table-commons.es.js";
+import { TooltipProvider as te, Tooltip as oe, TooltipTrigger as ne, TooltipContent as ae } from "../ui/tooltip.es.js";
+const N = "Actions";
+function we({
+  columns: u,
+  fetchFn: _,
+  tableName: V,
+  tableActions: d,
+  columnsToHideByDefault: p
+  // filterableFields,
 }) {
-  var D, E, L, v, x, P;
-  const [U, R] = M({
+  var w, P, y, x, v;
+  const [F, D] = z({
     sorting: [],
     // Sorting state
     columnFilters: [],
@@ -69,148 +37,127 @@ function lo({
     // Row selection state
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
-  }), a = (t) => {
-    R((o) => ({ ...o, ...t }));
-  }, { sorting: p, columnFilters: w, searching: y, columnVisibility: T, rowSelection: f, pagination: u } = U, [j] = rt(y.trim(), 300);
-  X(() => {
-    a({
-      columnVisibility: { id: !1, updatedAt: !1, ...S }
+  }), i = (e) => {
+    D((t) => ({ ...t, ...e }));
+  }, { sorting: g, columnFilters: C, searching: h, columnVisibility: S, rowSelection: b, pagination: m } = F, [E] = G(h.trim(), 300);
+  U(() => {
+    i({
+      columnVisibility: { id: !1, updatedAt: !1, ...p }
     });
-  }, [S]);
-  const [C, k] = M([]), F = d(() => C.reduce((t, o) => {
-    const { property: r, value: n, operator: l } = o;
-    return t[r] || (t[r] = {}), t[r][l] = n, t;
-  }, {}), [C]), e = Q({
-    queryKey: [I, u, p, j, F],
-    queryFn: () => O(u, p, y.trim(), F),
-    placeholderData: tt,
+  }, [p]);
+  const a = H({
+    queryKey: [V, m, g, E],
+    queryFn: () => _(m, g, h.trim()),
+    placeholderData: K,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), B = ot(), b = d(() => {
-    var r;
-    const t = (r = e.data) == null ? void 0 : r.data;
-    if (!(t != null && t.length)) return [];
-    const o = /* @__PURE__ */ new Set();
-    return t.forEach((n) => {
-      n.metadata && n.metadata.forEach((l) => {
-        o.add(l.key);
+  }), I = j(), f = M(() => {
+    var T;
+    const e = (T = a.data) == null ? void 0 : T.data;
+    if (!(e != null && e.length)) return [];
+    const t = /* @__PURE__ */ new Set();
+    return e.forEach((r) => {
+      r.metadata && r.metadata.forEach((s) => {
+        t.add(s.key);
       });
-    }), Array.from(o).map(
-      (n) => B.accessor(
-        (l) => {
+    }), Array.from(t).map(
+      (r) => I.accessor(
+        (s) => {
           var A;
-          const m = (A = l.metadata) == null ? void 0 : A.find((q) => q.key === n);
-          return m == null ? void 0 : m.value;
+          const l = (A = s.metadata) == null ? void 0 : A.find((R) => R.key === r);
+          return l == null ? void 0 : l.value;
         },
         {
-          header: () => /* @__PURE__ */ i(J, { delayDuration: 0, children: /* @__PURE__ */ c(Y, { children: [
-            /* @__PURE__ */ i(Z, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
-              n,
+          header: () => /* @__PURE__ */ n(te, { delayDuration: 0, children: /* @__PURE__ */ c(oe, { children: [
+            /* @__PURE__ */ n(ne, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
+              r,
               " ",
-              /* @__PURE__ */ i(G, { size: 18, strokeWidth: "1px" })
+              /* @__PURE__ */ n(B, { size: 18, strokeWidth: "1px" })
             ] }) }),
-            /* @__PURE__ */ i($, { children: "Metadata Key" })
+            /* @__PURE__ */ n(ae, { children: "Metadata Key" })
           ] }) }),
           // Use the metadata key as the column header
-          id: n,
+          id: r,
           enableSorting: !1,
-          cell: (l) => {
-            const m = l.getValue();
-            return m == null ? "" : String(m);
+          cell: (s) => {
+            const l = s.getValue();
+            return l == null ? "" : String(l);
           }
         }
       )
     );
-  }, [(D = e.data) == null ? void 0 : D.data]), _ = d(() => [
-    ...h.selection ? ct : [],
-    ...pt,
-    ...g.filter((o) => o.id !== N),
-    ...b.length ? b : [],
-    ...ft,
-    ...g.filter((o) => o.id === N)
-  ], [g, b, (E = e.data) == null ? void 0 : E.data, h.selection]), K = d(
-    () => Object.entries(f).map((t) => {
-      var o, r;
-      return (r = (o = e == null ? void 0 : e.data) == null ? void 0 : o.data) == null ? void 0 : r[t[0]];
-    }),
-    [(L = e == null ? void 0 : e.data) == null ? void 0 : L.data, f]
-  ), s = et({
-    data: ((v = e.data) == null ? void 0 : v.data) ?? [],
-    columns: _,
-    getCoreRowModel: it(),
-    rowCount: (x = e.data) == null ? void 0 : x.total,
+  }, [(w = a.data) == null ? void 0 : w.data]), L = M(() => [
+    ...d.selection ? Z : [],
+    ...$,
+    ...u.filter((t) => t.id !== N),
+    ...f.length ? f : [],
+    ...ee,
+    ...u.filter((t) => t.id === N)
+  ], [u, f, (P = a.data) == null ? void 0 : P.data, d.selection]), o = k({
+    data: ((y = a.data) == null ? void 0 : y.data) ?? [],
+    columns: L,
+    getCoreRowModel: q(),
+    rowCount: (x = a.data) == null ? void 0 : x.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
-    onPaginationChange: (t) => {
-      const o = typeof t == "function" ? t(u) : t;
-      a({ pagination: o });
+    onPaginationChange: (e) => {
+      const t = typeof e == "function" ? e(m) : e;
+      i({ pagination: t });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
-    onSortingChange: (t) => {
-      const o = typeof t == "function" ? t(p) : t;
-      a({ sorting: o, rowSelection: {} });
+    onSortingChange: (e) => {
+      const t = typeof e == "function" ? e(g) : e;
+      i({ sorting: t, rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
-    onGlobalFilterChange: (t) => {
-      const o = typeof t == "function" ? t(w) : t;
-      a({ columnFilters: o });
+    onGlobalFilterChange: (e) => {
+      const t = typeof e == "function" ? e(C) : e;
+      i({ columnFilters: t });
     },
-    onColumnVisibilityChange: (t) => {
-      const o = typeof t == "function" ? t(T) : t;
-      a({ columnVisibility: o });
+    onColumnVisibilityChange: (e) => {
+      const t = typeof e == "function" ? e(S) : e;
+      i({ columnVisibility: t });
     },
-    onRowSelectionChange: (t) => {
-      const o = typeof t == "function" ? t(f) : t;
-      a({ rowSelection: o });
+    onRowSelectionChange: (e) => {
+      const t = typeof e == "function" ? e(b) : e;
+      i({ rowSelection: t });
     },
     state: {
-      sorting: p,
-      columnFilters: w,
-      columnVisibility: T,
-      pagination: u,
-      rowSelection: f
+      sorting: g,
+      columnFilters: C,
+      columnVisibility: S,
+      pagination: m,
+      rowSelection: b
     },
     meta: {
-      refetch: e.refetch
+      refetch: a.refetch
     }
-  }), z = {
-    key: "",
-    stateData: K
-  };
-  return /* @__PURE__ */ c(H, { children: [
-    /* @__PURE__ */ i(
-      W,
+  });
+  return /* @__PURE__ */ n(O, { children: /* @__PURE__ */ c("div", { className: "bg-card", children: [
+    /* @__PURE__ */ n(
+      J,
       {
-        filterableProperties: { ...V, ...ut },
-        filters: C,
-        onFiltersChange: k
+        dataQuery: a,
+        getSelectedRowModel: o.getSelectedRowModel,
+        tableActions: d,
+        handleSearching: (e) => i({ searching: e })
       }
     ),
-    /* @__PURE__ */ i(
-      mt,
-      {
-        dataQuery: e,
-        table: s,
-        tableActions: h,
-        stateToPass: z,
-        handleSearching: (t) => a({ searching: t })
-      }
-    ),
-    /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: e }) }),
-    /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
+    /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x", tabIndex: 0, children: /* @__PURE__ */ n(Y, { getRowModel: o.getRowModel, getHeaderGroups: o.getHeaderGroups, query: a }) }),
+    /* @__PURE__ */ c("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
       /* @__PURE__ */ c("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ i(nt, { table: s }),
-        /* @__PURE__ */ i(at, { table: s })
+        /* @__PURE__ */ n(Q, { getAllColumns: o.getAllColumns, getIsAllColumnsVisible: o.getIsAllColumnsVisible, toggleAllColumnsVisible: o.toggleAllColumnsVisible }),
+        /* @__PURE__ */ n(W, { size: o.getState().pagination.pageSize, onSelect: o.setPageSize })
       ] }),
-      /* @__PURE__ */ i(lt, { table: s, rowCount: ((P = e.data) == null ? void 0 : P.total) ?? 0 })
+      /* @__PURE__ */ n(X, { firstPage: o.firstPage, previousPage: o.previousPage, getCanNextPage: o.getCanNextPage, getCanPreviousPage: o.getCanPreviousPage, lastPage: o.lastPage, nextPage: o.nextPage, getState: o.getState, rowCount: ((v = a.data) == null ? void 0 : v.total) ?? 0 })
     ] })
-  ] });
+  ] }) });
 }
 export {
   N as ACTIONS_COLUMN_ID,
-  lo as DataTable
+  we as DataTable
 };
 //# sourceMappingURL=data-table.es.js.map

package/dist/components/data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'Actions';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  // filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  // filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  // const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  // const formatedFilters = useMemo(() => {\n  //   return filters.reduce((acc, filter) => {\n  //     const { property, value, operator } = filter;\n  //     if (!acc[property]) {\n  //       acc[property] = {};\n  //     }\n  //     acc[property][operator] = value;\n  //     return acc;\n  //   }, {} as Record<string, Record<string, any>>);\n  // }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const query = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim()),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = query.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [query.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, query.data?.data, tableActions.selection]);\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: query.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: query.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: query.refetch,\n    },\n  });\n\n  return (\n    <>\n      {/* <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      /> */}\n\n      {/* Table Actions Section */}\n      <div className='bg-card'>\n        <Actions\n          dataQuery={query}\n          getSelectedRowModel={table.getSelectedRowModel}\n          tableActions={tableActions}\n          handleSearching={(value) => updateTableState({ searching: value })}\n        />\n\n        {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n        <div className='w-full overflow-auto border-x' tabIndex={0}>\n          <TableContent getRowModel={table.getRowModel} getHeaderGroups={table.getHeaderGroups} query={query} />\n        </div>\n\n        {/* Table Footer Section with Pagination and Column Picker */}\n        <div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n          <div className=\"flex gap-4\">\n            <ColumnPicker getAllColumns={table.getAllColumns} getIsAllColumnsVisible={table.getIsAllColumnsVisible} toggleAllColumnsVisible={table.toggleAllColumnsVisible} />\n            <PageSize size={table.getState().pagination.pageSize} onSelect={table.setPageSize} />\n          </div>\n          <Paginator firstPage={table.firstPage} previousPage={table.previousPage} getCanNextPage={table.getCanNextPage} getCanPreviousPage={table.getCanPreviousPage} lastPage={table.lastPage} nextPage={table.nextPage} getState={table.getState} rowCount={query.data?.total ?? 0} />\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","query","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","table","useReactTable","_c","getCoreRowModel","_d","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","Fragment","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":"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"}