@svgrid/grid 1.2.3 → 1.2.4

package/dist/SvGrid.controller.svelte.js

@@ -109,6 +109,36 @@ function getMaxDomScrollHeight() {
     }
     return detectedMaxDomHeight;
 }
+/**
+ * Observe an element's size, but run the callback on the next animation frame
+ * and coalesce bursts into a single call. This is what keeps the benign but
+ * noisy "ResizeObserver loop completed with undelivered notifications" warning
+ * out of the console: the browser emits it when an observer callback
+ * synchronously mutates layout in a way that would require another notification
+ * within the same delivery cycle - which our callbacks do (they bump reactive
+ * versions / remeasure, driving a re-layout of the observed element). Deferring
+ * the work to the next frame lets the current delivery finish cleanly, so the
+ * loop never spans a single cycle. This is especially visible when swapping the
+ * whole grid (e.g. switching demos), which remounts everything at once.
+ * Returns a disconnect function suitable for an $effect cleanup.
+ */
+function observeSizeRaf(el, cb) {
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            cb();
+        });
+    });
+    observer.observe(el);
+    return () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        observer.disconnect();
+    };
+}
 export function createSvGridController(props) {
     // Resolved capability gates. Capabilities are OFF by default - a bare
     // grid is a plain read-only table, and each power feature is opted into
@@ -770,6 +800,17 @@ export function createSvGridController(props) {
         const start = pageIndex * pageSize;
         return rows.slice(start, start + pageSize);
     });
+    // When a filter reduces the dataset, the stored pageIndex can point beyond
+    // the last valid page. Reset to page 0 so the grid never shows a blank body.
+    $effect(() => {
+        if (!paginationEnabled)
+            return;
+        const { pageIndex, pageSize } = paginationState;
+        const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
+        if (pageCount > 0 && pageIndex >= pageCount) {
+            grid.setPagination({ pageIndex: 0, pageSize });
+        }
+    });
     const rowSelectionState = $derived.by(() => {
         gridStateVersion;
         return grid.getState().rowSelection ?? {};
@@ -1045,15 +1086,46 @@ export function createSvGridController(props) {
         return columnVirtualizer.getTotalSize();
     });
     const renderedColumnItems = $derived.by(() => {
-        if (columnVirtualizationEnabled)
-            return virtualColumns;
-        let start = 0;
-        return allColumns.map((column, index) => {
-            const size = getColumnWidth(column.id);
-            const item = { index, key: index, size, start, end: start + size };
-            start += size;
-            return item;
-        });
+        if (!columnVirtualizationEnabled) {
+            let start = 0;
+            return allColumns.map((column, index) => {
+                const size = getColumnWidth(column.id);
+                const item = { index, key: index, size, start, end: start + size };
+                start += size;
+                return item;
+            });
+        }
+        // Pinned columns are position:sticky, so they only stay pinned while their
+        // cell is in the DOM. Plain column virtualization drops them once they leave
+        // the scroll window, and the pinned column vanishes. Because allColumns is
+        // ordered [pinnedLeft, unpinned, pinnedRight], we keep the rendered window
+        // CONTIGUOUS from the pinned-left prefix (index 0) through the pinned-right
+        // suffix (last index) whenever those exist. The pinned cells are then always
+        // rendered - the existing single-spacer layout positions everything, so no
+        // markup changes are needed. (Cost: with a pinned side, the columns between
+        // that edge and the window are also rendered; negligible for typical grids,
+        // and correctness beats shaving a few off-screen cells.)
+        const window = virtualColumns;
+        const hasLeft = columnPinning.left.length > 0;
+        const hasRight = columnPinning.right.length > 0;
+        if ((!hasLeft && !hasRight) || window.length === 0)
+            return window;
+        const firstIdx = window[0].index;
+        const lastIdx = window[window.length - 1].index;
+        const startIndex = hasLeft ? 0 : firstIdx;
+        const endIndex = hasRight ? allColumns.length - 1 : lastIdx;
+        if (startIndex === firstIdx && endIndex === lastIdx)
+            return window;
+        const items = [];
+        let offset = 0;
+        for (let i = 0; i < startIndex; i += 1)
+            offset += getColumnWidth(allColumns[i].id);
+        for (let i = startIndex; i <= endIndex; i += 1) {
+            const size = getColumnWidth(allColumns[i].id);
+            items.push({ index: i, key: i, size, start: offset, end: offset + size });
+            offset += size;
+        }
+        return items;
     });
     const renderedColumns = $derived.by(() => renderedColumnItems
         .map((item) => ({ item, column: allColumns[item.index] }))
@@ -1137,11 +1209,9 @@ export function createSvGridController(props) {
         if (!theadEl)
             return;
         headerHeight = theadEl.offsetHeight;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(theadEl, () => {
             headerHeight = theadEl?.offsetHeight ?? 0;
         });
-        observer.observe(theadEl);
-        return () => observer.disconnect();
     });
     // Bump scrollVersion when the table's layout size changes so scrollbar
     // visibility (and the thumb math that depends on scroll metrics) updates
@@ -1149,11 +1219,9 @@ export function createSvGridController(props) {
     $effect(() => {
         if (!gridRootEl)
             return;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(gridRootEl, () => {
             scrollVersion += 1;
         });
-        observer.observe(gridRootEl);
-        return () => observer.disconnect();
     });
     $effect(() => {
         if (!allRows.length || !allColumns.length)
@@ -1270,13 +1338,11 @@ export function createSvGridController(props) {
     $effect(() => {
         if (!scrollContainer)
             return;
-        const observer = new ResizeObserver(() => {
+        return observeSizeRaf(scrollContainer, () => {
             viewportVersion += 1;
             if (!hasMeasured)
                 hasMeasured = true;
         });
-        observer.observe(scrollContainer);
-        return () => observer.disconnect();
     });
     $effect(() => {
         // Reading columnWidths here registers it as a reactive dependency so

package/dist/a11y.d.ts

@@ -29,7 +29,7 @@ export declare function getGridRowA11yProps(rowIndex?: number): {
     readonly role: "row";
 };
 export declare function getGridCellA11yProps(input?: GridCellA11yInput): {
-    readonly 'aria-selected'?: boolean | undefined;
+    readonly 'aria-selected': boolean;
     readonly 'aria-rowindex'?: number | undefined;
     readonly 'aria-colindex'?: number | undefined;
     readonly id?: string | undefined;

package/dist/a11y.js

@@ -29,7 +29,7 @@ export function getGridCellA11yProps(input = {}) {
         ...(id ? { id } : {}),
         ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
         ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-        ...(selected ? { 'aria-selected': true } : {}),
+        'aria-selected': selected,
     };
 }
 export function getGridCellDomId(baseId, rowIndex, colIndex) {