@alaarab/ogrid-angular 2.0.2

package/dist/esm/services/datagrid-state.service.js

@@ -0,0 +1,1268 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
+import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, } from '@alaarab/ogrid-core';
+/**
+ * Single orchestration service for DataGridTable. Takes grid props,
+ * returns all derived state and handlers so Angular UI packages can be thin view layers.
+ *
+ * Port of React's useDataGridState hook.
+ */
+let DataGridStateService = class DataGridStateService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals ---
+        this.props = signal(null);
+        this.wrapperEl = signal(null);
+        // --- Internal state ---
+        this.editingCellSig = signal(null);
+        this.pendingEditorValueSig = signal(undefined);
+        this.activeCellSig = signal(null);
+        this.selectionRangeSig = signal(null);
+        this.isDraggingSig = signal(false);
+        this.contextMenuPositionSig = signal(null);
+        this.internalSelectedRows = signal(new Set());
+        this.popoverAnchorElSig = signal(null);
+        this.containerWidthSig = signal(0);
+        this.columnSizingOverridesSig = signal({});
+        // Clipboard state
+        this.cutRangeSig = signal(null);
+        this.copyRangeSig = signal(null);
+        this.internalClipboard = null;
+        // Undo/redo state
+        this.undoHistory = [];
+        this.redoStack = [];
+        this.batch = null;
+        this.undoLengthSig = signal(0);
+        this.redoLengthSig = signal(0);
+        // Fill handle state
+        this.fillDragStart = null;
+        // Row selection
+        this.lastClickedRow = -1;
+        // Drag selection refs
+        this.dragStartPos = null;
+        this.dragMoved = false;
+        this.isDraggingRef = false;
+        this.liveDragRange = null;
+        this.rafId = 0;
+        this.lastMousePos = null;
+        this.autoScrollInterval = null;
+        // Window event listeners cleanup
+        this.windowCleanups = [];
+        // ResizeObserver
+        this.resizeObserver = null;
+        // --- Derived computed ---
+        this.propsResolved = computed(() => this.props());
+        this.cellSelection = computed(() => {
+            const p = this.props();
+            return p ? p.cellSelection !== false : true;
+        });
+        // Undo/redo wrapped callback
+        this.wrappedOnCellValueChanged = computed(() => {
+            const p = this.props();
+            const original = p?.onCellValueChanged;
+            if (!original)
+                return undefined;
+            return (event) => {
+                if (this.batch !== null) {
+                    this.batch.push(event);
+                }
+                else {
+                    this.undoHistory = [...this.undoHistory, [event]].slice(-100);
+                    this.redoStack = [];
+                    this.undoLengthSig.set(this.undoHistory.length);
+                    this.redoLengthSig.set(0);
+                }
+                original(event);
+            };
+        });
+        this.flatColumnsRaw = computed(() => {
+            const p = this.props();
+            if (!p)
+                return [];
+            return flattenColumns(p.columns);
+        });
+        this.flatColumns = computed(() => {
+            const raw = this.flatColumnsRaw();
+            const p = this.props();
+            const pinnedColumns = p?.pinnedColumns;
+            if (!pinnedColumns || Object.keys(pinnedColumns).length === 0)
+                return raw;
+            return raw.map((col) => {
+                const override = pinnedColumns[col.columnId];
+                if (override && col.pinned !== override)
+                    return { ...col, pinned: override };
+                return col;
+            });
+        });
+        this.visibleCols = computed(() => {
+            const p = this.props();
+            if (!p)
+                return [];
+            const flatCols = this.flatColumns();
+            const filtered = p.visibleColumns
+                ? flatCols.filter((c) => p.visibleColumns.has(c.columnId))
+                : flatCols;
+            const order = p.columnOrder;
+            if (!order?.length)
+                return filtered;
+            return [...filtered].sort((a, b) => {
+                const ia = order.indexOf(a.columnId);
+                const ib = order.indexOf(b.columnId);
+                if (ia === -1 && ib === -1)
+                    return 0;
+                if (ia === -1)
+                    return 1;
+                if (ib === -1)
+                    return -1;
+                return ia - ib;
+            });
+        });
+        this.visibleColumnCount = computed(() => this.visibleCols().length);
+        this.hasCheckboxCol = computed(() => (this.props()?.rowSelection ?? 'none') === 'multiple');
+        this.totalColCount = computed(() => this.visibleColumnCount() + (this.hasCheckboxCol() ? 1 : 0));
+        this.colOffset = computed(() => this.hasCheckboxCol() ? 1 : 0);
+        this.rowIndexByRowId = computed(() => {
+            const p = this.props();
+            if (!p)
+                return new Map();
+            const m = new Map();
+            p.items.forEach((item, idx) => m.set(p.getRowId(item), idx));
+            return m;
+        });
+        this.selectedRowIds = computed(() => {
+            const p = this.props();
+            if (!p)
+                return new Set();
+            const controlled = p.selectedRows;
+            if (controlled != null) {
+                return controlled instanceof Set ? controlled : new Set(controlled);
+            }
+            return this.internalSelectedRows();
+        });
+        this.allSelected = computed(() => {
+            const p = this.props();
+            if (!p || p.items.length === 0)
+                return false;
+            const selected = this.selectedRowIds();
+            return p.items.every((item) => selected.has(p.getRowId(item)));
+        });
+        this.someSelected = computed(() => {
+            const p = this.props();
+            if (!p)
+                return false;
+            const selected = this.selectedRowIds();
+            return !this.allSelected() && p.items.some((item) => selected.has(p.getRowId(item)));
+        });
+        this.hasCellSelection = computed(() => this.selectionRangeSig() != null || this.activeCellSig() != null);
+        this.canUndo = computed(() => this.undoLengthSig() > 0);
+        this.canRedo = computed(() => this.redoLengthSig() > 0);
+        // Table layout
+        this.minTableWidth = computed(() => {
+            const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+            return this.visibleCols().reduce((sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING, checkboxW);
+        });
+        this.desiredTableWidth = computed(() => {
+            const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+            const overrides = this.columnSizingOverridesSig();
+            return this.visibleCols().reduce((sum, c) => {
+                const override = overrides[c.columnId];
+                const w = override
+                    ? override.widthPx
+                    : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+                return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+            }, checkboxW);
+        });
+        this.aggregation = computed(() => {
+            const p = this.props();
+            if (!p)
+                return null;
+            return computeAggregations(p.items, this.visibleCols(), this.cellSelection() ? this.selectionRangeSig() : null);
+        });
+        this.statusBarConfig = computed(() => {
+            const p = this.props();
+            if (!p)
+                return null;
+            const base = getDataGridStatusBarConfig(p.statusBar, p.items.length, this.selectedRowIds().size);
+            if (!base)
+                return null;
+            return { ...base, aggregation: this.aggregation() ?? undefined };
+        });
+        this.showEmptyInGrid = computed(() => {
+            const p = this.props();
+            if (!p)
+                return false;
+            return p.items.length === 0 && !!p.emptyState && !p.isLoading;
+        });
+        // Setup window event listeners for cell selection drag
+        const onMove = (e) => this.onWindowMouseMove(e);
+        const onUp = () => this.onWindowMouseUp();
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        this.windowCleanups.push(() => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+        });
+        // Initialize column sizing overrides from initial widths
+        effect(() => {
+            const p = this.props();
+            if (p?.initialColumnWidths) {
+                const result = {};
+                for (const [id, width] of Object.entries(p.initialColumnWidths)) {
+                    result[id] = { widthPx: width };
+                }
+                this.columnSizingOverridesSig.set(result);
+            }
+        });
+        // Container width measurement via ResizeObserver
+        effect(() => {
+            const el = this.wrapperEl();
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+            if (!el)
+                return;
+            const measure = () => {
+                const rect = el.getBoundingClientRect();
+                const cs = window.getComputedStyle(el);
+                const borderX = (parseFloat(cs.borderLeftWidth || '0') || 0) +
+                    (parseFloat(cs.borderRightWidth || '0') || 0);
+                this.containerWidthSig.set(Math.max(0, rect.width - borderX));
+            };
+            this.resizeObserver = new ResizeObserver(measure);
+            this.resizeObserver.observe(el);
+            measure();
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.windowCleanups.forEach((fn) => fn());
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            if (this.autoScrollInterval)
+                clearInterval(this.autoScrollInterval);
+            if (this.resizeObserver)
+                this.resizeObserver.disconnect();
+        });
+        // Clean up column sizing overrides for removed columns
+        effect(() => {
+            const colIds = new Set(this.flatColumns().map((c) => c.columnId));
+            this.columnSizingOverridesSig.update((prev) => {
+                const next = { ...prev };
+                let changed = false;
+                for (const id of Object.keys(next)) {
+                    if (!colIds.has(id)) {
+                        delete next[id];
+                        changed = true;
+                    }
+                }
+                return changed ? next : prev;
+            });
+        });
+    }
+    // --- Row selection methods ---
+    updateSelection(newSelectedIds) {
+        const p = this.props();
+        if (!p)
+            return;
+        if (p.selectedRows === undefined) {
+            this.internalSelectedRows.set(newSelectedIds);
+        }
+        p.onSelectionChange?.({
+            selectedRowIds: Array.from(newSelectedIds),
+            selectedItems: p.items.filter((item) => newSelectedIds.has(p.getRowId(item))),
+        });
+    }
+    handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey) {
+        const p = this.props();
+        if (!p)
+            return;
+        const rowSelection = p.rowSelection ?? 'none';
+        if (rowSelection === 'single') {
+            this.updateSelection(checked ? new Set([rowId]) : new Set());
+            this.lastClickedRow = rowIndex;
+            return;
+        }
+        const next = new Set(this.selectedRowIds());
+        if (shiftKey && this.lastClickedRow >= 0 && this.lastClickedRow !== rowIndex) {
+            const start = Math.min(this.lastClickedRow, rowIndex);
+            const end = Math.max(this.lastClickedRow, rowIndex);
+            for (let i = start; i <= end; i++) {
+                if (i < p.items.length) {
+                    const id = p.getRowId(p.items[i]);
+                    if (checked)
+                        next.add(id);
+                    else
+                        next.delete(id);
+                }
+            }
+        }
+        else {
+            if (checked)
+                next.add(rowId);
+            else
+                next.delete(rowId);
+        }
+        this.lastClickedRow = rowIndex;
+        this.updateSelection(next);
+    }
+    handleSelectAll(checked) {
+        const p = this.props();
+        if (!p)
+            return;
+        if (checked) {
+            this.updateSelection(new Set(p.items.map((item) => p.getRowId(item))));
+        }
+        else {
+            this.updateSelection(new Set());
+        }
+    }
+    // --- Cell editing ---
+    setEditingCell(cell) {
+        this.editingCellSig.set(cell);
+    }
+    setPendingEditorValue(value) {
+        this.pendingEditorValueSig.set(value);
+    }
+    setActiveCell(cell) {
+        const prev = this.activeCellSig();
+        if (prev === cell)
+            return;
+        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
+            return;
+        this.activeCellSig.set(cell);
+    }
+    setSelectionRange(range) {
+        const prev = this.selectionRangeSig();
+        if (prev === range)
+            return;
+        if (prev && range &&
+            prev.startRow === range.startRow && prev.endRow === range.endRow &&
+            prev.startCol === range.startCol && prev.endCol === range.endCol)
+            return;
+        this.selectionRangeSig.set(range);
+    }
+    commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        const col = this.visibleCols().find((c) => c.columnId === columnId);
+        if (col) {
+            const result = parseValue(newValue, oldValue, item, col);
+            if (!result.valid) {
+                this.editingCellSig.set(null);
+                this.popoverAnchorElSig.set(null);
+                this.pendingEditorValueSig.set(undefined);
+                return;
+            }
+            newValue = result.value;
+        }
+        const onCellValueChanged = this.wrappedOnCellValueChanged();
+        onCellValueChanged?.({ item, columnId, oldValue, newValue, rowIndex });
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+        const p = this.props();
+        if (p && rowIndex < p.items.length - 1) {
+            this.setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+        }
+    }
+    cancelPopoverEdit() {
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+    }
+    // --- Cell selection / mouse handling ---
+    handleCellMouseDown(e, rowIndex, globalColIndex) {
+        if (e.button !== 0)
+            return;
+        const wrapper = this.wrapperEl();
+        wrapper?.focus({ preventScroll: true });
+        this.clearClipboardRanges();
+        const colOffset = this.colOffset();
+        if (globalColIndex < colOffset)
+            return;
+        e.preventDefault();
+        const dataColIndex = globalColIndex - colOffset;
+        const currentRange = this.selectionRangeSig();
+        if (e.shiftKey && currentRange != null) {
+            this.setSelectionRange(normalizeSelectionRange({
+                startRow: currentRange.startRow,
+                startCol: currentRange.startCol,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            }));
+            this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        }
+        else {
+            this.dragStartPos = { row: rowIndex, col: dataColIndex };
+            this.dragMoved = false;
+            const initial = {
+                startRow: rowIndex, startCol: dataColIndex,
+                endRow: rowIndex, endCol: dataColIndex,
+            };
+            this.setSelectionRange(initial);
+            this.liveDragRange = initial;
+            this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            this.isDraggingRef = true;
+        }
+    }
+    handleSelectAllCells() {
+        const p = this.props();
+        if (!p)
+            return;
+        const rowCount = p.items.length;
+        const visibleColCount = this.visibleColumnCount();
+        if (rowCount === 0 || visibleColCount === 0)
+            return;
+        this.setSelectionRange({
+            startRow: 0, startCol: 0,
+            endRow: rowCount - 1, endCol: visibleColCount - 1,
+        });
+        this.setActiveCell({ rowIndex: 0, columnIndex: this.colOffset() });
+    }
+    // --- Context menu ---
+    setContextMenuPosition(pos) {
+        this.contextMenuPositionSig.set(pos);
+    }
+    handleCellContextMenu(e) {
+        e.preventDefault?.();
+        this.contextMenuPositionSig.set({ x: e.clientX, y: e.clientY });
+    }
+    closeContextMenu() {
+        this.contextMenuPositionSig.set(null);
+    }
+    // --- Clipboard ---
+    handleCopy() {
+        const p = this.props();
+        if (!p)
+            return;
+        const range = this.getEffectiveRange();
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const visibleCols = this.visibleCols();
+        const rows = [];
+        for (let r = norm.startRow; r <= norm.endRow; r++) {
+            const cells = [];
+            for (let c = norm.startCol; c <= norm.endCol; c++) {
+                if (r >= p.items.length || c >= visibleCols.length)
+                    break;
+                const item = p.items[r];
+                const col = visibleCols[c];
+                const raw = getCellValue(item, col);
+                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
+                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
+            }
+            rows.push(cells.join('\t'));
+        }
+        const tsv = rows.join('\r\n');
+        this.internalClipboard = tsv;
+        this.copyRangeSig.set(norm);
+        void navigator.clipboard.writeText(tsv).catch(() => { });
+    }
+    handleCut() {
+        const p = this.props();
+        if (!p || this.props()?.editable === false)
+            return;
+        const range = this.getEffectiveRange();
+        if (range == null || !this.wrappedOnCellValueChanged())
+            return;
+        const norm = normalizeSelectionRange(range);
+        this.cutRangeSig.set(norm);
+        this.copyRangeSig.set(null);
+        this.handleCopy();
+        this.copyRangeSig.set(null);
+    }
+    async handlePaste() {
+        const p = this.props();
+        if (!p || p.editable === false)
+            return;
+        const onCellValueChanged = this.wrappedOnCellValueChanged();
+        if (!onCellValueChanged)
+            return;
+        let text;
+        try {
+            text = await navigator.clipboard.readText();
+        }
+        catch {
+            text = '';
+        }
+        if (!text.trim() && this.internalClipboard != null) {
+            text = this.internalClipboard;
+        }
+        if (!text.trim())
+            return;
+        const norm = this.getEffectiveRange();
+        const anchorRow = norm ? norm.startRow : 0;
+        const anchorCol = norm ? norm.startCol : 0;
+        const visibleCols = this.visibleCols();
+        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        this.beginBatch();
+        for (let r = 0; r < lines.length; r++) {
+            const cells = lines[r].split('\t');
+            for (let c = 0; c < cells.length; c++) {
+                const targetRow = anchorRow + r;
+                const targetCol = anchorCol + c;
+                if (targetRow >= p.items.length || targetCol >= visibleCols.length)
+                    continue;
+                const item = p.items[targetRow];
+                const col = visibleCols[targetCol];
+                const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                if (!colEditable)
+                    continue;
+                const rawValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                const result = parseValue(rawValue, oldValue, item, col);
+                if (!result.valid)
+                    continue;
+                onCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: targetRow });
+            }
+        }
+        const cutRange = this.cutRangeSig();
+        if (cutRange) {
+            for (let r = cutRange.startRow; r <= cutRange.endRow; r++) {
+                for (let c = cutRange.startCol; c <= cutRange.endCol; c++) {
+                    if (r >= p.items.length || c >= visibleCols.length)
+                        continue;
+                    const item = p.items[r];
+                    const col = visibleCols[c];
+                    const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                    if (!colEditable)
+                        continue;
+                    const oldValue = getCellValue(item, col);
+                    const result = parseValue('', oldValue, item, col);
+                    if (!result.valid)
+                        continue;
+                    onCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
+                }
+            }
+            this.cutRangeSig.set(null);
+        }
+        this.endBatch();
+        this.copyRangeSig.set(null);
+    }
+    clearClipboardRanges() {
+        this.copyRangeSig.set(null);
+        this.cutRangeSig.set(null);
+    }
+    // --- Undo/Redo ---
+    beginBatch() {
+        this.batch = [];
+    }
+    endBatch() {
+        const batch = this.batch;
+        this.batch = null;
+        if (!batch || batch.length === 0)
+            return;
+        this.undoHistory = [...this.undoHistory, batch].slice(-100);
+        this.redoStack = [];
+        this.undoLengthSig.set(this.undoHistory.length);
+        this.redoLengthSig.set(0);
+    }
+    undo() {
+        const p = this.props();
+        const original = p?.onCellValueChanged;
+        if (!original || this.undoHistory.length === 0)
+            return;
+        const lastBatch = this.undoHistory[this.undoHistory.length - 1];
+        this.undoHistory = this.undoHistory.slice(0, -1);
+        this.redoStack = [...this.redoStack, lastBatch];
+        this.undoLengthSig.set(this.undoHistory.length);
+        this.redoLengthSig.set(this.redoStack.length);
+        for (let i = lastBatch.length - 1; i >= 0; i--) {
+            const ev = lastBatch[i];
+            original({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
+        }
+    }
+    redo() {
+        const p = this.props();
+        const original = p?.onCellValueChanged;
+        if (!original || this.redoStack.length === 0)
+            return;
+        const nextBatch = this.redoStack[this.redoStack.length - 1];
+        this.redoStack = this.redoStack.slice(0, -1);
+        this.undoHistory = [...this.undoHistory, nextBatch];
+        this.redoLengthSig.set(this.redoStack.length);
+        this.undoLengthSig.set(this.undoHistory.length);
+        for (const ev of nextBatch) {
+            original(ev);
+        }
+    }
+    // --- Keyboard navigation ---
+    handleGridKeyDown(e) {
+        const p = this.props();
+        if (!p)
+            return;
+        const { items, getRowId } = p;
+        const visibleCols = this.visibleCols();
+        const colOffset = this.colOffset();
+        const hasCheckboxCol = this.hasCheckboxCol();
+        const visibleColumnCount = this.visibleColumnCount();
+        const activeCell = this.activeCellSig();
+        const selectionRange = this.selectionRangeSig();
+        const editingCell = this.editingCellSig();
+        const selectedRowIds = this.selectedRowIds();
+        const editable = p.editable;
+        const onCellValueChanged = this.wrappedOnCellValueChanged();
+        const rowSelection = p.rowSelection ?? 'none';
+        const maxRowIndex = items.length - 1;
+        const maxColIndex = visibleColumnCount - 1 + colOffset;
+        if (items.length === 0)
+            return;
+        if (activeCell === null) {
+            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'].includes(e.key)) {
+                this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+                e.preventDefault();
+            }
+            return;
+        }
+        const { rowIndex, columnIndex } = activeCell;
+        const dataColIndex = columnIndex - colOffset;
+        const shift = e.shiftKey;
+        const ctrl = e.ctrlKey || e.metaKey;
+        const isEmptyAt = (r, c) => {
+            if (r < 0 || r >= items.length || c < 0 || c >= visibleCols.length)
+                return true;
+            const v = getCellValue(items[r], visibleCols[c]);
+            return v == null || v === '';
+        };
+        const findCtrlTarget = (pos, edge, step, isEmpty) => {
+            if (pos === edge)
+                return pos;
+            const next = pos + step;
+            if (!isEmpty(pos) && !isEmpty(next)) {
+                let p = next;
+                while (p !== edge) {
+                    if (isEmpty(p + step))
+                        return p;
+                    p += step;
+                }
+                return edge;
+            }
+            let pp = next;
+            while (pp !== edge) {
+                if (!isEmpty(pp))
+                    return pp;
+                pp += step;
+            }
+            return edge;
+        };
+        switch (e.key) {
+            case 'c':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    this.handleCopy();
+                }
+                break;
+            case 'x':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    this.handleCut();
+                }
+                break;
+            case 'v':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    void this.handlePaste();
+                }
+                break;
+            case 'ArrowDown': {
+                e.preventDefault();
+                const newRow = ctrl
+                    ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    : Math.min(rowIndex + 1, maxRowIndex);
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: newRow,
+                        endCol: selectionRange?.endCol ?? dataColIndex,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: newRow, startCol: dataColIndex, endRow: newRow, endCol: dataColIndex });
+                }
+                this.setActiveCell({ rowIndex: newRow, columnIndex });
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const newRowUp = ctrl
+                    ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    : Math.max(rowIndex - 1, 0);
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: newRowUp,
+                        endCol: selectionRange?.endCol ?? dataColIndex,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: newRowUp, startCol: dataColIndex, endRow: newRowUp, endCol: dataColIndex });
+                }
+                this.setActiveCell({ rowIndex: newRowUp, columnIndex });
+                break;
+            }
+            case 'ArrowRight': {
+                e.preventDefault();
+                let newCol;
+                if (ctrl && dataColIndex >= 0) {
+                    newCol = findCtrlTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                }
+                else {
+                    newCol = Math.min(columnIndex + 1, maxColIndex);
+                }
+                const newDataCol = newCol - colOffset;
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: selectionRange?.endRow ?? rowIndex,
+                        endCol: newDataCol,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: rowIndex, startCol: newDataCol, endRow: rowIndex, endCol: newDataCol });
+                }
+                this.setActiveCell({ rowIndex, columnIndex: newCol });
+                break;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                let newColLeft;
+                if (ctrl && dataColIndex >= 0) {
+                    newColLeft = findCtrlTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                }
+                else {
+                    newColLeft = Math.max(columnIndex - 1, colOffset);
+                }
+                const newDataColLeft = newColLeft - colOffset;
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: selectionRange?.endRow ?? rowIndex,
+                        endCol: newDataColLeft,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: rowIndex, startCol: newDataColLeft, endRow: rowIndex, endCol: newDataColLeft });
+                }
+                this.setActiveCell({ rowIndex, columnIndex: newColLeft });
+                break;
+            }
+            case 'Tab': {
+                e.preventDefault();
+                let newRowTab = rowIndex;
+                let newColTab = columnIndex;
+                if (e.shiftKey) {
+                    if (columnIndex > colOffset) {
+                        newColTab = columnIndex - 1;
+                    }
+                    else if (rowIndex > 0) {
+                        newRowTab = rowIndex - 1;
+                        newColTab = maxColIndex;
+                    }
+                }
+                else {
+                    if (columnIndex < maxColIndex) {
+                        newColTab = columnIndex + 1;
+                    }
+                    else if (rowIndex < maxRowIndex) {
+                        newRowTab = rowIndex + 1;
+                        newColTab = colOffset;
+                    }
+                }
+                const newDataColTab = newColTab - colOffset;
+                this.setSelectionRange({ startRow: newRowTab, startCol: newDataColTab, endRow: newRowTab, endCol: newDataColTab });
+                this.setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                const newRowHome = ctrl ? 0 : rowIndex;
+                this.setSelectionRange({ startRow: newRowHome, startCol: 0, endRow: newRowHome, endCol: 0 });
+                this.setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                const newRowEnd = ctrl ? maxRowIndex : rowIndex;
+                this.setSelectionRange({ startRow: newRowEnd, startCol: visibleColumnCount - 1, endRow: newRowEnd, endCol: visibleColumnCount - 1 });
+                this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
+                break;
+            }
+            case 'Enter':
+            case 'F2': {
+                e.preventDefault();
+                if (dataColIndex >= 0 && dataColIndex < visibleCols.length) {
+                    const col = visibleCols[dataColIndex];
+                    const item = items[rowIndex];
+                    if (item && col) {
+                        const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                        if (editable !== false && colEditable && onCellValueChanged != null) {
+                            this.setEditingCell({ rowId: getRowId(item), columnId: col.columnId });
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Escape':
+                e.preventDefault();
+                if (editingCell != null) {
+                    this.setEditingCell(null);
+                }
+                else {
+                    this.clearClipboardRanges();
+                    this.setActiveCell(null);
+                    this.setSelectionRange(null);
+                }
+                break;
+            case ' ':
+                if (rowSelection !== 'none' && columnIndex === 0 && hasCheckboxCol) {
+                    e.preventDefault();
+                    const item = items[rowIndex];
+                    if (item) {
+                        const id = getRowId(item);
+                        const isSelected = selectedRowIds.has(id);
+                        this.handleRowCheckboxChange(id, !isSelected, rowIndex, e.shiftKey);
+                    }
+                }
+                break;
+            case 'z':
+                if (ctrl) {
+                    if (editingCell == null) {
+                        if (e.shiftKey) {
+                            e.preventDefault();
+                            this.redo();
+                        }
+                        else {
+                            e.preventDefault();
+                            this.undo();
+                        }
+                    }
+                }
+                break;
+            case 'y':
+                if (ctrl && editingCell == null) {
+                    e.preventDefault();
+                    this.redo();
+                }
+                break;
+            case 'a':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    if (items.length > 0 && visibleColumnCount > 0) {
+                        this.setSelectionRange({ startRow: 0, startCol: 0, endRow: items.length - 1, endCol: visibleColumnCount - 1 });
+                        this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+                    }
+                }
+                break;
+            case 'Delete':
+            case 'Backspace': {
+                if (editingCell != null)
+                    break;
+                if (editable === false)
+                    break;
+                if (onCellValueChanged == null)
+                    break;
+                const range = selectionRange ?? (activeCell != null
+                    ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset }
+                    : null);
+                if (range == null)
+                    break;
+                e.preventDefault();
+                const norm = normalizeSelectionRange(range);
+                for (let r = norm.startRow; r <= norm.endRow; r++) {
+                    for (let c = norm.startCol; c <= norm.endCol; c++) {
+                        if (r >= items.length || c >= visibleCols.length)
+                            continue;
+                        const item = items[r];
+                        const col = visibleCols[c];
+                        const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                        if (!colEditable)
+                            continue;
+                        const oldValue = getCellValue(item, col);
+                        const result = parseValue('', oldValue, item, col);
+                        if (!result.valid)
+                            continue;
+                        onCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
+                    }
+                }
+                break;
+            }
+            case 'F10':
+                if (e.shiftKey) {
+                    e.preventDefault();
+                    const wrapper = this.wrapperEl();
+                    if (activeCell != null && wrapper) {
+                        const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
+                        const cell = wrapper.querySelector(sel);
+                        if (cell) {
+                            const rect = cell.getBoundingClientRect();
+                            this.setContextMenuPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+                        }
+                        else {
+                            this.setContextMenuPosition({ x: 100, y: 100 });
+                        }
+                    }
+                    else {
+                        this.setContextMenuPosition({ x: 100, y: 100 });
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    // --- Fill handle ---
+    handleFillHandleMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = this.selectionRangeSig();
+        if (!range)
+            return;
+        this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
+        this.setupFillHandleDrag();
+    }
+    // --- Get state result ---
+    getState() {
+        const p = this.props();
+        const cellSel = this.cellSelection();
+        const layout = {
+            flatColumns: this.flatColumns(),
+            visibleCols: this.visibleCols(),
+            visibleColumnCount: this.visibleColumnCount(),
+            totalColCount: this.totalColCount(),
+            colOffset: this.colOffset(),
+            hasCheckboxCol: this.hasCheckboxCol(),
+            rowIndexByRowId: this.rowIndexByRowId(),
+            containerWidth: this.containerWidthSig(),
+            minTableWidth: this.minTableWidth(),
+            desiredTableWidth: this.desiredTableWidth(),
+            columnSizingOverrides: this.columnSizingOverridesSig(),
+            setColumnSizingOverrides: (overrides) => this.columnSizingOverridesSig.set(overrides),
+            onColumnResized: p?.onColumnResized,
+        };
+        const rowSelection = {
+            selectedRowIds: this.selectedRowIds(),
+            updateSelection: (ids) => this.updateSelection(ids),
+            handleRowCheckboxChange: (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey),
+            handleSelectAll: (checked) => this.handleSelectAll(checked),
+            allSelected: this.allSelected(),
+            someSelected: this.someSelected(),
+        };
+        const editing = {
+            editingCell: this.editingCellSig(),
+            setEditingCell: (cell) => this.setEditingCell(cell),
+            pendingEditorValue: this.pendingEditorValueSig(),
+            setPendingEditorValue: (v) => this.setPendingEditorValue(v),
+            commitCellEdit: (item, colId, oldVal, newVal, rowIdx, globalColIdx) => this.commitCellEdit(item, colId, oldVal, newVal, rowIdx, globalColIdx),
+            cancelPopoverEdit: () => this.cancelPopoverEdit(),
+            popoverAnchorEl: this.popoverAnchorElSig(),
+            setPopoverAnchorEl: (el) => this.popoverAnchorElSig.set(el),
+        };
+        const noop = () => { };
+        const noopAsync = async () => { };
+        const noopMouse = (_e, _r, _c) => { };
+        const noopKey = (_e) => { };
+        const noopCtx = (_e) => { };
+        const interaction = {
+            activeCell: cellSel ? this.activeCellSig() : null,
+            setActiveCell: cellSel ? (cell) => this.setActiveCell(cell) : noop,
+            selectionRange: cellSel ? this.selectionRangeSig() : null,
+            setSelectionRange: cellSel ? (range) => this.setSelectionRange(range) : noop,
+            handleCellMouseDown: cellSel ? (e, r, c) => this.handleCellMouseDown(e, r, c) : noopMouse,
+            handleSelectAllCells: cellSel ? () => this.handleSelectAllCells() : noop,
+            hasCellSelection: cellSel ? this.hasCellSelection() : false,
+            handleGridKeyDown: cellSel ? (e) => this.handleGridKeyDown(e) : noopKey,
+            handleFillHandleMouseDown: cellSel ? (e) => this.handleFillHandleMouseDown(e) : noop,
+            handleCopy: cellSel ? () => this.handleCopy() : noop,
+            handleCut: cellSel ? () => this.handleCut() : noop,
+            handlePaste: cellSel ? () => this.handlePaste() : noopAsync,
+            cutRange: cellSel ? this.cutRangeSig() : null,
+            copyRange: cellSel ? this.copyRangeSig() : null,
+            clearClipboardRanges: cellSel ? () => this.clearClipboardRanges() : noop,
+            canUndo: this.canUndo(),
+            canRedo: this.canRedo(),
+            onUndo: () => this.undo(),
+            onRedo: () => this.redo(),
+            isDragging: cellSel ? this.isDraggingSig() : false,
+        };
+        const contextMenu = {
+            menuPosition: cellSel ? this.contextMenuPositionSig() : null,
+            setMenuPosition: cellSel ? (pos) => this.setContextMenuPosition(pos) : noop,
+            handleCellContextMenu: cellSel ? (e) => this.handleCellContextMenu(e) : noopCtx,
+            closeContextMenu: cellSel ? () => this.closeContextMenu() : noop,
+        };
+        const viewModels = {
+            headerFilterInput: {
+                sortBy: p?.sortBy,
+                sortDirection: p?.sortDirection ?? 'asc',
+                onColumnSort: (columnKey) => p?.onColumnSort(columnKey),
+                filters: p?.filters ?? {},
+                onFilterChange: (key, value) => p?.onFilterChange(key, value),
+                filterOptions: p?.filterOptions ?? {},
+                loadingFilterOptions: p?.loadingFilterOptions ?? {},
+                peopleSearch: p?.peopleSearch,
+            },
+            cellDescriptorInput: {
+                editingCell: this.editingCellSig(),
+                activeCell: cellSel ? this.activeCellSig() : null,
+                selectionRange: cellSel ? this.selectionRangeSig() : null,
+                cutRange: cellSel ? this.cutRangeSig() : null,
+                copyRange: cellSel ? this.copyRangeSig() : null,
+                colOffset: this.colOffset(),
+                itemsLength: p?.items.length ?? 0,
+                getRowId: p?.getRowId ?? ((item) => item['id']),
+                editable: p?.editable,
+                onCellValueChanged: this.wrappedOnCellValueChanged(),
+                isDragging: cellSel ? this.isDraggingSig() : false,
+            },
+            statusBarConfig: this.statusBarConfig(),
+            showEmptyInGrid: this.showEmptyInGrid(),
+            onCellError: p?.onCellError,
+        };
+        return { layout, rowSelection, editing, interaction, contextMenu, viewModels };
+    }
+    // --- Private helpers ---
+    getEffectiveRange() {
+        const sel = this.selectionRangeSig();
+        const ac = this.activeCellSig();
+        const colOffset = this.colOffset();
+        return sel ?? (ac != null
+            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset }
+            : null);
+    }
+    onWindowMouseMove(e) {
+        if (!this.isDraggingRef || !this.dragStartPos)
+            return;
+        if (!this.dragMoved) {
+            this.dragMoved = true;
+            this.isDraggingSig.set(true);
+        }
+        this.lastMousePos = { cx: e.clientX, cy: e.clientY };
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = 0;
+            const pos = this.lastMousePos;
+            if (!pos)
+                return;
+            const newRange = this.resolveRangeFromMouse(pos.cx, pos.cy);
+            if (!newRange)
+                return;
+            const prev = this.liveDragRange;
+            if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol &&
+                prev.endRow === newRange.endRow && prev.endCol === newRange.endCol)
+                return;
+            this.liveDragRange = newRange;
+            this.applyDragAttrs(newRange);
+        });
+    }
+    onWindowMouseUp() {
+        if (!this.isDraggingRef)
+            return;
+        if (this.autoScrollInterval) {
+            clearInterval(this.autoScrollInterval);
+            this.autoScrollInterval = null;
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        this.isDraggingRef = false;
+        const wasDrag = this.dragMoved;
+        if (wasDrag) {
+            const pos = this.lastMousePos;
+            if (pos) {
+                const flushed = this.resolveRangeFromMouse(pos.cx, pos.cy);
+                if (flushed)
+                    this.liveDragRange = flushed;
+            }
+            const finalRange = this.liveDragRange;
+            if (finalRange) {
+                this.setSelectionRange(finalRange);
+                this.setActiveCell({
+                    rowIndex: finalRange.endRow,
+                    columnIndex: finalRange.endCol + this.colOffset(),
+                });
+            }
+        }
+        this.clearDragAttrs();
+        this.liveDragRange = null;
+        this.lastMousePos = null;
+        this.dragStartPos = null;
+        if (wasDrag)
+            this.isDraggingSig.set(false);
+    }
+    resolveRangeFromMouse(cx, cy) {
+        if (!this.dragStartPos)
+            return null;
+        const target = document.elementFromPoint(cx, cy);
+        const cell = target?.closest?.('[data-row-index][data-col-index]');
+        if (!cell)
+            return null;
+        const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+        const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+        const colOff = this.colOffset();
+        if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+            return null;
+        const dataCol = c - colOff;
+        const start = this.dragStartPos;
+        return normalizeSelectionRange({
+            startRow: start.row, startCol: start.col,
+            endRow: r, endCol: dataCol,
+        });
+    }
+    applyDragAttrs(range) {
+        const wrapper = this.wrapperEl();
+        if (!wrapper)
+            return;
+        const colOff = this.colOffset();
+        const minR = Math.min(range.startRow, range.endRow);
+        const maxR = Math.max(range.startRow, range.endRow);
+        const minC = Math.min(range.startCol, range.endCol);
+        const maxC = Math.max(range.startCol, range.endCol);
+        const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+        for (let i = 0; i < cells.length; i++) {
+            const el = cells[i];
+            const r = parseInt(el.getAttribute('data-row-index'), 10);
+            const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
+            const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+            if (inRange) {
+                if (!el.hasAttribute('data-drag-range'))
+                    el.setAttribute('data-drag-range', '');
+            }
+            else {
+                if (el.hasAttribute('data-drag-range'))
+                    el.removeAttribute('data-drag-range');
+            }
+        }
+    }
+    clearDragAttrs() {
+        const wrapper = this.wrapperEl();
+        if (!wrapper)
+            return;
+        const marked = wrapper.querySelectorAll('[data-drag-range]');
+        for (let i = 0; i < marked.length; i++)
+            marked[i].removeAttribute('data-drag-range');
+    }
+    setupFillHandleDrag() {
+        const p = this.props();
+        if (!this.fillDragStart || p?.editable === false || !this.wrappedOnCellValueChanged())
+            return;
+        const colOff = this.colOffset();
+        const fillStart = this.fillDragStart;
+        let fillDragEnd = { endRow: fillStart.startRow, endCol: fillStart.startCol };
+        let liveFillRange = null;
+        let fillRafId = 0;
+        let lastFillMousePos = null;
+        const resolveRange = (cx, cy) => {
+            const target = document.elementFromPoint(cx, cy);
+            const cell = target?.closest?.('[data-row-index][data-col-index]');
+            const wrapper = this.wrapperEl();
+            if (!cell || !wrapper?.contains(cell))
+                return null;
+            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
+            return normalizeSelectionRange({
+                startRow: fillStart.startRow, startCol: fillStart.startCol,
+                endRow: r, endCol: dataCol,
+            });
+        };
+        const onMove = (e) => {
+            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+            if (fillRafId)
+                cancelAnimationFrame(fillRafId);
+            fillRafId = requestAnimationFrame(() => {
+                fillRafId = 0;
+                if (!lastFillMousePos)
+                    return;
+                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (!newRange)
+                    return;
+                if (liveFillRange && liveFillRange.startRow === newRange.startRow &&
+                    liveFillRange.startCol === newRange.startCol &&
+                    liveFillRange.endRow === newRange.endRow &&
+                    liveFillRange.endCol === newRange.endCol)
+                    return;
+                liveFillRange = newRange;
+                fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
+                this.applyDragAttrs(newRange);
+            });
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            if (fillRafId) {
+                cancelAnimationFrame(fillRafId);
+                fillRafId = 0;
+            }
+            if (lastFillMousePos) {
+                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (flushed) {
+                    liveFillRange = flushed;
+                    fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
+                }
+            }
+            this.clearDragAttrs();
+            const norm = normalizeSelectionRange({
+                startRow: fillStart.startRow, startCol: fillStart.startCol,
+                endRow: fillDragEnd.endRow, endCol: fillDragEnd.endCol,
+            });
+            this.setSelectionRange(norm);
+            this.setActiveCell({ rowIndex: fillDragEnd.endRow, columnIndex: fillDragEnd.endCol + colOff });
+            // Apply fill values
+            const items = p.items;
+            const visibleCols = this.visibleCols();
+            const startItem = items[norm.startRow];
+            const startColDef = visibleCols[norm.startCol];
+            const onCellValueChanged = this.wrappedOnCellValueChanged();
+            if (startItem && startColDef) {
+                const startValue = getCellValue(startItem, startColDef);
+                this.beginBatch();
+                for (let row = norm.startRow; row <= norm.endRow; row++) {
+                    for (let col = norm.startCol; col <= norm.endCol; col++) {
+                        if (row === fillStart.startRow && col === fillStart.startCol)
+                            continue;
+                        if (row >= items.length || col >= visibleCols.length)
+                            continue;
+                        const item = items[row];
+                        const colDef = visibleCols[col];
+                        const colEditable = colDef.editable === true || (typeof colDef.editable === 'function' && colDef.editable(item));
+                        if (!colEditable)
+                            continue;
+                        const oldValue = getCellValue(item, colDef);
+                        const result = parseValue(startValue, oldValue, item, colDef);
+                        if (!result.valid)
+                            continue;
+                        onCellValueChanged({ item, columnId: colDef.columnId, oldValue, newValue: result.value, rowIndex: row });
+                    }
+                }
+                this.endBatch();
+            }
+            this.fillDragStart = null;
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+    }
+};
+DataGridStateService = __decorate([
+    Injectable()
+], DataGridStateService);
+export { DataGridStateService };