laif-ds 0.2.75 → 0.2.77

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

@@ -1,111 +1,112 @@
 "use client";
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { flexRender as ee } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useRef as te, useState as E, useMemo as b, useCallback as F, useLayoutEffect as oe, useEffect as G } from "react";
-import { cn as ne } from "../../../../../lib/utils.js";
-import { ScrollArea as re, ScrollBar as L } from "../../../scroll-area.js";
-import { Table as se, TableBody as C, TableRow as P, TableCell as A } from "../../../table.js";
-import { getPinnedStyle as ie } from "../data-table.service.js";
-import { DataTableHeaderComponent as ce } from "./data-table-header.js";
-import { SkeletonRows as le } from "./data-table-skeleton-rows.js";
-function be({
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import { flexRender as oe } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useRef as ne, useState as G, useMemo as b, useCallback as F, useLayoutEffect as re, useEffect as B } from "react";
+import { cn as L } from "../../../../../lib/utils.js";
+import { ScrollArea as se, ScrollBar as P } from "../../../scroll-area.js";
+import { Table as ie, TableBody as A, TableRow as I, TableCell as M } from "../../../table.js";
+import { getPinnedStyle as ce } from "../data-table.service.js";
+import { DataTableHeaderComponent as le } from "./data-table-header.js";
+import { SkeletonRows as ue } from "./data-table-skeleton-rows.js";
+function Re({
   table: u,
-  tableContainerRef: s,
+  tableContainerRef: i,
   loading: d,
-  data: I,
-  emptyComponent: M,
-  notFoundMessage: W,
-  onAddFilter: j,
-  maxSortedColumns: V = 3,
-  i18n: $,
+  data: W,
+  emptyComponent: j,
+  notFoundMessage: V,
+  onAddFilter: $,
+  maxSortedColumns: U = 3,
+  i18n: J,
   isServerSide: p = !1,
-  filterBadges: U = [],
+  filterBadges: K = [],
   advancedFilterBadge: R,
-  searchbarGlobalFilter: J,
-  serverDebounceTime: N = 750
+  searchbarGlobalFilter: Q,
+  serverDebounceTime: D = 750,
+  rowClassName: x
 }) {
-  const K = (e) => {
-    if (U.some((n) => n.columnId === e)) return !0;
-    const o = (n) => n.some((c) => c.columnId === e), i = (n) => n ? n.some((c) => o(c.conditions) ? !0 : c.groups ? i(c.groups) : !1) : !1;
+  const X = (e) => {
+    if (K.some((r) => r.columnId === e)) return !0;
+    const o = (r) => r.some((c) => c.columnId === e), n = (r) => r ? r.some((c) => o(c.conditions) ? !0 : c.groups ? n(c.groups) : !1) : !1;
     if (R?.rootGroup) {
       if (o(R.rootGroup.conditions))
         return !0;
       if (R.rootGroup.groups)
-        return i(R.rootGroup.groups);
+        return n(R.rootGroup.groups);
     }
     return !1;
-  }, y = te({}), [z, Q] = E({}), [X, B] = E(8), [k, _] = E(!1), T = b(() => {
+  }, z = ne({}), [k, Y] = G({}), [Z, N] = G(8), [v, _] = G(!1), y = b(() => {
     let e;
     const t = (o) => {
       clearTimeout(e), e = setTimeout(
         () => _(o),
-        N
+        D
       );
     };
     return t.cancel = () => {
       clearTimeout(e);
     }, t;
-  }, [N]), q = b(() => {
+  }, [D]), q = b(() => {
     const e = u.getHeaderGroups()[0];
     return e ? e.headers : [];
   }, [u.getHeaderGroups]), g = b(
     () => q.filter((e) => e.column.getIsVisible()),
     [q]
-  ), v = b(
+  ), H = b(
     () => g.filter((e) => e.column.columnDef.meta?.pinned === "left"),
     [g]
-  ), H = b(
+  ), S = b(
     () => g.filter((e) => e.column.columnDef.meta?.pinned === "right"),
     [g]
-  ), Y = b(
+  ), ee = b(
     () => g.map((e) => e.id).join("|"),
     [g]
-  ), Z = u.getState().pagination, x = F(() => {
-    const e = s.current;
+  ), te = u.getState().pagination, T = F(() => {
+    const e = i.current;
     if (!e) return 8;
-    const t = e.querySelector("thead tr"), o = e.querySelector("tbody tr"), i = t?.getBoundingClientRect().height ?? 40, n = o?.getBoundingClientRect().height ?? 32.5, S = e.offsetHeight - i, w = Math.floor(S / n);
+    const t = e.querySelector("thead tr"), o = e.querySelector("tbody tr"), n = t?.getBoundingClientRect().height ?? 40, r = o?.getBoundingClientRect().height ?? 32.5, O = e.offsetHeight - n, w = Math.floor(O / r);
     return w > 1 ? w : 8;
-  }, [s]), a = F(
+  }, [i]), a = F(
     (e = 0) => {
       const t = {};
       let o = !1;
-      if (!s.current) {
+      if (!i.current) {
         e < 5 && setTimeout(() => a(e + 1), 100);
         return;
       }
-      const i = s.current.querySelector(
+      const n = i.current.querySelector(
         "tbody tr:first-child"
       );
-      let n = 0;
-      for (const w of v) {
+      let r = 0;
+      for (const w of H) {
         const f = w.column.id;
-        t[f] = { side: "left", offset: n };
+        t[f] = { side: "left", offset: r };
         let l = 0;
-        const m = i?.querySelector(
+        const m = n?.querySelector(
           `[data-column-id="${f}"]`
-        ), h = y.current[f];
-        m && m.offsetWidth > 0 ? l = m.getBoundingClientRect().width : h && h.offsetWidth > 0 ? l = h.getBoundingClientRect().width : (o = !0, l = 150), n += l;
+        ), h = z.current[f];
+        m && m.offsetWidth > 0 ? l = m.getBoundingClientRect().width : h && h.offsetWidth > 0 ? l = h.getBoundingClientRect().width : (o = !0, l = 150), r += l;
       }
       let c = 0;
-      for (const w of [...H].reverse()) {
+      for (const w of [...S].reverse()) {
         const f = w.column.id;
         t[f] = { side: "right", offset: c };
         let l = 0;
-        const m = i?.querySelector(
+        const m = n?.querySelector(
           `[data-column-id="${f}"]`
-        ), h = y.current[f];
+        ), h = z.current[f];
         m && m.offsetWidth > 0 ? l = m.getBoundingClientRect().width : h && h.offsetWidth > 0 ? l = h.getBoundingClientRect().width : (o = !0, l = 150), c += l;
       }
-      Q(t);
-      const S = x();
-      B(S), o && e < 5 && setTimeout(
+      Y(t);
+      const O = T();
+      N(O), o && e < 5 && setTimeout(
         () => a(e + 1),
         100 * (e + 1)
       );
     },
-    [x, v, H, s]
+    [T, H, S, i]
   );
-  return oe(() => {
+  return re(() => {
     (() => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
@@ -116,33 +117,33 @@ function be({
       });
     })();
   }, [
-    v,
     H,
-    Y,
+    S,
+    ee,
     d,
-    I,
-    Z,
+    W,
+    te,
     a
-  ]), G(() => {
+  ]), B(() => {
     const e = () => {
       clearTimeout(e.timeout), e.timeout = setTimeout(() => a(), 100);
     };
     window.addEventListener("resize", e);
-    const t = s.current;
+    const t = i.current;
     let o = null;
     return t && typeof ResizeObserver < "u" && (o = new ResizeObserver(() => {
       a();
     }), o.observe(t)), () => {
       window.removeEventListener("resize", e), clearTimeout(e.timeout), o && o.disconnect();
     };
-  }, [a, s]), G(() => {
+  }, [a, i]), B(() => {
     if (d) {
       const e = () => {
-        const i = x();
-        B(i);
+        const n = T();
+        N(n);
       };
       e();
-      const t = s.current;
+      const t = i.current;
       let o = null;
       return t && typeof ResizeObserver < "u" && (o = new ResizeObserver(() => {
         e();
@@ -150,84 +151,91 @@ function be({
         o && o.disconnect();
       };
     }
-  }, [x, d, s]), G(() => (d ? (_(!0), T.cancel()) : T(!1), () => {
-    T.cancel();
-  }), [d, T]), /* @__PURE__ */ r(
+  }, [T, d, i]), B(() => (d ? (_(!0), y.cancel()) : y(!1), () => {
+    y.cancel();
+  }), [d, y]), /* @__PURE__ */ s(
     "div",
     {
       className: "flex max-h-full min-h-0 max-w-full min-w-0 flex-1",
-      ref: s,
-      children: /* @__PURE__ */ D(re, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
-        /* @__PURE__ */ r(L, { orientation: "horizontal", className: "z-[100]" }),
-        /* @__PURE__ */ r(L, { orientation: "vertical" }),
-        /* @__PURE__ */ D(se, { className: "w-full min-w-max", children: [
-          /* @__PURE__ */ r(
-            ce,
+      ref: i,
+      children: /* @__PURE__ */ C(se, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
+        /* @__PURE__ */ s(P, { orientation: "horizontal", className: "z-[100]" }),
+        /* @__PURE__ */ s(P, { orientation: "vertical" }),
+        /* @__PURE__ */ C(ie, { className: "w-full min-w-max", children: [
+          /* @__PURE__ */ s(
+            le,
             {
               table: u,
-              headerRefs: y,
-              pinnedOffsets: z,
-              maxSortedColumns: V,
-              i18n: $,
-              searchbarGlobalFilter: J,
-              isColumnFiltered: K,
-              onAddFilter: j
+              headerRefs: z,
+              pinnedOffsets: k,
+              maxSortedColumns: U,
+              i18n: J,
+              searchbarGlobalFilter: Q,
+              isColumnFiltered: X,
+              onAddFilter: $
             }
           ),
-          /* @__PURE__ */ r(
-            C,
+          /* @__PURE__ */ s(
+            A,
             {
               "data-table-body": "skeleton",
-              className: p && k || !p && d ? "" : "absolute -z-100 h-0 min-h-0 overflow-hidden opacity-0",
-              children: (p && k || !p && d) && /* @__PURE__ */ r(
-                le,
+              className: p && v || !p && d ? "" : "absolute -z-100 h-0 min-h-0 overflow-hidden opacity-0",
+              children: (p && v || !p && d) && /* @__PURE__ */ s(
+                ue,
                 {
-                  skeletonRowCount: X,
-                  pinnedOffsets: z,
+                  skeletonRowCount: Z,
+                  pinnedOffsets: k,
                   table: u
                 }
               )
             }
           ),
-          /* @__PURE__ */ r(
-            C,
+          /* @__PURE__ */ s(
+            A,
             {
               "data-table-body": "data",
-              className: p && k || !p && d ? "absolute -z-100 h-0 min-h-0 overflow-hidden opacity-0" : "",
-              children: u.getRowModel().rows?.length ? u.getRowModel().rows.map((e) => /* @__PURE__ */ r(
-                P,
+              className: p && v || !p && d ? "absolute -z-100 h-0 min-h-0 overflow-hidden opacity-0" : "",
+              children: u.getRowModel().rows?.length ? u.getRowModel().rows.map((e) => /* @__PURE__ */ s(
+                I,
                 {
                   "data-state": e.getIsSelected() && "selected",
-                  className: "border-0 shadow-[inset_0_-1px_0_var(--d-border)]",
-                  children: e.getVisibleCells().map((t) => /* @__PURE__ */ r(
-                    A,
-                    {
-                      "data-column-id": t.column.id,
-                      className: ne(
-                        "border-0",
-                        t.column.columnDef.meta?.pinned ? "bg-d-background z-[50]" : "shadow-[inset_-1px_0_0_var(--d-border)]"
-                      ),
-                      style: ie(
-                        t.column.id,
-                        z,
-                        t.column.columnDef.meta?.pinned,
-                        !1
-                      ),
-                      children: ee(
-                        t.column.columnDef.cell,
-                        t.getContext()
-                      )
-                    },
-                    t.id
-                  ))
+                  className: L(
+                    "border-0 shadow-[inset_0_-1px_0_var(--d-border)]",
+                    typeof x == "function" ? x(e) : x
+                  ),
+                  children: e.getVisibleCells().map((t) => {
+                    const o = t.column.columnDef.meta?.cellClassName, n = typeof o == "function" ? o(t.getValue(), e.original) : o;
+                    return /* @__PURE__ */ s(
+                      M,
+                      {
+                        "data-column-id": t.column.id,
+                        className: L(
+                          "border-0",
+                          t.column.columnDef.meta?.pinned ? "bg-d-background z-[50]" : "shadow-[inset_-1px_0_0_var(--d-border)]",
+                          n
+                        ),
+                        style: ce(
+                          t.column.id,
+                          k,
+                          t.column.columnDef.meta?.pinned,
+                          !1
+                        ),
+                        children: oe(
+                          t.column.columnDef.cell,
+                          t.getContext()
+                        )
+                      },
+                      t.id
+                    );
+                  })
                 },
                 e.id
-              )) : /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
-                A,
+              )) : /* @__PURE__ */ s(I, { children: /* @__PURE__ */ s(
+                M,
                 {
                   colSpan: u?.getHeaderGroups()?.[0]?.headers?.length ?? 1,
                   className: "pt-4 text-center",
-                  children: M || W
+                  children: j || V
                 }
               ) })
             }
@@ -238,5 +246,5 @@ function be({
   );
 }
 export {
-  be as DataTableBody
+  Re as DataTableBody
 };

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

@@ -6,8 +6,8 @@ import { cn as l } from "../../../../../lib/utils.js";
 import { Button as i } from "../../../button.js";
 import { Icon as m } from "../../../icon.js";
 import { Popover as D, PopoverTrigger as y, PopoverContent as N } from "../../../popover.js";
-import { TableHeader as I, TableRow as h, TableHead as z } from "../../../table.js";
-import { getPinnedStyle as C } from "../data-table.service.js";
+import { TableHeader as I, TableRow as h, TableHead as C } from "../../../table.js";
+import { getPinnedStyle as z } from "../data-table.service.js";
 function F({
   table: r,
   headerRefs: g,
@@ -20,16 +20,17 @@ function F({
 }) {
   const [x, u] = S.useState({});
   return /* @__PURE__ */ t(I, { children: r.getHeaderGroups().map((a) => /* @__PURE__ */ t(h, { children: a.headers.map((e) => /* @__PURE__ */ t(
-    z,
+    C,
     {
       ref: (o) => {
         g.current[e.column.id] = o;
       },
       className: l(
         "bg-d-background sticky top-0 h-8 px-0",
-        e.column.columnDef.meta?.pinned ? "z-[49]" : "z-10"
+        e.column.columnDef.meta?.pinned ? "z-[49]" : "z-10",
+        e.column.columnDef.meta?.headerClassName
       ),
-      style: C(
+      style: z(
         e.column.id,
         d,
         e.column.columnDef.meta?.pinned,