@cronocode/react-box 3.1.10 → 3.1.12

package/components/dataGrid.mjs

@@ -1,43 +1,172 @@
-import { jsxs as p, jsx as n, Fragment as Ee } from "react/jsx-runtime";
-import Be, { useCallback as k, useMemo as X, useState as M, useRef as O, useEffect as z, useLayoutEffect as Pe } from "react";
-import g from "../box.mjs";
-import m from "./flex.mjs";
-import me from "./grid.mjs";
-import { F as Ie, m as P, f as ae, E as ge, b as Me, D as He, S as oe, P as ce, G as se, d as ze } from "../core.mjs";
-import le from "./checkbox.mjs";
-import D from "./button.mjs";
-import fe from "./baseSvg.mjs";
-import b from "./dropdown.mjs";
-import j from "./textbox.mjs";
-import { Span as I } from "./semantics.mjs";
-import Ae from "./tooltip.mjs";
-function Oe(l) {
-  const { grid: e } = l, { filtered: t, total: i } = e.filterStats, r = e.hasActiveFilters;
-  return /* @__PURE__ */ p(m, { component: "datagrid.bottomBar", children: [
-    /* @__PURE__ */ p(g, { children: [
+import { jsxs as d, jsx as o, Fragment as Ae } from "react/jsx-runtime";
+import Oe, { useCallback as v, useMemo as X, useState as I, useRef as H, useEffect as de, useLayoutEffect as Ue } from "react";
+import m from "../box.mjs";
+import g from "./flex.mjs";
+import U from "./baseSvg.mjs";
+import L from "./button.mjs";
+import ce from "./grid.mjs";
+import { E as pe, F as je, m as B, f as ge, b as qe, D as Ke, S as he, P as fe, G as ue, d as Xe } from "../core.mjs";
+import me from "./checkbox.mjs";
+import x from "./dropdown.mjs";
+import q from "./textbox.mjs";
+import { Span as $ } from "./semantics.mjs";
+import Ye from "./tooltip.mjs";
+function Re(s) {
+  const { grid: e } = s, t = e.paginationState, i = t?.page ?? 1, n = t?.totalPages ?? 1, r = i <= 1, c = i >= n, h = v(() => !r && e.changePage(1), [e, r]), u = v(() => !r && e.changePage(i - 1), [e, i, r]), a = v(() => !c && e.changePage(i + 1), [e, i, c]), l = v(() => !c && e.changePage(n), [e, n, c]);
+  return t ? /* @__PURE__ */ d(g, { component: `${e.componentName}.bottomBar.pagination`, gap: 0.5, ai: "center", children: [
+    /* @__PURE__ */ o(ie, { onClick: h, disabled: r, children: /* @__PURE__ */ o(Ze, {}) }),
+    /* @__PURE__ */ o(ie, { onClick: u, disabled: r, children: /* @__PURE__ */ o(Je, {}) }),
+    /* @__PURE__ */ d(m, { fontSize: 12, px: 3, userSelect: "none", children: [
+      i,
+      " of ",
+      n
+    ] }),
+    /* @__PURE__ */ o(ie, { onClick: a, disabled: c, children: /* @__PURE__ */ o(Qe, {}) }),
+    /* @__PURE__ */ o(ie, { onClick: l, disabled: c, children: /* @__PURE__ */ o(et, {}) })
+  ] }) : null;
+}
+Re.displayName = "DataGridPagination";
+function ie(s) {
+  const { onClick: e, disabled: t, children: i } = s;
+  return /* @__PURE__ */ o(
+    L,
+    {
+      clean: !0,
+      onClick: e,
+      cursor: t ? "default" : "pointer",
+      p: 1,
+      borderRadius: 4,
+      opacity: t ? 0.3 : 0.7,
+      hover: t ? void 0 : { opacity: 1, bgColor: "gray-100" },
+      theme: { dark: { hover: t ? void 0 : { bgColor: "gray-700" } } },
+      transition: "all",
+      transitionDuration: 150,
+      children: i
+    }
+  );
+}
+function Je() {
+  return /* @__PURE__ */ o(U, { viewBox: "0 0 24 24", width: "14", height: "14", children: /* @__PURE__ */ o(
+    m,
+    {
+      tag: "path",
+      props: { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }
+    }
+  ) });
+}
+function Qe() {
+  return /* @__PURE__ */ o(U, { viewBox: "0 0 24 24", width: "14", height: "14", children: /* @__PURE__ */ o(
+    m,
+    {
+      tag: "path",
+      props: { d: "M9 18l6-6-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }
+    }
+  ) });
+}
+function Ze() {
+  return /* @__PURE__ */ o(U, { viewBox: "0 0 24 24", width: "14", height: "14", children: /* @__PURE__ */ o(
+    m,
+    {
+      tag: "path",
+      props: {
+        d: "M18 18l-6-6 6-6M11 18l-6-6 6-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    }
+  ) });
+}
+function et() {
+  return /* @__PURE__ */ o(U, { viewBox: "0 0 24 24", width: "14", height: "14", children: /* @__PURE__ */ o(
+    m,
+    {
+      tag: "path",
+      props: {
+        d: "M6 18l6-6-6-6M13 18l6-6-6-6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    }
+  ) });
+}
+function tt(s) {
+  const { grid: e } = s, t = e.paginationState;
+  if (t) {
+    const { page: c, pageSize: h, totalItems: u } = t, a = (c - 1) * h + 1, l = Math.min(a + h - 1, u);
+    return /* @__PURE__ */ d(g, { component: `${e.componentName}.bottomBar`, children: [
+      /* @__PURE__ */ d(m, { children: [
+        "Rows: ",
+        u > 0 ? `${a}–${l} of ${u}` : "0"
+      ] }),
+      e.props.def.rowSelection && /* @__PURE__ */ d(m, { children: [
+        "Selected: ",
+        e.selectedRows.size
+      ] }),
+      /* @__PURE__ */ o(Re, { grid: e })
+    ] });
+  }
+  const { filtered: i, total: n } = e.filterStats, r = e.hasActiveFilters;
+  return /* @__PURE__ */ d(g, { component: `${e.componentName}.bottomBar`, children: [
+    /* @__PURE__ */ d(m, { children: [
       "Rows: ",
-      t !== i ? `${t} / ${i}` : i
+      i !== n ? `${i} / ${n}` : n
     ] }),
-    e.props.def.rowSelection && /* @__PURE__ */ p(g, { children: [
+    e.props.def.rowSelection && /* @__PURE__ */ d(m, { children: [
       "Selected: ",
       e.selectedRows.size
     ] }),
-    r && /* @__PURE__ */ n(g, { color: "blue-600", cursor: "pointer", hover: { textDecoration: "underline" }, props: { onClick: e.clearAllFilters }, children: "Clear filters" })
+    r && /* @__PURE__ */ o(m, { color: "blue-600", cursor: "pointer", hover: { textDecoration: "underline" }, props: { onClick: e.clearAllFilters }, children: "Clear filters" })
   ] });
 }
-function Ce(l) {
-  const { cell: e } = l, t = k(() => {
+class Y {
+  constructor(e, t) {
+    this.grid = e, this.parentRow = t;
+  }
+  get key() {
+    return `detail-${this.parentRow.key}`;
+  }
+  static AUTO_HEIGHT_ESTIMATE = 200;
+  get height() {
+    const e = this.grid.props.def.rowDetail;
+    return !e || e.height === void 0 || e.height === "auto" ? "auto" : typeof e.height == "function" ? e.height(this.parentRow.data) : e.height;
+  }
+  /** Numeric height for virtualization offset calculations. Uses estimate for 'auto'. */
+  get heightForOffset() {
+    const e = this.height;
+    return e === "auto" ? Y.AUTO_HEIGHT_ESTIMATE : e;
+  }
+  count = 0;
+  get flatRows() {
+    return [this];
+  }
+  get allRows() {
+    return [];
+  }
+}
+function xe(s) {
+  const { cell: e } = s, t = e.grid.expandedDetailRows.has(e.row.key), i = v(() => {
+    e.grid.toggleDetailRow(e.row.key);
+  }, [e.grid, e.row.key]);
+  return /* @__PURE__ */ o(L, { clean: !0, onClick: i, cursor: "pointer", display: "flex", ai: "center", jc: "center", children: /* @__PURE__ */ o(pe, { fill: "currentColor", width: "14px", height: "14px", rotate: t ? 0 : -90 }) });
+}
+xe.displayName = "DataGridCellRowDetail";
+function ke(s) {
+  const { cell: e } = s, t = v(() => {
     e.grid.toggleRowSelection(e.row.key);
   }, [e.grid, e.row.key]);
-  return /* @__PURE__ */ n(le, { variant: "datagrid", checked: e.row.selected, onChange: t });
+  return /* @__PURE__ */ o(me, { variant: "datagrid", checked: e.row.selected, onChange: t });
 }
-Ce.displayName = "DataGridCellRowSelection";
-const $e = "NO_PIN";
-class A {
+ke.displayName = "DataGridCellRowSelection";
+const it = "NO_PIN";
+class M {
   constructor(e, t, i) {
-    if (this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((r) => new A(e.pin ? { ...r, pin: e.pin } : r, t, this)) ?? [], this.isLeaf) {
-      const r = this.grid.columnWidths.get(this.key);
-      this._inlineWidth = this.key == V ? void 0 : r ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin;
+    if (this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((n) => new M(e.pin ? { ...n, pin: e.pin } : n, t, this)) ?? [], this.isLeaf) {
+      const n = this.grid.columnWidths.get(this.key);
+      this._inlineWidth = this.key == W ? void 0 : n ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin;
     }
   }
   columns = [];
@@ -98,10 +227,10 @@ class A {
   getPinnedColumn(e) {
     if (this.hasPin(e)) {
       if (this.isLeaf) return this;
-      const t = new A({ ...this.def, pin: e }, this.grid, this.parent);
+      const t = new M({ ...this.def, pin: e }, this.grid, this.parent);
       return t.columns = this.columns.filter((i) => i.hasPin(e)).map((i) => {
-        const r = i.getPinnedColumn(e);
-        return r.parent = t, r;
+        const n = i.getPinnedColumn(e);
+        return n.parent = t, n;
       }).filter((i) => !!i), t;
     }
   }
@@ -126,22 +255,22 @@ class A {
   get left() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t, left: i } = this.parent, r = t.findIndex((o) => o === this);
-      e += t.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0), e += i;
+      const { visibleColumns: t, left: i } = this.parent, n = t.findIndex((r) => r === this);
+      e += t.sumBy((r, c) => c < n ? r.inlineWidth ?? 0 : 0), e += i;
     } else {
-      const t = this.grid.columns.value.left.filter((r) => r.isVisible), i = t.findIndex((r) => r === this);
-      e += t.sumBy((r, o) => o < i ? r.inlineWidth ?? 0 : 0);
+      const t = this.grid.columns.value.left.filter((n) => n.isVisible), i = t.findIndex((n) => n === this);
+      e += t.sumBy((n, r) => r < i ? n.inlineWidth ?? 0 : 0);
     }
     return e;
   }
   get right() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t } = this.parent, i = t.reverse(), r = i.findIndex((o) => o === this);
-      e += i.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0), e += this.parent.right;
+      const { visibleColumns: t } = this.parent, i = t.reverse(), n = i.findIndex((r) => r === this);
+      e += i.sumBy((r, c) => c < n ? r.inlineWidth ?? 0 : 0), e += this.parent.right;
     } else {
-      const i = this.grid.columns.value.right.filter((o) => o.isVisible).reverse(), r = i.findIndex((o) => o === this);
-      e += i.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0);
+      const i = this.grid.columns.value.right.filter((r) => r.isVisible).reverse(), n = i.findIndex((r) => r === this);
+      e += i.sumBy((r, c) => c < n ? r.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -176,16 +305,16 @@ class A {
     return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
   }
   resizeColumn = (e) => {
-    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: r } = this.grid, o = this.leafs.toRecord((c) => [c.key, c.inlineWidth ?? c.baseWidth]), a = this.leafs.sumBy((c) => o[c.key]) - this.leafs.length * i, u = Ie.throttle((c) => {
-      const d = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, r = this.leafs.toRecord((l) => [l.key, l.inlineWidth ?? l.baseWidth]), c = this.leafs.sumBy((l) => r[l.key]) - this.leafs.length * i, h = je.throttle((l) => {
+      const p = (l.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
       this.leafs.forEach((f) => {
-        const y = o[f.key], v = a > 0 ? (y - i) / a * d : d / this.leafs.length, R = Math.round(y + v);
-        f.setWidth(R < i ? i : R);
-      }), this.grid.flexWidths.clear(), this.grid.sizes.clear(), r();
-    }, 40), h = new AbortController(), s = (c) => {
-      h.abort(), r();
+        const C = r[f.key], b = c > 0 ? (C - i) / c * p : p / this.leafs.length, k = Math.round(C + b);
+        f.setWidth(k < i ? i : k);
+      }), this.grid.flexWidths.clear(), this.grid.sizes.clear(), n();
+    }, 40), u = new AbortController(), a = (l) => {
+      u.abort(), n();
     };
-    window.addEventListener("mousemove", u, h), window.addEventListener("mouseup", s, h);
+    window.addEventListener("mousemove", h, u), window.addEventListener("mouseup", a, u);
   };
   pinColumn = (e) => {
     this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -205,7 +334,7 @@ class A {
     this.grid.toggleColumnVisibility(this.key);
   };
 }
-class Ue {
+class nt {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
@@ -213,7 +342,7 @@ class Ue {
     return this.column.key === G ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
-class ue {
+class we {
   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);
   }
@@ -221,65 +350,75 @@ class ue {
   parentRow;
   count = 1;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new Ue(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new nt(this.grid, this, e));
   }
   get selected() {
     return this.grid.selectedRows.has(this.key);
   }
+  get expanded() {
+    return this.grid.expandedDetailRows.has(this.key);
+  }
   get flatRows() {
-    return this;
+    return this.grid.props.def.rowDetail && this.expanded ? [this, new Y(this.grid, this)] : [this];
   }
   get allRows() {
     return this;
   }
 }
-const V = "empty-cell", G = "row-number-cell", he = 70, _ = "row-selection-cell", T = "grouping-cell";
-class je {
+const W = "empty-cell", G = "row-number-cell", Ce = 70, _ = "row-selection-cell", T = "grouping-cell", O = "row-detail-cell";
+class ot {
   constructor(e, t) {
     this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor");
   }
-  sourceColumns = P(() => {
+  get componentName() {
+    return this.props.component || "datagrid";
+  }
+  sourceColumns = B(() => {
     const { def: e } = this.props, t = [];
-    if (this.groupColumns.size > 0 && t.push(new A({ key: T }, this)), t.push(...e.columns.map((i) => new A(i, this))), e.rowSelection) {
+    if (this.groupColumns.size > 0 && t.push(new M({ key: T }, this)), t.push(...e.columns.map((i) => new M(i, this))), e.rowSelection) {
       const i = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "LEFT" : void 0;
       t.unshift(
-        new A({ key: _, pin: i, width: 50, align: "center", Cell: Ce }, this)
+        new M({ key: _, pin: i, width: 50, align: "center", Cell: ke }, this)
       );
     }
     if (e.showRowNumber) {
-      let i, r = he;
-      typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (i = "LEFT"), r = e.showRowNumber.width ?? he), t.unshift(new A({ key: G, pin: i, width: r, align: "right" }, this));
+      let i, n = Ce;
+      typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (i = "LEFT"), n = e.showRowNumber.width ?? Ce), t.unshift(new M({ key: G, pin: i, width: n, align: "right" }, this));
+    }
+    if (e.rowDetail) {
+      const i = e.rowDetail.pinned ? "LEFT" : void 0, n = e.rowDetail.expandColumnWidth ?? 50;
+      t.unshift(new M({ key: O, pin: i, width: n, align: "center", Cell: xe }, this));
     }
     return t;
   });
-  columns = P(() => {
+  columns = B(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
-    const e = this.sourceColumns.value.map((s) => s.getPinnedColumn("LEFT")).filter((s) => !!s), t = this.sourceColumns.value.map((s) => s.getPinnedColumn()).filter((s) => !!s), i = this.sourceColumns.value.map((s) => s.getPinnedColumn("RIGHT")).filter((s) => !!s), r = [...e, ...t, ...i].flatMap((s) => s.flatColumns), o = r.filter((s) => s.isLeaf), a = r.filter((s) => s.isLeaf && s.isVisible), u = a.filter(
-      (s) => ![V, G, _, T].includes(s.key)
-    ), h = r.maxBy((s) => s.death) + 1;
+    const e = this.sourceColumns.value.map((a) => a.getPinnedColumn("LEFT")).filter((a) => !!a), t = this.sourceColumns.value.map((a) => a.getPinnedColumn()).filter((a) => !!a), i = this.sourceColumns.value.map((a) => a.getPinnedColumn("RIGHT")).filter((a) => !!a), n = [...e, ...t, ...i].flatMap((a) => a.flatColumns), r = n.filter((a) => a.isLeaf), c = n.filter((a) => a.isLeaf && a.isVisible), h = c.filter(
+      (a) => ![W, G, _, T, O].includes(a.key)
+    ), u = n.maxBy((a) => a.death) + 1;
     return {
       left: e,
       middle: t,
       right: i,
-      flat: r,
-      leafs: o,
-      visibleLeafs: a,
-      userVisibleLeafs: u,
-      maxDeath: h
+      flat: n,
+      leafs: r,
+      visibleLeafs: c,
+      userVisibleLeafs: h,
+      maxDeath: u
     };
   });
-  headerRows = P(() => (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((r) => r.pin ?? $e).toRecord((r) => [r.key, r.values]);
+  headerRows = B(() => (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 ?? it).toRecord((n) => [n.key, n.values]);
     return [
-      ...i.LEFT?.filter((r) => r.isVisible) ?? [],
-      ...i.NO_PIN?.filter((r) => r.isVisible) ?? [],
-      ...i.RIGHT?.filter((r) => r.isVisible) ?? []
+      ...i.LEFT?.filter((n) => n.isVisible) ?? [],
+      ...i.NO_PIN?.filter((n) => n.isVisible) ?? [],
+      ...i.RIGHT?.filter((n) => n.isVisible) ?? []
     ];
   })));
-  gridTemplateColumns = P(() => {
+  gridTemplateColumns = B(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid gridTemplateColumns memo");
-    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((a) => a.pin === "RIGHT" ? 1 : 0), i = e.length - t, r = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
-    return `${r} ${o}`.trim();
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((c) => c.pin === "RIGHT" ? 1 : 0), i = e.length - t, n = i > 0 ? `repeat(${i}, max-content)` : "", r = t > 0 ? `repeat(${t}, max-content)` : "";
+    return `${n} ${r}`.trim();
   });
   // ========== Filtering ==========
   _globalFilterValue = "";
@@ -296,12 +435,12 @@ class je {
   applyGlobalFilter(e) {
     const t = this.globalFilterValue.trim();
     if (!t) return e;
-    const { globalFilterKeys: i } = this.props.def, r = i ?? this.columns.value.leafs.filter(
-      (o) => o.key !== V && o.key !== G && o.key !== _ && o.key !== T
-    ).map((o) => o.key);
-    return e.filter((o) => r.some((a) => {
-      const u = o[a];
-      return u == null ? !1 : ae(t, String(u));
+    const { globalFilterKeys: i } = this.props.def, n = i ?? this.columns.value.leafs.filter(
+      (r) => r.key !== W && r.key !== G && r.key !== _ && r.key !== T && r.key !== O
+    ).map((r) => r.key);
+    return e.filter((r) => n.some((c) => {
+      const h = r[c];
+      return h == null ? !1 : ge(t, String(h));
     }));
   }
   /**
@@ -309,11 +448,11 @@ class je {
    */
   applyColumnFilters(e) {
     const t = this.columnFilters, i = Object.keys(t);
-    return i.length === 0 ? e : e.filter((r) => i.every((o) => {
-      const a = t[o];
-      if (!a) return !0;
-      const u = r[o];
-      return this.matchesFilter(u, a);
+    return i.length === 0 ? e : e.filter((n) => i.every((r) => {
+      const c = t[r];
+      if (!c) return !0;
+      const h = n[r];
+      return this.matchesFilter(h, c);
     }));
   }
   /**
@@ -322,7 +461,7 @@ class je {
   matchesFilter(e, t) {
     switch (t.type) {
       case "text":
-        return t.value.trim() ? e == null ? !1 : ae(t.value, String(e)) : !0;
+        return t.value.trim() ? e == null ? !1 : ge(t.value, String(e)) : !0;
       case "number": {
         if (e == null) return !1;
         const i = typeof e == "number" ? e : parseFloat(String(e));
@@ -357,33 +496,48 @@ class je {
    */
   applyExternalFilters(e) {
     const t = this.props.filters;
-    return !t || t.length === 0 ? e : e.filter((i) => t.every((r) => r(i)));
+    return !t || t.length === 0 ? e : e.filter((i) => t.every((n) => n(i)));
   }
   /**
    * Get filtered data (applies external, global, then column filters)
    */
   get filteredData() {
+    if (this.isPaginated) return this.props.data;
     let e = this.props.data;
     return e = this.applyExternalFilters(e), this.props.def.globalFilter && (e = this.applyGlobalFilter(e)), e = this.applyColumnFilters(e), e;
   }
+  fireServerStateChange(e) {
+    this.props.onServerStateChange?.({
+      page: e?.page ?? this.page,
+      pageSize: this.pageSize,
+      sortColumn: "sortColumn" in (e ?? {}) ? e.sortColumn : this._sortColumn,
+      sortDirection: "sortDirection" in (e ?? {}) ? e.sortDirection : this._sortDirection,
+      columnFilters: e?.columnFilters ?? this.columnFilters,
+      globalFilterValue: e?.globalFilterValue ?? this.globalFilterValue
+    });
+  }
   /**
    * Set global filter value
    */
   setGlobalFilter = (e) => {
-    this.props.onGlobalFilterChange ? this.props.onGlobalFilterChange(e) : this._globalFilterValue = e, this.rows.clear(), this.flatRows.clear(), this.update();
+    this.props.onGlobalFilterChange ? this.props.onGlobalFilterChange(e) : this._globalFilterValue = e;
+    const t = this.isPaginated && this.page !== 1 ? 1 : this.page;
+    t !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({ globalFilterValue: e, page: t }), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update();
   };
   /**
    * Set a single column filter
    */
   setColumnFilter = (e, t) => {
     const i = { ...this.columnFilters };
-    t === void 0 ? delete i[e] : i[e] = t, this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange(i) : this._columnFilters = i, this.rows.clear(), this.flatRows.clear(), this.update();
+    t === void 0 ? delete i[e] : i[e] = t, this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange(i) : this._columnFilters = i;
+    const n = this.isPaginated && this.page !== 1 ? 1 : this.page;
+    n !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({ columnFilters: i, page: n }), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update();
   };
   /**
    * Clear all column filters
    */
   clearColumnFilters = () => {
-    this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange({}) : this._columnFilters = {}, this.rows.clear(), this.flatRows.clear(), this.update();
+    this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange({}) : this._columnFilters = {}, this.fireServerStateChange({ columnFilters: {} }), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update();
   };
   /**
    * Clear all filters (global + column)
@@ -397,9 +551,9 @@ class je {
   getColumnUniqueValues = (e) => {
     const t = /* @__PURE__ */ new Set();
     return this.props.data.forEach((i) => {
-      const r = i[e];
-      r !== void 0 && t.add(r);
-    }), Array.from(t).sort((i, r) => i === null ? 1 : r === null ? -1 : typeof i == "string" && typeof r == "string" ? i.localeCompare(r) : typeof i == "number" && typeof r == "number" ? i - r : String(i).localeCompare(String(r)));
+      const n = i[e];
+      n !== void 0 && t.add(n);
+    }), Array.from(t).sort((i, n) => i === null ? 1 : n === null ? -1 : typeof i == "string" && typeof n == "string" ? i.localeCompare(n) : typeof i == "number" && typeof n == "number" ? i - n : String(i).localeCompare(String(n)));
   };
   /**
    * Check if any filter is active
@@ -411,49 +565,53 @@ class je {
    * Get count of filtered rows vs total rows
    */
   get filterStats() {
+    if (this.isPaginated) {
+      const e = this.props.def.pagination.totalCount;
+      return { filtered: e, total: e };
+    }
     return {
       filtered: this.filteredData.length,
       total: this.props.data.length
     };
   }
-  rows = P(() => {
+  rows = B(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
     let e = this.filteredData;
-    if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
-      const t = (i, r, o) => {
-        const a = r.values().next().value;
-        r.delete(a);
-        const u = this.columns.value.leafs.findOrThrow((h) => h.key === a);
-        return this._sortColumn === T && (i = i.sortBy((h) => h[a], this._sortDirection)), i.groupBy((h) => h[a]).map((h) => {
-          let s;
-          r.size > 0 ? s = t(h.values, new Set(r), o + 1) : s = h.values.map((d, f) => new ue(this, d, o + 1 + f));
-          const c = new we(this, u, s, o, h.key);
-          return o += 1, c.expanded && (o += s.length), c;
+    if (this._sortColumn && !this.isPaginated && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
+      const t = (i, n, r) => {
+        const c = n.values().next().value;
+        n.delete(c);
+        const h = this.columns.value.leafs.findOrThrow((u) => u.key === c);
+        return this._sortColumn === T && (i = i.sortBy((u) => u[c], this._sortDirection)), i.groupBy((u) => u[c]).map((u) => {
+          let a;
+          n.size > 0 ? a = t(u.values, new Set(n), r + 1) : a = u.values.map((p, f) => new we(this, p, r + 1 + f));
+          const l = new Se(this, h, a, r, u.key);
+          return r += 1, l.expanded && (r += a.length), l;
         });
       };
       return t(e, new Set(this.groupColumns), 0);
     }
-    return e.map((t, i) => new ue(this, t, i));
+    return e.map((t, i) => new we(this, t, i));
   });
-  flatRows = P(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
+  flatRows = B(() => (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 = P(() => {
+  sizes = B(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
-    const e = this.columns.value.flat.reduce((r, o) => {
-      const { inlineWidth: a } = o;
-      return typeof a == "number" && (r[o.widthVarName] = `${o.inlineWidth}px`), o.pin === "LEFT" && (r[o.leftVarName] = `${o.left}px`), o.pin === "RIGHT" && (r[o.rightVarName] = `${o.right}px`), r;
+    const e = this.columns.value.flat.reduce((n, r) => {
+      const { inlineWidth: c } = r;
+      return typeof c == "number" && (n[r.widthVarName] = `${r.inlineWidth}px`), r.pin === "LEFT" && (n[r.leftVarName] = `${r.left}px`), r.pin === "RIGHT" && (n[r.rightVarName] = `${r.right}px`), n;
     }, {});
     e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.leftEdgeVarName] = `${this.leftEdge}px`;
-    const { visibleLeafs: t } = this.columns.value, i = t.find((r) => r.key === T);
+    const { visibleLeafs: t } = this.columns.value, i = t.find((n) => n.key === T);
     if (i) {
-      const r = t.sumBy((o) => o.pin === i.pin && o.key !== G && o.key !== _ ? o.inlineWidth ?? 0 : 0);
-      e[i.groupColumnWidthVarName] = `${r}px`;
+      const n = t.sumBy((r) => r.pin === i.pin && r.key !== G && r.key !== _ && r.key !== O ? r.inlineWidth ?? 0 : 0);
+      e[i.groupColumnWidthVarName] = `${n}px`;
     }
-    return this.groupColumns.forEach((r) => {
-      const o = this.columns.value.leafs.findOrThrow((a) => a.key === r);
-      e[o.groupColumnWidthVarName] = `${t.sumBy((a) => a.pin === o.pin ? a.inlineWidth ?? 0 : 0)}px`;
+    return this.groupColumns.forEach((n) => {
+      const r = this.columns.value.leafs.findOrThrow((c) => c.key === n);
+      e[r.groupColumnWidthVarName] = `${t.sumBy((c) => c.pin === r.pin ? c.inlineWidth ?? 0 : 0)}px`;
     }), e;
   });
   // ========== Flexible Column Sizing ==========
@@ -464,23 +622,23 @@ class je {
   setContainerWidth = (e) => {
     this._containerWidth !== e && (this._containerWidth = e, this.flexWidths.clear(), this.sizes.clear(), this.update());
   };
-  flexWidths = P(() => {
+  flexWidths = B(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flexWidths memo");
     const e = this._containerWidth;
     if (e <= 0) return {};
-    const t = this.columns.value.visibleLeafs.filter((c) => c.key !== V), i = (c) => !c.isFlexible || this.columnWidths.has(c.key), r = t.filter(i).sumBy((c) => c.baseWidth), o = t.filter((c) => !i(c)), a = o.sumBy((c) => c.baseWidth), u = e - r;
-    if (u <= a)
-      return o.toRecord((c) => [c.key, c.baseWidth]);
-    const h = {};
-    let s = 0;
-    return o.forEach((c, d) => {
-      if (d === o.length - 1)
-        h[c.key] = u - s;
+    const t = this.columns.value.visibleLeafs.filter((l) => l.key !== W), i = (l) => !l.isFlexible || this.columnWidths.has(l.key), n = t.filter(i).sumBy((l) => l.baseWidth), r = t.filter((l) => !i(l)), c = r.sumBy((l) => l.baseWidth), h = e - n;
+    if (h <= c)
+      return r.toRecord((l) => [l.key, l.baseWidth]);
+    const u = {};
+    let a = 0;
+    return r.forEach((l, p) => {
+      if (p === r.length - 1)
+        u[l.key] = h - a;
       else {
-        const f = Math.floor(c.baseWidth / a * u);
-        h[c.key] = f, s += f;
+        const f = Math.floor(l.baseWidth / c * h);
+        u[l.key] = f, a += f;
       }
-    }), h;
+    }), u;
   });
   getFlexWidth(e) {
     return this.flexWidths.value[e];
@@ -489,6 +647,54 @@ class je {
   MIN_COLUMN_WIDTH_PX = 48;
   DEFAULT_COLUMN_WIDTH_PX = 200;
   expandedGroupRow = /* @__PURE__ */ new Set();
+  // ========== Row Detail Expansion ==========
+  _expandedDetailRows = /* @__PURE__ */ new Set();
+  get expandedDetailRows() {
+    return this.props.expandedRowKeys ? new Set(this.props.expandedRowKeys) : this._expandedDetailRows;
+  }
+  toggleDetailRow = (e) => {
+    const t = new Set(this.expandedDetailRows);
+    t.has(e) ? t.delete(e) : t.add(e), this.props.onExpandedRowKeysChange ? this.props.onExpandedRowKeysChange(Array.from(t)) : this._expandedDetailRows = t, this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update();
+  };
+  // ========== Pagination ==========
+  _page = 1;
+  get page() {
+    return this.props.page ?? this._page;
+  }
+  get pageSize() {
+    const e = this.props.def.pagination;
+    if (e?.pageSize) return e.pageSize;
+    const t = this.props.def.visibleRowsCount;
+    return typeof t == "number" ? t : 10;
+  }
+  get isPaginated() {
+    return !!this.props.def.pagination;
+  }
+  get paginationState() {
+    const e = this.props.def.pagination;
+    if (!e) return;
+    const t = e.totalCount, i = this.pageSize;
+    return {
+      page: this.page,
+      pageSize: i,
+      totalItems: t,
+      totalPages: Math.max(1, Math.ceil(t / i))
+    };
+  }
+  changePage = (e) => {
+    const t = this.paginationState;
+    if (!t) return;
+    const i = Math.max(1, Math.min(e, t.totalPages));
+    i !== this.page && (this.props.onPageChange ? this.props.onPageChange(i, t.pageSize) : this._page = i, this.fireServerStateChange({ page: i }), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update());
+  };
+  // ========== Row Offsets (for variable-height virtualization) ==========
+  rowOffsets = B(() => {
+    const e = [];
+    let t = 0;
+    for (const i of this.flatRows.value)
+      e.push(t), t += i instanceof Y ? i.heightForOffset : this.rowHeight;
+    return { offsets: e, totalHeight: t };
+  });
   selectedRows = /* @__PURE__ */ new Set();
   get leftEdge() {
     return this.columns.value.left.sumBy((e) => e.inlineWidth ?? 0);
@@ -507,24 +713,26 @@ class je {
     if (t.length > 0)
       [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
     else {
-      const { _sortColumn: i, _sortDirection: r } = this;
-      this._sortColumn = i === e && r === "DESC" ? void 0 : e, this._sortDirection = i === e && r === "ASC" ? "DESC" : "ASC";
+      const { _sortColumn: n, _sortDirection: r } = this;
+      this._sortColumn = n === e && r === "DESC" ? void 0 : e, this._sortDirection = n === e && r === "ASC" ? "DESC" : "ASC";
     }
-    this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
+    this.props.onSortChange?.(this._sortColumn, this._sortDirection);
+    const i = this.isPaginated && this.page !== 1 ? 1 : this.page;
+    i !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({ sortColumn: this._sortColumn, sortDirection: this._sortDirection, page: i }), this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.update();
   };
   pinColumn = (e, t) => {
-    const i = this.columns.value.flat.findOrThrow((r) => r.uniqueKey === e);
-    i.pin !== t && i.pinColumn(t), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.flexWidths.clear(), this.sizes.clear(), this.update();
+    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.rowOffsets.clear(), this.flexWidths.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.flexWidths.clear(), this.sizes.clear(), this.update();
+    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.rowOffsets.clear(), this.flexWidths.clear(), this.sizes.clear(), this.update();
   };
   unGroupAll = () => {
     const e = new Set(this.groupColumns);
-    this.groupColumns = /* @__PURE__ */ new Set(), this.hiddenColumns = new Set(Array.from(this.hiddenColumns).filter((t) => !e.has(t))), this.sourceColumns.clear(), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.flexWidths.clear(), this.sizes.clear(), this.update();
+    this.groupColumns = /* @__PURE__ */ new Set(), this.hiddenColumns = new Set(Array.from(this.hiddenColumns).filter((t) => !e.has(t))), this.sourceColumns.clear(), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.rowOffsets.clear(), this.flexWidths.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();
+    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.rowOffsets.clear(), this.update();
   };
   toggleRowSelection = (e) => {
     this.toggleRowsSelection([e]);
@@ -532,7 +740,7 @@ class je {
   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?.({
+    t ? e.forEach((i) => this.selectedRows.delete(i)) : e.forEach((i) => this.selectedRows.add(i)), this.flatRows.clear(), this.rowOffsets.clear(), this.update(), this.props.onSelectionChange?.({
       action: t ? "deselect" : "select",
       affectedRowKeys: e,
       selectedRowKeys: Array.from(this.selectedRows),
@@ -543,7 +751,7 @@ class je {
     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.flexWidths.clear(), this.sizes.clear(), this.update();
+    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.rowOffsets.clear(), this.flexWidths.clear(), this.sizes.clear(), this.update();
   };
   setWidth = (e, t) => {
     this.columnWidths.set(e, t);
@@ -560,7 +768,7 @@ class je {
     return this._sortDirection;
   }
 }
-class qe {
+class rt {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
@@ -568,16 +776,16 @@ class qe {
     return this.column.key === G ? this.row.rowIndex + 1 : this.column.key === T ? `${this.row.groupValue} (${this.row.count})` : null;
   }
 }
-class we {
-  constructor(e, t, i, r, o) {
-    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = r, this.groupValue = o, i.forEach((a) => a.parentRow = this);
+class Se {
+  constructor(e, t, i, n, r) {
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = n, this.groupValue = r, i.forEach((c) => c.parentRow = this);
   }
   get key() {
     return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
   }
   parentRow;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new qe(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new rt(this.grid, this, e));
   }
   get selected() {
     return this.allRows.every((e) => e.selected);
@@ -606,131 +814,206 @@ class we {
   get groupingColumnGridColumn() {
     const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
     return e.sumBy(
-      (r) => r.pin === t.pin && r.key !== V && r.key !== _ && r.key !== G ? 1 : 0
+      (n) => n.pin === t.pin && n.key !== W && n.key !== _ && n.key !== G && n.key !== O ? 1 : 0
     );
   }
   toggleRow() {
     this.grid.toggleGroupRow(this.key);
   }
 }
-function q(l) {
-  const { children: e, column: t, style: i, ...r } = l, { key: o, pin: a, left: u, right: h, isEdge: s, align: c, widthVarName: d, leftVarName: f, rightVarName: y, isFirstLeaf: v, isLastLeaf: R } = t;
-  "align" in t.def && (r.jc = c);
-  const N = o === G, S = o === _, x = o === V, L = a === "LEFT", C = a === "RIGHT";
-  return /* @__PURE__ */ n(
-    m,
+function Fe(s) {
+  const { row: e } = s, { grid: t, parentRow: i } = e, n = t.props.def.rowDetail, r = e.height === "auto";
+  return /* @__PURE__ */ o(
+    g,
     {
-      component: "datagrid.body.cell",
+      component: `${t.componentName}.body.detailRow`,
+      props: { role: "row" },
+      style: {
+        gridColumn: "1 / -1",
+        height: r ? "auto" : `${e.height}px`
+      },
+      children: /* @__PURE__ */ o(m, { position: "sticky", left: 0, width: "fit", overflow: "hidden", style: { minWidth: "100%" }, children: n.content(i.data) })
+    }
+  );
+}
+Fe.displayName = "DataGridDetailRow";
+function K(s) {
+  const { children: e, column: t, style: i, ...n } = s, { key: r, pin: c, left: h, right: u, isEdge: a, align: l, widthVarName: p, leftVarName: f, rightVarName: C, isFirstLeaf: b, isLastLeaf: k } = t;
+  "align" in t.def && (n.jc = l);
+  const P = r === G, N = r === _, S = r === W, F = c === "LEFT", w = c === "RIGHT", y = F || w, R = F && h === 0, D = F && a, E = w && a, V = w && u === 0;
+  return /* @__PURE__ */ o(
+    g,
+    {
+      component: `${t.grid.componentName}.body.cell`,
       props: { role: "cell" },
       variant: {
-        isPinned: L || C,
-        isFirstLeftPinned: L && u === 0,
-        isLastLeftPinned: L && s,
-        isFirstRightPinned: C && s,
-        isLastRightPinned: C && h === 0,
-        isRowSelection: S,
-        isRowNumber: N,
-        isFirstLeaf: v,
-        isLastLeaf: R,
-        isEmptyCell: x
+        isPinned: y,
+        isFirstLeftPinned: R,
+        isLastLeftPinned: D,
+        isFirstRightPinned: E,
+        isLastRightPinned: V,
+        isRowSelection: N,
+        isRowNumber: P,
+        isFirstLeaf: b,
+        isLastLeaf: k,
+        isEmptyCell: S
       },
       style: {
-        width: `var(${d})`,
+        width: `var(${p})`,
         height: `var(${t.grid.rowHeightVarName})`,
-        left: L ? `var(${f})` : void 0,
-        right: C ? `var(${y})` : void 0,
+        left: F ? `var(${f})` : void 0,
+        right: w ? `var(${C})` : void 0,
         ...i
       },
-      ...r,
+      ...n,
       children: e
     }
   );
 }
-q.displayName = "DataGridCell";
-function ye(l) {
-  const { row: e } = l, { selected: t, indeterminate: i, cells: r, groupingColumn: o, groupingColumnGridColumn: a, depth: u, expanded: h } = e, s = k(() => {
-    e.grid.toggleRowsSelection(e.allRows.map((c) => c.key));
+K.displayName = "DataGridCell";
+function De(s) {
+  const { row: e } = s, { selected: t, indeterminate: i, cells: n, groupingColumn: r, groupingColumnGridColumn: c, depth: h, expanded: u } = e, a = v(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((l) => l.key));
   }, []);
-  return /* @__PURE__ */ n(m, { className: "grid-row", selected: t, display: "contents", props: { role: "rowgroup" }, children: r.map((c) => {
-    const { key: d, pin: f, groupColumnWidthVarName: y } = c.column, v = f === "RIGHT";
-    if (d === T)
-      return /* @__PURE__ */ n(
-        q,
-        {
-          column: c.column,
-          style: {
-            width: `var(${y})`,
-            right: v ? "0" : void 0
-          },
-          br: o.pin === "LEFT" ? 1 : void 0,
-          gridColumn: a,
-          pl: 4 * u,
-          overflow: "auto",
-          children: /* @__PURE__ */ n(g, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ p(D, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
-            /* @__PURE__ */ n(ge, { fill: "currentColor", width: "14px", height: "14px", rotate: h ? 0 : -90 }),
-            c.value
-          ] }) })
-        },
-        d
-      );
-    if (d === _)
-      return /* @__PURE__ */ n(q, { column: c.column, children: /* @__PURE__ */ n(le, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: s }) }, d);
-    if (f !== o.pin || d === G || d === V)
-      return /* @__PURE__ */ n(q, { column: c.column, px: d === G ? 3 : void 0, children: c.value }, d);
-  }) });
+  return /* @__PURE__ */ o(
+    g,
+    {
+      component: `${e.grid.componentName}.body.groupRow`,
+      className: "grid-row",
+      selected: t,
+      display: "contents",
+      props: { role: "rowgroup" },
+      children: n.map((l) => {
+        const { key: p, pin: f, groupColumnWidthVarName: C } = l.column, b = f === "RIGHT";
+        if (p === T)
+          return /* @__PURE__ */ o(
+            K,
+            {
+              column: l.column,
+              style: {
+                width: `var(${C})`,
+                right: b ? "0" : void 0
+              },
+              br: r.pin === "LEFT" ? 1 : void 0,
+              gridColumn: c,
+              pl: 4 * h,
+              overflow: "auto",
+              children: /* @__PURE__ */ o(m, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ d(L, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+                /* @__PURE__ */ o(pe, { fill: "currentColor", width: "14px", height: "14px", rotate: u ? 0 : -90 }),
+                l.value
+              ] }) })
+            },
+            p
+          );
+        if (p === _)
+          return /* @__PURE__ */ o(K, { column: l.column, children: /* @__PURE__ */ o(me, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: a }) }, p);
+        if (f !== r.pin || p === G || p === W || p === O)
+          return /* @__PURE__ */ o(K, { column: l.column, px: p === G ? 3 : void 0, children: l.value }, p);
+      })
+    }
+  );
 }
-ye.displayName = "DataGridGroupRow";
-function ve(l) {
-  const { cell: e } = l;
-  return /* @__PURE__ */ n(m, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ n(g, { px: 3, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
+De.displayName = "DataGridGroupRow";
+function Ge(s) {
+  const { cell: e } = s;
+  return /* @__PURE__ */ o(g, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ o(m, { px: 3, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
 }
-ve.displayName = "DataGridCellText";
-function be(l) {
-  const { row: e } = l, { selected: t } = e;
-  return /* @__PURE__ */ n(m, { className: "grid-row", selected: t, display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ n(q, { column: i.column, children: i.column.Cell ? /* @__PURE__ */ n(i.column.Cell, { cell: i }) : /* @__PURE__ */ n(ve, { cell: i }) }, i.column.key)) });
+Ge.displayName = "DataGridCellText";
+function Ne(s) {
+  const { row: e } = s, { selected: t } = e, i = e.grid.props.def.rowDetail?.expandOnRowClick, n = v(() => {
+    e.grid.toggleDetailRow(e.key);
+  }, [e.grid, e.key]);
+  return /* @__PURE__ */ o(
+    g,
+    {
+      component: `${e.grid.componentName}.body.row`,
+      className: "grid-row",
+      selected: t,
+      display: "contents",
+      props: { role: "row", onClick: i ? n : void 0 },
+      cursor: i ? "pointer" : void 0,
+      children: e.cells.map((r) => /* @__PURE__ */ o(K, { column: r.column, children: r.column.Cell ? /* @__PURE__ */ o(r.column.Cell, { cell: r }) : /* @__PURE__ */ o(Ge, { cell: r }) }, r.column.key))
+    }
+  );
+}
+Ne.displayName = "DataGridRow";
+const ye = 10, ae = 20;
+function st(s, e) {
+  let t = 0, i = s.length - 1;
+  for (; t < i; ) {
+    const n = t + i + 1 >>> 1;
+    s[n] <= e ? t = n : i = n - 1;
+  }
+  return t;
 }
-be.displayName = "DataGridRow";
-const Xe = 10, de = 20;
-function Re(l) {
-  const { grid: e, scrollTop: t } = l, i = e.flatRows.value.length, r = Math.max(0, Math.floor(t / e.rowHeight) - de), o = e.props.def.visibleRowsCount ?? Xe, a = e.rowHeight * o + e.rowHeight / 5, u = e.props.data.length === 0, h = X(() => {
-    if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), u)
+function ve(s) {
+  return s instanceof Y ? /* @__PURE__ */ o(Fe, { row: s }, s.key) : s instanceof Se ? /* @__PURE__ */ o(De, { row: s }, s.key) : /* @__PURE__ */ o(Ne, { row: s }, s.key);
+}
+function Le(s) {
+  const { grid: e, scrollTop: t } = s, i = e.props.def.visibleRowsCount === "all", { offsets: n, totalHeight: r } = e.rowOffsets.value, c = !!e.props.def.rowDetail, h = i ? 0 : c ? Math.max(0, st(n, t) - ae) : Math.max(0, Math.floor(t / e.rowHeight) - ae), u = i ? 0 : c ? n[h] ?? 0 : h * e.rowHeight, a = i ? e.flatRows.value.length : e.props.def.visibleRowsCount ?? ye, l = i ? void 0 : e.rowHeight * a + e.rowHeight / 5, p = e.props.data.length === 0, f = X(() => {
+    if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), p)
       return null;
-    const s = o + de * 2;
-    return e.flatRows.value.take(s, r).map((d) => d instanceof we ? /* @__PURE__ */ n(ye, { row: d }, d.key) : /* @__PURE__ */ n(be, { row: d }, d.key));
-  }, [e.flatRows.value, u, r, o]);
-  if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), u) {
-    const { noDataComponent: s } = e.props.def, c = e.props.loading ? "loading..." : "empty";
-    return /* @__PURE__ */ n(m, { jc: "center", ai: "center", width: "fit", position: "sticky", left: 0, style: { height: a }, children: s ?? c });
-  }
-  return /* @__PURE__ */ n(g, { style: { height: a }, children: /* @__PURE__ */ n(
-    g,
+    if (i)
+      return e.flatRows.value.map(ve);
+    const C = a + ae * 2;
+    return e.flatRows.value.take(C, h).map(ve);
+  }, [e.flatRows.value, p, i, h, a]);
+  if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), p) {
+    const { noDataComponent: C } = e.props.def, b = e.props.loading ? "loading..." : "empty";
+    return /* @__PURE__ */ o(
+      g,
+      {
+        jc: "center",
+        ai: "center",
+        width: "fit",
+        position: "sticky",
+        left: 0,
+        style: { height: l ?? e.rowHeight * ye },
+        children: C ?? b
+      }
+    );
+  }
+  return i ? /* @__PURE__ */ o(
+    ce,
+    {
+      component: `${e.componentName}.body`,
+      width: "max-content",
+      minWidth: "fit",
+      transition: "none",
+      style: { gridTemplateColumns: e.gridTemplateColumns.value },
+      children: f
+    }
+  ) : /* @__PURE__ */ o(m, { style: { height: l }, children: /* @__PURE__ */ o(
+    m,
     {
       style: {
-        height: `${i * e.rowHeight}px`
+        height: c ? `${r}px` : `${e.flatRows.value.length * e.rowHeight}px`
       },
-      children: /* @__PURE__ */ n(
-        me,
+      children: /* @__PURE__ */ o(
+        ce,
         {
-          component: "datagrid.body",
+          component: `${e.componentName}.body`,
           width: "max-content",
           minWidth: "fit",
           transition: "none",
           style: {
-            transform: `translate3d(0, ${r * e.rowHeight}px, 0)`,
+            transform: `translate3d(0, ${u}px, 0)`,
             willChange: "transform",
             gridTemplateColumns: e.gridTemplateColumns.value
           },
-          children: h
+          children: f
         }
       )
     }
   ) });
 }
-Re.displayName = "DataGridBody";
-function Ye() {
-  return /* @__PURE__ */ n(
-    m,
+Le.displayName = "DataGridBody";
+function lt(s) {
+  const { grid: e } = s;
+  return /* @__PURE__ */ o(
+    g,
     {
+      component: `${e.componentName}.emptyColumns`,
       d: "column",
       ai: "center",
       jc: "center",
@@ -740,9 +1023,9 @@ function Ye() {
       bgColor: "gray-50",
       borderRadius: 4,
       theme: { dark: { bgColor: "gray-900" } },
-      children: /* @__PURE__ */ p(m, { d: "column", ai: "center", gap: 3, children: [
-        /* @__PURE__ */ n(
-          g,
+      children: /* @__PURE__ */ d(g, { d: "column", ai: "center", gap: 3, children: [
+        /* @__PURE__ */ o(
+          m,
           {
             width: 16,
             height: 16,
@@ -752,7 +1035,7 @@ function Ye() {
             display: "flex",
             ai: "center",
             jc: "center",
-            children: /* @__PURE__ */ n(fe, { viewBox: "0 0 24 24", width: "40", fill: "currentColor", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ n(
+            children: /* @__PURE__ */ o(U, { viewBox: "0 0 24 24", width: "40", fill: "currentColor", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ o(
               "path",
               {
                 fillRule: "evenodd",
@@ -762,160 +1045,160 @@ function Ye() {
             ) })
           }
         ),
-        /* @__PURE__ */ p(m, { d: "column", ai: "center", gap: 1, children: [
-          /* @__PURE__ */ n(g, { fontSize: 18, fontWeight: 600, color: "gray-900", theme: { dark: { color: "gray-50" } }, children: "No Columns Selected" }),
-          /* @__PURE__ */ n(g, { fontSize: 14, color: "gray-500", textAlign: "center", theme: { dark: { color: "gray-400" } }, children: "Select at least one column from the columns menu to display data" })
+        /* @__PURE__ */ d(g, { d: "column", ai: "center", gap: 1, children: [
+          /* @__PURE__ */ o(m, { fontSize: 18, fontWeight: 600, color: "gray-900", theme: { dark: { color: "gray-50" } }, children: "No Columns Selected" }),
+          /* @__PURE__ */ o(m, { fontSize: 14, color: "gray-500", textAlign: "center", theme: { dark: { color: "gray-400" } }, children: "Select at least one column from the columns menu to display data" })
         ] })
       ] })
     }
   );
 }
-function pe({ column: l, grid: e }) {
-  const t = e.columnFilters[l.key], i = t?.type === "text" ? t.value : "", [r, o] = M(i), a = O(null);
-  z(() => () => {
-    a.current && clearTimeout(a.current);
+function be({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "text" ? t.value : "", [n, r] = I(i), c = H(null);
+  de(() => () => {
+    c.current && clearTimeout(c.current);
   }, []);
-  const u = k(
-    (c) => {
-      const d = c.target.value;
-      o(d), a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-        d.trim() ? e.setColumnFilter(l.key, { type: "text", value: d }) : e.setColumnFilter(l.key, void 0), a.current = null;
+  const h = v(
+    (l) => {
+      const p = l.target.value;
+      r(p), c.current && clearTimeout(c.current), c.current = setTimeout(() => {
+        p.trim() ? e.setColumnFilter(s.key, { type: "text", value: p }) : e.setColumnFilter(s.key, void 0), c.current = null;
       }, 300);
     },
-    [e, l.key]
-  ), h = k(() => {
-    o(""), e.setColumnFilter(l.key, void 0);
-  }, [e, l.key]), s = typeof l.def.filterable == "object" ? l.def.filterable : {};
-  return /* @__PURE__ */ p(m, { ai: "center", position: "relative", width: "fit", children: [
-    /* @__PURE__ */ n(j, { width: "fit", variant: "compact", placeholder: s.placeholder ?? "Filter...", value: r, onChange: u }),
-    r && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: h }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+    [e, s.key]
+  ), u = v(() => {
+    r(""), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]), a = typeof s.def.filterable == "object" ? s.def.filterable : {};
+  return /* @__PURE__ */ d(g, { ai: "center", position: "relative", width: "fit", children: [
+    /* @__PURE__ */ o(q, { width: "fit", variant: "compact", placeholder: a.placeholder ?? "Filter...", value: n, onChange: h }),
+    n && /* @__PURE__ */ o(g, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: u }, children: /* @__PURE__ */ o(m, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
   ] });
 }
-function Ke({ column: l, grid: e }) {
-  const t = e.columnFilters[l.key], i = t?.type === "number" ? t.value : "", r = t?.type === "number" ? t.operator : "eq", o = t?.type === "number" ? t.valueTo : "", [a, u] = M(i), [h, s] = M(r), [c, d] = M(o ?? ""), f = O(null), y = O(null);
-  z(() => () => {
-    f.current && clearTimeout(f.current), y.current && clearTimeout(y.current);
+function at({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "number" ? t.value : "", n = t?.type === "number" ? t.operator : "eq", r = t?.type === "number" ? t.valueTo : "", [c, h] = I(i), [u, a] = I(n), [l, p] = I(r ?? ""), f = H(null), C = H(null);
+  de(() => () => {
+    f.current && clearTimeout(f.current), C.current && clearTimeout(C.current);
   }, []);
-  const v = typeof l.def.filterable == "object" ? l.def.filterable : {}, R = k(
-    (C, w, F) => {
-      const W = typeof w == "number" ? w : parseFloat(w);
-      if (isNaN(W) || w === "") {
-        e.setColumnFilter(l.key, void 0);
+  const b = typeof s.def.filterable == "object" ? s.def.filterable : {}, k = v(
+    (w, y, R) => {
+      const D = typeof y == "number" ? y : parseFloat(y);
+      if (isNaN(D) || y === "") {
+        e.setColumnFilter(s.key, void 0);
         return;
       }
       const E = {
         type: "number",
-        operator: C,
-        value: W
+        operator: w,
+        value: D
       };
-      if (C === "between" && F !== void 0 && F !== "") {
-        const B = typeof F == "number" ? F : parseFloat(String(F));
-        isNaN(B) || (E.valueTo = B);
+      if (w === "between" && R !== void 0 && R !== "") {
+        const V = typeof R == "number" ? R : parseFloat(String(R));
+        isNaN(V) || (E.valueTo = V);
       }
-      e.setColumnFilter(l.key, E);
+      e.setColumnFilter(s.key, E);
     },
-    [e, l.key]
-  ), N = k(
-    (C) => {
-      const w = C.target.value;
-      u(w), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
-        R(h, w, c), f.current = null;
+    [e, s.key]
+  ), P = v(
+    (w) => {
+      const y = w.target.value;
+      h(y), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        k(u, y, l), f.current = null;
       }, 300);
     },
-    [h, c, R]
-  ), S = k(
-    (C) => {
-      s(C), R(C, a, c);
+    [u, l, k]
+  ), N = v(
+    (w) => {
+      a(w), k(w, c, l);
     },
-    [a, c, R]
-  ), x = k(
-    (C) => {
-      const w = C.target.value;
-      d(w), y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-        R(h, a, w), y.current = null;
+    [c, l, k]
+  ), S = v(
+    (w) => {
+      const y = w.target.value;
+      p(y), C.current && clearTimeout(C.current), C.current = setTimeout(() => {
+        k(u, c, y), C.current = null;
       }, 300);
     },
-    [h, a, R]
-  ), L = k(() => {
-    u(""), d(""), s("eq"), e.setColumnFilter(l.key, void 0);
-  }, [e, l.key]);
-  return /* @__PURE__ */ p(m, { ai: h === "between" ? "start" : "center", gap: 1, width: "fit", children: [
-    /* @__PURE__ */ p(
-      b,
+    [u, c, k]
+  ), F = v(() => {
+    h(""), p(""), a("eq"), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]);
+  return /* @__PURE__ */ d(g, { ai: u === "between" ? "start" : "center", gap: 1, width: "fit", children: [
+    /* @__PURE__ */ d(
+      x,
       {
-        value: h,
+        value: u,
         variant: "compact",
-        onChange: (C) => C && S(C),
+        onChange: (w) => w && N(w),
         minWidth: 6,
         hideIcon: !0,
         children: [
-          /* @__PURE__ */ n(b.Item, { value: "eq", children: "=" }),
-          /* @__PURE__ */ n(b.Item, { value: "ne", children: "≠" }),
-          /* @__PURE__ */ n(b.Item, { value: "gt", children: ">" }),
-          /* @__PURE__ */ n(b.Item, { value: "gte", children: "≥" }),
-          /* @__PURE__ */ n(b.Item, { value: "lt", children: "<" }),
-          /* @__PURE__ */ n(b.Item, { value: "lte", children: "≤" }),
-          /* @__PURE__ */ n(b.Item, { value: "between", children: "↔" })
+          /* @__PURE__ */ o(x.Item, { value: "eq", children: "=" }),
+          /* @__PURE__ */ o(x.Item, { value: "ne", children: "≠" }),
+          /* @__PURE__ */ o(x.Item, { value: "gt", children: ">" }),
+          /* @__PURE__ */ o(x.Item, { value: "gte", children: "≥" }),
+          /* @__PURE__ */ o(x.Item, { value: "lt", children: "<" }),
+          /* @__PURE__ */ o(x.Item, { value: "lte", children: "≤" }),
+          /* @__PURE__ */ o(x.Item, { value: "between", children: "↔" })
         ]
       }
     ),
-    h === "between" ? /* @__PURE__ */ p(m, { d: "column", gap: 1, flex1: !0, children: [
-      /* @__PURE__ */ p(m, { ai: "center", position: "relative", flex1: !0, children: [
-        /* @__PURE__ */ n(
-          j,
+    u === "between" ? /* @__PURE__ */ d(g, { d: "column", gap: 1, flex1: !0, children: [
+      /* @__PURE__ */ d(g, { ai: "center", position: "relative", flex1: !0, children: [
+        /* @__PURE__ */ o(
+          q,
           {
             type: "number",
             variant: "compact",
-            placeholder: v.placeholder ?? "From",
-            value: a,
-            onChange: N,
+            placeholder: b.placeholder ?? "From",
+            value: c,
+            onChange: P,
             width: "fit",
-            step: v.step
+            step: b.step
           }
         ),
-        (a !== "" || c !== "") && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: L }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+        (c !== "" || l !== "") && /* @__PURE__ */ o(g, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: F }, children: /* @__PURE__ */ o(m, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
       ] }),
-      /* @__PURE__ */ n(m, { ai: "center", flex1: !0, children: /* @__PURE__ */ n(
-        j,
+      /* @__PURE__ */ o(g, { ai: "center", flex1: !0, children: /* @__PURE__ */ o(
+        q,
         {
           type: "number",
           variant: "compact",
           placeholder: "To",
-          value: c,
-          onChange: x,
+          value: l,
+          onChange: S,
           width: "fit",
-          step: v.step
+          step: b.step
         }
       ) })
-    ] }) : /* @__PURE__ */ p(m, { ai: "center", position: "relative", flex1: !0, children: [
-      /* @__PURE__ */ n(
-        j,
+    ] }) : /* @__PURE__ */ d(g, { ai: "center", position: "relative", flex1: !0, children: [
+      /* @__PURE__ */ o(
+        q,
         {
           type: "number",
           variant: "compact",
-          placeholder: v.placeholder ?? "Value",
-          value: a,
-          onChange: N,
+          placeholder: b.placeholder ?? "Value",
+          value: c,
+          onChange: P,
           width: "fit",
-          step: v.step
+          step: b.step
         }
       ),
-      a !== "" && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: L }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+      c !== "" && /* @__PURE__ */ o(g, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: F }, children: /* @__PURE__ */ o(m, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
     ] })
   ] });
 }
-function Je({ column: l, grid: e }) {
-  const t = e.columnFilters[l.key], i = t?.type === "multiselect" ? t.values : [], r = typeof l.def.filterable == "object" ? l.def.filterable : {}, o = X(() => r.options ? r.options : e.getColumnUniqueValues(l.key).map((h) => ({
-    label: h === null ? "(empty)" : String(h),
-    value: h
-  })), [r.options, e, l.key]), a = k(
-    (u, h) => {
-      h.length === 0 ? e.setColumnFilter(l.key, void 0) : e.setColumnFilter(l.key, { type: "multiselect", values: h });
+function ct({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "multiselect" ? t.values : [], n = typeof s.def.filterable == "object" ? s.def.filterable : {}, r = X(() => n.options ? n.options : e.getColumnUniqueValues(s.key).map((u) => ({
+    label: u === null ? "(empty)" : String(u),
+    value: u
+  })), [n.options, e, s.key]), c = v(
+    (h, u) => {
+      u.length === 0 ? e.setColumnFilter(s.key, void 0) : e.setColumnFilter(s.key, { type: "multiselect", values: u });
     },
-    [e, l.key]
+    [e, s.key]
   );
-  return /* @__PURE__ */ p(
-    b,
+  return /* @__PURE__ */ d(
+    x,
     {
       multiple: !0,
       showCheckbox: !0,
@@ -924,109 +1207,152 @@ function Je({ column: l, grid: e }) {
       value: i,
       width: "fit",
       minWidth: 0,
-      onChange: a,
+      onChange: c,
       variant: "compact",
       children: [
-        /* @__PURE__ */ n(b.Unselect, { children: "Clear" }),
-        /* @__PURE__ */ n(b.SelectAll, { children: "Select All" }),
-        o.map((u) => /* @__PURE__ */ n(b.Item, { value: u.value, ai: "center", gap: 2, children: u.label }, String(u.value)))
+        /* @__PURE__ */ o(x.Unselect, { children: "Clear" }),
+        /* @__PURE__ */ o(x.SelectAll, { children: "Select All" }),
+        r.map((h) => /* @__PURE__ */ o(x.Item, { value: h.value, ai: "center", gap: 2, children: h.label }, String(h.value)))
       ]
     }
   );
 }
-function xe(l) {
-  const { column: e, grid: t } = l, { filterable: i } = e.def;
+function Te(s) {
+  const { column: e, grid: t } = s, { filterable: i } = e.def;
   if (!i) return null;
   switch ((typeof i == "object" ? i : { type: "text" }).type) {
     case "text":
-      return /* @__PURE__ */ n(pe, { column: e, grid: t });
+      return /* @__PURE__ */ o(be, { column: e, grid: t });
     case "number":
-      return /* @__PURE__ */ n(Ke, { column: e, grid: t });
+      return /* @__PURE__ */ o(at, { column: e, grid: t });
     case "multiselect":
-      return /* @__PURE__ */ n(Je, { column: e, grid: t });
+      return /* @__PURE__ */ o(ct, { column: e, grid: t });
     default:
-      return /* @__PURE__ */ n(pe, { column: e, grid: t });
+      return /* @__PURE__ */ o(be, { column: e, grid: t });
   }
 }
-xe.displayName = "DataGridColumnFilter";
-function Fe(l) {
-  const { column: e, grid: t } = l, { key: i, pin: r, left: o, right: a, isEdge: u, widthVarName: h, leftVarName: s, rightVarName: c, filterable: d } = e, f = i === V, N = f || i === T || i === G || i === _, S = r === "LEFT", x = r === "RIGHT";
-  return /* @__PURE__ */ n(
-    m,
+Te.displayName = "DataGridColumnFilter";
+function _e(s) {
+  const { column: e, grid: t } = s, { key: i, pin: n, left: r, right: c, isEdge: h, widthVarName: u, leftVarName: a, rightVarName: l, filterable: p } = e, f = i === W, P = f || i === T || i === G || i === _, N = n === "LEFT", S = n === "RIGHT", F = N || S, w = N && r === 0, y = N && h, R = S && h, D = S && c === 0;
+  return /* @__PURE__ */ o(
+    g,
     {
-      component: "datagrid.filter.cell",
-      variant: { isPinned: S || x, isFirstLeftPinned: S && o === 0, isLastLeftPinned: S && u, isFirstRightPinned: x && u, isLastRightPinned: x && a === 0 },
+      component: `${t.componentName}.filter.cell`,
+      variant: { isPinned: F, isFirstLeftPinned: w, isLastLeftPinned: y, isFirstRightPinned: R, isLastRightPinned: D },
       px: f ? 0 : 2,
       style: {
-        width: `var(${h})`,
-        left: S ? `var(${s})` : void 0,
-        right: x ? `var(${c})` : void 0
+        width: `var(${u})`,
+        left: N ? `var(${a})` : void 0,
+        right: S ? `var(${l})` : void 0
       },
-      children: !N && d && /* @__PURE__ */ n(xe, { column: e, grid: t })
+      children: !P && p && /* @__PURE__ */ o(Te, { column: e, grid: t })
     }
   );
 }
-Fe.displayName = "DataGridFilterCell";
-function ke(l) {
-  const { grid: e } = l, { visibleLeafs: t } = e.columns.value;
-  return t.some((r) => r.filterable) ? t.map((r) => /* @__PURE__ */ n(Fe, { column: r, grid: e }, r.uniqueKey)) : null;
+_e.displayName = "DataGridFilterCell";
+function We(s) {
+  const { grid: e } = s, { visibleLeafs: t } = e.columns.value;
+  return t.some((n) => n.filterable) ? t.map((n) => /* @__PURE__ */ o(_e, { column: n, grid: e }, n.uniqueKey)) : null;
 }
-ke.displayName = "DataGridFilterRow";
-function Ge(l) {
-  const { column: e } = l, { key: t, pin: i, left: r, right: o, isEdge: a, isLeaf: u, align: h, header: s, grid: c } = e, [d, f, y] = Me({ hideOnScroll: !0, event: "mousedown" }), [v, R] = M({ top: 0, left: 0 }), N = X(() => v.left > window.innerWidth / 2, [v.left]), S = u && e.sortable && (c.sortColumn !== t || c.sortDirection === "DESC"), x = u && e.sortable && (c.sortColumn !== t || c.sortDirection === "ASC"), L = u && e.sortable && c.sortColumn === t, C = i !== "LEFT", w = i !== "RIGHT", F = !!i, W = u && t !== T, E = u && t === T, B = S || x || L, Y = C || w || F, ee = h === "right" ? 2 : void 0, te = h === "right" ? void 0 : i === "RIGHT" ? 2.5 : 4, K = t === V, J = t === G, ie = t === _, $ = i === "LEFT", Q = i === "RIGHT", re = $ || i === "RIGHT", Z = $ && r === 0, ne = $ && a, H = Q && a, U = Q && o === 0, Ne = u && !K && !J && !ie && e.sortable;
-  return /* @__PURE__ */ n(m, { position: "absolute", left: ee, right: te, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ p(
-    D,
+We.displayName = "DataGridFilterRow";
+function Pe(s) {
+  const { column: e } = s, { key: t, pin: i, left: n, right: r, isEdge: c, isLeaf: h, align: u, header: a, grid: l } = e, [p, f, C] = qe({ hideOnScroll: !0, event: "mousedown" }), [b, k] = I({ top: 0, left: 0 }), P = X(() => b.left > window.innerWidth / 2, [b.left]), N = h && e.sortable && (l.sortColumn !== t || l.sortDirection === "DESC"), S = h && e.sortable && (l.sortColumn !== t || l.sortDirection === "ASC"), F = h && e.sortable && l.sortColumn === t, w = i !== "LEFT", y = i !== "RIGHT", R = !!i, D = h && t !== T, E = h && t === T, V = N || S || F, J = w || y || R, ne = u === "right" ? 2 : void 0, oe = u === "right" ? void 0 : i === "RIGHT" ? 2.5 : 4, Q = t === W, Z = t === G, re = t === _, A = i === "LEFT", ee = i === "RIGHT", se = A || i === "RIGHT", te = A && n === 0, le = A && c, z = ee && c, j = ee && r === 0, He = h && !Q && !Z && !re && e.sortable;
+  return /* @__PURE__ */ o(g, { position: "absolute", left: ne, right: oe, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+    L,
     {
-      component: "datagrid.header.cell.contextMenu",
-      onClick: () => f(!d),
-      variant: { isPinned: re, isFirstLeftPinned: Z, isLastLeftPinned: ne, isFirstRightPinned: H, isLastRightPinned: U, isSortable: Ne, isRowNumber: J },
+      component: `${l.componentName}.header.cell.contextMenu`,
+      onClick: () => f(!p),
+      variant: { isPinned: se, isFirstLeftPinned: te, isLastLeftPinned: le, isFirstRightPinned: z, isLastRightPinned: j, isSortable: He, isRowNumber: Z },
       children: [
-        /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ n(He, { fill: "currentColor" }) }),
-        d && /* @__PURE__ */ p(
-          Ae,
+        /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.icon`, children: /* @__PURE__ */ o(Ke, { fill: "currentColor" }) }),
+        p && /* @__PURE__ */ d(
+          Ye,
           {
-            component: "datagrid.header.cell.contextMenu.tooltip",
-            onPositionChange: R,
-            ref: y,
-            adjustTranslateX: N ? "-100%" : "-21px",
+            component: `${l.componentName}.header.cell.contextMenu.tooltip`,
+            onPositionChange: k,
+            ref: C,
+            adjustTranslateX: P ? "-100%" : "-21px",
             adjustTranslateY: "16px",
             children: [
-              S && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(oe, { width: "100%", fill: "currentColor" }) }),
-                "Sort Ascending"
-              ] }),
-              x && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(oe, { width: "100%", fill: "currentColor", rotate: 180 }) }),
-                "Sort Descending"
-              ] }),
-              L && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
-                /* @__PURE__ */ n(g, { width: 4 }),
-                "Clear Sort"
-              ] }),
-              B && (Y || W || E) && /* @__PURE__ */ n(g, { bb: 1, my: 2, borderColor: "gray-300", component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
-              C && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(ce, { width: "100%", fill: "currentColor" }) }),
-                "Pin Left"
-              ] }),
-              w && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(ce, { width: "100%", fill: "currentColor", rotate: -90 }) }),
-                "Pin Right"
-              ] }),
-              F && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
-                /* @__PURE__ */ n(g, { width: 4 }),
+              N && /* @__PURE__ */ d(
+                L,
+                {
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+                  onClick: () => e.sortColumn("ASC"),
+                  children: [
+                    /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(he, { width: "100%", fill: "currentColor" }) }),
+                    "Sort Ascending"
+                  ]
+                }
+              ),
+              S && /* @__PURE__ */ d(
+                L,
+                {
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+                  onClick: () => e.sortColumn("DESC"),
+                  children: [
+                    /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(he, { width: "100%", fill: "currentColor", rotate: 180 }) }),
+                    "Sort Descending"
+                  ]
+                }
+              ),
+              F && /* @__PURE__ */ d(
+                L,
+                {
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+                  onClick: () => e.sortColumn(void 0),
+                  children: [
+                    /* @__PURE__ */ o(m, { width: 4 }),
+                    "Clear Sort"
+                  ]
+                }
+              ),
+              V && (J || D || E) && /* @__PURE__ */ o(
+                m,
+                {
+                  bb: 1,
+                  my: 2,
+                  borderColor: "gray-300",
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item.separator`
+                }
+              ),
+              w && /* @__PURE__ */ d(
+                L,
+                {
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+                  onClick: () => e.pinColumn("LEFT"),
+                  children: [
+                    /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(fe, { width: "100%", fill: "currentColor" }) }),
+                    "Pin Left"
+                  ]
+                }
+              ),
+              y && /* @__PURE__ */ d(
+                L,
+                {
+                  component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+                  onClick: () => e.pinColumn("RIGHT"),
+                  children: [
+                    /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(fe, { width: "100%", fill: "currentColor", rotate: -90 }) }),
+                    "Pin Right"
+                  ]
+                }
+              ),
+              R && /* @__PURE__ */ d(L, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item`, onClick: () => e.pinColumn(), children: [
+                /* @__PURE__ */ o(m, { width: 4 }),
                 "Unpin"
               ] }),
-              B && Y && (W || E) && /* @__PURE__ */ n(g, { component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
-              W && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
-                /* @__PURE__ */ p(g, { textWrap: "nowrap", children: [
+              V && J && (D || E) && /* @__PURE__ */ o(m, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.separator` }),
+              D && /* @__PURE__ */ d(L, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item`, onClick: e.toggleGrouping, children: [
+                /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(ue, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ d(m, { textWrap: "nowrap", children: [
                   "Group by ",
-                  s ?? t
+                  a ?? t
                 ] })
               ] }),
-              E && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: c.unGroupAll, children: [
-                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
-                /* @__PURE__ */ n(g, { textWrap: "nowrap", children: "Un-Group All" })
+              E && /* @__PURE__ */ d(L, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item`, onClick: l.unGroupAll, children: [
+                /* @__PURE__ */ o($, { component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`, children: /* @__PURE__ */ o(ue, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ o(m, { textWrap: "nowrap", children: "Un-Group All" })
               ] })
             ]
           }
@@ -1035,11 +1361,11 @@ function Ge(l) {
     }
   ) });
 }
-Ge.displayName = "DataGridHeaderCellContextMenu";
-function Se(l) {
-  const { column: e } = l;
-  return /* @__PURE__ */ n(
-    m,
+Pe.displayName = "DataGridHeaderCellContextMenu";
+function Ee(s) {
+  const { column: e } = s;
+  return /* @__PURE__ */ o(
+    g,
     {
       height: "fit",
       ai: "center",
@@ -1047,8 +1373,8 @@ function Se(l) {
       right: e.pin === "RIGHT" ? void 0 : 0,
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
-      children: /* @__PURE__ */ n(
-        g,
+      children: /* @__PURE__ */ o(
+        m,
         {
           cursor: "col-resize",
           px: 0.75,
@@ -1056,163 +1382,179 @@ function Se(l) {
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ n(g, { component: "datagrid.header.cell.resizer" })
+          children: /* @__PURE__ */ o(m, { component: `${e.grid.componentName}.header.cell.resizer` })
         }
       )
     }
   );
 }
-Se.displayName = "DataGridHeaderCellResizer";
-function Le(l) {
-  const { column: e } = l, {
+Ee.displayName = "DataGridHeaderCellResizer";
+function Ve(s) {
+  const { column: e } = s, {
     key: t,
     pin: i,
-    left: r,
-    right: o,
-    isEdge: a,
-    isLeaf: u,
-    leafs: h,
-    grid: s,
-    header: c,
-    gridRows: d,
+    left: n,
+    right: r,
+    isEdge: c,
+    isLeaf: h,
+    leafs: u,
+    grid: a,
+    header: l,
+    gridRows: p,
     widthVarName: f,
-    leftVarName: y,
-    rightVarName: v,
-    inlineWidth: R,
-    isFirstLeaf: N,
-    isLastLeaf: S
-  } = e, x = t === V, L = t === T, C = t === G, w = t === _, F = i === "LEFT", W = i === "RIGHT", E = F || i === "RIGHT", B = F && r === 0, Y = F && a, ee = W && a, te = W && o === 0, K = u && !x && !C && !w && e.sortable, J = u ? 1 : h.length, ie = !C && !w && e.resizable, $ = !C && !w, Q = w ? void 0 : e.align === "right" ? 10 : 3, re = w ? void 0 : e.align === "center" ? 3 : void 0, Z = k(() => {
-    s.toggleSelectAllRows();
-  }, []), ne = X(() => {
-    if (C) return null;
-    if (w) {
-      const H = s.selectedRows.size === s.props.data.length, U = !H && s.selectedRows.size > 0;
-      return /* @__PURE__ */ n(le, { variant: "datagrid", m: 1, indeterminate: U, checked: H, onChange: Z });
+    leftVarName: C,
+    rightVarName: b,
+    inlineWidth: k,
+    isFirstLeaf: P,
+    isLastLeaf: N
+  } = e, S = t === W, F = t === T, w = t === G, y = t === _, R = i === "LEFT", D = i === "RIGHT", E = R || i === "RIGHT", V = R && n === 0, J = R && c, ne = D && c, oe = D && r === 0, Q = h && !S && !w && !y && e.sortable, Z = h ? 1 : u.length, re = !w && !y && e.resizable, A = !w && !y, ee = y ? void 0 : e.align === "right" ? 10 : 3, se = y ? void 0 : e.align === "center" ? 3 : void 0, te = v(() => {
+    a.toggleSelectAllRows();
+  }, []), le = X(() => {
+    if (w) return null;
+    if (y) {
+      const z = a.selectedRows.size === a.props.data.length, j = !z && a.selectedRows.size > 0;
+      return /* @__PURE__ */ o(me, { variant: "datagrid", m: 1, indeterminate: j, checked: z, onChange: te });
     }
-    if (L) {
-      if (s.groupColumns.size === 1) {
-        const H = s.columns.value.leafs.findOrThrow((U) => U.key === s.groupColumns.values().next().value);
-        return H.header ?? H.key;
+    if (F) {
+      if (a.groupColumns.size === 1) {
+        const z = a.columns.value.leafs.findOrThrow((j) => j.key === a.groupColumns.values().next().value);
+        return z.header ?? z.key;
       }
       return "Group";
     }
-    return c ?? t;
-  }, [s.groupColumns, s.selectedRows, Z]);
-  return /* @__PURE__ */ n(
-    m,
+    return l ?? t;
+  }, [a.groupColumns, a.selectedRows, te]);
+  return /* @__PURE__ */ o(
+    g,
     {
       props: { role: "columnheader" },
-      component: "datagrid.header.cell",
+      component: `${a.componentName}.header.cell`,
       variant: {
         isPinned: E,
-        isFirstLeftPinned: B,
-        isLastLeftPinned: Y,
-        isFirstRightPinned: ee,
-        isLastRightPinned: te,
-        isSortable: K,
-        isRowNumber: C,
-        isFirstLeaf: N,
-        isLastLeaf: S,
-        isEmptyCell: x
+        isFirstLeftPinned: V,
+        isLastLeftPinned: J,
+        isFirstRightPinned: ne,
+        isLastRightPinned: oe,
+        isSortable: Q,
+        isRowNumber: w,
+        isFirstLeaf: P,
+        isLastLeaf: N,
+        isEmptyCell: S
       },
-      gridRow: d,
-      gridColumn: J,
+      gridRow: p,
+      gridColumn: Z,
       style: {
         width: `var(${f})`,
-        left: F ? `var(${y})` : void 0,
-        right: W ? `var(${v})` : void 0
+        left: R ? `var(${C})` : void 0,
+        right: D ? `var(${b})` : void 0
       },
-      children: !x && /* @__PURE__ */ p(Ee, { children: [
-        /* @__PURE__ */ n(m, { width: "fit", height: "fit", jc: e.align, props: { onClick: K ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ p(
-          m,
+      children: !S && /* @__PURE__ */ d(Ae, { children: [
+        /* @__PURE__ */ o(g, { width: "fit", height: "fit", jc: e.align, props: { onClick: Q ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+          g,
           {
             overflow: "hidden",
-            position: u ? void 0 : "sticky",
+            position: h ? void 0 : "sticky",
             ai: "center",
             transition: "none",
-            pl: Q,
-            pr: re,
+            pl: ee,
+            pr: se,
             style: {
-              left: i ? void 0 : `var(${s.leftEdgeVarName})`
+              left: i ? void 0 : `var(${a.leftEdgeVarName})`
             },
             children: [
-              /* @__PURE__ */ n(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ne }),
-              t === s.sortColumn && /* @__PURE__ */ n(g, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ n(oe, { width: "16px", rotate: s.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
-              $ && /* @__PURE__ */ n(g, { minWidth: e.align === "right" ? 4 : 10 })
+              /* @__PURE__ */ o(m, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: le }),
+              t === a.sortColumn && /* @__PURE__ */ o(m, { pl: (k ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ o(he, { width: "16px", rotate: a.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              A && /* @__PURE__ */ o(m, { minWidth: e.align === "right" ? 4 : 10 })
             ]
           }
         ) }),
-        ie && /* @__PURE__ */ n(Se, { column: e }),
-        $ && /* @__PURE__ */ n(Ge, { column: e })
+        re && /* @__PURE__ */ o(Ee, { column: e }),
+        A && /* @__PURE__ */ o(Pe, { column: e })
       ] })
     }
   );
 }
-Le.displayName = "DataGridHeaderCell";
-function Te(l) {
-  const { grid: e } = l;
-  return /* @__PURE__ */ p(me, { component: "datagrid.header", style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: [
-    e.headerRows.value.map((t) => t.map((i) => /* @__PURE__ */ n(Le, { column: i }, i.uniqueKey))),
-    /* @__PURE__ */ n(ke, { grid: e })
+Ve.displayName = "DataGridHeaderCell";
+function Be(s) {
+  const { grid: e } = s;
+  return /* @__PURE__ */ d(ce, { component: `${e.componentName}.header`, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: [
+    e.headerRows.value.map((t) => t.map((i) => /* @__PURE__ */ o(Ve, { column: i }, i.uniqueKey))),
+    /* @__PURE__ */ o(We, { grid: e })
   ] });
 }
-Te.displayName = "DataGridHeader";
-function We(l) {
-  const { grid: e } = l, [t, i] = M(0), r = O(null), o = k((u) => {
-    r.current !== null && cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-      i(u.target.scrollTop), r.current = null;
+Be.displayName = "DataGridHeader";
+function $e(s) {
+  const { grid: e } = s, [t, i] = I(0), n = H(null), r = v((h) => {
+    n.current !== null && cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
+      i(h.target.scrollTop), n.current = null;
     });
   }, []);
-  return e.columns.value.userVisibleLeafs.length > 0 ? /* @__PURE__ */ p(g, { overflowX: "scroll", style: { willChange: "scroll-position" }, props: { onScroll: o }, children: [
-    /* @__PURE__ */ n(Te, { grid: e }),
-    /* @__PURE__ */ n(Re, { grid: e, scrollTop: t })
-  ] }) : /* @__PURE__ */ n(Ye, {});
+  return e.columns.value.userVisibleLeafs.length > 0 ? /* @__PURE__ */ d(
+    m,
+    {
+      component: `${e.componentName}.content`,
+      overflowX: "scroll",
+      style: { willChange: "scroll-position" },
+      props: { onScroll: r },
+      children: [
+        /* @__PURE__ */ o(Be, { grid: e }),
+        /* @__PURE__ */ o(Le, { grid: e, scrollTop: t })
+      ]
+    }
+  ) : /* @__PURE__ */ o(lt, { grid: e });
 }
-We.displayName = "DataGridContent";
-function De(l) {
-  const { grid: e } = l;
-  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ p(m, { component: "datagrid.topBar.columnGroups", children: [
-    /* @__PURE__ */ n(I, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
+$e.displayName = "DataGridContent";
+function Me(s) {
+  const { grid: e } = s;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ d(g, { component: `${e.componentName}.topBar.columnGroups`, children: [
+    /* @__PURE__ */ o($, { component: `${e.componentName}.topBar.columnGroups.icon`, children: /* @__PURE__ */ o(ue, { width: "100%", fill: "currentColor" }) }),
     Array.from(e.groupColumns, (t) => {
-      const i = e.columns.value.leafs.findOrThrow((r) => r.key === t);
-      return /* @__PURE__ */ p(Be.Fragment, { children: [
-        /* @__PURE__ */ n(ge, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
-        /* @__PURE__ */ p(m, { component: "datagrid.topBar.columnGroups.item", children: [
+      const i = e.columns.value.leafs.findOrThrow((n) => n.key === t);
+      return /* @__PURE__ */ d(Oe.Fragment, { children: [
+        /* @__PURE__ */ o(pe, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ d(g, { component: `${e.componentName}.topBar.columnGroups.item`, children: [
           i.header ?? i.key,
-          /* @__PURE__ */ n(D, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+          /* @__PURE__ */ o(
+            L,
+            {
+              component: `${e.componentName}.topBar.columnGroups.item.icon`,
+              onClick: () => e.toggleGrouping(i.key),
+              children: /* @__PURE__ */ o(m, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" })
+            }
+          )
         ] })
       ] }, t);
     })
   ] });
 }
-De.displayName = "DataGridColumnGroups";
-function Qe(l) {
-  const { grid: e } = l, [t, i] = M(e.globalFilterValue), r = O(null);
-  z(() => () => {
-    r.current && clearTimeout(r.current);
+Me.displayName = "DataGridColumnGroups";
+function ht(s) {
+  const { grid: e } = s, [t, i] = I(e.globalFilterValue), n = H(null);
+  de(() => () => {
+    n.current && clearTimeout(n.current);
   }, []);
-  const o = k(
-    (c) => {
-      const d = c.target.value;
-      i(d), r.current && clearTimeout(r.current), r.current = setTimeout(() => {
-        e.setGlobalFilter(d), r.current = null;
+  const r = v(
+    (l) => {
+      const p = l.target.value;
+      i(p), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+        e.setGlobalFilter(p), n.current = null;
       }, 300);
     },
     [e]
-  ), a = k(() => {
+  ), c = v(() => {
     i(""), e.setGlobalFilter("");
-  }, [e]), { filtered: u, total: h } = e.filterStats, s = e.hasActiveFilters && u !== h;
-  return /* @__PURE__ */ p(m, { component: "datagrid.topBar.globalFilter", children: [
-    s && /* @__PURE__ */ p(g, { component: "datagrid.topBar.globalFilter.stats", children: [
-      u,
+  }, [e]), { filtered: h, total: u } = e.filterStats, a = e.hasActiveFilters && h !== u;
+  return /* @__PURE__ */ d(g, { component: `${e.componentName}.topBar.globalFilter`, children: [
+    a && /* @__PURE__ */ d(m, { component: `${e.componentName}.topBar.globalFilter.stats`, children: [
+      h,
       "/",
-      h
+      u
     ] }),
-    /* @__PURE__ */ p(m, { position: "relative", ai: "center", children: [
-      /* @__PURE__ */ n(m, { position: "absolute", left: 3, pointerEvents: "none", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ n(ze, { fill: "currentColor", width: "14px" }) }),
-      /* @__PURE__ */ n(j, { placeholder: "Search...", variant: "compact", value: t, onChange: o, pl: 8, pr: t ? 8 : 3 }),
-      t && /* @__PURE__ */ n(
-        g,
+    /* @__PURE__ */ d(g, { position: "relative", ai: "center", children: [
+      /* @__PURE__ */ o(g, { position: "absolute", left: 3, pointerEvents: "none", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ o(Xe, { fill: "currentColor", width: "14px" }) }),
+      /* @__PURE__ */ o(q, { placeholder: "Search...", variant: "compact", value: t, onChange: r, pl: 8, pr: t ? 8 : 3 }),
+      t && /* @__PURE__ */ o(
+        m,
         {
           position: "absolute",
           right: 2,
@@ -1221,53 +1563,53 @@ function Qe(l) {
           color: "gray-400",
           hover: { color: "gray-600" },
           theme: { dark: { color: "gray-500", hover: { color: "gray-300" } } },
-          props: { onClick: a },
-          children: /* @__PURE__ */ n(g, { fontSize: 12, fontWeight: 600, children: "✕" })
+          props: { onClick: c },
+          children: /* @__PURE__ */ o(m, { fontSize: 12, fontWeight: 600, children: "✕" })
         }
       )
     ] })
   ] });
 }
-function _e(l) {
-  const { grid: e } = l, i = X(
+function Ie(s) {
+  const { grid: e } = s, i = X(
     () => e.columns.value.leafs.filter(
-      (s) => ![V, G, _, T].includes(s.key)
+      (a) => ![W, G, _, T].includes(a.key)
     ),
     [e.columns.value.leafs]
-  ).map((s) => ({
-    id: String(s.key),
-    label: s.header ?? s.key,
-    leaf: s
-  })), r = i.filter((s) => s.leaf.isVisible).map((s) => s.id), o = i.length, u = o - r.length > 0;
-  return /* @__PURE__ */ p(
-    b,
+  ).map((a) => ({
+    id: String(a.key),
+    label: a.header ?? a.key,
+    leaf: a
+  })), n = i.filter((a) => a.leaf.isVisible).map((a) => a.id), r = i.length, h = r - n.length > 0;
+  return /* @__PURE__ */ d(
+    x,
     {
       multiple: !0,
       showCheckbox: !0,
       hideIcon: !0,
       variant: "compact",
-      value: r,
-      onChange: (s, c) => {
-        const d = new Set(c);
+      value: n,
+      onChange: (a, l) => {
+        const p = new Set(l);
         i.forEach((f) => {
-          const y = d.has(f.id);
-          f.leaf.isVisible !== y && f.leaf.toggleVisibility();
+          const C = p.has(f.id);
+          f.leaf.isVisible !== C && f.leaf.toggleVisibility();
         });
       },
       isSearchable: i.length > 6,
       searchPlaceholder: "Search columns...",
       display: "inline-flex",
       children: [
-        /* @__PURE__ */ n(b.Display, { children: (s) => {
-          const c = s.length === 0;
-          return /* @__PURE__ */ p(m, { ai: "center", gap: 2, children: [
-            /* @__PURE__ */ p(fe, { viewBox: "0 0 20 20", width: "18", height: "18", children: [
-              /* @__PURE__ */ n("rect", { x: "2", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.9 }),
-              /* @__PURE__ */ n("rect", { x: "8", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.6 }),
-              /* @__PURE__ */ n("rect", { x: "14", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.3 })
+        /* @__PURE__ */ o(x.Display, { children: (a) => {
+          const l = a.length === 0;
+          return /* @__PURE__ */ d(g, { ai: "center", gap: 2, children: [
+            /* @__PURE__ */ d(U, { viewBox: "0 0 20 20", width: "18", height: "18", children: [
+              /* @__PURE__ */ o("rect", { x: "2", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.9 }),
+              /* @__PURE__ */ o("rect", { x: "8", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.6 }),
+              /* @__PURE__ */ o("rect", { x: "14", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.3 })
             ] }),
-            u && /* @__PURE__ */ p(
-              g,
+            h && /* @__PURE__ */ d(
+              m,
               {
                 tag: "span",
                 fontSize: 11,
@@ -1276,75 +1618,69 @@ function _e(l) {
                 px: 2,
                 py: 0.5,
                 borderRadius: 1,
-                bgColor: c ? "red-100" : "amber-100",
-                color: c ? "red-700" : "amber-700",
+                bgColor: l ? "red-100" : "amber-100",
+                color: l ? "red-700" : "amber-700",
                 theme: {
                   dark: {
-                    bgColor: c ? "red-900" : "amber-900",
-                    color: c ? "red-300" : "amber-300"
+                    bgColor: l ? "red-900" : "amber-900",
+                    color: l ? "red-300" : "amber-300"
                   }
                 },
                 children: [
-                  s.length,
+                  a.length,
                   "/",
-                  o
+                  r
                 ]
               }
             )
           ] });
         } }),
-        /* @__PURE__ */ n(b.SelectAll, { children: "Show All" }),
-        /* @__PURE__ */ n(b.Unselect, { children: "Hide All" }),
-        i.map((s) => /* @__PURE__ */ n(b.Item, { value: s.id, textWrap: "nowrap", children: s.label }, s.id))
+        /* @__PURE__ */ o(x.SelectAll, { children: "Show All" }),
+        /* @__PURE__ */ o(x.Unselect, { children: "Hide All" }),
+        i.map((a) => /* @__PURE__ */ o(x.Item, { value: a.id, textWrap: "nowrap", children: a.label }, a.id))
       ]
     }
   );
 }
-_e.displayName = "DataGridTopBarContextMenu";
-function Ve(l) {
-  const { grid: e } = l, { title: t, topBarContent: i, globalFilter: r } = e.props.def;
-  return /* @__PURE__ */ p(m, { component: "datagrid.topBar", position: "relative", ai: "center", jc: "space-between", gap: 4, flexWrap: "wrap", children: [
-    /* @__PURE__ */ p(m, { ai: "center", gap: 3, flexWrap: "wrap", minWidth: 0, children: [
-      /* @__PURE__ */ n(_e, { grid: e }),
-      t && /* @__PURE__ */ n(g, { fontWeight: 600, fontSize: 16, color: "gray-800", theme: { dark: { color: "gray-100" } }, children: t }),
-      /* @__PURE__ */ n(De, { grid: e })
+Ie.displayName = "DataGridTopBarContextMenu";
+function ze(s) {
+  const { grid: e } = s, { title: t, topBarContent: i, globalFilter: n } = e.props.def;
+  return /* @__PURE__ */ d(g, { component: `${e.componentName}.topBar`, position: "relative", ai: "center", jc: "space-between", gap: 4, flexWrap: "wrap", children: [
+    /* @__PURE__ */ d(g, { ai: "center", gap: 3, flexWrap: "wrap", minWidth: 0, children: [
+      /* @__PURE__ */ o(Ie, { grid: e }),
+      t && /* @__PURE__ */ o(m, { fontWeight: 600, fontSize: 16, color: "gray-800", theme: { dark: { color: "gray-100" } }, children: t }),
+      /* @__PURE__ */ o(Me, { grid: e })
     ] }),
-    /* @__PURE__ */ p(m, { ai: "center", gap: 3, flexWrap: "wrap", jc: "flex-end", minWidth: 0, children: [
-      i && /* @__PURE__ */ n(g, { children: i }),
-      r && /* @__PURE__ */ n(Qe, { grid: e })
+    /* @__PURE__ */ d(g, { ai: "center", gap: 3, flexWrap: "wrap", jc: "flex-end", minWidth: 0, children: [
+      i && /* @__PURE__ */ o(m, { children: i }),
+      n && /* @__PURE__ */ o(ht, { grid: e })
     ] })
   ] });
 }
-Ve.displayName = "DataGridTopBar";
-function Ze(l) {
-  const [e, t] = M(0), i = O();
-  return i.current || (i.current = new je(l, () => t((r) => r + 1))), z(() => {
-    i.current.props = l, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
-  }, [l.data]), z(() => {
-    i.current.props = l, 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();
-  }, [l.def]), z(() => {
-    i.current.props = l, i.current.update();
-  }, [l.loading]), z(() => {
-    i.current.props = l, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
-  }, [l.globalFilterValue, l.columnFilters, l.filters]), i.current;
+ze.displayName = "DataGridTopBar";
+function ut(s) {
+  const [e, t] = I(0), i = H();
+  i.current || (i.current = new ot(s, () => t((c) => c + 1)));
+  const n = i.current, r = n.props;
+  return r !== s && (n.props = s, r.def !== s.def && (n.sourceColumns.clear(), n.columns.clear(), n.headerRows.clear(), n.gridTemplateColumns.clear(), n.sizes.clear()), (r.data !== s.data || r.def !== s.def || r.globalFilterValue !== s.globalFilterValue || r.columnFilters !== s.columnFilters || r.filters !== s.filters || r.expandedRowKeys !== s.expandedRowKeys || r.page !== s.page) && (n.rows.clear(), n.flatRows.clear(), n.rowOffsets.clear())), n;
 }
-function et(l) {
-  const e = Ze(l), t = O(null);
-  return Pe(() => {
+function dt(s) {
+  const e = ut(s), t = H(null);
+  return Ue(() => {
     const i = t.current;
     if (!i) return;
-    const r = new ResizeObserver((o) => {
-      const a = o[0]?.contentRect.width ?? 0;
-      e.setContainerWidth(a);
+    const n = new ResizeObserver((r) => {
+      const c = r[0]?.contentRect.width ?? 0;
+      e.setContainerWidth(c);
     });
-    return r.observe(i), () => r.disconnect();
-  }, [e]), console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ p(g, { ref: t, component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
-    e.props.def.topBar && /* @__PURE__ */ n(Ve, { grid: e }),
-    /* @__PURE__ */ n(We, { grid: e }),
-    e.props.def.bottomBar && /* @__PURE__ */ n(Oe, { grid: e })
+    return n.observe(i), () => n.disconnect();
+  }, [e]), console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ d(m, { ref: t, component: e.componentName, style: e.sizes.value, props: { role: "presentation" }, children: [
+    e.props.def.topBar && /* @__PURE__ */ o(ze, { grid: e }),
+    /* @__PURE__ */ o($e, { grid: e }),
+    e.props.def.bottomBar && /* @__PURE__ */ o(tt, { grid: e })
   ] });
 }
-et.displayName = "DataGrid";
+dt.displayName = "DataGrid";
 export {
-  et as default
+  dt as default
 };