laif-ds 0.1.48 → 0.1.49

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

@@ -1,56 +1,57 @@
 "use client";
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { useState as f, useEffect as W, useCallback as w, useMemo as O, useRef as De } from "react";
-import { useReactTable as Ee, flexRender as ee } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useVirtualizer as $e } from "../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { TableSkeleton as je } from "../../table-skeleton.js";
+import { useState as f, useEffect as W, useCallback as w, useMemo as O, useRef as $e } from "react";
+import { useReactTable as je, flexRender as ee } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useVirtualizer as De } from "../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { TableSkeleton as Ie } from "../../table-skeleton.js";
 import { TruncatedText as k } from "./truncated-text.js";
-import { useDataCrossTable as Ie } from "./data-cross-table-context.js";
+import { useDataCrossTable as Ke } from "./data-cross-table-context.js";
+import { cn as te } from "../../../../lib/utils.js";
 import { Button as N } from "../../button.js";
 import { Icon as Y } from "../../icon.js";
-import { Popover as Ke, PopoverTrigger as Me, PopoverContent as Ve } from "../../popover.js";
-import { TableRow as U, TableCell as te, Table as Re, TableHeader as Le, TableHead as Ae, TableBody as Pe } from "../../table.js";
-import { getSortedRowModel as Be, getCoreRowModel as Fe } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
-function lt({
-  crossTableData: D,
-  filterable: y = !1,
-  loading: le = !1,
-  emptyComponent: ne,
-  className: E,
-  notFoundMessage: oe = "Nessun risultato trovato.",
-  cornerHeaderFrom: $ = "Da",
-  cornerHeaderTo: j = "A",
-  maxHeaderLength: b = 15,
+import { Popover as Me, PopoverTrigger as Ve, PopoverContent as Re } from "../../popover.js";
+import { TableRow as U, TableCell as le, Table as Le, TableHeader as Ae, TableHead as Pe, TableBody as Be } from "../../table.js";
+import { getSortedRowModel as Fe, getCoreRowModel as Oe } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+function ot({
+  crossTableData: E,
+  filterable: b = !1,
+  loading: re = !1,
+  emptyComponent: oe,
+  className: $,
+  notFoundMessage: ne = "Nessun risultato trovato.",
+  cornerHeaderFrom: j = "Da",
+  cornerHeaderTo: D = "A",
+  maxHeaderLength: y = 15,
   minWidthCell: I = 160,
-  editable: re = !1,
-  editMode: se = !1,
+  editable: se = !1,
+  editMode: ie = !1,
   onEditModeChange: K,
   onSelectedRow: X,
   selectedRow: u,
-  rowSortAsc: ie = !0
+  rowSortAsc: ae = !0
 }) {
   var J, Q;
-  const [ae, ce] = f([]), p = D.headerTop, m = D.headerLeft, g = D.data, [C, M] = f(
+  const [ce, de] = f([]), p = E.headerTop, m = E.headerLeft, v = E.data, [C, M] = f(
     (u == null ? void 0 : u.id) ?? null
-  ), [V, R] = f(ie);
+  ), [V, R] = f(ae);
   let c = null;
   try {
-    c = Ie();
+    c = Ke();
   } catch {
     c = null;
   }
-  const [de, Oe] = f(re && se), [ue, fe] = f({}), [me, pe] = f({}), L = (c == null ? void 0 : c.editMode) ?? de, _ = (c == null ? void 0 : c.editedCells) ?? ue, A = (c == null ? void 0 : c.setEditedCells) ?? fe, P = (c == null ? void 0 : c.toDefaultCells) ?? me, B = (c == null ? void 0 : c.setToDefaultCells) ?? pe;
+  const [ue, Ye] = f(se && ie), [fe, me] = f({}), [pe, he] = f({}), L = (c == null ? void 0 : c.editMode) ?? ue, _ = (c == null ? void 0 : c.editedCells) ?? fe, A = (c == null ? void 0 : c.setEditedCells) ?? me, P = (c == null ? void 0 : c.toDefaultCells) ?? pe, B = (c == null ? void 0 : c.setToDefaultCells) ?? he;
   W(() => {
     K && K(!!L);
   }, [L, K]), W(() => {
     u != null && u.id && M(u.id);
   }, [u]);
-  const [l, he] = f(null), [ve, x] = f(!1), [S, T] = f(null), ge = w(
+  const [l, ge] = f(null), [ve, x] = f(!1), [S, T] = f(null), xe = w(
     (t) => {
       t && l && T(l.value), x(t);
     },
     [l]
-  ), xe = w(() => {
+  ), be = w(() => {
     l && S !== null ? (A((t) => ({
       ...t,
       [l.cellKey]: {
@@ -71,7 +72,7 @@ function lt({
       const e = { ...t };
       return e[l.cellKey] && delete e[l.cellKey], e;
     })), x(!1);
-  }, [l]), be = w(() => {
+  }, [l]), Ce = w(() => {
     l && (A((t) => {
       const e = { ...t };
       return e[l.cellKey] && delete e[l.cellKey], e;
@@ -82,49 +83,49 @@ function lt({
         cell: l.cellData
       }
     }))), x(!1);
-  }, [l]), Ce = w(
+  }, [l]), we = w(
     (t) => {
       T(t.target.value);
     },
     []
-  ), we = (t) => t && typeof t == "object" && "value" in t ? t.value : t, h = O(() => {
-    if (!C || !m.find((n) => n.id === C)) return p;
+  ), Ne = (t) => t && typeof t == "object" && "value" in t ? t.value : t, h = O(() => {
+    if (!C || !m.find((r) => r.id === C)) return p;
     const e = m.findIndex(
-      (n) => n.id === C
+      (r) => r.id === C
     );
     if (e === -1) return p;
-    const r = p.map((n, i) => {
-      var v;
-      const s = ((v = g[e]) == null ? void 0 : v[i]) ?? null, a = we(s);
-      return { header: n, value: a };
+    const s = p.map((r, i) => {
+      var g;
+      const n = ((g = v[e]) == null ? void 0 : g[i]) ?? null, a = Ne(n);
+      return { header: r, value: a };
     });
-    return r.sort((n, i) => {
-      if (typeof n.value == "number" && typeof i.value == "number")
-        return V ? n.value - i.value : i.value - n.value;
-      const s = String(n.value ?? ""), a = String(i.value ?? "");
-      return V ? s.localeCompare(a) : a.localeCompare(s);
-    }), r.map((n) => n.header);
-  }, [p, m, g, C, V]), Ne = O(() => {
+    return s.sort((r, i) => {
+      if (typeof r.value == "number" && typeof i.value == "number")
+        return V ? r.value - i.value : i.value - r.value;
+      const n = String(r.value ?? ""), a = String(i.value ?? "");
+      return V ? n.localeCompare(a) : a.localeCompare(n);
+    }), s.map((r) => r.header);
+  }, [p, m, v, C, V]), Se = O(() => {
     const t = [
       {
         id: "cross-header",
         header: () => /* @__PURE__ */ d("div", { className: "relative", children: [
-          /* @__PURE__ */ o("div", { className: "absolute top-0 left-2 text-xs", children: $ }),
-          /* @__PURE__ */ o("div", { className: "absolute right-2 bottom-0 text-xs", children: j })
+          /* @__PURE__ */ o("div", { className: "absolute top-0 left-2 text-xs", children: j }),
+          /* @__PURE__ */ o("div", { className: "absolute right-2 bottom-0 text-xs", children: D })
         ] }),
         accessorFn: (e) => e.item,
         cell: (e) => {
-          const r = e.getValue();
-          if (!y)
+          const s = e.getValue();
+          if (!b)
             return /* @__PURE__ */ o(
               k,
               {
-                text: r.label,
-                maxLength: b,
+                text: s.label,
+                maxLength: y,
                 className: "w-full"
               }
             );
-          const n = C === r.id;
+          const r = C === s.id;
           return /* @__PURE__ */ o(
             N,
             {
@@ -133,9 +134,9 @@ function lt({
               iconLeft: "ArrowLeftRight",
               className: "text-right",
               onClick: () => {
-                y && (n ? R((i) => !i) : (M(m[e.row.index].id), R(!0), X && X(m[e.row.index])));
+                b && (r ? R((i) => !i) : (M(m[e.row.index].id), R(!0), X && X(m[e.row.index])));
               },
-              children: /* @__PURE__ */ o(k, { text: r.label, maxLength: b })
+              children: /* @__PURE__ */ o(k, { text: s.label, maxLength: y })
             }
           );
         }
@@ -144,96 +145,96 @@ function lt({
     return h.forEach((e) => {
       t.push({
         id: e.id,
-        accessorFn: (r) => r[e.id],
-        header: ({ column: r }) => y ? /* @__PURE__ */ o(
+        accessorFn: (s) => s[e.id],
+        header: ({ column: s }) => b ? /* @__PURE__ */ o(
           N,
           {
             variant: "ghost",
             size: "sm",
             iconLeft: "ArrowUpDown",
-            onClick: y ? () => r.toggleSorting(r.getIsSorted() === "asc") : void 0,
-            children: /* @__PURE__ */ o(k, { text: e.label, maxLength: b })
+            onClick: b ? () => s.toggleSorting(s.getIsSorted() === "asc") : void 0,
+            children: /* @__PURE__ */ o(k, { text: e.label, maxLength: y })
           }
         ) : /* @__PURE__ */ o(
           k,
           {
             text: e.label,
-            maxLength: b,
+            maxLength: y,
             className: "font-medium"
           }
         ),
-        sortingFn: (r, n, i) => {
-          let s = r.getValue(i), a = n.getValue(i);
-          return s == null && a == null ? 0 : s == null ? 1 : a == null ? -1 : (s && typeof s == "object" && "value" in s && (s = s.value), a && typeof a == "object" && "value" in a && (a = a.value), typeof s == "number" && typeof a == "number" ? s - a : String(s).localeCompare(String(a)));
+        sortingFn: (s, r, i) => {
+          let n = s.getValue(i), a = r.getValue(i);
+          return n == null && a == null ? 0 : n == null ? 1 : a == null ? -1 : (n && typeof n == "object" && "value" in n && (n = n.value), a && typeof a == "object" && "value" in a && (a = a.value), typeof n == "number" && typeof a == "number" ? n - a : String(n).localeCompare(String(a)));
         },
-        cell: (r) => {
-          const n = r.getValue();
-          return n ? n.render ? n.render(n.fromId, n.toId, n.id) : /* @__PURE__ */ o("div", { children: n.value }) : null;
+        cell: (s) => {
+          const r = s.getValue();
+          return r ? r.render ? r.render(r.fromId, r.toId, r.id) : /* @__PURE__ */ o("div", { children: r.value }) : null;
         }
       });
     }), t;
   }, [
     h,
-    $,
     j,
+    D,
     u,
-    y,
     b,
+    y,
     M,
     R
-  ]), Se = O(() => m.map((t, e) => {
-    const r = { item: t };
-    return h.forEach((n) => {
-      var s;
-      const i = p.findIndex((a) => a.id === n.id);
-      r[n.id] = i !== -1 ? ((s = g[e]) == null ? void 0 : s[i]) ?? null : null;
-    }), r;
-  }), [m, h, g, p]), F = Ee({
-    data: Se,
-    columns: Ne,
-    state: { sorting: ae },
-    onSortingChange: ce,
-    getCoreRowModel: Fe(),
-    getSortedRowModel: Be()
+  ]), Te = O(() => m.map((t, e) => {
+    const s = { item: t };
+    return h.forEach((r) => {
+      var n;
+      const i = p.findIndex((a) => a.id === r.id);
+      s[r.id] = i !== -1 ? ((n = v[e]) == null ? void 0 : n[i]) ?? null : null;
+    }), s;
+  }), [m, h, v, p]), F = je({
+    data: Te,
+    columns: Se,
+    state: { sorting: ce },
+    onSortingChange: de,
+    getCoreRowModel: Oe(),
+    getSortedRowModel: Fe()
   });
-  if (!g || g.length === 0)
-    return /* @__PURE__ */ o("div", { className: E, children: /* @__PURE__ */ o(U, { children: /* @__PURE__ */ o(te, { colSpan: h.length + 1, children: ne || oe }) }) });
-  if (le)
+  if (!v || v.length === 0)
+    return /* @__PURE__ */ o("div", { className: $, children: /* @__PURE__ */ o(U, { children: /* @__PURE__ */ o(le, { colSpan: h.length + 1, children: oe || ne }) }) });
+  if (re)
     return /* @__PURE__ */ o(
-      je,
+      Ie,
       {
         headerRow: h.map((t) => t.label),
         rowCount: m.length || 5,
         columnCount: h.length || 5,
-        className: E,
-        cornerHeaderFrom: $,
-        cornerHeaderTo: j
+        className: $,
+        cornerHeaderFrom: j,
+        cornerHeaderTo: D
       }
     );
-  const Te = (t) => {
-    const e = t.column.id === "cross-header", r = e, n = ["bg-d-secondary"];
-    e || n.push("border-r"), e && n.push("sticky left-0"), n.push("sticky top-0 z-20"), r ? n.push("z-40") : e && n.push("z-30");
+  const ze = (t) => {
+    const e = t.column.id === "cross-header", s = e, r = ["bg-d-secondary"];
+    e || r.push("border-r"), e && r.push("sticky left-0"), r.push("sticky top-0 z-20"), s ? r.push("z-40") : e && r.push("z-30");
     let i = "none";
     return e && (i = "inset -1px 0 0 0 var(--d-border), 0 1px 0 0 var(--d-border)"), {
-      className: n.join(" "),
+      className: r.join(" "),
       style: { boxShadow: i, width: `${I}px` }
     };
-  }, q = De(null), G = $e({
+  }, q = $e(null), G = De({
     count: F.getRowModel().rows.length,
     getScrollElement: () => q.current,
     estimateSize: () => 40,
     overscan: 5,
     measureElement: typeof window < "u" ? (t) => t.getBoundingClientRect().height : void 0
   });
-  return /* @__PURE__ */ d("div", { className: `w-[900px] ${E || ""}`, children: [
+  return /* @__PURE__ */ d("div", { className: `${te("w-[900px]", $ || "")}`, children: [
     /* @__PURE__ */ o(
       "div",
       {
         ref: q,
-        className: "max-h-[600px] overflow-auto rounded-md border",
-        children: /* @__PURE__ */ d(Re, { className: "relative w-full table-fixed border-collapse", children: [
+        className: "border-d-border h-fit max-h-full min-h-0 overflow-auto rounded-md border",
+        children: /* @__PURE__ */ d(Le, { className: "relative w-full table-fixed border-collapse", children: [
           /* @__PURE__ */ o(
-            Le,
+            Ae,
             {
               className: "bg-d-secondary sticky top-0 z-20 w-full",
               style: { boxShadow: "0 1px 0 0 var(--d-border)" },
@@ -242,12 +243,12 @@ function lt({
                 {
                   className: "bg-d-secondary sticky top-0 z-20",
                   children: t.headers.map((e) => {
-                    const r = Te(e);
+                    const s = ze(e);
                     return /* @__PURE__ */ o(
-                      Ae,
+                      Pe,
                       {
-                        className: r.className,
-                        style: r.style,
+                        className: s.className,
+                        style: s.style,
                         children: e.isPlaceholder ? null : ee(
                           e.column.columnDef.header,
                           e.getContext()
@@ -262,7 +263,7 @@ function lt({
             }
           ),
           /* @__PURE__ */ o(
-            Pe,
+            Be,
             {
               style: {
                 height: `${G.getTotalSize()}px`,
@@ -284,42 +285,43 @@ function lt({
                       height: `${t.size}px`,
                       display: "flex"
                     },
-                    children: e.getVisibleCells().map((r, n) => {
-                      const i = n === 0, s = r.getValue(), a = i ? "var(--d-secondary)" : (s == null ? void 0 : s.color) || "transparent";
+                    children: e.getVisibleCells().map((s, r) => {
+                      const i = r === 0, n = s.getValue(), a = i ? "var(--d-secondary)" : (n == null ? void 0 : n.bgColor) || "transparent";
                       return /* @__PURE__ */ o(
-                        te,
+                        le,
                         {
-                          className: `text-center ${i ? "sticky left-0 z-10" : "border-r"}`,
+                          className: `${te("border-d-border text-center", i ? "sticky left-0 z-10" : "border-r")}`,
                           style: {
                             boxShadow: i ? "inset -1px 0 0 0 var(--d-border)" : "none",
                             backgroundColor: a,
-                            width: `${I}px`,
-                            flex: i ? "0 0 auto" : `1 0 ${I}px`,
+                            color: (n == null ? void 0 : n.textColor) || "inherit",
+                            minWidth: `${I}px`,
+                            flex: `1 0 ${I}px`,
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center"
                           },
-                          children: i || !L || !s ? (
+                          children: i || !L || !n ? (
                             // Rendering normale per la prima colonna o quando non siamo in modalità edit
                             ee(
-                              r.column.columnDef.cell,
-                              r.getContext()
+                              s.column.columnDef.cell,
+                              s.getContext()
                             )
                           ) : (
                             // Rendering con cella modificabile
                             (() => {
-                              const v = `${e.index}-${r.column.id}`, z = v in _ ? _[v].value : s.value || "", ze = z !== s.value, Z = v in P;
+                              const g = `${e.index}-${s.column.id}`, z = g in _ ? _[g].value : n.value || "", ke = z !== n.value, Z = g in P;
                               return /* @__PURE__ */ o(
                                 "div",
                                 {
                                   className: "flex w-full cursor-pointer items-center justify-center",
-                                  onClick: (ke) => {
-                                    const H = ke.currentTarget.getBoundingClientRect();
-                                    he({
-                                      cellKey: v,
+                                  onClick: (Ee) => {
+                                    const H = Ee.currentTarget.getBoundingClientRect();
+                                    ge({
+                                      cellKey: g,
                                       value: z,
-                                      originalValue: s.value || "",
-                                      cellData: s,
+                                      originalValue: n.value || "",
+                                      cellData: n,
                                       position: {
                                         top: H.bottom + window.scrollY + 5,
                                         left: H.left + window.scrollX
@@ -328,7 +330,7 @@ function lt({
                                   },
                                   children: /* @__PURE__ */ d("div", { className: "relative w-full flex-1 items-center justify-center text-center", children: [
                                     z || "",
-                                    ze && !Z && /* @__PURE__ */ o(
+                                    ke && !Z && /* @__PURE__ */ o(
                                       "div",
                                       {
                                         className: "bg-d-primary absolute top-0 left-0 rounded p-1",
@@ -356,7 +358,7 @@ function lt({
                             })()
                           )
                         },
-                        r.id
+                        s.id
                       );
                     })
                   },
@@ -368,10 +370,10 @@ function lt({
         ] })
       }
     ),
-    /* @__PURE__ */ d(Ke, { open: ve, onOpenChange: ge, children: [
-      /* @__PURE__ */ o(Me, { asChild: !0, children: /* @__PURE__ */ o("div", { style: { display: "none" } }) }),
+    /* @__PURE__ */ d(Me, { open: ve, onOpenChange: xe, children: [
+      /* @__PURE__ */ o(Ve, { asChild: !0, children: /* @__PURE__ */ o("div", { style: { display: "none" } }) }),
       /* @__PURE__ */ o(
-        Ve,
+        Re,
         {
           className: "w-[400px] p-4",
           style: {
@@ -391,7 +393,7 @@ function lt({
                 type: "text",
                 className: "bg-d-secondary w-full rounded border p-2",
                 value: S || "",
-                onChange: Ce,
+                onChange: we,
                 autoFocus: !0
               }
             ),
@@ -401,7 +403,7 @@ function lt({
                 {
                   variant: "destructive",
                   size: "sm",
-                  onClick: be,
+                  onClick: Ce,
                   className: "text-xs",
                   title: "Ripristina il valore originale e segna la cella come da ripristinare",
                   children: [
@@ -426,7 +428,7 @@ function lt({
                   N,
                   {
                     size: "sm",
-                    onClick: xe,
+                    onClick: be,
                     className: "text-xs",
                     title: "Conferma le modifiche e salva",
                     children: [
@@ -444,5 +446,5 @@ function lt({
   ] });
 }
 export {
-  lt as DataCrossTable
+  ot as DataCrossTable
 };

package/dist/index.d.ts

@@ -566,7 +566,8 @@ declare type CopyButtonProps = {
 export declare interface CrossTableCell {
     render?: (fromId: string, toId: string, id?: string) => ReactNode;
     value?: number | string | null;
-    color?: string;
+    bgColor?: string;
+    textColor?: string;
     fromId: string;
     toId: string;
     id?: string;