@svgrid/grid 2.7.0 → 3.0.1

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

@@ -1,127 +1,127 @@
-/**
- * Track C: free-text autocomplete cell type + editable cell comments.
- */
-import { describe, expect, it, vi } 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: number; name: string; city: string }
-const features = tableFeatures({})
-const rows: Row[] = [
-  { id: 1, name: 'Ann', city: 'Paris' },
-  { id: 2, name: 'Bo', city: 'Berlin' },
-]
-// Macrotask boundary: drains pending microtasks incl. the menu overlay's lazy
-// import() + flush, so the context menu is mounted before assertions (GridMenus
-// loads lazily as its own chunk the first time a menu/tooltip opens).
-const tick = () => new Promise<void>((r) => setTimeout(r))
-
-function mountGrid(extraCols: ColumnDef<typeof features, Row>[], props: Record<string, unknown> = {}) {
-  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
-    (res) => {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGrid, {
-        target,
-        props: {
-          data: rows,
-          columns: [{ field: 'name', header: 'Name', width: 160, editorType: 'text' }, ...extraCols],
-          features,
-          _rowModels: { coreRowModel: createCoreRowModel() },
-          rowHeight: 32,
-          containerHeight: 360,
-          virtualization: false,
-          enableInlineEditing: true,
-          enableCellSelection: true,
-          onApiReady(api: SvGridApi<typeof features, Row>) {
-            res({ api, target, destroy: () => { unmount(app); target.remove() } })
-          },
-          ...props,
-        } as any,
-      })
-    },
-  )
-}
-
-function dataCell(target: HTMLElement, col: number) {
-  return target.querySelectorAll('.sv-grid-cell[data-svgrid-row]')[col] as HTMLElement
-}
-
-describe('autocomplete cell type', () => {
-  it('filters suggestions as you type and commits the picked option', async () => {
-    const { api, target, destroy } = await mountGrid([
-      {
-        field: 'city',
-        header: 'City',
-        width: 200,
-        editorType: 'autocomplete',
-        editorOptions: ['Paris', 'Berlin', 'Boston', 'Brussels'],
-      },
-    ])
-    await tick()
-    // city is the 2nd column => index 1 in the first row's cells
-    const cell = target.querySelectorAll('.sv-grid-cell[data-svgrid-row="0"]')[1] as HTMLElement
-    cell.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
-    // The editor UI is a lazy chunk (SvGridCellEditor); poll for the input
-    // rather than assuming one tick is enough for the import to land.
-    await vi.waitFor(() =>
-      expect(target.querySelector('.sv-grid-cell-editor-autocomplete')).not.toBeNull(),
-    )
-    const input = target.querySelector('.sv-grid-cell-editor-autocomplete') as HTMLInputElement
-    expect(input).not.toBeNull()
-    input.value = 'B'
-    input.dispatchEvent(new Event('input', { bubbles: true }))
-    await tick()
-    const opts = [...target.querySelectorAll('.sv-grid-autocomplete-option')].map((b) => b.textContent?.trim())
-    // 'B' matches Berlin, Boston, Brussels - not Paris
-    expect(opts).toEqual(['Berlin', 'Boston', 'Brussels'])
-    const berlin = [...target.querySelectorAll('.sv-grid-autocomplete-option')].find(
-      (b) => b.textContent?.trim() === 'Boston',
-    ) as HTMLElement
-    berlin.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-    await tick()
-    expect(api.getCellValue(0, 'city')).toBe('Boston')
-    destroy()
-  })
-})
-
-describe('editable comments', () => {
-  it('adds a comment via the context menu and emits onNoteChange', async () => {
-    const changes: Array<{ rowId: string; columnId: string; note: string }> = []
-    const { target, destroy } = await mountGrid(
-      [{ field: 'city', header: 'City', width: 200, editorType: 'text' }],
-      { contextMenu: true, editableComments: true, onNoteChange: (e: any) => changes.push(e) },
-    )
-    await tick()
-    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.
-    // 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
-    expect(editItem).toBeTruthy()
-    editItem.click()
-    await tick()
-    const ta = target.querySelector('.sv-grid-comment-textarea') as HTMLTextAreaElement
-    expect(ta).not.toBeNull()
-    ta.value = 'Needs review'
-    ta.dispatchEvent(new Event('input', { bubbles: true }))
-    await tick()
-    ;(target.querySelector('.sv-grid-comment-save') as HTMLElement).click()
-    await tick()
-    expect(changes.length).toBe(1)
-    expect(changes[0]!.note).toBe('Needs review')
-    expect(target.querySelector('.sv-grid-comment-editor')).toBeNull()
-    destroy()
-  })
-})
+/**
+ * Track C: free-text autocomplete cell type + editable cell comments.
+ */
+import { describe, expect, it, vi } 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: number; name: string; city: string }
+const features = tableFeatures({})
+const rows: Row[] = [
+  { id: 1, name: 'Ann', city: 'Paris' },
+  { id: 2, name: 'Bo', city: 'Berlin' },
+]
+// Macrotask boundary: drains pending microtasks incl. the menu overlay's lazy
+// import() + flush, so the context menu is mounted before assertions (GridMenus
+// loads lazily as its own chunk the first time a menu/tooltip opens).
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function mountGrid(extraCols: ColumnDef<typeof features, Row>[], props: Record<string, unknown> = {}) {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: [{ field: 'name', header: 'Name', width: 160, editorType: 'text' }, ...extraCols],
+          features,
+          _rowModels: { coreRowModel: createCoreRowModel() },
+          rowHeight: 32,
+          containerHeight: 360,
+          virtualization: false,
+          enableInlineEditing: true,
+          enableCellSelection: true,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+          ...props,
+        } as any,
+      })
+    },
+  )
+}
+
+function dataCell(target: HTMLElement, col: number) {
+  return target.querySelectorAll('.sv-grid-cell[data-svgrid-row]')[col] as HTMLElement
+}
+
+describe('autocomplete cell type', () => {
+  it('filters suggestions as you type and commits the picked option', async () => {
+    const { api, target, destroy } = await mountGrid([
+      {
+        field: 'city',
+        header: 'City',
+        width: 200,
+        editorType: 'autocomplete',
+        editorOptions: ['Paris', 'Berlin', 'Boston', 'Brussels'],
+      },
+    ])
+    await tick()
+    // city is the 2nd column => index 1 in the first row's cells
+    const cell = target.querySelectorAll('.sv-grid-cell[data-svgrid-row="0"]')[1] as HTMLElement
+    cell.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    // The editor UI is a lazy chunk (SvGridCellEditor); poll for the input
+    // rather than assuming one tick is enough for the import to land.
+    await vi.waitFor(() =>
+      expect(target.querySelector('.sv-grid-cell-editor-autocomplete')).not.toBeNull(),
+    )
+    const input = target.querySelector('.sv-grid-cell-editor-autocomplete') as HTMLInputElement
+    expect(input).not.toBeNull()
+    input.value = 'B'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+    const opts = [...target.querySelectorAll('.sv-grid-autocomplete-option')].map((b) => b.textContent?.trim())
+    // 'B' matches Berlin, Boston, Brussels - not Paris
+    expect(opts).toEqual(['Berlin', 'Boston', 'Brussels'])
+    const berlin = [...target.querySelectorAll('.sv-grid-autocomplete-option')].find(
+      (b) => b.textContent?.trim() === 'Boston',
+    ) as HTMLElement
+    berlin.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await tick()
+    expect(api.getCellValue(0, 'city')).toBe('Boston')
+    destroy()
+  })
+})
+
+describe('editable comments', () => {
+  it('adds a comment via the context menu and emits onNoteChange', async () => {
+    const changes: Array<{ rowId: string; columnId: string; note: string }> = []
+    const { target, destroy } = await mountGrid(
+      [{ field: 'city', header: 'City', width: 200, editorType: 'text' }],
+      { contextMenu: true, editableComments: true, onNoteChange: (e: any) => changes.push(e) },
+    )
+    await tick()
+    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.
+    // 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
+    expect(editItem).toBeTruthy()
+    editItem.click()
+    await tick()
+    const ta = target.querySelector('.sv-grid-comment-textarea') as HTMLTextAreaElement
+    expect(ta).not.toBeNull()
+    ta.value = 'Needs review'
+    ta.dispatchEvent(new Event('input', { bubbles: true }))
+    await tick()
+    ;(target.querySelector('.sv-grid-comment-save') as HTMLElement).click()
+    await tick()
+    expect(changes.length).toBe(1)
+    expect(changes[0]!.note).toBe('Needs review')
+    expect(target.querySelector('.sv-grid-comment-editor')).toBeNull()
+    destroy()
+  })
+})

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

@@ -1,147 +1,147 @@
-/**
- * Right-click context menu (Track A). Mounts a grid with `contextMenu`,
- * fires a synthetic `contextmenu` event on a cell, and asserts the menu
- * opens with the expected items and that actions/close work.
- */
-import { describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  createCoreRowModel,
-  createFilteredRowModel,
-  createSortedRowModel,
-  rowSelectionFeature,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-import type { ContextMenuItem } from './SvGrid.types'
-
-type Row = { id: number; name: string; team: string }
-const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
-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 pending microtasks incl. the menu overlay's lazy
-// import() + flush, so the context menu is mounted before assertions (GridMenus
-// loads lazily as its own chunk the first time a menu/tooltip opens).
-const tick = () => new Promise<void>((r) => setTimeout(r))
-
-function mountGrid(contextMenu: 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: 400,
-          virtualization: false,
-          enableCellSelection: true,
-          contextMenu,
-          onApiReady(api: SvGridApi<typeof features, Row>) {
-            res({ api, target, destroy: () => { unmount(app); target.remove() } })
-          },
-        } as any,
-      })
-      queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
-    },
-  )
-}
-
-function rightClickFirstCell(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 }),
-  )
-  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()
-    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')
-    expect(labels).toContain('Remove column')
-    destroy()
-  })
-
-  it('does not open when contextMenu is omitted (native menu shows)', async () => {
-    const { target, destroy } = await mountGrid(undefined)
-    await tick()
-    const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]') as HTMLElement
-    const ev = new MouseEvent('contextmenu', { bubbles: true, cancelable: true })
-    cell.dispatchEvent(ev)
-    await tick()
-    expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
-    expect(ev.defaultPrevented).toBe(false)
-    destroy()
-  })
-
-  it('renders only the configured custom items and runs the action', async () => {
-    let ran = 0
-    const items: ContextMenuItem<Row>[] = [
-      'copy',
-      'separator',
-      { key: 'flag', label: 'Flag row', action: () => { ran += 1 } },
-    ]
-    const { target, destroy } = await mountGrid(items)
-    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(),
-    )
-    expect(labels).toEqual(['Copy', 'Flag row'])
-    const flag = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find(
-      (b) => b.textContent?.trim() === 'Flag row',
-    ) as HTMLElement
-    flag.click()
-    expect(ran).toBe(1)
-    await tick()
-    expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
-    destroy()
-  })
-})
+/**
+ * Right-click context menu (Track A). Mounts a grid with `contextMenu`,
+ * fires a synthetic `contextmenu` event on a cell, and asserts the menu
+ * opens with the expected items and that actions/close work.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+import type { ContextMenuItem } from './SvGrid.types'
+
+type Row = { id: number; name: string; team: string }
+const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
+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 pending microtasks incl. the menu overlay's lazy
+// import() + flush, so the context menu is mounted before assertions (GridMenus
+// loads lazily as its own chunk the first time a menu/tooltip opens).
+const tick = () => new Promise<void>((r) => setTimeout(r))
+
+function mountGrid(contextMenu: 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: 400,
+          virtualization: false,
+          enableCellSelection: true,
+          contextMenu,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as any,
+      })
+      queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+    },
+  )
+}
+
+function rightClickFirstCell(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 }),
+  )
+  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()
+    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')
+    expect(labels).toContain('Remove column')
+    destroy()
+  })
+
+  it('does not open when contextMenu is omitted (native menu shows)', async () => {
+    const { target, destroy } = await mountGrid(undefined)
+    await tick()
+    const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]') as HTMLElement
+    const ev = new MouseEvent('contextmenu', { bubbles: true, cancelable: true })
+    cell.dispatchEvent(ev)
+    await tick()
+    expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
+    expect(ev.defaultPrevented).toBe(false)
+    destroy()
+  })
+
+  it('renders only the configured custom items and runs the action', async () => {
+    let ran = 0
+    const items: ContextMenuItem<Row>[] = [
+      'copy',
+      'separator',
+      { key: 'flag', label: 'Flag row', action: () => { ran += 1 } },
+    ]
+    const { target, destroy } = await mountGrid(items)
+    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(),
+    )
+    expect(labels).toEqual(['Copy', 'Flag row'])
+    const flag = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find(
+      (b) => b.textContent?.trim() === 'Flag row',
+    ) as HTMLElement
+    flag.click()
+    expect(ran).toBe(1)
+    await tick()
+    expect(target.querySelector('.sv-grid-context-menu')).toBeNull()
+    destroy()
+  })
+})