@cryptlex/web-components 3.8.2 → 5.0.0

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

@@ -1,201 +1,411 @@
 "use client";
-import { jsx as o, Fragment as g, jsxs as n } from "react/jsx-runtime";
-import { useId as z, useState as E, useEffect as O, useMemo as U } from "react";
-import { cn as A } from "../../utils/index.es.js";
-import "../../utils/form-context.es.js";
-import "../../utils/form-hook.es.js";
-import { useQuery as D, keepPreviousData as j } from "@tanstack/react-query";
-import { useReactTable as k, getCoreRowModel as q } from "@tanstack/react-table";
-import { Info as B } from "lucide-react";
-import { ColumnPicker as G } from "./column-picker.es.js";
-import { PageSize as H } from "./page-size.es.js";
-import { Paginator as K } from "./paginator.es.js";
-import Q from "./table-actions.es.js";
-import { TableContent as W } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as X, TABLE_ID_COLUMN as Y, TABLE_DEFAULT_DATE_COLUMNS as J } from "./table-commons.es.js";
-import { Loader as Z } from "../ui/loader.es.js";
-const y = "Actions";
-function fe({
-  columns: l,
-  fetchFn: m,
-  tableActions: M,
-  columnsToHideByDefault: d = {},
-  allowSelection: f = !1,
-  className: _,
-  ...L
-  // filterableFields,
-}) {
-  var w, P, S, x, N;
-  const F = z(), [T, R] = E({
+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 b } from "../ui/button.es.js";
+const L = "tableActions";
+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
-    columnFilters: [],
-    // Filters for columns, not to be confused with the filters that get sent to the Web API.
-    search: "",
-    // Search query state
-    columnVisibility: {},
-    // Visibility of columns
-    rowSelection: {},
+    /** Ephemeral */
+    rowSelection: {}
     // Row selection state
-    pagination: { pageIndex: 0, pageSize: 20 }
-    // Pagination state
-  }), i = (e) => {
-    R((r) => ({ ...r, ...e }));
+  }), [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: c,
-    columnFilters: p,
-    search: h,
-    columnVisibility: C,
-    rowSelection: b,
-    pagination: u
-  } = T;
-  O(() => {
-    i({
-      columnVisibility: {
-        id: !1,
-        updatedAt: !1,
-        ...d
-      }
-    });
-  }, [d]);
-  const a = D({
-    queryKey: [F, u, c, h.trim()],
-    queryFn: () => m(u, c, h.trim()),
-    placeholderData: j,
+    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
-  }), I = U(() => [
-    ...f ? X : [],
-    ...Y,
-    ...l.filter((r) => r.id !== y),
-    // ...(metadataColumns.length ? metadataColumns : []),
-    ...J,
-    ...l.filter((r) => r.id === y)
-  ], [l, (w = a.data) == null ? void 0 : w.data, f]);
-  function V(e) {
-    return typeof e == "function";
+  });
+  K(() => {
+  }, [T]);
+  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 f = (m) => m != null && typeof m == "object" && "metadata" in m && Array.isArray(m.metadata), j = n.filter(
+      f
+    );
+    return j.length === 0 ? [] : Array.from(new Set(j.flatMap((m) => {
+      var g;
+      return ((g = m.metadata) == null ? void 0 : g.map((p) => p.key)) ?? [];
+    }))).map((m) => te.accessor(
+      (g) => {
+        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,
+        header: m,
+        // tooltip header
+        enableSorting: !1,
+        cell: (g) => {
+          const p = g.getValue();
+          return p == null ? "" : String(p);
+        }
+      }
+    ));
+  }, [(V = y.data) == null ? void 0 : V.data]), ne = [
+    ...r ? qe : [],
+    ...Be,
+    ...t.filter((n) => n.id !== L),
+    ...E.length ? E : [],
+    ...Ke,
+    // Actions column
+    ...t.filter((n) => n.id === L)
+  ];
+  function ae(n) {
+    return typeof n == "function";
   }
-  function s(e, r) {
-    return V(e) ? e(r) : e;
+  function D(n, f) {
+    return ae(n) ? n(f) : n;
   }
-  const t = k({
-    data: ((P = a.data) == null ? void 0 : P.data) ?? [],
-    columns: I,
-    getCoreRowModel: q(),
-    rowCount: (S = a.data) == null ? void 0 : S.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: (e) => {
-      i({ pagination: s(e, u) });
+    onPaginationChange: (n) => {
+      P({ pagination: D(n, I) });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
-    onSortingChange: (e) => {
-      i({ sorting: s(e, c), rowSelection: {} });
+    onSortingChange: (n) => {
+      P({ sorting: [...D(n, A)], rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
-    onGlobalFilterChange: (e) => {
-      i({ columnFilters: s(e, p) });
+    onColumnVisibilityChange: (n) => {
+      J(D(n, T));
     },
-    onColumnVisibilityChange: (e) => {
-      i({ columnVisibility: s(e, C) });
+    onRowSelectionChange: (n) => {
+      P({ rowSelection: D(n, k) });
     },
-    onRowSelectionChange: (e) => {
-      i({ rowSelection: s(e, b) });
+    onColumnOrderChange: (n) => {
+      C(D(n, S));
     },
     state: {
-      sorting: c,
-      columnFilters: p,
-      columnVisibility: C,
-      pagination: u,
-      rowSelection: b
+      sorting: A,
+      columnVisibility: T,
+      pagination: I,
+      rowSelection: k,
+      columnOrder: S
     },
     meta: {
-      refetch: a.refetch
+      refetch: y.refetch
     }
   });
-  return /* @__PURE__ */ o(g, { children: /* @__PURE__ */ n("section", { ...L, className: A("flex flex-col bg-card", _), children: [
-    /* @__PURE__ */ o(
-      Q,
+  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 Y = ve(null), N = () => {
+  const t = we(Y);
+  if (!t)
+    throw Error("DataTable should be used within DataTableProvider.");
+  return t;
+};
+function St({ children: t, ...i }) {
+  return /* @__PURE__ */ e(Y.Provider, { value: i, children: t });
+}
+function Ct({
+  tableActions: t,
+  className: i,
+  ...o
+  // filterableFields,
+}) {
+  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: [
+      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." })
+      ] }) : (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(We, {}),
+        /* @__PURE__ */ e(Xe, {})
+      ] }),
+      /* @__PURE__ */ e(Ge, {})
+    ] })
+  ] }) });
+}
+function G({
+  children: t,
+  className: i
+}) {
+  return /* @__PURE__ */ s(w, { children: [
+    /* @__PURE__ */ e(
+      "span",
       {
-        dataQuery: a,
-        getSelectedRowModel: t.getSelectedRowModel,
-        tableActions: M,
-        handleSearching: (e) => i({ search: e })
+        className: x(
+          i,
+          "absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"
+        ),
+        children: t
       }
     ),
-    /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [
-      a.isLoading && /* @__PURE__ */ o(v, { className: "cursor-wait", children: /* @__PURE__ */ o(Z, {}) }),
-      !a.isLoading && t.getRowModel().rows.length === 0 && // Empty table
-      /* @__PURE__ */ o(v, { className: "cursor-not-allowed", children: !a.isFetching && (a.isError ? /* @__PURE__ */ n("span", { className: "flex gap-3 justify-center items-center", children: [
-        /* @__PURE__ */ o(B, {}),
-        /* @__PURE__ */ o("span", { children: "You don't have the required permissions. Please contact your admin." })
-      ] }) : (x = a.data) != null && x.data ? /* @__PURE__ */ o(g, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ o(g, { children: "No results found." })) }),
-      !a.isLoading && t.getRowModel().rows.length !== 0 && /* @__PURE__ */ o(
-        W,
+    /* @__PURE__ */ e("span", { className: "relative h-full w-0 block" })
+  ] });
+}
+function We() {
+  const { tanTable: t, tableState: i } = N(), [o, r] = v(null), a = Re(
+    $(ke),
+    $(Ee, {
+      coordinateGetter: Ne
+    })
+  );
+  return /* @__PURE__ */ e(
+    _e,
+    {
+      sensors: a,
+      collisionDetection: Ve,
+      onDragStart: (l) => {
+        const { active: c } = l;
+        r(c.id.toString());
+      },
+      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)]);
+        }
+        r(null);
+      },
+      children: /* @__PURE__ */ s(
+        Te,
         {
-          className: "size-full",
-          getRowModel: t.getRowModel,
-          getHeaderGroups: t.getHeaderGroups
+          items: t.getState().columnOrder,
+          strategy: De,
+          children: [
+            /* @__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(He, { children: o ? /* @__PURE__ */ e("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: W(o, "admin-portal") }) : null })
+          ]
         }
       )
-    ] }),
-    /* @__PURE__ */ n("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
-      /* @__PURE__ */ n("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ o(
-          G,
-          {
-            getAllColumns: t.getAllColumns,
-            getIsAllColumnsVisible: t.getIsAllColumnsVisible,
-            toggleAllColumnsVisible: t.toggleAllColumnsVisible
-          }
-        ),
-        /* @__PURE__ */ o(
-          H,
-          {
-            size: t.getState().pagination.pageSize,
-            onSelect: t.setPageSize
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(
-        K,
+    }
+  );
+  function u({ column: l }) {
+    const {
+      attributes: c,
+      listeners: d,
+      setNodeRef: h,
+      transform: S,
+      transition: C
+    } = Ae({ id: l.id }), T = {
+      transform: Ue.Transform.toString(S),
+      transition: C,
+      zIndex: "999"
+    };
+    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 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,
+      o
+    )} of ${o == null ? void 0 : o.toLocaleString()}` }),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onPress: () => t.firstPage(),
+        isDisabled: !t.getCanPreviousPage(),
+        variant: "neutral",
+        size: "icon",
+        children: /* @__PURE__ */ e(fe, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onPress: () => t.previousPage(),
+        isDisabled: !t.getCanPreviousPage(),
+        variant: "neutral",
+        size: "icon",
+        children: /* @__PURE__ */ e(pe, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onPress: () => t.nextPage(),
+        isDisabled: !t.getCanNextPage(),
+        variant: "neutral",
+        size: "icon",
+        children: /* @__PURE__ */ e(he, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onClick: () => t.lastPage(),
+        isDisabled: !t.getCanNextPage(),
+        variant: "neutral",
+        size: "icon",
+        children: /* @__PURE__ */ e(be, {})
+      }
+    )
+  ] });
+}
+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 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(
+        b,
         {
-          firstPage: t.firstPage,
-          previousPage: t.previousPage,
-          getCanNextPage: t.getCanNextPage,
-          getCanPreviousPage: t.getCanPreviousPage,
-          lastPage: t.lastPage,
-          nextPage: t.nextPage,
-          getState: t.getState,
-          rowCount: ((N = a.data) == null ? void 0 : N.total) ?? 0
+          isPending: i.isFetching,
+          onClick: () => i.refetch(),
+          variant: "neutral",
+          size: "icon",
+          children: /* @__PURE__ */ e(ue, {})
+        }
+      ),
+      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 v({
-  children: l,
-  className: m
-}) {
-  return /* @__PURE__ */ n(g, { children: [
-    /* @__PURE__ */ o(
-      "span",
+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: A(
-          "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
-          m
-        ),
-        children: l
-      }
-    ),
-    /* @__PURE__ */ o("span", { className: "relative h-full w-0 block" })
+        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__ */ s(
+            b,
+            {
+              variant: "ghost",
+              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
+    )) }, 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": r.getIsSelected(),
+        children: r.getVisibleCells().map((a) => /* @__PURE__ */ e(
+          Le,
+          {
+            className: o(a.column.id === L),
+            children: M(
+              a.column.columnDef.cell,
+              a.getContext()
+            )
+          },
+          a.id
+        ))
+      },
+      r.id
+    )) })
   ] });
 }
 export {
-  y as ACTIONS_COLUMN_ID,
-  fe as DataTable
+  L as ACTIONS_COLUMN_ID,
+  Ct as DataTable,
+  Y as DataTableContext,
+  St as DataTableProvider,
+  N as useDataTable,
+  bt as useDataTableState
 };
 //# sourceMappingURL=data-table.es.js.map