@svgrid/grid 2.2.28 → 2.2.29

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);

package/dist/SvGrid.css

@@ -1899,35 +1899,15 @@ select.sv-grid-fr-editor {
 
 /* In / Not-in value-suggestions dropdown (anchored under the chip input).
    Defined AFTER .sv-grid-menu so its tighter sizing wins - the element
-   carries both classes. Compact rows keep a long value list scannable. */
+   carries both classes. The rows come from SvListBox, which owns its own
+   scrolling (windowed past ~40 values), so this is just the frame. */
 .sv-grid-menu.sv-grid-in-suggest {
   min-width: 140px;
   max-width: 260px;
-  max-height: 220px;
-  overflow-y: auto;
+  padding: 0;
+  overflow: visible;
   font-size: 12px;
 }
-.sv-grid-in-suggest-item {
-  gap: 6px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-}
-.sv-grid-in-suggest-item[aria-selected="true"] {
-  color: var(--sg-accent, #0b63f3);
-  font-weight: 600;
-}
-.sv-grid-in-suggest-check {
-  flex: none;
-  width: 12px;
-  text-align: center;
-  color: var(--sg-accent, #0b63f3);
-}
-.sv-grid-in-suggest-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 .sv-grid-menu-item[aria-checked="true"] {
   background: var(--sg-selection-bg, #eaf2ff);
@@ -2062,12 +2042,13 @@ select.sv-grid-fr-editor {
   padding: 2px 7px !important;
 }
 
-.sv-grid-facet-list {
-  max-height: 200px;
-  overflow: auto;
+/* The value / column checklists are SvListBox instances (windowed past ~40
+   rows). They draw their own box off the shared --sg-input-border/--sg-border
+   tokens, so all the menu adds is scroll containment - without it a wheel past
+   the end of a non-virtual list scrolls the page behind the popover, which
+   closes it. */
+.sv-grid-menu .sv-listbox {
   overscroll-behavior: contain;
-  border: 1px solid var(--sg-border, #eaeef4);
-  border-radius: 5px;
 }
 
 .sv-grid-facet {
@@ -2082,9 +2063,11 @@ select.sv-grid-fr-editor {
   background: var(--sg-row-hover-bg, #f4f6fa);
 }
 
+/* Sits directly above the checklist, which draws its own frame - so no rule
+   here, or the two borders stack. */
 .sv-grid-facet-all {
-  border-bottom: 1px solid var(--sg-border, #eaeef4);
   font-weight: 600;
+  padding-inline-start: 3px;
 }
 
 .sv-grid-facet input {
@@ -2464,11 +2447,9 @@ select.sv-grid-fr-editor {
 .sv-grid-choose-columns-menu {
   width: 240px;
 }
-.sv-grid-choose-columns-menu .sv-grid-facet-list {
-  max-height: 280px;
-}
 
-/* Native checkboxes in the facet list pick up the theme accent. */
+/* Native checkbox on the "(Select all)" row picks up the theme accent. The
+   checklist rows below it draw SvListBox's own box, not a native input. */
 .sv-grid-facet input[type="checkbox"] {
   accent-color: var(--sg-accent, #2563eb);
   width: 14px;

package/dist/SvGrid.svelte

@@ -56,6 +56,7 @@
   } from "./SvGrid.helpers";
   import {
     splitInTokens,
+    trailingInToken,
     joinInTokens,
   } from "./filtering/excel-filters";
   import { createSvGridController } from "./SvGrid.controller.svelte";
@@ -68,7 +69,13 @@
   import { getBoardView } from "./board-view.svelte";
   import { getChartView } from "./chart-view.svelte";
   let props: Props<TFeatures, TData> = $props();
-  const ctrl = createSvGridController(props);
+  // Per-instance base for every DOM id the grid mints. `$props.id()` is stable
+  // across SSR and hydration, so two grids on one page no longer collide on
+  // `svgrid_cell_0_0` and point `aria-activedescendant` at each other (#77).
+  // `$props.id()` must be its own declaration initializer - it can't be passed
+  // inline as a call argument.
+  const gridInstanceId = $props.id();
+  const ctrl = createSvGridController(props, gridInstanceId);
   // Effective props: the controller's `override ?? prop` proxy that backs
   // `api.setOption(...)`. Reading `opt.X` (instead of `props.X`) makes a view-direct
   // prop honor a runtime override. Svelte binds template `props.X` reads to the prop
@@ -151,6 +158,10 @@
       ctrl.contextMenuFor ||
       ctrl.filterMenuFor ||
       ctrl.operatorMenuFor ||
+      // The value-suggestions dropdown lives in the overlay too, and it can be
+      // the FIRST thing a user opens (focusing an in/notIn filter input), so it
+      // has to pull the chunk in rather than assume a menu already did.
+      ctrl.inSuggestFor ||
       ctrl.chooseColumnsPos;
     if (menuOpen && !MenusOverlay)
       import("./GridMenus.svelte").then((m) => (MenusOverlay = m.default));
@@ -474,7 +485,6 @@
   const closeInSuggest = $derived(ctrl.closeInSuggest);
   const addFilterToken = $derived(ctrl.addFilterToken);
   const removeFilterToken = $derived(ctrl.removeFilterToken);
-  const facetValuesForColumn = $derived(ctrl.facetValuesForColumn);
   const onWindowKeydown = $derived(ctrl.onWindowKeydown);
 
   // True when a `regex` filter's pattern won't compile - used to flag the
@@ -522,6 +532,21 @@
     if (ctrl.inSuggestFor !== columnId) openInSuggest(input, columnId);
   }
 
+  // The tool-panel / filter-menu `in` / `notIn` inputs hold the WHOLE token
+  // list ("AAPL, MSFT"), unlike the chip input which holds one token. So the
+  // suggestion query is the trailing fragment being typed, not the full value.
+  function onSetOpFilterFocus(event: FocusEvent, columnId: string): void {
+    const input = event.currentTarget as HTMLInputElement;
+    openInSuggest(input, columnId);
+    ctrl.inSuggestQuery = trailingInToken(input.value);
+  }
+
+  function onSetOpFilterInput(event: Event, columnId: string): void {
+    const input = event.currentTarget as HTMLInputElement;
+    ctrl.inSuggestQuery = trailingInToken(input.value);
+    if (ctrl.inSuggestFor !== columnId) openInSuggest(input, columnId);
+  }
+
   // Overflow layout for the `in` / `notIn` chip row: render every chip, then
   // measure how many fit on one line and collapse the rest into the "+N" pill.
   // A guess-by-width heuristic can't work (labels vary), so we measure real
@@ -1280,10 +1305,14 @@
             return;
           }
           // Tab and Ctrl/Cmd+Enter both commit. Plain Enter inserts a newline.
-          if (
-            event.key === "Tab" ||
-            (event.key === "Enter" && (event.ctrlKey || event.metaKey))
-          ) {
+          // Tab goes through the shared helper so it advances the active cell
+          // like every other editor does (#48).
+          if (event.key === "Tab") {
+            event.preventDefault();
+            ctrl.commitAndMoveByTab(event.shiftKey);
+            return;
+          }
+          if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             saveEditingCell();
             ctrl.gridRootEl?.focus({ preventScroll: true });
@@ -2583,7 +2612,7 @@
                             ),
                           }}
                           {...getGridCellA11yProps({
-                            id: getGridCellDomId("svgrid", rowIndex, colIndex),
+                            id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
                             rowIndex: rowIndex + 1,
                             colIndex: colIndex + 1,
                             selected: isRowSelected(row.id),
@@ -2833,7 +2862,7 @@
                           ),
                         }}
                         {...getGridCellA11yProps({
-                          id: getGridCellDomId("svgrid", rowIndex, colIndex),
+                          id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
                           rowIndex: rowIndex + 1,
                           colIndex: colIndex + 1,
                           selected: isRowSelected(row.id),
@@ -3273,10 +3302,13 @@
                     </select>
                     {#if active !== "isBlank" && active !== "isNotBlank"}
                       {@const tpIsSetOp = active === "in" || active === "notIn"}
+                      <!-- in/notIn drives the shared value-suggestions dropdown
+                           (a windowed checklist) rather than a native datalist,
+                           which capped at 200 values and couldn't show which
+                           are already selected. -->
                       <input
                         class="sv-grid-tp-filter-input"
                         type={active === "regex" ? "text" : fType}
-                        list={tpIsSetOp ? `sv-tp-in-list-${column.id}` : undefined}
                         placeholder={active === "between"
                           ? "From"
                           : tpIsSetOp
@@ -3285,19 +3317,15 @@
                               ? "Pattern…"
                               : "Filter…"}
                         value={filterMenuValues[column.id]?.value ?? ""}
-                        oninput={(e) =>
-                          updateFilterMenuValue(
-                            column.id,
-                            e.currentTarget.value,
-                          )}
+                        onfocus={tpIsSetOp
+                          ? (e) => onSetOpFilterFocus(e, column.id)
+                          : undefined}
+                        onblur={tpIsSetOp ? () => closeInSuggest() : undefined}
+                        oninput={(e) => {
+                          updateFilterMenuValue(column.id, e.currentTarget.value);
+                          if (tpIsSetOp) onSetOpFilterInput(e, column.id);
+                        }}
                       />
-                      {#if tpIsSetOp}
-                        <datalist id={`sv-tp-in-list-${column.id}`}>
-                          {#each facetValuesForColumn(column.id).slice(0, 200) as v (v)}
-                            <option value={v}></option>
-                          {/each}
-                        </datalist>
-                      {/if}
                       {#if active === "between"}
                         <input
                           class="sv-grid-tp-filter-input"

package/dist/SvGrid.types.d.ts

@@ -1339,11 +1339,18 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
     conditionalFormats?: ReadonlyArray<ConditionalFormat<TData>>;
     /**
      * Which rows feed the min/max range that `colorScale` / `dataBar` formats
-     * scale against. `visible` (default): the currently displayed rows (after
-     * filtering + paging), so the heat map adapts to what's on screen. `all`:
-     * the full unfiltered dataset, for a scale that stays put as you filter.
-     */
-    conditionalStatScope?: "visible" | "all";
+     * scale against.
+     *
+     * - `filtered` (default): every row that survives the filters, ignoring the
+     *   page slice. The scale follows what you filtered to but does not shift
+     *   when you page, so the same value keeps the same colour on page 1 and
+     *   page 2.
+     * - `visible`: only the rows currently on screen. Rescales per page - use it
+     *   when you want each page's heat map normalized to that page.
+     * - `all`: the full unfiltered dataset, for a scale that stays put as you
+     *   filter.
+     */
+    conditionalStatScope?: "filtered" | "visible" | "all";
     onCellValueChange?: (event: {
         rowIndex: number;
         columnId: string;
@@ -1562,6 +1569,14 @@ export type CellEditState = {
     columnId: string;
     editorType: CellEditorType;
     value: unknown;
+    /**
+     * The row's underlying data object, captured when the edit started. The
+     * commit path resolves the row by id first; this is the fallback for when
+     * the row has left the row model mid-edit (a filter typed into the filter
+     * row while an editor is open), so the typed value still lands instead of
+     * being silently dropped.
+     */
+    rowRef?: unknown;
 } | null;
 export type FilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "regex" | "in" | "notIn" | "greaterThan" | "lessThan" | "between" | "isBlank" | "isNotBlank";
 export type FilterOption = {

package/dist/SvListBox.svelte

@@ -23,9 +23,18 @@
 
   type Props = SvEditorProps & {
     options: ReadonlyArray<ListOption>
-    value?: string | number | Array<string | number> | null
+    value?: string | number | ReadonlyArray<string | number> | ReadonlySet<string | number> | null
     onChange?: (value: any) => void
     multiple?: boolean
+    /**
+     * Checklist styling: each row draws a checkbox and the selected-row accent
+     * highlight is suppressed, because a list that starts fully selected (a
+     * filter checklist) would otherwise paint every row. State reads off the
+     * box; `aria-selected` still carries it for assistive tech.
+     */
+    checkbox?: boolean
+    /** Stretch to the container width instead of the default 220px. */
+    block?: boolean
     /** Visible height in rows before scrolling. */
     rows?: number
     /** Window the list (render only visible rows) for large option sets. */
@@ -46,6 +55,8 @@
     value = null,
     onChange,
     multiple = false,
+    checkbox = false,
+    block = false,
     disabled = false,
     size = 'md',
     rows = 7,
@@ -152,13 +163,15 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} {block}>
   <!-- Div-based listbox (role comes from `lb.rootProps()`). -->
   <div
     bind:this={listEl}
     class="sv-listbox sv-listbox--{size}"
     class:is-invalid={invalid}
     class:is-virtual={useVirtual}
+    class:is-checkbox={checkbox}
+    class:is-block={block}
     style:--sv-rows={rows}
     style:--sv-row-h={`${rowHeightBase}px`}
     onwheel={useVirtual ? scroller.onWheel : undefined}
@@ -211,7 +224,11 @@
 </SvField>
 
 {#snippet optionInner(opt: ListOption)}
-  {#if multiple}<span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>{/if}
+  {#if checkbox}
+    <span class="sv-listbox__box" class:is-on={isSel(opt)} aria-hidden="true"></span>
+  {:else if multiple}
+    <span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>
+  {/if}
   {#if item ?? itemTemplate}{@render (item ?? itemTemplate)!(opt)}{:else}<span class="sv-listbox__label">{opt.label}</span>{/if}
 {/snippet}
 
@@ -249,6 +266,7 @@
     padding: 0; overflow: hidden; position: relative;
     height: calc(var(--sv-rows, 7) * var(--sv-row-h, 32px) + 8px);
   }
+  .sv-listbox.is-block { width: 100%; }
   .sv-listbox--sm { --_fs: 12px; }
   .sv-listbox--lg { --_fs: 15px; }
   .sv-listbox:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
@@ -284,4 +302,25 @@
   }
   .sv-listbox__check { width: 14px; text-align: center; color: var(--_accent); }
   .sv-listbox__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* ---- Checklist variant ---- */
+  .sv-listbox__box {
+    width: 14px; height: 14px; flex: none; box-sizing: border-box; position: relative;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1));
+    border-radius: 3px; background: var(--sg-input-bg, #fff);
+  }
+  .sv-listbox__box.is-on { background: var(--_accent); border-color: var(--_accent); }
+  .sv-listbox__box.is-on::after {
+    content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
+    border: solid var(--sg-input-bg, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
+  }
+  /* The box carries the state, so selected rows keep neutral chrome - only the
+     roving highlight tints a row. */
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-selected {
+    background: none; color: inherit; font-weight: inherit;
+  }
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-active,
+  .sv-listbox.is-checkbox .sv-listbox__opt.is-selected.is-active {
+    background: var(--sg-row-hover-bg, #f1f5f9);
+  }
 </style>