laif-ds 0.2.23 → 0.2.24

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

@@ -0,0 +1,549 @@
+"use client";
+import { jsx as c, jsxs as ne } from "react/jsx-runtime";
+import { useReactTable as Ue } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { cn as Xe } from "../../../../lib/utils.js";
+import { useRef as h, useState as u, useEffect as H, useMemo as F } from "react";
+import { Button as Qe } from "../../button.js";
+import { Checkbox as xe } from "../../checkbox.js";
+import { DataTableBody as Ye } from "./components/data-table-body.js";
+import { DataTableColumnVisibility as Ze } from "./components/data-table-column-visibility.js";
+import { DataTableFilters as $e } from "./components/data-table-filters.js";
+import { DataTablePaginationComponent as et } from "./components/data-table-pagination.js";
+import { DataTableSearchbar as tt } from "./components/data-table-searchbar.js";
+import { DataTableSortingComponent as nt } from "./components/data-table-sorting.js";
+import { applySearchFilterToRow as Ce, debounce as rt, buildSearchFilter as ot, updatePageSizeFromContainer as at, createDefaultAdvancedFilter as lt, createBadgeFilterFromHeader as it } from "./data-table.service.js";
+import { DataTableActionsComponent as st } from "./components/data-table-actions.js";
+import { defaultDataTableI18n as ct } from "./data-table-i18n.js";
+import { getPaginationRowModel as ut, getFilteredRowModel as dt, getSortedRowModel as mt, getCoreRowModel as gt } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+function _t({
+  columns: Q,
+  data: j,
+  loading: V = !1,
+  emptyComponent: we,
+  className: ye,
+  rowSelection: Re = {},
+  onRowSelectionChange: re,
+  checkable: q = !1,
+  onCheckedRowsChange: Y,
+  actions: Se = [],
+  hidePagination: Ie = !1,
+  hideActionsRow: Te = !1,
+  i18n: p = ct,
+  maxSortedColumns: oe = 2,
+  initialState: m,
+  // New mode-based API
+  serverMode: a = !1,
+  serverConfig: d,
+  disableAutoPageSize: y = !1
+}) {
+  const P = h(null), ae = (e) => !e || !e.sort_by || !e.sort_order ? [] : e.sort_by.map((t, o) => ({
+    id: t,
+    desc: e.sort_order[o] === "desc"
+  })), ve = (e) => {
+    const t = ae(e?.sorting), o = {
+      sort_by: t.map((s) => s.id),
+      sort_order: t.map((s) => s.desc ? "desc" : "asc")
+    };
+    return {
+      computedSorting: t.length > 0 ? o : void 0,
+      computedFilter: e?.computedFilter
+      // Use provided value or undefined
+    };
+  }, [N, ze] = u(() => ae(m?.sorting)), [Be] = u([]), [Me, _e] = u({}), [f, De] = u(() => m?.filters?.searchbarFilter), [E, O] = u(() => m?.pagination ?? { pageIndex: 0, pageSize: 10 }), le = h(d);
+  le.current = d;
+  const W = h(d?.onStateChange);
+  W.current = d?.onStateChange;
+  const J = h(null), B = h(null), He = h(0), ie = h(!1), se = h(null), K = h({}), ce = h(null), A = (e) => {
+    e.computedFilter && (K.current.computedFilter = e.computedFilter), e.computedSorting && (K.current.computedSorting = e.computedSorting);
+    const t = {
+      ...e,
+      // Use new computed values if available, otherwise use last known values
+      computedFilter: e.computedFilter || K.current.computedFilter,
+      computedSorting: e.computedSorting || K.current.computedSorting
+    };
+    J.current = t, B.current && clearTimeout(B.current), B.current = setTimeout(() => {
+      J.current && W.current && (He.current = Date.now(), W.current(J.current), J.current = null, B.current = null);
+    }, 400);
+  };
+  H(() => {
+    const e = setTimeout(() => {
+      ie.current = !0;
+    }, 100);
+    return () => {
+      clearTimeout(e), B.current && clearTimeout(B.current);
+    };
+  }, []);
+  const [r, G] = u(() => {
+    const { computedSorting: e, computedFilter: t } = ve(m);
+    return {
+      pagination: m?.pagination ?? { pageIndex: 0, pageSize: 10 },
+      sorting: m?.sorting,
+      filters: m?.filters,
+      computedFilter: m?.computedFilter ?? t,
+      computedSorting: m?.computedSorting ?? e
+    };
+  });
+  a && !d && console.warn("DataTable: Server mode requires serverConfig");
+  const [Ne, ue] = u(0), [Oe, de] = u(0), [Ae, Ge] = u({}), me = re ? Re : Ae, Le = re || Ge, [R, Z] = u(
+    () => m?.filters?.filterBadges ?? []
+  ), [S, $] = u(() => m?.filters?.advancedFilterBadge), [U, ke] = u(""), [ge, pe] = u([]), fe = F(() => q ? [
+    {
+      id: "data-table-integrated-checkbox-column",
+      size: 24,
+      minSize: 24,
+      maxSize: 24,
+      header: ({ table: e }) => /* @__PURE__ */ c(
+        "div",
+        {
+          className: "flex w-6 max-w-6 min-w-6 items-center justify-center",
+          style: { width: "24px", minWidth: "24px", maxWidth: "24px" },
+          children: /* @__PURE__ */ c(
+            xe,
+            {
+              className: "cursor-pointer",
+              checked: e.getIsAllPageRowsSelected(),
+              onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
+              "aria-label": p.selectAll
+            }
+          )
+        }
+      ),
+      cell: ({ row: e }) => /* @__PURE__ */ c(
+        "div",
+        {
+          className: "flex w-6 max-w-6 min-w-6 items-center justify-center",
+          style: { width: "24px", minWidth: "24px", maxWidth: "24px" },
+          children: /* @__PURE__ */ c(
+            xe,
+            {
+              className: "cursor-pointer",
+              checked: e.getIsSelected(),
+              onCheckedChange: (t) => e.toggleSelected(!!t),
+              "aria-label": p.selectRow
+            }
+          )
+        }
+      ),
+      enableSorting: !1,
+      enableHiding: !1,
+      enableResizing: !1,
+      meta: {
+        pinned: "left",
+        sortable: !1,
+        searchable: !1,
+        filterable: !1,
+        type: "other",
+        listOptions: []
+      }
+    },
+    ...Q
+  ] : Q, [Q, q]), I = F(() => fe.map(
+    (e) => e
+  ), [fe]);
+  H(() => {
+    const e = (I ?? []).map((i) => i?.id ?? i?.accessorKey).filter(Boolean), t = new Set(ge), o = new Set(e);
+    t.size === o.size && [...t].every((i) => o.has(i)) || pe(e);
+  }, [I]);
+  const M = F(() => I.filter(
+    (e) => !!e?.meta?.searchable
+  ), [I]), T = F(() => M.map((e) => e.id ?? e.accessorKey).filter(Boolean), [M]), [X, je] = u(() => m?.computedFilter ?? {}), Ve = {
+    data: F(() => a || Object.keys(X).length === 0 ? j : j.filter((e) => Ce({
+      original: e,
+      getValue: (o) => e[o]
+    }, X)), [j, X, a]),
+    columns: I,
+    getCoreRowModel: gt(),
+    onSortingChange: (e) => {
+      const t = typeof e == "function" ? e(N) : e;
+      ze(t);
+    },
+    getSortedRowModel: mt(),
+    manualSorting: a,
+    onColumnVisibilityChange: _e,
+    onRowSelectionChange: Le,
+    onColumnOrderChange: pe,
+    getFilteredRowModel: dt(),
+    manualFiltering: a,
+    globalFilterFn: (e, t, o) => a || !o ? !0 : (T ?? []).some((s) => {
+      const i = e.getValue(s);
+      return Array.isArray(i) ? i.some(
+        (g) => String(g).toLowerCase().includes(o.toLowerCase())
+      ) : String(i).toLowerCase().includes(o.toLowerCase());
+    }) ?? !1,
+    filterFns: {
+      advancedFilter: (e) => a ? !0 : Ce(e, X)
+    },
+    onPaginationChange: (e) => {
+      if (a && d) {
+        if (typeof e == "object") {
+          const t = y ? {
+            ...r.pagination,
+            pageIndex: e.pageIndex
+          } : {
+            ...r.pagination,
+            pageIndex: e.pageIndex,
+            pageSize: e.pageSize
+          }, o = {
+            ...r,
+            pagination: t,
+            // Preserve computed values if they exist
+            computedFilter: r.computedFilter,
+            computedSorting: r.computedSorting
+          };
+          G(o), A(o);
+        }
+      } else
+        O(
+          typeof e == "object" ? (t) => y ? { ...t, pageIndex: e.pageIndex } : {
+            pageIndex: e.pageIndex,
+            pageSize: e.pageSize
+          } : e
+        );
+    },
+    getPaginationRowModel: ut(),
+    manualPagination: a,
+    pageCount: a && V ? Oe : Ne,
+    state: {
+      sorting: N,
+      columnFilters: Be,
+      columnVisibility: Me,
+      rowSelection: me,
+      globalFilter: f,
+      pagination: a ? r.pagination : E,
+      columnOrder: ge
+    },
+    // Prevent implicit resets on data/columns changes so filters/sorting persist
+    autoResetPageIndex: !1
+  }, l = Ue(Ve), ee = l.getFilteredRowModel();
+  H(() => {
+    if (a && d) {
+      const e = Math.ceil(
+        d.totalItems / (r.pagination.pageSize || 10)
+      );
+      ue(e), !V && e > 0 && de(e);
+    } else {
+      const e = ee.rows.length, t = Math.ceil(e / E.pageSize);
+      ue(t), de(t);
+    }
+  }, [
+    a,
+    d?.totalItems,
+    r.pagination.pageSize,
+    r.pagination.pageIndex,
+    l,
+    ee,
+    E.pageSize,
+    V
+  ]), H(() => {
+    if (y) return;
+    const e = () => {
+      const x = P.current;
+      if (!x) return;
+      const _ = x.querySelector(
+        "thead tr"
+      ), n = x.querySelector(
+        "tbody tr"
+      ), C = _?.getBoundingClientRect().height ?? 40;
+      if (!!!n?.querySelector("td")) return;
+      const v = n?.getBoundingClientRect().height ?? 32.5;
+      at(x, {
+        rowHeight: v,
+        headerHeight: C,
+        onPageChange: a ? (w, b) => {
+          if (d && ie.current) {
+            const z = y ? {
+              ...r.pagination,
+              pageIndex: w
+            } : {
+              ...r.pagination,
+              pageIndex: w,
+              pageSize: b
+            }, k = {
+              ...r,
+              pagination: z,
+              // Preserve computed values if they exist
+              computedFilter: r.computedFilter,
+              computedSorting: r.computedSorting
+            };
+            G(k), A(k);
+          }
+        } : (w, b) => {
+          O(
+            (z) => y ? { ...z, pageIndex: w } : { pageIndex: w, pageSize: b }
+          );
+        },
+        setPagination: (w) => {
+          const b = typeof w == "function" ? w(r.pagination) : w;
+          if (a && d) {
+            const z = y ? {
+              ...r.pagination,
+              pageIndex: b.pageIndex
+            } : {
+              ...r.pagination,
+              pageIndex: b.pageIndex,
+              pageSize: b.pageSize
+            }, k = {
+              ...r,
+              pagination: z,
+              // Preserve computed values if they exist
+              computedFilter: r.computedFilter,
+              computedSorting: r.computedSorting
+            };
+            G(k), A(k);
+          } else
+            O(
+              (z) => y ? { ...z, pageIndex: b.pageIndex } : {
+                pageIndex: b.pageIndex,
+                pageSize: b.pageSize
+              }
+            );
+        }
+      });
+    }, t = rt(() => {
+      requestAnimationFrame(() => {
+        e();
+      });
+    }, 200);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        e();
+      });
+    });
+    const o = setTimeout(e, 200), s = document.fonts;
+    s && typeof s.ready?.then == "function" && s.ready.then(() => e()), window.addEventListener("resize", t);
+    const i = P.current, g = typeof ResizeObserver < "u" ? new ResizeObserver((x) => {
+      const _ = x[0];
+      if (!_) return;
+      const n = _.contentRect.height, C = ce.current;
+      (C === null || Math.abs(n - C) > 0.5) && (ce.current = n, t());
+    }) : null;
+    return i && g && g.observe(i), () => {
+      window.removeEventListener("resize", t), clearTimeout(o), g && g.disconnect(), clearTimeout(o);
+    };
+  }, [
+    a,
+    P,
+    y,
+    // Recalculate when the rendered rows count changes; helps when data arrives async
+    ee.rows.length
+  ]), H(() => {
+    if (Y && q) {
+      const e = l.getFilteredSelectedRowModel().rows.map((t) => t.original);
+      Y(e);
+    }
+  }, [l, Y, q, me]);
+  const qe = F(() => {
+    const e = l.getHeaderGroups()[0], t = e ? e.headers : [];
+    return (l.getState().sorting || []).map((i) => t.find((g) => g.column.id === i.id)).filter(Boolean);
+  }, [
+    l.getHeaderGroups,
+    l.getState().sorting,
+    I
+  ]), te = F(() => l.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.sortable), [l.getHeaderGroups, I]), L = F(() => l.getHeaderGroups()[0].headers.filter((e) => e.column.columnDef.meta?.filterable), [l.getHeaderGroups, I]), Pe = F(() => U ? L.filter((e) => (e.column.columnDef.header?.toString().toLowerCase() || "").includes(U.toLowerCase())) : L, [L, U]), he = (e) => {
+    Z((t) => [...t, it(e)]);
+  }, Ee = () => {
+    $(lt());
+  }, We = F(() => R.sort((e, t) => e.value === void 0 || e.value === "" ? 1 : t.value === void 0 || t.value === "" ? -1 : 1), [R]), be = h({
+    filterBadges: [],
+    advancedFilterBadge: void 0,
+    searchbarGlobalFilter: void 0
+  });
+  H(() => {
+    const e = ot(
+      R,
+      S ?? void 0
+    ), t = f && T.length > 0 ? T.length === 1 ? (() => {
+      const n = T[0], D = M.find(
+        (v) => (v.id ?? v.accessorKey) === n
+      )?.meta?.type;
+      return D === "list_multi_select" || D === "list_single_select" ? {
+        [n]: {
+          operator: "array_overlap",
+          value: [f]
+        }
+      } : {
+        [n]: {
+          operator: "like",
+          value: f
+        }
+      };
+    })() : {
+      _or: T.map((n) => {
+        const D = M.find(
+          (v) => (v.id ?? v.accessorKey) === n
+        )?.meta?.type;
+        return D === "list_multi_select" || D === "list_single_select" ? {
+          [n]: {
+            operator: "array_overlap",
+            value: [f]
+          }
+        } : {
+          [n]: {
+            operator: "like",
+            value: f
+          }
+        };
+      })
+    } : null, o = [
+      ...e && Object.keys(e).length > 0 ? [e] : [],
+      ...t ? [t] : []
+    ], s = o.length === 0 ? {} : o.length === 1 ? o[0] : { _and: o }, i = {
+      sort_by: N.map((n) => n.id),
+      sort_order: N.map((n) => n.desc ? "desc" : "asc")
+    }, g = be.current, x = JSON.stringify(R) !== JSON.stringify(g.filterBadges) || JSON.stringify(S) !== JSON.stringify(g.advancedFilterBadge) || f !== g.searchbarGlobalFilter;
+    be.current = {
+      filterBadges: [...R],
+      advancedFilterBadge: S ? { ...S } : void 0,
+      searchbarGlobalFilter: f
+    };
+    const _ = le.current;
+    if (je(s), a && W.current && _) {
+      const n = {
+        ...r,
+        computedFilter: s,
+        // Emit only computedSorting. Use empty arrays to signal "no sorting" when cleared.
+        computedSorting: i,
+        filters: {
+          filterBadges: R,
+          advancedFilterBadge: S,
+          searchbarFilter: f
+        },
+        pagination: {
+          ...r.pagination,
+          // Only reset pageIndex to 0 when filters actually changed, not when just sorting changed
+          pageIndex: x ? 0 : r.pagination.pageIndex
+        }
+      };
+      G(n);
+      const C = JSON.stringify({
+        computedFilter: n.computedFilter,
+        computedSorting: n.computedSorting,
+        filters: n.filters,
+        pagination: n.pagination
+      });
+      se.current !== C && (se.current = C, A(n));
+    } else
+      x && O((n) => ({
+        ...n,
+        pageIndex: 0
+      }));
+  }, [
+    R,
+    S,
+    f,
+    T,
+    M,
+    N,
+    a
+  ]);
+  const Fe = l.getAllLeafColumns(), Je = Fe.filter((e) => e.getIsVisible()), Ke = Fe.filter((e) => !e.getIsVisible());
+  return /* @__PURE__ */ ne(
+    "div",
+    {
+      className: Xe(
+        "flex h-full max-h-full min-h-[250px] w-full max-w-full min-w-0 flex-col gap-2",
+        ye
+      ),
+      children: [
+        !Te && /* @__PURE__ */ ne("div", { className: "flex w-full items-center justify-between gap-1", children: [
+          /* @__PURE__ */ ne("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: [
+            te.length > 0 && /* @__PURE__ */ c(
+              nt,
+              {
+                table: l,
+                sortedColumns: qe,
+                sortableColumns: te,
+                i18n: p,
+                maxSortedColumns: oe
+              }
+            ),
+            te.length > 0 && L.length > 0 && /* @__PURE__ */ c("div", { className: "border-d-border h-4 min-h-4 w-[1px] border-r" }),
+            /* @__PURE__ */ c(
+              $e,
+              {
+                advancedFilterBadge: S,
+                setAdvancedFilterBadge: $,
+                filterableColumns: L,
+                sortedFilterBadges: We,
+                setFilterBadges: Z,
+                filterSearch: U,
+                setFilterSearch: ke,
+                filteredColumns: Pe,
+                handleAddFilter: he,
+                handleAddAdvancedFilter: Ee,
+                i18n: p
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { className: "border-d-border h-4 min-h-4 w-[1px] border-r" }),
+          (R.length || S) && /* @__PURE__ */ c(
+            Qe,
+            {
+              className: "h-6 text-xs",
+              iconLeft: "FunnelX",
+              size: "sm",
+              variant: "ghost-destructive",
+              onClick: () => {
+                Z([]), $(void 0);
+              },
+              children: p.reset
+            }
+          ),
+          T.length > 0 && /* @__PURE__ */ c(
+            tt,
+            {
+              debounceMs: 300,
+              onSearch: De,
+              i18n: p,
+              initialValue: f ?? "",
+              searchableColumnsHeaders: M.map(
+                (e) => e.header ? e.header.toString() : e.id?.toString() ?? "-"
+              )
+            }
+          ),
+          /* @__PURE__ */ c(
+            Ze,
+            {
+              table: l,
+              visibleColumns: Je,
+              hiddenColumns: Ke,
+              i18n: p
+            }
+          ),
+          /* @__PURE__ */ c(st, { actions: Se, i18n: p })
+        ] }),
+        /* @__PURE__ */ c(
+          Ye,
+          {
+            table: l,
+            tableContainerRef: P,
+            loading: V,
+            data: j,
+            emptyComponent: we,
+            notFoundMessage: p?.notFoundMessage ?? "N/A",
+            onAddFilter: he,
+            maxSortedColumns: oe,
+            i18n: p
+          }
+        ),
+        !Ie && /* @__PURE__ */ c(
+          et,
+          {
+            table: l,
+            isServerSide: a,
+            clientPagination: E,
+            serverState: a ? r : void 0,
+            onServerStateChange: a && d ? (e) => {
+              G(e), A(e);
+            } : void 0,
+            totalItems: d?.totalItems,
+            i18n: p
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _t as DataTable
+};