@alaarab/ogrid-js 2.0.15 → 2.0.16

package/dist/esm/components/InlineCellEditor.js

@@ -39,6 +39,26 @@ export class InlineCellEditor {
         this.editor = editor;
         this.container.appendChild(editor);
         editor.focus();
+        // Position dropdown with fixed positioning to escape container overflow
+        const dropdownEl = editor.querySelector('[role="listbox"]');
+        if (dropdownEl) {
+            const maxH = 200;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+            dropdownEl.style.position = 'fixed';
+            dropdownEl.style.left = `${rect.left}px`;
+            dropdownEl.style.width = `${rect.width}px`;
+            dropdownEl.style.maxHeight = `${maxH}px`;
+            dropdownEl.style.zIndex = '9999';
+            dropdownEl.style.right = 'auto';
+            if (flipUp) {
+                dropdownEl.style.top = 'auto';
+                dropdownEl.style.bottom = `${window.innerHeight - rect.top}px`;
+            }
+            else {
+                dropdownEl.style.top = `${rect.bottom}px`;
+            }
+        }
     }
     /** Returns the cell currently being edited, or null if no editor is open. */
     getEditingCell() {
@@ -205,31 +225,121 @@ export class InlineCellEditor {
         return input;
     }
     createSelectEditor(value, column) {
-        const select = document.createElement('select');
         const values = column.cellEditorParams?.values ?? [];
-        for (const val of values) {
-            const option = document.createElement('option');
-            option.value = String(val);
-            option.textContent = String(val);
-            select.appendChild(option);
-        }
-        select.value = value != null ? String(value) : '';
-        Object.assign(select.style, EDITOR_STYLE);
-        select.addEventListener('change', () => {
-            if (this.editingCell) {
-                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, select.value);
+        const formatValue = column.cellEditorParams?.formatValue;
+        const getDisplayText = (v) => formatValue ? formatValue(v) : (v != null ? String(v) : '');
+        const wrapper = document.createElement('div');
+        Object.assign(wrapper.style, EDITOR_STYLE);
+        wrapper.style.padding = '6px 10px';
+        wrapper.style.display = 'flex';
+        wrapper.style.alignItems = 'center';
+        wrapper.tabIndex = 0;
+        // Display current value + chevron
+        const display = document.createElement('div');
+        display.style.display = 'flex';
+        display.style.alignItems = 'center';
+        display.style.justifyContent = 'space-between';
+        display.style.width = '100%';
+        display.style.cursor = 'pointer';
+        display.style.fontSize = '13px';
+        const valueSpan = document.createElement('span');
+        valueSpan.textContent = getDisplayText(value);
+        display.appendChild(valueSpan);
+        const chevron = document.createElement('span');
+        chevron.textContent = '\u25BE';
+        chevron.style.marginLeft = '4px';
+        chevron.style.fontSize = '10px';
+        chevron.style.opacity = '0.5';
+        display.appendChild(chevron);
+        wrapper.appendChild(display);
+        // Dropdown list
+        const dropdown = document.createElement('div');
+        dropdown.setAttribute('role', 'listbox');
+        dropdown.style.position = 'absolute';
+        dropdown.style.top = '100%';
+        dropdown.style.left = '0';
+        dropdown.style.right = '0';
+        dropdown.style.maxHeight = '200px';
+        dropdown.style.overflowY = 'auto';
+        dropdown.style.backgroundColor = 'var(--ogrid-bg, #fff)';
+        dropdown.style.border = '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))';
+        dropdown.style.zIndex = '1001';
+        dropdown.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
+        wrapper.appendChild(dropdown);
+        let highlightedIndex = Math.max(values.findIndex((v) => String(v) === String(value)), 0);
+        const renderOptions = () => {
+            dropdown.innerHTML = '';
+            for (let i = 0; i < values.length; i++) {
+                const val = values[i];
+                const option = document.createElement('div');
+                option.setAttribute('role', 'option');
+                option.setAttribute('aria-selected', String(i === highlightedIndex));
+                option.textContent = getDisplayText(val);
+                option.style.padding = '6px 8px';
+                option.style.cursor = 'pointer';
+                option.style.color = 'var(--ogrid-fg, #242424)';
+                if (i === highlightedIndex) {
+                    option.style.background = 'var(--ogrid-bg-hover, #e8f0fe)';
+                }
+                option.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    if (this.editingCell) {
+                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, val);
+                    }
+                    this.closeEditor();
+                });
+                dropdown.appendChild(option);
             }
-            this.closeEditor();
-        });
-        select.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.onCancel?.();
-                this.closeEditor();
+        };
+        const scrollHighlightedIntoView = () => {
+            const highlighted = dropdown.children[highlightedIndex];
+            highlighted?.scrollIntoView({ block: 'nearest' });
+        };
+        renderOptions();
+        wrapper.addEventListener('keydown', (e) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    highlightedIndex = Math.min(highlightedIndex + 1, values.length - 1);
+                    renderOptions();
+                    scrollHighlightedIntoView();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    highlightedIndex = Math.max(highlightedIndex - 1, 0);
+                    renderOptions();
+                    scrollHighlightedIntoView();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (values.length > 0 && highlightedIndex < values.length) {
+                        if (this.editingCell) {
+                            this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, values[highlightedIndex]);
+                        }
+                        const afterCommit = this.onAfterCommit;
+                        this.closeEditor();
+                        afterCommit?.();
+                    }
+                    break;
+                case 'Tab':
+                    e.preventDefault();
+                    if (values.length > 0 && highlightedIndex < values.length) {
+                        if (this.editingCell) {
+                            this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, values[highlightedIndex]);
+                        }
+                        this.closeEditor();
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.onCancel?.();
+                    this.closeEditor();
+                    break;
             }
         });
-        return select;
+        return wrapper;
     }
     createRichSelectEditor(value, column) {
         const wrapper = document.createElement('div');

package/dist/esm/components/MarchingAntsOverlay.js

@@ -1,4 +1,4 @@
-import { injectGlobalStyles, measureRange as measureRangeCore } from '@alaarab/ogrid-core';
+import { injectGlobalStyles, measureRange as measureRangeCore, rangesEqual } from '@alaarab/ogrid-core';
 /**
  * Measure the bounding rect of a range within a container, with scroll offsets.
  * This variant adds scroll offsets for the JS implementation's scrollable container.
@@ -15,14 +15,6 @@ function measureRange(container, range, colOffset) {
         height: rect.height,
     };
 }
-function rangesEqual(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return a.startRow === b.startRow && a.endRow === b.endRow &&
-        a.startCol === b.startCol && a.endCol === b.endCol;
-}
 /**
  * MarchingAntsOverlay — renders SVG overlays on top of the grid:
  * 1. Selection range: solid green border

package/dist/esm/state/ClipboardState.js

@@ -1,4 +1,4 @@
-import { normalizeSelectionRange, getCellValue } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, getCellValue, formatSelectionAsTsv, parseTsvClipboard } from '@alaarab/ogrid-core';
 import { parseValue } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 export class ClipboardState {
@@ -33,21 +33,7 @@ export class ClipboardState {
             return;
         const norm = normalizeSelectionRange(range);
         const { items, visibleCols } = this.params;
-        const rows = [];
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-            const cells = [];
-            for (let c = norm.startCol; c <= norm.endCol; c++) {
-                if (r >= items.length || c >= visibleCols.length)
-                    break;
-                const item = items[r];
-                const col = visibleCols[c];
-                const raw = getCellValue(item, col);
-                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
-                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
-            }
-            rows.push(cells.join('\t'));
-        }
-        const tsv = rows.join('\r\n');
+        const tsv = formatSelectionAsTsv(items, visibleCols, norm);
         this.internalClipboard = tsv;
         this._copyRange = norm;
         this._cutRange = null;
@@ -98,9 +84,9 @@ export class ClipboardState {
         const anchorRow = norm ? norm.startRow : 0;
         const anchorCol = norm ? norm.startCol : 0;
         const { items, visibleCols } = this.params;
-        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        const lines = parseTsvClipboard(text);
         for (let r = 0; r < lines.length; r++) {
-            const cells = lines[r].split('\t');
+            const cells = lines[r];
             for (let c = 0; c < cells.length; c++) {
                 const targetRow = anchorRow + r;
                 const targetCol = anchorCol + c;

package/dist/esm/state/KeyboardNavState.js

@@ -1,31 +1,5 @@
-import { normalizeSelectionRange, getCellValue } from '@alaarab/ogrid-core';
+import { normalizeSelectionRange, getCellValue, findCtrlArrowTarget as findCtrlTarget, computeTabNavigation } 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;
@@ -184,32 +158,13 @@ export class KeyboardNavState {
                 }
                 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 });
+                    const tabResult = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
+                    const newDataColTab = tabResult.columnIndex - colOffset;
+                    this.setActiveCell({ rowIndex: tabResult.rowIndex, columnIndex: tabResult.columnIndex });
                     this.setSelectionRange({
-                        startRow: newRowTab,
+                        startRow: tabResult.rowIndex,
                         startCol: newDataColTab,
-                        endRow: newRowTab,
+                        endRow: tabResult.rowIndex,
                         endCol: newDataColTab,
                     });
                     break;

package/dist/esm/state/SelectionState.js

@@ -1,13 +1,5 @@
+import { rangesEqual } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
-/** Compares two selection ranges by value to avoid redundant RAF work. */
-function rangesEqual(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return a.startRow === b.startRow && a.endRow === b.endRow &&
-        a.startCol === b.startCol && a.endCol === b.endCol;
-}
 export class SelectionState {
     constructor() {
         this.emitter = new EventEmitter();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",