@dmsi/wedgekit-react 2.0.0 → 2.0.2

package/dist/components/DataGrid/TableBody/TableBodyRow.js

@@ -0,0 +1,136 @@
+import { jsxs as z, jsx as l } from "react/jsx-runtime";
+import { clsx as y } from "../../../node_modules/clsx/dist/clsx.js";
+import { DataGridCell as A, DragAlongCell as E } from "../../DataGridCell.js";
+import { Paragraph as F } from "../../Paragraph.js";
+import { Tooltip as K } from "../../Tooltip.js";
+import { formatDate as T } from "../../../utils/date.js";
+import { formatCurrencyDisplay as I } from "../../../utils/formatting.js";
+import { handleRowArrowKeyDown as M } from "../utils.js";
+function h({
+  cell: o
+}) {
+  const n = o.column.columnDef.cell;
+  return n == null ? null : typeof n == "function" ? n(o.getContext()) : n;
+}
+const b = {
+  date: (o) => typeof o == "string" ? T(o) : "",
+  currency: (o) => I(o)
+};
+function N(o) {
+  return typeof o == "string" && o in b;
+}
+function J({
+  id: o,
+  testid: n,
+  columnVirtualizer: x,
+  row: t,
+  // rowVirtualizer,
+  virtualPaddingLeft: d,
+  virtualPaddingRight: f,
+  virtualRow: a,
+  showFilterRow: C,
+  // enableColumnSelector = false,
+  locked: r,
+  pinDirection: D,
+  groupSelectionMode: v = "row",
+  disabled: i,
+  hoveredRowId: V,
+  setHoveredRowId: g
+}) {
+  let c;
+  r ? c = D === "left" ? t.getLeftVisibleCells() : t.getRightVisibleCells() : c = t.getCenterVisibleCells();
+  const S = x?.getVirtualItems() ?? [], j = r ? c : S, w = typeof t.original == "object" && t.original !== null && "rowState" in t.original && t.original.rowState === "error", m = r ? A : E, k = V === t.id;
+  return /* @__PURE__ */ z(
+    "tr",
+    {
+      className: y(
+        "min-h-10",
+        "transition-colors",
+        !i && (a.index % 2 === 0 ? "bg-background-grouped-primary-normal" : "bg-background-grouped-secondary-normal"),
+        !i && k && "!bg-background-action-secondary-hover",
+        t.getIsSelected() && !i && "!bg-background-action-secondary-hover",
+        w && !i && "!bg-background-action-critical-secondary-hover"
+      ),
+      onMouseEnter: () => g?.(t.id),
+      onMouseLeave: () => g?.(null),
+      id: o ? `${o}-row-${t.id}` : void 0,
+      "data-testid": n ? `${n}-row-${t.id}` : void 0,
+      role: "row",
+      tabIndex: 0,
+      onKeyDown: M,
+      style: {
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${C ? a.start + 40 : a.start}px)`,
+        width: "100%"
+      },
+      children: [
+        !r && d ? (
+          // fake empty column to the left for virtualization scroll padding
+          /* @__PURE__ */ l("td", { style: { display: "flex", width: d } })
+        ) : null,
+        j.map((p) => {
+          const e = r ? p : c[p.index];
+          if (!e)
+            return;
+          if (e.column.columnDef.meta?.checkbox && v === "group")
+            return /* @__PURE__ */ l(
+              m,
+              {
+                id: o ? `${o}-row-${t.id}-cell-${e.id}` : void 0,
+                testid: n ? `${n}-row-${t.id}-cell-${e.id}` : void 0,
+                cell: e,
+                width: `${e.column.getSize()}px`
+              },
+              e.id
+            );
+          const s = e.column.columnDef.meta?.format, u = s && N(s) ? b[s](e.getValue()) : e.getValue(), $ = e.column.columnDef.meta?.align ?? (typeof u == "number" ? "right" : "left");
+          return e.column.columnDef.meta?.useCustomRenderer && e.column.columnDef.meta?.checkbox ? /* @__PURE__ */ l(
+            m,
+            {
+              id: o ? `${o}-row-${t.id}-cell-${e.id}` : void 0,
+              testid: n ? `${n}-row-${t.id}-cell-${e.id}` : void 0,
+              cell: e,
+              width: `${e.column.getSize()}px`,
+              component: "checkbox",
+              children: /* @__PURE__ */ l(h, { cell: e })
+            },
+            e.id
+          ) : e.column.columnDef.meta?.useCustomRenderer ? /* @__PURE__ */ l(h, { cell: e }, e.id) : /* @__PURE__ */ l(
+            m,
+            {
+              id: o ? `${o}-row-${t.id}-cell-${e.id}` : void 0,
+              testid: n ? `${n}-row-${t.id}-cell-${e.id}` : void 0,
+              cell: e,
+              width: `${e.column.getSize()}px`,
+              className: y({
+                "justify-start": $ === "left",
+                "justify-end": $ === "right"
+              }),
+              children: /* @__PURE__ */ l(
+                K,
+                {
+                  id: o ? `${o}-tooltip-${e.id}` : void 0,
+                  testid: n ? `${n}-tooltip-${e.id}` : void 0,
+                  showOnTruncation: !0,
+                  message: u,
+                  position: "bottom",
+                  children: /* @__PURE__ */ l(F, { addOverflow: !0, tall: !0, children: u })
+                }
+              )
+            },
+            e.id
+          );
+        }),
+        !r && f ? (
+          // fake empty column to the right for virtualization scroll padding
+          /* @__PURE__ */ l("td", { style: { display: "flex", width: f } })
+        ) : null
+      ]
+    },
+    t.id
+  );
+}
+export {
+  J as TableBodyRow
+};

package/dist/components/DataGrid/TableBody/index.js

@@ -0,0 +1,161 @@
+import { jsxs as L, jsx as t } from "react/jsx-runtime";
+import { useVirtualizer as T } from "../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { DataGridCell as V, DragAlongCell as H } from "../../DataGridCell.js";
+import { Search as N } from "../../Search.js";
+import { clsx as R } from "../../../node_modules/clsx/dist/clsx.js";
+import { TableBodyRow as j } from "./TableBodyRow.js";
+import { GroupRow as B } from "./GroupRow.js";
+import { LoadingCell as E } from "./LoadingCell.js";
+function K({
+  id: l,
+  testid: o,
+  columnVirtualizer: c,
+  table: n,
+  tableContainerRef: h,
+  virtualPaddingLeft: p,
+  virtualPaddingRight: d,
+  pagination: v,
+  isLoadingMore: C,
+  hasMore: b,
+  showFilterRow: a,
+  enableColumnSelector: w = !1,
+  locked: i,
+  pinDirection: m,
+  groupRowMode: G = "spanning",
+  groupSelectionMode: f = "row",
+  rowDisabled: z,
+  rowDisabledAccessor: y,
+  hoveredRowId: S,
+  setHoveredRowId: k
+}) {
+  const { rows: x } = n.getRowModel(), s = T({
+    count: x.length,
+    estimateSize: () => 40,
+    getScrollElement: () => h.current,
+    overscan: 8
+  }), u = s.getVirtualItems(), I = i ? V : H;
+  let g;
+  return m === "left" ? g = n.getLeftHeaderGroups() : m === "right" ? g = n.getRightHeaderGroups() : g = n.getCenterHeaderGroups(), /* @__PURE__ */ L(
+    "tbody",
+    {
+      className: R(i ? "shadow-16" : ""),
+      style: {
+        display: "grid",
+        height: `${a ? s.getTotalSize() + 40 : s.getTotalSize()}px`,
+        // tells scrollbar how big the table is
+        position: "relative"
+        // needed for absolute positioning of rows
+      },
+      children: [
+        a && /* @__PURE__ */ t(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "sticky",
+              top: "40px",
+              width: "100%",
+              height: "40px",
+              zIndex: 10
+            },
+            className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
+            "data-testid": o ? `${o}-filter-row` : void 0,
+            children: g.flatMap(
+              (r) => r.headers.map((e) => /* @__PURE__ */ t(
+                I,
+                {
+                  id: l ? `${l}-filter-cell-${e.id}` : void 0,
+                  testid: o ? `${o}-filter-cell-${e.id}` : void 0,
+                  noPadding: !0,
+                  cell: e,
+                  width: e.column.columnDef.meta?.headerWidth || `${e.column.getSize()}px`,
+                  children: e.column.getCanFilter() && (e.column.columnDef.meta?.filterRowCell?.({
+                    header: e,
+                    table: n
+                  }) ?? /* @__PURE__ */ t(
+                    N,
+                    {
+                      id: l ? `${l}-filter-search-${e.id}` : void 0,
+                      testid: o ? `${o}-filter-search-${e.id}` : void 0,
+                      removeRoundness: !0,
+                      onChange: ($) => e.column.setFilterValue($.target.value),
+                      value: e.column.getFilterValue() ?? "",
+                      placeholder: "",
+                      removeSearchIcon: !0
+                    }
+                  ))
+                },
+                e.id
+              ))
+            )
+          }
+        ),
+        u.map((r) => {
+          const e = x[r.index];
+          return e.getIsGrouped() ? /* @__PURE__ */ t(
+            B,
+            {
+              id: l,
+              testid: o,
+              row: e,
+              virtualRow: r,
+              showFilterRow: a,
+              locked: i ? m === "left" ? "left" : "right" : !1,
+              groupRowMode: G,
+              groupSelectionMode: f,
+              columnVirtualizer: c,
+              virtualPaddingLeft: p,
+              virtualPaddingRight: d
+            },
+            e.id
+          ) : /* @__PURE__ */ t(
+            j,
+            {
+              id: l,
+              testid: o,
+              columnVirtualizer: c,
+              row: e,
+              rowVirtualizer: s,
+              virtualPaddingLeft: p,
+              virtualPaddingRight: d,
+              virtualRow: r,
+              showFilterRow: a,
+              enableColumnSelector: w,
+              locked: i,
+              pinDirection: m,
+              groupSelectionMode: f,
+              disabled: y ? y(e.original) : z,
+              hoveredRowId: S,
+              setHoveredRowId: k
+            },
+            e.id
+          );
+        }),
+        !v && C && b && /* @__PURE__ */ t(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "absolute",
+              width: "100%",
+              transform: `translateY(${u[u.length - 1].start + 40}px)`
+            },
+            className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
+            children: n.getAllLeafColumns().map((r) => /* @__PURE__ */ t(
+              E,
+              {
+                id: l,
+                testid: o,
+                column: r.columnDef
+              },
+              r.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  K as TableBody
+};