@svgrid/grid 3.0.2 → 3.0.4

package/dist/merges.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Merged cells: a rectangle of cells drawn as one, the way a spreadsheet's
+ * Merge & Center does. The grid takes them as `mergedCells`, a list of
+ * origins with their spans in display indices, and this module is the
+ * pure part: an index over them, the questions the renderer, the
+ * selection and the keyboard ask, and nothing that touches the DOM.
+ *
+ * A merge is drawn by its origin td, which takes `rowspan` and `colspan`;
+ * the cells it covers are not emitted. Selection rectangles grow to whole
+ * merges (a merge is selected as one), the active cell inside a merge is
+ * its origin, and an arrow key moving into a merge lands on the origin
+ * and moving out of one steps past its far edge.
+ */
+export type MergedCell = {
+    /** Top-left cell of the merge, display indices. */
+    rowIndex: number;
+    colIndex: number;
+    /** How many rows and columns it covers, 1 or more. */
+    rowSpan: number;
+    colSpan: number;
+};
+export type MergeIndex = {
+    readonly list: ReadonlyArray<MergedCell>;
+    /** Every cell a merge covers (origin included) -> its merge. */
+    readonly byCell: ReadonlyMap<string, MergedCell>;
+};
+export type MergeRect = {
+    minRow: number;
+    maxRow: number;
+    minCol: number;
+    maxCol: number;
+};
+/** An index over the merges, or null when there are none (the common case). */
+export declare function buildMergeIndex(merges: ReadonlyArray<MergedCell> | undefined | null): MergeIndex | null;
+/** The merge covering (r, c), origin included, or undefined. */
+export declare function mergeAt(index: MergeIndex | null, r: number, c: number): MergedCell | undefined;
+/** Whether (r, c) is inside a merge without being its origin. */
+export declare function isCovered(index: MergeIndex | null, r: number, c: number): boolean;
+/** The origin of the merge (r, c) sits in, or (r, c) itself. */
+export declare function originOf(index: MergeIndex | null, r: number, c: number): {
+    rowIndex: number;
+    colIndex: number;
+};
+/** The far corner of the merge (r, c) sits in, or (r, c) itself. */
+export declare function endOf(index: MergeIndex | null, r: number, c: number): {
+    rowIndex: number;
+    colIndex: number;
+};
+/**
+ * The rectangle grown to hold every merge it touches, to a fixed point: a
+ * merge that pokes out of the rectangle pulls the edge out, which can
+ * reach another merge, and so on, as a spreadsheet's selection does.
+ */
+export declare function expandRectToMerges(index: MergeIndex | null, rect: MergeRect): MergeRect;
+/**
+ * Where a move from `from` to `next` really lands. A step into a merge
+ * lands on its origin; a step that stays inside the merge the move started
+ * in carries on past its far edge (right from a three-wide merge reaches
+ * the column after it), clamped to the bounds; a step that then lands in
+ * another merge takes that one's origin.
+ */
+export declare function stepPastMerge(index: MergeIndex | null, from: {
+    rowIndex: number;
+    colIndex: number;
+}, next: {
+    rowIndex: number;
+    colIndex: number;
+}, bounds: {
+    maxRow: number;
+    maxCol: number;
+}): {
+    rowIndex: number;
+    colIndex: number;
+};
+/**
+ * How a td at (r, c) draws inside a rendered window of rows and columns.
+ * A merge is drawn once per window, by the top-left cell of the part of it
+ * the window holds: the origin when the origin is in the window (`origin`),
+ * else the first covered cell the window shows (`continuation`, which
+ * draws the origin's content itself), with the spans clamped to the window
+ * so a table never spans into rows it has not drawn. Every other cell of
+ * the merge is `skip`: no td, the drawn one covers its slot.
+ */
+export type MergeDraw = {
+    kind: 'skip';
+} | {
+    kind: 'origin' | 'continuation';
+    merge: MergedCell;
+    rowSpan: number;
+    colSpan: number;
+};
+export declare function mergeDrawAt(index: MergeIndex | null, r: number, c: number, window: {
+    firstRow: number;
+    lastRow: number;
+    firstCol: number;
+    lastCol: number;
+}): MergeDraw | null;

package/dist/merges.js

@@ -0,0 +1,147 @@
+/**
+ * Merged cells: a rectangle of cells drawn as one, the way a spreadsheet's
+ * Merge & Center does. The grid takes them as `mergedCells`, a list of
+ * origins with their spans in display indices, and this module is the
+ * pure part: an index over them, the questions the renderer, the
+ * selection and the keyboard ask, and nothing that touches the DOM.
+ *
+ * A merge is drawn by its origin td, which takes `rowspan` and `colspan`;
+ * the cells it covers are not emitted. Selection rectangles grow to whole
+ * merges (a merge is selected as one), the active cell inside a merge is
+ * its origin, and an arrow key moving into a merge lands on the origin
+ * and moving out of one steps past its far edge.
+ */
+const key = (r, c) => `${r}:${c}`;
+/** An index over the merges, or null when there are none (the common case). */
+export function buildMergeIndex(merges) {
+    if (!merges || merges.length === 0)
+        return null;
+    const byCell = new Map();
+    const list = [];
+    for (const raw of merges) {
+        const rowSpan = Math.max(1, Math.floor(raw.rowSpan));
+        const colSpan = Math.max(1, Math.floor(raw.colSpan));
+        if (rowSpan === 1 && colSpan === 1)
+            continue;
+        const merge = { rowIndex: raw.rowIndex, colIndex: raw.colIndex, rowSpan, colSpan };
+        list.push(merge);
+        for (let r = merge.rowIndex; r < merge.rowIndex + rowSpan; r += 1) {
+            for (let c = merge.colIndex; c < merge.colIndex + colSpan; c += 1)
+                byCell.set(key(r, c), merge);
+        }
+    }
+    return list.length ? { list, byCell } : null;
+}
+/** The merge covering (r, c), origin included, or undefined. */
+export function mergeAt(index, r, c) {
+    return index?.byCell.get(key(r, c));
+}
+/** Whether (r, c) is inside a merge without being its origin. */
+export function isCovered(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return !!m && (m.rowIndex !== r || m.colIndex !== c);
+}
+/** The origin of the merge (r, c) sits in, or (r, c) itself. */
+export function originOf(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return m ? { rowIndex: m.rowIndex, colIndex: m.colIndex } : { rowIndex: r, colIndex: c };
+}
+/** The far corner of the merge (r, c) sits in, or (r, c) itself. */
+export function endOf(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return m
+        ? { rowIndex: m.rowIndex + m.rowSpan - 1, colIndex: m.colIndex + m.colSpan - 1 }
+        : { rowIndex: r, colIndex: c };
+}
+/**
+ * The rectangle grown to hold every merge it touches, to a fixed point: a
+ * merge that pokes out of the rectangle pulls the edge out, which can
+ * reach another merge, and so on, as a spreadsheet's selection does.
+ */
+export function expandRectToMerges(index, rect) {
+    if (!index)
+        return rect;
+    let { minRow, maxRow, minCol, maxCol } = rect;
+    for (let guard = 0; guard < 64; guard += 1) {
+        let grew = false;
+        for (const m of index.list) {
+            const r2 = m.rowIndex + m.rowSpan - 1;
+            const c2 = m.colIndex + m.colSpan - 1;
+            const touches = m.rowIndex <= maxRow && r2 >= minRow && m.colIndex <= maxCol && c2 >= minCol;
+            if (!touches)
+                continue;
+            if (m.rowIndex < minRow) {
+                minRow = m.rowIndex;
+                grew = true;
+            }
+            if (r2 > maxRow) {
+                maxRow = r2;
+                grew = true;
+            }
+            if (m.colIndex < minCol) {
+                minCol = m.colIndex;
+                grew = true;
+            }
+            if (c2 > maxCol) {
+                maxCol = c2;
+                grew = true;
+            }
+        }
+        if (!grew)
+            break;
+    }
+    return minRow === rect.minRow && maxRow === rect.maxRow && minCol === rect.minCol && maxCol === rect.maxCol
+        ? rect
+        : { minRow, maxRow, minCol, maxCol };
+}
+/**
+ * Where a move from `from` to `next` really lands. A step into a merge
+ * lands on its origin; a step that stays inside the merge the move started
+ * in carries on past its far edge (right from a three-wide merge reaches
+ * the column after it), clamped to the bounds; a step that then lands in
+ * another merge takes that one's origin.
+ */
+export function stepPastMerge(index, from, next, bounds) {
+    if (!index)
+        return next;
+    const target = mergeAt(index, next.rowIndex, next.colIndex);
+    if (!target)
+        return next;
+    const source = mergeAt(index, from.rowIndex, from.colIndex);
+    if (source !== target)
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    // Still inside the merge the move began in: keep going in that direction.
+    const dr = Math.sign(next.rowIndex - from.rowIndex);
+    const dc = Math.sign(next.colIndex - from.colIndex);
+    if (dr === 0 && dc === 0)
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    let rowIndex = next.rowIndex;
+    let colIndex = next.colIndex;
+    if (dr > 0)
+        rowIndex = target.rowIndex + target.rowSpan;
+    else if (dr < 0)
+        rowIndex = target.rowIndex - 1;
+    if (dc > 0)
+        colIndex = target.colIndex + target.colSpan;
+    else if (dc < 0)
+        colIndex = target.colIndex - 1;
+    if (rowIndex < 0 || rowIndex > bounds.maxRow || colIndex < 0 || colIndex > bounds.maxCol) {
+        // Nowhere further to go: the merge itself stays current.
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    }
+    const landed = mergeAt(index, rowIndex, colIndex);
+    return landed ? { rowIndex: landed.rowIndex, colIndex: landed.colIndex } : { rowIndex, colIndex };
+}
+export function mergeDrawAt(index, r, c, window) {
+    const m = mergeAt(index, r, c);
+    if (!m)
+        return null;
+    const anchorRow = Math.max(m.rowIndex, window.firstRow);
+    const anchorCol = Math.max(m.colIndex, window.firstCol);
+    if (r !== anchorRow || c !== anchorCol)
+        return { kind: 'skip' };
+    const isOrigin = anchorRow === m.rowIndex && anchorCol === m.colIndex;
+    const rowSpan = Math.max(1, Math.min(m.rowIndex + m.rowSpan - r, window.lastRow - r + 1));
+    const colSpan = Math.max(1, Math.min(m.colIndex + m.colSpan - c, window.lastCol - c + 1));
+    return { kind: isOrigin ? 'origin' : 'continuation', merge: m, rowSpan, colSpan };
+}

package/dist/row-resize.d.ts

@@ -30,6 +30,9 @@ export type RowResizeOptions = {
     onResize: (rowIndex: number, height: number) => void;
     /** Optional callback fired during the drag (every pointermove). */
     onResizeMove?: (rowIndex: number, height: number) => void;
+    /** Double-click on the strip: size the row to its content, the
+     *  spreadsheet gesture. Without it a double-click does nothing. */
+    onAutosize?: (rowIndex: number) => void;
     /** Min row height in px. Default 20. */
     min?: number;
     /** Max row height in px. Default 320. */

package/dist/row-resize.js

@@ -29,6 +29,8 @@ const STRIP_CLASS = 'sv-grid-row-resize-handle';
 export function rowResize(node, opts) {
     let current = opts;
     let drag = null;
+    /** The last press on a strip, for telling a double-click from two drags. */
+    let lastPress = null;
     function rowIndexOf(tr) {
         const dataRow = tr.querySelector('[data-svgrid-row]');
         const val = dataRow?.dataset.svgridRow;
@@ -109,6 +111,18 @@ export function rowResize(node, opts) {
             return;
         e.preventDefault();
         e.stopPropagation();
+        // The second press of a double-click: size the row to its content
+        // instead of starting another drag. Timed here rather than read from
+        // a dblclick event, whose target is the row once the first press's
+        // resize has re-rendered the strip; pointerdown carries no count.
+        const now = e.timeStamp;
+        const again = lastPress !== null && lastPress.rowIndex === rowIndex && now - lastPress.at < 400;
+        lastPress = { rowIndex, at: now };
+        if (again && current.onAutosize) {
+            lastPress = null;
+            current.onAutosize(rowIndex);
+            return;
+        }
         t.classList.add('is-resizing');
         drag = {
             rowIndex,

package/dist/scroll-sync.d.ts

@@ -5,5 +5,6 @@ export declare function createScrollSync<TFeatures extends TableFeatures = Table
     hideTooltip: () => void;
     flushScheduledScrollSync: () => void;
     scheduleScrollSync: (scrollTop: number, scrollLeft: number) => void;
+    syncScrollNow: (scrollTop: number, scrollLeft: number) => void;
     onBodyScroll: (event: Event) => void;
 };

package/dist/scroll-sync.js

@@ -57,6 +57,29 @@ export function createScrollSync(ctx) {
             return;
         ctx.scrollSyncRaf = requestAnimationFrame(flushScheduledScrollSync);
     }
+    /**
+     * Sync the virtualizers to a scroll position NOW instead of on the next
+     * animation frame.
+     *
+     * For a scroll the grid made itself - keyboard navigation bringing the
+     * active cell into view - the position is already known, and going through
+     * the browser's `scroll` event and then the rAF above put the row-window
+     * update one frame behind the key press: the keydown's own flush painted
+     * the active cell on the OLD rows, and the rows only caught up on the next
+     * frame. Two painted frames per arrow key. Syncing inline folds the window
+     * update into the same flush as the active-cell change, so the key press
+     * paints once. The `scroll` event still fires afterwards and re-syncs to
+     * the same offset, which the virtualizers treat as a no-op.
+     */
+    function syncScrollNow(scrollTop, scrollLeft) {
+        if (ctx.scrollSyncRaf !== null) {
+            cancelAnimationFrame(ctx.scrollSyncRaf);
+            ctx.scrollSyncRaf = null;
+        }
+        ctx.pendingScrollTop = scrollTop;
+        ctx.pendingScrollLeft = scrollLeft;
+        flushScheduledScrollSync();
+    }
     function onBodyScroll(event) {
         const container = event.currentTarget;
         if (!container)
@@ -84,6 +107,7 @@ export function createScrollSync(ctx) {
         hideTooltip,
         flushScheduledScrollSync,
         scheduleScrollSync,
+        syncScrollNow,
         onBodyScroll,
     };
 }

package/dist/selection.d.ts

@@ -15,6 +15,22 @@ export declare function createSelection<TFeatures extends TableFeatures = TableF
         left: boolean;
         right: boolean;
     } | null;
+    activeRangeRect: () => {
+        minRow: number;
+        maxRow: number;
+        minCol: number;
+        maxCol: number;
+    } | null;
+    cellSelectionState: (rowIndex: number, colIndex: number) => {
+        active: boolean;
+        edges: {
+            top: boolean;
+            bottom: boolean;
+            left: boolean;
+            right: boolean;
+        } | null;
+        fillHandle: boolean;
+    } | null;
     fillMarqueeEdges: (rowIndex: number, colIndex: number) => {
         top: boolean;
         bottom: boolean;

package/dist/selection.js

@@ -4,6 +4,7 @@
 import { getGridCellDomId, } from "./index.js";
 import "./sv-grid-scrollbar.js";
 import { getColumnBaseValue, isGroupRow, } from "./cell-values.js";
+import { expandRectToMerges, originOf, endOf } from "./merges.js";
 export function createSelection(ctx) {
     function isRowSelected(rowId) {
         return Boolean(ctx.rowSelectionState[rowId]);
@@ -26,7 +27,18 @@ export function createSelection(ctx) {
         });
     }
     function setActiveCell(rowIndex, colIndex) {
+        // The active cell inside a merge is its origin: the one that draws, the
+        // one the formula bar shows, the one an edit writes.
+        ({ rowIndex, colIndex } = originOf(ctx.mergeIndex, rowIndex, colIndex));
         ctx.userHasActivatedCell = true;
+        // A click, an arrow, a jump: the Tab run is over. The Tab and Enter
+        // paths put the origin back after this call when it should live on.
+        // Activating the cell the cursor is already on (typing into it, F2, a
+        // double-click) is not a move and keeps the run.
+        const prev = ctx.grid.getState().activeCell;
+        if (!prev || prev.rowIndex !== rowIndex || prev.colIndex !== colIndex) {
+            ctx.tabRunOrigin = null;
+        }
         ctx.grid.setActiveCell({
             rowIndex,
             colIndex,
@@ -51,7 +63,16 @@ export function createSelection(ctx) {
             return;
         if (colIndex < 0 || colIndex >= ctx.allColumns.length)
             return;
-        if (ctx.rowVirtualizationEnabled) {
+        const container = ctx.scrollContainer;
+        const topBefore = container.scrollTop;
+        const leftBefore = container.scrollLeft;
+        // A frozen row is always in view; only the column may need to move.
+        const frozen = ctx.frozenRowCount ?? 0;
+        const frozenBand = ctx.frozenBandHeight ?? 0;
+        if (rowIndex < frozen) {
+            // Always in view; only the column below may need to move.
+        }
+        else if (ctx.rowVirtualizationEnabled) {
             // Prefer the browser's native `scrollIntoView({ block: 'nearest' })`
             // when the target row is already mounted. It does Excel-style
             // minimum-scroll, respects the sticky thead via the
@@ -99,8 +120,10 @@ export function createSelection(ctx) {
                 const rowHeight = ctx.virtualizer.getSizeForIndex(rowIndex);
                 const rowBottom = rowTopScroll + rowHeight;
                 let nextTop = currentTop;
-                if (rowTopScroll < currentTop + headerHeight) {
-                    nextTop = rowTopScroll - headerHeight;
+                // The frozen band sits under the header, so a row is hidden until
+                // it clears both.
+                if (rowTopScroll < currentTop + headerHeight + frozenBand) {
+                    nextTop = rowTopScroll - headerHeight - frozenBand;
                 }
                 else if (rowBottom > currentTop + clientHeight) {
                     nextTop = rowBottom - clientHeight;
@@ -154,34 +177,65 @@ export function createSelection(ctx) {
         else if (cellEnd > viewEnd) {
             ctx.scrollContainer.scrollLeft = cellEnd - ctx.scrollContainer.clientWidth;
         }
-        // No inline scrollVersion bump - the `scroll` event triggers
-        // onBodyScroll which flushes via rAF, doing one batched update.
+        // The scroll position is known right here, so hand it to the
+        // virtualizers now rather than waiting for the `scroll` event + rAF:
+        // that put the new row window one painted frame behind the active-cell
+        // move (see `syncScrollNow`). Reading the position back is cheap - the
+        // scrollIntoView / scrollTop writes above already laid the tree out.
+        const topAfter = container.scrollTop;
+        const leftAfter = container.scrollLeft;
+        if (topAfter !== topBefore || leftAfter !== leftBefore) {
+            ctx.syncScrollNow(topAfter, leftAfter);
+        }
     }
-    // Normalize a range to a rectangle, or null when incomplete.
+    // Normalize a range to a rectangle, or null when incomplete. A merge
+    // the rectangle touches is in it whole, as a spreadsheet's selection
+    // has it: a merged cell is one cell.
     function rangeRect(range) {
         const a = range?.anchor;
         const f = range?.focus;
         if (!a || !f)
             return null;
-        return {
+        return expandRectToMerges(ctx.mergeIndex, {
             minRow: Math.min(a.rowIndex, f.rowIndex),
             maxRow: Math.max(a.rowIndex, f.rowIndex),
             minCol: Math.min(a.colIndex, f.colIndex),
             maxCol: Math.max(a.colIndex, f.colIndex),
-        };
+        });
+    }
+    /** The active range as a rectangle, or null while nothing is anchored. */
+    function activeRangeRect() {
+        return rangeRect(ctx.selectionRange);
     }
+    // Memo for `getSelectionRects`, keyed on the identity of its two inputs.
+    // Both are replaced wholesale on every change and never mutated in place,
+    // so identity is a complete change check. Without it, every rendered
+    // cell's outline derived rebuilt this array on every arrow key - ~300
+    // arrays plus their rect objects per key press, for a result that is the
+    // same until the selection moves.
+    let rectsForRange = null;
+    let rectsForRanges = null;
+    let rectsMemo = [];
     // Every selected rectangle: the committed extra ranges plus the active one.
     // Order matters for copy (added-order); the active range comes last.
+    // Callers must treat the result as read-only.
     function getSelectionRects() {
+        const range = ctx.selectionRange;
+        const ranges = ctx.selectionRanges ?? [];
+        if (range === rectsForRange && ranges === rectsForRanges)
+            return rectsMemo;
         const rects = [];
-        for (const r of ctx.selectionRanges ?? []) {
+        for (const r of ranges) {
             const rect = rangeRect(r);
             if (rect)
                 rects.push(rect);
         }
-        const active = rangeRect(ctx.selectionRange);
+        const active = rangeRect(range);
         if (active)
             rects.push(active);
+        rectsForRange = range;
+        rectsForRanges = ranges;
+        rectsMemo = rects;
         return rects;
     }
     function setSelection(rowIndex, colIndex, additive = false) {
@@ -240,6 +294,9 @@ export function createSelection(ctx) {
         // that work to return null every time.
         if (!hasAnySelectionRect())
             return null;
+        // A td inside a merge draws to the merge's far corner, so its bottom and
+        // right edges are the merge's, not the cell's.
+        const end = endOf(ctx.mergeIndex, rowIndex, colIndex);
         for (const rect of getSelectionRects()) {
             if (rowIndex < rect.minRow ||
                 rowIndex > rect.maxRow ||
@@ -249,13 +306,39 @@ export function createSelection(ctx) {
             }
             return {
                 top: rowIndex === rect.minRow,
-                bottom: rowIndex === rect.maxRow,
+                bottom: end.rowIndex === rect.maxRow,
                 left: colIndex === rect.minCol,
-                right: colIndex === rect.maxCol,
+                right: end.colIndex === rect.maxCol,
             };
         }
         return null;
     }
+    /**
+     * Everything a cell's outline needs from the selection model, in ONE value:
+     * whether it is the active cell, which range edges it sits on (`edges` is
+     * null when it is in no range) and whether it carries the fill handle.
+     * `null` for a cell that is none of those - nearly every cell.
+     *
+     * One value on purpose. The view reads it through a single `{@const}`, so
+     * an active-cell move re-marks one derived per rendered cell instead of
+     * three (active flag, range edges, fill handle) plus the fill handle's
+     * `{#if}`. With ~300 cells rendered, that marking was the largest single
+     * cost of an arrow key that does not scroll. A plain cell returns the same
+     * `null` it returned before the move, so its attribute effect stays put.
+     */
+    function cellSelectionState(rowIndex, colIndex) {
+        const a = ctx.activeCell;
+        const active = !!a && a.rowIndex === rowIndex && a.colIndex === colIndex;
+        const edges = getCellRangeEdges(rowIndex, colIndex);
+        const fh = ctx.fillHandleCell;
+        // The handle sits on the range's bottom-right cell; when that is inside
+        // a merge, the td that draws the merge carries it.
+        const end = fh ? endOf(ctx.mergeIndex, rowIndex, colIndex) : null;
+        const fillHandle = !!fh && !!end && fh.rowIndex === end.rowIndex && fh.colIndex === end.colIndex;
+        if (!active && !edges && !fillHandle)
+            return null;
+        return { active, edges, fillHandle };
+    }
     /**
      * The rectangle a drag is currently promising, or null when no drag is in
      * flight. A fill grows the source rectangle out to the pointer; a move
@@ -368,8 +451,13 @@ export function createSelection(ctx) {
             ? { rowIndex: active.rowIndex, colIndex: active.colIndex }
             : null;
         if (event.shiftKey) {
+            // The range grows to the clicked cell and the active cell stays where
+            // it is, as in Excel: it is the cell the formula bar shows and the
+            // one the next keystroke edits. Used to jump to the clicked corner,
+            // so a Shift+click to select B2:D5 then typing wrote into D5.
             extendSelection(rowIndex, colIndex);
-            setActiveCell(rowIndex, colIndex);
+            if (!active)
+                setActiveCell(rowIndex, colIndex);
         }
         else {
             setActiveCell(rowIndex, colIndex);
@@ -390,8 +478,9 @@ export function createSelection(ctx) {
         const row = ctx.allRows[rowIndex];
         if (!row || isGroupRow(row))
             return;
+        // The active cell is where the drag began; only the range's far corner
+        // follows the pointer.
         extendSelection(rowIndex, colIndex);
-        setActiveCell(rowIndex, colIndex);
     }
     /** `event` is the window `pointerup` when this comes from the real gesture,
      *  and absent when `onWindowPointerMove` calls it to recover from a release
@@ -516,11 +605,12 @@ export function createSelection(ctx) {
             return;
         }
         // onCellPointerDown already set active+selection for data cells. Only
-        // decide whether to enter edit mode (click on the previously-active cell).
+        // decide whether to enter edit mode (click on the previously-active cell,
+        // unless the grid was told a second click is just a click).
         const wasActive = ctx.activeAtPointerDown !== null &&
             ctx.activeAtPointerDown.rowIndex === rowIndex &&
             ctx.activeAtPointerDown.colIndex === colIndex;
-        if (wasActive && ctx.editingEnabled) {
+        if (wasActive && ctx.editingEnabled && ctx.props.editOnSecondClick !== false) {
             ctx.onCellDoubleClick(rowIndex, colIndex);
             return;
         }
@@ -562,6 +652,8 @@ export function createSelection(ctx) {
         extendSelection,
         isCellInSelectedRange,
         getCellRangeEdges,
+        activeRangeRect,
+        cellSelectionState,
         fillMarqueeEdges,
         getSelectionRects,
         isInFillPreview,