@svgrid/grid 3.0.5 → 3.0.6

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,184 @@
+/**
+ * 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 and they are not
+ * interchangeable, which is the whole design problem of a ticking grid:
+ *
+ *   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()

package/src/svgrid.sticky-groups.svelte.test.ts

@@ -0,0 +1,145 @@
+/**
+ * Sticky group rows: the group a row belongs to stays under the header
+ * while its rows scroll past. Under virtualization the band renders a copy
+ * of each ancestor; without it the real rows stick. Driven through the
+ * `serverGroup` seam with plain data, so no row model is needed to say
+ * which rows are groups and how deep they sit.
+ */
+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: 'group' | 'leaf'; level: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'id', header: 'Id', width: 80 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+/** A(0) > A1(1) > 20 leaves, A2(1) > 20 leaves, B(0) > B1(1) > 20 leaves: 65 rows. */
+function tree(): Row[] {
+  const out: Row[] = []
+  let n = 0
+  const leaves = (under: string) => {
+    for (let i = 0; i < 20; i += 1) out.push({ id: `${under}-${i}`, name: `leaf ${n++}`, kind: 'leaf', level: 2 })
+  }
+  out.push({ id: 'A', name: 'A', kind: 'group', level: 0 })
+  out.push({ id: 'A1', name: 'A1', kind: 'group', level: 1 })
+  leaves('A1')
+  out.push({ id: 'A2', name: 'A2', kind: 'group', level: 1 })
+  leaves('A2')
+  out.push({ id: 'B', name: 'B', kind: 'group', level: 0 })
+  out.push({ id: 'B1', name: 'B1', kind: 'group', level: 1 })
+  leaves('B1')
+  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: tree(),
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => r.id,
+        rowHeight: 30,
+        containerHeight: 200,
+        stickyGroupRows: true,
+        serverGroup: {
+          isGroup: (r: Row) => r.kind === 'group',
+          level: (r: Row) => r.level,
+          expanded: () => true,
+          onToggle: () => {},
+        },
+        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')) })
+  })
+}
+
+async function scrollTo(target: HTMLElement, top: number) {
+  const container = target.querySelector('.sv-grid-container') as HTMLElement
+  container.scrollTop = top
+  container.dispatchEvent(new Event('scroll'))
+  // The virtualizer syncs to the scroll position on the next animation frame.
+  await new Promise<void>((r) => requestAnimationFrame(() => r()))
+  await tick()
+  await tick()
+}
+
+const stickyNames = (target: HTMLElement) =>
+  [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')].map((tr) => tr.textContent!.replace(/\s+/g, ' ').trim().split(' ')[0])
+
+describe('stickyGroupRows under virtualization', () => {
+  it('renders copies of the ancestors of the first row under the header, deepest last', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true })
+    try {
+      await tick()
+      // Row 0 is A itself: nothing to hold.
+      expect(stickyNames(target)).toEqual([])
+      // Row 10 is a leaf under A1: A, then A1.
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual(['A', 'A1'])
+      const band = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(band[0]!.getAttribute('aria-hidden')).toBe('true')
+      expect(band[1]!.classList.contains('sv-grid-row-sticky-group-last')).toBe(true)
+      // The second sits a row under the first.
+      expect(parseInt(band[1]!.style.top, 10) - parseInt(band[0]!.style.top, 10)).toBe(30)
+      // A copy carries no cell ids, so the real row's id stays unique.
+      expect(band[0]!.querySelector('[id]')).toBeNull()
+      // Row 30 is a leaf under A2.
+      await scrollTo(target, 900)
+      expect(stickyNames(target)).toEqual(['A', 'A2'])
+      // Row 50 is a leaf under B1.
+      await scrollTo(target, 1500)
+      expect(stickyNames(target)).toEqual(['B', 'B1'])
+      // Back to the top: the band is gone.
+      await scrollTo(target, 0)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('is off unless asked for', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: true, stickyGroupRows: false })
+    try {
+      await scrollTo(target, 300)
+      expect(stickyNames(target)).toEqual([])
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('stickyGroupRows without virtualization', () => {
+  it('makes the real ancestor rows sticky instead of copying them', async () => {
+    const { target, destroy } = await mountGrid({ virtualization: false })
+    try {
+      await scrollTo(target, 300)
+      const sticky = [...target.querySelectorAll<HTMLElement>('tr.sv-grid-row-sticky-group')]
+      expect(sticky.map((tr) => tr.textContent!.trim().split(/\s+/)[0])).toEqual(['A', 'A1'])
+      // They are the rows themselves: cells keep their row index.
+      expect(sticky[0]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('0')
+      expect(sticky[1]!.querySelector('[data-svgrid-row]')?.getAttribute('data-svgrid-row')).toBe('1')
+      expect(sticky[0]!.getAttribute('aria-hidden')).toBeNull()
+      // Every row renders exactly once.
+      const rows = [...target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row')]
+      expect(rows).toHaveLength(65)
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/svgrid.upsell-license.test.ts

@@ -95,7 +95,7 @@ describe('Enterprise upsell notes', () => {
         })
 
         const note = target.querySelector(LICENSE)!
-        // Soft-gated: the feature runs without a key and the grid watermarks.
+        // The feature runs without a key and the grid watermarks.
         // The wording must not imply it is inert, because it is not.
         expect(note.textContent, name).toContain('license key')
         expect(note.textContent, name).toContain('watermark')

package/src/test-setup.ts

@@ -59,4 +59,16 @@ if (typeof Element !== 'undefined' && !Element.prototype.animate) {
   }
 }
 
+// jsdom has no canvas: getContext() returns null and prints "Not implemented:
+// HTMLCanvasElement's getContext() method" through its virtual console on
+// every call, hundreds of lines per run that bury the real warnings. The
+// callers (the sheet's text measuring, the picture rasteriser) already treat a
+// null context as "no canvas", so answering null quietly changes nothing a
+// test can see; a test that needs a context still spies on the prototype.
+if (typeof HTMLCanvasElement !== 'undefined') {
+  ;(HTMLCanvasElement.prototype as any).getContext = function () {
+    return null
+  }
+}
+
 export {}

package/src/transaction.test.ts

@@ -97,4 +97,62 @@ describe('api.applyTransaction', () => {
       destroy()
     }
   })
+  it('removes a row that the same transaction also updates, by id or by reference', async () => {
+    const { api, destroy } = await mountGrid()
+    try {
+      const byId = api.applyTransaction({ update: [{ id: 'a', symbol: 'AAPL', price: 1 }], remove: ['a'] })
+      await tick()
+      expect(byId).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['b', 'c'])
+      const ref = api.getData()[0]! // 'b'
+      const byRef = api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 2 }], remove: [ref] })
+      await tick()
+      expect(byRef).toEqual({ added: 0, updated: 1, removed: 1 })
+      expect(api.getData().map((o) => o.id)).toEqual(['c'])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('an update batch looks its rows up by id instead of walking the array', async () => {
+    // The id -> index map is built once per data array and carried across
+    // update-only transactions, so the second tick calls getRowId only for
+    // the rows in the batch. Before, every transaction called it for every
+    // row - 100k calls per tick on a 100k-row feed.
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let calls = 0
+    let captured: SvGridApi<typeof features, Order> | null = null
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: seed,
+        columns,
+        features,
+        getRowId: (o: Order) => { calls++; return o.id },
+        _rowModels: { coreRowModel: createCoreRowModel(), filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(sortFns) },
+        containerHeight: 400,
+        virtualization: false,
+        onApiReady(api: SvGridApi<typeof features, Order>) { captured = api },
+      } as any,
+    })
+    try {
+      await tick()
+      const api = captured!
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 201 }] })
+      await tick()
+      const afterFirst = calls
+      api.applyTransaction({ update: [{ id: 'b', symbol: 'MSFT', price: 202 }] })
+      await tick()
+      // One call: the id of the update itself. The row model's own getRowId
+      // calls for the replaced row are not part of this count because the
+      // map answered the lookup.
+      expect(calls - afterFirst).toBeLessThanOrEqual(2)
+      expect(api.getData()[1]!.price).toBe(202)
+    } finally {
+      unmount(app)
+      target.remove()
+    }
+  })
 })
+

package/src/validate.ts

@@ -77,7 +77,13 @@ export function validateGridConfig<
   // (a key absent from row 0 but present later) does not trip it. A row
   // model shows placeholder rows before its first block lands; those carry
   // no data keys at all and say nothing about the columns.
-  const sample = (input.data ?? []).filter((row) => !rowPlaceholderState(row)).slice(0, FIELD_SAMPLE_ROWS)
+  // Stops at the sample size: this runs on every data change, and a filter
+  // over all the rows first was O(n) per tick on a live feed.
+  const sample: TData[] = []
+  for (const row of input.data ?? []) {
+    if (sample.length >= FIELD_SAMPLE_ROWS) break
+    if (!rowPlaceholderState(row)) sample.push(row)
+  }
   // Under server-side grouping the first rows are group rows, which carry
   // a key and aggregates and none of the leaf fields; nothing to judge by.
   if (sample.length && !input.serverGroup) {