@svgrid/grid 2.6.22 → 2.6.23

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()
+  })
+})

package/src/svgrid.selection-bar-seam.test.ts

@@ -0,0 +1,185 @@
+/**
+ * The FREE half of the selection bar: the prop, the normalisation of its three
+ * shapes, and what shows when no Enterprise renderer is registered.
+ *
+ * The bar itself is Pro and lives behind `registerSelectionBarView`, so this
+ * suite deliberately never registers one - it asserts the upsell path and the
+ * config the renderer would receive. The rendered bar is covered by
+ * `selection-bar.dom.test.ts` in @svgrid/enterprise.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  hasSelectionBarView,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowSortingFeature, rowSelectionFeature })
+const rows: Row[] = [
+  { id: 1, name: 'Ada' },
+  { id: 2, name: 'Grace' },
+]
+const cols: ColumnDef<typeof features, Row>[] = [{ field: 'name', header: 'Name', width: 160 }]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const UPSELL = '.sv-grid-selection-bar-upsell'
+
+function mountGrid(selectionBar: 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() },
+          getRowId: (r: Row) => String(r.id),
+          containerHeight: 200,
+          virtualization: false,
+          showRowSelection: true,
+          selectionBar,
+          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')) })
+    },
+  )
+}
+
+describe('selectionBar - without the Enterprise renderer', () => {
+  it('reports that no renderer is registered', () => {
+    // If this is ever true here, the suite is testing the Pro path by accident
+    // and every assertion below is meaningless.
+    expect(hasSelectionBarView()).toBe(false)
+  })
+
+  it('shows nothing at all until a row is selected', async () => {
+    const { target, destroy } = await mountGrid(true)
+    await tick()
+    expect(target.querySelector(UPSELL)).toBeNull()
+    destroy()
+  })
+
+  it('shows the upsell in the bar position once rows are selected', async () => {
+    const { api, target, destroy } = await mountGrid(true)
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+
+    const note = target.querySelector(UPSELL)!
+    expect(note.getAttribute('role')).toBe('note')
+    expect(note.textContent).toContain('@svgrid/enterprise')
+    expect(note.textContent).toContain('enableSelectionBar()')
+    destroy()
+  })
+
+  it('says a license is needed, and links to it', async () => {
+    // Naming the package is what unblocks a developer trying it; saying a key
+    // is needed is what they have to know before shipping. Enterprise is
+    // SOFT-gated, so the wording must not imply the feature is inert without
+    // one - it says "watermark", which is what actually happens.
+    const { api, target, destroy } = await mountGrid(true)
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+
+    const license = target.querySelector('.sv-grid-upsell-license')!
+    expect(license).not.toBeNull()
+    expect(license.textContent).toContain('license key')
+    expect(license.textContent).toContain('watermark')
+
+    const link = license.querySelector('a')!
+    expect(link.getAttribute('href')).toBe('https://svgrid.com/pricing/')
+    // Opening a pricing page must not navigate the host app away.
+    expect(link.getAttribute('target')).toBe('_blank')
+    expect(link.getAttribute('rel')).toContain('noopener')
+
+    destroy()
+  })
+
+  it('is localizable, like the rest of the grid chrome', async () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let api: SvGridApi<typeof features, Row>
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows,
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        showRowSelection: true,
+        selectionBar: true,
+        localization: { text: { upsellLicense: 'Lizenz erforderlich.' } },
+        onApiReady: (a: SvGridApi<typeof features, Row>) => (api = a),
+      } as any,
+    })
+    await tick()
+    api!.selectRows(['1'])
+    await vi.waitFor(() => {
+      expect(target.querySelector('.sv-grid-upsell-license')?.textContent).toContain(
+        'Lizenz erforderlich.',
+      )
+    })
+    unmount(app)
+    target.remove()
+  })
+
+  it('places the upsell on the edge the real bar would use', async () => {
+    // So installing enterprise does not move the thing the user was looking at.
+    const { api, target, destroy } = await mountGrid({ position: 'top', actions: [] })
+    await tick()
+    api.selectRows(['1'])
+    await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+    expect(target.querySelector(UPSELL)!.getAttribute('data-position')).toBe('top')
+    destroy()
+  })
+
+  it('stays out of the way entirely when the prop is unset or false', async () => {
+    for (const prop of [undefined, false]) {
+      const { api, target, destroy } = await mountGrid(prop)
+      await tick()
+      api.selectRows(['1'])
+      await tick()
+      await tick()
+      expect(target.querySelector(UPSELL), `selectionBar={${String(prop)}}`).toBeNull()
+      destroy()
+    }
+  })
+})
+
+describe('selectionBar - the three prop shapes all reach the renderer', () => {
+  // Each shape has to produce a bar. What lands ON it is asserted against the
+  // real renderer in the enterprise suite; here the question is only whether
+  // the prop was understood at all.
+  const shapes: Array<[string, unknown]> = [
+    ['true', true],
+    ['an action array', [{ key: 'k', label: 'K', action: () => {} }]],
+    ['a config object', { position: 'bottom', actions: [], maxVisible: 2 }],
+    ['a config object with no actions', { position: 'top' }],
+  ]
+
+  for (const [name, prop] of shapes) {
+    it(`understands ${name}`, async () => {
+      const { api, target, destroy } = await mountGrid(prop)
+      await tick()
+      api.selectRows(['1'])
+      await vi.waitFor(() => expect(target.querySelector(UPSELL)).not.toBeNull())
+      destroy()
+    })
+  }
+})

package/src/svgrid.upsell-license.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Every Enterprise gate carries the same licensing line.
+ *
+ * There are four of them - Kanban board, scheduler, pivot mode and the
+ * selection bar - and they used to be four hand-written paragraphs. Four gates
+ * worded four ways is how a product ends up explaining its own licensing
+ * inconsistently, so they now share one snippet. This is the test that keeps
+ * them sharing it: a fifth Enterprise feature that hand-rolls its own note
+ * will show up here as a missing licensing line.
+ *
+ * None of the renderers are registered in this file, which is the point - it
+ * asserts what a FREE grid shows.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  hasBoardView,
+  hasSchedulerView,
+  hasSelectionBarView,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; team: string; score: number }
+const features = tableFeatures({})
+const rows: Row[] = [
+  { id: 1, name: 'Ada', team: 'A', score: 3 },
+  { id: 2, name: 'Grace', team: 'B', score: 5 },
+]
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 140 },
+  { field: 'team', header: 'Team', width: 120 },
+  { field: 'score', header: 'Score', width: 100 },
+]
+
+const tick = () => new Promise<void>((r) => setTimeout(r))
+const LICENSE = '.sv-grid-upsell-license'
+
+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() },
+          getRowId: (r: Row) => String(r.id),
+          containerHeight: 260,
+          virtualization: false,
+          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')) })
+    },
+  )
+}
+
+describe('Enterprise upsell notes', () => {
+  it('starts from a grid with no Pro renderer registered', () => {
+    // Otherwise every assertion below is checking the wrong branch.
+    expect(hasBoardView()).toBe(false)
+    expect(hasSchedulerView()).toBe(false)
+    expect(hasSelectionBarView()).toBe(false)
+  })
+
+  const gates: Array<[string, Record<string, unknown>, ((api: SvGridApi<typeof features, Row>) => void)?]> = [
+    ['Kanban board', { board: { groupBy: 'team' } }],
+    ['scheduler', { scheduler: { startField: 'name' } }],
+    ['selection bar', { showRowSelection: true, selectionBar: true }, (api) => api.selectRows(['1'])],
+    // pivotViewOn = a pivot config AND pivot mode on; without the Pro engine
+    // `pivotResult` stays null and the upsell renders in its place.
+    ['pivot mode', { pivot: { rows: ['team'], values: [{ field: 'score', agg: 'sum' }] }, pivotMode: true }],
+  ]
+
+  for (const [name, props, activate] of gates) {
+    it(`the ${name} gate explains the licensing`, async () => {
+      const { api, target, destroy } = await mountGrid(props)
+      try {
+        await tick()
+        activate?.(api)
+        await vi.waitFor(() => {
+          expect(target.querySelector(LICENSE), `${name} upsell`).not.toBeNull()
+        })
+
+        const note = target.querySelector(LICENSE)!
+        // Soft-gated: the feature runs without a key and the grid watermarks.
+        // The wording must not imply it is inert, because it is not.
+        expect(note.textContent, name).toContain('license key')
+        expect(note.textContent, name).toContain('watermark')
+        expect(note.querySelector('a')?.getAttribute('href'), name).toBe(
+          'https://svgrid.com/pricing/',
+        )
+      } finally {
+        destroy()
+      }
+    })
+  }
+
+  it('says nothing about licensing on a grid using no Pro feature', async () => {
+    const { target, destroy } = await mountGrid({})
+    try {
+      await tick()
+      expect(target.querySelector(LICENSE)).toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+})