@cronocode/react-box 3.0.21 → 3.1.2

package/components/dataGrid.mjs

@@ -1,56 +1,40 @@
-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 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 { jsxs as u, jsx as r, Fragment as Ge } from "react/jsx-runtime";
+import h from "../box.mjs";
+import g from "./flex.mjs";
+import be, { useCallback as W, useMemo as H, useState as O, useRef as ke, useEffect as z } from "react";
+import { F as J, m as S, E as Q, b as Z, D as Le, S as A, P as q, G as $, C as De } from "../core.mjs";
+import ee from "./grid.mjs";
+import I from "./checkbox.mjs";
+import f from "./button.mjs";
+import { Span as L } from "./semantics.mjs";
+import te from "./tooltip.mjs";
+import Te from "./baseSvg.mjs";
+function Se(a) {
+  const { grid: e } = a;
+  return /* @__PURE__ */ u(g, { component: "datagrid.bottomBar", children: [
+    /* @__PURE__ */ u(h, { children: [
+      "Rows: ",
+      e.props.data.length
+    ] }),
+    e.props.def.rowSelection && /* @__PURE__ */ u(h, { children: [
+      "Selected: ",
+      e.selectedRows.size
+    ] })
+  ] });
+}
+function ie(a) {
+  const { cell: e } = a, t = W(() => {
+    e.grid.toggleRowSelection(e.row.key);
+  }, [e.grid, e.row.key]);
+  return /* @__PURE__ */ r(I, { variant: "datagrid", checked: e.row.selected, onChange: t });
+}
+ie.displayName = "DataGridCellRowSelection";
+const Be = "NO_PIN";
+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((n) => new D(e.pin ? { ...n, pin: e.pin } : n, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == _ ? 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 +50,10 @@ class G {
   get isLeaf() {
     return this.columns.length === 0;
   }
+  get Cell() {
+    return this.def.Cell;
+  }
+  _pin;
   get pin() {
     if (this.isLeaf) return this._pin;
     const e = [...new Set(this.columns.flatMap((t) => t.pin))];
@@ -77,10 +65,10 @@ 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;
+        const n = i.getPinnedColumn(e);
+        return n.parent = t, n;
       }).filter((i) => !!i), t;
     }
   }
@@ -94,6 +82,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 +92,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, n = t.findIndex((o) => o === this);
+      e += t.sumBy((o, s) => s < n ? o.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);
+      const t = this.grid.columns.value.left.filter((n) => n.isVisible), i = t.findIndex((n) => n === this);
+      e += t.sumBy((n, o) => o < i ? n.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(), n = i.findIndex((o) => o === this);
+      e += i.sumBy((o, s) => s < n ? o.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((o) => o.isVisible).reverse(), n = i.findIndex((o) => o === this);
+      e += i.sumBy((o, s) => s < n ? o.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -131,7 +120,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,268 +141,433 @@ 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: n } = this.grid, o = this.leafs.sumBy((c) => c.inlineWidth) - this.leafs.length * i, s = this.leafs.toRecord((c) => [c.key, c.inlineWidth]), m = J.throttle((c) => {
+      const p = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+      this.leafs.forEach((w) => {
+        const v = s[w.key], x = o > 0 ? (v - i) / o * p : p / this.leafs.length, C = Math.round(v + x);
+        w.setWidth(C < i ? i : C);
+      }), this.grid.sizes.clear(), n();
+    }, 40), l = new AbortController(), d = (c) => {
+      l.abort(), this.grid.isResizeMode = !1, n();
+    };
+    window.addEventListener("mousemove", m, 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 _e {
   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 === b ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
-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);
-  }
-  get rowKey() {
-    var e;
-    return `${((e = this.parentRow) == null ? void 0 : e.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
+class Y {
+  constructor(e, t, i) {
+    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 ke(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new _e(this.grid, this, e));
   }
-  get expanded() {
-    return this.grid.expandedGroupRow[this.rowKey];
+  get selected() {
+    return this.grid.selectedRows.has(this.key);
   }
-  get depth() {
-    return this.parentRow ? this.parentRow.depth + 1 : 0;
+  get flatRows() {
+    return this;
   }
-  get count() {
-    return this.rows.sumBy((e) => e.count, 0);
+  get allRows() {
+    return this;
   }
-  get flatRows() {
-    return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
+}
+const _ = "empty-cell", b = "row-number-cell", B = "row-selection-cell", y = "grouping-cell";
+class Me {
+  constructor(e, t) {
+    this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor");
+  }
+  sourceColumns = S(() => {
+    const { def: e } = this.props, t = [];
+    if (this.groupColumns.size > 0 && t.push(new D({ key: y }, this)), t.push(...e.columns.map((i) => new D(i, this))), t.push(new D({ key: _, Cell: () => null }, this)), e.rowSelection) {
+      const i = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "LEFT" : void 0;
+      t.unshift(
+        new D({ key: B, pin: i, width: 50, align: "center", Cell: ie }, this)
+      );
+    }
+    if (e.showRowNumber) {
+      const i = typeof e.showRowNumber == "object" && e.showRowNumber.pinned ? "LEFT" : void 0;
+      t.unshift(new D({ key: b, pin: i, width: 70, align: "right" }, this));
+    }
+    return t;
+  });
+  columns = S(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
+    const e = this.sourceColumns.value.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this.sourceColumns.value.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this.sourceColumns.value.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), n = [...e, ...t, ...i].flatMap((l) => l.flatColumns), o = n.filter((l) => l.isLeaf), s = n.filter((l) => l.isLeaf && l.isVisible), m = n.maxBy((l) => l.death) + 1;
+    return {
+      left: e,
+      middle: t,
+      right: i,
+      flat: n,
+      leafs: o,
+      visibleLeafs: s,
+      maxDeath: m
+    };
+  });
+  headerRows = S(() => (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((n) => n.pin ?? Be).toRecord((n) => [n.key, n.values]);
+    return [
+      ...i.LEFT?.filter((n) => n.isVisible) ?? [],
+      ...i.NO_PIN?.filter((n) => n.isVisible) ?? [],
+      ...i.RIGHT?.filter((n) => n.isVisible) ?? []
+    ];
+  })));
+  gridTemplateColumns = S(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid gridTemplateColumns memo");
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((s) => s.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, n = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
+    return `${n} auto ${o}`;
+  });
+  rows = S(() => {
+    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, n, o) => {
+        const s = n.values().next().value;
+        n.delete(s);
+        const m = this.columns.value.leafs.findOrThrow((l) => l.key === s);
+        return this._sortColumn === y && (i = i.sortBy((l) => l[s], this._sortDirection)), i.groupBy((l) => l[s]).map((l) => {
+          let d;
+          n.size > 0 ? d = t(l.values, new Set(n), o + 1) : d = l.values.map((p, w) => new Y(this, p, o + 1 + w));
+          const c = new ne(this, m, d, o, l.key);
+          return o += 1, c.expanded && (o += d.length), c;
+        });
+      };
+      return t(e, new Set(this.groupColumns), 0);
+    }
+    return e.map((t, i) => new Y(this, t, i));
+  });
+  flatRows = S(() => (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 = S(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
+    const e = this.columns.value.flat.reduce((n, o) => {
+      const { inlineWidth: s } = o;
+      return typeof s == "number" && (n[o.widthVarName] = `${o.inlineWidth}px`), o.pin === "LEFT" && (n[o.leftVarName] = `${o.left}px`), o.pin === "RIGHT" && (n[o.rightVarName] = `${o.right}px`), n;
+    }, {});
+    e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.leftEdgeVarName] = `${this.leftEdge}px`;
+    const { visibleLeafs: t } = this.columns.value, i = t.find((n) => n.key === y);
+    if (i) {
+      const n = t.sumBy((o) => o.pin === i.pin && o.key !== b && o.key !== B ? o.inlineWidth ?? 0 : 0);
+      e[i.groupColumnWidthVarName] = `${n}px`;
+    }
+    return this.groupColumns.forEach((n) => {
+      const o = this.columns.value.leafs.findOrThrow((s) => s.key === n);
+      e[o.groupColumnWidthVarName] = `${t.sumBy((s) => s.pin === o.pin ? s.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 groupingColumn() {
-    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === f);
+  get rightEdge() {
+    return this.columns.value.right.sumBy((e) => e.inlineWidth ?? 0);
   }
-  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
-    );
+  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: n } = this;
+      this._sortColumn = i === e && n === "DESC" ? void 0 : e, this._sortDirection = i === e && n === "ASC" ? "DESC" : "ASC";
+    }
+    this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  pinColumn = (e, t) => {
+    const i = this.columns.value.flat.findOrThrow((n) => n.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)), this.sourceColumns.clear(), 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.clear(), 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((o) => o.key === e);
+    if (!i)
+      throw new Error("Leaf column not found.");
+    i.setWidth(t), this.sourceColumns.value.flatMap((o) => o.flatColumns).findOrThrow((o) => o.key === e).setWidth(t);
+  };
+  groupColumns = /* @__PURE__ */ new Set();
+  hiddenColumns = /* @__PURE__ */ new Set();
+  _sortColumn;
+  get sortColumn() {
+    return this._sortColumn;
   }
-  toggleRow() {
-    this.grid.toggleGroupRow(this.rowKey);
+  _sortDirection = "ASC";
+  get sortDirection() {
+    return this._sortDirection;
   }
 }
-class xe {
+class Ne {
   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 === b ? this.row.rowIndex + 1 : this.column.key === y ? `${this.row.groupValue} (${this.row.count})` : null;
   }
 }
-class X {
-  constructor(e, t, i) {
-    a(this, "parentRow");
-    this.grid = e, this.row = t, this.rowIndex = i, this.grid = e, this.row = t;
+class ne {
+  constructor(e, t, i, n, o) {
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((s) => s.parentRow = this);
   }
-  get rowKey() {
-    return this.getRowKey();
+  get key() {
+    return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
   }
+  parentRow;
   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 Ne(this.grid, this, e));
   }
-  get count() {
-    return 1;
+  get expanded() {
+    return this.grid.expandedGroupRow.has(this.key);
   }
-  get flatRows() {
-    return [this];
+  get depth() {
+    return this.parentRow ? this.parentRow.depth + 1 : 0;
   }
-  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 count() {
+    return this.rows.sumBy((e) => e.count, 0);
   }
-}
-const P = "empty-cell", b = "row-number-cell", T = "row-selection-cell", f = "grouping-cell";
-class Le {
-  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));
+  get flatRows() {
+    return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
   }
-  get leftEdge() {
-    return this.columns.value.left.sumBy((e) => e.inlineWidth ?? 0);
+  get allRows() {
+    return this.rows.flatMap((e) => e.allRows);
   }
-  get rightEdge() {
-    return this.columns.value.right.sumBy((e) => e.inlineWidth ?? 0);
+  get groupingColumn() {
+    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === y);
   }
-  get sortColumn() {
-    return this._sortColumn;
+  get groupingColumnGridColumn() {
+    const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
+    return e.sumBy(
+      (n) => n.pin === t.pin && n.key !== _ && n.key !== B && n.key !== b ? 1 : 0
+    );
   }
-  get sortDirection() {
-    return this._sortDirection;
+  toggleRow() {
+    this.grid.toggleGroupRow(this.key);
   }
 }
-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 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";
-    }
-    return d ?? t;
-  }, [m.groupColumns]);
+function E(a) {
+  const { children: e, column: t, style: i, ...n } = a, { key: o, pin: s, left: m, right: l, isEdge: d, align: c, widthVarName: p, leftVarName: w, rightVarName: v } = t;
+  "align" in t.def && (n.jc = c);
+  const x = o === b, C = o === B, R = s === "LEFT", G = s === "RIGHT";
   return /* @__PURE__ */ r(
-    C,
+    g,
     {
-      component: "datagrid.header.cell",
-      variant: { isRowNumber: R, isPinned: S, isFirstLeftPinned: M, isLastLeftPinned: O, isFirstRightPinned: ie, isLastRightPinned: se, isSortable: A },
-      gridRow: w,
-      gridColumn: oe,
+      component: "datagrid.cell",
+      props: { role: "cell" },
+      variant: { isPinned: R || G, isFirstLeftPinned: R && m === 0, isLastLeftPinned: R && d, isFirstRightPinned: G && d, isLastRightPinned: G && l === 0, isRowNumber: x, isRowSelection: C },
       style: {
-        width: `var(${y})`,
-        left: I ? `var(${k})` : void 0,
-        right: B ? `var(${x})` : void 0
+        width: `var(${p})`,
+        height: `var(${t.grid.rowHeightVarName})`,
+        left: R ? `var(${w})` : void 0,
+        right: G ? `var(${v})` : void 0,
+        ...i
       },
-      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 })
-      ] })
+      ...n,
+      children: e
     }
   );
 }
-function Ge(u) {
-  const { column: e } = u;
+E.displayName = "DataGridCell";
+function oe(a) {
+  const { row: e } = a, t = W(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((i) => i.key));
+  }, []);
+  return /* @__PURE__ */ r(g, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((i) => {
+    const { key: n, pin: o, groupColumnWidthVarName: s } = i.column, m = o === "RIGHT";
+    if (n === y)
+      return /* @__PURE__ */ r(
+        E,
+        {
+          column: i.column,
+          style: {
+            width: `var(${s})`,
+            right: m ? "0" : void 0
+          },
+          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
+          gridColumn: e.groupingColumnGridColumn,
+          pl: 4 * e.depth,
+          overflow: "auto",
+          children: /* @__PURE__ */ r(h, { textWrap: "nowrap", px: 4, children: /* @__PURE__ */ u(f, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+            /* @__PURE__ */ r(Q, { fill: "currentColor", width: "14px", height: "14px", rotate: e.expanded ? 0 : -90 }),
+            i.value
+          ] }) })
+        },
+        n
+      );
+    if (n === B) {
+      const l = e.allRows, d = l.every((p) => p.selected), c = !d && l.some((p) => p.selected);
+      return /* @__PURE__ */ r(E, { column: i.column, children: /* @__PURE__ */ r(I, { variant: "datagrid", m: 1, checked: d, indeterminate: c, onChange: t }) }, n);
+    }
+    if (n === _) return /* @__PURE__ */ r(h, {}, n);
+    if (o !== e.groupingColumn.pin || n === b)
+      return /* @__PURE__ */ r(E, { column: i.column, px: 4, children: i.value }, n);
+  }) });
+}
+oe.displayName = "DataGridGroupRow";
+function re(a) {
+  const { cell: e } = a;
+  return /* @__PURE__ */ r(g, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ r(h, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
+}
+re.displayName = "DataGridCellText";
+function se(a) {
+  const { row: e } = a;
+  return /* @__PURE__ */ r(g, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(E, { column: t.column, children: t.column.Cell ? /* @__PURE__ */ r(t.column.Cell, { cell: t }) : /* @__PURE__ */ r(re, { cell: t }) }, t.column.key)) });
+}
+se.displayName = "DataGridRow";
+const Ee = 10, K = 20;
+function le(a) {
+  const { grid: e, scrollTop: t } = a, i = e.flatRows.value.length, n = Math.max(0, Math.floor(t / e.rowHeight) - K), o = e.props.def.visibleRowsCount ?? Ee, s = e.rowHeight * o + e.rowHeight / 5, m = H(() => {
+    if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), e.props.data.length === 0)
+      return /* @__PURE__ */ r(g, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: s }, children: e.props.loading ? "loading..." : "empty" });
+    const l = o + K * 2;
+    return e.flatRows.value.take(l, n).map((c) => c instanceof ne ? /* @__PURE__ */ r(oe, { row: c }, c.key) : /* @__PURE__ */ r(se, { row: c }, c.key));
+  }, [e.flatRows.value, e.props.data.length, e.props.loading, n, s, o]);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ r(h, { style: { height: s }, children: /* @__PURE__ */ r(
+    h,
+    {
+      style: {
+        height: `${i * e.rowHeight}px`
+      },
+      children: /* @__PURE__ */ r(
+        ee,
+        {
+          width: "max-content",
+          minWidth: "fit",
+          transition: "none",
+          style: {
+            transform: `translateY(${n * e.rowHeight}px)`,
+            gridTemplateColumns: e.gridTemplateColumns.value
+          },
+          children: m
+        }
+      )
+    }
+  ) });
+}
+le.displayName = "DataGridBody";
+function ae(a) {
+  const { column: e } = a, [t, i, n] = Z({ hideOnScroll: !0, event: "mousedown" }), [o, s] = O({ top: 0, left: 0 }), m = H(() => o.left > window.innerWidth / 2, [o.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"), c = e.isLeaf && e.grid.sortColumn === e.key, p = e.pin !== "LEFT", w = e.pin !== "RIGHT", v = !!e.pin, x = e.isLeaf && e.key !== y, C = e.isLeaf && e.key === y, R = l || d || c, G = p || w || v, k = e.align === "right" ? 2 : void 0, T = e.align === "right" ? void 0 : e.pin === "RIGHT" ? 2.5 : 4;
+  return /* @__PURE__ */ r(g, { position: "absolute", left: k, right: T, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ r(Le, { fill: "currentColor" }) }),
+    t && /* @__PURE__ */ u(
+      te,
+      {
+        component: "datagrid.header.cell.contextMenu.tooltip",
+        variant: { openLeft: m },
+        onPositionChange: s,
+        ref: n,
+        children: [
+          l && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(A, { width: "100%", fill: "currentColor" }) }),
+            "Sort Ascending"
+          ] }),
+          d && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(A, { width: "100%", fill: "currentColor", rotate: 180 }) }),
+            "Sort Descending"
+          ] }),
+          c && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+            /* @__PURE__ */ r(h, { width: 4 }),
+            "Clear Sort"
+          ] }),
+          R && (G || x || C) && /* @__PURE__ */ r(h, { bb: 1, my: 2, borderColor: "gray-300" }),
+          p && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(q, { width: "100%", fill: "currentColor" }) }),
+            "Pin Left"
+          ] }),
+          w && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(q, { width: "100%", fill: "currentColor", rotate: -90 }) }),
+            "Pin Right"
+          ] }),
+          v && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+            /* @__PURE__ */ r(h, { width: 4 }),
+            "Unpin"
+          ] }),
+          R && G && (x || C) && /* @__PURE__ */ r(h, { bb: 1, my: 2, borderColor: "gray-300" }),
+          x && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
+            /* @__PURE__ */ u(h, { textWrap: "nowrap", children: [
+              "Group by ",
+              e.header ?? e.key
+            ] })
+          ] }),
+          C && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.grid.unGroupAll, children: [
+            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
+            /* @__PURE__ */ r(h, { textWrap: "nowrap", children: "Un-Group All" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+ae.displayName = "DataGridHeaderCellContextMenu";
+function de(a) {
+  const { column: e } = a;
   return /* @__PURE__ */ r(
-    C,
+    g,
     {
       height: "fit",
       ai: "center",
@@ -422,363 +576,165 @@ function Ge(u) {
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
       children: /* @__PURE__ */ r(
-        g,
+        h,
         {
           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__ */ r(h, { 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,
+de.displayName = "DataGridHeaderCellResizer";
+function ce(a) {
+  const { column: e } = a, { key: t, pin: i, left: n, right: o, isEdge: s, isLeaf: m, leafs: l, grid: d, header: c, gridRows: p, widthVarName: w, leftVarName: v, rightVarName: x, inlineWidth: C } = e, R = t === _, G = t === y, k = t === b, T = t === B, M = i === "LEFT", P = i === "RIGHT", F = M || i === "RIGHT", fe = M && n === 0, we = M && s, Ce = P && s, Re = P && o === 0, U = m && !R && !k && !T, ye = m ? 1 : l.length, ve = !k && !T, X = !k && !T, j = W(() => {
+    d.toggleSelectAllRows();
+  }, []), xe = H(() => {
+    if (k) return null;
+    if (T) {
+      const N = d.selectedRows.size === d.props.data.length, V = !N && d.selectedRows.size > 0;
+      return /* @__PURE__ */ r(I, { variant: "datagrid", m: 1, indeterminate: V, checked: N, onChange: j });
+    }
+    if (G) {
+      if (d.groupColumns.size === 1) {
+        const N = d.columns.value.leafs.findOrThrow((V) => V.key === d.groupColumns.values().next().value);
+        return N.header ?? N.key;
+      }
+      return "Group";
+    }
+    return c ?? t;
+  }, [d.groupColumns, d.selectedRows, j]);
+  return /* @__PURE__ */ r(
+    g,
     {
-      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: k, isPinned: F, isFirstLeftPinned: fe, isLastLeftPinned: we, isFirstRightPinned: Ce, isLastRightPinned: Re, isSortable: U },
+      gridRow: p,
+      gridColumn: ye,
+      style: {
+        width: `var(${w})`,
+        left: M ? `var(${v})` : void 0,
+        right: P ? `var(${x})` : void 0
+      },
+      children: !R && /* @__PURE__ */ u(Ge, { children: [
+        /* @__PURE__ */ r(g, { width: "fit", height: "fit", jc: e.align, props: { onClick: U ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ u(
+          g,
           {
-            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: m ? void 0 : "sticky",
+            ai: "center",
+            transition: "none",
+            pl: e.align === "right" ? 10 : 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__ */ r(h, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: xe }),
+              t === d.sortColumn && /* @__PURE__ */ r(h, { pl: (C ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r(A, { width: "16px", rotate: d.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              X && /* @__PURE__ */ r(h, { minWidth: e.align === "right" ? 4 : 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
-      ]
+        ) }),
+        ve && /* @__PURE__ */ r(de, { column: e }),
+        X && /* @__PURE__ */ r(ae, { 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);
-  }) });
+ce.displayName = "DataGridHeaderCell";
+function ue(a) {
+  const { grid: e } = a, { isResizeMode: t } = e;
+  return /* @__PURE__ */ r(ee, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: e.headerRows.value.map((i) => i.map((n) => /* @__PURE__ */ r(ce, { column: n }, n.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)) });
+ue.displayName = "DataGridHeader";
+function he(a) {
+  const { grid: e } = a, [t, i] = O(0), n = W(
+    J.throttle((o) => {
+      i(o.target.scrollTop);
+    }, 100),
+    []
+  );
+  return /* @__PURE__ */ u(h, { overflowX: "scroll", props: { onScroll: n }, children: [
+    /* @__PURE__ */ r(ue, { grid: e }),
+    /* @__PURE__ */ r(le, { 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" })
-    ] })
+he.displayName = "DataGridContent";
+function me(a) {
+  const { grid: e } = a;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ u(g, { component: "datagrid.topBar.columnGroups", children: [
+    /* @__PURE__ */ r(L, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
+    Array.from(e.groupColumns, (t) => {
+      const i = e.columns.value.leafs.findOrThrow((n) => n.key === t);
+      return /* @__PURE__ */ u(be.Fragment, { children: [
+        /* @__PURE__ */ r(Q, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ u(g, { component: "datagrid.topBar.columnGroups.item", children: [
+          i.header ?? i.key,
+          /* @__PURE__ */ r(f, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ r(De, { fill: "currentColor", width: "100%" }) })
+        ] })
+      ] }, t);
+    })
   ] });
 }
-function De(u) {
-  const { grid: e } = u, [t, i, o] = Y({ event: "mousedown" }), s = E(
+me.displayName = "DataGridColumnGroups";
+function pe(a) {
+  const { grid: e } = a, [t, i, n] = Z({ event: "mousedown" }), o = H(
     () => e.columns.value.leafs.filter(
-      (n) => ![P, b, T, f].includes(n.key)
+      (s) => ![_, b, B, y].includes(s.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__ */ u(f, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ r(Te, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...a, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+    t && /* @__PURE__ */ r(te, { component: "datagrid.topBar.contextMenu.tooltip", ref: n, children: o.map((s) => /* @__PURE__ */ u(
+      f,
       {
-        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: (m) => {
+          m.stopPropagation(), s.toggleVisibility();
+        },
+        children: [
+          /* @__PURE__ */ r(I, { variant: "datagrid", checked: s.isVisible, onChange: () => {
+          }, focus: { outline: 0 } }),
+          s.header ?? s.key
+        ]
+      },
+      s.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
-    ] })
+pe.displayName = "DataGridTopBarContextMenu";
+function ge(a) {
+  const { grid: e } = a;
+  return /* @__PURE__ */ u(g, { component: "datagrid.topBar", position: "relative", children: [
+    /* @__PURE__ */ r(pe, { grid: e }),
+    /* @__PURE__ */ r(me, { 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
-        }
-      )
-    }
-  ) });
+ge.displayName = "DataGridTopBar";
+function Pe(a) {
+  const [e, t] = O(0), i = ke();
+  return i.current || (i.current = new Me(a, () => t((n) => n + 1))), z(() => {
+    i.current.props = a, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [a.data]), z(() => {
+    i.current.props = a, i.current.sourceColumns.clear(), i.current.columns.clear(), i.current.headerRows.clear(), i.current.gridTemplateColumns.clear(), i.current.rows.clear(), i.current.flatRows.clear(), i.current.sizes.clear(), i.current.update();
+  }, [a.def]), z(() => {
+    i.current.props = a, i.current.update();
+  }, [a.loading]), i.current;
+}
+function We(a) {
+  const e = Pe(a);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ u(h, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    /* @__PURE__ */ r(ge, { grid: e }),
+    /* @__PURE__ */ r(he, { grid: e }),
+    /* @__PURE__ */ r(Se, { grid: e })
+  ] });
 }
-const te = ce(Ve);
-te.displayName = "Rows";
+We.displayName = "DataGrid";
 export {
-  Be as default
+  We as default
 };