@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/DataGrid/PinnedColumns.js

@@ -0,0 +1,165 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { flexRender as D } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { Checkbox as N } from "../Checkbox.js";
+import { DataCellHeader as T, DataGridCell as j } from "../DataGridCell.js";
+import { Subheader as p } from "../Subheader.js";
+import { Tooltip as P } from "../Tooltip.js";
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { getSortIcon as w } from "./utils.js";
+import V from "react";
+import { TableBody as A } from "./TableBody/index.js";
+import { ColumnSelectorHeaderCell as O } from "./ColumnSelectorHeaderCell/index.js";
+import { SummaryRow as G } from "./SummaryRow/index.js";
+function Y({
+  id: m,
+  pinDirection: r = "left",
+  table: e,
+  centerHeader: x,
+  allSelectedAcrossPages: v,
+  someSelectedAcrossPages: y,
+  toggleSelectAllAcrossPages: S,
+  testid: i,
+  enableColumnSelector: c,
+  toggleColumnVisibility: C,
+  resetColumnVisibility: R,
+  summaryRow: a,
+  filteredRows: k,
+  allRows: H,
+  totalRowCount: I,
+  allowUserGrouping: z,
+  ...s
+}) {
+  const g = r === "left" ? e.getLeftHeaderGroups() : e.getRightHeaderGroups(), n = i ? `${r}-pinned-${i}` : void 0;
+  if (!(!(g[0]?.headers.length > 0) && !c))
+    return /* @__PURE__ */ d(
+      "table",
+      {
+        className: h(
+          "flex flex-col min-h-min sticky z-20",
+          r === "left" ? "left-0" : "right-0"
+        ),
+        "data-testid": n,
+        children: [
+          /* @__PURE__ */ t("thead", { className: "sticky top-0 z-20 grid", children: g.map((u) => /* @__PURE__ */ d(
+            "tr",
+            {
+              "data-testid": n ? `${n}-header-row-${u.id}` : void 0,
+              className: "flex w-full",
+              children: [
+                u.headers.map((o) => {
+                  if (!o)
+                    return;
+                  const $ = e.getRowModel().rows[0]?.getValue(o.column.id), f = o.column.columnDef.meta?.align ?? (typeof $ == "number" ? "right" : "left");
+                  if (typeof o.column.columnDef.header == "string") {
+                    const b = o.column.columnDef.meta?.headerWidth;
+                    return /* @__PURE__ */ d(
+                      T,
+                      {
+                        locked: !0,
+                        testid: n ? `${n}-header-${o.id}` : void 0,
+                        header: o,
+                        center: x,
+                        allowUserGrouping: z,
+                        width: b ?? `${o.column.getSize()}px`,
+                        className: h(
+                          o.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                          "group",
+                          {
+                            "justify-start": f === "left",
+                            "justify-end": f === "right"
+                          }
+                        ),
+                        children: [
+                          /* @__PURE__ */ t(
+                            P,
+                            {
+                              showOnTruncation: !0,
+                              message: o.column.columnDef.header,
+                              position: "bottom",
+                              children: /* @__PURE__ */ t(p, { as: "p", addOverflow: !0, tall: !0, children: o.column.columnDef.header })
+                            }
+                          ),
+                          w(o.column.getIsSorted()),
+                          !o.column.getIsSorted() && o.column.getCanSort() && !e.getState().columnSizingInfo.isResizingColumn && w(o.column.getNextSortingOrder(), !0),
+                          o.column.getSortIndex() !== -1 && e.getState().sorting.length > 1 && /* @__PURE__ */ t(p, { tall: !0, children: o.column.getSortIndex() + 1 }),
+                          !o.column.columnDef.meta?.locked && /* @__PURE__ */ t(
+                            "div",
+                            {
+                              onDoubleClick: (l) => {
+                                l.stopPropagation(), o.column.resetSize();
+                              },
+                              onMouseDown: (l) => {
+                                l.stopPropagation(), o.getResizeHandler()(l);
+                              },
+                              onTouchStart: (l) => {
+                                l.stopPropagation(), o.getResizeHandler()(l);
+                              },
+                              className: "absolute right-0 inset-y-0 w-4 cursor-col-resize",
+                              children: /* @__PURE__ */ t("div", { className: "absolute right-0 inset-y-0 w-px bg-black pointer-events-none" })
+                            }
+                          )
+                        ]
+                      },
+                      o.id
+                    );
+                  }
+                  return /* @__PURE__ */ t(V.Fragment, { children: o.column.columnDef.meta?.checkbox ? /* @__PURE__ */ t(j, { type: "header", component: "checkbox", locked: !0, children: /* @__PURE__ */ t(
+                    N,
+                    {
+                      checked: v,
+                      indeterminate: y,
+                      onChange: S
+                    }
+                  ) }) : D(
+                    o.column.columnDef.header,
+                    o.getContext()
+                  ) }, o.id);
+                }),
+                c && /* @__PURE__ */ t(
+                  O,
+                  {
+                    id: m ? `${m}-column-selector` : void 0,
+                    testid: i ? `${i}-column-selector` : void 0,
+                    table: e,
+                    toggleColumnVisibility: C ?? (() => {
+                    }),
+                    resetColumnVisibility: R ?? (() => {
+                    })
+                  }
+                )
+              ]
+            },
+            u.id
+          )) }),
+          /* @__PURE__ */ t(
+            A,
+            {
+              testid: n,
+              ...s,
+              table: e,
+              locked: !c || r === "right",
+              pinDirection: r,
+              hoveredRowId: s.hoveredRowId,
+              setHoveredRowId: s.setHoveredRowId
+            }
+          ),
+          a && /* @__PURE__ */ t(
+            G,
+            {
+              id: m,
+              testid: n,
+              table: e,
+              summaryConfig: a,
+              filteredRows: k ?? [],
+              allRows: H ?? [],
+              totalRowCount: I ?? 0,
+              locked: r
+            }
+          )
+        ]
+      }
+    );
+}
+export {
+  Y as PinnedColumns
+};

package/dist/components/DataGrid/SummaryRow/SummaryCell.js

@@ -0,0 +1,51 @@
+import { jsx as t } from "react/jsx-runtime";
+import { clsx as g } from "../../../node_modules/clsx/dist/clsx.js";
+import { typography as h } from "../../../classNames.js";
+import { DataGridCell as y } from "../../DataGridCell.js";
+import { Label as f } from "../../Label.js";
+import { Tooltip as v } from "../../Tooltip.js";
+import { parseTemplate as b } from "./aggregations.js";
+function G({
+  id: s,
+  testid: p,
+  cellDef: r,
+  columnId: n,
+  filteredRows: a,
+  allRows: d,
+  totalRowCount: l,
+  colSpan: e,
+  width: u,
+  getColumn: c
+}) {
+  const o = r?.align ?? "left", m = r?.render ? r.render({ filteredRows: a, allRows: d, columnId: n }) : void 0, i = !r?.render && r?.template ? b(r.template, {
+    filteredRows: a,
+    totalRowCount: l,
+    columnId: n,
+    getColumn: c
+  }) : void 0;
+  return /* @__PURE__ */ t(
+    y,
+    {
+      id: s,
+      testid: p,
+      type: "summary",
+      width: u,
+      colSpan: e && e > 1 ? e : void 0,
+      className: g("bg-background-grouped-primary-normal", {
+        "justify-start": o === "left",
+        "justify-end": o === "right",
+        "justify-center": o === "center"
+      }),
+      children: i !== void 0 ? /* @__PURE__ */ t(v, { showOnTruncation: !0, message: i, position: "bottom", children: /* @__PURE__ */ t(f, { className: "!leading-6 whitespace-nowrap overflow-hidden text-ellipsis", children: i }) }) : m !== void 0 ? (
+        // A custom render result is an arbitrary ReactNode the consumer fully
+        // controls, so no truncation/tooltip wrapper is applied — but it still
+        // gets the same base typography as every other summary cell so a
+        // consumer's un-styled text matches the rest of the row by default.
+        /* @__PURE__ */ t("span", { className: h.label, children: m })
+      ) : null
+    }
+  );
+}
+export {
+  G as SummaryCell
+};

package/dist/components/DataGrid/SummaryRow/aggregations.js

@@ -0,0 +1,55 @@
+import { formatCurrencyDisplay as s } from "../../../utils/formatting.js";
+function m(r) {
+  if (typeof r == "number")
+    return Number.isFinite(r) ? r : void 0;
+  if (typeof r == "string") {
+    const t = r.trim().replace(/,/g, "");
+    if (t === "") return 0;
+    const n = Number(t);
+    return Number.isFinite(n) ? n : void 0;
+  }
+  if (r == null) return 0;
+}
+function f(r, t) {
+  let n = 0;
+  for (const o of r) {
+    const e = m(t(o));
+    if (e === void 0) return;
+    n += e;
+  }
+  return Math.round(n * 100) / 100;
+}
+function a(r) {
+  return r.length;
+}
+const d = /\{(count|total|sum)(?:,([^}]+))?\}/g;
+function p(r, t) {
+  return r.replace(
+    d,
+    (n, o, e) => {
+      switch (o) {
+        case "count":
+          return String(a(t.filteredRows));
+        case "total":
+          return String(t.totalRowCount);
+        case "sum": {
+          const c = e ?? t.columnId, u = t.getColumn(c);
+          if (!u) return "";
+          const i = f(t.filteredRows, u.accessor);
+          return i === void 0 ? "" : u.format === "currency" ? s(String(i)) : String(i);
+        }
+        default:
+          return "";
+      }
+    }
+  );
+}
+function g(r, t) {
+  return r === t ? `${r} Records` : `${r} of ${t} Records`;
+}
+export {
+  g as buildDefaultSummaryTemplate,
+  a as computeCount,
+  f as computeSum,
+  p as parseTemplate
+};

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

@@ -0,0 +1,86 @@
+import { jsx as C } from "react/jsx-runtime";
+import { clsx as v } from "../../../node_modules/clsx/dist/clsx.js";
+import { SummaryCell as x } from "./SummaryCell.js";
+import { buildDefaultSummaryTemplate as D } from "./aggregations.js";
+function b(m, o, n) {
+  return `${m.slice(o, o + n).reduce((u, a) => u + a.getSize(), 0)}px`;
+}
+function N({
+  id: m,
+  testid: o,
+  table: n,
+  summaryConfig: s,
+  filteredRows: c,
+  allRows: u,
+  totalRowCount: a,
+  locked: l
+}) {
+  const i = l === "left" ? n.getLeftLeafColumns() : l === "right" ? n.getRightLeafColumns() : n.getCenterLeafColumns();
+  if (i.length === 0) return null;
+  const $ = [
+    ...n.getLeftLeafColumns(),
+    ...n.getCenterLeafColumns(),
+    ...n.getRightLeafColumns()
+  ].find(
+    (e) => !e.columnDef.meta?.checkbox
+  )?.id, S = (e) => {
+    const r = n.getColumn(e);
+    if (r?.accessorFn)
+      return {
+        // AccessorFn's second (index) argument is essentially never used by
+        // consumer-defined accessors in practice; summary aggregation has no
+        // meaningful row index, so 0 is passed.
+        accessor: (d) => r.accessorFn(d, 0),
+        format: r.columnDef.meta?.format
+      };
+  };
+  let f = 0;
+  return /* @__PURE__ */ C(
+    "tfoot",
+    {
+      className: v("sticky bottom-0 grid", l ? "z-20" : "z-10"),
+      "data-testid": o ? `${o}-summary-footer` : void 0,
+      children: /* @__PURE__ */ C(
+        "tr",
+        {
+          id: m,
+          className: "flex w-full border-t border-border-primary-normal bg-background-grouped-primary-normal",
+          "data-testid": o ? `${o}-summary-row` : void 0,
+          children: i.map((e, r) => {
+            if (f > 0)
+              return f -= 1, null;
+            const d = e.columnDef.meta?.checkbox, y = e.id === $, h = d ? void 0 : s === !0 ? y ? {
+              template: D(
+                c.length,
+                a
+              )
+            } : void 0 : s.cells[e.id], p = i.length - r, g = h?.colSpan ?? 1, t = Math.min(g, p);
+            g > p && console.warn(
+              `DataGrid summaryRow: colSpan of ${g} on column "${e.id}" exceeds the ${p} column(s) remaining in the ${l || "center"} section. Clamping to ${t}.`
+            ), t > 1 && (f = t - 1);
+            const L = t > 1 ? b(i, r, t) : `${e.getSize()}px`;
+            return /* @__PURE__ */ C(
+              x,
+              {
+                id: m ? `${m}-summary-cell-${e.id}` : void 0,
+                testid: o ? `${o}-summary-cell-${e.id}` : void 0,
+                cellDef: h,
+                columnId: e.id,
+                filteredRows: c,
+                allRows: u,
+                totalRowCount: a,
+                colSpan: t > 1 ? t : void 0,
+                width: L,
+                getColumn: S
+              },
+              e.id
+            );
+          })
+        }
+      )
+    }
+  );
+}
+export {
+  N as SummaryRow
+};

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

@@ -0,0 +1,243 @@
+import { jsx as o, jsxs as k, Fragment as L } from "react/jsx-runtime";
+import { clsx as f } from "../../../node_modules/clsx/dist/clsx.js";
+import { typography as M } from "../../../classNames.js";
+import { formatCurrencyDisplay as Q } from "../../../utils/formatting.js";
+import { Checkbox as U } from "../../Checkbox.js";
+import { DataGridCell as m, DragAlongCell as X } from "../../DataGridCell.js";
+import { Icon as Z } from "../../Icon.js";
+import { computeCount as ee, computeSum as ne } from "../SummaryRow/aggregations.js";
+import { handleRowArrowKeyDown as te } from "../utils.js";
+const le = 40;
+function oe(t) {
+  return t === 0 ? "bg-brand-500" : t === 1 ? "bg-brand-300" : "bg-brand-200";
+}
+function G(t) {
+  return t >= 2 ? "text-neutral-500" : "text-neutral-000";
+}
+function ie(t) {
+  return f(
+    M.label,
+    "!leading-6 whitespace-nowrap overflow-hidden text-ellipsis",
+    G(t)
+  );
+}
+function fe({
+  id: t,
+  testid: r,
+  row: e,
+  virtualRow: V,
+  showFilterRow: j,
+  locked: a,
+  groupRowMode: A = "spanning",
+  groupSelectionMode: R = "row",
+  columnVirtualizer: H,
+  virtualPaddingLeft: D,
+  virtualPaddingRight: I
+}) {
+  const x = e.getIsExpanded(), u = e.depth, E = R === "group" || R === "both", d = oe(u), C = ie(u), F = () => {
+    e.toggleExpanded();
+  }, P = (n) => {
+    if (n.key === "Enter" || n.key === " ") {
+      n.preventDefault(), e.toggleExpanded();
+      return;
+    }
+    te(n);
+  }, T = (n) => {
+    const l = n.columnDef.meta;
+    if (l?.groupCell)
+      return l.groupCell({
+        rows: e.getLeafRows().map((i) => i.original),
+        groupValue: e.groupingValue,
+        depth: u,
+        isExpanded: x
+      });
+    if (!l?.aggregationFn) return;
+    if (l.aggregationFn === "count")
+      return String(ee(e.getLeafRows()));
+    if (!n.accessorFn) return;
+    const c = ne(
+      e.getLeafRows(),
+      (i) => n.accessorFn(i.original, 0)
+    );
+    if (c !== void 0)
+      return l.format === "currency" ? Q(String(c)) : String(c);
+  }, _ = () => {
+    const n = e.getIsAllSubRowsSelected(), l = e.getIsSomeSelected();
+    return /* @__PURE__ */ o("div", { className: "contents", onClick: (c) => c.stopPropagation(), children: /* @__PURE__ */ o(
+      U,
+      {
+        id: t ? `${t}-group-checkbox-${e.id}` : void 0,
+        testid: r ? `${r}-group-checkbox-${e.id}` : void 0,
+        checked: n,
+        indeterminate: l,
+        onChange: () => {
+          const c = !n;
+          e.getLeafRows().forEach((i) => i.toggleSelected(c));
+        }
+      }
+    ) });
+  }, B = (n) => /* @__PURE__ */ o(
+    m,
+    {
+      id: t ? `${t}-group-checkbox-cell-${e.id}` : void 0,
+      testid: r ? `${r}-group-checkbox-cell-${e.id}` : void 0,
+      component: "checkbox",
+      width: `${n.column.getSize()}px`,
+      className: d,
+      children: _()
+    },
+    n.id
+  ), $ = (n) => {
+    if (!E) return { checkboxCell: null, remainingCells: n };
+    const l = n.findIndex((c) => c.column.columnDef.meta?.checkbox);
+    return l === -1 ? { checkboxCell: null, remainingCells: n } : {
+      checkboxCell: B(n[l]),
+      remainingCells: n.filter((c, i) => i !== l)
+    };
+  }, K = (n) => {
+    const l = T(n.column);
+    return l === void 0 ? null : /* @__PURE__ */ o("span", { className: C, children: l });
+  }, W = (n) => {
+    const l = n.column.columnDef.meta?.align ?? "left";
+    return f(d, {
+      "justify-start": l === "left",
+      "justify-end": l === "right",
+      "justify-center": l === "center"
+    });
+  }, b = /* @__PURE__ */ o(
+    m,
+    {
+      id: t ? `${t}-group-chevron-${e.id}` : void 0,
+      testid: r ? `${r}-group-chevron-${e.id}` : void 0,
+      noPadding: !0,
+      width: `${le + u * 16}px`,
+      style: { paddingLeft: u * 16 },
+      className: f(d, "justify-center"),
+      children: /* @__PURE__ */ o("span", { className: f(G(u), "contents"), children: /* @__PURE__ */ o(Z, { name: x ? "expand_more" : "chevron_right", size: 24 }) })
+    }
+  ), O = (() => {
+    if (A === "columns") {
+      const i = a === "left" ? e.getLeftVisibleCells() : a === "right" ? e.getRightVisibleCells() : e.getCenterVisibleCells(), g = H?.getVirtualItems() ?? [], p = a ? m : X, { checkboxCell: h, remainingCells: v } = $(i), y = E ? i.find((s) => s.column.columnDef.meta?.checkbox)?.column.id : void 0, Y = e.getLeftVisibleCells().length > 0, q = a === "left" || a === !1 && !Y, S = e.getAllCells().find((s) => s.column.id === e.groupingColumnId), w = !!S?.column.columnDef.meta?.groupCell, J = a === !1 && !w ? /* @__PURE__ */ o(
+        m,
+        {
+          id: t ? `${t}-group-value-${e.id}` : void 0,
+          testid: r ? `${r}-group-value-${e.id}` : void 0,
+          width: S ? `${S.column.getSize()}px` : void 0,
+          className: d,
+          children: /* @__PURE__ */ o("span", { className: C, style: { paddingLeft: u * 16 }, children: String(e.groupingValue) })
+        }
+      ) : null, z = (s) => /* @__PURE__ */ o(
+        p,
+        {
+          cell: s,
+          id: t ? `${t}-group-cell-${e.id}-${s.column.id}` : void 0,
+          testid: r ? `${r}-group-cell-${e.id}-${s.column.id}` : void 0,
+          width: `${s.column.getSize()}px`,
+          className: W(s),
+          children: K(s)
+        },
+        s.id
+      );
+      return /* @__PURE__ */ k(L, { children: [
+        h,
+        q ? b : null,
+        J,
+        !a && D ? /* @__PURE__ */ o("td", { style: { display: "flex", width: D } }) : null,
+        a ? v.map(z) : g.map((s) => {
+          const N = i[s.index];
+          return !N || N.column.id === y ? null : z(N);
+        }),
+        !a && I ? /* @__PURE__ */ o("td", { style: { display: "flex", width: I } }) : null
+      ] });
+    }
+    if (a === "left") {
+      const i = e.getLeftVisibleCells(), { checkboxCell: g, remainingCells: p } = $(i);
+      return /* @__PURE__ */ k(L, { children: [
+        g,
+        b,
+        p.slice(1).map((h) => /* @__PURE__ */ o(
+          m,
+          {
+            noPadding: !0,
+            width: `${h.column.getSize()}px`,
+            className: d
+          },
+          h.id
+        ))
+      ] });
+    }
+    if (a === "right")
+      return e.getRightVisibleCells().map((g) => /* @__PURE__ */ o(
+        m,
+        {
+          noPadding: !0,
+          width: `${g.column.getSize()}px`,
+          className: d
+        },
+        g.id
+      ));
+    const n = e.getCenterVisibleCells();
+    if (!(e.getLeftVisibleCells().length > 0) && n.length > 0) {
+      const { checkboxCell: i, remainingCells: g } = $(n), [, ...p] = g, h = p.reduce(
+        (v, y) => v + y.column.getSize(),
+        0
+      );
+      return /* @__PURE__ */ k(L, { children: [
+        i,
+        b,
+        /* @__PURE__ */ o(
+          m,
+          {
+            id: t ? `${t}-group-value-${e.id}` : void 0,
+            testid: r ? `${r}-group-value-${e.id}` : void 0,
+            colSpan: p.length,
+            width: `${h}px`,
+            className: d,
+            children: /* @__PURE__ */ o("span", { className: C, style: { paddingLeft: u * 16 }, children: String(e.groupingValue) })
+          }
+        )
+      ] });
+    }
+    const c = n.reduce(
+      (i, g) => i + g.column.getSize(),
+      0
+    );
+    return /* @__PURE__ */ o(
+      m,
+      {
+        id: t ? `${t}-group-value-${e.id}` : void 0,
+        testid: r ? `${r}-group-value-${e.id}` : void 0,
+        colSpan: n.length,
+        width: `${c}px`,
+        className: d,
+        children: /* @__PURE__ */ o("span", { className: C, style: { paddingLeft: u * 16 }, children: String(e.groupingValue) })
+      }
+    );
+  })();
+  return /* @__PURE__ */ o(
+    "tr",
+    {
+      id: t ? `${t}-group-row-${e.id}` : void 0,
+      "data-testid": r ? `${r}-group-row-${e.id}` : void 0,
+      "data-group-row": "true",
+      "data-depth": u,
+      role: "row",
+      "aria-expanded": x,
+      "aria-level": u + 1,
+      tabIndex: 0,
+      onClick: F,
+      onKeyDown: P,
+      className: f("flex cursor-pointer min-h-10", d),
+      style: {
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${j ? V.start + 40 : V.start}px)`,
+        width: "100%"
+      },
+      children: O
+    }
+  );
+}
+export {
+  fe as GroupRow
+};

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

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Checkbox as $ } from "../../Checkbox.js";
+import { DataGridCell as l } from "../../DataGridCell.js";
+import { Input as d } from "../../Input.js";
+function p({
+  id: r,
+  testid: e,
+  column: n
+}) {
+  const o = `loading-${n.id}`;
+  return n.cell === "checkbox" ? /* @__PURE__ */ i(l, { id: r ? `${r}-${o}` : void 0, testid: e ? `${e}-${o}` : void 0, children: /* @__PURE__ */ i($, { id: r ? `${r}-${o}-checkbox` : void 0, testid: e ? `${e}-${o}-checkbox` : void 0, disabled: !0 }) }, o) : n.cell === "input" ? /* @__PURE__ */ i(
+    l,
+    {
+      id: r ? `${r}-${o}` : void 0,
+      testid: e ? `${e}-${o}` : void 0,
+      component: "input",
+      children: /* @__PURE__ */ i(
+        d,
+        {
+          id: r ? `${r}-${o}-input` : void 0,
+          testid: e ? `${e}-${o}-input` : void 0,
+          align: "left",
+          disabled: !0,
+          wrapperClassName: "!rounded-none !border-0"
+        }
+      )
+    },
+    o
+  ) : /* @__PURE__ */ i(l, { id: r ? `${r}-${o}` : void 0, testid: e ? `${e}-${o}` : void 0, children: /* @__PURE__ */ i("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, o);
+}
+export {
+  p as LoadingCell
+};