@svgrid/grid 3.0.3 → 4.0.0

package/dist/keyboard.js

@@ -4,6 +4,18 @@ export function getKeyboardIntent(event) {
         return 'gridStart';
     if (event.ctrlKey && event.key === 'End')
         return 'gridEnd';
+    // Ctrl/Cmd + arrow is Excel's "jump to the edge of the data region". The
+    // grid does not implement that itself - it is a paid command registered
+    // through `registerGridShortcuts`, which runs before this function is ever
+    // called. If we get here the key was NOT claimed, and the right answer is to
+    // do nothing: moving one cell is a silently wrong response to a shortcut
+    // every spreadsheet user presses. Alt is excluded so a browser or OS
+    // combination still falls through untouched.
+    if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
+            event.key === 'ArrowUp' || event.key === 'ArrowDown')
+            return 'noop';
+    }
     if (event.key === 'ArrowLeft')
         return 'moveLeft';
     if (event.key === 'ArrowRight')
@@ -89,3 +101,123 @@ export function getNextActiveCell(current, intent, bounds) {
         cellId: current.cellId,
     };
 }
+/**
+ * Where a move lands once collapsed rows and columns are stepped over.
+ *
+ * A sheet's arrow keys never rest on a hidden row or column: the cursor
+ * goes on in the direction of travel to the next one that shows, and when
+ * nothing shows in that direction it comes back to the nearest one before
+ * the landing, which for End on a sheet whose last columns are hidden is the
+ * last visible column. An axis the move did not touch is left alone, so a
+ * cursor sitting on a row the user has just hidden still moves sideways.
+ * With every cell in the direction of travel hidden the cursor stays put.
+ */
+export function pastCollapsed(from, next, bounds, collapsed) {
+    const axis = (fromIdx, nextIdx, max, isCollapsed) => {
+        if (nextIdx === fromIdx)
+            return nextIdx;
+        const dir = nextIdx > fromIdx ? 1 : -1;
+        let i = nextIdx;
+        while (i >= 0 && i <= max && isCollapsed(i))
+            i += dir;
+        if (i >= 0 && i <= max)
+            return i;
+        i = nextIdx - dir;
+        while (i !== fromIdx && isCollapsed(i))
+            i -= dir;
+        return i;
+    };
+    const rowIndex = axis(from.rowIndex, next.rowIndex, bounds.maxRow, collapsed.isRowCollapsed);
+    const colIndex = axis(from.colIndex, next.colIndex, bounds.maxCol, collapsed.isColumnCollapsed);
+    return rowIndex === next.rowIndex && colIndex === next.colIndex ? next : { rowIndex, colIndex, cellId: next.cellId };
+}
+/**
+ * Where Enter and Tab put the cursor, the way a sheet's data entry expects.
+ *
+ * Two rules on top of `getNextActiveCell`. A run of Tabs remembers the
+ * column it started in, and the Enter that ends the run goes down from
+ * THAT column, not from the last cell: type across A1, B1, C1 with Tab and
+ * Enter lands on A2, ready for the next record. Any other move clears the
+ * memory, which the callers do by resetting `tabOrigin` on every plain
+ * `setActiveCell`. And inside a selection of more than one cell the cursor
+ * stays inside it: Enter walks down a column and wraps to the top of the
+ * next, Tab walks along a row and wraps to the start of the next, both
+ * back to the first cell after the last, and the selection is left
+ * standing, so a block can be filled without ever reaching for the mouse.
+ * Arrow keys are not entry keys and never come here.
+ */
+export function getEntryStep(current, intent, opts) {
+    const step = entryStep(current, intent, opts);
+    const collapsed = opts.collapsed;
+    if (!collapsed)
+        return step;
+    const hidden = (c) => collapsed.isRowCollapsed(c.rowIndex) || collapsed.isColumnCollapsed(c.colIndex);
+    if (!hidden(step.cell))
+        return step;
+    if (!step.withinRange)
+        return { ...step, cell: pastCollapsed(current, step.cell, opts, collapsed) };
+    // Walking a block: the same step again from the hidden cell, until one
+    // shows. A block with nothing showing leaves the cursor where it is.
+    let cell = step.cell;
+    for (let guard = (opts.range.maxRow - opts.range.minRow + 1) * (opts.range.maxCol - opts.range.minCol + 1); guard > 0 && hidden(cell); guard -= 1) {
+        cell = entryStep(cell, intent, opts).cell;
+    }
+    return { ...step, cell: hidden(cell) ? current : cell };
+}
+function entryStep(current, intent, opts) {
+    const range = opts.range;
+    const inRange = range !== null &&
+        (range.maxRow > range.minRow || range.maxCol > range.minCol) &&
+        current.rowIndex >= range.minRow && current.rowIndex <= range.maxRow &&
+        current.colIndex >= range.minCol && current.colIndex <= range.maxCol;
+    if (inRange) {
+        let { rowIndex, colIndex } = current;
+        if (intent === 'moveDown') {
+            rowIndex += 1;
+            if (rowIndex > range.maxRow) {
+                rowIndex = range.minRow;
+                colIndex += 1;
+            }
+            if (colIndex > range.maxCol)
+                colIndex = range.minCol;
+        }
+        else if (intent === 'moveUp') {
+            rowIndex -= 1;
+            if (rowIndex < range.minRow) {
+                rowIndex = range.maxRow;
+                colIndex -= 1;
+            }
+            if (colIndex < range.minCol)
+                colIndex = range.maxCol;
+        }
+        else if (intent === 'tabNext') {
+            colIndex += 1;
+            if (colIndex > range.maxCol) {
+                colIndex = range.minCol;
+                rowIndex += 1;
+            }
+            if (rowIndex > range.maxRow)
+                rowIndex = range.minRow;
+        }
+        else {
+            colIndex -= 1;
+            if (colIndex < range.minCol) {
+                colIndex = range.maxCol;
+                rowIndex -= 1;
+            }
+            if (rowIndex < range.minRow)
+                rowIndex = range.maxRow;
+        }
+        return { cell: { rowIndex, colIndex, cellId: current.cellId }, withinRange: true, tabOrigin: null };
+    }
+    const bounds = { maxRow: opts.maxRow, maxCol: opts.maxCol };
+    if (intent === 'tabNext' || intent === 'tabPrev') {
+        return {
+            cell: getNextActiveCell(current, intent, bounds),
+            withinRange: false,
+            tabOrigin: opts.tabOrigin ?? current.colIndex,
+        };
+    }
+    const from = opts.tabOrigin === null ? current : { ...current, colIndex: opts.tabOrigin };
+    return { cell: getNextActiveCell(from, intent, bounds), withinRange: false, tabOrigin: null };
+}

package/dist/menus.d.ts

@@ -1,6 +1,7 @@
 import { type RowData, type TableFeatures } from "./index.js";
 import "./sv-grid-scrollbar.js";
-import type { FilterOperator } from "./SvGrid.types.js";
+import type { ContextMenuIcon, FilterOperator } from "./SvGrid.types.js";
+import type { GridIconName } from "./grid-icons.js";
 export declare function createMenus<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
     updateFilterRow: (columnId: string, value: string) => void;
     updateFilterOperator: (columnId: string, operator: FilterOperator) => void;
@@ -37,6 +38,7 @@ export declare function createMenus<TFeatures extends TableFeatures = TableFeatu
     contextMenuItems: () => {
         key: string;
         label: string;
+        icon?: GridIconName | ContextMenuIcon;
         separator?: boolean;
         disabled?: boolean;
         run?: () => void;

package/dist/menus.js

@@ -487,11 +487,16 @@ export function createMenus(ctx) {
             }
             if (entry.hidden?.(target))
                 continue;
+            // An object on a built-in's key with no action of its own is that
+            // built-in with an icon (or a label) of the consumer's choosing.
+            const b = builtins[entry.key];
+            const builtinLabel = b ? ((b.msg && messages?.[b.msg]) || b.label) : entry.key;
             out.push({
                 key: entry.key,
-                label: entry.label,
+                label: entry.label ?? builtinLabel,
+                icon: entry.icon,
                 disabled: entry.disabled?.(target) ?? false,
-                run: () => entry.action(target),
+                run: entry.action ? () => entry.action(target) : b ? () => b.run(target) : undefined,
             });
         }
         // Drop leading/trailing/double separators.

package/dist/merges.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Merged cells: a rectangle of cells drawn as one, the way a spreadsheet's
+ * Merge & Center does. The grid takes them as `mergedCells`, a list of
+ * origins with their spans in display indices, and this module is the
+ * pure part: an index over them, the questions the renderer, the
+ * selection and the keyboard ask, and nothing that touches the DOM.
+ *
+ * A merge is drawn by its origin td, which takes `rowspan` and `colspan`;
+ * the cells it covers are not emitted. Selection rectangles grow to whole
+ * merges (a merge is selected as one), the active cell inside a merge is
+ * its origin, and an arrow key moving into a merge lands on the origin
+ * and moving out of one steps past its far edge.
+ */
+export type MergedCell = {
+    /** Top-left cell of the merge, display indices. */
+    rowIndex: number;
+    colIndex: number;
+    /** How many rows and columns it covers, 1 or more. */
+    rowSpan: number;
+    colSpan: number;
+};
+export type MergeIndex = {
+    readonly list: ReadonlyArray<MergedCell>;
+    /** Every cell a merge covers (origin included) -> its merge. */
+    readonly byCell: ReadonlyMap<string, MergedCell>;
+};
+export type MergeRect = {
+    minRow: number;
+    maxRow: number;
+    minCol: number;
+    maxCol: number;
+};
+/** An index over the merges, or null when there are none (the common case). */
+export declare function buildMergeIndex(merges: ReadonlyArray<MergedCell> | undefined | null): MergeIndex | null;
+/** The merge covering (r, c), origin included, or undefined. */
+export declare function mergeAt(index: MergeIndex | null, r: number, c: number): MergedCell | undefined;
+/** Whether (r, c) is inside a merge without being its origin. */
+export declare function isCovered(index: MergeIndex | null, r: number, c: number): boolean;
+/** The origin of the merge (r, c) sits in, or (r, c) itself. */
+export declare function originOf(index: MergeIndex | null, r: number, c: number): {
+    rowIndex: number;
+    colIndex: number;
+};
+/** The far corner of the merge (r, c) sits in, or (r, c) itself. */
+export declare function endOf(index: MergeIndex | null, r: number, c: number): {
+    rowIndex: number;
+    colIndex: number;
+};
+/**
+ * The rectangle grown to hold every merge it touches, to a fixed point: a
+ * merge that pokes out of the rectangle pulls the edge out, which can
+ * reach another merge, and so on, as a spreadsheet's selection does.
+ */
+export declare function expandRectToMerges(index: MergeIndex | null, rect: MergeRect): MergeRect;
+/**
+ * Where a move from `from` to `next` really lands. A step into a merge
+ * lands on its origin; a step that stays inside the merge the move started
+ * in carries on past its far edge (right from a three-wide merge reaches
+ * the column after it), clamped to the bounds; a step that then lands in
+ * another merge takes that one's origin.
+ */
+export declare function stepPastMerge(index: MergeIndex | null, from: {
+    rowIndex: number;
+    colIndex: number;
+}, next: {
+    rowIndex: number;
+    colIndex: number;
+}, bounds: {
+    maxRow: number;
+    maxCol: number;
+}): {
+    rowIndex: number;
+    colIndex: number;
+};
+/**
+ * How a td at (r, c) draws inside a rendered window of rows and columns.
+ * A merge is drawn once per window, by the top-left cell of the part of it
+ * the window holds: the origin when the origin is in the window (`origin`),
+ * else the first covered cell the window shows (`continuation`, which
+ * draws the origin's content itself), with the spans clamped to the window
+ * so a table never spans into rows it has not drawn. Every other cell of
+ * the merge is `skip`: no td, the drawn one covers its slot.
+ */
+export type MergeDraw = {
+    kind: 'skip';
+} | {
+    kind: 'origin' | 'continuation';
+    merge: MergedCell;
+    rowSpan: number;
+    colSpan: number;
+};
+export declare function mergeDrawAt(index: MergeIndex | null, r: number, c: number, window: {
+    firstRow: number;
+    lastRow: number;
+    firstCol: number;
+    lastCol: number;
+}): MergeDraw | null;

package/dist/merges.js

@@ -0,0 +1,147 @@
+/**
+ * Merged cells: a rectangle of cells drawn as one, the way a spreadsheet's
+ * Merge & Center does. The grid takes them as `mergedCells`, a list of
+ * origins with their spans in display indices, and this module is the
+ * pure part: an index over them, the questions the renderer, the
+ * selection and the keyboard ask, and nothing that touches the DOM.
+ *
+ * A merge is drawn by its origin td, which takes `rowspan` and `colspan`;
+ * the cells it covers are not emitted. Selection rectangles grow to whole
+ * merges (a merge is selected as one), the active cell inside a merge is
+ * its origin, and an arrow key moving into a merge lands on the origin
+ * and moving out of one steps past its far edge.
+ */
+const key = (r, c) => `${r}:${c}`;
+/** An index over the merges, or null when there are none (the common case). */
+export function buildMergeIndex(merges) {
+    if (!merges || merges.length === 0)
+        return null;
+    const byCell = new Map();
+    const list = [];
+    for (const raw of merges) {
+        const rowSpan = Math.max(1, Math.floor(raw.rowSpan));
+        const colSpan = Math.max(1, Math.floor(raw.colSpan));
+        if (rowSpan === 1 && colSpan === 1)
+            continue;
+        const merge = { rowIndex: raw.rowIndex, colIndex: raw.colIndex, rowSpan, colSpan };
+        list.push(merge);
+        for (let r = merge.rowIndex; r < merge.rowIndex + rowSpan; r += 1) {
+            for (let c = merge.colIndex; c < merge.colIndex + colSpan; c += 1)
+                byCell.set(key(r, c), merge);
+        }
+    }
+    return list.length ? { list, byCell } : null;
+}
+/** The merge covering (r, c), origin included, or undefined. */
+export function mergeAt(index, r, c) {
+    return index?.byCell.get(key(r, c));
+}
+/** Whether (r, c) is inside a merge without being its origin. */
+export function isCovered(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return !!m && (m.rowIndex !== r || m.colIndex !== c);
+}
+/** The origin of the merge (r, c) sits in, or (r, c) itself. */
+export function originOf(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return m ? { rowIndex: m.rowIndex, colIndex: m.colIndex } : { rowIndex: r, colIndex: c };
+}
+/** The far corner of the merge (r, c) sits in, or (r, c) itself. */
+export function endOf(index, r, c) {
+    const m = mergeAt(index, r, c);
+    return m
+        ? { rowIndex: m.rowIndex + m.rowSpan - 1, colIndex: m.colIndex + m.colSpan - 1 }
+        : { rowIndex: r, colIndex: c };
+}
+/**
+ * The rectangle grown to hold every merge it touches, to a fixed point: a
+ * merge that pokes out of the rectangle pulls the edge out, which can
+ * reach another merge, and so on, as a spreadsheet's selection does.
+ */
+export function expandRectToMerges(index, rect) {
+    if (!index)
+        return rect;
+    let { minRow, maxRow, minCol, maxCol } = rect;
+    for (let guard = 0; guard < 64; guard += 1) {
+        let grew = false;
+        for (const m of index.list) {
+            const r2 = m.rowIndex + m.rowSpan - 1;
+            const c2 = m.colIndex + m.colSpan - 1;
+            const touches = m.rowIndex <= maxRow && r2 >= minRow && m.colIndex <= maxCol && c2 >= minCol;
+            if (!touches)
+                continue;
+            if (m.rowIndex < minRow) {
+                minRow = m.rowIndex;
+                grew = true;
+            }
+            if (r2 > maxRow) {
+                maxRow = r2;
+                grew = true;
+            }
+            if (m.colIndex < minCol) {
+                minCol = m.colIndex;
+                grew = true;
+            }
+            if (c2 > maxCol) {
+                maxCol = c2;
+                grew = true;
+            }
+        }
+        if (!grew)
+            break;
+    }
+    return minRow === rect.minRow && maxRow === rect.maxRow && minCol === rect.minCol && maxCol === rect.maxCol
+        ? rect
+        : { minRow, maxRow, minCol, maxCol };
+}
+/**
+ * Where a move from `from` to `next` really lands. A step into a merge
+ * lands on its origin; a step that stays inside the merge the move started
+ * in carries on past its far edge (right from a three-wide merge reaches
+ * the column after it), clamped to the bounds; a step that then lands in
+ * another merge takes that one's origin.
+ */
+export function stepPastMerge(index, from, next, bounds) {
+    if (!index)
+        return next;
+    const target = mergeAt(index, next.rowIndex, next.colIndex);
+    if (!target)
+        return next;
+    const source = mergeAt(index, from.rowIndex, from.colIndex);
+    if (source !== target)
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    // Still inside the merge the move began in: keep going in that direction.
+    const dr = Math.sign(next.rowIndex - from.rowIndex);
+    const dc = Math.sign(next.colIndex - from.colIndex);
+    if (dr === 0 && dc === 0)
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    let rowIndex = next.rowIndex;
+    let colIndex = next.colIndex;
+    if (dr > 0)
+        rowIndex = target.rowIndex + target.rowSpan;
+    else if (dr < 0)
+        rowIndex = target.rowIndex - 1;
+    if (dc > 0)
+        colIndex = target.colIndex + target.colSpan;
+    else if (dc < 0)
+        colIndex = target.colIndex - 1;
+    if (rowIndex < 0 || rowIndex > bounds.maxRow || colIndex < 0 || colIndex > bounds.maxCol) {
+        // Nowhere further to go: the merge itself stays current.
+        return { rowIndex: target.rowIndex, colIndex: target.colIndex };
+    }
+    const landed = mergeAt(index, rowIndex, colIndex);
+    return landed ? { rowIndex: landed.rowIndex, colIndex: landed.colIndex } : { rowIndex, colIndex };
+}
+export function mergeDrawAt(index, r, c, window) {
+    const m = mergeAt(index, r, c);
+    if (!m)
+        return null;
+    const anchorRow = Math.max(m.rowIndex, window.firstRow);
+    const anchorCol = Math.max(m.colIndex, window.firstCol);
+    if (r !== anchorRow || c !== anchorCol)
+        return { kind: 'skip' };
+    const isOrigin = anchorRow === m.rowIndex && anchorCol === m.colIndex;
+    const rowSpan = Math.max(1, Math.min(m.rowIndex + m.rowSpan - r, window.lastRow - r + 1));
+    const colSpan = Math.max(1, Math.min(m.colIndex + m.colSpan - c, window.lastCol - c + 1));
+    return { kind: isOrigin ? 'origin' : 'continuation', merge: m, rowSpan, colSpan };
+}

package/dist/row-model.d.ts

@@ -0,0 +1,133 @@
+/**
+ * `GridRowModel` - one prop instead of eleven.
+ *
+ * A grid backed by a server needs the same wiring every time: hand it the
+ * rows, tell it not to sort or filter locally, forward the sort and the filter
+ * to the backend, report which rows are on screen, say which rows have not
+ * loaded, and delegate selection. Written out by hand that is a dozen props
+ * and a filter-shape conversion that every app gets slightly differently:
+ *
+ * ```svelte
+ * <SvGrid data={s.rows} externalSort externalFilter loading={s.loading}
+ *   onSortingChange={(x) => ctl.setSort(x)}
+ *   onFiltersChange={(f) => ctl.setFilter({ global: f.global,
+ *     columns: Object.fromEntries(f.columns.map((c) => [c.id, { ... }])) })}
+ *   onVisibleRangeChange={(r) => ctl.setViewport(r.startIndex, r.endIndex)}
+ *   ... />
+ * ```
+ *
+ * An object that implements this interface carries all of it, so the same grid
+ * becomes:
+ *
+ * ```svelte
+ * <SvGrid rowModel={ctl} {columns} />
+ * ```
+ *
+ * `createServerDataSource` returns one, and so does the Enterprise server row
+ * model - which is the point of the interface rather than a concrete type: the
+ * grid depends on the SHAPE, never on either implementation, and an app with
+ * its own fetching can satisfy it too.
+ *
+ * Every member except `subscribe` / `getRows` / `isLoading` is optional, and a
+ * prop written explicitly on `<SvGrid>` always wins over the model's answer -
+ * so adopting this is never all-or-nothing.
+ */
+import type { FilterOperator } from './SvGrid.types.js';
+/** The filter state as the grid reports it, straight from `onFiltersChange`. */
+export type GridFilterState = {
+    global: string;
+    columns: Array<{
+        id: string;
+        operator: FilterOperator;
+        value: string;
+        valueTo?: string;
+        selectedValues?: Array<string>;
+    }>;
+};
+/** The sort the grid hands a row model: column id and direction, in priority order. */
+export type GridRowModelSort = Array<{
+    id: string;
+    desc: boolean;
+}>;
+/**
+ * What `<SvGrid rowModel>` consumes: rows, a loading flag, a change
+ * subscription, and whichever optional parts the model implements - sort,
+ * filter, viewport, placeholders, group accessors, selection, filter
+ * values, paging, pinned rows and pivot columns. `createServerDataSource`
+ * and the Enterprise `createServerRowModel` both satisfy it.
+ */
+export type GridRowModel<TData> = {
+    /**
+     * Register a callback for "something changed, re-read me". Returns an
+     * unsubscribe function, which the grid calls on unmount.
+     */
+    subscribe(onChange: () => void): () => void;
+    /** The rows to render, including any placeholders for unloaded ones. */
+    getRows(): ReadonlyArray<TData>;
+    /** True while a fetch is in flight, for the loading overlay. */
+    isLoading(): boolean;
+    /** Stable row id. Required once selection or editing is involved. */
+    getRowId?(row: TData, index: number): string;
+    /** Sort on the server. Present means "do not sort locally". */
+    setSort?(sort: GridRowModelSort): void;
+    /** Filter on the server. Present means "do not filter locally". */
+    setFilter?(filters: GridFilterState): void;
+    /** Which rows are on screen, so a block-loading model knows what to fetch. */
+    setViewport?(startIndex: number, endIndex: number): void;
+    /** Why a row has no data yet, or null when it does. */
+    rowPlaceholder?(row: TData, rowIndex: number): 'loading' | 'failed' | null;
+    /** Retry the failed block a placeholder row belongs to. */
+    retryRow?(row: TData, rowIndex: number): void;
+    /** Group / tree accessors, for the grid's treegrid keyboard and ARIA. */
+    group?: {
+        isGroup: (row: TData) => boolean;
+        level: (row: TData) => number;
+        expanded?: (row: TData) => boolean;
+        onToggle: (row: TData) => void;
+    };
+    /** Selection the grid does not own - see the `rowSelectionModel` prop. */
+    selection?: {
+        isSelected: (rowId: string, row: TData) => boolean;
+        headerState: () => 'none' | 'some' | 'all';
+        toggle: (rowId: string, row: TData, next: boolean) => void;
+        toggleAll: (next: boolean) => void;
+        selectedCount?: () => number | null;
+        bulkUpdate?: (patch: Record<string, unknown>) => Promise<number>;
+    };
+    /** Distinct values for a column's set filter, fetched from the server. */
+    filterValues?(columnId: string): Promise<Array<string>>;
+    /** Server-side paging. Omit it for infinite scrolling. */
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+        rowCount: number;
+        setPage(pageIndex: number): void;
+        setPageSize(pageSize: number): void;
+        /** Choices for the footer's page-size selector. */
+        pageSizes?: number[];
+        /**
+         * Ask the grid for as many rows as its body fits: it measures and calls
+         * `setPageSize` whenever the fit changes.
+         */
+        autoPageSize?: boolean;
+    };
+    /** Rows to pin above / below the scrolling body - a grand total, say. */
+    readonly pinnedTopRows?: ReadonlyArray<TData>;
+    readonly pinnedBottomRows?: ReadonlyArray<TData>;
+    /**
+     * Columns that replace the grid's `columns` while the model is in pivot
+     * mode, or null. Read after every change notification.
+     */
+    readonly pivotResultColumns?: ReadonlyArray<unknown> | null;
+};
+/**
+ * Turn the grid's filter payload into the column-keyed map a `ServerRequest`
+ * carries. Exported because a hand-written `GridRowModel` needs exactly this
+ * conversion, and copying it is how the two shapes drift apart.
+ */
+export declare function toServerFilterColumns(filters: GridFilterState): Record<string, {
+    operator: string;
+    value: string;
+    valueTo?: string;
+    selectedValues?: Array<string>;
+}>;

package/dist/row-model.js

@@ -0,0 +1,16 @@
+/**
+ * Turn the grid's filter payload into the column-keyed map a `ServerRequest`
+ * carries. Exported because a hand-written `GridRowModel` needs exactly this
+ * conversion, and copying it is how the two shapes drift apart.
+ */
+export function toServerFilterColumns(filters) {
+    return Object.fromEntries(filters.columns.map((c) => [
+        c.id,
+        {
+            operator: c.operator,
+            value: c.value,
+            ...(c.valueTo !== undefined ? { valueTo: c.valueTo } : {}),
+            ...(c.selectedValues !== undefined ? { selectedValues: c.selectedValues } : {}),
+        },
+    ]));
+}

package/dist/row-resize.d.ts

@@ -30,6 +30,9 @@ export type RowResizeOptions = {
     onResize: (rowIndex: number, height: number) => void;
     /** Optional callback fired during the drag (every pointermove). */
     onResizeMove?: (rowIndex: number, height: number) => void;
+    /** Double-click on the strip: size the row to its content, the
+     *  spreadsheet gesture. Without it a double-click does nothing. */
+    onAutosize?: (rowIndex: number) => void;
     /** Min row height in px. Default 20. */
     min?: number;
     /** Max row height in px. Default 320. */

package/dist/row-resize.js

@@ -29,6 +29,8 @@ const STRIP_CLASS = 'sv-grid-row-resize-handle';
 export function rowResize(node, opts) {
     let current = opts;
     let drag = null;
+    /** The last press on a strip, for telling a double-click from two drags. */
+    let lastPress = null;
     function rowIndexOf(tr) {
         const dataRow = tr.querySelector('[data-svgrid-row]');
         const val = dataRow?.dataset.svgridRow;
@@ -109,6 +111,18 @@ export function rowResize(node, opts) {
             return;
         e.preventDefault();
         e.stopPropagation();
+        // The second press of a double-click: size the row to its content
+        // instead of starting another drag. Timed here rather than read from
+        // a dblclick event, whose target is the row once the first press's
+        // resize has re-rendered the strip; pointerdown carries no count.
+        const now = e.timeStamp;
+        const again = lastPress !== null && lastPress.rowIndex === rowIndex && now - lastPress.at < 400;
+        lastPress = { rowIndex, at: now };
+        if (again && current.onAutosize) {
+            lastPress = null;
+            current.onAutosize(rowIndex);
+            return;
+        }
         t.classList.add('is-resizing');
         drag = {
             rowIndex,

package/dist/scroll-sync.d.ts

@@ -5,5 +5,6 @@ export declare function createScrollSync<TFeatures extends TableFeatures = Table
     hideTooltip: () => void;
     flushScheduledScrollSync: () => void;
     scheduleScrollSync: (scrollTop: number, scrollLeft: number) => void;
+    syncScrollNow: (scrollTop: number, scrollLeft: number) => void;
     onBodyScroll: (event: Event) => void;
 };

package/dist/scroll-sync.js

@@ -57,6 +57,29 @@ export function createScrollSync(ctx) {
             return;
         ctx.scrollSyncRaf = requestAnimationFrame(flushScheduledScrollSync);
     }
+    /**
+     * Sync the virtualizers to a scroll position NOW instead of on the next
+     * animation frame.
+     *
+     * For a scroll the grid made itself - keyboard navigation bringing the
+     * active cell into view - the position is already known, and going through
+     * the browser's `scroll` event and then the rAF above put the row-window
+     * update one frame behind the key press: the keydown's own flush painted
+     * the active cell on the OLD rows, and the rows only caught up on the next
+     * frame. Two painted frames per arrow key. Syncing inline folds the window
+     * update into the same flush as the active-cell change, so the key press
+     * paints once. The `scroll` event still fires afterwards and re-syncs to
+     * the same offset, which the virtualizers treat as a no-op.
+     */
+    function syncScrollNow(scrollTop, scrollLeft) {
+        if (ctx.scrollSyncRaf !== null) {
+            cancelAnimationFrame(ctx.scrollSyncRaf);
+            ctx.scrollSyncRaf = null;
+        }
+        ctx.pendingScrollTop = scrollTop;
+        ctx.pendingScrollLeft = scrollLeft;
+        flushScheduledScrollSync();
+    }
     function onBodyScroll(event) {
         const container = event.currentTarget;
         if (!container)
@@ -84,6 +107,7 @@ export function createScrollSync(ctx) {
         hideTooltip,
         flushScheduledScrollSync,
         scheduleScrollSync,
+        syncScrollNow,
         onBodyScroll,
     };
 }