@svgrid/grid 2.6.3 → 2.6.4

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

@@ -1,4 +1,4 @@
-import { type CellEditorOption, type Column, type ColumnDef, type Row, type RowData, type TableFeatures, type ChartType, type ChartSpec, type ChartValueFormat } from "./index";
+import { type GridPredicateExpr, type CellEditorOption, type Column, type ColumnDef, type Row, type RowData, type TableFeatures, type ChartType, type ChartSpec, type ChartValueFormat } from "./index";
 import "./sv-grid-scrollbar";
 import { type ColumnStat } from "./conditional-formatting";
 import type { Props, SelectionRange, CellEditState, FilterOperator, MenuPosition, ContextMenuTarget, ChartingConfig } from "./SvGrid.types";
@@ -31,6 +31,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         valueTo2?: string;
         join?: "AND" | "OR";
     }>;
+    advancedFilter: GridPredicateExpr | null;
     verticalScrollbarEl: HTMLElement | null;
     horizontalScrollbarEl: HTMLElement | null;
     scrollVersion: number;

package/dist/SvGrid.controller.svelte.js

@@ -1,4 +1,4 @@
-import { applyGroupAggregate, compileExcelFilter, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createTreeRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
+import { applyGroupAggregate, applyRowPredicate, compileExcelFilter, getAdvancedFilterEngine, normalizeForFilter, createColumnVirtualizer, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createTreeRowModel, createSvelteVirtualizer, createSortedRowModel, createSvGrid, getGridCellDomId, sortFns, } from "./index";
 import { createRowScrollScaling, resolveMaxDomHeight, } from "./virtualization/scroll-scaling";
 import "./sv-grid-scrollbar";
 import { computeColumnStat, formatsNeedingStats, formatNeedsStats, } from "./conditional-formatting";
@@ -21,6 +21,8 @@ import { buildAutoGroupColumns, insertGroupFooters, paginateGroupedRows } from "
 import { createGridApi, } from "./build-api";
 import { createClipboard, } from "./clipboard";
 import { resolveGridMessages } from "./grid-messages";
+import { announce } from "./a11y/live-region";
+import { filterAnnouncement, selectionAnnouncement, } from "./a11y/grid-announcements";
 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";
@@ -190,6 +192,11 @@ export function createSvGridController(rawProps, domIdBase) {
     let globalFilter = $state("");
     let scrollContainer = $state(null);
     let gridRootEl = $state(null);
+    // Advanced filter (Pro). Seeded once from `initialAdvancedFilter` and driven
+    // thereafter through the API - deliberately NOT a live prop, so it cannot
+    // repeat the `externalFilter` trap of looking controlled while being read
+    // exactly once.
+    let advancedFilter = $state(props.initialAdvancedFilter ?? null);
     let filterRowValues = $state({});
     let filterMenuValues = $state({});
     let verticalScrollbarEl = $state(null);
@@ -508,13 +515,15 @@ export function createSvGridController(rawProps, domIdBase) {
         },
         state: {
             columnFilters: [],
-            grouping: [],
+            // svelte-ignore state_referenced_locally
+            grouping: treeDataConfig ? [] : [...(props.groupBy ?? [])],
             // svelte-ignore state_referenced_locally
             sorting: props.initialSorting ?? [],
             // svelte-ignore state_referenced_locally
             pagination: { pageIndex: 0, pageSize: props.pageSize ?? 10 },
             rowSelection: {},
-            expanded: {},
+            // svelte-ignore state_referenced_locally
+            expanded: { ...(props.expanded ?? {}) },
             activeCell: { rowIndex: 0, colIndex: 0, cellId: null },
         },
     });
@@ -571,6 +580,44 @@ export function createSvGridController(rawProps, domIdBase) {
         lastSeededOrder = incoming;
         userColumnOrder = props.columnOrder ? [...props.columnOrder] : [];
     });
+    // `groupBy` prop -> engine grouping state. Same shape as the `columnOrder`
+    // re-seed above: we only write when the PROP itself changes, so a group-by
+    // set from the column menu or `api.setGroupBy()` is not clobbered on the next
+    // unrelated re-render.
+    let lastSeededGroupBy = (props.groupBy ?? []).join("|");
+    $effect(() => {
+        if (treeDataConfig)
+            return;
+        const incoming = (props.groupBy ?? []).join("|");
+        if (incoming === lastSeededGroupBy)
+            return;
+        lastSeededGroupBy = incoming;
+        grid.setGrouping(() => [...(props.groupBy ?? [])]);
+    });
+    // `expanded` prop -> engine expansion state, and the store -> the
+    // `onExpandedChange` callback. `lastSeededExpanded` is written from BOTH
+    // directions so a controlled parent that echoes the callback value straight
+    // back into the prop does not trigger a redundant re-seed (and so no
+    // prop -> state -> callback -> prop loop can form).
+    let lastSeededExpanded = JSON.stringify(props.expanded ?? {});
+    $effect(() => {
+        const incoming = JSON.stringify(props.expanded ?? {});
+        if (incoming === lastSeededExpanded)
+            return;
+        lastSeededExpanded = incoming;
+        grid.setExpanded(() => ({ ...(props.expanded ?? {}) }));
+    });
+    $effect(() => {
+        let previous = grid.getState().expanded ?? {};
+        return grid.store.subscribe(() => {
+            const next = grid.getState().expanded ?? {};
+            if (next === previous)
+                return;
+            previous = next;
+            lastSeededExpanded = JSON.stringify(next);
+            props.onExpandedChange?.({ ...next });
+        });
+    });
     // Declared here rather than beside the other pagination/state derivations:
     // the auto-group column pipeline below reads it, and a `const` used above its
     // declaration is a type error even though `$derived` is lazy enough at runtime.
@@ -1039,6 +1086,33 @@ export function createSvGridController(rawProps, domIdBase) {
                 return allowed.has(String(raw ?? ""));
             }));
         }
+        // --- Advanced filter (Pro) ---------------------------------------------
+        // Runs LAST for two reasons: it evaluates over the smallest row set, and
+        // its aggregates (`SUM(amount) > 1000`) fold over what the user is
+        // currently looking at rather than the raw dataset. Composed with AND
+        // against the three stages above.
+        //
+        // Fails OPEN throughout. No engine registered (enterprise absent), an
+        // expression the engine cannot compile, or a throw from inside it all
+        // leave `rows` untouched. A half-applied filter that quietly shows the
+        // wrong rows is worse than one that visibly did nothing.
+        if (advancedFilter) {
+            const engine = getAdvancedFilterEngine();
+            if (engine) {
+                try {
+                    const predicate = engine(advancedFilter, {
+                        getValue: getRowColumnValue,
+                        locale: props.filterLocale ?? props.localization?.locale,
+                        rows,
+                    });
+                    if (predicate)
+                        rows = applyRowPredicate(rows, predicate, isGroupRow);
+                }
+                catch {
+                    // Malformed expression: leave the rows alone.
+                }
+            }
+        }
         return rows;
     });
     /**
@@ -1334,6 +1408,72 @@ export function createSvGridController(rawProps, domIdBase) {
     // Resolved chrome messages (English defaults merged with `localeText`). One
     // map every consumer (SvGrid.svelte, GridFooter, menus, filter labels) reads.
     const gridMessages = $derived(resolveGridMessages(props.localization?.text));
+    // ---- Screen-reader status announcements (WCAG 4.1.3) ----
+    // Only genuine status messages belong here: information no focus change
+    // reveals. `a11y/grid-announcements.ts` documents what is deliberately left
+    // unsaid, and why saying it would make the grid talk over itself.
+    /** Data rows before any local filtering - the denominator in "12 of 250". */
+    const unfilteredRowTotal = $derived.by(() => {
+        dataStateVersion;
+        void internalData;
+        return grid.getRowModel().rows.length;
+    });
+    /** Whether any of the five filter surfaces is currently narrowing the rows. */
+    const anyFilterActive = $derived(globalFilter !== "" ||
+        advancedFilter !== null ||
+        Object.keys(filterRowValues).length > 0 ||
+        Object.keys(filterMenuValues).length > 0 ||
+        Object.keys(valueFilters).length > 0);
+    let filtersWereActive = false;
+    let filterAnnounceTimer;
+    $effect(() => {
+        // In external-filter mode the server decides what matched, so the local
+        // counts describe only the page in hand. Announcing them would misreport
+        // the result set, which is worse than staying silent.
+        if (externalFilterEnabled)
+            return;
+        const visible = paginatedRowTotal;
+        const total = unfilteredRowTotal;
+        const active = anyFilterActive;
+        const messages = gridMessages;
+        untrack(() => {
+            const message = filterAnnouncement(visible, total, active, filtersWereActive, messages);
+            filtersWereActive = active;
+            if (!message)
+                return;
+            // Typing in the global filter re-runs this per keystroke. A polite region
+            // queues rather than replaces, so without a debounce the user hears the
+            // count for every prefix they typed before the one they care about.
+            clearTimeout(filterAnnounceTimer);
+            filterAnnounceTimer = setTimeout(() => announce(message), 400);
+        });
+        return () => clearTimeout(filterAnnounceTimer);
+    });
+    // Forward advanced-filter changes to the consumer. Same dedupe-and-skip-first
+    // pattern as the selection forwarder: the panel that authors the expression
+    // lives outside the grid, so a change the grid makes itself (the toolbar's
+    // clear, clearAllFilters) is invisible to it otherwise.
+    let lastAdvancedFilterSerialized = JSON.stringify(untrack(() => advancedFilter) ?? null);
+    $effect(() => {
+        const serialized = JSON.stringify(advancedFilter ?? null);
+        if (serialized === untrack(() => lastAdvancedFilterSerialized))
+            return;
+        untrack(() => {
+            lastAdvancedFilterSerialized = serialized;
+            props.onAdvancedFilterChange?.(advancedFilter ?? null);
+        });
+    });
+    let lastAnnouncedSelectionCount = 0;
+    $effect(() => {
+        const count = Object.values(rowSelectionState).filter(Boolean).length;
+        const messages = gridMessages;
+        untrack(() => {
+            const message = selectionAnnouncement(lastAnnouncedSelectionCount, count, messages);
+            lastAnnouncedSelectionCount = count;
+            if (message)
+                announce(message);
+        });
+    });
     // ---- In-grid pivot mode ----
     // The pivot ENGINE ships in @svgrid/enterprise (registered via the pivot-view
     // seam). When `pivot` is set and the engine is present, the grid runs it over
@@ -2638,6 +2778,8 @@ export function createSvGridController(rawProps, domIdBase) {
         set filterRowValues(v) { filterRowValues = v; },
         get filterMenuValues() { return filterMenuValues; },
         set filterMenuValues(v) { filterMenuValues = v; },
+        get advancedFilter() { return advancedFilter; },
+        set advancedFilter(v) { advancedFilter = v; },
         get verticalScrollbarEl() { return verticalScrollbarEl; },
         set verticalScrollbarEl(v) { verticalScrollbarEl = v; },
         get horizontalScrollbarEl() { return horizontalScrollbarEl; },