@svgrid/grid 2.6.22 → 2.6.23

package/src/selection-bar-view.svelte.ts

@@ -0,0 +1,36 @@
+/**
+ * selection-bar-view registry - the injection seam for the bulk-action bar that
+ * floats over the grid while rows are selected. `<SvGrid selectionBar={...}>`
+ * and its config types ship in the free grid, but the BAR itself is a paid
+ * feature in `@svgrid/enterprise`. This tiny reactive holder lets enterprise
+ * register the renderer at import time; the grid looks it up and mounts it, or
+ * shows an upsell placeholder when it is absent.
+ *
+ * Same shape as `scheduler-view` and `board-view`, deliberately: three seams
+ * that behave differently would be three things to learn.
+ *
+ * ```ts
+ * // in @svgrid/enterprise, at module load:
+ * import { registerSelectionBarView } from '@svgrid/grid'
+ * import SvGridSelectionBar from './SvGridSelectionBar.svelte'
+ * registerSelectionBarView(SvGridSelectionBar)
+ * ```
+ */
+import type { Component } from 'svelte'
+
+let renderer = $state<Component<any> | null>(null)
+
+/** Register the component that renders the selection bar. Enterprise calls this. */
+export function registerSelectionBarView(component: Component<any>): void {
+  renderer = component
+}
+
+/** The registered selection-bar renderer, or null when enterprise is not installed. */
+export function getSelectionBarView(): Component<any> | null {
+  return renderer
+}
+
+/** Whether a selection-bar renderer has been registered. */
+export function hasSelectionBarView(): boolean {
+  return renderer != null
+}

package/src/selection.test.ts

@@ -44,6 +44,9 @@ function makeCtx(overrides: any = {}) {
     selectionRange: { anchor: null, focus: null },
     isDraggingSelection: false,
     fillDrag: null,
+    moveDrag: null,
+    moveGrabHover: false,
+    moveCellsEffective: false,
     activeAtPointerDown: null,
     editingEnabled: false,
     editingCell: undefined,
@@ -61,6 +64,17 @@ function makeCtx(overrides: any = {}) {
     onCellDoubleClick: vi.fn(),
     onFillPointerUp: vi.fn(),
     onFillPointerMove: vi.fn(),
+    // Range drag-and-drop. `startMoveDrag` returning false is the "the pointer
+    // was not on the border" answer, which is what every test below assumes -
+    // override it to true to exercise the grab path.
+    startMoveDrag: vi.fn(() => false),
+    onMovePointerUp: vi.fn(),
+    onMovePointerMove: vi.fn(),
+    isOnMoveGrabStrip: vi.fn(() => false),
+    // Edge auto-scroll: one rAF loop in the clipboard module, driven from here
+    // for plain drag-select. Its own behaviour is covered in move-cells.test.ts.
+    trackEdgeScroll: vi.fn(),
+    stopEdgeScroll: vi.fn(),
     grid: {
       setRowSelection,
       setActiveCell,
@@ -428,6 +442,149 @@ describe('createSelection - endDragSelection / window move', () => {
     sel.onWindowPointerMove({ buttons: 1 } as any)
     expect(ctx.isDraggingSelection).toBe(true)
   })
+
+  it('endDragSelection cancels the edge-scroll loop', () => {
+    // The loop exits on its own once no drag is live, but cancelling the
+    // pending frame here stops one more from firing after the gesture ended.
+    const ctx = makeCtx({ isDraggingSelection: true })
+    const sel = createSelection(ctx)
+    sel.endDragSelection()
+    expect(ctx.stopEdgeScroll).toHaveBeenCalled()
+  })
+
+  it('feeds the edge-scroll loop while drag-selecting', () => {
+    // Drag-select had the same ceiling as the other two drags: a range could
+    // only ever cover cells that were on screen when it started.
+    const ctx = makeCtx({ isDraggingSelection: true })
+    const sel = createSelection(ctx)
+    const ev = { buttons: 1, clientX: 10, clientY: 10 } as any
+    sel.onWindowPointerMove(ev)
+    expect(ctx.trackEdgeScroll).toHaveBeenCalledWith(ev)
+  })
+
+  it('does not feed the loop once the button is released', () => {
+    const ctx = makeCtx({ isDraggingSelection: true })
+    const sel = createSelection(ctx)
+    sel.onWindowPointerMove({ buttons: 0 } as any)
+    expect(ctx.trackEdgeScroll).not.toHaveBeenCalled()
+  })
+
+  it('endDragSelection commits a pending range move', () => {
+    const ctx = makeCtx({ moveDrag: { x: 1 } })
+    const sel = createSelection(ctx)
+    sel.endDragSelection()
+    expect(ctx.onMovePointerUp).toHaveBeenCalled()
+  })
+
+  it('onWindowPointerMove delegates to the range move when one is in flight', () => {
+    // A move outranks a fill: they can never both be active, and checking it
+    // first keeps the fill path from swallowing the event.
+    const ctx = makeCtx({ moveDrag: { x: 1 }, fillDrag: { x: 1 } })
+    const sel = createSelection(ctx)
+    const ev = { buttons: 1 } as any
+    sel.onWindowPointerMove(ev)
+    expect(ctx.onMovePointerMove).toHaveBeenCalledWith(ev)
+    expect(ctx.onFillPointerMove).not.toHaveBeenCalled()
+  })
+})
+
+describe('createSelection - range move grab', () => {
+  /** A pointer event over a td that reports itself from `closest()`. */
+  function overCell() {
+    const cell: any = { dataset: { svgridRow: '1', svgridCol: '1' } }
+    cell.closest = () => cell
+    return { button: 0, clientX: 10, clientY: 10, target: cell, pointerType: 'mouse' } as any
+  }
+
+  it('hands the pointerdown to the move grab before touching the selection', () => {
+    const ctx = makeCtx({
+      allRows: [{ id: 'r0' }, { id: 'r1' }],
+      allColumns: [{ id: 'a' }, { id: 'b' }],
+      startMoveDrag: vi.fn(() => true),
+    })
+    const sel = createSelection(ctx)
+    sel.onCellPointerDown(1, 1, overCell())
+    expect(ctx.startMoveDrag).toHaveBeenCalled()
+    // The selection the user grabbed is still intact, and no drag-select began.
+    expect(ctx.selectionRange).toEqual({ anchor: null, focus: null })
+    expect(ctx.isDraggingSelection).toBe(false)
+  })
+
+  it('swallows the click that follows a grab, so the range survives', () => {
+    const onCellClick = vi.fn()
+    const ctx = makeCtx({
+      allRows: [makeDataRow('r0', { id: 0 }), makeDataRow('r1', { id: 1 })],
+      allColumns: [makeColumn('c0', { editorType: 'text' }), makeColumn('c1', { editorType: 'text' })],
+      gridRootEl: { focus: vi.fn() },
+      props: { onCellClick },
+      startMoveDrag: vi.fn(() => true),
+    })
+    const sel = createSelection(ctx)
+    sel.onCellPointerDown(1, 1, overCell())
+    sel.onCellClick(1, 1)
+    expect(onCellClick).not.toHaveBeenCalled()
+    // Only the one click is swallowed - the next behaves normally.
+    sel.onCellClick(1, 1)
+    expect(onCellClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('falls through to normal selection when the pointer misses the border', () => {
+    const ctx = makeCtx({
+      allRows: [{ id: 'r0' }, { id: 'r1' }],
+      allColumns: [{ id: 'a' }, { id: 'b' }],
+    })
+    const sel = createSelection(ctx)
+    sel.onCellPointerDown(1, 1, overCell())
+    expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 1, colIndex: 1 })
+    expect(ctx.isDraggingSelection).toBe(true)
+  })
+
+  it('updateMoveGrabHover leaves the flag alone while moveCells is off', () => {
+    const ctx = makeCtx({ moveCellsEffective: false })
+    const sel = createSelection(ctx)
+    sel.onWindowPointerMove(overCell())
+    expect(ctx.isOnMoveGrabStrip).not.toHaveBeenCalled()
+    expect(ctx.moveGrabHover).toBe(false)
+  })
+
+  it('raises the hover flag on the border and drops it off it', () => {
+    const ctx = makeCtx({
+      moveCellsEffective: true,
+      // Without an anchored range the hover check bails before touching the
+      // DOM - correctly, since there is then no border to grab.
+      selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 2, colIndex: 2 } },
+      isOnMoveGrabStrip: vi.fn(() => true),
+    })
+    const sel = createSelection(ctx)
+    sel.onWindowPointerMove(overCell())
+    expect(ctx.moveGrabHover).toBe(true)
+    ctx.isOnMoveGrabStrip = vi.fn(() => false)
+    sel.onWindowPointerMove(overCell())
+    expect(ctx.moveGrabHover).toBe(false)
+  })
+
+  it('never walks the DOM while nothing is selected', () => {
+    // This runs on every window pointermove, so the guard order matters:
+    // two property reads must come before any closest() call.
+    const closest = vi.fn(() => null)
+    const ctx = makeCtx({ moveCellsEffective: true, isOnMoveGrabStrip: vi.fn(() => true) })
+    const sel = createSelection(ctx)
+    sel.onWindowPointerMove({ target: { closest }, buttons: 0 } as any)
+    expect(closest).not.toHaveBeenCalled()
+    expect(ctx.isOnMoveGrabStrip).not.toHaveBeenCalled()
+  })
+
+  it('drops the hover flag when the pointer leaves the grid entirely', () => {
+    const ctx = makeCtx({
+      moveCellsEffective: true,
+      moveGrabHover: true,
+      selectionRange: { anchor: { rowIndex: 1, colIndex: 1 }, focus: { rowIndex: 2, colIndex: 2 } },
+      isOnMoveGrabStrip: vi.fn(() => true),
+    })
+    const sel = createSelection(ctx)
+    sel.onWindowPointerMove({ target: { closest: () => null }, buttons: 0 } as any)
+    expect(ctx.moveGrabHover).toBe(false)
+  })
 })
 
 describe('createSelection - onCellClick', () => {

package/src/selection.ts

@@ -242,15 +242,22 @@ export function createSelection<
    * that contains the cell are returned (active range checked last so its
    * outline wins on overlap). Returns null when the cell is in no range.
    */
+  /** Could `getSelectionRects()` return anything? An anchored active range or
+   *  a committed one is the only way a rect can exist, and both are plain
+   *  property reads - so this is the cheap guard in front of anything that
+   *  would otherwise allocate a rect array to discover there is nothing. */
+  function hasAnySelectionRect() {
+    const active = ctx.selectionRange as SelectionRange | undefined;
+    const committed = ctx.selectionRanges as SelectionRange[] | undefined;
+    return Boolean(committed?.length) || Boolean(active?.anchor && active?.focus);
+  }
+
   function getCellRangeEdges(rowIndex: number, colIndex: number) {
     // Bail before `getSelectionRects()`, which allocates an array and resolves
     // every range. This runs once per rendered CELL on every render - about 250
     // times per frame on a default grid - and with nothing selected it did all
-    // that work to return null every time. An anchored active range or a
-    // committed one is the only way any rect can exist.
-    const active = ctx.selectionRange as SelectionRange | undefined;
-    const committed = ctx.selectionRanges as SelectionRange[] | undefined;
-    if (!committed?.length && !(active?.anchor && active?.focus)) return null;
+    // that work to return null every time.
+    if (!hasAnySelectionRect()) return null;
 
     for (const rect of getSelectionRects()) {
       if (
@@ -271,10 +278,40 @@ export function createSelection<
     return null;
   }
 
+  /**
+   * 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
+   * detaches an identically-sized rectangle and drops it at the offset the
+   * pointer has travelled. Both feed the same preview tint and marquee, so a
+   * range move looks like the fill handle users already know.
+   */
+  function dragPreviewRect() {
+    const m = ctx.moveDrag;
+    if (m) return ctx.moveDestRect(m);
+    const d = ctx.fillDrag;
+    if (!d) return null;
+    return {
+      minRow: Math.min(d.sourceMinRow, d.targetRow),
+      maxRow: Math.max(d.sourceMaxRow, d.targetRow),
+      minCol: Math.min(d.sourceMinCol, d.targetCol),
+      maxCol: Math.max(d.sourceMaxCol, d.targetCol),
+    };
+  }
+
   /** Returns true when the given cell is inside the fill-drag preview
    *  range BUT outside the original source range. Used to paint a
    *  dashed-outline preview while the user is dragging the handle. */
   function isInFillPreview(rowIndex: number, colIndex: number) {
+    if (ctx.moveDrag) {
+      const rect = dragPreviewRect();
+      if (!rect) return false;
+      return (
+        rowIndex >= rect.minRow &&
+        rowIndex <= rect.maxRow &&
+        colIndex >= rect.minCol &&
+        colIndex <= rect.maxCol
+      );
+    }
     const d = ctx.fillDrag;
     if (!d) return false;
     const minR = Math.min(d.sourceMinRow, d.targetRow);
@@ -303,12 +340,12 @@ export function createSelection<
    * border. Returns null when the cell isn't on the rectangle's boundary.
    */
   function fillMarqueeEdges(rowIndex: number, colIndex: number) {
-    const d = ctx.fillDrag;
-    if (!d) return null;
-    const minR = Math.min(d.sourceMinRow, d.targetRow);
-    const maxR = Math.max(d.sourceMaxRow, d.targetRow);
-    const minC = Math.min(d.sourceMinCol, d.targetCol);
-    const maxC = Math.max(d.sourceMaxCol, d.targetCol);
+    // Cheap bail before the shared rect helper, which allocates: this runs
+    // once per rendered cell and no drag is in flight almost all the time.
+    if (!ctx.fillDrag && !ctx.moveDrag) return null;
+    const rect = dragPreviewRect();
+    if (!rect) return null;
+    const { minRow: minR, maxRow: maxR, minCol: minC, maxCol: maxC } = rect;
     if (rowIndex < minR || rowIndex > maxR || colIndex < minC || colIndex > maxC) {
       return null;
     }
@@ -335,6 +372,18 @@ export function createSelection<
     const row = ctx.allRows[rowIndex];
     const column = ctx.allColumns[colIndex];
     if (!row || !column || isGroupRow(row)) return;
+    // A pointerdown on the outer few pixels of a selection border grabs the
+    // range to move it. Checked before anything else, because everything below
+    // would first collapse the selection this drag is about to relocate.
+    // Returns false unless the pointer really was on the strip, so a click
+    // anywhere further inside falls straight through to the old behaviour.
+    if (ctx.startMoveDrag(event, rowIndex, colIndex)) {
+      // A grab that never moves still ends in a `click` on the cell under the
+      // border. Left alone that click would collapse the range the user was
+      // clearly reaching for, and on a checkbox column it would flip the value.
+      moveGrabSwallowsClick = true;
+      return;
+    }
     // NOTE: we no longer bail for checkbox columns. Bailing here meant a
     // range drag could never START on a checkbox cell. A plain click still
     // toggles the checkbox via onCellClick (a same-cell click), while a
@@ -369,27 +418,95 @@ export function createSelection<
     setActiveCell(rowIndex, colIndex);
   }
 
-  function endDragSelection() {
+  /** `event` is the window `pointerup` when this comes from the real gesture,
+   *  and absent when `onWindowPointerMove` calls it to recover from a release
+   *  it never saw. A range move reads its copy modifier from it, so holding
+   *  Ctrl between the last movement and the release still copies. */
+  function endDragSelection(event?: PointerEvent) {
     ctx.isDraggingSelection = false;
+    // Every drag shares one edge-scroll loop, and it exits on its own once no
+    // drag is live - but stopping it here cancels the pending frame rather
+    // than letting one more fire after the gesture is over.
+    ctx.stopEdgeScroll();
     // Also commit a fill-handle drag if one was in progress - the user
     // released the mouse, time to apply the pattern.
     if (ctx.fillDrag) ctx.onFillPointerUp();
+    if (ctx.moveDrag) ctx.onMovePointerUp(event);
   }
 
   function onWindowPointerMove(event: PointerEvent) {
+    if (ctx.moveDrag) {
+      ctx.onMovePointerMove(event);
+      return;
+    }
     if (ctx.fillDrag) {
       ctx.onFillPointerMove(event);
       return;
     }
-    if (!ctx.isDraggingSelection) return;
+    if (!ctx.isDraggingSelection) {
+      updateMoveGrabHover(event);
+      return;
+    }
     // Safety: if no mouse button is held the drag is over (we may have
     // missed pointerup because the user lifted outside the window).
     if (event.buttons === 0) {
       endDragSelection();
+      return;
     }
+    // Drag-select past the viewport edge scrolls the grid, same as the fill
+    // and move drags. Without it a range can only ever cover what was already
+    // on screen when the drag started. `onCellPointerEnter` keeps extending
+    // the range for cells the pointer actually crosses; this covers the case
+    // where the pointer has stopped at the edge and the CELLS are moving.
+    ctx.trackEdgeScroll(event);
   }
 
+  /**
+   * Switch the grid to a move cursor while the pointer sits on the grab strip
+   * of a selection border - without it the feature is invisible, since the
+   * border is painted, not a hit target.
+   *
+   * This runs on every window pointermove, so the order of the guards is the
+   * point: `moveCellsEffective` and the already-hovering flag are plain
+   * property reads, and `isOnMoveGrabStrip` bails on `getCellRangeEdges`
+   * before measuring anything when no range is selected.
+   */
+  function updateMoveGrabHover(event: PointerEvent) {
+    const wasHovering = ctx.moveGrabHover;
+    // Two property reads before anything touches the DOM. `closest()` walks
+    // ancestors on EVERY pointer move over the page, so it has to sit behind
+    // both "the feature is on" and "there is a range to grab".
+    if (!ctx.moveCellsEffective || !hasAnySelectionRect()) {
+      if (wasHovering) ctx.moveGrabHover = false;
+      return;
+    }
+    const target = event.target as HTMLElement | null;
+    const cell = target?.closest?.(
+      "td[data-svgrid-row][data-svgrid-col]",
+    ) as HTMLElement | null;
+    let hovering = false;
+    if (cell) {
+      const r = Number(cell.dataset.svgridRow);
+      const c = Number(cell.dataset.svgridCol);
+      if (Number.isFinite(r) && Number.isFinite(c)) {
+        hovering = ctx.isOnMoveGrabStrip(cell, r, c, event.clientX, event.clientY);
+      }
+    }
+    if (hovering !== wasHovering) ctx.moveGrabHover = hovering;
+  }
+
+  /** Set when a pointerdown started a range move, so the `click` that
+   *  follows a zero-distance grab is discarded instead of collapsing the
+   *  selection it grabbed. One gesture, one flag - cleared on the next click
+   *  whether or not the grab turned into a real drag. */
+  let moveGrabSwallowsClick = false;
+
   function onCellClick(rowIndex: number, colIndex: number) {
+    if (moveGrabSwallowsClick) {
+      moveGrabSwallowsClick = false;
+      ctx.gridRootEl?.focus({ preventScroll: true });
+      return;
+    }
     const row = ctx.allRows[rowIndex];
     const column = ctx.allColumns[colIndex];
     if (!row || !column) return;
@@ -489,6 +606,7 @@ export function createSelection<
     fillMarqueeEdges,
     getSelectionRects,
     isInFillPreview,
+    dragPreviewRect,
     findColumnById,
     onCellPointerDown,
     onCellPointerEnter,

package/src/svgrid.filter-menu-listbox.svelte.test.ts

@@ -79,8 +79,10 @@ function mountGrid(data: Row[]) {
 }
 
 /** Open the funnel popover on the first column and return the menu element. */
-async function openFilterMenu(target: HTMLElement) {
-  const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
+async function openFilterMenu(target: HTMLElement, columnIndex = 0) {
+  const btn = target.querySelectorAll('.sv-grid-col-filter-btn')[
+    columnIndex
+  ] as HTMLButtonElement
   btn.click()
   // GridMenus is a lazy chunk, so poll until the popover mounts AND its value
   // checklist has rendered.
@@ -110,8 +112,21 @@ async function openFilterMenu(target: HTMLElement) {
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 
+// The LABEL only. The row also carries a trailing match count, which these
+// tests are not about - reading the whole row's text would couple them to it.
+const labelOf = (el: Element) =>
+  (el.querySelector('.sv-listbox__label') ?? el).textContent?.trim() ?? ''
+
 const optionLabels = (menu: HTMLElement) =>
-  Array.from(menu.querySelectorAll('[role="option"]')).map((el) => el.textContent?.trim() ?? '')
+  Array.from(menu.querySelectorAll('[role="option"]')).map(labelOf)
+
+const findOption = (menu: HTMLElement, label: string) => {
+  const hit = Array.from(menu.querySelectorAll('[role="option"]')).find(
+    (el) => labelOf(el) === label,
+  )
+  if (!hit) throw new Error(`no option labelled "${label}" in [${optionLabels(menu)}]`)
+  return hit as HTMLElement
+}
 
 describe('filter menu value checklist', () => {
   it('windows a high-cardinality column instead of mounting every value', async () => {
@@ -252,9 +267,7 @@ describe('filter menu value checklist', () => {
     expect(optionLabels(suggest).length).toBeGreaterThan(1)
 
     // Pick another: the fragment is consumed, not left beside it.
-    const pick = Array.from(suggest.querySelectorAll('[role="option"]')).find(
-      (el) => el.textContent?.trim() === 'SYM00005',
-    ) as HTMLElement
+    const pick = findOption(suggest, 'SYM00005')
     pick.click()
     await tick()
 
@@ -263,7 +276,7 @@ describe('filter menu value checklist', () => {
     // dropdown has no trailing separator, so anything that mistook the last
     // token for a half-typed fragment would show it unchecked.
     const checked = suggest.querySelectorAll('[role="option"][aria-selected="true"]')
-    expect(Array.from(checked).map((el) => el.textContent?.trim()).sort()).toEqual([
+    expect(Array.from(checked).map(labelOf).sort()).toEqual([
       'SYM00003',
       'SYM00005',
     ])
@@ -291,9 +304,7 @@ describe('filter menu value checklist', () => {
     await vi.waitFor(() => expect(target.querySelector('.sv-grid-in-suggest')).not.toBeNull())
     const suggest = target.querySelector('.sv-grid-in-suggest') as HTMLElement
 
-    const pick = Array.from(suggest.querySelectorAll('[role="option"]')).find(
-      (el) => el.textContent?.trim() === 'Aug 17, 2026',
-    ) as HTMLElement
+    const pick = findOption(suggest, 'Aug 17, 2026')
     pick.click()
     await tick()
 
@@ -328,4 +339,39 @@ describe('filter menu value checklist', () => {
 
     destroy()
   })
+
+  it('shows how many rows each value matches', async () => {
+    // 9 rows over teams A/B/C, so three each.
+    const { target, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    const menu = await openFilterMenu(target, 1)
+    const rows = Array.from(menu.querySelectorAll('[role="option"]')).map((el) => ({
+      label: el.querySelector('.sv-listbox__label')?.textContent?.trim(),
+      hint: el.querySelector('.sv-listbox__hint')?.textContent?.trim(),
+    }))
+    expect(rows).toEqual([
+      { label: 'A', hint: '3' },
+      { label: 'B', hint: '3' },
+      { label: 'C', hint: '3' },
+    ])
+    destroy()
+  })
+
+  it('offers only the values still reachable under the other columns\' filters', async () => {
+    // Symbols SYM00000..2 are teams A, B, C in turn. Filtering Symbol down to
+    // one row must leave the Team list showing that row's team alone - the
+    // list used to be built from the whole dataset, so it offered every team
+    // and two of the three were a one-click route to an empty grid.
+    const { target, api, destroy } = await mountGrid(makeRows(9))
+    await tick()
+    api.setFilter('symbol', { operator: 'equals', value: 'SYM00001' })
+    await tick()
+    expect(api.getDisplayedRows().length).toBe(1)
+
+    const menu = await openFilterMenu(target, 1)
+    const labels = optionLabels(menu)
+    expect(labels).toEqual(['B'])
+
+    destroy()
+  })
 })

package/src/svgrid.in-suggest-snapshot.svelte.test.ts

@@ -0,0 +1,91 @@
+/**
+ * The `in` / `notIn` suggestions dropdown shares the facet scan with the
+ * filter menu's checklist. That scan now also runs the filter pipeline, to
+ * offer only values still reachable under the other columns' filters - which
+ * put an O(rows) pass on the typing path of the chip input, because the
+ * suggestions re-derive on every keystroke.
+ *
+ * They are snapshotted per open instead, the same way the menu's checklist is.
+ * This pins that: typing must not re-scan.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: number; symbol: string }
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+describe('in/notIn suggestions', () => {
+  it('scans once per open, not once per keystroke', async () => {
+    const data: Row[] = Array.from({ length: 40 }, (_, i) => ({
+      id: i + 1,
+      symbol: `SYM${String(i).padStart(3, '0')}`,
+    }))
+
+    // Count reads of the accessor the facet scan goes through. A per-keystroke
+    // re-scan shows up here as another 40 reads per character typed.
+    let reads = 0
+    const columns: ColumnDef<typeof features, Row>[] = [
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        width: 200,
+        fieldFn: (row: Row) => {
+          reads += 1
+          return row.symbol
+        },
+      },
+    ]
+
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid<typeof features, Row>, {
+      target,
+      props: { data, columns, features, filterMode: 'row', height: 300 } as never,
+    })
+    await tick()
+
+    // Switch the column to `in`, which is what turns the filter-row box into a
+    // chip input with suggestions.
+    const operatorBtn = target.querySelector(
+      '.sv-grid-filter-operator-btn',
+    ) as HTMLButtonElement
+    operatorBtn.click()
+    await vi.waitFor(() => expect(document.querySelector('.sv-grid-operator-menu')).not.toBeNull())
+    const inItem = Array.from(
+      document.querySelectorAll('.sv-grid-operator-menu .sv-grid-menu-item'),
+    ).find((el) => el.textContent?.trim() === 'In') as HTMLElement
+    inItem.click()
+    await tick()
+
+    const input = target.querySelector(
+      '.sv-grid-filter-chip-input, .sv-grid-filter-value',
+    ) as HTMLInputElement
+    expect(input).not.toBeNull()
+    input.focus()
+    input.dispatchEvent(new Event('focus', { bubbles: true }))
+    await vi.waitFor(() => expect(document.querySelector('.sv-grid-in-suggest')).not.toBeNull())
+
+    const afterOpen = reads
+    expect(afterOpen).toBeGreaterThan(0)
+
+    // Type into the box: the list narrows from the snapshot, no fresh scan.
+    for (const text of ['S', 'SY', 'SYM', 'SYM0', 'SYM00']) {
+      input.value = text
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      await tick()
+    }
+    expect(document.querySelector('.sv-grid-in-suggest')).not.toBeNull()
+    expect(reads).toBe(afterOpen)
+
+    unmount(app)
+    target.remove()
+  })
+})