@svgrid/grid 1.2.3 → 1.2.5

package/dist/menus.js

@@ -221,12 +221,14 @@ export function createMenus(ctx) {
             ...prev,
             pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
         }));
+        ctx.scrollContainer?.scrollTo({ top: 0 });
     }
     function goToPage(pageIndex) {
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max(0, pageIndex),
         }));
+        ctx.scrollContainer?.scrollTo({ top: 0 });
     }
     function setPageSize(pageSize) {
         ctx.grid.setPagination((prev) => {
@@ -281,9 +283,15 @@ export function createMenus(ctx) {
         const rowModel = ctx.allRows[rowIndex];
         const row = rowModel?.original ?? null;
         const rowId = rowModel?.id ?? String(rowIndex);
+        // Reserve ~280px for the menu body. If the click is in the bottom third,
+        // flip the menu above the cursor so it stays fully in the viewport.
+        const menuHeight = 280;
+        const y = event.clientY + menuHeight > window.innerHeight
+            ? Math.max(8, event.clientY - menuHeight)
+            : event.clientY;
         ctx.contextMenuPos = {
             x: clampMenuX(event.clientX, 220),
-            y: Math.max(8, Math.min(event.clientY, window.innerHeight - 16)),
+            y,
         };
         ctx.contextMenuFor = { rowIndex, colIndex, columnId, rowId, row };
     }

package/dist/scroll-sync.js

@@ -61,7 +61,7 @@ export function createScrollSync(ctx) {
         const container = event.currentTarget;
         if (!container)
             return;
-        if (ctx.columnMenuFor || ctx.operatorMenuFor)
+        if (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.contextMenuFor)
             ctx.closeMenus();
         scheduleScrollSync(container.scrollTop, container.scrollLeft);
         // Mirror horizontal scroll to any aligned grids in the same group.

package/dist/sv-grid-scrollbar.js

@@ -148,6 +148,7 @@ class SvGridScrollbarElement extends ScrollbarBase {
         this.valueStart = 0;
         this.holdTimer = null;
         this.resizeObserver = null;
+        this.resizeFrame = 0;
         this.onArrowStartPointerDown = (event) => {
             event.preventDefault();
             this.startHold(-1);
@@ -225,12 +226,26 @@ class SvGridScrollbarElement extends ScrollbarBase {
             btn.addEventListener('pointerleave', this.stopHold);
             btn.addEventListener('pointercancel', this.stopHold);
         }
-        this.resizeObserver = new ResizeObserver(() => this.render());
+        // Coalesce resize notifications into a single next-frame render so the
+        // observer callback never re-lays-out the observed element within the same
+        // delivery cycle (which is what triggers the benign but noisy
+        // "ResizeObserver loop completed with undelivered notifications" warning).
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeFrame)
+                return;
+            this.resizeFrame = requestAnimationFrame(() => {
+                this.resizeFrame = 0;
+                this.render();
+            });
+        });
         this.resizeObserver.observe(this);
         this.render();
     }
     disconnectedCallback() {
         this.stopHold();
+        if (this.resizeFrame)
+            cancelAnimationFrame(this.resizeFrame);
+        this.resizeFrame = 0;
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
         document.removeEventListener('pointermove', this.onPointerMove);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/SvGrid.controller.svelte.ts

@@ -216,6 +216,35 @@ function getMaxDomScrollHeight(): number {
   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: Element, cb: () => void): () => void {
+  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();
+  };
+}
+
 /**
  * SvGrid controller. The component's entire reactive core - every $state,
  * $derived, $effect and handler - lives here so SvGrid.svelte can stay a thin
@@ -1057,6 +1086,17 @@ export function createSvGridController<
     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 ?? {};
@@ -1356,14 +1396,45 @@ export function createSvGridController<
     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: Array<{ index: number; key: number; size: number; start: number; end: number }> = [];
+    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
@@ -1461,11 +1532,9 @@ export function createSvGridController<
   $effect(() => {
     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
@@ -1473,11 +1542,9 @@ export function createSvGridController<
   // after column resize / show-hide / add-remove.
   $effect(() => {
     if (!gridRootEl) return;
-    const observer = new ResizeObserver(() => {
+    return observeSizeRaf(gridRootEl, () => {
       scrollVersion += 1;
     });
-    observer.observe(gridRootEl);
-    return () => observer.disconnect();
   });
 
   $effect(() => {
@@ -1596,12 +1663,10 @@ export function createSvGridController<
 
   $effect(() => {
     if (!scrollContainer) return;
-    const observer = new ResizeObserver(() => {
+    return observeSizeRaf(scrollContainer, () => {
       viewportVersion += 1;
       if (!hasMeasured) hasMeasured = true;
     });
-    observer.observe(scrollContainer);
-    return () => observer.disconnect();
   });
 
   $effect(() => {

package/src/a11y.ts

@@ -50,7 +50,7 @@ export function getGridCellA11yProps(input: GridCellA11yInput = {}) {
     ...(id ? { id } : {}),
     ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
     ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-    ...(selected ? { 'aria-selected': true } : {}),
+    'aria-selected': selected,
   } as const
 }
 

package/src/menus.ts

@@ -373,6 +373,7 @@ export function createMenus<
       ...prev,
       pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
     }));
+    ctx.scrollContainer?.scrollTo({ top: 0 });
   }
 
   function goToPage(pageIndex: number) {
@@ -380,6 +381,7 @@ export function createMenus<
       ...prev,
       pageIndex: Math.max(0, pageIndex),
     }));
+    ctx.scrollContainer?.scrollTo({ top: 0 });
   }
 
   function setPageSize(pageSize: number) {
@@ -447,9 +449,15 @@ export function createMenus<
     const rowModel = ctx.allRows[rowIndex];
     const row = rowModel?.original ?? null;
     const rowId = rowModel?.id ?? String(rowIndex);
+    // Reserve ~280px for the menu body. If the click is in the bottom third,
+    // flip the menu above the cursor so it stays fully in the viewport.
+    const menuHeight = 280;
+    const y = event.clientY + menuHeight > window.innerHeight
+      ? Math.max(8, event.clientY - menuHeight)
+      : event.clientY;
     ctx.contextMenuPos = {
       x: clampMenuX(event.clientX, 220),
-      y: Math.max(8, Math.min(event.clientY, window.innerHeight - 16)),
+      y,
     };
     ctx.contextMenuFor = { rowIndex, colIndex, columnId, rowId, row };
   }

package/src/scroll-sync.ts

@@ -191,7 +191,7 @@ export function createScrollSync<
   function onBodyScroll(event: Event) {
     const container = event.currentTarget as HTMLDivElement | null;
     if (!container) return;
-    if (ctx.columnMenuFor || ctx.operatorMenuFor) ctx.closeMenus();
+    if (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.contextMenuFor) ctx.closeMenus();
     scheduleScrollSync(container.scrollTop, container.scrollLeft);
     // Mirror horizontal scroll to any aligned grids in the same group.
     if (ctx.props.alignedGridGroup != null) ctx.broadcastAlignedScroll(container.scrollLeft);

package/src/sv-grid-scrollbar.ts

@@ -160,6 +160,7 @@ class SvGridScrollbarElement extends ScrollbarBase {
   private valueStart = 0
   private holdTimer: ReturnType<typeof setTimeout> | null = null
   private resizeObserver: ResizeObserver | null = null
+  private resizeFrame = 0
 
   connectedCallback() {
     if (this.shadowRoot) return
@@ -187,7 +188,17 @@ class SvGridScrollbarElement extends ScrollbarBase {
       btn.addEventListener('pointercancel', this.stopHold)
     }
 
-    this.resizeObserver = new ResizeObserver(() => this.render())
+    // Coalesce resize notifications into a single next-frame render so the
+    // observer callback never re-lays-out the observed element within the same
+    // delivery cycle (which is what triggers the benign but noisy
+    // "ResizeObserver loop completed with undelivered notifications" warning).
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.resizeFrame) return
+      this.resizeFrame = requestAnimationFrame(() => {
+        this.resizeFrame = 0
+        this.render()
+      })
+    })
     this.resizeObserver.observe(this)
 
     this.render()
@@ -195,6 +206,8 @@ class SvGridScrollbarElement extends ScrollbarBase {
 
   disconnectedCallback() {
     this.stopHold()
+    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame)
+    this.resizeFrame = 0
     this.resizeObserver?.disconnect()
     this.resizeObserver = null
     document.removeEventListener('pointermove', this.onPointerMove)