@alaarab/ogrid-js 2.1.3 → 2.1.4

package/dist/esm/OGridEventWiring.js

@@ -1,178 +0,0 @@
-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

@@ -1,269 +0,0 @@
-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

@@ -1,91 +0,0 @@
-export class ColumnChooser {
-    constructor(container, state) {
-        this.el = null;
-        this.dropdown = null;
-        this.isOpen = false;
-        this.initialized = false;
-        this.container = container;
-        this.state = state;
-    }
-    render() {
-        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');
-        btn.className = 'ogrid-column-chooser-btn';
-        btn.textContent = 'Columns';
-        btn.addEventListener('click', () => this.toggle());
-        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();
-        }
-        else {
-            this.open();
-        }
-    }
-    open() {
-        if (this.dropdown)
-            return;
-        this.isOpen = true;
-        this.dropdown = document.createElement('div');
-        this.dropdown.className = 'ogrid-column-chooser-dropdown';
-        for (const col of this.state.columns) {
-            const label = document.createElement('label');
-            label.className = 'ogrid-column-chooser-item';
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.checked = this.state.visibleColumns.has(col.columnId);
-            checkbox.disabled = !!col.required;
-            checkbox.addEventListener('change', () => {
-                const next = new Set(this.state.visibleColumns);
-                if (checkbox.checked) {
-                    next.add(col.columnId);
-                }
-                else {
-                    next.delete(col.columnId);
-                }
-                this.state.setVisibleColumns(next);
-            });
-            label.appendChild(checkbox);
-            label.appendChild(document.createTextNode(' ' + col.name));
-            this.dropdown.appendChild(label);
-        }
-        this.el?.appendChild(this.dropdown);
-    }
-    close() {
-        this.isOpen = false;
-        this.dropdown?.remove();
-        this.dropdown = null;
-    }
-    destroy() {
-        this.close();
-        this.el?.remove();
-        this.el = null;
-        this.initialized = false;
-    }
-}

package/dist/esm/components/ContextMenu.js

@@ -1,125 +0,0 @@
-import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
-const MENU_STYLE = {
-    position: 'fixed',
-    backgroundColor: 'var(--ogrid-bg, #fff)',
-    border: '1px solid var(--ogrid-border, #e0e0e0)',
-    boxShadow: 'var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12))',
-    borderRadius: '6px',
-    zIndex: '10000',
-    minWidth: '180px',
-    padding: '4px 0',
-    fontFamily: 'system-ui, -apple-system, sans-serif',
-    fontSize: '14px',
-    color: 'var(--ogrid-fg, #242424)',
-};
-const ITEM_STYLE = {
-    padding: '6px 12px',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-};
-const DIVIDER_STYLE = {
-    height: '1px',
-    backgroundColor: 'var(--ogrid-border, #e0e0e0)',
-    margin: '4px 0',
-};
-export class ContextMenu {
-    constructor() {
-        this.menu = null;
-        this.handlers = null;
-    }
-    show(x, y, handlers, canUndo, canRedo, selectionRange) {
-        this.close();
-        this.handlers = handlers;
-        this.menu = document.createElement('div');
-        Object.assign(this.menu.style, MENU_STYLE);
-        this.menu.style.left = `${x}px`;
-        this.menu.style.top = `${y}px`;
-        for (const item of GRID_CONTEXT_MENU_ITEMS) {
-            if (item.dividerBefore) {
-                const divider = document.createElement('div');
-                Object.assign(divider.style, DIVIDER_STYLE);
-                this.menu.appendChild(divider);
-            }
-            const menuItem = document.createElement('div');
-            Object.assign(menuItem.style, ITEM_STYLE);
-            const label = document.createElement('span');
-            label.textContent = item.label;
-            menuItem.appendChild(label);
-            if (item.shortcut) {
-                const shortcut = document.createElement('span');
-                shortcut.textContent = formatShortcut(item.shortcut);
-                shortcut.style.marginLeft = '20px';
-                shortcut.style.color = 'var(--ogrid-muted, #666)';
-                shortcut.style.fontSize = '12px';
-                menuItem.appendChild(shortcut);
-            }
-            const isDisabled = (item.id === 'undo' && !canUndo) ||
-                (item.id === 'redo' && !canRedo) ||
-                (item.disabledWhenNoSelection && selectionRange == null);
-            if (isDisabled) {
-                menuItem.style.color = 'var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4))';
-                menuItem.style.opacity = '0.5';
-                menuItem.style.cursor = 'not-allowed';
-            }
-            else {
-                menuItem.addEventListener('mouseenter', () => {
-                    menuItem.style.backgroundColor = 'var(--ogrid-bg-hover, #f5f5f5)';
-                }, { passive: true });
-                menuItem.addEventListener('mouseleave', () => {
-                    menuItem.style.backgroundColor = '';
-                }, { passive: true });
-                menuItem.addEventListener('click', () => {
-                    this.handleItemClick(item.id);
-                }, { passive: true });
-            }
-            this.menu.appendChild(menuItem);
-        }
-        document.body.appendChild(this.menu);
-        const handleClickOutside = (e) => {
-            if (this.menu && !this.menu.contains(e.target)) {
-                this.close();
-                document.removeEventListener('mousedown', handleClickOutside);
-            }
-        };
-        setTimeout(() => {
-            document.addEventListener('mousedown', handleClickOutside, { passive: true });
-        }, 0);
-    }
-    close() {
-        if (this.menu) {
-            this.menu.remove();
-            this.menu = null;
-        }
-        this.handlers = null;
-    }
-    handleItemClick(id) {
-        if (!this.handlers)
-            return;
-        switch (id) {
-            case 'undo':
-                this.handlers.onUndo();
-                break;
-            case 'redo':
-                this.handlers.onRedo();
-                break;
-            case 'copy':
-                this.handlers.onCopy();
-                break;
-            case 'cut':
-                this.handlers.onCut();
-                break;
-            case 'paste':
-                this.handlers.onPaste();
-                break;
-            case 'selectAll':
-                this.handlers.onSelectAll();
-                break;
-        }
-        this.close();
-    }
-    destroy() {
-        this.close();
-    }
-}