@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.41.1 → 0.5.0-beta.42.1

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

@@ -1,293 +1,342 @@
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-import { useSensors as xe, useSensor as A, PointerSensor as ye, KeyboardSensor as Ce, DndContext as we, closestCenter as De, DragOverlay as Te } from "@dnd-kit/core";
-import { restrictToHorizontalAxis as _e } from "@dnd-kit/modifiers";
-import { sortableKeyboardCoordinates as Ne, arrayMove as Ie, SortableContext as Re, horizontalListSortingStrategy as He, useSortable as Me } from "@dnd-kit/sortable";
-import { CSS as Oe } from "@dnd-kit/utilities";
-import { useReactTable as ke, getPaginationRowModel as ze, getSortedRowModel as Ve, getCoreRowModel as Ee, flexRender as B } from "@tanstack/react-table";
-import { GripVerticalIcon as Ae, ArrowUpIcon as Le, ArrowDownIcon as Ke, ArrowUpDownIcon as Pe } from "lucide-react";
-import * as s from "react";
-import { DataTablePagination as je } from "./data-table-pagination.js";
-import { Table as L, TableHeader as K, TableRow as D, TableBody as P, TableHead as G, TableCell as j } from "../table.js";
-import { cn as S } from "../../../lib/utils.js";
-const X = s.createContext(null);
-function tt() {
-  const o = s.useContext(X);
-  if (!o)
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { useSensors as Oe, useSensor as P, PointerSensor as ke, KeyboardSensor as Ve, DndContext as ze, closestCenter as Ee, DragOverlay as Le } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as Ke } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates as Ae, arrayMove as Fe, SortableContext as je, horizontalListSortingStrategy as Pe, useSortable as qe } from "@dnd-kit/sortable";
+import { CSS as Ue } from "@dnd-kit/utilities";
+import { useReactTable as We, getPaginationRowModel as Be, getSortedRowModel as Ge, getCoreRowModel as Xe, flexRender as Y } from "@tanstack/react-table";
+import { GripVerticalIcon as Ye, ArrowUpIcon as Je, ArrowDownIcon as Qe, ArrowUpDownIcon as Ze } from "lucide-react";
+import * as i from "react";
+import { DataTablePagination as $e } from "./data-table-pagination.js";
+import { Table as q, TableHeader as U, TableRow as _, TableBody as W, TableHead as J, TableCell as B } from "../table.js";
+import { cn as y } from "../../../lib/utils.js";
+function et(t, a, c) {
+  const n = t.toLowerCase().trim(), s = c.toLowerCase().trim();
+  switch (a) {
+    case "contains":
+      return n.includes(s);
+    case "equals":
+      return n === s;
+    case "not_equals":
+      return n !== s;
+    case "starts_with":
+      return n.startsWith(s);
+    case "ends_with":
+      return n.endsWith(s);
+    case "is_empty":
+      return n === "";
+    case "is_not_empty":
+      return n !== "";
+    default:
+      return !0;
+  }
+}
+const Q = i.createContext(null);
+function gt() {
+  const t = i.useContext(Q);
+  if (!t)
     throw new Error("useDataTable must be used within a <DataTable>");
-  return o;
+  return t;
 }
-function Fe({
-  header: o,
+function tt({
+  header: t,
   children: a,
-  position: l,
-  numeric: i
+  position: c,
+  numeric: n
 }) {
   const {
-    attributes: n,
-    listeners: g,
-    setNodeRef: v,
-    transform: m,
-    transition: T,
-    isDragging: f
-  } = Me({ id: o.column.id }), _ = {
-    transform: Oe.Transform.toString(
-      m ? { ...m, scaleX: 1, scaleY: 1 } : null
+    attributes: s,
+    listeners: l,
+    setNodeRef: S,
+    transform: f,
+    transition: D,
+    isDragging: g
+  } = qe({ id: t.column.id }), T = {
+    transform: Ue.Transform.toString(
+      f ? { ...f, scaleX: 1, scaleY: 1 } : null
     ),
-    transition: T,
+    transition: D,
     position: "relative"
   };
-  return /* @__PURE__ */ t(
-    G,
+  return /* @__PURE__ */ r(
+    J,
     {
-      ref: v,
-      style: _,
-      variant: i ? "numeric" : void 0,
-      className: S(
+      ref: S,
+      style: T,
+      variant: n ? "numeric" : void 0,
+      className: y(
         "group/header transition-shadow duration-150",
-        !f && l === "first" && "hover:shadow-[inset_-1px_0_0_0_var(--color-border)]",
-        !f && l === "last" && "hover:shadow-[inset_1px_0_0_0_var(--color-border)]",
-        !f && l === "middle" && "hover:shadow-[inset_1px_0_0_0_var(--color-border),inset_-1px_0_0_0_var(--color-border)]",
-        f && "opacity-40"
+        !g && c === "first" && "hover:shadow-[inset_-1px_0_0_0_var(--color-border)]",
+        !g && c === "last" && "hover:shadow-[inset_1px_0_0_0_var(--color-border)]",
+        !g && c === "middle" && "hover:shadow-[inset_1px_0_0_0_var(--color-border),inset_-1px_0_0_0_var(--color-border)]",
+        g && "opacity-40"
       ),
-      children: /* @__PURE__ */ b("div", { className: S("flex items-center gap-1", i && "flex-row-reverse"), children: [
-        /* @__PURE__ */ t("div", { className: "flex-1", children: a }),
-        /* @__PURE__ */ t(
+      children: /* @__PURE__ */ b("div", { className: y("flex items-center gap-1", n && "flex-row-reverse"), children: [
+        /* @__PURE__ */ r("div", { className: "flex-1", children: a }),
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "data-drag-handle": "",
             className: "cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing opacity-0 group-hover/header:opacity-100 transition-opacity",
-            ...n,
-            ...g,
-            children: /* @__PURE__ */ t(Ae, { className: "size-3.5" })
+            ...s,
+            ...l,
+            children: /* @__PURE__ */ r(Ye, { className: "size-3.5" })
           }
         )
       ] })
     }
   );
 }
-function F({
-  header: o,
+function G({
+  header: t,
   enableSorting: a,
-  numericColumns: l,
-  columnLabels: i
+  numericColumns: c,
+  columnLabels: n
 }) {
-  if (o.isPlaceholder) return null;
-  const n = a && o.column.getCanSort(), g = o.column.getIsSorted(), v = l.has(o.column.id);
+  if (t.isPlaceholder) return null;
+  const s = a && t.column.getCanSort(), l = t.column.getIsSorted(), S = c.has(t.column.id);
   return /* @__PURE__ */ b(
     "div",
     {
-      className: S(
+      className: y(
         "flex items-center gap-1",
-        n && "group/sort cursor-pointer select-none",
-        v && "flex-row-reverse"
+        s && "group/sort cursor-pointer select-none",
+        S && "flex-row-reverse"
       ),
-      onClick: n ? o.column.getToggleSortingHandler() : void 0,
-      onKeyDown: (m) => {
-        (m.key === "Enter" || m.key === " ") && n && o.column.getToggleSortingHandler();
+      onClick: s ? t.column.getToggleSortingHandler() : void 0,
+      onKeyDown: (f) => {
+        (f.key === "Enter" || f.key === " ") && s && t.column.getToggleSortingHandler();
       },
       children: [
-        i[o.column.id] ?? B(o.column.columnDef.header, o.getContext()),
-        n && /* @__PURE__ */ t(
+        n[t.column.id] ?? Y(t.column.columnDef.header, t.getContext()),
+        s && /* @__PURE__ */ r(
           "span",
           {
-            className: S(
-              !g && "opacity-0 group-hover/sort:opacity-100 transition-opacity"
+            className: y(
+              !l && "opacity-0 group-hover/sort:opacity-100 transition-opacity"
             ),
-            children: g === "asc" ? /* @__PURE__ */ t(Le, { className: "size-3.5 text-foreground" }) : g === "desc" ? /* @__PURE__ */ t(Ke, { className: "size-3.5 text-foreground" }) : /* @__PURE__ */ t(Pe, { className: "size-3.5 text-muted-foreground" })
+            children: l === "asc" ? /* @__PURE__ */ r(Je, { className: "size-3.5 text-foreground" }) : l === "desc" ? /* @__PURE__ */ r(Qe, { className: "size-3.5 text-foreground" }) : /* @__PURE__ */ r(Ze, { className: "size-3.5 text-muted-foreground" })
           }
         )
       ]
     }
   );
 }
-function U({
-  table: o,
+function X({
+  table: t,
   columns: a,
-  numericColumns: l
+  numericColumns: c
 }) {
-  return o.getRowModel().rows.length === 0 ? /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(j, { colSpan: a.length, className: "h-24 text-center text-muted-foreground", children: "No results." }) }) : o.getRowModel().rows.map((i) => /* @__PURE__ */ t(D, { "data-state": i.getIsSelected() ? "selected" : void 0, children: i.getVisibleCells().map((n) => /* @__PURE__ */ t(j, { variant: l.has(n.column.id) ? "numeric" : void 0, children: B(n.column.columnDef.cell, n.getContext()) }, n.id)) }, i.id));
+  return t.getRowModel().rows.length === 0 ? /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(B, { colSpan: a.length, className: "h-24 text-center text-muted-foreground", children: "No results." }) }) : t.getRowModel().rows.map((n) => /* @__PURE__ */ r(_, { "data-state": n.getIsSelected() ? "selected" : void 0, children: n.getVisibleCells().map((s) => /* @__PURE__ */ r(B, { variant: c.has(s.column.id) ? "numeric" : void 0, children: Y(s.column.columnDef.cell, s.getContext()) }, s.id)) }, n.id));
 }
-function Ue(o) {
-  const a = [], l = [], i = [];
-  return s.Children.forEach(o, (n) => {
-    s.isValidElement(n) && n.type === Be ? a.push(n) : s.isValidElement(n) && n.type === je ? l.push(n) : i.push(n);
-  }), { toolbarSlots: a, paginationSlots: l, restSlots: i };
+function ot(t) {
+  const a = [], c = [], n = [], s = [];
+  return i.Children.forEach(t, (l) => {
+    i.isValidElement(l) && l.type === rt ? a.push(l) : i.isValidElement(l) && l.type.displayName === "DataTableFilter" ? c.push(l) : i.isValidElement(l) && l.type === $e ? n.push(l) : s.push(l);
+  }), { toolbarSlots: a, filterSlots: c, paginationSlots: n, restSlots: s };
 }
-function ot({
-  columns: o,
+function pt({
+  columns: t,
   data: a,
-  toolbar: l,
-  enableSorting: i = !1,
-  enableColumnVisibility: n = !1,
-  children: g,
-  columnOrder: v,
-  onColumnOrderChange: m,
-  columnVisibility: T,
-  onColumnVisibilityChange: f,
-  columnLabels: _,
-  onColumnLabelChange: H,
-  enablePagination: y = !1,
-  defaultPageSize: Y = 10,
-  pagination: N,
-  onPaginationChange: I,
-  enableColumnReorder: q = !1,
-  density: M = "default",
-  className: J,
-  variant: O = "card",
-  containerClassName: k
+  toolbar: c,
+  enableSorting: n = !1,
+  enableColumnVisibility: s = !1,
+  children: l,
+  columnOrder: S,
+  onColumnOrderChange: f,
+  columnVisibility: D,
+  onColumnVisibilityChange: g,
+  columnLabels: T,
+  onColumnLabelChange: k,
+  enablePagination: x = !1,
+  defaultPageSize: Z = 10,
+  pagination: I,
+  onPaginationChange: N,
+  enableColumnReorder: $ = !1,
+  enableFiltering: M = !1,
+  filters: ee,
+  onFiltersChange: V,
+  filterConfig: R,
+  manualFiltering: z = !1,
+  density: E = "default",
+  className: te,
+  variant: L = "card",
+  containerClassName: K
 }) {
-  const [Q, W] = s.useState([]), [Z, $] = s.useState({}), [ee, te] = s.useState([]), [oe, ne] = s.useState({}), [re, se] = s.useState({
+  const [oe, re] = i.useState([]), [ne, se] = i.useState({}), [ie, ae] = i.useState([]), [le, ce] = i.useState({}), [de, ue] = i.useState({
     pageIndex: 0,
-    pageSize: Y
-  }), ie = N ?? re, R = T ?? Z, p = v ?? ee, C = _ ?? oe, ae = s.useMemo(() => {
-    if (y)
-      return I ? (e) => {
-        const r = typeof e == "function" ? e(N) : e;
-        I(r);
-      } : se;
-  }, [y, I, N]), le = s.useMemo(() => {
-    if (n)
+    pageSize: Z
+  }), [me, fe] = i.useState([]), ge = I ?? de, H = ee ?? me, O = D ?? ne, p = S ?? ie, C = T ?? le, pe = i.useMemo(() => {
+    if (x)
+      return N ? (e) => {
+        const o = typeof e == "function" ? e(I) : e;
+        N(o);
+      } : ue;
+  }, [x, N, I]), he = i.useMemo(() => {
+    if (s)
       return (e) => {
-        const r = typeof e == "function" ? e(R) : e;
-        (f ?? $)(r);
+        const o = typeof e == "function" ? e(O) : e;
+        (g ?? se)(o);
       };
-  }, [n, R, f]), ce = s.useCallback(
+  }, [s, O, g]), be = i.useCallback(
     (e) => {
-      const r = typeof e == "function" ? e(p) : e;
-      (m ?? te)(r);
+      (V ?? fe)(e);
     },
-    [p, m]
-  ), d = ke({
-    data: a,
-    columns: o,
+    [V]
+  ), ye = i.useMemo(() => R || t.filter((e) => "accessorKey" in e).map((e) => ({ columnId: String(e.accessorKey) })), [R, t]), Se = i.useMemo(() => {
+    if (!M || z) return a;
+    const e = H.filter(
+      (o) => o.columnId && o.operator && (o.value.trim() !== "" || o.operator === "is_empty" || o.operator === "is_not_empty")
+    );
+    return e.length === 0 ? a : a.filter(
+      (o) => e.every((d) => {
+        const u = String(
+          o[d.columnId] ?? ""
+        );
+        return et(u, d.operator, d.value);
+      })
+    );
+  }, [a, H, M, z]), ve = i.useCallback(
+    (e) => {
+      const o = typeof e == "function" ? e(p) : e;
+      (f ?? ae)(o);
+    },
+    [p, f]
+  ), m = We({
+    data: Se,
+    columns: t,
     state: {
-      sorting: i ? Q : void 0,
-      columnVisibility: n ? R : void 0,
+      sorting: n ? oe : void 0,
+      columnVisibility: s ? O : void 0,
       columnOrder: p.length > 0 ? p : void 0,
-      ...y ? { pagination: ie } : {}
+      ...x ? { pagination: ge } : {}
     },
-    onSortingChange: i ? W : void 0,
-    onPaginationChange: ae,
-    onColumnVisibilityChange: le,
-    onColumnOrderChange: ce,
-    getCoreRowModel: Ee(),
-    getSortedRowModel: i ? Ve() : void 0,
-    getPaginationRowModel: y ? ze() : void 0
-  }), de = s.useCallback(
-    (e, r) => {
-      (H ?? ((c, u) => ne((w) => ({ ...w, [c]: u }))))(e, r);
+    onSortingChange: n ? re : void 0,
+    onPaginationChange: pe,
+    onColumnVisibilityChange: he,
+    onColumnOrderChange: ve,
+    getCoreRowModel: Xe(),
+    getSortedRowModel: n ? Ge() : void 0,
+    getPaginationRowModel: x ? Be() : void 0
+  }), xe = i.useCallback(
+    (e, o) => {
+      (k ?? ((d, u) => ce((w) => ({ ...w, [d]: u }))))(e, o);
     },
-    [H]
-  ), ue = xe(
-    A(ye, { activationConstraint: { distance: 5 } }),
-    A(Ce, { coordinateGetter: Ne })
-  ), [z, V] = s.useState(null), me = s.useCallback(
+    [k]
+  ), Ce = Oe(
+    P(ke, { activationConstraint: { distance: 5 } }),
+    P(Ve, { coordinateGetter: Ae })
+  ), [A, F] = i.useState(null), we = i.useCallback(
     (e) => {
-      V(String(e.active.id));
+      F(String(e.active.id));
     },
     []
-  ), ge = s.useCallback(
+  ), _e = i.useCallback(
     (e) => {
-      V(null);
-      const { active: r, over: c } = e;
-      if (!c || r.id === c.id) return;
-      const u = p.length > 0 ? p : d.getAllLeafColumns().map((ve) => ve.id), w = u.indexOf(String(r.id)), E = u.indexOf(String(c.id));
-      if (w === -1 || E === -1) return;
-      const Se = Ie(u, w, E);
-      d.setColumnOrder(Se);
+      F(null);
+      const { active: o, over: d } = e;
+      if (!d || o.id === d.id) return;
+      const u = p.length > 0 ? p : m.getAllLeafColumns().map((He) => He.id), w = u.indexOf(String(o.id)), j = u.indexOf(String(d.id));
+      if (w === -1 || j === -1) return;
+      const Re = Fe(u, w, j);
+      m.setColumnOrder(Re);
     },
-    [p, d]
-  ), x = z ? d.getFlatHeaders().find((e) => e.column.id === z) : null, h = s.useMemo(() => {
+    [p, m]
+  ), v = A ? m.getFlatHeaders().find((e) => e.column.id === A) : null, h = i.useMemo(() => {
     if (a.length === 0) return /* @__PURE__ */ new Set();
-    const e = a[0], r = /* @__PURE__ */ new Set();
-    for (const c of o) {
-      const u = "accessorKey" in c ? String(c.accessorKey) : "";
-      u && typeof e[u] == "number" && r.add(u);
+    const e = a[0], o = /* @__PURE__ */ new Set();
+    for (const d of t) {
+      const u = "accessorKey" in d ? String(d.accessorKey) : "";
+      u && typeof e[u] == "number" && o.add(u);
     }
-    return r;
-  }, [a, o]), fe = {
-    table: d,
+    return o;
+  }, [a, t]), De = {
+    table: m,
     columnLabels: C,
-    setColumnLabel: de
-  }, { toolbarSlots: pe, paginationSlots: he, restSlots: be } = Ue(g);
-  return /* @__PURE__ */ t(X.Provider, { value: fe, children: /* @__PURE__ */ b("div", { "data-slot": "data-table", className: S("w-full space-y-2", J), children: [
-    l,
-    pe,
-    q ? /* @__PURE__ */ b(
-      we,
+    setColumnLabel: xe,
+    filters: H,
+    setFilters: be,
+    filterConfig: ye,
+    enableFiltering: M
+  }, { toolbarSlots: Te, filterSlots: Ie, paginationSlots: Ne, restSlots: Me } = ot(l);
+  return /* @__PURE__ */ r(Q.Provider, { value: De, children: /* @__PURE__ */ b("div", { "data-slot": "data-table", className: y("w-full space-y-2", te), children: [
+    c,
+    Te,
+    Ie,
+    $ ? /* @__PURE__ */ b(
+      ze,
       {
-        sensors: ue,
-        collisionDetection: De,
-        modifiers: [_e],
-        onDragStart: me,
-        onDragEnd: ge,
+        sensors: Ce,
+        collisionDetection: Ee,
+        modifiers: [Ke],
+        onDragStart: we,
+        onDragEnd: _e,
         children: [
-          /* @__PURE__ */ t(
-            Re,
+          /* @__PURE__ */ r(
+            je,
             {
-              items: d.getFlatHeaders().map((e) => e.column.id),
-              strategy: He,
-              children: /* @__PURE__ */ b(L, { "data-density": M, variant: O, containerClassName: k, children: [
-                /* @__PURE__ */ t(K, { children: d.getHeaderGroups().map((e) => /* @__PURE__ */ t(D, { children: e.headers.map((r, c) => /* @__PURE__ */ t(
-                  Fe,
+              items: m.getFlatHeaders().map((e) => e.column.id),
+              strategy: Pe,
+              children: /* @__PURE__ */ b(q, { "data-density": E, variant: L, containerClassName: K, children: [
+                /* @__PURE__ */ r(U, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ r(_, { children: e.headers.map((o, d) => /* @__PURE__ */ r(
+                  tt,
                   {
-                    header: r,
-                    position: c === 0 ? "first" : c === e.headers.length - 1 ? "last" : "middle",
-                    numeric: h.has(r.column.id),
-                    children: /* @__PURE__ */ t(
-                      F,
+                    header: o,
+                    position: d === 0 ? "first" : d === e.headers.length - 1 ? "last" : "middle",
+                    numeric: h.has(o.column.id),
+                    children: /* @__PURE__ */ r(
+                      G,
                       {
-                        header: r,
-                        enableSorting: i,
+                        header: o,
+                        enableSorting: n,
                         numericColumns: h,
                         columnLabels: C
                       }
                     )
                   },
-                  r.id
+                  o.id
                 )) }, e.id)) }),
-                /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(U, { table: d, columns: o, numericColumns: h }) })
+                /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(X, { table: m, columns: t, numericColumns: h }) })
               ] })
             }
           ),
-          /* @__PURE__ */ t(Te, { dropAnimation: null, children: x && /* @__PURE__ */ t("div", { className: "rounded-md border bg-background px-4 py-3 text-sm font-medium shadow-lg", children: C[x.column.id] ?? (typeof x.column.columnDef.header == "string" ? x.column.columnDef.header : x.column.id) }) })
+          /* @__PURE__ */ r(Le, { dropAnimation: null, children: v && /* @__PURE__ */ r("div", { className: "rounded-md border bg-background px-4 py-3 text-sm font-medium shadow-lg", children: C[v.column.id] ?? (typeof v.column.columnDef.header == "string" ? v.column.columnDef.header : v.column.id) }) })
         ]
       }
-    ) : /* @__PURE__ */ b(L, { "data-density": M, variant: O, containerClassName: k, children: [
-      /* @__PURE__ */ t(K, { children: d.getHeaderGroups().map((e) => /* @__PURE__ */ t(D, { children: e.headers.map((r) => /* @__PURE__ */ t(G, { variant: h.has(r.column.id) ? "numeric" : void 0, children: /* @__PURE__ */ t(
-        F,
+    ) : /* @__PURE__ */ b(q, { "data-density": E, variant: L, containerClassName: K, children: [
+      /* @__PURE__ */ r(U, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ r(_, { children: e.headers.map((o) => /* @__PURE__ */ r(J, { variant: h.has(o.column.id) ? "numeric" : void 0, children: /* @__PURE__ */ r(
+        G,
         {
-          header: r,
-          enableSorting: i,
+          header: o,
+          enableSorting: n,
           numericColumns: h,
           columnLabels: C
         }
-      ) }, r.id)) }, e.id)) }),
-      /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(U, { table: d, columns: o, numericColumns: h }) })
+      ) }, o.id)) }, e.id)) }),
+      /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(X, { table: m, columns: t, numericColumns: h }) })
     ] }),
-    he,
-    be
+    Ne,
+    Me
   ] }) });
 }
-function Be({
-  className: o,
+function rt({
+  className: t,
   children: a,
-  ...l
+  ...c
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "table-toolbar",
-      className: S("flex items-center gap-2", o),
-      ...l,
+      className: y("flex items-center justify-end gap-2", t),
+      ...c,
       children: a
     }
   );
 }
 export {
-  ot as DataTable,
-  Be as TableToolbar,
-  tt as useDataTable
+  pt as DataTable,
+  rt as TableToolbar,
+  gt as useDataTable
 };
 //# sourceMappingURL=data-table.js.map