@svgrid/grid 2.2.31 → 2.2.32

package/src/svgrid.async-editor-options.test.ts

@@ -0,0 +1,271 @@
+/**
+ * Async `editorOptions` (#18): an option list that arrives from the server.
+ *
+ * Render paths call the option resolver synchronously and often, so an async
+ * source cannot block. The first call starts the fetch and returns an empty
+ * list; the resolved value lands in reactive state and re-renders the open
+ * editor. In-flight keys are tracked so repeated renders do not refire the
+ * request, and so the dropdown can say "Loading…" rather than "No options",
+ * which would read as "nothing to pick".
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; country: string; city: string }
+
+const data: Row[] = [
+  { id: 1, country: 'FR', city: 'Paris' },
+  { id: 2, country: 'JP', city: 'Osaka' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+// The list editors lazy-load `SvGridDropdown` with a dynamic import, so
+// microtasks alone never get it mounted - the settle has to yield the macrotask
+// queue too, and then again for the resolved options to re-render.
+const settle = async () => {
+  for (let i = 0; i < 4; i += 1) {
+    await new Promise((r) => setTimeout(r, 0))
+    await tick()
+  }
+}
+
+function mountGrid(columns: unknown[]) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features: tableFeatures({ rowSortingFeature }),
+      editable: true,
+      onApiReady: (a: never) => { api = a },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 400,
+      virtualization: false,
+    } as never,
+  })
+  return { target, getApi: () => api, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+/** Open the editor for row 0 of `columnId` through the public api. */
+async function openEditor(api: never, columnId: string) {
+  ;(api as never as { startEditing: (r: number, c: string) => boolean }).startEditing(0, columnId)
+  await settle()
+}
+
+describe('async editorOptions (#18)', () => {
+  it('resolves a promised option list and renders it', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: Promise.resolve(['Paris', 'Lyon', 'Osaka']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    expect(document.body.textContent).toContain('Lyon')
+  })
+
+  it('fetches once no matter how many times render asks', async () => {
+    const source = vi.fn(async () => ['a', 'b'])
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: source(),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The promise was created once; the resolver must not re-await per render.
+    expect(source).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls a per-row async source ONCE per row, not once per render', async () => {
+    // The resolver runs inside the template, so calling an async source on
+    // every render fires a real request per render - and any state the source
+    // touches gets mutated mid-render, which Svelte rejects outright. Reported
+    // from the demo as `state_unsafe_mutation`.
+    const calls: number[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          calls.push(row.id)
+          return Promise.resolve(['Paris', 'Lyon'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    const afterOpen = calls.length
+    expect(afterOpen).toBeGreaterThan(0)
+    // Force real re-render passes while the editor is open. Each one used to
+    // re-invoke the source and start another request, which in a browser
+    // becomes an endless fetch loop as every resolution re-renders.
+    const api = g.getApi() as never as {
+      setOption: (k: string, v: unknown) => void
+    }
+    for (const zebra of [true, false, true]) {
+      api.setOption('zebraRows', zebra)
+      await settle()
+    }
+    expect(calls.length).toBe(afterOpen)
+  })
+
+  it('refetches a cascade when the row it depends on changes', async () => {
+    // A cascade is a function of the row's OTHER cells. Keying the cache by row
+    // id alone made the first result permanent - changing Country left the old
+    // city list in place forever.
+    const asked: string[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          asked.push(row.country)
+          return Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as {
+      startEditing: (r: number, c: string) => boolean
+      stopEditing: (cancel?: boolean) => boolean
+      setCellValue: (r: number, c: string, v: unknown) => void
+    }
+
+    await openEditor(api as never, 'city')
+    expect(document.body.textContent).toContain('Lyon')
+    api.stopEditing(true)
+    await settle()
+
+    // Row 0 moves from FR to JP.
+    api.setCellValue(0, 'country', 'JP')
+    await settle()
+
+    await openEditor(api as never, 'city')
+    expect(asked).toContain('JP')
+    expect(document.body.textContent).toContain('Kyoto')
+    expect(document.body.textContent).not.toContain('Lyon')
+  })
+
+  it('resolves a per-row (cascading) async source', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) =>
+          Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    // Row 1 is FR - it must not be offered the JP list.
+    expect(document.body.textContent).toContain('Lyon')
+    expect(document.body.textContent).not.toContain('Kyoto')
+  })
+
+  it('falls back to an empty list when the source rejects', async () => {
+    const rejected = Promise.reject(new Error('offline'))
+    rejected.catch(() => {}) // keep the reporter clean; the grid attaches its own handler
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: rejected,
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The editor must settle on "No options", never spin forever.
+    expect(document.body.textContent).toContain('No options')
+  })
+
+  it('exposes refreshEditorOptions on the api', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      { field: 'city', header: 'City', width: 160 },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as { refreshEditorOptions: (c?: string) => void }
+    expect(typeof api.refreshEditorOptions).toBe('function')
+    expect(() => api.refreshEditorOptions('city')).not.toThrow()
+    expect(() => api.refreshEditorOptions()).not.toThrow()
+  })
+
+  it('leaves a plain array source synchronous', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: ['Paris', 'Lyon'],
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    expect(document.body.textContent).toContain('Lyon')
+  })
+})

package/src/svgrid.auto-row-height.test.ts

@@ -0,0 +1,204 @@
+/**
+ * DOM: `autoRowHeight` sizes each row to its own content.
+ *
+ * jsdom does no layout - getBoundingClientRect is 0 and the global
+ * ResizeObserver stub never fires - so this file installs a controllable
+ * observer and fakes element heights. That is enough to prove the wiring that
+ * actually matters: rows are measured, the measurement reaches the virtualizer,
+ * and a measured row is sized by its content instead of the fixed rowHeight.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; name: string; notes: string }
+
+const data: Row[] = [
+  { id: 1, name: 'Ada', notes: 'short' },
+  { id: 2, name: 'Linus', notes: 'a much longer note that would wrap onto several lines in a narrow column' },
+  { id: 3, name: 'Grace', notes: 'medium length note' },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 120 },
+  { field: 'notes', header: 'Notes', width: 160 },
+]
+
+const features = tableFeatures({ rowSortingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+const raf = () => new Promise<void>((r) => requestAnimationFrame(() => r()))
+
+/** A ResizeObserver whose callbacks this test can fire on demand. */
+class ControllableRO {
+  static instances: ControllableRO[] = []
+  cb: () => void
+  targets: Element[] = []
+  constructor(cb: () => void) {
+    this.cb = cb
+    ControllableRO.instances.push(this)
+  }
+  observe(el: Element) { this.targets.push(el) }
+  unobserve() {}
+  disconnect() { this.targets = [] }
+  static fireAll() { for (const i of ControllableRO.instances) i.cb() }
+  static reset() { ControllableRO.instances = [] }
+}
+
+let originalRO: typeof globalThis.ResizeObserver
+beforeEach(() => {
+  originalRO = globalThis.ResizeObserver
+  ControllableRO.reset()
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ControllableRO
+})
+afterEach(() => {
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = originalRO
+})
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      rowHeight: 30,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      containerHeight: 400,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const dataRows = (t: HTMLElement) =>
+  [...t.querySelectorAll<HTMLElement>('tbody tr.sv-grid-row')].filter((r) => !r.classList.contains('sv-grid-group-row'))
+
+describe('autoRowHeight', () => {
+  it('is off by default: rows get a fixed height and no wrap class', async () => {
+    const g = mountGrid({})
+    cleanup = g.destroy
+    await tick()
+    const row = dataRows(g.target)[0]!
+    expect(row.classList.contains('sv-grid-row-auto-height')).toBe(false)
+    expect(row.getAttribute('style')).toContain('height: 30px')
+    expect(row.getAttribute('style')).not.toContain('min-height')
+  })
+
+  it('switches rows to min-height + the wrap class when on', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+    for (const row of dataRows(g.target)) {
+      expect(row.classList.contains('sv-grid-row-auto-height')).toBe(true)
+      // min-height, so content can grow the row instead of being clipped.
+      expect(row.getAttribute('style')).toContain('min-height: 30px')
+    }
+  })
+
+  it('feeds a measured height back into the row size', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+
+    const rows = dataRows(g.target)
+    expect(rows.length).toBe(3)
+    // Fake layout: row 1 (the long note) wraps to 3 lines.
+    const heights = [30, 90, 30]
+    rows.forEach((row, i) => {
+      row.getBoundingClientRect = () => ({ height: heights[i], width: 280, top: 0, left: 0, right: 280, bottom: heights[i]!, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+
+    const after = dataRows(g.target)
+    expect(after[0]?.getAttribute('style')).toContain('min-height: 30px')
+    // The measured tall row is now sized by its content, not by rowHeight.
+    expect(after[1]?.getAttribute('style')).toContain('min-height: 90px')
+    expect(after[2]?.getAttribute('style')).toContain('min-height: 30px')
+  })
+
+  it('ignores autoRowHeight when rowHeight is a function (caller owns heights)', async () => {
+    const g = mountGrid({ autoRowHeight: true, rowHeight: (i: number) => 40 + i * 10 })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(false)
+    expect(rows[0]?.getAttribute('style')).toContain('height: 40px')
+    expect(rows[1]?.getAttribute('style')).toContain('height: 50px')
+  })
+
+  it('uses a numeric rowHeight as the pre-measure estimate', async () => {
+    const g = mountGrid({ autoRowHeight: true, rowHeight: 48 })
+    cleanup = g.destroy
+    await tick()
+    // Nothing measured yet, so every row sits at the estimate.
+    for (const row of dataRows(g.target)) {
+      expect(row.getAttribute('style')).toContain('min-height: 48px')
+    }
+  })
+
+  it('works on the virtualized body too (the variable-size path)', async () => {
+    const g = mountGrid({ autoRowHeight: true, virtualization: true })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    expect(rows.length).toBeGreaterThan(0)
+    expect(rows[0]?.classList.contains('sv-grid-row-auto-height')).toBe(true)
+
+    rows.forEach((row, i) => {
+      const h = i === 1 ? 96 : 30
+      row.getBoundingClientRect = () => ({ height: h, width: 280, top: 0, left: 0, right: 280, bottom: h, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+
+    const after = dataRows(g.target)
+    // The virtualizer now sizes row 1 from its measurement, so the row element
+    // reflects the measured height rather than the 30px estimate.
+    expect(after[1]?.getAttribute('style')).toContain('96px')
+  })
+
+  it('does not re-report a sub-pixel change (no measure/layout loop)', async () => {
+    const g = mountGrid({ autoRowHeight: true })
+    cleanup = g.destroy
+    await tick()
+    const rows = dataRows(g.target)
+    rows.forEach((row) => {
+      row.getBoundingClientRect = () => ({ height: 70, width: 280, top: 0, left: 0, right: 280, bottom: 70, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
+
+    // A 0.4px drift must be ignored - otherwise fractional layout ping-pongs.
+    dataRows(g.target).forEach((row) => {
+      row.getBoundingClientRect = () => ({ height: 70.4, width: 280, top: 0, left: 0, right: 280, bottom: 70.4, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect
+    })
+    ControllableRO.fireAll()
+    await raf()
+    await tick()
+    expect(dataRows(g.target)[0]?.getAttribute('style')).toContain('min-height: 70px')
+  })
+})

package/src/svgrid.charting.test.ts

@@ -19,7 +19,7 @@ import {
   formatChartValue,
   buildChart,
 } from './index'
-import type { ColumnDef, SvGridApi } from './index'
+import type { ChartAggregateRequest, ColumnDef, SvGridApi } from './index'
 
 type Person = { id: number; name: string; team: string; age: number; salary: number }
 
@@ -328,7 +328,7 @@ describe('SvGrid built-in charting', () => {
       await tick()
       const csv = chartSpecToCsv(api.getChartSpec()!)
       const [header, ...rows] = csv.split('\n')
-      expect(header.startsWith('Category,')).toBe(true)
+      expect(header!.startsWith('Category,')).toBe(true)
       expect(rows.length).toBeGreaterThan(0)
       // Export button + menu.
       const btn = target.querySelector<HTMLButtonElement>('[aria-label="Export chart"]')
@@ -435,7 +435,7 @@ describe('SvGrid built-in charting', () => {
 
   it('renders a custom `buildSpec` chart that stays live with the grid', async () => {
     const { api, destroy } = await mountGrid({
-      charting: { defaultOpen: true, buildSpec: (rows) => ({ type: 'bar', categories: ['All'], series: [{ label: 'Count', values: [rows.length] }] }) },
+      charting: { defaultOpen: true, buildSpec: (rows: unknown[]) => ({ type: 'bar', categories: ['All'], series: [{ label: 'Count', values: [rows.length] }] }) },
     })
     try {
       await tick()
@@ -487,7 +487,7 @@ describe('SvGrid built-in charting', () => {
     let lastFilter: any = null
     const { api, destroy } = await mountGrid({
       charting: {
-        getAggregate: async (req) => {
+        getAggregate: async (req: ChartAggregateRequest) => {
           calls += 1
           lastFilter = req.filterModel
           return [

package/src/svgrid.comments-autocomplete.test.ts

@@ -94,8 +94,14 @@ describe('editable comments', () => {
     const cell = dataCell(target, 0)
     cell.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }))
     // First menu-open triggers GridMenus' lazy import; poll until it mounts.
-    await vi.waitFor(() => expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull())
-    await tick()
+    // Wait for the menu's ITEMS, not just the overlay element: GridMenus is a
+    // lazy chunk and the overlay mounts before its items render, so a fixed
+    // tick afterwards is a race rather than a guarantee.
+    await vi.waitFor(() => {
+      const menu = target.querySelector('.sv-grid-context-menu')
+      expect(menu).not.toBeNull()
+      expect(menu!.querySelectorAll('.sv-grid-menu-item').length).toBeGreaterThan(0)
+    })
     const editItem = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find(
       (b) => b.textContent?.trim() === 'Edit comment',
     ) as HTMLElement

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

@@ -74,17 +74,31 @@ function rightClickFirstCell(target: HTMLElement) {
   return cell
 }
 
+/**
+ * Right-click and wait until the menu's ITEMS are in the DOM.
+ *
+ * GridMenus is a lazy chunk, and the overlay element appears before its items
+ * render. Waiting for the element alone leaves callers reading an empty item
+ * list; waiting a fixed tick makes them depend on an earlier test having
+ * already warmed the chunk. Only for cases that expect the menu to open - the
+ * "stays closed" case must not use this.
+ */
+async function openContextMenu(target: HTMLElement) {
+  rightClickFirstCell(target)
+  await vi.waitFor(() => {
+    const menu = target.querySelector('.sv-grid-context-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelectorAll('.sv-grid-menu-item').length).toBeGreaterThan(0)
+  })
+  return target.querySelector('.sv-grid-context-menu') as HTMLElement
+}
+
 describe('SvGrid context menu', () => {
   it('opens the default menu on right-click with the built-in items', async () => {
     const { target, destroy } = await mountGrid(true)
     await tick()
-    rightClickFirstCell(target)
-    // First menu-open triggers GridMenus' lazy import (transforming the module on
-    // first load can exceed a single tick); poll until the overlay mounts.
-    await vi.waitFor(() => expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull())
-    const menu = target.querySelector('.sv-grid-context-menu')
-    expect(menu).not.toBeNull()
-    const labels = [...menu!.querySelectorAll('.sv-grid-menu-item')].map((b) => b.textContent?.trim())
+    const menu = await openContextMenu(target)
+    const labels = [...menu.querySelectorAll('.sv-grid-menu-item')].map((b) => b.textContent?.trim())
     expect(labels).toContain('Copy')
     expect(labels).toContain('Paste')
     expect(labels).toContain('Remove row')
@@ -113,8 +127,10 @@ describe('SvGrid context menu', () => {
     ]
     const { target, destroy } = await mountGrid(items)
     await tick()
-    rightClickFirstCell(target)
-    await tick()
+    // Was a bare `await tick()`, which only worked because the case above had
+    // already loaded the lazy chunk - running this one alone would have read an
+    // empty menu.
+    await openContextMenu(target)
     const labels = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].map((b) =>
       b.textContent?.trim(),
     )