@svgrid/grid 2.2.27 → 2.2.29

package/dist/SvGrid.controller.svelte.d.ts

@@ -12,7 +12,7 @@ import { getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, formatSummaryNume
  * the component lifecycle) and consumed through the returned getters.
  */
 export type SvGridController<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = ReturnType<typeof createSvGridController<TFeatures, TData>>;
-export declare function createSvGridController<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(rawProps: Props<TFeatures, TData>): {
+export declare function createSvGridController<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(rawProps: Props<TFeatures, TData>, domIdBase?: string): {
     readonly props: Props<TFeatures, TData>;
     optionOverrides: Record<string, unknown>;
     readonly editingEnabled: boolean;
@@ -126,6 +126,10 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     inSuggestPos: MenuPosition;
     inSuggestQuery: string;
     readonly inSuggestValues: string[];
+    readonly inSuggestOptions: {
+        value: string;
+        label: string;
+    }[];
     readonly facetValuesForColumn: (columnId: string) => Array<string>;
     chooseColumnsPos: MenuPosition | null;
     contextMenuFor: ContextMenuTarget<TData> | null;
@@ -446,6 +450,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly columnWindowRightSpacer: number;
     readonly activeCell: any;
     readonly activeDescendantId: string | null;
+    readonly gridDomId: string;
     readonly formatSummaryNumeric: typeof formatSummaryNumeric;
     readonly computeSummaries: (rows: readonly Row<TData>[], columns: readonly Column<TData>[]) => Record<string, string>;
     readonly SUMMARY_DEFER_CELL_LIMIT: number;
@@ -549,6 +554,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     }, direction: "undo" | "redo") => void;
     readonly updateEditingCellValue: (value: unknown) => void;
     readonly onEditorKeyDown: (event: KeyboardEvent) => void;
+    readonly commitAndMoveByTab: (shiftKey: boolean) => void;
     readonly focusOnMount: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     readonly onHeaderSortClick: (event: MouseEvent, columnId: string) => void;
     readonly onGridKeyDown: (event: KeyboardEvent) => void;
@@ -594,6 +600,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly addFilterToken: (columnId: string, token: string) => void;
     readonly removeFilterToken: (columnId: string, token: string) => void;
     readonly toggleFilterToken: (columnId: string, token: string) => void;
+    readonly setFilterTokens: (columnId: string, tokens: Iterable<string>) => void;
     readonly sortColumnFromMenu: (columnId: string, desc: boolean) => void;
     readonly clearColumnSort: (columnId: string) => void;
     readonly groupByColumnFromMenu: (columnId: string) => void;
@@ -605,8 +612,14 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly serverFacetLoading: string | null;
     readonly columnMenuFacetValues: string[];
     readonly columnMenuVisibleFacets: string[];
+    readonly columnMenuFacetOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly columnMenuSelectedFacets: ReadonlySet<string>;
     readonly isFacetChecked: (columnId: string, value: string) => any;
     readonly toggleFacetValue: (columnId: string, value: string) => void;
+    readonly setFacetSelection: (columnId: string, next: ReadonlySet<string>) => void;
     readonly isAllFacetsChecked: (columnId: string) => boolean;
     readonly toggleAllFacets: (columnId: string) => void;
     readonly clearColumnFilter: (columnId: string) => void;

package/dist/SvGrid.controller.svelte.js

@@ -16,6 +16,7 @@ import { createRowDrag, } from "./row-drag";
 import { createAlignedGrids, } from "./aligned-grids";
 import { resolveColumnTypes, } from "./column-types";
 import { computeColumnGroupMeta, hiddenLeavesForCollapse, } from "./column-groups";
+import { resolveColumnId } from "./column-id";
 import { createGridApi, } from "./build-api";
 import { createClipboard, } from "./clipboard";
 import { resolveGridMessages } from "./grid-messages";
@@ -23,6 +24,7 @@ import { getPivotEngine, hasPivotEngine } from "./pivot-view.svelte";
 import { filterOperatorOptions, fallbackOperatorOption, TEXT_OPERATORS, NUMBER_OPERATORS, DATE_OPERATORS, CHECKBOX_OPERATORS, operatorOption, operatorsForColumn, defaultOperatorFor, operatorLabelFor, } from "./filter-operators";
 import { isBucketableColumn, buildBuckets, isInBucket, } from "./facet-buckets";
 import { getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, formatSummaryNumeric, getColumnAlign, getPinnedCellValue, getColumnAccessorValue, columnDefMatchesId, } from "./cell-values";
+import { untrack } from "svelte";
 /**
  * Conservative fallback for the browser's max element height, used during SSR
  * or if runtime detection fails. 8M is below every known engine cap (Firefox
@@ -145,7 +147,15 @@ function observeSizeRaf(el, cb) {
         observer.disconnect();
     };
 }
-export function createSvGridController(rawProps) {
+export function createSvGridController(rawProps, domIdBase) {
+    /**
+     * Base for every DOM id this grid mints (`<base>_cell_<row>_<col>`). The view
+     * passes Svelte's per-instance `$props.id()`, which is stable across SSR and
+     * hydration; two `<SvGrid>` instances on one page used to emit identical cell
+     * ids, so `aria-activedescendant` on the second pointed into the first (#77).
+     * Falls back to the historical literal for direct controller construction.
+     */
+    const gridDomId = domIdBase ?? "svgrid";
     // Runtime option overrides set via the imperative api (`api.setOption(key, value)`).
     // Every controller read of a prop goes through the `props` proxy below (and the view
     // reads controller-resolved gates like `_features` / `editingEnabled`, not the raw
@@ -620,16 +630,13 @@ export function createSvGridController(rawProps) {
         if (depth === 0)
             return [];
         const leafEntries = [];
-        function buildId(def, parentId, fallbackIx) {
-            return def.id ?? def.field ?? `${parentId ?? 'col'}_d_${fallbackIx}`;
-        }
         // Leaves hidden by a collapsed/expanded group are skipped everywhere here,
         // so group colSpan + widthPx exclude them and stay aligned with the leaves
         // the body actually renders.
         const hiddenLeaf = hiddenByGroupCollapse;
         function collectLeaves(defs, parentId, depthHere) {
             defs.forEach((def, ix) => {
-                const id = buildId(def, parentId, ix);
+                const id = resolveColumnId(def, parentId, depthHere, ix);
                 if (def.columns?.length) {
                     collectLeaves(def.columns, id, depthHere + 1);
                 }
@@ -639,17 +646,22 @@ export function createSvGridController(rawProps) {
             });
         }
         collectLeaves(userCols, undefined, 0);
-        function indexTree(defs, parentId, cursor) {
+        function indexTree(defs, parentId, cursor, depthHere) {
             const nodes = [];
-            for (const def of defs) {
-                const id = buildId(def, parentId, nodes.length);
+            // Walk by array index, not by a count of pushed nodes: the `continue`
+            // below skips hidden leaves without pushing, so a counter would drift and
+            // hand the next unnamed sibling a different id than `collectLeaves` and
+            // the engine give it (#63).
+            for (let ix = 0; ix < defs.length; ix += 1) {
+                const def = defs[ix];
+                const id = resolveColumnId(def, parentId, depthHere, ix);
                 // Skip leaves the collapse state hides, so leaf indices/colSpans match
                 // `leafEntries` (and the body's rendered columns) exactly.
                 if (!def.columns?.length && hiddenLeaf[id])
                     continue;
                 const leafStart = cursor.leaf;
                 if (def.columns?.length) {
-                    indexTree(def.columns, id, cursor);
+                    indexTree(def.columns, id, cursor, depthHere + 1);
                 }
                 else {
                     cursor.leaf += 1;
@@ -660,7 +672,7 @@ export function createSvGridController(rawProps) {
             return nodes;
         }
         const cursor = { leaf: 0 };
-        const topNodes = indexTree(userCols, undefined, cursor);
+        const topNodes = indexTree(userCols, undefined, cursor, 0);
         function nodesAtDepth(nodes, currentDepth, targetDepth) {
             if (currentDepth === targetDepth)
                 return nodes;
@@ -668,7 +680,7 @@ export function createSvGridController(rawProps) {
             for (const n of nodes) {
                 if (n.def.columns?.length) {
                     const childCursor = { leaf: n.leafStart };
-                    const children = indexTree(n.def.columns, n.id, childCursor);
+                    const children = indexTree(n.def.columns, n.id, childCursor, currentDepth + 1);
                     out.push(...nodesAtDepth(children, currentDepth + 1, targetDepth));
                 }
                 else {
@@ -760,10 +772,13 @@ export function createSvGridController(rawProps) {
         const formats = props.conditionalFormats;
         if (!formats?.length || !formatsNeedingStats(formats))
             return map;
-        // `visible` (default): the currently displayed rows (filtered + paged),
-        // so the heat map reflects what the user is looking at. `all`: the full
-        // unfiltered dataset, for a stable scale independent of filter/paging.
-        const scanAll = props.conditionalStatScope === "all";
+        // `filtered` (default): every row that survives the filters, ignoring the
+        // page slice - so a value keeps the same colour as you page through (#61).
+        // `visible`: only the rows on screen, rescaling per page. `all`: the full
+        // unfiltered dataset, for a scale that stays put as you filter.
+        const scope = props.conditionalStatScope ?? "filtered";
+        const scanAll = scope === "all";
+        const scanRows = scope === "visible" ? allRows : allRowsBeforePagination;
         for (const column of allColumns) {
             const needs = formats.some((f) => formatNeedsStats(f) && (!f.columns || f.columns.includes(column.id)));
             if (!needs)
@@ -779,7 +794,7 @@ export function createSvGridController(rawProps) {
                     }
                 })()
                 : (function* () {
-                    for (const row of allRows) {
+                    for (const row of scanRows) {
                         yield fieldFn
                             ? fieldFn(row.original)
                             : field
@@ -1740,7 +1755,7 @@ export function createSvGridController(rawProps) {
         const inCols = active.colIndex >= 0 && active.colIndex < allColumns.length;
         if (!inRows || !inCols)
             return null;
-        return getGridCellDomId("svgrid", active.rowIndex, active.colIndex);
+        return getGridCellDomId(gridDomId, active.rowIndex, active.colIndex);
     });
     // Above this many cells (rows x columns) the summary aggregation is
     // deferred one animation frame so it never blocks first paint - a
@@ -1808,7 +1823,7 @@ export function createSvGridController(rawProps) {
         grid.setActiveCell({
             rowIndex: 0,
             colIndex: 0,
-            cellId: getGridCellDomId("svgrid", 0, 0),
+            cellId: getGridCellDomId(gridDomId, 0, 0),
         });
     });
     $effect(() => {
@@ -2166,13 +2181,55 @@ export function createSvGridController(rawProps) {
         }
         return Array.from(seen).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
     }
+    /**
+     * Facet values for the open menu, SNAPSHOTTED when it opens.
+     *
+     * `facetValuesForColumn` walks every row and natural-sorts the distinct
+     * values, so deriving it live re-ran that whole scan on every data change.
+     * On a streaming grid (the trading-desk demo replaces its row array a couple
+     * of times a second) that meant rebuilding a 10k-entry set + sort - and
+     * re-keying the rendered value list - continuously for as long as the menu
+     * sat open. The offered values are frozen for the life of the popover
+     * instead, which is also what a spreadsheet's filter checklist does.
+     * Filtering itself is unaffected: `valueFilters` matches live row values.
+     *
+     * The cache is a plain local, not `$state`, so writing it here can't feed
+     * back into this derived.
+     */
+    // Stable identities for the closed-menu case, so the derives below don't hand
+    // out a fresh empty array/set on every read.
+    const EMPTY_FACETS = [];
+    const EMPTY_FACET_SET = new Set();
+    let facetCache = null;
     const columnMenuFacetValues = $derived.by(() => {
         // The funnel popover drives via `filterMenuFor`; the column menu's Filter
         // tab drives via `columnMenuFor`. Support whichever is open.
         const columnId = filterMenuFor ?? columnMenuFor;
         if (!columnId)
-            return [];
-        return facetValuesForColumn(columnId);
+            return EMPTY_FACETS;
+        // Server-provided values land asynchronously, so they stay TRACKED and
+        // re-snapshot when they arrive. Locally derived values are read untracked
+        // so a live data tick can't retrigger the scan.
+        const source = props.serverFilterValues
+            ? (serverFacetValues[columnId] ?? null)
+            : null;
+        if (facetCache?.columnId === columnId && facetCache.source === source) {
+            return facetCache.values;
+        }
+        facetCache = {
+            columnId,
+            source,
+            values: untrack(() => facetValuesForColumn(columnId)),
+        };
+        return facetCache.values;
+    });
+    // Drop the snapshot when the menu closes, so reopening the SAME column
+    // re-scans and picks up whatever the data has become meanwhile. This has to
+    // be an effect rather than a branch in the derived above: the derived is
+    // lazy, and nothing reads it while the menu is shut.
+    $effect(() => {
+        if (!(filterMenuFor ?? columnMenuFor))
+            facetCache = null;
     });
     const columnMenuVisibleFacets = $derived.by(() => {
         const query = columnMenuSearch.trim().toLowerCase();
@@ -2180,20 +2237,40 @@ export function createSvGridController(rawProps) {
             return columnMenuFacetValues;
         return columnMenuFacetValues.filter((value) => value.toLowerCase().includes(query));
     });
+    /** Visible facets as listbox options ((Blanks) label for the empty value). */
+    const columnMenuFacetOptions = $derived(columnMenuVisibleFacets.map((value) => ({
+        value,
+        label: value === "" ? "(Blanks)" : value,
+    })));
+    /**
+     * Checked facets for the open menu. An ABSENT `valueFilters` entry means
+     * "everything checked", so that case materializes the set once here rather
+     * than every consumer re-deriving it.
+     */
+    const columnMenuSelectedFacets = $derived.by(() => {
+        const columnId = filterMenuFor ?? columnMenuFor;
+        if (!columnId)
+            return EMPTY_FACET_SET;
+        return valueFilters[columnId] ?? new Set(columnMenuFacetValues);
+    });
     // Distinct values offered in the `in` / `notIn` suggestions dropdown for the
-    // active chip input, narrowed by whatever the user has typed. Capped so a
-    // high-cardinality column can't render thousands of rows into the popover.
-    const IN_SUGGEST_LIMIT = 200;
+    // active chip input, narrowed by whatever the user has typed. Uncapped - the
+    // dropdown windows its rows, so a high-cardinality column costs a list of
+    // strings, not thousands of nodes.
     const inSuggestValues = $derived.by(() => {
         if (!inSuggestFor)
-            return [];
+            return EMPTY_FACETS;
         const query = inSuggestQuery.trim().toLowerCase();
         const all = facetValuesForColumn(inSuggestFor);
-        const matched = query
+        return query
             ? all.filter((value) => value.toLowerCase().includes(query))
             : all;
-        return matched.slice(0, IN_SUGGEST_LIMIT);
     });
+    /** `in` / `notIn` suggestions as listbox options. */
+    const inSuggestOptions = $derived(inSuggestValues.map((value) => ({
+        value,
+        label: value === "" ? "(Blanks)" : value,
+    })));
     // Fire onApiReady exactly once when the grid is first ready. Wrapping in
     // an effect that tracks `props.onApiReady` was racy - every parent render
     // creates a new inline arrow, the effect re-fired, and any synchronous
@@ -2332,6 +2409,7 @@ export function createSvGridController(rawProps) {
         get inSuggestQuery() { return inSuggestQuery; },
         set inSuggestQuery(v) { inSuggestQuery = v; },
         get inSuggestValues() { return inSuggestValues; },
+        get inSuggestOptions() { return inSuggestOptions; },
         get facetValuesForColumn() { return facetValuesForColumn; },
         get chooseColumnsPos() { return chooseColumnsPos; },
         set chooseColumnsPos(v) { chooseColumnsPos = v; },
@@ -2621,6 +2699,7 @@ export function createSvGridController(rawProps) {
         get columnWindowRightSpacer() { return columnWindowRightSpacer; },
         get activeCell() { return activeCell; },
         get activeDescendantId() { return activeDescendantId; },
+        get gridDomId() { return gridDomId; },
         get formatSummaryNumeric() { return formatSummaryNumeric; },
         get computeSummaries() { return computeSummaries; },
         get SUMMARY_DEFER_CELL_LIMIT() { return SUMMARY_DEFER_CELL_LIMIT; },
@@ -2703,6 +2782,7 @@ export function createSvGridController(rawProps) {
         get applyHistoryStep() { return applyHistoryStep; },
         get updateEditingCellValue() { return updateEditingCellValue; },
         get onEditorKeyDown() { return onEditorKeyDown; },
+        get commitAndMoveByTab() { return commitAndMoveByTab; },
         get focusOnMount() { return focusOnMount; },
         get onHeaderSortClick() { return onHeaderSortClick; },
         get onGridKeyDown() { return onGridKeyDown; },
@@ -2743,6 +2823,7 @@ export function createSvGridController(rawProps) {
         get addFilterToken() { return addFilterToken; },
         get removeFilterToken() { return removeFilterToken; },
         get toggleFilterToken() { return toggleFilterToken; },
+        get setFilterTokens() { return setFilterTokens; },
         get sortColumnFromMenu() { return sortColumnFromMenu; },
         get clearColumnSort() { return clearColumnSort; },
         get groupByColumnFromMenu() { return groupByColumnFromMenu; },
@@ -2754,8 +2835,11 @@ export function createSvGridController(rawProps) {
         get serverFacetLoading() { return serverFacetLoading; },
         get columnMenuFacetValues() { return columnMenuFacetValues; },
         get columnMenuVisibleFacets() { return columnMenuVisibleFacets; },
+        get columnMenuFacetOptions() { return columnMenuFacetOptions; },
+        get columnMenuSelectedFacets() { return columnMenuSelectedFacets; },
         get isFacetChecked() { return isFacetChecked; },
         get toggleFacetValue() { return toggleFacetValue; },
+        get setFacetSelection() { return setFacetSelection; },
         get isAllFacetsChecked() { return isAllFacetsChecked; },
         get toggleAllFacets() { return toggleAllFacets; },
         get clearColumnFilter() { return clearColumnFilter; },
@@ -2769,9 +2853,9 @@ export function createSvGridController(rawProps) {
     const { showTooltipFor, hideTooltip, flushScheduledScrollSync, scheduleScrollSync, onBodyScroll } = createScrollSync(ctx);
     const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard(ctx);
     const { computeSummaries, hasRenderedColumn } = createSummaries(ctx);
-    const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
+    const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, addFilterToken, removeFilterToken, toggleFilterToken, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openInSuggest, closeInSuggest, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, setFacetSelection, setFilterTokens, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
     const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
-    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
+    const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, commitAndMoveByTab, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
     const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
     const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns(ctx);
     const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd, destroyRowDrag } = createRowDrag(ctx);