@svgrid/grid 2.2.31 → 2.2.33

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.behavior.test.ts

@@ -25,7 +25,6 @@ import {
   createGroupedRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
-  renderSnippet,
   rowExpandingFeature,
   rowPaginationFeature,
   rowSelectionFeature,

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.column-reorder.test.ts

@@ -106,14 +106,6 @@ function headerOrder(target: HTMLElement): string[] {
   return Array.from(ths).map((th) => th.dataset.svgridHeaderCol ?? '')
 }
 
-function header(target: HTMLElement, id: string): HTMLElement {
-  // jsdom doesn't ship CSS.escape; our ids are simple alphanumerics so
-  // a plain attribute selector is fine.
-  const el = target.querySelector<HTMLElement>(`th[data-svgrid-header-col="${id}"]`)
-  if (!el) throw new Error(`header not found: ${id}`)
-  return el
-}
-
 describe('SvGrid column reorder - default off', () => {
   it('does NOT set draggable on headers when the prop is unset', async () => {
     const { target, destroy } = await mountGrid()

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(),
     )

package/src/svgrid.filter-depth.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Filtering depth, verified rather than assumed (#11, #12).
+ *
+ * Both of these were still listed as roadmap gaps. They are not: the filter row
+ * renders a per-column operator picker, and a column filter carries an optional
+ * second condition joined by AND/OR. These tests pin the behaviour so the claim
+ * is backed by something executable.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  applyExcelFilter,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnFilteringFeature,
+} from './index'
+
+type Row = { id: number; name: string; amount: number }
+
+const data: Row[] = [
+  { id: 1, name: 'alpha', amount: 5 },
+  { id: 2, name: 'beta', amount: 50 },
+  { id: 3, name: 'gamma', amount: 500 },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 160 },
+  { field: 'amount', header: 'Amount', width: 120 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      filterable: true,
+      showFilterRow: 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 })
+
+const bodyRows = (t: HTMLElement) =>
+  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
+    (r) => !r.classList.contains('sv-grid-row-spacer'),
+  )
+
+describe('filter row operator picker (#11)', () => {
+  it('renders an operator button per column in the filter row', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    const btns = target.querySelectorAll('.sv-grid-filter-operator-btn')
+    expect(btns.length).toBe(columns.length)
+  })
+
+  it('exposes the active operator on the button for a screen reader', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    const btn = target.querySelector('.sv-grid-filter-operator-btn')!
+    expect(btn.getAttribute('aria-label')).toMatch(/^Filter condition: /)
+  })
+
+  it('opens a menu of the operators valid for that column', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+    target.querySelector<HTMLButtonElement>('.sv-grid-filter-operator-btn')!.click()
+    await tick()
+    expect(target.querySelector('.sv-grid-filter-operator-btn.is-open')).not.toBeNull()
+  })
+})
+
+describe('two-condition column filter (#12)', () => {
+  // The model is what decides rows; these assert the AND/OR semantics directly.
+  const between = (v: unknown, lo: number, hi: number) =>
+    applyExcelFilter(v, { id: 'amount', operator: 'greaterThan', value: lo }) &&
+    applyExcelFilter(v, { id: 'amount', operator: 'lessThan', value: hi })
+
+  it('AND narrows to the intersection', () => {
+    expect(between(50, 10, 100)).toBe(true)
+    expect(between(5, 10, 100)).toBe(false)
+    expect(between(500, 10, 100)).toBe(false)
+  })
+
+  it('OR widens to the union', () => {
+    const or = (v: unknown) =>
+      applyExcelFilter(v, { id: 'name', operator: 'startsWith', value: 'al' }) ||
+      applyExcelFilter(v, { id: 'name', operator: 'endsWith', value: 'ma' })
+    expect(or('alpha')).toBe(true)
+    expect(or('gamma')).toBe(true)
+    expect(or('beta')).toBe(false)
+  })
+
+  it('applies a two-condition AND filter through the api', async () => {
+    const g = mountGrid()
+    cleanup = g.destroy
+    await tick()
+    const api = g.getApi() as never as {
+      setFilter: (id: string, f: Record<string, unknown>) => void
+    }
+    // amount > 10 AND amount < 100 -> only beta (50)
+    api.setFilter('amount', {
+      operator: 'greaterThan',
+      value: '10',
+      operator2: 'lessThan',
+      value2: '100',
+      join: 'AND',
+    })
+    await tick()
+    expect(bodyRows(g.target)).toHaveLength(1)
+    expect(g.target.textContent).toContain('beta')
+  })
+
+  it('applies a two-condition OR filter through the api', async () => {
+    const g = mountGrid()
+    cleanup = g.destroy
+    await tick()
+    const api = g.getApi() as never as {
+      setFilter: (id: string, f: Record<string, unknown>) => void
+    }
+    // name startsWith "al" OR name endsWith "ma" -> alpha + gamma
+    api.setFilter('name', {
+      operator: 'startsWith',
+      value: 'al',
+      operator2: 'endsWith',
+      value2: 'ma',
+      join: 'OR',
+    })
+    await tick()
+    expect(bodyRows(g.target)).toHaveLength(2)
+    expect(g.target.textContent).toContain('alpha')
+    expect(g.target.textContent).toContain('gamma')
+    expect(g.target.textContent).not.toContain('beta')
+  })
+})

package/src/svgrid.filter-menu-listbox.svelte.test.ts

@@ -82,8 +82,22 @@ function mountGrid(data: Row[]) {
 async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   btn.click()
-  // GridMenus is a lazy chunk; poll until the popover mounts.
-  await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull())
+  // GridMenus is a lazy chunk, so poll until the popover mounts AND its value
+  // checklist has rendered.
+  //
+  // Waiting only for the popover element returns while the listbox is still
+  // empty: the chunk arrives, the menu element appears, and the values are
+  // snapshotted and windowed in a later flush. Callers then read option counts
+  // from a list that has not populated yet. It survives locally because those
+  // flushes land in the same task, but under parallel load the gap widens - it
+  // failed once that way in a full-suite run. Every caller here opens a menu on
+  // a column that has values, so a populated list is the settled state to wait
+  // for, and each test's own assertions are unchanged.
+  await vi.waitFor(() => {
+    const menu = target.querySelector('.sv-grid-filter-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelectorAll('[role="option"]').length).toBeGreaterThan(0)
+  })
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }
 

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

@@ -64,8 +64,16 @@ async function openFilterMenu(target: HTMLElement) {
   const btn = target.querySelector('.sv-grid-col-filter-btn') as HTMLButtonElement
   expect(btn).not.toBeNull()
   btn.click()
-  // GridMenus is a lazy chunk; poll until the popover mounts.
-  await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull())
+  // GridMenus is a lazy chunk, so poll until the popover mounts AND its value
+  // checklist is in the DOM. Waiting only for the popover element returns while
+  // the menu body is still filling in, so a caller that reaches for
+  // `.sv-listbox` can get null - which is how this file flaked under
+  // full-suite parallel load.
+  await vi.waitFor(() => {
+    const menu = target.querySelector('.sv-grid-filter-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelector('.sv-listbox')).not.toBeNull()
+  })
   return target.querySelector('.sv-grid-filter-menu') as HTMLElement
 }