@svgrid/grid 3.0.6 → 3.0.7

package/src/core.ts

@@ -745,13 +745,52 @@ export function tableFeatures<T extends TableFeatures>(features: T): T {
  * text; set a column's type or supply your own comparator to override.
  */
 export const sortFns = {
-  auto: (a: unknown, b: unknown) => String(a).localeCompare(String(b)),
-  number: (a: unknown, b: unknown) => Number(a ?? 0) - Number(b ?? 0),
-  date: (a: unknown, b: unknown) => {
-    const aa = new Date(a as any).getTime()
-    const bb = new Date(b as any).getTime()
-    return aa - bb
-  },
+  auto: (a: unknown, b: unknown) => compareAutoValues(a, b),
+  number: (a: unknown, b: unknown) => compareNumericKeys(numberSortKey(a), numberSortKey(b)),
+  date: (a: unknown, b: unknown) => compareNumericKeys(dateSortKey(a), dateSortKey(b)),
+}
+
+/** Null, undefined and the empty string: the values every built-in sort puts first. */
+function isBlankSortValue(value: unknown): boolean {
+  return value == null || value === ''
+}
+
+/**
+ * Sort key for the `number` comparator. Blanks and anything that does not
+ * coerce to a number ('n/a', a placeholder) become -Infinity, so they sort
+ * together ahead of every number instead of producing NaN. A NaN key made the
+ * comparator inconsistent - NaN compared equal to everything while the numbers
+ * around it did not - and `Array.prototype.sort` then returned a visibly
+ * unsorted column (#104).
+ */
+function numberSortKey(value: unknown): number {
+  if (isBlankSortValue(value)) return -Infinity
+  const n = Number(value)
+  return Number.isNaN(n) ? -Infinity : n
+}
+
+/** Sort key for the `date` comparator; blanks and invalid dates sort first. */
+function dateSortKey(value: unknown): number {
+  if (isBlankSortValue(value)) return -Infinity
+  const t = new Date(value as any).getTime()
+  return Number.isNaN(t) ? -Infinity : t
+}
+
+/**
+ * The `auto` comparator: blanks first, then numbers in numeric order, then
+ * everything else as collated text. Ordering by kind before value keeps it
+ * transitive on mixed columns - comparing a number to a string as text
+ * instead would give 2 < 10, 10 < '1a' and '1a' < 2, a cycle.
+ */
+function compareAutoValues(a: unknown, b: unknown): number {
+  const aBlank = isBlankSortValue(a)
+  const bBlank = isBlankSortValue(b)
+  if (aBlank || bBlank) return aBlank === bBlank ? 0 : aBlank ? -1 : 1
+  const aNum = typeof a === 'number'
+  const bNum = typeof b === 'number'
+  if (aNum && bNum) return compareNumericKeys(numberSortKey(a), numberSortKey(b))
+  if (aNum !== bNum) return aNum ? -1 : 1
+  return compareCollatedKeys(String(a), String(b))
 }
 
 /**
@@ -1446,15 +1485,35 @@ export function createSortedRowModel<TData extends RowData>(
       let keys: Array<any> = new Array(n)
       let compare: (a: any, b: any) => number
       let keyOf: (row: Row<TData>) => any
+      let autoMode: 'number' | 'mixed' | 'text' | undefined
 
       if (comparator === sortFns.number) {
-        keyOf = (row) => Number(row.getCellValueByColumnId(columnId) ?? 0)
+        keyOf = (row) => numberSortKey(row.getCellValueByColumnId(columnId))
         for (let i = 0; i < n; i++) keys[i] = keyOf(rows[i]!)
         compare = compareNumericKeys
       } else if (comparator === sortFns.date) {
-        keyOf = (row) => new Date(row.getCellValueByColumnId(columnId) as any).getTime()
+        keyOf = (row) => dateSortKey(row.getCellValueByColumnId(columnId))
         for (let i = 0; i < n; i++) keys[i] = keyOf(rows[i]!)
         compare = compareNumericKeys
+      } else if (comparator === sortFns.auto && (autoMode = autoSortMode(rows, columnId)) === 'number') {
+        // A column with no declared type whose values are all numbers. Sorting
+        // it as text put 10 before 2 (#104).
+        keyOf = (row) => {
+          const value = row.getCellValueByColumnId(columnId)
+          // A text value arriving in a tick changes the mode; only a full sort
+          // can place it.
+          return typeof value === 'number' || isBlankSortValue(value)
+            ? numberSortKey(value)
+            : MISSING_KEY
+        }
+        for (let i = 0; i < n; i++) keys[i] = keyOf(rows[i]!)
+        compare = compareNumericKeys
+      } else if (autoMode === 'mixed') {
+        // Numbers and text in one column. Rare, so no key tricks: the raw
+        // values through the pairwise comparator, which orders by kind first.
+        keyOf = (row) => row.getCellValueByColumnId(columnId)
+        for (let i = 0; i < n; i++) keys[i] = keyOf(rows[i]!)
+        compare = compareAutoValues
       } else if (comparator === sortFns.auto) {
         const strings: string[] = new Array(n)
         // Decide whether ranking is worth attempting BEFORE paying for it.
@@ -1477,7 +1536,7 @@ export function createSortedRowModel<TData extends RowData>(
           const sample = new Set<string>()
           let sampled = 0
           for (let i = 0; i < n; i += stride) {
-            sample.add(String(rows[i]!.getCellValueByColumnId(columnId)))
+            sample.add(autoTextKey(rows[i]!.getCellValueByColumnId(columnId)))
             sampled++
           }
           // Only attempt ranking when the sample suggests real repetition.
@@ -1485,7 +1544,7 @@ export function createSortedRowModel<TData extends RowData>(
         }
 
         for (let i = 0; i < n; i++) {
-          const s = String(rows[i]!.getCellValueByColumnId(columnId))
+          const s = autoTextKey(rows[i]!.getCellValueByColumnId(columnId))
           strings[i] = s
           if (distinct) {
             distinct.add(s)
@@ -1514,11 +1573,19 @@ export function createSortedRowModel<TData extends RowData>(
           compare = compareNumericKeys
           // A replacement whose text is not among the ranked values has no
           // rank; the repair path treats that as "sort everything again".
-          keyOf = (row) => rankOf.get(String(row.getCellValueByColumnId(columnId))) ?? MISSING_KEY
+          keyOf = (row) => {
+            const value = row.getCellValueByColumnId(columnId)
+            // A number arriving in a tick makes the column mixed; resort fully.
+            if (typeof value === 'number') return MISSING_KEY
+            return rankOf.get(autoTextKey(value)) ?? MISSING_KEY
+          }
         } else {
           keys = strings
           compare = compareCollatedKeys
-          keyOf = (row) => String(row.getCellValueByColumnId(columnId))
+          keyOf = (row) => {
+            const value = row.getCellValueByColumnId(columnId)
+            return typeof value === 'number' ? MISSING_KEY : autoTextKey(value)
+          }
         }
       } else {
         keyOf = (row) => row.getCellValueByColumnId(columnId)
@@ -1735,14 +1802,37 @@ export function createSortedRowModel<TData extends RowData>(
 }
 
 /**
- * Numeric key comparison for the built-in `number` and `date` comparators.
- * Subtraction rather than `<`/`>` on purpose: it reproduces the originals
- * exactly, NaN included. An unparseable date or a non-numeric value yields NaN,
- * and the sort spec turns a NaN comparison result into 0 (SortCompare coerces
- * it), which is the behaviour callers already depend on.
+ * Numeric key comparison for the built-in `number`, `date` and numeric
+ * `auto` comparators. Keys are never NaN (blanks and unparseable values map to
+ * -Infinity), but two -Infinity keys subtract to NaN, so equal keys return 0
+ * explicitly: the multi-clause sort reads any non-zero result, NaN included,
+ * as decided and would skip the next clause.
  */
 function compareNumericKeys(a: number, b: number): number {
-  return a - b
+  return a === b ? 0 : a - b
+}
+
+/** Text key for the `auto` comparator: blanks become '' so they collate first. */
+function autoTextKey(value: unknown): string {
+  return isBlankSortValue(value) ? '' : String(value)
+}
+
+/**
+ * How the `auto` comparator should treat a column: 'number' when every
+ * non-blank value is a number, 'mixed' when numbers share it with anything
+ * else, 'text' otherwise. One pass, stopping as soon as the answer is known.
+ */
+function autoSortMode(rows: ReadonlyArray<Row<any>>, columnId: string): 'number' | 'mixed' | 'text' {
+  let numbers = false
+  let other = false
+  for (let i = 0; i < rows.length; i++) {
+    const value = rows[i]!.getCellValueByColumnId(columnId)
+    if (isBlankSortValue(value)) continue
+    if (typeof value === 'number') numbers = true
+    else other = true
+    if (numbers && other) return 'mixed'
+  }
+  return numbers ? 'number' : 'text'
 }
 
 /**

package/src/export-dates.test.ts

@@ -0,0 +1,114 @@
+/**
+ * Dates must come out of an export as the day the grid showed, in every
+ * timezone (#103). Text exports used `toISOString()`, which is UTC, so local
+ * midnight on the 15th came out as the 14th east of UTC. A bare 'YYYY-MM-DD'
+ * was parsed as UTC midnight, so west of UTC it formatted as the day before.
+ *
+ * These pin `process.env.TZ` per case: a suite run on a UTC machine (CI) would
+ * pass the old code without it.
+ */
+import { describe, expect, it } from 'vitest'
+import { parseDateValue } from './cell-formatting'
+import { asDate } from './SvGrid.helpers'
+import {
+  coerceExportDate,
+  formatValueForExport,
+  serializeDelimited,
+  serializeHtml,
+  serializeMarkdown,
+  toLocalIsoString,
+} from './export-format'
+
+async function inZone<T>(tz: string, fn: () => T | Promise<T>): Promise<T> {
+  const prev = process.env.TZ
+  process.env.TZ = tz
+  try {
+    return await fn()
+  } finally {
+    // Assigning undefined would set the string "undefined".
+    if (prev === undefined) delete process.env.TZ
+    else process.env.TZ = prev
+  }
+}
+
+const EAST = 'Europe/Sofia' // UTC+2 in January
+const FAR_EAST = 'Pacific/Auckland' // UTC+13 in January
+const WEST = 'America/New_York' // UTC-5 in January
+
+describe('parseDateValue', () => {
+  it('reads a bare calendar date as local midnight of that day', async () => {
+    for (const tz of [EAST, FAR_EAST, WEST, 'UTC']) {
+      await inZone(tz, () => {
+        const d = parseDateValue('2026-06-27')!
+        expect([d.getFullYear(), d.getMonth(), d.getDate(), d.getHours()], tz).toEqual([2026, 5, 27, 0])
+        // The grid's display path uses the same parser.
+        expect(asDate('2026-06-27')!.getTime(), tz).toBe(d.getTime())
+      })
+    }
+  })
+
+  it('rejects an impossible calendar date instead of rolling it over', () => {
+    expect(parseDateValue('2026-02-30')).toBeNull()
+    expect(parseDateValue('2026-13-01')).toBeNull()
+  })
+
+  it('leaves full timestamps, Dates and epoch numbers alone', () => {
+    expect(parseDateValue('2024-01-15T10:00:00Z')!.toISOString()).toBe('2024-01-15T10:00:00.000Z')
+    const d = new Date(2024, 0, 15)
+    expect(parseDateValue(d)).toBe(d)
+    expect(parseDateValue(0)!.getTime()).toBe(0)
+    expect(parseDateValue(null)).toBeNull()
+    expect(parseDateValue('')).toBeNull()
+    expect(parseDateValue('nope')).toBeNull()
+    expect(parseDateValue(true)).toBeNull()
+  })
+
+  it('coerceExportDate follows it', async () => {
+    await inZone(WEST, () => {
+      expect(coerceExportDate('2024-01-15')!.getDate()).toBe(15)
+    })
+  })
+})
+
+describe('formatted date export west of UTC', () => {
+  it('shows the calendar day of a date-only string', async () => {
+    await inZone(WEST, () => {
+      expect(formatValueForExport('2024-01-15', { type: 'date', locales: 'en-US' })).toBe('01/15/2024')
+    })
+  })
+})
+
+describe('toLocalIsoString', () => {
+  it('writes the local wall clock with its offset', async () => {
+    await inZone(EAST, () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15))).toBe('2024-01-15T00:00:00.000+02:00')
+    })
+    await inZone(WEST, () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15, 9, 5, 7, 42))).toBe('2024-01-15T09:05:07.042-05:00')
+    })
+    await inZone('Asia/Kolkata', () => {
+      expect(toLocalIsoString(new Date(2024, 0, 15))).toBe('2024-01-15T00:00:00.000+05:30')
+    })
+  })
+
+  it('is the same instant as the Date', async () => {
+    await inZone(FAR_EAST, () => {
+      const d = new Date(2024, 0, 15, 3, 4, 5)
+      expect(new Date(toLocalIsoString(d)).getTime()).toBe(d.getTime())
+    })
+  })
+})
+
+describe('text exports keep the local day (#103)', () => {
+  it('CSV, HTML and Markdown write 2024-01-15 east of UTC', async () => {
+    for (const tz of [EAST, FAR_EAST]) {
+      await inZone(tz, async () => {
+        // Build the Date inside the zone: local midnight there.
+        const local = [{ when: 'When' }, { when: new Date(2024, 0, 15) }]
+        expect(await serializeDelimited(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+        expect(await serializeHtml(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+        expect(await serializeMarkdown(local, ['when']), tz).toContain('2024-01-15T00:00:00.000+')
+      })
+    }
+  })
+})

package/src/export-format.ts

@@ -20,6 +20,7 @@ import type { CellFormatConfig } from './core'
 import {
   formatNumericWithConfig,
   getDateFormatter,
+  parseDateValue,
   resolveDatePattern,
 } from './cell-formatting'
 
@@ -39,16 +40,27 @@ export {
 /** Best-effort coercion of a cell value to a Date. Accepts Date, epoch ms
  *  numbers, and parseable date strings. Returns null when it isn't a date. */
 export function coerceExportDate(value: unknown): Date | null {
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    const d = new Date(value)
-    return Number.isNaN(d.getTime()) ? null : d
-  }
-  if (typeof value === 'string' && value.trim() !== '') {
-    const d = new Date(value)
-    return Number.isNaN(d.getTime()) ? null : d
-  }
-  return null
+  return parseDateValue(value)
+}
+
+/**
+ * A Date as ISO 8601 in LOCAL time with its offset, e.g.
+ * `2024-01-15T00:00:00.000+02:00`. Text exports used `toISOString()`, which
+ * is UTC: local midnight on the 15th came out as `2024-01-14T22:00:00.000Z`
+ * east of UTC, and anything reading the date part got the wrong day (#103).
+ * Same instant, but the date part is the one the grid showed.
+ */
+export function toLocalIsoString(d: Date): string {
+  const pad = (n: number, w = 2) => String(Math.abs(n)).padStart(w, '0')
+  const offset = -d.getTimezoneOffset()
+  const sign = offset < 0 ? '-' : '+'
+  const year = d.getFullYear()
+  return (
+    (year < 0 ? '-' + pad(year, 6) : pad(year, 4)) +
+    `-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
+    `T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}` +
+    `${sign}${pad(Math.floor(Math.abs(offset) / 60))}:${pad(Math.abs(offset) % 60)}`
+  )
 }
 
 /**
@@ -325,7 +337,7 @@ function csvCell(value: unknown, delimiter: string): string {
     value == null
       ? ''
       : value instanceof Date
-        ? value.toISOString()
+        ? toLocalIsoString(value)
         : String(value)
   if (s === '') return s
   if (s.includes(delimiter) || s.includes('"') || s.includes('\n') || s.includes('\r')) {
@@ -373,7 +385,7 @@ const HTML_ESCAPE: Record<string, string> = {
 }
 function htmlCell(value: unknown): string {
   const s =
-    value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+    value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   return s.replace(/[&<>"']/g, (c) => HTML_ESCAPE[c]!)
 }
 
@@ -472,7 +484,7 @@ export async function serializeJson(
 
 /** Escape a Markdown table cell: pipes and newlines would break the row. */
 function mdCell(value: unknown): string {
-  const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+  const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   return s.replace(/\\/g, '\\\\').replace(/\|/g, '\\|').replace(/\r?\n/g, '<br>')
 }
 
@@ -520,7 +532,7 @@ const XML_ESCAPE: Record<string, string> = {
   "'": '&apos;',
 }
 function xmlText(value: unknown): string {
-  const s = value == null ? '' : value instanceof Date ? value.toISOString() : String(value)
+  const s = value == null ? '' : value instanceof Date ? toLocalIsoString(value) : String(value)
   // Stripping control characters is the point: XML 1.0 forbids them outright,
   // so a stray \x00 from a data source would produce an unopenable file.
   // eslint-disable-next-line no-control-regex

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/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) {