laif-ds 0.2.75 → 0.2.76

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

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as d, jsxs as se } from "react/jsx-runtime";
-import { useReactTable as lt } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useReactTable as ct } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { useRef as f, useState as l, useEffect as O, useMemo as C } from "react";
-import { cn as ct } from "../../../../lib/utils.js";
-import { Button as dt } from "../../button.js";
+import { cn as dt } from "../../../../lib/utils.js";
+import { Button as ut } from "../../button.js";
 import { Checkbox as Ie } from "../../checkbox.js";
-import { DataTableActionsComponent as ut } from "./components/data-table-actions.js";
-import { DataTableBody as gt } from "./components/data-table-body.js";
-import { DataTableColumnVisibility as mt } from "./components/data-table-column-visibility.js";
-import { DataTableFilters as pt } from "./components/data-table-filters.js";
-import { DataTablePaginationComponent as ft } from "./components/data-table-pagination.js";
-import { DataTableSearchbar as ht } from "./components/data-table-searchbar.js";
-import { DataTableSortingComponent as St } from "./components/data-table-sorting.js";
-import { applySearchFilterToRow as Te, debounce as bt, buildSearchFilter as Ft, updatePageSizeFromContainer as vt, createDefaultAdvancedFilter as Ct, createBadgeFilterFromHeader as xt } from "./data-table.service.js";
-import { defaultDataTableI18n as yt } from "./data-table-i18n.js";
-import { getPaginationRowModel as wt, getFilteredRowModel as Rt, getSortedRowModel as It, getCoreRowModel as Tt } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
-function Et({
+import { DataTableActionsComponent as gt } from "./components/data-table-actions.js";
+import { DataTableBody as mt } from "./components/data-table-body.js";
+import { DataTableColumnVisibility as pt } from "./components/data-table-column-visibility.js";
+import { DataTableFilters as ft } from "./components/data-table-filters.js";
+import { DataTablePaginationComponent as ht } from "./components/data-table-pagination.js";
+import { DataTableSearchbar as St } from "./components/data-table-searchbar.js";
+import { DataTableSortingComponent as bt } from "./components/data-table-sorting.js";
+import { applySearchFilterToRow as Te, debounce as Ft, buildSearchFilter as vt, updatePageSizeFromContainer as Ct, createDefaultAdvancedFilter as xt, createBadgeFilterFromHeader as yt } from "./data-table.service.js";
+import { defaultDataTableI18n as wt } from "./data-table-i18n.js";
+import { getPaginationRowModel as Rt, getFilteredRowModel as It, getSortedRowModel as Tt, getCoreRowModel as zt } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+function Wt({
   columns: Z,
   data: V,
   loading: z = !1,
@@ -30,7 +30,7 @@ function Et({
   customComponentsRight: Oe,
   hidePagination: He = !1,
   hideActionsRow: Ne = !1,
-  i18n: h = yt,
+  i18n: h = wt,
   maxSortedColumns: ce = 2,
   initialState: u,
   // New mode-based API
@@ -39,12 +39,13 @@ function Et({
   disableAutoPageSize: b = !1,
   // Test & Accessibility
   id: Ge,
-  "data-testid": Pe
+  "data-testid": Pe,
+  rowClassName: ke
 }) {
   const q = f(null), i = Le === !0, g = i ? de : void 0, ue = (e) => !e || !e.sort_by || !e.sort_order ? [] : e.sort_by.map((t, n) => ({
     id: t,
     desc: e.sort_order[n] === "desc"
-  })), ke = (e) => {
+  })), Ae = (e) => {
     const t = ue(e?.sorting), n = {
       sort_by: t.map((a) => a.id),
       sort_order: t.map((a) => a.desc ? "desc" : "asc")
@@ -54,13 +55,13 @@ function Et({
       computedFilter: e?.computedFilter
       // Use provided value or undefined
     };
-  }, [H, Ae] = l(() => ue(u?.sorting)), [Ve] = l([]), [je, qe] = l(
+  }, [H, Ve] = l(() => ue(u?.sorting)), [je] = l([]), [qe, Ke] = l(
     () => u?.columnVisibility ?? {}
-  ), [m, Ke] = l(() => u?.filters?.searchbarFilter), [K, N] = l(() => u?.pagination ?? { pageIndex: 0, pageSize: 10 }), ge = f(g);
+  ), [m, Ee] = l(() => u?.filters?.searchbarFilter), [K, N] = l(() => u?.pagination ?? { pageIndex: 0, pageSize: 10 }), ge = f(g);
   ge.current = g;
   const E = f(g?.onStateChange);
   E.current = g?.onStateChange;
-  const W = f(null), D = f(null), Ee = f(0), me = f(!1), pe = f(null), J = f({}), fe = f(null), U = f(z);
+  const W = f(null), D = f(null), We = f(0), me = f(!1), pe = f(null), J = f({}), fe = f(null), U = f(z);
   U.current = z;
   const L = (e) => {
     e.computedFilter && (J.current.computedFilter = e.computedFilter), e.computedSorting && (J.current.computedSorting = e.computedSorting);
@@ -71,7 +72,7 @@ function Et({
       computedSorting: e.computedSorting || J.current.computedSorting
     };
     W.current = t, D.current && clearTimeout(D.current), D.current = setTimeout(() => {
-      W.current && E.current && (Ee.current = Date.now(), E.current(W.current), W.current = null, D.current = null);
+      W.current && E.current && (We.current = Date.now(), E.current(W.current), W.current = null, D.current = null);
     }, 400);
   };
   O(() => {
@@ -83,7 +84,7 @@ function Et({
     };
   }, []);
   const [r, G] = l(() => {
-    const { computedSorting: e, computedFilter: t } = ke(u);
+    const { computedSorting: e, computedFilter: t } = Ae(u);
     return {
       pagination: u?.pagination ?? { pageIndex: 0, pageSize: 10 },
       sorting: u?.sorting,
@@ -93,9 +94,9 @@ function Et({
     };
   });
   i && !g && console.warn("DataTable: Server mode requires serverConfig");
-  const [We, he] = l(0), [Je, Se] = l(0), [Ue, Xe] = l({}), be = le ? Be : Ue, Qe = le || Xe, [F, ee] = l(
+  const [Je, he] = l(0), [Ue, Se] = l(0), [Xe, Qe] = l({}), be = le ? Be : Xe, Ye = le || Qe, [F, ee] = l(
     () => u?.filters?.filterBadges ?? []
-  ), [x, te] = l(() => u?.filters?.advancedFilterBadge), [X, Ye] = l(""), [Ze, re] = l(void 0), [Fe, ve] = l([]), Ce = C(() => j ? [
+  ), [x, te] = l(() => u?.filters?.advancedFilterBadge), [X, Ze] = l(""), [$e, re] = l(void 0), [Fe, ve] = l([]), Ce = C(() => j ? [
     {
       id: "data-table-integrated-checkbox-column",
       size: 24,
@@ -152,7 +153,7 @@ function Et({
     if (e.id) return e.id;
     if ("accessorKey" in e && typeof e.accessorKey == "string")
       return e.accessorKey;
-  }, $e = (e) => {
+  }, et = (e) => {
     const t = e.meta?.headerLabel;
     return t || (typeof e.header == "string" ? e.header : Q(e) ?? "-");
   };
@@ -160,23 +161,23 @@ function Et({
     const e = (I ?? []).map(Q).filter((c) => !!c), t = new Set(Fe), n = new Set(e);
     t.size === n.size && [...t].every((c) => n.has(c)) || ve(e);
   }, [I]);
-  const B = C(() => I.filter((e) => !!e.meta?.searchable), [I]), T = C(() => B.map((e) => "accessorKey" in e && typeof e.accessorKey == "string" ? e.accessorKey : e.id).filter((e) => !!e), [B]), [Y, et] = l(() => u?.computedFilter ?? {}), tt = {
+  const B = C(() => I.filter((e) => !!e.meta?.searchable), [I]), T = C(() => B.map((e) => "accessorKey" in e && typeof e.accessorKey == "string" ? e.accessorKey : e.id).filter((e) => !!e), [B]), [Y, tt] = l(() => u?.computedFilter ?? {}), rt = {
     data: C(() => i || Object.keys(Y).length === 0 ? V : V.filter((e) => Te({
       original: e,
       getValue: (n) => e[n]
     }, Y)), [V, Y, i]),
     columns: I,
-    getCoreRowModel: Tt(),
+    getCoreRowModel: zt(),
     onSortingChange: (e) => {
       const t = typeof e == "function" ? e(H) : e;
-      Ae(t);
+      Ve(t);
     },
-    getSortedRowModel: It(),
+    getSortedRowModel: Tt(),
     manualSorting: i,
-    onColumnVisibilityChange: qe,
-    onRowSelectionChange: Qe,
+    onColumnVisibilityChange: Ke,
+    onRowSelectionChange: Ye,
     onColumnOrderChange: ve,
-    getFilteredRowModel: Rt(),
+    getFilteredRowModel: It(),
     manualFiltering: i,
     globalFilterFn: (e, t, n) => i || !n ? !0 : (T ?? []).some((a) => {
       const c = e.getValue(a);
@@ -214,13 +215,13 @@ function Et({
           } : e
         );
     },
-    getPaginationRowModel: wt(),
+    getPaginationRowModel: Rt(),
     manualPagination: i,
-    pageCount: i && z ? Je : We,
+    pageCount: i && z ? Ue : Je,
     state: {
       sorting: H,
-      columnFilters: Ve,
-      columnVisibility: je,
+      columnFilters: je,
+      columnVisibility: qe,
       rowSelection: be,
       globalFilter: m,
       pagination: i ? r.pagination : K,
@@ -228,7 +229,7 @@ function Et({
     },
     // Prevent implicit resets on data/columns changes so filters/sorting persist
     autoResetPageIndex: !1
-  }, s = lt(tt), ne = s.getFilteredRowModel();
+  }, s = ct(rt), ne = s.getFilteredRowModel();
   O(() => {
     if (i && g) {
       const e = Math.ceil(
@@ -261,7 +262,7 @@ function Et({
       ), w = _?.getBoundingClientRect().height ?? 40;
       if (!!!o?.querySelector("td")) return;
       const k = o?.getBoundingClientRect().height ?? 32.5;
-      vt(y, {
+      Ct(y, {
         rowHeight: k,
         headerHeight: w,
         onPageChange: i ? (R, v) => {
@@ -320,7 +321,7 @@ function Et({
             );
         }
       });
-    }, t = bt(() => {
+    }, t = Ft(() => {
       requestAnimationFrame(() => {
         e();
       });
@@ -353,26 +354,26 @@ function Et({
       $(e);
     }
   }, [s, $, j, be]);
-  const xe = s.getState().sorting, rt = C(() => {
+  const xe = s.getState().sorting, nt = C(() => {
     const e = s.getHeaderGroups()[0], t = e ? e.headers : [];
     return (xe || []).map((c) => t.find((p) => p.column.id === c.id)).filter(Boolean);
-  }, [s.getHeaderGroups, xe, I]), oe = C(() => s.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.sortable), [s.getHeaderGroups, I]), P = C(() => s.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.filterable), [s.getHeaderGroups, I]), nt = C(() => X ? P.filter((e) => (e.column.columnDef.meta?.headerLabel ?? (typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : void 0) ?? e.column.id).toLowerCase().includes(X.toLowerCase())) : P, [P, X]), ye = (e) => {
+  }, [s.getHeaderGroups, xe, I]), oe = C(() => s.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.sortable), [s.getHeaderGroups, I]), P = C(() => s.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.filterable), [s.getHeaderGroups, I]), ot = C(() => X ? P.filter((e) => (e.column.columnDef.meta?.headerLabel ?? (typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : void 0) ?? e.column.id).toLowerCase().includes(X.toLowerCase())) : P, [P, X]), ye = (e) => {
     const t = F.find(
       (a) => a.columnId === (e?.id ?? "")
     );
     if (t)
       return re(t.id), t.id;
-    const n = xt(e);
+    const n = yt(e);
     return ee((a) => [...a, n]), re(n.id), n.id;
-  }, ot = () => {
-    te(Ct());
-  }, it = C(() => F.sort((e, t) => e.value === void 0 || e.value === "" ? 1 : t.value === void 0 || t.value === "" ? -1 : 1), [F]), we = f({
+  }, it = () => {
+    te(xt());
+  }, at = C(() => F.sort((e, t) => e.value === void 0 || e.value === "" ? 1 : t.value === void 0 || t.value === "" ? -1 : 1), [F]), we = f({
     filterBadges: [],
     advancedFilterBadge: void 0,
     searchbarGlobalFilter: void 0
   });
   O(() => {
-    const e = Ft(
+    const e = vt(
       F,
       x ?? void 0
     ), t = m && T.length > 0 ? T.length === 1 ? (() => {
@@ -420,7 +421,7 @@ function Et({
       searchbarGlobalFilter: m
     };
     const _ = ge.current;
-    if (et(a), i && E.current && _) {
+    if (tt(a), i && E.current && _) {
       const o = {
         ...r,
         computedFilter: a,
@@ -459,13 +460,13 @@ function Et({
     H,
     i
   ]);
-  const Re = s.getAllLeafColumns(), at = Re.filter((e) => e.getIsVisible()), st = Re.filter((e) => !e.getIsVisible());
+  const Re = s.getAllLeafColumns(), st = Re.filter((e) => e.getIsVisible()), lt = Re.filter((e) => !e.getIsVisible());
   return /* @__PURE__ */ se(
     "div",
     {
       id: Ge,
       "data-testid": Pe,
-      className: ct(
+      className: dt(
         "flex h-full max-h-full min-h-[250px] w-full max-w-full min-w-0 flex-col gap-2",
         De
       ),
@@ -473,10 +474,10 @@ function Et({
         !Ne && /* @__PURE__ */ se("div", { className: "flex w-full items-center justify-between gap-1", children: [
           /* @__PURE__ */ se("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: [
             oe.length > 0 && /* @__PURE__ */ d(
-              St,
+              bt,
               {
                 table: s,
-                sortedColumns: rt,
+                sortedColumns: nt,
                 sortableColumns: oe,
                 i18n: h,
                 maxSortedColumns: ce
@@ -485,19 +486,19 @@ function Et({
             oe.length > 0 && P.length > 0 && /* @__PURE__ */ d("div", { className: "border-d-border h-4 min-h-4 w-[1px] border-r" }),
             Me,
             /* @__PURE__ */ d(
-              pt,
+              ft,
               {
                 advancedFilterBadge: x,
                 setAdvancedFilterBadge: te,
                 filterableColumns: P,
-                sortedFilterBadges: it,
+                sortedFilterBadges: at,
                 setFilterBadges: ee,
                 filterSearch: X,
-                setFilterSearch: Ye,
-                filteredColumns: nt,
+                setFilterSearch: Ze,
+                filteredColumns: ot,
                 handleAddFilter: ye,
-                handleAddAdvancedFilter: ot,
-                pendingOpenFilterId: Ze,
+                handleAddAdvancedFilter: it,
+                pendingOpenFilterId: $e,
                 onPendingOpenFilterHandled: () => re(void 0),
                 i18n: h
               }
@@ -506,7 +507,7 @@ function Et({
           /* @__PURE__ */ d("div", { className: "border-d-border h-4 min-h-4 w-[1px] border-r" }),
           Oe,
           (F.length || x) && /* @__PURE__ */ d(
-            dt,
+            ut,
             {
               className: "h-6 text-xs",
               iconLeft: "FunnelX",
@@ -519,30 +520,30 @@ function Et({
             }
           ),
           T.length > 0 && /* @__PURE__ */ d(
-            ht,
+            St,
             {
               debounceMs: 300,
-              onSearch: Ke,
+              onSearch: Ee,
               i18n: h,
               initialValue: m ?? "",
               searchableColumnsHeaders: B.map(
-                (e) => $e(e)
+                (e) => et(e)
               )
             }
           ),
           /* @__PURE__ */ d(
-            mt,
+            pt,
             {
               table: s,
-              visibleColumns: at,
-              hiddenColumns: st,
+              visibleColumns: st,
+              hiddenColumns: lt,
               i18n: h
             }
           ),
-          /* @__PURE__ */ d(ut, { actions: _e, i18n: h })
+          /* @__PURE__ */ d(gt, { actions: _e, i18n: h })
         ] }),
         /* @__PURE__ */ d(
-          gt,
+          mt,
           {
             table: s,
             tableContainerRef: q,
@@ -557,11 +558,12 @@ function Et({
             filterBadges: F,
             advancedFilterBadge: x,
             searchbarGlobalFilter: m,
-            serverDebounceTime: de?.serverDebounceTime
+            serverDebounceTime: de?.serverDebounceTime,
+            rowClassName: ke
           }
         ),
         !He && /* @__PURE__ */ d(
-          ft,
+          ht,
           {
             table: s,
             isServerSide: i,
@@ -579,5 +581,5 @@ function Et({
   );
 }
 export {
-  Et as DataTable
+  Wt as DataTable
 };

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

@@ -19,14 +19,16 @@ function s(e, t) {
       sortable: e.sortable ?? !1,
       filterable: e.filterable ?? !1,
       searchable: e.searchable ?? !1,
-      pinned: e.pinned
+      pinned: e.pinned,
+      cellClassName: e.cellClassName,
+      headerClassName: e.headerClassName
     }
   };
 }
-function y(e) {
+function h(e) {
   return s(e, "string");
 }
-function h(e) {
+function y(e) {
   return s(e, "number");
 }
 function _(e) {
@@ -39,7 +41,10 @@ function q(e) {
   return s(e, "datetime");
 }
 function F(e) {
-  const t = Array.isArray(e.options) ? typeof e.options[0] == "string" ? e.options.map((a) => ({ value: a, label: a })) : e.options : [], r = s(e, "list_single_select");
+  const t = Array.isArray(e.options) ? typeof e.options[0] == "string" ? e.options.map((a) => ({ value: a, label: a })) : e.options : [], r = s(
+    e,
+    "list_single_select"
+  );
   return {
     ...r,
     meta: {
@@ -50,7 +55,10 @@ function F(e) {
   };
 }
 function K(e) {
-  const t = Array.isArray(e.options) ? typeof e.options[0] == "string" ? e.options.map((a) => ({ value: a, label: a })) : e.options : [], r = s(e, "list_multi_select");
+  const t = Array.isArray(e.options) ? typeof e.options[0] == "string" ? e.options.map((a) => ({ value: a, label: a })) : e.options : [], r = s(
+    e,
+    "list_multi_select"
+  );
   return {
     ...r,
     meta: {
@@ -175,7 +183,7 @@ function D(e, t, r, a, l) {
     value: l
   });
 }
-function V(e, t, r, a, l, n, i) {
+function N(e, t, r, a, l, n, i) {
   return u({
     columnId: e,
     columnAccessorKey: t,
@@ -192,7 +200,7 @@ function p(e) {
     sort_order: e.map((t) => t.order)
   };
 }
-function f(e) {
+function V(e) {
   return {
     ...e.filters && {
       filters: {
@@ -250,10 +258,10 @@ function M(e, t) {
     } : r;
   });
 }
-function w(e) {
+function f(e) {
   return e.map((t) => t.accessorKey || t.id).filter(Boolean);
 }
-function N(e, t) {
+function w(e, t) {
   return {
     string: [
       "like",
@@ -296,17 +304,17 @@ export {
   v as createDisplayColumn,
   u as createFilterBadge,
   O as createFilterBadges,
-  f as createInitialState,
-  V as createListFilter,
+  V as createInitialState,
+  N as createListFilter,
   K as createMultiSelectColumn,
-  h as createNumberColumn,
+  y as createNumberColumn,
   I as createNumberFilter,
   F as createSingleSelectColumn,
   p as createSorting,
-  y as createStringColumn,
+  h as createStringColumn,
   T as createStringFilter,
-  w as getColumnIds,
-  N as isValidOperatorForType,
+  f as getColumnIds,
+  w as isValidOperatorForType,
   M as pinColumns,
   b as toSelectOptions,
   k as toSelectOptionsFromObjects,

package/dist/components/ui/truncated-cell.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { useState as h, useRef as b, useCallback as j, useEffect as N } from "react";
+import { cn as c } from "../../lib/utils.js";
+import { Icon as B } from "./icon.js";
+import { Popover as L, PopoverTrigger as W, PopoverContent as K } from "./popover.js";
+import { Typo as T } from "./typo.js";
+function H({
+  children: o,
+  text: a,
+  title: w,
+  popoverContent: f,
+  className: k = "",
+  wrapperClassName: x = "",
+  popoverClassName: z = "",
+  showButton: O = !0,
+  emptyFallback: R = "-"
+}) {
+  const [p, C] = h(!1), [l, m] = h(!1), [P, E] = h(""), i = b(null), s = b(null), d = o !== void 0, t = a || P || (typeof o == "string" ? o : ""), D = d || typeof a == "string" && a.trim().length > 0, r = d || !!a || !!f || p, u = j(() => {
+    if (i.current) {
+      const { scrollWidth: n, clientWidth: I } = i.current, g = i.current.textContent?.trim() ?? "";
+      E(
+        (y) => y === g ? y : g
+      ), C(n > I);
+    }
+  }, []);
+  return N(() => {
+    u(), i.current && typeof ResizeObserver < "u" && (s.current = new ResizeObserver(u), s.current.observe(i.current));
+    const n = () => u();
+    return window.addEventListener("resize", n), () => {
+      s.current && (s.current.disconnect(), s.current = null), window.removeEventListener("resize", n);
+    };
+  }, [t, u]), N(() => {
+    !r && l && m(!1);
+  }, [r, l]), !D && !t ? /* @__PURE__ */ e("div", { className: c(x, "text-muted-foreground"), children: R }) : /* @__PURE__ */ v(L, { open: l, onOpenChange: m, children: [
+    /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ v(
+      "button",
+      {
+        type: "button",
+        className: c(
+          "group flex max-w-60 min-w-0 items-center gap-2 text-left",
+          r && "cursor-pointer",
+          x
+        ),
+        disabled: !r,
+        "aria-label": r && t ? `Click to view full content: ${t}` : t || void 0,
+        onKeyDown: (n) => {
+          (n.key === "Enter" || n.key === " ") && r && (n.preventDefault(), m(!l));
+        },
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1", children: /* @__PURE__ */ e(
+            "div",
+            {
+              ref: i,
+              className: c(
+                "truncate whitespace-nowrap",
+                r && "group-hover:underline",
+                k
+              ),
+              title: p ? t : void 0,
+              children: d ? o : t
+            }
+          ) }),
+          p && O && /* @__PURE__ */ e(
+            "span",
+            {
+              className: c(
+                "text-d-muted-foreground flex shrink-0 items-center opacity-50 transition-opacity group-hover:opacity-100"
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(B, { name: "Eye", size: "sm" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ v(
+      K,
+      {
+        side: "top",
+        align: "start",
+        className: c("w-96", z),
+        children: [
+          w && /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(T, { variant: "caption", className: "w-full font-bold", children: w }) }),
+          /* @__PURE__ */ e("div", { className: "w-full", children: f || (d && !t ? /* @__PURE__ */ e("div", { className: "w-full min-w-0", children: o }) : /* @__PURE__ */ e(
+            T,
+            {
+              variant: "caption",
+              className: "w-full break-words whitespace-pre-wrap",
+              children: t
+            }
+          )) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  H as TruncatedCell
+};

package/dist/index.d.ts

@@ -65,7 +65,7 @@ import { UseEmblaCarouselType } from 'embla-carousel-react';
 import { UseFormReturn } from 'react-hook-form';
 import { VariantProps } from 'class-variance-authority';
 
-declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "txt" | "csv" | "jpg" | "jpeg" | "png" | "gif" | "image" | "video" | "audio";
+declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "txt" | "csv" | "jpg" | "jpeg" | "png" | "gif" | "image" | "video" | "audio" | "zip" | "rar" | "7z" | "tar" | "gz" | "tgz";
 
 /**
  * Distributive helper: for a given key K, creates a config where cell gets the resolved value type.
@@ -74,6 +74,7 @@ declare type AcceptItem = "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "ppt
 declare type AccessorColumnConfigForKey<TData, K extends string> = BaseColumnFields & {
     accessorKey: K;
     cell?: (value: DeepValue<TData, K>, row: TData, tableRow: Row<TData>) => React.ReactNode;
+    cellClassName?: string | ((value: DeepValue<TData, K>, row: TData) => string);
 };
 
 export declare function Accordion({ ...props }: AccordionProps): JSX.Element;
@@ -605,6 +606,7 @@ declare type BaseColumnFields = {
     filterable?: boolean;
     searchable?: boolean;
     pinned?: "left" | "right";
+    headerClassName?: string;
 } & HeaderConfig;
 
 declare type BaseProps = {
@@ -1407,7 +1409,7 @@ export declare enum DataRepeatTypes {
     MONTH = "MONTH"
 }
 
-export declare function DataTable<TData, TValue>({ columns, data, loading, emptyComponent, className, rowSelection, onRowSelectionChange, checkable, onCheckedRowsChange, actions, customComponentsLeft, customComponentsRight, hidePagination, hideActionsRow, i18n, maxSortedColumns, initialState, serverMode, serverConfig, disableAutoPageSize, id, "data-testid": dataTestId, }: DataTableProps<TData, TValue>): JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, loading, emptyComponent, className, rowSelection, onRowSelectionChange, checkable, onCheckedRowsChange, actions, customComponentsLeft, customComponentsRight, hidePagination, hideActionsRow, i18n, maxSortedColumns, initialState, serverMode, serverConfig, disableAutoPageSize, id, "data-testid": dataTestId, rowClassName, }: DataTableProps<TData, TValue>): JSX.Element;
 
 export declare interface DataTableActions {
     label: string;
@@ -1598,6 +1600,7 @@ export declare interface DataTableProps<TData, TValue> {
     disableAutoPageSize?: boolean;
     id?: string;
     "data-testid"?: string;
+    rowClassName?: string | ((row: Row<TData>) => string);
 }
 
 export declare interface DataTableServerConfig {
@@ -1745,10 +1748,13 @@ export declare function DialogTrigger({ ...props }: React_2.ComponentProps<typeo
 declare type DisplayColumnConfig<TData> = BaseColumnFields & {
     accessorKey?: undefined;
     cell?: (value: undefined, row: TData, tableRow: Row<TData>) => React.ReactNode;
+    cellClassName?: string | ((value: undefined, row: TData) => string);
 };
 
-/** Distributes AccessorColumnConfig over each key in the DeepKeys union */
-declare type DistributedAccessorConfig<TData> = DeepKeys<TData> extends infer K ? K extends string ? AccessorColumnConfigForKey<TData, K> : never : never;
+/** Maps each key to its typed accessor config, then unions them */
+declare type DistributedAccessorConfig<TData> = {
+    [K in DeepKeys<TData> & string]: AccessorColumnConfigForKey<TData, K>;
+}[DeepKeys<TData> & string];
 
 export declare const downloadFile: (url: string, filename?: string) => void;
 
@@ -3016,6 +3022,29 @@ declare type TransformedDataType<T> = {
     [P in keyof T as Exclude<P, "children">]: T[P];
 };
 
+export declare function TruncatedCell({ children, text, title, popoverContent, className, wrapperClassName, popoverClassName, showButton, emptyFallback, }: TruncatedCellProps): JSX.Element;
+
+export declare interface TruncatedCellProps {
+    /** The text to display and potentially truncate (can be string or ReactNode) */
+    children?: React.ReactNode;
+    /** The text value to use for truncation detection, accessibility and default popover content */
+    text?: string;
+    /** Optional title for the popover dialog */
+    title?: string;
+    /** Custom popover content to override default text display */
+    popoverContent?: React.ReactNode;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for cell */
+    className?: string;
+    /** CSS classes for the popoverContent component */
+    popoverClassName?: string;
+    /** Flg used to show / hide the eye button */
+    showButton?: boolean;
+    /** Custom placeholder rendered when there is no content */
+    emptyFallback?: React.ReactNode;
+}
+
 export declare function TypingIndicator(): JSX.Element;
 
 export declare const Typo: React_2.FC<TypoProps>;
@@ -3130,5 +3159,7 @@ declare module "@tanstack/react-table" {
         searchable?: boolean;
         pinned?: "left" | "right";
         listOptions?: AppSelectOption[];
+        cellClassName?: string | ((value: unknown, row: TData) => string);
+        headerClassName?: string;
     }
 }