@svgrid/grid 3.0.5 → 3.0.6

package/dist/SvGridDropdown.svelte

@@ -45,6 +45,18 @@
      *  loading line instead of "No options", which would read as "nothing to
      *  pick" when the truth is "not here yet". */
     loading?: boolean
+    /**
+     * The trigger's element id, so a form's `<label for>` reaches it and
+     * clicking the label focuses it. Without one a select in a form was a
+     * button with no name.
+     */
+    id?: string
+    /** Accessible name for the trigger when no label points at `id`. */
+    ariaLabel?: string
+    /** Marks the trigger `aria-invalid`, the way an input in the same form is. */
+    invalid?: boolean
+    /** `aria-describedby` for the trigger: the error or help text of the field. */
+    describedBy?: string
   }
 
   let {
@@ -59,6 +71,10 @@
     onCommit,
     onCancel,
     loading = false,
+    id,
+    ariaLabel,
+    invalid = false,
+    describedBy,
   }: Props = $props()
 
   /** Stable per-instance id used to build option ids for
@@ -348,10 +364,14 @@
   <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
   <button
     type="button"
+    {id}
     class="sv-grid-dropdown-trigger"
     class:sv-grid-dropdown-trigger-chips={renderChipsInTrigger && selectedArr.length > 0}
     aria-haspopup="listbox"
     aria-expanded={open}
+    aria-label={ariaLabel}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedBy}
     aria-activedescendant={open ? optionId(highlighted) : undefined}
     bind:this={triggerEl}
     use:focusTrigger

package/dist/SvGridDropdown.svelte.d.ts

@@ -42,6 +42,18 @@ type Props = {
      *  loading line instead of "No options", which would read as "nothing to
      *  pick" when the truth is "not here yet". */
     loading?: boolean;
+    /**
+     * The trigger's element id, so a form's `<label for>` reaches it and
+     * clicking the label focuses it. Without one a select in a form was a
+     * button with no name.
+     */
+    id?: string;
+    /** Accessible name for the trigger when no label points at `id`. */
+    ariaLabel?: string;
+    /** Marks the trigger `aria-invalid`, the way an input in the same form is. */
+    invalid?: boolean;
+    /** `aria-describedby` for the trigger: the error or help text of the field. */
+    describedBy?: string;
 };
 declare const SvGridDropdown: import("svelte").Component<Props, {}, "">;
 type SvGridDropdown = ReturnType<typeof SvGridDropdown>;

package/dist/SvModal.svelte

@@ -16,6 +16,7 @@
   import { portalToBody } from './popover'
   import { nextEditorId } from './editor-contract'
   import { createOverlay } from './createOverlay.svelte'
+  import { getFocusable } from './a11y/focus-trap'
 
   type Props = {
     open?: boolean
@@ -33,6 +34,13 @@
     closeOnEsc?: boolean
     /** Hide the header close (x) button. */
     hideClose?: boolean
+    /**
+     * The element to focus when the dialog opens. Defaults to the first
+     * focusable control in the body or footer - never the header Close (x),
+     * so opening a dialog lands on its content and Enter does not dismiss it.
+     * Pass a getter to target a specific field (e.g. a search input).
+     */
+    initialFocus?: () => HTMLElement | null
     children?: Snippet
     footer?: Snippet
   }
@@ -48,6 +56,7 @@
     closeOnBackdrop = true,
     closeOnEsc = true,
     hideClose = false,
+    initialFocus,
     children,
     footer,
   }: Props = $props()
@@ -69,6 +78,19 @@
     closeOnEsc: () => closeOnEsc,
     closeOnBackdrop: () => closeOnBackdrop,
     onOpen: () => { drag = { x: 0, y: 0 }; box = null },
+    // Land focus on the dialog's content, not the header Close (x). The x is
+    // the first focusable in DOM order, so the trap's "first focusable"
+    // default sent focus there - where Enter immediately dismissed the
+    // dialog and the loud focus ring pointed at "close" over the primary
+    // action. Prefer the first focusable outside the header; fall back to the
+    // panel itself when the body has no control of its own.
+    initialFocus: () => {
+      const explicit = initialFocus?.()
+      if (explicit) return explicit
+      if (!dialogEl) return null
+      const first = getFocusable(dialogEl).find((el) => !el.closest('.sv-modal__header'))
+      return first ?? dialogEl
+    },
   })
 
   // --- Drag (header) ---------------------------------------------------------

package/dist/SvModal.svelte.d.ts

@@ -28,6 +28,13 @@ type Props = {
     closeOnEsc?: boolean;
     /** Hide the header close (x) button. */
     hideClose?: boolean;
+    /**
+     * The element to focus when the dialog opens. Defaults to the first
+     * focusable control in the body or footer - never the header Close (x),
+     * so opening a dialog lands on its content and Enter does not dismiss it.
+     * Pass a getter to target a specific field (e.g. a search input).
+     */
+    initialFocus?: () => HTMLElement | null;
     children?: Snippet;
     footer?: Snippet;
 };

package/dist/a11y/dismissable.d.ts

@@ -37,6 +37,16 @@ export declare function dismissableDepth(): number;
  * 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 declare function onScrollOutside(element: () => DismissTarget, onOutside: () => void): () => void;

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 = ''; },