@alaarab/ogrid-js 2.0.22 → 2.1.0

package/dist/esm/OGridEventWiring.js

@@ -0,0 +1,178 @@
+import { SelectionState } from './state/SelectionState';
+import { KeyboardNavState } from './state/KeyboardNavState';
+import { ClipboardState } from './state/ClipboardState';
+import { UndoRedoState } from './state/UndoRedoState';
+import { ColumnResizeState } from './state/ColumnResizeState';
+import { FillHandleState } from './state/FillHandleState';
+import { ColumnReorderState } from './state/ColumnReorderState';
+import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+import { InlineCellEditor } from './components/InlineCellEditor';
+import { ContextMenu } from './components/ContextMenu';
+import { getCellCoordinates } from './utils/getCellCoordinates';
+export class OGridEventWiring {
+    /**
+     * Creates all interaction states, subscribes to their events, and returns
+     * the state objects so OGrid can store them.
+     */
+    initializeInteraction(options, state, renderer, tableContainer, layoutState, rowSelectionState, pinningState, callbacks) {
+        const { editable } = options;
+        const colOffset = rowSelectionState ? 1 : 0;
+        const unsubscribes = [];
+        // Create interaction states
+        const selectionState = new SelectionState();
+        const resizeState = new ColumnResizeState();
+        const contextMenu = new ContextMenu();
+        const cellEditor = new InlineCellEditor(tableContainer);
+        // Undo/Redo (wraps onCellValueChanged if editable)
+        const onCellValueChanged = options.onCellValueChanged;
+        const undoRedoState = new UndoRedoState(onCellValueChanged);
+        // Clipboard
+        const clipboardState = new ClipboardState({
+            items: [],
+            visibleCols: [],
+            colOffset,
+            editable,
+            onCellValueChanged: undoRedoState.getWrappedCallback(),
+        }, () => selectionState.activeCell ?? null, () => selectionState.selectionRange ?? null);
+        // Fill handle
+        const fillHandleState = new FillHandleState({
+            items: [],
+            visibleCols: [],
+            editable,
+            onCellValueChanged: undoRedoState.getWrappedCallback(),
+            colOffset,
+            beginBatch: () => undoRedoState.beginBatch(),
+            endBatch: () => undoRedoState.endBatch(),
+        }, () => selectionState.selectionRange ?? null, (range) => {
+            selectionState.setSelectionRange(range);
+            callbacks.updateRendererInteractionState();
+        }, (cell) => {
+            selectionState.setActiveCell(cell);
+        });
+        // Keyboard navigation
+        const keyboardNavState = new KeyboardNavState({
+            items: [],
+            visibleCols: [],
+            colOffset,
+            getRowId: state.getRowId,
+            editable,
+            onCellValueChanged: undoRedoState.getWrappedCallback(),
+            onCopy: () => clipboardState.handleCopy(),
+            onCut: () => clipboardState.handleCut(),
+            onPaste: async () => { await clipboardState.handlePaste(); },
+            onUndo: () => undoRedoState.undo(),
+            onRedo: () => undoRedoState.redo(),
+            onContextMenu: (x, y) => callbacks.showContextMenu(x, y),
+            onStartEdit: (rowId, columnId) => callbacks.startCellEdit(rowId, columnId),
+            clearClipboardRanges: () => clipboardState.clearClipboardRanges(),
+        }, () => selectionState.activeCell ?? null, () => selectionState.selectionRange ?? null, (cell) => selectionState.setActiveCell(cell), (range) => selectionState.setSelectionRange(range));
+        // Subscribe to selection changes
+        unsubscribes.push(selectionState.onSelectionChange(() => {
+            callbacks.updateRendererInteractionState();
+        }));
+        // Subscribe to clipboard range changes
+        unsubscribes.push(clipboardState.onRangesChange(() => {
+            callbacks.updateRendererInteractionState();
+        }));
+        // Subscribe to column resize changes
+        unsubscribes.push(resizeState.onColumnWidthChange(() => {
+            callbacks.updateRendererInteractionState();
+        }));
+        // Column reorder
+        const reorderState = new ColumnReorderState();
+        unsubscribes.push(reorderState.onStateChange(({ isDragging, dropIndicatorX }) => {
+            renderer.updateDropIndicator(dropIndicatorX, isDragging);
+        }));
+        unsubscribes.push(reorderState.onReorder(({ columnOrder }) => {
+            state.setColumnOrder(columnOrder);
+        }));
+        // Attach keyboard handler to wrapper
+        const wrapper = renderer.getWrapperElement();
+        let marchingAnts = null;
+        if (wrapper) {
+            wrapper.addEventListener('keydown', keyboardNavState.handleKeyDown);
+            keyboardNavState.setWrapperRef(wrapper);
+            fillHandleState.setWrapperRef(wrapper);
+            // Initialize marching ants overlay
+            marchingAnts = new MarchingAntsOverlay(wrapper, colOffset);
+        }
+        // Attach global mouse handlers for resize and drag
+        const globalUnsubs = this.attachGlobalHandlers(selectionState, resizeState, layoutState, renderer, callbacks);
+        unsubscribes.push(...globalUnsubs);
+        return {
+            selectionState,
+            keyboardNavState,
+            clipboardState,
+            undoRedoState,
+            resizeState,
+            fillHandleState,
+            reorderState,
+            marchingAnts,
+            cellEditor,
+            contextMenu,
+            unsubscribes,
+        };
+    }
+    attachGlobalHandlers(selectionState, resizeState, layoutState, renderer, callbacks) {
+        const unsubs = [];
+        let resizing = false;
+        const handleMouseMove = (e) => {
+            if (resizing && resizeState) {
+                const newWidth = resizeState.updateResize(e.clientX);
+                if (newWidth !== null && resizeState.resizingColumnId) {
+                    layoutState.setColumnOverride(resizeState.resizingColumnId, newWidth);
+                    callbacks.updateRendererInteractionState();
+                }
+            }
+            if (selectionState?.isDragging) {
+                const target = e.target;
+                if (target.tagName === 'TD') {
+                    const coords = getCellCoordinates(target);
+                    if (coords && coords.rowIndex >= 0 && coords.colIndex >= 0) {
+                        selectionState.updateDrag(coords.rowIndex, coords.colIndex, () => callbacks.updateDragAttributes());
+                    }
+                }
+            }
+        };
+        const handleMouseUp = (e) => {
+            if (resizing && resizeState) {
+                const colId = resizeState.resizingColumnId;
+                resizeState.endResize(e.clientX);
+                if (colId) {
+                    const width = resizeState.getColumnWidth(colId);
+                    if (width)
+                        layoutState.setColumnOverride(colId, width);
+                }
+                resizing = false;
+                document.body.style.cursor = '';
+                callbacks.updateRendererInteractionState();
+            }
+            if (selectionState?.isDragging) {
+                selectionState.endDrag();
+                callbacks.clearCachedDragCells();
+            }
+        };
+        const handleResizeStart = (columnId, clientX, currentWidth) => {
+            resizing = true;
+            document.body.style.cursor = 'col-resize';
+            resizeState.startResize(columnId, clientX, currentWidth);
+        };
+        document.addEventListener('mousemove', handleMouseMove, { passive: true });
+        document.addEventListener('mouseup', handleMouseUp, { passive: true });
+        unsubs.push(() => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        });
+        // Pass resize handler to renderer
+        renderer.setInteractionState({
+            activeCell: null,
+            selectionRange: null,
+            copyRange: null,
+            cutRange: null,
+            editingCell: null,
+            columnWidths: {},
+            onResizeStart: handleResizeStart,
+        });
+        return unsubs;
+    }
+}

package/dist/esm/OGridRendering.js

@@ -0,0 +1,269 @@
+import { normalizeSelectionRange, isInSelectionRange, CHECKBOX_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { getCellCoordinates } from './utils/getCellCoordinates';
+export class OGridRendering {
+    constructor(ctx) {
+        this.layoutVersion = 0;
+        /** Cached DOM cells during drag to avoid querySelectorAll on every RAF frame. */
+        this.cachedDragCells = null;
+        this.ctx = ctx;
+    }
+    /** Increment layout version (e.g., when items, columns, sizing change). */
+    incrementLayoutVersion() {
+        this.layoutVersion++;
+    }
+    /** Clear cached drag cells. */
+    clearCachedDragCells() {
+        this.cachedDragCells = null;
+    }
+    /** Get current layout version. */
+    getLayoutVersion() {
+        return this.layoutVersion;
+    }
+    updateRendererInteractionState() {
+        const { selectionState, clipboardState, resizeState, state, layoutState, pinningState, rowSelectionState, cellEditor, renderer, reorderState, marchingAnts, fillHandleState, options } = this.ctx;
+        if (!selectionState || !clipboardState || !resizeState)
+            return;
+        const { items } = state.getProcessedItems();
+        const visibleCols = state.visibleColumnDefs;
+        // Compute pinning offsets
+        const columnWidths = layoutState.getAllColumnWidths();
+        const leftOffsets = pinningState?.computeLeftOffsets(visibleCols, columnWidths, 120, !!rowSelectionState, CHECKBOX_COLUMN_WIDTH, !!options.showRowNumbers) ?? {};
+        const rightOffsets = pinningState?.computeRightOffsets(visibleCols, columnWidths, 120) ?? {};
+        renderer.setInteractionState({
+            activeCell: selectionState.activeCell,
+            selectionRange: selectionState.selectionRange,
+            copyRange: clipboardState.copyRange,
+            cutRange: clipboardState.cutRange,
+            editingCell: cellEditor?.getEditingCell() ?? null,
+            columnWidths,
+            onCellClick: (ce) => this.ctx.handleCellClick(ce.rowIndex, ce.colIndex),
+            onCellMouseDown: (ce) => { if (ce.event)
+                this.ctx.handleCellMouseDown(ce.rowIndex, ce.colIndex, ce.event); },
+            onCellDoubleClick: (ce) => { if (ce.rowId != null && ce.columnId)
+                this.ctx.startCellEdit(ce.rowId, ce.columnId); },
+            onCellContextMenu: (ce) => { if (ce.event)
+                this.ctx.handleCellContextMenu(ce.rowIndex, ce.colIndex, ce.event); },
+            onResizeStart: renderer.getOnResizeStart(),
+            // Fill handle
+            onFillHandleMouseDown: options.editable !== false ? (e) => fillHandleState?.startFillDrag(e) : undefined,
+            // Row selection
+            rowSelectionMode: rowSelectionState?.rowSelection ?? 'none',
+            selectedRowIds: rowSelectionState?.selectedRowIds,
+            onRowCheckboxChange: (rowId, checked, rowIndex, shiftKey) => {
+                rowSelectionState?.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey, items);
+            },
+            onSelectAll: (checked) => {
+                rowSelectionState?.handleSelectAll(checked, items);
+            },
+            allSelected: rowSelectionState?.isAllSelected(items),
+            someSelected: rowSelectionState?.isSomeSelected(items),
+            // Row numbers
+            showRowNumbers: options.showRowNumbers,
+            // Column pinning
+            pinnedColumns: pinningState?.pinnedColumns,
+            leftOffsets,
+            rightOffsets,
+            // Column reorder
+            onColumnReorderStart: reorderState ? (columnId, event) => {
+                const tableEl = renderer.getTableElement();
+                if (!tableEl)
+                    return;
+                reorderState?.startDrag(columnId, event, visibleCols, state.columnOrder, pinningState?.pinnedColumns, tableEl);
+            } : undefined,
+        });
+        renderer.update();
+        // Update marching ants overlay
+        marchingAnts?.update(selectionState.selectionRange, clipboardState.copyRange, clipboardState.cutRange, this.layoutVersion);
+    }
+    updateDragAttributes() {
+        const wrapper = this.ctx.renderer.getWrapperElement();
+        const selectionState = this.ctx.selectionState;
+        if (!wrapper || !selectionState)
+            return;
+        const range = selectionState.getDragRange();
+        if (!range)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const anchor = selectionState.dragAnchor;
+        // Cache the querySelectorAll result on first drag call; reuse for subsequent RAF frames
+        if (!this.cachedDragCells) {
+            this.cachedDragCells = wrapper.querySelectorAll('td[data-row-index][data-col-index]');
+        }
+        const cells = this.cachedDragCells;
+        for (let _i = 0; _i < cells.length; _i++) {
+            const cell = cells[_i];
+            const el = cell;
+            const coords = getCellCoordinates(el);
+            if (!coords)
+                continue;
+            const rowIndex = coords.rowIndex;
+            const colIndex = coords.colIndex;
+            if (isInSelectionRange(norm, rowIndex, colIndex)) {
+                el.setAttribute('data-drag-range', 'true');
+                // Anchor cell (white background)
+                const isAnchor = anchor && rowIndex === anchor.rowIndex && colIndex === anchor.columnIndex;
+                if (isAnchor) {
+                    el.setAttribute('data-drag-anchor', '');
+                }
+                else {
+                    el.removeAttribute('data-drag-anchor');
+                }
+                // Edge borders via CSS class instead of inline box-shadow
+                el.classList.add('ogrid-drag-target');
+            }
+            else {
+                el.removeAttribute('data-drag-range');
+                el.removeAttribute('data-drag-anchor');
+                el.classList.remove('ogrid-drag-target');
+            }
+        }
+    }
+    renderAll() {
+        // Increment layout version to trigger marching ants re-measurement
+        this.layoutVersion++;
+        const { state, options, headerFilterState, rowSelectionState, keyboardNavState, clipboardState, undoRedoState, fillHandleState, virtualScrollState, pagination, statusBar, columnChooser, renderer } = this.ctx;
+        const colOffset = rowSelectionState ? 1 : 0;
+        // Update header filter state with current filters and options
+        headerFilterState.setFilters(state.filters);
+        headerFilterState.setFilterOptions(state.filterOptions);
+        // Update interaction states with current data
+        const { items, totalCount } = state.getProcessedItems();
+        if (keyboardNavState && clipboardState) {
+            const visibleCols = state.visibleColumnDefs;
+            keyboardNavState.updateParams({
+                items,
+                visibleCols: visibleCols,
+                colOffset,
+                getRowId: state.getRowId,
+                editable: options.editable,
+                onCellValueChanged: undoRedoState?.getWrappedCallback(),
+                onCopy: () => clipboardState?.handleCopy(),
+                onCut: () => clipboardState?.handleCut(),
+                onPaste: async () => { await clipboardState?.handlePaste(); },
+                onUndo: () => undoRedoState?.undo(),
+                onRedo: () => undoRedoState?.redo(),
+                onContextMenu: (x, y) => this.ctx.showContextMenu(x, y),
+                onStartEdit: (rowId, columnId) => this.ctx.startCellEdit(rowId, columnId),
+                clearClipboardRanges: () => clipboardState?.clearClipboardRanges(),
+            });
+            clipboardState.updateParams({
+                items,
+                visibleCols: visibleCols,
+                colOffset,
+                editable: options.editable,
+                onCellValueChanged: undoRedoState?.getWrappedCallback(),
+            });
+            // Update fill handle params
+            fillHandleState?.updateParams({
+                items,
+                visibleCols: visibleCols,
+                editable: options.editable,
+                onCellValueChanged: undoRedoState?.getWrappedCallback(),
+                colOffset,
+                beginBatch: () => undoRedoState?.beginBatch(),
+                endBatch: () => undoRedoState?.endBatch(),
+            });
+            // Update renderer interaction state before rendering
+            this.updateRendererInteractionState();
+        }
+        else {
+            renderer.update();
+        }
+        // Update virtual scroll with current total row count
+        virtualScrollState?.setTotalRows(totalCount);
+        pagination.render(totalCount, options.pageSizeOptions);
+        statusBar.render({ totalCount });
+        columnChooser.render();
+        this.renderSideBar();
+        this.renderLoadingOverlay();
+    }
+    renderHeaderFilterPopover() {
+        const { headerFilterState, headerFilterComponent, filterConfigs } = this.ctx;
+        const openId = headerFilterState.openColumnId;
+        if (!openId) {
+            headerFilterComponent.cleanup();
+            return;
+        }
+        const config = filterConfigs.get(openId);
+        if (!config)
+            return;
+        headerFilterComponent.render(config);
+        // Update the popover element reference for click-outside detection
+        const popoverEl = document.querySelector('.ogrid-header-filter-popover');
+        headerFilterState.setPopoverEl(popoverEl);
+    }
+    renderSideBar() {
+        const { sideBarComponent, sideBarState, state } = this.ctx;
+        if (!sideBarComponent || !sideBarState)
+            return;
+        const columns = state.columns.map(c => ({
+            columnId: c.columnId,
+            name: c.name,
+            required: c.required === true,
+        }));
+        const filterableColumns = state.columns
+            .filter(c => c.filterable && typeof c.filterable === 'object' && c.filterable.type)
+            .map(c => ({
+            columnId: c.columnId,
+            name: c.name,
+            filterField: c.filterable.filterField ?? c.columnId,
+            filterType: c.filterable.type,
+        }));
+        sideBarComponent.setConfig({
+            columns,
+            visibleColumns: state.visibleColumns,
+            onVisibilityChange: (columnKey, visible) => {
+                const next = new Set(state.visibleColumns);
+                if (visible)
+                    next.add(columnKey);
+                else
+                    next.delete(columnKey);
+                state.setVisibleColumns(next);
+            },
+            onSetVisibleColumns: (cols) => state.setVisibleColumns(cols),
+            filterableColumns,
+            filters: state.filters,
+            onFilterChange: (key, value) => state.setFilter(key, value),
+            filterOptions: state.filterOptions,
+        });
+        sideBarComponent.render();
+    }
+    renderLoadingOverlay() {
+        const { state, tableContainer } = this.ctx;
+        if (state.isLoading) {
+            // Ensure the container has minimum height during loading so overlay is visible
+            const { items } = state.getProcessedItems();
+            tableContainer.style.minHeight = (!items || items.length === 0) ? '200px' : '';
+            let loadingOverlay = this.ctx.loadingOverlay;
+            if (!loadingOverlay) {
+                loadingOverlay = document.createElement('div');
+                loadingOverlay.className = 'ogrid-loading-overlay';
+                loadingOverlay.style.position = 'absolute';
+                loadingOverlay.style.top = '0';
+                loadingOverlay.style.left = '0';
+                loadingOverlay.style.right = '0';
+                loadingOverlay.style.bottom = '0';
+                loadingOverlay.style.display = 'flex';
+                loadingOverlay.style.alignItems = 'center';
+                loadingOverlay.style.justifyContent = 'center';
+                loadingOverlay.style.background = 'var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7))';
+                loadingOverlay.style.zIndex = '100';
+                const spinner = document.createElement('div');
+                spinner.className = 'ogrid-loading-spinner';
+                spinner.textContent = 'Loading...';
+                loadingOverlay.appendChild(spinner);
+                this.ctx.setLoadingOverlay(loadingOverlay);
+            }
+            if (!tableContainer.contains(loadingOverlay)) {
+                tableContainer.appendChild(loadingOverlay);
+            }
+        }
+        else {
+            tableContainer.style.minHeight = '';
+            const loadingOverlay = this.ctx.loadingOverlay;
+            if (loadingOverlay && tableContainer.contains(loadingOverlay)) {
+                loadingOverlay.remove();
+            }
+        }
+    }
+}

package/dist/esm/components/ColumnChooser.js

@@ -3,12 +3,22 @@ export class ColumnChooser {
         this.el = null;
         this.dropdown = null;
         this.isOpen = false;
+        this.initialized = false;
         this.container = container;
         this.state = state;
     }
     render() {
-        if (this.el)
-            this.el.remove();
+        if (!this.initialized) {
+            this.createDOM();
+            this.initialized = true;
+        }
+        // If dropdown is open, update checkbox states without destroying/recreating
+        if (this.isOpen && this.dropdown) {
+            this.updateDropdownState();
+        }
+    }
+    /** Initial DOM creation — called once. */
+    createDOM() {
         this.el = document.createElement('div');
         this.el.className = 'ogrid-column-chooser';
         const btn = document.createElement('button');
@@ -18,6 +28,18 @@ export class ColumnChooser {
         this.el.appendChild(btn);
         this.container.appendChild(this.el);
     }
+    /** Update checkbox checked states without destroying the dropdown. */
+    updateDropdownState() {
+        if (!this.dropdown)
+            return;
+        const checkboxes = this.dropdown.querySelectorAll('input[type="checkbox"]');
+        const columns = this.state.columns;
+        checkboxes.forEach((checkbox, idx) => {
+            if (idx < columns.length) {
+                checkbox.checked = this.state.visibleColumns.has(columns[idx].columnId);
+            }
+        });
+    }
     toggle() {
         if (this.isOpen) {
             this.close();
@@ -53,7 +75,7 @@ export class ColumnChooser {
             label.appendChild(document.createTextNode(' ' + col.name));
             this.dropdown.appendChild(label);
         }
-        this.el.appendChild(this.dropdown);
+        this.el?.appendChild(this.dropdown);
     }
     close() {
         this.isOpen = false;
@@ -64,5 +86,6 @@ export class ColumnChooser {
         this.close();
         this.el?.remove();
         this.el = null;
+        this.initialized = false;
     }
 }

package/dist/esm/components/InlineCellEditor.js

@@ -70,7 +70,7 @@ export class InlineCellEditor {
         // not re-render before the next click lands, so we clear it explicitly).
         // Look up the cell by data attributes since the original element reference
         // may have been replaced by a re-render.
-        if (this.editingCell) {
+        if (this.editingCell && this.container.isConnected) {
             const { rowId, columnId } = this.editingCell;
             const row = this.container.querySelector(`tr[data-row-id="${rowId}"]`);
             if (row) {
@@ -81,8 +81,10 @@ export class InlineCellEditor {
             }
         }
         if (this.editingCellElement) {
-            // Also reset the original element in case it's still in the DOM
-            this.editingCellElement.style.visibility = '';
+            // Also reset the original element if it's still connected in the DOM
+            if (this.editingCellElement.isConnected) {
+                this.editingCellElement.style.visibility = '';
+            }
             this.editingCellElement = null;
         }
         if (this.editor) {
@@ -132,10 +134,14 @@ export class InlineCellEditor {
         // Default: text editor
         return this.createTextEditor(value);
     }
-    createTextEditor(value) {
+    /**
+     * Shared factory for text/date input editors — both types have identical event handling,
+     * differing only in input.type and initial value formatting.
+     */
+    createInputEditor(type, initialValue) {
         const input = document.createElement('input');
-        input.type = 'text';
-        input.value = value != null ? String(value) : '';
+        input.type = type;
+        input.value = initialValue;
         Object.assign(input.style, EDITOR_STYLE);
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
@@ -164,6 +170,9 @@ export class InlineCellEditor {
         setTimeout(() => input.select(), 0);
         return input;
     }
+    createTextEditor(value) {
+        return this.createInputEditor('text', value != null ? String(value) : '');
+    }
     createCheckboxEditor(value) {
         const input = document.createElement('input');
         input.type = 'checkbox';
@@ -188,41 +197,14 @@ export class InlineCellEditor {
         return input;
     }
     createDateEditor(value) {
-        const input = document.createElement('input');
-        input.type = 'date';
+        let initialValue = '';
         if (value != null) {
             const dateStr = String(value);
             if (dateStr.match(/^\d{4}-\d{2}-\d{2}/)) {
-                input.value = dateStr.substring(0, 10);
+                initialValue = dateStr.substring(0, 10);
             }
         }
-        Object.assign(input.style, EDITOR_STYLE);
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
-                if (this.editingCell) {
-                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-                }
-                const afterCommit = this.onAfterCommit;
-                this.closeEditor();
-                afterCommit?.(); // Move active cell down after closing
-            }
-            else if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.onCancel?.();
-                this.closeEditor();
-            }
-        });
-        input.addEventListener('blur', () => {
-            if (this.editingCell) {
-                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-            }
-            this.closeEditor();
-        });
-        setTimeout(() => input.select(), 0);
-        return input;
+        return this.createInputEditor('date', initialValue);
     }
     createSelectEditor(value, column) {
         const values = column.cellEditorParams?.values ?? [];

package/dist/esm/index.js

@@ -4,6 +4,8 @@ export * from '@alaarab/ogrid-core';
 export { debounce } from './utils';
 // Classes
 export { OGrid } from './OGrid';
+export { OGridEventWiring } from './OGridEventWiring';
+export { OGridRendering } from './OGridRendering';
 export { GridState } from './state/GridState';
 export { EventEmitter } from './state/EventEmitter';
 export { SelectionState } from './state/SelectionState';