laif-ds 0.2.42 → 0.2.43

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

@@ -1,78 +1,91 @@
 "use client";
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
-import { cn as g } from "../../../../../lib/utils.js";
-import { flexRender as _ } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useRef as J, useState as j, useMemo as A, useLayoutEffect as K, useEffect as E } from "react";
-import { Button as x } from "../../../button.js";
-import { Icon as W } from "../../../icon.js";
-import { Popover as Q, PopoverTrigger as Y, PopoverContent as Z } from "../../../popover.js";
-import { ScrollArea as ee, ScrollBar as q } from "../../../scroll-area.js";
-import { Skeleton as L } from "../../../skeleton.js";
-import { Table as te, TableHeader as oe, TableRow as y, TableHead as ne, TableBody as re, TableCell as k } from "../../../table.js";
-function pe({
+import { cn as u } from "../../../../../lib/utils.js";
+import { flexRender as B } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useRef as Z, useState as E, useMemo as T, useLayoutEffect as ee, useEffect as L } from "react";
+import { Button as S } from "../../../button.js";
+import { Icon as z } from "../../../icon.js";
+import { Popover as te, PopoverTrigger as oe, PopoverContent as ne } from "../../../popover.js";
+import { ScrollArea as re, ScrollBar as q } from "../../../scroll-area.js";
+import { Skeleton as F } from "../../../skeleton.js";
+import { Table as se, TableHeader as le, TableRow as y, TableHead as ce, TableBody as ie, TableCell as R } from "../../../table.js";
+function xe({
   table: s,
-  tableContainerRef: c,
-  loading: p,
-  data: U,
-  emptyComponent: G,
-  notFoundMessage: F,
-  onAddFilter: M,
-  maxSortedColumns: D = 3,
-  i18n: h,
-  isServerSide: T = !1
+  tableContainerRef: d,
+  loading: v,
+  data: W,
+  emptyComponent: U,
+  notFoundMessage: M,
+  onAddFilter: V,
+  maxSortedColumns: h = 3,
+  i18n: w,
+  isServerSide: A = !1,
+  filterBadges: X = [],
+  advancedFilterBadge: D,
+  searchbarGlobalFilter: J
 }) {
-  const N = J({}), [V, X] = j({}), [C, H] = j(8), $ = s.getHeaderGroups()[0], I = $ ? $.headers : [], w = A(
-    () => I.filter((o) => o.column.getIsVisible()),
-    [I]
-  ), O = A(
-    () => w.filter((o) => o.column.columnDef.meta?.pinned === "left"),
-    [w]
-  ), B = A(
-    () => w.filter((o) => o.column.columnDef.meta?.pinned === "right"),
-    [w]
-  ), P = () => {
-    const o = c.current;
+  const K = (o) => {
+    if (X.some((l) => l.columnId === o)) return !0;
+    const t = (l) => l.some((c) => c.columnId === o), r = (l) => l ? l.some((c) => t(c.conditions) ? !0 : c.groups ? r(c.groups) : !1) : !1;
+    if (D?.rootGroup) {
+      if (t(D.rootGroup.conditions))
+        return !0;
+      if (D.rootGroup.groups)
+        return r(D.rootGroup.groups);
+    }
+    return !1;
+  }, I = Z({}), [Q, Y] = E({}), [H, $] = E(8), O = s.getHeaderGroups()[0], G = O ? O.headers : [], x = T(
+    () => G.filter((o) => o.column.getIsVisible()),
+    [G]
+  ), P = T(
+    () => x.filter((o) => o.column.columnDef.meta?.pinned === "left"),
+    [x]
+  ), _ = T(
+    () => x.filter((o) => o.column.columnDef.meta?.pinned === "right"),
+    [x]
+  ), j = () => {
+    const o = d.current;
     if (!o) return 8;
-    const e = o.querySelector("thead tr"), t = o.querySelector("tbody tr"), r = e?.getBoundingClientRect().height ?? 40, f = t?.getBoundingClientRect().height ?? 32.5, z = o.offsetHeight - r, u = Math.floor(z / f);
-    return u > 1 ? u : 8;
+    const e = o.querySelector("thead tr"), t = o.querySelector("tbody tr"), r = e?.getBoundingClientRect().height ?? 40, l = t?.getBoundingClientRect().height ?? 32.5, N = o.offsetHeight - r, a = Math.floor(N / l);
+    return a > 1 ? a : 8;
   }, b = (o = 0) => {
     const e = {};
     let t = !1;
-    if (!c.current) {
+    if (!d.current) {
       o < 5 && setTimeout(() => b(o + 1), 100);
       return;
     }
-    const r = c.current.querySelector(
+    const r = d.current.querySelector(
       "tbody tr:first-child"
     );
-    let f = 0;
-    for (const u of O) {
-      const m = u.column.id;
-      e[m] = { side: "left", offset: f };
-      let l = 0;
-      const d = r?.querySelector(
-        `[data-column-id="${m}"]`
-      ), a = N.current[m];
-      d && d.offsetWidth > 0 ? l = d.getBoundingClientRect().width : a && a.offsetWidth > 0 ? l = a.getBoundingClientRect().width : (t = !0, l = 150), f += l;
+    let l = 0;
+    for (const a of P) {
+      const f = a.column.id;
+      e[f] = { side: "left", offset: l };
+      let m = 0;
+      const g = r?.querySelector(
+        `[data-column-id="${f}"]`
+      ), p = I.current[f];
+      g && g.offsetWidth > 0 ? m = g.getBoundingClientRect().width : p && p.offsetWidth > 0 ? m = p.getBoundingClientRect().width : (t = !0, m = 150), l += m;
     }
-    let v = 0;
-    for (const u of [...B].reverse()) {
-      const m = u.column.id;
-      e[m] = { side: "right", offset: v };
-      let l = 0;
-      const d = r?.querySelector(
-        `[data-column-id="${m}"]`
-      ), a = N.current[m];
-      d && d.offsetWidth > 0 ? l = d.getBoundingClientRect().width : a && a.offsetWidth > 0 ? l = a.getBoundingClientRect().width : (t = !0, l = 150), v += l;
+    let c = 0;
+    for (const a of [..._].reverse()) {
+      const f = a.column.id;
+      e[f] = { side: "right", offset: c };
+      let m = 0;
+      const g = r?.querySelector(
+        `[data-column-id="${f}"]`
+      ), p = I.current[f];
+      g && g.offsetWidth > 0 ? m = g.getBoundingClientRect().width : p && p.offsetWidth > 0 ? m = p.getBoundingClientRect().width : (t = !0, m = 150), c += m;
     }
-    X(e);
-    const z = P();
-    H(z), t && o < 5 && setTimeout(
+    Y(e);
+    const N = j();
+    $(N), t && o < 5 && setTimeout(
       () => b(o + 1),
       100 * (o + 1)
     );
   };
-  K(() => {
+  ee(() => {
     (() => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
@@ -83,32 +96,32 @@ function pe({
       });
     })();
   }, [
-    O,
-    B,
-    w.map((o) => o.id).join("|"),
-    p,
-    U,
+    P,
+    _,
+    x.map((o) => o.id).join("|"),
+    v,
+    W,
     s.getState().pagination
-  ]), E(() => {
+  ]), L(() => {
     const o = () => {
       clearTimeout(o.timeout), o.timeout = setTimeout(() => b(), 100);
     };
     window.addEventListener("resize", o);
-    const e = c.current;
+    const e = d.current;
     let t = null;
     return e && typeof ResizeObserver < "u" && (t = new ResizeObserver(() => {
       b();
     }), t.observe(e)), () => {
       window.removeEventListener("resize", o), clearTimeout(o.timeout), t && t.disconnect();
     };
-  }, []), E(() => {
-    if (p) {
+  }, []), L(() => {
+    if (v) {
       const o = () => {
-        const r = P();
-        H(r);
+        const r = j();
+        $(r);
       };
       o();
-      const e = c.current;
+      const e = d.current;
       let t = null;
       return e && typeof ResizeObserver < "u" && (t = new ResizeObserver(() => {
         o();
@@ -116,15 +129,15 @@ function pe({
         t && t.disconnect();
       };
     }
-  }, [p, c]);
-  const S = (o, e, t) => {
-    const r = V[o];
+  }, [v, d]);
+  const k = (o, e, t) => {
+    const r = Q[o];
     if (!r || !e || r.side !== e) return;
-    const f = r.side === "left" ? `${r.offset}px` : void 0, v = r.side === "right" ? `${r.offset}px` : void 0;
+    const l = r.side === "left" ? `${r.offset}px` : void 0, c = r.side === "right" ? `${r.offset}px` : void 0;
     return {
       position: "sticky",
-      left: f,
-      right: v,
+      left: l,
+      right: c,
       zIndex: t ? 49 : 48,
       background: "var(--d-background)",
       // Use separate shadow for pinned columns to avoid conflicts
@@ -135,29 +148,29 @@ function pe({
     "div",
     {
       className: "flex max-h-full min-h-0 max-w-full min-w-0 flex-1",
-      ref: c,
-      children: /* @__PURE__ */ i(ee, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
+      ref: d,
+      children: /* @__PURE__ */ i(re, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
         /* @__PURE__ */ n(q, { orientation: "horizontal" }),
         /* @__PURE__ */ n(q, { orientation: "vertical" }),
-        /* @__PURE__ */ i(te, { className: "w-full", style: { minWidth: "max-content" }, children: [
-          /* @__PURE__ */ n(oe, { children: s.getHeaderGroups().map((o) => /* @__PURE__ */ n(y, { children: o.headers.map((e) => /* @__PURE__ */ n(
-            ne,
+        /* @__PURE__ */ i(se, { className: "w-full", style: { minWidth: "max-content" }, children: [
+          /* @__PURE__ */ n(le, { children: s.getHeaderGroups().map((o) => /* @__PURE__ */ n(y, { children: o.headers.map((e) => /* @__PURE__ */ n(
+            ce,
             {
               ref: (t) => {
-                N.current[e.column.id] = t;
+                I.current[e.column.id] = t;
               },
-              className: g(
+              className: u(
                 "bg-d-background sticky top-0 h-8 px-0",
                 e.column.columnDef.meta?.pinned ? "z-[49]" : "z-10"
               ),
-              style: S(
+              style: k(
                 e.column.id,
                 e.column.columnDef.meta?.pinned,
                 !0
               ),
-              children: e.isPlaceholder ? null : /* @__PURE__ */ i(Q, { children: [
+              children: e.isPlaceholder ? null : /* @__PURE__ */ i(te, { children: [
                 /* @__PURE__ */ n(
-                  Y,
+                  oe,
                   {
                     asChild: !0,
                     onClick: (t) => {
@@ -166,96 +179,134 @@ function pe({
                     children: /* @__PURE__ */ i(
                       "div",
                       {
-                        className: g(
+                        className: u(
                           "flex h-full items-center justify-between gap-2 px-2",
                           e.column.columnDef.meta?.sortable || e.column.columnDef.meta?.filterable ? "hover:bg-d-secondary-foreground/10 cursor-pointer" : "cursor-not-allowed"
                         ),
                         children: [
-                          _(
+                          B(
                             e.column.columnDef.header,
                             e.getContext()
                           ),
-                          e.column.getIsSorted() === "desc" && /* @__PURE__ */ n(
-                            x,
-                            {
-                              variant: "ghost",
-                              size: "icon",
-                              className: "size-7",
-                              iconLeft: e.column.columnDef.meta?.type === "number" ? "ArrowUp01" : e.column.columnDef.meta?.type === "string" ? "ArrowUpAz" : "ArrowUpNarrowWide",
-                              onClick: (t) => {
-                                e.column.toggleSorting(!1, !0), t.stopPropagation(), t.preventDefault();
+                          /* @__PURE__ */ i("div", { className: "flex flex-row items-center gap-1", children: [
+                            e.column.columnDef.meta?.searchable && /* @__PURE__ */ n(
+                              z,
+                              {
+                                name: "Search",
+                                className: u(
+                                  "text-d-foreground/30 max-h-3.5 max-w-3.5",
+                                  !!J && "text-d-primary"
+                                )
                               }
-                            }
-                          ),
-                          e.column.getIsSorted() === "asc" && /* @__PURE__ */ n(
-                            x,
-                            {
-                              variant: "ghost",
-                              size: "icon",
-                              className: "size-7",
-                              iconRight: e.column.columnDef.meta?.type === "number" ? "ArrowDown01" : e.column.columnDef.meta?.type === "string" ? "ArrowDownAz" : "ArrowDownNarrowWide",
-                              onClick: (t) => {
-                                e.column.toggleSorting(!0, !0), t.stopPropagation(), t.preventDefault();
+                            ),
+                            e.column.columnDef.meta?.filterable && /* @__PURE__ */ n(
+                              z,
+                              {
+                                name: "Filter",
+                                className: u(
+                                  "text-d-foreground/30 max-h-3.5 max-w-3.5",
+                                  K(e.column.id) && "text-d-primary"
+                                )
                               }
-                            }
-                          )
+                            ),
+                            e.column.columnDef.meta?.sortable && /* @__PURE__ */ i("div", { className: "flex flex-col py-1", children: [
+                              /* @__PURE__ */ n(
+                                S,
+                                {
+                                  iconLeft: "ChevronUp",
+                                  size: "icon",
+                                  className: u(
+                                    "hover:bg-d-foreground/10 max-h-4 max-w-6",
+                                    e.column.getIsSorted() === "asc" && "hover:text-d-destructive hover:bg-d-destructive/20"
+                                  ),
+                                  variant: e.column.getIsSorted() === "asc" ? "ghost-accent" : "ghost",
+                                  onClick: (t) => {
+                                    e.column.getIsSorted() === "asc" ? e.column.clearSorting() : e.column.toggleSorting(
+                                      !1,
+                                      !0
+                                    ), t.stopPropagation(), t.preventDefault();
+                                  },
+                                  disabled: s.getState().sorting.length >= h && !e.column.getIsSorted()
+                                }
+                              ),
+                              /* @__PURE__ */ n(
+                                S,
+                                {
+                                  iconLeft: "ChevronDown",
+                                  size: "icon",
+                                  className: u(
+                                    "hover:bg-d-foreground/10 max-h-4 max-w-6",
+                                    e.column.getIsSorted() === "desc" && "hover:text-d-destructive hover:bg-d-destructive/20"
+                                  ),
+                                  variant: e.column.getIsSorted() === "desc" ? "ghost-accent" : "ghost",
+                                  onClick: (t) => {
+                                    e.column.getIsSorted() === "desc" ? e.column.clearSorting() : e.column.toggleSorting(
+                                      !0,
+                                      !0
+                                    ), t.stopPropagation(), t.preventDefault();
+                                  },
+                                  disabled: s.getState().sorting.length >= h && !e.column.getIsSorted()
+                                }
+                              )
+                            ] })
+                          ] })
                         ]
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ n(Z, { className: "w-40 p-0", children: /* @__PURE__ */ i("div", { className: "flex flex-col text-sm", children: [
+                /* @__PURE__ */ n(ne, { className: "w-40 p-0", children: /* @__PURE__ */ i("div", { className: "flex flex-col text-sm", children: [
                   e.column.columnDef.meta?.sortable && /* @__PURE__ */ i(
                     "div",
                     {
-                      className: g(
+                      className: u(
                         "group hover:bg-d-secondary-foreground/5 relative flex cursor-pointer items-center justify-between rounded px-2 py-1.5",
                         e.column.getIsSorted() && "bg-d-secondary-foreground/5",
-                        s.getState().sorting.length >= D && !e.column.getIsSorted() && "pointer-events-none cursor-not-allowed opacity-60"
+                        s.getState().sorting.length >= h && !e.column.getIsSorted() && "pointer-events-none cursor-not-allowed opacity-60"
                       ),
-                      "aria-disabled": s.getState().sorting.length >= D && !e.column.getIsSorted(),
+                      "aria-disabled": s.getState().sorting.length >= h && !e.column.getIsSorted(),
                       children: [
-                        /* @__PURE__ */ n("span", { className: "text-md", children: h.sorting.sort }),
-                        /* @__PURE__ */ n(W, { name: "ChevronRight", size: "xs" }),
+                        /* @__PURE__ */ n("span", { className: "text-md", children: w.sorting.sort }),
+                        /* @__PURE__ */ n(z, { name: "ChevronRight", size: "xs" }),
                         /* @__PURE__ */ i("div", { className: "bg-d-background border-d-border absolute top-0 left-full ml-0 hidden w-48 flex-col rounded-md border p-1 shadow-md group-hover:flex", children: [
                           /* @__PURE__ */ n(
-                            x,
+                            S,
                             {
                               className: "justify-start",
                               variant: "ghost",
                               size: "sm",
                               iconLeft: e.column.columnDef.meta?.type === "number" ? "ArrowDown01" : e.column.columnDef.meta?.type === "string" ? "ArrowDownAz" : "ArrowDownNarrowWide",
                               onClick: () => {
-                                !e.column.getIsSorted() && s.getState().sorting.length >= D || e.column.toggleSorting(
+                                !e.column.getIsSorted() && s.getState().sorting.length >= h || e.column.toggleSorting(
                                   !1,
                                   !0
                                 );
                               },
-                              children: h.sorting.ascending
+                              children: w.sorting.ascending
                             }
                           ),
                           /* @__PURE__ */ n(
-                            x,
+                            S,
                             {
                               className: "justify-start",
                               variant: "ghost",
                               size: "sm",
                               iconLeft: e.column.columnDef.meta?.type === "number" ? "ArrowUp01" : e.column.columnDef.meta?.type === "string" ? "ArrowUpAz" : "ArrowUpNarrowWide",
                               onClick: () => {
-                                !e.column.getIsSorted() && s.getState().sorting.length >= D || e.column.toggleSorting(!0, !0);
+                                !e.column.getIsSorted() && s.getState().sorting.length >= h || e.column.toggleSorting(!0, !0);
                               },
-                              children: h.sorting.descending
+                              children: w.sorting.descending
                             }
                           ),
                           e.column.getIsSorted() && /* @__PURE__ */ n(
-                            x,
+                            S,
                             {
                               className: "text-d-destructive/80 hover:text-d-destructive justify-start",
                               variant: "ghost",
                               size: "sm",
                               iconLeft: "CircleX",
                               onClick: () => e.column.clearSorting(),
-                              children: h.sorting.clearSort
+                              children: w.sorting.clearSort
                             }
                           )
                         ] })
@@ -266,10 +317,10 @@ function pe({
                     "div",
                     {
                       className: "hover:bg-d-secondary-foreground/5 relative flex cursor-pointer items-center justify-between rounded px-2 py-1.5",
-                      onClick: () => M(e),
+                      onClick: () => V(e),
                       children: [
-                        /* @__PURE__ */ n("span", { className: "text-md", children: h.filters.filter }),
-                        /* @__PURE__ */ n(W, { name: "Filter", size: "xs" })
+                        /* @__PURE__ */ n("span", { className: "text-md", children: w.filters.filter }),
+                        /* @__PURE__ */ n(z, { name: "Filter", size: "xs" })
                       ]
                     }
                   )
@@ -278,61 +329,57 @@ function pe({
             },
             e.id
           )) }, o.id)) }),
-          /* @__PURE__ */ n(re, { children: p && T ? Array.from({ length: C }).map(
-            (o, e) => /* @__PURE__ */ n(y, { children: s.getHeaderGroups()[0].headers.map((t, r) => /* @__PURE__ */ n(
-              k,
-              {
-                "data-column-id": t.column.id,
-                className: g(
-                  "border-0",
-                  t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
-                ),
-                style: S(
-                  t.column.id,
-                  t.column.columnDef.meta?.pinned,
-                  !1
-                ),
-                children: /* @__PURE__ */ n(L, { className: "h-6 w-full" })
-              },
-              `skeleton-cell-${e}-${r}`
-            )) }, `skeleton-row-${e}`)
-          ) : p && !T ? Array.from({ length: C }).map(
-            (o, e) => /* @__PURE__ */ n(y, { children: s.getHeaderGroups()[0].headers.map((t, r) => /* @__PURE__ */ n(
-              k,
-              {
-                "data-column-id": t.column.id,
-                className: g(
-                  "border-0",
-                  t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
-                ),
-                style: S(
-                  t.column.id,
-                  t.column.columnDef.meta?.pinned,
-                  !1
-                ),
-                children: /* @__PURE__ */ n(L, { className: "h-6 w-full" })
-              },
-              `skeleton-cell-${e}-${r}`
-            )) }, `skeleton-row-${e}`)
-          ) : s.getRowModel().rows?.length ? s.getRowModel().rows.map((o) => /* @__PURE__ */ n(
+          /* @__PURE__ */ n(ie, { children: v && A ? Array.from({ length: H }).map((o, e) => /* @__PURE__ */ n(y, { children: s.getHeaderGroups()[0].headers.map((t, r) => /* @__PURE__ */ n(
+            R,
+            {
+              "data-column-id": t.column.id,
+              className: u(
+                "border-0",
+                t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
+              ),
+              style: k(
+                t.column.id,
+                t.column.columnDef.meta?.pinned,
+                !1
+              ),
+              children: /* @__PURE__ */ n(F, { className: "h-6 w-full" })
+            },
+            `skeleton-cell-${e}-${r}`
+          )) }, `skeleton-row-${e}`)) : v && !A ? Array.from({ length: H }).map((o, e) => /* @__PURE__ */ n(y, { children: s.getHeaderGroups()[0].headers.map((t, r) => /* @__PURE__ */ n(
+            R,
+            {
+              "data-column-id": t.column.id,
+              className: u(
+                "border-0",
+                t.column.columnDef.meta?.pinned && "bg-d-background z-[50]"
+              ),
+              style: k(
+                t.column.id,
+                t.column.columnDef.meta?.pinned,
+                !1
+              ),
+              children: /* @__PURE__ */ n(F, { className: "h-6 w-full" })
+            },
+            `skeleton-cell-${e}-${r}`
+          )) }, `skeleton-row-${e}`)) : s.getRowModel().rows?.length ? s.getRowModel().rows.map((o) => /* @__PURE__ */ n(
             y,
             {
               "data-state": o.getIsSelected() && "selected",
               className: "border-0 shadow-[inset_0_-1px_0_var(--d-border)]",
               children: o.getVisibleCells().map((e) => /* @__PURE__ */ n(
-                k,
+                R,
                 {
                   "data-column-id": e.column.id,
-                  className: g(
+                  className: u(
                     "border-0",
                     e.column.columnDef.meta?.pinned ? "bg-d-background z-[50]" : "shadow-[inset_-1px_0_0_var(--d-border)]"
                   ),
-                  style: S(
+                  style: k(
                     e.column.id,
                     e.column.columnDef.meta?.pinned,
                     !1
                   ),
-                  children: _(
+                  children: B(
                     e.column.columnDef.cell,
                     e.getContext()
                   )
@@ -342,11 +389,11 @@ function pe({
             },
             o.id
           )) : /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(
-            k,
+            R,
             {
               colSpan: s?.getHeaderGroups()?.[0]?.headers?.length ?? 1,
               className: "pt-4 text-center",
-              children: G || F
+              children: U || M
             }
           ) }) })
         ] })
@@ -355,5 +402,5 @@ function pe({
   );
 }
 export {
-  pe as DataTableBody
+  xe as DataTableBody
 };