flexi-datagrid 1.2.11 → 1.2.12

package/dist/index.es.js

@@ -1,27 +1,27 @@
-import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronLeft as i, ChevronRight as a, ChevronsLeft as o, ChevronsRight as s, Filter as c, Pin as l, PinOff as u, RotateCcw as d, Settings as f, X as p } from "lucide-react";
-import { createContext as m, useCallback as h, useContext as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { ArrowDown as c, ArrowUp as l, ArrowUpDown as u, ChevronDown as d, ChevronLeft as f, ChevronRight as p, ChevronsLeft as m, ChevronsRight as h, Filter as g, Pin as ee, PinOff as _, RotateCcw as v, Settings as y, X as b } from "lucide-react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 import { createPortal as C } from "react-dom";
 //#region src/DataTable/context/DataTableContext.tsx
-var w = m(null);
-function ee({ value: e, children: t }) {
+var w = e(null);
+function T({ value: e, children: t }) {
 	return /* @__PURE__ */ x(w.Provider, {
 		value: e,
 		children: t
 	});
 }
-function T() {
-	let e = g(w);
+function E() {
+	let e = n(w);
 	if (!e) throw Error("DataTable components must be rendered inside <DataTable>.");
 	return e;
 }
 //#endregion
 //#region src/DataTable/utils/classNames.ts
-var E = (...e) => e.filter(Boolean).join(" ");
+var D = (...e) => e.filter(Boolean).join(" ");
 //#endregion
 //#region src/DataTable/components/GroupZone.tsx
-function D() {
-	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = T(), [i, a] = b(!1);
+function O() {
+	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = E(), [i, a] = s(!1);
 	return /* @__PURE__ */ x("div", {
 		onDragOver: (e) => {
 			e.preventDefault(), a(!0);
@@ -32,7 +32,7 @@ function D() {
 			let r = e.dataTransfer.getData("text/plain");
 			r && t.has(r) && n(r);
 		},
-		className: E("flexi-groupzone", i && "flexi-groupzone--dragover"),
+		className: D("flexi-groupzone", i && "flexi-groupzone--dragover"),
 		children: e.length === 0 ? /* @__PURE__ */ x("span", {
 			className: "flexi-groupzone-hint",
 			children: "Drag a column header here to group your records by that field"
@@ -47,7 +47,7 @@ function D() {
 					type: "button",
 					onClick: () => r(e),
 					className: "flexi-icon-btn flexi-chip-remove",
-					children: /* @__PURE__ */ x(p, { className: "flexi-icon-xs" })
+					children: /* @__PURE__ */ x(b, { className: "flexi-icon-xs" })
 				})]
 			}, e))]
 		})
@@ -55,8 +55,8 @@ function D() {
 }
 //#endregion
 //#region src/DataTable/components/Pagination.tsx
-function O() {
-	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: c, goToPage: l, changePageSize: u } = T();
+function te() {
+	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: i, goToPage: a, changePageSize: o } = E();
 	return /* @__PURE__ */ S("div", {
 		className: "flexi-pagination",
 		children: [
@@ -64,9 +64,9 @@ function O() {
 				className: "flexi-pagination-size",
 				children: [/* @__PURE__ */ x("span", { children: "Rows per page" }), /* @__PURE__ */ x("select", {
 					value: t,
-					onChange: (e) => u(Number(e.target.value)),
+					onChange: (e) => o(Number(e.target.value)),
 					className: "flexi-pagination-select",
-					children: c.map((e) => /* @__PURE__ */ x("option", {
+					children: i.map((e) => /* @__PURE__ */ x("option", {
 						value: e,
 						children: e
 					}, e))
@@ -81,19 +81,19 @@ function O() {
 				children: [
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(1),
+						onClick: () => a(1),
 						disabled: e === 1,
 						className: "flexi-icon-btn",
 						title: "First page",
-						children: /* @__PURE__ */ x(o, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(m, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(e - 1),
+						onClick: () => a(e - 1),
 						disabled: e === 1,
 						className: "flexi-icon-btn",
 						title: "Previous page",
-						children: /* @__PURE__ */ x(i, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ S("span", {
 						className: "flexi-pagination-page",
@@ -106,19 +106,19 @@ function O() {
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(e + 1),
+						onClick: () => a(e + 1),
 						disabled: e === n,
 						className: "flexi-icon-btn",
 						title: "Next page",
-						children: /* @__PURE__ */ x(a, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(p, { className: "flexi-icon-sm" })
 					}),
 					/* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => l(n),
+						onClick: () => a(n),
 						disabled: e === n,
 						className: "flexi-icon-btn",
 						title: "Last page",
-						children: /* @__PURE__ */ x(s, { className: "flexi-icon-sm" })
+						children: /* @__PURE__ */ x(h, { className: "flexi-icon-sm" })
 					})
 				]
 			})
@@ -127,26 +127,26 @@ function O() {
 }
 //#endregion
 //#region src/DataTable/constants.ts
-var te = [
+var ne = [
 	10,
 	25,
 	50,
 	100
-], k = [], A = [], j = (e) => {
+], k = [], re = [], A = (e) => {
 	let t = [];
 	return e.forEach((e) => {
-		e.children && e.children.length > 0 ? t.push(...j(e.children)) : t.push(e);
+		e.children && e.children.length > 0 ? t.push(...A(e.children)) : t.push(e);
 	}), t;
-}, ne = (e) => {
+}, j = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-}, M = (e) => {
+}, ie = (e) => {
 	let t = {};
 	return e.forEach((e) => {
-		let n = ne(e.pinned);
+		let n = j(e.pinned);
 		n && (t[e.key] = n);
 	}), t;
-}, N = (e, t, n) => {
+}, M = (e, t, n) => {
 	let r = (e) => {
 		let n = t[e];
 		return n === "left" ? 0 : n === "right" ? 2 : 1;
@@ -161,22 +161,22 @@ var te = [
 		children: i(e.children)
 	} : e);
 	return i(e);
-}, P = (e, t, n) => {
+}, N = (e, t, n) => {
 	let r = e.map((e) => e.key);
 	if (r.includes(t) && r.includes(n)) return e;
 	for (let r of e) if (r.children && r.children.length > 0) {
-		let e = P(r.children, t, n);
+		let e = N(r.children, t, n);
 		if (e) return e;
 	}
 	return null;
-}, F = (e, t) => {
+}, P = (e, t) => {
 	let n = t[e.key];
 	if (n !== void 0) return n;
 	let r = e.style?.width || e.headerStyle?.width || "150px";
 	if (typeof r == "number") return r;
 	let i = String(r).trim();
 	return /^\d+(\.\d+)?(px)?$/i.test(i) && parseInt(i, 10) || 150;
-}, re = (e, t, n) => {
+}, ae = (e, t, n) => {
 	let r = (e) => {
 		let t = 0;
 		return e.forEach((e) => {
@@ -203,13 +203,13 @@ var te = [
 		...e,
 		rowSpan: Math.min(e.rowSpan, c.length - t)
 	})));
-}, ie = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
+}, oe = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
 	let a = {}, o = r ? 48 : 0;
 	e.forEach((e) => {
 		t[e.key] === "left" && (a[e.key] = {
 			side: "left",
 			offset: o
-		}, o += F(e, n));
+		}, o += P(e, n));
 	});
 	let s = i ? 100 : 0;
 	for (let r = e.length - 1; r >= 0; r--) {
@@ -217,10 +217,10 @@ var te = [
 		t[i.key] === "right" && (a[i.key] = {
 			side: "right",
 			offset: s
-		}, s += F(i, n));
+		}, s += P(i, n));
 	}
 	return a;
-}, I = (e, t, n = !1, r) => {
+}, F = (e, t, n = !1, r) => {
 	let i = e[t];
 	if (!i) return r || {};
 	let a = i.side === "right";
@@ -233,7 +233,7 @@ var te = [
 		boxShadow: a ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 		...r
 	};
-}, ae = () => /* @__PURE__ */ x("td", {
+}, I = () => /* @__PURE__ */ x("td", {
 	className: "flexi-row-indent-cell",
 	style: {
 		position: "sticky",
@@ -254,8 +254,8 @@ function L({ children: e }) {
 		})
 	});
 }
-function oe({ node: e }) {
-	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: i, totalColumnsCount: o } = T(), s = n[e.path] !== !1;
+function se({ node: e }) {
+	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: r, totalColumnsCount: i } = E(), a = n[e.path] !== !1;
 	return /* @__PURE__ */ S("tr", {
 		className: "flexi-group-row",
 		style: { height: t },
@@ -270,10 +270,10 @@ function oe({ node: e }) {
 			},
 			children: /* @__PURE__ */ S("button", {
 				type: "button",
-				onClick: () => i(e.path),
+				onClick: () => r(e.path),
 				className: "flexi-group-toggle",
 				children: [
-					x(s ? r : a, { className: "flexi-icon-md flexi-icon-muted" }),
+					x(a ? d : p, { className: "flexi-icon-md flexi-icon-muted" }),
 					/* @__PURE__ */ x("span", {
 						className: "flexi-group-value",
 						children: e.groupValue
@@ -285,27 +285,27 @@ function oe({ node: e }) {
 				]
 			})
 		}), /* @__PURE__ */ x("td", {
-			colSpan: Math.max(1, o - 1),
+			colSpan: Math.max(1, i - 1),
 			className: "flexi-group-filler"
 		})]
 	});
 }
-function se({ record: e, rowIndex: t, className: n }) {
-	let { rowHeight: r, hasGroups: i, hasActions: a, actions: o, onRowClick: s, visibleLeafColumns: c, pinnedColumns: l, pinOffsets: u, rowSpanColumns: d, rowSpanInfo: f } = T(), p = f.get(t);
+function R({ record: e, rowIndex: t, className: n }) {
+	let { rowHeight: r, hasGroups: i, hasActions: a, actions: o, onRowClick: s, visibleLeafColumns: c, pinnedColumns: l, pinOffsets: u, rowSpanColumns: d, rowSpanInfo: f } = E(), p = f.get(t);
 	return /* @__PURE__ */ S("tr", {
-		className: E("flexi-row", s && "flexi-row--clickable", n),
+		className: D("flexi-row", s && "flexi-row--clickable", n),
 		style: { height: r },
 		onClick: s ? (n) => s(e, t, n) : void 0,
 		children: [
-			i && /* @__PURE__ */ x(ae, {}),
+			i && /* @__PURE__ */ x(I, {}),
 			c.map((t) => {
 				let n = d?.includes(t.key) ? p?.[t.key] : void 0;
 				if (n === "skip") return null;
 				let r = e[t.key];
 				return /* @__PURE__ */ x("td", {
 					rowSpan: typeof n == "number" ? n : void 0,
-					className: E("flexi-cell", !!l[t.key] && "flexi-cell--pinned", t.className),
-					style: I(u, t.key, !1, t.style),
+					className: D("flexi-cell", !!l[t.key] && "flexi-cell--pinned", t.className),
+					style: F(u, t.key, !1, t.style),
 					children: t.render ? t.render(r, e) : /* @__PURE__ */ x("span", {
 						className: "flexi-cell-text",
 						children: r
@@ -316,22 +316,22 @@ function se({ record: e, rowIndex: t, className: n }) {
 		]
 	});
 }
-function R({ record: e, index: t, className: n }) {
-	let { hasGroups: r, hasActions: i, actions: a, pinnedBottomRowData: o, visibleLeafColumns: s, pinnedColumns: c, pinOffsets: l } = T(), u = {
+function ce({ record: e, index: t, className: n }) {
+	let { hasGroups: r, hasActions: i, actions: a, pinnedBottomRowData: o, visibleLeafColumns: s, pinnedColumns: c, pinOffsets: l } = E(), u = {
 		position: "sticky",
 		bottom: `${(o.length - 1 - t) * 48}px`,
 		zIndex: 45
 	};
 	return /* @__PURE__ */ S("tr", {
-		className: E("flexi-row", "flexi-row--pinned-bottom", n),
+		className: D("flexi-row", "flexi-row--pinned-bottom", n),
 		style: u,
 		children: [
-			r && /* @__PURE__ */ x(ae, {}),
+			r && /* @__PURE__ */ x(I, {}),
 			s.map((t) => {
 				let n = e[t.key], r = t.pinnedRender ?? t.render;
 				return /* @__PURE__ */ x("td", {
-					className: E("flexi-cell", !!c[t.key] && "flexi-cell--pinned", t.className),
-					style: I(l, t.key, !1, t.style),
+					className: D("flexi-cell", !!c[t.key] && "flexi-cell--pinned", t.className),
+					style: F(l, t.key, !1, t.style),
 					children: r ? r(n, e) : /* @__PURE__ */ x("span", {
 						className: "flexi-cell-text",
 						children: n
@@ -344,11 +344,11 @@ function R({ record: e, index: t, className: n }) {
 }
 //#endregion
 //#region src/DataTable/components/PinnedBottomBody.tsx
-function ce() {
-	let { pinnedBottomRowData: e, pinnedRowClassName: t } = T();
+function le() {
+	let { pinnedBottomRowData: e, pinnedRowClassName: t } = E();
 	return e.length === 0 ? null : /* @__PURE__ */ x("tbody", {
 		className: "flexi-tbody flexi-tbody--pinned-bottom",
-		children: e.map((e, n) => /* @__PURE__ */ x(R, {
+		children: e.map((e, n) => /* @__PURE__ */ x(ce, {
 			record: e,
 			index: n,
 			className: typeof t == "function" ? t(e, n) : t
@@ -357,21 +357,21 @@ function ce() {
 }
 //#endregion
 //#region src/DataTable/components/SettingsMenu.tsx
-function le() {
-	let { settingsMenu: e } = T();
+function ue() {
+	let { settingsMenu: e } = E();
 	return /* @__PURE__ */ x("button", {
 		type: "button",
 		ref: e.buttonRef,
 		onClick: (t) => {
 			t.stopPropagation(), e.toggle();
 		},
-		className: E("flexi-icon-btn", e.isOpen && "flexi-settings-btn--active"),
+		className: D("flexi-icon-btn", e.isOpen && "flexi-settings-btn--active"),
 		title: "Grid display settings",
-		children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
+		children: /* @__PURE__ */ x(y, { className: "flexi-icon-sm" })
 	});
 }
-function ue() {
-	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, showGroupBy: i, toggleShowGroupBy: a, initialLeafColumns: o, hiddenColumns: s, toggleColumnVisibility: c, resetControlPanelDefaults: l } = T(), u = e.current;
+function z() {
+	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, showGroupBy: i, toggleShowGroupBy: a, initialLeafColumns: o, hiddenColumns: s, toggleColumnVisibility: c, resetControlPanelDefaults: l } = E(), u = e.current;
 	return !t.isOpen || !t.position || !u ? null : C(/* @__PURE__ */ S("div", {
 		ref: t.menuRef,
 		className: "flexi-settings-menu",
@@ -439,44 +439,44 @@ function ue() {
 				onClick: l,
 				className: "flexi-settings-reset",
 				title: "Reset pin icon visibility and hidden columns to their defaults",
-				children: [/* @__PURE__ */ x(d, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
+				children: [/* @__PURE__ */ x(v, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
 			})
 		]
 	}), u);
 }
 //#endregion
 //#region src/DataTable/utils/records.ts
-var z = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], B = (e, t) => {
+var B = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], V = (e, t) => {
 	let n = typeof t == "function" ? t(e) : e[t];
 	return n == null ? void 0 : String(n);
-}, V = (e, t, n) => {
+}, H = (e, t, n) => {
 	if (!n) return;
 	let r;
 	for (let i in n) n[i](e, t) && (r = r ? `${r} ${i}` : i);
 	return r;
-}, de = (e, t, n) => {
-	let r = e.map((e) => z(e, t, n));
+}, U = (e, t, n) => {
+	let r = e.map((e) => B(e, t, n));
 	return Array.from(new Set(r)).filter((e) => e != null);
-}, fe = (e, t, n) => {
+}, de = (e, t, n) => {
 	let r = Object.entries(t).filter(([, e]) => e && e.length > 0);
-	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(z(e, t, n.get(t)))));
-}, H = (e) => e == null || typeof e == "number" && Number.isNaN(e), pe = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
+	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(B(e, t, n.get(t)))));
+}, W = (e) => e == null || typeof e == "number" && Number.isNaN(e), G = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
 	numeric: !0,
 	sensitivity: "base"
-}), me = (e, t, n, r) => [...e].sort((e, i) => {
-	let a = z(e, t, r), o = z(i, t, r);
+}), fe = (e, t, n, r) => [...e].sort((e, i) => {
+	let a = B(e, t, r), o = B(i, t, r);
 	if (a === o) return 0;
-	let s = H(a), c = H(o);
+	let s = W(a), c = W(o);
 	if (s && c) return 0;
 	if (s) return 1;
 	if (c) return -1;
-	let l = pe(a, o);
+	let l = G(a, o);
 	return n === "asc" ? l : -l;
 });
 //#endregion
 //#region src/DataTable/components/TableBody.tsx
-function U() {
-	let { isLoading: e, visibleRows: t, startIndex: n, totalRowCount: r, topSpacerHeight: i, bottomSpacerHeight: a, totalColumnsCount: o, rowKey: s, rowClassRules: c } = T(), l = Math.max(1, o);
+function pe() {
+	let { isLoading: e, visibleRows: t, startIndex: n, totalRowCount: r, topSpacerHeight: i, bottomSpacerHeight: a, totalColumnsCount: o, rowKey: s, rowClassRules: c } = E(), l = Math.max(1, o);
 	return e || r === 0 ? /* @__PURE__ */ x("tbody", {
 		className: "flexi-tbody",
 		children: /* @__PURE__ */ x("tr", { children: /* @__PURE__ */ x("td", {
@@ -501,11 +501,11 @@ function U() {
 			}),
 			t.map((e, t) => {
 				let r = n + t;
-				return e.kind === "group" ? /* @__PURE__ */ x(oe, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(se, {
+				return e.kind === "group" ? /* @__PURE__ */ x(se, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(R, {
 					record: e.record,
 					rowIndex: r,
-					className: V(e.record, r, c)
-				}, B(e.record, s) ?? `row-${r}`);
+					className: H(e.record, r, c)
+				}, V(e.record, s) ?? `row-${r}`);
 			}),
 			a > 0 && /* @__PURE__ */ x("tr", {
 				"aria-hidden": "true",
@@ -524,21 +524,21 @@ function U() {
 }
 //#endregion
 //#region src/DataTable/components/TableColGroup.tsx
-function he() {
-	let { hasGroups: e, hasActions: t, visibleLeafColumns: n, columnWidths: r } = T();
+function me() {
+	let { hasGroups: e, hasActions: t, visibleLeafColumns: n, columnWidths: r } = E();
 	return /* @__PURE__ */ S("colgroup", { children: [
 		e && /* @__PURE__ */ x("col", { style: { width: "48px" } }),
 		n.map((e) => /* @__PURE__ */ x("col", { style: {
 			...e.style,
-			width: F(e, r)
+			width: P(e, r)
 		} }, e.key)),
 		t && /* @__PURE__ */ x("col", { style: { width: "100px" } })
 	] });
 }
 //#endregion
 //#region src/DataTable/components/FilterDropdown.tsx
-function ge({ columnKey: e }) {
-	let { gridRootRef: t, filters: n } = T(), r = t.current, { filterPosition: i } = n;
+function he({ columnKey: e }) {
+	let { gridRootRef: t, filters: n } = E(), r = t.current, { filterPosition: i } = n;
 	if (!r || !i) return null;
 	let a = n.selectedFilters[e], o = (a?.length || 0) > 0, s = n.filteredUniqueValues;
 	return C(/* @__PURE__ */ S("div", {
@@ -593,57 +593,57 @@ function ge({ columnKey: e }) {
 }
 //#endregion
 //#region src/DataTable/components/HeaderCell.tsx
-function _e({ col: r, rowSpan: i, colSpan: a }) {
-	let { groupBy: o, pinnedColumns: s, pinOffsets: d, displayPinnedIcon: f, togglePin: p, sortState: m, handleSort: h, filters: g, handleDragStart: _, handleDragEnd: v, handleDrop: y, startResize: b } = T(), C = s[r.key], w = !!C, ee = (g.selectedFilters[r.key]?.length || 0) > 0, D = !r.children || r.children.length === 0, O = m.key === r.key, te = o && D, k = D && r.resizable !== !1, A = !!r.sortable && D;
+function ge({ col: e, rowSpan: t, colSpan: n }) {
+	let { groupBy: r, pinnedColumns: i, pinOffsets: a, displayPinnedIcon: o, togglePin: s, sortState: d, handleSort: f, filters: p, handleDragStart: m, handleDragEnd: h, handleDrop: v, startResize: y } = E(), b = i[e.key], C = !!b, w = (p.selectedFilters[e.key]?.length || 0) > 0, T = !e.children || e.children.length === 0, O = d.key === e.key, te = r && T, ne = T && e.resizable !== !1, k = !!e.sortable && T;
 	return /* @__PURE__ */ S("th", {
-		rowSpan: i,
-		colSpan: a,
+		rowSpan: t,
+		colSpan: n,
 		draggable: !0,
-		onDragStart: (e) => _(e, r.key, D),
-		onDragEnd: v,
+		onDragStart: (t) => m(t, e.key, T),
+		onDragEnd: h,
 		onDragOver: (e) => e.preventDefault(),
-		onDrop: (e) => y(e, r.key),
-		className: E("flexi-th", "flexi-th--draggable", te && "flexi-th--group-draggable", w && "flexi-th--pinned", r.className, r.headerClassName),
-		style: I(d, r.key, !0, r.headerStyle),
+		onDrop: (t) => v(t, e.key),
+		className: D("flexi-th", "flexi-th--draggable", te && "flexi-th--group-draggable", C && "flexi-th--pinned", e.className, e.headerClassName),
+		style: F(a, e.key, !0, e.headerStyle),
 		children: [/* @__PURE__ */ S("div", {
 			className: "flexi-th-inner",
 			children: [
 				/* @__PURE__ */ S("div", {
-					className: E("flexi-th-label", A && "flexi-th-label--sortable"),
-					onClick: () => A && h(r.key),
+					className: D("flexi-th-label", k && "flexi-th-label--sortable"),
+					onClick: () => k && f(e.key),
 					children: [/* @__PURE__ */ x("span", {
 						className: "flexi-th-text",
-						children: r.header
-					}), A && /* @__PURE__ */ x("span", {
-						className: E("flexi-sort-icon", O && "flexi-sort-icon--active"),
-						children: O && m.direction === "asc" ? /* @__PURE__ */ x(t, { className: "flexi-icon-sm" }) : O && m.direction === "desc" ? /* @__PURE__ */ x(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(n, { className: "flexi-icon-sm" })
+						children: e.header
+					}), k && /* @__PURE__ */ x("span", {
+						className: D("flexi-sort-icon", O && "flexi-sort-icon--active"),
+						children: O && d.direction === "asc" ? /* @__PURE__ */ x(l, { className: "flexi-icon-sm" }) : O && d.direction === "desc" ? /* @__PURE__ */ x(c, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(u, { className: "flexi-icon-sm" })
 					})]
 				}),
 				/* @__PURE__ */ S("div", {
 					className: "flexi-th-actions",
-					children: [D && r.filterable && /* @__PURE__ */ x("button", {
+					children: [T && e.filterable && /* @__PURE__ */ x("button", {
 						type: "button",
-						ref: (e) => g.registerFilterButton(r.key, e),
-						onClick: (e) => {
-							e.stopPropagation(), g.toggleFilterDropdown(r.key);
+						ref: (t) => p.registerFilterButton(e.key, t),
+						onClick: (t) => {
+							t.stopPropagation(), p.toggleFilterDropdown(e.key);
 						},
-						className: E("flexi-icon-btn", "flexi-filter-btn", ee && "flexi-filter-btn--active"),
-						children: /* @__PURE__ */ x(c, { className: "flexi-icon-sm" })
-					}), D && f && /* @__PURE__ */ x("button", {
+						className: D("flexi-icon-btn", "flexi-filter-btn", w && "flexi-filter-btn--active"),
+						children: /* @__PURE__ */ x(g, { className: "flexi-icon-sm" })
+					}), T && o && /* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: (e) => {
-							e.stopPropagation(), p(r.key);
+						onClick: (t) => {
+							t.stopPropagation(), s(e.key);
 						},
-						className: E("flexi-icon-btn", "flexi-pin-btn", w && "flexi-pin-btn--pinned"),
-						title: C === "left" ? "Pinned left (click to pin right)" : C === "right" ? "Pinned right (click to unpin)" : "Pin column left",
-						children: x(w ? u : l, { className: "flexi-icon-sm" })
+						className: D("flexi-icon-btn", "flexi-pin-btn", C && "flexi-pin-btn--pinned"),
+						title: b === "left" ? "Pinned left (click to pin right)" : b === "right" ? "Pinned right (click to unpin)" : "Pin column left",
+						children: x(C ? _ : ee, { className: "flexi-icon-sm" })
 					})]
 				}),
-				D && g.activeFilterKey === r.key && /* @__PURE__ */ x(ge, { columnKey: r.key })
+				T && p.activeFilterKey === e.key && /* @__PURE__ */ x(he, { columnKey: e.key })
 			]
-		}), k && /* @__PURE__ */ x("div", {
+		}), ne && /* @__PURE__ */ x("div", {
 			className: "flexi-th-resizer",
-			onMouseDown: (e) => b(e, r),
+			onMouseDown: (t) => y(t, e),
 			onClick: (e) => e.stopPropagation(),
 			onDragStart: (e) => e.preventDefault()
 		})]
@@ -651,8 +651,8 @@ function _e({ col: r, rowSpan: i, colSpan: a }) {
 }
 //#endregion
 //#region src/DataTable/components/TableHeader.tsx
-function ve() {
-	let { headerRows: e, hasGroups: t } = T();
+function K() {
+	let { headerRows: e, hasGroups: t } = E();
 	return /* @__PURE__ */ x("thead", {
 		className: "flexi-thead",
 		children: e.map((n, r) => /* @__PURE__ */ S("tr", {
@@ -667,7 +667,7 @@ function ve() {
 					zIndex: 35,
 					backgroundColor: "rgb(248, 250, 252)"
 				}
-			}), n.map(({ col: e, rowSpan: t, colSpan: n }) => /* @__PURE__ */ x(_e, {
+			}), n.map(({ col: e, rowSpan: t, colSpan: n }) => /* @__PURE__ */ x(ge, {
 				col: e,
 				rowSpan: t,
 				colSpan: n
@@ -677,14 +677,14 @@ function ve() {
 }
 //#endregion
 //#region src/DataTable/utils/grouping.ts
-var ye = (e, t, n, r = 0, i = "") => {
+var _e = (e, t, n, r = 0, i = "") => {
 	if (r >= t.length) return e.map((e) => ({
 		kind: "record",
 		record: e
 	}));
 	let a = t[r], o = n.get(a), s = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
-		let t = String(z(e, a, o) ?? "N/A"), n = s.get(t);
+		let t = String(B(e, a, o) ?? "N/A"), n = s.get(t);
 		n ? n.push(e) : s.set(t, [e]);
 	}), Array.from(s.entries()).sort(([e], [t]) => e.localeCompare(t, void 0, {
 		numeric: !0,
@@ -697,18 +697,18 @@ var ye = (e, t, n, r = 0, i = "") => {
 			groupValue: e,
 			path: s,
 			depth: r,
-			children: ye(o, t, n, r + 1, s),
+			children: _e(o, t, n, r + 1, s),
 			totalItemsCount: o.length
 		};
 	});
-}, be = (e, t) => {
+}, ve = (e, t) => {
 	let n = [], r = (e) => {
 		e.forEach((e) => {
 			n.push(e), e.kind === "group" && t[e.path] !== !1 && r(e.children);
 		});
 	};
 	return r(e), n;
-}, xe = (e, t, n, r) => {
+}, ye = (e, t, n, r) => {
 	let i = /* @__PURE__ */ new Map();
 	if (!t || t.length === 0) return i;
 	let a = e.map(() => t.map(() => !0)), o = null;
@@ -723,7 +723,7 @@ var ye = (e, t, n, r = 0, i = "") => {
 			let e = !0;
 			for (let o = 0; o < t.length; o++) {
 				let c = t[o], l = n.get(c);
-				e && z(i.record, c, l) === z(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
+				e && B(i.record, c, l) === B(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
 			}
 		}
 		o = r;
@@ -751,16 +751,16 @@ var ye = (e, t, n, r = 0, i = "") => {
 };
 //#endregion
 //#region src/DataTable/hooks/useAnchoredPosition.ts
-function W({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
-	let [a, o] = b(null), s = y(r), c = y(i);
-	return s.current = r, c.current = i, _(() => {
+function q({ active: e, resetKey: t, rootRef: n, getAnchor: i, compute: a }) {
+	let [c, l] = s(null), u = o(i), d = o(a);
+	return u.current = i, d.current = a, r(() => {
 		if (!e) {
-			o(null);
+			l(null);
 			return;
 		}
 		let t = () => {
-			let e = s.current(), t = n.current;
-			!e || !t || o(c.current(e.getBoundingClientRect(), t.getBoundingClientRect()));
+			let e = u.current(), t = n.current;
+			!e || !t || l(d.current(e.getBoundingClientRect(), t.getBoundingClientRect()));
 		};
 		return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
 			window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
@@ -769,237 +769,237 @@ function W({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
 		e,
 		t,
 		n
-	]), a;
+	]), c;
 }
 //#endregion
 //#region src/DataTable/hooks/useClickOutside.ts
-function G(e, t, n) {
-	let r = y(t), i = y(n);
-	r.current = t, i.current = n, _(() => {
+function J(e, t, n) {
+	let i = o(t), a = o(n);
+	i.current = t, a.current = n, r(() => {
 		if (!e) return;
 		let t = (e) => {
-			let t = e.target, [n, ...a] = r.current();
-			n && (n.contains(t) || a.some((e) => e?.contains(t)) || i.current());
+			let t = e.target, [n, ...r] = i.current();
+			n && (n.contains(t) || r.some((e) => e?.contains(t)) || a.current());
 		};
 		return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
 	}, [e]);
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnFilters.ts
-function Se({ data: e, columnsByKey: t, gridRootRef: n }) {
-	let [r, i] = b(null), [a, o] = b({}), [s, c] = b(""), l = y(/* @__PURE__ */ new Map()), u = y(null), d = h((e, t) => {
-		t ? l.current.set(e, t) : l.current.delete(e);
-	}, []), f = h(() => {
-		i(null), c("");
-	}, []), p = h((e) => {
-		c(""), i((t) => t === e ? null : e);
+function be({ data: e, columnsByKey: n, gridRootRef: r }) {
+	let [i, c] = s(null), [l, u] = s({}), [d, f] = s(""), p = o(/* @__PURE__ */ new Map()), m = o(null), h = t((e, t) => {
+		t ? p.current.set(e, t) : p.current.delete(e);
+	}, []), g = t(() => {
+		c(null), f("");
+	}, []), ee = t((e) => {
+		f(""), c((t) => t === e ? null : e);
 	}, []);
-	G(r !== null, () => [u.current, r ? l.current.get(r) : null], f);
-	let m = W({
-		active: r !== null,
-		resetKey: r,
-		rootRef: n,
-		getAnchor: () => r ? l.current.get(r) : null,
+	J(i !== null, () => [m.current, i ? p.current.get(i) : null], g);
+	let _ = q({
+		active: i !== null,
+		resetKey: i,
+		rootRef: r,
+		getAnchor: () => i ? p.current.get(i) : null,
 		compute: (e, t) => ({
 			top: e.bottom - t.top + 4,
 			left: e.left - t.left
 		})
-	}), g = h((e, t) => {
-		o((n) => {
+	}), v = t((e, t) => {
+		u((n) => {
 			let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
 				...n,
 				[e]: i
 			};
 			return i.length === 0 && delete a[e], a;
 		});
-	}, []), _ = h((e) => {
-		o((t) => {
+	}, []), y = t((e) => {
+		u((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), x = v(() => r ? de(e, r, t.get(r)) : [], [
+	}, []), b = a(() => i ? U(e, i, n.get(i)) : [], [
 		e,
-		r,
-		t
+		i,
+		n
 	]);
 	return {
-		activeFilterKey: r,
-		selectedFilters: a,
-		filterSearchQuery: s,
-		setFilterSearchQuery: c,
-		filterPosition: m,
-		dropdownRef: u,
-		filteredUniqueValues: v(() => {
-			if (!s.trim()) return x;
-			let e = s.toLowerCase();
-			return x.filter((t) => String(t).toLowerCase().includes(e));
-		}, [x, s]),
-		registerFilterButton: d,
-		toggleFilterDropdown: p,
-		handleFilterChange: g,
-		clearFilter: _
+		activeFilterKey: i,
+		selectedFilters: l,
+		filterSearchQuery: d,
+		setFilterSearchQuery: f,
+		filterPosition: _,
+		dropdownRef: m,
+		filteredUniqueValues: a(() => {
+			if (!d.trim()) return b;
+			let e = d.toLowerCase();
+			return b.filter((t) => String(t).toLowerCase().includes(e));
+		}, [b, d]),
+		registerFilterButton: h,
+		toggleFilterDropdown: ee,
+		handleFilterChange: v,
+		clearFilter: y
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnReorder.ts
-function Ce({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r }) {
-	let [i, a] = b({}), o = y(null), s = v(() => N(e, t, i), [
+function xe({ columns: e, pinnedColumns: n, isResizingRef: r, onColumnReorder: i }) {
+	let [c, l] = s({}), u = o(null), d = a(() => M(e, n, c), [
 		e,
-		t,
-		i
+		n,
+		c
 	]);
 	return {
-		reorderedColumns: s,
-		handleDragStart: h((e, t, r) => {
-			if (n.current) {
+		reorderedColumns: d,
+		handleDragStart: t((e, t, n) => {
+			if (r.current) {
 				e.preventDefault();
 				return;
 			}
-			o.current = t, r && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
-		}, [n]),
-		handleDragEnd: h(() => {
-			o.current = null;
+			u.current = t, n && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+		}, [r]),
+		handleDragEnd: t(() => {
+			u.current = null;
 		}, []),
-		handleDrop: h((n, c) => {
-			n.preventDefault(), n.stopPropagation();
-			let l = o.current;
-			if (o.current = null, !l || l === c) return;
-			let u = P(s, l, c);
-			if (!u) return;
-			let d = u.map((e) => e.key), f = d.indexOf(l), p = d.indexOf(c);
-			d.splice(p, 0, d.splice(f, 1)[0]);
-			let m = { ...i };
-			d.forEach((e, t) => {
+		handleDrop: t((t, r) => {
+			t.preventDefault(), t.stopPropagation();
+			let a = u.current;
+			if (u.current = null, !a || a === r) return;
+			let o = N(d, a, r);
+			if (!o) return;
+			let s = o.map((e) => e.key), f = s.indexOf(a), p = s.indexOf(r);
+			s.splice(p, 0, s.splice(f, 1)[0]);
+			let m = { ...c };
+			s.forEach((e, t) => {
 				m[e] = t;
-			}), a(m), r && r(j(N(e, t, m)).map((e) => e.key));
+			}), l(m), i && i(A(M(e, n, m)).map((e) => e.key));
 		}, [
-			s,
-			i,
+			d,
+			c,
 			e,
-			t,
-			r
+			n,
+			i
 		])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnResize.ts
-function we(e) {
-	let [t, n] = b({}), r = y(!1), i = y(null), a = y(e);
-	return a.current = e, _(() => () => i.current?.(), []), {
-		columnWidths: t,
-		isResizingRef: r,
-		startResize: h((e, o) => {
-			e.preventDefault(), e.stopPropagation(), i.current?.(), r.current = !0;
-			let s = e.clientX, c = F(o, t), l = o.minWidth ?? 60, u = o.maxWidth, d = t[o.key], f = (e) => {
-				let t = Math.max(l, c + (e.clientX - s));
-				u && (t = Math.min(u, t)), d = t, n((e) => e[o.key] === t ? e : {
+function Se(e) {
+	let [n, i] = s({}), a = o(!1), c = o(null), l = o(e);
+	return l.current = e, r(() => () => c.current?.(), []), {
+		columnWidths: n,
+		isResizingRef: a,
+		startResize: t((e, t) => {
+			e.preventDefault(), e.stopPropagation(), c.current?.(), a.current = !0;
+			let r = e.clientX, o = P(t, n), s = t.minWidth ?? 60, u = t.maxWidth, d = n[t.key], f = (e) => {
+				let n = Math.max(s, o + (e.clientX - r));
+				u && (n = Math.min(u, n)), d = n, i((e) => e[t.key] === n ? e : {
 					...e,
-					[o.key]: t
+					[t.key]: n
 				});
 			}, p = () => {
-				window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", m), i.current = null;
+				window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", m), c.current = null;
 			}, m = () => {
 				p(), requestAnimationFrame(() => {
-					r.current = !1;
-				}), d !== void 0 && a.current?.(o.key, d);
+					a.current = !1;
+				}), d !== void 0 && l.current?.(t.key, d);
 			};
-			window.addEventListener("mousemove", f), window.addEventListener("mouseup", m), i.current = () => {
-				p(), r.current = !1;
+			window.addEventListener("mousemove", f), window.addEventListener("mouseup", m), c.current = () => {
+				p(), a.current = !1;
 			};
-		}, [t])
+		}, [n])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnVisibility.ts
-function Te({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisibilityChange: n }) {
-	let [r, i] = b(e), [a, o] = b(t);
+function Ce({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: n, onColumnVisibilityChange: r }) {
+	let [i, a] = s(e), [o, c] = s(n);
 	return {
-		hiddenColumns: r,
-		displayPinnedIcon: a,
-		toggleColumnVisibility: h((e) => {
-			let t = r.includes(e) ? r.filter((t) => t !== e) : [...r, e];
-			i(t), n?.(t);
-		}, [r, n]),
-		toggleDisplayPinnedIcon: h(() => o((e) => !e), []),
-		resetControlPanelDefaults: h(() => {
-			o(t), i(e), n?.(e);
+		hiddenColumns: i,
+		displayPinnedIcon: o,
+		toggleColumnVisibility: t((e) => {
+			let t = i.includes(e) ? i.filter((t) => t !== e) : [...i, e];
+			a(t), r?.(t);
+		}, [i, r]),
+		toggleDisplayPinnedIcon: t(() => c((e) => !e), []),
+		resetControlPanelDefaults: t(() => {
+			c(n), a(e), r?.(e);
 		}, [
-			t,
+			n,
 			e,
-			n
+			r
 		])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/usePagination.ts
-function Ee({ items: e, enabled: t, defaultPageSize: n, onPageChange: r, resetOn: i }) {
-	let [a, o] = b(1), [s, c] = b(Math.max(1, Math.floor(n) || 1)), l = e.length, u = t ? Math.max(1, Math.ceil(l / s)) : 1;
-	return _(() => {
-		o(1);
+function we({ items: e, enabled: n, defaultPageSize: i, onPageChange: o, resetOn: c }) {
+	let [l, u] = s(1), [d, f] = s(Math.max(1, Math.floor(i) || 1)), p = e.length, m = n ? Math.max(1, Math.ceil(p / d)) : 1;
+	return r(() => {
+		u(1);
 	}, [
-		...i,
-		s,
-		t
-	]), _(() => {
-		a > u && o(u);
-	}, [a, u]), {
-		currentPage: a,
-		pageSize: s,
-		totalPages: u,
-		totalCount: l,
-		pagedItems: v(() => {
-			if (!t) return e;
-			let n = (a - 1) * s;
-			return e.slice(n, n + s);
+		...c,
+		d,
+		n
+	]), r(() => {
+		l > m && u(m);
+	}, [l, m]), {
+		currentPage: l,
+		pageSize: d,
+		totalPages: m,
+		totalCount: p,
+		pagedItems: a(() => {
+			if (!n) return e;
+			let t = (l - 1) * d;
+			return e.slice(t, t + d);
 		}, [
 			e,
-			t,
-			a,
-			s
+			n,
+			l,
+			d
 		]),
-		goToPage: h((e) => {
-			let t = Math.min(Math.max(1, e), u);
-			o(t), r?.(t, s);
+		goToPage: t((e) => {
+			let t = Math.min(Math.max(1, e), m);
+			u(t), o?.(t, d);
 		}, [
-			u,
-			s,
-			r
+			m,
+			d,
+			o
 		]),
-		changePageSize: h((e) => {
-			c(e), o(1), r?.(1, e);
-		}, [r])
+		changePageSize: t((e) => {
+			f(e), u(1), o?.(1, e);
+		}, [o])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/usePinnedColumns.ts
-function De(e, t) {
-	let [n, r] = b(() => M(e));
+function Te(e, n) {
+	let [r, i] = s(() => ie(e));
 	return {
-		pinnedColumns: n,
-		togglePin: h((e) => {
-			let i = n[e], a = i ? i === "left" ? "right" : void 0 : "left", o = { ...n };
-			a ? o[e] = a : delete o[e], r(o), t?.(e, !!a, a);
-		}, [n, t])
+		pinnedColumns: r,
+		togglePin: t((e) => {
+			let t = r[e], a = t ? t === "left" ? "right" : void 0 : "left", o = { ...r };
+			a ? o[e] = a : delete o[e], i(o), n?.(e, !!a, a);
+		}, [r, n])
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useRowGrouping.ts
-function Oe(e, t) {
-	let [n, r] = b(e), [i, a] = b({});
+function Ee(e, n) {
+	let [r, i] = s(e), [a, o] = s({});
 	return {
-		groupedColumns: n,
-		expandedGroups: i,
-		addGroup: h((e) => {
-			if (!e || n.includes(e)) return;
-			let i = [...n, e];
-			r(i), t?.(i);
-		}, [n, t]),
-		removeGroup: h((e) => {
-			let i = n.filter((t) => t !== e);
-			r(i), a({}), t?.(i);
-		}, [n, t]),
-		toggleGroupExpansion: h((e) => {
-			a((t) => ({
+		groupedColumns: r,
+		expandedGroups: a,
+		addGroup: t((e) => {
+			if (!e || r.includes(e)) return;
+			let t = [...r, e];
+			i(t), n?.(t);
+		}, [r, n]),
+		removeGroup: t((e) => {
+			let t = r.filter((t) => t !== e);
+			i(t), o({}), n?.(t);
+		}, [r, n]),
+		toggleGroupExpansion: t((e) => {
+			o((t) => ({
 				...t,
 				[e]: t[e] === !1
 			}));
@@ -1008,35 +1008,35 @@ function Oe(e, t) {
 }
 //#endregion
 //#region src/DataTable/hooks/useSettingsMenu.ts
-function ke(e) {
-	let [t, n] = b(!1), r = y(null), i = y(null), a = h(() => n((e) => !e), []);
-	return G(t, () => [r.current, i.current], h(() => n(!1), [])), {
-		isOpen: t,
-		position: W({
-			active: t,
+function De(e) {
+	let [n, r] = s(!1), i = o(null), a = o(null), c = t(() => r((e) => !e), []);
+	return J(n, () => [i.current, a.current], t(() => r(!1), [])), {
+		isOpen: n,
+		position: q({
+			active: n,
 			rootRef: e,
-			getAnchor: () => i.current,
+			getAnchor: () => a.current,
 			compute: (e, t) => ({
 				top: e.bottom - t.top + 4,
 				right: t.right - e.right
 			})
 		}),
-		menuRef: r,
-		buttonRef: i,
-		toggle: a
+		menuRef: i,
+		buttonRef: a,
+		toggle: c
 	};
 }
 //#endregion
 //#region src/DataTable/hooks/useSorting.ts
-function Ae() {
-	let [e, t] = b({
+function Oe() {
+	let [e, n] = s({
 		key: null,
 		direction: null
 	});
 	return {
 		sortState: e,
-		handleSort: h((e) => {
-			t((t) => {
+		handleSort: t((e) => {
+			n((t) => {
 				let n = "asc";
 				return t.key === e && (t.direction === "asc" ? n = "desc" : t.direction === "desc" && (n = null)), {
 					key: n ? e : null,
@@ -1048,141 +1048,141 @@ function Ae() {
 }
 //#endregion
 //#region src/DataTable/hooks/useVirtualRows.ts
-function je({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: r }) {
-	let [i, a] = b(0), [o, s] = b(0);
-	return _(() => {
+function ke({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: i }) {
+	let [o, c] = s(0), [l, u] = s(0);
+	return r(() => {
 		let t = e.current;
 		if (!t) return;
-		let n = () => a(t.scrollTop);
-		s(t.clientHeight), a(t.scrollTop), t.addEventListener("scroll", n, { passive: !0 });
+		let n = () => c(t.scrollTop);
+		u(t.clientHeight), c(t.scrollTop), t.addEventListener("scroll", n, { passive: !0 });
 		let r;
-		return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => s(t.clientHeight)), r.observe(t)), () => {
+		return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => u(t.clientHeight)), r.observe(t)), () => {
 			t.removeEventListener("scroll", n), r?.disconnect();
 		};
-	}, [e]), v(() => {
-		if (o === 0) return {
+	}, [e]), a(() => {
+		if (l === 0 || n === "auto") return {
 			startIndex: 0,
 			endIndex: t,
 			topSpacerHeight: 0,
 			bottomSpacerHeight: 0
 		};
-		let e = n > 0 ? n : 1, a = Math.max(0, t - 1), s = Math.min(a, Math.floor(i / e)), c = Math.ceil(o / e) + 1, l = Math.max(0, s - r), u = Math.min(t, s + c + r);
+		let e = n > 0 ? n : 1, r = Math.max(0, t - 1), a = Math.min(r, Math.floor(o / e)), s = Math.ceil(l / e) + 1, c = Math.max(0, a - i), u = Math.min(t, a + s + i);
 		return {
-			startIndex: l,
+			startIndex: c,
 			endIndex: u,
-			topSpacerHeight: l * e,
+			topSpacerHeight: c * e,
 			bottomSpacerHeight: (t - u) * e
 		};
 	}, [
-		i,
 		o,
+		l,
 		t,
 		n,
-		r
+		i
 	]);
 }
 //#endregion
 //#region src/DataTable/hooks/useDataTableState.ts
-function K({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy: a = !1, defaultGroupBy: o = k, onPinChange: s, onGroupChange: c, pinnedBottomRowData: l = A, pinnedRowClassName: u, rowHeight: d = 40, overscan: f = 8, onColumnResize: p, onColumnReorder: m, rowClassRules: g, onRowClick: x, rowSpanColumns: S, controlPanel: C = !1, defaultDisplayPinnedIcon: w = !0, defaultHiddenColumns: ee = k, onColumnVisibilityChange: T, pagination: E = !1, defaultPageSize: D = 10, pageSizeOptions: O = te, onPageChange: ne }) {
-	let M = y(null), N = y(null), P = v(() => j(e), [e]), F = v(() => {
+function Y({ columns: e, data: n, rowKey: i, actions: c, isLoading: l, groupBy: u = !1, defaultGroupBy: d = k, onPinChange: f, onGroupChange: p, pinnedBottomRowData: m = re, pinnedRowClassName: h, rowHeight: g = 40, overscan: ee = 8, onColumnResize: _, onColumnReorder: v, rowClassRules: y, onRowClick: b, rowSpanColumns: x, controlPanel: S = !1, defaultDisplayPinnedIcon: C = !0, defaultHiddenColumns: w = k, onColumnVisibilityChange: T, pagination: E = !1, defaultPageSize: D = 10, pageSizeOptions: O = ne, onPageChange: te }) {
+	let j = o(null), ie = o(null), M = a(() => A(e), [e]), N = a(() => {
 		let e = /* @__PURE__ */ new Map();
-		return P.forEach((t) => e.set(t.key, t)), e;
-	}, [P]), { pinnedColumns: I, togglePin: ae } = De(P, s), { columnWidths: L, isResizingRef: oe, startResize: se } = we(p), { reorderedColumns: R, handleDragStart: ce, handleDragEnd: le, handleDrop: ue } = Ce({
+		return M.forEach((t) => e.set(t.key, t)), e;
+	}, [M]), { pinnedColumns: P, togglePin: F } = Te(M, f), { columnWidths: I, isResizingRef: L, startResize: se } = Se(_), { reorderedColumns: R, handleDragStart: ce, handleDragEnd: le, handleDrop: ue } = xe({
 		columns: e,
-		pinnedColumns: I,
-		isResizingRef: oe,
-		onColumnReorder: m
-	}), z = Te({
-		defaultHiddenColumns: ee,
-		defaultDisplayPinnedIcon: w,
+		pinnedColumns: P,
+		isResizingRef: L,
+		onColumnReorder: v
+	}), z = Ce({
+		defaultHiddenColumns: w,
+		defaultDisplayPinnedIcon: C,
 		onColumnVisibilityChange: T
-	}), { hiddenColumns: B } = z, V = Oe(o, c), { groupedColumns: de, expandedGroups: H } = V, [pe, U] = b(a);
-	_(() => U(a), [a]);
-	let he = h(() => U((e) => !e), []), { resetControlPanelDefaults: ge } = z, _e = h(() => {
-		ge(), U(a);
-	}, [ge, a]), ve = pe, W = ve ? de : k, G = W.length > 0, K = !!r, q = v(() => j(R).filter((e) => !W.includes(e.key) && !B.includes(e.key)), [
+	}), { hiddenColumns: B } = z, V = Ee(d, p), { groupedColumns: H, expandedGroups: U } = V, [W, G] = s(u);
+	r(() => G(u), [u]);
+	let pe = t(() => G((e) => !e), []), { resetControlPanelDefaults: me } = z, he = t(() => {
+		me(), G(u);
+	}, [me, u]), ge = W, K = ge ? H : k, q = K.length > 0, J = !!c, Y = a(() => A(R).filter((e) => !K.includes(e.key) && !B.includes(e.key)), [
 		R,
-		W,
+		K,
 		B
-	]), Me = v(() => re(R, W, B), [
+	]), Ae = a(() => ae(R, K, B), [
 		R,
-		W,
+		K,
 		B
-	]), Ne = v(() => ie({
-		visibleLeafColumns: q,
-		pinnedColumns: I,
-		columnWidths: L,
-		hasGroups: G,
-		hasActions: K
+	]), je = a(() => oe({
+		visibleLeafColumns: Y,
+		pinnedColumns: P,
+		columnWidths: I,
+		hasGroups: q,
+		hasActions: J
 	}), [
-		q,
+		Y,
+		P,
 		I,
-		L,
-		G,
-		K
-	]), J = Se({
-		data: t,
-		columnsByKey: F,
-		gridRootRef: M
-	}), { sortState: Y, handleSort: Pe } = Ae(), X = Ee({
-		items: v(() => {
-			let e = fe(t, J.selectedFilters, F);
-			return !Y.key || !Y.direction ? e : me(e, Y.key, Y.direction, F.get(Y.key));
+		q,
+		J
+	]), X = be({
+		data: n,
+		columnsByKey: N,
+		gridRootRef: j
+	}), { sortState: Z, handleSort: Me } = Oe(), Q = we({
+		items: a(() => {
+			let e = de(n, X.selectedFilters, N);
+			return !Z.key || !Z.direction ? e : fe(e, Z.key, Z.direction, N.get(Z.key));
 		}, [
-			t,
-			J.selectedFilters,
-			Y,
-			F
+			n,
+			X.selectedFilters,
+			Z,
+			N
 		]),
 		enabled: E,
 		defaultPageSize: D,
-		onPageChange: ne,
-		resetOn: [J.selectedFilters, Y]
-	}), Fe = v(() => ye(X.pagedItems, W, F), [
-		X.pagedItems,
-		W,
-		F
-	]), Z = v(() => be(Fe, H), [Fe, H]), Ie = Z.length, { startIndex: Q, endIndex: Le, topSpacerHeight: Re, bottomSpacerHeight: ze } = je({
-		containerRef: N,
-		totalRowCount: Ie,
-		rowHeight: d,
-		overscan: f
-	}), $ = v(() => Z.slice(Q, Le), [
-		Z,
-		Q,
-		Le
-	]), Be = v(() => xe($, S, F, Q), [
+		onPageChange: te,
+		resetOn: [X.selectedFilters, Z]
+	}), Ne = a(() => _e(Q.pagedItems, K, N), [
+		Q.pagedItems,
+		K,
+		N
+	]), Pe = a(() => ve(Ne, U), [Ne, U]), Fe = Pe.length, { startIndex: $, endIndex: Ie, topSpacerHeight: Le, bottomSpacerHeight: Re } = ke({
+		containerRef: ie,
+		totalRowCount: Fe,
+		rowHeight: g,
+		overscan: ee
+	}), ze = a(() => Pe.slice($, Ie), [
+		Pe,
 		$,
-		S,
-		F,
-		Q
-	]), Ve = ke(M), He = q.length + +!!K + +!!G;
+		Ie
+	]), Be = a(() => ye(ze, x, N, $), [
+		ze,
+		x,
+		N,
+		$
+	]), Ve = De(j), He = Y.length + +!!J + +!!q;
 	return {
-		gridRootRef: M,
-		tableWrapRef: N,
-		rowKey: n,
-		actions: r,
-		isLoading: !!i,
-		groupBy: ve,
-		showGroupBy: pe,
-		toggleShowGroupBy: he,
-		controlPanel: C,
-		rowHeight: d,
-		rowSpanColumns: S,
-		rowClassRules: g,
-		onRowClick: x,
-		pinnedBottomRowData: l,
-		pinnedRowClassName: u,
+		gridRootRef: j,
+		tableWrapRef: ie,
+		rowKey: i,
+		actions: c,
+		isLoading: !!l,
+		groupBy: ge,
+		showGroupBy: W,
+		toggleShowGroupBy: pe,
+		controlPanel: S,
+		rowHeight: g,
+		rowSpanColumns: x,
+		rowClassRules: y,
+		onRowClick: b,
+		pinnedBottomRowData: m,
+		pinnedRowClassName: h,
 		pageSizeOptions: O,
 		paginationEnabled: E,
-		initialLeafColumns: P,
-		columnsByKey: F,
-		visibleLeafColumns: q,
-		headerRows: Me,
-		pinnedColumns: I,
-		pinOffsets: Ne,
-		columnWidths: L,
-		togglePin: ae,
+		initialLeafColumns: M,
+		columnsByKey: N,
+		visibleLeafColumns: Y,
+		headerRows: Ae,
+		pinnedColumns: P,
+		pinOffsets: je,
+		columnWidths: I,
+		togglePin: F,
 		startResize: se,
 		handleDragStart: ce,
 		handleDragEnd: le,
@@ -1191,70 +1191,101 @@ function K({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy:
 		displayPinnedIcon: z.displayPinnedIcon,
 		toggleColumnVisibility: z.toggleColumnVisibility,
 		toggleDisplayPinnedIcon: z.toggleDisplayPinnedIcon,
-		resetControlPanelDefaults: _e,
+		resetControlPanelDefaults: he,
 		settingsMenu: Ve,
-		groupedColumns: de,
-		expandedGroups: H,
+		groupedColumns: H,
+		expandedGroups: U,
 		addGroup: V.addGroup,
 		removeGroup: V.removeGroup,
 		toggleGroupExpansion: V.toggleGroupExpansion,
-		hasGroups: G,
-		hasActions: K,
-		sortState: Y,
-		handleSort: Pe,
-		filters: J,
-		currentPage: X.currentPage,
-		pageSize: X.pageSize,
-		totalPages: X.totalPages,
-		totalCount: X.totalCount,
-		goToPage: X.goToPage,
-		changePageSize: X.changePageSize,
-		visibleRows: $,
-		startIndex: Q,
-		totalRowCount: Ie,
-		topSpacerHeight: Re,
-		bottomSpacerHeight: ze,
+		hasGroups: q,
+		hasActions: J,
+		sortState: Z,
+		handleSort: Me,
+		filters: X,
+		currentPage: Q.currentPage,
+		pageSize: Q.pageSize,
+		totalPages: Q.totalPages,
+		totalCount: Q.totalCount,
+		goToPage: Q.goToPage,
+		changePageSize: Q.changePageSize,
+		visibleRows: ze,
+		startIndex: $,
+		totalRowCount: Fe,
+		topSpacerHeight: Le,
+		bottomSpacerHeight: Re,
 		rowSpanInfo: Be,
 		totalColumnsCount: He
 	};
 }
 //#endregion
 //#region src/DataTable/DataTable.tsx
-function q(e) {
-	let t = K(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e;
-	return /* @__PURE__ */ x(ee, {
+var Ae = [
+	"height",
+	"maxHeight",
+	"minHeight"
+];
+function je(e, t) {
+	let [n, r] = s(0);
+	return i(() => {
+		let n = t ? e.current?.firstElementChild : null;
+		if (!(n instanceof HTMLElement)) {
+			r(0);
+			return;
+		}
+		let i = () => {
+			let e = parseFloat(getComputedStyle(n.nextElementSibling ?? n).marginTop) || 0;
+			r(n.offsetHeight + e);
+		};
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(n), () => a.disconnect();
+	}, [e, t]), n;
+}
+function X(e, t) {
+	if (!e || t <= 0) return e;
+	let n = { ...e };
+	for (let r of Ae) {
+		let i = e[r];
+		i == null || i === "" || i === "auto" || i === "none" || (n[r] = `calc(${typeof i == "number" ? `${i}px` : String(i)} - ${t}px)`);
+	}
+	return n;
+}
+function Z(e) {
+	let t = Y(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e, a = X(n, je(t.gridRootRef, !!t.groupBy));
+	return /* @__PURE__ */ x(T, {
 		value: t,
 		children: /* @__PURE__ */ S("div", {
 			ref: t.gridRootRef,
 			className: "flexi-root",
 			children: [
-				t.groupBy && /* @__PURE__ */ x(D, {}),
+				t.groupBy && /* @__PURE__ */ x(O, {}),
 				/* @__PURE__ */ S("div", {
 					ref: t.tableWrapRef,
 					className: "flexi-table-wrap",
-					style: n,
+					style: a,
 					children: [t.controlPanel && /* @__PURE__ */ x("div", {
 						className: "flexi-settings-corner",
 						children: /* @__PURE__ */ x("div", {
 							className: "flexi-settings-corner-inner",
-							children: /* @__PURE__ */ x(le, {})
+							children: /* @__PURE__ */ x(ue, {})
 						})
 					}), /* @__PURE__ */ S("table", {
-						className: E("flexi-table", i && "flexi-table--bordered"),
+						className: D("flexi-table", i && "flexi-table--bordered"),
 						style: r,
 						children: [
-							/* @__PURE__ */ x(he, {}),
-							/* @__PURE__ */ x(ve, {}),
-							/* @__PURE__ */ x(U, {}),
-							/* @__PURE__ */ x(ce, {})
+							/* @__PURE__ */ x(me, {}),
+							/* @__PURE__ */ x(K, {}),
+							/* @__PURE__ */ x(pe, {}),
+							/* @__PURE__ */ x(le, {})
 						]
 					})]
 				}),
-				/* @__PURE__ */ x(ue, {}),
-				t.paginationEnabled && /* @__PURE__ */ x(O, {})
+				/* @__PURE__ */ x(z, {}),
+				t.paginationEnabled && /* @__PURE__ */ x(te, {})
 			]
 		})
 	});
 }
 //#endregion
-export { q as DataTable };
+export { Z as DataTable };