@svgrid/grid 3.0.4 → 3.0.6

package/src/a11y/dismissable.test.ts

@@ -1,6 +1,8 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { createDismissableLayer, dismissableDepth, onScrollOutside } from './dismissable'
 
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
 function panel(): HTMLElement {
   const el = document.createElement('div')
   document.body.appendChild(el)
@@ -77,13 +79,20 @@ describe('createDismissableLayer', () => {
     expect(dismissableDepth()).toBe(0)
   })
 
-  it('close-on-scroll ignores scrolling inside the panel', () => {
+  it('close-on-scroll ignores scrolling inside the panel', async () => {
     const el = panel()
     const list = document.createElement('div') // e.g. the filter menu's facet list
     el.appendChild(list)
     let closed = 0
     const off = onScrollOutside(() => el, () => closed++)
 
+    // A scroll that finished before the panel opened is still queued for
+    // the next rendering step; it lands after the listener is asked for
+    // and must not close what the same click just opened.
+    document.body.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(0)
+    await nextFrame()
+
     // Inner scroll containers don't bubble, so this only reaches the capture
     // listener - it must NOT close the menu the user is scrolling.
     list.dispatchEvent(new Event('scroll'))

package/src/a11y/dismissable.ts

@@ -101,6 +101,16 @@ export function dismissableDepth(): number {
  * window listener gets wrong: inner scroll containers don't bubble, so the
  * capture listener sees them and dismisses the panel the user is scrolling.
  *
+ * The listener arms one animation frame after it is asked for, not at once.
+ * Scroll events are queued and dispatched in the next rendering step, so a
+ * scroll that FINISHED before the click that opened the panel - the browser
+ * pulling a half-hidden funnel button into view as it focuses it, a test
+ * driver scrolling the header into place - still lands after the panel has
+ * mounted and wired this listener, and used to close it on the spot. The
+ * panel measured its anchor after that scroll, so the event carries nothing
+ * it needs to react to. Rendering runs the scroll steps before the animation
+ * frame callbacks, which is why one frame is exactly the right delay.
+ *
  * Returns the unsubscribe function.
  */
 export function onScrollOutside(element: () => DismissTarget, onOutside: () => void): () => void {
@@ -109,6 +119,16 @@ export function onScrollOutside(element: () => DismissTarget, onOutside: () => v
     if (containsTarget(element(), event.target as Node)) return
     onOutside()
   }
-  window.addEventListener('scroll', handler, true)
-  return () => window.removeEventListener('scroll', handler, true)
+  let armed = false
+  let frame: number | null = requestAnimationFrame(() => {
+    frame = null
+    armed = true
+    window.addEventListener('scroll', handler, true)
+  })
+  return () => {
+    if (frame !== null) cancelAnimationFrame(frame)
+    frame = null
+    if (armed) window.removeEventListener('scroll', handler, true)
+    armed = false
+  }
 }

package/src/build-api.ts

@@ -26,7 +26,7 @@ import {
   columnDefMatchesId,
 } from "./cell-values";
 import { hasAdvancedFilterEngine } from "./advanced-filter.svelte";
-import { undoHistory, redoHistory } from "./history";
+import { undoHistory, redoHistory, peekUndoHistory, peekRedoHistory } from "./history";
 import { buildCommandContext } from "./command-context";
 
 type OrientedRange = {
@@ -35,6 +35,32 @@ type OrientedRange = {
   highlight: { row: number; col: number }
 }
 
+/**
+ * Row id -> index, per data array, for `applyTransaction`.
+ *
+ * An update batch used to walk every row calling `getRowId` to find the ones
+ * it replaced - 100k calls per tick on a 100k-row feed, whatever the batch
+ * size. The map is built once per array and, for an update-only transaction,
+ * carried to the array it produces: same ids at the same indices. An add or
+ * remove changes indices, so those transactions leave the next array to
+ * build its own map on first use. Keyed weakly so a replaced array takes its
+ * map with it.
+ */
+const rowIndexByData = new WeakMap<ReadonlyArray<unknown>, Map<string, number>>()
+
+function rowIndexOf<TData>(
+  data: ReadonlyArray<TData>,
+  getId: (row: TData, index: number) => string,
+): Map<string, number> {
+  let byId = rowIndexByData.get(data)
+  if (!byId) {
+    byId = new Map()
+    for (let i = 0; i < data.length; i++) byId.set(getId(data[i]!, i), i)
+    rowIndexByData.set(data, byId)
+  }
+  return byId
+}
+
 /**
  * The selection as the user made it: committed ranges first, the active one
  * last, each keeping its anchor as `from` and its focus as `to`. The active
@@ -111,6 +137,10 @@ export function createGridApi<
     };
 
     return {
+      getElement() {
+        const el = ctx.scrollContainer as HTMLElement | null
+        return (el?.closest(".sv-grid-root") as HTMLElement | null) ?? null
+      },
       getCellValue(rowIndex, columnId) {
         const row = ctx.internalData[rowIndex];
         const column = findColumn(columnId);
@@ -243,38 +273,41 @@ export function createGridApi<
       },
       applyTransaction(tx) {
         const getId = ctx.props.getRowId;
-        let next = ctx.internalData.slice() as Array<TData>;
+        const current = ctx.internalData as ReadonlyArray<TData>;
+        let next = current.slice() as Array<TData>;
         let added = 0;
         let updated = 0;
         let removed = 0;
 
+        // Everything resolves against the indices of `current`: the id ->
+        // index map answers updates and id removals with one lookup each, a
+        // reference removal with one `indexOf`, and no pass over the rows
+        // that did not change. A row both updated and removed in the same
+        // transaction ends up removed, as it did when removes ran first.
+        const removeIdx = new Set<number>();
         if (tx.remove?.length) {
-          const removeIds = new Set<string>();
-          const removeRefs = new Set<TData>();
+          const byId = getId ? rowIndexOf(current, getId) : null;
           for (const r of tx.remove) {
-            if (typeof r === "string") removeIds.add(r);
-            else removeRefs.add(r as TData);
+            const idx = typeof r === "string" ? byId?.get(r) : current.indexOf(r as TData);
+            if (idx !== undefined && idx >= 0) removeIdx.add(idx);
           }
-          next = next.filter((row, i) => {
-            const hit =
-              removeRefs.has(row) ||
-              (getId ? removeIds.has(getId(row, i)) : false);
-            if (hit) removed += 1;
-            return !hit;
-          });
         }
 
         if (tx.update?.length && getId) {
-          const byId = new Map<string, TData>();
-          for (const u of tx.update) byId.set(getId(u, 0), u);
-          next = next.map((row, i) => {
-            const u = byId.get(getId(row, i));
-            if (u) {
-              updated += 1;
-              return u;
-            }
-            return row;
-          });
+          const byId = rowIndexOf(current, getId);
+          for (const u of tx.update) {
+            const idx = byId.get(getId(u, 0));
+            if (idx === undefined) continue;
+            next[idx] = u;
+            updated += 1;
+          }
+          // Same ids at the same indices: the next array can reuse the map.
+          if (!removeIdx.size && !tx.add?.length) rowIndexByData.set(next, byId);
+        }
+
+        if (removeIdx.size) {
+          next = next.filter((_, i) => !removeIdx.has(i));
+          removed = removeIdx.size;
         }
 
         if (tx.add?.length) {
@@ -507,6 +540,28 @@ export function createGridApi<
       getData() {
         return ctx.internalData;
       },
+      getRowId(row) {
+        // The stable id the grid keys a row by: what `getRowId` computed,
+        // or the row's position when no `getRowId` prop is set. A number is
+        // a DISPLAY index into the rendered rows, the space getActiveCell,
+        // scrollToRow and the cell methods work in; a row object is looked
+        // up wherever it sits. Null when the index or the object is unknown,
+        // so a caller can tell "no such row" from a real id.
+        if (typeof row === "number") {
+          const found = ctx.allRows[row];
+          return found && !isGroupRow(found) ? (found.id as string) : null;
+        }
+        const inRows = ctx.allRows.find(
+          (r: { original?: unknown; id: string }) => r.original === row,
+        );
+        if (inRows) return inRows.id as string;
+        const getId = ctx.props.getRowId as
+          | ((r: TData, index: number) => string)
+          | undefined;
+        const index = ctx.internalData.indexOf(row as TData);
+        if (index < 0) return null;
+        return getId ? getId(row as TData, index) : String(index);
+      },
       getColumns() {
         // Snapshot every column with its human-readable label and
         // visibility flag. Used by external code (exporters, column
@@ -631,10 +686,10 @@ export function createGridApi<
         ctx.autosizeColumn(columnId);
       },
       getRowHeight(rowIndex: number) {
-        const own = ctx.rowResizeHeightPx(rowIndex);
-        if (own != null) return own;
-        const declared = ctx.props.rowHeight;
-        return typeof declared === "function" ? declared(rowIndex) : (declared ?? 30);
+        // The height the grid draws the row at, whatever decided it: a drag,
+        // a measurement under auto height, a detail row's own height, the
+        // declared rowHeight or the default.
+        return ctx.rowSizePxOf(rowIndex);
       },
       setRowHeight(rowIndex: number, height: number | null) {
         ctx.setRowResizeHeight(rowIndex, height);
@@ -705,6 +760,9 @@ export function createGridApi<
       canUndo() { void ctx.historyVersion; return ctx.historyPtr >= 0 },
       canRedo() { void ctx.historyVersion; return ctx.historyPtr < ctx.history.length - 1 },
       clearHistory() { ctx.history = []; ctx.historyPtr = -1; ctx.historyVersion += 1 },
+      setHistoryTag(tag) { ctx.historyTag = tag },
+      peekUndo() { void ctx.historyVersion; return peekUndoHistory(ctx) },
+      peekRedo() { void ctx.historyVersion; return peekRedoHistory(ctx) },
       // ---- Find
       openFind()  { ctx.findOpen = true },
       closeFind() { ctx.findOpen = false; ctx.findQuery = '' },
@@ -735,9 +793,10 @@ export function createGridApi<
         });
       },
       selectAllRows() {
-        const next: Record<string, boolean> = {};
-        for (const row of ctx.allRows) if (!isGroupRow(row)) next[row.id] = true;
-        ctx.grid.setRowSelection(() => next);
+        // One implementation of "select everything", shared with the header
+        // checkbox, so it knows about an external selection model and about
+        // rows whose data has not arrived.
+        ctx.setSelectAllRows(true);
       },
       toggleRowSelected(id) {
         ctx.toggleRowSelectionById(id);
@@ -745,7 +804,13 @@ export function createGridApi<
       // ---- Pagination
       getPageInfo() {
         const { pageIndex, pageSize } = ctx.paginationState;
-        const total = ctx.allRowsBeforePagination.length;
+        // Under external pagination the grid holds ONE page, so counting the
+        // rows in hand would report a 95-row table as a 20-row one. The
+        // consumer tells us the real total through rowCount, which is what
+        // the footer has always shown.
+        const total = ctx.externalPaginationEnabled
+          ? (ctx.props.rowCount ?? ctx.allRowsBeforePagination.length)
+          : ctx.allRowsBeforePagination.length;
         const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
         return { pageIndex, pageSize, pageCount, total };
       },

package/src/cell-formatting.test.ts

@@ -271,3 +271,20 @@ describe('formatNumericWithConfig - cache reuse', () => {
     expect(typeof result).toBe('string')
   })
 })
+
+describe('formatNumericWithConfig - formatter cache key', () => {
+  it('does not hand a signDisplay column the formatter another column cached without it', () => {
+    // Same digits, no sign: cached first, as a currency-like column would.
+    expect(
+      formatNumericWithConfig(3.27, { type: 'number', locales: 'en-US', options: { minimumFractionDigits: 2, maximumFractionDigits: 2 } }),
+    ).toBe('3.27')
+    // Same digits, with a sign: must not reuse the one above.
+    expect(
+      formatNumericWithConfig(3.27, {
+        type: 'number',
+        locales: 'en-US',
+        options: { minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay: 'always' },
+      }),
+    ).toBe('+3.27')
+  })
+})

package/src/cell-formatting.ts

@@ -101,7 +101,24 @@ export function getNumberFormatter(
     '|' +
     (options.currencyDisplay ?? '') +
     '|' +
-    (options.notation ?? '')
+    (options.notation ?? '') +
+    // Every option that changes the output belongs in the key. `signDisplay`
+    // was missing, so a percent column asking for "+3.27" got the formatter
+    // a currency column with the same digits had already cached, and no sign.
+    '|' +
+    (options.signDisplay ?? '') +
+    '|' +
+    (options.minimumIntegerDigits ?? '') +
+    '|' +
+    (options.compactDisplay ?? '') +
+    '|' +
+    (options.unit ?? '') +
+    '|' +
+    (options.unitDisplay ?? '') +
+    '|' +
+    (options.minimumSignificantDigits ?? '') +
+    '|' +
+    (options.maximumSignificantDigits ?? '')
   let fmt = numberFormatterCache.get(key)
   if (!fmt) {
     fmt = new Intl.NumberFormat(locales as string | string[] | undefined, options)

package/src/cell-render.test.ts

@@ -141,6 +141,26 @@ describe('createCellRender / computeCellValidity', () => {
       message: 'Salary must be at least $1,000',
     })
   })
+
+  it('judges the open editor draft, parsed as a commit would parse it', () => {
+    // With rejectInvalid a refused value never lands, so the red flag while
+    // the value is typed is the only feedback the user gets.
+    const col = makeColumn('salary', { validate: validateSalary, editorType: 'number' })
+    const typing = createCellRender(makeCtx({
+      editedCellValues: {},
+      editingCell: { rowId: 'r1', columnId: 'salary', editorType: 'number', value: '5' },
+    }))
+    expect(typing.computeCellValidity(makeRow('r1', { salary: 85000 }), col)).toEqual({
+      invalid: true,
+      message: 'Salary must be at least $1,000',
+    })
+    // Another cell's editor does not bleed into this one.
+    const elsewhere = createCellRender(makeCtx({
+      editedCellValues: {},
+      editingCell: { rowId: 'r2', columnId: 'salary', editorType: 'number', value: '5' },
+    }))
+    expect(elsewhere.computeCellValidity(makeRow('r1', { salary: 85000 }), col)).toEqual({ invalid: false, message: null })
+  })
 })
 
 describe('createCellRender / computeRowClass', () => {
@@ -489,9 +509,11 @@ describe('createCellRender / formatPinnedValue', () => {
 })
 
 describe('createCellRender / computePinnedCellClass', () => {
-  it('returns empty string when cellClass is not a function', () => {
+  it('applies a static cellClass, a string or a list, the way a body cell does', () => {
     const cr = createCellRender(makeCtx())
-    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: 'x' }))).toBe('')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: 'x' }))).toBe('x')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: ['x', 'y'] }))).toBe('x y')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', {}))).toBe('')
   })
 
   it('invokes a function cellClass with a null row and the pinned value', () => {

package/src/cell-render.ts

@@ -30,6 +30,7 @@ import {
 import {
   getPinnedCellValue,
 } from "./cell-values";
+import { parseEditorValue } from "./editors/cell-editors";
 
 export function createCellRender<
   TFeatures extends TableFeatures = TableFeatures,
@@ -131,11 +132,22 @@ export function createCellRender<
     // cache, so `getCellValueByColumnId` would return the stale pre-edit value
     // and validation would never re-run after an edit. Consult the overlay
     // first - same rule the display path (getCellDisplayValue) and summaries
-    // use - so a cell re-validates live as the user types.
+    // use. While this cell's editor is open the draft is what the rule sees,
+    // parsed the way a commit would parse it, so the red highlight and the
+    // message show as the user types - which, with `rejectInvalid`, is the
+    // only time a refused value is ever visible.
     const edited = ctx.editedCellValues ?? {}
     const key = getCellKey(row.id, column.id)
+    const editing = ctx.editingCell
     const value =
-      key in edited ? edited[key] : row.getCellValueByColumnId(column.id)
+      editing && editing.rowId === row.id && editing.columnId === column.id
+        ? parseEditorValue(editing.editorType, editing.value, {
+            multiple: column.columnDef.editorMultiple === true,
+            dateOnly: column.columnDef.cellDataType === "dateString",
+          })
+        : key in edited
+          ? edited[key]
+          : row.getCellValueByColumnId(column.id)
     const out = rule({
       value,
       row: row.original as TData,
@@ -470,13 +482,17 @@ export function createCellRender<
     rowData: TData,
     column: Column<TData>,
   ): string {
-    const cellClass = column.columnDef.cellClass as
-      | ((ctx: { getValue: () => unknown; value: unknown; row: null; column: Column<TData> }) => string | undefined | null)
-      | undefined;
-    if (typeof cellClass !== "function") return "";
+    const raw = column.columnDef.cellClass;
+    if (raw == null) return "";
+    // A static class applies to the pinned cell the way it does to a body
+    // cell; a function gets the pinned value and `row: null`, since the
+    // pinned row is not a row of the table.
+    if (typeof raw === "string" || Array.isArray(raw)) return resolveClassList(raw);
+    if (typeof raw !== "function") return "";
+    const cellClass = raw as unknown as
+      (ctx: { getValue: () => unknown; value: unknown; row: null; column: Column<TData> }) => string | ReadonlyArray<string> | Record<string, boolean> | undefined | null;
     const value = getPinnedCellValue(rowData, column);
-    const out = cellClass({ getValue: () => value, value, row: null, column });
-    return out ? String(out) : "";
+    return resolveClassList(cellClass({ getValue: () => value, value, row: null, column }));
   }
 
   return {

package/src/clipboard.test.ts

@@ -441,6 +441,25 @@ describe('onFillPointerUp / applyFillPattern', () => {
     expect(ctx.selectionRange.focus).toEqual({ rowIndex: 3, colIndex: 0 })
   })
 
+  it('turns the fill the other way when the release holds Ctrl, as Excel does', () => {
+    // A series becomes a copy of the block...
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 1 }, { a: 2 }, { a: 0 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 4, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp({ ctrlKey: true } as PointerEvent)
+    expect([ctx.internalData[2].a, ctx.internalData[3].a, ctx.internalData[4].a]).toEqual([1, 2, 1])
+    // ...and one number, which copies on its own, becomes a series.
+    const one = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 7 }, { a: 0 }, { a: 0 }],
+    })
+    one.fillDrag = { sourceMinRow: 0, sourceMaxRow: 0, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 2, targetCol: 0 }
+    createClipboard(one).onFillPointerUp({ ctrlKey: true } as PointerEvent)
+    expect([one.internalData[1].a, one.internalData[2].a]).toEqual([8, 9])
+  })
+
   it('records the drag as one grouped history entry, so Ctrl+Z takes it all back', () => {
     // The fill used to write through writeCellRaw and push nothing: a drag
     // over twenty rows was invisible to undo.
@@ -487,6 +506,38 @@ describe('onFillPointerUp / applyFillPattern', () => {
     expect(numeric.internalData[3].a).toBe(4)
   })
 
+  it('skips a collapsed row the consumer does not count, and moves the series over the rows that show', () => {
+    // A filtered row in a spreadsheet: not written, not a step of the
+    // number series, and the formula's delta is the real row distance.
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 10 }, { a: 20 }, { a: 0 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.isRowCollapsed = (r: number) => r === 3
+    const deltas: number[] = []
+    ctx.props.processCellForFill = ({ delta }: { delta: { rows: number } }) => { deltas.push(delta.rows); return undefined }
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 1, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 4, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp()
+    // Row 3 is left holding its 0; the series 30, (skip), 40 lands on 2 and 4.
+    expect(ctx.internalData.map((r: any) => r.a)).toEqual([10, 20, 30, 0, 40])
+    // The hook saw the real row distance from the source cell each target
+    // cycled from: row 2 is 2 below source row 0, row 4 is 3 below source
+    // row 1, not the 1 and 2 a step count would have given.
+    expect(deltas).toEqual([2, 3])
+  })
+
+  it('includeCollapsedRows brings a collapsed row back into the fill', () => {
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'number' }],
+      data: [{ a: 10 }, { a: 0 }, { a: 0 }],
+    })
+    ctx.isRowCollapsed = (r: number) => r === 1
+    ctx.props.includeCollapsedRows = (r: number) => r === 1
+    ctx.fillDrag = { sourceMinRow: 0, sourceMaxRow: 0, sourceMinCol: 0, sourceMaxCol: 0, targetRow: 2, targetCol: 0 }
+    createClipboard(ctx).onFillPointerUp()
+    expect(ctx.internalData.map((r: any) => r.a)).toEqual([10, 10, 10])
+  })
+
   it('double-click fills down as far as the neighbouring column has data', () => {
     const ctx = makeCtx({
       columns: [
@@ -676,6 +727,45 @@ describe('copySelectionToClipboard', () => {
     expect(writeText).toHaveBeenCalledWith('a0\tb0\na1\tb1')
   })
 
+  // A QA pass on the spreadsheet shell: a filtered or hidden row is folded
+  // to nothing, and a copy that carried it put rows the user had filtered
+  // out into the paste.
+  it('leaves out a collapsed row, as a spreadsheet leaves out a filtered one', () => {
+    const ctx = makeCtx({
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+        { a: 'a2', b: 'b2' },
+      ],
+    })
+    ctx.isRowCollapsed = (index: number) => index === 1
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 2, colIndex: 1 },
+    }
+    const cb = createClipboard(ctx)
+    cb.copySelectionToClipboard()
+    expect(writeText).toHaveBeenCalledWith('a0\tb0\na2\tb2')
+  })
+
+  it('leaves out a collapsed column too, header row included', () => {
+    const ctx = makeCtx({
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+      ],
+    })
+    ctx.collapsedColumns = { b: true }
+    ctx.props.copyHeadersToClipboard = true
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 1, colIndex: 1 },
+    }
+    const cb = createClipboard(ctx)
+    cb.copySelectionToClipboard()
+    expect(writeText).toHaveBeenCalledWith('a\na0\na1')
+  })
+
   it('prepends a header row when copyHeadersToClipboard is set', () => {
     const ctx = makeCtx({
       data: [
@@ -849,6 +939,23 @@ describe('clearSelectedCells', () => {
     expect(ctx.grid.store.setState).toHaveBeenCalled()
   })
 
+  // The same QA pass: Delete over a filtered block wiped the rows the
+  // filter had hidden, which is data the user could not even see.
+  it('leaves a collapsed row alone, as a spreadsheet leaves a filtered one', () => {
+    const ctx = makeCtx({
+      columns: [{ id: 'a', field: 'a', editable: true, editorType: 'text' }],
+      data: [{ a: 'one' }, { a: 'two' }, { a: 'three' }],
+    })
+    ctx.isRowCollapsed = (index: number) => index === 1
+    ctx.selectionRange = {
+      anchor: { rowIndex: 0, colIndex: 0 },
+      focus: { rowIndex: 2, colIndex: 0 },
+    }
+    const cb = createClipboard(ctx)
+    expect(cb.clearSelectedCells()).toBe(true)
+    expect(ctx.internalData.map((r: { a: string }) => r.a)).toEqual(['', 'two', ''])
+  })
+
   it('fires onCellValueChange per cleared cell (so formula engines recompute)', () => {
     const onCellValueChange = vi.fn()
     const ctx = makeCtx({