@alaarab/ogrid-js 2.1.2 → 2.1.4

package/dist/esm/state/KeyboardNavState.js

@@ -1,216 +0,0 @@
-import { getCellValue, computeTabNavigation, computeArrowNavigation, applyCellDeletion } from '@alaarab/ogrid-core';
-export class KeyboardNavState {
-    constructor(params, getActiveCell, getSelectionRange, setActiveCell, setSelectionRange) {
-        this.wrapperRef = null;
-        this.handleKeyDown = (e) => {
-            const { items, visibleCols, colOffset, editable, onCellValueChanged, onCopy, onCut, onPaste, onUndo, onRedo, onContextMenu, onStartEdit, getRowId, clearClipboardRanges } = this.params;
-            const activeCell = this.getActiveCell();
-            const selectionRange = this.getSelectionRange();
-            const maxRowIndex = items.length - 1;
-            const maxColIndex = visibleCols.length - 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 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 === '';
-            };
-            switch (e.key) {
-                case 'c':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        onCopy?.();
-                    }
-                    break;
-                case 'x':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        onCut?.();
-                    }
-                    break;
-                case 'v':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        void onPaste?.();
-                    }
-                    break;
-                case 'ArrowDown':
-                case 'ArrowUp':
-                case 'ArrowRight':
-                case 'ArrowLeft': {
-                    e.preventDefault();
-                    const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
-                        direction: e.key,
-                        rowIndex, columnIndex, dataColIndex, colOffset,
-                        maxRowIndex, maxColIndex,
-                        visibleColCount: visibleCols.length,
-                        isCtrl: e.ctrlKey || e.metaKey,
-                        isShift: shift,
-                        selectionRange,
-                        isEmptyAt,
-                    });
-                    this.setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
-                    this.setSelectionRange(newRange);
-                    break;
-                }
-                case 'Tab': {
-                    e.preventDefault();
-                    const tabResult = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
-                    const newDataColTab = tabResult.columnIndex - colOffset;
-                    this.setActiveCell({ rowIndex: tabResult.rowIndex, columnIndex: tabResult.columnIndex });
-                    this.setSelectionRange({
-                        startRow: tabResult.rowIndex,
-                        startCol: newDataColTab,
-                        endRow: tabResult.rowIndex,
-                        endCol: newDataColTab,
-                    });
-                    break;
-                }
-                case 'Home': {
-                    e.preventDefault();
-                    const newRowHome = e.ctrlKey ? 0 : rowIndex;
-                    this.setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
-                    this.setSelectionRange({
-                        startRow: newRowHome,
-                        startCol: 0,
-                        endRow: newRowHome,
-                        endCol: 0,
-                    });
-                    break;
-                }
-                case 'End': {
-                    e.preventDefault();
-                    const newRowEnd = e.ctrlKey ? maxRowIndex : rowIndex;
-                    this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
-                    this.setSelectionRange({
-                        startRow: newRowEnd,
-                        startCol: visibleCols.length - 1,
-                        endRow: newRowEnd,
-                        endCol: visibleCols.length - 1,
-                    });
-                    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) {
-                                onStartEdit?.(getRowId(item), col.columnId);
-                            }
-                        }
-                    }
-                    break;
-                }
-                case 'Escape':
-                    e.preventDefault();
-                    clearClipboardRanges?.();
-                    this.setActiveCell(null);
-                    this.setSelectionRange(null);
-                    break;
-                case 'z':
-                    if (e.ctrlKey || e.metaKey) {
-                        if (e.shiftKey && onRedo) {
-                            e.preventDefault();
-                            onRedo();
-                        }
-                        else if (!e.shiftKey && onUndo) {
-                            e.preventDefault();
-                            onUndo();
-                        }
-                    }
-                    break;
-                case 'y':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        onRedo?.();
-                    }
-                    break;
-                case 'a':
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        if (items.length > 0 && visibleCols.length > 0) {
-                            this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
-                            this.setSelectionRange({
-                                startRow: 0,
-                                startCol: 0,
-                                endRow: items.length - 1,
-                                endCol: visibleCols.length - 1,
-                            });
-                        }
-                    }
-                    break;
-                case 'Delete':
-                case 'Backspace': {
-                    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 deleteEvents = applyCellDeletion(range, items, visibleCols);
-                    for (const evt of deleteEvents)
-                        onCellValueChanged(evt);
-                    break;
-                }
-                case 'F10':
-                    if (e.shiftKey) {
-                        e.preventDefault();
-                        if (activeCell != null && this.wrapperRef) {
-                            const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
-                            const cell = this.wrapperRef.querySelector(sel);
-                            if (cell) {
-                                const rect = cell.getBoundingClientRect();
-                                onContextMenu?.(rect.left + rect.width / 2, rect.top + rect.height / 2);
-                            }
-                            else {
-                                onContextMenu?.(100, 100);
-                            }
-                        }
-                        else {
-                            onContextMenu?.(100, 100);
-                        }
-                    }
-                    break;
-                default:
-                    break;
-            }
-        };
-        this.params = params;
-        this.getActiveCell = getActiveCell;
-        this.getSelectionRange = getSelectionRange;
-        this.setActiveCell = setActiveCell;
-        this.setSelectionRange = setSelectionRange;
-    }
-    setWrapperRef(ref) {
-        this.wrapperRef = ref;
-    }
-    updateParams(params) {
-        this.params = params;
-    }
-}

package/dist/esm/state/RowSelectionState.js

@@ -1,72 +0,0 @@
-import { applyRangeRowSelection, computeRowSelectionState } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-/**
- * Manages row selection state for single or multiple selection modes with shift-click range support.
- * Vanilla JS equivalent of React's `useRowSelection` hook.
- */
-export class RowSelectionState {
-    constructor(rowSelection, getRowId) {
-        this.emitter = new EventEmitter();
-        this._selectedRowIds = new Set();
-        this._lastClickedRow = -1;
-        this._rowSelection = rowSelection;
-        this._getRowId = getRowId;
-    }
-    get selectedRowIds() {
-        return this._selectedRowIds;
-    }
-    get rowSelection() {
-        return this._rowSelection;
-    }
-    updateSelection(newSelectedIds, items) {
-        this._selectedRowIds = newSelectedIds;
-        this.emitter.emit('rowSelectionChange', {
-            selectedRowIds: Array.from(newSelectedIds),
-            selectedItems: items.filter((item) => newSelectedIds.has(this._getRowId(item))),
-        });
-    }
-    handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey, items) {
-        if (this._rowSelection === 'single') {
-            this.updateSelection(checked ? new Set([rowId]) : new Set(), items);
-            this._lastClickedRow = rowIndex;
-            return;
-        }
-        let next;
-        if (shiftKey && this._lastClickedRow >= 0 && this._lastClickedRow !== rowIndex) {
-            next = applyRangeRowSelection(this._lastClickedRow, rowIndex, checked, items, this._getRowId, this._selectedRowIds);
-        }
-        else {
-            next = new Set(this._selectedRowIds);
-            if (checked)
-                next.add(rowId);
-            else
-                next.delete(rowId);
-        }
-        this._lastClickedRow = rowIndex;
-        this.updateSelection(next, items);
-    }
-    handleSelectAll(checked, items) {
-        if (checked) {
-            this.updateSelection(new Set(items.map((item) => this._getRowId(item))), items);
-        }
-        else {
-            this.updateSelection(new Set(), items);
-        }
-    }
-    isAllSelected(items) {
-        return computeRowSelectionState(this._selectedRowIds, items, this._getRowId).allSelected;
-    }
-    isSomeSelected(items) {
-        return computeRowSelectionState(this._selectedRowIds, items, this._getRowId).someSelected;
-    }
-    getSelectedRows(items) {
-        return items.filter((item) => this._selectedRowIds.has(this._getRowId(item)));
-    }
-    onRowSelectionChange(handler) {
-        this.emitter.on('rowSelectionChange', handler);
-        return () => this.emitter.off('rowSelectionChange', handler);
-    }
-    destroy() {
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/SelectionState.js

@@ -1,109 +0,0 @@
-import { rangesEqual } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-export class SelectionState {
-    constructor() {
-        this.emitter = new EventEmitter();
-        this._activeCell = null;
-        this._selectionRange = null;
-        this._selectedRowIds = new Set();
-        this._isDragging = false;
-        this.dragStartCell = null;
-        this.rafHandle = null;
-        this.pendingRange = null;
-    }
-    get activeCell() {
-        return this._activeCell;
-    }
-    get dragAnchor() {
-        return this.dragStartCell;
-    }
-    get selectionRange() {
-        return this._selectionRange;
-    }
-    get selectedRowIds() {
-        return this._selectedRowIds;
-    }
-    get isDragging() {
-        return this._isDragging;
-    }
-    /** Get the current drag range (used during drag for DOM attribute updates). */
-    getDragRange() {
-        return this.pendingRange;
-    }
-    setActiveCell(cell) {
-        this._activeCell = cell;
-        this._selectionRange = cell != null
-            ? { startRow: cell.rowIndex, startCol: cell.columnIndex, endRow: cell.rowIndex, endCol: cell.columnIndex }
-            : null;
-        this.emitter.emit('selectionChange', { activeCell: cell, selectionRange: this._selectionRange });
-    }
-    setSelectionRange(range) {
-        this._selectionRange = range;
-        this.emitter.emit('selectionChange', { activeCell: this._activeCell, selectionRange: range });
-    }
-    clearSelection() {
-        this._activeCell = null;
-        this._selectionRange = null;
-        this.emitter.emit('selectionChange', { activeCell: null, selectionRange: null });
-    }
-    startDrag(rowIndex, colIndex) {
-        this._isDragging = true;
-        this.dragStartCell = { rowIndex, columnIndex: colIndex };
-        this._activeCell = { rowIndex, columnIndex: colIndex };
-        this._selectionRange = { startRow: rowIndex, startCol: colIndex, endRow: rowIndex, endCol: colIndex };
-    }
-    updateDrag(rowIndex, colIndex, applyFn) {
-        if (!this._isDragging || !this.dragStartCell)
-            return;
-        const newRange = {
-            startRow: this.dragStartCell.rowIndex,
-            startCol: this.dragStartCell.columnIndex,
-            endRow: rowIndex,
-            endCol: colIndex,
-        };
-        // Skip RAF if range hasn't changed (deduplication optimization)
-        if (rangesEqual(this.pendingRange, newRange))
-            return;
-        this.pendingRange = newRange;
-        if (this.rafHandle === null) {
-            this.rafHandle = requestAnimationFrame(() => {
-                if (this.pendingRange) {
-                    applyFn(this.pendingRange);
-                }
-                this.rafHandle = null;
-            });
-        }
-    }
-    endDrag() {
-        if (this.rafHandle !== null) {
-            // Flush pending RAF synchronously before ending drag (critical for jsdom tests)
-            cancelAnimationFrame(this.rafHandle);
-            this.rafHandle = null;
-        }
-        if (this.pendingRange) {
-            this._selectionRange = this.pendingRange;
-            this.pendingRange = null;
-            this.emitter.emit('selectionChange', { activeCell: this._activeCell, selectionRange: this._selectionRange });
-        }
-        this._isDragging = false;
-        this.dragStartCell = null;
-    }
-    setSelectedRowIds(ids) {
-        this._selectedRowIds = ids;
-        this.emitter.emit('rowSelectionChange', { selectedRowIds: ids });
-    }
-    onSelectionChange(handler) {
-        this.emitter.on('selectionChange', handler);
-        return () => this.emitter.off('selectionChange', handler);
-    }
-    onRowSelectionChange(handler) {
-        this.emitter.on('rowSelectionChange', handler);
-        return () => this.emitter.off('rowSelectionChange', handler);
-    }
-    destroy() {
-        if (this.rafHandle !== null) {
-            cancelAnimationFrame(this.rafHandle);
-        }
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/SideBarState.js

@@ -1,41 +0,0 @@
-import { EventEmitter } from './EventEmitter';
-const DEFAULT_PANELS = ['columns', 'filters'];
-export class SideBarState {
-    constructor(config) {
-        this.emitter = new EventEmitter();
-        this._isEnabled = config != null && config !== false;
-        if (!this._isEnabled || config === true) {
-            this._panels = DEFAULT_PANELS;
-            this._position = 'right';
-            this._activePanel = null;
-        }
-        else {
-            const def = config;
-            this._panels = def.panels ?? DEFAULT_PANELS;
-            this._position = def.position ?? 'right';
-            this._activePanel = def.defaultPanel ?? null;
-        }
-    }
-    get isEnabled() { return this._isEnabled; }
-    get panels() { return this._panels; }
-    get position() { return this._position; }
-    get activePanel() { return this._activePanel; }
-    get isOpen() { return this._activePanel !== null; }
-    setActivePanel(panel) {
-        this._activePanel = panel;
-        this.emitter.emit('change');
-    }
-    toggle(panel) {
-        this.setActivePanel(this._activePanel === panel ? null : panel);
-    }
-    close() {
-        this.setActivePanel(null);
-    }
-    onChange(handler) {
-        this.emitter.on('change', handler);
-        return () => this.emitter.off('change', handler);
-    }
-    destroy() {
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/TableLayoutState.js

@@ -1,97 +0,0 @@
-import { DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-export class TableLayoutState {
-    constructor() {
-        this.emitter = new EventEmitter();
-        this._containerWidth = 0;
-        this._columnSizingOverrides = {};
-        this._ro = null;
-    }
-    /** Start observing a container element for resize. */
-    observeContainer(el) {
-        this.disconnectObserver();
-        // ResizeObserver may not be available in jsdom test environments
-        if (typeof ResizeObserver !== 'undefined') {
-            this._ro = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    const rect = entry.contentRect;
-                    this._containerWidth = rect.width;
-                    this.emitter.emit('layoutChange', { type: 'containerResize' });
-                }
-            });
-            this._ro.observe(el);
-        }
-        // Measure initial size
-        this._containerWidth = el.clientWidth;
-    }
-    disconnectObserver() {
-        if (this._ro) {
-            this._ro.disconnect();
-            this._ro = null;
-        }
-    }
-    get containerWidth() {
-        return this._containerWidth;
-    }
-    get columnSizingOverrides() {
-        return this._columnSizingOverrides;
-    }
-    /** Set a column width override (from resize drag). */
-    setColumnOverride(columnId, widthPx) {
-        this._columnSizingOverrides[columnId] = widthPx;
-        this.emitter.emit('layoutChange', { type: 'columnOverride' });
-    }
-    /** Compute minimum table width from visible columns. */
-    computeMinTableWidth(visibleColumnCount, hasCheckboxColumn) {
-        const checkboxWidth = hasCheckboxColumn ? CHECKBOX_COLUMN_WIDTH : 0;
-        return checkboxWidth + visibleColumnCount * (DEFAULT_MIN_COLUMN_WIDTH + CELL_PADDING);
-    }
-    /** Compute desired table width respecting overrides. */
-    computeDesiredTableWidth(visibleColumns, hasCheckboxColumn) {
-        const checkboxWidth = hasCheckboxColumn ? CHECKBOX_COLUMN_WIDTH : 0;
-        let total = checkboxWidth;
-        for (const col of visibleColumns) {
-            const override = this._columnSizingOverrides[col.columnId];
-            if (override) {
-                total += override + CELL_PADDING;
-            }
-            else {
-                total += (col.width ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING;
-            }
-        }
-        return total;
-    }
-    /** Get all column widths (overrides only — non-overridden columns use CSS defaults). */
-    getAllColumnWidths() {
-        return { ...this._columnSizingOverrides };
-    }
-    /** Remove overrides for columns that no longer exist. */
-    cleanupOverrides(validColumnIds) {
-        const next = {};
-        let changed = false;
-        for (const [key, value] of Object.entries(this._columnSizingOverrides)) {
-            if (validColumnIds.has(key)) {
-                next[key] = value;
-            }
-            else {
-                changed = true;
-            }
-        }
-        if (changed) {
-            this._columnSizingOverrides = next;
-            this.emitter.emit('layoutChange', { type: 'columnOverride' });
-        }
-    }
-    /** Apply initial column widths from options. */
-    applyInitialWidths(initialWidths) {
-        this._columnSizingOverrides = { ...initialWidths };
-    }
-    onLayoutChange(handler) {
-        this.emitter.on('layoutChange', handler);
-        return () => this.emitter.off('layoutChange', handler);
-    }
-    destroy() {
-        this.disconnectObserver();
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/UndoRedoState.js

@@ -1,71 +0,0 @@
-import { UndoRedoStack } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-export class UndoRedoState {
-    constructor(onCellValueChanged, maxUndoDepth = 100) {
-        this.onCellValueChanged = onCellValueChanged;
-        this.emitter = new EventEmitter();
-        this.stack = new UndoRedoStack(maxUndoDepth);
-        if (onCellValueChanged) {
-            this.wrappedCallback = (event) => {
-                this.stack.record(event);
-                if (!this.stack.isBatching) {
-                    this.emitStackChange();
-                }
-                onCellValueChanged(event);
-            };
-        }
-    }
-    get canUndo() {
-        return this.stack.canUndo;
-    }
-    get canRedo() {
-        return this.stack.canRedo;
-    }
-    getWrappedCallback() {
-        return this.wrappedCallback;
-    }
-    beginBatch() {
-        this.stack.beginBatch();
-    }
-    endBatch() {
-        this.stack.endBatch();
-        this.emitStackChange();
-    }
-    undo() {
-        if (!this.onCellValueChanged)
-            return;
-        const lastBatch = this.stack.undo();
-        if (!lastBatch)
-            return;
-        this.emitStackChange();
-        for (let i = lastBatch.length - 1; i >= 0; i--) {
-            const ev = lastBatch[i];
-            this.onCellValueChanged({
-                ...ev,
-                oldValue: ev.newValue,
-                newValue: ev.oldValue,
-            });
-        }
-    }
-    redo() {
-        if (!this.onCellValueChanged)
-            return;
-        const nextBatch = this.stack.redo();
-        if (!nextBatch)
-            return;
-        this.emitStackChange();
-        for (const ev of nextBatch) {
-            this.onCellValueChanged(ev);
-        }
-    }
-    emitStackChange() {
-        this.emitter.emit('stackChange', { canUndo: this.canUndo, canRedo: this.canRedo });
-    }
-    onStackChange(handler) {
-        this.emitter.on('stackChange', handler);
-        return () => this.emitter.off('stackChange', handler);
-    }
-    destroy() {
-        this.emitter.removeAllListeners();
-    }
-}