@svgrid/grid 2.2.31 → 2.2.32

package/dist/core.d.ts

@@ -48,6 +48,12 @@ export type CellSpanParams<TData extends RowData = RowData> = {
     /** The cell's base value for this column. */
     value: unknown;
 };
+/** The raw option list a column's `editorOptions` can supply. */
+export type EditorOptionSource = ReadonlyArray<string | number | {
+    value: string | number;
+    label?: string;
+    color?: string;
+}>;
 /** Params passed to a column's `valueParser(...)` on edit commit. */
 export type ValueParserParams<TData extends RowData = RowData> = {
     /** The value after built-in per-`editorType` coercion. */
@@ -126,6 +132,16 @@ export type ColumnDefTemplate<TContext> = string | ((context: TContext) => unkno
 export type GroupAggregator<TData = any> = 'sum' | 'avg' | 'min' | 'max' | 'count' | 'countDistinct' | 'extent' | 'first' | ((values: number[], rows: Array<TData>) => unknown);
 /** Apply a group aggregator over a bucket's leaf rows for one column. */
 export declare function applyGroupAggregate<TData extends RowData>(agg: GroupAggregator<TData>, columnId: string, rows: ReadonlyArray<Row<TData>>): unknown;
+/**
+ * A column definition.
+ *
+ * `TFeatures` is a phantom parameter - it is threaded through nested
+ * `columns` groups but no member depends on it, so `{}`, `TableFeatures` and
+ * `typeof features` are all interchangeable here. It is deliberately left
+ * WITHOUT a default: `ColumnDef<Row>` would otherwise bind `Row` to this slot
+ * and silently type your data as `RowData`, losing every field-name check.
+ * Prefer {@link GridColumns} / {@link GridColumnDef} for the common case.
+ */
 export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> = {
     id?: string;
     field?: keyof TData & string;
@@ -270,16 +286,17 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      *
      * Pass a function `(row) => options` for row-dependent (cascading)
      * options - e.g. City options that depend on Country in the same row.
+     *
+     * Either form may return a **Promise**, for options that come from the
+     * server. While it resolves, the editor shows a loading state and the cell
+     * renders its raw value.
+     *
+     * Results are cached so reopening an editor does not refetch: a static source
+     * per column, a per-row source per row AND per that row's data - so a cascade
+     * reloads by itself when the cell it depends on is edited. Call
+     * `api.refreshEditorOptions(columnId?)` when the list changes server-side.
      */
-    editorOptions?: ReadonlyArray<string | number | {
-        value: string | number;
-        label?: string;
-        color?: string;
-    }> | ((row: TData) => ReadonlyArray<string | number | {
-        value: string | number;
-        label?: string;
-        color?: string;
-    }>);
+    editorOptions?: EditorOptionSource | Promise<EditorOptionSource> | ((row: TData) => EditorOptionSource | Promise<EditorOptionSource>);
     /** When true, list/chips allow multiple selections. Cell value becomes an array. */
     editorMultiple?: boolean;
     /** Separator used when joining array values for the readonly cell display. Defaults to ', '. */
@@ -339,6 +356,21 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      */
     cellClass?: string | ReadonlyArray<string> | ((ctx: CellContext<TData>) => string | ReadonlyArray<string> | Record<string, boolean> | undefined | null);
 };
+/**
+ * A column definition keyed only by your row type - the ergonomic form of
+ * {@link ColumnDef}, whose first parameter is a phantom feature bag that is
+ * almost always `{}`.
+ *
+ * ```ts
+ * const columns: GridColumns<Person> = [{ field: 'firstName', header: 'Name' }]
+ * ```
+ *
+ * Interchangeable with `ColumnDef<{}, TData>` and `ColumnDef<typeof features,
+ * TData>` in both directions, so it mixes freely with existing code.
+ */
+export type GridColumnDef<TData extends RowData = RowData> = ColumnDef<TableFeatures, TData>;
+/** An array of {@link GridColumnDef} - what you pass to `<SvGrid columns={...}>`. */
+export type GridColumns<TData extends RowData = RowData> = Array<GridColumnDef<TData>>;
 export type Column<TData extends RowData> = {
     id: string;
     columnDef: ColumnDef<any, TData>;
@@ -427,6 +459,45 @@ export declare function createCoreRowModel<TData extends RowData>(): RowModelFac
 export declare function createFilteredRowModel<TData extends RowData>(): RowModelFactory<TData>;
 export declare function createPaginatedRowModel<TData extends RowData>(): RowModelFactory<TData>;
 export declare function createGroupedRowModel<TData extends RowData>(): RowModelFactory<TData>;
+export type TreeRowModelOptions = {
+    /** Field holding each row's parent id. Rows with no parent are roots. */
+    parentField: string;
+    /** Field holding the row's own id. Defaults to `'id'`. */
+    idField?: string;
+};
+/**
+ * Client-side tree data: nest the grid's own flat rows into a parent/child
+ * hierarchy that `createExpandedRowModel` then walks.
+ *
+ * This works on the rows the grid already built rather than on raw data, so
+ * tree rows keep their cells, editing, selection and formatting - they are real
+ * data rows that happen to have children, not synthetic banners like grouping's.
+ * That is also why the model is parent-id based: nested source arrays never
+ * become rows (the grid only builds rows for `data`), so nested input is
+ * flattened first with {@link flattenTreeData}. One code path, no duplicated
+ * row construction.
+ *
+ * Rows are tagged `__treeRow` so `isGroupRow` does not mistake an expandable
+ * data row for a full-width group banner.
+ */
+export declare function createTreeRowModel<TData extends RowData>(options: TreeRowModelOptions): RowModelFactory<TData>;
+export type FlattenTreeOptions = {
+    /** Field holding an array of child objects. */
+    childrenField: string;
+    /** Field holding each object's id. Defaults to `'id'`. */
+    idField?: string;
+    /** Field to WRITE the resolved parent id onto. Defaults to `'__parentId'`. */
+    parentField?: string;
+};
+/**
+ * Flatten nested tree data into the flat parent-id shape `createTreeRowModel`
+ * consumes, stamping each child with its parent's id.
+ *
+ * Children are emitted directly after their parent so the natural order already
+ * matches the rendered tree. The `childrenField` array is left on the objects
+ * (harmless, and callers often still want it); only the parent link is added.
+ */
+export declare function flattenTreeData<T extends RowData>(data: ReadonlyArray<T>, options: FlattenTreeOptions): T[];
 export declare function createExpandedRowModel<TData extends RowData>(): RowModelFactory<TData>;
 export declare function createSortedRowModel<TData extends RowData>(localSortFns?: typeof sortFns): RowModelFactory<TData>;
 export type SvGridOptions<TFeatures extends TableFeatures, TData extends RowData> = {

package/dist/core.js

@@ -193,6 +193,95 @@ export function createGroupedRowModel() {
         return buildGroups(rows, 0, 0, 'group');
     };
 }
+/**
+ * Client-side tree data: nest the grid's own flat rows into a parent/child
+ * hierarchy that `createExpandedRowModel` then walks.
+ *
+ * This works on the rows the grid already built rather than on raw data, so
+ * tree rows keep their cells, editing, selection and formatting - they are real
+ * data rows that happen to have children, not synthetic banners like grouping's.
+ * That is also why the model is parent-id based: nested source arrays never
+ * become rows (the grid only builds rows for `data`), so nested input is
+ * flattened first with {@link flattenTreeData}. One code path, no duplicated
+ * row construction.
+ *
+ * Rows are tagged `__treeRow` so `isGroupRow` does not mistake an expandable
+ * data row for a full-width group banner.
+ */
+export function createTreeRowModel(options) {
+    const { parentField, idField = 'id' } = options;
+    return ({ table, rows }) => {
+        if (!rows.length)
+            return rows;
+        const keyOf = (row) => row.original?.[idField];
+        const parentOf = (row) => row.original?.[parentField];
+        const present = new Set();
+        for (const row of rows)
+            present.add(keyOf(row));
+        const childrenByParent = new Map();
+        const roots = [];
+        for (const row of rows) {
+            const parent = parentOf(row);
+            // A row whose parent is absent (filtered out, or never existed) becomes a
+            // root rather than disappearing - silently dropping rows is worse than a
+            // shallower tree. Self-parenting is treated the same way.
+            if (parent == null || parent === keyOf(row) || !present.has(parent)) {
+                roots.push(row);
+                continue;
+            }
+            const list = childrenByParent.get(parent) ?? [];
+            list.push(row);
+            childrenByParent.set(parent, list);
+        }
+        // Guards a cycle in the parent chain from recursing forever.
+        const seen = new Set();
+        const build = (row, depth) => {
+            const key = keyOf(row);
+            const id = row.id;
+            if (seen.has(key)) {
+                return { ...row, depth, subRows: [], getCanExpand: () => false };
+            }
+            seen.add(key);
+            const subRows = (childrenByParent.get(key) ?? []).map((child) => build(child, depth + 1));
+            return {
+                ...row,
+                depth,
+                subRows,
+                leafCount: subRows.reduce((n, sub) => n + 1 + (sub.leafCount ?? 0), 0),
+                __treeRow: true,
+                getCanExpand: () => subRows.length > 0,
+                getIsExpanded: () => Boolean((table.getState().expanded ?? {})[id]),
+                toggleExpanded: () => {
+                    table.setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+                },
+            };
+        };
+        return roots.map((root) => build(root, 0));
+    };
+}
+/**
+ * Flatten nested tree data into the flat parent-id shape `createTreeRowModel`
+ * consumes, stamping each child with its parent's id.
+ *
+ * Children are emitted directly after their parent so the natural order already
+ * matches the rendered tree. The `childrenField` array is left on the objects
+ * (harmless, and callers often still want it); only the parent link is added.
+ */
+export function flattenTreeData(data, options) {
+    const { childrenField, idField = 'id', parentField = '__parentId' } = options;
+    const out = [];
+    const walk = (nodes, parentId) => {
+        for (const node of nodes) {
+            const flat = { ...node, [parentField]: parentId };
+            out.push(flat);
+            const kids = node[childrenField];
+            if (Array.isArray(kids) && kids.length)
+                walk(kids, node[idField]);
+        }
+    };
+    walk(data, null);
+    return out;
+}
 export function createExpandedRowModel() {
     return ({ table, rows }) => {
         const expanded = table.getState().expanded ?? {};

package/dist/editor-contract.d.ts

@@ -63,16 +63,23 @@ export type SvEditorProps = {
  * The interaction surface an editor exposes when embedded as a grid cell editor.
  * Standalone usage ignores these; the grid supplies them so every editor shares
  * one commit / cancel / move contract (Enter commits, Escape cancels, Tab moves)
- * instead of each cell-editor re-implementing key handling. Consumed in Phase 2
- * (the editor registry).
+ * instead of each cell-editor re-implementing key handling.
+ *
+ * `CellEditorContext` (editor-registry.ts) extends this type, so what the grid
+ * hands a registered editor and what this contract promises are the same thing
+ * by construction rather than by convention.
  */
 export type EditorInteraction<V = unknown> = {
-    /** Commit the current value and stop editing (Enter, option pick, blur-commit). */
-    onCommit?: (value: V) => void;
+    /**
+     * Commit the value and stop editing (Enter, option pick, blur-commit).
+     * The argument is optional: an editor that has been reporting through
+     * `onChange` can just call `onCommit()` to commit what the grid already has.
+     */
+    onCommit?: (value?: V) => void;
     /** Abandon the edit and restore the previous value (Escape). */
     onCancel?: () => void;
     /** Commit, then move to the adjacent cell (Tab = 1, Shift+Tab = -1). */
-    onCommitAndMove?: (value: V, direction: 1 | -1) => void;
+    onCommitAndMove?: (value: V | undefined, direction: 1 | -1) => void;
     /** Ask the surrounding popover/panel to close without committing. */
     onRequestClose?: () => void;
     /** True while mounted inside a grid cell (lets an editor tune autofocus etc.). */

package/dist/editor-registry.d.ts

@@ -20,8 +20,17 @@
  * mounting.
  */
 import type { Component } from 'svelte';
-/** Context the grid hands a cell editor when it mounts one for an edit. */
-export type CellEditorContext<T = unknown> = {
+import type { EditorInteraction } from './editor-contract';
+/**
+ * Context the grid hands a cell editor when it mounts one for an edit.
+ *
+ * Extends {@link EditorInteraction} - the shared commit / cancel / move contract
+ * the `Sv*` editors are written against - and narrows the parts the grid always
+ * supplies, so a registered component and a built-in editor speak the same
+ * language. `onCommitAndMove`, `onRequestClose` and `inCell` come from the
+ * contract and are always populated by the grid.
+ */
+export type CellEditorContext<T = unknown> = Required<Pick<EditorInteraction<T>, 'onCommit' | 'onCancel' | 'onCommitAndMove' | 'onRequestClose' | 'inCell'>> & {
     /** The value currently being edited. */
     value: T;
     /** Id of the row being edited. */
@@ -30,10 +39,6 @@ export type CellEditorContext<T = unknown> = {
     columnId: string;
     /** Update the in-progress value WITHOUT ending the edit. */
     onChange: (value: T) => void;
-    /** Commit the value and stop editing (optionally pass a final value). */
-    onCommit: (value?: T) => void;
-    /** Discard changes and stop editing (returns focus to the grid). */
-    onCancel: () => void;
 };
 /** How a registered component is mounted and wired for a cell edit. */
 export type CellEditorRegistration = {
@@ -61,7 +66,13 @@ export declare function hasCellEditor(type: string): boolean;
 export declare function unregisterCellEditor(type: string): void;
 /** All registered custom editor type names. */
 export declare function registeredCellEditorTypes(): string[];
-/** The default context → props mapping used when a registration has no `props`. */
+/**
+ * The default context → props mapping used when a registration has no `props`.
+ * Passes the whole {@link EditorInteraction} surface, so an editor written
+ * against the shared contract works when registered with no mapping at all.
+ * Svelte ignores props a component doesn't declare, so the extra keys are inert
+ * for a simple editor that only wants `value` + `onCommit`.
+ */
 export declare function defaultEditorProps(ctx: CellEditorContext): Record<string, unknown>;
 /** Resolve the props to spread onto a registered editor for a given context. */
 export declare function resolveEditorProps(registration: CellEditorRegistration, ctx: CellEditorContext): Record<string, unknown>;

package/dist/editor-registry.js

@@ -23,13 +23,22 @@ export function unregisterCellEditor(type) {
 export function registeredCellEditorTypes() {
     return [...registry.keys()];
 }
-/** The default context → props mapping used when a registration has no `props`. */
+/**
+ * The default context → props mapping used when a registration has no `props`.
+ * Passes the whole {@link EditorInteraction} surface, so an editor written
+ * against the shared contract works when registered with no mapping at all.
+ * Svelte ignores props a component doesn't declare, so the extra keys are inert
+ * for a simple editor that only wants `value` + `onCommit`.
+ */
 export function defaultEditorProps(ctx) {
     return {
         value: ctx.value,
         onChange: ctx.onChange,
         onCommit: ctx.onCommit,
         onCancel: ctx.onCancel,
+        onCommitAndMove: ctx.onCommitAndMove,
+        onRequestClose: ctx.onRequestClose,
+        inCell: ctx.inCell,
     };
 }
 /** Resolve the props to spread onto a registered editor for a given context. */

package/dist/group-display.d.ts

@@ -36,6 +36,45 @@ export type GroupFooterOptions<R> = {
  * preserved. No-op when neither footer flag is set.
  */
 export declare function insertGroupFooters<R>(rows: ReadonlyArray<R>, opts: GroupFooterOptions<R>): R[];
+export type GroupPaginationOptions<R> = {
+    /** Depth of a row (group rows and their descendants). */
+    getDepth: (row: R) => number;
+    /** True when a row is a group (banner) row. */
+    isGroup: (row: R) => boolean;
+    /**
+     * True when a group row is expanded. Defaults to treating every group as
+     * expanded. This matters: an EXPANDED group is a header, reprinted above its
+     * children and costing no page budget, while a COLLAPSED group is the visible
+     * unit itself and must consume a slot - otherwise a fully collapsed grid has
+     * no budget-consuming rows at all and every page comes back empty.
+     */
+    isExpanded?: (row: R) => boolean;
+    pageIndex: number;
+    pageSize: number;
+};
+export type GroupPaginationResult<R> = {
+    /** The rows to render for this page: the page's budget-consuming rows, each
+     *  preceded by whichever ancestor banners have not been printed yet. */
+    rows: R[];
+    /** Budget-consuming rows across every page - what the pager divides by.
+     *  Data rows plus collapsed group rows; expanded banners do not count. */
+    dataRowCount: number;
+};
+/**
+ * Paginate a grouped row list by DATA rows, repeating each page's ancestor
+ * group headers.
+ *
+ * Slicing the flat grouped list directly counts group banners against
+ * `pageSize`, so `pageSize: 10` over ten groups of two shows almost no data
+ * (#73). Here only non-group rows consume the page budget, and a page reprints
+ * the group chain its first rows sit under - the same thing a spreadsheet does
+ * when a grouped table breaks across pages.
+ *
+ * Ancestors are tracked with a depth stack rather than parent pointers, so this
+ * works on the already-flattened expanded model and needs nothing from the row
+ * objects but depth and group-ness.
+ */
+export declare function paginateGroupedRows<R>(rows: ReadonlyArray<R>, opts: GroupPaginationOptions<R>): GroupPaginationResult<R>;
 export type AutoGroupColumnSpec = {
     /** Synthetic column id (e.g. `__autoGroup` or `__group_<field>`). */
     id: string;

package/dist/group-display.js

@@ -51,6 +51,58 @@ export function insertGroupFooters(rows, opts) {
     }
     return out;
 }
+/**
+ * Paginate a grouped row list by DATA rows, repeating each page's ancestor
+ * group headers.
+ *
+ * Slicing the flat grouped list directly counts group banners against
+ * `pageSize`, so `pageSize: 10` over ten groups of two shows almost no data
+ * (#73). Here only non-group rows consume the page budget, and a page reprints
+ * the group chain its first rows sit under - the same thing a spreadsheet does
+ * when a grouped table breaks across pages.
+ *
+ * Ancestors are tracked with a depth stack rather than parent pointers, so this
+ * works on the already-flattened expanded model and needs nothing from the row
+ * objects but depth and group-ness.
+ */
+export function paginateGroupedRows(rows, opts) {
+    const { getDepth, isGroup, isExpanded, pageIndex, pageSize } = opts;
+    const expanded = isExpanded ?? (() => true);
+    const start = pageIndex * pageSize;
+    const end = start + pageSize;
+    const out = [];
+    // Expanded banners currently open, outermost first. `printed` marks the ones
+    // this page has already emitted, so a group spanning rows 3-8 prints its
+    // banner once, not once per row.
+    const openGroups = [];
+    let unitsSeen = 0;
+    for (const row of rows) {
+        const depth = getDepth(row);
+        // A row at depth <= an open banner's depth closes it.
+        while (openGroups.length > 0 && getDepth(openGroups[openGroups.length - 1].row) >= depth) {
+            openGroups.pop();
+        }
+        if (isGroup(row) && expanded(row)) {
+            // A header for rows that follow: reprinted per page, costs no budget.
+            openGroups.push({ row, printed: false });
+            continue;
+        }
+        // Everything else is a visible unit: a data row, or a collapsed group
+        // standing in for its whole subtree.
+        const index = unitsSeen;
+        unitsSeen += 1;
+        if (index < start || index >= end)
+            continue;
+        for (const g of openGroups) {
+            if (g.printed)
+                continue;
+            g.printed = true;
+            out.push(g.row);
+        }
+        out.push(row);
+    }
+    return { rows: out, dataRowCount: unitsSeen };
+}
 /**
  * Decide the synthetic auto-group columns for a grouping display mode:
  * - `groupRows`: none (the banner path handles display) - `{ [], {} }`.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { formatNumericWithConfig, resolveDatePattern } from './cell-formatting';
 export { coerceExportDate, formatValueForExport, projectGridRows, toExcelNumFmt, valueForExcel, serializeDelimited, serializeJson, serializeMarkdown, serializeHtml, serializeXml, downloadTextFile, downloadBlobFile, copyTextToClipboard, type GridExportOptions, type GridExportScope, type GridExportColumn, type GridClipboardOptions, type GridClipboardFormat, type SerializeProgress, type SerializeOptions, type CsvOptions, } from './export-format';
-export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, type Cell, type CellContext, type CellSpanParams, type ValueParserParams, type EditorContext, type CellData, type ActiveCellState, type CellFormatConfig, type CellFormatter, type Column, type ColumnDef, type ColumnDefTemplate, type GroupAggregator, type Header, type HeaderContext, type HeaderGroup, type Row, type RowData, type SortingState, type SvGrid as SvGridInstance, type SvGridOptions, type TableFeatures, type Updater, } from './core';
+export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, createTreeRowModel, flattenTreeData, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, type Cell, type CellContext, type CellSpanParams, type ValueParserParams, type EditorContext, type CellData, type ActiveCellState, type CellFormatConfig, type CellFormatter, type Column, type ColumnDef, type ColumnDefTemplate, type GridColumnDef, type GridColumns, type GroupAggregator, type Header, type HeaderContext, type HeaderGroup, type Row, type RowData, type SortingState, type SvGrid as SvGridInstance, type SvGridOptions, type TableFeatures, type TreeRowModelOptions, type FlattenTreeOptions, type Updater, } from './core';
 export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte';
 export { createGridState, createSvGridState } from './createGridState.svelte';
 export { subscribeGrid, subscribeSvGrid } from './subscribe';
@@ -206,7 +206,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, type SavedView, type ViewStorage, type NamedViews, type AutoSavedViewOptions, } from './named-views';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, type ConditionalFormat, type ConditionalFormatSpec, type ColorScaleFormat, type ColorScaleStop, type ScaleBounds, type DataBarFormat, type IconSetFormat, type RuleFormat, type ResolvedCellFormat, } from './conditional-formatting';
 export { defaultGridMessages, resolveGridMessages, type GridMessages, } from './grid-messages';
-export { insertGroupFooters, buildAutoGroupColumns, type GroupDisplayType, type GroupFooterOptions, type AutoGroupColumnSpec, type AutoGroupResult, } from './group-display';
+export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, type GroupDisplayType, type GroupFooterOptions, type AutoGroupColumnSpec, type AutoGroupResult, type GroupPaginationOptions, type GroupPaginationResult, } from './group-display';
 export { getKeyboardIntent, getNextActiveCell, type GridKeyboardIntent } from './keyboard';
 export { createVirtualizer } from './virtualization/virtualizer';
 export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte';

package/dist/index.js

@@ -1,6 +1,6 @@
 export { formatNumericWithConfig, resolveDatePattern } from './cell-formatting';
 export { coerceExportDate, formatValueForExport, projectGridRows, toExcelNumFmt, valueForExcel, serializeDelimited, serializeJson, serializeMarkdown, serializeHtml, serializeXml, downloadTextFile, downloadBlobFile, copyTextToClipboard, } from './export-format';
-export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, } from './core';
+export { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, createTreeRowModel, flattenTreeData, applyGroupAggregate, filterFns, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, } from './core';
 export { createGrid, createSvGrid } from './createGrid.svelte';
 export { createGridState, createSvGridState } from './createGridState.svelte';
 export { subscribeGrid, subscribeSvGrid } from './subscribe';
@@ -243,7 +243,7 @@ export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte';
 export { createNamedViews, memoryViews, localStorageViews, attachAutoSavedView, } from './named-views';
 export { resolveCellFormat, computeColumnStat, lerpColor, rgba, contrastText, formatNeedsStats, formatsNeedingStats, } from './conditional-formatting';
 export { defaultGridMessages, resolveGridMessages, } from './grid-messages';
-export { insertGroupFooters, buildAutoGroupColumns, } from './group-display';
+export { insertGroupFooters, buildAutoGroupColumns, paginateGroupedRows, } from './group-display';
 export { getKeyboardIntent, getNextActiveCell } from './keyboard';
 export { createVirtualizer } from './virtualization/virtualizer';
 export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte';

package/dist/keyboard-handlers.js

@@ -107,6 +107,22 @@ export function createKeyboard(ctx) {
         // expands a collapsed group row, ArrowLeft collapses an expanded one,
         // instead of moving the active cell (treegrid-style). Leaves fall through
         // to normal navigation.
+        // Client tree data gets the same ArrowRight/ArrowLeft contract, driven off
+        // the row model rather than consumer callbacks.
+        if (ctx.props.treeData && (intent === "moveRight" || intent === "moveLeft")) {
+            const row = ctx.allRows[current.rowIndex];
+            if (row?.getCanExpand?.()) {
+                const expanded = row.getIsExpanded?.() ?? false;
+                if (intent === "moveRight" && !expanded) {
+                    row.toggleExpanded?.();
+                    return;
+                }
+                if (intent === "moveLeft" && expanded) {
+                    row.toggleExpanded?.();
+                    return;
+                }
+            }
+        }
         const serverGroup = ctx.props.serverGroup;
         if (serverGroup && (intent === "moveRight" || intent === "moveLeft")) {
             const data = ctx.allRows[current.rowIndex]?.original;

package/dist/recurrence.js

@@ -149,8 +149,9 @@ const MO = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'
 const ORD = { 1: 'first', 2: 'second', 3: 'third', 4: 'fourth', 5: 'fifth', [-1]: 'last' };
 // Where in the month a monthly / yearly rule lands, as a phrase.
 function whereInMonth(r, wd, ord) {
-    if (r.weekOfMonth != null && r.weekdays && r.weekdays.length) {
-        return `the ${ord[r.weekOfMonth] ?? r.weekOfMonth} ${wd[r.weekdays[0]]}`;
+    const firstWeekday = r.weekdays?.[0];
+    if (r.weekOfMonth != null && firstWeekday != null) {
+        return `the ${ord[r.weekOfMonth] ?? r.weekOfMonth} ${wd[firstWeekday]}`;
     }
     if (r.day === -1)
         return 'the last day';

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

@@ -1,8 +1,8 @@
 import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
-import type { Props } from './SvGrid.types';
+import type { FilterOperator, Props } from './SvGrid.types';
 import type { GridExportOptions, GridClipboardOptions } from './export-format';
 import type { ChartSpec, ChartType } from './chart';
-export type SvGridFilterOperator = 'contains' | 'equals' | 'startsWith' | 'greaterThan' | 'lessThan' | 'between' | 'isBlank';
+export type SvGridFilterOperator = FilterOperator;
 /**
  * A serializable snapshot of everything that makes up the current "view":
  * sort, grouping, pagination, column layout (width / pinning / order /
@@ -211,6 +211,12 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
      */
     setFacetFilter(columnId: string, values: ReadonlyArray<string> | null): void;
     clearFilter(columnId: string): void;
+    /**
+     * Drop cached async `editorOptions` so the next render refetches them.
+     * Omit `columnId` to clear every column. Only affects columns whose
+     * `editorOptions` returns a Promise - static lists are never refetched.
+     */
+    refreshEditorOptions(columnId?: string): void;
     /**
      * Clear every active column filter (menu, filter-row, set-list, and global).
      * Resets the grid to "no filtering" in a single call.

package/dist/themes/index.d.ts

@@ -37,6 +37,16 @@ export type ThemePalette = {
     pinnedBorder?: string;
     /** Drop shadow cast by a pinned column into the scroll area. */
     pinnedShadow?: string;
+    /** Errors, destructive actions, invalid cells. */
+    danger?: string;
+    /** Confirmations, positive deltas. */
+    success?: string;
+    /** Cautions, pending states, the rating star. */
+    warning?: string;
+    /** Neutral informational callouts. */
+    info?: string;
+    /** Focus outline color. Defaults to the preset's accent. */
+    focusRing?: string;
 };
 export type ThemePreset = {
     /** Stable id, e.g. used as a CSS file name (`themes/<id>.css`). */

package/dist/themes/index.js

@@ -8,6 +8,12 @@
  * browser. `@svgrid/enterprise`'s Studio layer builds its `ProjectTheme`-aware
  * wrapper on top of this module instead of keeping its own copy.
  */
+/** Status-color defaults per mode - dark mode lifts them so they stay legible
+ *  on a dark ground. Values match the components' own inline fallbacks. */
+const STATUS_DEFAULTS = {
+    light: { danger: '#dc2626', success: '#16a34a', warning: '#d97706', info: '#0891b2' },
+    dark: { danger: '#f87171', success: '#4ade80', warning: '#fbbf24', info: '#22d3ee' },
+};
 /** The built-in theme presets, in gallery order (SvGrid's own theme first). */
 export const themePresets = [
     // Ember is SvGrid's signature look - the palette svgrid.com itself runs on, so
@@ -108,6 +114,7 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
     const resolved = preset ?? defaultThemePreset;
     const p = resolved[mode];
     const accent = accentOverride || p.accent;
+    const status = STATUS_DEFAULTS[mode];
     return {
         '--sg-bg': p.bg,
         '--sg-fg': p.fg,
@@ -146,6 +153,25 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
         '--sg-on-accent': onAccent(accent),
         '--sg-radius': `${resolved.radius}px`,
         '--sg-font': resolved.font,
+        // Semantic status colors. Same reasoning as the scrollbar tokens below:
+        // the UI kit consumes these (destructive buttons, alerts, validation,
+        // badges, the rating star), so a preset that doesn't define them leaves
+        // every status color at a hard-coded red/green/amber that ignores the
+        // theme and, on dark presets, sits at the wrong lightness.
+        '--sg-danger': p.danger ?? status.danger,
+        '--sg-success': p.success ?? status.success,
+        '--sg-warning': p.warning ?? status.warning,
+        '--sg-info': p.info ?? status.info,
+        // A COLOR, not a shadow - consumed as `outline: 2px solid var(...)`.
+        '--sg-focus-ring': p.focusRing ?? accent,
+        // Derived surfaces + shape the kit reads. Deriving from the palette keeps
+        // them following the preset and the light/dark mode.
+        '--sg-muted-bg': p.rowHover,
+        '--sg-skeleton-bg': p.rowHover,
+        '--sg-radius-lg': `${resolved.radius * 2}px`,
+        '--sg-rating-on': p.warning ?? status.warning,
+        '--sg-rating-empty': p.border,
+        '--sg-invalid-fg': p.danger ?? status.danger,
         // The grid's custom scrollbar is a shadow-DOM web component that reads its
         // OWN --sg-scrollbar-* tokens (with fixed light-mode fallbacks). Without
         // these it ignores the theme entirely - a light scrollbar left on a dark

package/package.json

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

package/src/SvAccordion.test.ts

@@ -32,11 +32,11 @@ describe('SvAccordion', () => {
     try {
       const headers = [...target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')]
       expect(headers).toHaveLength(3)
-      expect(headers[0].getAttribute('aria-expanded')).toBe('true')
-      expect(headers[1].getAttribute('aria-expanded')).toBe('false')
+      expect(headers[0]!.getAttribute('aria-expanded')).toBe('true')
+      expect(headers[1]!.getAttribute('aria-expanded')).toBe('false')
       const region = target.querySelector<HTMLElement>('.sv-acc__panel')!
       expect(region.getAttribute('role')).toBe('region')
-      expect(region.getAttribute('aria-labelledby')).toBe(headers[0].id)
+      expect(region.getAttribute('aria-labelledby')).toBe(headers[0]!.id)
       // Only one panel region is rendered (the open one).
       expect(target.querySelectorAll('.sv-acc__panel')).toHaveLength(1)
     } finally { destroy() }
@@ -47,7 +47,7 @@ describe('SvAccordion', () => {
     const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'single', onChange: (ids: string[]) => (got = ids) })
     try {
       const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
-      headers[1].click()
+      headers[1]!.click()
       flushSync()
       expect(got).toEqual(['b'])
     } finally { destroy() }
@@ -58,7 +58,7 @@ describe('SvAccordion', () => {
     const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'multiple', onChange: (ids: string[]) => (got = ids) })
     try {
       const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
-      headers[2].click()
+      headers[2]!.click()
       flushSync()
       expect(got).toEqual(['a', 'c'])
     } finally { destroy() }

package/src/SvAvatar.svelte

@@ -71,5 +71,5 @@
   .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
   .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
   .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
-  .sv-avatar__status.is-away { background: var(--sg-warning, #f59e0b); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #d97706); }
 </style>