@svgrid/grid 2.2.31 → 2.2.33

package/src/selection.ts

@@ -2,125 +2,17 @@
 // reading/writing controller state via the `ctx` handle; the reactive core
 // ($state/$derived/$effect) stays in the controller.
 import {
-  applyExcelFilter,
-  normalizeForFilter,
-  createColumnVirtualizer,
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSvelteVirtualizer,
-  createSortedRowModel,
-  createSvGrid,
-  filterFns,
-  getGridCellA11yProps,
   getGridCellDomId,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-  parseEditorValue,
-  normalizeEditorOptions,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-  columnFilteringFeature,
-  columnGroupingFeature,
-  type CellContext,
-  type EditorContext,
-  type CellEditorOption,
-  type CellEditorType,
-  type CellFormatter,
-  type CellFormatConfig,
-  type Column,
-  type ColumnDef,
-  type Row,
   type RowData,
-  type SvGridApi,
   type TableFeatures,
 } from "./index";
 import "./sv-grid-scrollbar";
-import type { Snippet } from "svelte";
-import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
-import {
-  formatNumericWithConfig,
-  getDateFormatter,
-  resolveDatePattern,
-} from "./cell-formatting";
-import {
-  RenderSnippetConfig,
-  RenderComponentConfig,
-} from "./render-component";
-import { buildFillPattern } from "./fill-patterns";
-import { buildSparkline, toSparklineValues } from "./sparkline";
-import {
-  resolveCellFormat,
-  computeColumnStat,
-  formatsNeedingStats,
-  type ColumnStat,
-  type ResolvedCellFormat,
-} from "./conditional-formatting";
-import SvGridDropdown from "./SvGridDropdown.svelte";
 import type {
-  Props,
-  SelectionPoint,
   SelectionRange,
-  CellEditState,
-  FilterOperator,
-  FilterOption,
-  MenuPosition,
 } from "./SvGrid.types";
-import {
-  cfTextStyle,
-  fmtStat,
-  getCellKey,
-  resolveClassList,
-  toDateInputValue,
-  toDateTimeLocalInputValue,
-  getEditableInputValue,
-  getEditorInputType,
-  toValueArray,
-  getOptionLabel,
-  getOptionColor,
-  colorfulChipStyle,
-  getEditorClass,
-  asDate,
-  clampMenuX,
-  cssEscape,
-  rawToNumber,
-  formatFacetNumber,
-  formatFacetDate,
-} from "./SvGrid.helpers";
-import { createColumns } from "./columns";
-import { createGridApi } from "./build-api";
-import { createClipboard } from "./clipboard";
-import {
-  filterOperatorOptions,
-  fallbackOperatorOption,
-  TEXT_OPERATORS,
-  NUMBER_OPERATORS,
-  DATE_OPERATORS,
-  CHECKBOX_OPERATORS,
-  operatorOption,
-  operatorsForColumn,
-  defaultOperatorFor,
-  operatorLabelFor,
-} from "./filter-operators";
-import {
-  type FacetBucket,
-  isBucketableColumn,
-  buildBuckets,
-  isInBucket,
-} from "./facet-buckets";
 import {
   getColumnBaseValue,
   isGroupRow,
-  toolPanelHeaderLabel,
-  formatSummaryNumeric,
-  getColumnAlign,
-  getPinnedCellValue,
-  getColumnAccessorValue,
-  columnDefMatchesId,
 } from "./cell-values";
 
 export function createSelection<
@@ -244,7 +136,6 @@ export function createSelection<
         `td[data-svgrid-row="${rowIndex}"][data-svgrid-col="${colIndex}"]`,
       );
       if (cellEl) {
-        const headerHeight   = ctx.theadEl?.offsetHeight ?? 0;
         const containerRect  = ctx.scrollContainer.getBoundingClientRect();
         const cellRect       = cellEl.getBoundingClientRect();
         const cellTopInView  = cellRect.top    - containerRect.top;

package/src/server-data-source.coverage.test.ts

@@ -22,7 +22,7 @@ describe('createServerDataSource - request params', () => {
   })
 
   it('setFilter resets to page 0', async () => {
-    const getRows = vi.fn(async () => ({ rows: [], rowCount: 100 }))
+    const getRows = vi.fn(async (_req: ServerRequest) => ({ rows: [], rowCount: 100 }))
     const ctl = createServerDataSource<Row>({ getRows }, { pageSize: 10, onChange: () => {} })
     ctl.setPage(3)
     await flush()

package/src/server-group-model.test.ts

@@ -23,16 +23,16 @@ function makeGroupSource(data: Row[], delay = 0): ServerDataSource<Row> & { call
       this.calls += 1
       if (delay) await new Promise((r) => setTimeout(r, delay))
       const subset = data.filter((r) =>
-        req.groupKeys.every((k, i) => String((r as Record<string, unknown>)[req.groupBy[i]!]) === k),
+        req.groupKeys!.every((k, i) => String((r as Record<string, unknown>)[req.groupBy![i]!]) === k),
       )
-      const level = req.groupKeys.length
-      if (level < req.groupBy.length) {
-        const field = req.groupBy[level]!
+      const level = req.groupKeys!.length
+      if (level < req.groupBy!.length) {
+        const field = req.groupBy![level]!
         const map = new Map<string, Record<string, unknown>>()
         for (const r of subset) {
           const key = String((r as Record<string, unknown>)[field])
           const agg = map.get(key) ?? { [field]: (r as Record<string, unknown>)[field] }
-          for (const a of req.aggregations) {
+          for (const a of req.aggregations!) {
             const cur = (agg[a.col] as number) ?? 0
             agg[a.col] = a.fn === 'count' ? cur + 1 : cur + ((r as Record<string, unknown>)[a.col] as number)
           }
@@ -114,10 +114,10 @@ describe('createServerGroupModel', () => {
 
   it('collapse removes the children again', async () => {
     const src = makeGroupSource(DATA)
-    let state = { displayRows: [] as ServerDisplayRow<Row>[] } as never
+    // Reads go through ctl.getState() below, so the change callback is a no-op.
     const ctl = createServerGroupModel<Row>(src, {
       groupBy: ['country', 'city'],
-      onChange: (s) => (state = s as never),
+      onChange: () => {},
     })
     ctl.refresh()
     await flush()
@@ -241,7 +241,7 @@ function makeTreeSource(nodes: Node[]): ServerDataSource<Node> & { calls: number
     calls: 0,
     async getRows(req) {
       this.calls += 1
-      const parent = req.groupKeys.length ? req.groupKeys[req.groupKeys.length - 1] : null
+      const parent = req.groupKeys!.length ? req.groupKeys![req.groupKeys!.length - 1] : null
       const children = nodes.filter((n) => (n.parentId ?? null) === (parent ?? null))
       return { rows: children, rowCount: children.length }
     },

package/src/spreadsheet.test.ts

@@ -9,7 +9,6 @@ if (typeof globalThis.CSS === 'undefined') {
   // @ts-expect-error - minimal shim for the test environment
   globalThis.CSS = { escape: (s: string) => s.replace(/["\\]/g, '\\$&') }
 } else if (typeof globalThis.CSS.escape !== 'function') {
-  // @ts-expect-error - augment partial CSS object
   globalThis.CSS.escape = (s: string) => s.replace(/["\\]/g, '\\$&')
 }
 

package/src/summaries.ts

@@ -2,129 +2,17 @@
 // reading/writing controller state via the `ctx` handle; the reactive core
 // ($state/$derived/$effect) stays in the controller.
 import {
-  applyExcelFilter,
-  normalizeForFilter,
-  createColumnVirtualizer,
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSvelteVirtualizer,
-  createSortedRowModel,
-  createSvGrid,
-  filterFns,
-  getGridCellA11yProps,
-  getGridCellDomId,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-  parseEditorValue,
-  normalizeEditorOptions,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-  columnFilteringFeature,
-  columnGroupingFeature,
-  type CellContext,
-  type EditorContext,
-  type CellEditorOption,
-  type CellEditorType,
-  type CellFormatter,
-  type CellFormatConfig,
   type Column,
-  type ColumnDef,
   type Row,
   type RowData,
-  type SvGridApi,
   type TableFeatures,
 } from "./index";
 import "./sv-grid-scrollbar";
-import type { Snippet } from "svelte";
-import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
 import {
-  formatNumericWithConfig,
-  getDateFormatter,
-  resolveDatePattern,
-} from "./cell-formatting";
-import {
-  RenderSnippetConfig,
-  RenderComponentConfig,
-} from "./render-component";
-import { buildFillPattern } from "./fill-patterns";
-import { buildSparkline, toSparklineValues } from "./sparkline";
-import {
-  resolveCellFormat,
-  computeColumnStat,
-  formatsNeedingStats,
-  type ColumnStat,
-  type ResolvedCellFormat,
-} from "./conditional-formatting";
-import SvGridDropdown from "./SvGridDropdown.svelte";
-import type {
-  Props,
-  SelectionPoint,
-  SelectionRange,
-  CellEditState,
-  FilterOperator,
-  FilterOption,
-  MenuPosition,
-} from "./SvGrid.types";
-import {
-  cfTextStyle,
-  fmtStat,
   getCellKey,
-  resolveClassList,
-  toDateInputValue,
-  toDateTimeLocalInputValue,
-  getEditableInputValue,
-  getEditorInputType,
-  toValueArray,
-  getOptionLabel,
-  getOptionColor,
-  colorfulChipStyle,
-  getEditorClass,
-  asDate,
-  clampMenuX,
-  cssEscape,
-  rawToNumber,
-  formatFacetNumber,
-  formatFacetDate,
 } from "./SvGrid.helpers";
-import { createMenus } from "./menus";
-import { createCellRender } from "./cell-render";
-import { createEditing } from "./editing";
-import { createSelection } from "./selection";
-import { createColumns } from "./columns";
-import { createGridApi } from "./build-api";
-import { createClipboard } from "./clipboard";
-import {
-  filterOperatorOptions,
-  fallbackOperatorOption,
-  TEXT_OPERATORS,
-  NUMBER_OPERATORS,
-  DATE_OPERATORS,
-  CHECKBOX_OPERATORS,
-  operatorOption,
-  operatorsForColumn,
-  defaultOperatorFor,
-  operatorLabelFor,
-} from "./filter-operators";
-import {
-  type FacetBucket,
-  isBucketableColumn,
-  buildBuckets,
-  isInBucket,
-} from "./facet-buckets";
 import {
-  getColumnBaseValue,
-  isGroupRow,
-  toolPanelHeaderLabel,
   formatSummaryNumeric,
-  getColumnAlign,
-  getPinnedCellValue,
-  getColumnAccessorValue,
-  columnDefMatchesId,
 } from "./cell-values";
 
 export function createSummaries<

package/src/svgrid-wrapper.types.ts

@@ -1,18 +1,14 @@
 import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core'
 // Type-only import (the reverse of SvGrid.types importing SvGridApi); TS resolves the
 // type-level cycle. Backs the generic key/value typing of `setOption` / `getOption`.
-import type { Props } from './SvGrid.types'
+import type { FilterOperator, Props } from './SvGrid.types'
 import type { GridExportOptions, GridClipboardOptions } from './export-format'
 import type { ChartSpec, ChartType } from './chart'
 
-export type SvGridFilterOperator =
-  | 'contains'
-  | 'equals'
-  | 'startsWith'
-  | 'greaterThan'
-  | 'lessThan'
-  | 'between'
-  | 'isBlank'
+// Aliased to the core union rather than restated: the API surfaces below hand
+// back whatever the grid actually filtered with, so a hand-maintained subset
+// here silently mistypes operators like 'endsWith' that reach callers at runtime.
+export type SvGridFilterOperator = FilterOperator
 
 /**
  * A serializable snapshot of everything that makes up the current "view":
@@ -247,6 +243,12 @@ export type SvGridApi<
    */
   setFacetFilter(columnId: string, values: ReadonlyArray<string> | null): void
   clearFilter(columnId: string): void
+  /**
+   * Drop cached async `editorOptions` so the next render refetches them.
+   * Omit `columnId` to clear every column. Only affects columns whose
+   * `editorOptions` returns a Promise - static lists are never refetched.
+   */
+  refreshEditorOptions(columnId?: string): void
   /**
    * Clear every active column filter (menu, filter-row, set-list, and global).
    * Resets the grid to "no filtering" in a single call.

package/src/svgrid.async-editor-options.test.ts

@@ -0,0 +1,271 @@
+/**
+ * Async `editorOptions` (#18): an option list that arrives from the server.
+ *
+ * Render paths call the option resolver synchronously and often, so an async
+ * source cannot block. The first call starts the fetch and returns an empty
+ * list; the resolved value lands in reactive state and re-renders the open
+ * editor. In-flight keys are tracked so repeated renders do not refire the
+ * request, and so the dropdown can say "Loading…" rather than "No options",
+ * which would read as "nothing to pick".
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; country: string; city: string }
+
+const data: Row[] = [
+  { id: 1, country: 'FR', city: 'Paris' },
+  { id: 2, country: 'JP', city: 'Osaka' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+// The list editors lazy-load `SvGridDropdown` with a dynamic import, so
+// microtasks alone never get it mounted - the settle has to yield the macrotask
+// queue too, and then again for the resolved options to re-render.
+const settle = async () => {
+  for (let i = 0; i < 4; i += 1) {
+    await new Promise((r) => setTimeout(r, 0))
+    await tick()
+  }
+}
+
+function mountGrid(columns: unknown[]) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: never = null as never
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features: tableFeatures({ rowSortingFeature }),
+      editable: 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 })
+
+/** Open the editor for row 0 of `columnId` through the public api. */
+async function openEditor(api: never, columnId: string) {
+  ;(api as never as { startEditing: (r: number, c: string) => boolean }).startEditing(0, columnId)
+  await settle()
+}
+
+describe('async editorOptions (#18)', () => {
+  it('resolves a promised option list and renders it', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: Promise.resolve(['Paris', 'Lyon', 'Osaka']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    expect(document.body.textContent).toContain('Lyon')
+  })
+
+  it('fetches once no matter how many times render asks', async () => {
+    const source = vi.fn(async () => ['a', 'b'])
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: source(),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The promise was created once; the resolver must not re-await per render.
+    expect(source).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls a per-row async source ONCE per row, not once per render', async () => {
+    // The resolver runs inside the template, so calling an async source on
+    // every render fires a real request per render - and any state the source
+    // touches gets mutated mid-render, which Svelte rejects outright. Reported
+    // from the demo as `state_unsafe_mutation`.
+    const calls: number[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          calls.push(row.id)
+          return Promise.resolve(['Paris', 'Lyon'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    const afterOpen = calls.length
+    expect(afterOpen).toBeGreaterThan(0)
+    // Force real re-render passes while the editor is open. Each one used to
+    // re-invoke the source and start another request, which in a browser
+    // becomes an endless fetch loop as every resolution re-renders.
+    const api = g.getApi() as never as {
+      setOption: (k: string, v: unknown) => void
+    }
+    for (const zebra of [true, false, true]) {
+      api.setOption('zebraRows', zebra)
+      await settle()
+    }
+    expect(calls.length).toBe(afterOpen)
+  })
+
+  it('refetches a cascade when the row it depends on changes', async () => {
+    // A cascade is a function of the row's OTHER cells. Keying the cache by row
+    // id alone made the first result permanent - changing Country left the old
+    // city list in place forever.
+    const asked: string[] = []
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) => {
+          asked.push(row.country)
+          return Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto'])
+        },
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as {
+      startEditing: (r: number, c: string) => boolean
+      stopEditing: (cancel?: boolean) => boolean
+      setCellValue: (r: number, c: string, v: unknown) => void
+    }
+
+    await openEditor(api as never, 'city')
+    expect(document.body.textContent).toContain('Lyon')
+    api.stopEditing(true)
+    await settle()
+
+    // Row 0 moves from FR to JP.
+    api.setCellValue(0, 'country', 'JP')
+    await settle()
+
+    await openEditor(api as never, 'city')
+    expect(asked).toContain('JP')
+    expect(document.body.textContent).toContain('Kyoto')
+    expect(document.body.textContent).not.toContain('Lyon')
+  })
+
+  it('resolves a per-row (cascading) async source', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: (row: Row) =>
+          Promise.resolve(row.country === 'FR' ? ['Paris', 'Lyon'] : ['Osaka', 'Kyoto']),
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    // Row 1 is FR - it must not be offered the JP list.
+    expect(document.body.textContent).toContain('Lyon')
+    expect(document.body.textContent).not.toContain('Kyoto')
+  })
+
+  it('falls back to an empty list when the source rejects', async () => {
+    const rejected = Promise.reject(new Error('offline'))
+    rejected.catch(() => {}) // keep the reporter clean; the grid attaches its own handler
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: rejected,
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    await settle()
+    // The editor must settle on "No options", never spin forever.
+    expect(document.body.textContent).toContain('No options')
+  })
+
+  it('exposes refreshEditorOptions on the api', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      { field: 'city', header: 'City', width: 160 },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    const api = g.getApi() as never as { refreshEditorOptions: (c?: string) => void }
+    expect(typeof api.refreshEditorOptions).toBe('function')
+    expect(() => api.refreshEditorOptions('city')).not.toThrow()
+    expect(() => api.refreshEditorOptions()).not.toThrow()
+  })
+
+  it('leaves a plain array source synchronous', async () => {
+    const columns = [
+      { field: 'country', header: 'Country', width: 120 },
+      {
+        field: 'city',
+        header: 'City',
+        width: 160,
+        editorType: 'select',
+        editorOptions: ['Paris', 'Lyon'],
+      },
+    ]
+    const g = mountGrid(columns)
+    cleanup = g.destroy
+    await settle()
+    await openEditor(g.getApi(), 'city')
+    expect(document.body.textContent).toContain('Lyon')
+  })
+})