@gp-grid/react 0.7.2 → 0.7.4

package/dist/index.js

@@ -1,1662 +1 @@
-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
+import e,{useCallback as t,useEffect as n,useMemo as r,useReducer as i,useRef as a,useState as o}from"react";import{GridCore as s,GridCore as c,buildCellClasses as l,calculateScaledColumnPositions as u,createClientDataSource as d,createClientDataSource as f,createDataSourceFromArray as p,createDataSourceFromArray as m,createMutableClientDataSource as h,createServerDataSource as g,getTotalWidth as _,injectStyles as v,isCellActive as y,isCellEditing as b,isCellInFillPreview as x,isCellSelected as S}from"@gp-grid/core";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";const E=[{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 D({distinctValues:e,currentFilter:n,onApply:i,onClose:a}){let s=t(e=>Array.isArray(e)?e.join(`, `):String(e??``),[]),c=r(()=>{let t=e.filter(e=>e!=null&&e!==``&&!(Array.isArray(e)&&e.length===0)).map(e=>s(e));return Array.from(new Set(t)).sort((e,t)=>{let n=parseFloat(e),r=parseFloat(t);return!isNaN(n)&&!isNaN(r)?n-r:e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})})},[e,s]),l=c.length>100,[u,d]=o(r(()=>{if(!n?.conditions[0])return l?`condition`:`values`;let e=n.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`},[n,l])),f=r(()=>n?.conditions[0]?n.conditions[0].selectedValues??new Set:new Set,[n]),p=r(()=>n?.conditions[0]?n.conditions[0].includeBlank??!0:!0,[n]),[m,h]=o(``),[g,_]=o(f),[v,y]=o(p),[b,x]=o(r(()=>{if(!n?.conditions.length)return[{operator:`contains`,value:``,nextOperator:`and`}];let e=n.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,nextOperator:`and`}];let t=n.combination??`and`;return n.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,nextOperator:n.nextOperator??t}})},[n])),S=r(()=>{if(!m)return c;let e=m.toLowerCase();return c.filter(t=>t.toLowerCase().includes(e))},[c,m]),D=r(()=>e.some(e=>e==null||e===``),[e]),O=r(()=>S.every(e=>g.has(e))&&(!D||v),[S,g,D,v]),k=t(()=>{_(new Set(S)),D&&y(!0)},[S,D]),A=t(()=>{_(new Set),y(!1)},[]),j=t(e=>{_(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),M=t((e,t)=>{x(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),ee=t(()=>{x(e=>[...e,{operator:`contains`,value:``,nextOperator:`and`}])},[]),N=t(e=>{x(t=>t.filter((t,n)=>n!==e))},[]),P=t(()=>{if(u===`values`){if(c.every(e=>g.has(e))&&(!D||v)){i(null);return}i({conditions:[{type:`text`,operator:`equals`,selectedValues:g,includeBlank:v}],combination:`and`})}else{let e=b.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){i(null);return}i({conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}},[u,c,g,v,D,b,i]),F=t(()=>{i(null)},[i]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-text`,children:[!l&&T(`div`,{className:`gp-grid-filter-mode-toggle`,children:[w(`button`,{type:`button`,className:u===`values`?`active`:``,onClick:()=>d(`values`),children:`Values`}),w(`button`,{type:`button`,className:u===`condition`?`active`:``,onClick:()=>d(`condition`),children:`Condition`})]}),l&&u===`condition`&&T(`div`,{className:`gp-grid-filter-info`,children:[`Too many unique values (`,c.length,`). Use conditions to filter.`]}),u===`values`&&T(C,{children:[w(`input`,{className:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,value:m,onChange:e=>h(e.target.value),autoFocus:!0}),T(`div`,{className:`gp-grid-filter-actions`,children:[w(`button`,{type:`button`,onClick:k,disabled:O,children:`Select All`}),w(`button`,{type:`button`,onClick:A,children:`Deselect All`})]}),T(`div`,{className:`gp-grid-filter-list`,children:[D&&T(`label`,{className:`gp-grid-filter-option`,children:[w(`input`,{type:`checkbox`,checked:v,onChange:()=>y(!v)}),w(`span`,{className:`gp-grid-filter-blank`,children:`(Blanks)`})]}),S.map(e=>T(`label`,{className:`gp-grid-filter-option`,children:[w(`input`,{type:`checkbox`,checked:g.has(e),onChange:()=>j(e)}),w(`span`,{children:e})]},e))]})]}),u===`condition`&&T(C,{children:[b.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:b[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>M(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:b[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>M(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>M(t,{operator:e.target.value}),autoFocus:t===0,children:E.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`text`,value:e.value,onChange:e=>M(t,{value:e.target.value}),placeholder:`Value`,className:`gp-grid-filter-text-input`}),b.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>N(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:ee,children:`+ Add condition`})]}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:F,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:P,children:`Apply`})]})]})}const O=[{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 k({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-number`,children:[a.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:O.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`number`,value:e.value,onChange:e=>c(t,{value:e.target.value}),placeholder:`Value`}),e.operator===`between`&&T(C,{children:[w(`span`,{className:`gp-grid-filter-to`,children:`to`}),w(`input`,{type:`number`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value}),placeholder:`Value`})]}),a.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}const A=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function j(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}function M({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:j(n.value),valueTo:j(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-date`,children:[a.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:A.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`date`,value:e.value,onChange:e=>c(t,{value:e.target.value})}),e.operator===`between`&&T(C,{children:[w(`span`,{className:`gp-grid-filter-to`,children:`to`}),w(`input`,{type:`date`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value})})]}),a.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}function ee({column:e,colIndex:r,anchorRect:i,distinctValues:o,currentFilter:s,onApply:c,onClose:l}){let u=a(null);n(()=>{let e=e=>{let t=e.target;t.closest(`.gp-grid-filter-icon`)||u.current&&!u.current.contains(t)&&l()},t=e=>{e.key===`Escape`&&l()};return requestAnimationFrame(()=>{document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)}),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[l]);let d=t(t=>{c(e.colId??e.field,t),l()},[e,c,l]),f={position:`fixed`,top:i.top+i.height+4,left:i.left,minWidth:Math.max(200,i.width),zIndex:1e4},p=e.cellDataType,m=p===`text`||p===`object`,h=p===`number`,g=p===`date`||p===`dateString`||p===`dateTime`||p===`dateTimeString`;return T(`div`,{ref:u,className:`gp-grid-filter-popup`,style:f,children:[T(`div`,{className:`gp-grid-filter-header`,children:[`Filter: `,e.headerName??e.field]}),m&&w(D,{distinctValues:o,currentFilter:s,onApply:d,onClose:l}),h&&w(k,{currentFilter:s,onApply:d,onClose:l}),g&&w(M,{currentFilter:s,onApply:d,onClose:l}),!m&&!h&&!g&&w(D,{distinctValues:o,currentFilter:s,onApply:d,onClose:l})]})}function N(e){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:e?.initialHeight??0,viewportWidth:e?.initialWidth??0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange:null,hoverPosition:null}}function P(e,t,n){switch(e.type){case`CREATE_SLOT`:return t.set(e.slotId,{slotId:e.slotId,rowIndex:-1,rowData:{},translateY:0}),null;case`DESTROY_SLOT`:return t.delete(e.slotId),null;case`ASSIGN_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,rowIndex:e.rowIndex,rowData:e.rowData}),null}case`MOVE_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,translateY:e.translateY}),null}case`SET_ACTIVE_CELL`:return{activeCell:e.position};case`SET_SELECTION_RANGE`:return{selectionRange:e.range};case`UPDATE_VISIBLE_RANGE`:return{visibleRowRange:{start:e.start,end:e.end}};case`SET_HOVER_POSITION`:return{hoverPosition:e.position};case`START_EDIT`:return{editingCell:{row:e.row,col:e.col,initialValue:e.initialValue}};case`STOP_EDIT`:return{editingCell:null};case`SET_CONTENT_SIZE`:return{contentWidth:e.width,contentHeight:e.height,viewportWidth:e.viewportWidth};case`UPDATE_HEADER`:return n.set(e.colIndex,{column:e.column,sortDirection:e.sortDirection,sortIndex:e.sortIndex,sortable:e.sortable,filterable:e.filterable,hasFilter:e.hasFilter}),null;case`OPEN_FILTER_POPUP`:return{filterPopup:{isOpen:!0,colIndex:e.colIndex,column:e.column,anchorRect:e.anchorRect,distinctValues:e.distinctValues,currentFilter:e.currentFilter}};case`CLOSE_FILTER_POPUP`:return{filterPopup:null};case`DATA_LOADING`:return{isLoading:!0,error:null};case`DATA_LOADED`:return{isLoading:!1,totalRows:e.totalRows};case`DATA_ERROR`:return{isLoading:!1,error:e.error};case`ROWS_ADDED`:case`ROWS_REMOVED`:return{totalRows:e.totalRows};case`ROWS_UPDATED`:case`TRANSACTION_PROCESSED`:return null;default:return null}}function F(e,t){if(t.type===`RESET`)return N();let{instructions:n}=t;if(n.length===0)return e;let r=new Map(e.slots),i=new Map(e.headers),a={};for(let e of n){let t=P(e,r,i);t&&(a={...a,...t})}return{...e,...a,slots:r,headers:i}}function I(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function te(e,t,n,r,i,a){let o=I(a,n),s=(o?o.translateY:i+n*r)-t.scrollTop,c=s+r,l=i,u=t.clientHeight;if(s<l)t.scrollTop=e.getScrollTopForRow(n);else if(c>u){let a=t.clientHeight-i,o=Math.floor(a/r),s=Math.max(0,n-o+1);t.scrollTop=e.getScrollTopForRow(s)}}function ne(e,r,i,s){let{activeCell:c,selectionRange:l,editingCell:u,filterPopupOpen:d,rowHeight:f,headerHeight:p,columnPositions:m,visibleColumnsWithIndices:h,slots:g}=s,_=a(null),[v,y]=o({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null});n(()=>{let t=e.current;t?.input&&t.input.updateDeps({getHeaderHeight:()=>p,getRowHeight:()=>f,getColumnPositions:()=>m,getColumnCount:()=>h.length,getOriginalColumnIndex:e=>{let t=h[e];return t?t.originalIndex:e}})},[e,p,f,m,h]);let b=t((e,t)=>{_.current&&clearInterval(_.current),_.current=setInterval(()=>{let n=r.current;n&&(n.scrollTop+=t,n.scrollLeft+=e)},16)},[r]),x=t(()=>{_.current&&=(clearInterval(_.current),null)},[]),S=t(()=>{let e=r.current;if(!e)return null;let t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}},[r]),C=e=>({clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}),w=t(()=>{let t=t=>{let n=e.current,r=S();if(!n?.input||!r)return;let i=n.input.handleDragMove(C(t),r);i&&(i.autoScroll?b(i.autoScroll.dx,i.autoScroll.dy):x(),y(n.input.getDragState()))},n=()=>{let r=e.current;r?.input&&(r.input.handleDragEnd(),y(r.input.getDragState())),x(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)},[e,S,b,x]),T=t((t,n,i)=>{let a=e.current;if(!a?.input)return;let o=a.input.handleCellMouseDown(t,n,C(i));o.focusContainer&&r.current?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),y(a.input.getDragState()),w())},[e,r,w]),E=t((t,n)=>{let r=e.current;r?.input&&r.input.handleCellDoubleClick(t,n)},[e]),D=t(t=>{let n=e.current;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(c,l,C(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(y(n.input.getDragState()),w())},[e,c,l,w]),O=t((t,n)=>{let r=e.current;if(!r?.input)return;let a=i[t];if(!a)return;let o=a.colId??a.field;r.input.handleHeaderClick(o,n.shiftKey)},[e,i]),k=t(t=>{let n=e.current,i=r.current;if(!n?.input)return;let a=n.input.handleKeyDown({key:t.key,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey},c,u,d);a.preventDefault&&t.preventDefault(),a.scrollToCell&&i&&te(n,i,a.scrollToCell.row,f,p,g)},[e,r,c,u,d,f,p,g]),A=t((t,n)=>{let i=e.current,a=r.current;if(!i?.input||!a)return;let o=i.input.handleWheel(t.deltaY,t.deltaX,n);o&&(t.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)},[e,r]);return n(()=>()=>{x()},[x]),{handleCellMouseDown:T,handleCellDoubleClick:E,handleFillHandleMouseDown:D,handleHeaderClick:O,handleKeyDown:k,handleWheel:A,dragState:v}}function L(e,t){let n=t.split(`.`),r=e;for(let e of n){if(typeof r!=`object`||!r)return null;r=r[e]}return r??null}function re(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s,cellRenderers:c,globalCellRenderer:l}=e,u=L(n,t.field),d={value:u,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s};if(t.cellRenderer&&typeof t.cellRenderer==`string`){let e=c[t.cellRenderer];if(e)return e(d)}return l?l(d):u==null?``:String(u)}function ie(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,coreRef:o,editRenderers:s,globalEditRenderer:c}=e,l=o.current;if(!l)return null;let u={value:L(n,t.field),rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>l.updateEditValue(e),onCommit:()=>l.commitEdit(),onCancel:()=>l.cancelEdit()};if(t.editRenderer&&typeof t.editRenderer==`string`){let e=s[t.editRenderer];if(e)return e(u)}return c?c(u):w(`input`,{className:`gp-grid-edit-input`,type:`text`,defaultValue:a==null?``:String(a),autoFocus:!0,onFocus:e=>e.target.select(),onChange:e=>l.updateEditValue(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`?l.commitEdit():e.key===`Escape`?l.cancelEdit():e.key===`Tab`&&(e.preventDefault(),l.commitEdit(),l.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>l.commitEdit()})}function ae(e){let{column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,coreRef:c,containerRef:l,headerRenderers:u,globalHeaderRenderer:d}=e,f=c.current,p={column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,onSort:(e,n)=>{f&&a&&f.setSort(t.colId??t.field,e,n)},onFilterClick:()=>{if(f&&o){let e=l.current?.querySelector(`[data-col-index="${n}"]`);if(e){let t=e.getBoundingClientRect();f.openFilterPopup(n,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(t.headerRenderer&&typeof t.headerRenderer==`string`){let e=u[t.headerRenderer];if(e)return e(p)}return d?d(p):T(C,{children:[w(`span`,{className:`gp-grid-header-text`,children:t.headerName??t.field}),T(`span`,{className:`gp-grid-header-icons`,children:[a&&T(`span`,{className:`gp-grid-sort-arrows`,children:[T(`span`,{className:`gp-grid-sort-arrows-stack`,children:[w(`svg`,{className:`gp-grid-sort-arrow-up${r===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:w(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})}),w(`svg`,{className:`gp-grid-sort-arrow-down${r===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:w(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})})]}),i!==void 0&&i>0&&w(`span`,{className:`gp-grid-sort-index`,children:i})]}),o&&w(`span`,{className:`gp-grid-filter-icon${s?` active`:``}`,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),p.onFilterClick()},onClick:e=>{e.stopPropagation()},children:w(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,children:w(`path`,{d:`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`})})})]})]})}function R(e){v();let{columns:o,dataSource:s,rowData:d,rowHeight:p,headerHeight:h=p,overscan:g=3,sortingEnabled:C=!0,darkMode:E=!1,wheelDampening:D=.1,cellRenderers:O={},editRenderers:k={},headerRenderers:A={},cellRenderer:j,editRenderer:M,headerRenderer:P,initialWidth:I,initialHeight:te,gridRef:L,highlighting:R}=e,z=a(null),B=a(null),oe=a(null),se=a(!1),[V,H]=i(F,{initialWidth:I,initialHeight:te},N),U=h,W=a(null),G=W.current;(!G||G.providedDataSource!==s||G.rowData!==d)&&(G?.ownsDataSource&&G.dataSource.destroy?.(),s?W.current={dataSource:s,ownsDataSource:!1,providedDataSource:s,rowData:d}:d?W.current={dataSource:m(d),ownsDataSource:!0,providedDataSource:s,rowData:d}:W.current={dataSource:f([]),ownsDataSource:!0,providedDataSource:s,rowData:d});let{dataSource:K,ownsDataSource:ce}=W.current;n(()=>()=>{W.current?.ownsDataSource&&(W.current.dataSource.destroy?.(),W.current=null)},[]),n(()=>{let e=oe.current;e&&e!==K&&H({type:`RESET`}),oe.current=K},[K]);let q=r(()=>o.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden),[o]),{positions:J,widths:Y}=r(()=>u(q.map(e=>e.column),V.viewportWidth),[q,V.viewportWidth]),X=_(J),{handleCellMouseDown:le,handleCellDoubleClick:ue,handleFillHandleMouseDown:de,handleHeaderClick:fe,handleKeyDown:pe,handleWheel:me,dragState:Z}=ne(B,z,o,{activeCell:V.activeCell,selectionRange:V.selectionRange,editingCell:V.editingCell,filterPopupOpen:V.filterPopup?.isOpen??!1,rowHeight:p,headerHeight:U,columnPositions:J,visibleColumnsWithIndices:q,slots:V.slots});n(()=>{se.current&&H({type:`RESET`}),se.current=!0;let e=new c({columns:o,dataSource:K,rowHeight:p,headerHeight:U,overscan:g,sortingEnabled:C,highlighting:R});B.current=e,e.input.updateDeps({getHeaderHeight:()=>U,getRowHeight:()=>p,getColumnPositions:()=>J,getColumnCount:()=>q.length,getOriginalColumnIndex:e=>{let t=q[e];return t?t.originalIndex:e}}),L&&(L.current={core:e});let t=e.onBatchInstruction(e=>{H({type:`BATCH_INSTRUCTIONS`,instructions:e})});e.initialize();let n=z.current;return n&&e.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight),()=>{t(),e.destroy(),B.current=null,L&&(L.current=null)}},[o,K,p,U,g,C,L,R]),n(()=>{let e=K;if(e.subscribe)return e.subscribe(()=>{B.current?.refresh()})},[K]);let Q=t(()=>{let e=z.current,t=B.current;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},[]);n(()=>{let e=z.current,t=B.current;if(!e||!t)return;if(typeof ResizeObserver>`u`){Q();return}let n=new ResizeObserver(()=>{t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)});return n.observe(e),Q(),()=>n.disconnect()},[Q]),n(()=>{let e=z.current;if(!e)return;let t=e=>{me(e,D)};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[me,D]);let he=t((e,t)=>{let n=B.current;n&&n.setFilter(e,t)},[]),ge=t(()=>{let e=B.current;e&&e.closeFilterPopup()},[]),_e=t((e,t)=>{B.current?.input.handleCellMouseEnter(e,t)},[]),ve=t(()=>{B.current?.input.handleCellMouseLeave()},[]),ye=r(()=>Array.from(V.slots.values()),[V.slots]),$=r(()=>{let{activeCell:e,selectionRange:t,slots:n}=V;if(!e&&!t)return null;let r,i,a,s;if(t)r=Math.max(t.startRow,t.endRow),i=Math.max(t.startCol,t.endCol),a=Math.min(t.startCol,t.endCol),s=Math.max(t.startCol,t.endCol);else if(e)r=e.row,i=e.col,a=i,s=i;else return null;for(let e=a;e<=s;e++){let t=o[e];if(!(!t||t.hidden)&&t.editable!==!0)return null}let c=q.findIndex(e=>e.originalIndex===i);if(c===-1)return null;let l=null;for(let e of n.values())if(e.rowIndex===r){l=e.translateY;break}if(l===null)return null;let u=J[c]??0,d=Y[c]??0;return{top:l+p-5,left:u+d-20}},[V.activeCell,V.selectionRange,V.slots,p,J,Y,o,q]);return T(`div`,{ref:z,className:`gp-grid-container${E?` gp-grid-container--dark`:``}`,style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},onScroll:Q,onKeyDown:pe,tabIndex:0,children:[T(`div`,{style:{width:Math.max(V.contentWidth,X),height:Math.max(V.contentHeight,U),position:`relative`,minWidth:`100%`},children:[w(`div`,{className:`gp-grid-header`,style:{position:`sticky`,top:0,left:0,height:h,width:Math.max(V.contentWidth,X),minWidth:`100%`},children:q.map(({column:e,originalIndex:t},n)=>{let r=V.headers.get(t);return w(`div`,{className:`gp-grid-header-cell`,"data-col-index":t,style:{position:`absolute`,left:`${J[n]}px`,top:0,width:`${Y[n]}px`,height:`${h}px`,background:`transparent`},onClick:e=>fe(t,e),children:ae({column:e,colIndex:t,sortDirection:r?.sortDirection,sortIndex:r?.sortIndex,sortable:r?.sortable??!0,filterable:r?.filterable??!0,hasFilter:r?.hasFilter??!1,coreRef:B,containerRef:z,headerRenderers:A,globalHeaderRenderer:P})},e.colId??e.field)})}),ye.map(e=>e.rowIndex<0?null:w(`div`,{className:[`gp-grid-row`,...B.current?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,top:0,left:0,transform:`translateY(${e.translateY}px)`,width:`${Math.max(V.contentWidth,X)}px`,height:`${p}px`},children:q.map(({column:t,originalIndex:n},r)=>{let i=b(e.rowIndex,n,V.editingCell),a=y(e.rowIndex,n,V.activeCell),o=S(e.rowIndex,n,V.selectionRange);return w(`div`,{className:[l(a,o,i,x(e.rowIndex,n,Z.dragType===`fill`,Z.fillSourceRange,Z.fillTarget)),...B.current?.highlight?.computeCombinedCellClasses(e.rowIndex,n,t,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,left:`${J[r]}px`,top:0,width:`${Y[r]}px`,height:`${p}px`},onMouseDown:t=>le(e.rowIndex,n,t),onDoubleClick:()=>ue(e.rowIndex,n),onMouseEnter:()=>_e(e.rowIndex,n),onMouseLeave:ve,children:i&&V.editingCell?ie({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,initialValue:V.editingCell.initialValue,coreRef:B,editRenderers:k,globalEditRenderer:M}):re({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,isActive:a,isSelected:o,isEditing:i,cellRenderers:O,globalCellRenderer:j})},`${e.slotId}-${n}`)})},e.slotId)),$&&!V.editingCell&&w(`div`,{className:`gp-grid-fill-handle`,style:{position:`absolute`,top:$.top,left:$.left,zIndex:200},onMouseDown:de}),V.isLoading&&T(`div`,{className:`gp-grid-loading`,children:[w(`div`,{className:`gp-grid-loading-spinner`}),`Loading...`]}),V.error&&T(`div`,{className:`gp-grid-error`,children:[`Error: `,V.error]}),!V.isLoading&&!V.error&&V.totalRows===0&&w(`div`,{className:`gp-grid-empty`,children:`No data to display`})]}),V.filterPopup?.isOpen&&V.filterPopup.column&&V.filterPopup.anchorRect&&w(ee,{column:V.filterPopup.column,colIndex:V.filterPopup.colIndex,anchorRect:V.filterPopup.anchorRect,distinctValues:V.filterPopup.distinctValues,currentFilter:V.filterPopup.currentFilter,onApply:he,onClose:ge})]})}export{R as Grid,s as GridCore,d as createClientDataSource,p as createDataSourceFromArray,h as createMutableClientDataSource,g as createServerDataSource};