@svgrid/grid 3.0.5 → 3.0.7

package/src/editing.test.ts

@@ -14,6 +14,8 @@ interface ColSpec {
   editable?: boolean | ((cellCtx: any) => boolean)
   editorType?: string
   editorMultiple?: boolean
+  validate?: (p: { value: unknown; row: any }) => string | boolean | null | undefined
+  rejectInvalid?: boolean
 }
 
 interface FakeOptions {
@@ -40,6 +42,8 @@ function makeCtx(opts: FakeOptions = {}) {
       editable: c.editable,
       editorType: c.editorType,
       editorMultiple: c.editorMultiple,
+      validate: c.validate,
+      rejectInvalid: c.rejectInvalid,
     },
   }))
 
@@ -381,6 +385,54 @@ describe('saveEditingCell', () => {
     expect(ctx.internalData[0].a).toEqual(['x', 'y'])
   })
 
+  it('refuses a value the column validates against when rejectInvalid is set', () => {
+    const onCellValueChange = vi.fn()
+    const { ctx, ed } = editingFor({
+      columns: [{
+        id: 'b', field: 'b', editorType: 'number', rejectInvalid: true,
+        validate: ({ value }) => (Number(value) < 0 ? 'Amount must be positive' : null),
+      }],
+      data: [{ b: 5 }],
+    })
+    ctx.props.onCellValueChange = onCellValueChange
+    ctx.editingCell = { rowId: '0', columnId: 'b', editorType: 'number', value: '-5' }
+    ed.saveEditingCell()
+    // The row, the overlay, the history and the consumer are untouched; the
+    // editor closes.
+    expect(ctx.internalData[0].b).toBe(5)
+    expect('0:b' in ctx.editedCellValues).toBe(false)
+    expect(ctx.history).toHaveLength(0)
+    expect(onCellValueChange).not.toHaveBeenCalled()
+    expect(ctx.editingCell).toBeNull()
+
+    // A value the rule accepts still lands.
+    ctx.editingCell = { rowId: '0', columnId: 'b', editorType: 'number', value: '7' }
+    ed.saveEditingCell()
+    expect(ctx.internalData[0].b).toBe(7)
+    expect(onCellValueChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('without rejectInvalid a flagged value lands, as before', () => {
+    const { ctx, ed } = editingFor({
+      columns: [{ id: 'b', field: 'b', editorType: 'number', validate: () => 'always wrong' }],
+      data: [{ b: 5 }],
+    })
+    ctx.editingCell = { rowId: '0', columnId: 'b', editorType: 'number', value: '-5' }
+    ed.saveEditingCell()
+    expect(ctx.internalData[0].b).toBe(-5)
+  })
+
+  it('checks the value after valueParser, so the rule sees what would be stored', () => {
+    const { ctx, ed } = editingFor({
+      columns: [{ id: 'b', field: 'b', editorType: 'number', rejectInvalid: true, validate: ({ value }) => (Number(value) > 100 ? false : null) }],
+      data: [{ b: 5 }],
+    })
+    ;(ctx.allColumns[0].columnDef as any).valueParser = ({ newValue }: { newValue: number }) => newValue * 100
+    ctx.editingCell = { rowId: '0', columnId: 'b', editorType: 'number', value: '2' }
+    ed.saveEditingCell()
+    expect(ctx.internalData[0].b).toBe(5) // 200 after the parser, refused
+  })
+
   it('pushes a history step and bumps the version on a real change', () => {
     const { ctx, ed } = editingFor({
       columns: [{ id: 'a', field: 'a', editorType: 'text' }],

package/src/editing.ts

@@ -158,6 +158,24 @@ export function createEditing<
     runHistoryGroup(ctx, () => commitEditingCell());
   }
 
+  /**
+   * True when a column with `rejectInvalid` refuses `value`: its `validate`
+   * hook returns `false` or a message. Without the flag nothing is refused.
+   */
+  function editRejected(column: any, value: unknown, rowData: unknown): boolean {
+    const def = column?.columnDef as
+      | { rejectInvalid?: boolean; validate?: (p: unknown) => string | boolean | null | undefined }
+      | undefined;
+    if (!def?.rejectInvalid || typeof def.validate !== "function") return false;
+    const verdict = def.validate({
+      value,
+      row: rowData,
+      rowIndex: ctx.internalData.indexOf(rowData as TData),
+      column,
+    });
+    return verdict === false || (typeof verdict === "string" && verdict.length > 0);
+  }
+
   function commitEditingCell() {
     if (!ctx.editingCell) return;
     const editing = ctx.editingCell;
@@ -200,6 +218,12 @@ export function createEditing<
           columnId: ctx.editingCell.columnId,
         });
       }
+      // A refused edit closes the editor and leaves the row, the overlay,
+      // the history and the consumer untouched.
+      if (editRejected(column, finalValue, rowData)) {
+        ctx.editingCell = null;
+        return;
+      }
       rowData[column.columnDef.field] = finalValue;
     }
     const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
@@ -778,6 +802,7 @@ export function createEditing<
             columnId: column.id,
           })
         : parsed;
+      if (editRejected(column, finalValue, row.original)) continue;
       if (oldValue !== finalValue) {
         (row.original as Record<string, unknown>)[field] = finalValue;
         const key = getCellKey(fr.rowId, column.id);

package/src/export-dates.test.ts

@@ -0,0 +1,114 @@
+/**
+ * Dates must come out of an export as the day the grid showed, in every
+ * timezone (#103). Text exports used `toISOString()`, which is UTC, so local
+ * midnight on the 15th came out as the 14th east of UTC. A bare 'YYYY-MM-DD'
+ * was parsed as UTC midnight, so west of UTC it formatted as the day before.
+ *
+ * These pin `process.env.TZ` per case: a suite run on a UTC machine (CI) would
+ * pass the old code without it.
+ */
+import { describe, expect, it } from 'vitest'
+import { parseDateValue } from './cell-formatting'
+import { asDate } from './SvGrid.helpers'
+import {
+  coerceExportDate,
+  formatValueForExport,
+  serializeDelimited,
+  serializeHtml,
+  serializeMarkdown,
+  toLocalIsoString,
+} from './export-format'
+
+async function inZone<T>(tz: string, fn: () => T | Promise<T>): Promise<T> {
+  const prev = process.env.TZ
+  process.env.TZ = tz
+  try {
+    return await fn()
+  } finally {
+    // Assigning undefined would set the string "undefined".
+    if (prev === undefined) delete process.env.TZ
+    else process.env.TZ = prev
+  }
+}
+
+const EAST = 'Europe/Sofia' // UTC+2 in January
+const FAR_EAST = 'Pacific/Auckland' // UTC+13 in January
+const WEST = 'America/New_York' // UTC-5 in January
+
+describe('parseDateValue', () => {
+  it('reads a bare calendar date as local midnight of that day', async () => {
+    for (const tz of [EAST, FAR_EAST, WEST, 'UTC']) {
+      await inZone(tz, () => {
+        const d = parseDateValue('2026-06-27')!
+        expect([d.getFullYear(), d.getMonth(), d.getDate(), d.getHours()], tz).toEqual([2026, 5, 27, 0])
+        // The grid's display path uses the same parser.
+        expect(asDate('2026-06-27')!.getTime(), tz).toBe(d.getTime())
+      })
+    }
+  })
+
+  it('rejects an impossible calendar date instead of rolling it over', () => {
+    expect(parseDateValue('2026-02-30')).toBeNull()
+    expect(parseDateValue('2026-13-01')).toBeNull()
+  })
+
+  it('leaves full timestamps, Dates and epoch numbers alone', () => {
+    expect(parseDateValue('2024-01-15T10:00:00Z')!.toISOString()).toBe('2024-01-15T10:00:00.000Z')
+    const d = new Date(2024, 0, 15)
+    expect(parseDateValue(d)).toBe(d)
+    expect(parseDateValue(0)!.getTime()).toBe(0)
+    expect(parseDateValue(null)).toBeNull()
+    expect(parseDateValue('')).toBeNull()
+    expect(parseDateValue('nope')).toBeNull()
+    expect(parseDateValue(true)).toBeNull()
+  })
+
+  it('coerceExportDate follows it', async () => {
+    await inZone(WEST, () => {
+      expect(coerceExportDate('2024-01-15')!.getDate()).toBe(15)
+    })
+  })
+})
+
+describe('formatted date export west of UTC', () => {
+  it('shows the calendar day of a date-only string', async () => {
+    await inZone(WEST, () => {
+      expect(formatValueForExport('2024-01-15', { type: 'date', locales: 'en-US' })).toBe('01/15/2024')
+    })
+  })
+})
+
+describe('toLocalIsoString', () => {
+  it('writes the local wall clock with its offset', async () => {
+    await inZone(EAST, () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15))).toBe('2024-01-15T00:00:00.000+02:00')
+    })
+    await inZone(WEST, () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15, 9, 5, 7, 42))).toBe('2024-01-15T09:05:07.042-05:00')
+    })
+    await inZone('Asia/Kolkata', () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15))).toBe('2024-01-15T00:00:00.000+05:30')
+    })
+  })
+
+  it('is the same instant as the Date', async () => {
+    await inZone(FAR_EAST, () => {
+      const d = new Date(2024, 0, 15, 3, 4, 5)
+      expect(new Date(toLocalIsoString(d)).getTime()).toBe(d.getTime())
+    })
+  })
+})
+
+describe('text exports keep the local day (#103)', () => {
+  it('CSV, HTML and Markdown write 2024-01-15 east of UTC', async () => {
+    for (const tz of [EAST, FAR_EAST]) {
+      await inZone(tz, async () => {
+        // Build the Date inside the zone: local midnight there.
+        const local = [{ when: 'When' }, { when: new Date(2024, 0, 15) }]
+        expect(await serializeDelimited(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+        expect(await serializeHtml(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+        expect(await serializeMarkdown(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+      })
+    }
+  })
+})

package/src/export-format.ts

@@ -20,6 +20,7 @@ import type { CellFormatConfig } from './core'
 import {
   formatNumericWithConfig,
   getDateFormatter,
+  parseDateValue,
   resolveDatePattern,
 } from './cell-formatting'
 
@@ -39,16 +40,27 @@ export {
 /** Best-effort coercion of a cell value to a Date. Accepts Date, epoch ms
  *  numbers, and parseable date strings. Returns null when it isn't a date. */
 export function coerceExportDate(value: unknown): Date | null {
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    const d = new Date(value)
-    return Number.isNaN(d.getTime()) ? null : d
-  }
-  if (typeof value === 'string' && value.trim() !== '') {
-    const d = new Date(value)
-    return Number.isNaN(d.getTime()) ? null : d
-  }
-  return null
+  return parseDateValue(value)
+}
+
+/**
+ * A Date as ISO 8601 in LOCAL time with its offset, e.g.
+ * `2024-01-15T00:00:00.000+02:00`. Text exports used `toISOString()`, which
+ * is UTC: local midnight on the 15th came out as `2024-01-14T22:00:00.000Z`
+ * east of UTC, and anything reading the date part got the wrong day (#103).
+ * Same instant, but the date part is the one the grid showed.
+ */
+export function toLocalIsoString(d: Date): string {
+  const pad = (n: number, w = 2) => String(Math.abs(n)).padStart(w, '0')
+  const offset = -d.getTimezoneOffset()
+  const sign = offset < 0 ? '-' : '+'
+  const year = d.getFullYear()
+  return (
+    (year < 0 ? '-' + pad(year, 6) : pad(year, 4)) +
+    `-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+    `T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}` +
+    `${sign}${pad(Math.floor(Math.abs(offset) / 60))}:${pad(Math.abs(offset) % 60)}`
+  )
 }
 
 /**
@@ -325,7 +337,7 @@ function csvCell(value: unknown, delimiter: string): string {
     value == null
       ? ''
       : value instanceof Date
-        ? value.toISOString()
+        ? toLocalIsoString(value)
         : String(value)
   if (s === '') return s
   if (s.includes(delimiter) || s.includes('"') || s.includes('\n') || s.includes('\r')) {
@@ -373,7 +385,7 @@ const HTML_ESCAPE: Record<string, string> = {
 }
 function htmlCell(value: unknown): string {
   const s =
-    value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+    value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   return s.replace(/[&<>"']/g, (c) => HTML_ESCAPE[c]!)
 }
 
@@ -472,7 +484,7 @@ export async function serializeJson(
 
 /** Escape a Markdown table cell: pipes and newlines would break the row. */
 function mdCell(value: unknown): string {
-  const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+  const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   return s.replace(/\\/g, '\\\\').replace(/\|/g, '\\|').replace(/\r?\n/g, '<br>')
 }
 
@@ -520,7 +532,7 @@ const XML_ESCAPE: Record<string, string> = {
   "'": '&apos;',
 }
 function xmlText(value: unknown): string {
-  const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+  const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   // Stripping control characters is the point: XML 1.0 forbids them outright,
   // so a stray \x00 from a data source would produce an unopenable file.
   // eslint-disable-next-line no-control-regex

package/src/grid-messages.test.ts

@@ -8,6 +8,13 @@ describe('resolveGridMessages', () => {
     expect(resolveGridMessages({})).toEqual(defaultGridMessages)
   })
 
+  it('names the client group expander, so a localized grid has no English left in it', () => {
+    const m = resolveGridMessages({ expandGroup: 'Gruppe aufklappen', rowsSuffix: 'Zeilen' })
+    expect(m.expandGroup).toBe('Gruppe aufklappen')
+    expect(m.collapseGroup).toBe('Collapse group')
+    expect(m.rowsSuffix).toBe('Zeilen')
+  })
+
   it('replaces only the provided keys, keeping English for the rest', () => {
     const m = resolveGridMessages({ noRows: 'Aucune ligne', pageSize: 'Taille :' })
     expect(m.noRows).toBe('Aucune ligne')

package/src/grid-messages.ts

@@ -109,6 +109,12 @@ export type GridChromeMessages = {
   // Rows whose data has not arrived (server-side / infinite loading)
   rowLoadFailed: string
   rowLoadRetry: string
+  // The expander on a client-side group row
+  expandGroup: string
+  collapseGroup: string
+  // The chevron of the detail-toggle column (`showDetailToggle`)
+  openDetail: string
+  closeDetail: string
   // Upsell notes (enterprise views not installed)
   pivotUpsellTitle: string
   pivotUpsellBody: string
@@ -194,6 +200,10 @@ export const defaultGridMessages: GridChromeMessages = {
   chartRange: 'Chart selected range',
   rowLoadFailed: 'Could not load these rows.',
   rowLoadRetry: 'Retry',
+  expandGroup: 'Expand group',
+  collapseGroup: 'Collapse group',
+  openDetail: 'Open details',
+  closeDetail: 'Close details',
   pivotUpsellTitle: 'Pivot mode',
   pivotUpsellBody: 'Pivot mode is an Enterprise feature. Install @svgrid/enterprise and call enablePivot() to use it.',
   ganttUpsellTitle: 'Gantt view',

package/src/headless.ts

@@ -85,3 +85,27 @@ export {
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte'
 export { createGridState, createSvGridState } from './createGridState.svelte'
 export { subscribeGrid, subscribeSvGrid } from './subscribe'
+
+// The virtualizers are pure window arithmetic (scroll offset in, visible
+// range out) with no DOM of their own, and a custom renderer over 50k rows
+// needs one. They were only on the barrel, so the Headless demos imported
+// the barrel to reach them and paid for the whole thing.
+export { createVirtualizer } from './virtualization/virtualizer'
+export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte'
+export { createColumnVirtualizer } from './virtualization/column-virtualizer'
+export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types'
+
+// The WAI-ARIA attribute factories: plain objects to spread onto your own
+// markup (`role`, `aria-sort`, `aria-rowindex`, ...). No DOM is touched here
+// either; a custom renderer that wants keyboard navigation reads
+// `activeCell` from the store and spreads these.
+export {
+  getGridCellDomId,
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+  type GridCellA11yInput,
+  type GridColumnA11yInput,
+  type GridSortDirection,
+} from './a11y'

package/src/history.test.ts

@@ -5,6 +5,8 @@ import {
   pushHistory,
   runHistoryGroup,
   nextGroupId,
+  peekUndoHistory,
+  peekRedoHistory,
   type HistoryStep,
 } from './history'
 
@@ -162,7 +164,7 @@ describe('runHistoryGroup', () => {
     // This is why the group id is ambient rather than stamped afterwards: the
     // cap drops entries from the front, so any index captured before the call
     // would point at the wrong steps by the end of it.
-    const { ctx } = makeCtx([step(0)], 3)
+    const { ctx } = makeCtx([step(0)], 1)
     runHistoryGroup(ctx, () => {
       pushHistory(ctx, [step(1)])
       pushHistory(ctx, [step(2)])
@@ -172,6 +174,21 @@ describe('runHistoryGroup', () => {
     expect(new Set(ctx.history.map((s) => s.groupId)).size).toBe(1)
   })
 
+  it('caps by actions, so a group larger than the buffer stays whole', () => {
+    // A sort of 5,000 rows is one Ctrl+Z of 20,000 steps; a cap that
+    // counted steps cut it to its tail and undid a fifth of it.
+    const { ctx } = makeCtx([step(0)], 2)
+    runHistoryGroup(ctx, () => { for (let i = 1; i <= 5; i += 1) pushHistory(ctx, [step(i)]) })
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r0', 'r1', 'r2', 'r3', 'r4', 'r5'])
+    pushHistory(ctx, [step(9)])
+    // Three actions now; the oldest one goes and the group survives whole.
+    expect(ctx.history.map((s) => s.rowId)).toEqual(['r1', 'r2', 'r3', 'r4', 'r5', 'r9'])
+    expect(ctx.historyPtr).toBe(5)
+    undoHistory(ctx)
+    undoHistory(ctx)
+    expect(ctx.historyPtr).toBe(-1)
+  })
+
   it('nests into the outer group so one action is one undo', () => {
     const { ctx } = makeCtx()
     runHistoryGroup(ctx, () => {
@@ -194,3 +211,34 @@ describe('runHistoryGroup', () => {
     expect(runHistoryGroup(ctx, () => 42)).toBe(42)
   })
 })
+
+describe('tags', () => {
+  it('stamps the ambient tag on every step recorded while it is set, grouped or not', () => {
+    const { ctx } = makeCtx()
+    const sheet = { name: 'Orders' }
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = sheet
+    pushHistory(ctx, [step(2)])
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(3)]); pushHistory(ctx, [step(4)]) })
+    ;(ctx as { historyTag?: unknown }).historyTag = undefined
+    pushHistory(ctx, [step(5)])
+    expect(ctx.history.map((s) => s.tag)).toEqual([undefined, sheet, sheet, sheet, undefined])
+    expect(ctx.history[2]!.groupId).toBe(ctx.history[3]!.groupId)
+  })
+
+  it('peeks at the step the next undo or redo would take', () => {
+    const { ctx } = makeCtx()
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Summary'
+    pushHistory(ctx, [step(1)])
+    ;(ctx as { historyTag?: unknown }).historyTag = 'Orders'
+    runHistoryGroup(ctx, () => { pushHistory(ctx, [step(2)]); pushHistory(ctx, [step(3)]) })
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Orders' })
+    expect(peekRedoHistory(ctx)).toBeNull()
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toEqual({ tag: 'Summary' })
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Orders' })
+    undoHistory(ctx)
+    expect(peekUndoHistory(ctx)).toBeNull()
+    expect(peekRedoHistory(ctx)).toEqual({ tag: 'Summary' })
+  })
+})

package/src/history.ts

@@ -36,6 +36,15 @@ export type HistoryStep = {
    * functions do the work. Never serialised, since a closure cannot be.
    */
   custom?: { undo: () => void; redo: () => void }
+  /**
+   * The consumer's own mark on the step, copied from `api.setHistoryTag` at
+   * the moment it is recorded. The grid never reads it: it is there for a
+   * consumer that shows one of several data sets through the grid and has
+   * to know which one a step belongs to before it lets Ctrl+Z apply it (a
+   * workbook with several sheets, say). Kept as given, so an object tag
+   * compares by identity. Not serialised.
+   */
+  tag?: unknown
 }
 
 /** Ctx surface these helpers touch. The controller satisfies it structurally. */
@@ -48,6 +57,8 @@ type HistoryCtx = {
    *  inside it joins that group, so a command does not have to thread a group
    *  id down through the writers it calls. */
   historyGroupId: string | undefined
+  /** Stamped on every step recorded while it is set; see `HistoryStep.tag`. */
+  historyTag?: unknown
   applyHistoryStep(step: HistoryStep, direction: 'undo' | 'redo'): void
 }
 
@@ -71,6 +82,37 @@ function groupEnd(history: ReadonlyArray<HistoryStep>, start: number): number {
   return i
 }
 
+/**
+ * The last `limit` ACTIONS of a history, whole groups kept. The cap used
+ * to count steps, and a sort of 5,000 rows is 20,000 steps in one group:
+ * it cut the group to its last 200 cells, so Ctrl+Z put a fifth of a
+ * column back and left the rest sorted. An action is one press of Ctrl+Z,
+ * so that is what the buffer counts; the steps inside are the cost of it.
+ */
+function lastActions(history: HistoryStep[], limit: number): HistoryStep[] {
+  let i = history.length
+  let actions = 0
+  while (i > 0 && actions < limit) {
+    i = groupStart(history, i - 1)
+    actions += 1
+  }
+  return i === 0 ? history : history.slice(i)
+}
+
+/** What the next undo would apply: the tag of the step Ctrl+Z takes next
+ *  (a group carries one tag, so its last step's is the group's). Null when
+ *  there is nothing to undo. */
+export function peekUndoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr >= 0 ? ctx.history[ctx.historyPtr] : undefined
+  return step ? { tag: step.tag } : null
+}
+
+/** The redo counterpart of `peekUndoHistory`. */
+export function peekRedoHistory(ctx: HistoryCtx): { tag: unknown } | null {
+  const step = ctx.historyPtr < ctx.history.length - 1 ? ctx.history[ctx.historyPtr + 1] : undefined
+  return step ? { tag: step.tag } : null
+}
+
 /** Undo one action. Returns false when there is nothing left to undo. */
 export function undoHistory(ctx: HistoryCtx): boolean {
   if (ctx.historyPtr < 0) return false
@@ -123,9 +165,13 @@ export function pushHistory(
   // Outside one, a group of one is just a step. Tagging it would make undo do
   // the same work through a slower path and would show up in serialized state.
   const id = ctx.historyGroupId ?? (groupId && steps.length > 1 ? groupId : undefined)
+  const tag = ctx.historyTag
   let next = ctx.history.slice(0, ctx.historyPtr + 1)
-  for (const step of steps) next.push(id ? { ...step, groupId: id } : step)
-  if (next.length > ctx.UNDO_LIMIT) next = next.slice(next.length - ctx.UNDO_LIMIT)
+  for (const step of steps) {
+    const stamped = tag === undefined ? step : { ...step, tag }
+    next.push(id ? { ...stamped, groupId: id } : stamped)
+  }
+  next = lastActions(next, ctx.UNDO_LIMIT)
   ctx.history = next
   ctx.historyPtr = ctx.history.length - 1
   ctx.historyVersion += 1

package/src/index.ts

@@ -779,6 +779,7 @@ export {
   type ServerState,
   type ServerSortModel,
   type ServerFilterModel,
+  type ServerAggFn,
   type ServerAggregation,
   type ServerGroupRow,
   type ServerLeafRow,
@@ -788,6 +789,7 @@ export {
   type ServerGrandTotalRow,
   type ServerPlaceholderRow,
   type ServerDisplayRow,
+  type ServerDetailRow,
 } from './server-data-source'
 export {
   createBlockCache,

package/src/keyboard-handlers.coverage.test.ts

@@ -576,6 +576,17 @@ describe('onWindowKeydown', () => {
     expect(ctx.closeMenus).toHaveBeenCalled()
   })
 
+  it('Escape closes the funnel filter popover, the value suggestions and the column chooser too', () => {
+    // The filter popover focuses its condition input, so Escape from there
+    // used to go unanswered while the column menu closed as expected.
+    for (const open of [{ filterMenuFor: 'col1' }, { inSuggestFor: 'col1' }, { chooseColumnsPos: { x: 1, y: 1 } }]) {
+      const ctx = makeCtx(open)
+      const { onWindowKeydown } = createKeyboard(ctx)
+      onWindowKeydown(new KeyboardEvent('keydown', { key: 'Escape' }))
+      expect(ctx.closeMenus).toHaveBeenCalled()
+    }
+  })
+
   it('does nothing when no menu is open', () => {
     const ctx = makeCtx()
     const { onWindowKeydown } = createKeyboard(ctx)
@@ -678,3 +689,57 @@ describe('onHeaderSortClick', () => {
     expect(ctx._state.sorting).toEqual([{ id: 'name', desc: false }])
   })
 })
+
+describe('onGridKeyDown / Ctrl+Enter on a server-side tree', () => {
+  const tree = () => {
+    const toggle = vi.fn()
+    const toggleDetail = vi.fn()
+    const rows = [
+      { original: { id: 'g', kind: 'group' } },
+      { original: { id: 'a', kind: 'leaf' } },
+    ]
+    const serverGroup = {
+      isGroup: (r: { kind: string }) => r.kind === 'group',
+      level: () => 0,
+      onToggle: toggle,
+      toggleDetail,
+    }
+    return { toggle, toggleDetail, rows, serverGroup }
+  }
+
+  it('opens or closes the group under the active cell', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggle).toHaveBeenCalledWith(t.rows[0]!.original)
+    expect(t.toggleDetail).not.toHaveBeenCalled()
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+  })
+
+  it('opens or closes the detail panel under a leaf, when the grid draws one', () => {
+    const t = tree()
+    const ctx = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup, renderDetailRow: () => {} }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledWith(t.rows[1]!.original)
+    expect(t.toggle).not.toHaveBeenCalled()
+    // Without a renderer there is no panel to open: Enter falls through to editing.
+    const plain = makeCtx({ allRows: t.rows, props: { rowHeight: 30, serverGroup: t.serverGroup }, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(plain).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(t.toggleDetail).toHaveBeenCalledTimes(1)
+    expect(plain.onCellDoubleClick).toHaveBeenCalled()
+  })
+
+  it('on a client master-detail calls onDetailToggle with the row, never on the detail row itself', () => {
+    const onDetailToggle = vi.fn()
+    const rows = [{ original: { id: 'a', kind: 'data' } }, { original: { id: 'a-detail', kind: 'detail' } }]
+    const props = { rowHeight: 30, renderDetailRow: () => {}, onDetailToggle, isDetailRow: (r: { kind: string }) => r.kind === 'detail' }
+    const ctx = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 0, colIndex: 0, cellId: null } } })
+    createKeyboard(ctx).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledWith(rows[0]!.original, 0)
+    expect(ctx.onCellDoubleClick).not.toHaveBeenCalled()
+    const onDetail = makeCtx({ allRows: rows, props, state: { activeCell: { rowIndex: 1, colIndex: 0, cellId: null } } })
+    createKeyboard(onDetail).onGridKeyDown(rootKeyEvent({ key: 'Enter', ctrlKey: true }))
+    expect(onDetailToggle).toHaveBeenCalledTimes(1)
+    expect(onDetail.onCellDoubleClick).toHaveBeenCalled()
+  })
+})

package/src/keyboard-handlers.ts

@@ -193,6 +193,28 @@ export function createKeyboard<
         row.toggleExpanded?.();
         return;
       }
+      // The same key on a server-side tree: a group opens or closes, a leaf
+      // opens or closes its detail panel when the grid draws one.
+      const sg = ctx.props.serverGroup;
+      if (event.ctrlKey && sg && row) {
+        const data = row.original;
+        if (sg.isGroup(data)) {
+          sg.onToggle(data);
+          return;
+        }
+        if (sg.toggleDetail && ctx.props.renderDetailRow && (sg.hasDetail?.(data) ?? true)) {
+          sg.toggleDetail(data);
+          return;
+        }
+      }
+      // ...and on a client-side master-detail: the app's own toggle.
+      if (event.ctrlKey && row && ctx.props.onDetailToggle && ctx.props.renderDetailRow) {
+        const data = row.original;
+        if (!ctx.props.isDetailRow?.(data, current.rowIndex) && (ctx.props.hasDetail?.(data) ?? true)) {
+          ctx.props.onDetailToggle(data, current.rowIndex);
+          return;
+        }
+      }
       if (column?.columnDef.editorType === "checkbox") {
         ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
         return;
@@ -287,7 +309,10 @@ export function createKeyboard<
   }
 
   function onWindowKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape" && (ctx.columnMenuFor || ctx.operatorMenuFor)) {
+    if (
+      event.key === "Escape" &&
+      (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.filterMenuFor || ctx.inSuggestFor || ctx.chooseColumnsPos)
+    ) {
       ctx.closeMenus();
     }
   }