@svgrid/grid 3.0.6 → 3.0.8

package/src/index.ts

@@ -73,7 +73,7 @@ export {
 
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte'
 export { createGridState, createSvGridState } from './createGridState.svelte'
-export { subscribeGrid, subscribeSvGrid } from './subscribe'
+export { subscribeGrid, subscribeSvGrid } from './subscribe.svelte'
 export { default as SvGrid } from './SvGrid.svelte'
 // Kanban board view. The `board` prop + its config types live in the free grid,
 // but the RENDERER (SvGridBoard) ships in @svgrid/enterprise and registers itself

package/src/keyboard-handlers.ts

@@ -216,7 +216,11 @@ export function createKeyboard<
         }
       }
       if (column?.columnDef.editorType === "checkbox") {
-        ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
+        // Same rule as a click: `editable: false` (or an editable callback
+        // saying no) keeps the checkbox read-only.
+        if (ctx.isCellEditableAt?.(current.rowIndex, current.colIndex) ?? true) {
+          ctx.toggleBooleanCell(current.rowIndex, current.colIndex);
+        }
         return;
       }
       ctx.onCellDoubleClick(current.rowIndex, current.colIndex);

package/src/selection.test.ts

@@ -657,6 +657,43 @@ describe('createSelection - onCellClick', () => {
     expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
   })
 
+  describe('boolean cells that are not declared checkboxes', () => {
+    const boolCtx = (over: any = {}, columnDef: any = {}) =>
+      clickCtx({
+        allRows: [makeDataRow('r0', { done: true })],
+        allColumns: [makeColumn('done', { field: 'done', ...columnDef })],
+        ...over,
+      })
+
+    it('do not toggle (or write the row) while inline editing is off', () => {
+      const ctx = boolCtx({ editingEnabled: false })
+      createSelection(ctx).onCellClick(0, 0)
+      expect(ctx.toggleBooleanCell).not.toHaveBeenCalled()
+      expect(ctx.selectionRange.anchor).toEqual({ rowIndex: 0, colIndex: 0 })
+    })
+
+    it('toggle when inline editing is on and the cell is editable', () => {
+      const ctx = boolCtx({ editingEnabled: true, isCellEditableAt: () => true })
+      createSelection(ctx).onCellClick(0, 0)
+      expect(ctx.toggleBooleanCell).toHaveBeenCalledWith(0, 0)
+    })
+
+    it('do not toggle when the column has its own cell renderer', () => {
+      const ctx = boolCtx({ editingEnabled: true, isCellEditableAt: () => true }, { cell: () => 'flag' })
+      createSelection(ctx).onCellClick(0, 0)
+      expect(ctx.toggleBooleanCell).not.toHaveBeenCalled()
+    })
+  })
+
+  it('a declared checkbox that is not editable stays put', () => {
+    const ctx = clickCtx({
+      allColumns: [makeColumn('c0', { editorType: 'checkbox', editable: false })],
+      isCellEditableAt: () => false,
+    })
+    createSelection(ctx).onCellClick(0, 0)
+    expect(ctx.toggleBooleanCell).not.toHaveBeenCalled()
+  })
+
   it('enters edit mode when clicking the previously-active editable cell', () => {
     const ctx = clickCtx({
       editingEnabled: true,

package/src/selection.ts

@@ -655,12 +655,22 @@ export function createSelection<
       row: row.original as TData,
     });
 
-    const isCheckboxColumn =
-      column.columnDef.editorType === "checkbox" ||
-      typeof cellValue === "boolean";
-
-    if (isCheckboxColumn) {
-      ctx.toggleBooleanCell(rowIndex, colIndex);
+    // A declared checkbox editor toggles on click unless the cell is not
+    // editable. A value that only HAPPENS to be boolean is drawn as a read-only
+    // checkbox, so it toggles only when inline editing is on - it used to flip
+    // and write the row on any click, in grids with editing switched off. A
+    // column with its own `cell` renderer draws (and handles) the value itself.
+    const declaredCheckbox = column.columnDef.editorType === "checkbox";
+    const inferredCheckbox =
+      !declaredCheckbox &&
+      typeof cellValue === "boolean" &&
+      column.columnDef.cell == null;
+
+    if (declaredCheckbox || inferredCheckbox) {
+      const editable = ctx.isCellEditableAt?.(rowIndex, colIndex) ?? true;
+      if (editable && (declaredCheckbox || ctx.editingEnabled)) {
+        ctx.toggleBooleanCell(rowIndex, colIndex);
+      }
       setActiveCell(rowIndex, colIndex);
       setSelection(rowIndex, colIndex);
       ctx.editingCell = null;

package/src/{subscribe.test.ts → subscribe.svelte.test.ts}

@@ -6,7 +6,7 @@
  * selection actually changed.
  */
 import { describe, expect, it } from 'vitest'
-import { subscribeGrid, subscribeSvGrid } from './subscribe'
+import { subscribeGrid, subscribeSvGrid } from './subscribe.svelte'
 
 type Listener = () => void
 

package/src/{subscribe.ts → subscribe.svelte.ts}

@@ -23,7 +23,11 @@ export function subscribeGrid<
   grid: SvGrid<TData>,
   selector: (state: Record<string, any>) => TSelected,
 ) {
-  let current = selector(grid.store.state)
+  // $state, not a plain variable: core.ts keeps a deliberately framework-free
+  // store, so this Svelte adapter is where reactivity belongs. Without it a
+  // `$derived` reading .current never re-runs and the docs' headless examples
+  // render their seeded state forever.
+  let current = $state(selector(grid.store.state))
   grid.store.subscribe(() => {
     const next = selector(grid.store.state)
     if (!shallowCompare(current, next)) current = next

package/src/svgrid.behavior.test.ts

@@ -620,6 +620,35 @@ describe('SvGrid - custom snippet cell', () => {
       destroy()
     }
   })
+
+  it('a boolean column with its own cell renderer draws the renderer, not the built-in checkbox', async () => {
+    // The checkbox branch used to run before the `cell` branch, so any boolean
+    // value came out as a read-only checkbox and the renderer was never called.
+    const flagCols: ColumnDef<typeof fullFeatures, Person>[] = personColumns.map((c) =>
+      c.field === 'active'
+        ? { ...c, cell: (ctx: any) => ((ctx.row.original as Person).active ? 'ON' : 'OFF') }
+        : c,
+    )
+    const { target, destroy } = await mountGrid({ columns: flagCols, showRowSelection: false })
+    try {
+      await tick()
+      expect(target.querySelectorAll('.sv-grid-checkbox-readonly').length).toBe(0)
+      expect(target.textContent).toContain('ON')
+      expect(target.textContent).toContain('OFF')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('a boolean column without a renderer still draws the read-only checkbox', async () => {
+    const { target, destroy } = await mountGrid({ showRowSelection: false })
+    try {
+      await tick()
+      expect(target.querySelectorAll('.sv-grid-checkbox-readonly').length).toBeGreaterThan(0)
+    } finally {
+      destroy()
+    }
+  })
 })
 
 describe('SvGrid - filterMode shortcuts', () => {

package/src/svgrid.data-push.svelte.test.ts

@@ -0,0 +1,94 @@
+/**
+ * Pushing onto a `$state` array passed as `data`.
+ *
+ * docs/getting-started/3-data-and-columns.md teaches exactly this: declare
+ * `let rows = $state([...])`, hand it to `data`, and an "Add row" button that
+ * does nothing but `rows.push(...)`. The grid is supposed to follow.
+ *
+ * `svgrid.live-update-paths.svelte.test.ts` covers the two MUTATION paths
+ * (field write, element replacement) against a sorted grid. This file covers
+ * the LENGTH path on the plainest possible grid, because a row appearing is a
+ * different question from a cell changing: nothing in the template is reading
+ * the new row yet, so the row model has to notice the array grew.
+ *
+ * Lives in a `.svelte.test.ts` so `$state` is available.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+
+type Staff = { id: string; firstName: string; age: number }
+
+const staffColumns = [
+  { field: 'firstName', header: 'First name', width: 180 },
+  { field: 'age', header: 'Age', width: 90 },
+]
+
+/** The props object is the `$state` proxy itself; a spread would snapshot it. */
+function pushProps(rows: Staff[]) {
+  const props = $state({
+    data: rows,
+    columns: staffColumns,
+    containerHeight: 400,
+    virtualization: false,
+  })
+  return props
+}
+
+function mountGrid(props: ReturnType<typeof pushProps>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, { target, props: props as never })
+  flushSync()
+  const names = () =>
+    Array.from(
+      target.querySelectorAll('tbody.sv-grid-body tr.sv-grid-row:not(.sv-grid-row-spacer)'),
+    ).map((tr) => tr.querySelector('.sv-grid-cell:not(.sv-grid-selection-cell)')?.textContent?.trim())
+  return {
+    names,
+    done() {
+      unmount(app)
+      target.remove()
+    },
+  }
+}
+
+describe('data array length changes', () => {
+  it('renders the rows it was given', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+    expect(g.names()).toEqual(['Ada', 'Linus'])
+    g.done()
+  })
+
+  it('push onto the $state array adds the row (the docs "Add row" button)', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+
+    rows.push({ id: '3', firstName: 'New', age: 0 })
+    flushSync()
+
+    expect(g.names()).toEqual(['Ada', 'Linus', 'New'])
+    g.done()
+  })
+
+  it('splice off the $state array removes the row', () => {
+    const rows = $state<Staff[]>([
+      { id: '1', firstName: 'Ada', age: 36 },
+      { id: '2', firstName: 'Linus', age: 54 },
+    ])
+    const g = mountGrid(pushProps(rows))
+
+    rows.splice(0, 1)
+    flushSync()
+
+    expect(g.names()).toEqual(['Linus'])
+    g.done()
+  })
+})

package/src/svgrid.live-update-paths.svelte.test.ts

@@ -1,8 +1,10 @@
 /**
  * The two ways a live feed can change a row, and what each one reaches.
  *
- * A `$state` array passed as `data` has two update paths and they are not
- * interchangeable, which is the whole design problem of a ticking grid:
+ * A `$state` array passed as `data` has two update paths for a row's VALUES,
+ * and they are not interchangeable, which is the whole design problem of a
+ * ticking grid. (Changing the row COUNT is a third path, tracked on its own;
+ * it lives in `svgrid.data-push.svelte.test.ts`.)
  *
  *   1. Mutate a field through the proxy (`rows[i].price = x`). The visible
  *      cell re-renders because its template reads the field through the

package/src/validate.test.ts

@@ -58,6 +58,22 @@ describe('unknown field', () => {
     expect(run({ data: [...loading, ...data], columns: [{ field: 'naem' }] })).toHaveLength(1)
   })
 
+  it('does not walk a million placeholders looking for the sample', () => {
+    // A row model scrolled to its middle: placeholders up to the loaded block.
+    const placeholder = createRowPlaceholder('loading', { index: 0 })
+    const big = new Array(1_000_000).fill(placeholder)
+    big.push({ name: 'x' })
+    let reads = 0
+    const counted = new Proxy(big, {
+      get(target, key, receiver) {
+        if (typeof key === 'string' && /^\d+$/.test(key)) reads += 1
+        return Reflect.get(target, key, receiver)
+      },
+    })
+    expect(run({ data: counted, columns: [{ field: 'naem' }] })).toEqual([])
+    expect(reads).toBeLessThanOrEqual(1000)
+  })
+
   it('looks through group columns', () => {
     const msgs = run({ columns: [{ header: 'Group', columns: [{ field: 'nope' }] }] })
     expect(msgs[0]).toContain('"nope" does not exist')

package/src/validate.ts

@@ -24,6 +24,8 @@ import { rowPlaceholderState } from './server-block-cache'
 
 /** How many rows to sample when deciding whether a `field` exists. */
 const FIELD_SAMPLE_ROWS = 10
+/** How many rows to look through for that sample, placeholders included. */
+const FIELD_SCAN_ROWS = 1000
 
 const DOCS = 'https://svgrid.com/docs/getting-started/3-data-and-columns/'
 
@@ -79,9 +81,15 @@ export function validateGridConfig<
   // no data keys at all and say nothing about the columns.
   // Stops at the sample size: this runs on every data change, and a filter
   // over all the rows first was O(n) per tick on a live feed.
+  // The scan is bounded too: a row model scrolled to the middle of a million
+  // rows, or just purged by a sort, hands over a list that is placeholders
+  // up to the loaded block, and walking all of them for ten real rows was
+  // O(n) per block landing. Finding none means nothing to judge by.
   const sample: TData[] = []
-  for (const row of input.data ?? []) {
-    if (sample.length >= FIELD_SAMPLE_ROWS) break
+  const data = input.data ?? []
+  const scan = Math.min(data.length, FIELD_SCAN_ROWS)
+  for (let i = 0; i < scan && sample.length < FIELD_SAMPLE_ROWS; i += 1) {
+    const row = data[i]!
     if (!rowPlaceholderState(row)) sample.push(row)
   }
   // Under server-side grouping the first rows are group rows, which carry

package/src/virtualization/svelte-virtualizer.svelte.ts

@@ -14,6 +14,7 @@ export function createSvelteVirtualizer(options: VirtualizerOptions) {
       return version
     },
     setOptions: virtualizer.setOptions,
+    measure: virtualizer.measure,
     setScrollOffset: virtualizer.setScrollOffset,
     setViewportHeight: virtualizer.setViewportHeight,
     scrollToIndex: virtualizer.scrollToIndex,

package/src/virtualization/virtualizer.test.ts

@@ -44,4 +44,48 @@ describe('virtualizer', () => {
     v.scrollToIndex(9_999)
     expect(v.getState().scrollOffset).toBe(2_700)
   })
+
+  it('re-measures a stable size function passed back through setOptions (#102)', () => {
+    const heights = new Map<number, number>()
+    const estimateSize = (i: number) => heights.get(i) ?? 20
+    const v = createVirtualizer({ count: 10, estimateSize, viewportHeight: 100 })
+    expect(v.getTotalSize()).toBe(200)
+
+    heights.set(0, 120)
+    v.setOptions({ estimateSize })
+    expect(v.getSizeForIndex(0)).toBe(120)
+    expect(v.getTotalSize()).toBe(300) // 9 x 20 + 120
+    expect(v.getOffsetForIndex(5)).toBe(200) // 120 + 4 x 20
+  })
+
+  it('measure() re-reads sizes and notifies subscribers', () => {
+    const heights = new Map<number, number>()
+    const v = createVirtualizer({
+      count: 10,
+      estimateSize: (i: number) => heights.get(i) ?? 20,
+      viewportHeight: 100,
+    })
+    let notified = 0
+    v.subscribe(() => (notified += 1))
+
+    heights.set(3, 50)
+    v.measure()
+    expect(v.getTotalSize()).toBe(230)
+    expect(v.getOffsetForIndex(4)).toBe(110)
+    expect(notified).toBe(1)
+  })
+
+  it('keeps the offset cache across scrolls', () => {
+    let calls = 0
+    const v = createVirtualizer({
+      count: 1000,
+      estimateSize: () => (calls++, 20),
+      viewportHeight: 100,
+    })
+    const afterBuild = calls
+    v.setScrollOffset(500)
+    v.setScrollOffset(900)
+    v.setViewportHeight(200)
+    expect(calls).toBe(afterBuild)
+  })
 })

package/src/virtualization/virtualizer.ts

@@ -261,8 +261,20 @@ export function createVirtualizer(initial: VirtualizerOptions) {
   return {
     setOptions(next: Partial<VirtualizerOptions>) {
       const merged = { ...options, ...next }
-      if (sameOptions(options, merged)) return
+      // Passing a size function means "sizes may have changed", even when it is
+      // the same reference: the documented variable-height pattern is a stable
+      // function reading a mutable map, and keying the cache on identity alone
+      // left the offsets and total stale after a row grew (#102).
+      const remeasure = typeof next.estimateSize === 'function'
+      if (!remeasure && sameOptions(options, merged)) return
       options = merged
+      if (remeasure) offsetCache = null
+      recalc()
+    },
+    /** Drop the cached offsets and re-read every size from `estimateSize`.
+     *  Call after the sizes a stable size function reports have changed. */
+    measure() {
+      offsetCache = null
       recalc()
     },
     setScrollOffset(scrollOffset: number) {

package/dist/cdn/validate-AZoD8BoR.js

@@ -1,80 +0,0 @@
-import { r as e } from "./server-block-cache-DIqb3VZn.js";
-//#region src/validate.ts
-var t = 10, n = "https://svgrid.com/docs/getting-started/3-data-and-columns/";
-function r(e, t = []) {
-	for (let n of e) n.columns?.length ? r(n.columns, t) : t.push(n);
-	return t;
-}
-function i(i) {
-	let o = [], s = r(i.columns ?? []), c = [];
-	for (let n of i.data ?? []) {
-		if (c.length >= t) break;
-		e(n) || c.push(n);
-	}
-	if (c.length && !i.serverGroup) {
-		let e = /* @__PURE__ */ new Set();
-		for (let t of c) if (t && typeof t == "object") for (let n of Object.keys(t)) e.add(n);
-		for (let t of s) {
-			let r = t.field;
-			if (!r || t.fieldFn || e.has(r)) continue;
-			let i = a(r, [...e]);
-			o.push(`[svgrid] Column field "${r}" does not exist on your row data, so that column renders empty.${i ? ` Did you mean "${i}"?` : ""} Available keys: ${[...e].slice(0, 12).join(", ")}. See ${n}`);
-		}
-	}
-	let l = /* @__PURE__ */ new Map();
-	for (let e of s) {
-		let t = e.id ?? e.field;
-		t && l.set(t, (l.get(t) ?? 0) + 1);
-	}
-	for (let [e, t] of l) t > 1 && o.push(`[svgrid] ${t} columns share the id "${e}". Column state (sorting, filtering, pinning, width) is keyed by id, so they will act as one. Give each an explicit \`id\`. See ${n}`);
-	let u = i.pageable === void 0 && i.showPagination === void 0;
-	i.pageSize !== void 0 && u && o.push("[svgrid] `pageSize` is set but pagination was never turned on, so it has no effect and every row renders. Add `pageable` to switch the pager on."), !(i.sortable === !0 || i.features?.rowSortingFeature) && s.some((e) => e.sortable === !0) && o.push("[svgrid] A column sets `sortable: true`, but sorting is not enabled on the grid, so its header does nothing. Add `sortable` to <SvGrid> (it registers the sorting feature for you).");
-	let d = /* @__PURE__ */ new Set();
-	for (let e of s) {
-		let t = e.id ?? e.field;
-		t && d.add(t);
-	}
-	for (let e of i.groupBy ?? []) {
-		if (d.has(e)) continue;
-		let t = a(e, [...d]);
-		o.push(`[svgrid] \`groupBy\` refers to column "${e}", which does not exist, so that grouping level is ignored.${t ? ` Did you mean "${t}"?` : ""} Column ids: ${[...d].slice(0, 12).join(", ")}`);
-	}
-	let f = i.treeData?.column;
-	if (f && !d.has(f) && o.push(`[svgrid] \`treeData.column\` refers to column "${f}", which does not exist, so the expander falls back to the first visible column.`), c.length && i.treeData) {
-		let e = /* @__PURE__ */ new Set();
-		for (let t of c) if (t && typeof t == "object") for (let n of Object.keys(t)) e.add(n);
-		let t = i.treeData.parentField;
-		if (t && !e.has(t)) {
-			let n = a(t, [...e]);
-			o.push(`[svgrid] \`treeData.parentField\` is "${t}", which is not on your row data, so every row becomes a root and no hierarchy appears.${n ? ` Did you mean "${n}"?` : ""}`);
-		}
-		let n = i.treeData.idField;
-		n && !e.has(n) && o.push(`[svgrid] \`treeData.idField\` is "${n}", which is not on your row data, so parent lookups cannot match and the tree stays flat.`);
-	}
-	return i.gantt && i.treeData && o.push("[svgrid] `gantt` and `treeData` are both set. The Gantt builds its own work-breakdown tree from `gantt.parentField` and needs every descendant row, but `treeData` hides collapsed children from the view, so summary bars will under-report. Remove `treeData` and set `gantt.parentField` instead."), (i.initialColumnPinning?.left?.length ?? 0) + (i.initialColumnPinning?.right?.length ?? 0) > 0 && i.columnVirtualization !== !1 && o.push("[svgrid] `initialColumnPinning` is set while column virtualization is on (its default), so the pinned columns will not stick - the virtualizer recycles column nodes. Add `columnVirtualization={false}`."), i.externalPagination === !0 && i.rowCount === void 0 && o.push("[svgrid] `externalPagination` is on but `rowCount` is not set, so the pager cannot know how many pages exist. Pass the server total as `rowCount`."), i.externalSort === !0 && !i.onSortingChange && o.push("[svgrid] `externalSort` is on but there is no `onSortingChange` handler, so clicking a header changes nothing - the grid stopped sorting and nobody is listening. Add `onSortingChange` and re-fetch in your handler."), i.externalFilter === !0 && !i.onFiltersChange && o.push("[svgrid] `externalFilter` is on but there is no `onFiltersChange` handler, so filtering the grid changes nothing. Add `onFiltersChange` and re-fetch in your handler."), o;
-}
-function a(e, t) {
-	let n, r = Infinity;
-	for (let i of t) {
-		let t = o(e.toLowerCase(), i.toLowerCase());
-		t < r && (r = t, n = i);
-	}
-	let i = Math.min(3, Math.floor(e.length / 3) + 1);
-	return r <= i ? n : void 0;
-}
-function o(e, t) {
-	if (e === t) return 0;
-	let n = Array(t.length + 1);
-	for (let e = 0; e <= t.length; e++) n[e] = e;
-	for (let r = 1; r <= e.length; r++) {
-		let i = n[0];
-		n[0] = r;
-		for (let a = 1; a <= t.length; a++) {
-			let o = Math.min(n[a] + 1, n[a - 1] + 1, i + (e[r - 1] === t[a - 1] ? 0 : 1));
-			i = n[a], n[a] = o;
-		}
-	}
-	return n[t.length];
-}
-//#endregion
-export { i as validateGridConfig };