@svgrid/grid 3.0.5 → 3.0.7

package/dist/server.d.ts

@@ -8,6 +8,6 @@
  * a worker feeding a block cache, or `@svgrid/enterprise`'s own row model,
  * whose unit tests run without the Svelte compiler.
  */
-export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, } from './server-data-source.js';
+export { createServerDataSource, type ServerDataSource, type ServerSelectionRule, type ServerRequest, type ServerResult, type ServerController, type ServerControllerOptions, type ServerState, type ServerSortModel, type ServerFilterModel, type ServerAggFn, type ServerAggregation, type ServerGroupRow, type ServerLeafRow, type ServerMoreRow, type ServerFooterRow, type ServerSkeletonRow, type ServerGrandTotalRow, type ServerPlaceholderRow, type ServerDisplayRow, type ServerDetailRow, } from './server-data-source.js';
 export { createBlockCache, createRowPlaceholder, rowPlaceholderState, type BlockCache, type BlockCacheOptions, type BlockCacheState, type BlockFetchResult, type BlockState, } from './server-block-cache.js';
 export { toServerFilterColumns, type GridRowModel, type GridFilterState, type GridRowModelSort, } from './row-model.js';

package/dist/sparkline.js

@@ -38,13 +38,15 @@ export function buildSparkline(values, cfg = {}) {
         const barW = Math.max(1, slot - gap);
         const mid = height / 2;
         const h = innerH / 2;
-        const bars = values.map((v, i) => {
+        const bars = [];
+        values.forEach((v, i) => {
             const x = pad + i * slot + (slot - barW) / 2;
+            // A win/loss sparkline marks a win up and a loss down; a zero is a
+            // blank gap, no mark at all, the way Excel draws one.
             if (v > 0)
-                return { x, y: mid - h, w: barW, h, negative: false };
-            if (v < 0)
-                return { x, y: mid, w: barW, h, negative: true };
-            return { x, y: mid - 1, w: barW, h: 2, negative: false };
+                bars.push({ x, y: mid - h, w: barW, h, negative: false });
+            else if (v < 0)
+                bars.push({ x, y: mid, w: barW, h, negative: true });
         });
         return { ...base, linePath: '', areaPath: '', bars, lastPoint: null };
     }

package/dist/svgrid-wrapper.types.d.ts

@@ -151,6 +151,12 @@ export type SvGridTransactionResult = {
  * the component.
  */
 export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> = {
+    /**
+     * The grid's root element (`.sv-grid-root`), or null before mount and
+     * after unmount. For measuring, focusing, or reading the theme the grid
+     * is drawn with - the PDF export takes its colours from here.
+     */
+    getElement(): HTMLElement | null;
     /** Read a cell value from the underlying data at `rowIndex`. */
     getCellValue(rowIndex: number, columnId: string): unknown;
     /** Write a cell value through the column's field. */
@@ -413,6 +419,15 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     getDisplayedRows(): ReadonlyArray<TData>;
     /** Snapshot of the current data array (pre-pipeline). */
     getData(): ReadonlyArray<TData>;
+    /**
+     * The stable id the grid keys a row by: what the `getRowId` prop
+     * computed, or the row's position when no `getRowId` is set. Pass a
+     * display index (the space `getActiveCell`, `scrollToRow` and the cell
+     * methods use) or a row object; returns null for an unknown index or a
+     * row that is not in the data. Pair with `selectRows`, `toggleRowSelected`
+     * or an `applyTransaction` remove, all of which take these ids.
+     */
+    getRowId(row: number | TData): string | null;
     /**
      * Snapshot of every column the grid currently knows about, in visual
      * order, with the human-readable header label. Use this when exporting
@@ -560,6 +575,24 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
     canRedo(): boolean;
     /** Wipe both stacks (e.g. after a server save commits the buffer). */
     clearHistory(): void;
+    /**
+     * Mark every step recorded from now on with `tag`, until the next call;
+     * `undefined` stops the marking. The grid never reads the tag. It is for a
+     * consumer that shows one of several data sets through the grid (a
+     * workbook's sheets, say) and has to know which one the next Ctrl+Z would
+     * change before it lets the grid apply it: it tags the steps with the data
+     * set they were made on and asks `peekUndo` first.
+     */
+    setHistoryTag(tag: unknown): void;
+    /** The step the next `undo()` would apply, or null when there is none. A
+     *  multi-cell action carries one tag, so it reports as one. */
+    peekUndo(): {
+        tag: unknown;
+    } | null;
+    /** The step the next `redo()` would apply, or null when there is none. */
+    peekRedo(): {
+        tag: unknown;
+    } | null;
     /**
      * The same `GridCommandContext` a registered shortcut handler receives.
      *

package/dist/validate.js

@@ -21,7 +21,15 @@ export function validateGridConfig(input) {
     // (a key absent from row 0 but present later) does not trip it. A row
     // model shows placeholder rows before its first block lands; those carry
     // no data keys at all and say nothing about the columns.
-    const sample = (input.data ?? []).filter((row) => !rowPlaceholderState(row)).slice(0, FIELD_SAMPLE_ROWS);
+    // 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.
+    const sample = [];
+    for (const row of input.data ?? []) {
+        if (sample.length >= FIELD_SAMPLE_ROWS)
+            break;
+        if (!rowPlaceholderState(row))
+            sample.push(row);
+    }
     // Under server-side grouping the first rows are group rows, which carry
     // a key and aggregates and none of the leaf fields; nothing to judge by.
     if (sample.length && !input.serverGroup) {

package/dist/virtualization/column-virtualizer.d.ts

@@ -10,6 +10,7 @@ export declare function createColumnVirtualizer(input: {
     setViewportWidth(viewportWidth: number): void;
     setHorizontalOffset(scrollOffset: number): void;
     setOptions(next: Partial<import("./types.js").VirtualizerOptions>): void;
+    measure(): void;
     setScrollOffset(scrollOffset: number): void;
     setViewportHeight(viewportHeight: number): void;
     scrollToIndex(index: number): void;

package/dist/virtualization/svelte-virtualizer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { VirtualizerOptions } from './types.js';
 export declare function createSvelteVirtualizer(options: VirtualizerOptions): {
     readonly version: number;
     setOptions: (next: Partial<VirtualizerOptions>) => void;
+    measure: () => void;
     setScrollOffset: (scrollOffset: number) => void;
     setViewportHeight: (viewportHeight: number) => void;
     scrollToIndex: (index: number) => void;

package/dist/virtualization/svelte-virtualizer.svelte.js

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

package/dist/virtualization/virtualizer.d.ts

@@ -16,6 +16,9 @@ type VirtualizerListener = () => void;
 export declare function buildPreMeasureItems(count: number, estimateSize: number, viewportHeight: number, overscan: number): Array<VirtualItem>;
 export declare function createVirtualizer(initial: VirtualizerOptions): {
     setOptions(next: Partial<VirtualizerOptions>): void;
+    /** Drop the cached offsets and re-read every size from `estimateSize`.
+     *  Call after the sizes a stable size function reports have changed. */
+    measure(): void;
     setScrollOffset(scrollOffset: number): void;
     setViewportHeight(viewportHeight: number): void;
     scrollToIndex(index: number): void;

package/dist/virtualization/virtualizer.js

@@ -210,9 +210,22 @@ export function createVirtualizer(initial) {
     return {
         setOptions(next) {
             const merged = { ...options, ...next };
-            if (sameOptions(options, merged))
+            // 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -94,6 +94,11 @@
       "svelte": "./dist/filtering/excel-filters.js",
       "import": "./dist/filtering/excel-filters.js"
     },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "svelte": "./dist/sparkline.js",
+      "import": "./dist/sparkline.js"
+    },
     "./shortcuts": {
       "types": "./dist/shortcut-registry.d.ts",
       "svelte": "./dist/shortcut-registry.js",

package/src/GridMenus.svelte

@@ -214,6 +214,19 @@
     });
   }
 
+  /**
+   * Whether a column's active filter operator is one of the set operators,
+   * read at event time from component state: the condition input's focus
+   * and blur handlers cannot depend on a template `@const`, because blur
+   * also fires while the popover is being torn down, after that const's
+   * effect is gone.
+   */
+  function isSetOperatorFor(colId: string): boolean {
+    const column = allColumns.find((c) => c.id === colId);
+    const op = filterMenuValues[colId]?.operator ?? defaultOperatorFor(column);
+    return op === "in" || op === "notIn";
+  }
+
   /** Enter anywhere in the panel means "done" - filtering is already live. */
   function onFilterPanelKeydown(event: KeyboardEvent) {
     if (event.key !== "Enter" || event.shiftKey) return;
@@ -286,8 +299,23 @@
   const saveComment = $derived(ctrl.saveComment);
   const removeComment = $derived(ctrl.removeComment);
   const closeCommentEditor = $derived(ctrl.closeCommentEditor);
+
+  function onContextMenuKeydown(event: KeyboardEvent) {
+    // Escape closes the context menu, the way every spreadsheet and desktop
+    // app does. The backdrop closes it on a click, but a keyboard user who
+    // opened it (Shift+F10, the Menu key) otherwise has no way out, and the
+    // menu sits over the sheet swallowing every other key. Handled at the
+    // window so it works whatever holds focus while the menu is open.
+    if (contextMenuFor && (event.key === "Escape" || event.key === "Esc")) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeContextMenu();
+    }
+  }
 </script>
 
+<svelte:window onkeydown={onContextMenuKeydown} />
+
   {#if tooltip}
     <!-- Custom hover tooltip. Floats above the grid; positioned by
          showTooltipFor(). Notes and column tooltips both surface here. -->
@@ -396,10 +424,12 @@
               : menuActiveOperator === "regex"
                 ? "Pattern..."
                 : "Filter value..."}
-          onfocus={isSetOp
-            ? (event) => onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId)
-            : undefined}
-          onblur={isSetOp ? () => closeInSuggest() : undefined}
+          onfocus={(event) => {
+            if (isSetOperatorFor(colId)) onSetOpFilterFocus(event.currentTarget as HTMLInputElement, colId);
+          }}
+          onblur={() => {
+            if (isSetOperatorFor(colId)) closeInSuggest();
+          }}
           oninput={(event) => {
             const input = event.currentTarget as HTMLInputElement;
             updateFilterMenuValue(colId, input.value);