@cronocode/react-box 3.1.8 → 3.1.10

package/components/dataGrid.mjs

@@ -1,5 +1,5 @@
-import { jsxs as d, jsx as n, Fragment as Be } from "react/jsx-runtime";
-import Ee, { useCallback as k, useMemo as X, useState as M, useRef as O, useEffect as z, useLayoutEffect as Pe } from "react";
+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";
@@ -11,22 +11,22 @@ import b from "./dropdown.mjs";
 import j from "./textbox.mjs";
 import { Span as I } from "./semantics.mjs";
 import Ae from "./tooltip.mjs";
-function Oe(s) {
-  const { grid: e } = s, { filtered: t, total: i } = e.filterStats, r = e.hasActiveFilters;
-  return /* @__PURE__ */ d(m, { component: "datagrid.bottomBar", children: [
-    /* @__PURE__ */ d(g, { children: [
+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: [
       "Rows: ",
-      r ? `${t} / ${i}` : i
+      t !== i ? `${t} / ${i}` : i
     ] }),
-    e.props.def.rowSelection && /* @__PURE__ */ d(g, { children: [
+    e.props.def.rowSelection && /* @__PURE__ */ p(g, { children: [
       "Selected: ",
       e.selectedRows.size
     ] }),
     r && /* @__PURE__ */ n(g, { color: "blue-600", cursor: "pointer", hover: { textDecoration: "underline" }, props: { onClick: e.clearAllFilters }, children: "Clear filters" })
   ] });
 }
-function Ce(s) {
-  const { cell: e } = s, t = k(() => {
+function Ce(l) {
+  const { cell: e } = l, t = k(() => {
     e.grid.toggleRowSelection(e.row.key);
   }, [e.grid, e.row.key]);
   return /* @__PURE__ */ n(le, { variant: "datagrid", checked: e.row.selected, onChange: t });
@@ -176,16 +176,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, h = Ie.throttle((c) => {
-      const p = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+    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);
       this.leafs.forEach((f) => {
-        const y = o[f.key], v = a > 0 ? (y - i) / a * p : p / this.leafs.length, R = Math.round(y + v);
+        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), u = new AbortController(), l = (c) => {
-      u.abort(), r();
+    }, 40), h = new AbortController(), s = (c) => {
+      h.abort(), r();
     };
-    window.addEventListener("mousemove", h, u), window.addEventListener("mouseup", l, u);
+    window.addEventListener("mousemove", u, h), window.addEventListener("mouseup", s, h);
   };
   pinColumn = (e) => {
     this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -254,9 +254,9 @@ class je {
   });
   columns = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
-    const e = this.sourceColumns.value.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this.sourceColumns.value.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this.sourceColumns.value.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), r = [...e, ...t, ...i].flatMap((l) => l.flatColumns), o = r.filter((l) => l.isLeaf), a = r.filter((l) => l.isLeaf && l.isVisible), h = a.filter(
-      (l) => ![V, G, _, T].includes(l.key)
-    ), u = r.maxBy((l) => l.death) + 1;
+    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;
     return {
       left: e,
       middle: t,
@@ -264,8 +264,8 @@ class je {
       flat: r,
       leafs: o,
       visibleLeafs: a,
-      userVisibleLeafs: h,
-      maxDeath: u
+      userVisibleLeafs: u,
+      maxDeath: h
     };
   });
   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) => {
@@ -300,8 +300,8 @@ class je {
       (o) => o.key !== V && o.key !== G && o.key !== _ && o.key !== T
     ).map((o) => o.key);
     return e.filter((o) => r.some((a) => {
-      const h = o[a];
-      return h == null ? !1 : ae(t, String(h));
+      const u = o[a];
+      return u == null ? !1 : ae(t, String(u));
     }));
   }
   /**
@@ -312,8 +312,8 @@ class je {
     return i.length === 0 ? e : e.filter((r) => i.every((o) => {
       const a = t[o];
       if (!a) return !0;
-      const h = r[o];
-      return this.matchesFilter(h, a);
+      const u = r[o];
+      return this.matchesFilter(u, a);
     }));
   }
   /**
@@ -353,11 +353,18 @@ class je {
     }
   }
   /**
-   * Get filtered data (applies global filter then column filters)
+   * Apply external predicate filters from the filters prop
+   */
+  applyExternalFilters(e) {
+    const t = this.props.filters;
+    return !t || t.length === 0 ? e : e.filter((i) => t.every((r) => r(i)));
+  }
+  /**
+   * Get filtered data (applies external, global, then column filters)
    */
   get filteredData() {
     let e = this.props.data;
-    return this.props.def.globalFilter && (e = this.applyGlobalFilter(e)), e = this.applyColumnFilters(e), e;
+    return e = this.applyExternalFilters(e), this.props.def.globalFilter && (e = this.applyGlobalFilter(e)), e = this.applyColumnFilters(e), e;
   }
   /**
    * Set global filter value
@@ -416,12 +423,12 @@ class je {
       const t = (i, r, o) => {
         const a = r.values().next().value;
         r.delete(a);
-        const h = this.columns.value.leafs.findOrThrow((u) => u.key === a);
-        return this._sortColumn === T && (i = i.sortBy((u) => u[a], this._sortDirection)), i.groupBy((u) => u[a]).map((u) => {
-          let l;
-          r.size > 0 ? l = t(u.values, new Set(r), o + 1) : l = u.values.map((p, f) => new ue(this, p, o + 1 + f));
-          const c = new we(this, h, l, o, u.key);
-          return o += 1, c.expanded && (o += l.length), c;
+        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;
         });
       };
       return t(e, new Set(this.groupColumns), 0);
@@ -461,19 +468,19 @@ class je {
     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), h = e - r;
-    if (h <= a)
+    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 u = {};
-    let l = 0;
-    return o.forEach((c, p) => {
-      if (p === o.length - 1)
-        u[c.key] = h - l;
+    const h = {};
+    let s = 0;
+    return o.forEach((c, d) => {
+      if (d === o.length - 1)
+        h[c.key] = u - s;
       else {
-        const f = Math.floor(c.baseWidth / a * h);
-        u[c.key] = f, l += f;
+        const f = Math.floor(c.baseWidth / a * u);
+        h[c.key] = f, s += f;
       }
-    }), u;
+    }), h;
   });
   getFlexWidth(e) {
     return this.flexWidths.value[e];
@@ -606,8 +613,8 @@ class we {
     this.grid.toggleGroupRow(this.key);
   }
 }
-function q(s) {
-  const { children: e, column: t, style: i, ...r } = s, { key: o, pin: a, left: h, right: u, isEdge: l, align: c, widthVarName: p, leftVarName: f, rightVarName: y, isFirstLeaf: v, isLastLeaf: R } = t;
+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(
@@ -617,10 +624,10 @@ function q(s) {
       props: { role: "cell" },
       variant: {
         isPinned: L || C,
-        isFirstLeftPinned: L && h === 0,
-        isLastLeftPinned: L && l,
-        isFirstRightPinned: C && l,
-        isLastRightPinned: C && u === 0,
+        isFirstLeftPinned: L && u === 0,
+        isLastLeftPinned: L && s,
+        isFirstRightPinned: C && s,
+        isLastRightPinned: C && h === 0,
         isRowSelection: S,
         isRowNumber: N,
         isFirstLeaf: v,
@@ -628,7 +635,7 @@ function q(s) {
         isEmptyCell: x
       },
       style: {
-        width: `var(${p})`,
+        width: `var(${d})`,
         height: `var(${t.grid.rowHeightVarName})`,
         left: L ? `var(${f})` : void 0,
         right: C ? `var(${y})` : void 0,
@@ -640,13 +647,13 @@ function q(s) {
   );
 }
 q.displayName = "DataGridCell";
-function ye(s) {
-  const { row: e } = s, { selected: t, indeterminate: i, cells: r, groupingColumn: o, groupingColumnGridColumn: a, depth: h, expanded: u } = e, l = k(() => {
+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));
   }, []);
   return /* @__PURE__ */ n(m, { className: "grid-row", selected: t, display: "contents", props: { role: "rowgroup" }, children: r.map((c) => {
-    const { key: p, pin: f, groupColumnWidthVarName: y } = c.column, v = f === "RIGHT";
-    if (p === T)
+    const { key: d, pin: f, groupColumnWidthVarName: y } = c.column, v = f === "RIGHT";
+    if (d === T)
       return /* @__PURE__ */ n(
         q,
         {
@@ -657,41 +664,45 @@ function ye(s) {
           },
           br: o.pin === "LEFT" ? 1 : void 0,
           gridColumn: a,
-          pl: 4 * h,
+          pl: 4 * u,
           overflow: "auto",
-          children: /* @__PURE__ */ n(g, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ d(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: u ? 0 : -90 }),
+          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
           ] }) })
         },
-        p
+        d
       );
-    if (p === _)
-      return /* @__PURE__ */ n(q, { column: c.column, children: /* @__PURE__ */ n(le, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: l }) }, p);
-    if (f !== o.pin || p === G || p === V)
-      return /* @__PURE__ */ n(q, { column: c.column, px: p === G ? 3 : void 0, children: c.value }, p);
+    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);
   }) });
 }
 ye.displayName = "DataGridGroupRow";
-function ve(s) {
-  const { cell: e } = s;
+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 }) });
 }
 ve.displayName = "DataGridCellText";
-function be(s) {
-  const { row: e } = s, { selected: t } = e;
+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)) });
 }
 be.displayName = "DataGridRow";
 const Xe = 10, de = 20;
-function Re(s) {
-  const { grid: e, scrollTop: t } = s, 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, h = X(() => {
-    if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), e.props.data.length === 0)
-      return /* @__PURE__ */ n(m, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: a }, children: e.props.loading ? "loading..." : "empty" });
-    const u = o + de * 2;
-    return e.flatRows.value.take(u, r).map((c) => c instanceof we ? /* @__PURE__ */ n(ye, { row: c }, c.key) : /* @__PURE__ */ n(be, { row: c }, c.key));
-  }, [e.flatRows.value, e.props.data.length, e.props.loading, r, a, o]);
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ n(g, { style: { height: a }, children: /* @__PURE__ */ n(
+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)
+      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,
     {
       style: {
@@ -729,7 +740,7 @@ function Ye() {
       bgColor: "gray-50",
       borderRadius: 4,
       theme: { dark: { bgColor: "gray-900" } },
-      children: /* @__PURE__ */ d(m, { d: "column", ai: "center", gap: 3, children: [
+      children: /* @__PURE__ */ p(m, { d: "column", ai: "center", gap: 3, children: [
         /* @__PURE__ */ n(
           g,
           {
@@ -751,7 +762,7 @@ function Ye() {
             ) })
           }
         ),
-        /* @__PURE__ */ d(m, { d: "column", ai: "center", gap: 1, children: [
+        /* @__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" })
         ] })
@@ -759,80 +770,80 @@ function Ye() {
     }
   );
 }
-function pe({ column: s, grid: e }) {
-  const t = e.columnFilters[s.key], i = t?.type === "text" ? t.value : "", [r, o] = M(i), a = O(null);
+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);
   }, []);
-  const h = k(
+  const u = k(
     (c) => {
-      const p = c.target.value;
-      o(p), a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-        p.trim() ? e.setColumnFilter(s.key, { type: "text", value: p }) : e.setColumnFilter(s.key, void 0), a.current = null;
+      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;
       }, 300);
     },
-    [e, s.key]
-  ), u = k(() => {
-    o(""), e.setColumnFilter(s.key, void 0);
-  }, [e, s.key]), l = typeof s.def.filterable == "object" ? s.def.filterable : {};
-  return /* @__PURE__ */ d(m, { ai: "center", position: "relative", width: "fit", children: [
-    /* @__PURE__ */ n(j, { width: "fit", variant: "compact", placeholder: l.placeholder ?? "Filter...", value: r, onChange: h }),
-    r && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: u }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+    [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: "✕" }) })
   ] });
 }
-function Ke({ column: s, grid: e }) {
-  const t = e.columnFilters[s.key], i = t?.type === "number" ? t.value : "", r = t?.type === "number" ? t.operator : "eq", o = t?.type === "number" ? t.valueTo : "", [a, h] = M(i), [u, l] = M(r), [c, p] = M(o ?? ""), f = O(null), y = O(null);
+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);
   }, []);
-  const v = typeof s.def.filterable == "object" ? s.def.filterable : {}, R = k(
+  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(s.key, void 0);
+        e.setColumnFilter(l.key, void 0);
         return;
       }
-      const B = {
+      const E = {
         type: "number",
         operator: C,
         value: W
       };
       if (C === "between" && F !== void 0 && F !== "") {
-        const E = typeof F == "number" ? F : parseFloat(String(F));
-        isNaN(E) || (B.valueTo = E);
+        const B = typeof F == "number" ? F : parseFloat(String(F));
+        isNaN(B) || (E.valueTo = B);
       }
-      e.setColumnFilter(s.key, B);
+      e.setColumnFilter(l.key, E);
     },
-    [e, s.key]
+    [e, l.key]
   ), N = k(
     (C) => {
       const w = C.target.value;
-      h(w), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
-        R(u, w, c), f.current = null;
+      u(w), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        R(h, w, c), f.current = null;
       }, 300);
     },
-    [u, c, R]
+    [h, c, R]
   ), S = k(
     (C) => {
-      l(C), R(C, a, c);
+      s(C), R(C, a, c);
     },
     [a, c, R]
   ), x = k(
     (C) => {
       const w = C.target.value;
-      p(w), y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-        R(u, a, w), y.current = null;
+      d(w), y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+        R(h, a, w), y.current = null;
       }, 300);
     },
-    [u, a, R]
+    [h, a, R]
   ), L = k(() => {
-    h(""), p(""), l("eq"), e.setColumnFilter(s.key, void 0);
-  }, [e, s.key]);
-  return /* @__PURE__ */ d(m, { ai: u === "between" ? "start" : "center", gap: 1, width: "fit", children: [
-    /* @__PURE__ */ d(
+    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,
       {
-        value: u,
+        value: h,
         variant: "compact",
         onChange: (C) => C && S(C),
         minWidth: 6,
@@ -848,8 +859,8 @@ function Ke({ column: s, grid: e }) {
         ]
       }
     ),
-    u === "between" ? /* @__PURE__ */ d(m, { d: "column", gap: 1, flex1: !0, children: [
-      /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, 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,
           {
@@ -876,7 +887,7 @@ function Ke({ column: s, grid: e }) {
           step: v.step
         }
       ) })
-    ] }) : /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, children: [
+    ] }) : /* @__PURE__ */ p(m, { ai: "center", position: "relative", flex1: !0, children: [
       /* @__PURE__ */ n(
         j,
         {
@@ -893,17 +904,17 @@ function Ke({ column: s, grid: e }) {
     ] })
   ] });
 }
-function Je({ column: s, grid: e }) {
-  const t = e.columnFilters[s.key], i = t?.type === "multiselect" ? t.values : [], r = typeof s.def.filterable == "object" ? s.def.filterable : {}, o = X(() => r.options ? r.options : e.getColumnUniqueValues(s.key).map((u) => ({
-    label: u === null ? "(empty)" : String(u),
-    value: u
-  })), [r.options, e, s.key]), a = k(
-    (h, u) => {
-      u.length === 0 ? e.setColumnFilter(s.key, void 0) : e.setColumnFilter(s.key, { type: "multiselect", values: u });
+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 });
     },
-    [e, s.key]
+    [e, l.key]
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     b,
     {
       multiple: !0,
@@ -918,13 +929,13 @@ function Je({ column: s, grid: e }) {
       children: [
         /* @__PURE__ */ n(b.Unselect, { children: "Clear" }),
         /* @__PURE__ */ n(b.SelectAll, { children: "Select All" }),
-        o.map((h) => /* @__PURE__ */ n(b.Item, { value: h.value, ai: "center", gap: 2, children: h.label }, String(h.value)))
+        o.map((u) => /* @__PURE__ */ n(b.Item, { value: u.value, ai: "center", gap: 2, children: u.label }, String(u.value)))
       ]
     }
   );
 }
-function xe(s) {
-  const { column: e, grid: t } = s, { filterable: i } = e.def;
+function xe(l) {
+  const { column: e, grid: t } = l, { filterable: i } = e.def;
   if (!i) return null;
   switch ((typeof i == "object" ? i : { type: "text" }).type) {
     case "text":
@@ -938,40 +949,40 @@ function xe(s) {
   }
 }
 xe.displayName = "DataGridColumnFilter";
-function Fe(s) {
-  const { column: e, grid: t } = s, { key: i, pin: r, left: o, right: a, isEdge: h, widthVarName: u, leftVarName: l, rightVarName: c, filterable: p } = e, f = i === V, N = f || i === T || i === G || i === _, S = r === "LEFT", x = r === "RIGHT";
+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,
     {
       component: "datagrid.filter.cell",
-      variant: { isPinned: S || x, isFirstLeftPinned: S && o === 0, isLastLeftPinned: S && h, isFirstRightPinned: x && h, isLastRightPinned: x && a === 0 },
+      variant: { isPinned: S || x, isFirstLeftPinned: S && o === 0, isLastLeftPinned: S && u, isFirstRightPinned: x && u, isLastRightPinned: x && a === 0 },
       px: f ? 0 : 2,
       style: {
-        width: `var(${u})`,
-        left: S ? `var(${l})` : void 0,
+        width: `var(${h})`,
+        left: S ? `var(${s})` : void 0,
         right: x ? `var(${c})` : void 0
       },
-      children: !N && p && /* @__PURE__ */ n(xe, { column: e, grid: t })
+      children: !N && d && /* @__PURE__ */ n(xe, { column: e, grid: t })
     }
   );
 }
 Fe.displayName = "DataGridFilterCell";
-function ke(s) {
-  const { grid: e } = s, { visibleLeafs: t } = e.columns.value;
+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;
 }
 ke.displayName = "DataGridFilterRow";
-function Ge(s) {
-  const { column: e } = s, { key: t, pin: i, left: r, right: o, isEdge: a, isLeaf: h, align: u, header: l, grid: c } = e, [p, f, y] = Me({ hideOnScroll: !0, event: "mousedown" }), [v, R] = M({ top: 0, left: 0 }), N = X(() => v.left > window.innerWidth / 2, [v.left]), S = h && e.sortable && (c.sortColumn !== t || c.sortDirection === "DESC"), x = h && e.sortable && (c.sortColumn !== t || c.sortDirection === "ASC"), L = h && e.sortable && c.sortColumn === t, C = i !== "LEFT", w = i !== "RIGHT", F = !!i, W = h && t !== T, B = h && t === T, E = S || x || L, Y = C || w || F, ee = u === "right" ? 2 : void 0, te = u === "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 = h && !K && !J && !ie && e.sortable;
-  return /* @__PURE__ */ n(m, { position: "absolute", left: ee, right: te, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+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,
     {
       component: "datagrid.header.cell.contextMenu",
-      onClick: () => f(!p),
+      onClick: () => f(!d),
       variant: { isPinned: re, isFirstLeftPinned: Z, isLastLeftPinned: ne, isFirstRightPinned: H, isLastRightPinned: U, isSortable: Ne, isRowNumber: J },
       children: [
         /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ n(He, { fill: "currentColor" }) }),
-        p && /* @__PURE__ */ d(
+        d && /* @__PURE__ */ p(
           Ae,
           {
             component: "datagrid.header.cell.contextMenu.tooltip",
@@ -980,40 +991,40 @@ function Ge(s) {
             adjustTranslateX: N ? "-100%" : "-21px",
             adjustTranslateY: "16px",
             children: [
-              S && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), 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__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+              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__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+              L && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
                 /* @__PURE__ */ n(g, { width: 4 }),
                 "Clear Sort"
               ] }),
-              E && (Y || W || B) && /* @__PURE__ */ n(g, { bb: 1, my: 2, borderColor: "gray-300", component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
-              C && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+              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__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+              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__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+              F && /* @__PURE__ */ p(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
                 /* @__PURE__ */ n(g, { width: 4 }),
                 "Unpin"
               ] }),
-              E && Y && (W || B) && /* @__PURE__ */ n(g, { component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
-              W && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+              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__ */ d(g, { textWrap: "nowrap", children: [
+                /* @__PURE__ */ p(g, { textWrap: "nowrap", children: [
                   "Group by ",
-                  l ?? t
+                  s ?? t
                 ] })
               ] }),
-              B && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: c.unGroupAll, children: [
+              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" })
               ] })
@@ -1025,8 +1036,8 @@ function Ge(s) {
   ) });
 }
 Ge.displayName = "DataGridHeaderCellContextMenu";
-function Se(s) {
-  const { column: e } = s;
+function Se(l) {
+  const { column: e } = l;
   return /* @__PURE__ */ n(
     m,
     {
@@ -1052,49 +1063,49 @@ function Se(s) {
   );
 }
 Se.displayName = "DataGridHeaderCellResizer";
-function Le(s) {
-  const { column: e } = s, {
+function Le(l) {
+  const { column: e } = l, {
     key: t,
     pin: i,
     left: r,
     right: o,
     isEdge: a,
-    isLeaf: h,
-    leafs: u,
-    grid: l,
+    isLeaf: u,
+    leafs: h,
+    grid: s,
     header: c,
-    gridRows: p,
+    gridRows: d,
     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", B = F || i === "RIGHT", E = F && r === 0, Y = F && a, ee = W && a, te = W && o === 0, K = h && !x && !C && !w && e.sortable, J = h ? 1 : u.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(() => {
-    l.toggleSelectAllRows();
+  } = 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 = l.selectedRows.size === l.props.data.length, U = !H && l.selectedRows.size > 0;
+      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 });
     }
     if (L) {
-      if (l.groupColumns.size === 1) {
-        const H = l.columns.value.leafs.findOrThrow((U) => U.key === l.groupColumns.values().next().value);
+      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;
       }
       return "Group";
     }
     return c ?? t;
-  }, [l.groupColumns, l.selectedRows, Z]);
+  }, [s.groupColumns, s.selectedRows, Z]);
   return /* @__PURE__ */ n(
     m,
     {
       props: { role: "columnheader" },
       component: "datagrid.header.cell",
       variant: {
-        isPinned: B,
-        isFirstLeftPinned: E,
+        isPinned: E,
+        isFirstLeftPinned: B,
         isLastLeftPinned: Y,
         isFirstRightPinned: ee,
         isLastRightPinned: te,
@@ -1104,29 +1115,29 @@ function Le(s) {
         isLastLeaf: S,
         isEmptyCell: x
       },
-      gridRow: p,
+      gridRow: d,
       gridColumn: J,
       style: {
         width: `var(${f})`,
         left: F ? `var(${y})` : void 0,
         right: W ? `var(${v})` : void 0
       },
-      children: !x && /* @__PURE__ */ d(Be, { children: [
-        /* @__PURE__ */ n(m, { width: "fit", height: "fit", jc: e.align, props: { onClick: K ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+      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,
           {
             overflow: "hidden",
-            position: h ? void 0 : "sticky",
+            position: u ? void 0 : "sticky",
             ai: "center",
             transition: "none",
             pl: Q,
             pr: re,
             style: {
-              left: i ? void 0 : `var(${l.leftEdgeVarName})`
+              left: i ? void 0 : `var(${s.leftEdgeVarName})`
             },
             children: [
               /* @__PURE__ */ n(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ne }),
-              t === l.sortColumn && /* @__PURE__ */ n(g, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ n(oe, { width: "16px", rotate: l.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              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 })
             ]
           }
@@ -1138,35 +1149,35 @@ function Le(s) {
   );
 }
 Le.displayName = "DataGridHeaderCell";
-function Te(s) {
-  const { grid: e } = s;
-  return /* @__PURE__ */ d(me, { component: "datagrid.header", style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: [
+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 })
   ] });
 }
 Te.displayName = "DataGridHeader";
-function We(s) {
-  const { grid: e } = s, [t, i] = M(0), r = O(null), o = k((h) => {
+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(h.target.scrollTop), r.current = null;
+      i(u.target.scrollTop), r.current = null;
     });
   }, []);
-  return e.columns.value.userVisibleLeafs.length > 0 ? /* @__PURE__ */ d(g, { overflowX: "scroll", style: { willChange: "scroll-position" }, props: { onScroll: o }, children: [
+  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, {});
 }
 We.displayName = "DataGridContent";
-function De(s) {
-  const { grid: e } = s;
-  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups", children: [
+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" }) }),
     Array.from(e.groupColumns, (t) => {
       const i = e.columns.value.leafs.findOrThrow((r) => r.key === t);
-      return /* @__PURE__ */ d(Ee.Fragment, { children: [
+      return /* @__PURE__ */ p(Be.Fragment, { children: [
         /* @__PURE__ */ n(ge, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
-        /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups.item", children: [
+        /* @__PURE__ */ p(m, { component: "datagrid.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: "✕" }) })
         ] })
@@ -1175,29 +1186,29 @@ function De(s) {
   ] });
 }
 De.displayName = "DataGridColumnGroups";
-function Qe(s) {
-  const { grid: e } = s, [t, i] = M(e.globalFilterValue), r = O(null);
+function Qe(l) {
+  const { grid: e } = l, [t, i] = M(e.globalFilterValue), r = O(null);
   z(() => () => {
     r.current && clearTimeout(r.current);
   }, []);
   const o = k(
     (c) => {
-      const p = c.target.value;
-      i(p), r.current && clearTimeout(r.current), r.current = setTimeout(() => {
-        e.setGlobalFilter(p), r.current = null;
+      const d = c.target.value;
+      i(d), r.current && clearTimeout(r.current), r.current = setTimeout(() => {
+        e.setGlobalFilter(d), r.current = null;
       }, 300);
     },
     [e]
   ), a = k(() => {
     i(""), e.setGlobalFilter("");
-  }, [e]), { filtered: h, total: u } = e.filterStats, l = e.hasActiveFilters && h !== u;
-  return /* @__PURE__ */ d(m, { component: "datagrid.topBar.globalFilter", children: [
-    l && /* @__PURE__ */ d(g, { component: "datagrid.topBar.globalFilter.stats", children: [
-      h,
+  }, [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,
       "/",
-      u
+      h
     ] }),
-    /* @__PURE__ */ d(m, { position: "relative", ai: "center", children: [
+    /* @__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(
@@ -1217,18 +1228,18 @@ function Qe(s) {
     ] })
   ] });
 }
-function _e(s) {
-  const { grid: e } = s, i = X(
+function _e(l) {
+  const { grid: e } = l, i = X(
     () => e.columns.value.leafs.filter(
-      (l) => ![V, G, _, T].includes(l.key)
+      (s) => ![V, G, _, T].includes(s.key)
     ),
     [e.columns.value.leafs]
-  ).map((l) => ({
-    id: String(l.key),
-    label: l.header ?? l.key,
-    leaf: l
-  })), r = i.filter((l) => l.leaf.isVisible).map((l) => l.id), o = i.length, h = o - r.length > 0;
-  return /* @__PURE__ */ d(
+  ).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,
     {
       multiple: !0,
@@ -1236,10 +1247,10 @@ function _e(s) {
       hideIcon: !0,
       variant: "compact",
       value: r,
-      onChange: (l, c) => {
-        const p = new Set(c);
+      onChange: (s, c) => {
+        const d = new Set(c);
         i.forEach((f) => {
-          const y = p.has(f.id);
+          const y = d.has(f.id);
           f.leaf.isVisible !== y && f.leaf.toggleVisibility();
         });
       },
@@ -1247,15 +1258,15 @@ function _e(s) {
       searchPlaceholder: "Search columns...",
       display: "inline-flex",
       children: [
-        /* @__PURE__ */ n(b.Display, { children: (l) => {
-          const c = l.length === 0;
-          return /* @__PURE__ */ d(m, { ai: "center", gap: 2, children: [
-            /* @__PURE__ */ d(fe, { viewBox: "0 0 20 20", width: "18", height: "18", 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 })
             ] }),
-            h && /* @__PURE__ */ d(
+            u && /* @__PURE__ */ p(
               g,
               {
                 tag: "span",
@@ -1274,7 +1285,7 @@ function _e(s) {
                   }
                 },
                 children: [
-                  l.length,
+                  s.length,
                   "/",
                   o
                 ]
@@ -1284,41 +1295,41 @@ function _e(s) {
         } }),
         /* @__PURE__ */ n(b.SelectAll, { children: "Show All" }),
         /* @__PURE__ */ n(b.Unselect, { children: "Hide All" }),
-        i.map((l) => /* @__PURE__ */ n(b.Item, { value: l.id, textWrap: "nowrap", children: l.label }, l.id))
+        i.map((s) => /* @__PURE__ */ n(b.Item, { value: s.id, textWrap: "nowrap", children: s.label }, s.id))
       ]
     }
   );
 }
 _e.displayName = "DataGridTopBarContextMenu";
-function Ve(s) {
-  const { grid: e } = s, { title: t, topBarContent: i, globalFilter: r } = e.props.def;
-  return /* @__PURE__ */ d(m, { component: "datagrid.topBar", position: "relative", ai: "center", jc: "space-between", gap: 4, flexWrap: "wrap", children: [
-    /* @__PURE__ */ d(m, { ai: "center", gap: 3, flexWrap: "wrap", minWidth: 0, children: [
+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 })
     ] }),
-    /* @__PURE__ */ d(m, { ai: "center", gap: 3, flexWrap: "wrap", jc: "flex-end", minWidth: 0, children: [
+    /* @__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 })
     ] })
   ] });
 }
 Ve.displayName = "DataGridTopBar";
-function Ze(s) {
+function Ze(l) {
   const [e, t] = M(0), i = O();
-  return i.current || (i.current = new je(s, () => t((r) => r + 1))), z(() => {
-    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
-  }, [s.data]), z(() => {
-    i.current.props = s, 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();
-  }, [s.def]), z(() => {
-    i.current.props = s, i.current.update();
-  }, [s.loading]), z(() => {
-    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
-  }, [s.globalFilterValue, s.columnFilters]), i.current;
+  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;
 }
-function et(s) {
-  const e = Ze(s), t = O(null);
+function et(l) {
+  const e = Ze(l), t = O(null);
   return Pe(() => {
     const i = t.current;
     if (!i) return;
@@ -1327,7 +1338,7 @@ function et(s) {
       e.setContainerWidth(a);
     });
     return r.observe(i), () => r.disconnect();
-  }, [e]), console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ d(g, { ref: t, component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+  }, [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 })