@cryptlex/web-components 1.3.4 → 1.3.5

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

@@ -10,6 +10,8 @@ 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";
@@ -17,14 +19,14 @@ 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 { Columns3 as a } from "lucide-react";
+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 d, PopoverTrigger as h, PopoverContent as f } from "../ui/popover.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 g } from "../ui/search-input.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";
@@ -33,16 +35,15 @@ import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
 import "../ui/tooltip.es.js";
-import { useState as u } from "react";
 import { getResourceDisplayName as C } from "./table-utils/constants.es.js";
-function oe({ table: r }) {
-  const [t, p] = u(""), m = r.getAllColumns().filter(
+function ie({ table: r }) {
+  const [t, p] = d(""), m = r.getAllColumns().filter(
     (e) => e.getCanHide() && e.id.toLowerCase().includes(t.toLowerCase())
   );
-  return /* @__PURE__ */ i(d, { children: [
-    /* @__PURE__ */ o(h, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", children: "Columns" }) }),
-    /* @__PURE__ */ i(f, { 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(g, { value: t, onChange: (e) => p(e) }) }),
+  return /* @__PURE__ */ i(h, { children: [
+    /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", 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,
@@ -73,6 +74,6 @@ function oe({ table: r }) {
   ] });
 }
 export {
-  oe as ColumnPicker
+  ie 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\">\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,IAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAMC,GAAU,SAAQ,WAAU,UAAA,UAE1C,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  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\">\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,IAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAMC,GAAU,SAAQ,WAAU,UAAA,UAE1C,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;"}

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

@@ -11,6 +11,8 @@ import "../ui/chart.es.js";
 import "../ui/checkbox.es.js";
 import "@radix-ui/react-collapsible";
 import "../ui/command.es.js";
+import { Info as R } from "lucide-react";
+import { useState as A, useEffect as I, useMemo as b } from "react";
 import "../ui/dialog.es.js";
 import "../ui/drawer.es.js";
 import "../ui/dropdown-menu.es.js";
@@ -18,14 +20,13 @@ import "../ui/form.es.js";
 import "../ui/input.es.js";
 import "../ui/input-otp.es.js";
 import "../ui/label.es.js";
-import { Info as R } from "lucide-react";
+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 { useState as A, useEffect as I, useMemo as b } from "react";
 import "../ui/select.es.js";
 import "../ui/separator.es.js";
 import "../ui/sheet.es.js";
@@ -34,7 +35,7 @@ import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
 import { TooltipProvider as L, Tooltip as U, TooltipTrigger as q, TooltipContent as H } from "../ui/tooltip.es.js";
-import { useQuery as G, keepPreviousData as W } from "@tanstack/react-query";
+import { useQuery as W, keepPreviousData as G } from "@tanstack/react-query";
 import { createColumnHelper as X, useReactTable as B, getCoreRowModel as J } from "@tanstack/react-table";
 import { useDebounce as Y } from "use-debounce";
 import { ColumnPicker as Z } from "./column-picker.es.js";
@@ -43,14 +44,14 @@ import { Paginator as Q } from "./paginator.es.js";
 import tt from "./table-actions.es.js";
 import { CHECK_BOX as et, ID_COLUMN as ot, DEFAULT_DATE_COLUMNS as it } from "./table-commons.es.js";
 import { TableContent as nt } from "./table-content.es.js";
-function Jt({
+function Yt({
   columns: u,
   fetchFn: V,
   tableName: _,
   tableActions: g,
-  columnsToHideByDefault: C
+  columnsToHideByDefault: w
 }) {
-  var v, T, F, D, P, N;
+  var v, T, D, F, P, N;
   const [j, E] = A({
     sorting: [],
     // Sorting state
@@ -66,18 +67,20 @@ function Jt({
     // Pagination state
   }), n = (t) => {
     E((e) => ({ ...e, ...t }));
-  }, { sorting: p, columnFilters: w, searching: S, columnVisibility: y, rowSelection: d, pagination: f } = j, [k] = Y(S.trim(), 300);
+  }, { sorting: p, columnFilters: C, searching: y, columnVisibility: S, rowSelection: f, pagination: d } = j, [O] = Y(y.trim(), 300);
   I(() => {
     n({
-      columnVisibility: { id: !1, updatedAt: !1, ...C }
+      columnVisibility: { id: !1, updatedAt: !1, ...w }
     });
-  }, [C]);
-  const o = G({
-    queryKey: [_, f, p, k],
-    queryFn: () => V(f, p, S.trim(), {}),
-    placeholderData: W
+  }, [w]);
+  const o = W({
+    queryKey: [_, d, p, O],
+    queryFn: () => V(d, p, y.trim(), {}),
+    placeholderData: G,
     // Keep previous data while loading new data
-  }), z = X(), h = b(() => {
+    retry: 0,
+    refetchOnWindowFocus: !1
+  }), k = X(), h = b(() => {
     var m;
     const t = (m = o.data) == null ? void 0 : m.data;
     if (!(t != null && t.length)) return [];
@@ -87,10 +90,10 @@ function Jt({
         e.add(s.key);
       });
     }), Array.from(e).map(
-      (a) => z.accessor(
+      (a) => k.accessor(
         (s) => {
           var M;
-          const r = (M = s.metadata) == null ? void 0 : M.find((O) => O.key === a);
+          const r = (M = s.metadata) == null ? void 0 : M.find((K) => K.key === a);
           return r == null ? void 0 : r.value;
         },
         {
@@ -119,21 +122,21 @@ function Jt({
     ...h.length ? h : [],
     ...it,
     ...u.filter((e) => e.id === "actions")
-  ], [u, h, (T = o.data) == null ? void 0 : T.data, g.selection]), K = b(
-    () => Object.entries(d).map((t) => {
+  ], [u, h, (T = o.data) == null ? void 0 : T.data, g.selection]), z = b(
+    () => Object.entries(f).map((t) => {
       var e, m;
       return (m = (e = o == null ? void 0 : o.data) == null ? void 0 : e.data) == null ? void 0 : m[t[0]];
     }),
-    [(F = o == null ? void 0 : o.data) == null ? void 0 : F.data, d]
+    [(D = o == null ? void 0 : o.data) == null ? void 0 : D.data, f]
   ), l = B({
-    data: ((D = o.data) == null ? void 0 : D.data) ?? [],
+    data: ((F = o.data) == null ? void 0 : F.data) ?? [],
     columns: x,
     getCoreRowModel: J(),
     rowCount: (P = o.data) == null ? void 0 : P.total,
     manualPagination: !0,
     // Handle pagination manually
     onPaginationChange: (t) => {
-      const e = typeof t == "function" ? t(f) : t;
+      const e = typeof t == "function" ? t(d) : t;
       n({ pagination: e });
     },
     manualSorting: !0,
@@ -145,23 +148,23 @@ function Jt({
     manualFiltering: !0,
     // Handle filtering manually
     onGlobalFilterChange: (t) => {
-      const e = typeof t == "function" ? t(w) : t;
+      const e = typeof t == "function" ? t(C) : t;
       n({ columnFilters: e });
     },
     onColumnVisibilityChange: (t) => {
-      const e = typeof t == "function" ? t(y) : t;
+      const e = typeof t == "function" ? t(S) : t;
       n({ columnVisibility: e });
     },
     onRowSelectionChange: (t) => {
-      const e = typeof t == "function" ? t(d) : t;
+      const e = typeof t == "function" ? t(f) : t;
       n({ rowSelection: e });
     },
     state: {
       sorting: p,
-      columnFilters: w,
-      columnVisibility: y,
-      pagination: f,
-      rowSelection: d
+      columnFilters: C,
+      columnVisibility: S,
+      pagination: d,
+      rowSelection: f
     },
     meta: {
       refetch: o.refetch
@@ -175,13 +178,13 @@ function Jt({
         table: l,
         tableActions: g,
         stateToPass: {
-          stateData: K,
+          stateData: z,
           key: "state"
         },
         handleSearching: (t) => n({ searching: t })
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: "relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start", children: /* @__PURE__ */ i(nt, { table: l, isFetching: o.isFetching, columns: x }) }),
+    /* @__PURE__ */ i("div", { className: "relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start", children: /* @__PURE__ */ i(nt, { table: l, columns: x, dataQuery: o }) }),
     /* @__PURE__ */ c("div", { className: "flex overflow-auto flex-row w-full justify-between border  gap-4 px-1 py-2", children: [
       /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ i(Z, { table: l }),
@@ -192,6 +195,6 @@ function Jt({
   ] });
 }
 export {
-  Jt as DataTable
+  Yt 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 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 { CHECK_BOX, DEFAULT_DATE_COLUMNS, ID_COLUMN } from './table-commons';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\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; // 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}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\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\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = 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  });\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 ? CHECK_BOX : []),\n      ...ID_COLUMN,\n      ...columns.filter((col) => col.id !== 'actions'),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === 'actions'),\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\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      updateTableState({ sorting: newSorting });\n    },\n    manualFiltering: true, // Handle filtering manually\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\n  return (\n    <div className=\"flex flex-col w-full bg-card\">\n      {/* Table Actions Section */}\n      <div className=\"border px-1\">\n        <Actions\n          dataQuery={dataQuery}\n          table={table}\n          tableActions={tableActions}\n          stateToPass={{\n            stateData: rowSelectedData,\n            key: 'state',\n          }}\n          handleSearching={(value) => updateTableState({ searching: value })}\n        />\n      </div>\n\n      {/* Table Content Section */}\n      <div className=\"relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start\">\n        <TableContent table={table} isFetching={dataQuery.isFetching} columns={extendedColumns} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"flex overflow-auto flex-row w-full justify-between border  gap-4 px-1 py-2\">\n        <div className=\"flex gap-2\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","CHECK_BOX","ID_COLUMN","col","DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","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';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 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 { CHECK_BOX, DEFAULT_DATE_COLUMNS, ID_COLUMN } from './table-commons';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\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; // 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}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\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\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = 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 = 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 ? CHECK_BOX : []),\n      ...ID_COLUMN,\n      ...columns.filter((col) => col.id !== 'actions'),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === 'actions'),\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\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      updateTableState({ sorting: newSorting });\n    },\n    manualFiltering: true, // Handle filtering manually\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\n  return (\n    <div className=\"flex flex-col w-full bg-card\">\n      {/* Table Actions Section */}\n      <div className=\"border px-1\">\n        <Actions\n          dataQuery={dataQuery}\n          table={table}\n          tableActions={tableActions}\n          stateToPass={{\n            stateData: rowSelectedData,\n            key: 'state',\n          }}\n          handleSearching={(value) => updateTableState({ searching: value })}\n        />\n      </div>\n\n      {/* Table Content Section */}\n      <div className=\"relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start\">\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"flex overflow-auto flex-row w-full justify-between border  gap-4 px-1 py-2\">\n        <div className=\"flex gap-2\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","CHECK_BOX","ID_COLUMN","col","DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import { useRouterState as a, Link as n } from "@tanstack/react-router";
-import { RotateCw as f, Plus as g, Pencil as u, Trash as w } from "lucide-react";
+import { RotateCw as f, Plus as g, Pencil as u, Trash as v } from "lucide-react";
 import { Button as t } from "../ui/button.es.js";
 import "../ui/accordion.es.js";
 import "../ui/avatar.es.js";
@@ -12,6 +12,7 @@ import "../ui/chart.es.js";
 import "../ui/checkbox.es.js";
 import "@radix-ui/react-collapsible";
 import "../ui/command.es.js";
+import { useState as w } from "react";
 import "../ui/dialog.es.js";
 import "../ui/drawer.es.js";
 import "../ui/dropdown-menu.es.js";
@@ -25,7 +26,7 @@ import "../ui/pagination.es.js";
 import "../ui/password-input.es.js";
 import "../ui/popover.es.js";
 import "../ui/radio-group.es.js";
-import { SearchInput as v } from "../ui/search-input.es.js";
+import { SearchInput as S } from "../ui/search-input.es.js";
 import "../ui/select.es.js";
 import "../ui/separator.es.js";
 import "../ui/sheet.es.js";
@@ -34,7 +35,6 @@ import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
 import "../ui/tooltip.es.js";
-import { useState as S } from "react";
 function te({
   table: o,
   tableActions: e,
@@ -42,7 +42,7 @@ function te({
   handleSearching: l,
   dataQuery: i
 }) {
-  const { location: { href: m } = {} } = a(), [h, s] = S("");
+  const { location: { href: m } = {} } = a(), [h, s] = w("");
   return /* @__PURE__ */ p("div", { className: "flex justify-between my-0  py-2 gap-4 overflow-auto", children: [
     /* @__PURE__ */ p("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ r(
@@ -54,15 +54,15 @@ function te({
           variant: "outline"
         }
       ),
-      e.create && o.getSelectedRowModel().rows.length === 0 && /* @__PURE__ */ p(n, { to: `${m}/new`, children: [
+      e.create && o.getSelectedRowModel().rows.length === 0 && /* @__PURE__ */ p(n, { to: `${m}/create`, children: [
         /* @__PURE__ */ r(t, { disabled: i.isFetching, icon: g, children: "Create" }),
         " "
       ] }),
-      o.getSelectedRowModel().rows.length > 0 && e.update && /* @__PURE__ */ r(n, { to: `${m}/update`, state: c, children: /* @__PURE__ */ r(t, { disabled: i.isFetching, icon: u, children: "Update" }) }),
-      o.getSelectedRowModel().rows.length > 0 && (e == null ? void 0 : e.delete) && /* @__PURE__ */ r(n, { to: `${m}/delete`, state: c, children: /* @__PURE__ */ r(t, { disabled: i.isFetching, icon: w, variant: "destructive", children: "Delete" }) })
+      o.getSelectedRowModel().rows.length > 0 && e.update && /* @__PURE__ */ r(n, { to: `${m}/edit`, state: c, children: /* @__PURE__ */ r(t, { disabled: i.isFetching, icon: u, children: "Update" }) }),
+      o.getSelectedRowModel().rows.length > 0 && (e == null ? void 0 : e.delete) && /* @__PURE__ */ r(n, { to: `${m}/delete`, state: c, children: /* @__PURE__ */ r(t, { disabled: i.isFetching, icon: v, variant: "destructive", children: "Delete" }) })
     ] }),
     (e == null ? void 0 : e.search) && /* @__PURE__ */ r("div", { className: "relative flex gap-1 justify-center items-center", children: /* @__PURE__ */ r(
-      v,
+      S,
       {
         value: h,
         onChange: (d) => {

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

@@ -1 +1 @@
-{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { Link, useRouterState } from '@tanstack/react-router';\n\nimport { Pencil, Plus, RotateCw, Trash } from 'lucide-react';\n\nimport type { TableActions } from '@/components/data-table/table-utils/index';\nimport { Button } from '@/components/ui/button';\nimport { SearchInput } from '@/index';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { Table } from '@tanstack/react-table';\nimport { useState } from 'react';\n\nexport default function Actions<TData>({\n  table,\n  tableActions,\n  stateToPass,\n  handleSearching,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  tableActions: TableActions;\n  handleSearching: (value: string) => void;\n  stateToPass: {\n    key: string;\n    stateData: any;\n  };\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  const { location: { href } = {} } = useRouterState();\n  const [search, setSearch] = useState<string>('');\n  return (\n    <div className=\"flex justify-between my-0  py-2 gap-4 overflow-auto\">\n      <div className=\"flex gap-2\">\n        <Button\n          loading={dataQuery.isFetching}\n          icon={RotateCw}\n          onClick={() => dataQuery.refetch()}\n          variant={'outline'}\n        />\n        {/* //TODO: we can  show the create, delete button based on permsission */}\n        {/* All the creating routes will be with url /new to make it resuable */}\n        {tableActions.create && table.getSelectedRowModel().rows.length === 0 && (\n          <Link to={`${href}/new`}>\n            <Button disabled={dataQuery.isFetching} icon={Plus}>\n              Create\n            </Button>{' '}\n          </Link>\n        )}\n        {/* We can show ids in the url also, but then will make no sense if we are not fetching data if user has url with ids. if we add functionality of fetching selected items based on ids, then it will make sense */}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions.update && (\n          <Link to={`${href}/update`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Pencil}>\n              Update\n            </Button>\n          </Link>\n        )}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions?.delete && (\n          <Link to={`${href}/delete`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Trash} variant={'destructive'}>\n              Delete\n            </Button>\n          </Link>\n        )}\n      </div>\n      {tableActions?.search && (\n        <div className=\"relative flex gap-1 justify-center items-center\">\n          <SearchInput\n            value={search}\n            onChange={(e) => {\n              setSearch(e);\n              handleSearching(e);\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Actions","table","tableActions","stateToPass","handleSearching","dataQuery","href","useRouterState","search","setSearch","useState","jsxs","jsx","Button","RotateCw","Link","Plus","Pencil","Trash","SearchInput","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAwBA,GAAe;AAAA,EACrC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,GASG;AACK,QAAA,EAAE,UAAU,EAAE,MAAAC,MAAS,CAAC,EAAA,IAAMC,EAAe,GAC7C,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAE7C,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,uDACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASR,EAAU;AAAA,UACnB,MAAMS;AAAA,UACN,SAAS,MAAMT,EAAU,QAAQ;AAAA,UACjC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGCH,EAAa,UAAUD,EAAM,oBAAA,EAAsB,KAAK,WAAW,KACjE,gBAAAU,EAAAI,GAAA,EAAK,IAAI,GAAGT,CAAI,QACf,UAAA;AAAA,QAAA,gBAAAM,EAACC,KAAO,UAAUR,EAAU,YAAY,MAAMW,GAAM,UAEpD,UAAA;AAAA,QAAU;AAAA,MAAA,GACZ;AAAA,MAGDf,EAAM,oBAAoB,EAAE,KAAK,SAAS,KAAKC,EAAa,UAC1D,gBAAAU,EAAAG,GAAA,EAAK,IAAI,GAAGT,CAAI,WAAW,OAAOH,GACjC,UAAA,gBAAAS,EAACC,GAAO,EAAA,UAAUR,EAAU,YAAY,MAAMY,GAAQ,UAAA,SAAA,CAEtD,EACF,CAAA;AAAA,MAEDhB,EAAM,oBAAoB,EAAE,KAAK,SAAS,MAAKC,KAAA,gBAAAA,EAAc,WAC5D,gBAAAU,EAACG,GAAK,EAAA,IAAI,GAAGT,CAAI,WAAW,OAAOH,GACjC,UAAC,gBAAAS,EAAAC,GAAA,EAAO,UAAUR,EAAU,YAAY,MAAMa,GAAO,SAAS,eAAe,UAAA,SAE7E,CAAA,EACF,CAAA;AAAA,IAAA,GAEJ;AAAA,KACChB,KAAA,gBAAAA,EAAc,WACZ,gBAAAU,EAAA,OAAA,EAAI,WAAU,mDACb,UAAA,gBAAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,OAAOX;AAAA,QACP,UAAU,CAACY,MAAM;AACf,UAAAX,EAAUW,CAAC,GACXhB,EAAgBgB,CAAC;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { Link, useRouterState } from '@tanstack/react-router';\n\nimport { Pencil, Plus, RotateCw, Trash } from 'lucide-react';\n\nimport type { TableActions } from '@/components/data-table/table-utils/index';\nimport { Button } from '@/components/ui/button';\nimport { SearchInput } from '@/index';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { Table } from '@tanstack/react-table';\nimport { useState } from 'react';\n\nexport default function Actions<TData>({\n  table,\n  tableActions,\n  stateToPass,\n  handleSearching,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  tableActions: TableActions;\n  handleSearching: (value: string) => void;\n  stateToPass: {\n    key: string;\n    stateData: any;\n  };\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  const { location: { href } = {} } = useRouterState();\n  const [search, setSearch] = useState<string>('');\n  return (\n    <div className=\"flex justify-between my-0  py-2 gap-4 overflow-auto\">\n      <div className=\"flex gap-2\">\n        <Button\n          loading={dataQuery.isFetching}\n          icon={RotateCw}\n          onClick={() => dataQuery.refetch()}\n          variant={'outline'}\n        />\n        {/* //TODO: we can  show the create, delete button based on permsission */}\n        {/* All the creating routes will be with url /create in host app */}\n        {tableActions.create && table.getSelectedRowModel().rows.length === 0 && (\n          <Link to={`${href}/create`}>\n            <Button disabled={dataQuery.isFetching} icon={Plus}>\n              Create\n            </Button>{' '}\n          </Link>\n        )}\n        {/* All the updating routes will be with url /edit in host app */}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions.update && (\n          <Link to={`${href}/edit`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Pencil}>\n              Update\n            </Button>\n          </Link>\n        )}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions?.delete && (\n          <Link to={`${href}/delete`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Trash} variant={'destructive'}>\n              Delete\n            </Button>\n          </Link>\n        )}\n      </div>\n      {tableActions?.search && (\n        <div className=\"relative flex gap-1 justify-center items-center\">\n          <SearchInput\n            value={search}\n            onChange={(e) => {\n              setSearch(e);\n              handleSearching(e);\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Actions","table","tableActions","stateToPass","handleSearching","dataQuery","href","useRouterState","search","setSearch","useState","jsxs","jsx","Button","RotateCw","Link","Plus","Pencil","Trash","SearchInput","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAwBA,GAAe;AAAA,EACrC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,GASG;AACK,QAAA,EAAE,UAAU,EAAE,MAAAC,MAAS,CAAC,EAAA,IAAMC,EAAe,GAC7C,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAE7C,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,uDACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASR,EAAU;AAAA,UACnB,MAAMS;AAAA,UACN,SAAS,MAAMT,EAAU,QAAQ;AAAA,UACjC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGCH,EAAa,UAAUD,EAAM,oBAAA,EAAsB,KAAK,WAAW,KACjE,gBAAAU,EAAAI,GAAA,EAAK,IAAI,GAAGT,CAAI,WACf,UAAA;AAAA,QAAA,gBAAAM,EAACC,KAAO,UAAUR,EAAU,YAAY,MAAMW,GAAM,UAEpD,UAAA;AAAA,QAAU;AAAA,MAAA,GACZ;AAAA,MAGDf,EAAM,oBAAoB,EAAE,KAAK,SAAS,KAAKC,EAAa,UAC1D,gBAAAU,EAAAG,GAAA,EAAK,IAAI,GAAGT,CAAI,SAAS,OAAOH,GAC/B,UAAA,gBAAAS,EAACC,GAAO,EAAA,UAAUR,EAAU,YAAY,MAAMY,GAAQ,UAAA,SAAA,CAEtD,EACF,CAAA;AAAA,MAEDhB,EAAM,oBAAoB,EAAE,KAAK,SAAS,MAAKC,KAAA,gBAAAA,EAAc,WAC5D,gBAAAU,EAACG,GAAK,EAAA,IAAI,GAAGT,CAAI,WAAW,OAAOH,GACjC,UAAC,gBAAAS,EAAAC,GAAA,EAAO,UAAUR,EAAU,YAAY,MAAMa,GAAO,SAAS,eAAe,UAAA,SAE7E,CAAA,EACF,CAAA;AAAA,IAAA,GAEJ;AAAA,KACChB,KAAA,gBAAAA,EAAc,WACZ,gBAAAU,EAAA,OAAA,EAAI,WAAU,mDACb,UAAA,gBAAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,OAAOX;AAAA,QACP,UAAU,CAACY,MAAM;AACf,UAAAX,EAAUW,CAAC,GACXhB,EAAgBgB,CAAC;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,14 +1,15 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Table as d, TableHeader as p, TableRow as c, TableCell as a, TableBody as u, TableFooter as g } from "../ui/table.es.js";
-import { flexRender as i } from "@tanstack/react-table";
-function h({
-  table: o,
-  isFetching: r,
-  columns: m
+import { jsxs as a, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { Table as g, TableHeader as p, TableRow as c, TableCell as s, TableBody as h, TableFooter as u } from "../ui/table.es.js";
+import { flexRender as d } from "@tanstack/react-table";
+import { Info as f } from "lucide-react";
+function y({
+  table: r,
+  columns: i,
+  dataQuery: o
 }) {
-  return /* @__PURE__ */ n(d, { className: "relative h-full w-full", children: [
-    /* @__PURE__ */ e(p, { className: "sticky top-0 z-10", children: o.getHeaderGroups().map((s, l) => /* @__PURE__ */ e(c, { className: "border-b", children: s.headers.map((t) => /* @__PURE__ */ n(
-      a,
+  return /* @__PURE__ */ a(g, { className: "relative h-full w-full", children: [
+    /* @__PURE__ */ e(p, { className: "sticky top-0 z-10", children: r.getHeaderGroups().map((n, l) => /* @__PURE__ */ e(c, { className: "border-b", children: n.headers.map((t) => /* @__PURE__ */ a(
+      s,
       {
         className: `
                   px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap 
@@ -17,7 +18,7 @@ function h({
                 `,
         onClick: t.column.getToggleSortingHandler(),
         children: [
-          t.isPlaceholder ? null : i(t.column.columnDef.header, t.getContext()),
+          t.isPlaceholder ? null : d(t.column.columnDef.header, t.getContext()),
           {
             asc: "↑",
             desc: "↓"
@@ -26,21 +27,24 @@ function h({
       },
       t.id
     )) }, l)) }),
-    /* @__PURE__ */ e(u, { className: "flex-1 overflow-y-auto", children: o.getRowModel().rows.length ? o.getRowModel().rows.map((s) => /* @__PURE__ */ e(c, { "data-state": s.getIsSelected() && "selected", children: s.getVisibleCells().map((l) => /* @__PURE__ */ e(
-      a,
+    /* @__PURE__ */ e(h, { className: "flex-1 overflow-y-auto", children: r.getRowModel().rows.length ? r.getRowModel().rows.map((n) => /* @__PURE__ */ e(c, { "data-state": n.getIsSelected() && "selected", children: n.getVisibleCells().map((l) => /* @__PURE__ */ e(
+      s,
       {
         className: `
                     px-4 py-2 text-left text-sm whitespace-nowrap 
                     ${l.column.id === "actions" ? "sticky right-0 bg-card text-center shadow-2xl" : ""}
                   `,
-        children: i(l.column.columnDef.cell, l.getContext())
+        children: d(l.column.columnDef.cell, l.getContext())
       },
       l.id
-    )) }, s.id)) : /* @__PURE__ */ e(c, { children: !r && /* @__PURE__ */ e(a, { colSpan: m.length, className: "px-4 py-2 text-center text-sm", children: "No results." }) }) }),
-    r && /* @__PURE__ */ e(g, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
+    )) }, n.id)) : /* @__PURE__ */ e(c, { className: "h-[55vh] hover:bg-transparent cursor-not-allowed", children: !o.isFetching && o.isError ? /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(s, { colSpan: i.length, className: "border-none  ", children: /* @__PURE__ */ a("span", { className: "flex  gap-3 justify-center align-middle items-center ", children: [
+      /* @__PURE__ */ e(f, {}),
+      " You don't have the required permissions. Please contact your admin."
+    ] }) }) }) : /* @__PURE__ */ e(s, { colSpan: i.length, children: /* @__PURE__ */ e("span", { className: "flex gap-3 justify-center align-middle items-center ", children: "No result found." }) }) }) }),
+    o.isFetching && /* @__PURE__ */ e(u, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
   ] });
 }
 export {
-  h as TableContent
+  y as TableContent
 };
 //# sourceMappingURL=table-content.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import {\n  Table as CxTable,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\n\nexport function TableContent<TData, TValue>({\n  table,\n  isFetching,\n  columns,\n}: {\n  table: Table<TData>;\n  isFetching: boolean;\n  columns: ColumnDef<TData, TValue>[];\n}) {\n  return (\n    <CxTable className=\"relative h-full w-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index} className=\"border-b\">\n            {headerGroup.headers.map((header) => (\n              <TableCell\n                key={header.id}\n                className={`\n                  px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap \n                  bg-card \n                  ${header.id === 'actions' ? 'sticky right-0 z-50 bg-card' : ''}\n                `}\n                onClick={header.column.getToggleSortingHandler()}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(header.column.columnDef.header, header.getContext())}\n                {{\n                  asc: '↑',\n                  desc: '↓',\n                }[header.column.getIsSorted() as string] ?? null}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ? (\n          table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap \n                    ${cell.column.id === 'actions' ? 'sticky right-0 bg-card text-center shadow-2xl' : ''}\n                  `}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))\n        ) : (\n          <TableRow>\n            {!isFetching && (\n              <TableCell colSpan={columns.length} className=\"px-4 py-2 text-center text-sm\">\n                No results.\n              </TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </CxTable>\n  );\n}\n"],"names":["TableContent","table","isFetching","columns","jsxs","CxTable","jsx","TableHeader","headerGroup","index","TableRow","header","TableCell","flexRender","TableBody","row","cell","TableFooter"],"mappings":";;;AAUO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAIG;AAEC,SAAA,gBAAAC,EAACC,GAAQ,EAAA,WAAU,0BACjB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,YAAM,gBAAgB,EAAE,IAAI,CAACC,GAAaC,MACzC,gBAAAH,EAACI,KAAqB,WAAU,YAC7B,YAAY,QAAQ,IAAI,CAACC,MACxB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA;AAAA,oBAGPD,EAAO,OAAO,YAAY,gCAAgC,EAAE;AAAA;AAAA,QAEhE,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAA;AAAA,UAAOA,EAAA,gBACJ,OACAE,EAAWF,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,UACjE;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,UACN,EAAAA,EAAO,OAAO,YAAA,CAAuB,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAdvCA,EAAO;AAAA,IAAA,CAgBf,EAAA,GAnBYF,CAoBf,CACD,GACH;AAAA,IACC,gBAAAH,EAAAQ,GAAA,EAAU,WAAU,0BAClB,UAAMb,EAAA,YAAA,EAAc,KAAK,SACxBA,EAAM,YAAY,EAAE,KAAK,IAAI,CAACc,MAC3B,gBAAAT,EAAAI,GAAA,EAAsB,cAAYK,EAAI,cAAc,KAAK,YACvD,UAAAA,EAAI,gBAAgB,EAAE,IAAI,CAACC,MAC1B,gBAAAV;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA,sBAEPI,EAAK,OAAO,OAAO,YAAY,kDAAkD,EAAE;AAAA;AAAA,QAGtF,YAAWA,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,MAAA;AAAA,MANpDA,EAAK;AAAA,IAAA,CAQb,EAXY,GAAAD,EAAI,EAYnB,CACD,sBAEAL,GACE,EAAA,UAAA,CAACR,KACC,gBAAAI,EAAAM,GAAA,EAAU,SAAST,EAAQ,QAAQ,WAAU,iCAAgC,UAAA,cAAA,CAE9E,EAEJ,CAAA,GAEJ;AAAA,IAECD,KACC,gBAAAI,EAACW,GAAY,EAAA,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}
+{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import {\n  Table as CxTable,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\n\nexport function TableContent<TData, TValue>({\n  table,\n  columns,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  columns: ColumnDef<TData, TValue>[];\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  return (\n    <CxTable className=\"relative h-full w-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index} className=\"border-b\">\n            {headerGroup.headers.map((header) => (\n              <TableCell\n                key={header.id}\n                className={`\n                  px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap \n                  bg-card \n                  ${header.id === 'actions' ? 'sticky right-0 z-50 bg-card' : ''}\n                `}\n                onClick={header.column.getToggleSortingHandler()}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(header.column.columnDef.header, header.getContext())}\n                {{\n                  asc: '↑',\n                  desc: '↓',\n                }[header.column.getIsSorted() as string] ?? null}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ? (\n          table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap \n                    ${\n                      cell.column.id === 'actions'\n                        ? 'sticky right-0 bg-card text-center shadow-2xl'\n                        : ''\n                    }\n                  `}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))\n        ) : (\n          <TableRow className=\"h-[55vh] hover:bg-transparent cursor-not-allowed\">\n            {!dataQuery.isFetching && dataQuery.isError ? (\n              <>\n                <TableCell colSpan={columns.length} className=\"border-none  \">\n                  <span className=\"flex  gap-3 justify-center align-middle items-center \">\n                    <Info /> You don't have the required permissions. Please contact your admin.\n                  </span>\n                </TableCell>\n              </>\n            ) : (\n              <TableCell colSpan={columns.length}>\n                <span className=\"flex gap-3 justify-center align-middle items-center \">\n                  No result found.\n                </span>\n              </TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {dataQuery.isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </CxTable>\n  );\n}\n"],"names":["TableContent","table","columns","dataQuery","jsxs","CxTable","jsx","TableHeader","headerGroup","index","TableRow","header","TableCell","flexRender","TableBody","row","cell","Fragment","Info","TableFooter"],"mappings":";;;;AAYO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAIG;AAEC,SAAA,gBAAAC,EAACC,GAAQ,EAAA,WAAU,0BACjB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,YAAM,gBAAgB,EAAE,IAAI,CAACC,GAAaC,MACzC,gBAAAH,EAACI,KAAqB,WAAU,YAC7B,YAAY,QAAQ,IAAI,CAACC,MACxB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA;AAAA,oBAGPD,EAAO,OAAO,YAAY,gCAAgC,EAAE;AAAA;AAAA,QAEhE,SAASA,EAAO,OAAO,wBAAwB;AAAA,QAE9C,UAAA;AAAA,UAAOA,EAAA,gBACJ,OACAE,EAAWF,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,UACjE;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,UACN,EAAAA,EAAO,OAAO,YAAA,CAAuB,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAdvCA,EAAO;AAAA,IAAA,CAgBf,EAAA,GAnBYF,CAoBf,CACD,GACH;AAAA,IACC,gBAAAH,EAAAQ,GAAA,EAAU,WAAU,0BAClB,UAAMb,EAAA,YAAA,EAAc,KAAK,SACxBA,EAAM,YAAY,EAAE,KAAK,IAAI,CAACc,MAC3B,gBAAAT,EAAAI,GAAA,EAAsB,cAAYK,EAAI,cAAc,KAAK,YACvD,UAAAA,EAAI,gBAAgB,EAAE,IAAI,CAACC,MAC1B,gBAAAV;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA,sBAGPI,EAAK,OAAO,OAAO,YACf,kDACA,EACN;AAAA;AAAA,QAGD,YAAWA,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,MAAA;AAAA,MAVpDA,EAAK;AAAA,IAAA,CAYb,EAfY,GAAAD,EAAI,EAgBnB,CACD,IAED,gBAAAT,EAACI,GAAS,EAAA,WAAU,oDACjB,UAAA,CAACP,EAAU,cAAcA,EAAU,UAClC,gBAAAG,EAAAW,GAAA,EACE,UAAC,gBAAAX,EAAAM,GAAA,EAAU,SAASV,EAAQ,QAAQ,WAAU,iBAC5C,UAAA,gBAAAE,EAAC,QAAK,EAAA,WAAU,yDACd,UAAA;AAAA,MAAA,gBAAAE,EAACY,GAAK,EAAA;AAAA,MAAE;AAAA,IAAA,GACV,EACF,CAAA,EAAA,CACF,IAEA,gBAAAZ,EAACM,KAAU,SAASV,EAAQ,QAC1B,UAAA,gBAAAI,EAAC,UAAK,WAAU,wDAAuD,UAEvE,oBAAA,EAAA,CACF,EAEJ,CAAA,GAEJ;AAAA,IAECH,EAAU,cACR,gBAAAG,EAAAa,GAAA,EAAY,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}

package/dist/components/key-value-card/key-value-card.es.js

@@ -0,0 +1,85 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { Badge as c } from "../ui/badge.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 { Card as l, CardHeader as d, CardTitle as f, CardContent as h } from "../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 { CopyButton as u } from "../ui/copy-button.es.js";
+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 { Link as x } from "@tanstack/react-router";
+import "lucide-react";
+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 "react";
+import "../ui/select.es.js";
+import "../ui/separator.es.js";
+import "../ui/sheet.es.js";
+import "../ui/sidebar.es.js";
+import { Skeleton as y } from "../ui/skeleton.es.js";
+import "sonner";
+import "../ui/table.es.js";
+import "../ui/tabs.es.js";
+import "../ui/tooltip.es.js";
+import { FormatDate as w } from "../data-table/table-utils/date.es.js";
+const ir = ({ data: e, label: s, fields: n }) => {
+  const a = (p, r) => {
+    if (p.transform)
+      return p.transform(r);
+    switch (p.type) {
+      case "link":
+        return /* @__PURE__ */ t(x, { to: r, children: r });
+      case "copyButton":
+        return /* @__PURE__ */ t(u, { value: r });
+      case "date":
+        return /* @__PURE__ */ t("span", { children: w(r) });
+      case "yesno":
+        return /* @__PURE__ */ t("span", { children: r ? "Yes" : "No" });
+      case "badge":
+        return /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Array.isArray(r) ? r.map((o, i) => /* @__PURE__ */ t(c, { variant: "secondary", children: typeof o == "object" ? (o == null ? void 0 : o.name) || (o == null ? void 0 : o.id) : o }, i)) : r });
+      case "boolean":
+        return /* @__PURE__ */ t("span", { children: r.toString() });
+      default:
+        return /* @__PURE__ */ t("span", { children: r ?? "-" });
+    }
+  };
+  return /* @__PURE__ */ m(l, { children: [
+    /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(f, { children: s }) }),
+    /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: e ? n.map((p) => {
+      const r = p.accessor ? p.accessor.split(".").reduce(
+        (o, i) => o && i in o ? o[i] : void 0,
+        e
+      ) : null;
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          className: "flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0",
+          children: [
+            /* @__PURE__ */ t("p", { className: "text-sm flex w-full justify-start col-span-1", children: p.display }),
+            /* @__PURE__ */ t("div", { className: "text-sm flex w-full justify-start text-wrap", children: a(p, r) })
+          ]
+        },
+        p.display
+      );
+    }) : n.map((p, r) => /* @__PURE__ */ t(y, { className: "h-12 w-full" }, r)) }) })
+  ] });
+};
+export {
+  ir as KeyValueCard
+};
+//# sourceMappingURL=key-value-card.es.js.map

package/dist/components/key-value-card/key-value-card.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CopyButton,\n  FormatDate,\n  Skeleton,\n} from '@/index';\nimport { Link } from '@tanstack/react-router';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n  ? {\n      [K in keyof T]: K extends string | number\n        ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n        : never;\n    }[keyof T]\n  : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n  display: string;\n  accessor: NestedKeyOf<T>;\n  type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n  data: T; // Ensure data is of type T\n  label: string;\n  fields: DisplayField<T>[];\n  className?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({ data, label, fields }: KeyValueCardProps<T>) => {\n  const renderValue = (field: DisplayField<T>, value: any) => {\n    if (field.transform) {\n      return field.transform(value);\n    }\n    switch (field.type) {\n      case 'link':\n        return <Link to={value}>{value}</Link>;\n      case 'copyButton':\n        return <CopyButton value={value} />;\n      case 'date':\n        return <span>{FormatDate(value)}</span>;\n      case 'yesno':\n        return <span>{value ? 'Yes' : 'No'}</span>;\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                  <Badge key={index} variant=\"secondary\">\n                    {typeof item === 'object' ? item?.name || item?.id : item}\n                  </Badge>\n                ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return <span>{value.toString()}</span>;\n      default:\n        return <span>{value ?? '-'}</span>;\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-2\">\n          {data\n            ? fields.map((field) => {\n                // TODO: improve this\n                const value = field.accessor\n                  ? field.accessor\n                      .split('.')\n                      .reduce(\n                        (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                        data as Record<string, any>,\n                      )\n                  : null;\n\n                return (\n                  <div\n                    key={field.display}\n                    className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                  >\n                    <p className=\"text-sm flex w-full justify-start col-span-1\">{field.display}</p>\n                    <div className=\"text-sm flex w-full justify-start text-wrap\">\n                      {renderValue(field, value)}\n                    </div>\n                  </div>\n                );\n              })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsx","Link","CopyButton","FormatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAMA,KAAe,CAAe,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAmC;AACrF,QAAAC,IAAc,CAACC,GAAwBC,MAAe;AAC1D,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAE9B,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eAAQ,gBAAAE,EAAAC,GAAA,EAAK,IAAIF,GAAQ,UAAMA,GAAA;AAAA,MACjC,KAAK;AACI,eAAA,gBAAAC,EAACE,KAAW,OAAAH,GAAc;AAAA,MACnC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAWG,EAAAJ,CAAK,GAAE;AAAA,MAClC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAQD,IAAA,QAAQ,MAAK;AAAA,MACrC,KAAK;AACH,eACG,gBAAAC,EAAA,OAAA,EAAI,WAAU,wBACZ,UAAM,MAAA,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACK,GAAMC,MACf,gBAAAL,EAACM,GAAkB,EAAA,SAAQ,aACxB,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAD3C,GAAAC,CAEZ,CACD,IACDN,GACN;AAAA,MAGJ,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAMD,EAAA,SAAA,GAAW;AAAA,MACjC;AACS,eAAA,gBAAAC,EAAC,QAAM,EAAA,UAAAD,KAAS,IAAI,CAAA;AAAA,IAAA;AAAA,EAEjC;AAEA,2BACGQ,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAP,EAACQ,GACC,EAAA,UAAA,gBAAAR,EAACS,GAAW,EAAA,UAAAd,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACU,GACC,EAAA,UAAA,gBAAAV,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AAEpB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SACH,MAAM,GAAG,EACT;AAAA,QACC,CAACa,GAAKC,MAASD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAC9ClB;AAAA,MAAA,IAEJ;AAGF,aAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAb,EAAC,KAAE,EAAA,WAAU,gDAAgD,UAAAF,EAAM,SAAQ;AAAA,8BAC1E,OAAI,EAAA,WAAU,+CACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QANKD,EAAM;AAAA,MAOb;AAAA,IAEH,CAAA,IACDF,EAAO,IAAI,CAACkB,GAAGT,MAAW,gBAAAL,EAAAe,GAAA,EAAqB,WAAU,cAAA,GAAjBV,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}