gp-grid-react 0.1.0

package/dist/index.js

@@ -0,0 +1,1169 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { GridCore, createClientDataSource, createClientDataSource as createClientDataSource$1, createDataSourceFromArray, createDataSourceFromArray as createDataSourceFromArray$1, createServerDataSource } from "gp-grid-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/styles.ts
+const STYLE_ID = "gp-grid-styles";
+const gridStyles = `
+/* =============================================================================
+   GP Grid - CSS Variables for Theming
+   ============================================================================= */
+
+.gp-grid-container {
+  /* Colors - Light Mode (default) */
+  --gp-grid-bg: #ffffff;
+  --gp-grid-bg-alt: #f8f9fa;
+  --gp-grid-text: #212529;
+  --gp-grid-text-secondary: #6c757d;
+  --gp-grid-text-muted: #adb5bd;
+  --gp-grid-border: #dee2e6;
+  --gp-grid-border-light: #e9ecef;
+  
+  /* Header */
+  --gp-grid-header-bg: #f1f3f5;
+  --gp-grid-header-text: #212529;
+  
+  /* Selection */
+  --gp-grid-primary: #228be6;
+  --gp-grid-primary-light: #e7f5ff;
+  --gp-grid-primary-border: #74c0fc;
+  --gp-grid-hover: #f1f3f5;
+  
+  /* Filter */
+  --gp-grid-filter-bg: #f8f9fa;
+  --gp-grid-input-bg: #ffffff;
+  --gp-grid-input-border: #ced4da;
+  
+  /* Error */
+  --gp-grid-error-bg: #fff5f5;
+  --gp-grid-error-text: #c92a2a;
+  
+  /* Loading */
+  --gp-grid-loading-bg: rgba(255, 255, 255, 0.95);
+  --gp-grid-loading-text: #495057;
+  
+  /* Scrollbar */
+  --gp-grid-scrollbar-track: #f1f3f5;
+  --gp-grid-scrollbar-thumb: #ced4da;
+  --gp-grid-scrollbar-thumb-hover: #adb5bd;
+}
+
+/* Dark Mode */
+.gp-grid-container--dark {
+  --gp-grid-bg: #1a1b1e;
+  --gp-grid-bg-alt: #25262b;
+  --gp-grid-text: #c1c2c5;
+  --gp-grid-text-secondary: #909296;
+  --gp-grid-text-muted: #5c5f66;
+  --gp-grid-border: #373a40;
+  --gp-grid-border-light: #2c2e33;
+  
+  /* Header */
+  --gp-grid-header-bg: #25262b;
+  --gp-grid-header-text: #c1c2c5;
+  
+  /* Selection */
+  --gp-grid-primary: #339af0;
+  --gp-grid-primary-light: #1c3d5a;
+  --gp-grid-primary-border: #1c7ed6;
+  --gp-grid-hover: #2c2e33;
+  
+  /* Filter */
+  --gp-grid-filter-bg: #25262b;
+  --gp-grid-input-bg: #1a1b1e;
+  --gp-grid-input-border: #373a40;
+  
+  /* Error */
+  --gp-grid-error-bg: #2c1a1a;
+  --gp-grid-error-text: #ff6b6b;
+  
+  /* Loading */
+  --gp-grid-loading-bg: rgba(26, 27, 30, 0.95);
+  --gp-grid-loading-text: #c1c2c5;
+  
+  /* Scrollbar */
+  --gp-grid-scrollbar-track: #25262b;
+  --gp-grid-scrollbar-thumb: #373a40;
+  --gp-grid-scrollbar-thumb-hover: #4a4d52;
+}
+
+/* =============================================================================
+   GP Grid - Clean Flat Design
+   ============================================================================= */
+
+/* Grid Container */
+.gp-grid-container {
+  outline: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gp-grid-text);
+  background-color: var(--gp-grid-bg);
+  border: 1px solid var(--gp-grid-border);
+  border-radius: 6px;
+}
+
+.gp-grid-container:focus {
+  outline: none;
+  border-color: var(--gp-grid-primary);
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+.gp-grid-header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background-color: var(--gp-grid-header-bg);
+  border-bottom: 1px solid var(--gp-grid-border);
+}
+
+.gp-grid-container .gp-grid-header-cell {
+  position: absolute;
+  box-sizing: border-box;
+  border-right: 1px solid var(--gp-grid-border);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--gp-grid-header-text);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  background-color: transparent;
+  transition: background-color 0.1s ease;
+}
+
+.gp-grid-container .gp-grid-header-cell:hover {
+  background-color: var(--gp-grid-hover);
+}
+
+.gp-grid-container .gp-grid-header-cell:active {
+  background-color: var(--gp-grid-border-light);
+}
+
+.gp-grid-container .gp-grid-header-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--gp-grid-header-text);
+}
+
+.gp-grid-sort-indicator {
+  margin-left: 6px;
+  font-size: 10px;
+  color: var(--gp-grid-primary);
+  display: flex;
+  align-items: center;
+}
+
+.gp-grid-sort-index {
+  font-size: 9px;
+  margin-left: 2px;
+  color: var(--gp-grid-text-secondary);
+}
+
+/* =============================================================================
+   Filter Row
+   ============================================================================= */
+
+.gp-grid-filter-row {
+  position: sticky;
+  left: 0;
+  z-index: 99;
+  background-color: var(--gp-grid-filter-bg);
+  border-bottom: 1px solid var(--gp-grid-border);
+}
+
+.gp-grid-filter-cell {
+  position: absolute;
+  box-sizing: border-box;
+  border-right: 1px solid var(--gp-grid-border);
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  background-color: var(--gp-grid-filter-bg);
+}
+
+.gp-grid-filter-input {
+  width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  font-family: inherit;
+  font-size: 12px;
+  border: 1px solid var(--gp-grid-input-border);
+  border-radius: 4px;
+  background-color: var(--gp-grid-input-bg);
+  color: var(--gp-grid-text);
+  transition: border-color 0.15s ease;
+}
+
+.gp-grid-filter-input:focus {
+  outline: none;
+  border-color: var(--gp-grid-primary);
+}
+
+.gp-grid-filter-input::placeholder {
+  color: var(--gp-grid-text-muted);
+}
+
+/* =============================================================================
+   Data Cells
+   ============================================================================= */
+
+.gp-grid-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.gp-grid-cell {
+  position: absolute;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  cursor: cell;
+  color: var(--gp-grid-text);
+  border-right: 1px solid var(--gp-grid-border-light);
+  border-bottom: 1px solid var(--gp-grid-border-light);
+  background-color: var(--gp-grid-bg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Alternating row colors */
+.gp-grid-row--even .gp-grid-cell {
+  background-color: var(--gp-grid-bg-alt);
+}
+
+.gp-grid-cell:hover {
+  background-color: var(--gp-grid-hover) !important;
+}
+
+/* Active cell (focused) */
+.gp-grid-cell--active {
+  background-color: var(--gp-grid-primary-light) !important;
+  border: 2px solid var(--gp-grid-primary) !important;
+  outline: none;
+  z-index: 5;
+  padding: 0 11px;
+}
+
+/* Selected cells (range selection) */
+.gp-grid-cell--selected {
+  background-color: var(--gp-grid-primary-light) !important;
+}
+
+/* Editing cell */
+.gp-grid-cell--editing {
+  background-color: var(--gp-grid-bg) !important;
+  border: 2px solid var(--gp-grid-primary) !important;
+  padding: 0 !important;
+  z-index: 10;
+}
+
+/* =============================================================================
+   Fill Handle (drag to fill)
+   ============================================================================= */
+
+.gp-grid-fill-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--gp-grid-primary);
+  border: 2px solid var(--gp-grid-bg);
+  cursor: crosshair;
+  z-index: 100;
+  pointer-events: auto;
+  box-sizing: border-box;
+  border-radius: 1px;
+}
+
+.gp-grid-fill-handle:hover {
+  transform: scale(1.2);
+}
+
+/* Fill preview (cells being filled) */
+.gp-grid-cell--fill-preview {
+  background-color: var(--gp-grid-primary-light) !important;
+  border: 1px dashed var(--gp-grid-primary) !important;
+}
+
+/* =============================================================================
+   Edit Input
+   ============================================================================= */
+
+.gp-grid-edit-input {
+  width: 100%;
+  height: 100%;
+  padding: 0 11px;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--gp-grid-text);
+  border: none;
+  background-color: transparent;
+}
+
+.gp-grid-edit-input:focus {
+  outline: none;
+}
+
+/* =============================================================================
+   Loading & Error States
+   ============================================================================= */
+
+.gp-grid-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: var(--gp-grid-loading-bg);
+  color: var(--gp-grid-loading-text);
+  border-radius: 6px;
+  border: 1px solid var(--gp-grid-border);
+  font-weight: 500;
+  font-size: 13px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gp-grid-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--gp-grid-border);
+  border-top-color: var(--gp-grid-primary);
+  border-radius: 50%;
+  animation: gp-grid-spin 0.7s linear infinite;
+}
+
+@keyframes gp-grid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.gp-grid-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: var(--gp-grid-error-bg);
+  color: var(--gp-grid-error-text);
+  border-radius: 6px;
+  border: 1px solid var(--gp-grid-error-text);
+  font-weight: 500;
+  font-size: 13px;
+  z-index: 1000;
+  max-width: 80%;
+  text-align: center;
+}
+
+/* =============================================================================
+   Empty State
+   ============================================================================= */
+
+.gp-grid-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--gp-grid-text-muted);
+  font-size: 14px;
+  text-align: center;
+}
+
+/* =============================================================================
+   Scrollbar Styling
+   ============================================================================= */
+
+.gp-grid-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gp-grid-container::-webkit-scrollbar-track {
+  background-color: var(--gp-grid-scrollbar-track);
+}
+
+.gp-grid-container::-webkit-scrollbar-thumb {
+  background-color: var(--gp-grid-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.gp-grid-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--gp-grid-scrollbar-thumb-hover);
+}
+
+.gp-grid-container::-webkit-scrollbar-corner {
+  background-color: var(--gp-grid-scrollbar-track);
+}
+`;
+let stylesInjected = false;
+/**
+* Inject grid styles into the document head.
+* This is called automatically when the Grid component mounts.
+* Styles are only injected once, even if multiple Grid instances exist.
+*/
+function injectStyles() {
+	if (stylesInjected) return;
+	if (typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID)) {
+		stylesInjected = true;
+		return;
+	}
+	const styleElement = document.createElement("style");
+	styleElement.id = STYLE_ID;
+	styleElement.textContent = gridStyles;
+	document.head.appendChild(styleElement);
+	stylesInjected = true;
+}
+
+//#endregion
+//#region src/Grid.tsx
+/**
+* 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 "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
+		};
+		case "UPDATE_HEADER":
+			headers.set(instruction.colIndex, {
+				column: instruction.column,
+				sortDirection: instruction.sortDirection,
+				sortIndex: instruction.sortIndex
+			});
+			return 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
+		};
+		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
+	};
+}
+function createInitialState() {
+	return {
+		slots: /* @__PURE__ */ new Map(),
+		activeCell: null,
+		selectionRange: null,
+		editingCell: null,
+		contentWidth: 0,
+		contentHeight: 0,
+		headers: /* @__PURE__ */ new Map(),
+		isLoading: false,
+		error: null,
+		totalRows: 0
+	};
+}
+function Grid(props) {
+	injectStyles();
+	const { columns, dataSource: providedDataSource, rowData, rowHeight, headerHeight = rowHeight, overscan = 3, showFilters = false, filterDebounce = 300, darkMode = false, cellRenderers = {}, editRenderers = {}, headerRenderers = {}, cellRenderer, editRenderer, headerRenderer } = props;
+	const containerRef = useRef(null);
+	const coreRef = useRef(null);
+	const [state, dispatch] = useReducer(gridReducer, null, createInitialState);
+	const [filterValues, setFilterValues] = useState({});
+	const filterTimeoutRef = useRef({});
+	const [isDraggingFill, setIsDraggingFill] = useState(false);
+	const [fillTarget, setFillTarget] = useState(null);
+	const [fillSourceRange, setFillSourceRange] = useState(null);
+	const autoScrollIntervalRef = useRef(null);
+	const filterRowHeight = showFilters ? 40 : 0;
+	const totalHeaderHeight = headerHeight + filterRowHeight;
+	const dataSource = useMemo(() => {
+		if (providedDataSource) return providedDataSource;
+		if (rowData) return createDataSourceFromArray$1(rowData);
+		return createClientDataSource$1([]);
+	}, [providedDataSource, rowData]);
+	const columnPositions = useMemo(() => {
+		const positions = [0];
+		let pos = 0;
+		for (const col of columns) {
+			pos += col.width;
+			positions.push(pos);
+		}
+		return positions;
+	}, [columns]);
+	const totalWidth = columnPositions[columnPositions.length - 1] ?? 0;
+	useEffect(() => {
+		const core = new GridCore({
+			columns,
+			dataSource,
+			rowHeight,
+			headerHeight: totalHeaderHeight,
+			overscan
+		});
+		coreRef.current = core;
+		const unsubscribe = core.onBatchInstruction((instructions) => {
+			dispatch({
+				type: "BATCH_INSTRUCTIONS",
+				instructions
+			});
+		});
+		core.initialize();
+		return () => {
+			unsubscribe();
+			coreRef.current = null;
+		};
+	}, [
+		columns,
+		dataSource,
+		rowHeight,
+		totalHeaderHeight,
+		overscan
+	]);
+	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;
+		const resizeObserver = new ResizeObserver(() => {
+			core.setViewport(container.scrollTop, container.scrollLeft, container.clientWidth, container.clientHeight);
+		});
+		resizeObserver.observe(container);
+		handleScroll();
+		return () => resizeObserver.disconnect();
+	}, [handleScroll]);
+	const handleFilterChange = useCallback((colId, value) => {
+		setFilterValues((prev) => ({
+			...prev,
+			[colId]: value
+		}));
+		if (filterTimeoutRef.current[colId]) clearTimeout(filterTimeoutRef.current[colId]);
+		filterTimeoutRef.current[colId] = setTimeout(() => {
+			const core = coreRef.current;
+			if (core) core.setFilter(colId, value);
+		}, filterDebounce);
+	}, [filterDebounce]);
+	const handleKeyDown = useCallback((e) => {
+		const core = coreRef.current;
+		if (!core) return;
+		if (state.editingCell && e.key !== "Enter" && e.key !== "Escape" && e.key !== "Tab") return;
+		const { selection } = core;
+		const isShift = e.shiftKey;
+		const isCtrl = e.ctrlKey || e.metaKey;
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				selection.moveFocus("up", isShift);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				selection.moveFocus("down", isShift);
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				selection.moveFocus("left", isShift);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				selection.moveFocus("right", isShift);
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (state.editingCell) core.commitEdit();
+				else if (state.activeCell) core.startEdit(state.activeCell.row, state.activeCell.col);
+				break;
+			case "Escape":
+				e.preventDefault();
+				if (state.editingCell) core.cancelEdit();
+				else selection.clearSelection();
+				break;
+			case "Tab":
+				e.preventDefault();
+				if (state.editingCell) core.commitEdit();
+				selection.moveFocus(isShift ? "left" : "right", false);
+				break;
+			case "a":
+				if (isCtrl) {
+					e.preventDefault();
+					selection.selectAll();
+				}
+				break;
+			case "c":
+				if (isCtrl) {
+					e.preventDefault();
+					selection.copySelectionToClipboard();
+				}
+				break;
+			case "F2":
+				e.preventDefault();
+				if (state.activeCell && !state.editingCell) core.startEdit(state.activeCell.row, state.activeCell.col);
+				break;
+			case "Delete":
+			case "Backspace":
+				if (state.activeCell && !state.editingCell) {
+					e.preventDefault();
+					core.startEdit(state.activeCell.row, state.activeCell.col);
+				}
+				break;
+			default:
+				if (state.activeCell && !state.editingCell && !isCtrl && e.key.length === 1) core.startEdit(state.activeCell.row, state.activeCell.col);
+				break;
+		}
+	}, [state.activeCell, state.editingCell]);
+	useEffect(() => {
+		if (!state.activeCell || !containerRef.current || state.editingCell) return;
+		const { row, col } = state.activeCell;
+		const container = containerRef.current;
+		const cellTop = row * rowHeight + totalHeaderHeight;
+		const cellBottom = cellTop + rowHeight;
+		const cellLeft = columnPositions[col] ?? 0;
+		const cellRight = cellLeft + (columns[col]?.width ?? 0);
+		const visibleTop = container.scrollTop + totalHeaderHeight;
+		const visibleBottom = container.scrollTop + container.clientHeight;
+		const visibleLeft = container.scrollLeft;
+		const visibleRight = container.scrollLeft + container.clientWidth;
+		if (cellTop < visibleTop) container.scrollTop = cellTop - totalHeaderHeight;
+		else if (cellBottom > visibleBottom) container.scrollTop = cellBottom - container.clientHeight;
+		if (cellLeft < visibleLeft) container.scrollLeft = cellLeft;
+		else if (cellRight > visibleRight) container.scrollLeft = cellRight - container.clientWidth;
+	}, [
+		state.activeCell,
+		state.editingCell,
+		rowHeight,
+		totalHeaderHeight,
+		columnPositions,
+		columns
+	]);
+	const handleCellClick = useCallback((rowIndex, colIndex, e) => {
+		const core = coreRef.current;
+		if (!core || core.getEditState() !== null) return;
+		containerRef.current?.focus();
+		core.selection.startSelection({
+			row: rowIndex,
+			col: colIndex
+		}, {
+			shift: e.shiftKey,
+			ctrl: e.ctrlKey || e.metaKey
+		});
+	}, []);
+	const handleCellDoubleClick = useCallback((rowIndex, colIndex) => {
+		const core = coreRef.current;
+		if (!core) return;
+		core.startEdit(rowIndex, colIndex);
+	}, []);
+	const handleHeaderClick = useCallback((colIndex, e) => {
+		const core = coreRef.current;
+		if (!core) return;
+		const column = columns[colIndex];
+		if (!column) return;
+		const colId = column.colId ?? column.field;
+		const currentDirection = state.headers.get(colIndex)?.sortDirection;
+		let newDirection;
+		if (!currentDirection) newDirection = "asc";
+		else if (currentDirection === "asc") newDirection = "desc";
+		else newDirection = null;
+		core.setSort(colId, newDirection, e.shiftKey);
+	}, [columns, state.headers]);
+	const handleFillHandleMouseDown = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const core = coreRef.current;
+		if (!core) return;
+		const { activeCell, selectionRange } = state;
+		if (!activeCell && !selectionRange) return;
+		const sourceRange = selectionRange ?? {
+			startRow: activeCell.row,
+			startCol: activeCell.col,
+			endRow: activeCell.row,
+			endCol: activeCell.col
+		};
+		core.fill.startFillDrag(sourceRange);
+		setFillSourceRange(sourceRange);
+		setFillTarget({
+			row: Math.max(sourceRange.startRow, sourceRange.endRow),
+			col: Math.max(sourceRange.startCol, sourceRange.endCol)
+		});
+		setIsDraggingFill(true);
+	}, [state.activeCell, state.selectionRange]);
+	useEffect(() => {
+		if (!isDraggingFill) return;
+		const SCROLL_THRESHOLD = 40;
+		const SCROLL_SPEED = 10;
+		const handleMouseMove = (e) => {
+			const core = coreRef.current;
+			const container = containerRef.current;
+			if (!core || !container) return;
+			const rect = container.getBoundingClientRect();
+			const scrollLeft = container.scrollLeft;
+			const scrollTop = container.scrollTop;
+			const mouseX = e.clientX - rect.left + scrollLeft;
+			const mouseY = e.clientY - rect.top + scrollTop - totalHeaderHeight;
+			const targetRow = Math.max(0, Math.floor(mouseY / rowHeight));
+			let targetCol = 0;
+			for (let i = 0; i < columnPositions.length - 1; i++) {
+				if (mouseX >= columnPositions[i] && mouseX < columnPositions[i + 1]) {
+					targetCol = i;
+					break;
+				}
+				if (mouseX >= columnPositions[columnPositions.length - 1]) targetCol = columnPositions.length - 2;
+			}
+			core.fill.updateFillDrag(targetRow, targetCol);
+			setFillTarget({
+				row: targetRow,
+				col: targetCol
+			});
+			const mouseYInContainer = e.clientY - rect.top;
+			const mouseXInContainer = e.clientX - rect.left;
+			if (autoScrollIntervalRef.current) {
+				clearInterval(autoScrollIntervalRef.current);
+				autoScrollIntervalRef.current = null;
+			}
+			let scrollDeltaX = 0;
+			let scrollDeltaY = 0;
+			if (mouseYInContainer < SCROLL_THRESHOLD + totalHeaderHeight) scrollDeltaY = -SCROLL_SPEED;
+			else if (mouseYInContainer > rect.height - SCROLL_THRESHOLD) scrollDeltaY = SCROLL_SPEED;
+			if (mouseXInContainer < SCROLL_THRESHOLD) scrollDeltaX = -SCROLL_SPEED;
+			else if (mouseXInContainer > rect.width - SCROLL_THRESHOLD) scrollDeltaX = SCROLL_SPEED;
+			if (scrollDeltaX !== 0 || scrollDeltaY !== 0) autoScrollIntervalRef.current = setInterval(() => {
+				if (containerRef.current) {
+					containerRef.current.scrollTop += scrollDeltaY;
+					containerRef.current.scrollLeft += scrollDeltaX;
+				}
+			}, 16);
+		};
+		const handleMouseUp = () => {
+			if (autoScrollIntervalRef.current) {
+				clearInterval(autoScrollIntervalRef.current);
+				autoScrollIntervalRef.current = null;
+			}
+			const core = coreRef.current;
+			if (core) {
+				core.fill.commitFillDrag();
+				core.refreshSlotData();
+			}
+			setIsDraggingFill(false);
+			setFillTarget(null);
+			setFillSourceRange(null);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			if (autoScrollIntervalRef.current) {
+				clearInterval(autoScrollIntervalRef.current);
+				autoScrollIntervalRef.current = null;
+			}
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [
+		isDraggingFill,
+		totalHeaderHeight,
+		rowHeight,
+		columnPositions
+	]);
+	const isSelected = useCallback((row, col) => {
+		const { selectionRange } = state;
+		if (!selectionRange) return false;
+		const minRow = Math.min(selectionRange.startRow, selectionRange.endRow);
+		const maxRow = Math.max(selectionRange.startRow, selectionRange.endRow);
+		const minCol = Math.min(selectionRange.startCol, selectionRange.endCol);
+		const maxCol = Math.max(selectionRange.startCol, selectionRange.endCol);
+		return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol;
+	}, [state.selectionRange]);
+	const isActiveCell = useCallback((row, col) => {
+		return state.activeCell?.row === row && state.activeCell?.col === col;
+	}, [state.activeCell]);
+	const isEditingCell = useCallback((row, col) => {
+		return state.editingCell?.row === row && state.editingCell?.col === col;
+	}, [state.editingCell]);
+	const isInFillPreview = useCallback((row, col) => {
+		if (!isDraggingFill || !fillSourceRange || !fillTarget) return false;
+		const srcMinRow = Math.min(fillSourceRange.startRow, fillSourceRange.endRow);
+		const srcMaxRow = Math.max(fillSourceRange.startRow, fillSourceRange.endRow);
+		const srcMinCol = Math.min(fillSourceRange.startCol, fillSourceRange.endCol);
+		const srcMaxCol = Math.max(fillSourceRange.startCol, fillSourceRange.endCol);
+		const fillDown = fillTarget.row > srcMaxRow;
+		const fillUp = fillTarget.row < srcMinRow;
+		const fillRight = fillTarget.col > srcMaxCol;
+		const fillLeft = fillTarget.col < srcMinCol;
+		if (fillDown) return row > srcMaxRow && row <= fillTarget.row && col >= srcMinCol && col <= srcMaxCol;
+		if (fillUp) return row < srcMinRow && row >= fillTarget.row && col >= srcMinCol && col <= srcMaxCol;
+		if (fillRight) return col > srcMaxCol && col <= fillTarget.col && row >= srcMinRow && row <= srcMaxRow;
+		if (fillLeft) return col < srcMinCol && col >= fillTarget.col && row >= srcMinRow && row <= srcMaxRow;
+		return false;
+	}, [
+		isDraggingFill,
+		fillSourceRange,
+		fillTarget
+	]);
+	const getCellValue = useCallback((rowData$1, field) => {
+		const parts = field.split(".");
+		let value = rowData$1;
+		for (const part of parts) {
+			if (value == null || typeof value !== "object") return null;
+			value = value[part];
+		}
+		return value ?? null;
+	}, []);
+	const renderCell = useCallback((column, rowData$1, rowIndex, colIndex) => {
+		const value = getCellValue(rowData$1, column.field);
+		const params = {
+			value,
+			rowData: rowData$1,
+			column,
+			rowIndex,
+			colIndex,
+			isActive: isActiveCell(rowIndex, colIndex),
+			isSelected: isSelected(rowIndex, colIndex),
+			isEditing: isEditingCell(rowIndex, colIndex)
+		};
+		if (column.cellRenderer && typeof column.cellRenderer === "string") {
+			const renderer = cellRenderers[column.cellRenderer];
+			if (renderer) return renderer(params);
+		}
+		if (cellRenderer) return cellRenderer(params);
+		return value == null ? "" : String(value);
+	}, [
+		getCellValue,
+		isActiveCell,
+		isSelected,
+		isEditingCell,
+		cellRenderers,
+		cellRenderer
+	]);
+	const renderEditCell = useCallback((column, rowData$1, rowIndex, colIndex, initialValue) => {
+		const core = coreRef.current;
+		if (!core) return null;
+		const params = {
+			value: getCellValue(rowData$1, column.field),
+			rowData: rowData$1,
+			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 (editRenderer) return editRenderer(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()
+		});
+	}, [
+		getCellValue,
+		editRenderers,
+		editRenderer
+	]);
+	const renderHeader = useCallback((column, colIndex, sortDirection, sortIndex) => {
+		const core = coreRef.current;
+		const params = {
+			column,
+			colIndex,
+			sortDirection,
+			sortIndex,
+			onSort: (direction, addToExisting) => {
+				if (core) core.setSort(column.colId ?? column.field, direction, addToExisting);
+			}
+		};
+		if (column.headerRenderer && typeof column.headerRenderer === "string") {
+			const renderer = headerRenderers[column.headerRenderer];
+			if (renderer) return renderer(params);
+		}
+		if (headerRenderer) return headerRenderer(params);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "gp-grid-header-text",
+			children: column.headerName ?? column.field
+		}), sortDirection && /* @__PURE__ */ jsxs("span", {
+			className: "gp-grid-sort-indicator",
+			children: [sortDirection === "asc" ? "▲" : "▼", sortIndex !== void 0 && sortIndex > 0 && /* @__PURE__ */ jsx("span", {
+				className: "gp-grid-sort-index",
+				children: sortIndex
+			})]
+		})] });
+	}, [headerRenderers, headerRenderer]);
+	const slotsArray = useMemo(() => Array.from(state.slots.values()), [state.slots]);
+	const fillHandlePosition = useMemo(() => {
+		const { activeCell, selectionRange } = 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.editable !== true) return null;
+		}
+		const cellTop = row * rowHeight + totalHeaderHeight;
+		const cellLeft = columnPositions[col] ?? 0;
+		const cellWidth = columns[col]?.width ?? 0;
+		return {
+			top: cellTop + rowHeight - 5,
+			left: cellLeft + cellWidth - 20
+		};
+	}, [
+		state.activeCell,
+		state.selectionRange,
+		rowHeight,
+		totalHeaderHeight,
+		columnPositions,
+		columns
+	]);
+	return /* @__PURE__ */ jsx("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%",
+						zIndex: 100
+					},
+					children: columns.map((column, colIndex) => {
+						const headerInfo = state.headers.get(colIndex);
+						return /* @__PURE__ */ jsx("div", {
+							className: "gp-grid-header-cell",
+							style: {
+								position: "absolute",
+								left: `${columnPositions[colIndex]}px`,
+								top: 0,
+								width: `${column.width}px`,
+								height: `${headerHeight}px`,
+								background: "transparent"
+							},
+							onClick: (e) => handleHeaderClick(colIndex, e),
+							children: renderHeader(column, colIndex, headerInfo?.sortDirection, headerInfo?.sortIndex)
+						}, column.colId ?? column.field);
+					})
+				}),
+				showFilters && /* @__PURE__ */ jsx("div", {
+					className: "gp-grid-filter-row",
+					style: {
+						position: "sticky",
+						top: headerHeight,
+						left: 0,
+						height: filterRowHeight,
+						width: Math.max(state.contentWidth, totalWidth),
+						minWidth: "100%",
+						zIndex: 99
+					},
+					children: columns.map((column, colIndex) => {
+						const colId = column.colId ?? column.field;
+						return /* @__PURE__ */ jsx("div", {
+							className: "gp-grid-filter-cell",
+							style: {
+								position: "absolute",
+								left: `${columnPositions[colIndex]}px`,
+								top: 0,
+								width: `${column.width}px`,
+								height: `${filterRowHeight}px`
+							},
+							children: /* @__PURE__ */ jsx("input", {
+								className: "gp-grid-filter-input",
+								type: "text",
+								placeholder: `Filter ${column.headerName ?? column.field}...`,
+								value: filterValues[colId] ?? "",
+								onChange: (e) => handleFilterChange(colId, e.target.value),
+								onKeyDown: (e) => e.stopPropagation()
+							})
+						}, `filter-${colId}`);
+					})
+				}),
+				slotsArray.map((slot) => {
+					if (slot.rowIndex < 0) return null;
+					return /* @__PURE__ */ jsx("div", {
+						className: `gp-grid-row ${slot.rowIndex % 2 === 0 ? "gp-grid-row--even" : ""}`,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							transform: `translateY(${slot.translateY}px)`,
+							width: `${Math.max(state.contentWidth, totalWidth)}px`,
+							height: `${rowHeight}px`
+						},
+						children: columns.map((column, colIndex) => {
+							const isEditing = isEditingCell(slot.rowIndex, colIndex);
+							const active = isActiveCell(slot.rowIndex, colIndex);
+							const selected = isSelected(slot.rowIndex, colIndex);
+							const inFillPreview = isInFillPreview(slot.rowIndex, colIndex);
+							return /* @__PURE__ */ jsx("div", {
+								className: [
+									"gp-grid-cell",
+									active && "gp-grid-cell--active",
+									selected && !active && "gp-grid-cell--selected",
+									isEditing && "gp-grid-cell--editing",
+									inFillPreview && "gp-grid-cell--fill-preview"
+								].filter(Boolean).join(" "),
+								style: {
+									position: "absolute",
+									left: `${columnPositions[colIndex]}px`,
+									top: 0,
+									width: `${column.width}px`,
+									height: `${rowHeight}px`
+								},
+								onClick: (e) => handleCellClick(slot.rowIndex, colIndex, e),
+								onDoubleClick: () => handleCellDoubleClick(slot.rowIndex, colIndex),
+								children: isEditing && state.editingCell ? renderEditCell(column, slot.rowData, slot.rowIndex, colIndex, state.editingCell.initialValue) : renderCell(column, slot.rowData, slot.rowIndex, colIndex)
+							}, `${slot.slotId}-${colIndex}`);
+						})
+					}, 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"
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { Grid, createClientDataSource, createDataSourceFromArray, createServerDataSource };
+//# sourceMappingURL=index.js.map