@svgrid/grid 2.7.0 → 3.0.1

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

@@ -1,112 +1,112 @@
-/**
- * Filter menu + scroll. The funnel popover is position:fixed and anchored by a
- * one-time measurement, so a scroll of the page/grid has to close it - but
- * scrolling the popover's OWN body or its facet list must not, or the value
- * list is unusable (reported on the 03-excel-filters demo).
- */
-import { describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  columnFilteringFeature,
-  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, columnFilteringFeature })
-const rows: Row[] = Array.from({ length: 12 }, (_, i) => ({
-  id: i + 1,
-  name: `Person ${i + 1}`,
-  team: ['A', 'B', 'C'][i % 3]!,
-}))
-const cols: ColumnDef<typeof features, Row>[] = [
-  { field: 'name', header: 'Name', width: 200, editorType: 'text' },
-  { field: 'team', header: 'Team', width: 160, editorType: 'text' },
-]
-const tick = () => new Promise<void>((r) => setTimeout(r))
-
-function mountGrid() {
-  return new Promise<{ 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: 400,
-        virtualization: false,
-        filterMode: 'menu',
-        showColumnFilters: true,
-        onApiReady(_api: SvGridApi<typeof features, Row>) {
-          res({ target, destroy: () => { unmount(app); target.remove() } })
-        },
-      } as any,
-    })
-    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
-  })
-}
-
-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, 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
-}
-
-describe('SvGrid filter menu scrolling', () => {
-  it('stays open while its own body / facet list is scrolled', async () => {
-    const { target, destroy } = await mountGrid()
-    await tick()
-    const menu = await openFilterMenu(target)
-
-    menu.dispatchEvent(new Event('scroll'))
-    await tick()
-    expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull()
-
-    // The value checklist is an SvListBox; under the virtualization threshold
-    // it scrolls natively, so it still emits the scroll that must be ignored.
-    const facets = menu.querySelector('.sv-listbox')
-    expect(facets).not.toBeNull()
-    facets!.dispatchEvent(new Event('scroll'))
-    await tick()
-    expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull()
-
-    destroy()
-  })
-
-  it('still closes when something outside it scrolls', async () => {
-    const { target, destroy } = await mountGrid()
-    await tick()
-    await openFilterMenu(target)
-
-    const viewport = target.querySelector('.sv-grid-viewport') ?? target
-    viewport.dispatchEvent(new Event('scroll'))
-    await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).toBeNull())
-
-    destroy()
-  })
-})
+/**
+ * Filter menu + scroll. The funnel popover is position:fixed and anchored by a
+ * one-time measurement, so a scroll of the page/grid has to close it - but
+ * scrolling the popover's OWN body or its facet list must not, or the value
+ * list is unusable (reported on the 03-excel-filters demo).
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  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, columnFilteringFeature })
+const rows: Row[] = Array.from({ length: 12 }, (_, i) => ({
+  id: i + 1,
+  name: `Person ${i + 1}`,
+  team: ['A', 'B', 'C'][i % 3]!,
+}))
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200, editorType: 'text' },
+  { field: 'team', header: 'Team', width: 160, editorType: 'text' },
+]
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function mountGrid() {
+  return new Promise<{ 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: 400,
+        virtualization: false,
+        filterMode: 'menu',
+        showColumnFilters: true,
+        onApiReady(_api: SvGridApi<typeof features, Row>) {
+          res({ target, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+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, 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
+}
+
+describe('SvGrid filter menu scrolling', () => {
+  it('stays open while its own body / facet list is scrolled', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    const menu = await openFilterMenu(target)
+
+    menu.dispatchEvent(new Event('scroll'))
+    await tick()
+    expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull()
+
+    // The value checklist is an SvListBox; under the virtualization threshold
+    // it scrolls natively, so it still emits the scroll that must be ignored.
+    const facets = menu.querySelector('.sv-listbox')
+    expect(facets).not.toBeNull()
+    facets!.dispatchEvent(new Event('scroll'))
+    await tick()
+    expect(target.querySelector('.sv-grid-filter-menu')).not.toBeNull()
+
+    destroy()
+  })
+
+  it('still closes when something outside it scrolls', async () => {
+    const { target, destroy } = await mountGrid()
+    await tick()
+    await openFilterMenu(target)
+
+    const viewport = target.querySelector('.sv-grid-viewport') ?? target
+    viewport.dispatchEvent(new Event('scroll'))
+    await vi.waitFor(() => expect(target.querySelector('.sv-grid-filter-menu')).toBeNull())
+
+    destroy()
+  })
+})

package/src/svgrid.grand-total.test.ts

@@ -1,188 +1,188 @@
-/**
- * DOM: `grandTotalRow` appends one totals row for the whole filtered set.
- *
- * It is shaped like a group footer (so totals render under their own columns
- * through the normal cell path) but closes the dataset rather than a group:
- * it must appear exactly once, last, on the LAST page only, aggregate the
- * LEAF rows (not the group banners, which already carry subtotals and would
- * otherwise be counted twice), and follow the filtered set rather than the
- * raw data.
- */
-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 }
-
-const data: Row[] = [
-  { id: 1, region: 'East', amount: 10 },
-  { id: 2, region: 'East', amount: 5 },
-  { id: 3, region: 'West', amount: 7 },
-]
-
-const columns = [
-  { field: 'region', header: 'Region', width: 120 },
-  { field: 'amount', header: 'Amount', width: 100, aggregate: 'sum' },
-]
-
-const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
-const tick = () => new Promise<void>((r) => queueMicrotask(r))
-
-type Api = {
-  setGroupBy: (ids: string[]) => void
-  nextPage: () => void
-  setState: (s: Record<string, unknown>) => void
-}
-
-function mountGrid(props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  let api: Api | null = null
-  const app = mount(SvGrid, {
-    target,
-    props: {
-      data,
-      columns,
-      features,
-      groupable: true,
-      onApiReady: (a: never) => { api = a as never },
-      _rowModels: {
-        coreRowModel: createCoreRowModel(),
-        filteredRowModel: createFilteredRowModel(),
-        sortedRowModel: createSortedRowModel(sortFns),
-        groupedRowModel: createGroupedRowModel(),
-        expandedRowModel: createExpandedRowModel(),
-        paginatedRowModel: createPaginatedRowModel(),
-      },
-      containerHeight: 600,
-      virtualization: false,
-      ...props,
-    } as never,
-  })
-  return {
-    target,
-    api: () => api,
-    ready: async () => { await tick() },
-    group: async () => {
-      await tick()
-      api?.setGroupBy(['region'])
-      await tick()
-      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
-        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
-      }
-      await tick()
-    },
-    destroy: () => { unmount(app); target.remove() },
-  }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null })
-
-const totals = (t: HTMLElement) => [...t.querySelectorAll('tr.sv-grid-grand-total-row')]
-
-describe('grandTotalRow', () => {
-  it('renders nothing when off', async () => {
-    const g = mountGrid({})
-    cleanup = g.destroy
-    await g.ready()
-    expect(totals(g.target)).toHaveLength(0)
-  })
-
-  it('appends exactly one total row on a flat (ungrouped) grid', async () => {
-    const g = mountGrid({ grandTotalRow: true })
-    cleanup = g.destroy
-    await g.ready()
-    const rows = totals(g.target)
-    expect(rows).toHaveLength(1)
-    // 10 + 5 + 7
-    expect(rows[0]?.textContent).toContain('22')
-  })
-
-  it('is the last row in the body', async () => {
-    const g = mountGrid({ grandTotalRow: true })
-    cleanup = g.destroy
-    await g.ready()
-    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
-    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
-  })
-
-  it('counts leaf rows once when grouping is on (banners are not double-counted)', async () => {
-    const g = mountGrid({ grandTotalRow: true })
-    cleanup = g.destroy
-    await g.group()
-    const rows = totals(g.target)
-    expect(rows).toHaveLength(1)
-    // Still 22, not 44 - the East(15)/West(7) banners must not be summed too.
-    expect(rows[0]?.textContent).toContain('22')
-    expect(rows[0]?.textContent).not.toContain('44')
-  })
-
-  it('coexists with group footers without becoming one of them', async () => {
-    const g = mountGrid({ grandTotalRow: true, groupFooters: true })
-    cleanup = g.destroy
-    await g.group()
-    // Two group subtotals + one grand total, and the grand total is last.
-    expect(g.target.querySelectorAll('tr.sv-grid-group-footer-row')).toHaveLength(3)
-    expect(totals(g.target)).toHaveLength(1)
-    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
-    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
-  })
-
-  it('is not an expandable banner', async () => {
-    const g = mountGrid({ grandTotalRow: true })
-    cleanup = g.destroy
-    await g.ready()
-    const row = totals(g.target)[0]!
-    expect(row.classList.contains('sv-grid-group-row')).toBe(false)
-    expect(row.querySelector('.sv-grid-group-toggle')).toBeNull()
-  })
-
-  it('appears only on the last page when paginating', async () => {
-    // pageSize 2 over 3 rows: page 0 has no total, page 1 (the last) has it.
-    const g = mountGrid({ grandTotalRow: true, pageable: true, pageSize: 2 })
-    cleanup = g.destroy
-    await g.ready()
-    expect(totals(g.target)).toHaveLength(0)
-    g.api()?.nextPage()
-    await tick()
-    expect(totals(g.target)).toHaveLength(1)
-    // The total is over the whole set (22), not just the last page's row.
-    expect(totals(g.target)[0]?.textContent).toContain('22')
-  })
-
-  it('totals the FILTERED set, not the raw data', async () => {
-    const g = mountGrid({ grandTotalRow: true })
-    cleanup = g.destroy
-    await g.ready()
-    g.api()?.setState({ globalFilter: 'East' })
-    await tick()
-    // East only: 10 + 5 = 15.
-    expect(totals(g.target)[0]?.textContent).toContain('15')
-  })
-
-  it('renders no total row when no column declares an aggregate', async () => {
-    const g = mountGrid({
-      grandTotalRow: true,
-      columns: [
-        { field: 'region', header: 'Region', width: 120 },
-        { field: 'amount', header: 'Amount', width: 100 },
-      ],
-    })
-    cleanup = g.destroy
-    await g.ready()
-    expect(totals(g.target)).toHaveLength(0)
-  })
-})
+/**
+ * DOM: `grandTotalRow` appends one totals row for the whole filtered set.
+ *
+ * It is shaped like a group footer (so totals render under their own columns
+ * through the normal cell path) but closes the dataset rather than a group:
+ * it must appear exactly once, last, on the LAST page only, aggregate the
+ * LEAF rows (not the group banners, which already carry subtotals and would
+ * otherwise be counted twice), and follow the filtered set rather than the
+ * raw data.
+ */
+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 }
+
+const data: Row[] = [
+  { id: 1, region: 'East', amount: 10 },
+  { id: 2, region: 'East', amount: 5 },
+  { id: 3, region: 'West', amount: 7 },
+]
+
+const columns = [
+  { field: 'region', header: 'Region', width: 120 },
+  { field: 'amount', header: 'Amount', width: 100, aggregate: 'sum' },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature })
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+type Api = {
+  setGroupBy: (ids: string[]) => void
+  nextPage: () => void
+  setState: (s: Record<string, unknown>) => void
+}
+
+function mountGrid(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: Api | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      groupable: true,
+      onApiReady: (a: never) => { api = a as never },
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      ...props,
+    } as never,
+  })
+  return {
+    target,
+    api: () => api,
+    ready: async () => { await tick() },
+    group: async () => {
+      await tick()
+      api?.setGroupBy(['region'])
+      await tick()
+      for (const btn of target.querySelectorAll<HTMLButtonElement>('.sv-grid-group-toggle')) {
+        if (btn.getAttribute('aria-expanded') !== 'true') btn.click()
+      }
+      await tick()
+    },
+    destroy: () => { unmount(app); target.remove() },
+  }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+const totals = (t: HTMLElement) => [...t.querySelectorAll('tr.sv-grid-grand-total-row')]
+
+describe('grandTotalRow', () => {
+  it('renders nothing when off', async () => {
+    const g = mountGrid({})
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+  })
+
+  it('appends exactly one total row on a flat (ungrouped) grid', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const rows = totals(g.target)
+    expect(rows).toHaveLength(1)
+    // 10 + 5 + 7
+    expect(rows[0]?.textContent).toContain('22')
+  })
+
+  it('is the last row in the body', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
+    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
+  })
+
+  it('counts leaf rows once when grouping is on (banners are not double-counted)', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.group()
+    const rows = totals(g.target)
+    expect(rows).toHaveLength(1)
+    // Still 22, not 44 - the East(15)/West(7) banners must not be summed too.
+    expect(rows[0]?.textContent).toContain('22')
+    expect(rows[0]?.textContent).not.toContain('44')
+  })
+
+  it('coexists with group footers without becoming one of them', async () => {
+    const g = mountGrid({ grandTotalRow: true, groupFooters: true })
+    cleanup = g.destroy
+    await g.group()
+    // Two group subtotals + one grand total, and the grand total is last.
+    expect(g.target.querySelectorAll('tr.sv-grid-group-footer-row')).toHaveLength(3)
+    expect(totals(g.target)).toHaveLength(1)
+    const bodyRows = [...g.target.querySelectorAll('tbody tr')]
+    expect(bodyRows.at(-1)?.classList.contains('sv-grid-grand-total-row')).toBe(true)
+  })
+
+  it('is not an expandable banner', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    const row = totals(g.target)[0]!
+    expect(row.classList.contains('sv-grid-group-row')).toBe(false)
+    expect(row.querySelector('.sv-grid-group-toggle')).toBeNull()
+  })
+
+  it('appears only on the last page when paginating', async () => {
+    // pageSize 2 over 3 rows: page 0 has no total, page 1 (the last) has it.
+    const g = mountGrid({ grandTotalRow: true, pageable: true, pageSize: 2 })
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+    g.api()?.nextPage()
+    await tick()
+    expect(totals(g.target)).toHaveLength(1)
+    // The total is over the whole set (22), not just the last page's row.
+    expect(totals(g.target)[0]?.textContent).toContain('22')
+  })
+
+  it('totals the FILTERED set, not the raw data', async () => {
+    const g = mountGrid({ grandTotalRow: true })
+    cleanup = g.destroy
+    await g.ready()
+    g.api()?.setState({ globalFilter: 'East' })
+    await tick()
+    // East only: 10 + 5 = 15.
+    expect(totals(g.target)[0]?.textContent).toContain('15')
+  })
+
+  it('renders no total row when no column declares an aggregate', async () => {
+    const g = mountGrid({
+      grandTotalRow: true,
+      columns: [
+        { field: 'region', header: 'Region', width: 120 },
+        { field: 'amount', header: 'Amount', width: 100 },
+      ],
+    })
+    cleanup = g.destroy
+    await g.ready()
+    expect(totals(g.target)).toHaveLength(0)
+  })
+})