npm - @cryptlex/web-components - Versions diffs - 3.7.1 → 3.7.3 - Mend

@cryptlex/web-components 3.7.1 → 3.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

@@ -1,38 +1,35 @@
 "use client";
-import { jsx as a, jsxs as c, Fragment as U } from "react/jsx-runtime";
-import { useState as H, useEffect as K, useMemo as M } from "react";
-import { cn as j } from "../../utils/index.es.js";
+import { jsx as n, Fragment as V, jsxs as u } from "react/jsx-runtime";
+import { useId as I, useState as L, useEffect as R, useMemo as E } from "react";
+import { cn as O } from "../../utils/index.es.js";
 import "../../utils/form-context.es.js";
 import "../../utils/form-hook.es.js";
-import { useQuery as k, keepPreviousData as q } from "@tanstack/react-query";
-import { createColumnHelper as B, useReactTable as G, getCoreRowModel as Q } from "@tanstack/react-table";
-import { Info as W } from "lucide-react";
-import { ColumnPicker as X } from "./column-picker.es.js";
-import { PageSize as J } from "./page-size.es.js";
-import { Paginator as Y } from "./paginator.es.js";
-import Z from "./table-actions.es.js";
-import { TableContent as $ } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as ee, TABLE_ID_COLUMN as te, TABLE_DEFAULT_DATE_COLUMNS as oe } from "./table-commons.es.js";
-import { TooltipProvider as ae, Tooltip as ne, TooltipTrigger as ie, TooltipContent as le } from "../ui/tooltip.es.js";
-const N = "Actions";
-function we({
-  columns: u,
-  fetchFn: _,
-  tableName: V,
-  tableActions: F,
-  columnsToHideByDefault: f,
-  allowSelection: p,
-  className: E,
-  ...I
+import { useQuery as U, keepPreviousData as D } from "@tanstack/react-query";
+import { createColumnHelper as z, useReactTable as j, getCoreRowModel as q } from "@tanstack/react-table";
+import { ColumnPicker as B } from "./column-picker.es.js";
+import { PageSize as G } from "./page-size.es.js";
+import { Paginator as H } from "./paginator.es.js";
+import k from "./table-actions.es.js";
+import { TableContent as K } from "./table-content.es.js";
+import { TABLE_CHECK_BOX_COLUMN as Q, TABLE_ID_COLUMN as W, TABLE_DEFAULT_DATE_COLUMNS as X } from "./table-commons.es.js";
+const w = "Actions";
+function ge({
+  columns: g,
+  fetchFn: x,
+  tableActions: A,
+  columnsToHideByDefault: c = {},
+  allowSelection: m,
+  className: y,
+  ..._
   // filterableFields,
 }) {
-  var y, P, w, x, A;
-  const [L, R] = H({
+  var S, b, P, h;
+  const v = I(), [M, N] = L({
     sorting: [],
     // Sorting state
     columnFilters: [],
     // Filters for columns
-    searching: "",
+    search: "",
     // Search query state
     columnVisibility: {},
     // Visibility of columns
@@ -40,173 +37,139 @@ function we({
     // Row selection state
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
-  }), l = (e) => {
-    R((t) => ({ ...t, ...e }));
+  }), o = (e) => {
+    N((i) => ({ ...i, ...e }));
   }, {
-    sorting: g,
-    columnFilters: C,
-    searching: h,
-    columnVisibility: S,
-    rowSelection: b,
-    pagination: m
-  } = L;
-  K(() => {
-    l({
+    sorting: l,
+    columnFilters: d,
+    search: f,
+    columnVisibility: p,
+    rowSelection: C,
+    pagination: s
+  } = M;
+  R(() => {
+    o({
       columnVisibility: {
         id: !1,
         updatedAt: !1,
-        ...f
+        ...c
       }
     });
-  }, [f]);
-  const n = k({
-    // TODO, better way to construct this key
-    queryKey: [V, m, g, h.trim()],
-    queryFn: () => _(m, g, h.trim()),
-    placeholderData: q,
+  }, [c]);
+  const a = U({
+    queryKey: [v, s, l, f.trim()],
+    queryFn: () => x(s, l, f.trim()),
+    placeholderData: D,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), D = B(), d = M(() => {
-    var T;
-    const e = (T = n.data) == null ? void 0 : T.data;
-    if (!(e != null && e.length)) return [];
-    const t = /* @__PURE__ */ new Set();
-    return e.forEach((i) => {
-      "metadata" in i && i.metadata && Array.isArray(i.metadata) && i.metadata.forEach((s) => {
-        t.add(s.key);
-      });
-    }), Array.from(t).map(
-      (i) => D.accessor(
-        (s) => {
-          var v;
-          const r = (v = s.metadata) == null ? void 0 : v.find(
-            (z) => z.key === i
-          );
-          return r == null ? void 0 : r.value;
-        },
-        {
-          header: () => /* @__PURE__ */ a(ae, { delayDuration: 0, children: /* @__PURE__ */ c(ne, { children: [
-            /* @__PURE__ */ a(ie, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
-              i,
-              " ",
-              /* @__PURE__ */ a(W, { size: 18, strokeWidth: "1px" })
-            ] }) }),
-            /* @__PURE__ */ a(le, { children: "Metadata Key" })
-          ] }) }),
-          // Use the metadata key as the column header
-          id: i,
-          enableSorting: !1,
-          cell: (s) => {
-            const r = s.getValue();
-            return r == null ? "" : String(r);
-          }
-        }
-      )
-    );
-  }, [(y = n.data) == null ? void 0 : y.data]), O = M(() => [
-    ...p ? ee : [],
-    ...te,
-    ...u.filter((t) => t.id !== N),
-    ...d.length ? d : [],
-    ...oe,
-    ...u.filter((t) => t.id === N)
-  ], [u, d, (P = n.data) == null ? void 0 : P.data, p]), o = G({
-    data: ((w = n.data) == null ? void 0 : w.data) ?? [],
-    columns: O,
-    getCoreRowModel: Q(),
-    rowCount: (x = n.data) == null ? void 0 : x.total,
+  });
+  z();
+  const F = E(() => [
+    ...m ? Q : [],
+    ...W,
+    ...g.filter((i) => i.id !== w),
+    // ...(metadataColumns.length ? metadataColumns : []),
+    ...X,
+    ...g.filter((i) => i.id === w)
+  ], [g, (S = a.data) == null ? void 0 : S.data, m]);
+  function T(e) {
+    return typeof e == "function";
+  }
+  function r(e, i) {
+    return T(e) ? e(i) : e;
+  }
+  const t = j({
+    data: ((b = a.data) == null ? void 0 : b.data) ?? [],
+    columns: F,
+    getCoreRowModel: q(),
+    rowCount: (P = a.data) == null ? void 0 : P.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (e) => {
-      const t = typeof e == "function" ? e(m) : e;
-      l({ pagination: t });
+      o({ pagination: r(e, s) });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
     onSortingChange: (e) => {
-      const t = typeof e == "function" ? e(g) : e;
-      l({ sorting: t, rowSelection: {} });
+      o({ sorting: r(e, l), rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
     onGlobalFilterChange: (e) => {
-      const t = typeof e == "function" ? e(C) : e;
-      l({ columnFilters: t });
+      o({ columnFilters: r(e, d) });
     },
     onColumnVisibilityChange: (e) => {
-      const t = typeof e == "function" ? e(S) : e;
-      l({ columnVisibility: t });
+      o({ columnVisibility: r(e, p) });
     },
     onRowSelectionChange: (e) => {
-      const t = typeof e == "function" ? e(b) : e;
-      l({ rowSelection: t });
+      o({ rowSelection: r(e, C) });
     },
     state: {
-      sorting: g,
-      columnFilters: C,
-      columnVisibility: S,
-      pagination: m,
-      rowSelection: b
+      sorting: l,
+      columnFilters: d,
+      columnVisibility: p,
+      pagination: s,
+      rowSelection: C
     },
     meta: {
-      refetch: n.refetch
+      refetch: a.refetch
     }
   });
-  return /* @__PURE__ */ a(U, { children: /* @__PURE__ */ c("section", { ...I, className: j("flex flex-col bg-card", E), children: [
-    /* @__PURE__ */ a(
-      Z,
+  return /* @__PURE__ */ n(V, { children: /* @__PURE__ */ u("section", { ..._, className: O("flex flex-col bg-card", y), children: [
+    /* @__PURE__ */ n(
+      k,
       {
-        dataQuery: n,
-        getSelectedRowModel: o.getSelectedRowModel,
-        tableActions: F,
-        handleSearching: (e) => l({ searching: e })
+        dataQuery: a,
+        getSelectedRowModel: t.getSelectedRowModel,
+        tableActions: A,
+        handleSearching: (e) => o({ search: e })
       }
     ),
-    /* @__PURE__ */ a("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ a(
-      $,
+    /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ n(
+      K,
       {
-        getRowModel: o.getRowModel,
-        getHeaderGroups: o.getHeaderGroups,
-        query: n
+        getRowModel: t.getRowModel,
+        getHeaderGroups: t.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__ */ a(
-          X,
+    /* @__PURE__ */ u("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
+      /* @__PURE__ */ u("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ n(
+          B,
           {
-            getAllColumns: o.getAllColumns,
-            getIsAllColumnsVisible: o.getIsAllColumnsVisible,
-            toggleAllColumnsVisible: o.toggleAllColumnsVisible
+            getAllColumns: t.getAllColumns,
+            getIsAllColumnsVisible: t.getIsAllColumnsVisible,
+            toggleAllColumnsVisible: t.toggleAllColumnsVisible
           }
         ),
-        /* @__PURE__ */ a(
-          J,
+        /* @__PURE__ */ n(
+          G,
           {
-            size: o.getState().pagination.pageSize,
-            onSelect: o.setPageSize
+            size: t.getState().pagination.pageSize,
+            onSelect: t.setPageSize
           }
         )
       ] }),
-      /* @__PURE__ */ a(
-        Y,
+      /* @__PURE__ */ n(
+        H,
         {
-          firstPage: o.firstPage,
-          previousPage: o.previousPage,
-          getCanNextPage: o.getCanNextPage,
-          getCanPreviousPage: o.getCanPreviousPage,
-          lastPage: o.lastPage,
-          nextPage: o.nextPage,
-          getState: o.getState,
-          rowCount: ((A = n.data) == null ? void 0 : A.total) ?? 0
+          firstPage: t.firstPage,
+          previousPage: t.previousPage,
+          getCanNextPage: t.getCanNextPage,
+          getCanPreviousPage: t.getCanPreviousPage,
+          lastPage: t.lastPage,
+          nextPage: t.nextPage,
+          getState: t.getState,
+          rowCount: ((h = a.data) == null ? void 0 : h.total) ?? 0
         }
       )
     ] })
   ] }) });
 }
 export {
-  N as ACTIONS_COLUMN_ID,
-  we as DataTable
+  w as ACTIONS_COLUMN_ID,
+  ge as DataTable
 };
 //# sourceMappingURL=data-table.es.js.map

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

	@@ -1 +1 @@
1	- {"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\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\ttype ColumnFiltersState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype PaginationState,\n\ttype SortingState,\n\ttype TableOptions,\n\tuseReactTable,\n\ttype VisibilityState,\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\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> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\t// \n\t// columns: ColumnDef<TData>[]; // Columns for the table\n\ttableName: string; // Table name used as query key\n\tfetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\t// filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n\tcolumnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableName,\n\ttableActions,\n\tcolumnsToHideByDefault,\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, setTableState] = useState({\n\t\tsorting: [] as SortingState, // Sorting state\n\t\tcolumnFilters: [] as ColumnFiltersState, // Filters for columns\n\t\tsearching: \"\", // Search query state\n\t\tcolumnVisibility: {} as VisibilityState, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<typeof tableState>) => {\n\t\tsetTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearching,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\t// TODO, better way to construct this key\n\t\tqueryKey: [tableName, pagination, sorting, searching.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searching.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\tconst metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\t\t// set of all the keys present in a given view\n\t\tconst allMetadataKeys = new Set<string>();\n\n\t\t// Collect all unique metadata keys\n\t\tdata.forEach((row: TData) => {\n\t\t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t\t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t\t\t\t\tallMetadataKeys.add(meta.key);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\t// Generate columns for all unique metadata keys\n\t\treturn Array.from(allMetadataKeys).map((key) =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row: TData) => {\n\t\t\t\t\t// Find the metadata object with the matching key\n\t\t\t\t\tconst metadataEntry = row.metadata?.find(\n\t\t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t\t\t\t\t);\n\t\t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\theader: () => (\n\t\t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t\t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t), // Use the metadata key as the column header\n\t\t\t\t\tid: key,\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null \|\| value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t),\n\t\t);\n\t}, [query.data?.data]);\n\n\t/\n\t ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t /\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, metadataColumns, query.data?.data, allowSelection]);\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tconst newPagination =\n\t\t\t\ttypeof updater === \"function\" ? updater(pagination) : updater;\n\t\t\tupdateTableState({ pagination: newPagination });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tconst newSorting =\n\t\t\t\ttypeof updater === \"function\" ? updater(sorting) : updater;\n\t\t\t// Reset selection when sorting.\n\t\t\tupdateTableState({ sorting: newSorting, rowSelection: {} });\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tconst newFilters =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnFilters) : updater;\n\t\t\tupdateTableState({ columnFilters: newFilters });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tconst newVisibility =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnVisibility) : updater;\n\t\t\tupdateTableState({ columnVisibility: newVisibility });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tconst newSelection =\n\t\t\t\ttypeof updater === \"function\" ? updater(rowSelection) : updater;\n\t\t\tupdateTableState({ rowSelection: newSelection });\n\t\t},\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t\tcolumnVisibility,\n\t\t\tpagination,\n\t\t\trowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/ TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here /}\n\t\t\t{/ Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little /}\n\t\t\t{/ ContextAPI???? /}\n\n\t\t\t{/ <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> /}\n\n\t\t\t{/ Table Actions Section /}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ searching: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/ The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS /}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/ Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","allowSelection","className","props","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","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","cn","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":";;;;;;;;;;;;;;;;AAkCO,MAAMA,IAAoB;AAa1B,SAASC,GAAgC;AAAA,EAC/C,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AAAA;AAEJ,GAA0B;;AAIzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS;AAAA,IAC5C,SAAS,CAAA;AAAA;AAAA,IACT,eAAe,CAAA;AAAA;AAAA,IACf,WAAW;AAAA;AAAA,IACX,kBAAkB,CAAA;AAAA;AAAA,IAClB,cAAc,CAAA;AAAA;AAAA,IACd,YAAY,EAAE,WAAW,GAAG,UAAU,GAAA;AAAA;AAAA,EAAG,CACzC,GAGKC,IAAmB,CAACC,MAAwC;AACjE,IAAAH,EAAc,CAACI,OAAU,EAAE,GAAGA,GAAM,GAAGD,IAAU;AAAA,EAAA,GAI5C;AAAA,IACL,SAAAE;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACGX;AAMJ,EAAAY,EAAU,MAAM;AACf,IAAAT,EAAiB;AAAA,MAChB,kBAAkB;AAAA,QACjB,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,GAAGP;AAAA,MAAA;AAAA,IACJ,CACA;AAAA,EAAA,GACC,CAACA,CAAsB,CAAC;AAe3B,QAAMiB,IAAQC,EAAS;AAAA;AAAA,IAEtB,UAAU,CAACpB,GAAWiB,GAAYL,GAASE,EAAU,MAAM;AAAA,IAC3D,SAAS,MAAMf,EAAQkB,GAAYL,GAASE,EAAU,MAAM;AAAA,IAC5D,iBAAiBO;AAAA;AAAA,IACjB,OAAO;AAAA,IACP,sBAAsB;AAAA,EAAA,CACtB,GAKKC,IAAeC,EAAA,GACfC,IAAkBC,EAA4B,MAAM;;AACzD,UAAMC,KAAOC,IAAAR,EAAM,SAAN,gBAAAQ,EAAY;AACzB,QAAI,EAACD,KAAA,QAAAA,EAAM,QAAQ,QAAO,CAAA;AAE1B,UAAME,wBAAsB,IAAA;AAG5B,WAAAF,EAAK,QAAQ,CAACG,MAAe;AAC5B,MAAI,cAAcA,KAAOA,EAAI,YAAY,MAAM,QAAQA,EAAI,QAAQ,KAClEA,EAAI,SAAS,QAAQ,CAACC,MAAsB;AAC3C,QAAAF,EAAgB,IAAIE,EAAK,GAAG;AAAA,MAAA,CAC5B;AAAA,IACF,CACA,GAGM,MAAM,KAAKF,CAAe,EAAE;AAAA,MAAI,CAACG,MACvCT,EAAa;AAAA,QACZ,CAACO,MAAe;;AAEf,gBAAMG,KAAgBL,IAAAE,EAAI,aAAJ,gBAAAF,EAAc;AAAA,YACnC,CAACG,MAAsBA,EAAK,QAAQC;AAAA;AAErC,iBAAOC,KAAA,gBAAAA,EAAe;AAAA,QAAA;AAAA,QAEvB;AAAA,UACC,QAAQ,MACP,gBAAAC,EAACC,MAAgB,eAAe,GAC/B,4BAACC,IAAA,EACA,UAAA;AAAA,YAAA,gBAAAF,EAACG,MAAe,SAAO,IACtB,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,cAAAN;AAAA,cAAI;AAAA,cAAC,gBAAAE,EAACK,GAAA,EAAK,MAAM,IAAI,aAAa,MAAA,CAAO;AAAA,YAAA,EAAA,CAC3C,EAAA,CACD;AAAA,YACA,gBAAAL,EAACM,MAAe,UAAA,eAAA,CAAY;AAAA,UAAA,EAAA,CAC7B,EAAA,CACD;AAAA;AAAA,UAED,IAAIR;AAAA,UACJ,eAAe;AAAA,UACf,MAAM,CAACS,MAAS;AACf,kBAAMC,IAAQD,EAAK,SAAA;AAEnB,mBAAIC,KAAU,OAAoC,KAE3C,OAAOA,CAAK;AAAA,UAAA;AAAA,QACpB;AAAA,MACD;AAAA,IACD;AAAA,EACD,GACE,EAACd,IAAAR,EAAM,SAAN,gBAAAQ,EAAY,IAAI,CAAC,GAQfe,IAAkBjB,EAA+B,MACrC;AAAA,IAChB,GAAItB,IAAiBwC,KAAyB,CAAA;AAAA,IAC9C,GAAGC;AAAA,IACH,GAAG9C,EAAQ,OAAO,CAAC+C,MAAQA,EAAI,OAAOjD,CAAiB;AAAA,IACvD,GAAI4B,EAAgB,SAASA,IAAkB,CAAA;AAAA,IAC/C,GAAGsB;AAAA,IACH,GAAGhD,EAAQ,OAAO,CAAC+C,MAAQA,EAAI,OAAOjD,CAAiB;AAAA,EAAA,GAItD,CAACE,GAAS0B,IAAiBuB,IAAA5B,EAAM,SAAN,gBAAA4B,EAAY,MAAM5C,CAAc,CAAC,GAGzD6C,IAAQC,EAAc;AAAA,IAC3B,QAAMC,IAAA/B,EAAM,SAAN,gBAAA+B,EAAY,SAAQ,CAAA;AAAA,IAC1B,SAASR;AAAA,IACT,iBAAiBS,EAAA;AAAA,IACjB,WAAUC,IAAAjC,EAAM,SAAN,gBAAAiC,EAAY;AAAA,IACtB,kBAAkB;AAAA;AAAA,IAClB,oBAAoB,CAACC,MAAY;AAChC,YAAMC,IACL,OAAOD,KAAY,aAAaA,EAAQpC,CAAU,IAAIoC;AACvD,MAAA5C,EAAiB,EAAE,YAAY6C,GAAe;AAAA,IAAA;AAAA,IAE/C,eAAe;AAAA;AAAA,IACf,iBAAiB,CAACD,MAAY;AAC7B,YAAME,IACL,OAAOF,KAAY,aAAaA,EAAQzC,CAAO,IAAIyC;AAEpD,MAAA5C,EAAiB,EAAE,SAAS8C,GAAY,cAAc,CAAA,GAAI;AAAA,IAAA;AAAA,IAE3D,iBAAiB;AAAA;AAAA,IACjB,sBAAsB,CAACF,MAAY;AAClC,YAAMG,IACL,OAAOH,KAAY,aAAaA,EAAQxC,CAAa,IAAIwC;AAC1D,MAAA5C,EAAiB,EAAE,eAAe+C,GAAY;AAAA,IAAA;AAAA,IAE/C,0BAA0B,CAACH,MAAY;AACtC,YAAMI,IACL,OAAOJ,KAAY,aAAaA,EAAQtC,CAAgB,IAAIsC;AAC7D,MAAA5C,EAAiB,EAAE,kBAAkBgD,GAAe;AAAA,IAAA;AAAA,IAErD,sBAAsB,CAACJ,MAAY;AAClC,YAAMK,IACL,OAAOL,KAAY,aAAaA,EAAQrC,CAAY,IAAIqC;AACzD,MAAA5C,EAAiB,EAAE,cAAciD,GAAc;AAAA,IAAA;AAAA,IAEhD,OAAO;AAAA,MACN,SAAA9C;AAAA,MACA,eAAAC;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAE;AAAA,MACA,cAAAD;AAAA,IAAA;AAAA,IAED,MAAM;AAAA,MACL,SAASG,EAAM;AAAA,IAAA;AAAA,EAChB,CACA;AAED,SACC,gBAAAc,EAAA0B,GAAA,EAYC,4BAAC,WAAA,EAAS,GAAGtD,GAAO,WAAWuD,EAAG,yBAAyBxD,CAAS,GACnE,UAAA;AAAA,IAAA,gBAAA6B;AAAA,MAAC4B;AAAA,MAAA;AAAA,QACA,WAAW1C;AAAA,QACX,qBAAqB6B,EAAM;AAAA,QAC3B,cAAA/C;AAAA,QACA,iBAAiB,CAACwC,MAAUhC,EAAiB,EAAE,WAAWgC,GAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAIlE,gBAAAR,EAAC,OAAA,EAAI,WAAU,sCAAqC,UAAU,GAC7D,UAAA,gBAAAA;AAAA,MAAC6B;AAAA,MAAA;AAAA,QACA,aAAad,EAAM;AAAA,QACnB,iBAAiBA,EAAM;AAAA,QACvB,OAAA7B;AAAA,MAAA;AAAA,IAAA,GAEF;AAAA,IAGA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,gEACd,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,cACd,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAAC8B;AAAA,UAAA;AAAA,YACA,eAAef,EAAM;AAAA,YACrB,wBAAwBA,EAAM;AAAA,YAC9B,yBAAyBA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhC,gBAAAf;AAAA,UAAC+B;AAAA,UAAA;AAAA,YACA,MAAMhB,EAAM,SAAA,EAAW,WAAW;AAAA,YAClC,UAAUA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB,GACD;AAAA,MACA,gBAAAf;AAAA,QAACgC;AAAA,QAAA;AAAA,UACA,WAAWjB,EAAM;AAAA,UACjB,cAAcA,EAAM;AAAA,UACpB,gBAAgBA,EAAM;AAAA,UACtB,oBAAoBA,EAAM;AAAA,UAC1B,UAAUA,EAAM;AAAA,UAChB,UAAUA,EAAM;AAAA,UAChB,UAAUA,EAAM;AAAA,UAChB,YAAUkB,IAAA/C,EAAM,SAAN,gBAAA+C,EAAY,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC,EAAA,CACD;AAAA,EAAA,EAAA,CACD,EAAA,CACD;AAEF;"}
1	+ {"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\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype TableOptions,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport React, { useEffect, useId, useMemo, useState } from \"react\";\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 { 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\n\nexport type DataTableState = Pick<TableState, 'sorting' \| 'columnFilters' \| 'columnVisibility' \| 'rowSelection' \| 'pagination'> & { search: string };\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\tfetchFn: TableFetchFn<TData>;\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableActions,\n\tcolumnsToHideByDefault = {},\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\tconst id = useId();\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\tsorting: [], // Sorting state\n\t\tcolumnFilters: [], // Filters for columns\n\t\tsearch: \"\", // Search query state\n\t\tcolumnVisibility: {}, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearch,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// TODO\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\n\t// TODO, implement filters\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, search.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, search.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\t// const metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t// \tconst data = query.data?.data;\n\t// \tif (!data?.length) return [];\n\t// \t// set of all the keys present in a given view\n\t// \tconst allMetadataKeys = new Set<string>();\n\n\t// \t// Collect all unique metadata keys\n\t// \tdata.forEach((row: TData) => {\n\t// \t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t// \t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t// \t\t\t\tallMetadataKeys.add(meta.key);\n\t// \t\t\t});\n\t// \t\t}\n\t// \t});\n\n\t// \t// Generate columns for all unique metadata keys\n\t// \treturn Array.from(allMetadataKeys).map((key) =>\n\t// \t\tcolumnHelper.accessor(\n\t// \t\t\t(row: TData) => {\n\t// \t\t\t\t// Find the metadata object with the matching key\n\t// \t\t\t\tconst metadataEntry = row.metadata?.find(\n\t// \t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t// \t\t\t\t);\n\t// \t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t// \t\t\t},\n\t// \t\t\t{\n\t// \t\t\t\theader: () => (\n\t// \t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t// \t\t\t\t\t\t<Tooltip>\n\t// \t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t// \t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t// \t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t// \t\t\t\t\t\t\t\t</span>\n\t// \t\t\t\t\t\t\t</TooltipTrigger>\n\t// \t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t// \t\t\t\t\t\t</Tooltip>\n\t// \t\t\t\t\t</TooltipProvider>\n\t// \t\t\t\t), // Use the metadata key as the column header\n\t// \t\t\t\tid: key,\n\t// \t\t\t\tenableSorting: false,\n\t// \t\t\t\tcell: (info) => {\n\t// \t\t\t\t\tconst value = info.getValue();\n\t// \t\t\t\t\t// Handle null/undefined values\n\t// \t\t\t\t\tif (value === null \|\| value === undefined) return \"\";\n\t// \t\t\t\t\t// For primitive types, return the string representation\n\t// \t\t\t\t\treturn String(value);\n\t// \t\t\t\t},\n\t// \t\t\t},\n\t// \t\t),\n\t// \t);\n\t// }, [query.data?.data]);\n\n\t/\n\t ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t /\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t// ...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, query.data?.data, allowSelection]);\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tupdateTableState({ sorting: resolveUpdater(updater, sorting), rowSelection: {} }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tupdateTableState({ columnFilters: resolveUpdater(updater, columnFilters) });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tupdateTableState({ columnVisibility: resolveUpdater(updater, columnVisibility) });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tupdateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnFilters: columnFilters,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/ TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here /}\n\t\t\t{/ Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little /}\n\t\t\t{/ ContextAPI???? /}\n\n\t\t\t{/ <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> /}\n\n\t\t\t{/ Table Actions Section /}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ search: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/ The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS /}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/ Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableActions","columnsToHideByDefault","allowSelection","className","props","id","useId","tableState","_setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","search","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","createColumnHelper","extendedColumns","useMemo","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_a","isUpdaterFunction","updater","resolveUpdater","currentValue","table","useReactTable","_b","getCoreRowModel","_c","jsx","Fragment","cn","Actions","value","TableContent","jsxs","ColumnPicker","PageSize","Paginator","_d"],"mappings":"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"}

package/dist/components/data-table/table-commons.es.js CHANGED Viewed

@@ -40,7 +40,7 @@ const t = r(), i = [
   t.accessor("updatedAt", {
     header: () => "Last Updated",
     cell: ({ row: e }) => {
-      const a = e.getValue("createdAt");
+      const a = e.getValue("updatedAt");
       return o(a);
     },
     enableHiding: !1

package/dist/components/data-table/table-commons.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tindeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() \|\| table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t\| string\n\t\t\t\t\| null\n\t\t\t\t\| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"~~createdAt~~\") satisfies\n\t\t\t\t\| string\n\t\t\t\t\| null\n\t\t\t\t\| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAeF,EAAM,sBAAA,KAA2B,CAACA,EAAM,yBAAA;AAAA,QACvD,SACCA,EAAM,8BAA8BA,EAAM,0BAAA;AAAA,QAE3C,UAAU,MAAMA,EAAM,0BAAA;AAAA,QACtB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAIb,MAAM,CAAC,EAAE,KAAAG,EAAA,MACR,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAASC,EAAI,cAAA;AAAA,QACb,UAAU,MAAMA,EAAI,eAAA;AAAA,QACpB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,eAAe;AAAA,IACf,cAAc;AAAA,EAAA,CACd;AACF,GAEaC,IAAkB;AAAA,EAC9BP,EAAG,SAAS,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAAA,CACd;AACF,GACaQ,IAA6B;AAAA,EACzCR,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AAAA,EACDT,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AACF;"}
1	+ {"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tindeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() \|\| table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t\| string\n\t\t\t\t\| null\n\t\t\t\t\| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"updatedAt\") satisfies\n\t\t\t\t\| string\n\t\t\t\t\| null\n\t\t\t\t\| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAeF,EAAM,sBAAA,KAA2B,CAACA,EAAM,yBAAA;AAAA,QACvD,SACCA,EAAM,8BAA8BA,EAAM,0BAAA;AAAA,QAE3C,UAAU,MAAMA,EAAM,0BAAA;AAAA,QACtB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAIb,MAAM,CAAC,EAAE,KAAAG,EAAA,MACR,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAASC,EAAI,cAAA;AAAA,QACb,UAAU,MAAMA,EAAI,eAAA;AAAA,QACpB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,eAAe;AAAA,IACf,cAAc;AAAA,EAAA,CACd;AACF,GAEaC,IAAkB;AAAA,EAC9BP,EAAG,SAAS,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAAA,CACd;AACF,GACaQ,IAA6B;AAAA,EACzCR,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AAAA,EACDT,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AACF;"}

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

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { jsxs as o, jsx as e, Fragment as a } from "react/jsx-runtime";
 import { ACTIONS_COLUMN_ID as p } from "./data-table.es.js";
 import { Table as w, TableHeader as b, TableRow as u, TableHead as x, TableBody as N, TableCell as v } from "../ui/table.es.js";
 import { cn as h } from "../../utils/index.es.js";
@@ -8,39 +8,42 @@ import { useCallback as z } from "react";
 import { Loader as D } from "../ui/loader.es.js";
 import { Button as I } from "../ui/button.es.js";
 const g = ({
-  children: a,
-  className: l
-}) => /* @__PURE__ */ e("div", { className: "relative h-full w-0", children: /* @__PURE__ */ e(
-  "div",
-  {
-    className: h(
-      "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
-      l
-    ),
-    children: a
-  }
-) });
+  children: l,
+  className: i
+}) => /* @__PURE__ */ o(a, { children: [
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: h(
+        "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
+        i
+      ),
+      children: l
+    }
+  ),
+  /* @__PURE__ */ e("div", { className: "relative h-full w-0" })
+] });
 function F({
-  className: a,
-  getHeaderGroups: l,
-  getRowModel: o,
+  className: l,
+  getHeaderGroups: i,
+  getRowModel: s,
   query: n
 }) {
   var m;
-  const i = z(() => n.isLoading, [n]);
-  return /* @__PURE__ */ s(w, { className: h("size-full relative min-h-table", a), children: [
-    i() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(D, {}) }),
-    !i() && o().rows.length === 0 && // Empty table
-    /* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !n.isFetching && (n.isError ? /* @__PURE__ */ s("span", { className: "flex gap-3 justify-center items-center", children: [
+  const c = z(() => n.isLoading, [n]);
+  return /* @__PURE__ */ o(w, { className: h("size-full relative min-h-table", l), children: [
+    c() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(D, {}) }),
+    !c() && s().rows.length === 0 && // Empty table
+    /* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !n.isFetching && (n.isError ? /* @__PURE__ */ o("span", { className: "flex gap-3 justify-center items-center", children: [
       /* @__PURE__ */ e(C, {}),
       /* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
-    ] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(c, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(c, { children: "No results found." })) }),
-    !i() && o().rows.length !== 0 && /* @__PURE__ */ s(c, { children: [
-      /* @__PURE__ */ e(b, { className: "sticky top-0 z-10", children: l().map((r) => /* @__PURE__ */ e(u, { children: r.headers.map((t) => /* @__PURE__ */ e(
+    ] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(a, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(a, { children: "No results found." })) }),
+    !c() && s().rows.length !== 0 && /* @__PURE__ */ o(a, { children: [
+      /* @__PURE__ */ e(b, { className: "sticky top-0 z-10", children: i().map((r) => /* @__PURE__ */ e(u, { children: r.headers.map((t) => /* @__PURE__ */ e(
         x,
         {
           className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === p ? "sticky right-0 z-50 text-center" : ""}`,
-          children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1", children: [
+          children: /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1", children: [
             /* @__PURE__ */ e("span", { children: t.isPlaceholder ? null : f(
               t.column.columnDef.header,
               t.getContext()
@@ -61,7 +64,7 @@ function F({
         },
         t.id
       )) }, r.id)) }),
-      /* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto relative", children: o().rows.length !== 0 && o().rows.map((r) => (
+      /* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto relative", children: s().rows.length !== 0 && s().rows.map((r) => (
         // TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform
         /* @__PURE__ */ e(
           u,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t~~<div className=\"relative h-full w-0\">\~~n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t</div>\n\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative min-h-table\", className)}>\n\t\t\t{/* Table overlay with loader /}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/ Table overlay for empty table /}\n\t\t\t{!isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t{/ TODO Check for 403 explicitly!! /}\n\t\t\t\t\t\t\t\t{/ <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && getRowModel().rows.length !== 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t// TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","~~jsxs","~~Info","_a","~~Fragment","~~TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;;AAyBA,MAAMA,IAAe,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AACD,MACC,gBAAAC,~~EAAC~~,~~OAAA~~,~~EAAI~~,~~WAAU~~,~~uBACd~~,~~UAAA,gBAAAA~~;AAAA,~~EAAC~~;AAAA,~~EAAA~~;AAAA,~~IACA~~,WAAWC;AAAA,~~MACV~~;AAAA,~~MACAF~~;AAAA,~~IAAA~~;AAAA,~~IAGA~~,UAAAD;AAAA,EAAA;~~AACF~~,~~GACD~~;AAGM,~~SAASI~~,EAAa;AAAA,EAC5B,~~WAAAH~~;AAAA,EACA,~~iBAAAI~~;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AACD,GAKG;;AACF,QAAMC,IAAYC,EAAY,MACtBF,EAAM,WACX,CAACA,CAAK,CAAC;AAEV,2BACEG,GAAA,EAAe,WAAWP,EAAG,~~kCAAkCF~~,CAAS,GAEvE,UAAA;AAAA,~~IAAAO~~,OACA,gBAAAN,~~EAACH~~,GAAA,EAAa,WAAU,eACvB,UAAA,~~gBAAAG~~,EAACS,KAAO,EAAA,CACT;AAAA,IAGA,CAACH,EAAA,KAAeF,EAAA,EAAc,KAAK,WAAW;AAAA,IAE9C,gBAAAJ,~~EAACH~~,GAAA,EAAa,WAAU,sBACtB,UAAA,~~CAACQ~~,EAAM,eACNA,EAAM,UACN,~~gBAAAK~~,EAAC,QAAA,EAAK,WAAU,0CAGf,UAAA;AAAA,MAAA,~~gBAAAV~~,~~EAACW~~,GAAA,EAAK;AAAA,MACN,~~gBAAAX~~,EAAC,UAAK,UAAA,sEAAA,CAGN;AAAA,IAAA,EAAA,CACD,~~KACIY~~,~~IAAAP~~,EAAM,SAAN,~~QAAAO~~,EAAY,OAGhB,~~gBAAAZ~~,~~EAAAa~~,GAAA,EAAE,UAAA,kDAAA,CAA+C,2BAF/C,UAAA,oBAAA,CAAiB,IAItB;AAAA,IAEA,~~CAACP~~,OAAeF,EAAA,EAAc,KAAK,WAAW,KAC9C,~~gBAAAM~~,~~EAAAG~~,GAAA,EACC,UAAA;AAAA,MAAA,~~gBAAAb~~,~~EAACc~~,GAAA,EAAY,WAAU,qBACrB,~~UAAAX~~,EAAA,EAAkB,IAAI,~~CAACY~~,MACvB,~~gBAAAf~~,~~EAACgB~~,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,~~gBAAAjB~~;AAAA,~~QAACkB~~;AAAA,QAAA;AAAA,UAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,UAExJ,UAAA,~~gBAAAT~~,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,YAAA,~~gBAAAV~~,EAAC,QAAA,EACC,~~UAAAiB~~,EAAO,gBACL,OACAG;AAAA,cACDH,EAAO,OAAO,UAAU;AAAA,cACxBA,EAAO,WAAA;AAAA,YAAW,GAErB;AAAA,YACCA,EAAO,OAAO,WAAA,KACd,~~gBAAAjB~~;AAAA,~~cAACqB~~;AAAA,cAAA;AAAA,gBACA,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,gBACvB,MAAM,MAAM;AACX,wBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,yBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,gBAAA;AAAA,cACR;AAAA,YAAA;AAAA,UACD,EAAA,CAEF;AAAA,QAAA;AAAA,QA9BKR,EAAO;AAAA,MAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,MACA,~~gBAAAf~~,~~EAAC0B~~,GAAA,EAAU,WAAU,mCACnB,~~UAAAtB~~,EAAA,EAAc,KAAK,WAAW,KAC9BA,EAAA,EAAc,KAAK,IAAI,~~CAACuB~~;AAAA;AAAA,QAEvB,~~gBAAA3B~~;AAAA,~~UAACgB~~;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,YAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,~~gBAAA5B~~;AAAA,~~cAAC6B~~;AAAA,cAAA;AAAA,gBAEA,WAAW;AAAA;AAAA,sBAEAD,EAAK,OAAO,OAAOT,IAC1B,gCACA,EACH;AAAA;AAAA,gBAGA,UAAAC;AAAA,kBACAQ,EAAK,OAAO,UAAU;AAAA,kBACtBA,EAAK,WAAA;AAAA,gBAAW;AAAA,cACjB;AAAA,cAZKA,EAAK;AAAA,YAAA,CAcX;AAAA,UAAA;AAAA,UAnBID,EAAI;AAAA,QAAA;AAAA,OAqBV,EAAA,CACH;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}
1	+ {"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<>\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t\t{/* Keep something in document flow with the correct height /}\n\t\t<div className=\"relative h-full w-0\"></div>\n\t</>\n\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative min-h-table\", className)}>\n\t\t\t{/ Table overlay with loader /}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/ Table overlay for empty table /}\n\t\t\t{!isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t{/ TODO Check for 403 explicitly!! /}\n\t\t\t\t\t\t\t\t{/ <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && getRowModel().rows.length !== 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t// TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsxs","Fragment","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","Info","_a","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;;AAyBA,MAAMA,IAAe,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AACD,MACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACV;AAAA,QACAJ;AAAA,MAAA;AAAA,MAGA,UAAAD;AAAA,IAAA;AAAA,EAAA;AAAA,EAGF,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBAAA,CAAsB;AAAA,GACtC;AAGM,SAASE,EAAa;AAAA,EAC5B,WAAAL;AAAA,EACA,iBAAAM;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AACD,GAKG;;AACF,QAAMC,IAAYC,EAAY,MACtBF,EAAM,WACX,CAACA,CAAK,CAAC;AAEV,2BACEG,GAAA,EAAe,WAAWP,EAAG,kCAAkCJ,CAAS,GAEvE,UAAA;AAAA,IAAAS,OACA,gBAAAN,EAACL,GAAA,EAAa,WAAU,eACvB,UAAA,gBAAAK,EAACS,KAAO,EAAA,CACT;AAAA,IAGA,CAACH,EAAA,KAAeF,EAAA,EAAc,KAAK,WAAW;AAAA,IAE9C,gBAAAJ,EAACL,GAAA,EAAa,WAAU,sBACtB,UAAA,CAACU,EAAM,eACNA,EAAM,UACN,gBAAAP,EAAC,QAAA,EAAK,WAAU,0CAGf,UAAA;AAAA,MAAA,gBAAAE,EAACU,GAAA,EAAK;AAAA,MACN,gBAAAV,EAAC,UAAK,UAAA,sEAAA,CAGN;AAAA,IAAA,EAAA,CACD,KACIW,IAAAN,EAAM,SAAN,QAAAM,EAAY,OAGhB,gBAAAX,EAAAD,GAAA,EAAE,UAAA,kDAAA,CAA+C,2BAF/C,UAAA,oBAAA,CAAiB,IAItB;AAAA,IAEA,CAACO,OAAeF,EAAA,EAAc,KAAK,WAAW,KAC9C,gBAAAN,EAAAC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACY,GAAA,EAAY,WAAU,qBACrB,UAAAT,EAAA,EAAkB,IAAI,CAACU,MACvB,gBAAAb,EAACc,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAf;AAAA,QAACgB;AAAA,QAAA;AAAA,UAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,UAExJ,UAAA,gBAAAnB,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,YAAA,gBAAAE,EAAC,QAAA,EACC,UAAAe,EAAO,gBACL,OACAG;AAAA,cACDH,EAAO,OAAO,UAAU;AAAA,cACxBA,EAAO,WAAA;AAAA,YAAW,GAErB;AAAA,YACCA,EAAO,OAAO,WAAA,KACd,gBAAAf;AAAA,cAACmB;AAAA,cAAA;AAAA,gBACA,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,gBACvB,MAAM,MAAM;AACX,wBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,yBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,gBAAA;AAAA,cACR;AAAA,YAAA;AAAA,UACD,EAAA,CAEF;AAAA,QAAA;AAAA,QA9BKR,EAAO;AAAA,MAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,MACA,gBAAAb,EAACwB,GAAA,EAAU,WAAU,mCACnB,UAAApB,EAAA,EAAc,KAAK,WAAW,KAC9BA,EAAA,EAAc,KAAK,IAAI,CAACqB;AAAA;AAAA,QAEvB,gBAAAzB;AAAA,UAACc;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,YAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAA1B;AAAA,cAAC2B;AAAA,cAAA;AAAA,gBAEA,WAAW;AAAA;AAAA,sBAEAD,EAAK,OAAO,OAAOT,IAC1B,gCACA,EACH;AAAA;AAAA,gBAGA,UAAAC;AAAA,kBACAQ,EAAK,OAAO,UAAU;AAAA,kBACtBA,EAAK,WAAA;AAAA,gBAAW;AAAA,cACjB;AAAA,cAZKA,EAAK;AAAA,YAAA,CAcX;AAAA,UAAA;AAAA,UAnBID,EAAI;AAAA,QAAA;AAAA,OAqBV,EAAA,CACH;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}