@cryptlex/web-components 4.1.0 → 5.0.0

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

@@ -1,80 +1,67 @@
 "use client";
-import { jsx as e, Fragment as k, jsxs as s } from "react/jsx-runtime";
-import { useQuery as ae, keepPreviousData as re } from "@tanstack/react-query";
-import { createColumnHelper as oe, useReactTable as ie, getCoreRowModel as le, flexRender as O } from "@tanstack/react-table";
-import { Info as se, RotateCw as ce, ArrowDownNarrowWide as de, ArrowDownWideNarrow as ue, ArrowUpDown as me, Columns3 as ge, GripVertical as fe, Menu as pe, ChevronFirst as he, ChevronLeft as be, ChevronRight as Ce, ChevronLast as Se } from "lucide-react";
-import { createContext as ve, useId as we, useState as z, useMemo as I, useEffect as A, useContext as xe } from "react";
-import { useSensors as ye, useSensor as B, PointerSensor as Ne, KeyboardSensor as Te, DndContext as De, closestCenter as Pe, DragOverlay as Me } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as ke, SortableContext as Oe, verticalListSortingStrategy as Ie, arrayMove as Ae, useSortable as ze } from "@dnd-kit/sortable";
-import { CSS as Le } from "@dnd-kit/utilities";
-import { DropdownMenu as Q, DropdownMenuTrigger as X, DropdownMenuContent as Y, DropdownMenuGroup as Re, DropdownMenuCheckboxItem as $, DropdownMenuRadioGroup as Fe, DropdownMenuRadioItem as Ve } from "../ui/dropdown-menu.es.js";
-import { DataTableFilter as _e } from "./data-table-filter.es.js";
-import { Table as Ee, TableHeader as He, TableRow as G, TableHead as Ue, TableBody as je, TableCell as qe } from "../ui/table.es.js";
-import { merge as Be } from "lodash-es";
-import { TABLE_CHECK_BOX_COLUMN as $e, TABLE_ID_COLUMN as Ge, TABLE_DEFAULT_DATE_COLUMNS as Ke, getResourceDisplayName as K } from "./table-commons.es.js";
-import { Loader as We } from "../ui/loader.es.js";
-import { SearchInput as Qe } from "../inputs/search-input.es.js";
+import { jsx as e, Fragment as w, jsxs as s } from "react/jsx-runtime";
+import { useQuery as ie, keepPreviousData as oe } from "@tanstack/react-query";
+import { createColumnHelper as le, useReactTable as se, getCoreRowModel as ce, flexRender as M } from "@tanstack/react-table";
+import { Info as de, RotateCw as ue, Columns3 as me, GripVertical as ge, ChevronFirst as fe, ChevronLeft as pe, ChevronRight as he, ChevronLast as be, ArrowDownNarrowWide as Se, ArrowDownWideNarrow as Ce, ArrowUpDown as ye } from "lucide-react";
+import { createContext as ve, useId as xe, useState as v, useMemo as O, useEffect as K, useContext as we } from "react";
+import { sortableKeyboardCoordinates as Ne, SortableContext as Te, verticalListSortingStrategy as De, arrayMove as Pe, useSortable as Ae } from "@dnd-kit/sortable";
+import { DataTableFilter as Ie } from "./data-table-filter.es.js";
+import { EasyMenu as X, MenuItem as F } from "../ui/menu.es.js";
+import { Table as ze, TableHeader as Me, TableRow as Q, TableHead as Oe, TableBody as Fe, TableCell as Le } from "../ui/table.es.js";
+import { useSensors as Re, useSensor as $, PointerSensor as ke, KeyboardSensor as Ee, DndContext as _e, closestCenter as Ve, DragOverlay as He } from "@dnd-kit/core";
+import { CSS as Ue } from "@dnd-kit/utilities";
+import { merge as je } from "lodash-es";
+import { TABLE_CHECK_BOX_COLUMN as qe, TABLE_ID_COLUMN as Be, TABLE_DEFAULT_DATE_COLUMNS as Ke, getResourceDisplayName as W } from "./table-commons.es.js";
+import { Loader as Qe } from "../ui/loader.es.js";
+import { SearchField as $e } from "../inputs/searchfield.es.js";
 import { cn as x } from "../../utils/primitives.es.js";
-import { Button as f } from "../ui/button.es.js";
+import { Button as b } from "../ui/button.es.js";
 const L = "tableActions";
-function St({ columns: t, fetchFn: i, columnsToHideByDefault: r = {}, allowSelection: o = !1, filterConfig: a }) {
-  var _, E, H;
-  const l = we(), [v, N] = z({
-    /** Reflect in URL  */
-    search: "",
-    // Search query state
+function bt({ columns: t, fetchFn: i, columnsToHideByDefault: o = {}, allowSelection: r = !1, filterConfig: a }) {
+  var V, H, U;
+  const u = xe(), [l, c] = v({
+    /** TODO Reflect in URL  */
     pagination: { pageIndex: 0, pageSize: 20 },
     // Pagination state
     sorting: [],
     // Sorting state
-    /** TODO Store on browser as preference */
-    columnVisibility: {},
-    // Visibility of columns
-    columnOrder: [],
     /** Ephemeral */
     rowSelection: {}
     // Row selection state
-  }), [c, d] = z([]), p = I(() => c.reduce((n, C) => Be(n, C), {}), [c]), u = (n) => {
-    N((C) => ({ ...C, ...n }));
+  }), [d, h] = v(""), [S, C] = v([]), [T, J] = v({
+    id: !1,
+    updatedAt: !1,
+    ...o
+  }), [z, ee] = v([]), R = O(() => z.reduce((n, f) => je(n, f), {}), [z]), P = (n) => {
+    c((f) => ({ ...f, ...n }));
   }, {
-    sorting: h,
-    search: P,
-    columnVisibility: T,
-    rowSelection: M,
-    pagination: b,
-    columnOrder: R
-  } = v, w = ae({
-    queryKey: [l, b, h, P.trim()],
-    queryFn: () => i(b, h, P.trim(), p),
-    placeholderData: re,
+    sorting: A,
+    rowSelection: k,
+    pagination: I
+  } = l, y = ie({
+    queryKey: [u, I, A, d],
+    queryFn: () => i(I, A, d, R),
+    placeholderData: oe,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
   });
-  A(() => {
-    u({
-      columnVisibility: {
-        id: !1,
-        updatedAt: !1,
-        ...r
-      }
-    });
-  }, []), A(() => {
+  K(() => {
   }, [T]);
-  const Z = I(() => oe(), []), F = I(() => {
-    var j;
-    const n = (j = w.data) == null ? void 0 : j.data;
+  const te = O(() => le(), []), E = O(() => {
+    var q;
+    const n = (q = y.data) == null ? void 0 : q.data;
     if (!(n != null && n.length)) return [];
-    const C = (m) => m != null && typeof m == "object" && "metadata" in m && Array.isArray(m.metadata), U = n.filter(
-      C
+    const f = (m) => m != null && typeof m == "object" && "metadata" in m && Array.isArray(m.metadata), j = n.filter(
+      f
     );
-    return U.length === 0 ? [] : Array.from(new Set(U.flatMap((m) => {
+    return j.length === 0 ? [] : Array.from(new Set(j.flatMap((m) => {
       var g;
-      return ((g = m.metadata) == null ? void 0 : g.map((S) => S.key)) ?? [];
-    }))).map((m) => Z.accessor(
+      return ((g = m.metadata) == null ? void 0 : g.map((p) => p.key)) ?? [];
+    }))).map((m) => te.accessor(
       (g) => {
-        var S, q;
-        return C(g) ? ((q = (S = g == null ? void 0 : g.metadata) == null ? void 0 : S.find((ne) => ne.key === m)) == null ? void 0 : q.value) ?? "" : "";
+        var p, B;
+        return f(g) ? ((B = (p = g == null ? void 0 : g.metadata) == null ? void 0 : p.find((re) => re.key === m)) == null ? void 0 : B.value) ?? "" : "";
       },
       {
         id: m,
@@ -82,109 +69,109 @@ function St({ columns: t, fetchFn: i, columnsToHideByDefault: r = {}, allowSelec
         // tooltip header
         enableSorting: !1,
         cell: (g) => {
-          const S = g.getValue();
-          return S == null ? "" : String(S);
+          const p = g.getValue();
+          return p == null ? "" : String(p);
         }
       }
     ));
-  }, [(_ = w.data) == null ? void 0 : _.data]), ee = [
-    ...o ? $e : [],
-    ...Ge,
+  }, [(V = y.data) == null ? void 0 : V.data]), ne = [
+    ...r ? qe : [],
+    ...Be,
     ...t.filter((n) => n.id !== L),
-    ...F.length ? F : [],
+    ...E.length ? E : [],
     ...Ke,
     // Actions column
     ...t.filter((n) => n.id === L)
   ];
-  function te(n) {
+  function ae(n) {
     return typeof n == "function";
   }
-  function D(n, C) {
-    return te(n) ? n(C) : n;
+  function D(n, f) {
+    return ae(n) ? n(f) : n;
   }
-  const V = ie({
-    data: ((E = w.data) == null ? void 0 : E.data) ?? [],
-    columns: ee,
-    getCoreRowModel: le(),
-    rowCount: (H = w.data) == null ? void 0 : H.total,
+  const _ = se({
+    data: ((H = y.data) == null ? void 0 : H.data) ?? [],
+    columns: ne,
+    getCoreRowModel: ce(),
+    rowCount: (U = y.data) == null ? void 0 : U.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (n) => {
-      u({ pagination: D(n, b) });
+      P({ pagination: D(n, I) });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
     onSortingChange: (n) => {
-      u({ sorting: [...D(n, h)], rowSelection: {} });
+      P({ sorting: [...D(n, A)], rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
     onColumnVisibilityChange: (n) => {
-      u({ columnVisibility: D(n, T) });
+      J(D(n, T));
     },
     onRowSelectionChange: (n) => {
-      u({ rowSelection: D(n, M) });
+      P({ rowSelection: D(n, k) });
     },
     onColumnOrderChange: (n) => {
-      u({ columnOrder: D(n, R) });
+      C(D(n, S));
     },
     state: {
-      sorting: h,
+      sorting: A,
       columnVisibility: T,
-      pagination: b,
-      rowSelection: M,
-      columnOrder: R
+      pagination: I,
+      rowSelection: k,
+      columnOrder: S
     },
     meta: {
-      refetch: w.refetch
+      refetch: y.refetch
     }
   });
-  return A(() => {
-    u({ columnOrder: [...V.getAllLeafColumns().map((n) => n.id)] });
-  }, []), { tableState: v, updateTableState: u, query: w, tanTable: V, mergedFilters: p, filters: c, setFilters: d, filterConfig: a };
+  return K(() => {
+    C([..._.getAllLeafColumns().map((n) => n.id)]);
+  }, []), { tableState: l, updateTableState: P, query: y, setSearchQuery: h, searchQuery: d, tanTable: _, mergedFilters: R, filters: z, setFilters: ee, filterConfig: a };
 }
-const J = ve(null), y = () => {
-  const t = xe(J);
+const Y = ve(null), N = () => {
+  const t = we(Y);
   if (!t)
     throw Error("DataTable should be used within DataTableProvider.");
   return t;
 };
-function vt({ children: t, ...i }) {
-  return /* @__PURE__ */ e(J.Provider, { value: i, children: t });
+function St({ children: t, ...i }) {
+  return /* @__PURE__ */ e(Y.Provider, { value: i, children: t });
 }
-function wt({
+function Ct({
   tableActions: t,
   className: i,
-  ...r
+  ...o
   // filterableFields,
 }) {
-  var l;
-  const { query: o, tanTable: a } = y();
-  return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ s("section", { ...r, className: x("flex flex-col bg-card", i), children: [
-    /* @__PURE__ */ e(Ze, { tableActions: t }),
+  var u;
+  const { query: r, tanTable: a } = N();
+  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ s("section", { ...o, className: x("flex flex-col bg-card", i), children: [
+    /* @__PURE__ */ e(Ye, { tableActions: t }),
     /* @__PURE__ */ s("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [
-      o.isLoading && /* @__PURE__ */ e(W, { className: "cursor-wait", children: /* @__PURE__ */ e(We, {}) }),
-      !o.isLoading && a.getRowModel().rows.length === 0 && // Empty table
-      /* @__PURE__ */ e(W, { className: "cursor-not-allowed", children: !o.isFetching && (o.isError ? /* @__PURE__ */ s("span", { className: "flex gap-3 justify-center items-center", children: [
-        /* @__PURE__ */ e(se, {}),
+      r.isLoading && /* @__PURE__ */ e(G, { className: "cursor-wait", children: /* @__PURE__ */ e(Qe, {}) }),
+      !r.isLoading && a.getRowModel().rows.length === 0 && // Empty table
+      /* @__PURE__ */ e(G, { className: "cursor-not-allowed", children: !r.isFetching && (r.isError ? /* @__PURE__ */ s("span", { className: "flex gap-3 justify-center items-center", children: [
+        /* @__PURE__ */ e(de, {}),
         /* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
-      ] }) : (l = o.data) != null && l.data ? /* @__PURE__ */ e(k, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(k, { children: "No results found." })) }),
-      !o.isLoading && a.getRowModel().rows.length !== 0 && /* @__PURE__ */ e(et, { className: "size-full" })
+      ] }) : (u = r.data) != null && u.data ? /* @__PURE__ */ e(w, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(w, { children: "No results found." })) }),
+      !r.isLoading && a.getRowModel().rows.length !== 0 && /* @__PURE__ */ e(Ze, { className: "size-full" })
     ] }),
     /* @__PURE__ */ s("div", { className: "flex w-full justify-between border gap-icon p-icon overflow-x-auto", children: [
       /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
-        /* @__PURE__ */ e(Xe, {}),
-        /* @__PURE__ */ e(Je, {})
+        /* @__PURE__ */ e(We, {}),
+        /* @__PURE__ */ e(Xe, {})
       ] }),
-      /* @__PURE__ */ e(Ye, {})
+      /* @__PURE__ */ e(Ge, {})
     ] })
   ] }) });
 }
-function W({
+function G({
   children: t,
   className: i
 }) {
-  return /* @__PURE__ */ s(k, { children: [
+  return /* @__PURE__ */ s(w, { children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -198,236 +185,210 @@ function W({
     /* @__PURE__ */ e("span", { className: "relative h-full w-0 block" })
   ] });
 }
-function Xe({ ...t }) {
-  const { tanTable: i, tableState: r, updateTableState: o } = y(), [a, l] = z(null), v = ye(
-    B(Ne),
-    B(Te, {
-      coordinateGetter: ke
+function We() {
+  const { tanTable: t, tableState: i } = N(), [o, r] = v(null), a = Re(
+    $(ke),
+    $(Ee, {
+      coordinateGetter: Ne
     })
   );
   return /* @__PURE__ */ e(
-    De,
+    _e,
     {
-      sensors: v,
-      collisionDetection: Pe,
-      onDragStart: (c) => {
-        const { active: d } = c;
-        l(d.id.toString());
+      sensors: a,
+      collisionDetection: Ve,
+      onDragStart: (l) => {
+        const { active: c } = l;
+        r(c.id.toString());
       },
-      onDragEnd: (c) => {
-        const { active: d, over: p } = c;
-        if (p && d.id !== p.id) {
-          const u = r.columnOrder.indexOf(d.id.toString()), h = r.columnOrder.indexOf(p.id.toString());
-          o({ columnOrder: [...Ae(r.columnOrder, u, h)] });
+      onDragEnd: (l) => {
+        const { active: c, over: d } = l;
+        if (d && c.id !== d.id) {
+          const h = t.getState().columnOrder, S = h.indexOf(c.id.toString()), C = h.indexOf(d.id.toString());
+          t.setColumnOrder([...Pe(h, S, C)]);
         }
-        l(null);
+        r(null);
       },
       children: /* @__PURE__ */ s(
-        Oe,
+        Te,
         {
-          items: r.columnOrder,
-          strategy: Ie,
+          items: t.getState().columnOrder,
+          strategy: De,
           children: [
-            /* @__PURE__ */ s(Q, { ...t, children: [
-              /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(f, { icon: () => ge, variant: "neutral", children: "Columns" }) }),
-              /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ s(Re, { children: [
-                /* @__PURE__ */ e(
-                  $,
-                  {
-                    className: "italic",
-                    onSelect: (c) => {
-                      c.preventDefault(), i.toggleAllColumnsVisible();
-                    },
-                    checked: i.getIsAllColumnsVisible(),
-                    children: "(Select all)"
-                  }
-                ),
-                r.columnOrder.map((c) => /* @__PURE__ */ e(N, { colId: c }, c))
-              ] }) })
+            /* @__PURE__ */ s(X, { label: /* @__PURE__ */ s(w, { children: [
+              /* @__PURE__ */ e(me, {}),
+              "Columns"
+            ] }), selectionMode: "multiple", items: t.getAllFlatColumns(), selectedKeys: t.getIsAllColumnsVisible() ? "all" : t.getVisibleFlatColumns().map((l) => l.id), children: [
+              /* @__PURE__ */ e(F, { onAction: () => t.toggleAllColumnsVisible(), className: "italic", children: "(select all)" }),
+              t.getState().columnOrder.map((l) => {
+                const c = t.getAllFlatColumns().find((d) => d.id === l);
+                return c ? /* @__PURE__ */ e(u, { column: c }, c.id) : null;
+              })
             ] }),
-            /* @__PURE__ */ e(Me, { children: a ? /* @__PURE__ */ e("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: K(a, "admin-portal") }) : null })
+            /* @__PURE__ */ e(He, { children: o ? /* @__PURE__ */ e("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: W(o, "admin-portal") }) : null })
           ]
         }
       )
     }
   );
-  function N({ colId: c }) {
-    const d = i.getAllLeafColumns().find((b) => b.id === c);
-    if (!d)
-      return null;
+  function u({ column: l }) {
     const {
-      attributes: p,
-      listeners: u,
+      attributes: c,
+      listeners: d,
       setNodeRef: h,
-      transform: P,
-      transition: T
-    } = ze({ id: c }), M = {
-      transform: Le.Transform.toString(P),
-      transition: T,
+      transform: S,
+      transition: C
+    } = Ae({ id: l.id }), T = {
+      transform: Ue.Transform.toString(S),
+      transition: C,
       zIndex: "999"
     };
-    return /* @__PURE__ */ s("div", { ...p, ref: h, className: "flex items-center", style: M, children: [
-      /* @__PURE__ */ e(fe, { className: "size-icon cursor-grab m-2", ...u }),
-      /* @__PURE__ */ s(
-        $,
-        {
-          onSelect: (b) => {
-            b.preventDefault(), d.toggleVisibility();
-          },
-          disabled: !d.getCanHide(),
-          checked: d.getIsVisible(),
-          children: [
-            d.getIsSorted(),
-            " ",
-            K(d.id, "admin-portal")
-          ]
-        }
-      )
-    ] });
+    return /* @__PURE__ */ s(
+      F,
+      {
+        ref: h,
+        style: T,
+        ...c,
+        id: l.id,
+        onAction: () => l.toggleVisibility(),
+        isDisabled: !l.getCanHide(),
+        className: "flex items-center",
+        children: [
+          /* @__PURE__ */ e(ge, { ...d, className: "size-icon cursor-grab" }),
+          W(l.id, "admin-portal"),
+          l.getIsSorted() && /* @__PURE__ */ e(Z, { className: "size-icon", direction: l.getIsSorted() })
+        ]
+      }
+    );
   }
 }
-function Ye() {
-  var o;
-  const { tanTable: t, query: i } = y(), r = ((o = i.data) == null ? void 0 : o.total) ?? 0;
+function Ge() {
+  var r;
+  const { tanTable: t, query: i } = N(), o = ((r = i.data) == null ? void 0 : r.total) ?? 0;
   return /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e("span", { className: "whitespace-nowrap caption text-muted", children: `${t.getState().pagination.pageIndex * t.getState().pagination.pageSize + 1} - ${Math.min(
       (t.getState().pagination.pageIndex + 1) * t.getState().pagination.pageSize,
-      r
-    )} of ${r == null ? void 0 : r.toLocaleString()}` }),
+      o
+    )} of ${o == null ? void 0 : o.toLocaleString()}` }),
     /* @__PURE__ */ e(
-      f,
+      b,
       {
-        onClick: () => t.firstPage(),
-        disabled: !t.getCanPreviousPage(),
+        onPress: () => t.firstPage(),
+        isDisabled: !t.getCanPreviousPage(),
         variant: "neutral",
         size: "icon",
-        icon: () => he
+        children: /* @__PURE__ */ e(fe, {})
       }
     ),
     /* @__PURE__ */ e(
-      f,
+      b,
       {
-        onClick: () => t.previousPage(),
-        disabled: !t.getCanPreviousPage(),
+        onPress: () => t.previousPage(),
+        isDisabled: !t.getCanPreviousPage(),
         variant: "neutral",
         size: "icon",
-        icon: () => be
+        children: /* @__PURE__ */ e(pe, {})
       }
     ),
     /* @__PURE__ */ e(
-      f,
+      b,
       {
-        onClick: () => t.nextPage(),
-        disabled: !t.getCanNextPage(),
+        onPress: () => t.nextPage(),
+        isDisabled: !t.getCanNextPage(),
         variant: "neutral",
         size: "icon",
-        icon: () => Ce
+        children: /* @__PURE__ */ e(he, {})
       }
     ),
     /* @__PURE__ */ e(
-      f,
+      b,
       {
         onClick: () => t.lastPage(),
-        disabled: !t.getCanNextPage(),
+        isDisabled: !t.getCanNextPage(),
         variant: "neutral",
         size: "icon",
-        icon: () => Se
+        children: /* @__PURE__ */ e(be, {})
       }
     )
   ] });
 }
-function Je() {
-  const { tanTable: t } = y(), i = [10, 20, 30, 40, 50];
-  return /* @__PURE__ */ s(Q, { children: [
-    /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(f, { icon: () => pe, variant: "neutral", children: t.getState().pagination.pageSize }) }),
-    /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(Fe, { value: t.getState().pagination.pageSize.toString(), children: i.map((r) => /* @__PURE__ */ e(
-      Ve,
-      {
-        value: r.toString(),
-        onSelect: () => t.setPageSize(r),
-        children: r
-      }
-    )) }) })
-  ] });
+function Xe() {
+  const { tanTable: t } = N(), i = [10, 20, 30, 40, 50];
+  return /* @__PURE__ */ e(X, { label: t.getState().pagination.pageSize.toString(), selectionMode: "single", selectedKeys: [t.getState().pagination.pageSize.toString()], items: i.map((o) => ({ id: o.toString(), value: o })), children: (o) => /* @__PURE__ */ e(F, { onAction: () => t.setPageSize(o.value), children: o.value }) });
 }
-function Ze({ tableActions: t }) {
-  const { query: i, tanTable: r, tableState: o, updateTableState: a } = y();
+function Ye({ tableActions: t }) {
+  const { query: i, tanTable: o, searchQuery: r, setSearchQuery: a } = N();
   return /* @__PURE__ */ s("section", { className: "flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto", children: [
     /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
       /* @__PURE__ */ e(
-        f,
+        b,
         {
-          loading: i.isFetching,
-          icon: () => ce,
+          isPending: i.isFetching,
           onClick: () => i.refetch(),
           variant: "neutral",
-          size: "icon"
+          size: "icon",
+          children: /* @__PURE__ */ e(ue, {})
         }
       ),
-      t.filter((l) => l.bulk === r.getSelectedRowModel().rows.length > 0).map((l, v) => /* @__PURE__ */ e(f, { type: "button", disabled: i.isFetching, className: "animate-in fade-in slide-in-from-left-15 duration-300 transition-transform", onClick: (N) => {
-        l.onClick(N, r);
-      }, icon: () => l.icon, size: "icon" }, `${v}-${l.bulk}`))
-    ] }),
-    /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
-      /* @__PURE__ */ e(_e, {}),
-      /* @__PURE__ */ e(
-        Qe,
-        {
-          value: o.search,
-          onChange: (l) => {
-            a({ search: l });
-          },
-          buttonProps: {
-            // TODO, this might not work
-            disabled: i.isFetching
-          }
+      t.filter((u) => u.bulk === o.getSelectedRowModel().rows.length > 0).map(
+        (u, l) => {
+          const c = u.icon;
+          return /* @__PURE__ */ e(b, { type: "button", isDisabled: i.isFetching, className: "animate-in fade-in slide-in-from-left-15 duration-300 transition-transform", onPress: (d) => {
+            u.onClick(d, o);
+          }, size: "icon", children: /* @__PURE__ */ e(c, {}) }, `${l}-${u.bulk}`);
         }
       )
+    ] }),
+    /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
+      /* @__PURE__ */ e(Ie, {}),
+      /* @__PURE__ */ e($e, { value: r, onChange: a })
     ] })
   ] });
 }
-function et({ className: t }) {
-  const { tanTable: i } = y(), r = (o, a) => x("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", o && "bg-card sticky right-0 z-50 text-center", a);
-  return /* @__PURE__ */ s(Ee, { className: x(t), children: [
-    /* @__PURE__ */ e(He, { className: "sticky top-0 z-10", children: i.getHeaderGroups().map((o) => /* @__PURE__ */ e(G, { className: x("h-input"), children: o.headers.map((a) => /* @__PURE__ */ e(
-      Ue,
+function Z({ direction: t, ...i }) {
+  return t === "asc" ? /* @__PURE__ */ e(Se, { ...i }) : t === "desc" ? /* @__PURE__ */ e(Ce, { ...i }) : /* @__PURE__ */ e(ye, { ...i });
+}
+function Ze({ className: t }) {
+  const { tanTable: i } = N(), o = (r, a) => x("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", r && "bg-card sticky right-0 z-50 text-center", a);
+  return /* @__PURE__ */ s(ze, { className: x(t), children: [
+    /* @__PURE__ */ e(Me, { className: "sticky top-0 z-10", children: i.getHeaderGroups().map((r) => /* @__PURE__ */ e(Q, { className: x("h-input"), children: r.headers.map((a) => /* @__PURE__ */ s(
+      Oe,
       {
-        className: r(!1, "bg-card"),
-        children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1", children: [
-          !a.column.getCanSort() && !a.isPlaceholder && /* @__PURE__ */ e("span", { children: O(
+        className: o(!1, "bg-card"),
+        children: [
+          !a.column.getCanSort() && !a.isPlaceholder && /* @__PURE__ */ e(w, { children: M(
             a.column.columnDef.header,
             a.getContext()
           ) }),
-          a.column.getCanSort() && /* @__PURE__ */ e(
-            f,
+          a.column.getCanSort() && /* @__PURE__ */ s(
+            b,
             {
               variant: "ghost",
-              className: "w-full",
-              onClick: a.column.getToggleSortingHandler(),
-              trailingIcon: () => {
-                const l = a.column.getIsSorted();
-                return l === "asc" ? de : l === "desc" ? ue : me;
-              },
-              children: O(
-                a.column.columnDef.header,
-                a.getContext()
-              )
+              className: "w-full !justify-start !px-1.5",
+              onPress: a.column.getToggleSortingHandler(),
+              children: [
+                M(
+                  a.column.columnDef.header,
+                  a.getContext()
+                ),
+                /* @__PURE__ */ e(Z, { direction: a.column.getIsSorted() })
+              ]
             }
           )
-        ] })
+        ]
       },
       a.id
-    )) }, o.id)) }),
-    /* @__PURE__ */ e(je, { className: "flex-1 overflow-y-auto relative", children: i.getRowModel().rows.map((o) => /* @__PURE__ */ e(
-      G,
+    )) }, r.id)) }),
+    /* @__PURE__ */ e(Fe, { className: "flex-1 overflow-y-auto relative", children: i.getRowModel().rows.map((r) => /* @__PURE__ */ e(
+      Q,
       {
         className: x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),
-        "data-selected": o.getIsSelected(),
-        children: o.getVisibleCells().map((a) => /* @__PURE__ */ e(
-          qe,
+        "data-selected": r.getIsSelected(),
+        children: r.getVisibleCells().map((a) => /* @__PURE__ */ e(
+          Le,
           {
-            className: r(a.column.id === L),
-            children: O(
+            className: o(a.column.id === L),
+            children: M(
               a.column.columnDef.cell,
               a.getContext()
             )
@@ -435,16 +396,16 @@ function et({ className: t }) {
           a.id
         ))
       },
-      o.id
+      r.id
     )) })
   ] });
 }
 export {
   L as ACTIONS_COLUMN_ID,
-  wt as DataTable,
-  J as DataTableContext,
-  vt as DataTableProvider,
-  y as useDataTable,
-  St as useDataTableState
+  Ct as DataTable,
+  Y as DataTableContext,
+  St as DataTableProvider,
+  N as useDataTable,
+  bt as useDataTableState
 };
 //# sourceMappingURL=data-table.es.js.map