@gp-grid/react 0.7.2

package/dist/index.js

@@ -0,0 +1,1662 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { GridCore, GridCore as GridCore$1, buildCellClasses, calculateScaledColumnPositions, createClientDataSource, createClientDataSource as createClientDataSource$1, createDataSourceFromArray, createDataSourceFromArray as createDataSourceFromArray$1, createMutableClientDataSource, createServerDataSource, getTotalWidth, injectStyles, isCellActive, isCellEditing, isCellInFillPreview, isCellSelected } from "gp-grid-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/TextFilterContent.tsx
+const MAX_VALUES_FOR_LIST = 100;
+const OPERATORS$2 = [
+	{
+		value: "contains",
+		label: "Contains"
+	},
+	{
+		value: "notContains",
+		label: "Does not contain"
+	},
+	{
+		value: "equals",
+		label: "Equals"
+	},
+	{
+		value: "notEquals",
+		label: "Does not equal"
+	},
+	{
+		value: "startsWith",
+		label: "Starts with"
+	},
+	{
+		value: "endsWith",
+		label: "Ends with"
+	},
+	{
+		value: "blank",
+		label: "Is blank"
+	},
+	{
+		value: "notBlank",
+		label: "Is not blank"
+	}
+];
+function TextFilterContent({ distinctValues, currentFilter, onApply, onClose }) {
+	const valueToString = useCallback((v) => {
+		if (Array.isArray(v)) return v.join(", ");
+		return String(v ?? "");
+	}, []);
+	const uniqueValues = useMemo(() => {
+		const values = distinctValues.filter((v) => v != null && v !== "" && !(Array.isArray(v) && v.length === 0)).map((v) => valueToString(v));
+		return Array.from(new Set(values)).sort((a, b) => {
+			const numA = parseFloat(a);
+			const numB = parseFloat(b);
+			if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+			return a.localeCompare(b, void 0, {
+				numeric: true,
+				sensitivity: "base"
+			});
+		});
+	}, [distinctValues, valueToString]);
+	const hasTooManyValues = uniqueValues.length > MAX_VALUES_FOR_LIST;
+	const [mode, setMode] = useState(useMemo(() => {
+		if (!currentFilter?.conditions[0]) return hasTooManyValues ? "condition" : "values";
+		const cond = currentFilter.conditions[0];
+		if (cond.selectedValues && cond.selectedValues.size > 0) return "values";
+		return "condition";
+	}, [currentFilter, hasTooManyValues]));
+	const initialSelected = useMemo(() => {
+		if (!currentFilter?.conditions[0]) return /* @__PURE__ */ new Set();
+		return currentFilter.conditions[0].selectedValues ?? /* @__PURE__ */ new Set();
+	}, [currentFilter]);
+	const initialIncludeBlanks = useMemo(() => {
+		if (!currentFilter?.conditions[0]) return true;
+		return currentFilter.conditions[0].includeBlank ?? true;
+	}, [currentFilter]);
+	const [searchText, setSearchText] = useState("");
+	const [selectedValues, setSelectedValues] = useState(initialSelected);
+	const [includeBlanks, setIncludeBlanks] = useState(initialIncludeBlanks);
+	const [conditions, setConditions] = useState(useMemo(() => {
+		if (!currentFilter?.conditions.length) return [{
+			operator: "contains",
+			value: "",
+			nextOperator: "and"
+		}];
+		const cond = currentFilter.conditions[0];
+		if (cond.selectedValues && cond.selectedValues.size > 0) return [{
+			operator: "contains",
+			value: "",
+			nextOperator: "and"
+		}];
+		const defaultCombination = currentFilter.combination ?? "and";
+		return currentFilter.conditions.map((c) => {
+			const tc = c;
+			return {
+				operator: tc.operator,
+				value: tc.value ?? "",
+				nextOperator: tc.nextOperator ?? defaultCombination
+			};
+		});
+	}, [currentFilter]));
+	const displayValues = useMemo(() => {
+		if (!searchText) return uniqueValues;
+		const lower = searchText.toLowerCase();
+		return uniqueValues.filter((v) => v.toLowerCase().includes(lower));
+	}, [uniqueValues, searchText]);
+	const hasBlanks = useMemo(() => {
+		return distinctValues.some((v) => v == null || v === "");
+	}, [distinctValues]);
+	const allSelected = useMemo(() => {
+		return displayValues.every((v) => selectedValues.has(v)) && (!hasBlanks || includeBlanks);
+	}, [
+		displayValues,
+		selectedValues,
+		hasBlanks,
+		includeBlanks
+	]);
+	const handleSelectAll = useCallback(() => {
+		setSelectedValues(new Set(displayValues));
+		if (hasBlanks) setIncludeBlanks(true);
+	}, [displayValues, hasBlanks]);
+	const handleDeselectAll = useCallback(() => {
+		setSelectedValues(/* @__PURE__ */ new Set());
+		setIncludeBlanks(false);
+	}, []);
+	const handleValueToggle = useCallback((value) => {
+		setSelectedValues((prev) => {
+			const next = new Set(prev);
+			if (next.has(value)) next.delete(value);
+			else next.add(value);
+			return next;
+		});
+	}, []);
+	const updateCondition = useCallback((index, updates) => {
+		setConditions((prev) => {
+			const next = [...prev];
+			next[index] = {
+				...next[index],
+				...updates
+			};
+			return next;
+		});
+	}, []);
+	const addCondition = useCallback(() => {
+		setConditions((prev) => [...prev, {
+			operator: "contains",
+			value: "",
+			nextOperator: "and"
+		}]);
+	}, []);
+	const removeCondition = useCallback((index) => {
+		setConditions((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+	const handleApply = useCallback(() => {
+		if (mode === "values") {
+			if (uniqueValues.every((v) => selectedValues.has(v)) && (!hasBlanks || includeBlanks)) {
+				onApply(null);
+				return;
+			}
+			onApply({
+				conditions: [{
+					type: "text",
+					operator: "equals",
+					selectedValues,
+					includeBlank: includeBlanks
+				}],
+				combination: "and"
+			});
+		} else {
+			const validConditions = conditions.filter((c) => {
+				if (c.operator === "blank" || c.operator === "notBlank") return true;
+				return c.value.trim() !== "";
+			});
+			if (validConditions.length === 0) {
+				onApply(null);
+				return;
+			}
+			onApply({
+				conditions: validConditions.map((c) => ({
+					type: "text",
+					operator: c.operator,
+					value: c.value,
+					nextOperator: c.nextOperator
+				})),
+				combination: "and"
+			});
+		}
+	}, [
+		mode,
+		uniqueValues,
+		selectedValues,
+		includeBlanks,
+		hasBlanks,
+		conditions,
+		onApply
+	]);
+	const handleClear = useCallback(() => {
+		onApply(null);
+	}, [onApply]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gp-grid-filter-content gp-grid-filter-text",
+		children: [
+			!hasTooManyValues && /* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-mode-toggle",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: mode === "values" ? "active" : "",
+					onClick: () => setMode("values"),
+					children: "Values"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: mode === "condition" ? "active" : "",
+					onClick: () => setMode("condition"),
+					children: "Condition"
+				})]
+			}),
+			hasTooManyValues && mode === "condition" && /* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-info",
+				children: [
+					"Too many unique values (",
+					uniqueValues.length,
+					"). Use conditions to filter."
+				]
+			}),
+			mode === "values" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("input", {
+					className: "gp-grid-filter-search",
+					type: "text",
+					placeholder: "Search...",
+					value: searchText,
+					onChange: (e) => setSearchText(e.target.value),
+					autoFocus: true
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleSelectAll,
+						disabled: allSelected,
+						children: "Select All"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleDeselectAll,
+						children: "Deselect All"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-list",
+					children: [hasBlanks && /* @__PURE__ */ jsxs("label", {
+						className: "gp-grid-filter-option",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: includeBlanks,
+							onChange: () => setIncludeBlanks(!includeBlanks)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "gp-grid-filter-blank",
+							children: "(Blanks)"
+						})]
+					}), displayValues.map((value) => /* @__PURE__ */ jsxs("label", {
+						className: "gp-grid-filter-option",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: selectedValues.has(value),
+							onChange: () => handleValueToggle(value)
+						}), /* @__PURE__ */ jsx("span", { children: value })]
+					}, value))]
+				})
+			] }),
+			mode === "condition" && /* @__PURE__ */ jsxs(Fragment, { children: [conditions.map((cond, index) => /* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-condition",
+				children: [index > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-combination",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "and" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "and" }),
+						children: "AND"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "or" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "or" }),
+						children: "OR"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-row",
+					children: [
+						/* @__PURE__ */ jsx("select", {
+							value: cond.operator,
+							onChange: (e) => updateCondition(index, { operator: e.target.value }),
+							autoFocus: index === 0,
+							children: OPERATORS$2.map((op) => /* @__PURE__ */ jsx("option", {
+								value: op.value,
+								children: op.label
+							}, op.value))
+						}),
+						cond.operator !== "blank" && cond.operator !== "notBlank" && /* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: cond.value,
+							onChange: (e) => updateCondition(index, { value: e.target.value }),
+							placeholder: "Value",
+							className: "gp-grid-filter-text-input"
+						}),
+						conditions.length > 1 && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "gp-grid-filter-remove",
+							onClick: () => removeCondition(index),
+							children: "×"
+						})
+					]
+				})]
+			}, index)), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gp-grid-filter-add",
+				onClick: addCondition,
+				children: "+ Add condition"
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-buttons",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-clear",
+					onClick: handleClear,
+					children: "Clear"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-apply",
+					onClick: handleApply,
+					children: "Apply"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/NumberFilterContent.tsx
+const OPERATORS$1 = [
+	{
+		value: "=",
+		label: "="
+	},
+	{
+		value: "!=",
+		label: "≠"
+	},
+	{
+		value: ">",
+		label: ">"
+	},
+	{
+		value: "<",
+		label: "<"
+	},
+	{
+		value: ">=",
+		label: "≥"
+	},
+	{
+		value: "<=",
+		label: "≤"
+	},
+	{
+		value: "between",
+		label: "↔"
+	},
+	{
+		value: "blank",
+		label: "Is blank"
+	},
+	{
+		value: "notBlank",
+		label: "Not blank"
+	}
+];
+function NumberFilterContent({ currentFilter, onApply, onClose }) {
+	const [conditions, setConditions] = useState(useMemo(() => {
+		if (!currentFilter?.conditions.length) return [{
+			operator: "=",
+			value: "",
+			valueTo: "",
+			nextOperator: "and"
+		}];
+		const defaultCombination = currentFilter.combination ?? "and";
+		return currentFilter.conditions.map((c) => {
+			const cond = c;
+			return {
+				operator: cond.operator,
+				value: cond.value != null ? String(cond.value) : "",
+				valueTo: cond.valueTo != null ? String(cond.valueTo) : "",
+				nextOperator: cond.nextOperator ?? defaultCombination
+			};
+		});
+	}, [currentFilter]));
+	const updateCondition = useCallback((index, updates) => {
+		setConditions((prev) => {
+			const next = [...prev];
+			next[index] = {
+				...next[index],
+				...updates
+			};
+			return next;
+		});
+	}, []);
+	const addCondition = useCallback(() => {
+		setConditions((prev) => [...prev, {
+			operator: "=",
+			value: "",
+			valueTo: "",
+			nextOperator: "and"
+		}]);
+	}, []);
+	const removeCondition = useCallback((index) => {
+		setConditions((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+	const handleApply = useCallback(() => {
+		const validConditions = conditions.filter((c) => {
+			if (c.operator === "blank" || c.operator === "notBlank") return true;
+			if (c.operator === "between") return c.value !== "" && c.valueTo !== "";
+			return c.value !== "";
+		});
+		if (validConditions.length === 0) {
+			onApply(null);
+			return;
+		}
+		onApply({
+			conditions: validConditions.map((c) => ({
+				type: "number",
+				operator: c.operator,
+				value: c.value ? parseFloat(c.value) : void 0,
+				valueTo: c.valueTo ? parseFloat(c.valueTo) : void 0,
+				nextOperator: c.nextOperator
+			})),
+			combination: "and"
+		});
+	}, [conditions, onApply]);
+	const handleClear = useCallback(() => {
+		onApply(null);
+	}, [onApply]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gp-grid-filter-content gp-grid-filter-number",
+		children: [
+			conditions.map((cond, index) => /* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-condition",
+				children: [index > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-combination",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "and" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "and" }),
+						children: "AND"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "or" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "or" }),
+						children: "OR"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-row",
+					children: [
+						/* @__PURE__ */ jsx("select", {
+							value: cond.operator,
+							onChange: (e) => updateCondition(index, { operator: e.target.value }),
+							children: OPERATORS$1.map((op) => /* @__PURE__ */ jsx("option", {
+								value: op.value,
+								children: op.label
+							}, op.value))
+						}),
+						cond.operator !== "blank" && cond.operator !== "notBlank" && /* @__PURE__ */ jsx("input", {
+							type: "number",
+							value: cond.value,
+							onChange: (e) => updateCondition(index, { value: e.target.value }),
+							placeholder: "Value"
+						}),
+						cond.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "gp-grid-filter-to",
+							children: "to"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "number",
+							value: cond.valueTo,
+							onChange: (e) => updateCondition(index, { valueTo: e.target.value }),
+							placeholder: "Value"
+						})] }),
+						conditions.length > 1 && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "gp-grid-filter-remove",
+							onClick: () => removeCondition(index),
+							children: "×"
+						})
+					]
+				})]
+			}, index)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gp-grid-filter-add",
+				onClick: addCondition,
+				children: "+ Add condition"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-buttons",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-clear",
+					onClick: handleClear,
+					children: "Clear"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-apply",
+					onClick: handleApply,
+					children: "Apply"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/DateFilterContent.tsx
+const OPERATORS = [
+	{
+		value: "=",
+		label: "="
+	},
+	{
+		value: "!=",
+		label: "≠"
+	},
+	{
+		value: ">",
+		label: ">"
+	},
+	{
+		value: "<",
+		label: "<"
+	},
+	{
+		value: "between",
+		label: "↔"
+	},
+	{
+		value: "blank",
+		label: "Is blank"
+	},
+	{
+		value: "notBlank",
+		label: "Not blank"
+	}
+];
+function formatDateForInput(date) {
+	if (!date) return "";
+	const d = typeof date === "string" ? new Date(date) : date;
+	if (isNaN(d.getTime())) return "";
+	return d.toISOString().split("T")[0];
+}
+function DateFilterContent({ currentFilter, onApply, onClose }) {
+	const [conditions, setConditions] = useState(useMemo(() => {
+		if (!currentFilter?.conditions.length) return [{
+			operator: "=",
+			value: "",
+			valueTo: "",
+			nextOperator: "and"
+		}];
+		const defaultCombination = currentFilter.combination ?? "and";
+		return currentFilter.conditions.map((c) => {
+			const cond = c;
+			return {
+				operator: cond.operator,
+				value: formatDateForInput(cond.value),
+				valueTo: formatDateForInput(cond.valueTo),
+				nextOperator: cond.nextOperator ?? defaultCombination
+			};
+		});
+	}, [currentFilter]));
+	const updateCondition = useCallback((index, updates) => {
+		setConditions((prev) => {
+			const next = [...prev];
+			next[index] = {
+				...next[index],
+				...updates
+			};
+			return next;
+		});
+	}, []);
+	const addCondition = useCallback(() => {
+		setConditions((prev) => [...prev, {
+			operator: "=",
+			value: "",
+			valueTo: "",
+			nextOperator: "and"
+		}]);
+	}, []);
+	const removeCondition = useCallback((index) => {
+		setConditions((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+	const handleApply = useCallback(() => {
+		const validConditions = conditions.filter((c) => {
+			if (c.operator === "blank" || c.operator === "notBlank") return true;
+			if (c.operator === "between") return c.value !== "" && c.valueTo !== "";
+			return c.value !== "";
+		});
+		if (validConditions.length === 0) {
+			onApply(null);
+			return;
+		}
+		onApply({
+			conditions: validConditions.map((c) => ({
+				type: "date",
+				operator: c.operator,
+				value: c.value || void 0,
+				valueTo: c.valueTo || void 0,
+				nextOperator: c.nextOperator
+			})),
+			combination: "and"
+		});
+	}, [conditions, onApply]);
+	const handleClear = useCallback(() => {
+		onApply(null);
+	}, [onApply]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gp-grid-filter-content gp-grid-filter-date",
+		children: [
+			conditions.map((cond, index) => /* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-condition",
+				children: [index > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-combination",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "and" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "and" }),
+						children: "AND"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: conditions[index - 1]?.nextOperator === "or" ? "active" : "",
+						onClick: () => updateCondition(index - 1, { nextOperator: "or" }),
+						children: "OR"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-filter-row",
+					children: [
+						/* @__PURE__ */ jsx("select", {
+							value: cond.operator,
+							onChange: (e) => updateCondition(index, { operator: e.target.value }),
+							children: OPERATORS.map((op) => /* @__PURE__ */ jsx("option", {
+								value: op.value,
+								children: op.label
+							}, op.value))
+						}),
+						cond.operator !== "blank" && cond.operator !== "notBlank" && /* @__PURE__ */ jsx("input", {
+							type: "date",
+							value: cond.value,
+							onChange: (e) => updateCondition(index, { value: e.target.value })
+						}),
+						cond.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "gp-grid-filter-to",
+							children: "to"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "date",
+							value: cond.valueTo,
+							onChange: (e) => updateCondition(index, { valueTo: e.target.value })
+						})] }),
+						conditions.length > 1 && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "gp-grid-filter-remove",
+							onClick: () => removeCondition(index),
+							children: "×"
+						})
+					]
+				})]
+			}, index)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "gp-grid-filter-add",
+				onClick: addCondition,
+				children: "+ Add condition"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-buttons",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-clear",
+					onClick: handleClear,
+					children: "Clear"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gp-grid-filter-btn-apply",
+					onClick: handleApply,
+					children: "Apply"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/FilterPopup.tsx
+function FilterPopup({ column, colIndex, anchorRect, distinctValues, currentFilter, onApply, onClose }) {
+	const popupRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (e) => {
+			const target = e.target;
+			if (target.closest(".gp-grid-filter-icon")) return;
+			if (popupRef.current && !popupRef.current.contains(target)) onClose();
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		requestAnimationFrame(() => {
+			document.addEventListener("mousedown", handleClickOutside);
+			document.addEventListener("keydown", handleKeyDown);
+		});
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [onClose]);
+	const handleApply = useCallback((filter) => {
+		onApply(column.colId ?? column.field, filter);
+		onClose();
+	}, [
+		column,
+		onApply,
+		onClose
+	]);
+	const popupStyle = {
+		position: "fixed",
+		top: anchorRect.top + anchorRect.height + 4,
+		left: anchorRect.left,
+		minWidth: Math.max(200, anchorRect.width),
+		zIndex: 1e4
+	};
+	const dataType = column.cellDataType;
+	const isTextType = dataType === "text" || dataType === "object";
+	const isNumberType = dataType === "number";
+	const isDateType = dataType === "date" || dataType === "dateString" || dataType === "dateTime" || dataType === "dateTimeString";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: popupRef,
+		className: "gp-grid-filter-popup",
+		style: popupStyle,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "gp-grid-filter-header",
+				children: ["Filter: ", column.headerName ?? column.field]
+			}),
+			isTextType && /* @__PURE__ */ jsx(TextFilterContent, {
+				distinctValues,
+				currentFilter,
+				onApply: handleApply,
+				onClose
+			}),
+			isNumberType && /* @__PURE__ */ jsx(NumberFilterContent, {
+				currentFilter,
+				onApply: handleApply,
+				onClose
+			}),
+			isDateType && /* @__PURE__ */ jsx(DateFilterContent, {
+				currentFilter,
+				onApply: handleApply,
+				onClose
+			}),
+			!isTextType && !isNumberType && !isDateType && /* @__PURE__ */ jsx(TextFilterContent, {
+				distinctValues,
+				currentFilter,
+				onApply: handleApply,
+				onClose
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/gridState/reducer.ts
+function createInitialState(args) {
+	return {
+		slots: /* @__PURE__ */ new Map(),
+		activeCell: null,
+		selectionRange: null,
+		editingCell: null,
+		contentWidth: 0,
+		contentHeight: args?.initialHeight ?? 0,
+		viewportWidth: args?.initialWidth ?? 0,
+		headers: /* @__PURE__ */ new Map(),
+		filterPopup: null,
+		isLoading: false,
+		error: null,
+		totalRows: 0,
+		visibleRowRange: null,
+		hoverPosition: null
+	};
+}
+/**
+* Apply a single instruction to mutable slot maps and return other state changes.
+* This allows batching multiple slot operations efficiently.
+*/
+function applyInstruction(instruction, slots, headers) {
+	switch (instruction.type) {
+		case "CREATE_SLOT":
+			slots.set(instruction.slotId, {
+				slotId: instruction.slotId,
+				rowIndex: -1,
+				rowData: {},
+				translateY: 0
+			});
+			return null;
+		case "DESTROY_SLOT":
+			slots.delete(instruction.slotId);
+			return null;
+		case "ASSIGN_SLOT": {
+			const existing = slots.get(instruction.slotId);
+			if (existing) slots.set(instruction.slotId, {
+				...existing,
+				rowIndex: instruction.rowIndex,
+				rowData: instruction.rowData
+			});
+			return null;
+		}
+		case "MOVE_SLOT": {
+			const existing = slots.get(instruction.slotId);
+			if (existing) slots.set(instruction.slotId, {
+				...existing,
+				translateY: instruction.translateY
+			});
+			return null;
+		}
+		case "SET_ACTIVE_CELL": return { activeCell: instruction.position };
+		case "SET_SELECTION_RANGE": return { selectionRange: instruction.range };
+		case "UPDATE_VISIBLE_RANGE": return { visibleRowRange: {
+			start: instruction.start,
+			end: instruction.end
+		} };
+		case "SET_HOVER_POSITION": return { hoverPosition: instruction.position };
+		case "START_EDIT": return { editingCell: {
+			row: instruction.row,
+			col: instruction.col,
+			initialValue: instruction.initialValue
+		} };
+		case "STOP_EDIT": return { editingCell: null };
+		case "SET_CONTENT_SIZE": return {
+			contentWidth: instruction.width,
+			contentHeight: instruction.height,
+			viewportWidth: instruction.viewportWidth
+		};
+		case "UPDATE_HEADER":
+			headers.set(instruction.colIndex, {
+				column: instruction.column,
+				sortDirection: instruction.sortDirection,
+				sortIndex: instruction.sortIndex,
+				sortable: instruction.sortable,
+				filterable: instruction.filterable,
+				hasFilter: instruction.hasFilter
+			});
+			return null;
+		case "OPEN_FILTER_POPUP": return { filterPopup: {
+			isOpen: true,
+			colIndex: instruction.colIndex,
+			column: instruction.column,
+			anchorRect: instruction.anchorRect,
+			distinctValues: instruction.distinctValues,
+			currentFilter: instruction.currentFilter
+		} };
+		case "CLOSE_FILTER_POPUP": return { filterPopup: null };
+		case "DATA_LOADING": return {
+			isLoading: true,
+			error: null
+		};
+		case "DATA_LOADED": return {
+			isLoading: false,
+			totalRows: instruction.totalRows
+		};
+		case "DATA_ERROR": return {
+			isLoading: false,
+			error: instruction.error
+		};
+		case "ROWS_ADDED":
+		case "ROWS_REMOVED": return { totalRows: instruction.totalRows };
+		case "ROWS_UPDATED":
+		case "TRANSACTION_PROCESSED": return null;
+		default: return null;
+	}
+}
+function gridReducer(state, action) {
+	if (action.type === "RESET") return createInitialState();
+	const { instructions } = action;
+	if (instructions.length === 0) return state;
+	const newSlots = new Map(state.slots);
+	const newHeaders = new Map(state.headers);
+	let stateChanges = {};
+	for (const instruction of instructions) {
+		const changes = applyInstruction(instruction, newSlots, newHeaders);
+		if (changes) stateChanges = {
+			...stateChanges,
+			...changes
+		};
+	}
+	return {
+		...state,
+		...stateChanges,
+		slots: newSlots,
+		headers: newHeaders
+	};
+}
+
+//#endregion
+//#region src/hooks/useInputHandler.ts
+const AUTO_SCROLL_INTERVAL = 16;
+/**
+* Find the slot for a given row index
+*/
+function findSlotForRow(slots, rowIndex) {
+	for (const slot of slots.values()) if (slot.rowIndex === rowIndex) return slot;
+	return null;
+}
+/**
+* Scroll a cell into view if needed
+*/
+function scrollCellIntoView(core, container, row, rowHeight, headerHeight, slots) {
+	const slot = findSlotForRow(slots, row);
+	const cellViewportTop = (slot ? slot.translateY : headerHeight + row * rowHeight) - container.scrollTop;
+	const cellViewportBottom = cellViewportTop + rowHeight;
+	const visibleTop = headerHeight;
+	const visibleBottom = container.clientHeight;
+	if (cellViewportTop < visibleTop) container.scrollTop = core.getScrollTopForRow(row);
+	else if (cellViewportBottom > visibleBottom) {
+		const visibleDataHeight = container.clientHeight - headerHeight;
+		const rowsInView = Math.floor(visibleDataHeight / rowHeight);
+		const targetRow = Math.max(0, row - rowsInView + 1);
+		container.scrollTop = core.getScrollTopForRow(targetRow);
+	}
+}
+/**
+* Hook for managing all input handling using core's InputHandler
+*/
+function useInputHandler(coreRef, containerRef, columns, options) {
+	const { activeCell, selectionRange, editingCell, filterPopupOpen, rowHeight, headerHeight, columnPositions, visibleColumnsWithIndices, slots } = options;
+	const autoScrollRef = useRef(null);
+	const [dragState, setDragState] = useState({
+		isDragging: false,
+		dragType: null,
+		fillSourceRange: null,
+		fillTarget: null
+	});
+	useEffect(() => {
+		const core = coreRef.current;
+		if (core?.input) core.input.updateDeps({
+			getHeaderHeight: () => headerHeight,
+			getRowHeight: () => rowHeight,
+			getColumnPositions: () => columnPositions,
+			getColumnCount: () => visibleColumnsWithIndices.length,
+			getOriginalColumnIndex: (visibleIndex) => {
+				const info = visibleColumnsWithIndices[visibleIndex];
+				return info ? info.originalIndex : visibleIndex;
+			}
+		});
+	}, [
+		coreRef,
+		headerHeight,
+		rowHeight,
+		columnPositions,
+		visibleColumnsWithIndices
+	]);
+	const startAutoScroll = useCallback((dx, dy) => {
+		if (autoScrollRef.current) clearInterval(autoScrollRef.current);
+		autoScrollRef.current = setInterval(() => {
+			const container = containerRef.current;
+			if (container) {
+				container.scrollTop += dy;
+				container.scrollLeft += dx;
+			}
+		}, AUTO_SCROLL_INTERVAL);
+	}, [containerRef]);
+	const stopAutoScroll = useCallback(() => {
+		if (autoScrollRef.current) {
+			clearInterval(autoScrollRef.current);
+			autoScrollRef.current = null;
+		}
+	}, []);
+	const getContainerBounds = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return null;
+		const rect = container.getBoundingClientRect();
+		return {
+			top: rect.top,
+			left: rect.left,
+			width: rect.width,
+			height: rect.height,
+			scrollTop: container.scrollTop,
+			scrollLeft: container.scrollLeft
+		};
+	}, [containerRef]);
+	const toPointerEventData = (e) => ({
+		clientX: e.clientX,
+		clientY: e.clientY,
+		button: e.button,
+		shiftKey: e.shiftKey,
+		ctrlKey: e.ctrlKey,
+		metaKey: e.metaKey
+	});
+	const startGlobalDragListeners = useCallback(() => {
+		const handleMouseMove = (e) => {
+			const core = coreRef.current;
+			const bounds = getContainerBounds();
+			if (!core?.input || !bounds) return;
+			const result = core.input.handleDragMove(toPointerEventData(e), bounds);
+			if (result) {
+				if (result.autoScroll) startAutoScroll(result.autoScroll.dx, result.autoScroll.dy);
+				else stopAutoScroll();
+				setDragState(core.input.getDragState());
+			}
+		};
+		const handleMouseUp = () => {
+			const core = coreRef.current;
+			if (core?.input) {
+				core.input.handleDragEnd();
+				setDragState(core.input.getDragState());
+			}
+			stopAutoScroll();
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+	}, [
+		coreRef,
+		getContainerBounds,
+		startAutoScroll,
+		stopAutoScroll
+	]);
+	const handleCellMouseDown = useCallback((rowIndex, colIndex, e) => {
+		const core = coreRef.current;
+		if (!core?.input) return;
+		const result = core.input.handleCellMouseDown(rowIndex, colIndex, toPointerEventData(e));
+		if (result.focusContainer) containerRef.current?.focus();
+		if (result.startDrag === "selection") {
+			core.input.startSelectionDrag();
+			setDragState(core.input.getDragState());
+			startGlobalDragListeners();
+		}
+	}, [
+		coreRef,
+		containerRef,
+		startGlobalDragListeners
+	]);
+	const handleCellDoubleClick = useCallback((rowIndex, colIndex) => {
+		const core = coreRef.current;
+		if (!core?.input) return;
+		core.input.handleCellDoubleClick(rowIndex, colIndex);
+	}, [coreRef]);
+	const handleFillHandleMouseDown = useCallback((e) => {
+		const core = coreRef.current;
+		if (!core?.input) return;
+		const result = core.input.handleFillHandleMouseDown(activeCell, selectionRange, toPointerEventData(e));
+		if (result.preventDefault) e.preventDefault();
+		if (result.stopPropagation) e.stopPropagation();
+		if (result.startDrag === "fill") {
+			setDragState(core.input.getDragState());
+			startGlobalDragListeners();
+		}
+	}, [
+		coreRef,
+		activeCell,
+		selectionRange,
+		startGlobalDragListeners
+	]);
+	const handleHeaderClick = useCallback((colIndex, e) => {
+		const core = coreRef.current;
+		if (!core?.input) return;
+		const column = columns[colIndex];
+		if (!column) return;
+		const colId = column.colId ?? column.field;
+		core.input.handleHeaderClick(colId, e.shiftKey);
+	}, [coreRef, columns]);
+	const handleKeyDown = useCallback((e) => {
+		const core = coreRef.current;
+		const container = containerRef.current;
+		if (!core?.input) return;
+		const result = core.input.handleKeyDown({
+			key: e.key,
+			shiftKey: e.shiftKey,
+			ctrlKey: e.ctrlKey,
+			metaKey: e.metaKey
+		}, activeCell, editingCell, filterPopupOpen);
+		if (result.preventDefault) e.preventDefault();
+		if (result.scrollToCell && container) scrollCellIntoView(core, container, result.scrollToCell.row, rowHeight, headerHeight, slots);
+	}, [
+		coreRef,
+		containerRef,
+		activeCell,
+		editingCell,
+		filterPopupOpen,
+		rowHeight,
+		headerHeight,
+		slots
+	]);
+	const handleWheel = useCallback((e, wheelDampening) => {
+		const core = coreRef.current;
+		const container = containerRef.current;
+		if (!core?.input || !container) return;
+		const dampened = core.input.handleWheel(e.deltaY, e.deltaX, wheelDampening);
+		if (dampened) {
+			e.preventDefault();
+			container.scrollTop += dampened.dy;
+			container.scrollLeft += dampened.dx;
+		}
+	}, [coreRef, containerRef]);
+	useEffect(() => {
+		return () => {
+			stopAutoScroll();
+		};
+	}, [stopAutoScroll]);
+	return {
+		handleCellMouseDown,
+		handleCellDoubleClick,
+		handleFillHandleMouseDown,
+		handleHeaderClick,
+		handleKeyDown,
+		handleWheel,
+		dragState
+	};
+}
+
+//#endregion
+//#region src/renderers/cellRenderer.tsx
+/**
+* Get cell value from row data, supporting dot-notation for nested fields
+*/
+function getCellValue(rowData, field) {
+	const parts = field.split(".");
+	let value = rowData;
+	for (const part of parts) {
+		if (value == null || typeof value !== "object") return null;
+		value = value[part];
+	}
+	return value ?? null;
+}
+/**
+* Render cell content based on column configuration and renderer registries
+*/
+function renderCell(options) {
+	const { column, rowData, rowIndex, colIndex, isActive, isSelected, isEditing, cellRenderers, globalCellRenderer } = options;
+	const value = getCellValue(rowData, column.field);
+	const params = {
+		value,
+		rowData,
+		column,
+		rowIndex,
+		colIndex,
+		isActive,
+		isSelected,
+		isEditing
+	};
+	if (column.cellRenderer && typeof column.cellRenderer === "string") {
+		const renderer = cellRenderers[column.cellRenderer];
+		if (renderer) return renderer(params);
+	}
+	if (globalCellRenderer) return globalCellRenderer(params);
+	return value == null ? "" : String(value);
+}
+
+//#endregion
+//#region src/renderers/editRenderer.tsx
+/**
+* Render edit cell content based on column configuration and renderer registries
+*/
+function renderEditCell(options) {
+	const { column, rowData, rowIndex, colIndex, initialValue, coreRef, editRenderers, globalEditRenderer } = options;
+	const core = coreRef.current;
+	if (!core) return null;
+	const params = {
+		value: getCellValue(rowData, column.field),
+		rowData,
+		column,
+		rowIndex,
+		colIndex,
+		isActive: true,
+		isSelected: true,
+		isEditing: true,
+		initialValue,
+		onValueChange: (newValue) => core.updateEditValue(newValue),
+		onCommit: () => core.commitEdit(),
+		onCancel: () => core.cancelEdit()
+	};
+	if (column.editRenderer && typeof column.editRenderer === "string") {
+		const renderer = editRenderers[column.editRenderer];
+		if (renderer) return renderer(params);
+	}
+	if (globalEditRenderer) return globalEditRenderer(params);
+	return /* @__PURE__ */ jsx("input", {
+		className: "gp-grid-edit-input",
+		type: "text",
+		defaultValue: initialValue == null ? "" : String(initialValue),
+		autoFocus: true,
+		onFocus: (e) => e.target.select(),
+		onChange: (e) => core.updateEditValue(e.target.value),
+		onKeyDown: (e) => {
+			e.stopPropagation();
+			if (e.key === "Enter") core.commitEdit();
+			else if (e.key === "Escape") core.cancelEdit();
+			else if (e.key === "Tab") {
+				e.preventDefault();
+				core.commitEdit();
+				core.selection.moveFocus(e.shiftKey ? "left" : "right", false);
+			}
+		},
+		onBlur: () => core.commitEdit()
+	});
+}
+
+//#endregion
+//#region src/renderers/headerRenderer.tsx
+/**
+* Render header content based on column configuration and renderer registries
+*/
+function renderHeader(options) {
+	const { column, colIndex, sortDirection, sortIndex, sortable, filterable, hasFilter, coreRef, containerRef, headerRenderers, globalHeaderRenderer } = options;
+	const core = coreRef.current;
+	const params = {
+		column,
+		colIndex,
+		sortDirection,
+		sortIndex,
+		sortable,
+		filterable,
+		hasFilter,
+		onSort: (direction, addToExisting) => {
+			if (core && sortable) core.setSort(column.colId ?? column.field, direction, addToExisting);
+		},
+		onFilterClick: () => {
+			if (core && filterable) {
+				const headerCell = containerRef.current?.querySelector(`[data-col-index="${colIndex}"]`);
+				if (headerCell) {
+					const rect = headerCell.getBoundingClientRect();
+					core.openFilterPopup(colIndex, {
+						top: rect.top,
+						left: rect.left,
+						width: rect.width,
+						height: rect.height
+					});
+				}
+			}
+		}
+	};
+	if (column.headerRenderer && typeof column.headerRenderer === "string") {
+		const renderer = headerRenderers[column.headerRenderer];
+		if (renderer) return renderer(params);
+	}
+	if (globalHeaderRenderer) return globalHeaderRenderer(params);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "gp-grid-header-text",
+		children: column.headerName ?? column.field
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "gp-grid-header-icons",
+		children: [sortable && /* @__PURE__ */ jsxs("span", {
+			className: "gp-grid-sort-arrows",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "gp-grid-sort-arrows-stack",
+				children: [/* @__PURE__ */ jsx("svg", {
+					className: `gp-grid-sort-arrow-up${sortDirection === "asc" ? " active" : ""}`,
+					width: "8",
+					height: "6",
+					viewBox: "0 0 8 6",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M4 0L8 6H0L4 0Z",
+						fill: "currentColor"
+					})
+				}), /* @__PURE__ */ jsx("svg", {
+					className: `gp-grid-sort-arrow-down${sortDirection === "desc" ? " active" : ""}`,
+					width: "8",
+					height: "6",
+					viewBox: "0 0 8 6",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M4 6L0 0H8L4 6Z",
+						fill: "currentColor"
+					})
+				})]
+			}), sortIndex !== void 0 && sortIndex > 0 && /* @__PURE__ */ jsx("span", {
+				className: "gp-grid-sort-index",
+				children: sortIndex
+			})]
+		}), filterable && /* @__PURE__ */ jsx("span", {
+			className: `gp-grid-filter-icon${hasFilter ? " active" : ""}`,
+			onMouseDown: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				params.onFilterClick();
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+			},
+			children: /* @__PURE__ */ jsx("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				children: /* @__PURE__ */ jsx("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })
+			})
+		})]
+	})] });
+}
+
+//#endregion
+//#region src/Grid.tsx
+/**
+* Grid component
+* @param props - Grid component props
+* @returns Grid React component
+*/
+function Grid(props) {
+	injectStyles();
+	const { columns, dataSource: providedDataSource, rowData, rowHeight, headerHeight = rowHeight, overscan = 3, sortingEnabled = true, darkMode = false, wheelDampening = .1, cellRenderers = {}, editRenderers = {}, headerRenderers = {}, cellRenderer, editRenderer, headerRenderer, initialWidth, initialHeight, gridRef, highlighting } = props;
+	const containerRef = useRef(null);
+	const coreRef = useRef(null);
+	const prevDataSourceRef = useRef(null);
+	const hasInitializedRef = useRef(false);
+	const [state, dispatch] = useReducer(gridReducer, {
+		initialWidth,
+		initialHeight
+	}, createInitialState);
+	const totalHeaderHeight = headerHeight;
+	const dataSourceCacheRef = useRef(null);
+	const cache = dataSourceCacheRef.current;
+	if (!cache || cache.providedDataSource !== providedDataSource || cache.rowData !== rowData) {
+		if (cache?.ownsDataSource) cache.dataSource.destroy?.();
+		if (providedDataSource) dataSourceCacheRef.current = {
+			dataSource: providedDataSource,
+			ownsDataSource: false,
+			providedDataSource,
+			rowData
+		};
+		else if (rowData) dataSourceCacheRef.current = {
+			dataSource: createDataSourceFromArray$1(rowData),
+			ownsDataSource: true,
+			providedDataSource,
+			rowData
+		};
+		else dataSourceCacheRef.current = {
+			dataSource: createClientDataSource$1([]),
+			ownsDataSource: true,
+			providedDataSource,
+			rowData
+		};
+	}
+	const { dataSource, ownsDataSource } = dataSourceCacheRef.current;
+	useEffect(() => {
+		return () => {
+			if (dataSourceCacheRef.current?.ownsDataSource) {
+				dataSourceCacheRef.current.dataSource.destroy?.();
+				dataSourceCacheRef.current = null;
+			}
+		};
+	}, []);
+	useEffect(() => {
+		const prevDataSource = prevDataSourceRef.current;
+		if (prevDataSource && prevDataSource !== dataSource) dispatch({ type: "RESET" });
+		prevDataSourceRef.current = dataSource;
+	}, [dataSource]);
+	const visibleColumnsWithIndices = useMemo(() => columns.map((col, index) => ({
+		column: col,
+		originalIndex: index
+	})).filter(({ column }) => !column.hidden), [columns]);
+	const { positions: columnPositions, widths: columnWidths } = useMemo(() => calculateScaledColumnPositions(visibleColumnsWithIndices.map((v) => v.column), state.viewportWidth), [visibleColumnsWithIndices, state.viewportWidth]);
+	const totalWidth = getTotalWidth(columnPositions);
+	const { handleCellMouseDown, handleCellDoubleClick, handleFillHandleMouseDown, handleHeaderClick, handleKeyDown, handleWheel, dragState } = useInputHandler(coreRef, containerRef, columns, {
+		activeCell: state.activeCell,
+		selectionRange: state.selectionRange,
+		editingCell: state.editingCell,
+		filterPopupOpen: state.filterPopup?.isOpen ?? false,
+		rowHeight,
+		headerHeight: totalHeaderHeight,
+		columnPositions,
+		visibleColumnsWithIndices,
+		slots: state.slots
+	});
+	useEffect(() => {
+		if (hasInitializedRef.current) dispatch({ type: "RESET" });
+		hasInitializedRef.current = true;
+		const core = new GridCore$1({
+			columns,
+			dataSource,
+			rowHeight,
+			headerHeight: totalHeaderHeight,
+			overscan,
+			sortingEnabled,
+			highlighting
+		});
+		coreRef.current = core;
+		core.input.updateDeps({
+			getHeaderHeight: () => totalHeaderHeight,
+			getRowHeight: () => rowHeight,
+			getColumnPositions: () => columnPositions,
+			getColumnCount: () => visibleColumnsWithIndices.length,
+			getOriginalColumnIndex: (visibleIndex) => {
+				const info = visibleColumnsWithIndices[visibleIndex];
+				return info ? info.originalIndex : visibleIndex;
+			}
+		});
+		if (gridRef) gridRef.current = { core };
+		const unsubscribe = core.onBatchInstruction((instructions) => {
+			dispatch({
+				type: "BATCH_INSTRUCTIONS",
+				instructions
+			});
+		});
+		core.initialize();
+		const container = containerRef.current;
+		if (container) core.setViewport(container.scrollTop, container.scrollLeft, container.clientWidth, container.clientHeight);
+		return () => {
+			unsubscribe();
+			core.destroy();
+			coreRef.current = null;
+			if (gridRef) gridRef.current = null;
+		};
+	}, [
+		columns,
+		dataSource,
+		rowHeight,
+		totalHeaderHeight,
+		overscan,
+		sortingEnabled,
+		gridRef,
+		highlighting
+	]);
+	useEffect(() => {
+		const mutableDataSource = dataSource;
+		if (mutableDataSource.subscribe) return mutableDataSource.subscribe(() => {
+			coreRef.current?.refresh();
+		});
+	}, [dataSource]);
+	const handleScroll = useCallback(() => {
+		const container = containerRef.current;
+		const core = coreRef.current;
+		if (!container || !core) return;
+		core.setViewport(container.scrollTop, container.scrollLeft, container.clientWidth, container.clientHeight);
+	}, []);
+	useEffect(() => {
+		const container = containerRef.current;
+		const core = coreRef.current;
+		if (!container || !core) return;
+		if (typeof ResizeObserver === "undefined") {
+			handleScroll();
+			return;
+		}
+		const resizeObserver = new ResizeObserver(() => {
+			core.setViewport(container.scrollTop, container.scrollLeft, container.clientWidth, container.clientHeight);
+		});
+		resizeObserver.observe(container);
+		handleScroll();
+		return () => resizeObserver.disconnect();
+	}, [handleScroll]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const wheelHandler = (e) => {
+			handleWheel(e, wheelDampening);
+		};
+		container.addEventListener("wheel", wheelHandler, { passive: false });
+		return () => container.removeEventListener("wheel", wheelHandler);
+	}, [handleWheel, wheelDampening]);
+	const handleFilterApply = useCallback((colId, filter) => {
+		const core = coreRef.current;
+		if (core) core.setFilter(colId, filter);
+	}, []);
+	const handleFilterPopupClose = useCallback(() => {
+		const core = coreRef.current;
+		if (core) core.closeFilterPopup();
+	}, []);
+	const handleCellMouseEnter = useCallback((rowIndex, colIndex) => {
+		coreRef.current?.input.handleCellMouseEnter(rowIndex, colIndex);
+	}, []);
+	const handleCellMouseLeave = useCallback(() => {
+		coreRef.current?.input.handleCellMouseLeave();
+	}, []);
+	const slotsArray = useMemo(() => Array.from(state.slots.values()), [state.slots]);
+	const fillHandlePosition = useMemo(() => {
+		const { activeCell, selectionRange, slots } = state;
+		if (!activeCell && !selectionRange) return null;
+		let row, col;
+		let minCol, maxCol;
+		if (selectionRange) {
+			row = Math.max(selectionRange.startRow, selectionRange.endRow);
+			col = Math.max(selectionRange.startCol, selectionRange.endCol);
+			minCol = Math.min(selectionRange.startCol, selectionRange.endCol);
+			maxCol = Math.max(selectionRange.startCol, selectionRange.endCol);
+		} else if (activeCell) {
+			row = activeCell.row;
+			col = activeCell.col;
+			minCol = col;
+			maxCol = col;
+		} else return null;
+		for (let c = minCol; c <= maxCol; c++) {
+			const column = columns[c];
+			if (!column || column.hidden) continue;
+			if (column.editable !== true) return null;
+		}
+		const visibleIndex = visibleColumnsWithIndices.findIndex((v) => v.originalIndex === col);
+		if (visibleIndex === -1) return null;
+		let cellTop = null;
+		for (const slot of slots.values()) if (slot.rowIndex === row) {
+			cellTop = slot.translateY;
+			break;
+		}
+		if (cellTop === null) return null;
+		const cellLeft = columnPositions[visibleIndex] ?? 0;
+		const cellWidth = columnWidths[visibleIndex] ?? 0;
+		return {
+			top: cellTop + rowHeight - 5,
+			left: cellLeft + cellWidth - 20
+		};
+	}, [
+		state.activeCell,
+		state.selectionRange,
+		state.slots,
+		rowHeight,
+		columnPositions,
+		columnWidths,
+		columns,
+		visibleColumnsWithIndices
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: `gp-grid-container${darkMode ? " gp-grid-container--dark" : ""}`,
+		style: {
+			width: "100%",
+			height: "100%",
+			overflow: "auto",
+			position: "relative"
+		},
+		onScroll: handleScroll,
+		onKeyDown: handleKeyDown,
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				width: Math.max(state.contentWidth, totalWidth),
+				height: Math.max(state.contentHeight, totalHeaderHeight),
+				position: "relative",
+				minWidth: "100%"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "gp-grid-header",
+					style: {
+						position: "sticky",
+						top: 0,
+						left: 0,
+						height: headerHeight,
+						width: Math.max(state.contentWidth, totalWidth),
+						minWidth: "100%"
+					},
+					children: visibleColumnsWithIndices.map(({ column, originalIndex }, visibleIndex) => {
+						const headerInfo = state.headers.get(originalIndex);
+						return /* @__PURE__ */ jsx("div", {
+							className: "gp-grid-header-cell",
+							"data-col-index": originalIndex,
+							style: {
+								position: "absolute",
+								left: `${columnPositions[visibleIndex]}px`,
+								top: 0,
+								width: `${columnWidths[visibleIndex]}px`,
+								height: `${headerHeight}px`,
+								background: "transparent"
+							},
+							onClick: (e) => handleHeaderClick(originalIndex, e),
+							children: renderHeader({
+								column,
+								colIndex: originalIndex,
+								sortDirection: headerInfo?.sortDirection,
+								sortIndex: headerInfo?.sortIndex,
+								sortable: headerInfo?.sortable ?? true,
+								filterable: headerInfo?.filterable ?? true,
+								hasFilter: headerInfo?.hasFilter ?? false,
+								coreRef,
+								containerRef,
+								headerRenderers,
+								globalHeaderRenderer: headerRenderer
+							})
+						}, column.colId ?? column.field);
+					})
+				}),
+				slotsArray.map((slot) => {
+					if (slot.rowIndex < 0) return null;
+					return /* @__PURE__ */ jsx("div", {
+						className: ["gp-grid-row", ...coreRef.current?.highlight?.computeRowClasses(slot.rowIndex, slot.rowData) ?? []].filter(Boolean).join(" "),
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							transform: `translateY(${slot.translateY}px)`,
+							width: `${Math.max(state.contentWidth, totalWidth)}px`,
+							height: `${rowHeight}px`
+						},
+						children: visibleColumnsWithIndices.map(({ column, originalIndex }, visibleIndex) => {
+							const isEditing = isCellEditing(slot.rowIndex, originalIndex, state.editingCell);
+							const active = isCellActive(slot.rowIndex, originalIndex, state.activeCell);
+							const selected = isCellSelected(slot.rowIndex, originalIndex, state.selectionRange);
+							return /* @__PURE__ */ jsx("div", {
+								className: [buildCellClasses(active, selected, isEditing, isCellInFillPreview(slot.rowIndex, originalIndex, dragState.dragType === "fill", dragState.fillSourceRange, dragState.fillTarget)), ...coreRef.current?.highlight?.computeCombinedCellClasses(slot.rowIndex, originalIndex, column, slot.rowData) ?? []].filter(Boolean).join(" "),
+								style: {
+									position: "absolute",
+									left: `${columnPositions[visibleIndex]}px`,
+									top: 0,
+									width: `${columnWidths[visibleIndex]}px`,
+									height: `${rowHeight}px`
+								},
+								onMouseDown: (e) => handleCellMouseDown(slot.rowIndex, originalIndex, e),
+								onDoubleClick: () => handleCellDoubleClick(slot.rowIndex, originalIndex),
+								onMouseEnter: () => handleCellMouseEnter(slot.rowIndex, originalIndex),
+								onMouseLeave: handleCellMouseLeave,
+								children: isEditing && state.editingCell ? renderEditCell({
+									column,
+									rowData: slot.rowData,
+									rowIndex: slot.rowIndex,
+									colIndex: originalIndex,
+									initialValue: state.editingCell.initialValue,
+									coreRef,
+									editRenderers,
+									globalEditRenderer: editRenderer
+								}) : renderCell({
+									column,
+									rowData: slot.rowData,
+									rowIndex: slot.rowIndex,
+									colIndex: originalIndex,
+									isActive: active,
+									isSelected: selected,
+									isEditing,
+									cellRenderers,
+									globalCellRenderer: cellRenderer
+								})
+							}, `${slot.slotId}-${originalIndex}`);
+						})
+					}, slot.slotId);
+				}),
+				fillHandlePosition && !state.editingCell && /* @__PURE__ */ jsx("div", {
+					className: "gp-grid-fill-handle",
+					style: {
+						position: "absolute",
+						top: fillHandlePosition.top,
+						left: fillHandlePosition.left,
+						zIndex: 200
+					},
+					onMouseDown: handleFillHandleMouseDown
+				}),
+				state.isLoading && /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-loading",
+					children: [/* @__PURE__ */ jsx("div", { className: "gp-grid-loading-spinner" }), "Loading..."]
+				}),
+				state.error && /* @__PURE__ */ jsxs("div", {
+					className: "gp-grid-error",
+					children: ["Error: ", state.error]
+				}),
+				!state.isLoading && !state.error && state.totalRows === 0 && /* @__PURE__ */ jsx("div", {
+					className: "gp-grid-empty",
+					children: "No data to display"
+				})
+			]
+		}), state.filterPopup?.isOpen && state.filterPopup.column && state.filterPopup.anchorRect && /* @__PURE__ */ jsx(FilterPopup, {
+			column: state.filterPopup.column,
+			colIndex: state.filterPopup.colIndex,
+			anchorRect: state.filterPopup.anchorRect,
+			distinctValues: state.filterPopup.distinctValues,
+			currentFilter: state.filterPopup.currentFilter,
+			onApply: handleFilterApply,
+			onClose: handleFilterPopupClose
+		})]
+	});
+}
+
+//#endregion
+export { Grid, GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource };
+//# sourceMappingURL=index.js.map