@alaarab/ogrid-js 2.0.22 → 2.1.0

package/dist/esm/renderer/TableRenderer.js

@@ -1,5 +1,5 @@
-import { getCellValue, buildHeaderRows, isInSelectionRange, ROW_NUMBER_COLUMN_WIDTH } from '@alaarab/ogrid-core';
-const CHECKBOX_COL_WIDTH = 40;
+import { getCellValue, buildHeaderRows, isInSelectionRange, ROW_NUMBER_COLUMN_WIDTH, CHECKBOX_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { getCellCoordinates } from '../utils/getCellCoordinates';
 export class TableRenderer {
     constructor(container, state) {
         this.table = null;
@@ -17,6 +17,9 @@ export class TableRenderer {
         this._tbodyMousedownHandler = null;
         this._tbodyDblclickHandler = null;
         this._tbodyContextmenuHandler = null;
+        // Delegated event handlers bound to thead (avoids per-<th> inline listeners)
+        this._theadClickHandler = null;
+        this._theadMousedownHandler = null;
         // State tracking for incremental DOM patching
         this.lastActiveCell = null;
         this.lastSelectionRange = null;
@@ -47,11 +50,10 @@ export class TableRenderer {
         const cell = target.closest('td[data-row-index]');
         if (!cell)
             return null;
-        const rowIndex = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
-        const colIndex = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
-        if (Number.isNaN(rowIndex) || Number.isNaN(colIndex))
+        const coords = getCellCoordinates(cell);
+        if (!coords)
             return null;
-        return { el: cell, rowIndex, colIndex };
+        return { el: cell, rowIndex: coords.rowIndex, colIndex: coords.colIndex };
     }
     attachBodyDelegation() {
         if (!this.tbody)
@@ -60,13 +62,19 @@ export class TableRenderer {
             const cell = this.getCellFromEvent(e);
             if (!cell)
                 return;
-            this.interactionState?.onCellClick?.(cell.rowIndex, cell.colIndex, e);
+            this.interactionState?.onCellClick?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
         };
         this._tbodyMousedownHandler = (e) => {
+            // Fill handle mousedown — delegated from per-cell inline listener
+            const target = e.target;
+            if (target.classList.contains('ogrid-fill-handle') || target.getAttribute('data-fill-handle') === 'true') {
+                this.interactionState?.onFillHandleMouseDown?.(e);
+                return;
+            }
             const cell = this.getCellFromEvent(e);
             if (!cell)
                 return;
-            this.interactionState?.onCellMouseDown?.(cell.rowIndex, cell.colIndex, e);
+            this.interactionState?.onCellMouseDown?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
         };
         this._tbodyDblclickHandler = (e) => {
             const cell = this.getCellFromEvent(e);
@@ -79,13 +87,13 @@ export class TableRenderer {
             if (!item)
                 return;
             const rowId = this.state.getRowId(item);
-            this.interactionState?.onCellDoubleClick?.(cell.rowIndex, cell.colIndex, rowId, columnId);
+            this.interactionState?.onCellDoubleClick?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowId, columnId });
         };
         this._tbodyContextmenuHandler = (e) => {
             const cell = this.getCellFromEvent(e);
             if (!cell)
                 return;
-            this.interactionState?.onCellContextMenu?.(cell.rowIndex, cell.colIndex, e);
+            this.interactionState?.onCellContextMenu?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
         };
         this.tbody.addEventListener('click', this._tbodyClickHandler, { passive: true });
         this.tbody.addEventListener('mousedown', this._tbodyMousedownHandler);
@@ -108,6 +116,57 @@ export class TableRenderer {
         this._tbodyDblclickHandler = null;
         this._tbodyContextmenuHandler = null;
     }
+    /** Attach delegated event listeners to <thead> for sort clicks, resize, reorder, and filter icon clicks. */
+    attachHeaderDelegation() {
+        if (!this.thead)
+            return;
+        // Sort clicks and filter icon clicks use inline listeners for stale-reference compatibility
+        // (tests hold references to <th> elements that become detached after header re-render).
+        // Delegation handles resize and column reorder mousedown events only.
+        this._theadClickHandler = null;
+        this._theadMousedownHandler = (e) => {
+            const target = e.target;
+            // Resize handle mousedown
+            if (target.classList.contains('ogrid-resize-handle')) {
+                e.stopPropagation();
+                const th = target.closest('th[data-column-id]');
+                if (!th)
+                    return;
+                const columnId = th.getAttribute('data-column-id');
+                if (columnId) {
+                    const rect = th.getBoundingClientRect();
+                    this.interactionState?.onResizeStart?.(columnId, e.clientX, rect.width);
+                }
+                return;
+            }
+            // Don't start reorder from filter icon
+            if (target.classList.contains('ogrid-filter-icon'))
+                return;
+            // Column reorder mousedown
+            if (this.interactionState?.onColumnReorderStart) {
+                const th = target.closest('th[data-column-id]');
+                if (!th)
+                    return;
+                const columnId = th.getAttribute('data-column-id');
+                if (columnId) {
+                    this.interactionState.onColumnReorderStart(columnId, e);
+                }
+            }
+        };
+        if (this._theadClickHandler)
+            this.thead.addEventListener('click', this._theadClickHandler);
+        this.thead.addEventListener('mousedown', this._theadMousedownHandler);
+    }
+    detachHeaderDelegation() {
+        if (!this.thead)
+            return;
+        if (this._theadClickHandler)
+            this.thead.removeEventListener('click', this._theadClickHandler);
+        if (this._theadMousedownHandler)
+            this.thead.removeEventListener('mousedown', this._theadMousedownHandler);
+        this._theadClickHandler = null;
+        this._theadMousedownHandler = null;
+    }
     getWrapperElement() {
         return this.wrapperEl;
     }
@@ -121,13 +180,11 @@ export class TableRenderer {
         wrapper.setAttribute('role', 'grid');
         wrapper.setAttribute('tabindex', '0'); // Make focusable for keyboard nav
         wrapper.style.position = 'relative'; // For MarchingAnts absolute positioning
-        const rowHeight = this.state._options?.rowHeight;
-        if (rowHeight) {
-            wrapper.style.setProperty('--ogrid-row-height', `${rowHeight}px`);
+        if (this.state.rowHeight) {
+            wrapper.style.setProperty('--ogrid-row-height', `${this.state.rowHeight}px`);
         }
-        const ariaLabel = this.state._ariaLabel;
-        if (ariaLabel) {
-            wrapper.setAttribute('aria-label', ariaLabel);
+        if (this.state.ariaLabel) {
+            wrapper.setAttribute('aria-label', this.state.ariaLabel);
         }
         this.wrapperEl = wrapper;
         // Create table
@@ -136,6 +193,7 @@ export class TableRenderer {
         // Render header
         this.thead = document.createElement('thead');
         this.renderHeader();
+        this.attachHeaderDelegation();
         this.table.appendChild(this.thead);
         // Render body
         this.tbody = document.createElement('tbody');
@@ -254,8 +312,11 @@ export class TableRenderer {
         const cells = this.tbody.querySelectorAll('td[data-row-index][data-col-index]');
         for (let i = 0; i < cells.length; i++) {
             const el = cells[i];
-            const rowIndex = parseInt(el.getAttribute('data-row-index'), 10);
-            const globalColIndex = parseInt(el.getAttribute('data-col-index'), 10);
+            const coords = getCellCoordinates(el);
+            if (!coords)
+                continue;
+            const rowIndex = coords.rowIndex;
+            const globalColIndex = coords.colIndex;
             const colOffset = this.getColOffset();
             const colIndex = globalColIndex - colOffset;
             // --- Active cell ---
@@ -311,7 +372,7 @@ export class TableRenderer {
                 colIndex === Math.max(selectionRange.startCol, selectionRange.endCol);
             const hadFill = !!oldFill;
             if (hadFill && !shouldHaveFill) {
-                oldFill.remove();
+                oldFill?.remove();
             }
             else if (!hadFill && shouldHaveFill) {
                 const fillHandle = document.createElement('div');
@@ -416,7 +477,7 @@ export class TableRenderer {
                 if (hasCheckbox) {
                     const th = document.createElement('th');
                     th.className = 'ogrid-header-cell ogrid-checkbox-header';
-                    th.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                    th.style.width = `${CHECKBOX_COLUMN_WIDTH}px`;
                     // Select-all checkbox only on last header row
                     if (row === headerRows[headerRows.length - 1]) {
                         this.appendSelectAllCheckbox(th);
@@ -431,32 +492,21 @@ export class TableRenderer {
                         th.colSpan = cell.colSpan;
                     if (!cell.isGroup && cell.columnDef?.sortable) {
                         th.classList.add('ogrid-sortable');
+                        // Sort click also inline for compatibility with tests that hold stale <th> references
                         th.addEventListener('click', () => {
-                            if (cell.columnDef) {
+                            if (cell.columnDef)
                                 this.state.toggleSort(cell.columnDef.columnId);
-                            }
                         });
                     }
                     if (!cell.isGroup && cell.columnDef) {
                         th.setAttribute('data-column-id', cell.columnDef.columnId);
                         this.applyPinningStyles(th, cell.columnDef.columnId, true);
-                        // Column reorder in grouped headers
-                        if (this.interactionState?.onColumnReorderStart) {
-                            th.addEventListener('mousedown', (e) => {
-                                const target = e.target;
-                                if (target.classList.contains('ogrid-resize-handle') ||
-                                    target.classList.contains('ogrid-filter-icon')) {
-                                    return;
-                                }
-                                if (cell.columnDef) {
-                                    this.interactionState?.onColumnReorderStart?.(cell.columnDef.columnId, e);
-                                }
-                            });
-                        }
+                        // Resize, reorder, and filter icon clicks are handled
+                        // via delegated listeners on <thead> (attachHeaderDelegation).
                     }
                     tr.appendChild(th);
                 }
-                this.thead.appendChild(tr);
+                this.thead?.appendChild(tr);
             }
         }
         else {
@@ -466,7 +516,7 @@ export class TableRenderer {
             if (hasCheckbox) {
                 const th = document.createElement('th');
                 th.className = 'ogrid-header-cell ogrid-checkbox-header';
-                th.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                th.style.width = `${CHECKBOX_COLUMN_WIDTH}px`;
                 this.appendSelectAllCheckbox(th);
                 tr.appendChild(th);
             }
@@ -490,6 +540,7 @@ export class TableRenderer {
                 th.appendChild(textSpan);
                 if (col.sortable) {
                     th.classList.add('ogrid-sortable');
+                    // Sort click also inline for compatibility with tests that hold stale <th> references
                     th.addEventListener('click', () => this.state.toggleSort(col.columnId));
                 }
                 if (col.type === 'numeric') {
@@ -513,11 +564,7 @@ export class TableRenderer {
                 resizeHandle.style.userSelect = 'none';
                 th.style.position = th.style.position || 'relative';
                 th.appendChild(resizeHandle);
-                resizeHandle.addEventListener('mousedown', (e) => {
-                    e.stopPropagation();
-                    const rect = th.getBoundingClientRect();
-                    this.interactionState?.onResizeStart?.(col.columnId, e.clientX, rect.width);
-                });
+                // Resize mousedown handled via delegated listener on <thead>
                 // Filter icon (if column is filterable)
                 const filterConfig = this.filterConfigs.get(col.columnId);
                 if (filterConfig && this.onFilterIconClick) {
@@ -546,21 +593,10 @@ export class TableRenderer {
                     });
                     th.appendChild(filterBtn);
                 }
-                // Column reorder: mousedown on header starts drag
-                if (this.interactionState?.onColumnReorderStart) {
-                    th.addEventListener('mousedown', (e) => {
-                        // Don't start reorder if clicking resize handle or filter button
-                        const target = e.target;
-                        if (target.classList.contains('ogrid-resize-handle') ||
-                            target.classList.contains('ogrid-filter-icon')) {
-                            return;
-                        }
-                        this.interactionState?.onColumnReorderStart?.(col.columnId, e);
-                    });
-                }
+                // Column reorder mousedown handled via delegated listener on <thead>
                 tr.appendChild(th);
             }
-            this.thead.appendChild(tr);
+            this.thead?.appendChild(tr);
         }
     }
     appendSelectAllCheckbox(th) {
@@ -605,7 +641,9 @@ export class TableRenderer {
         let startIndex = 0;
         let endIndex = items.length - 1;
         if (isVirtual) {
-            const range = vs.visibleRange;
+            const range = vs?.visibleRange;
+            if (!range)
+                return;
             startIndex = Math.max(0, range.startIndex);
             endIndex = Math.min(items.length - 1, range.endIndex);
             // Top spacer row
@@ -638,7 +676,7 @@ export class TableRenderer {
             if (hasCheckbox) {
                 const td = document.createElement('td');
                 td.className = 'ogrid-cell ogrid-checkbox-cell';
-                td.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                td.style.width = `${CHECKBOX_COLUMN_WIDTH}px`;
                 td.style.textAlign = 'center';
                 const checkbox = document.createElement('input');
                 checkbox.type = 'checkbox';
@@ -747,9 +785,7 @@ export class TableRenderer {
                         fillHandle.style.cursor = 'crosshair';
                         fillHandle.style.zIndex = '5';
                         td.style.position = td.style.position || 'relative';
-                        fillHandle.addEventListener('mousedown', (e) => {
-                            this.interactionState?.onFillHandleMouseDown?.(e);
-                        });
+                        // Fill handle mousedown handled via delegated listener on <tbody>
                         td.appendChild(fillHandle);
                     }
                 }
@@ -758,7 +794,7 @@ export class TableRenderer {
             this.tbody.appendChild(tr);
         }
         // Virtual scrolling: bottom spacer row
-        if (isVirtual) {
+        if (isVirtual && vs) {
             const range = vs.visibleRange;
             if (range.offsetBottom > 0) {
                 const bottomSpacer = document.createElement('tr');
@@ -777,6 +813,10 @@ export class TableRenderer {
     getTableElement() {
         return this.table;
     }
+    /** Get the current onResizeStart handler from interaction state (avoids bracket notation access). */
+    getOnResizeStart() {
+        return this.interactionState?.onResizeStart;
+    }
     /** Update the drop indicator position during column reorder. */
     updateDropIndicator(x, isDragging) {
         if (!this.dropIndicator || !this.wrapperEl)
@@ -792,6 +832,7 @@ export class TableRenderer {
         this.dropIndicator.style.left = `${relativeX}px`;
     }
     destroy() {
+        this.detachHeaderDelegation();
         this.detachBodyDelegation();
         this.container.innerHTML = '';
         this.table = null;

package/dist/esm/state/ClipboardState.js

@@ -1,5 +1,4 @@
-import { normalizeSelectionRange, getCellValue, formatSelectionAsTsv, parseTsvClipboard } from '@alaarab/ogrid-core';
-import { parseValue } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 export class ClipboardState {
     constructor(params, getActiveCell, getSelectionRange) {
@@ -84,59 +83,14 @@ export class ClipboardState {
         const anchorRow = norm ? norm.startRow : 0;
         const anchorCol = norm ? norm.startCol : 0;
         const { items, visibleCols } = this.params;
-        const lines = parseTsvClipboard(text);
-        for (let r = 0; r < lines.length; r++) {
-            const cells = lines[r];
-            for (let c = 0; c < cells.length; c++) {
-                const targetRow = anchorRow + r;
-                const targetCol = anchorCol + c;
-                if (targetRow >= items.length || targetCol >= visibleCols.length)
-                    continue;
-                const item = 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 parsedRows = parseTsvClipboard(text);
+        const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols);
+        for (const evt of pasteEvents)
+            onCellValueChanged(evt);
         if (this._cutRange) {
-            const cut = this._cutRange;
-            for (let r = cut.startRow; r <= cut.endRow; r++) {
-                for (let c = cut.startCol; c <= cut.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,
-                    });
-                }
-            }
+            const cutEvents = applyCutClear(this._cutRange, items, visibleCols);
+            for (const evt of cutEvents)
+                onCellValueChanged(evt);
             this._cutRange = null;
         }
         this._copyRange = null;

package/dist/esm/state/ColumnPinningState.js

@@ -29,8 +29,7 @@ export class ColumnPinningState {
         this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
     }
     unpinColumn(columnId) {
-        const next = { ...this._pinnedColumns };
-        delete next[columnId];
+        const { [columnId]: _, ...next } = this._pinnedColumns;
         this._pinnedColumns = next;
         this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
     }

package/dist/esm/state/ColumnReorderState.js

@@ -69,7 +69,14 @@ export class ColumnReorderState {
             this.rafId = 0;
             if (!this._draggedColumnId || !this.tableElement)
                 return;
-            const result = calculateDropTarget(mouseX, this.columnOrder, this._draggedColumnId, this.draggedPinState, this.tableElement, this.pinnedColumns);
+            const result = calculateDropTarget({
+                mouseX,
+                columnOrder: this.columnOrder,
+                draggedColumnId: this._draggedColumnId,
+                draggedPinState: this.draggedPinState,
+                tableElement: this.tableElement,
+                pinnedColumns: this.pinnedColumns,
+            });
             if (!result)
                 return;
             const prevX = this._dropIndicatorX;

package/dist/esm/state/EventEmitter.js

@@ -6,12 +6,13 @@ export class EventEmitter {
         if (!this.handlers.has(event)) {
             this.handlers.set(event, new Set());
         }
-        this.handlers.get(event).add(handler);
+        this.handlers.get(event)?.add(handler);
     }
     off(event, handler) {
         this.handlers.get(event)?.delete(handler);
     }
-    emit(event, data) {
+    emit(event, ...args) {
+        const data = args[0];
         this.handlers.get(event)?.forEach(handler => {
             handler(data);
         });

package/dist/esm/state/FillHandleState.js

@@ -1,5 +1,6 @@
-import { normalizeSelectionRange, getCellValue, parseValue } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, applyFillValues } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
+import { getCellCoordinates } from '../utils/getCellCoordinates';
 /**
  * Manages Excel-style fill handle drag-to-fill for cell ranges (vanilla JS).
  * Mirrors the React `useFillHandle` hook as a class-based state.
@@ -109,49 +110,24 @@ export class FillHandleState {
         this.setSelectionRange(norm);
         this.setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + this.params.colOffset });
         // Apply fill values
-        this.applyFillValues(norm, start);
+        this.applyFillValuesFromCore(norm, start);
         this._isFillDragging = false;
         this.fillDragStart = null;
         this.liveFillRange = null;
         this.lastMousePos = null;
         this.emitter.emit('fillRangeChange', { fillRange: null });
     }
-    applyFillValues(norm, start) {
+    applyFillValuesFromCore(norm, start) {
         const { items, visibleCols, onCellValueChanged, beginBatch, endBatch } = this.params;
         if (!onCellValueChanged)
             return;
-        const startItem = items[norm.startRow];
-        const startColDef = visibleCols[norm.startCol];
-        if (!startItem || !startColDef)
-            return;
-        const startValue = getCellValue(startItem, startColDef);
-        beginBatch?.();
-        for (let row = norm.startRow; row <= norm.endRow; row++) {
-            for (let col = norm.startCol; col <= norm.endCol; col++) {
-                if (row === start.startRow && col === start.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,
-                });
-            }
+        const fillEvents = applyFillValues(norm, start.startRow, start.startCol, items, visibleCols);
+        if (fillEvents.length > 0) {
+            beginBatch?.();
+            for (const evt of fillEvents)
+                onCellValueChanged(evt);
+            endBatch?.();
         }
-        endBatch?.();
     }
     resolveRange(cx, cy) {
         if (!this.fillDragStart || !this.wrapperRef)
@@ -160,11 +136,11 @@ export class FillHandleState {
         const cell = target?.closest?.('[data-row-index][data-col-index]');
         if (!cell || !this.wrapperRef.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 < this.params.colOffset)
+        const coords = getCellCoordinates(cell);
+        if (!coords || coords.colIndex < this.params.colOffset)
             return null;
-        const dataCol = c - this.params.colOffset;
+        const r = coords.rowIndex;
+        const dataCol = coords.colIndex - this.params.colOffset;
         return normalizeSelectionRange({
             startRow: this.fillDragStart.startRow,
             startCol: this.fillDragStart.startCol,
@@ -183,8 +159,11 @@ export class FillHandleState {
         const maxC = Math.max(range.startCol, range.endCol);
         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 coords = getCellCoordinates(el);
+            if (!coords)
+                continue;
+            const r = coords.rowIndex;
+            const c = coords.colIndex - colOff;
             const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
             if (inRange) {
                 if (!el.hasAttribute('data-drag-range'))
@@ -212,9 +191,16 @@ export class FillHandleState {
         if (this._isFillDragging) {
             window.removeEventListener('mousemove', this.onMoveBound, true);
             window.removeEventListener('mouseup', this.onUpBound, true);
+            this.clearDragAttrs();
+            this._isFillDragging = false;
+            this.fillDragStart = null;
+            this.liveFillRange = null;
+            this.lastMousePos = null;
         }
-        if (this.rafHandle)
+        if (this.rafHandle) {
             cancelAnimationFrame(this.rafHandle);
+            this.rafHandle = 0;
+        }
         this.emitter.removeAllListeners();
     }
 }

package/dist/esm/state/GridState.js

@@ -1,4 +1,4 @@
-import { flattenColumns, processClientSideData, exportToCsv as coreExportToCsv, getCellValue, deriveFilterOptionsFromData, mergeFilter, } from '@alaarab/ogrid-core';
+import { flattenColumns, processClientSideData, exportToCsv as coreExportToCsv, getCellValue, deriveFilterOptionsFromData, mergeFilter, validateColumns, validateRowIds, } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 export class GridState {
     constructor(options) {
@@ -15,6 +15,9 @@ export class GridState {
         this._filterOptions = {};
         // Column display order (array of columnIds)
         this._columnOrder = [];
+        // Dirty-flag memoization for visibleColumnDefs getter
+        this._visibleColsCache = null;
+        this._visibleColsDirty = true;
         this._allColumns = options.columns;
         this._columns = flattenColumns(options.columns);
         this._getRowId = options.getRowId;
@@ -28,10 +31,18 @@ export class GridState {
         this._columnOrder = this._columns.map(c => c.columnId);
         this._onError = options.onError;
         this._onFirstDataRendered = options.onFirstDataRendered;
+        this._rowHeight = options.rowHeight;
+        this._ariaLabel = options.ariaLabel;
         // Derive initial filter options for client-side data
         if (!this._dataSource) {
             this._filterOptions = deriveFilterOptionsFromData(this._data, this._columns);
         }
+        // Runtime validation — runs once at construction
+        validateColumns(this._columns);
+        if (!this._dataSource && this._data.length > 0) {
+            validateRowIds(this._data, this._getRowId);
+            this._firstDataRendered = true;
+        }
         // If server-side, trigger initial fetch
         if (this._dataSource) {
             this._isLoading = true;
@@ -52,17 +63,26 @@ export class GridState {
     get isServerSide() { return this._dataSource != null; }
     get filterOptions() { return this._filterOptions; }
     get columnOrder() { return this._columnOrder; }
-    /** Get the visible columns in display order (respects column reorder). */
+    get rowHeight() { return this._rowHeight; }
+    get ariaLabel() { return this._ariaLabel; }
+    /** Get the visible columns in display order (respects column reorder). Memoized via dirty flag. */
     get visibleColumnDefs() {
+        if (!this._visibleColsDirty && this._visibleColsCache)
+            return this._visibleColsCache;
         const visible = this._columns.filter(c => this._visibleColumns.has(c.columnId));
-        if (this._columnOrder.length === 0)
-            return visible;
-        const orderMap = new Map(this._columnOrder.map((id, idx) => [id, idx]));
-        return [...visible].sort((a, b) => {
-            const ai = orderMap.get(a.columnId) ?? Infinity;
-            const bi = orderMap.get(b.columnId) ?? Infinity;
-            return ai - bi;
-        });
+        if (this._columnOrder.length === 0) {
+            this._visibleColsCache = visible;
+        }
+        else {
+            const orderMap = new Map(this._columnOrder.map((id, idx) => [id, idx]));
+            this._visibleColsCache = [...visible].sort((a, b) => {
+                const ai = orderMap.get(a.columnId) ?? Infinity;
+                const bi = orderMap.get(b.columnId) ?? Infinity;
+                return ai - bi;
+            });
+        }
+        this._visibleColsDirty = false;
+        return this._visibleColsCache;
     }
     /** Get processed (sorted, filtered, paginated) items for current page. */
     getProcessedItems() {
@@ -105,6 +125,7 @@ export class GridState {
             this._isLoading = false;
             if (!this._firstDataRendered && res.items.length > 0) {
                 this._firstDataRendered = true;
+                validateRowIds(res.items, this._getRowId);
                 this._onFirstDataRendered?.();
             }
             this.emitter.emit('stateChange', { type: 'data' });
@@ -196,10 +217,12 @@ export class GridState {
     }
     setVisibleColumns(columns) {
         this._visibleColumns = columns;
+        this._visibleColsDirty = true;
         this.emitter.emit('stateChange', { type: 'columns' });
     }
     setColumnOrder(order) {
         this._columnOrder = order;
+        this._visibleColsDirty = true;
         this.emitter.emit('stateChange', { type: 'columns' });
     }
     setLoading(loading) {
@@ -265,6 +288,9 @@ export class GridState {
             },
             getDisplayedRows: () => this.getProcessedItems().items,
             refreshData: () => this.refreshData(),
+            // scrollToRow is wired by OGrid after construction when virtualScrollState is present.
+            // This stub is replaced by OGrid.ts (see "Wire scrollToRow API method") for virtual scroll.
+            // For non-virtual grids it remains a no-op (native browser scroll handles row visibility).
             scrollToRow: () => { },
             getColumnOrder: () => [...this._columnOrder],
             setColumnOrder: (order) => this.setColumnOrder(order),