@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/state/SelectionState.js

@@ -0,0 +1,102 @@
+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 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,
+        };
+        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

@@ -0,0 +1,41 @@
+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', undefined);
+    }
+    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

@@ -0,0 +1,95 @@
+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 = { ...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) {
+        let changed = false;
+        const next = { ...this._columnSizingOverrides };
+        for (const key of Object.keys(next)) {
+            if (!validColumnIds.has(key)) {
+                delete next[key];
+                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

@@ -0,0 +1,82 @@
+import { EventEmitter } from './EventEmitter';
+export class UndoRedoState {
+    constructor(onCellValueChanged, maxUndoDepth = 100) {
+        this.onCellValueChanged = onCellValueChanged;
+        this.emitter = new EventEmitter();
+        this.historyStack = [];
+        this.redoStack = [];
+        this.batch = null;
+        this.maxUndoDepth = maxUndoDepth;
+        if (onCellValueChanged) {
+            this.wrappedCallback = (event) => {
+                if (this.batch !== null) {
+                    this.batch.push(event);
+                }
+                else {
+                    this.historyStack = [...this.historyStack, [event]].slice(-this.maxUndoDepth);
+                    this.redoStack = [];
+                    this.emitStackChange();
+                }
+                onCellValueChanged(event);
+            };
+        }
+    }
+    get canUndo() {
+        return this.historyStack.length > 0;
+    }
+    get canRedo() {
+        return this.redoStack.length > 0;
+    }
+    getWrappedCallback() {
+        return this.wrappedCallback;
+    }
+    beginBatch() {
+        this.batch = [];
+    }
+    endBatch() {
+        const currentBatch = this.batch;
+        this.batch = null;
+        if (!currentBatch || currentBatch.length === 0)
+            return;
+        this.historyStack = [...this.historyStack, currentBatch].slice(-this.maxUndoDepth);
+        this.redoStack = [];
+        this.emitStackChange();
+    }
+    undo() {
+        if (!this.onCellValueChanged || this.historyStack.length === 0)
+            return;
+        const lastBatch = this.historyStack[this.historyStack.length - 1];
+        this.historyStack = this.historyStack.slice(0, -1);
+        this.redoStack = [...this.redoStack, lastBatch];
+        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 || this.redoStack.length === 0)
+            return;
+        const nextBatch = this.redoStack[this.redoStack.length - 1];
+        this.redoStack = this.redoStack.slice(0, -1);
+        this.historyStack = [...this.historyStack, nextBatch];
+        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();
+    }
+}

package/dist/esm/types/columnTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/gridTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/index.js

@@ -0,0 +1,2 @@
+export * from './columnTypes';
+export * from './gridTypes';

package/dist/types/OGrid.d.ts

@@ -0,0 +1,60 @@
+import type { OGridOptions, OGridEvents, IJsOGridApi } from './types/gridTypes';
+export declare class OGrid<T> {
+    private state;
+    private renderer;
+    private pagination;
+    private statusBar;
+    private columnChooser;
+    private sideBarState;
+    private sideBarComponent;
+    private sideBarContainer;
+    private headerFilterState;
+    private headerFilterComponent;
+    private filterConfigs;
+    private loadingOverlay;
+    private bodyArea;
+    private selectionState;
+    private keyboardNavState;
+    private clipboardState;
+    private undoRedoState;
+    private resizeState;
+    private fillHandleState;
+    private rowSelectionState;
+    private pinningState;
+    private marchingAnts;
+    private cellEditor;
+    private contextMenu;
+    private layoutState;
+    private events;
+    private unsubscribes;
+    private containerEl;
+    private tableContainer;
+    private toolbarEl;
+    private paginationContainer;
+    private statusBarContainer;
+    private options;
+    /** The imperative grid API (extends React's IOGridApi with JS-specific methods). */
+    readonly api: IJsOGridApi<T>;
+    constructor(container: HTMLElement, options: OGridOptions<T>);
+    private initializeInteraction;
+    private attachGlobalHandlers;
+    private updateRendererInteractionState;
+    private updateDragAttributes;
+    private handleCellClick;
+    private handleCellMouseDown;
+    private handleCellContextMenu;
+    private showContextMenu;
+    private startCellEdit;
+    private buildFilterConfigs;
+    private handleFilterIconClick;
+    private renderHeaderFilterPopover;
+    private renderSideBar;
+    private renderLoadingOverlay;
+    private renderAll;
+    /** Subscribe to grid events. */
+    on<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
+    /** Unsubscribe from grid events. */
+    off<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
+    /** Clean up all event listeners and DOM. */
+    destroy(): void;
+}

package/dist/types/components/ColumnChooser.d.ts

@@ -0,0 +1,14 @@
+import type { GridState } from '../state/GridState';
+export declare class ColumnChooser<T> {
+    private container;
+    private state;
+    private el;
+    private dropdown;
+    private isOpen;
+    constructor(container: HTMLElement, state: GridState<T>);
+    render(): void;
+    private toggle;
+    private open;
+    private close;
+    destroy(): void;
+}

package/dist/types/components/ContextMenu.d.ts

@@ -0,0 +1,17 @@
+import type { ISelectionRange } from '@alaarab/ogrid-core';
+export interface ContextMenuHandlers {
+    onCopy: () => void;
+    onCut: () => void;
+    onPaste: () => void;
+    onSelectAll: () => void;
+    onUndo: () => void;
+    onRedo: () => void;
+}
+export declare class ContextMenu {
+    private menu;
+    private handlers;
+    show(x: number, y: number, handlers: ContextMenuHandlers, canUndo: boolean, canRedo: boolean, selectionRange: ISelectionRange | null): void;
+    close(): void;
+    private handleItemClick;
+    destroy(): void;
+}

package/dist/types/components/HeaderFilter.d.ts

@@ -0,0 +1,24 @@
+import type { HeaderFilterState, HeaderFilterConfig } from '../state/HeaderFilterState';
+/**
+ * Renders header filter popover (dropdown) in DOM.
+ * Instantiated by OGrid, reads state from HeaderFilterState.
+ */
+export declare class HeaderFilter {
+    private state;
+    private popoverEl;
+    constructor(state: HeaderFilterState);
+    /**
+     * Render the popover for the currently open filter.
+     * Call this whenever HeaderFilterState changes.
+     */
+    render(config: HeaderFilterConfig | null): void;
+    private renderTextFilter;
+    private renderMultiSelectFilter;
+    private updateCheckboxList;
+    private renderDateFilter;
+    private applyInputStyle;
+    private applyButtonStyle;
+    private applySmallButtonStyle;
+    cleanup(): void;
+    destroy(): void;
+}

package/dist/types/components/InlineCellEditor.d.ts

@@ -0,0 +1,24 @@
+import type { IColumnDef } from '../types/columnTypes';
+import type { RowId } from '@alaarab/ogrid-core';
+export declare class InlineCellEditor<T> {
+    private container;
+    private editor;
+    private editingCell;
+    private onCommit;
+    private onCancel;
+    constructor(container: HTMLElement);
+    startEdit(rowId: RowId, columnId: string, item: T, column: IColumnDef<T>, cell: HTMLTableCellElement, onCommit: (rowId: RowId, columnId: string, value: unknown) => void, onCancel: () => void): void;
+    /** Returns the cell currently being edited, or null if no editor is open. */
+    getEditingCell(): {
+        rowId: RowId;
+        columnId: string;
+    } | null;
+    closeEditor(): void;
+    private createEditor;
+    private createTextEditor;
+    private createCheckboxEditor;
+    private createDateEditor;
+    private createSelectEditor;
+    private createRichSelectEditor;
+    destroy(): void;
+}

package/dist/types/components/MarchingAntsOverlay.d.ts

@@ -0,0 +1,25 @@
+import type { ISelectionRange } from '@alaarab/ogrid-core';
+/**
+ * MarchingAntsOverlay — renders SVG overlays on top of the grid:
+ * 1. Selection range: solid green border
+ * 2. Copy/Cut range: animated dashed border (marching ants)
+ *
+ * Vanilla JS equivalent of React's MarchingAntsOverlay component.
+ */
+export declare class MarchingAntsOverlay {
+    private container;
+    private colOffset;
+    private selSvg;
+    private clipSvg;
+    private selectionRange;
+    private copyRange;
+    private cutRange;
+    private rafHandle;
+    constructor(container: HTMLElement, colOffset?: number);
+    update(selectionRange: ISelectionRange | null, copyRange: ISelectionRange | null, cutRange: ISelectionRange | null): void;
+    private render;
+    private createSvg;
+    private positionSvg;
+    private removeSvg;
+    destroy(): void;
+}

package/dist/types/components/PaginationControls.d.ts

@@ -0,0 +1,9 @@
+import type { GridState } from '../state/GridState';
+export declare class PaginationControls<T> {
+    private container;
+    private state;
+    private el;
+    constructor(container: HTMLElement, state: GridState<T>);
+    render(totalCount: number): void;
+    destroy(): void;
+}

package/dist/types/components/SideBar.d.ts

@@ -0,0 +1,35 @@
+import type { IColumnDefinition, IFilters, FilterValue } from '@alaarab/ogrid-core';
+import type { SideBarState } from '../state/SideBarState';
+export interface SideBarFilterColumn {
+    columnId: string;
+    name: string;
+    filterField: string;
+    filterType: 'text' | 'multiSelect' | 'people' | 'date';
+}
+export interface SideBarRenderConfig {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    onSetVisibleColumns: (columns: Set<string>) => void;
+    filterableColumns: SideBarFilterColumn[];
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
+    filterOptions: Record<string, string[]>;
+}
+export declare class SideBar {
+    private container;
+    private state;
+    private el;
+    private config;
+    constructor(container: HTMLElement, state: SideBarState);
+    setConfig(config: SideBarRenderConfig): void;
+    render(): void;
+    private createTabStrip;
+    private createPanel;
+    private renderColumnsPanel;
+    private renderFiltersPanel;
+    private applyActionButtonStyle;
+    private applyTextInputStyle;
+    private applyDateInputStyle;
+    destroy(): void;
+}

package/dist/types/components/StatusBar.d.ts

@@ -0,0 +1,8 @@
+import type { IStatusBarProps } from '@alaarab/ogrid-core';
+export declare class StatusBar {
+    private container;
+    private el;
+    constructor(container: HTMLElement);
+    render(props: IStatusBarProps): void;
+    destroy(): void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,26 @@
+export * from '@alaarab/ogrid-core';
+export type { IColumnDef, IColumnGroupDef, ICellEditorContext } from './types/columnTypes';
+export type { OGridOptions, OGridEvents, IJsOGridApi } from './types/gridTypes';
+export { OGrid } from './OGrid';
+export { GridState } from './state/GridState';
+export { EventEmitter } from './state/EventEmitter';
+export { SelectionState } from './state/SelectionState';
+export { KeyboardNavState } from './state/KeyboardNavState';
+export { ClipboardState } from './state/ClipboardState';
+export { UndoRedoState } from './state/UndoRedoState';
+export { ColumnResizeState } from './state/ColumnResizeState';
+export { TableLayoutState } from './state/TableLayoutState';
+export { TableRenderer } from './renderer/TableRenderer';
+export { PaginationControls } from './components/PaginationControls';
+export { StatusBar } from './components/StatusBar';
+export { ColumnChooser } from './components/ColumnChooser';
+export { InlineCellEditor } from './components/InlineCellEditor';
+export { ContextMenu } from './components/ContextMenu';
+export { FillHandleState } from './state/FillHandleState';
+export { RowSelectionState } from './state/RowSelectionState';
+export { ColumnPinningState } from './state/ColumnPinningState';
+export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+export { SideBarState } from './state/SideBarState';
+export { HeaderFilterState } from './state/HeaderFilterState';
+export { SideBar } from './components/SideBar';
+export { HeaderFilter } from './components/HeaderFilter';

package/dist/types/renderer/TableRenderer.d.ts

@@ -0,0 +1,59 @@
+import type { RowId } from '../types/gridTypes';
+import type { IActiveCell, ISelectionRange } from '@alaarab/ogrid-core';
+import type { GridState } from '../state/GridState';
+import type { HeaderFilterState, HeaderFilterConfig } from '../state/HeaderFilterState';
+export interface TableRendererInteractionState {
+    activeCell: IActiveCell | null;
+    selectionRange: ISelectionRange | null;
+    copyRange: ISelectionRange | null;
+    cutRange: ISelectionRange | null;
+    editingCell: {
+        rowId: RowId;
+        columnId: string;
+    } | null;
+    columnWidths: Record<string, number>;
+    onCellClick?: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
+    onCellMouseDown?: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
+    onCellDoubleClick?: (rowIndex: number, colIndex: number, rowId: RowId, columnId: string) => void;
+    onCellContextMenu?: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
+    onResizeStart?: (columnId: string, clientX: number, currentWidth: number) => void;
+    onFillHandleMouseDown?: (e: MouseEvent) => void;
+    rowSelectionMode?: 'single' | 'multiple' | 'none';
+    selectedRowIds?: Set<RowId>;
+    onRowCheckboxChange?: (rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean) => void;
+    onSelectAll?: (checked: boolean) => void;
+    allSelected?: boolean;
+    someSelected?: boolean;
+    pinnedColumns?: Record<string, 'left' | 'right'>;
+    leftOffsets?: Record<string, number>;
+    rightOffsets?: Record<string, number>;
+}
+export declare class TableRenderer<T> {
+    private container;
+    private state;
+    private table;
+    private thead;
+    private tbody;
+    private interactionState;
+    private wrapperEl;
+    private headerFilterState;
+    private filterConfigs;
+    private onFilterIconClick;
+    constructor(container: HTMLElement, state: GridState<T>);
+    setHeaderFilterState(state: HeaderFilterState, configs: Map<string, HeaderFilterConfig>): void;
+    setOnFilterIconClick(handler: (columnId: string, headerEl: HTMLElement) => void): void;
+    setInteractionState(state: TableRendererInteractionState | null): void;
+    getWrapperElement(): HTMLDivElement | null;
+    /** Full render — creates the table structure from scratch. */
+    render(): void;
+    /** Re-render body rows and header (after sort/filter/page change). */
+    update(): void;
+    private hasCheckboxColumn;
+    /** The column index offset for data columns (1 if checkbox column present, else 0). */
+    getColOffset(): number;
+    private applyPinningStyles;
+    private renderHeader;
+    private appendSelectAllCheckbox;
+    private renderBody;
+    destroy(): void;
+}