@svgrid/grid 3.0.4 → 3.0.6

package/dist/a11y/dismissable.js

@@ -60,6 +60,16 @@ export function dismissableDepth() {
  * window listener gets wrong: inner scroll containers don't bubble, so the
  * capture listener sees them and dismisses the panel the user is scrolling.
  *
+ * The listener arms one animation frame after it is asked for, not at once.
+ * Scroll events are queued and dispatched in the next rendering step, so a
+ * scroll that FINISHED before the click that opened the panel - the browser
+ * pulling a half-hidden funnel button into view as it focuses it, a test
+ * driver scrolling the header into place - still lands after the panel has
+ * mounted and wired this listener, and used to close it on the spot. The
+ * panel measured its anchor after that scroll, so the event carries nothing
+ * it needs to react to. Rendering runs the scroll steps before the animation
+ * frame callbacks, which is why one frame is exactly the right delay.
+ *
  * Returns the unsubscribe function.
  */
 export function onScrollOutside(element, onOutside) {
@@ -70,6 +80,18 @@ export function onScrollOutside(element, onOutside) {
             return;
         onOutside();
     };
-    window.addEventListener('scroll', handler, true);
-    return () => window.removeEventListener('scroll', handler, true);
+    let armed = false;
+    let frame = requestAnimationFrame(() => {
+        frame = null;
+        armed = true;
+        window.addEventListener('scroll', handler, true);
+    });
+    return () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
+        if (armed)
+            window.removeEventListener('scroll', handler, true);
+        armed = false;
+    };
 }

package/dist/build-api.js

@@ -2,8 +2,30 @@ import "./sv-grid-scrollbar.js";
 import { untrack } from "svelte";
 import { isGroupRow, getColumnAlign, columnDefMatchesId, } from "./cell-values.js";
 import { hasAdvancedFilterEngine } from "./advanced-filter.svelte.js";
-import { undoHistory, redoHistory } from "./history.js";
+import { undoHistory, redoHistory, peekUndoHistory, peekRedoHistory } from "./history.js";
 import { buildCommandContext } from "./command-context.js";
+/**
+ * Row id -> index, per data array, for `applyTransaction`.
+ *
+ * An update batch used to walk every row calling `getRowId` to find the ones
+ * it replaced - 100k calls per tick on a 100k-row feed, whatever the batch
+ * size. The map is built once per array and, for an update-only transaction,
+ * carried to the array it produces: same ids at the same indices. An add or
+ * remove changes indices, so those transactions leave the next array to
+ * build its own map on first use. Keyed weakly so a replaced array takes its
+ * map with it.
+ */
+const rowIndexByData = new WeakMap();
+function rowIndexOf(data, getId) {
+    let byId = rowIndexByData.get(data);
+    if (!byId) {
+        byId = new Map();
+        for (let i = 0; i < data.length; i++)
+            byId.set(getId(data[i], i), i);
+        rowIndexByData.set(data, byId);
+    }
+    return byId;
+}
 /**
  * The selection as the user made it: committed ranges first, the active one
  * last, each keeping its anchor as `from` and its focus as `to`. The active
@@ -69,6 +91,10 @@ export function createGridApi(ctx) {
             return projectGridRows(exportScopeRows(scope), exportColumns(), { columns, rawValues });
         };
         return {
+            getElement() {
+                const el = ctx.scrollContainer;
+                return el?.closest(".sv-grid-root") ?? null;
+            },
             getCellValue(rowIndex, columnId) {
                 const row = ctx.internalData[rowIndex];
                 const column = findColumn(columnId);
@@ -208,39 +234,41 @@ export function createGridApi(ctx) {
             },
             applyTransaction(tx) {
                 const getId = ctx.props.getRowId;
-                let next = ctx.internalData.slice();
+                const current = ctx.internalData;
+                let next = current.slice();
                 let added = 0;
                 let updated = 0;
                 let removed = 0;
+                // Everything resolves against the indices of `current`: the id ->
+                // index map answers updates and id removals with one lookup each, a
+                // reference removal with one `indexOf`, and no pass over the rows
+                // that did not change. A row both updated and removed in the same
+                // transaction ends up removed, as it did when removes ran first.
+                const removeIdx = new Set();
                 if (tx.remove?.length) {
-                    const removeIds = new Set();
-                    const removeRefs = new Set();
+                    const byId = getId ? rowIndexOf(current, getId) : null;
                     for (const r of tx.remove) {
-                        if (typeof r === "string")
-                            removeIds.add(r);
-                        else
-                            removeRefs.add(r);
+                        const idx = typeof r === "string" ? byId?.get(r) : current.indexOf(r);
+                        if (idx !== undefined && idx >= 0)
+                            removeIdx.add(idx);
                     }
-                    next = next.filter((row, i) => {
-                        const hit = removeRefs.has(row) ||
-                            (getId ? removeIds.has(getId(row, i)) : false);
-                        if (hit)
-                            removed += 1;
-                        return !hit;
-                    });
                 }
                 if (tx.update?.length && getId) {
-                    const byId = new Map();
-                    for (const u of tx.update)
-                        byId.set(getId(u, 0), u);
-                    next = next.map((row, i) => {
-                        const u = byId.get(getId(row, i));
-                        if (u) {
-                            updated += 1;
-                            return u;
-                        }
-                        return row;
-                    });
+                    const byId = rowIndexOf(current, getId);
+                    for (const u of tx.update) {
+                        const idx = byId.get(getId(u, 0));
+                        if (idx === undefined)
+                            continue;
+                        next[idx] = u;
+                        updated += 1;
+                    }
+                    // Same ids at the same indices: the next array can reuse the map.
+                    if (!removeIdx.size && !tx.add?.length)
+                        rowIndexByData.set(next, byId);
+                }
+                if (removeIdx.size) {
+                    next = next.filter((_, i) => !removeIdx.has(i));
+                    removed = removeIdx.size;
                 }
                 if (tx.add?.length) {
                     next.push(...tx.add);
@@ -472,6 +500,26 @@ export function createGridApi(ctx) {
             getData() {
                 return ctx.internalData;
             },
+            getRowId(row) {
+                // The stable id the grid keys a row by: what `getRowId` computed,
+                // or the row's position when no `getRowId` prop is set. A number is
+                // a DISPLAY index into the rendered rows, the space getActiveCell,
+                // scrollToRow and the cell methods work in; a row object is looked
+                // up wherever it sits. Null when the index or the object is unknown,
+                // so a caller can tell "no such row" from a real id.
+                if (typeof row === "number") {
+                    const found = ctx.allRows[row];
+                    return found && !isGroupRow(found) ? found.id : null;
+                }
+                const inRows = ctx.allRows.find((r) => r.original === row);
+                if (inRows)
+                    return inRows.id;
+                const getId = ctx.props.getRowId;
+                const index = ctx.internalData.indexOf(row);
+                if (index < 0)
+                    return null;
+                return getId ? getId(row, index) : String(index);
+            },
             getColumns() {
                 // Snapshot every column with its human-readable label and
                 // visibility flag. Used by external code (exporters, column
@@ -580,11 +628,10 @@ export function createGridApi(ctx) {
                 ctx.autosizeColumn(columnId);
             },
             getRowHeight(rowIndex) {
-                const own = ctx.rowResizeHeightPx(rowIndex);
-                if (own != null)
-                    return own;
-                const declared = ctx.props.rowHeight;
-                return typeof declared === "function" ? declared(rowIndex) : (declared ?? 30);
+                // The height the grid draws the row at, whatever decided it: a drag,
+                // a measurement under auto height, a detail row's own height, the
+                // declared rowHeight or the default.
+                return ctx.rowSizePxOf(rowIndex);
             },
             setRowHeight(rowIndex, height) {
                 ctx.setRowResizeHeight(rowIndex, height);
@@ -657,6 +704,9 @@ export function createGridApi(ctx) {
             canUndo() { void ctx.historyVersion; return ctx.historyPtr >= 0; },
             canRedo() { void ctx.historyVersion; return ctx.historyPtr < ctx.history.length - 1; },
             clearHistory() { ctx.history = []; ctx.historyPtr = -1; ctx.historyVersion += 1; },
+            setHistoryTag(tag) { ctx.historyTag = tag; },
+            peekUndo() { void ctx.historyVersion; return peekUndoHistory(ctx); },
+            peekRedo() { void ctx.historyVersion; return peekRedoHistory(ctx); },
             // ---- Find
             openFind() { ctx.findOpen = true; },
             closeFind() { ctx.findOpen = false; ctx.findQuery = ''; },
@@ -691,11 +741,10 @@ export function createGridApi(ctx) {
                 });
             },
             selectAllRows() {
-                const next = {};
-                for (const row of ctx.allRows)
-                    if (!isGroupRow(row))
-                        next[row.id] = true;
-                ctx.grid.setRowSelection(() => next);
+                // One implementation of "select everything", shared with the header
+                // checkbox, so it knows about an external selection model and about
+                // rows whose data has not arrived.
+                ctx.setSelectAllRows(true);
             },
             toggleRowSelected(id) {
                 ctx.toggleRowSelectionById(id);
@@ -703,7 +752,13 @@ export function createGridApi(ctx) {
             // ---- Pagination
             getPageInfo() {
                 const { pageIndex, pageSize } = ctx.paginationState;
-                const total = ctx.allRowsBeforePagination.length;
+                // Under external pagination the grid holds ONE page, so counting the
+                // rows in hand would report a 95-row table as a 20-row one. The
+                // consumer tells us the real total through rowCount, which is what
+                // the footer has always shown.
+                const total = ctx.externalPaginationEnabled
+                    ? (ctx.props.rowCount ?? ctx.allRowsBeforePagination.length)
+                    : ctx.allRowsBeforePagination.length;
                 const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
                 return { pageIndex, pageSize, pageCount, total };
             },