@cronocode/react-box 3.0.13 → 3.0.14

package/components/dataGrid.mjs

@@ -1,21 +1,659 @@
-import { jsx as n, jsxs as c, Fragment as g } from "react/jsx-runtime";
-import "react";
-import i from "../box.mjs";
-import s from "./grid.mjs";
-function x(d) {
-  const { data: r, def: u } = d, { rowKey: e, columns: l } = u;
-  return l.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(i, { component: "datagrid", children: /* @__PURE__ */ c(s, { b: 1, borderRadius: 1, children: [
-    l.map((o, t) => /* @__PURE__ */ n(i, { style: { gridColumn: t + 1 }, children: o.key.toString() }, t)),
-    ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(i, { children: "Empty table" }),
-    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(g, { children: r == null ? void 0 : r.map((o, t) => {
-      const p = e ? typeof e == "function" ? e(o) : o[e] : t;
-      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: l.map((h, m) => /* @__PURE__ */ c(i, { style: { gridColumn: m + 1 }, children: [
-        "tes ",
-        m
-      ] }, m)) }, p);
-    }) })
-  ] }) });
+var ot = Object.defineProperty;
+var st = (u, t, e) => t in u ? ot(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
+var l = (u, t, e) => st(u, typeof t != "symbol" ? t + "" : t, e);
+import { jsx as s, jsxs as g, Fragment as rt } from "react/jsx-runtime";
+import p from "../box.mjs";
+import X from "./grid.mjs";
+import { useMemo as N, useState as H, forwardRef as lt, useRef as ut, useCallback as at, useImperativeHandle as ht } from "react";
+import { F as j, m as I, A as B, b as ct, D as dt, P as K, G as pt, d as gt } from "../core.mjs";
+import _ from "./button.mjs";
+import b from "./flex.mjs";
+import mt from "./tooltip.mjs";
+import V from "./checkbox.mjs";
+const ft = "NO_PIN";
+class T {
+  constructor(t, e, i) {
+    l(this, "columns", []);
+    l(this, "_pin");
+    l(this, "_inlineWidth");
+    l(this, "resizeColumn", (t) => {
+      this.grid.isResizeMode = !0;
+      const e = t.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, o = this.leafs.sumBy((h) => h.inlineWidth) - this.leafs.length * i, r = this.leafs.toRecord((h) => [h.key, h.inlineWidth]), d = j.throttle((h) => {
+        const m = (h.pageX - e) * (this.pin === "RIGHT" ? -1 : 1);
+        this.leafs.forEach((f) => {
+          const y = r[f.key], v = o > 0 ? (y - i) / o * m : m / this.leafs.length, R = Math.round(y + v);
+          f.setWidth(R < i ? i : R);
+        }), this.grid.headerRows.clear(), this.grid.sizes.clear(), n();
+      }, 20), a = new AbortController(), c = (h) => {
+        a.abort(), this.grid.isResizeMode = !1, n();
+      };
+      window.addEventListener("mousemove", d, a), window.addEventListener("mouseup", c, a);
+    });
+    l(this, "pinColumn", (t) => {
+      this.isLeaf ? this._pin = t : this.columns.forEach((e) => e.pinColumn(t)), this.grid.pinColumn(this.uniqueKey, t);
+    });
+    l(this, "toggleGrouping", () => {
+      this.grid.toggleGrouping(this.key);
+    });
+    l(this, "sortColumn", (...t) => {
+      this.grid.setSortColumn(this.key, ...t);
+    });
+    l(this, "setWidth", (t) => {
+      if (!this.isLeaf)
+        throw new Error("Cannot set width for a parent column.");
+      this._inlineWidth !== t && (this._inlineWidth = t, this.grid.setWidth(this.key, t));
+    });
+    var n;
+    this.def = t, this.grid = e, this.parent = i, this.columns = ((n = t.columns) == null ? void 0 : n.map((o) => new T(t.pin ? { ...o, pin: t.pin } : o, e, this))) ?? [], this.isLeaf && (this._inlineWidth = this.key == E ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = t.pin);
+  }
+  get key() {
+    return this.def.key;
+  }
+  get header() {
+    return this.def.header;
+  }
+  get align() {
+    return this.def.align;
+  }
+  get isLeaf() {
+    return this.columns.length === 0;
+  }
+  get pin() {
+    if (this.isLeaf) return this._pin;
+    const t = [...new Set(this.columns.flatMap((e) => e.pin))];
+    if (t.length === 1) return t[0];
+  }
+  get uniqueKey() {
+    return `${this.key}${this.pin ?? ""}`;
+  }
+  getPinnedColumn(t) {
+    if (this.hasPin(t)) {
+      if (this.isLeaf) return this;
+      const e = new T({ ...this.def, pin: t }, this.grid, this.parent);
+      return e.columns = this.columns.filter((i) => i.hasPin(t)).map((i) => {
+        const n = i.getPinnedColumn(t);
+        return n.parent = e, n;
+      }).filter((i) => !!i), e;
+    }
+  }
+  hasPin(t) {
+    return this.isLeaf ? this._pin === t : this.columns.some((e) => e.hasPin(t));
+  }
+  get death() {
+    return this.parent ? this.parent.death + 1 : 0;
+  }
+  get flatColumns() {
+    const t = [this];
+    return t.push(...this.columns.flatMap((e) => e.flatColumns)), t;
+  }
+  get inlineWidth() {
+    if (this.isLeaf) return this._inlineWidth;
+    const t = this.columns.map((e) => e.inlineWidth).filter((e) => typeof e == "number");
+    if (t.length !== 0)
+      return t.sumBy((e) => e);
+  }
+  get left() {
+    let t = 0;
+    if (this.parent) {
+      const e = this.parent.columns.findIndex((i) => i === this);
+      t += this.parent.columns.sumBy((i, n) => n < e ? i.inlineWidth ?? 0 : 0), t += this.parent.left;
+    } else {
+      const e = this.grid.columns.value.left.findIndex((i) => i === this);
+      t += this.grid.columns.value.left.sumBy((i, n) => n < e ? i.inlineWidth ?? 0 : 0);
+    }
+    return t;
+  }
+  get right() {
+    let t = 0;
+    if (this.parent) {
+      const e = [...this.parent.columns].reverse(), i = e.findIndex((n) => n === this);
+      t += e.sumBy((n, o) => o < i ? n.inlineWidth ?? 0 : 0), t += this.parent.right;
+    } else {
+      const e = [...this.grid.columns.value.right].reverse(), i = e.findIndex((n) => n === this);
+      t += e.sumBy((n, o) => o < i ? n.inlineWidth ?? 0 : 0);
+    }
+    return t;
+  }
+  get isEdge() {
+    return this.pin ? this.parent ? (this.pin === "LEFT" ? this.parent.columns.at(-1) : this.parent.columns.at(0)) === this && this.parent.isEdge : (this.pin === "LEFT" ? this.grid.columns.value.left.at(-1) : this.grid.columns.value.right.at(0)) === this : !1;
+  }
+  // Approved
+  get leafs() {
+    return this.isLeaf ? [this] : this.columns.flatMap((t) => t.leafs);
+  }
+  get groupColumnWidthVarName() {
+    return `--${this.uniqueKey}-group-width`;
+  }
+  get widthVarName() {
+    return `--${this.uniqueKey}-width`;
+  }
+  get leftVarName() {
+    return `--${this.uniqueKey}-left`;
+  }
+  get rightVarName() {
+    return `--${this.uniqueKey}-right`;
+  }
+  get gridRows() {
+    return this.isLeaf ? this.grid.headerRows.value.length - this.death : 1;
+  }
 }
+class wt {
+  constructor(t, e, i) {
+    this.grid = t, this.row = e, this.column = i;
+  }
+  get value() {
+    return this.column.key === L ? this.row.rowIndex + 1 : this.column.key === C ? `> ${this.row.groupValue} (${this.row.count})` : null;
+  }
+}
+class q {
+  constructor(t, e, i, n, o) {
+    l(this, "parentRow");
+    this.grid = t, this.groupColumn = e, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((r) => r.parentRow = this);
+  }
+  get rowKey() {
+    var t;
+    return `${((t = this.parentRow) == null ? void 0 : t.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
+  }
+  get cells() {
+    return this.grid.columns.value.leafs.map((t) => new wt(this.grid, this, t));
+  }
+  get expanded() {
+    return this.grid.expandedGroupRow[this.rowKey];
+  }
+  get depth() {
+    return this.parentRow ? this.parentRow.depth + 1 : 0;
+  }
+  get count() {
+    return this.rows.sumBy((t) => t.count, 0);
+  }
+  get flatRows() {
+    return this.expanded ? [this, ...this.rows.flatMap((t) => t.flatRows)] : [this];
+  }
+  get groupingColumn() {
+    return this.grid.columns.value.leafs.findOrThrow((t) => t.key === C);
+  }
+  get groupingColumnGridColumn() {
+    const { leafs: t } = this.grid.columns.value, { groupingColumn: e } = this;
+    return t.sumBy(
+      (n) => n.pin === e.pin && n.key !== E && n.key !== x && n.key !== L ? 1 : 0
+    );
+  }
+  toggleRow() {
+    this.grid.toggleGroupRow(this.rowKey);
+  }
+}
+class Ct {
+  constructor(t, e, i) {
+    this.grid = t, this.row = e, this.column = i;
+  }
+  get value() {
+    return this.column.key === E ? null : this.column.key === L ? this.row.rowIndex + 1 : this.row.row[this.column.key];
+  }
+}
+class U {
+  constructor(t, e, i) {
+    l(this, "parentRow");
+    this.grid = t, this.row = e, this.rowIndex = i, this.grid = t, this.row = e;
+  }
+  get rowKey() {
+    return this.getRowKey();
+  }
+  get cells() {
+    return this.grid.columns.value.leafs.map((t) => new Ct(this.grid, this, t));
+  }
+  get count() {
+    return 1;
+  }
+  get flatRows() {
+    return [this];
+  }
+  getRowKey() {
+    var i;
+    const { rowKey: t } = this.grid.props.def, e = t ? typeof t == "function" ? t(this.row) : this.row[t] : this.rowIndex;
+    return `${((i = this.parentRow) == null ? void 0 : i.rowKey) ?? ""}${e}`;
+  }
+}
+const E = "empty-cell", L = "row-number-cell", x = "row-selection-cell", C = "grouping-cell";
+class yt {
+  constructor(t, e) {
+    l(this, "_sourceColumns", []);
+    l(this, "columns", I(() => {
+      const t = this._sourceColumns.map((r) => r.getPinnedColumn("LEFT")).filter((r) => !!r), e = this._sourceColumns.map((r) => r.getPinnedColumn()).filter((r) => !!r), i = this._sourceColumns.map((r) => r.getPinnedColumn("RIGHT")).filter((r) => !!r), n = [...t, ...e, ...i].flatMap((r) => r.flatColumns), o = n.filter((r) => r.isLeaf);
+      return {
+        left: t,
+        middle: e,
+        right: i,
+        flat: n,
+        leafs: o
+      };
+    }));
+    l(this, "headerRows", I(() => this.columns.value.flat.groupBy((e) => e.death).sortBy((e) => e.key).map((e) => {
+      const i = e.values.groupBy((n) => n.pin ?? ft).toRecord((n) => [n.key, n.values]);
+      return [...i.LEFT ?? [], ...i.NO_PIN ?? [], ...i.RIGHT ?? []];
+    })));
+    l(this, "gridTemplateColumns", I(() => {
+      const t = this.columns.value.leafs.sumBy((o) => o.pin === "RIGHT" ? 1 : 0), e = this.columns.value.leafs.length - t - 1, i = e > 0 ? `repeat(${e}, max-content)` : "", n = t > 0 ? `repeat(${t}, max-content)` : "";
+      return `${i} auto ${n}`;
+    }));
+    l(this, "rows", I(() => {
+      let t = this.props.data;
+      if (this._sortColumn && (t = t.sortBy((e) => e[this._sortColumn], this._sortDirection)), this.groupColumns.length > 0) {
+        const e = (i, n, o) => {
+          const r = n[0];
+          n = n.removeBy((a) => a === r);
+          const d = this.columns.value.leafs.findOrThrow((a) => a.key === r);
+          return this._sortColumn === C && (i = i.sortBy((a) => a[r], this._sortDirection)), i.groupBy((a) => a[r]).map((a) => {
+            let c;
+            n.length > 0 ? c = e(a.values, n, o + 1) : c = a.values.map((m, f) => new U(this, m, o + 1 + f));
+            const h = new q(this, d, c, o, a.key);
+            return o += 1, h.expanded && (o += c.length), h;
+          });
+        };
+        return e(t, this.groupColumns, 0);
+      }
+      return t.map((e, i) => new U(this, e, i));
+    }));
+    l(this, "flatRows", I(() => this.rows.value.flatMap((t) => t.flatRows)));
+    l(this, "sizes", I(() => {
+      console.log("sizes");
+      const t = this.columns.value.flat.reduce((i, n) => {
+        const { inlineWidth: o } = n;
+        return typeof o == "number" && (i[n.widthVarName] = `${n.inlineWidth}px`), n.pin === "LEFT" && (i[n.leftVarName] = `${n.left}px`), n.pin === "RIGHT" && (i[n.rightVarName] = `${n.right}px`), i;
+      }, {});
+      t[this.leftEdgeVarName] = `${this.leftEdge}px`;
+      const e = this.columns.value.leafs.find((i) => i.key === C);
+      return e && (t[e.groupColumnWidthVarName] = `${this.columns.value.leafs.sumBy((i) => i.pin === e.pin && i.key !== L && i.key !== x ? i.inlineWidth ?? 0 : 0)}px`), this.groupColumns.forEach((i) => {
+        const n = this.columns.value.leafs.findOrThrow((o) => o.key === i);
+        t[n.groupColumnWidthVarName] = `${this.columns.value.leafs.sumBy((o) => o.pin === n.pin ? o.inlineWidth ?? 0 : 0)}px`;
+      }), t;
+    }));
+    l(this, "ROW_HEIGHT", 12);
+    l(this, "MIN_COLUMN_WIDTH_PX", 48);
+    l(this, "DEFAULT_COLUMN_WIDTH_PX", 200);
+    l(this, "isResizeMode", !1);
+    l(this, "expandedGroupRow", {});
+    l(this, "leftEdgeVarName", "--left-edge");
+    l(this, "setSortColumn", (t, ...e) => {
+      if (e.length > 0)
+        [this._sortDirection] = e, this._sortColumn = this._sortDirection ? t : void 0;
+      else {
+        const { _sortColumn: i, _sortDirection: n } = this;
+        this._sortColumn = i === t && n === "DESC" ? void 0 : t, this._sortDirection = i === t && n === "ASC" ? "DESC" : "ASC";
+      }
+      this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
+    });
+    l(this, "pinColumn", (t, e) => {
+      const i = this.columns.value.flat.findOrThrow((n) => n.uniqueKey === t);
+      i.pin !== e && i.pinColumn(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+    });
+    l(this, "toggleGrouping", (t) => {
+      this.groupColumns.includes(t) ? this.groupColumns = this.groupColumns.removeBy((i) => i === t) : this.groupColumns = this.groupColumns.add(t);
+      const e = this._sourceColumns.find((i) => i.key === C);
+      if (this.groupColumns.length > 0 && !e) {
+        const i = this._sourceColumns.sumBy((n) => n.key === L || n.key === x ? 1 : 0);
+        this._sourceColumns.splice(i, 0, new T({ key: C }, this));
+      } else this.groupColumns.length === 0 && e && (this._sourceColumns = this._sourceColumns.removeBy((i) => i.key === C));
+      this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+    });
+    l(this, "toggleGroupRow", (t) => {
+      t in this.expandedGroupRow ? delete this.expandedGroupRow[t] : this.expandedGroupRow[t] = !0, this.rows.clear(), this.flatRows.clear(), this.update();
+    });
+    l(this, "setWidth", (t, e) => {
+      const i = this.columns.value.leafs.find((o) => o.key === t);
+      if (!i)
+        throw new Error("Leaf column not found.");
+      i.setWidth(e), this._sourceColumns.flatMap((o) => o.flatColumns).findOrThrow((o) => o.key === t).setWidth(e);
+    });
+    l(this, "groupColumns", []);
+    l(this, "_sortColumn");
+    l(this, "_sortDirection", "ASC");
+    this.props = t, this.update = e, this._sourceColumns = t.def.columns.map((i) => new T(i, this)), this._sourceColumns.push(new T({ key: E }, this)), this._sourceColumns.unshift(new T({ key: x, width: 50, align: "center" }, this)), this._sourceColumns.unshift(new T({ key: L, pin: "LEFT", width: 70, align: "right" }, this));
+  }
+  get leftEdge() {
+    return this.columns.value.left.sumBy((t) => t.inlineWidth ?? 0);
+  }
+  get rightEdge() {
+    return this.columns.value.right.sumBy((t) => t.inlineWidth ?? 0);
+  }
+  get sortColumn() {
+    return this._sortColumn;
+  }
+  get sortDirection() {
+    return this._sortDirection;
+  }
+}
+function vt(u) {
+  const t = N(() => new yt(u, () => i((o) => o + 1)), [u]), [e, i] = H(0);
+  return N(() => Object.create(Object.getPrototypeOf(t), Object.getOwnPropertyDescriptors(t)), [t, e]);
+}
+function Rt(u) {
+  const { column: t } = u, { key: e, pin: i, left: n, right: o, isEdge: r, isLeaf: d, leafs: a, grid: c, header: h, gridRows: m, widthVarName: f, leftVarName: y, rightVarName: v, inlineWidth: R } = t, k = e === E, G = e === C, w = e === L, P = e === x, W = i === "LEFT", D = i === "RIGHT", M = W || i === "RIGHT", S = W && n === 0, O = W && r, Q = D && r, Z = D && o === 0, z = d && !k && !w && !P, tt = d ? 1 : a.length, et = !w && !P, A = !w && !P, it = N(() => {
+    if (w) return null;
+    if (P) return /* @__PURE__ */ s(V, { m: 1 });
+    if (G) {
+      if (c.groupColumns.length === 1) {
+        const F = c.columns.value.leafs.findOrThrow((nt) => nt.key === c.groupColumns[0]);
+        return F.header ?? F.key;
+      }
+      return "Group";
+    }
+    return h ?? e;
+  }, [c.groupColumns]);
+  return /* @__PURE__ */ s(
+    b,
+    {
+      component: "datagrid.header.cell",
+      variant: { isRowNumber: w, isPinned: M, isFirstLeftPinned: S, isLastLeftPinned: O, isFirstRightPinned: Q, isLastRightPinned: Z, isSortable: z },
+      gridRow: m,
+      gridColumn: tt,
+      style: {
+        width: `var(${f})`,
+        left: W ? `var(${y})` : void 0,
+        right: D ? `var(${v})` : void 0
+      },
+      children: !k && /* @__PURE__ */ g(rt, { children: [
+        /* @__PURE__ */ s(b, { width: "fit", height: "fit", jc: t.align, props: { onClick: z ? () => t.sortColumn() : void 0 }, children: /* @__PURE__ */ g(
+          b,
+          {
+            overflow: "hidden",
+            position: d ? void 0 : "sticky",
+            ai: "center",
+            transition: "none",
+            pl: t.align ? void 0 : 4,
+            style: {
+              left: i ? void 0 : `var(${c.leftEdgeVarName})`
+            },
+            children: [
+              /* @__PURE__ */ s(p, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: it }),
+              e === c.sortColumn && /* @__PURE__ */ s(p, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ s(B, { width: "16px", rotate: c.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
+              A && /* @__PURE__ */ s(p, { minWidth: 12 })
+            ]
+          }
+        ) }),
+        et && /* @__PURE__ */ s(kt, { column: t }),
+        A && /* @__PURE__ */ s(_t, { column: t })
+      ] })
+    }
+  );
+}
+function kt(u) {
+  const { column: t } = u;
+  return /* @__PURE__ */ s(
+    b,
+    {
+      height: "fit",
+      ai: "center",
+      position: "absolute",
+      right: t.pin === "RIGHT" ? void 0 : 0,
+      left: t.pin !== "RIGHT" ? void 0 : 0,
+      py: 3,
+      children: /* @__PURE__ */ s(
+        p,
+        {
+          cursor: "col-resize",
+          px: 0.75,
+          className: "resizer",
+          height: "fit",
+          props: { onMouseDown: t.resizeColumn, onTouchStart: t.resizeColumn },
+          children: /* @__PURE__ */ s(p, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
+        }
+      )
+    }
+  );
+}
+function _t(u) {
+  const { column: t } = u, [e, i, n] = ct({ hideOnScroll: !0, event: "mousedown" }), [o, r] = H({ top: 0, left: 0 }), d = N(() => o.left > window.innerWidth / 2, [o.left]), a = t.isLeaf && (t.grid.sortColumn !== t.key || t.grid.sortDirection === "DESC"), c = t.isLeaf && (t.grid.sortColumn !== t.key || t.grid.sortDirection === "ASC"), h = t.isLeaf && t.grid.sortColumn === t.key, m = t.pin !== "LEFT", f = t.pin !== "RIGHT", y = !!t.pin, v = t.isLeaf && t.key !== C, R = a || c || h, k = m || f || y;
+  return /* @__PURE__ */ s(b, { position: "absolute", right: t.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ g(
+    _,
+    {
+      clean: !0,
+      onClick: () => i(!e),
+      width: 6,
+      height: 6,
+      cursor: "pointer",
+      userSelect: "none",
+      borderRadius: 1,
+      borderColor: "gray-200",
+      display: "flex",
+      jc: "center",
+      ai: "center",
+      transition: "none",
+      bgColor: "gray-200",
+      hover: { bgColor: "gray-300" },
+      children: [
+        /* @__PURE__ */ s(dt, { fill: "violet-950" }),
+        e && /* @__PURE__ */ g(
+          mt,
+          {
+            bgColor: "white",
+            width: 56,
+            b: 1,
+            borderColor: "gray-300",
+            borderRadius: 1,
+            display: "flex",
+            d: "column",
+            mt: 4,
+            py: 2,
+            overflow: "hidden",
+            translateX: d ? -55 : -5,
+            onPositionChange: r,
+            ref: n,
+            shadow: "medium-shadow",
+            children: [
+              a && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.sortColumn("ASC"),
+                  children: [
+                    /* @__PURE__ */ s(B, { width: "1rem", fill: "violet-950" }),
+                    "Sort Ascending"
+                  ]
+                }
+              ),
+              c && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.sortColumn("DESC"),
+                  children: [
+                    /* @__PURE__ */ s(B, { width: "1rem", fill: "violet-950", rotate: 180 }),
+                    "Sort Descending"
+                  ]
+                }
+              ),
+              h && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.sortColumn(void 0),
+                  children: [
+                    /* @__PURE__ */ s(p, { width: 4 }),
+                    "Clear Sort"
+                  ]
+                }
+              ),
+              R && (k || v) && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
+              m && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.pinColumn("LEFT"),
+                  children: [
+                    /* @__PURE__ */ s(K, { width: "1rem", fill: "violet-950" }),
+                    "Pin Left"
+                  ]
+                }
+              ),
+              f && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.pinColumn("RIGHT"),
+                  children: [
+                    /* @__PURE__ */ s(K, { width: "1rem", fill: "violet-950", rotate: -90 }),
+                    "Pin Right"
+                  ]
+                }
+              ),
+              y && /* @__PURE__ */ g(
+                _,
+                {
+                  clean: !0,
+                  display: "flex",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: () => t.pinColumn(),
+                  children: [
+                    /* @__PURE__ */ s(p, { width: 4 }),
+                    "Unpin"
+                  ]
+                }
+              ),
+              R && k && v && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
+              v && /* @__PURE__ */ g(_, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: t.toggleGrouping, children: [
+                /* @__PURE__ */ s(p, { children: /* @__PURE__ */ s(pt, { width: "1rem", fill: "violet-950" }) }),
+                /* @__PURE__ */ g(p, { textWrap: "nowrap", children: [
+                  " Group by ",
+                  t.header ?? t.key
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function $(u) {
+  const { children: t, column: e, style: i, ...n } = u, { key: o, pin: r, left: d, right: a, isEdge: c, align: h, widthVarName: m, leftVarName: f, rightVarName: y } = e, v = o === E, R = o === L, k = o === x, G = r === "LEFT", w = r === "RIGHT", P = G || w, W = G && d === 0, D = G && c, M = w && c, S = w && a === 0, O = !k && !v;
+  return /* @__PURE__ */ g(
+    b,
+    {
+      component: "datagrid.cell",
+      props: { role: "cell" },
+      variant: { isRowNumber: R, isRowSelection: k, isPinned: P, isFirstLeftPinned: W, isLastLeftPinned: D, isFirstRightPinned: M, isLastRightPinned: S },
+      jc: h,
+      style: {
+        width: `var(${m})`,
+        left: G ? `var(${f})` : void 0,
+        right: w ? `var(${y})` : void 0,
+        ...i
+      },
+      ...n,
+      children: [
+        O && /* @__PURE__ */ s(p, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: t }),
+        k && t
+      ]
+    }
+  );
+}
+function Lt(u) {
+  const { row: t } = u;
+  return /* @__PURE__ */ s(b, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: t.cells.map((e) => {
+    if (e.column.key === C)
+      return /* @__PURE__ */ s(
+        $,
+        {
+          column: e.column,
+          style: {
+            width: `var(${e.column.groupColumnWidthVarName})`
+          },
+          br: t.groupingColumn.pin === "LEFT" ? 1 : void 0,
+          gridColumn: t.groupingColumnGridColumn,
+          pl: 4 * t.depth,
+          children: /* @__PURE__ */ s(_, { display: "contents", clean: !0, onClick: () => t.toggleRow(), cursor: "pointer", children: e.value })
+        },
+        e.column.key
+      );
+    if (e.column.key === x)
+      return /* @__PURE__ */ s($, { column: e.column, children: /* @__PURE__ */ s(V, { m: 1 }) }, e.column.key);
+    if (e.column.pin !== t.groupingColumn.pin || e.column.key === E || e.column.key === L)
+      return /* @__PURE__ */ s($, { column: e.column, children: e.value }, e.column.key);
+  }) });
+}
+function Tt(u) {
+  const { row: t } = u;
+  return /* @__PURE__ */ s(b, { className: "grid-row", display: "contents", props: { role: "row" }, children: t.cells.map((e) => /* @__PURE__ */ s($, { column: e.column, children: e.column.key === x ? /* @__PURE__ */ s(V, {}) : e.value }, e.column.key)) });
+}
+function Bt(u) {
+  const t = vt(u), { isResizeMode: e } = t, i = N(() => (console.log("render - headers"), t.headerRows.value.map((r) => r.map((d) => /* @__PURE__ */ s(Rt, { column: d }, d.uniqueKey)))), [t.headerRows.value]), n = ut(null), o = at(
+    j.throttle((r) => {
+      var d;
+      (d = n.current) == null || d.setScrollTop(r.target.scrollTop);
+    }, 100),
+    [n.current]
+  );
+  return console.log("render - data grid"), /* @__PURE__ */ g(p, { component: "datagrid", style: t.sizes.value, props: { role: "presentation" }, children: [
+    /* @__PURE__ */ s(p, { p: 3, bb: 1, borderColor: "gray-400", children: t.groupColumns.length > 0 ? t.groupColumns.join(" > ") : "No grouping" }),
+    /* @__PURE__ */ g(p, { overflowX: "scroll", props: { onScroll: o }, children: [
+      /* @__PURE__ */ s(X, { component: "datagrid.header", variant: { isResizeMode: e }, style: { gridTemplateColumns: t.gridTemplateColumns.value }, children: i }),
+      /* @__PURE__ */ s(Et, { ref: n, grid: t })
+    ] }),
+    /* @__PURE__ */ g(p, { p: 3, bgColor: "gray-200", children: [
+      "Rows: ",
+      t.rows.value.length
+    ] })
+  ] });
+}
+const Y = 10, J = 25, bt = Y + J * 2;
+function xt(u, t) {
+  const { grid: e } = u, i = gt * e.ROW_HEIGHT, [n, o] = H(0), r = Math.max(0, Math.floor(n / i) - J), d = N(() => (console.log("render - rows"), e.flatRows.value.take(bt, r).map((h) => h instanceof q ? /* @__PURE__ */ s(Lt, { row: h }, h.rowKey) : /* @__PURE__ */ s(Tt, { row: h }, h.rowKey))), [e.flatRows.value, r]);
+  ht(t, () => ({
+    setScrollTop: o
+  }));
+  const a = e.flatRows.value.length;
+  return /* @__PURE__ */ s(p, { height: e.ROW_HEIGHT * Y, children: /* @__PURE__ */ s(
+    p,
+    {
+      style: {
+        height: `${a * i}px`
+      },
+      children: /* @__PURE__ */ s(
+        X,
+        {
+          props: { role: "presentation" },
+          width: "max-content",
+          minWidth: "fit",
+          transition: "none",
+          style: {
+            transform: `translateY(${r * i}px)`,
+            gridTemplateColumns: e.gridTemplateColumns.value
+          },
+          children: d
+        }
+      )
+    }
+  ) });
+}
+const Et = lt(xt);
 export {
-  x as default
+  Bt as default
 };