@svgrid/grid 2.2.31 → 2.2.33

package/src/cell-render.test.ts

@@ -9,16 +9,35 @@ import { createCellRender } from './cell-render'
 // shape that mirrors the @svgrid/grid runtime closely enough to exercise
 // every branch.
 
+// Only `id` / `original` / `getCellValueByColumnId` are read by the functions
+// under test, but the stub carries the full `Row` shape so it is assignable
+// without a cast at every call site.
 type AnyRow = {
   id: string
+  index: number
   original: Record<string, unknown>
+  depth: number
+  getCanExpand: () => boolean
+  getIsExpanded: () => boolean
+  toggleExpanded: () => void
+  getIsSelected: () => boolean
+  toggleSelected: () => void
+  getAllCells: () => never[]
   getCellValueByColumnId: (colId: string) => unknown
 }
 
 function makeRow(id: string, data: Record<string, unknown>): AnyRow {
   return {
     id,
+    index: 0,
     original: data,
+    depth: 0,
+    getCanExpand: () => false,
+    getIsExpanded: () => false,
+    toggleExpanded: () => {},
+    getIsSelected: () => false,
+    toggleSelected: () => {},
+    getAllCells: () => [],
     getCellValueByColumnId: (colId: string) => data[colId],
   }
 }
@@ -34,6 +53,11 @@ function makeCtx(overrides: Partial<any> = {}): any {
     conditionalColumnStats: new Map(),
     noteOverrides: {},
     editorOptionsCache: {},
+    // Async `editorOptions` bookkeeping: resolved lists (reactive in the real
+    // controller) plus two plain Sets used as dedupe guards.
+    asyncEditorOptions: {} as Record<string, unknown>,
+    asyncEditorOptionsPending: new Set<string>(),
+    asyncEditorColumns: new Set<string>(),
     ...overrides,
   }
 }
@@ -172,7 +196,7 @@ describe('createCellRender / computeCellClass', () => {
     const row = makeRow('r', { score: 9 })
     expect(cr.computeCellClass(row, makeColumn('score', { cellClass }))).toBe('big')
     expect(cellClass).toHaveBeenCalledTimes(1)
-    const passed = cellClass.mock.calls[0][0]
+    const passed = cellClass.mock.calls[0]![0]
     expect(passed.row).toBe(row)
     expect(passed.getValue()).toBe(9)
   })
@@ -423,7 +447,7 @@ describe('createCellRender / formatPinnedValue', () => {
     const formatter = vi.fn(({ value, row }: any) => `${value}:${row}`)
     const col = makeColumn('a', { formatter })
     expect(cr.formatPinnedValue(col, 5)).toBe('5:null')
-    expect(formatter.mock.calls[0][0].row).toBeNull()
+    expect(formatter.mock.calls[0]![0].row).toBeNull()
   })
 
   it('masks password pinned values', () => {
@@ -478,7 +502,7 @@ describe('createCellRender / computePinnedCellClass', () => {
       field: 'a',
     })
     expect(cr.computePinnedCellClass({ a: 3 }, col)).toBe('pos')
-    expect(cellClass.mock.calls[0][0].row).toBeNull()
+    expect(cellClass.mock.calls[0]![0].row).toBeNull()
   })
 
   it('coerces a falsy cellClass result to empty string', () => {

package/src/cell-render.ts

@@ -2,127 +2,33 @@
 // 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 { 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 createCellRender<
@@ -263,6 +169,77 @@ export function createCellRender<
     return v && v.trim() ? v : null
   }
 
+  const isThenable = (v: unknown): v is Promise<unknown> =>
+    typeof (v as { then?: unknown } | null)?.then === "function";
+
+  /**
+   * Resolve a promised option list once per key, then keep it.
+   *
+   * Render paths call `getColumnEditorOptions` synchronously and often, so an
+   * async source cannot block: the first call starts the fetch and returns an
+   * empty list, and the resolved value lands in reactive state which re-renders
+   * the editor. `asyncEditorOptionsPending` tracks in-flight keys so repeated
+   * renders do not fire the request again.
+   */
+  function resolveAsyncOptions(
+    key: string,
+    promise: Promise<unknown>,
+    /** Drop other cached entries starting with this prefix when the result
+     *  lands - used to evict a cascade's superseded signatures. */
+    prunePrefix?: string,
+  ): CellEditorOption[] {
+    const done = ctx.asyncEditorOptions[key];
+    if (done) return done;
+    const pending: Set<string> = ctx.asyncEditorOptionsPending;
+    if (!pending.has(key)) {
+      // Plain Set, not reactive state: this runs inside the template, and a
+      // $state write during render is a Svelte 5 error.
+      pending.add(key);
+      const store = (value: CellEditorOption[]) => {
+        const next: Record<string, CellEditorOption[]> = {};
+        for (const [k, v] of Object.entries(ctx.asyncEditorOptions as Record<string, CellEditorOption[]>)) {
+          // Keep everything except this cell's stale signatures.
+          if (prunePrefix && k !== key && k.startsWith(prunePrefix)) continue;
+          next[k] = v;
+        }
+        next[key] = value;
+        ctx.asyncEditorOptions = next;
+      };
+      promise
+        .then((value) => store(normalizeEditorOptions(value as never)))
+        // A failed lookup settles on "no options" rather than leaving the
+        // editor spinning forever.
+        .catch(() => store([]))
+        .finally(() => {
+          pending.delete(key);
+        });
+    }
+    return [];
+  }
+
+  /**
+   * Cache key for a per-row async source.
+   *
+   * A cascade depends on the row's OTHER cells - City is a function of Country -
+   * so keying by row id alone made the first result permanent: changing the
+   * country left the old city list cached forever. The row's own values are
+   * folded into the key, so editing the row naturally supersedes the entry.
+   *
+   * Only reached for columns already known to be async, so the stringify cost
+   * is bounded by the rows actually rendering such a column.
+   */
+  function asyncRowKey(column: Column<TData>, row: Row<TData>): string {
+    let signature: string;
+    try {
+      signature = JSON.stringify(row.original);
+    } catch {
+      // Circular / non-serializable row: fall back to identity, which at least
+      // invalidates when the consumer replaces the object immutably.
+      signature = String(row.index);
+    }
+    return `${column.id}::${row.id}::${signature}`;
+  }
+
   function getColumnEditorOptions(
     column: Column<TData>,
     row?: Row<TData> | null,
@@ -272,8 +249,36 @@ export function createCellRender<
       // Dynamic per-row: must be re-evaluated because the row's other
       // cells may have just changed (cascade).
       if (!row?.original) return [];
-      return normalizeEditorOptions(def(row.original as TData));
+      // Once a column is known to hand back promises, answer from the cache
+      // WITHOUT calling the source again. Render reads options constantly, so
+      // calling an async source every time fires a real request per render -
+      // and any state the source touches is being mutated mid-render, which
+      // Svelte rejects outright. The key folds in the row's values, so editing
+      // the row supersedes the entry and the cascade refetches.
+      const known = (ctx.asyncEditorColumns as Set<string>).has(column.id);
+      if (known) {
+        const key = asyncRowKey(column, row);
+        const done = ctx.asyncEditorOptions[key];
+        if (done) return done;
+        if ((ctx.asyncEditorOptionsPending as Set<string>).has(key)) return [];
+        const produced = def(row.original as TData);
+        if (isThenable(produced)) {
+          return resolveAsyncOptions(key, produced, `${column.id}::${row.id}::`);
+        }
+        return normalizeEditorOptions(produced);
+      }
+      const produced = def(row.original as TData);
+      if (isThenable(produced)) {
+        (ctx.asyncEditorColumns as Set<string>).add(column.id);
+        return resolveAsyncOptions(
+          asyncRowKey(column, row),
+          produced,
+          `${column.id}::${row.id}::`,
+        );
+      }
+      return normalizeEditorOptions(produced);
     }
+    if (isThenable(def)) return resolveAsyncOptions(column.id, def);
     const id = column.id;
     if (
       !ctx.editorOptionsCache[id] ||
@@ -285,6 +290,27 @@ export function createCellRender<
     return ctx.editorOptionsCache[id];
   }
 
+  /**
+   * True while a column's (or cell's) async option list is still loading.
+   * Derived from "the source is async and no result has landed" rather than
+   * from the pending Set, so it stays reactive - `asyncEditorOptions` is the
+   * reactive half, the Set is only a dedupe guard.
+   */
+  function areEditorOptionsLoading(
+    column: Column<TData>,
+    row?: Row<TData> | null,
+  ): boolean {
+    const def = column.columnDef.editorOptions;
+    if (typeof def === "function") {
+      if (!row?.original) return false;
+      // Never call the source here - that would fire another request just to
+      // answer "are we loading?". The resolver records which columns are async.
+      if (!(ctx.asyncEditorColumns as Set<string>).has(column.id)) return false;
+      return !ctx.asyncEditorOptions[asyncRowKey(column, row)];
+    }
+    return isThenable(def) && !ctx.asyncEditorOptions[column.id];
+  }
+
   /** Joined display string for list/chips cells. */
   function formatListCellValue(
     column: Column<TData>,
@@ -461,6 +487,7 @@ export function createCellRender<
     computeCellValidity,
     computeCellNote,
     getColumnEditorOptions,
+    areEditorOptionsLoading,
     formatListCellValue,
     formatCellValue,
     formatPinnedValue,

package/src/cell-values.ts

@@ -19,6 +19,10 @@ export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, colum
 }
 
 export function isGroupRow<TData extends RowData>(row: Row<TData>) {
+  // Tree rows are expandable too, but they are real data rows - rendering one as
+  // a full-width banner would swallow its cells. Only grouping's synthetic rows
+  // are banners.
+  if ((row as { __treeRow?: boolean }).__treeRow) return false;
   return typeof row.getCanExpand === "function" && row.getCanExpand();
 }
 

package/src/chart-export.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from 'vitest'
 import {
   chartToSvgString,
   chartToPngBlob,
@@ -125,7 +125,7 @@ describe('chartToSvgString', () => {
 describe('downloadChartSvg', () => {
   let createSpy: ReturnType<typeof vi.spyOn>
   let revokeSpy: ReturnType<typeof vi.spyOn>
-  let clickSpy: ReturnType<typeof vi.fn>
+  let clickSpy: Mock<() => void>
 
   beforeEach(() => {
     vi.useFakeTimers()

package/src/chart.ts

@@ -38,7 +38,6 @@ export type SeriesOverlay = 'linear' | `sma:${number}` | `ema:${number}`
 export type SeriesPattern = 'solid' | 'stripe' | 'crosshatch' | 'dots' | 'diagonal'
 /** Cycle used when `ChartSpec.patternFallback` is true and a series has no
  *  explicit `pattern` set. Skips `'solid'` so every series gets a texture. */
-const PATTERN_CYCLE: SeriesPattern[] = ['stripe', 'crosshatch', 'dots', 'diagonal']
 
 export type ChartSeries = {
   label: string
@@ -2254,7 +2253,7 @@ export function rowsToChartSpec<T extends Record<string, unknown>>(
     entries.reduce((sum, e) => sum + (Number.isFinite(e.values[i]!) ? e.values[i]! : 0), 0),
   )
   const sort = opts.sort ?? (opts.topN ? 'value-desc' : 'none')
-  let order = categories.map((_, i) => i)
+  const order = categories.map((_, i) => i)
   if (sort === 'value-desc') order.sort((a, b) => totals[b]! - totals[a]!)
   else if (sort === 'value-asc') order.sort((a, b) => totals[a]! - totals[b]!)
   else if (sort === 'category') order.sort((a, b) => categories[a]!.localeCompare(categories[b]!))

package/src/clipboard.test.ts

@@ -614,7 +614,6 @@ describe('copySelectionToClipboard', () => {
       configurable: true,
     })
     const execCommand = vi.fn().mockReturnValue(true)
-    // @ts-expect-error - jsdom lacks execCommand by default
     document.execCommand = execCommand
     const ctx = makeCtx()
     ctx.selectionRange = {
@@ -631,7 +630,6 @@ describe('copySelectionToClipboard', () => {
       value: undefined,
       configurable: true,
     })
-    // @ts-expect-error - override execCommand to throw
     document.execCommand = () => {
       throw new Error('blocked')
     }

package/src/clipboard.ts

@@ -2,122 +2,20 @@
 // that read/write 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 {
-  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 createClipboard<

package/src/columns.ts

@@ -2,125 +2,10 @@
 // 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 { 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 createColumns<
   TFeatures extends TableFeatures = TableFeatures,