@svgrid/grid 2.2.28 → 2.2.29

package/src/editing.test.ts

@@ -62,6 +62,16 @@ function makeCtx(opts: FakeOptions = {}) {
     get allRows() {
       return ctx._rows
     },
+    // The full filtered model. Same rows here (the fake has no pagination);
+    // tests that exercise the "row left the model" path override `_rows`
+    // alone so the two genuinely diverge.
+    get allRowsBeforePagination() {
+      return ctx._rowsBeforePagination ?? ctx._rows
+    },
+    get activeCell() {
+      return activeCell
+    },
+    scrollActiveCellIntoView: () => {},
     editingEnabled: opts.editingEnabled ?? true,
     editingCell: null,
     editorSelectAll: false,
@@ -244,6 +254,9 @@ describe('startEditingWithChar', () => {
       columnId: 'a',
       editorType: 'text',
       value: 'Z',
+      // The row's data object, kept so the commit still lands if a filter
+      // drops the row from the model mid-edit (#49).
+      rowRef: ctx.internalData[0],
     })
     expect(ctx.editorSelectAll).toBe(false)
     expect(ctx.activeCalls).toEqual([[0, 0]])
@@ -595,6 +608,82 @@ describe('onEditorKeyDown', () => {
     expect(() => ed.onEditorKeyDown(fakeEvent('Escape'))).not.toThrow()
     expect(ctx.editingCell).toBeNull()
   })
+
+  // #45 in the original report: Tab used to commit and then let the browser
+  // walk focus out of the grid, because editors stopPropagation() every key
+  // and nothing called preventDefault() for Tab.
+  it('Tab saves and advances the active cell one column (#48)', () => {
+    const { ctx, ed } = editingFor({
+      columns: [
+        { id: 'a', field: 'a', editorType: 'text' },
+        { id: 'b', field: 'b', editorType: 'text' },
+      ],
+      data: [{ a: 'old', b: 'b0' }],
+    })
+    ctx.gridRootEl = { focus: vi.fn() }
+    ed.onCellDoubleClick(0, 0)
+    ctx.editingCell = { ...ctx.editingCell, value: 'new' }
+    const ev = fakeEvent('Tab')
+    ed.onEditorKeyDown(ev)
+    expect(ev.preventDefault).toHaveBeenCalled()
+    expect(ctx.internalData[0].a).toBe('new')
+    expect(ctx.activeCalls.at(-1)).toEqual([0, 1])
+  })
+
+  it('Shift+Tab moves back a column and wraps to the previous row (#48)', () => {
+    const { ctx, ed } = editingFor({
+      columns: [
+        { id: 'a', field: 'a', editorType: 'text' },
+        { id: 'b', field: 'b', editorType: 'text' },
+      ],
+      data: [
+        { a: 'a0', b: 'b0' },
+        { a: 'a1', b: 'b1' },
+      ],
+    })
+    ctx.gridRootEl = { focus: vi.fn() }
+    ed.onCellDoubleClick(1, 0)
+    const ev = { ...fakeEvent('Tab'), shiftKey: true } as unknown as KeyboardEvent
+    ;(ev as any).preventDefault = vi.fn()
+    ;(ev as any).stopPropagation = vi.fn()
+    ed.onEditorKeyDown(ev)
+    // Off the left edge -> last column of the row above.
+    expect(ctx.activeCalls.at(-1)).toEqual([0, 1])
+  })
+})
+
+describe('saveEditingCell when the row leaves the row model (#49)', () => {
+  it('writes through the captured row when a filter hides it mid-edit', () => {
+    const { ctx, ed } = editingFor({
+      columns: [{ id: 'a', field: 'a', editorType: 'text' }],
+      data: [{ a: 'old' }, { a: 'other' }],
+    })
+    const target = ctx.internalData[0]
+    ed.onCellDoubleClick(0, 0)
+    ctx.editingCell = { ...ctx.editingCell, value: 'typed' }
+    // A filter typed into the filter row drops the edited row from BOTH the
+    // page slice and the full filtered model while the editor is still open.
+    ctx._rows = ctx._rows.slice(1)
+    ctx._rowsBeforePagination = ctx._rows
+    ed.saveEditingCell()
+    expect(target.a).toBe('typed')
+    expect(ctx.editingCell).toBeNull()
+  })
+
+  it('still resolves a row that is only off the current page', () => {
+    const { ctx, ed } = editingFor({
+      columns: [{ id: 'a', field: 'a', editorType: 'text' }],
+      data: [{ a: 'old' }, { a: 'other' }],
+    })
+    const target = ctx.internalData[0]
+    ed.onCellDoubleClick(0, 0)
+    ctx.editingCell = { ...ctx.editingCell, value: 'typed' }
+    // Paginated away: gone from `allRows`, still in the full filtered model.
+    ctx._rowsBeforePagination = ctx._rows
+    ctx._rows = ctx._rows.slice(1)
+    ed.saveEditingCell()
+    expect(target.a).toBe('typed')
+  })
 })
 
 describe('focusOnMount', () => {
@@ -667,6 +756,7 @@ describe('onCellDoubleClick', () => {
       columnId: 'a',
       editorType: 'text',
       value: 'val',
+      rowRef: ctx.internalData[0],
     })
     expect(ctx.activeCalls).toEqual([[0, 0]])
     expect(ctx.selectionCalls).toEqual([[0, 0]])

package/src/editing.ts

@@ -231,6 +231,7 @@ export function createEditing<
       columnId: column.id,
       editorType,
       value: char,
+      rowRef: row.original,
     };
     ctx.setActiveCell(rowIndex, colIndex);
     ctx.setSelection(rowIndex, colIndex);
@@ -239,7 +240,17 @@ export function createEditing<
 
   function saveEditingCell() {
     if (!ctx.editingCell) return;
-    const row = ctx.allRows.find((entry: any) => entry.id === ctx.editingCell?.rowId);
+    const editing = ctx.editingCell;
+    // Resolve the row this edit belongs to. `allRows` is only the current page,
+    // so fall back to the full filtered model, then to the data object captured
+    // when the edit started. Without that last hop an edit is silently dropped
+    // when a filter typed mid-edit hides the row from both models (#49).
+    const row =
+      ctx.allRows.find((entry: any) => entry.id === editing.rowId) ??
+      ctx.allRowsBeforePagination.find((entry: any) => entry.id === editing.rowId);
+    const rowData = (row?.original ?? editing.rowRef) as
+      | Record<string, unknown>
+      | undefined;
     const column = ctx.allColumns.find(
       (entry: any) => entry.id === ctx.editingCell?.columnId,
     );
@@ -252,10 +263,8 @@ export function createEditing<
     );
     let oldValue: unknown = undefined;
     let finalValue: unknown = parsedValue;
-    if (row?.original && column?.columnDef.field) {
-      oldValue = (row.original as Record<string, unknown>)[
-        column.columnDef.field
-      ];
+    if (rowData && column?.columnDef.field) {
+      oldValue = rowData[column.columnDef.field];
       // Per-column valueParser refines the type-coerced value before storing.
       const parser = (
         column.columnDef as { valueParser?: (p: unknown) => unknown }
@@ -265,12 +274,11 @@ export function createEditing<
           newValue: parsedValue,
           oldValue,
           rawInput: ctx.editingCell.value,
-          data: row.original,
+          data: rowData,
           columnId: ctx.editingCell.columnId,
         });
       }
-      (row.original as Record<string, unknown>)[column.columnDef.field] =
-        finalValue;
+      rowData[column.columnDef.field] = finalValue;
     }
     const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
     ctx.editedCellValues = {
@@ -281,7 +289,7 @@ export function createEditing<
     // Record into the history at the current pointer. Any forward
     // history (steps the user could have redone) is truncated - this
     // is the standard "edit invalidates redo" rule.
-    if (oldValue !== finalValue && row?.original && column?.columnDef.field) {
+    if (oldValue !== finalValue && rowData && column?.columnDef.field) {
       const step: HistoryStep = {
         rowId:    ctx.editingCell.rowId,
         columnId: ctx.editingCell.columnId,
@@ -306,14 +314,14 @@ export function createEditing<
     // Notify the consumer AFTER the row has been updated so any callback-
     // driven recompute (cascade totals, server save, undo stack) sees the
     // post-write state. `rowIndex` matches the position in `props.data`.
-    if (ctx.props.onCellValueChange && row?.original && column) {
-      const rowIndex = ctx.internalData.indexOf(row.original as TData);
+    if (ctx.props.onCellValueChange && rowData && column) {
+      const rowIndex = ctx.internalData.indexOf(rowData as TData);
       ctx.props.onCellValueChange({
         rowIndex,
         columnId: column.id,
         oldValue,
         newValue: finalValue,
-        row: row.original as TData,
+        row: rowData as TData,
       });
     }
     ctx.editingCell = null;
@@ -346,12 +354,36 @@ export function createEditing<
     ctx.editingCell = ctx.editingCell ? { ...ctx.editingCell, value } : ctx.editingCell;
   }
 
+  /**
+   * Commit the open editor and move the active cell one column along, wrapping
+   * at row boundaries the way Excel does. Editors `stopPropagation()` every key
+   * so the grid's own Tab handler never sees this one - without the explicit
+   * move, Tab committed the edit and then let the browser walk focus out of the
+   * grid entirely (#48). Shared by every editor type, including the textarea.
+   */
+  function commitAndMoveByTab(shiftKey: boolean) {
+    const active = ctx.activeCell;
+    saveEditingCell();
+    ctx.gridRootEl?.focus({ preventScroll: true });
+    if (!active) return;
+    const next = getNextActiveCell(active, shiftKey ? "tabPrev" : "tabNext", {
+      maxRow: ctx.allRows.length - 1,
+      maxCol: ctx.allColumns.length - 1,
+    });
+    ctx.setActiveCell(next.rowIndex, next.colIndex);
+    ctx.setSelection(next.rowIndex, next.colIndex);
+    ctx.scrollActiveCellIntoView(next.rowIndex, next.colIndex);
+  }
+
   function onEditorKeyDown(event: KeyboardEvent) {
     event.stopPropagation();
     if (event.key === "Enter") {
       event.preventDefault();
       saveEditingCell();
       ctx.gridRootEl?.focus({ preventScroll: true });
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      commitAndMoveByTab(event.shiftKey);
     } else if (event.key === "Escape") {
       event.preventDefault();
       ctx.editingCell = null;
@@ -412,6 +444,7 @@ export function createEditing<
       columnId: column.id,
       editorType,
       value: initialValue,
+      rowRef: row.original,
     };
     ctx.setActiveCell(rowIndex, colIndex);
     ctx.setSelection(rowIndex, colIndex);
@@ -667,6 +700,7 @@ export function createEditing<
     applyHistoryStep,
     updateEditingCellValue,
     onEditorKeyDown,
+    commitAndMoveByTab,
     focusOnMount,
     onCellDoubleClick,
     pasteFromClipboard,

package/src/filtering/excel-filters.test.ts

@@ -6,6 +6,7 @@ import {
   applyExcelFilter,
   splitInTokens,
   joinInTokens,
+  trailingInToken,
   type ExcelFilter,
 } from './excel-filters'
 
@@ -211,6 +212,48 @@ describe('in-token serialization helpers', () => {
   })
   it('joinInTokens round-trips through splitInTokens', () => {
     expect(splitInTokens(joinInTokens(['a', 'b', 'c']))).toEqual(['a', 'b', 'c'])
-    expect(joinInTokens([' a ', '', 'b'])).toBe('a\nb')
+    expect(joinInTokens([' a ', '', 'b'])).toBe('a, b')
+  })
+  it('joinInTokens survives an <input type="text"> value round-trip', () => {
+    // The input value sanitiser strips newlines, so the separator must not be
+    // one - otherwise the list comes back as a single run-together token.
+    const input = document.createElement('input')
+    input.value = joinInTokens(['AAPL', 'MSFT'])
+    expect(splitInTokens(input.value)).toEqual(['AAPL', 'MSFT'])
+  })
+  it('trailingInToken returns the fragment still being typed', () => {
+    expect(trailingInToken('AAPL, MS')).toBe('MS')
+    expect(trailingInToken('AAPL,MS')).toBe('MS')
+    expect(trailingInToken('MS')).toBe('MS')
+    expect(trailingInToken('AAPL\nMS')).toBe('MS')
+  })
+  it('trailingInToken is empty once the fragment is separated off', () => {
+    expect(trailingInToken('AAPL, ')).toBe('')
+    expect(trailingInToken('AAPL,')).toBe('')
+    expect(trailingInToken('AAPL\n')).toBe('')
+    expect(trailingInToken('')).toBe('')
+    expect(trailingInToken(null)).toBe('')
+  })
+  it('quotes tokens containing a separator so they survive the round-trip', () => {
+    // Facet labels really do contain commas: numeric buckets come from
+    // toLocaleString ("1,234 - 5,678") and date buckets use a short month.
+    const labels = ['1,234 - 5,678', 'Aug 17, 2026', 'plain']
+    expect(splitInTokens(joinInTokens(labels))).toEqual(labels)
+    expect(joinInTokens(['Aug 17, 2026'])).toBe('"Aug 17, 2026"')
+  })
+  it('round-trips a token containing a quote', () => {
+    expect(splitInTokens(joinInTokens(['5" pipe']))).toEqual(['5" pipe'])
+    expect(splitInTokens(joinInTokens(['a"b, c']))).toEqual(['a"b, c'])
+  })
+  it('treats a quote mid-token as literal, not as an opening quote', () => {
+    expect(splitInTokens('5" pipe, plain')).toEqual(['5" pipe', 'plain'])
+  })
+  it('keeps inner spacing of a quoted token, trims an unquoted one', () => {
+    expect(splitInTokens('"  padded  ",  bare  ')).toEqual(['  padded  ', 'bare'])
+  })
+  it('trailingInToken understands quoted fragments', () => {
+    expect(trailingInToken('AAPL, "Aug 17, 20')).toBe('Aug 17, 20')
+    expect(trailingInToken('AAPL, "Aug 17, 2026"')).toBe('Aug 17, 2026')
+    expect(trailingInToken('"Aug 17, 2026", ')).toBe('')
   })
 })

package/src/filtering/excel-filters.ts

@@ -57,29 +57,106 @@ export function normalizeForFilter(
 
 /**
  * Delimiter used to serialise the `in` / `notIn` value list into the single
- * `value` string that the filter model carries. A newline is used because it
- * (unlike a comma) practically never appears inside a typed token, so tokens
- * survive the round-trip unescaped. The chip input in the filter row reads and
- * writes with the same separator via {@link splitInTokens} / {@link joinInTokens}.
+ * `value` string that the filter model carries.
+ *
+ * This has to be single-line safe: the tool panel and the filter menu show the
+ * serialised list in a plain `<input type="text">`, and the HTML input value
+ * sanitiser STRIPS newlines - so a newline-joined list came back out of the DOM
+ * as one run-together token. `splitInTokens` accepts newlines too, so values
+ * serialised by older builds still parse.
  */
-export const IN_TOKEN_SEP = '\n'
+export const IN_TOKEN_SEP = ', '
 
 /**
- * Split a serialised `in` / `notIn` value into its individual tokens. Accepts
- * both the newline separator the chip input writes and a plain comma-separated
- * string (what a raw text field, e.g. the tool-panel filter, produces), so the
- * same value round-trips through either UI.
+ * Split a serialised `in` / `notIn` value into its individual tokens.
+ *
+ * The grammar is CSV-shaped: comma OR newline separates, and a token may be
+ * double-quoted to carry a separator literally (`""` escapes a quote inside
+ * one). Quoting is what makes a comma separator safe - facet values commonly
+ * contain commas of their own, because numeric bucket labels are built with
+ * `toLocaleString` ("1,234 - 5,678") and date labels with a short month
+ * ("Aug 17, 2026"). A quote only opens a token when it is the token's first
+ * non-space character, so an unquoted `5" pipe` stays literal.
  */
 export function splitInTokens(value: unknown): string[] {
-  return String(value ?? '')
-    .split(/[\n,]/)
+  const { tokens, trailing } = scanInTokens(value)
+  if (trailing) tokens.push(trailing)
+  return tokens
+}
+
+/**
+ * Serialise a list of tokens back into the single `in` / `notIn` value,
+ * quoting any token that carries a separator or a quote of its own.
+ */
+export function joinInTokens(tokens: ReadonlyArray<string>): string {
+  return tokens
     .map((t) => t.trim())
     .filter((t) => t.length > 0)
+    .map((t) => (/["\n,]/.test(t) ? `"${t.replace(/"/g, '""')}"` : t))
+    .join(IN_TOKEN_SEP)
 }
 
-/** Serialise a list of tokens back into the single `in` / `notIn` value. */
-export function joinInTokens(tokens: ReadonlyArray<string>): string {
-  return tokens.map((t) => t.trim()).filter((t) => t.length > 0).join(IN_TOKEN_SEP)
+/**
+ * The token still being typed at the end of an `in` / `notIn` value - the text
+ * after the last separator. `'AAPL, MS'` -> `'MS'`; a value ending in a
+ * separator (or empty) has no trailing token.
+ *
+ * Inputs that hold the whole token list use this to drive the value-suggestion
+ * dropdown: the trailing fragment is the search query, not a committed token.
+ */
+export function trailingInToken(value: unknown): string {
+  return scanInTokens(value).trailing
+}
+
+/**
+ * One pass over a serialised `in` / `notIn` value, splitting it into the
+ * tokens that are terminated by a separator and the unterminated fragment at
+ * the end. Every token helper above is a view onto this, so they can never
+ * disagree about where a quoted token starts or ends.
+ */
+function scanInTokens(value: unknown): { tokens: string[]; trailing: string } {
+  const raw = String(value ?? '')
+  const tokens: string[] = []
+  let buf = ''
+  let quoted = false
+  let wasQuoted = false
+  let closed = false
+
+  // A quoted token keeps its inner spacing; an unquoted one is trimmed.
+  const take = () => {
+    const t = wasQuoted ? buf : buf.trim()
+    buf = ''
+    wasQuoted = false
+    closed = false
+    return t
+  }
+
+  for (let i = 0; i < raw.length; i += 1) {
+    const ch = raw[i]
+    if (quoted) {
+      if (ch !== '"') { buf += ch; continue }
+      // A doubled quote is an escaped literal quote, not the closing one.
+      if (raw[i + 1] === '"') { buf += '"'; i += 1; continue }
+      quoted = false
+      closed = true
+      continue
+    }
+    if (ch === ',' || ch === '\n') {
+      const t = take()
+      if (t.length) tokens.push(t)
+      continue
+    }
+    // Only opens a quoted token at the token's start - `5" pipe` is literal.
+    if (ch === '"' && !closed && !buf.trim()) {
+      quoted = true
+      wasQuoted = true
+      buf = ''
+      continue
+    }
+    buf += ch
+  }
+
+  return { tokens, trailing: take() }
 }
 
 export function applyExcelFilter(

package/src/index.ts

@@ -254,6 +254,7 @@ export { default as SvField } from './SvField.svelte'
 export {
   createListbox,
   toSelectedArray,
+  toSelectedSet,
   type Listbox,
   type ListboxConfig,
   type ListboxValue,
@@ -692,6 +693,7 @@ export {
   normalizeForFilter,
   splitInTokens,
   joinInTokens,
+  trailingInToken,
   type ExcelFilter,
   type ExcelFilterOperator,
   type ExcelFilterOptions,

package/src/menus.test.ts

@@ -98,23 +98,24 @@ describe('createMenus - filter row/menu value updates', () => {
     expect(ctx.filterRowValues.name).toBe('foo')
   })
 
-  it('addFilterToken builds a newline-serialised in/notIn list, ignoring dupes/blanks', () => {
+  it('addFilterToken builds a comma-serialised in/notIn list, ignoring dupes/blanks', () => {
     const ctx = makeCtx()
     const m = createMenus(ctx)
     m.addFilterToken('symbol', 'TSM')
     m.addFilterToken('symbol', 'BP')
     m.addFilterToken('symbol', 'TSM') // dupe - ignored
     m.addFilterToken('symbol', '   ') // blank - ignored
-    expect(ctx.filterRowValues.symbol).toBe('TSM\nBP')
+    expect(ctx.filterRowValues.symbol).toBe('TSM, BP')
     // mirrored into the menu model too, so both filter surfaces agree
-    expect(ctx.filterMenuValues.symbol.value).toBe('TSM\nBP')
+    expect(ctx.filterMenuValues.symbol.value).toBe('TSM, BP')
   })
 
   it('removeFilterToken drops a value from the list', () => {
+    // Newline-separated input still parses (values serialised by older builds).
     const ctx = makeCtx({ filterRowValues: { symbol: 'TSM\nBP\nBABA' } })
     const m = createMenus(ctx)
     m.removeFilterToken('symbol', 'BP')
-    expect(ctx.filterRowValues.symbol).toBe('TSM\nBABA')
+    expect(ctx.filterRowValues.symbol).toBe('TSM, BABA')
   })
 
   it('toggleFilterToken adds when absent and removes when present', () => {
@@ -126,6 +127,15 @@ describe('createMenus - filter row/menu value updates', () => {
     expect(ctx.filterRowValues.symbol).toBe('')
   })
 
+  it('setFilterTokens replaces the whole list, dropping blanks', () => {
+    const ctx = makeCtx()
+    const m = createMenus(ctx)
+    m.setFilterTokens('symbol', ['BP', '  ', ' TSM '])
+    expect(ctx.filterRowValues.symbol).toBe('BP, TSM')
+    m.setFilterTokens('symbol', new Set<string>())
+    expect(ctx.filterRowValues.symbol).toBe('')
+  })
+
   it('openInSuggest anchors the dropdown and targets the column; closeInSuggest clears it', () => {
     const ctx = makeCtx()
     const m = createMenus(ctx)
@@ -367,6 +377,32 @@ describe('createMenus - facet checkboxes', () => {
     expect(ctx.valueFilters.team).toBeUndefined()
   })
 
+  it('setFacetSelection stores a subset as-is', () => {
+    const ctx = makeCtx({ columnMenuFacetValues: ['A', 'B', 'C'] })
+    const m = createMenus(ctx)
+    m.setFacetSelection('team', new Set(['B', 'C']))
+    expect([...ctx.valueFilters.team].sort()).toEqual(['B', 'C'])
+  })
+
+  it('setFacetSelection with everything selected drops the entry', () => {
+    const ctx = makeCtx({
+      columnMenuFacetValues: ['A', 'B'],
+      valueFilters: { team: new Set(['A']) },
+    })
+    const m = createMenus(ctx)
+    m.setFacetSelection('team', new Set(['A', 'B']))
+    expect(ctx.valueFilters.team).toBeUndefined()
+  })
+
+  it('setFacetSelection copies the set it is handed', () => {
+    const ctx = makeCtx({ columnMenuFacetValues: ['A', 'B', 'C'] })
+    const m = createMenus(ctx)
+    const incoming = new Set(['A'])
+    m.setFacetSelection('team', incoming)
+    incoming.add('B')
+    expect([...ctx.valueFilters.team]).toEqual(['A'])
+  })
+
   it('isAllFacetsChecked true with no filter, false with a subset', () => {
     const ctx = makeCtx({
       columnMenuFacetValues: ['A', 'B'],

package/src/menus.ts

@@ -209,6 +209,16 @@ export function createMenus<
     else addFilterToken(columnId, token);
   }
 
+  /**
+   * Replace a column's `in` / `notIn` list wholesale. The suggestions dropdown
+   * hands back the full token set after a click, which keeps tokens the user
+   * typed by hand (or that the search box is currently hiding) intact.
+   */
+  function setFilterTokens(columnId: string, tokens: Iterable<string>) {
+    const list = [...tokens].map((t) => t.trim()).filter(Boolean);
+    updateFilterRow(columnId, joinInTokens(list));
+  }
+
   function toggleCheckboxWithKeyboard(
     event: KeyboardEvent,
     toggle: () => void,
@@ -381,6 +391,21 @@ export function createMenus<
     }
   }
 
+  /**
+   * Replace a column's checked-facet set. "Everything checked" is stored as an
+   * ABSENT entry (so an unfiltered high-cardinality column never holds a set of
+   * every value), which is why the full-size case deletes instead of writing.
+   */
+  function setFacetSelection(columnId: string, next: ReadonlySet<string>) {
+    if (next.size >= ctx.columnMenuFacetValues.length) {
+      const copy = { ...ctx.valueFilters };
+      delete copy[columnId];
+      ctx.valueFilters = copy;
+      return;
+    }
+    ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set(next) };
+  }
+
   function isAllFacetsChecked(columnId: string) {
     const selected = ctx.valueFilters[columnId];
     return !selected || selected.size >= ctx.columnMenuFacetValues.length;
@@ -636,6 +661,8 @@ export function createMenus<
     clearGroupingFromMenu,
     isFacetChecked,
     toggleFacetValue,
+    setFacetSelection,
+    setFilterTokens,
     isAllFacetsChecked,
     toggleAllFacets,
     clearColumnFilter,

package/src/row-resize.test.ts

@@ -392,3 +392,103 @@ describe('rowResize - update + destroy', () => {
     action.destroy()
   })
 })
+
+// ---------------------------------------------------------------------------
+// Keyboard resize (#79)
+// ---------------------------------------------------------------------------
+
+describe('rowResize - keyboard', () => {
+  function key(k: string, init: Partial<KeyboardEvent> = {}): KeyboardEvent {
+    return new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true, ...init })
+  }
+
+  it('makes the strip focusable', () => {
+    const { host, rows } = buildGrid([{}])
+    track(host)
+    const action = rowResize(host, { onResize: vi.fn() })
+    expect(stripOf(rows[0]!)!.tabIndex).toBe(0)
+    action.destroy()
+  })
+
+  it('ArrowDown grows the row by 10px and reports the new height', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
+    expect(rows[0]!.style.height).toBe('42px')
+    expect(onResize).toHaveBeenCalledWith(0, 42)
+    action.destroy()
+  })
+
+  it('ArrowUp shrinks the row and Shift gives a 1px step', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 60)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0]!)!
+    strip.dispatchEvent(key('ArrowUp'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 50)
+    strip.dispatchEvent(key('ArrowUp', { shiftKey: true }))
+    expect(onResize).toHaveBeenLastCalledWith(0, 59)
+    action.destroy()
+  })
+
+  it('clamps to the configured min and max', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 42)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, min: 40, max: 44 })
+    const strip = stripOf(rows[0]!)!
+    strip.dispatchEvent(key('ArrowUp'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 40)
+    strip.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenLastCalledWith(0, 44)
+    action.destroy()
+  })
+
+  it('ignores keys other than the arrows and consumes the ones it handles', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize })
+    const strip = stripOf(rows[0]!)!
+    const other = key('Enter')
+    strip.dispatchEvent(other)
+    expect(onResize).not.toHaveBeenCalled()
+    expect(other.defaultPrevented).toBe(false)
+    const handled = key('ArrowDown')
+    strip.dispatchEvent(handled)
+    expect(handled.defaultPrevented).toBe(true)
+    action.destroy()
+  })
+
+  it('does nothing while disabled, and stops after destroy', () => {
+    const { host, rows } = buildGrid([{ rowIndex: 0 }])
+    track(host)
+    mockRowHeight(rows[0]!, 32)
+    const onResize = vi.fn()
+    const action = rowResize(host, { onResize, disabled: true })
+    // Disabled removes the strips entirely, so drive a hand-made one.
+    const strip = document.createElement('div')
+    strip.className = STRIP_CLASS
+    gutterOf(rows[0]!).appendChild(strip)
+    strip.dispatchEvent(key('ArrowDown'))
+    expect(onResize).not.toHaveBeenCalled()
+
+    action.update({ onResize })
+    stripOf(rows[0]!)!.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenCalledTimes(1)
+
+    action.destroy()
+    const orphan = document.createElement('div')
+    orphan.className = STRIP_CLASS
+    gutterOf(rows[0]!).appendChild(orphan)
+    orphan.dispatchEvent(key('ArrowDown'))
+    expect(onResize).toHaveBeenCalledTimes(1)
+  })
+})