@svgrid/grid 3.0.5 → 3.0.7

package/src/svgrid.charting.test.ts

@@ -754,7 +754,15 @@ describe('SvGrid built-in charting', () => {
   })
 
 
-  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: 20_000 }, async () => {
+  // The builder mounts a live SvGridChart per type, thirty of them, in one
+  // synchronous flush. Alone that is well under a second; under `--coverage`
+  // (instrumented chart code, every file of the suite in parallel workers)
+  // it took 22 s on a loaded machine and the four tests that open the
+  // builder timed out at 20 s, the last of them then reading a builder a
+  // timed-out neighbour left behind. The budget is for instrumentation,
+  // not for the product: `pnpm test` runs with coverage and is the gate.
+  const BUILDER_TIMEOUT = 90_000
+  it('the builder opens from the panel with a live thumbnail per type, and a card switches the chart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -805,7 +813,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: 20_000 }, async () => {
+  it('the Format tab writes series labels, crosshair pills, a compact rule, a stack group and a style through configureChart', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -848,7 +856,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: 20_000 }, async () => {
+  it('the builder Data tab renders the panel pickers and both write the same tab', { timeout: BUILDER_TIMEOUT }, async () => {
     const { api, target, destroy } = await mountGrid({ charting: { defaultOpen: true } })
     try {
       await tick()
@@ -883,7 +891,7 @@ describe('SvGrid built-in charting', () => {
     }
   })
 
-  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: 20_000 }, async () => {
+  it('localization.text relabels the panel and the builder; unset keys stay English', { timeout: BUILDER_TIMEOUT }, async () => {
     const { target, destroy } = await mountGrid({
       charting: { defaultOpen: true },
       localization: { text: { chartPanelTitle: 'Diagramm', chartGroupBy: 'Gruppieren nach', chartTypeBar: 'Balken', chartAdd: 'Diagramm hinzufügen', chartBuilderTitle: 'Diagramm-Editor', chartBuilderTabData: 'Daten', noRows: 'Keine Zeilen' } },

package/src/svgrid.context-menu.test.ts

@@ -137,6 +137,18 @@ describe('SvGrid context menu', () => {
     destroy()
   })
 
+  it('closes on Escape, so a keyboard user is not trapped under it', async () => {
+    const { target, destroy } = await mountGrid(true)
+    await tick()
+    await openContextMenu(target)
+    expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await vi.waitFor(() => {
+      expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
+    })
+    destroy()
+  })
+
   it('does not open when contextMenu is omitted (native menu shows)', async () => {
     const { target, destroy } = await mountGrid(undefined)
     await tick()

package/src/svgrid.data-push.svelte.test.ts

@@ -0,0 +1,94 @@
+/**
+ * Pushing onto a `$state` array passed as `data`.
+ *
+ * docs/getting-started/3-data-and-columns.md teaches exactly this: declare
+ * `let rows = $state([...])`, hand it to `data`, and an "Add row" button that
+ * does nothing but `rows.push(...)`. The grid is supposed to follow.
+ *
+ * `svgrid.live-update-paths.svelte.test.ts` covers the two MUTATION paths
+ * (field write, element replacement) against a sorted grid. This file covers
+ * the LENGTH path on the plainest possible grid, because a row appearing is a
+ * different question from a cell changing: nothing in the template is reading
+ * the new row yet, so the row model has to notice the array grew.
+ *
+ * Lives in a `.svelte.test.ts` so `$state` is available.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+
+type Staff = { id: string; firstName: string; age: number }
+
+const staffColumns = [
+  { field: 'firstName', header: 'First name', width: 180 },
+  { field: 'age', header: 'Age', width: 90 },
+]
+
+/** The props object is the `$state` proxy itself; a spread would snapshot it. */
+function pushProps(rows: Staff[]) {
+  const props = $state({
+    data: rows,
+    columns: staffColumns,
+    containerHeight: 400,
+    virtualization: false,
+  })
+  return props
+}
+
+function mountGrid(props: ReturnType<typeof pushProps>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, { target, props: props as never })
+  flushSync()
+  const names = () =>
+    Array.from(
+      target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row:not(.sv-grid-row-spacer)'),
+    ).map((tr) => tr.querySelector('.sv-grid-cell:not(.sv-grid-selection-cell)')?.textContent?.trim())
+  return {
+    names,
+    done() {
+      unmount(app)
+      target.remove()
+    },
+  }
+}
+
+describe('data array length changes', () => {
+  it('renders the rows it was given', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+    expect(g.names()).toEqual(['Ada', 'Linus'])
+    g.done()
+  })
+
+  it('push onto the $state array adds the row (the docs "Add row" button)', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+
+    rows.push({ id: '3', firstName: 'New', age: 0 })
+    flushSync()
+
+    expect(g.names()).toEqual(['Ada', 'Linus', 'New'])
+    g.done()
+  })
+
+  it('splice off the $state array removes the row', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+
+    rows.splice(0, 1)
+    flushSync()
+
+    expect(g.names()).toEqual(['Linus'])
+    g.done()
+  })
+})

package/src/svgrid.detail-rows.svelte.test.ts

@@ -0,0 +1,187 @@
+/**
+ * Detail rows under virtualization: `detailRowHeight` sizes a detail row for
+ * the virtualizer, so a master-detail grid no longer needs
+ * `virtualization={false}`.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: string; name: string; kind: 'data' | 'detail' }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 200 }]
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function rows(): Row[] {
+  const out: Row[] = []
+  for (let i = 0; i < 12; i += 1) {
+    out.push({ id: `r${i}`, name: `row ${i}`, kind: 'data' })
+    if (i === 1 || i === 4) out.push({ id: `d${i}`, name: `detail of ${i}`, kind: 'detail' })
+  }
+  return out
+}
+
+function mountGrid(extra: Record<string, unknown>) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 300,
+        virtualization: true,
+        isDetailRow: (r: Row) => r.kind === 'detail',
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, destroy: () => { unmount(app); target.remove() } })
+        },
+        ...extra,
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+describe('detailRowHeight', () => {
+  it('sizes detail rows for the virtualizer and leaves the others at rowHeight', async () => {
+    const { api, target, destroy } = await mountGrid({ detailRowHeight: 120 })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(true)
+      expect(detail.style.height).toBe('120px')
+      // Index 2 is the detail under row 1; 3 is a plain row.
+      expect(api.getRowHeight(2)).toBe(120)
+      expect(api.getRowHeight(3)).toBe(30)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('takes a function of the row', async () => {
+    const { api, destroy } = await mountGrid({ detailRowHeight: (r: Row) => (r.id === 'd1' ? 80 : 200) })
+    try {
+      await tick()
+      expect(api.getRowHeight(2)).toBe(80)
+      expect(api.getRowHeight(6)).toBe(200)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('without one a detail row is auto height, as before', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await tick()
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.classList.contains('sv-grid-detail-row-sized')).toBe(false)
+      expect(detail.style.height).toBe('')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('showDetailToggle', () => {
+  it('is a row-header column: sticky, no menu, no resize handle, a chevron per data row and none on a detail row', async () => {
+    const open = new Set<string>(['r1', 'r4'])
+    const toggled: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      columnResize: true,
+      columnMenu: true,
+      onDetailToggle: (r: Row) => toggled.push(r.id),
+      isDetailOpen: (r: Row) => open.has(r.id),
+      detailRowHeight: 60,
+    })
+    try {
+      await tick()
+      const head = target.querySelector<HTMLElement>('thead th.sv-grid-detail-toggle-column')!
+      expect(head).not.toBeNull()
+      expect(head.getAttribute('aria-hidden')).toBe('true')
+      expect(head.querySelector('.sv-grid-col-menu-btn, .sv-grid-column-resizer, [data-resize-handle]')).toBeNull()
+      expect(head.style.position || getComputedStyle(head).position).not.toBe('')
+      const first = target.querySelector<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')!
+      const cell = first.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell).not.toBeNull()
+      // The gutter is not a data cell: nothing the keyboard or the selection can land on.
+      expect(cell.hasAttribute('data-svgrid-col')).toBe(false)
+      const chev = cell.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('false')
+      expect(chev.getAttribute('aria-label')).toBe('Open details')
+      chev.click()
+      expect(toggled).toEqual(['r0'])
+      // Row 1 is open: its chevron says so; the detail row under it has a blank gutter cell.
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-expanded')).toBe('true')
+      expect(r1.querySelector('button.sv-grid-detail-toggle')!.getAttribute('aria-label')).toBe('Close details')
+      const detail = target.querySelector<HTMLElement>('tr.sv-grid-detail-row')!
+      expect(detail.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      // The full-width cell spans the gutter too.
+      expect(detail.querySelector<HTMLTableCellElement>('td.sv-grid-detail-cell')!.colSpan).toBe(first.children.length)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves the chevron out where hasDetail says no, and sticks after the row numbers and the checkbox', async () => {
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      showRowNumbers: true,
+      showRowSelection: true,
+      onDetailToggle: () => {},
+      hasDetail: (r: Row) => r.id !== 'r0',
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row:not(.sv-grid-detail-row)')]
+      expect(rowsAll[0]!.querySelector('td.sv-grid-detail-toggle-cell button')).toBeNull()
+      expect(rowsAll[1]!.querySelector('td.sv-grid-detail-toggle-cell button')).not.toBeNull()
+      // Row number (56) + selection (44) sit before it.
+      const cell = rowsAll[1]!.querySelector<HTMLElement>('td.sv-grid-detail-toggle-cell')!
+      expect(cell.style.left).toBe('100px')
+      expect(cell.style.width).toBe('36px')
+      // The system cells come in that order, then the data.
+      const classes = [...rowsAll[1]!.children].map((td) => td.className.split(' ')[1])
+      expect(classes.slice(0, 3)).toEqual(['sv-grid-row-number-cell', 'sv-grid-selection-cell', 'sv-grid-detail-toggle-cell'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('on a server row model the seam decides: groups get no chevron, a leaf reads detailOpen and calls toggleDetail', async () => {
+    const calls: string[] = []
+    const { target, destroy } = await mountGrid({
+      showDetailToggle: true,
+      serverGroup: {
+        isGroup: (r: Row) => r.id === 'r0',
+        level: () => 0,
+        onToggle: () => {},
+        toggleDetail: (r: Row) => calls.push(r.id),
+        detailOpen: (r: Row) => r.id === 'r1',
+        hasDetail: (r: Row) => r.kind === 'data',
+      },
+    })
+    try {
+      await tick()
+      const rowsAll = [...target.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')]
+      const r0 = rowsAll.find((tr) => tr.textContent?.includes('row 0'))!
+      const r1 = rowsAll.find((tr) => tr.textContent?.includes('row 1'))!
+      expect(r0.querySelector('button.sv-grid-detail-toggle')).toBeNull()
+      const chev = r1.querySelector<HTMLButtonElement>('button.sv-grid-detail-toggle')!
+      expect(chev.getAttribute('aria-expanded')).toBe('true')
+      chev.click()
+      expect(calls).toEqual(['r1'])
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.filter-menu-scroll.test.ts

@@ -60,6 +60,14 @@ function mountGrid() {
   })
 }
 
+/**
+ * The close-on-scroll listener arms one animation frame after a popover
+ * mounts, so a scroll queued before the opening click cannot dismiss what
+ * that click opened. Every open helper waits that frame out before a case
+ * dispatches its scroll.
+ */
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
 async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   expect(btn).not.toBeNull()
@@ -74,6 +82,7 @@ async function openFilterMenu(target: HTMLElement) {
     expect(menu).not.toBeNull()
     expect(menu!.querySelector('.sv-listbox')).not.toBeNull()
   })
+  await nextFrame()
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

package/src/svgrid.gantt-seam.test.ts

@@ -104,7 +104,7 @@ describe('gantt - without the Enterprise renderer', () => {
   it('says a license is needed, and links to it', async () => {
     // Naming the package is what unblocks a developer trying it; saying a key
     // is needed is what they have to know before shipping. Enterprise is
-    // SOFT-gated, so the wording must not imply the feature is inert without
+    // runs without a key, so the wording must not imply the feature is inert without
     // one - it says "watermark", which is what actually happens.
     const { target, destroy } = await mountGrid()
     await tick()

package/src/svgrid.live-update-paths.svelte.test.ts

@@ -0,0 +1,186 @@
+/**
+ * The two ways a live feed can change a row, and what each one reaches.
+ *
+ * A `$state` array passed as `data` has two update paths for a row's VALUES,
+ * and they are not interchangeable, which is the whole design problem of a
+ * ticking grid. (Changing the row COUNT is a third path, tracked on its own;
+ * it lives in `svgrid.data-push.svelte.test.ts`.)
+ *
+ *   1. Mutate a field through the proxy (`rows[i].price = x`). The visible
+ *      cell re-renders because its template reads the field through the
+ *      proxy. The row model does NOT run - it caches on the array reference
+ *      and the reference did not change - so an active sort or filter is
+ *      stale for that row until something replaces the array.
+ *   2. Replace the array (`rows = next`, or `api.applyTransaction`). The row
+ *      model rebuilds and re-runs the pipeline over every row; sort and filter
+ *      are current again.
+ *
+ * Replacing one ELEMENT through the proxy (`rows[i] = {...}`) is the case a
+ * React-trained hand reaches for, and it is the one that does neither: the
+ * base row keeps its old `original`, so the cell keeps its old value.
+ *
+ * These are the facts the real-time docs and the blog describe; if one of
+ * them changes, this file is where it shows up first.
+ *
+ * Lives in a `.svelte.test.ts` so `$state` is available.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { SvGridApi } from './index'
+
+type Quote = { id: string; symbol: string; price: number }
+
+const features = tableFeatures({ rowSortingFeature })
+const columns = [
+  { field: 'symbol', header: 'Symbol', width: 120 },
+  { field: 'price', header: 'Price', width: 120, editorType: 'number' as const },
+]
+
+function seed(): Quote[] {
+  return [
+    { id: 'a', symbol: 'AAA', price: 10 },
+    { id: 'b', symbol: 'BBB', price: 20 },
+    { id: 'c', symbol: 'CCC', price: 30 },
+  ]
+}
+
+/**
+ * The props object must be the `$state` proxy itself, not a copy of it: a
+ * spread would snapshot `data` at mount and the reassignment tests would be
+ * testing nothing.
+ */
+function liveProps(data: Quote[]) {
+  const props = $state({
+    data,
+    columns,
+    features,
+    _rowModels: {
+      coreRowModel: createCoreRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+      sortedRowModel: createSortedRowModel(sortFns),
+    },
+    getRowId: (r: Quote) => r.id,
+    // Price descending: CCC, BBB, AAA. A tick that lifts AAA above CCC is
+    // the observable difference between "cell updated" and "re-sorted".
+    initialSorting: [{ id: 'price', desc: true }],
+    containerHeight: 400,
+    virtualization: false,
+    onApiReady: undefined as ((next: SvGridApi<typeof features, Quote>) => void) | undefined,
+  })
+  return props
+}
+
+function mountGrid(props: ReturnType<typeof liveProps>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: SvGridApi<typeof features, Quote> | null = null
+  props.onApiReady = (next) => (api = next)
+  const app = mount(SvGrid, { target, props: props as never })
+  flushSync()
+  const dataRows = () =>
+    Array.from(target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row:not(.sv-grid-row-spacer)'))
+  const cellsOf = (tr: Element) =>
+    Array.from(tr.querySelectorAll('.sv-grid-cell:not(.sv-grid-selection-cell)')).map((td) =>
+      td.textContent?.trim(),
+    )
+  const symbolsInOrder = () => dataRows().map((tr) => cellsOf(tr)[0])
+  const priceOf = (symbol: string) => {
+    const tr = dataRows().find((row) => cellsOf(row)[0] === symbol)
+    return tr ? cellsOf(tr)[1] : undefined
+  }
+  return {
+    app,
+    target,
+    api: () => api!,
+    symbolsInOrder,
+    priceOf,
+    done() {
+      unmount(app)
+      target.remove()
+    },
+  }
+}
+
+describe('live update paths', () => {
+  it('starts sorted by price descending', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+    expect(g.symbolsInOrder()).toEqual(['CCC', 'BBB', 'AAA'])
+    g.done()
+  })
+
+  it('proxy field write: the cell updates, the sort does not re-run', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+
+    props.data[0]!.price = 99 // AAA now the highest price
+    flushSync()
+
+    expect(g.priceOf('AAA')).toBe('99')
+    // Still where it was: the row model never saw the write.
+    expect(g.symbolsInOrder()).toEqual(['CCC', 'BBB', 'AAA'])
+    g.done()
+  })
+
+  it('proxy element replacement: neither the cell nor the sort updates', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+
+    props.data[0] = { ...props.data[0]!, price: 99 }
+    flushSync()
+
+    // The base row still points at the object it was built from.
+    expect(g.priceOf('AAA')).toBe('10')
+    expect(g.symbolsInOrder()).toEqual(['CCC', 'BBB', 'AAA'])
+    g.done()
+  })
+
+  it('array reassignment: the cell updates and the sort re-runs', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+
+    props.data = props.data.map((r) => (r.id === 'a' ? { ...r, price: 99 } : r))
+    flushSync()
+
+    expect(g.priceOf('AAA')).toBe('99')
+    expect(g.symbolsInOrder()).toEqual(['AAA', 'CCC', 'BBB'])
+    g.done()
+  })
+
+  it('applyTransaction: the cell updates and the sort re-runs', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+
+    g.api().applyTransaction({ update: [{ id: 'a', symbol: 'AAA', price: 99 }] })
+    flushSync()
+
+    expect(g.priceOf('AAA')).toBe('99')
+    expect(g.symbolsInOrder()).toEqual(['AAA', 'CCC', 'BBB'])
+    g.done()
+  })
+
+  it('a proxy field write is caught up by the next array replacement', () => {
+    const props = liveProps(seed())
+    const g = mountGrid(props)
+
+    props.data[0]!.price = 99
+    flushSync()
+    expect(g.symbolsInOrder()).toEqual(['CCC', 'BBB', 'AAA'])
+
+    // Any structural change re-runs the pipeline over the current values,
+    // including the one the proxy write left behind.
+    props.data = [...props.data]
+    flushSync()
+    expect(g.symbolsInOrder()).toEqual(['AAA', 'CCC', 'BBB'])
+    g.done()
+  })
+})

package/src/svgrid.menu-scroll-close.test.ts

@@ -75,6 +75,14 @@ function mountGrid(extra: Record<string, unknown> = {}) {
   )
 }
 
+/**
+ * The close-on-scroll listener arms one animation frame after a popover
+ * mounts, so a scroll queued before the opening click cannot dismiss what
+ * that click opened. Every open helper waits that frame out before a case
+ * dispatches its scroll.
+ */
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
 async function openContextMenu(target: HTMLElement) {
   const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]') as HTMLElement
   const r = cell.getBoundingClientRect()
@@ -86,6 +94,7 @@ async function openContextMenu(target: HTMLElement) {
     expect(menu).not.toBeNull()
     expect(menu!.querySelectorAll('.sv-grid-menu-item').length).toBeGreaterThan(0)
   })
+  await nextFrame()
   return target.querySelector('.sv-grid-context-menu') as HTMLElement
 }
 
@@ -100,6 +109,7 @@ async function openCommentEditor(target: HTMLElement) {
   await vi.waitFor(() => {
     expect(target.querySelector('.sv-grid-comment-editor')).not.toBeNull()
   })
+  await nextFrame()
   return target.querySelector('.sv-grid-comment-editor') as HTMLElement
 }
 

package/src/svgrid.row-model-seam.svelte.test.ts

@@ -177,6 +177,22 @@ describe('rowPlaceholder', () => {
     destroy()
   })
 
+  it('styles footer and grand-total rows a row model flags on the data', async () => {
+    // A server-side model cannot reach the row objects the grid builds, so
+    // it puts the client model's flags on the data instead; same chrome.
+    const data = [
+      { id: 1, name: 'Row 1' },
+      { id: 2, name: 'Total', __groupFooter: true },
+      { id: 3, name: 'Grand total', __groupFooter: true, __grandTotal: true },
+    ] as Row[]
+    const { target, destroy } = await mountGrid({}, data)
+    await tick()
+    const rows = [...target.querySelectorAll('tbody .sv-grid-row')]
+    expect(rows.map((r) => r.classList.contains('sv-grid-group-footer-row'))).toEqual([false, true, true])
+    expect(rows.map((r) => r.classList.contains('sv-grid-grand-total-row'))).toEqual([false, false, true])
+    destroy()
+  })
+
   it('keeps placeholder rows out of select-all', async () => {
     const { api, destroy } = await mountGrid({
       showRowSelection: true,

package/src/svgrid.row-pinning.test.ts

@@ -40,7 +40,7 @@ const rows: Row[] = [
 const cols: ColumnDef<typeof features, Row>[] = [
   { field: 'id',      header: 'ID',      width: 100, editable: false },
   { field: 'account', header: 'Account', width: 200, editable: false },
-  { field: 'arr',     header: 'ARR',     width: 130, editable: false, align: 'right',
+  { field: 'arr',     header: 'ARR',     width: 130, editable: false, align: 'right', cellClass: 'money',
     format: { type: 'number', options: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } } },
   { field: 'seats',   header: 'Seats',   width:  90, editable: false, align: 'right' },
 ]
@@ -167,6 +167,20 @@ describe('SvGrid - pinnedTopRows render', () => {
     } finally { destroy() }
   })
 
+  it('aligns and classes the cells the way the column says (a total sat left under a right-aligned column)', async () => {
+    const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] })
+    try {
+      await tick()
+      const tds = target.querySelectorAll('tr.sv-grid-pinned-row-top td')
+      expect(tds[0]!.getAttribute('data-align')).toBe('left')
+      expect(tds[2]!.getAttribute('data-align')).toBe('right')
+      expect(tds[3]!.getAttribute('data-align')).toBe('right')
+      // A static cellClass reaches the pinned cell; only a function did before.
+      expect(tds[2]!.classList.contains('money')).toBe(true)
+      expect(tds[0]!.classList.contains('money')).toBe(false)
+    } finally { destroy() }
+  })
+
   it('stacks multiple pinned-top rows with data-pinned-index', async () => {
     const { target, destroy } = await mountGrid({
       pinnedTopRows: [TOTALS, BENCHMARK],

package/src/svgrid.selection-bar-seam.test.ts

@@ -87,7 +87,7 @@ describe('selectionBar - without the Enterprise renderer', () => {
   it('says a license is needed, and links to it', async () => {
     // Naming the package is what unblocks a developer trying it; saying a key
     // is needed is what they have to know before shipping. Enterprise is
-    // SOFT-gated, so the wording must not imply the feature is inert without
+    // runs without a key, so the wording must not imply the feature is inert without
     // one - it says "watermark", which is what actually happens.
     const { api, target, destroy } = await mountGrid(true)
     await tick()