@svgrid/grid 3.0.5 → 3.0.7

package/src/SvGridDropdown.svelte

@@ -45,6 +45,18 @@
      *  loading line instead of "No options", which would read as "nothing to
      *  pick" when the truth is "not here yet". */
     loading?: boolean
+    /**
+     * The trigger's element id, so a form's `<label for>` reaches it and
+     * clicking the label focuses it. Without one a select in a form was a
+     * button with no name.
+     */
+    id?: string
+    /** Accessible name for the trigger when no label points at `id`. */
+    ariaLabel?: string
+    /** Marks the trigger `aria-invalid`, the way an input in the same form is. */
+    invalid?: boolean
+    /** `aria-describedby` for the trigger: the error or help text of the field. */
+    describedBy?: string
   }
 
   let {
@@ -59,6 +71,10 @@
     onCommit,
     onCancel,
     loading = false,
+    id,
+    ariaLabel,
+    invalid = false,
+    describedBy,
   }: Props = $props()
 
   /** Stable per-instance id used to build option ids for
@@ -348,10 +364,14 @@
   <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
   <button
     type="button"
+    {id}
     class="sv-grid-dropdown-trigger"
     class:sv-grid-dropdown-trigger-chips={renderChipsInTrigger && selectedArr.length > 0}
     aria-haspopup="listbox"
     aria-expanded={open}
+    aria-label={ariaLabel}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedBy}
     aria-activedescendant={open ? optionId(highlighted) : undefined}
     bind:this={triggerEl}
     use:focusTrigger

package/src/SvModal.svelte

@@ -16,6 +16,7 @@
   import { portalToBody } from './popover'
   import { nextEditorId } from './editor-contract'
   import { createOverlay } from './createOverlay.svelte'
+  import { getFocusable } from './a11y/focus-trap'
 
   type Props = {
     open?: boolean
@@ -33,6 +34,13 @@
     closeOnEsc?: boolean
     /** Hide the header close (x) button. */
     hideClose?: boolean
+    /**
+     * The element to focus when the dialog opens. Defaults to the first
+     * focusable control in the body or footer - never the header Close (x),
+     * so opening a dialog lands on its content and Enter does not dismiss it.
+     * Pass a getter to target a specific field (e.g. a search input).
+     */
+    initialFocus?: () => HTMLElement | null
     children?: Snippet
     footer?: Snippet
   }
@@ -48,6 +56,7 @@
     closeOnBackdrop = true,
     closeOnEsc = true,
     hideClose = false,
+    initialFocus,
     children,
     footer,
   }: Props = $props()
@@ -69,6 +78,19 @@
     closeOnEsc: () => closeOnEsc,
     closeOnBackdrop: () => closeOnBackdrop,
     onOpen: () => { drag = { x: 0, y: 0 }; box = null },
+    // Land focus on the dialog's content, not the header Close (x). The x is
+    // the first focusable in DOM order, so the trap's "first focusable"
+    // default sent focus there - where Enter immediately dismissed the
+    // dialog and the loud focus ring pointed at "close" over the primary
+    // action. Prefer the first focusable outside the header; fall back to the
+    // panel itself when the body has no control of its own.
+    initialFocus: () => {
+      const explicit = initialFocus?.()
+      if (explicit) return explicit
+      if (!dialogEl) return null
+      const first = getFocusable(dialogEl).find((el) => !el.closest('.sv-modal__header'))
+      return first ?? dialogEl
+    },
   })
 
   // --- Drag (header) ---------------------------------------------------------

package/src/SvModal.test.ts

@@ -4,7 +4,7 @@
  * SvDrawer shares), plus the modal's title wiring and closeOnEsc opt-out.
  */
 import { describe, expect, it } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
 import SvModal from './SvModal.svelte'
 
 function mountModal(props: Record<string, unknown>) {
@@ -79,6 +79,35 @@ describe('SvModal', () => {
     } finally { destroy() }
   })
 
+  it('focuses the first body control on open, not the header Close (x)', async () => {
+    // The close x is the first focusable in DOM order; the trap's plain "first
+    // focusable" sent focus there, so Enter dismissed the dialog at once and
+    // the focus ring pointed at "close". Focus must land on the content.
+    // (The trap focuses on the next microtask, so let it run.)
+    const body = createRawSnippet(() => ({
+      render: () => `<button type="button" class="probe-ok">OK</button>`,
+    }))
+    const { destroy } = mountModal({ open: true, title: 'Edit row', children: body })
+    try {
+      flushSync()
+      await new Promise((r) => setTimeout(r, 0))
+      const active = document.activeElement as HTMLElement
+      expect(active?.classList.contains('sv-modal__x')).toBe(false)
+      expect(active?.classList.contains('probe-ok')).toBe(true)
+    } finally { destroy() }
+  })
+
+  it('falls back to the panel, still not the Close (x), when the body has no control', async () => {
+    const { destroy } = mountModal({ open: true, title: 'Empty' })
+    try {
+      flushSync()
+      await new Promise((r) => setTimeout(r, 0))
+      const active = document.activeElement as HTMLElement
+      expect(active?.classList.contains('sv-modal__x')).toBe(false)
+      expect(active?.classList.contains('sv-modal')).toBe(true)
+    } finally { destroy() }
+  })
+
   it('dismisses on outside (backdrop) pointerdown', () => {
     const { destroy } = mountModal({ open: true })
     try {

package/src/a11y/dismissable.test.ts

@@ -1,6 +1,8 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { createDismissableLayer, dismissableDepth, onScrollOutside } from './dismissable'
 
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
 function panel(): HTMLElement {
   const el = document.createElement('div')
   document.body.appendChild(el)
@@ -77,13 +79,20 @@ describe('createDismissableLayer', () => {
     expect(dismissableDepth()).toBe(0)
   })
 
-  it('close-on-scroll ignores scrolling inside the panel', () => {
+  it('close-on-scroll ignores scrolling inside the panel', async () => {
     const el = panel()
     const list = document.createElement('div') // e.g. the filter menu's facet list
     el.appendChild(list)
     let closed = 0
     const off = onScrollOutside(() => el, () => closed++)
 
+    // A scroll that finished before the panel opened is still queued for
+    // the next rendering step; it lands after the listener is asked for
+    // and must not close what the same click just opened.
+    document.body.dispatchEvent(new Event('scroll'))
+    expect(closed).toBe(0)
+    await nextFrame()
+
     // Inner scroll containers don't bubble, so this only reaches the capture
     // listener - it must NOT close the menu the user is scrolling.
     list.dispatchEvent(new Event('scroll'))

package/src/a11y/dismissable.ts

@@ -101,6 +101,16 @@ export function dismissableDepth(): number {
  * window listener gets wrong: inner scroll containers don't bubble, so the
  * capture listener sees them and dismisses the panel the user is scrolling.
  *
+ * The listener arms one animation frame after it is asked for, not at once.
+ * Scroll events are queued and dispatched in the next rendering step, so a
+ * scroll that FINISHED before the click that opened the panel - the browser
+ * pulling a half-hidden funnel button into view as it focuses it, a test
+ * driver scrolling the header into place - still lands after the panel has
+ * mounted and wired this listener, and used to close it on the spot. The
+ * panel measured its anchor after that scroll, so the event carries nothing
+ * it needs to react to. Rendering runs the scroll steps before the animation
+ * frame callbacks, which is why one frame is exactly the right delay.
+ *
  * Returns the unsubscribe function.
  */
 export function onScrollOutside(element: () => DismissTarget, onOutside: () => void): () => void {
@@ -109,6 +119,16 @@ export function onScrollOutside(element: () => DismissTarget, onOutside: () => v
     if (containsTarget(element(), event.target as Node)) return
     onOutside()
   }
-  window.addEventListener('scroll', handler, true)
-  return () => window.removeEventListener('scroll', handler, true)
+  let armed = false
+  let frame: number | null = requestAnimationFrame(() => {
+    frame = null
+    armed = true
+    window.addEventListener('scroll', handler, true)
+  })
+  return () => {
+    if (frame !== null) cancelAnimationFrame(frame)
+    frame = null
+    if (armed) window.removeEventListener('scroll', handler, true)
+    armed = false
+  }
 }

package/src/build-api.ts

@@ -26,7 +26,7 @@ import {
   columnDefMatchesId,
 } from "./cell-values";
 import { hasAdvancedFilterEngine } from "./advanced-filter.svelte";
-import { undoHistory, redoHistory } from "./history";
+import { undoHistory, redoHistory, peekUndoHistory, peekRedoHistory } from "./history";
 import { buildCommandContext } from "./command-context";
 
 type OrientedRange = {
@@ -35,6 +35,32 @@ type OrientedRange = {
   highlight: { row: number; col: number }
 }
 
+/**
+ * Row id -> index, per data array, for `applyTransaction`.
+ *
+ * An update batch used to walk every row calling `getRowId` to find the ones
+ * it replaced - 100k calls per tick on a 100k-row feed, whatever the batch
+ * size. The map is built once per array and, for an update-only transaction,
+ * carried to the array it produces: same ids at the same indices. An add or
+ * remove changes indices, so those transactions leave the next array to
+ * build its own map on first use. Keyed weakly so a replaced array takes its
+ * map with it.
+ */
+const rowIndexByData = new WeakMap<ReadonlyArray<unknown>, Map<string, number>>()
+
+function rowIndexOf<TData>(
+  data: ReadonlyArray<TData>,
+  getId: (row: TData, index: number) => string,
+): Map<string, number> {
+  let byId = rowIndexByData.get(data)
+  if (!byId) {
+    byId = new Map()
+    for (let i = 0; i < data.length; i++) byId.set(getId(data[i]!, i), i)
+    rowIndexByData.set(data, byId)
+  }
+  return byId
+}
+
 /**
  * The selection as the user made it: committed ranges first, the active one
  * last, each keeping its anchor as `from` and its focus as `to`. The active
@@ -111,6 +137,10 @@ export function createGridApi<
     };
 
     return {
+      getElement() {
+        const el = ctx.scrollContainer as HTMLElement | null
+        return (el?.closest(".sv-grid-root") as HTMLElement | null) ?? null
+      },
       getCellValue(rowIndex, columnId) {
         const row = ctx.internalData[rowIndex];
         const column = findColumn(columnId);
@@ -243,38 +273,41 @@ export function createGridApi<
       },
       applyTransaction(tx) {
         const getId = ctx.props.getRowId;
-        let next = ctx.internalData.slice() as Array<TData>;
+        const current = ctx.internalData as ReadonlyArray<TData>;
+        let next = current.slice() as Array<TData>;
         let added = 0;
         let updated = 0;
         let removed = 0;
 
+        // Everything resolves against the indices of `current`: the id ->
+        // index map answers updates and id removals with one lookup each, a
+        // reference removal with one `indexOf`, and no pass over the rows
+        // that did not change. A row both updated and removed in the same
+        // transaction ends up removed, as it did when removes ran first.
+        const removeIdx = new Set<number>();
         if (tx.remove?.length) {
-          const removeIds = new Set<string>();
-          const removeRefs = new Set<TData>();
+          const byId = getId ? rowIndexOf(current, getId) : null;
           for (const r of tx.remove) {
-            if (typeof r === "string") removeIds.add(r);
-            else removeRefs.add(r as TData);
+            const idx = typeof r === "string" ? byId?.get(r) : current.indexOf(r as TData);
+            if (idx !== undefined && idx >= 0) removeIdx.add(idx);
           }
-          next = next.filter((row, i) => {
-            const hit =
-              removeRefs.has(row) ||
-              (getId ? removeIds.has(getId(row, i)) : false);
-            if (hit) removed += 1;
-            return !hit;
-          });
         }
 
         if (tx.update?.length && getId) {
-          const byId = new Map<string, TData>();
-          for (const u of tx.update) byId.set(getId(u, 0), u);
-          next = next.map((row, i) => {
-            const u = byId.get(getId(row, i));
-            if (u) {
-              updated += 1;
-              return u;
-            }
-            return row;
-          });
+          const byId = rowIndexOf(current, getId);
+          for (const u of tx.update) {
+            const idx = byId.get(getId(u, 0));
+            if (idx === undefined) continue;
+            next[idx] = u;
+            updated += 1;
+          }
+          // Same ids at the same indices: the next array can reuse the map.
+          if (!removeIdx.size && !tx.add?.length) rowIndexByData.set(next, byId);
+        }
+
+        if (removeIdx.size) {
+          next = next.filter((_, i) => !removeIdx.has(i));
+          removed = removeIdx.size;
         }
 
         if (tx.add?.length) {
@@ -507,6 +540,28 @@ export function createGridApi<
       getData() {
         return ctx.internalData;
       },
+      getRowId(row) {
+        // The stable id the grid keys a row by: what `getRowId` computed,
+        // or the row's position when no `getRowId` prop is set. A number is
+        // a DISPLAY index into the rendered rows, the space getActiveCell,
+        // scrollToRow and the cell methods work in; a row object is looked
+        // up wherever it sits. Null when the index or the object is unknown,
+        // so a caller can tell "no such row" from a real id.
+        if (typeof row === "number") {
+          const found = ctx.allRows[row];
+          return found && !isGroupRow(found) ? (found.id as string) : null;
+        }
+        const inRows = ctx.allRows.find(
+          (r: { original?: unknown; id: string }) => r.original === row,
+        );
+        if (inRows) return inRows.id as string;
+        const getId = ctx.props.getRowId as
+          | ((r: TData, index: number) => string)
+          | undefined;
+        const index = ctx.internalData.indexOf(row as TData);
+        if (index < 0) return null;
+        return getId ? getId(row as TData, index) : String(index);
+      },
       getColumns() {
         // Snapshot every column with its human-readable label and
         // visibility flag. Used by external code (exporters, column
@@ -631,10 +686,10 @@ export function createGridApi<
         ctx.autosizeColumn(columnId);
       },
       getRowHeight(rowIndex: number) {
-        const own = ctx.rowResizeHeightPx(rowIndex);
-        if (own != null) return own;
-        const declared = ctx.props.rowHeight;
-        return typeof declared === "function" ? declared(rowIndex) : (declared ?? 30);
+        // The height the grid draws the row at, whatever decided it: a drag,
+        // a measurement under auto height, a detail row's own height, the
+        // declared rowHeight or the default.
+        return ctx.rowSizePxOf(rowIndex);
       },
       setRowHeight(rowIndex: number, height: number | null) {
         ctx.setRowResizeHeight(rowIndex, height);
@@ -705,6 +760,9 @@ export function createGridApi<
       canUndo() { void ctx.historyVersion; return ctx.historyPtr >= 0 },
       canRedo() { void ctx.historyVersion; return ctx.historyPtr < ctx.history.length - 1 },
       clearHistory() { ctx.history = []; ctx.historyPtr = -1; ctx.historyVersion += 1 },
+      setHistoryTag(tag) { ctx.historyTag = tag },
+      peekUndo() { void ctx.historyVersion; return peekUndoHistory(ctx) },
+      peekRedo() { void ctx.historyVersion; return peekRedoHistory(ctx) },
       // ---- Find
       openFind()  { ctx.findOpen = true },
       closeFind() { ctx.findOpen = false; ctx.findQuery = '' },

package/src/cell-formatting.test.ts

@@ -271,3 +271,20 @@ describe('formatNumericWithConfig - cache reuse', () => {
     expect(typeof result).toBe('string')
   })
 })
+
+describe('formatNumericWithConfig - formatter cache key', () => {
+  it('does not hand a signDisplay column the formatter another column cached without it', () => {
+    // Same digits, no sign: cached first, as a currency-like column would.
+    expect(
+      formatNumericWithConfig(3.27, { type: 'number', locales: 'en-US', options: { minimumFractionDigits: 2, maximumFractionDigits: 2 } }),
+    ).toBe('3.27')
+    // Same digits, with a sign: must not reuse the one above.
+    expect(
+      formatNumericWithConfig(3.27, {
+        type: 'number',
+        locales: 'en-US',
+        options: { minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay: 'always' },
+      }),
+    ).toBe('+3.27')
+  })
+})

package/src/cell-formatting.ts

@@ -101,7 +101,24 @@ export function getNumberFormatter(
     '|' +
     (options.currencyDisplay ?? '') +
     '|' +
-    (options.notation ?? '')
+    (options.notation ?? '') +
+    // Every option that changes the output belongs in the key. `signDisplay`
+    // was missing, so a percent column asking for "+3.27" got the formatter
+    // a currency column with the same digits had already cached, and no sign.
+    '|' +
+    (options.signDisplay ?? '') +
+    '|' +
+    (options.minimumIntegerDigits ?? '') +
+    '|' +
+    (options.compactDisplay ?? '') +
+    '|' +
+    (options.unit ?? '') +
+    '|' +
+    (options.unitDisplay ?? '') +
+    '|' +
+    (options.minimumSignificantDigits ?? '') +
+    '|' +
+    (options.maximumSignificantDigits ?? '')
   let fmt = numberFormatterCache.get(key)
   if (!fmt) {
     fmt = new Intl.NumberFormat(locales as string | string[] | undefined, options)
@@ -110,6 +127,37 @@ export function getNumberFormatter(
   return fmt
 }
 
+/**
+ * A cell value as a Date, or null when it is not one. Accepts a Date, epoch ms,
+ * or a parseable string.
+ *
+ * A bare calendar date ('2026-06-27') is read as LOCAL midnight of that day.
+ * `new Date('2026-06-27')` reads it as UTC midnight, which every zone west of
+ * UTC formats as the 26th. The day in the string is the day the user meant.
+ */
+export function parseDateValue(value: unknown): Date | null {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value)) return null
+    const d = new Date(value)
+    return Number.isNaN(d.getTime()) ? null : d
+  }
+  if (typeof value !== 'string') return null
+  const s = value.trim()
+  if (s === '') return null
+  const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s)
+  if (ymd) {
+    const [y, m, day] = [Number(ymd[1]), Number(ymd[2]) - 1, Number(ymd[3])]
+    const d = new Date(0)
+    d.setFullYear(y, m, day)
+    d.setHours(0, 0, 0, 0)
+    // Reject a rollover ('2026-02-30' is not March 2nd), as `new Date` does.
+    return d.getMonth() === m && d.getDate() === day ? d : null
+  }
+  const d = new Date(s)
+  return Number.isNaN(d.getTime()) ? null : d
+}
+
 /** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
 const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
 /** A cached `Intl.DateTimeFormat` for the locale and options given. Cached because

package/src/cell-render.test.ts

@@ -141,6 +141,26 @@ describe('createCellRender / computeCellValidity', () => {
       message: 'Salary must be at least $1,000',
     })
   })
+
+  it('judges the open editor draft, parsed as a commit would parse it', () => {
+    // With rejectInvalid a refused value never lands, so the red flag while
+    // the value is typed is the only feedback the user gets.
+    const col = makeColumn('salary', { validate: validateSalary, editorType: 'number' })
+    const typing = createCellRender(makeCtx({
+      editedCellValues: {},
+      editingCell: { rowId: 'r1', columnId: 'salary', editorType: 'number', value: '5' },
+    }))
+    expect(typing.computeCellValidity(makeRow('r1', { salary: 85000 }), col)).toEqual({
+      invalid: true,
+      message: 'Salary must be at least $1,000',
+    })
+    // Another cell's editor does not bleed into this one.
+    const elsewhere = createCellRender(makeCtx({
+      editedCellValues: {},
+      editingCell: { rowId: 'r2', columnId: 'salary', editorType: 'number', value: '5' },
+    }))
+    expect(elsewhere.computeCellValidity(makeRow('r1', { salary: 85000 }), col)).toEqual({ invalid: false, message: null })
+  })
 })
 
 describe('createCellRender / computeRowClass', () => {
@@ -489,9 +509,11 @@ describe('createCellRender / formatPinnedValue', () => {
 })
 
 describe('createCellRender / computePinnedCellClass', () => {
-  it('returns empty string when cellClass is not a function', () => {
+  it('applies a static cellClass, a string or a list, the way a body cell does', () => {
     const cr = createCellRender(makeCtx())
-    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: 'x' }))).toBe('')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: 'x' }))).toBe('x')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', { cellClass: ['x', 'y'] }))).toBe('x y')
+    expect(cr.computePinnedCellClass({ a: 1 }, makeColumn('a', {}))).toBe('')
   })
 
   it('invokes a function cellClass with a null row and the pinned value', () => {

package/src/cell-render.ts

@@ -30,6 +30,7 @@ import {
 import {
   getPinnedCellValue,
 } from "./cell-values";
+import { parseEditorValue } from "./editors/cell-editors";
 
 export function createCellRender<
   TFeatures extends TableFeatures = TableFeatures,
@@ -131,11 +132,22 @@ export function createCellRender<
     // cache, so `getCellValueByColumnId` would return the stale pre-edit value
     // and validation would never re-run after an edit. Consult the overlay
     // first - same rule the display path (getCellDisplayValue) and summaries
-    // use - so a cell re-validates live as the user types.
+    // use. While this cell's editor is open the draft is what the rule sees,
+    // parsed the way a commit would parse it, so the red highlight and the
+    // message show as the user types - which, with `rejectInvalid`, is the
+    // only time a refused value is ever visible.
     const edited = ctx.editedCellValues ?? {}
     const key = getCellKey(row.id, column.id)
+    const editing = ctx.editingCell
     const value =
-      key in edited ? edited[key] : row.getCellValueByColumnId(column.id)
+      editing && editing.rowId === row.id && editing.columnId === column.id
+        ? parseEditorValue(editing.editorType, editing.value, {
+            multiple: column.columnDef.editorMultiple === true,
+            dateOnly: column.columnDef.cellDataType === "dateString",
+          })
+        : key in edited
+          ? edited[key]
+          : row.getCellValueByColumnId(column.id)
     const out = rule({
       value,
       row: row.original as TData,
@@ -470,13 +482,17 @@ export function createCellRender<
     rowData: TData,
     column: Column<TData>,
   ): string {
-    const cellClass = column.columnDef.cellClass as
-      | ((ctx: { getValue: () => unknown; value: unknown; row: null; column: Column<TData> }) => string | undefined | null)
-      | undefined;
-    if (typeof cellClass !== "function") return "";
+    const raw = column.columnDef.cellClass;
+    if (raw == null) return "";
+    // A static class applies to the pinned cell the way it does to a body
+    // cell; a function gets the pinned value and `row: null`, since the
+    // pinned row is not a row of the table.
+    if (typeof raw === "string" || Array.isArray(raw)) return resolveClassList(raw);
+    if (typeof raw !== "function") return "";
+    const cellClass = raw as unknown as
+      (ctx: { getValue: () => unknown; value: unknown; row: null; column: Column<TData> }) => string | ReadonlyArray<string> | Record<string, boolean> | undefined | null;
     const value = getPinnedCellValue(rowData, column);
-    const out = cellClass({ getValue: () => value, value, row: null, column });
-    return out ? String(out) : "";
+    return resolveClassList(cellClass({ getValue: () => value, value, row: null, column }));
   }
 
   return {