@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/state/HeaderFilterState.js

@@ -0,0 +1,205 @@
+import { EventEmitter } from './EventEmitter';
+/**
+ * Manages header filter popover state for all columns.
+ * Equivalent of React's useColumnHeaderFilterState, but class-based.
+ */
+export class HeaderFilterState {
+    constructor(onFilterChange) {
+        this.emitter = new EventEmitter();
+        // Which column's filter is currently open (null = none)
+        this._openColumnId = null;
+        // Temporary state for the currently open filter popover
+        this._tempTextValue = '';
+        this._tempSelected = new Set();
+        this._tempDateFrom = '';
+        this._tempDateTo = '';
+        this._searchText = '';
+        // Popover position
+        this._popoverPosition = null;
+        // External references
+        this._filters = {};
+        this._filterOptions = {};
+        // Click-outside handler
+        this._clickOutsideHandler = null;
+        this._escapeHandler = null;
+        this._popoverEl = null;
+        this._headerEl = null;
+        this._onFilterChange = onFilterChange;
+    }
+    get openColumnId() { return this._openColumnId; }
+    get tempTextValue() { return this._tempTextValue; }
+    get tempSelected() { return this._tempSelected; }
+    get tempDateFrom() { return this._tempDateFrom; }
+    get tempDateTo() { return this._tempDateTo; }
+    get searchText() { return this._searchText; }
+    get popoverPosition() { return this._popoverPosition; }
+    setFilters(filters) {
+        this._filters = filters;
+    }
+    setFilterOptions(options) {
+        this._filterOptions = options;
+    }
+    getFilterOptions(filterField) {
+        return this._filterOptions[filterField] ?? [];
+    }
+    getFilteredOptions(filterField) {
+        const options = this.getFilterOptions(filterField);
+        if (!this._searchText)
+            return options;
+        const lower = this._searchText.toLowerCase();
+        return options.filter(opt => opt.toLowerCase().includes(lower));
+    }
+    hasActiveFilter(config) {
+        const fv = this._filters[config.filterField];
+        if (!fv)
+            return false;
+        if (fv.type === 'text')
+            return fv.value.trim().length > 0;
+        if (fv.type === 'multiSelect')
+            return fv.value.length > 0;
+        if (fv.type === 'date')
+            return !!(fv.value.from || fv.value.to);
+        if (fv.type === 'people')
+            return !!fv.value;
+        return false;
+    }
+    /**
+     * Open a filter popover for a specific column.
+     */
+    open(columnId, config, headerEl, popoverEl) {
+        // Close any existing popover first
+        if (this._openColumnId) {
+            this.close();
+        }
+        this._openColumnId = columnId;
+        this._headerEl = headerEl;
+        this._popoverEl = popoverEl;
+        // Initialize temp state from current filter values
+        const fv = this._filters[config.filterField];
+        if (config.filterType === 'text') {
+            this._tempTextValue = fv?.type === 'text' ? fv.value : '';
+        }
+        else if (config.filterType === 'multiSelect') {
+            this._tempSelected = new Set(fv?.type === 'multiSelect' ? fv.value : []);
+        }
+        else if (config.filterType === 'date') {
+            const dv = fv?.type === 'date' ? fv.value : {};
+            this._tempDateFrom = dv.from ?? '';
+            this._tempDateTo = dv.to ?? '';
+        }
+        this._searchText = '';
+        // Compute position
+        const rect = headerEl.getBoundingClientRect();
+        this._popoverPosition = { top: rect.bottom + 4, left: rect.left };
+        // Set up click-outside listener
+        this._clickOutsideHandler = (e) => {
+            const target = e.target;
+            if (this._popoverEl && !this._popoverEl.contains(target) &&
+                this._headerEl && !this._headerEl.contains(target)) {
+                this.close();
+            }
+        };
+        this._escapeHandler = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.close();
+            }
+        };
+        setTimeout(() => {
+            document.addEventListener('mousedown', this._clickOutsideHandler);
+        }, 0);
+        document.addEventListener('keydown', this._escapeHandler, true);
+        this.emitter.emit('change', undefined);
+    }
+    close() {
+        this._openColumnId = null;
+        this._popoverPosition = null;
+        this._popoverEl = null;
+        this._headerEl = null;
+        if (this._clickOutsideHandler) {
+            document.removeEventListener('mousedown', this._clickOutsideHandler);
+            this._clickOutsideHandler = null;
+        }
+        if (this._escapeHandler) {
+            document.removeEventListener('keydown', this._escapeHandler, true);
+            this._escapeHandler = null;
+        }
+        this.emitter.emit('change', undefined);
+    }
+    // --- Temp state setters ---
+    setTempTextValue(v) {
+        this._tempTextValue = v;
+        this.emitter.emit('change', undefined);
+    }
+    setSearchText(v) {
+        this._searchText = v;
+        this.emitter.emit('change', undefined);
+    }
+    setTempDateFrom(v) {
+        this._tempDateFrom = v;
+        this.emitter.emit('change', undefined);
+    }
+    setTempDateTo(v) {
+        this._tempDateTo = v;
+        this.emitter.emit('change', undefined);
+    }
+    // --- Checkbox handlers ---
+    handleCheckboxChange(option, checked) {
+        const next = new Set(this._tempSelected);
+        if (checked)
+            next.add(option);
+        else
+            next.delete(option);
+        this._tempSelected = next;
+        this.emitter.emit('change', undefined);
+    }
+    handleSelectAll(filterField) {
+        this._tempSelected = new Set(this.getFilterOptions(filterField));
+        this.emitter.emit('change', undefined);
+    }
+    handleClearSelection() {
+        this._tempSelected = new Set();
+        this.emitter.emit('change', undefined);
+    }
+    // --- Apply/Clear ---
+    applyTextFilter(filterField) {
+        const value = this._tempTextValue.trim();
+        this._onFilterChange(filterField, value ? { type: 'text', value } : undefined);
+        this.close();
+    }
+    clearTextFilter(filterField) {
+        this._tempTextValue = '';
+        this._onFilterChange(filterField, undefined);
+        this.close();
+    }
+    applyMultiSelectFilter(filterField) {
+        const arr = Array.from(this._tempSelected);
+        this._onFilterChange(filterField, arr.length > 0 ? { type: 'multiSelect', value: arr } : undefined);
+        this.close();
+    }
+    applyDateFilter(filterField) {
+        const from = this._tempDateFrom || undefined;
+        const to = this._tempDateTo || undefined;
+        this._onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+        this.close();
+    }
+    clearDateFilter(filterField) {
+        this._tempDateFrom = '';
+        this._tempDateTo = '';
+        this._onFilterChange(filterField, undefined);
+        this.close();
+    }
+    clearFilter(filterField) {
+        this._onFilterChange(filterField, undefined);
+        this.close();
+    }
+    onChange(handler) {
+        this.emitter.on('change', handler);
+        return () => this.emitter.off('change', handler);
+    }
+    destroy() {
+        this.close();
+        this.emitter.removeAllListeners();
+    }
+}

package/dist/esm/state/KeyboardNavState.js

@@ -0,0 +1,374 @@
+import { normalizeSelectionRange, getCellValue } from '@alaarab/ogrid-core';
+import { parseValue } from '@alaarab/ogrid-core';
+/**
+ * Excel-style Ctrl+Arrow: find the target position along a 1D axis.
+ * - Non-empty current + non-empty next → scan through non-empties, stop at last before empty/edge.
+ * - Otherwise → skip empties, land on next non-empty or edge.
+ */
+function 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 p = next;
+    while (p !== edge) {
+        if (!isEmpty(p))
+            return p;
+        p += step;
+    }
+    return edge;
+}
+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': {
+                    e.preventDefault();
+                    const ctrl = e.ctrlKey || e.metaKey;
+                    const newRow = ctrl
+                        ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                        : Math.min(rowIndex + 1, maxRowIndex);
+                    this.setActiveCell({ rowIndex: newRow, columnIndex });
+                    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,
+                        });
+                    }
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    const ctrl = e.ctrlKey || e.metaKey;
+                    const newRowUp = ctrl
+                        ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                        : Math.max(rowIndex - 1, 0);
+                    this.setActiveCell({ rowIndex: newRowUp, columnIndex });
+                    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,
+                        });
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.preventDefault();
+                    const ctrl = e.ctrlKey || e.metaKey;
+                    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;
+                    this.setActiveCell({ rowIndex, columnIndex: newCol });
+                    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,
+                        });
+                    }
+                    break;
+                }
+                case 'ArrowLeft': {
+                    e.preventDefault();
+                    const ctrl = e.ctrlKey || e.metaKey;
+                    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;
+                    this.setActiveCell({ rowIndex, columnIndex: newColLeft });
+                    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,
+                        });
+                    }
+                    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.setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });
+                    this.setSelectionRange({
+                        startRow: newRowTab,
+                        startCol: newDataColTab,
+                        endRow: newRowTab,
+                        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 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();
+                        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

@@ -0,0 +1,81 @@
+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;
+        }
+        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 < items.length) {
+                    const id = this._getRowId(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, 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 items.length > 0 && items.every((item) => this._selectedRowIds.has(this._getRowId(item)));
+    }
+    isSomeSelected(items) {
+        const allSelected = this.isAllSelected(items);
+        return !allSelected && items.some((item) => this._selectedRowIds.has(this._getRowId(item)));
+    }
+    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();
+    }
+}