@cronocode/react-box 3.0.20 → 3.1.1

package/components/dataGrid.mjs

@@ -1,56 +1,32 @@
-var ae = Object.defineProperty;
-var ue = (u, e, t) => e in u ? ae(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var a = (u, e, t) => ue(u, typeof e != "symbol" ? e + "" : e, t);
-import { jsx as r, jsxs as c, Fragment as he } from "react/jsx-runtime";
-import g from "../box.mjs";
-import j from "./grid.mjs";
-import de, { useMemo as E, useState as z, forwardRef as ce, useRef as me, useCallback as ge, useImperativeHandle as pe } from "react";
-import { F as q, m as D, A as $, b as Y, D as fe, P as K, G as H, C as Ce, S as we, d as ye } from "../core.mjs";
-import p from "./button.mjs";
+import { jsxs as h, jsx as s, Fragment as Re } from "react/jsx-runtime";
+import m from "../box.mjs";
+import w from "./flex.mjs";
+import ve, { useCallback as P, useMemo as I, useState as U, useRef as xe } from "react";
+import { F as Q, m as M, E as Z, b as ee, D as ke, S as O, P as j, G as F, C as Ge } from "../core.mjs";
+import g from "./button.mjs";
 import V from "./checkbox.mjs";
-import C from "./flex.mjs";
-import J from "./tooltip.mjs";
-import ve from "./baseSvg.mjs";
-import Re from "./textbox.mjs";
-const be = "NO_PIN";
-class G {
+import te from "./grid.mjs";
+import { Span as L } from "./semantics.mjs";
+import ie from "./tooltip.mjs";
+import be from "./baseSvg.mjs";
+function _e(a) {
+  const { grid: e } = a;
+  return /* @__PURE__ */ h(w, { component: "datagrid.bottomBar", children: [
+    /* @__PURE__ */ h(m, { children: [
+      "Rows: ",
+      e.props.data.length
+    ] }),
+    e.props.def.rowSelection && /* @__PURE__ */ h(m, { children: [
+      "Selected: ",
+      e.selectedRows.size
+    ] })
+  ] });
+}
+class D {
   constructor(e, t, i) {
-    a(this, "columns", []);
-    a(this, "_pin");
-    a(this, "_inlineWidth");
-    a(this, "resizeColumn", (e) => {
-      this.grid.isResizeMode = !0;
-      const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, s = this.leafs.sumBy((d) => d.inlineWidth) - this.leafs.length * i, n = this.leafs.toRecord((d) => [d.key, d.inlineWidth]), h = q.throttle((d) => {
-        const w = (d.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
-        this.leafs.forEach((y) => {
-          const k = n[y.key], x = s > 0 ? (k - i) / s * w : w / this.leafs.length, v = Math.round(k + x);
-          y.setWidth(v < i ? i : v);
-        }), this.grid.headerRows.clear(), this.grid.sizes.clear(), o();
-      }, 20), l = new AbortController(), m = (d) => {
-        l.abort(), this.grid.isResizeMode = !1, o();
-      };
-      window.addEventListener("mousemove", h, l), window.addEventListener("mouseup", m, l);
-    });
-    a(this, "pinColumn", (e) => {
-      this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
-    });
-    a(this, "toggleGrouping", () => {
-      this.grid.toggleGrouping(this.key);
-    });
-    a(this, "sortColumn", (...e) => {
-      this.grid.setSortColumn(this.key, ...e);
-    });
-    a(this, "setWidth", (e) => {
-      if (!this.isLeaf)
-        throw new Error("Cannot set width for a parent column.");
-      this._inlineWidth !== e && (this._inlineWidth = e, this.grid.setWidth(this.key, e));
-    });
-    a(this, "toggleVisibility", () => {
-      this.grid.toggleColumnVisibility(this.key);
-    });
-    var o;
-    this.def = e, this.grid = t, this.parent = i, this.columns = ((o = e.columns) == null ? void 0 : o.map((s) => new G(e.pin ? { ...s, pin: e.pin } : s, t, this))) ?? [], this.isLeaf && (this._inlineWidth = this.key == P ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
+    this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((o) => new D(e.pin ? { ...o, pin: e.pin } : o, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == T ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
   }
+  columns = [];
   get visibleColumns() {
     return this.columns.filter((e) => e.isVisible);
   }
@@ -66,6 +42,7 @@ class G {
   get isLeaf() {
     return this.columns.length === 0;
   }
+  _pin;
   get pin() {
     if (this.isLeaf) return this._pin;
     const e = [...new Set(this.columns.flatMap((t) => t.pin))];
@@ -77,7 +54,7 @@ class G {
   getPinnedColumn(e) {
     if (this.hasPin(e)) {
       if (this.isLeaf) return this;
-      const t = new G({ ...this.def, pin: e }, this.grid, this.parent);
+      const t = new D({ ...this.def, pin: e }, this.grid, this.parent);
       return t.columns = this.columns.filter((i) => i.hasPin(e)).map((i) => {
         const o = i.getPinnedColumn(e);
         return o.parent = t, o;
@@ -94,6 +71,7 @@ class G {
     const e = [this];
     return e.push(...this.columns.flatMap((t) => t.flatColumns)), e;
   }
+  _inlineWidth;
   get inlineWidth() {
     if (this.isLeaf) return this._inlineWidth;
     const e = this.visibleColumns.map((t) => t.inlineWidth).filter((t) => typeof t == "number");
@@ -103,22 +81,22 @@ class G {
   get left() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t, left: i } = this.parent, o = t.findIndex((s) => s === this);
-      e += t.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0), e += i;
+      const { visibleColumns: t, left: i } = this.parent, o = t.findIndex((n) => n === this);
+      e += t.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0), e += i;
     } else {
       const t = this.grid.columns.value.left.filter((o) => o.isVisible), i = t.findIndex((o) => o === this);
-      e += t.sumBy((o, s) => s < i ? o.inlineWidth ?? 0 : 0);
+      e += t.sumBy((o, n) => n < i ? o.inlineWidth ?? 0 : 0);
     }
     return e;
   }
   get right() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t } = this.parent, i = t.reverse(), o = i.findIndex((s) => s === this);
-      e += i.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0), e += this.parent.right;
+      const { visibleColumns: t } = this.parent, i = t.reverse(), o = i.findIndex((n) => n === this);
+      e += i.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0), e += this.parent.right;
     } else {
-      const i = this.grid.columns.value.right.filter((s) => s.isVisible).reverse(), o = i.findIndex((s) => s === this);
-      e += i.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0);
+      const i = this.grid.columns.value.right.filter((n) => n.isVisible).reverse(), o = i.findIndex((n) => n === this);
+      e += i.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -131,7 +109,7 @@ class G {
     return (this.pin === "LEFT" ? this.grid.columns.value.left.filter((t) => t.isVisible).at(-1) : this.grid.columns.value.right.filter((t) => t.isVisible).at(0)) === this;
   }
   get isVisible() {
-    return this.isLeaf ? !this.grid.hiddenColumns.includes(this.key) : this.leafs.some((e) => e.isVisible);
+    return this.isLeaf ? !this.grid.hiddenColumns.has(this.key) : this.leafs.some((e) => e.isVisible);
   }
   // Approved
   get leafs() {
@@ -152,29 +130,58 @@ class G {
   get gridRows() {
     return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
   }
+  resizeColumn = (e) => {
+    this.grid.isResizeMode = !0;
+    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, n = this.leafs.sumBy((u) => u.inlineWidth) - this.leafs.length * i, r = this.leafs.toRecord((u) => [u.key, u.inlineWidth]), c = Q.throttle((u) => {
+      const p = (u.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+      this.leafs.forEach((C) => {
+        const x = r[C.key], k = n > 0 ? (x - i) / n * p : p / this.leafs.length, y = Math.round(x + k);
+        C.setWidth(y < i ? i : y);
+      }), this.grid.sizes.clear(), o();
+    }, 40), l = new AbortController(), d = (u) => {
+      l.abort(), this.grid.isResizeMode = !1, o();
+    };
+    window.addEventListener("mousemove", c, l), window.addEventListener("mouseup", d, l);
+  };
+  pinColumn = (e) => {
+    this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
+  };
+  toggleGrouping = () => {
+    this.grid.toggleGrouping(this.key);
+  };
+  sortColumn = (...e) => {
+    this.grid.setSortColumn(this.key, ...e);
+  };
+  setWidth = (e) => {
+    if (!this.isLeaf)
+      throw new Error("Cannot set width for a parent column.");
+    this._inlineWidth !== e && (this._inlineWidth = e, this.grid.setWidth(this.key, e));
+  };
+  toggleVisibility = () => {
+    this.grid.toggleColumnVisibility(this.key);
+  };
 }
-class ke {
+class Le {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === b ? this.row.rowIndex + 1 : this.column.key === f ? `> ${this.row.groupValue} (${this.row.count})` : null;
+    return this.column.key === v ? this.row.rowIndex + 1 : this.column.key === f ? `${this.row.groupValue} (${this.row.count})` : null;
   }
 }
-class Q {
-  constructor(e, t, i, o, s) {
-    a(this, "parentRow");
-    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = o, this.groupValue = s, i.forEach((n) => n.parentRow = this);
+class oe {
+  constructor(e, t, i, o, n) {
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = o, this.groupValue = n, i.forEach((r) => r.parentRow = this);
   }
-  get rowKey() {
-    var e;
-    return `${((e = this.parentRow) == null ? void 0 : e.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
+  get key() {
+    return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
   }
+  parentRow;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new ke(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new Le(this.grid, this, e));
   }
   get expanded() {
-    return this.grid.expandedGroupRow[this.rowKey];
+    return this.grid.expandedGroupRow.has(this.key);
   }
   get depth() {
     return this.parentRow ? this.parentRow.depth + 1 : 0;
@@ -185,235 +192,367 @@ class Q {
   get flatRows() {
     return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
   }
+  get allRows() {
+    return this.rows.flatMap((e) => e.allRows);
+  }
   get groupingColumn() {
     return this.grid.columns.value.leafs.findOrThrow((e) => e.key === f);
   }
   get groupingColumnGridColumn() {
     const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
     return e.sumBy(
-      (o) => o.pin === t.pin && o.key !== P && o.key !== T && o.key !== b ? 1 : 0
+      (o) => o.pin === t.pin && o.key !== T && o.key !== _ && o.key !== v ? 1 : 0
     );
   }
   toggleRow() {
-    this.grid.toggleGroupRow(this.rowKey);
+    this.grid.toggleGroupRow(this.key);
   }
 }
-class xe {
+class De {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === P ? null : this.column.key === b ? this.row.rowIndex + 1 : this.row.row[this.column.key];
+    return this.column.key === T ? null : this.column.key === v ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
-class X {
+class K {
   constructor(e, t, i) {
-    a(this, "parentRow");
-    this.grid = e, this.row = t, this.rowIndex = i, this.grid = e, this.row = t;
-  }
-  get rowKey() {
-    return this.getRowKey();
+    this.grid = e, this.data = t, this.rowIndex = i, this.grid = e, this.data = t, this.key = this.grid.getRowKey(t);
   }
+  key;
+  parentRow;
+  count = 1;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new xe(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new De(this.grid, this, e));
   }
-  get count() {
-    return 1;
+  get selected() {
+    return this.grid.selectedRows.has(this.key);
   }
   get flatRows() {
-    return [this];
+    return this;
   }
-  getRowKey() {
-    var i;
-    const { rowKey: e } = this.grid.props.def, t = e ? typeof e == "function" ? e(this.row) : this.row[e] : this.rowIndex;
-    return `${((i = this.parentRow) == null ? void 0 : i.rowKey) ?? ""}${t}`;
+  get allRows() {
+    return this;
   }
 }
-const P = "empty-cell", b = "row-number-cell", T = "row-selection-cell", f = "grouping-cell";
-class Le {
+const Te = "NO_PIN", T = "empty-cell", v = "row-number-cell", _ = "row-selection-cell", f = "grouping-cell";
+class Be {
   constructor(e, t) {
-    a(this, "_sourceColumns", []);
-    a(this, "columns", D(() => {
-      const e = this._sourceColumns.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this._sourceColumns.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this._sourceColumns.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), o = [...e, ...t, ...i].flatMap((l) => l.flatColumns), s = o.filter((l) => l.isLeaf), n = o.filter((l) => l.isLeaf && l.isVisible), h = o.maxBy((l) => l.death) + 1;
-      return {
-        left: e,
-        middle: t,
-        right: i,
-        flat: o,
-        leafs: s,
-        visibleLeafs: n,
-        maxDeath: h
-      };
-    }));
-    a(this, "headerRows", D(() => this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
-      var o, s, n;
-      const i = t.values.groupBy((h) => h.pin ?? be).toRecord((h) => [h.key, h.values]);
-      return [
-        ...((o = i.LEFT) == null ? void 0 : o.filter((h) => h.isVisible)) ?? [],
-        ...((s = i.NO_PIN) == null ? void 0 : s.filter((h) => h.isVisible)) ?? [],
-        ...((n = i.RIGHT) == null ? void 0 : n.filter((h) => h.isVisible)) ?? []
-      ];
-    })));
-    a(this, "gridTemplateColumns", D(() => {
-      const { visibleLeafs: e } = this.columns.value, t = e.sumBy((n) => n.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, o = i > 0 ? `repeat(${i}, max-content)` : "", s = t > 0 ? `repeat(${t}, max-content)` : "";
-      return `${o} auto ${s}`;
-    }));
-    a(this, "rows", D(() => {
-      let e = this.props.data;
-      if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.length > 0) {
-        const t = (i, o, s) => {
-          const n = o[0];
-          o = o.removeBy((l) => l === n);
-          const h = this.columns.value.leafs.findOrThrow((l) => l.key === n);
-          return this._sortColumn === f && (i = i.sortBy((l) => l[n], this._sortDirection)), i.groupBy((l) => l[n]).map((l) => {
-            let m;
-            o.length > 0 ? m = t(l.values, o, s + 1) : m = l.values.map((w, y) => new X(this, w, s + 1 + y));
-            const d = new Q(this, h, m, s, l.key);
-            return s += 1, d.expanded && (s += m.length), d;
-          });
-        };
-        return t(e, this.groupColumns, 0);
-      }
-      return e.map((t, i) => new X(this, t, i));
-    }));
-    a(this, "flatRows", D(() => this.rows.value.flatMap((e) => e.flatRows)));
-    a(this, "sizes", D(() => {
-      console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
-      const e = this.columns.value.flat.reduce((o, s) => {
-        const { inlineWidth: n } = s;
-        return typeof n == "number" && (o[s.widthVarName] = `${s.inlineWidth}px`), s.pin === "LEFT" && (o[s.leftVarName] = `${s.left}px`), s.pin === "RIGHT" && (o[s.rightVarName] = `${s.right}px`), o;
-      }, {});
-      e[this.leftEdgeVarName] = `${this.leftEdge}px`;
-      const { visibleLeafs: t } = this.columns.value, i = t.find((o) => o.key === f);
-      if (i) {
-        const o = t.sumBy((s) => s.pin === i.pin && s.key !== b && s.key !== T ? s.inlineWidth ?? 0 : 0);
-        e[i.groupColumnWidthVarName] = `${o}px`;
-      }
-      return this.groupColumns.forEach((o) => {
-        const s = this.columns.value.leafs.findOrThrow((n) => n.key === o);
-        e[s.groupColumnWidthVarName] = `${t.sumBy((n) => n.pin === s.pin ? n.inlineWidth ?? 0 : 0)}px`;
-      }), e;
-    }));
-    a(this, "ROW_HEIGHT", 12);
-    a(this, "MIN_COLUMN_WIDTH_PX", 48);
-    a(this, "DEFAULT_COLUMN_WIDTH_PX", 200);
-    a(this, "isResizeMode", !1);
-    a(this, "expandedGroupRow", {});
-    a(this, "leftEdgeVarName", "--left-edge");
-    a(this, "setSortColumn", (e, ...t) => {
-      if (t.length > 0)
-        [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
-      else {
-        const { _sortColumn: i, _sortDirection: o } = this;
-        this._sortColumn = i === e && o === "DESC" ? void 0 : e, this._sortDirection = i === e && o === "ASC" ? "DESC" : "ASC";
-      }
-      this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
-    });
-    a(this, "pinColumn", (e, t) => {
-      const i = this.columns.value.flat.findOrThrow((o) => o.uniqueKey === e);
-      i.pin !== t && i.pinColumn(t), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
-    });
-    a(this, "toggleGrouping", (e) => {
-      this.groupColumns.includes(e) ? (this.groupColumns = this.groupColumns.removeBy((i) => i === e), this.hiddenColumns = this.hiddenColumns.removeBy((i) => i === e)) : (this.groupColumns = this.groupColumns.add(e), this.hiddenColumns = this.hiddenColumns.add(e));
-      const t = this._sourceColumns.find((i) => i.key === f);
-      if (this.groupColumns.length > 0 && !t) {
-        const i = this._sourceColumns.sumBy((o) => o.key === b || o.key === T ? 1 : 0);
-        this._sourceColumns.splice(i, 0, new G({ key: f }, this));
-      } else this.groupColumns.length === 0 && t && (this._sourceColumns = this._sourceColumns.removeBy((i) => i.key === f));
-      this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
-    });
-    a(this, "unGroupAll", () => {
-      this.groupColumns = [], this._sourceColumns = this._sourceColumns.removeBy((e) => e.key === f), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
-    });
-    a(this, "toggleGroupRow", (e) => {
-      e in this.expandedGroupRow ? delete this.expandedGroupRow[e] : this.expandedGroupRow[e] = !0, this.rows.clear(), this.flatRows.clear(), this.update();
-    });
-    a(this, "toggleColumnVisibility", (e) => {
-      this.hiddenColumns.includes(e) ? this.hiddenColumns = this.hiddenColumns.removeBy((t) => t === e) : this.hiddenColumns = this.hiddenColumns.add(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
-    });
-    a(this, "setWidth", (e, t) => {
-      const i = this.columns.value.leafs.find((s) => s.key === e);
-      if (!i)
-        throw new Error("Leaf column not found.");
-      i.setWidth(t), this._sourceColumns.flatMap((s) => s.flatColumns).findOrThrow((s) => s.key === e).setWidth(t);
-    });
-    a(this, "groupColumns", []);
-    a(this, "hiddenColumns", []);
-    a(this, "_sortColumn");
-    a(this, "_sortDirection", "ASC");
-    this.props = e, this.update = t, this._sourceColumns = e.def.columns.map((i) => new G(i, this)), this._sourceColumns.push(new G({ key: P }, this)), this._sourceColumns.unshift(new G({ key: T, width: 50, align: "center" }, this)), this._sourceColumns.unshift(new G({ key: b, pin: "LEFT", width: 70, align: "right" }, this));
+    if (this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor"), this._sourceColumns = e.def.columns.map((i) => new D(i, this)), this._sourceColumns.push(new D({ key: T }, this)), e.def.rowSelection) {
+      const i = typeof e.def.rowSelection == "object" && e.def.rowSelection.pinned ? "LEFT" : void 0;
+      this._sourceColumns.unshift(new D({ key: _, pin: i, width: 50, align: "center" }, this));
+    }
+    if (e.def.showRowNumber) {
+      const i = typeof e.def.showRowNumber == "object" && e.def.showRowNumber.pinned ? "LEFT" : void 0;
+      this._sourceColumns.unshift(new D({ key: v, pin: i, width: 70, align: "right" }, this));
+    }
   }
+  _sourceColumns = [];
+  columns = M(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
+    const e = this._sourceColumns.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this._sourceColumns.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this._sourceColumns.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), o = [...e, ...t, ...i].flatMap((l) => l.flatColumns), n = o.filter((l) => l.isLeaf), r = o.filter((l) => l.isLeaf && l.isVisible), c = o.maxBy((l) => l.death) + 1;
+    return {
+      left: e,
+      middle: t,
+      right: i,
+      flat: o,
+      leafs: n,
+      visibleLeafs: r,
+      maxDeath: c
+    };
+  });
+  headerRows = M(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid headerRows memo"), this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
+    const i = t.values.groupBy((o) => o.pin ?? Te).toRecord((o) => [o.key, o.values]);
+    return [
+      ...i.LEFT?.filter((o) => o.isVisible) ?? [],
+      ...i.NO_PIN?.filter((o) => o.isVisible) ?? [],
+      ...i.RIGHT?.filter((o) => o.isVisible) ?? []
+    ];
+  })));
+  gridTemplateColumns = M(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid gridTemplateColumns memo");
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((r) => r.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, o = i > 0 ? `repeat(${i}, max-content)` : "", n = t > 0 ? `repeat(${t}, max-content)` : "";
+    return `${o} auto ${n}`;
+  });
+  rows = M(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
+    let e = this.props.data;
+    if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
+      const t = (i, o, n) => {
+        const r = o.values().next().value;
+        o.delete(r);
+        const c = this.columns.value.leafs.findOrThrow((l) => l.key === r);
+        return this._sortColumn === f && (i = i.sortBy((l) => l[r], this._sortDirection)), i.groupBy((l) => l[r]).map((l) => {
+          let d;
+          o.size > 0 ? d = t(l.values, new Set(o), n + 1) : d = l.values.map((p, C) => new K(this, p, n + 1 + C));
+          const u = new oe(this, c, d, n, l.key);
+          return n += 1, u.expanded && (n += d.length), u;
+        });
+      };
+      return t(e, new Set(this.groupColumns), 0);
+    }
+    return e.map((t, i) => new K(this, t, i));
+  });
+  flatRows = M(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
+  get rowHeight() {
+    return this.props.def.rowHeight ?? this.DEFAULT_ROW_HEIGHT_PX;
+  }
+  sizes = M(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
+    const e = this.columns.value.flat.reduce((o, n) => {
+      const { inlineWidth: r } = n;
+      return typeof r == "number" && (o[n.widthVarName] = `${n.inlineWidth}px`), n.pin === "LEFT" && (o[n.leftVarName] = `${n.left}px`), n.pin === "RIGHT" && (o[n.rightVarName] = `${n.right}px`), o;
+    }, {});
+    e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.leftEdgeVarName] = `${this.leftEdge}px`;
+    const { visibleLeafs: t } = this.columns.value, i = t.find((o) => o.key === f);
+    if (i) {
+      const o = t.sumBy((n) => n.pin === i.pin && n.key !== v && n.key !== _ ? n.inlineWidth ?? 0 : 0);
+      e[i.groupColumnWidthVarName] = `${o}px`;
+    }
+    return this.groupColumns.forEach((o) => {
+      const n = this.columns.value.leafs.findOrThrow((r) => r.key === o);
+      e[n.groupColumnWidthVarName] = `${t.sumBy((r) => r.pin === n.pin ? r.inlineWidth ?? 0 : 0)}px`;
+    }), e;
+  });
+  DEFAULT_ROW_HEIGHT_PX = 48;
+  MIN_COLUMN_WIDTH_PX = 48;
+  DEFAULT_COLUMN_WIDTH_PX = 200;
+  isResizeMode = !1;
+  expandedGroupRow = /* @__PURE__ */ new Set();
+  selectedRows = /* @__PURE__ */ new Set();
   get leftEdge() {
     return this.columns.value.left.sumBy((e) => e.inlineWidth ?? 0);
   }
   get rightEdge() {
     return this.columns.value.right.sumBy((e) => e.inlineWidth ?? 0);
   }
+  leftEdgeVarName = "--left-edge";
+  rowHeightVarName = "--row-height";
+  _idMap = /* @__PURE__ */ new WeakMap();
+  getRowKey(e) {
+    const { rowKey: t } = this.props.def;
+    return t ? typeof t == "function" ? t(e) : e[t] : (this._idMap.has(e) || this._idMap.set(e, crypto.randomUUID()), this._idMap.get(e));
+  }
+  setSortColumn = (e, ...t) => {
+    if (t.length > 0)
+      [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
+    else {
+      const { _sortColumn: i, _sortDirection: o } = this;
+      this._sortColumn = i === e && o === "DESC" ? void 0 : e, this._sortDirection = i === e && o === "ASC" ? "DESC" : "ASC";
+    }
+    this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  pinColumn = (e, t) => {
+    const i = this.columns.value.flat.findOrThrow((o) => o.uniqueKey === e);
+    i.pin !== t && i.pinColumn(t), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+  };
+  toggleGrouping = (e) => {
+    this.groupColumns = new Set(this.groupColumns), this.hiddenColumns = new Set(this.hiddenColumns), this.groupColumns.has(e) ? (this.groupColumns.delete(e), this.hiddenColumns.delete(e)) : (this.groupColumns.add(e), this.hiddenColumns.add(e));
+    const t = this._sourceColumns.find((i) => i.key === f);
+    if (this.groupColumns.size > 0 && !t) {
+      const i = this._sourceColumns.sumBy((o) => o.key === v || o.key === _ ? 1 : 0);
+      this._sourceColumns.splice(i, 0, new D({ key: f }, this));
+    } else this.groupColumns.size === 0 && t && (this._sourceColumns = this._sourceColumns.removeBy((i) => i.key === f));
+    this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+  };
+  unGroupAll = () => {
+    this.groupColumns = /* @__PURE__ */ new Set(), this._sourceColumns = this._sourceColumns.removeBy((e) => e.key === f), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+  };
+  toggleGroupRow = (e) => {
+    this.expandedGroupRow = new Set(this.expandedGroupRow), this.expandedGroupRow.has(e) ? this.expandedGroupRow.delete(e) : this.expandedGroupRow.add(e), this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  toggleRowSelection = (e) => {
+    this.toggleRowsSelection([e]);
+  };
+  toggleRowsSelection = (e) => {
+    this.selectedRows = new Set(this.selectedRows);
+    const t = e.every((i) => this.selectedRows.has(i));
+    t ? e.forEach((i) => this.selectedRows.delete(i)) : e.forEach((i) => this.selectedRows.add(i)), this.flatRows.clear(), this.update(), this.props.onSelectionChange?.({
+      action: t ? "deselect" : "select",
+      affectedRowKeys: e,
+      selectedRowKeys: Array.from(this.selectedRows),
+      isAllSelected: this.selectedRows.size === this.props.data.length
+    });
+  };
+  toggleSelectAllRows = () => {
+    this.toggleRowsSelection(this.props.data.map((e) => this.getRowKey(e)));
+  };
+  toggleColumnVisibility = (e) => {
+    this.hiddenColumns = new Set(this.hiddenColumns), this.hiddenColumns.has(e) ? this.hiddenColumns.delete(e) : this.hiddenColumns.add(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+  };
+  setWidth = (e, t) => {
+    const i = this.columns.value.leafs.find((n) => n.key === e);
+    if (!i)
+      throw new Error("Leaf column not found.");
+    i.setWidth(t), this._sourceColumns.flatMap((n) => n.flatColumns).findOrThrow((n) => n.key === e).setWidth(t);
+  };
+  groupColumns = /* @__PURE__ */ new Set();
+  hiddenColumns = /* @__PURE__ */ new Set();
+  _sortColumn;
   get sortColumn() {
     return this._sortColumn;
   }
+  _sortDirection = "ASC";
   get sortDirection() {
     return this._sortDirection;
   }
 }
-function _e(u) {
-  const e = E(() => new Le(u, () => i((s) => s + 1)), [u]), [t, i] = z(0);
-  return E(() => Object.create(Object.getPrototypeOf(e), Object.getOwnPropertyDescriptors(e)), [e, t]);
+function W(a) {
+  const { children: e, column: t, style: i, ...o } = a, { key: n, pin: r, left: c, right: l, isEdge: d, align: u, widthVarName: p, leftVarName: C, rightVarName: x } = t, k = n === T, y = n === v, G = n === _, b = r === "LEFT", R = r === "RIGHT", B = b || R, S = b && c === 0, E = b && d, H = R && d, z = R && l === 0, A = !G && !k;
+  return /* @__PURE__ */ h(
+    w,
+    {
+      component: "datagrid.cell",
+      props: { role: "cell" },
+      variant: { isPinned: B, isFirstLeftPinned: S, isLastLeftPinned: E, isFirstRightPinned: H, isLastRightPinned: z, isRowNumber: y, isRowSelection: G },
+      jc: u,
+      style: {
+        width: `var(${p})`,
+        height: `var(${t.grid.rowHeightVarName})`,
+        left: b ? `var(${C})` : void 0,
+        right: R ? `var(${x})` : void 0,
+        ...i
+      },
+      ...o,
+      children: [
+        A && /* @__PURE__ */ s(m, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
+        G && e
+      ]
+    }
+  );
 }
-function Te(u) {
-  const { column: e } = u, { key: t, pin: i, left: o, right: s, isEdge: n, isLeaf: h, leafs: l, grid: m, header: d, gridRows: w, widthVarName: y, leftVarName: k, rightVarName: x, inlineWidth: v } = e, L = t === P, _ = t === f, R = t === b, W = t === T, I = i === "LEFT", B = i === "RIGHT", S = I || i === "RIGHT", M = I && o === 0, O = I && n, ie = B && n, se = B && s === 0, A = h && !L && !R && !W, oe = h ? 1 : l.length, re = !R && !W, F = !R && !W, ne = E(() => {
-    if (R) return null;
-    if (W) return /* @__PURE__ */ r(V, { m: 1 });
-    if (_) {
-      if (m.groupColumns.length === 1) {
-        const U = m.columns.value.leafs.findOrThrow((le) => le.key === m.groupColumns[0]);
-        return U.header ?? U.key;
-      }
-      return "Group";
+W.displayName = "DataGridCell";
+function ne(a) {
+  const { row: e } = a, t = P(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((i) => i.key));
+  }, []);
+  return /* @__PURE__ */ s(w, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((i) => {
+    const { key: o, pin: n, groupColumnWidthVarName: r } = i.column, c = n === "RIGHT";
+    if (o === f)
+      return /* @__PURE__ */ s(
+        W,
+        {
+          column: i.column,
+          style: {
+            width: `var(${r})`,
+            right: c ? "0" : void 0
+          },
+          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
+          gridColumn: e.groupingColumnGridColumn,
+          pl: 4 * e.depth,
+          children: /* @__PURE__ */ h(g, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+            /* @__PURE__ */ s(Z, { fill: "currentColor", width: "14px", height: "14px", rotate: e.expanded ? 0 : -90 }),
+            i.value
+          ] })
+        },
+        o
+      );
+    if (o === _) {
+      const l = e.allRows, d = l.every((p) => p.selected), u = !d && l.some((p) => p.selected);
+      return /* @__PURE__ */ s(W, { column: i.column, children: /* @__PURE__ */ s(V, { variant: "datagrid", m: 1, checked: d, indeterminate: u, onChange: t }) }, o);
     }
-    return d ?? t;
-  }, [m.groupColumns]);
-  return /* @__PURE__ */ r(
-    C,
+    if (n !== e.groupingColumn.pin || o === T || o === v)
+      return /* @__PURE__ */ s(W, { column: i.column, children: i.value }, o);
+  }) });
+}
+ne.displayName = "DataGridGroupRow";
+function se(a) {
+  const { row: e } = a, t = P((i) => {
+    e.grid.toggleRowSelection(e.key);
+  }, []);
+  return /* @__PURE__ */ s(w, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ s(W, { column: i.column, children: i.column.key === _ ? /* @__PURE__ */ s(V, { variant: "datagrid", checked: e.selected, onChange: t }) : i.value }, i.column.key)) });
+}
+se.displayName = "DataGridRow";
+const Se = 10, J = 20;
+function re(a) {
+  const { grid: e, scrollTop: t } = a, i = e.flatRows.value.length, o = Math.max(0, Math.floor(t / e.rowHeight) - J), n = e.props.def.visibleRowsCount ?? Se, r = I(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows");
+    const c = n + J * 2;
+    return e.flatRows.value.take(c, o).map((d) => d instanceof oe ? /* @__PURE__ */ s(ne, { row: d }, d.key) : /* @__PURE__ */ s(se, { row: d }, d.key));
+  }, [e.flatRows.value, o]);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ s(m, { style: { height: e.rowHeight * n + e.rowHeight / 5 }, children: /* @__PURE__ */ s(
+    m,
     {
-      component: "datagrid.header.cell",
-      variant: { isRowNumber: R, isPinned: S, isFirstLeftPinned: M, isLastLeftPinned: O, isFirstRightPinned: ie, isLastRightPinned: se, isSortable: A },
-      gridRow: w,
-      gridColumn: oe,
       style: {
-        width: `var(${y})`,
-        left: I ? `var(${k})` : void 0,
-        right: B ? `var(${x})` : void 0
+        height: `${i * e.rowHeight}px`
       },
-      children: !L && /* @__PURE__ */ c(he, { children: [
-        /* @__PURE__ */ r(C, { width: "fit", height: "fit", jc: e.align, props: { onClick: A ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ c(
-          C,
-          {
-            overflow: "hidden",
-            position: h ? void 0 : "sticky",
-            ai: "center",
-            transition: "none",
-            pl: e.align ? void 0 : 4,
-            style: {
-              left: i ? void 0 : `var(${m.leftEdgeVarName})`
-            },
-            children: [
-              /* @__PURE__ */ r(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ne }),
-              t === m.sortColumn && /* @__PURE__ */ r(g, { pl: (v ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r($, { width: "16px", rotate: m.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
-              F && /* @__PURE__ */ r(g, { minWidth: 10 })
-            ]
-          }
-        ) }),
-        re && /* @__PURE__ */ r(Ge, { column: e }),
-        F && /* @__PURE__ */ r(Ee, { column: e })
-      ] })
+      children: /* @__PURE__ */ s(
+        te,
+        {
+          width: "max-content",
+          minWidth: "fit",
+          transition: "none",
+          style: {
+            transform: `translateY(${o * e.rowHeight}px)`,
+            gridTemplateColumns: e.gridTemplateColumns.value
+          },
+          children: r
+        }
+      )
     }
-  );
+  ) });
 }
-function Ge(u) {
-  const { column: e } = u;
-  return /* @__PURE__ */ r(
-    C,
+re.displayName = "DataGridBody";
+function le(a) {
+  const { column: e } = a, [t, i, o] = ee({ hideOnScroll: !0, event: "mousedown" }), [n, r] = U({ top: 0, left: 0 }), c = I(() => n.left > window.innerWidth / 2, [n.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), d = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), u = e.isLeaf && e.grid.sortColumn === e.key, p = e.pin !== "LEFT", C = e.pin !== "RIGHT", x = !!e.pin, k = e.isLeaf && e.key !== f, y = e.isLeaf && e.key === f, G = l || d || u, b = p || C || x;
+  return /* @__PURE__ */ s(w, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ s(ke, { fill: "currentColor" }) }),
+    t && /* @__PURE__ */ h(
+      ie,
+      {
+        component: "datagrid.header.cell.contextMenu.tooltip",
+        variant: { openLeft: c },
+        onPositionChange: r,
+        ref: o,
+        children: [
+          l && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(O, { width: "100%", fill: "currentColor" }) }),
+            "Sort Ascending"
+          ] }),
+          d && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(O, { width: "100%", fill: "currentColor", rotate: 180 }) }),
+            "Sort Descending"
+          ] }),
+          u && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+            /* @__PURE__ */ s(m, { width: 4 }),
+            "Clear Sort"
+          ] }),
+          G && (b || k || y) && /* @__PURE__ */ s(m, { bb: 1, my: 2, borderColor: "gray-300" }),
+          p && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(j, { width: "100%", fill: "currentColor" }) }),
+            "Pin Left"
+          ] }),
+          C && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(j, { width: "100%", fill: "currentColor", rotate: -90 }) }),
+            "Pin Right"
+          ] }),
+          x && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+            /* @__PURE__ */ s(m, { width: 4 }),
+            "Unpin"
+          ] }),
+          G && b && (k || y) && /* @__PURE__ */ s(m, { bb: 1, my: 2, borderColor: "gray-300" }),
+          k && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
+            /* @__PURE__ */ h(m, { textWrap: "nowrap", children: [
+              "Group by ",
+              e.header ?? e.key
+            ] })
+          ] }),
+          y && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.grid.unGroupAll, children: [
+            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
+            /* @__PURE__ */ s(m, { textWrap: "nowrap", children: "Un-Group All" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+le.displayName = "DataGridHeaderCellContextMenu";
+function ae(a) {
+  const { column: e } = a;
+  return /* @__PURE__ */ s(
+    w,
     {
       height: "fit",
       ai: "center",
@@ -421,364 +560,160 @@ function Ge(u) {
       right: e.pin === "RIGHT" ? void 0 : 0,
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
-      children: /* @__PURE__ */ r(
-        g,
+      children: /* @__PURE__ */ s(
+        m,
         {
           cursor: "col-resize",
           px: 0.75,
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ r(g, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
+          children: /* @__PURE__ */ s(m, { component: "datagrid.header.cell.resizer" })
         }
       )
     }
   );
 }
-function Ee(u) {
-  const { column: e } = u, [t, i, o] = Y({ hideOnScroll: !0, event: "mousedown" }), [s, n] = z({ top: 0, left: 0 }), h = E(() => s.left > window.innerWidth / 2, [s.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), m = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), d = e.isLeaf && e.grid.sortColumn === e.key, w = e.pin !== "LEFT", y = e.pin !== "RIGHT", k = !!e.pin, x = e.isLeaf && e.key !== f, v = e.isLeaf && e.key === f, L = l || m || d, _ = w || y || k;
-  return /* @__PURE__ */ r(C, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ c(
-    p,
+ae.displayName = "DataGridHeaderCellResizer";
+function de(a) {
+  const { column: e } = a, { key: t, pin: i, left: o, right: n, isEdge: r, isLeaf: c, leafs: l, grid: d, header: u, gridRows: p, widthVarName: C, leftVarName: x, rightVarName: k, inlineWidth: y } = e, G = t === T, b = t === f, R = t === v, B = t === _, S = i === "LEFT", E = i === "RIGHT", H = S || i === "RIGHT", z = S && o === 0, A = S && r, ge = E && r, fe = E && n === 0, X = c && !G && !R && !B, we = c ? 1 : l.length, Ce = !R && !B, q = !R && !B, Y = P(() => {
+    d.toggleSelectAllRows();
+  }, []), ye = I(() => {
+    if (R) return null;
+    if (B) {
+      const N = d.selectedRows.size === d.props.data.length, $ = !N && d.selectedRows.size > 0;
+      return /* @__PURE__ */ s(V, { variant: "datagrid", m: 1, indeterminate: $, checked: N, onChange: Y });
+    }
+    if (b) {
+      if (d.groupColumns.size === 1) {
+        const N = d.columns.value.leafs.findOrThrow(($) => $.key === d.groupColumns.values().next().value);
+        return N.header ?? N.key;
+      }
+      return "Group";
+    }
+    return u ?? t;
+  }, [d.groupColumns, d.selectedRows, Y]);
+  return /* @__PURE__ */ s(
+    w,
     {
-      clean: !0,
-      onClick: () => i(!t),
-      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__ */ r(fe, { fill: "violet-950" }),
-        t && /* @__PURE__ */ c(
-          J,
+      component: "datagrid.header.cell",
+      variant: { isRowNumber: R, isPinned: H, isFirstLeftPinned: z, isLastLeftPinned: A, isFirstRightPinned: ge, isLastRightPinned: fe, isSortable: X },
+      gridRow: p,
+      gridColumn: we,
+      style: {
+        width: `var(${C})`,
+        left: S ? `var(${x})` : void 0,
+        right: E ? `var(${k})` : void 0
+      },
+      children: !G && /* @__PURE__ */ h(Re, { children: [
+        /* @__PURE__ */ s(w, { width: "fit", height: "fit", jc: e.align, props: { onClick: X ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ h(
+          w,
           {
-            bgColor: "white",
-            width: 56,
-            b: 1,
-            borderColor: "gray-300",
-            borderRadius: 1,
-            display: "flex",
-            d: "column",
-            mt: 4,
-            py: 2,
             overflow: "hidden",
-            translateX: h ? -55 : -5,
-            onPositionChange: n,
-            ref: o,
-            shadow: "medium-shadow",
+            position: c ? void 0 : "sticky",
+            ai: "center",
+            transition: "none",
+            pl: e.align ? void 0 : 4,
+            style: {
+              left: i ? void 0 : `var(${d.leftEdgeVarName})`
+            },
             children: [
-              l && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.sortColumn("ASC"),
-                  children: [
-                    /* @__PURE__ */ r($, { width: "1rem", fill: "violet-950" }),
-                    "Sort Ascending"
-                  ]
-                }
-              ),
-              m && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.sortColumn("DESC"),
-                  children: [
-                    /* @__PURE__ */ r($, { width: "1rem", fill: "violet-950", rotate: 180 }),
-                    "Sort Descending"
-                  ]
-                }
-              ),
-              d && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.sortColumn(void 0),
-                  children: [
-                    /* @__PURE__ */ r(g, { width: 4 }),
-                    "Clear Sort"
-                  ]
-                }
-              ),
-              L && (_ || x || v) && /* @__PURE__ */ r(g, { bb: 1, my: 2, borderColor: "gray-300" }),
-              w && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.pinColumn("LEFT"),
-                  children: [
-                    /* @__PURE__ */ r(K, { width: "1rem", fill: "violet-950" }),
-                    "Pin Left"
-                  ]
-                }
-              ),
-              y && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.pinColumn("RIGHT"),
-                  children: [
-                    /* @__PURE__ */ r(K, { width: "1rem", fill: "violet-950", rotate: -90 }),
-                    "Pin Right"
-                  ]
-                }
-              ),
-              k && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: () => e.pinColumn(),
-                  children: [
-                    /* @__PURE__ */ r(g, { width: 4 }),
-                    "Unpin"
-                  ]
-                }
-              ),
-              L && _ && (x || v) && /* @__PURE__ */ r(g, { bb: 1, my: 2, borderColor: "gray-300" }),
-              x && /* @__PURE__ */ c(
-                p,
-                {
-                  clean: !0,
-                  display: "flex",
-                  ai: "center",
-                  gap: 2,
-                  p: 3,
-                  cursor: "pointer",
-                  hover: { bgColor: "gray-200" },
-                  onClick: e.toggleGrouping,
-                  children: [
-                    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
-                    /* @__PURE__ */ c(g, { textWrap: "nowrap", children: [
-                      " Group by ",
-                      e.header ?? e.key
-                    ] })
-                  ]
-                }
-              ),
-              v && /* @__PURE__ */ c(p, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: e.grid.unGroupAll, children: [
-                /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
-                /* @__PURE__ */ r(g, { textWrap: "nowrap", children: " Un-Group All" })
-              ] })
+              /* @__PURE__ */ s(m, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ye }),
+              t === d.sortColumn && /* @__PURE__ */ s(m, { pl: (y ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ s(O, { width: "16px", rotate: d.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              q && /* @__PURE__ */ s(m, { minWidth: 10 })
             ]
           }
-        )
-      ]
-    }
-  ) });
-}
-function N(u) {
-  const { children: e, column: t, style: i, ...o } = u, { key: s, pin: n, left: h, right: l, isEdge: m, align: d, widthVarName: w, leftVarName: y, rightVarName: k } = t, x = s === P, v = s === b, L = s === T, _ = n === "LEFT", R = n === "RIGHT", W = _ || R, I = _ && h === 0, B = _ && m, S = R && m, M = R && l === 0, O = !L && !x;
-  return /* @__PURE__ */ c(
-    C,
-    {
-      component: "datagrid.cell",
-      props: { role: "cell" },
-      variant: { isPinned: W, isFirstLeftPinned: I, isLastLeftPinned: B, isFirstRightPinned: S, isLastRightPinned: M, isRowNumber: v, isRowSelection: L },
-      jc: d,
-      style: {
-        width: `var(${w})`,
-        left: _ ? `var(${y})` : void 0,
-        right: R ? `var(${k})` : void 0,
-        ...i
-      },
-      ...o,
-      children: [
-        O && /* @__PURE__ */ r(g, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
-        L && e
-      ]
+        ) }),
+        Ce && /* @__PURE__ */ s(ae, { column: e }),
+        q && /* @__PURE__ */ s(le, { column: e })
+      ] })
     }
   );
 }
-function Pe(u) {
-  const { row: e } = u;
-  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((t) => {
-    const { key: i, pin: o, groupColumnWidthVarName: s } = t.column, n = o === "RIGHT";
-    if (i === f)
-      return /* @__PURE__ */ r(
-        N,
-        {
-          column: t.column,
-          style: {
-            width: `var(${s})`,
-            right: n ? "0" : void 0
-          },
-          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
-          gridColumn: e.groupingColumnGridColumn,
-          pl: 4 * e.depth,
-          children: /* @__PURE__ */ r(p, { display: "contents", clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", children: t.value })
-        },
-        i
-      );
-    if (i === T)
-      return /* @__PURE__ */ r(N, { column: t.column, children: /* @__PURE__ */ r(V, { m: 1 }) }, i);
-    if (o !== e.groupingColumn.pin || i === P || i === b)
-      return /* @__PURE__ */ r(N, { column: t.column, children: t.value }, i);
-  }) });
+de.displayName = "DataGridHeaderCell";
+function he(a) {
+  const { grid: e } = a, { isResizeMode: t } = e;
+  return /* @__PURE__ */ s(te, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: e.headerRows.value.map((i) => i.map((o) => /* @__PURE__ */ s(de, { column: o }, o.uniqueKey))) });
 }
-function We(u) {
-  const { row: e } = u;
-  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(N, { column: t.column, children: t.column.key === T ? /* @__PURE__ */ r(V, {}) : t.value }, t.column.key)) });
+he.displayName = "DataGridHeader";
+function ce(a) {
+  const { grid: e } = a, [t, i] = U(0), o = P(
+    Q.throttle((n) => {
+      i(n.target.scrollTop);
+    }, 100),
+    []
+  );
+  return /* @__PURE__ */ h(m, { overflowX: "scroll", props: { onScroll: o }, children: [
+    /* @__PURE__ */ s(he, { grid: e }),
+    /* @__PURE__ */ s(re, { grid: e, scrollTop: t })
+  ] });
 }
-function Ie(u) {
-  const { grid: e } = u, t = E(() => e.groupColumns.length === 0 ? null : e.groupColumns.map((i, o) => {
-    const s = e.columns.value.leafs.findOrThrow((n) => n.key === i);
-    return /* @__PURE__ */ c(de.Fragment, { children: [
-      ">",
-      /* @__PURE__ */ c(C, { component: "datagrid.columnGroups.item", children: [
-        s.header ?? s.key,
-        /* @__PURE__ */ r(p, { component: "datagrid.columnGroups.item.icon", onClick: () => e.toggleGrouping(s.key), children: /* @__PURE__ */ r(Ce, { fill: "currentColor", width: "100%" }) })
-      ] })
-    ] }, i);
-  }), [e.groupColumns]);
-  return /* @__PURE__ */ c(C, { component: "datagrid.columnGroups", position: "relative", children: [
-    /* @__PURE__ */ r(De, { grid: e }),
-    t && /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }),
-    t,
-    /* @__PURE__ */ c(C, { position: "absolute", justifySelf: "flex-end", right: 2, top: 2, className: "parent", children: [
-      /* @__PURE__ */ r(C, { position: "absolute", width: 8, height: 8, right: 0, jc: "center", children: /* @__PURE__ */ r(we, { fill: "violet-950", width: "1rem" }) }),
-      /* @__PURE__ */ r(Re, { placeholder: "Search...", height: 8, width: 50, zIndex: 1, bgColor: "transparent" })
-    ] })
+ce.displayName = "DataGridContent";
+function ue(a) {
+  const { grid: e } = a;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ h(w, { component: "datagrid.topBar.columnGroups", children: [
+    /* @__PURE__ */ s(L, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
+    Array.from(e.groupColumns, (t) => {
+      const i = e.columns.value.leafs.findOrThrow((o) => o.key === t);
+      return /* @__PURE__ */ h(ve.Fragment, { children: [
+        /* @__PURE__ */ s(Z, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ h(w, { component: "datagrid.topBar.columnGroups.item", children: [
+          i.header ?? i.key,
+          /* @__PURE__ */ s(g, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ s(Ge, { fill: "currentColor", width: "100%" }) })
+        ] })
+      ] }, t);
+    })
   ] });
 }
-function De(u) {
-  const { grid: e } = u, [t, i, o] = Y({ event: "mousedown" }), s = E(
+ue.displayName = "DataGridColumnGroups";
+function me(a) {
+  const { grid: e } = a, [t, i, o] = ee({ event: "mousedown" }), n = I(
     () => e.columns.value.leafs.filter(
-      (n) => ![P, b, T, f].includes(n.key)
+      (r) => ![T, v, _, f].includes(r.key)
     ),
     [e.columns.value.leafs]
   );
-  return /* @__PURE__ */ c(p, { clean: !0, cursor: "pointer", p: 1, hover: { bgColor: "gray-200", borderRadius: 1 }, onClick: () => i(!t), children: [
-    /* @__PURE__ */ r(ve, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...u, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-    t && /* @__PURE__ */ r(
-      J,
+  return /* @__PURE__ */ h(g, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ s(be, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...a, children: /* @__PURE__ */ s("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+    t && /* @__PURE__ */ s(ie, { component: "datagrid.topBar.contextMenu.tooltip", ref: o, children: n.map((r) => /* @__PURE__ */ h(
+      g,
       {
-        bgColor: "white",
-        width: 56,
-        b: 1,
-        borderColor: "gray-300",
-        borderRadius: 1,
-        display: "flex",
-        d: "column",
-        mt: 4,
-        py: 2,
-        translateX: -1,
-        shadow: "medium-shadow",
-        ref: o,
-        overflow: "auto",
-        maxHeight: 100,
-        children: s.map((n) => /* @__PURE__ */ c(
-          p,
-          {
-            clean: !0,
-            display: "flex",
-            gap: 2,
-            p: 3,
-            cursor: "pointer",
-            hover: { bgColor: "gray-200" },
-            onClick: (h) => {
-              h.stopPropagation(), n.toggleVisibility();
-            },
-            children: [
-              /* @__PURE__ */ r(V, { checked: n.isVisible, onChange: () => {
-              }, focus: { outline: 0 } }),
-              n.header ?? n.key
-            ]
-          },
-          n.key
-        ))
-      }
-    )
+        component: "datagrid.topBar.contextMenu.tooltip.item",
+        onClick: (c) => {
+          c.stopPropagation(), r.toggleVisibility();
+        },
+        children: [
+          /* @__PURE__ */ s(V, { variant: "datagrid", checked: r.isVisible, onChange: () => {
+          }, focus: { outline: 0 } }),
+          r.header ?? r.key
+        ]
+      },
+      r.key
+    )) })
   ] });
 }
-function Be(u) {
-  const e = _e(u), { isResizeMode: t } = e, i = E(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render headers"), e.headerRows.value.map((n) => n.map((h) => /* @__PURE__ */ r(Te, { column: h }, h.uniqueKey)))), [e.headerRows.value]), o = me(null), s = ge(
-    q.throttle((n) => {
-      var h;
-      (h = o.current) == null || h.setScrollTop(n.target.scrollTop);
-    }, 100),
-    [o.current]
-  );
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ c(g, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
-    /* @__PURE__ */ r(Ie, { grid: e }),
-    /* @__PURE__ */ c(g, { overflowX: "scroll", props: { onScroll: s }, children: [
-      /* @__PURE__ */ r(j, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: i }),
-      /* @__PURE__ */ r(te, { ref: o, grid: e })
-    ] }),
-    /* @__PURE__ */ c(g, { p: 3, bgColor: "gray-200", bt: 1, borderColor: "gray-400", children: [
-      "Rows: ",
-      u.data.length
-    ] })
+me.displayName = "DataGridTopBarContextMenu";
+function pe(a) {
+  const { grid: e } = a;
+  return /* @__PURE__ */ h(w, { component: "datagrid.topBar", position: "relative", children: [
+    /* @__PURE__ */ s(me, { grid: e }),
+    /* @__PURE__ */ s(ue, { grid: e })
   ] });
 }
-Be.displayName = "DataGrid";
-const Z = 10, ee = 25, Ne = Z + ee * 2;
-function Ve(u, e) {
-  const { grid: t } = u, i = ye * t.ROW_HEIGHT, [o, s] = z(0), n = Math.max(0, Math.floor(o / i) - ee), h = E(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), t.flatRows.value.take(Ne, n).map((d) => d instanceof Q ? /* @__PURE__ */ r(Pe, { row: d }, d.rowKey) : /* @__PURE__ */ r(We, { row: d }, d.rowKey))), [t.flatRows.value, n]);
-  pe(e, () => ({
-    setScrollTop: s
-  }));
-  const l = t.flatRows.value.length;
-  return /* @__PURE__ */ r(g, { height: t.ROW_HEIGHT * Z + 4, children: /* @__PURE__ */ r(
-    g,
-    {
-      style: {
-        height: `${l * i}px`
-      },
-      children: /* @__PURE__ */ r(
-        j,
-        {
-          width: "max-content",
-          minWidth: "fit",
-          transition: "none",
-          style: {
-            transform: `translateY(${n * i}px)`,
-            gridTemplateColumns: t.gridTemplateColumns.value
-          },
-          children: h
-        }
-      )
-    }
-  ) });
+pe.displayName = "DataGridTopBar";
+function Me(a) {
+  const [e, t] = U(0), i = xe();
+  return i.current || (i.current = new Be(a, () => t((o) => o + 1))), i.current;
+}
+function Ee(a) {
+  const e = Me(a);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ h(m, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    /* @__PURE__ */ s(pe, { grid: e }),
+    /* @__PURE__ */ s(ce, { grid: e }),
+    /* @__PURE__ */ s(_e, { grid: e })
+  ] });
 }
-const te = ce(Ve);
-te.displayName = "Rows";
+Ee.displayName = "DataGrid";
 export {
-  Be as default
+  Ee as default
 };