@svgrid/grid 2.2.28 → 2.2.29

package/dist/editing.js

@@ -3,6 +3,7 @@
 // ($state/$derived/$effect) stays in the controller.
 import { parseEditorValue, } from "./index";
 import "./sv-grid-scrollbar";
+import { getNextActiveCell } from "./keyboard";
 import { getCellKey, toValueArray, } from "./SvGrid.helpers";
 import { getColumnBaseValue, isGroupRow, } from "./cell-values";
 export function createEditing(ctx) {
@@ -96,6 +97,7 @@ export function createEditing(ctx) {
             columnId: column.id,
             editorType,
             value: char,
+            rowRef: row.original,
         };
         ctx.setActiveCell(rowIndex, colIndex);
         ctx.setSelection(rowIndex, colIndex);
@@ -104,15 +106,22 @@ export function createEditing(ctx) {
     function saveEditingCell() {
         if (!ctx.editingCell)
             return;
-        const row = ctx.allRows.find((entry) => entry.id === ctx.editingCell?.rowId);
+        const editing = ctx.editingCell;
+        // Resolve the row this edit belongs to. `allRows` is only the current page,
+        // so fall back to the full filtered model, then to the data object captured
+        // when the edit started. Without that last hop an edit is silently dropped
+        // when a filter typed mid-edit hides the row from both models (#49).
+        const row = ctx.allRows.find((entry) => entry.id === editing.rowId) ??
+            ctx.allRowsBeforePagination.find((entry) => entry.id === editing.rowId);
+        const rowData = (row?.original ?? editing.rowRef);
         const column = ctx.allColumns.find((entry) => entry.id === ctx.editingCell?.columnId);
         const parsedValue = parseEditorValue(ctx.editingCell.editorType, ctx.editingCell.value, {
             multiple: column?.columnDef.editorMultiple === true,
         });
         let oldValue = undefined;
         let finalValue = parsedValue;
-        if (row?.original && column?.columnDef.field) {
-            oldValue = row.original[column.columnDef.field];
+        if (rowData && column?.columnDef.field) {
+            oldValue = rowData[column.columnDef.field];
             // Per-column valueParser refines the type-coerced value before storing.
             const parser = column.columnDef.valueParser;
             if (parser) {
@@ -120,12 +129,11 @@ export function createEditing(ctx) {
                     newValue: parsedValue,
                     oldValue,
                     rawInput: ctx.editingCell.value,
-                    data: row.original,
+                    data: rowData,
                     columnId: ctx.editingCell.columnId,
                 });
             }
-            row.original[column.columnDef.field] =
-                finalValue;
+            rowData[column.columnDef.field] = finalValue;
         }
         const key = getCellKey(ctx.editingCell.rowId, ctx.editingCell.columnId);
         ctx.editedCellValues = {
@@ -136,7 +144,7 @@ export function createEditing(ctx) {
         // Record into the history at the current pointer. Any forward
         // history (steps the user could have redone) is truncated - this
         // is the standard "edit invalidates redo" rule.
-        if (oldValue !== finalValue && row?.original && column?.columnDef.field) {
+        if (oldValue !== finalValue && rowData && column?.columnDef.field) {
             const step = {
                 rowId: ctx.editingCell.rowId,
                 columnId: ctx.editingCell.columnId,
@@ -162,14 +170,14 @@ export function createEditing(ctx) {
         // Notify the consumer AFTER the row has been updated so any callback-
         // driven recompute (cascade totals, server save, undo stack) sees the
         // post-write state. `rowIndex` matches the position in `props.data`.
-        if (ctx.props.onCellValueChange && row?.original && column) {
-            const rowIndex = ctx.internalData.indexOf(row.original);
+        if (ctx.props.onCellValueChange && rowData && column) {
+            const rowIndex = ctx.internalData.indexOf(rowData);
             ctx.props.onCellValueChange({
                 rowIndex,
                 columnId: column.id,
                 oldValue,
                 newValue: finalValue,
-                row: row.original,
+                row: rowData,
             });
         }
         ctx.editingCell = null;
@@ -200,6 +208,27 @@ export function createEditing(ctx) {
     function updateEditingCellValue(value) {
         ctx.editingCell = ctx.editingCell ? { ...ctx.editingCell, value } : ctx.editingCell;
     }
+    /**
+     * Commit the open editor and move the active cell one column along, wrapping
+     * at row boundaries the way Excel does. Editors `stopPropagation()` every key
+     * so the grid's own Tab handler never sees this one - without the explicit
+     * move, Tab committed the edit and then let the browser walk focus out of the
+     * grid entirely (#48). Shared by every editor type, including the textarea.
+     */
+    function commitAndMoveByTab(shiftKey) {
+        const active = ctx.activeCell;
+        saveEditingCell();
+        ctx.gridRootEl?.focus({ preventScroll: true });
+        if (!active)
+            return;
+        const next = getNextActiveCell(active, shiftKey ? "tabPrev" : "tabNext", {
+            maxRow: ctx.allRows.length - 1,
+            maxCol: ctx.allColumns.length - 1,
+        });
+        ctx.setActiveCell(next.rowIndex, next.colIndex);
+        ctx.setSelection(next.rowIndex, next.colIndex);
+        ctx.scrollActiveCellIntoView(next.rowIndex, next.colIndex);
+    }
     function onEditorKeyDown(event) {
         event.stopPropagation();
         if (event.key === "Enter") {
@@ -207,6 +236,10 @@ export function createEditing(ctx) {
             saveEditingCell();
             ctx.gridRootEl?.focus({ preventScroll: true });
         }
+        else if (event.key === "Tab") {
+            event.preventDefault();
+            commitAndMoveByTab(event.shiftKey);
+        }
         else if (event.key === "Escape") {
             event.preventDefault();
             ctx.editingCell = null;
@@ -269,6 +302,7 @@ export function createEditing(ctx) {
             columnId: column.id,
             editorType,
             value: initialValue,
+            rowRef: row.original,
         };
         ctx.setActiveCell(rowIndex, colIndex);
         ctx.setSelection(rowIndex, colIndex);
@@ -528,6 +562,7 @@ export function createEditing(ctx) {
         applyHistoryStep,
         updateEditingCellValue,
         onEditorKeyDown,
+        commitAndMoveByTab,
         focusOnMount,
         onCellDoubleClick,
         pasteFromClipboard,

package/dist/filtering/excel-filters.d.ts

@@ -25,19 +25,39 @@ export type ExcelFilterOptions = {
 export declare function normalizeForFilter(s: string, locale?: string | ReadonlyArray<string>): string;
 /**
  * Delimiter used to serialise the `in` / `notIn` value list into the single
- * `value` string that the filter model carries. A newline is used because it
- * (unlike a comma) practically never appears inside a typed token, so tokens
- * survive the round-trip unescaped. The chip input in the filter row reads and
- * writes with the same separator via {@link splitInTokens} / {@link joinInTokens}.
+ * `value` string that the filter model carries.
+ *
+ * This has to be single-line safe: the tool panel and the filter menu show the
+ * serialised list in a plain `<input type="text">`, and the HTML input value
+ * sanitiser STRIPS newlines - so a newline-joined list came back out of the DOM
+ * as one run-together token. `splitInTokens` accepts newlines too, so values
+ * serialised by older builds still parse.
  */
-export declare const IN_TOKEN_SEP = "\n";
+export declare const IN_TOKEN_SEP = ", ";
 /**
- * Split a serialised `in` / `notIn` value into its individual tokens. Accepts
- * both the newline separator the chip input writes and a plain comma-separated
- * string (what a raw text field, e.g. the tool-panel filter, produces), so the
- * same value round-trips through either UI.
+ * Split a serialised `in` / `notIn` value into its individual tokens.
+ *
+ * The grammar is CSV-shaped: comma OR newline separates, and a token may be
+ * double-quoted to carry a separator literally (`""` escapes a quote inside
+ * one). Quoting is what makes a comma separator safe - facet values commonly
+ * contain commas of their own, because numeric bucket labels are built with
+ * `toLocaleString` ("1,234 - 5,678") and date labels with a short month
+ * ("Aug 17, 2026"). A quote only opens a token when it is the token's first
+ * non-space character, so an unquoted `5" pipe` stays literal.
  */
 export declare function splitInTokens(value: unknown): string[];
-/** Serialise a list of tokens back into the single `in` / `notIn` value. */
+/**
+ * Serialise a list of tokens back into the single `in` / `notIn` value,
+ * quoting any token that carries a separator or a quote of its own.
+ */
 export declare function joinInTokens(tokens: ReadonlyArray<string>): string;
+/**
+ * The token still being typed at the end of an `in` / `notIn` value - the text
+ * after the last separator. `'AAPL, MS'` -> `'MS'`; a value ending in a
+ * separator (or empty) has no trailing token.
+ *
+ * Inputs that hold the whole token list use this to drive the value-suggestion
+ * dropdown: the trailing fragment is the search query, not a committed token.
+ */
+export declare function trailingInToken(value: unknown): string;
 export declare function applyExcelFilter(cellValue: unknown, filter: ExcelFilter, options?: ExcelFilterOptions): boolean;

package/dist/filtering/excel-filters.js

@@ -15,27 +15,108 @@ export function normalizeForFilter(s, locale) {
 }
 /**
  * Delimiter used to serialise the `in` / `notIn` value list into the single
- * `value` string that the filter model carries. A newline is used because it
- * (unlike a comma) practically never appears inside a typed token, so tokens
- * survive the round-trip unescaped. The chip input in the filter row reads and
- * writes with the same separator via {@link splitInTokens} / {@link joinInTokens}.
+ * `value` string that the filter model carries.
+ *
+ * This has to be single-line safe: the tool panel and the filter menu show the
+ * serialised list in a plain `<input type="text">`, and the HTML input value
+ * sanitiser STRIPS newlines - so a newline-joined list came back out of the DOM
+ * as one run-together token. `splitInTokens` accepts newlines too, so values
+ * serialised by older builds still parse.
  */
-export const IN_TOKEN_SEP = '\n';
+export const IN_TOKEN_SEP = ', ';
 /**
- * Split a serialised `in` / `notIn` value into its individual tokens. Accepts
- * both the newline separator the chip input writes and a plain comma-separated
- * string (what a raw text field, e.g. the tool-panel filter, produces), so the
- * same value round-trips through either UI.
+ * Split a serialised `in` / `notIn` value into its individual tokens.
+ *
+ * The grammar is CSV-shaped: comma OR newline separates, and a token may be
+ * double-quoted to carry a separator literally (`""` escapes a quote inside
+ * one). Quoting is what makes a comma separator safe - facet values commonly
+ * contain commas of their own, because numeric bucket labels are built with
+ * `toLocaleString` ("1,234 - 5,678") and date labels with a short month
+ * ("Aug 17, 2026"). A quote only opens a token when it is the token's first
+ * non-space character, so an unquoted `5" pipe` stays literal.
  */
 export function splitInTokens(value) {
-    return String(value ?? '')
-        .split(/[\n,]/)
-        .map((t) => t.trim())
-        .filter((t) => t.length > 0);
+    const { tokens, trailing } = scanInTokens(value);
+    if (trailing)
+        tokens.push(trailing);
+    return tokens;
 }
-/** Serialise a list of tokens back into the single `in` / `notIn` value. */
+/**
+ * Serialise a list of tokens back into the single `in` / `notIn` value,
+ * quoting any token that carries a separator or a quote of its own.
+ */
 export function joinInTokens(tokens) {
-    return tokens.map((t) => t.trim()).filter((t) => t.length > 0).join(IN_TOKEN_SEP);
+    return tokens
+        .map((t) => t.trim())
+        .filter((t) => t.length > 0)
+        .map((t) => (/["\n,]/.test(t) ? `"${t.replace(/"/g, '""')}"` : t))
+        .join(IN_TOKEN_SEP);
+}
+/**
+ * The token still being typed at the end of an `in` / `notIn` value - the text
+ * after the last separator. `'AAPL, MS'` -> `'MS'`; a value ending in a
+ * separator (or empty) has no trailing token.
+ *
+ * Inputs that hold the whole token list use this to drive the value-suggestion
+ * dropdown: the trailing fragment is the search query, not a committed token.
+ */
+export function trailingInToken(value) {
+    return scanInTokens(value).trailing;
+}
+/**
+ * One pass over a serialised `in` / `notIn` value, splitting it into the
+ * tokens that are terminated by a separator and the unterminated fragment at
+ * the end. Every token helper above is a view onto this, so they can never
+ * disagree about where a quoted token starts or ends.
+ */
+function scanInTokens(value) {
+    const raw = String(value ?? '');
+    const tokens = [];
+    let buf = '';
+    let quoted = false;
+    let wasQuoted = false;
+    let closed = false;
+    // A quoted token keeps its inner spacing; an unquoted one is trimmed.
+    const take = () => {
+        const t = wasQuoted ? buf : buf.trim();
+        buf = '';
+        wasQuoted = false;
+        closed = false;
+        return t;
+    };
+    for (let i = 0; i < raw.length; i += 1) {
+        const ch = raw[i];
+        if (quoted) {
+            if (ch !== '"') {
+                buf += ch;
+                continue;
+            }
+            // A doubled quote is an escaped literal quote, not the closing one.
+            if (raw[i + 1] === '"') {
+                buf += '"';
+                i += 1;
+                continue;
+            }
+            quoted = false;
+            closed = true;
+            continue;
+        }
+        if (ch === ',' || ch === '\n') {
+            const t = take();
+            if (t.length)
+                tokens.push(t);
+            continue;
+        }
+        // Only opens a quoted token at the token's start - `5" pipe` is literal.
+        if (ch === '"' && !closed && !buf.trim()) {
+            quoted = true;
+            wasQuoted = true;
+            buf = '';
+            continue;
+        }
+        buf += ch;
+    }
+    return { tokens, trailing: take() };
 }
 export function applyExcelFilter(cellValue, filter, options) {
     const text = String(cellValue ?? '');

package/dist/index.d.ts

@@ -56,7 +56,7 @@ export { default as SvAspectRatio } from './SvAspectRatio.svelte';
 export { registerCellEditor, getCellEditor, hasCellEditor, unregisterCellEditor, registeredCellEditorTypes, defaultEditorProps, resolveEditorProps, type CellEditorContext, type CellEditorRegistration, } from './editor-registry';
 export { registerBuiltinEditors } from './builtin-editors';
 export { default as SvField } from './SvField.svelte';
-export { createListbox, toSelectedArray, type Listbox, type ListboxConfig, type ListboxValue, type ListboxRootProps, type OptionProps, } from './createListbox.svelte';
+export { createListbox, toSelectedArray, toSelectedSet, type Listbox, type ListboxConfig, type ListboxValue, type ListboxRootProps, type OptionProps, } from './createListbox.svelte';
 export { createCombobox, type Combobox, type ComboboxConfig, type ComboboxValue } from './createCombobox.svelte';
 export { createDropdownList, type DropdownList, type DropdownListConfig, type DropdownValue } from './createDropdownList.svelte';
 export { createPopoverSelect, type PopoverSelect, type PopoverSelectConfig } from './createPopoverSelect.svelte';
@@ -214,7 +214,7 @@ export { createColumnVirtualizer } from './virtualization/column-virtualizer';
 export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types';
 export type { SvGridApi, SvGridFilterOperator, SvGridWrapperProps } from './svgrid-wrapper.types';
 export { parseEditorValue, normalizeEditorOptions, type CellEditorType, type CellEditorOption, } from './editors/cell-editors';
-export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, type ExcelFilter, type ExcelFilterOperator, type ExcelFilterOptions, } from './filtering/excel-filters';
+export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, type ExcelFilter, type ExcelFilterOperator, type ExcelFilterOptions, } from './filtering/excel-filters';
 export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, type GridCellA11yInput, type GridColumnA11yInput, type GridSortDirection, } from './a11y';
 /**
  * Compatibility alias for teams migrating from `createTable`.

package/dist/index.js

@@ -76,7 +76,7 @@ export { registerBuiltinEditors } from './builtin-editors';
 // UI kit - shared field chrome (label + hint + error + direction wrapper)
 export { default as SvField } from './SvField.svelte';
 // UI kit - headless cores (state + prop-getters you render yourself, like createSvGrid)
-export { createListbox, toSelectedArray, } from './createListbox.svelte';
+export { createListbox, toSelectedArray, toSelectedSet, } from './createListbox.svelte';
 // Selection family cores
 export { createCombobox } from './createCombobox.svelte';
 export { createDropdownList } from './createDropdownList.svelte';
@@ -249,7 +249,7 @@ export { createVirtualizer } from './virtualization/virtualizer';
 export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte';
 export { createColumnVirtualizer } from './virtualization/column-virtualizer';
 export { parseEditorValue, normalizeEditorOptions, } from './editors/cell-editors';
-export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, } from './filtering/excel-filters';
+export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, } from './filtering/excel-filters';
 export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, } from './a11y';
 /**
  * Compatibility alias for teams migrating from `createTable`.

package/dist/menus.d.ts

@@ -24,6 +24,8 @@ export declare function createMenus<TFeatures extends TableFeatures = TableFeatu
     clearGroupingFromMenu: (columnId: string) => void;
     isFacetChecked: (columnId: string, value: string) => any;
     toggleFacetValue: (columnId: string, value: string) => void;
+    setFacetSelection: (columnId: string, next: ReadonlySet<string>) => void;
+    setFilterTokens: (columnId: string, tokens: Iterable<string>) => void;
     isAllFacetsChecked: (columnId: string) => boolean;
     toggleAllFacets: (columnId: string) => void;
     clearColumnFilter: (columnId: string) => void;

package/dist/menus.js

@@ -73,6 +73,15 @@ export function createMenus(ctx) {
         else
             addFilterToken(columnId, token);
     }
+    /**
+     * Replace a column's `in` / `notIn` list wholesale. The suggestions dropdown
+     * hands back the full token set after a click, which keeps tokens the user
+     * typed by hand (or that the search box is currently hiding) intact.
+     */
+    function setFilterTokens(columnId, tokens) {
+        const list = [...tokens].map((t) => t.trim()).filter(Boolean);
+        updateFilterRow(columnId, joinInTokens(list));
+    }
     function toggleCheckboxWithKeyboard(event, toggle) {
         if (event.key !== "Enter" && event.key !== " ")
             return;
@@ -226,6 +235,20 @@ export function createMenus(ctx) {
             ctx.valueFilters = { ...ctx.valueFilters, [columnId]: next };
         }
     }
+    /**
+     * Replace a column's checked-facet set. "Everything checked" is stored as an
+     * ABSENT entry (so an unfiltered high-cardinality column never holds a set of
+     * every value), which is why the full-size case deletes instead of writing.
+     */
+    function setFacetSelection(columnId, next) {
+        if (next.size >= ctx.columnMenuFacetValues.length) {
+            const copy = { ...ctx.valueFilters };
+            delete copy[columnId];
+            ctx.valueFilters = copy;
+            return;
+        }
+        ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set(next) };
+    }
     function isAllFacetsChecked(columnId) {
         const selected = ctx.valueFilters[columnId];
         return !selected || selected.size >= ctx.columnMenuFacetValues.length;
@@ -464,6 +487,8 @@ export function createMenus(ctx) {
         clearGroupingFromMenu,
         isFacetChecked,
         toggleFacetValue,
+        setFacetSelection,
+        setFilterTokens,
         isAllFacetsChecked,
         toggleAllFacets,
         clearColumnFilter,

package/dist/row-resize.js

@@ -60,6 +60,41 @@ export function rowResize(node, opts) {
         window.removeEventListener('pointerup', onPointerUp);
         document.body.style.cursor = '';
     }
+    /**
+     * Keyboard resize (#79). The strip is `role="separator"` acting as a
+     * splitter, so it has to be reachable by Tab and respond to arrow keys.
+     * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
+     * contract the column resize handle uses (Left/Right, Shift = 1px).
+     */
+    function onKeyDown(e) {
+        if (current.disabled)
+            return;
+        const t = e.target;
+        if (!t?.classList.contains(STRIP_CLASS))
+            return;
+        const step = e.shiftKey ? 1 : 10;
+        let delta = 0;
+        if (e.key === 'ArrowUp')
+            delta = -step;
+        else if (e.key === 'ArrowDown')
+            delta = step;
+        else
+            return;
+        const tr = t.closest('tr.sv-grid-row');
+        if (!tr)
+            return;
+        const rowIndex = rowIndexOf(tr);
+        if (!Number.isFinite(rowIndex))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const min = current.min ?? 20;
+        const max = current.max ?? 320;
+        const next = Math.round(Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)));
+        tr.style.height = `${next}px`;
+        current.onResizeMove?.(rowIndex, next);
+        current.onResize(rowIndex, next);
+    }
     function onPointerDown(e) {
         if (current.disabled)
             return;
@@ -122,6 +157,9 @@ export function rowResize(node, opts) {
             strip.setAttribute('role', 'separator');
             strip.setAttribute('aria-orientation', 'horizontal');
             strip.setAttribute('aria-label', 'Resize row');
+            // A separator used as an interactive splitter has to be focusable so
+            // keyboard-only users can reach it and drive `onKeyDown` (#79).
+            strip.tabIndex = 0;
             // Inline the geometry + pointer-events so the strip works even
             // before SvGrid.css is parsed; the hover tint still comes from
             // the stylesheet. We keep the strip fully inside the gutter
@@ -139,6 +177,7 @@ export function rowResize(node, opts) {
         node.querySelectorAll(`.${STRIP_CLASS}`).forEach((el) => el.remove());
     }
     node.addEventListener('pointerdown', onPointerDown, { capture: true });
+    node.addEventListener('keydown', onKeyDown, { capture: true });
     const observer = new MutationObserver(() => decorate());
     observer.observe(node, { childList: true, subtree: true });
     decorate();
@@ -152,6 +191,7 @@ export function rowResize(node, opts) {
         },
         destroy() {
             node.removeEventListener('pointerdown', onPointerDown, { capture: true });
+            node.removeEventListener('keydown', onKeyDown, { capture: true });
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             observer.disconnect();

package/dist/selection.js

@@ -30,7 +30,7 @@ export function createSelection(ctx) {
         ctx.grid.setActiveCell({
             rowIndex,
             colIndex,
-            cellId: getGridCellDomId("svgrid", rowIndex, colIndex),
+            cellId: getGridCellDomId(ctx.gridDomId, rowIndex, colIndex),
         });
         // Notify consumers (toolbars, ribbons) so they stay synced without
         // having to listen on the DOM. Fired on EVERY active-cell move -

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.2.28",
+  "version": "2.2.29",
   "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",