@box-kite/react 2.2.1 → 2.2.2

package/components/dataGrid.mjs

@@ -5,31 +5,32 @@ import r from "../box.mjs";
 import { a as i, n as a, o, r as s, t as c } from "../behavior.mjs";
 import { t as l } from "../identity.mjs";
 import { Path as u, Svg as d } from "./svg.mjs";
-import f from "./baseSvg.mjs";
-import p from "./button.mjs";
-import m from "./flex.mjs";
-import h from "./checkbox.mjs";
-import g from "./overlay.mjs";
-import _ from "./presence.mjs";
-import v from "./visuallyHidden.mjs";
-import y from "./textbox.mjs";
-import b from "./grid.mjs";
-import x from "./dropdown.mjs";
-import { Span as S } from "./semantics.mjs";
-import C, { Fragment as w, createContext as T, forwardRef as E, memo as D, useCallback as O, useContext as ee, useEffect as k, useImperativeHandle as A, useLayoutEffect as j, useMemo as M, useRef as N, useState as P, useSyncExternalStore as F } from "react";
+import f from "./button.mjs";
+import p from "./flex.mjs";
+import m from "./checkbox.mjs";
+import h from "./overlay.mjs";
+import g from "./presence.mjs";
+import _ from "./visuallyHidden.mjs";
+import v from "./textbox.mjs";
+import y from "./grid.mjs";
+import b from "./dropdown.mjs";
+import { Span as x } from "./semantics.mjs";
+import S from "./popover.mjs";
+import C from "./switch.mjs";
+import w, { Fragment as T, createContext as E, forwardRef as ee, memo as D, useCallback as O, useContext as k, useEffect as A, useImperativeHandle as j, useLayoutEffect as M, useMemo as te, useRef as N, useState as P, useSyncExternalStore as F } from "react";
 import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
-import { useSyncExternalStore as te } from "use-sync-external-store/shim";
+import { useSyncExternalStore as ne } from "use-sync-external-store/shim";
 //#region src/components/dataGrid/components/dataGridBottomBarSelection.tsx
-function ne(e) {
+function re(e) {
 	let { grid: t } = e, n = t.selectedRows.size, i = t.isSelectionView;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.bottomBar.selection`,
 		children: [
 			/* @__PURE__ */ L(r, {
 				component: `${t.componentName}.bottomBar.info`,
 				children: t.localeText.selectedCount(n, t.hiddenSelectedCount)
 			}),
-			t.canShowSelection && (n > 0 || i) && /* @__PURE__ */ L(p, {
+			t.canShowSelection && (n > 0 || i) && /* @__PURE__ */ L(f, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.action`,
 				variant: { pressed: i },
@@ -37,7 +38,7 @@ function ne(e) {
 				onClick: t.toggleSelectionView,
 				children: t.localeText.showSelected
 			}),
-			n > 0 && /* @__PURE__ */ R(p, {
+			n > 0 && /* @__PURE__ */ R(f, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.action`,
 				onClick: t.clearSelection,
@@ -52,39 +53,39 @@ function ne(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridPagination.tsx
-function re(e) {
+function ie(e) {
 	let { grid: t } = e, { pagination: n } = t, i = n.state, a = O(() => n.firstPage(), [n]), o = O(() => n.prevPage(), [n]), s = O(() => n.nextPage(), [n]), c = O(() => n.lastPage(), [n]);
 	if (!i) return null;
 	let { canGoPrev: l, canGoNext: u, totalPages: d } = n;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.bottomBar.pagination`,
 		gap: .5,
 		ai: "center",
 		children: [
-			/* @__PURE__ */ L(ie, {
+			/* @__PURE__ */ L(ae, {
 				grid: t,
 				pageSize: i.pageSize
 			}),
-			/* @__PURE__ */ L(oe, {
+			/* @__PURE__ */ L(se, {
 				componentName: t.componentName,
 				label: t.localeText.firstPage,
 				onClick: a,
 				disabled: !l,
-				children: /* @__PURE__ */ L(le, {})
+				children: /* @__PURE__ */ L(de, {})
 			}),
-			/* @__PURE__ */ L(oe, {
+			/* @__PURE__ */ L(se, {
 				componentName: t.componentName,
 				label: t.localeText.previousPage,
 				onClick: o,
 				disabled: !l,
-				children: /* @__PURE__ */ L(se, {})
+				children: /* @__PURE__ */ L(le, {})
 			}),
-			/* @__PURE__ */ R(m, {
+			/* @__PURE__ */ R(p, {
 				ai: "center",
 				gap: 1.5,
 				px: 2,
 				userSelect: "none",
-				children: [/* @__PURE__ */ L(ae, {
+				children: [/* @__PURE__ */ L(oe, {
 					grid: t,
 					page: i.page,
 					totalPages: d
@@ -95,27 +96,27 @@ function re(e) {
 					children: t.localeText.pageCount(d)
 				})]
 			}),
-			/* @__PURE__ */ L(oe, {
+			/* @__PURE__ */ L(se, {
 				componentName: t.componentName,
 				label: t.localeText.nextPage,
 				onClick: s,
 				disabled: !u,
-				children: /* @__PURE__ */ L(ce, {})
+				children: /* @__PURE__ */ L(ue, {})
 			}),
-			/* @__PURE__ */ L(oe, {
+			/* @__PURE__ */ L(se, {
 				componentName: t.componentName,
 				label: t.localeText.lastPage,
 				onClick: c,
 				disabled: !u,
-				children: /* @__PURE__ */ L(ue, {})
+				children: /* @__PURE__ */ L(fe, {})
 			})
 		]
 	});
 }
-re.displayName = "DataGridPagination";
-function ie({ grid: e, pageSize: t }) {
+ie.displayName = "DataGridPagination";
+function ae({ grid: e, pageSize: t }) {
 	let n = e.pagination.pageSizeOptions;
-	return !n || n.length === 0 ? null : /* @__PURE__ */ L(m, {
+	return !n || n.length === 0 ? null : /* @__PURE__ */ L(p, {
 		ai: "center",
 		gap: 1,
 		me: 1,
@@ -137,7 +138,7 @@ function ie({ grid: e, pageSize: t }) {
 		})
 	});
 }
-function ae({ grid: e, page: t, totalPages: n }) {
+function oe({ grid: e, page: t, totalPages: n }) {
 	let [r, i] = P(String(t)), [a, o] = P(t);
 	t !== a && (o(t), i(String(t)));
 	let s = O(() => {
@@ -145,7 +146,7 @@ function ae({ grid: e, page: t, totalPages: n }) {
 	}, [e, r]), c = O((e) => {
 		e.key === "Enter" ? s() : e.key === "Escape" && i(String(t));
 	}, [s, t]);
-	return /* @__PURE__ */ L(y, {
+	return /* @__PURE__ */ L(v, {
 		type: "number",
 		variant: "compact",
 		value: r,
@@ -161,9 +162,9 @@ function ae({ grid: e, page: t, totalPages: n }) {
 		}
 	});
 }
-function oe(e) {
+function se(e) {
 	let { componentName: t, label: n, onClick: r, disabled: i, children: a } = e;
-	return /* @__PURE__ */ L(p, {
+	return /* @__PURE__ */ L(f, {
 		component: `${t}.bottomBar.pagination.button`,
 		props: {
 			"aria-label": n,
@@ -183,7 +184,7 @@ function oe(e) {
 		children: a
 	});
 }
-function z(e) {
+function ce(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "0 0 24 24",
 		width: "14",
@@ -196,45 +197,45 @@ function z(e) {
 		children: /* @__PURE__ */ L(u, { d: e.d })
 	});
 }
-function se() {
-	return /* @__PURE__ */ L(z, { d: "M15 18l-6-6 6-6" });
-}
-function ce() {
-	return /* @__PURE__ */ L(z, { d: "M9 18l6-6-6-6" });
-}
 function le() {
-	return /* @__PURE__ */ L(z, { d: "M18 18l-6-6 6-6M11 18l-6-6 6-6" });
+	return /* @__PURE__ */ L(ce, { d: "M15 18l-6-6 6-6" });
 }
 function ue() {
-	return /* @__PURE__ */ L(z, { d: "M6 18l6-6-6-6M13 18l6-6-6-6" });
+	return /* @__PURE__ */ L(ce, { d: "M9 18l6-6-6-6" });
+}
+function de() {
+	return /* @__PURE__ */ L(ce, { d: "M18 18l-6-6 6-6M11 18l-6-6 6-6" });
+}
+function fe() {
+	return /* @__PURE__ */ L(ce, { d: "M6 18l6-6-6-6M13 18l6-6-6-6" });
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridBottomBar.tsx
-function de(e) {
+function pe(e) {
 	let { grid: t } = e, { pagination: n, filter: i } = t;
 	if (n.state) {
 		let { totalItems: e, startItem: i, endItem: a } = n;
-		return /* @__PURE__ */ R(m, {
+		return /* @__PURE__ */ R(p, {
 			component: `${t.componentName}.bottomBar`,
 			children: [
 				/* @__PURE__ */ L(r, {
 					component: `${t.componentName}.bottomBar.info`,
 					children: t.localeText.pageRowRange(i, a, e)
 				}),
-				t.props.def.rowSelection && /* @__PURE__ */ L(ne, { grid: t }),
-				/* @__PURE__ */ L(re, { grid: t })
+				t.props.def.rowSelection && /* @__PURE__ */ L(re, { grid: t }),
+				/* @__PURE__ */ L(ie, { grid: t })
 			]
 		});
 	}
 	let { filtered: a, total: o } = i.filterStats;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.bottomBar`,
 		children: [
 			/* @__PURE__ */ L(r, {
 				component: `${t.componentName}.bottomBar.info`,
 				children: t.localeText.rowCount(a, o)
 			}),
-			i.hasActiveFilters && /* @__PURE__ */ R(p, {
+			i.hasActiveFilters && /* @__PURE__ */ R(f, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.clearFilters`,
 				onClick: i.clearAllFilters,
@@ -244,19 +245,19 @@ function de(e) {
 					children: "✕"
 				}), t.localeText.clearFilters]
 			}),
-			t.props.def.rowSelection && /* @__PURE__ */ L(ne, { grid: t })
+			t.props.def.rowSelection && /* @__PURE__ */ L(re, { grid: t })
 		]
 	});
 }
 //#endregion
 //#region src/components/dataGrid/gridNavigationContext.ts
-var fe = T(null);
-function B() {
-	return ee(fe);
+var me = E(null);
+function z() {
+	return k(me);
 }
-var pe = () => () => {};
-function me(e, t, n) {
-	let r = F(e?.activeCell.subscribe ?? pe, () => !!e?.activeCell.isActive(t, n), () => !!e?.activeCell.isActive(t, n));
+var he = () => () => {};
+function B(e, t, n) {
+	let r = F(e?.activeCell.subscribe ?? he, () => !!e?.activeCell.isActive(t, n), () => !!e?.activeCell.isActive(t, n));
 	return e ? {
 		...e.cellProps(t, n),
 		tabIndex: r ? 0 : -1
@@ -264,7 +265,7 @@ function me(e, t, n) {
 }
 //#endregion
 //#region src/components/dataGrid/models/viewportModel.ts
-var he = class e {
+var ge = class e {
 	grid;
 	static DEFAULT_VISIBLE_ROWS_COUNT = 10;
 	static ROWS_AHEAD = 12;
@@ -334,7 +335,7 @@ var he = class e {
 			viewHeight: this.viewHeight
 		};
 	}
-}, ge = class {
+}, _e = class {
 	row;
 	column;
 	listeners = /* @__PURE__ */ new Set();
@@ -354,27 +355,27 @@ var he = class e {
 function V(e, t) {
 	return JSON.stringify([e, t]);
 }
-var _e = 1e3;
-function ve(e) {
+var ve = 1e3;
+function ye(e) {
 	return typeof e == "number" ? "number" : typeof e == "boolean" ? "checkbox" : "text";
 }
-function ye(e, t) {
+function be(e, t) {
 	if (e === "text") return t;
 	if (e !== "number" || t.trim() === "") return;
 	let n = Number(t);
 	return Number.isFinite(n) ? n : void 0;
 }
-var be = /* @__PURE__ */ new Set([
+var xe = /* @__PURE__ */ new Set([
 	"true",
 	"1",
 	"yes"
-]), xe = /* @__PURE__ */ new Set([
+]), Se = /* @__PURE__ */ new Set([
 	"false",
 	"0",
 	"no",
 	""
 ]);
-function Se(e, t, n) {
+function Ce(e, t, n) {
 	if (e.type === "number") {
 		if (n.trim() === "") return { value: null };
 		let e = Number(n);
@@ -382,7 +383,7 @@ function Se(e, t, n) {
 	}
 	if (e.type === "checkbox") {
 		let e = n.trim().toLowerCase();
-		return be.has(e) ? { value: !0 } : xe.has(e) ? { value: !1 } : void 0;
+		return xe.has(e) ? { value: !0 } : Se.has(e) ? { value: !1 } : void 0;
 	}
 	if (e.type === "select") {
 		let e = t.find((e) => String(e.value) === n);
@@ -390,10 +391,10 @@ function Se(e, t, n) {
 	}
 	return { value: n };
 }
-function Ce(e) {
+function we(e) {
 	return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 }
-var we = class {
+var Te = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -418,7 +419,7 @@ var we = class {
 	}
 	editorFor(e, t) {
 		let { editor: n } = e.def;
-		return typeof n == "object" ? n : n ? { type: n } : { type: ve(t) };
+		return typeof n == "object" ? n : n ? { type: n } : { type: ye(t) };
 	}
 	isEditing(e, t) {
 		return this._active?.rowKey === e && this._active.columnKey === t;
@@ -443,7 +444,7 @@ var we = class {
 		return !!this._active?.pending;
 	}
 	begin(e, t, n, r) {
-		let i = r === void 0 ? void 0 : ye(this.editorFor(t, n).type, r);
+		let i = r === void 0 ? void 0 : be(this.editorFor(t, n).type, r);
 		this.rejected.delete(V(e.key, t.key)), this._active = {
 			row: e,
 			rowKey: e.key,
@@ -529,7 +530,7 @@ var we = class {
 					c++;
 					continue;
 				}
-				let f = this.valueOf(l.key, u.key, l.data[u.key]), p = Se(this.editorFor(u, f), this.optionsFor(u, l), d), m = {
+				let f = this.valueOf(l.key, u.key, l.data[u.key]), p = Ce(this.editorFor(u, f), this.optionsFor(u, l), d), m = {
 					rowKey: l.key,
 					columnKey: u.key,
 					row: l.data,
@@ -570,8 +571,8 @@ var we = class {
 		});
 	}
 	nextEditable(e, t, n = !1) {
-		let r = this.grid.flatRows.value, i = this.grid.columns.value.visibleLeafs, a = n ? -1 : 1, o = e * i.length + t + a, s = Math.min(r.length * i.length - 1, o + _e);
-		for (let e = o; e >= Math.max(0, o - _e) && e <= s; e += a) {
+		let r = this.grid.flatRows.value, i = this.grid.columns.value.visibleLeafs, a = n ? -1 : 1, o = e * i.length + t + a, s = Math.min(r.length * i.length - 1, o + ve);
+		for (let e = o; e >= Math.max(0, o - ve) && e <= s; e += a) {
 			let t = Math.floor(e / i.length), n = e % i.length, a = r[t], o = i[n];
 			if (!(!o || a?.kind !== "row" || !this.isEditable(a, o))) return {
 				row: t,
@@ -579,37 +580,7 @@ var we = class {
 			};
 		}
 	}
-}, Te = Symbol("memo.unset"), Ee = class {
-	action;
-	deps;
-	cache = Te;
-	dependents = /* @__PURE__ */ new Set();
-	wired = !1;
-	constructor(e, t) {
-		this.action = e, this.deps = t;
-	}
-	wire() {
-		if (!this.wired) {
-			this.wired = !0;
-			for (let e of this.deps()) e.dependents.add(this);
-		}
-	}
-	get value() {
-		return this.wire(), this.cache === Te && (this.cache = this.action()), this.cache;
-	}
-	clear() {
-		if (this.wire(), this.cache !== Te) {
-			this.cache = Te;
-			for (let e of this.dependents) e.clear();
-		}
-	}
-};
-function H(e, t = () => []) {
-	return new Ee(e, t);
-}
-//#endregion
-//#region src/components/dataGrid/models/cellModel.ts
-var U = class {
+}, H = class {
 	grid;
 	row;
 	column;
@@ -676,7 +647,7 @@ var U = class {
 	cancelEdit = () => {
 		this.grid.edits.cancel();
 	};
-}, De = class e {
+}, Ee = class e {
 	grid;
 	parentRow;
 	constructor(e, t) {
@@ -709,7 +680,7 @@ var U = class {
 	get allRows() {
 		return [];
 	}
-}, W = class {
+}, U = class {
 	grid;
 	rowIndex;
 	constructor(e, t, n) {
@@ -735,9 +706,13 @@ var U = class {
 	toggleDetail = () => {
 		this.grid.toggleDetailRow(this.key);
 	};
-	_cells = H(() => this.grid.columns.value.visibleLeafs.map((e) => new U(this.grid, this, e)));
+	_cells;
 	get cells() {
-		return this._cells.value;
+		let e = this.grid.columns.value.visibleLeafs;
+		return this._cells?.leafs !== e && (this._cells = {
+			leafs: e,
+			cells: e.map((e) => new H(this.grid, this, e))
+		}), this._cells.cells;
 	}
 	get cellCount() {
 		return this.cells.length;
@@ -758,7 +733,7 @@ var U = class {
 		return this.grid.expandedDetailRows.has(this.key);
 	}
 	get flatRows() {
-		return this.grid.props.def.rowDetail && this.expanded ? [this, new De(this.grid, this)] : [this];
+		return this.grid.props.def.rowDetail && this.expanded ? [this, new Ee(this.grid, this)] : [this];
 	}
 	get allRows() {
 		return this;
@@ -766,14 +741,14 @@ var U = class {
 };
 //#endregion
 //#region src/components/dataGrid/models/treeRow.ts
-function Oe(e) {
+function De(e) {
 	return !!e && e.isTreeRow === !0;
 }
 //#endregion
 //#region src/components/dataGrid/useGridNavigation.ts
-var ke = "[role=\"gridcell\"],[role=\"columnheader\"]", Ae = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]", je = 2, Me = [];
-function Ne(e) {
-	let { grid: t, scrollerRef: r, scroll: i, onScrollTo: a } = e, s = t.headerRows.value, l = t.filter.hasFilterableColumns, u = s.length + +!!l, d = t.viewport.isEmpty ? Me : t.flatRows.value, f = t.columns.value.visibleLeafs.length, p = t.aggregation.hasFooter && !t.viewport.isEmpty ? 1 : 0, m = u + d.length + p, h = O((e) => {
+var Oe = "[role=\"gridcell\"],[role=\"columnheader\"]", ke = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]", Ae = 2, je = [];
+function Me(e) {
+	let { grid: t, scrollerRef: r, scroll: i, onScrollTo: a } = e, s = t.headerRows.value, l = t.filter.hasFilterableColumns, u = s.length + +!!l, d = t.viewport.isEmpty ? je : t.flatRows.value, f = t.columns.value.visibleLeafs.length, p = t.aggregation.hasFooter && !t.viewport.isEmpty ? 1 : 0, m = u + d.length + p, h = O((e) => {
 		if (e < s.length) return s[e]?.length ?? 0;
 		if (e < u || e >= u + d.length) return f;
 		let t = d[e - u];
@@ -795,7 +770,7 @@ function Ne(e) {
 			return;
 		}
 		let { startIndex: l, take: f } = o.window(i.top, i.direction);
-		if (s >= l + je && s < l + f - je) return;
+		if (s >= l + Ae && s < l + f - Ae) return;
 		let p = o.rowTop(s);
 		c.scrollTop = p, a(p);
 	}, [
@@ -837,12 +812,12 @@ function Ne(e) {
 	let C = O((e, n, r) => {
 		if (!t.tree.enabled || e.key !== "ArrowRight" && e.key !== "ArrowLeft") return !1;
 		let i = d[n - u];
-		if (!Oe(i) || t.columns.value.visibleLeafs[r]?.key !== t.tree.columnKey) return !1;
+		if (!De(i) || t.columns.value.visibleLeafs[r]?.key !== t.tree.columnKey) return !1;
 		if (e.key === (t.isRtl ? "ArrowLeft" : "ArrowRight")) return !i.hasChildren || i.treeExpanded ? !1 : (i.toggleTree(), !0);
 		if (i.hasChildren && i.treeExpanded) return i.toggleTree(), !0;
 		for (let e = n - 1; e >= u; e--) {
 			let t = d[e - u];
-			if (!(!Oe(t) || t.level >= i.level)) return x.setActiveCell(e, r, { reason: "keyboard" }), !0;
+			if (!(!De(t) || t.level >= i.level)) return x.setActiveCell(e, r, { reason: "keyboard" }), !0;
 		}
 		return !1;
 	}, [
@@ -863,18 +838,18 @@ function Ne(e) {
 		if (!t.props.def.rowSelection) return !1;
 		if (e < u) return e >= s.length || !t.columns.value.visibleLeafs[n]?.isRowSelection ? !1 : (t.toggleSelectAllRows(), !0);
 		let r = t.flatRows.value[e - u];
-		return r instanceof W && (r.toggleSelection(), !0);
+		return r instanceof U && (r.toggleSelection(), !0);
 	}, [
 		t,
 		u,
 		s.length
 	]), E = O((e, t, n) => {
-		let r = Array.from(e.querySelectorAll(Ae));
+		let r = Array.from(e.querySelectorAll(ke));
 		if (r.length < 2) return !1;
 		let i = r.indexOf(t);
 		return i !== -1 && (r[(i + (n ? -1 : 1) + r.length) % r.length].focus(), !0);
-	}, []), D = x.onKeyDown, ee = O((e) => {
-		let n = e.target, r = n.closest?.(ke);
+	}, []), ee = x.onKeyDown, D = O((e) => {
+		let n = e.target, r = n.closest?.(Oe);
 		if (r) {
 			if (n !== r) {
 				if (e.key === "Escape" && !r.querySelector("[aria-expanded=\"true\"]")) {
@@ -902,13 +877,13 @@ function Ne(e) {
 					e.preventDefault();
 					return;
 				}
-				let i = r.querySelector(Ae);
+				let i = r.querySelector(ke);
 				if (i) {
 					e.preventDefault(), i.focus();
 					return;
 				}
 			}
-			if (t.edits.enabled && Ce(e) && t.edits.beginAt(x.activeIndex - u, x.activeColumn, e.key)) {
+			if (t.edits.enabled && we(e) && t.edits.beginAt(x.activeIndex - u, x.activeColumn, e.key)) {
 				e.preventDefault();
 				return;
 			}
@@ -916,7 +891,7 @@ function Ne(e) {
 				e.preventDefault();
 				return;
 			}
-			D(e);
+			ee(e);
 		}
 	}, [
 		t,
@@ -924,46 +899,46 @@ function Ne(e) {
 		s,
 		x.activeColumn,
 		x.activeIndex,
-		D,
+		ee,
 		w,
 		E,
 		T,
 		C
-	]), { setActiveCell: k, activeIndex: A, activeColumn: j } = x, F = o(x.cellProps), [I] = P(() => new ge(A, j));
-	n(() => I.set(A, j), [
-		I,
+	]), { setActiveCell: k, activeIndex: A, activeColumn: j } = x, M = o(x.cellProps), [F] = P(() => new _e(A, j));
+	n(() => F.set(A, j), [
+		F,
 		j,
 		A
 	]);
-	let L = O((e, t) => {
-		let { ref: n, onFocus: r } = F.current(e, t);
+	let I = O((e, t) => {
+		let { ref: n, onFocus: r } = M.current(e, t);
 		return {
 			ref: n,
 			onFocus: r
 		};
-	}, [F]);
+	}, [M]);
 	return {
-		navigation: M(() => ({
+		navigation: te(() => ({
 			rowCount: m,
 			columnCount: f,
 			headerRowCount: u,
-			cellProps: L,
-			activeCell: I,
+			cellProps: I,
+			activeCell: F,
 			setActiveCell: k
 		}), [
+			F,
 			I,
-			L,
 			f,
 			u,
 			m,
 			k
 		]),
-		onKeyDown: ee
+		onKeyDown: D
 	};
 }
 //#endregion
 //#region src/utils/array/arrayUtils.ts
-var Pe;
+var Ne;
 (function(e) {
 	function t(e, t, n = 0) {
 		return e.slice(n, n + t);
@@ -1010,36 +985,63 @@ var Pe;
 		}));
 	}
 	e.groupBy = s;
-})(Pe ||= {});
-var G = Pe, Fe = "row-number-cell", Ie = "row-selection-cell", K = "grouping-cell", Le = "row-detail-cell";
+})(Ne ||= {});
+var W = Ne, Pe = "row-number-cell", Fe = "row-selection-cell", G = "grouping-cell", Ie = "row-detail-cell", K = Symbol("memo.unset"), Le = class {
+	action;
+	deps;
+	cache = K;
+	dependents = /* @__PURE__ */ new Set();
+	wired = !1;
+	constructor(e, t) {
+		this.action = e, this.deps = t;
+	}
+	wire() {
+		if (!this.wired) {
+			this.wired = !0;
+			for (let e of this.deps()) e.dependents.add(this);
+		}
+	}
+	get value() {
+		return this.wire(), this.cache === K && (this.cache = this.action()), this.cache;
+	}
+	clear() {
+		if (this.wire(), this.cache !== K) {
+			this.cache = K;
+			for (let e of this.dependents) e.clear();
+		}
+	}
+};
+function q(e, t = () => []) {
+	return new Le(e, t);
+}
 //#endregion
 //#region src/components/dataGrid/models/aggregationModel.ts
-function q(e) {
+function Re(e) {
 	return e.filter((e) => typeof e == "number" && !Number.isNaN(e));
 }
-var Re = (e) => e.reduce((e, t) => e + t, 0), ze = (e, t) => e.reduce((e, n) => (t ? n < e : n > e) ? n : e), Be = {
+var ze = (e) => e.reduce((e, t) => e + t, 0), Be = (e, t) => e.reduce((e, n) => (t ? n < e : n > e) ? n : e), Ve = {
 	sum: (e) => {
-		let t = q(e);
-		return t.length ? Re(t) : null;
+		let t = Re(e);
+		return t.length ? ze(t) : null;
 	},
 	avg: (e) => {
-		let t = q(e);
-		return t.length ? Math.round(Re(t) / t.length * 100) / 100 : null;
+		let t = Re(e);
+		return t.length ? Math.round(ze(t) / t.length * 100) / 100 : null;
 	},
 	min: (e) => {
-		let t = q(e);
-		return t.length ? ze(t, !0) : null;
+		let t = Re(e);
+		return t.length ? Be(t, !0) : null;
 	},
 	max: (e) => {
-		let t = q(e);
-		return t.length ? ze(t, !1) : null;
+		let t = Re(e);
+		return t.length ? Be(t, !1) : null;
 	},
 	count: (e, t) => t.length
 };
-function Ve(e, t, n) {
-	return typeof e == "function" ? e(t, n) : Be[e]?.(t, n) ?? null;
+function He(e, t, n) {
+	return typeof e == "function" ? e(t, n) : Ve[e]?.(t, n) ?? null;
 }
-var He = class {
+var Ue = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -1060,8 +1062,8 @@ var He = class {
 	get footerLabelColumn() {
 		return this.grid.columns.value.visibleLeafs.find((e) => (e.isData || e.isGrouping) && !e.aggregate);
 	}
-	footerCells = H(() => this.grid.columns.value.visibleLeafs.map((e) => new Ue(this.grid, e, this.grid.filteredData, "footer")), () => [this.grid.rows]);
-}, Ue = class {
+	footerCells = q(() => this.grid.columns.value.visibleLeafs.map((e) => new We(this.grid, e, this.grid.filteredData, "footer")), () => [this.grid.rows]);
+}, We = class {
 	grid;
 	column;
 	rows;
@@ -1070,13 +1072,13 @@ var He = class {
 	constructor(e, t, n, r, i) {
 		this.grid = e, this.column = t, this.rows = n, this.scope = r, this.given = i;
 	}
-	_values = H(() => this.rows.map((e) => e[this.column.key]));
+	_values = q(() => this.rows.map((e) => e[this.column.key]));
 	get values() {
 		return this._values.value;
 	}
-	_value = H(() => {
+	_value = q(() => {
 		let e = this.column.aggregate;
-		return e ? Ve(e, this.values, this.rows) : null;
+		return e ? He(e, this.values, this.rows) : null;
 	});
 	get value() {
 		let e = this.given?.();
@@ -1091,7 +1093,7 @@ var He = class {
 	get isLast() {
 		return !1;
 	}
-}, We = class {
+}, Ge = class {
 	grid;
 	row;
 	column;
@@ -1113,7 +1115,7 @@ var He = class {
 	get cellKind() {
 		return this.column.isGrouping ? "grouping" : this.column.isRowSelection ? this.row.selectable ? "selection" : "spacer" : this.row.spans(this.column) ? "hidden" : this.column.aggregate ? "aggregate" : "spacer";
 	}
-	_aggregate = H(() => this.column.aggregate ? new Ue(this.grid, this.column, this.row.allRows.map((e) => e.data), "group", () => this.row.aggregateValue(this.column)) : null);
+	_aggregate = q(() => this.column.aggregate ? new We(this.grid, this.column, this.row.allRows.map((e) => e.data), "group", () => this.row.aggregateValue(this.column)) : null);
 	get aggregate() {
 		return this._aggregate.value;
 	}
@@ -1132,7 +1134,7 @@ var He = class {
 	get hasGroupingBorder() {
 		return this.row.groupingColumn.pin === "START";
 	}
-}, Ge = class {
+}, Ke = class {
 	grid;
 	groupColumn;
 	rows;
@@ -1158,21 +1160,25 @@ var He = class {
 		return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
 	}
 	parentRow;
-	_cells = H(() => this.grid.columns.value.visibleLeafs.map((e) => new We(this.grid, this, e)));
+	_cells;
 	get cells() {
-		return this._cells.value;
+		return this.cellCache().cells;
 	}
-	_renderedCells = H(() => {
-		let e = [];
-		return this.cells.forEach((t, n) => {
-			t.cellKind !== "hidden" && e.push({
+	cellCache() {
+		let e = this.grid.columns.value.visibleLeafs;
+		return this._cells?.leafs !== e && (this._cells = {
+			leafs: e,
+			cells: e.map((e) => new Ge(this.grid, this, e))
+		}), this._cells;
+	}
+	get renderedCells() {
+		let e = this.cellCache();
+		return e.rendered || (e.rendered = [], e.cells.forEach((t, n) => {
+			t.cellKind !== "hidden" && e.rendered.push({
 				cell: t,
 				columnIndex: n
 			});
-		}), e;
-	});
-	get renderedCells() {
-		return this._renderedCells.value;
+		})), e.rendered;
 	}
 	get cellCount() {
 		return this.renderedCells.length;
@@ -1193,7 +1199,7 @@ var He = class {
 		return this.parentRow ? this.parentRow.depth + 1 : 0;
 	}
 	get count() {
-		return G.sumBy(this.rows, (e) => e.count, 0);
+		return W.sumBy(this.rows, (e) => e.count, 0);
 	}
 	get flatRows() {
 		return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
@@ -1202,7 +1208,7 @@ var He = class {
 		return this.rows.flatMap((e) => e.allRows);
 	}
 	get groupingColumn() {
-		return G.findOrThrow(this.grid.columns.value.leafs, (e) => e.key === K);
+		return W.findOrThrow(this.grid.columns.value.leafs, (e) => e.key === G);
 	}
 	get groupingColumnGridColumn() {
 		return this.grid.groupingSpan.value.length;
@@ -1220,11 +1226,11 @@ var He = class {
 };
 //#endregion
 //#region src/components/dataGrid/components/dataGridDetailRow.tsx
-function Ke(e) {
-	let { row: t, index: i } = e, { grid: a, parentRow: o } = t, s = a.props.def.rowDetail, c = B(), l = (c?.headerRowCount ?? 0) + i, { ref: u, tabIndex: d, onFocus: f } = me(c, l, 0), p = t.isAutoHeight, h = N(null);
+function qe(e) {
+	let { row: t, index: i } = e, { grid: a, parentRow: o } = t, s = a.props.def.rowDetail, c = z(), l = (c?.headerRowCount ?? 0) + i, { ref: u, tabIndex: d, onFocus: f } = B(c, l, 0), m = t.isAutoHeight, h = N(null);
 	return n(() => {
 		a.takeDetailReveal(o.key) && h.current?.scrollIntoView?.({ block: "nearest" });
-	}), /* @__PURE__ */ L(m, {
+	}), /* @__PURE__ */ L(p, {
 		ref: h,
 		component: `${a.componentName}.body.detailRow`,
 		props: {
@@ -1233,7 +1239,7 @@ function Ke(e) {
 		},
 		style: {
 			gridColumn: "1 / -1",
-			height: p ? "auto" : `${t.height}px`
+			height: m ? "auto" : `${t.height}px`
 		},
 		children: /* @__PURE__ */ L(r, {
 			ref: u,
@@ -1254,11 +1260,11 @@ function Ke(e) {
 		})
 	});
 }
-Ke.displayName = "DataGridDetailRow";
-var qe = D(Ke);
+qe.displayName = "DataGridDetailRow";
+var Je = D(qe);
 //#endregion
 //#region src/components/dataGrid/components/dataGridAggregateValue.tsx
-function Je(e) {
+function Ye(e) {
 	let { cell: t } = e, { column: n } = t;
 	if (n.AggregateCell) return /* @__PURE__ */ L(n.AggregateCell, { cell: t });
 	let i = t.scope === "footer" ? "footer.cell" : "body.groupRow.aggregate";
@@ -1271,12 +1277,12 @@ function Je(e) {
 		children: t.value
 	});
 }
-Je.displayName = "DataGridAggregateValue";
+Ye.displayName = "DataGridAggregateValue";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCell.tsx
-var Ye = "button,a[href],input,select,textarea";
+var Xe = "button,a[href],input,select,textarea";
 function J(t) {
-	let { children: n, cell: r, row: i, columnIndex: a, ariaColIndex: o, ariaColSpan: s, style: c, ...l } = t, { column: u } = r, d = B(), { ref: f, tabIndex: p, onFocus: h } = me(d, i, a), { range: g } = u.grid, _ = r instanceof U ? i - (d?.headerRowCount ?? 0) : -1, v = _ >= 0 && g.isCurrent(_, a), y = _ >= 0 && g.isSelected(_, a);
+	let { children: n, cell: r, row: i, columnIndex: a, ariaColIndex: o, ariaColSpan: s, style: c, ...l } = t, { column: u } = r, d = z(), { ref: f, tabIndex: m, onFocus: h } = B(d, i, a), { range: g } = u.grid, _ = r instanceof H ? i - (d?.headerRowCount ?? 0) : -1, v = _ >= 0 && g.isCurrent(_, a), y = _ >= 0 && g.isSelected(_, a);
 	u.hasAlign && (l.jc = u.align);
 	let b = r.isExpanded ? {
 		...u.cellVariant.value,
@@ -1289,8 +1295,8 @@ function J(t) {
 		isInRange: y && !v,
 		isCurrentCell: v
 	});
-	let x = r instanceof U && !r.editing && r.rejected;
-	r instanceof U && r.editing ? b = {
+	let x = r instanceof H && !r.editing && r.rejected;
+	r instanceof H && r.editing ? b = {
 		...b,
 		isEditing: !0,
 		isInvalid: !!r.error
@@ -1298,14 +1304,14 @@ function J(t) {
 		...b,
 		isInvalid: !0
 	});
-	let S = r instanceof U ? (t) => {
-		t.target.closest(Ye) || (e(t.currentTarget), r.beginEdit());
+	let S = r instanceof H ? (t) => {
+		t.target.closest(Xe) || (e(t.currentTarget), r.beginEdit());
 	} : void 0, C = g.enabled && _ >= 0, w = C ? (e) => {
-		e.button === 0 && e.pointerType !== "touch" && (e.target.closest(Ye) || g.press(_, a, e.shiftKey));
+		e.button === 0 && e.pointerType !== "touch" && (e.target.closest(Xe) || g.press(_, a, e.shiftKey));
 	} : void 0, T = C && g.isDragging ? (e) => {
 		g.dragTo(_, a), e.currentTarget.focus();
 	} : void 0;
-	return /* @__PURE__ */ L(m, {
+	return /* @__PURE__ */ L(p, {
 		ref: f,
 		component: `${u.grid.componentName}.body.cell`,
 		props: {
@@ -1314,7 +1320,7 @@ function J(t) {
 			"aria-colspan": s,
 			"aria-selected": y || void 0,
 			"aria-invalid": x || void 0,
-			tabIndex: p,
+			tabIndex: m,
 			onFocus: h,
 			onDoubleClick: S,
 			onPointerDown: w,
@@ -1332,11 +1338,11 @@ function J(t) {
 J.displayName = "DataGridCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFooter.tsx
-function Xe(e) {
-	let { grid: t } = e, { aggregation: n } = t, i = B();
+function Ze(e) {
+	let { grid: t } = e, { aggregation: n } = t, i = z();
 	if (!n.hasFooter) return null;
 	let a = (i?.rowCount ?? 1) - 1, { footerLabelColumn: o, footerLabel: s } = n;
-	return /* @__PURE__ */ L(b, {
+	return /* @__PURE__ */ L(y, {
 		component: `${t.componentName}.footer`,
 		props: { role: "rowgroup" },
 		style: { gridTemplateColumns: t.gridTemplateColumns.value },
@@ -1350,7 +1356,7 @@ function Xe(e) {
 				cell: e,
 				row: a,
 				columnIndex: n,
-				children: e.column.aggregate ? /* @__PURE__ */ L(Je, { cell: e }) : e.column === o ? /* @__PURE__ */ L(r, {
+				children: e.column.aggregate ? /* @__PURE__ */ L(Ye, { cell: e }) : e.column === o ? /* @__PURE__ */ L(r, {
 					component: `${t.componentName}.footer.label`,
 					px: 3,
 					textWrap: "nowrap",
@@ -1360,10 +1366,10 @@ function Xe(e) {
 		})
 	});
 }
-Xe.displayName = "DataGridFooter";
+Ze.displayName = "DataGridFooter";
 //#endregion
 //#region src/icons/expandIcon.tsx
-function Y(e) {
+function Qe(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "4 2 16 18",
 		width: "1rem",
@@ -1378,16 +1384,16 @@ function Y(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellPlaceholder.tsx
-var Ze = [
+var $e = [
 	"3/5",
 	"2/5",
 	"4/5",
 	"1/2",
 	"7/12"
 ];
-function Qe(e) {
-	let { cell: t, columnIndex: n } = e, i = Ze[(t.row.rowIndex + n) % Ze.length];
-	return /* @__PURE__ */ L(m, {
+function et(e) {
+	let { cell: t, columnIndex: n } = e, i = $e[(t.row.rowIndex + n) % $e.length];
+	return /* @__PURE__ */ L(p, {
 		component: `${t.grid.componentName}.body.cell.placeholder`,
 		ai: "center",
 		px: 3,
@@ -1398,12 +1404,12 @@ function Qe(e) {
 		})
 	});
 }
-Qe.displayName = "DataGridCellPlaceholder";
+et.displayName = "DataGridCellPlaceholder";
 //#endregion
 //#region src/components/dataGrid/components/dataGridGroupRow.tsx
-function $e(e) {
-	let { row: t, index: n } = e, { selected: i, indeterminate: a, expanded: o, placeholder: s } = t, c = (B()?.headerRowCount ?? 0) + n, l = O(() => t.toggleSelectAll(), [t]);
-	return /* @__PURE__ */ L(m, {
+function tt(e) {
+	let { row: t, index: n } = e, { selected: i, indeterminate: a, expanded: o, placeholder: s } = t, c = (z()?.headerRowCount ?? 0) + n, l = O(() => t.toggleSelectAll(), [t]);
+	return /* @__PURE__ */ L(p, {
 		component: `${t.grid.componentName}.body.groupRow`,
 		className: "grid-row",
 		selected: t.grid.props.def.rowSelection ? i : void 0,
@@ -1430,13 +1436,13 @@ function $e(e) {
 					gridColumn: e.gridColumnSpan,
 					ps: e.depthPadding,
 					overflow: "auto",
-					children: s ? /* @__PURE__ */ L(Qe, {
+					children: s ? /* @__PURE__ */ L(et, {
 						cell: e,
 						columnIndex: u
 					}) : /* @__PURE__ */ L(r, {
 						textWrap: "nowrap",
 						px: 3,
-						children: /* @__PURE__ */ R(p, {
+						children: /* @__PURE__ */ R(f, {
 							component: `${t.grid.componentName}.body.groupRow.expandButton`,
 							onClick: () => t.toggleRow(),
 							cursor: "pointer",
@@ -1447,7 +1453,7 @@ function $e(e) {
 								tabIndex: -1,
 								"aria-expanded": o
 							},
-							children: [/* @__PURE__ */ L(Y, {
+							children: [/* @__PURE__ */ L(Qe, {
 								fill: "currentColor",
 								width: "14px",
 								height: "14px",
@@ -1461,7 +1467,7 @@ function $e(e) {
 					row: c,
 					columnIndex: u,
 					ariaColIndex: n + 1,
-					children: /* @__PURE__ */ L(h, {
+					children: /* @__PURE__ */ L(m, {
 						variant: "datagrid",
 						m: 1,
 						checked: i,
@@ -1478,7 +1484,7 @@ function $e(e) {
 					row: c,
 					columnIndex: u,
 					ariaColIndex: n + 1,
-					children: e.aggregate && /* @__PURE__ */ L(Je, { cell: e.aggregate })
+					children: e.aggregate && /* @__PURE__ */ L(Ye, { cell: e.aggregate })
 				}, e.column.key);
 				case "spacer": return /* @__PURE__ */ L(J, {
 					cell: e,
@@ -1493,21 +1499,21 @@ function $e(e) {
 		})
 	});
 }
-$e.displayName = "DataGridGroupRow";
-var et = D($e), tt = "input,select,textarea,button";
-function nt(e) {
+tt.displayName = "DataGridGroupRow";
+var nt = D(tt), rt = "input,select,textarea,button";
+function it(e) {
 	let { options: t } = e.editor;
 	return typeof t == "function" ? t(e.row.data) : t ?? [];
 }
-function rt(e) {
-	let { cell: t, row: r, columnIndex: i } = e, { grid: a } = t, o = B(), s = N(null), c = l("datagrid-cell-error"), { error: u, pending: d } = t;
+function at(e) {
+	let { cell: t, row: r, columnIndex: i } = e, { grid: a } = t, o = z(), s = N(null), c = l("datagrid-cell-error"), { error: u, pending: d } = t;
 	n(() => {
-		let e = s.current?.querySelector(tt);
+		let e = s.current?.querySelector(rt);
 		e?.focus(), e instanceof HTMLInputElement && e.type !== "checkbox" && e.select();
 	}, []);
 	let f = O(() => {
 		s.current?.closest("[role=\"gridcell\"]")?.focus();
-	}, []), p = O((e) => {
+	}, []), m = O((e) => {
 		if (!o) return;
 		let t = a.edits.nextEditable(r - o.headerRowCount, i, e.shiftKey);
 		t && (e.preventDefault(), o.setActiveCell(t.row + o.headerRowCount, t.column, { reason: "programmatic" }), a.edits.beginAt(t.row, t.column));
@@ -1516,7 +1522,7 @@ function rt(e) {
 		a,
 		o,
 		r
-	]), h = O((e) => {
+	]), g = O((e) => {
 		if (e.key === "Escape") {
 			if (s.current?.querySelector("[aria-expanded=\"true\"]")) return;
 			e.preventDefault(), e.stopPropagation(), t.cancelEdit(), f();
@@ -1531,29 +1537,29 @@ function rt(e) {
 				e.preventDefault();
 				return;
 			}
-			p(e);
+			m(e);
 		}
 	}, [
 		t,
 		f,
-		p
+		m
 	]), _ = O(() => {
 		!t.editing || t.pending || t.commitEdit();
 	}, [t]);
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		ref: s,
 		component: `${a.componentName}.body.cell.editor`,
 		variant: { isPending: d },
-		props: { onKeyDown: h },
+		props: { onKeyDown: g },
 		width: "fit",
 		height: "fit",
 		ai: "center",
-		children: [/* @__PURE__ */ L(it, {
+		children: [/* @__PURE__ */ L(ot, {
 			cell: t,
 			errorId: u ? c : void 0,
 			onBlur: _,
 			onCommitted: f
-		}), u && /* @__PURE__ */ L(g, {
+		}), u && /* @__PURE__ */ L(h, {
 			anchor: s,
 			side: "bottom",
 			align: "start",
@@ -1566,14 +1572,14 @@ function rt(e) {
 		})]
 	});
 }
-function it(e) {
+function ot(e) {
 	let { cell: t, errorId: n, onBlur: r, onCommitted: i } = e, { EditCell: a } = t.column.def, { type: o, placeholder: s, step: c, min: l, max: u } = t.editor, d = t.column.header ?? t.column.key, f = {
 		"aria-label": t.grid.localeText.editCell(String(d)),
 		"aria-invalid": n ? !0 : void 0,
 		"aria-describedby": n
 	};
 	if (a) return /* @__PURE__ */ L(a, { cell: t });
-	if (o === "checkbox") return /* @__PURE__ */ L(h, {
+	if (o === "checkbox") return /* @__PURE__ */ L(m, {
 		checked: !!t.draft,
 		onChange: (e) => {
 			t.setDraft(e.target.checked), t.commitEdit(), i();
@@ -1583,7 +1589,7 @@ function it(e) {
 			onBlur: r
 		}
 	});
-	if (o === "select") return /* @__PURE__ */ L(x, {
+	if (o === "select") return /* @__PURE__ */ L(b, {
 		value: t.draft,
 		defaultOpen: !0,
 		width: "fit",
@@ -1595,13 +1601,13 @@ function it(e) {
 			t.setDraft(e ?? null), t.commitEdit(), i();
 		},
 		props: f,
-		children: nt(t).map((e) => /* @__PURE__ */ L(x.Item, {
+		children: it(t).map((e) => /* @__PURE__ */ L(b.Item, {
 			value: e.value,
 			children: e.label ?? String(e.value)
 		}, String(e.value)))
 	});
 	let p = o === "number";
-	return /* @__PURE__ */ L(y, {
+	return /* @__PURE__ */ L(v, {
 		type: p ? "number" : "text",
 		value: t.draft === null || t.draft === void 0 ? "" : String(t.draft),
 		placeholder: s,
@@ -1623,12 +1629,12 @@ function it(e) {
 		}
 	});
 }
-rt.displayName = "DataGridCellEditor";
+at.displayName = "DataGridCellEditor";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellText.tsx
-function at(e) {
+function st(e) {
 	let { cell: t } = e;
-	return /* @__PURE__ */ L(m, {
+	return /* @__PURE__ */ L(p, {
 		component: `${t.grid.componentName}.body.cell.text`,
 		height: "fit",
 		width: "fit",
@@ -1644,18 +1650,18 @@ function at(e) {
 		})
 	});
 }
-at.displayName = "DataGridCellText";
+st.displayName = "DataGridCellText";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellTree.tsx
-function ot(e) {
+function ct(e) {
 	let { cell: t, row: n, children: i } = e, { hasChildren: a, treeExpanded: o, level: s } = n, c = n.grid.componentName, l = O((e) => {
 		e.stopPropagation(), n.toggleTree();
 	}, [n]), u = t.value == null || t.value === "" ? t.grid.localeText.unnamedRow(n.rowIndex + 1) : String(t.value);
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${c}.body.cell.tree`,
 		ai: "center",
 		ps: s * n.grid.tree.indent,
-		children: [a ? /* @__PURE__ */ L(p, {
+		children: [a ? /* @__PURE__ */ L(f, {
 			component: `${c}.body.cell.tree.toggle`,
 			variant: { isExpanded: o },
 			type: "button",
@@ -1668,7 +1674,7 @@ function ot(e) {
 				tabIndex: -1,
 				"aria-label": (o ? t.grid.localeText.collapseTreeRow : t.grid.localeText.expandTreeRow)(u)
 			},
-			children: /* @__PURE__ */ L(Y, {
+			children: /* @__PURE__ */ L(Qe, {
 				fill: "currentColor",
 				width: "14px",
 				height: "14px",
@@ -1683,29 +1689,29 @@ function ot(e) {
 		})]
 	});
 }
-ot.displayName = "DataGridCellTree";
+ct.displayName = "DataGridCellTree";
 //#endregion
 //#region src/components/dataGrid/components/dataGridRow.tsx
-function st(e) {
-	let { row: t, index: n } = e, { selected: r, expandOnRowClick: i } = t, a = (B()?.headerRowCount ?? 0) + n, o = Oe(t) ? t : void 0, s = o && t.grid.tree.columnKey, c = O(() => {
+function lt(e) {
+	let { row: t, index: n } = e, { selected: r, expandOnRowClick: i } = t, a = (z()?.headerRowCount ?? 0) + n, o = De(t) ? t : void 0, s = o && t.grid.tree.columnKey, c = O(() => {
 		t.toggleDetail();
 	}, [t]), l = (e, n) => {
-		if (e.editing) return /* @__PURE__ */ L(rt, {
+		if (e.editing) return /* @__PURE__ */ L(at, {
 			cell: e,
 			row: a,
 			columnIndex: n
 		});
-		let r = t.placeholder && !e.column.isRowNumber ? /* @__PURE__ */ L(Qe, {
+		let r = t.placeholder && !e.column.isRowNumber ? /* @__PURE__ */ L(et, {
 			cell: e,
 			columnIndex: n
-		}) : e.column.Cell ? /* @__PURE__ */ L(e.column.Cell, { cell: e }) : /* @__PURE__ */ L(at, { cell: e });
-		return !o || e.column.key !== s ? r : /* @__PURE__ */ L(ot, {
+		}) : e.column.Cell ? /* @__PURE__ */ L(e.column.Cell, { cell: e }) : /* @__PURE__ */ L(st, { cell: e });
+		return !o || e.column.key !== s ? r : /* @__PURE__ */ L(ct, {
 			cell: e,
 			row: o,
 			children: r
 		});
 	};
-	return /* @__PURE__ */ L(m, {
+	return /* @__PURE__ */ L(p, {
 		component: `${t.grid.componentName}.body.row`,
 		className: "grid-row",
 		selected: t.grid.props.def.rowSelection ? r : void 0,
@@ -1729,37 +1735,37 @@ function st(e) {
 		}, e.column.key))
 	});
 }
-st.displayName = "DataGridRow";
-var ct = D(st);
+lt.displayName = "DataGridRow";
+var ut = D(lt);
 //#endregion
 //#region src/components/dataGrid/components/dataGridBody.tsx
-function lt(e, t, n) {
-	return e instanceof De ? /* @__PURE__ */ L(qe, {
+function dt(e, t, n) {
+	return e instanceof Ee ? /* @__PURE__ */ L(Je, {
 		row: e,
 		index: t,
 		version: n
-	}, e.key) : e instanceof Ge ? /* @__PURE__ */ L(et, {
+	}, e.key) : e instanceof Ke ? /* @__PURE__ */ L(nt, {
 		row: e,
 		index: t,
 		version: n
-	}, e.key) : /* @__PURE__ */ L(ct, {
+	}, e.key) : /* @__PURE__ */ L(ut, {
 		row: e,
 		index: t,
 		version: n
 	}, e.key);
 }
-function ut(e) {
-	let { grid: t, scroll: n } = e, { viewport: i } = t, { startIndex: a, take: o, translateY: s, totalHeight: c, viewHeight: l } = i.window(n.top, n.direction), u = i.showAll, d = i.isEmpty, f = t.flatRows.value, p = t.getSnapshot(), h = M(() => d ? null : G.take(f, o, a).map((e, n) => lt(e, a + n, t.rowVersion(e, a + n))), [
+function ft(e) {
+	let { grid: t, scroll: n } = e, { viewport: i } = t, { startIndex: a, take: o, translateY: s, totalHeight: c, viewHeight: l } = i.window(n.top, n.direction), u = i.showAll, d = i.isEmpty, f = t.flatRows.value, m = t.getSnapshot(), h = te(() => d ? null : W.take(f, o, a).map((e, n) => dt(e, a + n, t.rowVersion(e, a + n))), [
 		f,
 		t,
 		d,
 		o,
 		a,
-		p
+		m
 	]);
 	if (d) {
 		let { noDataComponent: e } = t.props.def, n = t.props.loading ? t.localeText.loadingRows : t.localeText.noRows;
-		return /* @__PURE__ */ L(m, {
+		return /* @__PURE__ */ L(p, {
 			component: `${t.componentName}.body.empty`,
 			jc: "center",
 			ai: "center",
@@ -1775,7 +1781,7 @@ function ut(e) {
 			})
 		});
 	}
-	return u ? /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(b, {
+	return u ? /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(y, {
 		component: `${t.componentName}.body`,
 		width: "max-content",
 		minWidth: "fit",
@@ -1784,13 +1790,13 @@ function ut(e) {
 		props: { role: "rowgroup" },
 		style: { gridTemplateColumns: t.gridTemplateColumns.value },
 		children: h
-	}), /* @__PURE__ */ L(Xe, { grid: t })] }) : /* @__PURE__ */ R(r, {
+	}), /* @__PURE__ */ L(Ze, { grid: t })] }) : /* @__PURE__ */ R(r, {
 		props: { role: "presentation" },
 		style: { height: l },
 		children: [/* @__PURE__ */ L(r, {
 			props: { role: "presentation" },
 			style: { height: `${c}px` },
-			children: /* @__PURE__ */ L(b, {
+			children: /* @__PURE__ */ L(y, {
 				component: `${t.componentName}.body`,
 				width: "max-content",
 				minWidth: "fit",
@@ -1804,15 +1810,15 @@ function ut(e) {
 				},
 				children: h
 			})
-		}), /* @__PURE__ */ L(Xe, { grid: t })]
+		}), /* @__PURE__ */ L(Ze, { grid: t })]
 	});
 }
-ut.displayName = "DataGridBody";
+ft.displayName = "DataGridBody";
 //#endregion
 //#region src/components/dataGrid/components/dataGridEmptyColumns.tsx
-function dt(e) {
+function pt(e) {
 	let { grid: t } = e;
-	return /* @__PURE__ */ L(m, {
+	return /* @__PURE__ */ L(p, {
 		component: `${t.componentName}.emptyColumns`,
 		d: "column",
 		ai: "center",
@@ -1823,7 +1829,7 @@ function dt(e) {
 		bgColor: "gray-50",
 		borderRadius: 4,
 		theme: { dark: { bgColor: "gray-900" } },
-		children: /* @__PURE__ */ R(m, {
+		children: /* @__PURE__ */ R(p, {
 			d: "column",
 			ai: "center",
 			gap: 3,
@@ -1848,7 +1854,7 @@ function dt(e) {
 						d: "M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V6a1 1 0 00-1-1H6zm2 3a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H9a1 1 0 01-1-1z"
 					})
 				})
-			}), /* @__PURE__ */ R(m, {
+			}), /* @__PURE__ */ R(p, {
 				d: "column",
 				ai: "center",
 				gap: 1,
@@ -1871,7 +1877,7 @@ function dt(e) {
 }
 //#endregion
 //#region src/utils/dataGrid/headerCellUtils.ts
-var ft;
+var mt;
 (function(e) {
 	let t = e.CELL_SELECTOR = "[role=\"columnheader\"][aria-sort]", n = ".resizer", r = `button, input, a, [role="menu"], [role="separator"], ${n}`;
 	function i(e, t) {
@@ -1946,8 +1952,8 @@ var ft;
 		} : e;
 	}
 	e.pause = u;
-})(ft ||= {});
-var X = ft, pt;
+})(mt ||= {});
+var Y = mt, ht;
 (function(e) {
 	function t(e, t) {
 		return (t?.type === "text" ? t.value : "") === (e.trim() ? e : "");
@@ -1974,18 +1980,18 @@ var X = ft, pt;
 		return t.valueTo === void 0 ? isNaN(r) : t.valueTo === r;
 	}
 	e.numberMatches = r;
-})(pt ||= {});
-var Z = pt, mt = 300;
-function ht(e, t, r) {
+})(ht ||= {});
+var X = ht, gt = 300;
+function _t(e, t, r) {
 	let a = N(/* @__PURE__ */ new Map()), o = O(() => {
 		for (let e of a.current.values()) clearTimeout(e);
 		a.current.clear();
 	}, []), s = O((e, t) => {
 		clearTimeout(a.current.get(e)), a.current.set(e, setTimeout(() => {
 			a.current.delete(e), t();
-		}, mt));
+		}, gt));
 	}, []);
-	k(() => o, [o]);
+	A(() => o, [o]);
 	let c = i(() => {
 		t(e) || (o(), r(e));
 	});
@@ -1996,9 +2002,9 @@ function ht(e, t, r) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridColumnFilter.tsx
-function gt(e) {
+function vt(e) {
 	let { label: t, onClear: n } = e;
-	return /* @__PURE__ */ L(p, {
+	return /* @__PURE__ */ L(f, {
 		clean: !0,
 		type: "button",
 		position: "absolute",
@@ -2021,16 +2027,16 @@ function gt(e) {
 		})
 	});
 }
-function _t({ column: e }) {
-	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(t?.type === "text" ? t.value : ""), { debounce: s, cancel: c } = ht(t, (e) => Z.textMatches(a, e), (e) => o(e?.type === "text" ? e.value : "")), l = O((t) => {
+function yt({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(t?.type === "text" ? t.value : ""), { debounce: s, cancel: c } = _t(t, (e) => X.textMatches(a, e), (e) => o(e?.type === "text" ? e.value : "")), l = O((t) => {
 		let n = t.target.value;
 		o(n), s("value", () => e.setTextFilter(n));
 	}, [e, s]), u = O(() => {
 		c(), o(""), e.clearFilter();
 	}, [e, c]);
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${n}.filter.cell.input`,
-		children: [/* @__PURE__ */ L(y, {
+		children: [/* @__PURE__ */ L(v, {
 			width: "fit",
 			variant: "compact",
 			placeholder: e.filterConfig?.placeholder ?? i.filterPlaceholder,
@@ -2043,16 +2049,16 @@ function _t({ column: e }) {
 				tabIndex: -1,
 				"aria-label": i.filterColumn(r)
 			}
-		}), a && /* @__PURE__ */ L(gt, {
+		}), a && /* @__PURE__ */ L(vt, {
 			label: i.clearFilter(r),
 			onClear: u
 		})]
 	});
 }
-function vt({ column: e }) {
-	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(() => Z.numberDraft(t)), s = N(a), c = O((e) => {
+function bt({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(() => X.numberDraft(t)), s = N(a), c = O((e) => {
 		s.current = e, o(e);
-	}, []), { debounce: l, cancel: u } = ht(t, (e) => Z.numberMatches(a, e), (e) => c(Z.numberDraft(e))), { operator: d, value: f, valueTo: p } = a, h = e.filterConfig, g = O(() => {
+	}, []), { debounce: l, cancel: u } = _t(t, (e) => X.numberMatches(a, e), (e) => c(X.numberDraft(e))), { operator: d, value: f, valueTo: m } = a, h = e.filterConfig, g = O(() => {
 		let { operator: t, value: n, valueTo: r } = s.current;
 		e.setNumberFilter(t, n, r);
 	}, [e]), _ = O((e, t) => {
@@ -2065,18 +2071,18 @@ function vt({ column: e }) {
 		g,
 		l,
 		u
-	]), v = O((e) => _({ value: e.target.value }, !0), [_]), b = O((e) => _({ valueTo: e.target.value }, !0), [_]), S = O((e) => _({ operator: e }, !1), [_]), C = O(() => {
-		u(), c(Z.numberDraft(void 0)), e.clearFilter();
+	]), y = O((e) => _({ value: e.target.value }, !0), [_]), x = O((e) => _({ valueTo: e.target.value }, !0), [_]), S = O((e) => _({ operator: e }, !1), [_]), C = O(() => {
+		u(), c(X.numberDraft(void 0)), e.clearFilter();
 	}, [
 		e,
 		u,
 		c
 	]);
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${n}.filter.cell.input`,
 		ai: d === "between" ? "start" : "center",
 		gap: 1,
-		children: [/* @__PURE__ */ R(x, {
+		children: [/* @__PURE__ */ R(b, {
 			value: d,
 			variant: "compact",
 			onChange: (e) => e && S(e),
@@ -2090,49 +2096,49 @@ function vt({ column: e }) {
 				"aria-label": i.filterComparison(r)
 			},
 			children: [
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "eq",
 					children: "="
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "ne",
 					children: "≠"
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "gt",
 					children: ">"
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "gte",
 					children: "≥"
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "lt",
 					children: "<"
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "lte",
 					children: "≤"
 				}),
-				/* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Item, {
 					value: "between",
 					children: "↔"
 				})
 			]
-		}), d === "between" ? /* @__PURE__ */ R(m, {
+		}), d === "between" ? /* @__PURE__ */ R(p, {
 			d: "column",
 			gap: 1,
 			flex1: !0,
-			children: [/* @__PURE__ */ R(m, {
+			children: [/* @__PURE__ */ R(p, {
 				ai: "center",
 				position: "relative",
 				flex1: !0,
-				children: [/* @__PURE__ */ L(y, {
+				children: [/* @__PURE__ */ L(v, {
 					type: "number",
 					variant: "compact",
 					placeholder: h?.placeholder ?? i.filterFromPlaceholder,
 					value: f,
-					onChange: v,
+					onChange: y,
 					width: "fit",
 					step: h?.step,
 					b: 0,
@@ -2142,19 +2148,19 @@ function vt({ column: e }) {
 						tabIndex: -1,
 						"aria-label": i.filterFrom(r)
 					}
-				}), (f !== "" || p !== "") && /* @__PURE__ */ L(gt, {
+				}), (f !== "" || m !== "") && /* @__PURE__ */ L(vt, {
 					label: i.clearFilter(r),
 					onClear: C
 				})]
-			}), /* @__PURE__ */ L(m, {
+			}), /* @__PURE__ */ L(p, {
 				ai: "center",
 				flex1: !0,
-				children: /* @__PURE__ */ L(y, {
+				children: /* @__PURE__ */ L(v, {
 					type: "number",
 					variant: "compact",
 					placeholder: i.filterToPlaceholder,
-					value: p,
-					onChange: b,
+					value: m,
+					onChange: x,
 					width: "fit",
 					step: h?.step,
 					b: 0,
@@ -2166,16 +2172,16 @@ function vt({ column: e }) {
 					}
 				})
 			})]
-		}) : /* @__PURE__ */ R(m, {
+		}) : /* @__PURE__ */ R(p, {
 			ai: "center",
 			position: "relative",
 			flex1: !0,
-			children: [/* @__PURE__ */ L(y, {
+			children: [/* @__PURE__ */ L(v, {
 				type: "number",
 				variant: "compact",
 				placeholder: h?.placeholder ?? i.filterValuePlaceholder,
 				value: f,
-				onChange: v,
+				onChange: y,
 				width: "fit",
 				step: h?.step,
 				b: 0,
@@ -2185,20 +2191,20 @@ function vt({ column: e }) {
 					tabIndex: -1,
 					"aria-label": i.filterColumn(r)
 				}
-			}), f !== "" && /* @__PURE__ */ L(gt, {
+			}), f !== "" && /* @__PURE__ */ L(vt, {
 				label: i.clearFilter(r),
 				onClear: C
 			})]
 		})]
 	});
 }
-function yt({ column: e }) {
+function xt({ column: e }) {
 	let { currentFilter: t } = e, { componentName: n } = e.grid, i = String(e.header ?? e.key), a = e.grid.localeText, o = t?.type === "multiselect" ? t.values : [], s = e.filterOptions, c = O((t, n) => {
 		e.setMultiselectFilter(n);
 	}, [e]);
-	return /* @__PURE__ */ L(m, {
+	return /* @__PURE__ */ L(p, {
 		component: `${n}.filter.cell.input`,
-		children: /* @__PURE__ */ R(x, {
+		children: /* @__PURE__ */ R(b, {
 			multiple: !0,
 			showCheckbox: !0,
 			isSearchable: !0,
@@ -2216,14 +2222,14 @@ function yt({ column: e }) {
 				"aria-label": a.filterColumn(i)
 			},
 			children: [
-				/* @__PURE__ */ L(x.Display, { children: (t) => t.length === 0 ? /* @__PURE__ */ L(r, {
+				/* @__PURE__ */ L(b.Display, { children: (t) => t.length === 0 ? /* @__PURE__ */ L(r, {
 					tag: "span",
 					color: "gray-400",
 					children: e.filterConfig?.placeholder ?? a.filterSelectPlaceholder
 				}) : t.length === 1 ? s.find((e) => e.value === t[0])?.label ?? String(t[0]) : `${t.length} selected` }),
-				/* @__PURE__ */ L(x.Unselect, { children: a.filterSelectClear }),
-				/* @__PURE__ */ L(x.SelectAll, { children: a.filterSelectAll }),
-				s.map((e) => /* @__PURE__ */ L(x.Item, {
+				/* @__PURE__ */ L(b.Unselect, { children: a.filterSelectClear }),
+				/* @__PURE__ */ L(b.SelectAll, { children: a.filterSelectAll }),
+				s.map((e) => /* @__PURE__ */ L(b.Item, {
 					value: e.value,
 					ai: "center",
 					gap: 2,
@@ -2233,21 +2239,21 @@ function yt({ column: e }) {
 		})
 	});
 }
-function bt(e) {
+function St(e) {
 	let { column: t } = e, n = t.filterConfig;
 	if (!n) return null;
 	switch (n.type) {
-		case "number": return /* @__PURE__ */ L(vt, { column: t });
-		case "multiselect": return /* @__PURE__ */ L(yt, { column: t });
-		default: return /* @__PURE__ */ L(_t, { column: t });
+		case "number": return /* @__PURE__ */ L(bt, { column: t });
+		case "multiselect": return /* @__PURE__ */ L(xt, { column: t });
+		default: return /* @__PURE__ */ L(yt, { column: t });
 	}
 }
-bt.displayName = "DataGridColumnFilter";
+St.displayName = "DataGridColumnFilter";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFilterCell.tsx
-function xt(e) {
-	let { column: t, grid: n, row: r, columnIndex: i } = e, { widthVarName: a, inlineStartVarName: o, inlineEndVarName: s, filterable: c } = t, { isStartPinned: l, isEndPinned: u, isPinned: d, isFirstStartPinned: f, isLastStartPinned: p, isFirstEndPinned: h, isLastEndPinned: g } = t.pinFlags.value, { ref: _, tabIndex: v, onFocus: y } = me(B(), r, i), b = t.isGrouping || t.isRowNumber || t.isRowSelection;
-	return /* @__PURE__ */ L(m, {
+function Ct(e) {
+	let { column: t, grid: n, row: r, columnIndex: i } = e, { widthVarName: a, inlineStartVarName: o, inlineEndVarName: s, filterable: c } = t, { isStartPinned: l, isEndPinned: u, isPinned: d, isFirstStartPinned: f, isLastStartPinned: m, isFirstEndPinned: h, isLastEndPinned: g } = t.pinFlags.value, { ref: _, tabIndex: v, onFocus: y } = B(z(), r, i), b = t.isGrouping || t.isRowNumber || t.isRowSelection;
+	return /* @__PURE__ */ L(p, {
 		ref: _,
 		component: `${n.componentName}.filter.cell`,
 		props: {
@@ -2259,7 +2265,7 @@ function xt(e) {
 		variant: {
 			isPinned: d,
 			isFirstStartPinned: f,
-			isLastStartPinned: p,
+			isLastStartPinned: m,
 			isFirstEndPinned: h,
 			isLastEndPinned: g
 		},
@@ -2269,13 +2275,13 @@ function xt(e) {
 			insetInlineStart: l ? `var(${o})` : void 0,
 			insetInlineEnd: u ? `var(${s})` : void 0
 		},
-		children: !b && c && /* @__PURE__ */ L(bt, { column: t })
+		children: !b && c && /* @__PURE__ */ L(St, { column: t })
 	});
 }
-xt.displayName = "DataGridFilterCell";
+Ct.displayName = "DataGridFilterCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFilterRow.tsx
-function St(e) {
+function wt(e) {
 	let { grid: t } = e;
 	if (!t.filter.hasFilterableColumns) return null;
 	let n = t.headerRows.value.length;
@@ -2285,7 +2291,7 @@ function St(e) {
 			role: "row",
 			"aria-rowindex": n + 1
 		},
-		children: t.columns.value.visibleLeafs.map((e, r) => /* @__PURE__ */ L(xt, {
+		children: t.columns.value.visibleLeafs.map((e, r) => /* @__PURE__ */ L(Ct, {
 			column: e,
 			grid: t,
 			row: n,
@@ -2293,10 +2299,10 @@ function St(e) {
 		}, e.uniqueKey))
 	});
 }
-St.displayName = "DataGridFilterRow";
+wt.displayName = "DataGridFilterRow";
 //#endregion
 //#region src/icons/sortIcon.tsx
-function Ct(e) {
+function Tt(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "0 0 24 24",
 		width: "1.5rem",
@@ -2306,7 +2312,7 @@ function Ct(e) {
 }
 //#endregion
 //#region src/icons/dotsIcon.tsx
-function wt(e) {
+function Et(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "0 0 16 16",
 		width: "18",
@@ -2319,7 +2325,7 @@ function wt(e) {
 }
 //#endregion
 //#region src/icons/groupingIcon.tsx
-function Tt(e) {
+function Dt(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "0 0 24 24",
 		width: "1.5rem",
@@ -2329,7 +2335,7 @@ function Tt(e) {
 }
 //#endregion
 //#region src/icons/pinIcon.tsx
-function Et(e) {
+function Ot(e) {
 	return /* @__PURE__ */ L(d, {
 		viewBox: "0 0 1024 1024",
 		width: "1.5rem",
@@ -2339,51 +2345,51 @@ function Et(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeaderCellContextMenu.tsx
-function Dt(e) {
+function kt(e) {
 	let { side: t, left: n, right: r } = e;
-	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(S, {
+	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(x, {
 		rtl: { display: "none" },
 		children: t === "start" ? n : r
-	}), /* @__PURE__ */ L(S, {
+	}), /* @__PURE__ */ L(x, {
 		ltr: { display: "none" },
 		children: t === "start" ? r : n
 	})] });
 }
-function Ot(e) {
-	let { column: t } = e, { grid: i, isEndAligned: o, header: u, key: d } = t, f = t.headerCell, h = String(u ?? d), v = i.localeText, y = l("datagrid-column-menu"), [b, x] = P(!1), C = N(null), T = N(null), E = N(!1), D = o ? 3 : void 0, ee = o ? void 0 : 3, k = M(() => {
-		let e = (e) => /* @__PURE__ */ L(S, {
+function At(e) {
+	let { column: t } = e, { grid: i, isEndAligned: o, header: u, key: d } = t, m = t.headerCell, _ = String(u ?? d), v = i.localeText, y = l("datagrid-column-menu"), [b, S] = P(!1), C = N(null), w = N(null), E = N(!1), ee = o ? 3 : void 0, D = o ? void 0 : 3, k = te(() => {
+		let e = (e) => /* @__PURE__ */ L(x, {
 			component: `${i.componentName}.header.cell.contextMenu.tooltip.item.icon`,
 			children: e
-		}), n = (t) => e(/* @__PURE__ */ L(Ct, {
+		}), n = (t) => e(/* @__PURE__ */ L(Tt, {
 			width: "100%",
 			fill: "currentColor",
 			rotate: t
-		})), a = (t, n) => e(/* @__PURE__ */ L(Et, {
+		})), a = (t, n) => e(/* @__PURE__ */ L(Ot, {
 			width: "100%",
 			fill: "currentColor",
 			rotate: t,
 			rtl: { rotate: n }
-		})), o = e(/* @__PURE__ */ L(Tt, {
+		})), o = e(/* @__PURE__ */ L(Dt, {
 			width: "100%",
 			fill: "currentColor"
 		})), s = /* @__PURE__ */ L(r, { width: 4 });
 		return [
 			[
-				f.canSortAsc && {
+				m.canSortAsc && {
 					key: "sort-asc",
 					icon: n(),
 					label: v.sortAscending,
 					text: v.sortAscending,
 					run: () => t.sortColumn("ASC")
 				},
-				f.canSortDesc && {
+				m.canSortDesc && {
 					key: "sort-desc",
 					icon: n(180),
 					label: v.sortDescending,
 					text: v.sortDescending,
 					run: () => t.sortColumn("DESC")
 				},
-				f.canClearSort && {
+				m.canClearSort && {
 					key: "sort-clear",
 					icon: s,
 					label: v.clearSort,
@@ -2392,10 +2398,10 @@ function Ot(e) {
 				}
 			],
 			[
-				f.canPinStart && {
+				m.canPinStart && {
 					key: "pin-start",
 					icon: a(0, -90),
-					label: /* @__PURE__ */ L(Dt, {
+					label: /* @__PURE__ */ L(kt, {
 						side: "start",
 						left: v.pinLeft,
 						right: v.pinRight
@@ -2403,10 +2409,10 @@ function Ot(e) {
 					text: v.pinLeft,
 					run: () => t.pinColumn("START")
 				},
-				f.canPinEnd && {
+				m.canPinEnd && {
 					key: "pin-end",
 					icon: a(-90, 0),
-					label: /* @__PURE__ */ L(Dt, {
+					label: /* @__PURE__ */ L(kt, {
 						side: "end",
 						left: v.pinLeft,
 						right: v.pinRight
@@ -2414,7 +2420,7 @@ function Ot(e) {
 					text: v.pinRight,
 					run: () => t.pinColumn("END")
 				},
-				f.canUnpin && {
+				m.canUnpin && {
 					key: "unpin",
 					icon: s,
 					label: v.unpin,
@@ -2422,16 +2428,16 @@ function Ot(e) {
 					run: () => t.pinColumn()
 				}
 			],
-			[f.canGroupBy && {
+			[m.canGroupBy && {
 				key: "group",
 				icon: o,
 				label: /* @__PURE__ */ L(r, {
 					textWrap: "nowrap",
-					children: v.groupBy(h)
+					children: v.groupBy(_)
 				}),
-				text: v.groupBy(h),
+				text: v.groupBy(_),
 				run: t.toggleGrouping
-			}, f.canUnGroupAll && {
+			}, m.canUnGroupAll && {
 				key: "ungroup",
 				icon: o,
 				label: /* @__PURE__ */ L(r, {
@@ -2447,12 +2453,12 @@ function Ot(e) {
 		})));
 	}, [
 		t,
-		h,
+		_,
 		i,
-		f,
+		m,
 		v
 	]), A = O((e = !0) => {
-		E.current = !1, x(!1), e && C.current?.focus();
+		E.current = !1, S(!1), e && C.current?.focus();
 	}, []), j = c({
 		count: k.length,
 		textOf: (e) => k[e]?.text ?? "",
@@ -2462,49 +2468,49 @@ function Ot(e) {
 	});
 	s({
 		enabled: b,
-		inside: [C, T],
+		inside: [C, w],
 		onDismiss: () => A()
 	}), a({
 		enabled: b,
 		returnTo: C
 	});
-	let F = j.setActiveIndex, I = j.activeItem, te = O(() => {
-		F(0, { reason: "programmatic" }), E.current = !0, x(!0);
-	}, [F]);
+	let M = j.setActiveIndex, F = j.activeItem, I = O(() => {
+		M(0, { reason: "programmatic" }), E.current = !0, S(!0);
+	}, [M]);
 	return n(() => {
 		if (!E.current) return;
-		let e = I();
+		let e = F();
 		e && (E.current = !1, e.focus());
-	}), /* @__PURE__ */ R(m, {
+	}), /* @__PURE__ */ R(p, {
 		position: "absolute",
-		insetStart: D,
-		insetEnd: ee,
+		insetStart: ee,
+		insetEnd: D,
 		top: "1/2",
 		translateY: -3,
 		ai: "center",
-		children: [/* @__PURE__ */ L(p, {
+		children: [/* @__PURE__ */ L(f, {
 			ref: C,
 			component: `${i.componentName}.header.cell.contextMenu`,
-			onClick: () => b ? A(!1) : te(),
-			variant: f.contextMenuButtonVariant,
+			onClick: () => b ? A(!1) : I(),
+			variant: m.contextMenuButtonVariant,
 			type: "button",
 			props: {
 				tabIndex: -1,
-				"aria-label": v.columnOptions(h),
+				"aria-label": v.columnOptions(_),
 				"aria-haspopup": "menu",
 				"aria-expanded": b,
 				"aria-controls": b ? y : void 0
 			},
-			children: /* @__PURE__ */ L(S, {
+			children: /* @__PURE__ */ L(x, {
 				component: `${i.componentName}.header.cell.contextMenu.icon`,
-				children: /* @__PURE__ */ L(wt, { fill: "currentColor" })
+				children: /* @__PURE__ */ L(Et, { fill: "currentColor" })
 			})
-		}), /* @__PURE__ */ L(_, {
+		}), /* @__PURE__ */ L(g, {
 			present: b,
-			children: (e) => /* @__PURE__ */ L(g, {
+			children: (e) => /* @__PURE__ */ L(h, {
 				component: `${i.componentName}.header.cell.contextMenu.tooltip`,
 				variant: { closed: !e.present },
-				ref: T,
+				ref: w,
 				contentRef: e.ref,
 				anchor: C,
 				side: "bottom",
@@ -2513,18 +2519,18 @@ function Ot(e) {
 				id: y,
 				props: {
 					role: "menu",
-					"aria-label": v.columnOptions(h),
+					"aria-label": v.columnOptions(_),
 					onKeyDown: j.onKeyDown,
 					...e.props
 				},
 				children: k.map((e, t) => {
 					let { ref: n, tabIndex: a, onFocus: o } = j.itemProps(t);
-					return /* @__PURE__ */ R(w, { children: [e.startsSection && /* @__PURE__ */ L(r, {
+					return /* @__PURE__ */ R(T, { children: [e.startsSection && /* @__PURE__ */ L(r, {
 						bb: 1,
 						my: 2,
 						borderColor: "gray-300",
 						component: `${i.componentName}.header.cell.contextMenu.tooltip.item.separator`
-					}), /* @__PURE__ */ R(p, {
+					}), /* @__PURE__ */ R(f, {
 						component: `${i.componentName}.header.cell.contextMenu.tooltip.item`,
 						ref: n,
 						type: "button",
@@ -2543,24 +2549,20 @@ function Ot(e) {
 		})]
 	});
 }
-Ot.displayName = "DataGridHeaderCellContextMenu";
+At.displayName = "DataGridHeaderCellContextMenu";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeaderCellResizer.tsx
-var kt = (e) => "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, At = 16, jt = 150;
-function Mt(e) {
-	let t = e.sizingElement;
-	t && Object.entries(e.sizes.value).forEach(([e, n]) => t.style.setProperty(e, n));
-}
+var Z = (e) => "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, jt = 16, Mt = 150;
 function Nt(e) {
 	let { column: t, controls: n } = e, i = t.grid.resizerStyle, a = t.headerCell, o = O((e) => {
 		let { grid: n } = t;
-		e.type === "mousedown" && e.preventDefault(), t.beginResize(kt(e.nativeEvent));
-		let r = new AbortController(), { signal: i } = r, a = 0, o = kt(e.nativeEvent), s = () => {
-			t.applyResize(o), Mt(n);
+		e.type === "mousedown" && e.preventDefault(), t.beginResize(Z(e.nativeEvent));
+		let r = new AbortController(), { signal: i } = r, a = 0, o = Z(e.nativeEvent), s = () => {
+			t.applyResize(o), n.paintSizes();
 		}, c = n.resizeMode === "instant" ? (e) => {
-			o = kt(e), s();
+			o = Z(e), s();
 		} : (e) => {
-			o = kt(e), a ||= requestAnimationFrame(() => {
+			o = Z(e), a ||= requestAnimationFrame(() => {
 				a = 0, s();
 			});
 		}, l = () => {
@@ -2570,22 +2572,22 @@ function Nt(e) {
 	}, [t]), s = N(void 0), c = N(0), l = O(() => {
 		let { grid: e } = t;
 		if (e.resizeMode === "instant") {
-			Mt(e);
+			e.paintSizes();
 			return;
 		}
 		c.current ||= requestAnimationFrame(() => {
-			c.current = 0, Mt(e);
+			c.current = 0, e.paintSizes();
 		});
 	}, [t]), u = O(() => {
 		s.current !== void 0 && (clearTimeout(s.current), s.current = void 0, c.current &&= (cancelAnimationFrame(c.current), 0), t.endResize());
 	}, [t]);
-	k(() => () => {
+	A(() => () => {
 		clearTimeout(s.current), c.current && cancelAnimationFrame(c.current);
 	}, []);
 	let d = O((e) => {
 		switch (e.key) {
 			case "ArrowRight":
-				t.moveResizer(At);
+				t.moveResizer(jt);
 				break;
 			case "ArrowLeft":
 				t.moveResizer(-16);
@@ -2598,24 +2600,25 @@ function Nt(e) {
 				break;
 			default: return;
 		}
-		e.preventDefault(), l(), clearTimeout(s.current), s.current = setTimeout(u, jt);
+		e.preventDefault(), l(), clearTimeout(s.current), s.current = setTimeout(u, Mt);
 	}, [
 		t,
 		u,
 		a,
 		l
-	]);
-	return /* @__PURE__ */ L(m, {
+	]), { isAtGridEnd: f } = a;
+	return /* @__PURE__ */ L(p, {
 		height: "fit",
 		ai: "center",
 		position: "absolute",
-		insetEnd: t.pin === "END" ? void 0 : -.75,
+		insetEnd: t.pin === "END" ? void 0 : f ? 0 : -.75,
 		insetStart: t.pin === "END" ? -.75 : void 0,
 		zIndex: 1,
 		py: 3,
 		children: /* @__PURE__ */ L(r, {
 			cursor: "col-resize",
-			px: .75,
+			px: f ? void 0 : .75,
+			ps: f ? 1.5 : void 0,
 			mt: -6,
 			className: "resizer",
 			height: "fit",
@@ -2648,9 +2651,9 @@ Nt.displayName = "DataGridHeaderCellResizer";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeaderCell.tsx
 function Pt(e) {
-	let { column: t, row: n, columnIndex: i } = e, { grid: a } = t, { isStartPinned: o, isEndPinned: s } = t.pinFlags.value, c = t.headerCell, { isSortable: u, showResizer: d, showContextMenu: f, paddingStart: p, paddingEnd: g } = c, { ref: _, tabIndex: y, onFocus: b } = me(B(), n, i), x = l("datagrid-columnheader"), S = N(null), C = O(() => {
+	let { column: t, row: n, columnIndex: i } = e, { grid: a } = t, { isStartPinned: o, isEndPinned: s } = t.pinFlags.value, c = t.headerCell, { isSortable: u, showResizer: d, showContextMenu: f, paddingStart: h, paddingEnd: g } = c, { ref: v, tabIndex: y, onFocus: b } = B(z(), n, i), x = l("datagrid-columnheader"), S = N(null), C = O(() => {
 		a.toggleSelectAllRows();
-	}, [a]), w = t.isRowSelection ? /* @__PURE__ */ L(h, {
+	}, [a]), w = t.isRowSelection ? /* @__PURE__ */ L(m, {
 		variant: "datagrid",
 		m: 1,
 		indeterminate: a.someRowsSelected && !a.allRowsSelected,
@@ -2660,12 +2663,12 @@ function Pt(e) {
 			tabIndex: -1,
 			"aria-label": a.localeText.selectAllRows
 		}
-	}) : c.hiddenLabel ? /* @__PURE__ */ L(v, {
+	}) : c.hiddenLabel ? /* @__PURE__ */ L(_, {
 		tag: "span",
 		children: c.hiddenLabel
 	}) : c.label;
-	return /* @__PURE__ */ L(m, {
-		ref: _,
+	return /* @__PURE__ */ L(p, {
+		ref: v,
 		id: x,
 		props: {
 			role: "columnheader",
@@ -2677,7 +2680,7 @@ function Pt(e) {
 			onFocus: b,
 			onPointerDown: u ? (e) => S.current = e.target : void 0,
 			onClick: u ? (e) => {
-				X.isSortPress(e.currentTarget, S.current ?? e.target) && t.sortColumn(), S.current = null;
+				Y.isSortPress(e.currentTarget, S.current ?? e.target) && t.sortColumn(), S.current = null;
 			} : void 0
 		},
 		className: "header-cell",
@@ -2691,16 +2694,16 @@ function Pt(e) {
 			insetInlineEnd: s ? `var(${t.inlineEndVarName})` : void 0
 		},
 		children: /* @__PURE__ */ R(I, { children: [
-			/* @__PURE__ */ L(m, {
+			/* @__PURE__ */ L(p, {
 				width: "fit",
 				height: "fit",
 				jc: t.align,
-				children: /* @__PURE__ */ R(m, {
+				children: /* @__PURE__ */ R(p, {
 					overflow: "hidden",
 					position: t.isLeaf ? void 0 : "sticky",
 					ai: "center",
 					transition: "none",
-					ps: p,
+					ps: h,
 					pe: g,
 					style: { insetInlineStart: t.pin ? void 0 : `var(${a.inlineStartEdgeVarName})` },
 					children: [
@@ -2712,7 +2715,7 @@ function Pt(e) {
 						}),
 						c.isSorted && /* @__PURE__ */ L(r, {
 							ps: (t.inlineWidth ?? 0) < 58 ? 0 : 2,
-							children: /* @__PURE__ */ L(Ct, {
+							children: /* @__PURE__ */ L(Tt, {
 								width: "16px",
 								rotate: c.sortDirection === "ASC" ? 0 : 180,
 								transition: "transform",
@@ -2730,7 +2733,7 @@ function Pt(e) {
 				column: t,
 				controls: x
 			}),
-			f && /* @__PURE__ */ L(Ot, { column: t })
+			f && /* @__PURE__ */ L(At, { column: t })
 		] })
 	});
 }
@@ -2738,21 +2741,21 @@ Pt.displayName = "DataGridHeaderCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeader.tsx
 function Ft(e) {
-	let { grid: t } = e, n = N(null), [i, a] = P(X.INITIAL), o = t.headerHover === "sliding", s = (e) => {
+	let { grid: t } = e, n = N(null), [i, a] = P(Y.INITIAL), o = t.headerHover === "sliding", s = (e) => {
 		let t = n.current;
 		if (!o || !t || e.pointerType === "touch") return;
-		if (X.isOnResizer(e.target)) return a((e) => X.pause(e));
-		let r = X.cellAt(t, e.target), i = r && X.bounds(t, r);
-		a((e) => X.hover(e, i));
-	}, c = () => a((e) => X.hover(e, void 0)), l = i.visible || i.paused;
-	k(() => {
+		if (Y.isOnResizer(e.target)) return a((e) => Y.pause(e));
+		let r = Y.cellAt(t, e.target), i = r && Y.bounds(t, r);
+		a((e) => Y.hover(e, i));
+	}, c = () => a((e) => Y.hover(e, void 0)), l = i.visible || i.paused;
+	A(() => {
 		if (l) return document.addEventListener("scroll", c, {
 			capture: !0,
 			passive: !0
 		}), () => document.removeEventListener("scroll", c, { capture: !0 });
 	}, [l]);
 	let { bounds: u } = i;
-	return /* @__PURE__ */ R(b, {
+	return /* @__PURE__ */ R(y, {
 		ref: n,
 		component: `${t.componentName}.header`,
 		props: {
@@ -2774,7 +2777,7 @@ function Ft(e) {
 					columnIndex: n
 				}, e.uniqueKey))
 			}, t)),
-			/* @__PURE__ */ L(St, { grid: t }),
+			/* @__PURE__ */ L(wt, { grid: t }),
 			o && u && /* @__PURE__ */ L(r, {
 				tag: "span",
 				component: `${t.componentName}.header.hover`,
@@ -2823,13 +2826,13 @@ function Rt(e) {
 	}), s = N(null), c = O((e) => {
 		o((t) => e === t.top ? t : {
 			top: e,
-			direction: he.directionOf(t.top, e, t.direction)
+			direction: ge.directionOf(t.top, e, t.direction)
 		});
 	}, []), l = O((e) => {
 		s.current !== null && cancelAnimationFrame(s.current), s.current = requestAnimationFrame(() => {
 			c(e.target.scrollTop), s.current = null;
 		});
-	}, [c]), { navigation: u, onKeyDown: d } = Ne({
+	}, [c]), { navigation: u, onKeyDown: d } = Me({
 		grid: t,
 		scrollerRef: i,
 		scroll: a,
@@ -2837,7 +2840,7 @@ function Rt(e) {
 	}), { source: f } = t, { queryVersion: p } = f;
 	n(() => {
 		f.enabled && i.current && (i.current.scrollTop = 0);
-	}, [f, p]), k(() => {
+	}, [f, p]), A(() => {
 		if (!f.enabled) return;
 		let { startIndex: e, take: n } = t.viewport.window(i.current?.scrollTop ?? 0, a.direction);
 		f.request(e, e + n);
@@ -2852,22 +2855,23 @@ function Rt(e) {
 		t.expansionVersion
 	]);
 	let { range: m } = t, { isDragging: h } = m;
-	return k(() => {
+	return A(() => {
 		if (h) return window.addEventListener("pointerup", m.endDrag), window.addEventListener("pointercancel", m.endDrag), () => {
 			window.removeEventListener("pointerup", m.endDrag), window.removeEventListener("pointercancel", m.endDrag);
 		};
 	}, [h, m]), n(() => {
 		let e = i.current;
 		if (!e) return;
-		let n = new ResizeObserver(() => t.setContainerWidth(e.clientWidth));
+		let n = new ResizeObserver(() => {
+			t.setContainerWidth(e.clientWidth), t.paintSizes();
+		});
 		return n.observe(e), () => n.disconnect();
-	}, [t]), t.hasVisibleColumns ? /* @__PURE__ */ L(fe.Provider, {
+	}, [t]), t.hasVisibleColumns ? /* @__PURE__ */ L(me.Provider, {
 		value: u,
 		children: /* @__PURE__ */ R(r, {
 			ref: i,
 			component: `${t.componentName}.content`,
 			overflowX: "auto",
-			scrollbarGutter: t.viewport.showAll ? void 0 : "stable",
 			style: { willChange: "scroll-position" },
 			props: {
 				role: t.tree.enabled ? "treegrid" : "grid",
@@ -2887,13 +2891,13 @@ function Rt(e) {
 					version: t.headerVersion
 				}),
 				(t.props.loading || f.isLoading) && /* @__PURE__ */ L(Lt, { grid: t }),
-				/* @__PURE__ */ L(ut, {
+				/* @__PURE__ */ L(ft, {
 					grid: t,
 					scroll: a
 				})
 			]
 		})
-	}) : /* @__PURE__ */ L(dt, { grid: t });
+	}) : /* @__PURE__ */ L(pt, { grid: t });
 }
 Rt.displayName = "DataGridContent";
 //#endregion
@@ -2902,13 +2906,13 @@ function zt(e) {
 	let { grid: t } = e, { error: n } = t.source;
 	if (n === void 0) return null;
 	let i = n instanceof Error && n.message ? n.message : t.localeText.loadError;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.error`,
 		props: { role: "alert" },
 		children: [/* @__PURE__ */ L(r, {
 			component: `${t.componentName}.error.message`,
 			children: i
-		}), /* @__PURE__ */ L(p, {
+		}), /* @__PURE__ */ L(f, {
 			component: `${t.componentName}.error.retry`,
 			type: "button",
 			onClick: t.source.retry,
@@ -2921,22 +2925,22 @@ zt.displayName = "DataGridDataSourceError";
 //#region src/components/dataGrid/components/dataGridColumnGroups.tsx
 function Bt(e) {
 	let { grid: t } = e;
-	return t.groupColumns.size === 0 ? null : /* @__PURE__ */ R(m, {
+	return t.groupColumns.size === 0 ? null : /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.topBar.columnGroups`,
-		children: [/* @__PURE__ */ L(S, {
+		children: [/* @__PURE__ */ L(x, {
 			component: `${t.componentName}.topBar.columnGroups.icon`,
-			children: /* @__PURE__ */ L(Tt, {
+			children: /* @__PURE__ */ L(Dt, {
 				width: "100%",
 				fill: "currentColor"
 			})
-		}), t.groupedColumns.map((e) => /* @__PURE__ */ R(C.Fragment, { children: [/* @__PURE__ */ L(Y, {
+		}), t.groupedColumns.map((e) => /* @__PURE__ */ R(w.Fragment, { children: [/* @__PURE__ */ L(Qe, {
 			fill: "currentColor",
 			width: "14px",
 			height: "14px",
 			rotate: -90
-		}), /* @__PURE__ */ R(m, {
+		}), /* @__PURE__ */ R(p, {
 			component: `${t.componentName}.topBar.columnGroups.item`,
-			children: [e.header ?? e.key, /* @__PURE__ */ L(p, {
+			children: [e.header ?? e.key, /* @__PURE__ */ L(f, {
 				component: `${t.componentName}.topBar.columnGroups.item.icon`,
 				onClick: () => t.toggleGrouping(e.key),
 				props: { "aria-label": t.localeText.stopGrouping(String(e.header ?? e.key)) },
@@ -2952,19 +2956,184 @@ function Bt(e) {
 }
 Bt.displayName = "DataGridColumnGroups";
 //#endregion
-//#region src/components/dataGrid/components/dataGridExport.tsx
+//#region src/icons/searchIcon.tsx
 function Vt(e) {
+	return /* @__PURE__ */ L(d, {
+		viewBox: "0 0 488.4 488.4",
+		width: "1.5rem",
+		...e,
+		children: /* @__PURE__ */ L(u, { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" })
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridColumnsPanel.tsx
+var Ht = 6;
+function Ut(e) {
+	let { grid: t } = e, { columnVisibility: n, localeText: i, componentName: a } = t, { visibleCount: o, total: s, hasHidden: c } = n, [l, p] = P(!1), [m, h] = P(""), g = O((e) => {
+		p(e), e || h("");
+	}, []);
+	return /* @__PURE__ */ L(S, {
+		label: i.columnsMenu,
+		side: "bottom",
+		align: "end",
+		open: l,
+		onOpenChange: g,
+		autoFocus: !1,
+		p: 0,
+		overflow: "visible",
+		trigger: (e) => /* @__PURE__ */ R(f, {
+			...e,
+			component: `${a}.topBar.columnVisibility`,
+			props: {
+				...e.props,
+				"aria-label": c ? i.columnsMenuLabel(o, s) : void 0
+			},
+			children: [
+				/* @__PURE__ */ L(d, {
+					viewBox: "0 0 20 20",
+					width: 16,
+					height: 16,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 1.6,
+					children: /* @__PURE__ */ L(u, { d: "M4.5 3.5h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1ZM8 3.5v13M12 3.5v13" })
+				}),
+				i.columnsMenu,
+				c && /* @__PURE__ */ R(r, {
+					component: `${a}.topBar.columnVisibility.badge`,
+					tag: "span",
+					variant: { empty: o === 0 },
+					props: { "aria-hidden": !0 },
+					children: [
+						o,
+						"/",
+						s
+					]
+				})
+			]
+		}),
+		children: /* @__PURE__ */ L(Wt, {
+			grid: t,
+			open: l,
+			query: m,
+			onQueryChange: h
+		})
+	});
+}
+Ut.displayName = "DataGridColumnsPanel";
+function Wt({ grid: e, open: t, query: n, onQueryChange: i }) {
+	let { columnVisibility: a, localeText: o, componentName: s } = e, c = `${s}.topBar.columnVisibility`, l = N(null), u = N(null), d = a.total > Ht, m = a.search(n), h = a.sections(m), g = m.every((e) => e.visible), _ = m.every((e) => !e.visible);
+	A(() => {
+		t && (u.current ?? l.current?.querySelector("input"))?.focus();
+	}, [t]);
+	let y = O((e) => {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key) || !l.current) return;
+		let t = Array.from(l.current.querySelectorAll("input[role=\"switch\"]")), n = e.target;
+		if (t.length === 0 || n === u.current && e.key !== "ArrowDown") return;
+		let r = t.indexOf(n), i = {
+			ArrowDown: t[Math.min(r + 1, t.length - 1)],
+			ArrowUp: r <= 0 ? u.current ?? t[0] : t[r - 1],
+			Home: t[0],
+			End: t.at(-1)
+		}[e.key];
+		e.preventDefault(), i?.focus();
+	}, []);
+	return /* @__PURE__ */ R(p, {
+		ref: l,
+		component: `${c}.panel`,
+		props: { onKeyDown: y },
+		children: [
+			d && /* @__PURE__ */ R(p, {
+				component: `${c}.search`,
+				children: [/* @__PURE__ */ L(p, {
+					component: `${c}.searchIcon`,
+					children: /* @__PURE__ */ L(Vt, {
+						fill: "currentColor",
+						width: "14px"
+					})
+				}), /* @__PURE__ */ L(v, {
+					ref: u,
+					component: `${c}.searchInput`,
+					value: n,
+					placeholder: o.columnsMenuSearchPlaceholder,
+					onChange: (e) => i(e.target.value),
+					props: {
+						"aria-label": o.columnsMenuSearchPlaceholder,
+						autoComplete: "off",
+						spellCheck: !1
+					}
+				})]
+			}),
+			/* @__PURE__ */ R(p, {
+				component: `${c}.toolbar`,
+				children: [/* @__PURE__ */ L(r, {
+					component: `${c}.count`,
+					children: o.columnsMenuShown(a.visibleCount, a.total)
+				}), /* @__PURE__ */ R(p, {
+					gap: 1,
+					children: [/* @__PURE__ */ L(f, {
+						component: `${c}.action`,
+						disabled: g,
+						onClick: () => a.setAll(!0, m),
+						children: o.columnsMenuShowAll
+					}), /* @__PURE__ */ L(f, {
+						component: `${c}.action`,
+						disabled: _,
+						onClick: () => a.setAll(!1, m),
+						children: o.columnsMenuHideAll
+					})]
+				})]
+			}),
+			/* @__PURE__ */ R(p, {
+				component: `${c}.list`,
+				children: [h.map((e, t) => /* @__PURE__ */ R(p, {
+					component: `${c}.section`,
+					variant: { divided: t > 0 && !e.group },
+					props: e.group ? {
+						role: "group",
+						"aria-label": e.group
+					} : void 0,
+					children: [e.group && /* @__PURE__ */ L(r, {
+						component: `${c}.group`,
+						props: { "aria-hidden": !0 },
+						children: e.group
+					}), e.entries.map((e) => /* @__PURE__ */ L(C, {
+						checked: e.visible,
+						onChange: () => e.column.toggleVisibility(),
+						label: e.label,
+						labelProps: {
+							component: `${c}.item`,
+							display: "flex"
+						}
+					}, e.id))]
+				}, `${e.group ?? ""}-${t}`)), m.length === 0 && /* @__PURE__ */ L(r, {
+					component: `${c}.empty`,
+					props: { role: "status" },
+					children: o.columnsMenuNoMatch(n.trim())
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridExport.tsx
+function Gt(e) {
 	let { grid: t } = e, n = t.exportConfig, r = O(() => void t.exportCsv(n).catch(() => void 0), [t, n]), i = O(() => void t.exportXlsx(n).catch(() => void 0), [t, n]);
-	return n ? /* @__PURE__ */ R(m, {
+	return n ? /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.topBar.export`,
 		ai: "center",
 		gap: 2,
-		children: [n.csv !== !1 && /* @__PURE__ */ L(Ht, {
+		children: [n.csv !== !1 && /* @__PURE__ */ L(Kt, {
 			componentName: t.componentName,
 			onClick: r,
 			label: t.localeText.exportCsvLabel,
 			children: t.localeText.exportCsv
-		}), n.xlsx !== !1 && /* @__PURE__ */ L(Ht, {
+		}), n.xlsx !== !1 && /* @__PURE__ */ L(Kt, {
 			componentName: t.componentName,
 			onClick: i,
 			label: t.localeText.exportExcelLabel,
@@ -2972,10 +3141,10 @@ function Vt(e) {
 		})]
 	}) : null;
 }
-Vt.displayName = "DataGridExport";
-function Ht(e) {
+Gt.displayName = "DataGridExport";
+function Kt(e) {
 	let { componentName: t, onClick: n, label: r, children: i } = e;
-	return /* @__PURE__ */ R(p, {
+	return /* @__PURE__ */ R(f, {
 		component: `${t}.topBar.export.button`,
 		onClick: n,
 		props: { "aria-label": r },
@@ -2998,25 +3167,15 @@ function Ht(e) {
 	});
 }
 //#endregion
-//#region src/icons/searchIcon.tsx
-function Ut(e) {
-	return /* @__PURE__ */ L(d, {
-		viewBox: "0 0 488.4 488.4",
-		width: "1.5rem",
-		...e,
-		children: /* @__PURE__ */ L(u, { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" })
-	});
-}
-//#endregion
 //#region src/components/dataGrid/components/dataGridGlobalFilter.tsx
-function Wt(e) {
-	let { grid: t } = e, [n, i] = P(t.globalFilterValue), { debounce: a, cancel: o } = ht(t.globalFilterValue, (e) => e === n, i), s = O((e) => {
+function qt(e) {
+	let { grid: t } = e, [n, i] = P(t.globalFilterValue), { debounce: a, cancel: o } = _t(t.globalFilterValue, (e) => e === n, i), s = O((e) => {
 		let n = e.target.value;
 		i(n), a("value", () => t.filter.setGlobalFilter(n));
 	}, [t, a]), c = O(() => {
 		o(), i(""), t.filter.setGlobalFilter("");
 	}, [t, o]), { filtered: l, total: u } = t.filter.filterStats, d = !t.props.def.bottomBar && t.filter.hasActiveFilters && l !== u;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.topBar.globalFilter`,
 		children: [d && /* @__PURE__ */ R(r, {
 			component: `${t.componentName}.topBar.globalFilter.stats`,
@@ -3025,22 +3184,22 @@ function Wt(e) {
 				"/",
 				u
 			]
-		}), /* @__PURE__ */ R(m, {
+		}), /* @__PURE__ */ R(p, {
 			position: "relative",
 			ai: "center",
 			children: [
-				/* @__PURE__ */ L(m, {
+				/* @__PURE__ */ L(p, {
 					position: "absolute",
 					insetStart: 3,
 					pointerEvents: "none",
 					color: "gray-400",
 					theme: { dark: { color: "gray-500" } },
-					children: /* @__PURE__ */ L(Ut, {
+					children: /* @__PURE__ */ L(Vt, {
 						fill: "currentColor",
 						width: "14px"
 					})
 				}),
-				/* @__PURE__ */ L(y, {
+				/* @__PURE__ */ L(v, {
 					placeholder: t.localeText.searchPlaceholder,
 					variant: "compact",
 					value: n,
@@ -3071,133 +3230,42 @@ function Wt(e) {
 	});
 }
 //#endregion
-//#region src/components/dataGrid/components/dataGridTopBarContextMenu.tsx
-function Gt(e) {
-	let { grid: t } = e, { columnVisibility: n } = t, { entries: i, selectedIds: a, total: o, hasHidden: s } = n;
-	return /* @__PURE__ */ R(x, {
-		component: `${t.componentName}.topBar.columnVisibility`,
-		multiple: !0,
-		showCheckbox: !0,
-		hideIcon: !0,
-		variant: "compact",
-		value: a,
-		onChange: (e, t) => {
-			n.setVisibility(t);
-		},
-		isSearchable: i.length > 6,
-		searchPlaceholder: t.localeText.columnsMenuSearchPlaceholder,
-		display: "inline-flex",
-		props: { "aria-label": t.localeText.columnsMenu },
-		children: [
-			/* @__PURE__ */ L(x.Display, { children: (e) => {
-				let n = e.length === 0;
-				return /* @__PURE__ */ R(m, {
-					ai: "center",
-					gap: 2,
-					children: [/* @__PURE__ */ R(f, {
-						viewBox: "0 0 20 20",
-						width: "18",
-						height: "18",
-						children: [
-							/* @__PURE__ */ L("rect", {
-								x: "2",
-								y: "3",
-								width: "4",
-								height: "14",
-								rx: "1",
-								fill: "currentColor",
-								opacity: .9
-							}),
-							/* @__PURE__ */ L("rect", {
-								x: "8",
-								y: "3",
-								width: "4",
-								height: "14",
-								rx: "1",
-								fill: "currentColor",
-								opacity: .6
-							}),
-							/* @__PURE__ */ L("rect", {
-								x: "14",
-								y: "3",
-								width: "4",
-								height: "14",
-								rx: "1",
-								fill: "currentColor",
-								opacity: .3
-							})
-						]
-					}), s && /* @__PURE__ */ R(r, {
-						component: `${t.componentName}.topBar.columnVisibility.badge`,
-						tag: "span",
-						fontSize: 11,
-						lineHeight: 16,
-						fontWeight: 500,
-						px: 2,
-						py: .5,
-						borderRadius: 1,
-						bgColor: n ? "red-100" : "amber-100",
-						color: n ? "red-700" : "amber-700",
-						theme: { dark: {
-							bgColor: n ? "red-900" : "amber-900",
-							color: n ? "red-300" : "amber-300"
-						} },
-						children: [
-							e.length,
-							"/",
-							o
-						]
-					})]
-				});
-			} }),
-			/* @__PURE__ */ L(x.SelectAll, { children: t.localeText.columnsMenuShowAll }),
-			/* @__PURE__ */ L(x.Unselect, { children: t.localeText.columnsMenuHideAll }),
-			i.map((e) => /* @__PURE__ */ L(x.Item, {
-				value: e.id,
-				textWrap: "nowrap",
-				children: e.label
-			}, e.id))
-		]
-	});
-}
-Gt.displayName = "DataGridTopBarContextMenu";
-//#endregion
 //#region src/components/dataGrid/components/dataGridTopBar.tsx
-function Kt(e) {
+function Jt(e) {
 	let { grid: t } = e, { title: n, topBarContent: i, globalFilter: a } = t.props.def;
-	return /* @__PURE__ */ R(m, {
+	return /* @__PURE__ */ R(p, {
 		component: `${t.componentName}.topBar`,
 		position: "relative",
 		d: "column",
 		gap: 3,
-		children: [/* @__PURE__ */ R(m, {
+		children: [/* @__PURE__ */ R(p, {
 			ai: "center",
 			jc: "space-between",
 			gap: 4,
 			flexWrap: "wrap",
 			width: "fit",
-			children: [/* @__PURE__ */ R(m, {
+			children: [/* @__PURE__ */ R(p, {
 				ai: "center",
 				gap: 3,
 				flexWrap: "wrap",
 				minWidth: 0,
-				children: [
-					/* @__PURE__ */ L(Gt, { grid: t }),
-					n && /* @__PURE__ */ L(r, {
-						id: t.titleId,
-						fontWeight: 600,
-						fontSize: 16,
-						color: "gray-800",
-						theme: { dark: { color: "gray-100" } },
-						children: n
-					}),
-					/* @__PURE__ */ L(Bt, { grid: t })
-				]
-			}), /* @__PURE__ */ R(m, {
+				children: [n && /* @__PURE__ */ L(r, {
+					id: t.titleId,
+					fontWeight: 600,
+					fontSize: 16,
+					color: "gray-800",
+					theme: { dark: { color: "gray-100" } },
+					children: n
+				}), /* @__PURE__ */ L(Bt, { grid: t })]
+			}), /* @__PURE__ */ R(p, {
 				ai: "center",
 				gap: 3,
 				flexWrap: "wrap",
-				children: [a && /* @__PURE__ */ L(Wt, { grid: t }), /* @__PURE__ */ L(Vt, { grid: t })]
+				children: [
+					a && /* @__PURE__ */ L(qt, { grid: t }),
+					/* @__PURE__ */ L(Ut, { grid: t }),
+					/* @__PURE__ */ L(Gt, { grid: t })
+				]
 			})]
 		}), i && /* @__PURE__ */ L(r, {
 			width: "fit",
@@ -3205,10 +3273,10 @@ function Kt(e) {
 		})]
 	});
 }
-Kt.displayName = "DataGridTopBar";
+Jt.displayName = "DataGridTopBar";
 //#endregion
 //#region src/utils/string/fuzzySearch.ts
-function qt(e, t) {
+function Yt(e, t) {
 	if (!e) return {
 		score: 1,
 		matches: []
@@ -3221,16 +3289,16 @@ function qt(e, t) {
 		matches: o
 	});
 }
-function Jt(e, t) {
-	return qt(e, t) !== null;
+function Xt(e, t) {
+	return Yt(e, t) !== null;
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellRowDetail.tsx
-function Yt(e) {
+function Zt(e) {
 	let { cell: t } = e, n = t.isExpanded, r = O((e) => {
 		e.stopPropagation(), t.toggleDetail();
 	}, [t]);
-	return /* @__PURE__ */ L(p, {
+	return /* @__PURE__ */ L(f, {
 		component: `${t.grid.componentName}.body.cell.rowDetail`,
 		variant: { isExpanded: n },
 		type: "button",
@@ -3246,7 +3314,7 @@ function Yt(e) {
 			"aria-label": (n ? t.grid.localeText.collapseRowDetail : t.grid.localeText.expandRowDetail)(t.row.rowIndex + 1),
 			"aria-expanded": n
 		},
-		children: /* @__PURE__ */ L(Y, {
+		children: /* @__PURE__ */ L(Qe, {
 			fill: "currentColor",
 			width: "14px",
 			height: "14px",
@@ -3254,14 +3322,14 @@ function Yt(e) {
 		})
 	});
 }
-Yt.displayName = "DataGridCellRowDetail";
+Zt.displayName = "DataGridCellRowDetail";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellRowSelection.tsx
-function Xt(e) {
+function Qt(e) {
 	let { cell: t } = e, n = O(() => {
 		t.toggleSelection();
 	}, [t]);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ L(m, {
 		variant: "datagrid",
 		checked: t.selected,
 		indeterminate: t.indeterminate,
@@ -3272,15 +3340,15 @@ function Xt(e) {
 		}
 	});
 }
-Xt.displayName = "DataGridCellRowSelection";
+Qt.displayName = "DataGridCellRowSelection";
 //#endregion
 //#region src/components/dataGrid/contracts/dataGridContract.ts
-function Zt(e) {
+function $t(e) {
 	if (e) return e === "LEFT" ? "START" : e === "RIGHT" ? "END" : e;
 }
 //#endregion
 //#region src/components/dataGrid/models/headerCellModel.ts
-var Qt = 1e3, $t = class {
+var en = 1e3, tn = class {
 	column;
 	constructor(e) {
 		this.column = e;
@@ -3293,7 +3361,7 @@ var Qt = 1e3, $t = class {
 		if (e.isRowNumber || e.isRowSelection) return null;
 		if (e.isGrouping) {
 			if (this.grid.groupColumns.size === 1) {
-				let e = this.grid.groupColumns.values().next().value, t = G.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === e);
+				let e = this.grid.groupColumns.values().next().value, t = W.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === e);
 				return t.header ?? t.key;
 			}
 			return this.grid.localeText.groupHeader;
@@ -3346,6 +3414,10 @@ var Qt = 1e3, $t = class {
 	get resizerLabel() {
 		return this.grid.localeText.resizeColumn(String(this.label ?? this.column.key));
 	}
+	get isAtGridEnd() {
+		let e = this.column.leafs.at(-1);
+		return this.column.pin !== "END" && !!e && this.grid.columns.value.visibleLeafs.at(-1) === e;
+	}
 	get width() {
 		return this.column.inlineWidth ?? this.column.baseWidth;
 	}
@@ -3353,7 +3425,7 @@ var Qt = 1e3, $t = class {
 		return Math.max(1, this.column.leafs.length) * this.grid.MIN_COLUMN_WIDTH_PX;
 	}
 	get maxWidth() {
-		return Math.max(this.grid.containerWidth || Qt, this.width, this.minWidth);
+		return Math.max(this.grid.containerWidth || en, this.width, this.minWidth);
 	}
 	get paddingStart() {
 		if (!this.column.isRowSelection) return this.column.isEndAligned ? 10 : 3;
@@ -3438,16 +3510,16 @@ var Qt = 1e3, $t = class {
 			pin: t.pin
 		} : r, n, this)) ?? [], this.isLeaf) {
 			let e = this.grid.columnWidths.get(this.key);
-			this._inlineWidth = e ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = Zt(t.pin);
+			this._inlineWidth = e ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = $t(t.pin);
 		}
 	}
 	columns = [];
 	get kind() {
 		switch (this.key) {
-			case Fe: return "rowNumber";
-			case Ie: return "rowSelection";
-			case Le: return "rowDetail";
-			case K: return "grouping";
+			case Pe: return "rowNumber";
+			case Fe: return "rowSelection";
+			case Ie: return "rowDetail";
+			case G: return "grouping";
 			default: return "data";
 		}
 	}
@@ -3466,7 +3538,7 @@ var Qt = 1e3, $t = class {
 	get isData() {
 		return this.kind === "data";
 	}
-	pinFlags = H(() => {
+	pinFlags = q(() => {
 		let e = this.pin === "START", t = this.pin === "END";
 		return {
 			isStartPinned: e,
@@ -3478,7 +3550,7 @@ var Qt = 1e3, $t = class {
 			isLastEndPinned: t && this.endOffset === 0
 		};
 	}, () => [this.grid.columns]);
-	cellVariant = H(() => {
+	cellVariant = q(() => {
 		let { isPinned: e, isFirstStartPinned: t, isLastStartPinned: n, isFirstEndPinned: r, isLastEndPinned: i } = this.pinFlags.value;
 		return {
 			isPinned: e,
@@ -3493,7 +3565,7 @@ var Qt = 1e3, $t = class {
 			isRowDetail: this.isRowDetail
 		};
 	}, () => [this.pinFlags]);
-	cellStyleVars = H(() => {
+	cellStyleVars = q(() => {
 		let { isStartPinned: e, isEndPinned: t } = this.pinFlags.value;
 		return {
 			width: `var(${this.widthVarName})`,
@@ -3502,7 +3574,7 @@ var Qt = 1e3, $t = class {
 			insetInlineEnd: t ? `var(${this.inlineEndVarName})` : void 0
 		};
 	}, () => [this.pinFlags]);
-	_headerCell = H(() => new $t(this));
+	_headerCell = q(() => new tn(this));
 	get headerCell() {
 		return this._headerCell.value;
 	}
@@ -3523,6 +3595,9 @@ var Qt = 1e3, $t = class {
 	get header() {
 		return this.def.header;
 	}
+	get group() {
+		return this.parent;
+	}
 	get align() {
 		return this.def.align;
 	}
@@ -3663,16 +3738,16 @@ var Qt = 1e3, $t = class {
 	get inlineWidth() {
 		if (this.isLeaf) return this.grid.getFlexWidth(this.key) ?? this._inlineWidth;
 		let e = this.visibleColumns.map((e) => e.inlineWidth).filter((e) => typeof e == "number");
-		if (e.length !== 0) return G.sumBy(e, (e) => e);
+		if (e.length !== 0) return W.sumBy(e, (e) => e);
 	}
 	get startOffset() {
 		let e = 0;
 		if (this.parent) {
 			let { visibleColumns: t, startOffset: n } = this.parent, r = t.findIndex((e) => e === this);
-			e += G.sumBy(t, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += n;
+			e += W.sumBy(t, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += n;
 		} else {
 			let t = this.grid.columns.value.start.filter((e) => e.isVisible), n = t.findIndex((e) => e === this);
-			e += G.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
+			e += W.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
 		}
 		return e;
 	}
@@ -3680,10 +3755,10 @@ var Qt = 1e3, $t = class {
 		let e = 0;
 		if (this.parent) {
 			let { visibleColumns: t } = this.parent, n = t.reverse(), r = n.findIndex((e) => e === this);
-			e += G.sumBy(n, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += this.parent.endOffset;
+			e += W.sumBy(n, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += this.parent.endOffset;
 		} else {
 			let t = this.grid.columns.value.end.filter((e) => e.isVisible).reverse(), n = t.findIndex((e) => e === this);
-			e += G.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
+			e += W.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
 		}
 		return e;
 	}
@@ -3721,7 +3796,7 @@ var Qt = 1e3, $t = class {
 	_resizeTotalWidth = 0;
 	beginResize = (e) => {
 		let { MIN_COLUMN_WIDTH_PX: t } = this.grid;
-		this._resizeStartX = e, this._resizeSizes = G.toRecord(this.leafs, (e) => [e.key, e.inlineWidth ?? e.baseWidth]), this._resizeTotalWidth = G.sumBy(this.leafs, (e) => this._resizeSizes[e.key]) - this.leafs.length * t;
+		this._resizeStartX = e, this._resizeSizes = W.toRecord(this.leafs, (e) => [e.key, e.inlineWidth ?? e.baseWidth]), this._resizeTotalWidth = W.sumBy(this.leafs, (e) => this._resizeSizes[e.key]) - this.leafs.length * t;
 	};
 	get resizeSign() {
 		return this.pin === "END" === this.grid.isRtl ? 1 : -1;
@@ -3747,7 +3822,7 @@ var Qt = 1e3, $t = class {
 		this.moveResizer((e - t) * this.resizeSign);
 	};
 	pinColumn = (e) => {
-		this.isLeaf ? this._pin = Zt(e) : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
+		this.isLeaf ? this._pin = $t(e) : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
 	};
 	toggleGrouping = () => {
 		this.grid.toggleGrouping(this.key);
@@ -3762,18 +3837,22 @@ var Qt = 1e3, $t = class {
 	toggleVisibility = () => {
 		this.grid.toggleColumnVisibility(this.key);
 	};
-}, en = class {
+}, nn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
 	}
 	get entries() {
-		return this.grid.columns.value.leafs.filter((e) => e.isData).map((e) => ({
-			id: String(e.key),
-			label: String(e.header ?? e.key),
-			column: e,
-			visible: e.isVisible
-		}));
+		return this.grid.columns.value.leafs.filter((e) => e.isData).map((e) => {
+			let t = e.group?.header ?? e.group?.key;
+			return {
+				id: String(e.key),
+				label: String(e.header ?? e.key),
+				group: t === void 0 ? void 0 : String(t),
+				column: e,
+				visible: e.isVisible
+			};
+		});
 	}
 	get selectedIds() {
 		return this.entries.filter((e) => e.visible).map((e) => e.id);
@@ -3781,12 +3860,28 @@ var Qt = 1e3, $t = class {
 	get total() {
 		return this.entries.length;
 	}
+	get visibleCount() {
+		return this.total - this.hiddenCount;
+	}
 	get hiddenCount() {
 		return this.entries.reduce((e, t) => t.visible ? e : e + 1, 0);
 	}
 	get hasHidden() {
 		return this.hiddenCount > 0;
 	}
+	search(e) {
+		let t = e.trim().toLocaleLowerCase();
+		return t ? this.entries.filter((e) => e.label.toLocaleLowerCase().includes(t) || !!e.group?.toLocaleLowerCase().includes(t)) : this.entries;
+	}
+	sections(e) {
+		return e.reduce((e, t) => {
+			let n = e.at(-1);
+			return n && n.group === t.group ? n.entries.push(t) : e.push({
+				group: t.group,
+				entries: [t]
+			}), e;
+		}, []);
+	}
 	setVisibility = (e) => {
 		let t = new Set(e);
 		this.entries.forEach((e) => {
@@ -3794,22 +3889,27 @@ var Qt = 1e3, $t = class {
 			e.visible !== n && e.column.toggleVisibility();
 		});
 	};
+	setAll = (e, t = this.entries) => {
+		t.forEach((t) => {
+			t.visible !== e && t.column.toggleVisibility();
+		});
+	};
 };
 //#endregion
 //#region src/utils/array/lazyList.ts
-function tn(e, t) {
+function rn(e, t) {
 	return new Proxy([], {
 		get(n, r, i) {
 			if (r === "length") return e;
-			let a = nn(r, e);
+			let a = an(r, e);
 			return a === void 0 ? Reflect.get(n, r, i) : t(a);
 		},
 		has(t, n) {
-			return nn(n, e) !== void 0 || Reflect.has(t, n);
+			return an(n, e) !== void 0 || Reflect.has(t, n);
 		},
 		getOwnPropertyDescriptor(n, r) {
-			return nn(r, e) === void 0 ? Reflect.getOwnPropertyDescriptor(n, r) : {
-				value: t(nn(r, e)),
+			return an(r, e) === void 0 ? Reflect.getOwnPropertyDescriptor(n, r) : {
+				value: t(an(r, e)),
 				writable: !0,
 				enumerable: !0,
 				configurable: !0
@@ -3817,7 +3917,7 @@ function tn(e, t) {
 		}
 	});
 }
-function nn(e, t) {
+function an(e, t) {
 	if (typeof e != "string") return;
 	let n = Number(e);
 	return Number.isInteger(n) && n >= 0 && n < t ? n : void 0;
@@ -3948,7 +4048,7 @@ var $ = class e {
 			}), this.source.changed());
 		});
 	}
-}, rn = class extends Ge {
+}, on = class extends Ke {
 	level;
 	constructor(e, t, n, r) {
 		super(e, n, [], r, ""), this.level = t;
@@ -3970,7 +4070,7 @@ var $ = class e {
 		return [...this.level.groupKeys, this.groupValue];
 	}
 	get key() {
-		return this.placeholder ? `${this.level.placeholderKey}-group-${this.rowIndex}` : an(this.groupKeys);
+		return this.placeholder ? `${this.level.placeholderKey}-group-${this.rowIndex}` : sn(this.groupKeys);
 	}
 	get depth() {
 		return this.level.depth;
@@ -4006,21 +4106,21 @@ var $ = class e {
 		this.placeholder || this.grid.toggleGroupRow(this.key);
 	}
 };
-function an(e) {
+function sn(e) {
 	return `rb-group:${$.keyOf(e)}`;
 }
 //#endregion
 //#region src/components/dataGrid/models/sourceRowModel.ts
-var on = {}, sn = class extends W {
+var cn = {}, ln = class extends U {
 	sourceLevel;
 	constructor(e, t, n) {
-		super(e, on, n), this.sourceLevel = t;
+		super(e, cn, n), this.sourceLevel = t;
 	}
 	get row() {
 		return this.sourceLevel.rowAt(this.rowIndex);
 	}
 	get data() {
-		return this.row ?? on;
+		return this.row ?? cn;
 	}
 	get placeholder() {
 		return this.row === void 0;
@@ -4038,7 +4138,7 @@ var on = {}, sn = class extends W {
 	get selected() {
 		return !this.placeholder && super.selected;
 	}
-}, cn = class extends sn {
+}, un = class extends ln {
 	isTreeRow = !0;
 	get level() {
 		return this.sourceLevel.depth;
@@ -4058,7 +4158,7 @@ var on = {}, sn = class extends W {
 	toggleTree = () => {
 		this.hasChildren && this.grid.tree.toggle(this.key, this.level);
 	};
-}, ln = 100, un = 40, dn = class {
+}, dn = 100, fn = 40, pn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4084,11 +4184,11 @@ var on = {}, sn = class extends W {
 	}
 	get blockSize() {
 		let e = this.config?.blockSize;
-		return e && e > 0 ? Math.floor(e) : this.grid.isPaginated ? this.grid.pageSize : ln;
+		return e && e > 0 ? Math.floor(e) : this.grid.isPaginated ? this.grid.pageSize : dn;
 	}
 	get maxBlocks() {
 		let e = this.config?.maxBlocks;
-		return e && e > 0 ? Math.floor(e) : un;
+		return e && e > 0 ? Math.floor(e) : fn;
 	}
 	get queryVersion() {
 		return this._query;
@@ -4143,7 +4243,7 @@ var on = {}, sn = class extends W {
 		return e.loadedBlocks().forEach(({ index: a, rows: o }) => {
 			o.forEach((o, s) => {
 				let c = [...e.path, o[r]];
-				if (!t.has(an(c))) return;
+				if (!t.has(sn(c))) return;
 				let l = a * n + s;
 				i.push({
 					rowIndex: l,
@@ -4197,20 +4297,20 @@ var on = {}, sn = class extends W {
 	listLength = -1;
 	rowList() {
 		let { start: e } = this.visibleRange();
-		return this.listLength = this.visibleLength(), tn(this.listLength, (t) => this.rowModelAt(e + t));
+		return this.listLength = this.visibleLength(), rn(this.listLength, (t) => this.rowModelAt(e + t));
 	}
 	flatRowList(e) {
 		let t = this.detailPositions();
-		return t.length === 0 ? e : tn(e.length + t.length, (n) => {
-			let r = pn(t, n);
-			return t[r] === n ? new De(this.grid, e[n - r - 1]) : e[n - r];
+		return t.length === 0 ? e : rn(e.length + t.length, (n) => {
+			let r = hn(t, n);
+			return t[r] === n ? new Ee(this.grid, e[n - r - 1]) : e[n - r];
 		});
 	}
 	rowOffsets(e) {
 		let { rowHeight: t } = this.grid, n = this.detailPositions(), r = [0];
 		return n.forEach((t, n) => r.push(r[n] + e[t].heightForOffset)), {
-			offsets: tn(e.length, (e) => {
-				let i = pn(n, e);
+			offsets: rn(e.length, (e) => {
+				let i = hn(n, e);
 				return (e - i) * t + r[i];
 			}),
 			totalHeight: (e.length - n.length) * t + r[n.length]
@@ -4239,7 +4339,7 @@ var on = {}, sn = class extends W {
 			let i = this.levels.get(r);
 			!i || i.isGroupLevel || i.loadedBlocks().forEach(({ index: r, rows: i }) => {
 				i.forEach((i, a) => {
-					let o = fn(n, r * t + a);
+					let o = mn(n, r * t + a);
 					o !== void 0 && e(o, i);
 				});
 			});
@@ -4247,14 +4347,14 @@ var on = {}, sn = class extends W {
 	}
 	rowModelAt(e) {
 		let t = this.segmentAt(e);
-		if (!t) return new sn(this.grid, this.root, e);
+		if (!t) return new ln(this.grid, this.root, e);
 		let { level: n } = t, r = t.levelStart + (e - t.start), i = this.models.get(n.key);
 		i || this.models.set(n.key, i = /* @__PURE__ */ new Map());
 		let a = i.get(r);
-		return a || (a = n.isGroupLevel ? new rn(this.grid, n, this.groupColumnAt(n.depth), r) : this.isTree ? new cn(this.grid, n, r) : new sn(this.grid, n, r), i.set(r, a)), a;
+		return a || (a = n.isGroupLevel ? new on(this.grid, n, this.groupColumnAt(n.depth), r) : this.isTree ? new un(this.grid, n, r) : new ln(this.grid, n, r), i.set(r, a)), a;
 	}
 	groupColumnAt(e) {
-		return G.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === this.groupBy[e]);
+		return W.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === this.groupBy[e]);
 	}
 	visibleLength() {
 		let { start: e, end: t } = this.visibleRange();
@@ -4340,10 +4440,10 @@ var on = {}, sn = class extends W {
 		this._segments = void 0, this._byLevel = void 0, this.listLength !== this.visibleLength() && this.grid.rows.clear(), this.grid.flatRows.clear(), this.grid.notify();
 	}
 };
-function fn(e, t) {
+function mn(e, t) {
 	for (let n of e) if (t >= n.levelStart && t < n.levelStart + n.length) return n.start + (t - n.levelStart);
 }
-function pn(e, t) {
+function hn(e, t) {
 	let n = 0, r = e.length;
 	for (; n < r;) {
 		let i = n + r >>> 1;
@@ -4353,7 +4453,7 @@ function pn(e, t) {
 }
 //#endregion
 //#region src/components/dataGrid/models/exportModel.ts
-var mn = 7, hn = class {
+var gn = 7, _n = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4367,7 +4467,7 @@ var mn = 7, hn = class {
 	}
 	width(e) {
 		let t = e.inlineWidth ?? this.grid.DEFAULT_COLUMN_WIDTH_PX;
-		return Math.min(80, Math.max(6, Math.round(t / mn * 10) / 10));
+		return Math.min(80, Math.max(6, Math.round(t / gn * 10) / 10));
 	}
 	value(e, t) {
 		let { exportValue: n } = e.def, r = n ? n(t) : t[e.key];
@@ -4375,7 +4475,7 @@ var mn = 7, hn = class {
 	}
 	aggregateOf(e, t) {
 		let n = e.aggregate;
-		return n ? Ve(n, t.map((t) => this.value(e, t)), t) : null;
+		return n ? He(n, t.map((t) => this.value(e, t)), t) : null;
 	}
 	table(e = {}) {
 		let t = this.columns(e.columns), n = e.groups ?? !0, r = [], i = (e, a, o) => {
@@ -4390,7 +4490,7 @@ var mn = 7, hn = class {
 				}), i(s.rows, n ? a + 1 : a, o || n && e);
 			} else {
 				if (s.placeholder) continue;
-				let e = Oe(s) ? s.level : a;
+				let e = De(s) ? s.level : a;
 				r.push({
 					kind: "data",
 					level: e,
@@ -4439,7 +4539,7 @@ var mn = 7, hn = class {
 		let { title: t } = this.grid.props.def, n = typeof t == "string" && t.trim() ? t.trim() : this.grid.localeText.exportFileName;
 		return e.fileName?.trim() || n;
 	}
-}, gn = class {
+}, vn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4461,12 +4561,15 @@ var mn = 7, hn = class {
 	}
 	setGlobalFilter = (e) => this.grid.setGlobalFilter(e);
 	clearAllFilters = () => this.grid.clearAllFilters();
-}, _n = {
+}, yn = {
 	searchPlaceholder: "Search...",
 	columnsMenu: "Columns",
-	columnsMenuSearchPlaceholder: "Search columns...",
-	columnsMenuShowAll: "Show All",
-	columnsMenuHideAll: "Hide All",
+	columnsMenuLabel: (e, t) => `Columns, ${e} of ${t} shown`,
+	columnsMenuSearchPlaceholder: "Search columns",
+	columnsMenuShowAll: "Show all",
+	columnsMenuHideAll: "Hide all",
+	columnsMenuShown: (e, t) => `${e} of ${t} shown`,
+	columnsMenuNoMatch: (e) => `No columns match “${e}”`,
 	stopGrouping: (e) => `Stop grouping by ${e}`,
 	exportCsv: "CSV",
 	exportCsvLabel: "Export CSV",
@@ -4534,7 +4637,7 @@ var mn = 7, hn = class {
 	nextPage: "Next page",
 	lastPage: "Last page",
 	selectionAnnouncement: (e, t) => e === 0 ? "No rows selected" : `${e} of ${t} rows selected`
-}, vn = class {
+}, bn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4590,16 +4693,16 @@ var mn = 7, hn = class {
 		let t = parseInt(e, 10);
 		isNaN(t) || this.grid.changePage(Math.max(1, Math.min(t, this.totalPages)));
 	};
-}, yn = /["\t\r\n]/;
-function bn(e) {
+}, xn = /["\t\r\n]/;
+function Sn(e) {
 	if (e == null) return "";
 	let t = e instanceof Date ? e.toISOString() : String(e);
-	return yn.test(t) ? `"${t.split("\"").join("\"\"")}"` : t;
+	return xn.test(t) ? `"${t.split("\"").join("\"\"")}"` : t;
 }
-function xn(e) {
-	return e.map((e) => e.map(bn).join("	")).join("\r\n");
+function Cn(e) {
+	return e.map((e) => e.map(Sn).join("	")).join("\r\n");
 }
-function Sn(e) {
+function wn(e) {
 	let t = [], n = [], r = "", i = !1;
 	for (let a = 0; a < e.length; a++) {
 		let o = e[a];
@@ -4607,10 +4710,10 @@ function Sn(e) {
 	}
 	return (r !== "" || n.length > 0) && (n.push(r), t.push(n)), t;
 }
-function Cn(e, t) {
+function Tn(e, t) {
 	return e?.row === t?.row && e?.column === t?.column;
 }
-var wn = class {
+var En = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4656,7 +4759,7 @@ var wn = class {
 			row: e,
 			column: t
 		}, i = n && this._anchor ? this._anchor : r;
-		Cn(this._focus, r) && Cn(this._anchor, i) || (this._anchor = i, this._focus = r, this.grid.notifyRows(), this.emit(n ? "extend" : "select"));
+		Tn(this._focus, r) && Tn(this._anchor, i) || (this._anchor = i, this._focus = r, this.grid.notifyRows(), this.emit(n ? "extend" : "select"));
 	}
 	syncCurrent(e, t) {
 		this.isCurrent(e, t) || this.setCurrent(e, t);
@@ -4707,7 +4810,7 @@ var wn = class {
 	onCopy = (e) => {
 		if (!this._focus || !e.clipboardData) return;
 		let t = e.currentTarget.ownerDocument.defaultView?.getSelection();
-		t && !t.isCollapsed || (e.clipboardData.setData("text/plain", xn(this.values())), e.preventDefault());
+		t && !t.isCollapsed || (e.clipboardData.setData("text/plain", Cn(this.values())), e.preventDefault());
 	};
 	pasteBounds(e, t) {
 		let n = this.bounds;
@@ -4724,10 +4827,10 @@ var wn = class {
 		if (!this._focus || !e.clipboardData || this.grid.edits.isOpen || !this.grid.edits.enabled) return;
 		let t = e.clipboardData.getData("text/plain");
 		if (!t) return;
-		let n = Sn(t), r = n.reduce((e, t) => Math.max(e, t.length), 0), i = this.pasteBounds(n.length, r);
+		let n = wn(t), r = n.reduce((e, t) => Math.max(e, t.length), 0), i = this.pasteBounds(n.length, r);
 		i && (e.preventDefault(), this.grid.edits.paste(i, (e, t) => n[e % n.length][t % r] ?? ""));
 	};
-}, Tn = class extends W {
+}, Dn = class extends U {
 	node;
 	level;
 	position;
@@ -4747,7 +4850,7 @@ var wn = class {
 	toggleTree = () => {
 		this.grid.tree.toggle(this.key, this.level);
 	};
-	_subtreeKeys = H(() => {
+	_subtreeKeys = q(() => {
 		let e = [], t = (n) => {
 			n.forEach((n) => {
 				e.push(this.grid.getRowKey(n.data)), t(n.children);
@@ -4778,10 +4881,10 @@ var wn = class {
 };
 //#endregion
 //#region src/components/dataGrid/models/treeModel.ts
-function En(e) {
+function On(e) {
 	return JSON.stringify(e);
 }
-var Dn = class {
+var kn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4835,9 +4938,9 @@ var Dn = class {
 				data: e,
 				children: []
 			};
-			n.set(En(r), i);
+			n.set(On(r), i);
 			let a;
-			for (let e = r.length - 1; e > 0 && !a; e--) a = n.get(En(r.slice(0, e)));
+			for (let e = r.length - 1; e > 0 && !a; e--) a = n.get(On(r.slice(0, e)));
 			(a ? a.children : t).push(i);
 		}), t;
 	}
@@ -4853,17 +4956,17 @@ var Dn = class {
 	}
 	sortNodes(e) {
 		let { sortColumn: t, sortDirection: n } = this.grid;
-		return t === void 0 ? e : G.sortBy(e, (e) => e.data[t], n).map((e) => ({
+		return t === void 0 ? e : W.sortBy(e, (e) => e.data[t], n).map((e) => ({
 			data: e.data,
 			children: this.sortNodes(e.children)
 		}));
 	}
-	nodes = H(() => {
+	nodes = q(() => {
 		if (!this.isEager) return [];
 		let e = this.isFlat ? this.buildFlat(this.grid.data) : this.buildNested(this.grid.data);
 		return this.sortNodes(this.grid.hasRowFilters ? this.prune(e) : e);
 	});
-	allRows = H(() => {
+	allRows = q(() => {
 		let e = [], t = (n) => {
 			n.forEach((n) => {
 				e.push(n.data), t(n.children);
@@ -4883,7 +4986,7 @@ var Dn = class {
 	}
 	rowList() {
 		let e = 0, t = (n, r, i) => n.map((a, o) => {
-			let s = new Tn(this.grid, a, e++, r, o, n.length, i);
+			let s = new Dn(this.grid, a, e++, r, o, n.length, i);
 			return s.treeExpanded && (s.children = t(a.children, r + 1, s)), s;
 		});
 		return t(this.nodes.value, 0);
@@ -4925,7 +5028,7 @@ var Dn = class {
 		let n = !this.isExpanded(e, t);
 		n ? (this._opened.add(e), this._closed.delete(e)) : (this._closed.add(e), this._opened.delete(e)), this.grid.treeExpansionChanged(), this.grid.props.onExpandedTreeKeysChange?.(this.expandedKeys(), { reason: n ? "expand" : "collapse" }), this.grid.notify();
 	};
-}, On = {}, kn = class e {
+}, An = {}, jn = class e {
 	props;
 	constructor(e, t) {
 		this.props = e, t && this.listeners.add(t);
@@ -4993,7 +5096,7 @@ var Dn = class {
 		let e = this.props.def.localeText, t = this._localeText;
 		if (t && t.from === e) return t.text;
 		let n = {
-			..._n,
+			...yn,
 			...e
 		};
 		return this._localeText = {
@@ -5001,22 +5104,22 @@ var Dn = class {
 			text: n
 		}, n;
 	}
-	sourceColumns = H(() => {
+	sourceColumns = q(() => {
 		let { def: e } = this.props, t = [];
-		if (this.groupColumns.size > 0 && t.push(new Q({ key: K }, this)), t.push(...e.columns.map((e) => new Q(e, this))), e.rowSelection) {
+		if (this.groupColumns.size > 0 && t.push(new Q({ key: G }, this)), t.push(...e.columns.map((e) => new Q(e, this))), e.rowSelection) {
 			let n = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "START" : void 0;
 			t.unshift(new Q({
-				key: Ie,
+				key: Fe,
 				pin: n,
 				width: 50,
 				align: "center",
-				Cell: Xt
+				Cell: Qt
 			}, this));
 		}
 		if (e.showRowNumber) {
 			let n, r = 70;
 			typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (n = "START"), r = e.showRowNumber.width ?? 70), t.unshift(new Q({
-				key: Fe,
+				key: Pe,
 				pin: n,
 				width: r,
 				align: "end"
@@ -5025,17 +5128,17 @@ var Dn = class {
 		if (e.rowDetail) {
 			let n = e.rowDetail.pinned ? "START" : void 0, r = e.rowDetail.expandColumnWidth ?? 50, i = e.rowDetail.expandColumnHeader ?? "";
 			t.unshift(new Q({
-				key: Le,
+				key: Ie,
 				header: i,
 				pin: n,
 				width: r,
 				align: "center",
-				Cell: Yt
+				Cell: Zt
 			}, this));
 		}
 		return t;
 	});
-	columns = H(() => {
+	columns = q(() => {
 		let e = this.sourceColumns.value.map((e) => e.getPinnedColumn("START")).filter((e) => !!e), t = this.sourceColumns.value.map((e) => e.getPinnedColumn()).filter((e) => !!e), n = this.sourceColumns.value.map((e) => e.getPinnedColumn("END")).filter((e) => !!e), r = [
 			...e,
 			...t,
@@ -5049,24 +5152,24 @@ var Dn = class {
 			leafs: i,
 			visibleLeafs: a,
 			userVisibleLeafs: a.filter((e) => ![
+				Pe,
 				Fe,
-				Ie,
-				K,
-				Le
+				G,
+				Ie
 			].includes(e.key)),
-			maxDeath: G.maxBy(r, (e) => e.death) + 1
+			maxDeath: W.maxBy(r, (e) => e.death) + 1
 		};
 	}, () => [this.sourceColumns]);
-	headerRows = H(() => G.sortBy(G.groupBy(this.columns.value.flat, (e) => e.death), (e) => e.key).map((e) => {
-		let t = G.toRecord(G.groupBy(e.values, (e) => e.pin ?? "NO_PIN"), (e) => [e.key, e.values]);
+	headerRows = q(() => W.sortBy(W.groupBy(this.columns.value.flat, (e) => e.death), (e) => e.key).map((e) => {
+		let t = W.toRecord(W.groupBy(e.values, (e) => e.pin ?? "NO_PIN"), (e) => [e.key, e.values]);
 		return [
 			...t.START?.filter((e) => e.isVisible) ?? [],
 			...t.NO_PIN?.filter((e) => e.isVisible) ?? [],
 			...t.END?.filter((e) => e.isVisible) ?? []
 		];
 	}), () => [this.columns]);
-	gridTemplateColumns = H(() => {
-		let { visibleLeafs: e } = this.columns.value, t = G.sumBy(e, (e) => +(e.pin === "END")), n = e.length - t;
+	gridTemplateColumns = q(() => {
+		let { visibleLeafs: e } = this.columns.value, t = W.sumBy(e, (e) => +(e.pin === "END")), n = e.length - t;
 		return `${n > 0 ? `repeat(${n}, max-content)` : ""} ${t > 0 ? `repeat(${t}, max-content)` : ""}`.trim();
 	}, () => [this.columns]);
 	_globalFilterValue = "";
@@ -5077,7 +5180,7 @@ var Dn = class {
 	get columnFilters() {
 		return this.props.columnFilters ?? this._columnFilters;
 	}
-	globalFilterColumns = H(() => this.props.def.globalFilterKeys ?? this.columns.value.leafs.filter((e) => e.key !== "row-number-cell" && e.key !== "row-selection-cell" && e.key !== "grouping-cell" && e.key !== "row-detail-cell").map((e) => e.key), () => [this.columns]);
+	globalFilterColumns = q(() => this.props.def.globalFilterKeys ?? this.columns.value.leafs.filter((e) => e.key !== "row-number-cell" && e.key !== "row-selection-cell" && e.key !== "grouping-cell" && e.key !== "row-detail-cell").map((e) => e.key), () => [this.columns]);
 	rowMatchesFilters(e) {
 		let { filters: t } = this.props;
 		return t && !t.every((t) => t(e)) || this.props.def.globalFilter && !this.matchesGlobalFilter(e) ? !1 : this.matchesColumnFilters(e);
@@ -5089,7 +5192,7 @@ var Dn = class {
 		let t = this.globalFilterValue.trim();
 		return !t || this.globalFilterColumns.value.some((n) => {
 			let r = e[n];
-			return r != null && Jt(t, String(r));
+			return r != null && Xt(t, String(r));
 		});
 	}
 	matchesColumnFilters(e) {
@@ -5101,7 +5204,7 @@ var Dn = class {
 	}
 	matchesFilter(e, t) {
 		switch (t.type) {
-			case "text": return !t.value.trim() || e != null && Jt(t.value, String(e));
+			case "text": return !t.value.trim() || e != null && Xt(t.value, String(e));
 			case "number": {
 				if (e == null) return !1;
 				let n = typeof e == "number" ? e : parseFloat(String(e));
@@ -5199,50 +5302,50 @@ var Dn = class {
 	get totalRowCount() {
 		return this.source.enabled ? this.source.rowCount : this.tree.isEager ? this.tree.everyRow().length : this.props.def.pagination?.totalCount ?? this.data.length;
 	}
-	rows = H(() => {
+	rows = q(() => {
 		if (this.source.enabled) return this.source.rowList();
 		if (this.tree.isEager) return this.tree.rowList();
 		let e = this.filteredData;
-		if (this._sortColumn && !this.isPaginated && (e = G.sortBy(e, (e) => e[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
+		if (this._sortColumn && !this.isPaginated && (e = W.sortBy(e, (e) => e[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
 			let t = (e, n, r) => {
 				let i = n.values().next().value;
 				n.delete(i);
-				let a = G.findOrThrow(this.columns.value.leafs, (e) => e.key === i);
-				return this._sortColumn === "grouping-cell" && (e = G.sortBy(e, (e) => e[i], this._sortDirection)), G.groupBy(e, (e) => e[i]).map((e) => {
+				let a = W.findOrThrow(this.columns.value.leafs, (e) => e.key === i);
+				return this._sortColumn === "grouping-cell" && (e = W.sortBy(e, (e) => e[i], this._sortDirection)), W.groupBy(e, (e) => e[i]).map((e) => {
 					let i;
-					i = n.size > 0 ? t(e.values, new Set(n), r + 1) : e.values.map((e, t) => new W(this, e, r + 1 + t));
-					let o = new Ge(this, a, i, r, e.key);
+					i = n.size > 0 ? t(e.values, new Set(n), r + 1) : e.values.map((e, t) => new U(this, e, r + 1 + t));
+					let o = new Ke(this, a, i, r, e.key);
 					return r += 1, o.expanded && (r += i.length), o;
 				});
 			};
 			return t(e, new Set(this.groupColumns), 0);
 		}
-		return e.map((e, t) => new W(this, e, t));
+		return e.map((e, t) => new U(this, e, t));
 	}, () => [this.columns]);
-	groupingSpan = H(() => {
+	groupingSpan = q(() => {
 		let { visibleLeafs: e } = this.columns.value, t = e.findIndex((e) => e.isGrouping);
 		if (t === -1) return [];
 		let n = (n, r) => r > t && n.pin === e[t].pin && !n.isRowNumber && !n.isRowSelection && !n.isRowDetail, r = e.findIndex((e, t) => n(e, t) && !!e.aggregate), i = r === -1 ? e.length : r;
 		return [e[t], ...e.filter((e, t) => t < i && n(e, t))];
 	}, () => [this.columns]);
-	flatRows = H(() => this.source.enabled ? this.source.flatRowList(this.rows.value) : this.rows.value.flatMap((e) => e.flatRows), () => [this.rows]);
+	flatRows = q(() => this.source.enabled ? this.source.flatRowList(this.rows.value) : this.rows.value.flatMap((e) => e.flatRows), () => [this.rows]);
 	get rowHeight() {
 		return this.props.def.rowHeight ?? this.DEFAULT_ROW_HEIGHT_PX;
 	}
-	sizes = H(() => {
+	sizes = q(() => {
 		let e = this.columns.value.flat.reduce((e, t) => {
 			let { inlineWidth: n } = t;
 			return typeof n == "number" && (e[t.widthVarName] = `${t.inlineWidth}px`), t.pin === "START" && (e[t.inlineStartVarName] = `${t.startOffset}px`), t.pin === "END" && (e[t.inlineEndVarName] = `${t.endOffset}px`), e;
 		}, {});
 		e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.inlineStartEdgeVarName] = `${this.inlineStartEdge}px`, this._containerWidth > 0 && (e[this.viewportWidthVarName] = `${this._containerWidth}px`);
-		let { visibleLeafs: t } = this.columns.value, n = t.find((e) => e.key === K);
+		let { visibleLeafs: t } = this.columns.value, n = t.find((e) => e.key === G);
 		if (n) {
-			let t = G.sumBy(this.groupingSpan.value, (e) => e.inlineWidth ?? 0);
+			let t = W.sumBy(this.groupingSpan.value, (e) => e.inlineWidth ?? 0);
 			e[n.groupColumnWidthVarName] = `${t}px`;
 		}
 		return this.groupColumns.forEach((n) => {
-			let r = G.findOrThrow(this.columns.value.leafs, (e) => e.key === n);
-			e[r.groupColumnWidthVarName] = `${G.sumBy(t, (e) => e.pin === r.pin ? e.inlineWidth ?? 0 : 0)}px`;
+			let r = W.findOrThrow(this.columns.value.leafs, (e) => e.key === n);
+			e[r.groupColumnWidthVarName] = `${W.sumBy(t, (e) => e.pin === r.pin ? e.inlineWidth ?? 0 : 0)}px`;
 		}), e;
 	}, () => [this.columns, this.flexWidths]);
 	_containerWidth = 0;
@@ -5256,17 +5359,21 @@ var Dn = class {
 	setSizingElement = (e) => {
 		this._sizingElement = e;
 	};
+	paintSizes = () => {
+		let e = this._sizingElement;
+		e && Object.entries(this.sizes.value).forEach(([t, n]) => e.style.setProperty(t, n));
+	};
 	get isRtl() {
 		return t(this._sizingElement);
 	}
 	setContainerWidth = (e) => {
 		this._containerWidth !== e && (this._containerWidth = e, this.flexWidths.clear(), this.notify());
 	};
-	flexWidths = H(() => {
+	flexWidths = q(() => {
 		let e = this._containerWidth;
 		if (e <= 0) return {};
-		let t = this.columns.value.visibleLeafs, n = (e) => !e.isFlexible || this.columnWidths.has(e.key), r = G.sumBy(t.filter(n), (e) => e.baseWidth), i = t.filter((e) => !n(e)), a = G.sumBy(i, (e) => e.baseWidth), o = e - r;
-		if (o <= a) return G.toRecord(i, (e) => [e.key, e.baseWidth]);
+		let t = this.columns.value.visibleLeafs, n = (e) => !e.isFlexible || this.columnWidths.has(e.key), r = W.sumBy(t.filter(n), (e) => e.baseWidth), i = t.filter((e) => !n(e)), a = W.sumBy(i, (e) => e.baseWidth), o = e - r;
+		if (o <= a) return W.toRecord(i, (e) => [e.key, e.baseWidth]);
 		let s = {}, c = 0;
 		return i.forEach((e, t) => {
 			if (t === i.length - 1) s[e.key] = o - c;
@@ -5339,31 +5446,31 @@ var Dn = class {
 			pageSize: e
 		}), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify());
 	};
-	rowOffsets = H(() => {
+	rowOffsets = q(() => {
 		if (this.source.enabled) return this.source.rowOffsets(this.flatRows.value);
 		let e = [], t = 0;
-		for (let n of this.flatRows.value) e.push(t), t += n instanceof De ? n.heightForOffset : this.rowHeight;
+		for (let n of this.flatRows.value) e.push(t), t += n instanceof Ee ? n.heightForOffset : this.rowHeight;
 		return {
 			offsets: e,
 			totalHeight: t
 		};
 	}, () => [this.flatRows]);
-	viewport = new he(this);
-	columnVisibility = new en(this);
-	filter = new gn(this);
-	pagination = new vn(this);
-	aggregation = new He(this);
-	exporter = new hn(this);
-	source = new dn(this);
-	tree = new Dn(this);
-	edits = new we(this);
-	range = new wn(this);
+	viewport = new ge(this);
+	columnVisibility = new nn(this);
+	filter = new vn(this);
+	pagination = new bn(this);
+	aggregation = new Ue(this);
+	exporter = new _n(this);
+	source = new pn(this);
+	tree = new kn(this);
+	edits = new Te(this);
+	range = new En(this);
 	refresh = () => {
 		this.edits.clearEdits(), this.source.invalidate();
 	};
 	get exportConfig() {
 		let e = this.props.def.export;
-		if (e) return typeof e == "object" ? e : On;
+		if (e) return typeof e == "object" ? e : An;
 	}
 	exportCsv = async (e = {}) => {
 		let { downloadCsv: t } = await import("../gridExport.mjs");
@@ -5382,7 +5489,7 @@ var Dn = class {
 	get selectableRows() {
 		return this.source.enabled ? this.loadedRows : this.filteredData;
 	}
-	_selectableKeys = H(() => (this.rows.value, new Set(this.selectableRows.map((e) => this.getRowKey(e)))), () => [this.rows]);
+	_selectableKeys = q(() => (this.rows.value, new Set(this.selectableRows.map((e) => this.getRowKey(e)))), () => [this.rows]);
 	get selectableKeys() {
 		return this.source.enabled ? new Set(this.loadedRows.map((e) => this.getRowKey(e))) : this._selectableKeys.value;
 	}
@@ -5428,14 +5535,14 @@ var Dn = class {
 		return this.localeText.selectionAnnouncement(e, this.totalRowCount);
 	}
 	get groupedColumns() {
-		return Array.from(this.groupColumns, (e) => G.findOrThrow(this.columns.value.leafs, (t) => t.key === e));
+		return Array.from(this.groupColumns, (e) => W.findOrThrow(this.columns.value.leafs, (t) => t.key === e));
 	}
 	selectedRows = /* @__PURE__ */ new Set();
 	get inlineStartEdge() {
-		return G.sumBy(this.columns.value.start, (e) => e.inlineWidth ?? 0);
+		return W.sumBy(this.columns.value.start, (e) => e.inlineWidth ?? 0);
 	}
 	get inlineEndEdge() {
-		return G.sumBy(this.columns.value.end, (e) => e.inlineWidth ?? 0);
+		return W.sumBy(this.columns.value.end, (e) => e.inlineWidth ?? 0);
 	}
 	inlineStartEdgeVarName = "--inline-start-edge";
 	rowHeightVarName = "--row-height";
@@ -5466,7 +5573,7 @@ var Dn = class {
 		}), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
 	};
 	pinColumn = (e, t) => {
-		let n = Zt(t), r = G.findOrThrow(this.columns.value.flat, (t) => t.uniqueKey === e);
+		let n = $t(t), r = W.findOrThrow(this.columns.value.flat, (t) => t.uniqueKey === e);
 		r.pin !== n && r.pinColumn(n), this.columns.clear(), this.notify();
 	};
 	toggleGrouping = (e) => {
@@ -5555,15 +5662,15 @@ var Dn = class {
 };
 //#endregion
 //#region src/components/dataGrid/useGrid.ts
-function An(e) {
-	let [t] = P(() => new kn(e)), n = l("datagrid");
-	return t.setProps(e), t.setIdentifier(n), te(t.subscribe, t.getSnapshot, t.getSnapshot), t;
+function Mn(e) {
+	let [t] = P(() => new jn(e)), n = l("datagrid");
+	return t.setProps(e), t.setIdentifier(n), ne(t.subscribe, t.getSnapshot, t.getSnapshot), t;
 }
 //#endregion
 //#region src/components/dataGrid.tsx
-function jn(e, t) {
-	let n = An(e), i = N(null);
-	A(t, () => ({
+function Nn(e, t) {
+	let n = Mn(e), i = N(null);
+	j(t, () => ({
 		get element() {
 			return i.current;
 		},
@@ -5572,31 +5679,31 @@ function jn(e, t) {
 		refresh: n.refresh,
 		clearEdits: n.edits.clearEdits
 	}), [n]);
-	let { component: a, data: o, def: s, loading: c, filters: l, globalFilterValue: u, columnFilters: d, expandedRowKeys: f, expandedTreeKeys: p, page: m, pageSize: h, onSelectedRowKeysChange: g, onSelectionChange: _, onGlobalFilterChange: y, onColumnFiltersChange: b, onExpandedRowKeysChange: x, onExpandedTreeKeysChange: S, onCellEditsChange: C, onPaginationChange: w, onPageChange: T, onPageSizeChange: E, onSortingChange: D, onSortChange: O, onServerStateChange: ee, style: k, ...M } = e;
-	return j(() => {
+	let { component: a, data: o, def: s, loading: c, filters: l, globalFilterValue: u, columnFilters: d, expandedRowKeys: f, expandedTreeKeys: p, page: m, pageSize: h, onSelectedRowKeysChange: g, onSelectionChange: v, onGlobalFilterChange: y, onColumnFiltersChange: b, onExpandedRowKeysChange: x, onExpandedTreeKeysChange: S, onCellEditsChange: C, onPaginationChange: w, onPageChange: T, onPageSizeChange: E, onSortingChange: ee, onSortChange: D, onServerStateChange: O, style: k, ...A } = e;
+	return M(() => {
 		let e = i.current;
 		if (e) return n.setSizingElement(e), () => n.setSizingElement(null);
 	}, [n]), /* @__PURE__ */ R(r, {
 		ref: i,
 		component: n.componentName,
-		...M,
+		...A,
 		style: {
 			...n.sizes.value,
 			...k
 		},
 		children: [
-			n.props.def.topBar && /* @__PURE__ */ L(Kt, { grid: n }),
+			n.props.def.topBar && /* @__PURE__ */ L(Jt, { grid: n }),
 			/* @__PURE__ */ L(zt, { grid: n }),
 			/* @__PURE__ */ L(Rt, { grid: n }),
-			n.props.def.bottomBar && /* @__PURE__ */ L(de, { grid: n }),
-			/* @__PURE__ */ L(v, {
+			n.props.def.bottomBar && /* @__PURE__ */ L(pe, { grid: n }),
+			/* @__PURE__ */ L(_, {
 				props: { role: "status" },
 				children: n.selectionAnnouncement
 			})
 		]
 	});
 }
-var Mn = E(jn);
-jn.displayName = "DataGrid";
+var Pn = ee(Nn);
+Nn.displayName = "DataGrid";
 //#endregion
-export { _n as DATA_GRID_LOCALE_TEXT, Mn as default };
+export { yn as DATA_GRID_LOCALE_TEXT, Pn as default };