@svgrid/grid 2.6.21 → 2.7.0

package/src/svgrid.group-pagination.test.ts

@@ -1,153 +1,153 @@
-/**
- * DOM: with grouping on, `pageSize` budgets DATA rows, not group banners (#73).
- *
- * The row model hands the view one flat list with group banners interleaved
- * between their children. Slicing that list by `pageSize` spent the budget on
- * banners: ten groups of two at `pageSize: 10` showed roughly three data rows,
- * and with enough small groups a page could show almost none.
- *
- * Now the page window is measured in data rows, and each page reprints the
- * banners its rows sit under - so a group split across a page boundary is
- * labelled on both pages.
- */
-import { afterEach, describe, expect, it } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-  columnGroupingFeature,
-} from './index'
-
-type Row = { id: number; region: string; amount: number }
-
-// Ten groups of two rows - the shape from the report.
-const data: Row[] = []
-for (let g = 0; g < 10; g += 1) {
-  data.push({ id: g * 2, region: `R${g}`, amount: 1 })
-  data.push({ id: g * 2 + 1, region: `R${g}`, amount: 2 })
-}
-
-const columns = [
-  { field: 'region', header: 'Region', width: 120 },
-  { field: 'amount', header: 'Amount', width: 100 },
-]
-
-const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
-const tick = () => new Promise<void>((r) => queueMicrotask(r))
-
-function mountGrid(pageSize: number, groupFooters = false) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  // Grouping state starts empty and is driven through the api - there is no
-  // initial-grouping prop - so group by region as soon as the api lands.
-  let api: { setGroupBy: (ids: string[]) => void } | null = null
-  const app = mount(SvGrid, {
-    target,
-    props: {
-      data,
-      columns,
-      features,
-      groupable: true,
-      groupFooters,
-      onApiReady: (a: never) => { api = a as never },
-      pageable: true,
-      pageSize,
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-        groupedRowModel: createGroupedRowModel(),
-        expandedRowModel: createExpandedRowModel(),
-        paginatedRowModel: createPaginatedRowModel(),
-      },
-      containerHeight: 900,
-      virtualization: false,
-    } as never,
-  })
-  return {
-    target,
-    groupByRegion: () => api?.setGroupBy(['region']),
-    /** Groups render collapsed by default; click every banner to open them. */
-    expandAll: () => {
-      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
-        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
-      }
-    },
-    destroy: () => { unmount(app); target.remove() },
-  }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-const dataRows = (t: HTMLElement) =>
-  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
-    (r) => !r.classList.contains('sv-grid-group-row') && !r.classList.contains('sv-grid-row-spacer'),
-  )
-const groupRows = (t: HTMLElement) => [...t.querySelectorAll('tbody tr.sv-grid-group-row')]
-
-async function grouped(pageSize: number, expand = true, groupFooters = false) {
-  const g = mountGrid(pageSize, groupFooters)
-  cleanup = g.destroy
-  await tick()
-  g.groupByRegion()
-  await tick()
-  if (expand) {
-    g.expandAll()
-    await tick()
-  }
-  return g
-}
-
-describe('grouped pagination (#73)', () => {
-  it('fills the page with pageSize DATA rows, not banners', async () => {
-    const { target } = await grouped(10)
-    // Before the fix the flat slice returned 10 TOTAL rows - banners included -
-    // so only a handful of them were data.
-    expect(dataRows(target)).toHaveLength(10)
-    // Those 10 data rows span 5 groups, so 5 banners come along for free.
-    expect(groupRows(target)).toHaveLength(5)
-  })
-
-  it('reports the data-row count in the pager, not banners + data', async () => {
-    const { target } = await grouped(10)
-    // 20 data rows at pageSize 10 = 2 pages. Counting banners would say 30.
-    expect(target.textContent).toMatch(/of\s+20\b/)
-  })
-
-  it('reprints the banner for a group straddling a page boundary', async () => {
-    const { target } = await grouped(3)
-    // Page 0 holds R0's two rows plus R1's first, so both banners show.
-    const labels = groupRows(target).map((r) => r.textContent ?? '')
-    expect(labels.some((t) => t.includes('R0'))).toBe(true)
-    expect(labels.some((t) => t.includes('R1'))).toBe(true)
-    expect(dataRows(target)).toHaveLength(3)
-  })
-
-  it('does not spend page budget on group footers', async () => {
-    // Footers are inserted after paging, so turning them on must not push data
-    // rows onto the next page.
-    const { target } = await grouped(10, true, true)
-    expect(dataRows(target).filter((r) => !r.classList.contains('sv-grid-group-footer-row')))
-      .toHaveLength(10)
-    expect(target.textContent).toMatch(/of\s+20\b/)
-  })
-
-  it('still fills a page when every group is collapsed', async () => {
-    // Collapsed groups are the visible unit. Treating them as free headers
-    // emptied the page entirely - caught here, not by the pure helper.
-    const { target } = await grouped(4, false)
-    expect(groupRows(target)).toHaveLength(4)
-    expect(dataRows(target)).toHaveLength(0)
-    // 10 collapsed groups over pageSize 4.
-    expect(target.textContent).toMatch(/of\s+10\b/)
-  })
-})
+/**
+ * DOM: with grouping on, `pageSize` budgets DATA rows, not group banners (#73).
+ *
+ * The row model hands the view one flat list with group banners interleaved
+ * between their children. Slicing that list by `pageSize` spent the budget on
+ * banners: ten groups of two at `pageSize: 10` showed roughly three data rows,
+ * and with enough small groups a page could show almost none.
+ *
+ * Now the page window is measured in data rows, and each page reprints the
+ * banners its rows sit under - so a group split across a page boundary is
+ * labelled on both pages.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+  columnGroupingFeature,
+} from './index'
+
+type Row = { id: number; region: string; amount: number }
+
+// Ten groups of two rows - the shape from the report.
+const data: Row[] = []
+for (let g = 0; g < 10; g += 1) {
+  data.push({ id: g * 2, region: `R${g}`, amount: 1 })
+  data.push({ id: g * 2 + 1, region: `R${g}`, amount: 2 })
+}
+
+const columns = [
+  { field: 'region', header: 'Region', width: 120 },
+  { field: 'amount', header: 'Amount', width: 100 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid(pageSize: number, groupFooters = false) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  // Grouping state starts empty and is driven through the api - there is no
+  // initial-grouping prop - so group by region as soon as the api lands.
+  let api: { setGroupBy: (ids: string[]) => void } | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      groupable: true,
+      groupFooters,
+      onApiReady: (a: never) => { api = a as never },
+      pageable: true,
+      pageSize,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 900,
+      virtualization: false,
+    } as never,
+  })
+  return {
+    target,
+    groupByRegion: () => api?.setGroupBy(['region']),
+    /** Groups render collapsed by default; click every banner to open them. */
+    expandAll: () => {
+      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
+        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
+      }
+    },
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const dataRows = (t: HTMLElement) =>
+  [...t.querySelectorAll('tbody tr.sv-grid-row')].filter(
+    (r) => !r.classList.contains('sv-grid-group-row') && !r.classList.contains('sv-grid-row-spacer'),
+  )
+const groupRows = (t: HTMLElement) => [...t.querySelectorAll('tbody tr.sv-grid-group-row')]
+
+async function grouped(pageSize: number, expand = true, groupFooters = false) {
+  const g = mountGrid(pageSize, groupFooters)
+  cleanup = g.destroy
+  await tick()
+  g.groupByRegion()
+  await tick()
+  if (expand) {
+    g.expandAll()
+    await tick()
+  }
+  return g
+}
+
+describe('grouped pagination (#73)', () => {
+  it('fills the page with pageSize DATA rows, not banners', async () => {
+    const { target } = await grouped(10)
+    // Before the fix the flat slice returned 10 TOTAL rows - banners included -
+    // so only a handful of them were data.
+    expect(dataRows(target)).toHaveLength(10)
+    // Those 10 data rows span 5 groups, so 5 banners come along for free.
+    expect(groupRows(target)).toHaveLength(5)
+  })
+
+  it('reports the data-row count in the pager, not banners + data', async () => {
+    const { target } = await grouped(10)
+    // 20 data rows at pageSize 10 = 2 pages. Counting banners would say 30.
+    expect(target.textContent).toMatch(/of\s+20\b/)
+  })
+
+  it('reprints the banner for a group straddling a page boundary', async () => {
+    const { target } = await grouped(3)
+    // Page 0 holds R0's two rows plus R1's first, so both banners show.
+    const labels = groupRows(target).map((r) => r.textContent ?? '')
+    expect(labels.some((t) => t.includes('R0'))).toBe(true)
+    expect(labels.some((t) => t.includes('R1'))).toBe(true)
+    expect(dataRows(target)).toHaveLength(3)
+  })
+
+  it('does not spend page budget on group footers', async () => {
+    // Footers are inserted after paging, so turning them on must not push data
+    // rows onto the next page.
+    const { target } = await grouped(10, true, true)
+    expect(dataRows(target).filter((r) => !r.classList.contains('sv-grid-group-footer-row')))
+      .toHaveLength(10)
+    expect(target.textContent).toMatch(/of\s+20\b/)
+  })
+
+  it('still fills a page when every group is collapsed', async () => {
+    // Collapsed groups are the visible unit. Treating them as free headers
+    // emptied the page entirely - caught here, not by the pure helper.
+    const { target } = await grouped(4, false)
+    expect(groupRows(target)).toHaveLength(4)
+    expect(dataRows(target)).toHaveLength(0)
+    // 10 collapsed groups over pageSize 4.
+    expect(target.textContent).toMatch(/of\s+10\b/)
+  })
+})

package/src/svgrid.in-suggest-snapshot.svelte.test.ts

@@ -0,0 +1,91 @@
+/**
+ * The `in` / `notIn` suggestions dropdown shares the facet scan with the
+ * filter menu's checklist. That scan now also runs the filter pipeline, to
+ * offer only values still reachable under the other columns' filters - which
+ * put an O(rows) pass on the typing path of the chip input, because the
+ * suggestions re-derive on every keystroke.
+ *
+ * They are snapshotted per open instead, the same way the menu's checklist is.
+ * This pins that: typing must not re-scan.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: number; symbol: string }
+const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+describe('in/notIn suggestions', () => {
+  it('scans once per open, not once per keystroke', async () => {
+    const data: Row[] = Array.from({ length: 40 }, (_, i) => ({
+      id: i + 1,
+      symbol: `SYM${String(i).padStart(3, '0')}`,
+    }))
+
+    // Count reads of the accessor the facet scan goes through. A per-keystroke
+    // re-scan shows up here as another 40 reads per character typed.
+    let reads = 0
+    const columns: ColumnDef<typeof features, Row>[] = [
+      {
+        id: 'symbol',
+        header: 'Symbol',
+        width: 200,
+        fieldFn: (row: Row) => {
+          reads += 1
+          return row.symbol
+        },
+      },
+    ]
+
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvGrid<typeof features, Row>, {
+      target,
+      props: { data, columns, features, filterMode: 'row', height: 300 } as never,
+    })
+    await tick()
+
+    // Switch the column to `in`, which is what turns the filter-row box into a
+    // chip input with suggestions.
+    const operatorBtn = target.querySelector(
+      '.sv-grid-filter-operator-btn',
+    ) as HTMLButtonElement
+    operatorBtn.click()
+    await vi.waitFor(() => expect(document.querySelector('.sv-grid-operator-menu')).not.toBeNull())
+    const inItem = Array.from(
+      document.querySelectorAll('.sv-grid-operator-menu .sv-grid-menu-item'),
+    ).find((el) => el.textContent?.trim() === 'In') as HTMLElement
+    inItem.click()
+    await tick()
+
+    const input = target.querySelector(
+      '.sv-grid-filter-chip-input, .sv-grid-filter-value',
+    ) as HTMLInputElement
+    expect(input).not.toBeNull()
+    input.focus()
+    input.dispatchEvent(new Event('focus', { bubbles: true }))
+    await vi.waitFor(() => expect(document.querySelector('.sv-grid-in-suggest')).not.toBeNull())
+
+    const afterOpen = reads
+    expect(afterOpen).toBeGreaterThan(0)
+
+    // Type into the box: the list narrows from the snapshot, no fresh scan.
+    for (const text of ['S', 'SY', 'SYM', 'SYM0', 'SYM00']) {
+      input.value = text
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      await tick()
+    }
+    expect(document.querySelector('.sv-grid-in-suggest')).not.toBeNull()
+    expect(reads).toBe(afterOpen)
+
+    unmount(app)
+    target.remove()
+  })
+})

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

@@ -0,0 +1,204 @@
+/**
+ * The scroll-close gate for the CELL CONTEXT MENU and the COMMENT EDITOR.
+ *
+ * Both are positioned from a one-time cursor measurement and rendered
+ * `position: fixed`, exactly like the column / filter / operator menus - but
+ * both were missing from the effect that closes those on an outside scroll, so
+ * after any scroll they floated over unrelated cells.
+ *
+ * The comment editor is closed by SAVING, not discarding. Backdrop-click and
+ * Escape throw the draft away and that is right, because both are the user
+ * saying "away with this". A scroll is not a dismissal gesture, so it must not
+ * destroy text the user has typed.
+ *
+ * The sibling file `svgrid.filter-menu-scroll.test.ts` covers the four menus
+ * that were already gated, including the must-NOT-close cases.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; team: string }
+const features = tableFeatures({ rowSortingFeature })
+const rows: Row[] = Array.from({ length: 6 }, (_, i) => ({
+  id: i + 1,
+  name: `Person ${i + 1}`,
+  team: ['A', 'B'][i % 2]!,
+}))
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200, editorType: 'text' },
+  { field: 'team', header: 'Team', width: 160, editorType: 'text' },
+]
+
+/** Macrotask boundary - drains the overlay's lazy import() plus its flush. */
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+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(),
+            filteredRowModel: createFilteredRowModel(),
+            sortedRowModel: createSortedRowModel(sortFns),
+          },
+          rowHeight: 32,
+          containerHeight: 240,
+          virtualization: false,
+          // `comment` is not one of the default items - ask for it by id so
+          // the comment editor is reachable at all.
+          contextMenu: ['copy', 'comment'],
+          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 openContextMenu(target: HTMLElement) {
+  const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]') as HTMLElement
+  const r = cell.getBoundingClientRect()
+  cell.dispatchEvent(
+    new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: r.x + 4, clientY: r.y + 4 }),
+  )
+  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
+}
+
+/** Right-click, then pick "Edit comment" to get the comment popover open. */
+async function openCommentEditor(target: HTMLElement) {
+  const menu = await openContextMenu(target)
+  const item = [...menu.querySelectorAll<HTMLElement>('.sv-grid-menu-item')].find((b) =>
+    (b.textContent ?? '').includes('Edit comment'),
+  )
+  expect(item, 'the "Edit comment" item should be in the configured menu').toBeTruthy()
+  item!.click()
+  await vi.waitFor(() => {
+    expect(target.querySelector('.sv-grid-comment-editor')).not.toBeNull()
+  })
+  return target.querySelector('.sv-grid-comment-editor') as HTMLElement
+}
+
+/** Scroll something that is NOT inside any menu. */
+function scrollOutside(target: HTMLElement) {
+  const viewport = target.querySelector('.sv-grid-viewport') ?? target
+  viewport.dispatchEvent(new Event('scroll'))
+}
+
+describe('cell context menu - scroll', () => {
+  it('closes when something outside it scrolls', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    await openContextMenu(target)
+
+    scrollOutside(target)
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-context-menu')).toBeNull())
+
+    destroy()
+  })
+
+  it('stays open while the menu itself scrolls', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    const menu = await openContextMenu(target)
+
+    menu.dispatchEvent(new Event('scroll'))
+    await tick()
+    expect(target.querySelector('.sv-grid-context-menu')).not.toBeNull()
+
+    destroy()
+  })
+
+  it('carries the grid id, so a second grid can tell whose menu it is', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    const menu = await openContextMenu(target)
+
+    const id = menu.getAttribute('data-svgrid-menu')
+    expect(id).toBeTruthy()
+    // The same id the grid stamps on its cells, so the two are one grid.
+    const cellId = target.querySelector('.sv-grid-cell[id]')?.getAttribute('id')
+    expect(cellId).toContain(id!)
+
+    destroy()
+  })
+})
+
+describe('comment editor - scroll', () => {
+  it('closes when something outside it scrolls', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    await openCommentEditor(target)
+
+    scrollOutside(target)
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-comment-editor')).toBeNull())
+
+    destroy()
+  })
+
+  it('SAVES the draft rather than throwing it away', async () => {
+    const changes: Array<{ note: string }> = []
+    const { target, destroy } = await mountGrid({
+      onNoteChange: (e: { note: string }) => changes.push(e),
+    })
+    await tick()
+    const editor = await openCommentEditor(target)
+
+    const textarea = editor.querySelector('textarea') as HTMLTextAreaElement
+    textarea.value = 'half-written thought'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+
+    scrollOutside(target)
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-comment-editor')).toBeNull())
+
+    expect(changes.map((c) => c.note)).toContain('half-written thought')
+
+    destroy()
+  })
+
+  it('still DISCARDS on Escape, which is a real dismissal', async () => {
+    const changes: Array<{ note: string }> = []
+    const { target, destroy } = await mountGrid({
+      onNoteChange: (e: { note: string }) => changes.push(e),
+    })
+    await tick()
+    const editor = await openCommentEditor(target)
+
+    const textarea = editor.querySelector('textarea') as HTMLTextAreaElement
+    textarea.value = 'never mind'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-comment-editor')).toBeNull())
+
+    expect(changes).toHaveLength(0)
+
+    destroy()
+  })
+})