@gridkitjs/dom 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -96,7 +96,11 @@ interface AttachedChecklist {
      * An item outside the mounted window is focused once it mounts.
      */
     readonly focusItem: (index: number) => void;
-    /** Removes every listener and observer. The items keep their `tabindex`. */
+    /**
+     * Removes every listener and observer. The items keep their `tabindex`.
+     * After it, `setCount` and `focusItem` do nothing: they neither scroll
+     * nor focus, and a move still waiting for its item is dropped.
+     */
     readonly detach: () => void;
 }
 /**
@@ -191,10 +195,11 @@ interface ColumnResizeGestureHandlers {
     /** Every pointer move, with the width the column takes there. */
     readonly onMove: (width: number) => void;
     /**
-     * The pointer was released. `width` is the width to commit, or `null` when
-     * it ended where it started: a click on the handle — as each half of a
-     * double-click is — is not a resize, and reporting one would fire a
-     * spurious resize on every click.
+     * The pointer was released. `width` is the width to commit, even when a
+     * drag brought it back to where it started, or `null` when the width never
+     * changed: a click on the handle — as each half of a double-click is — is
+     * not a resize, and reporting one would fire a spurious resize on every
+     * click.
      */
     readonly onEnd: (width: number | null) => void;
     /**
@@ -276,15 +281,22 @@ declare function writeClipboard(content: ClipboardContent): Promise<void>;
  */
 declare function downloadBlob(blob: Blob, fileName: string): void;
 
-/** What a renderer draws while a reorder drag is open. */
-interface DragReorderState<Target> {
-    /** The item being dragged, once the press has become a drag. */
-    readonly draggedId: string | null;
+/**
+ * What a renderer draws for a reorder gesture: nothing while `idle`, which
+ * covers a press still short of the drag threshold, then while `dragging` the
+ * dragged item, where it would land and the ghost trailing the pointer.
+ */
+type DragReorderState<Target> = {
+    readonly kind: "idle";
+} | {
+    readonly kind: "dragging";
+    /** The item being dragged. */
+    readonly draggedId: string;
     /** Where it would land if released now, `null` for nowhere valid. */
     readonly dropTarget: Target | null;
     /** Where the element trailing the pointer sits, as a CSS `transform`. */
-    readonly ghostTransform: string | null;
-}
+    readonly ghostTransform: string;
+};
 /** The state while nothing is dragged — the one a drag reports when it ends. */
 declare const NO_DRAG: DragReorderState<never>;
 interface DragReorderHandlers<Target> {
@@ -434,7 +446,7 @@ interface GridFocusController {
      * focused does nothing, which is what lets a cell's own `focus` event
      * report a click through here without a loop.
      */
-    readonly focusCell: (rowIndex: number, columnIndex: number) => void;
+    readonly focusCell: (focus: GridFocus) => void;
     /**
      * Moves the tab stop as `key` does — the arrows, Home, End, the page keys,
      * with Ctrl for the grid's corners. Returns whether the key was one of
@@ -505,8 +517,9 @@ interface InfiniteScrollOptions {
     /**
      * Called at most once per approach: when the sentinel comes within
      * `rootMargin` of the root's visible area. Not again until that load has
-     * finished (`isLoadingMore` back to `false`), `hasMore` has changed, or
-     * the sentinel has left `rootMargin` and come back.
+     * finished (`isLoadingMore` back to `false`), `hasMore` has changed, rows
+     * have been added or removed in front of the sentinel, or the sentinel has
+     * left `rootMargin` and come back.
      */
     readonly onLoadMore?: (() => void) | undefined;
     /** Whether a load `onLoadMore` started is still in flight. */
@@ -519,6 +532,8 @@ interface InfiniteScroll {
      * Takes the current options. Cheap when nothing changed, so a renderer may
      * call it after every render; a new sentinel or `rootMargin` restarts the
      * observer, and a load finishing or `hasMore` changing re-checks at once.
+     * While a load it asked for has not reported `isLoadingMore`, it measures
+     * where the sentinel sits, to tell whether rows answered it.
      */
     readonly update: (options: InfiniteScrollOptions) => void;
     /** Stops watching for good: a later `update` does nothing. */
@@ -783,7 +798,11 @@ interface RowVirtualizerOptions {
 interface RowVirtualizer {
     /** How many rows there are. Measured heights of the rows that remain are kept. */
     readonly setRowCount: (count: number) => void;
-    /** Forgets every measured height, for rows that are no longer the ones measured. */
+    /**
+     * Forgets every measured height, for rows that are no longer the ones
+     * measured. A `scrollToIndex` still waiting for its row is dropped too:
+     * the row it asked for is no longer at that index.
+     */
     readonly resetHeights: () => void;
     /**
      * A ref callback for the element of row `index` (its place among all the
@@ -792,12 +811,21 @@ interface RowVirtualizer {
      * a renderer re-attaching it on every render costs nothing.
      */
     readonly measureRow: (index: number) => (element: HTMLElement | null) => void;
+    /**
+     * Reads the heights of rows already laid out, each paired with its index
+     * among all the rows, and works out the window once for all of them: for
+     * rows drawn before this virtualizer existed, so its first window is the
+     * one on screen rather than one placed by `estimatedRowHeight`. Indices
+     * past the row count are skipped. It does not observe the rows;
+     * `measureRow` does that once the renderer hands them over.
+     */
+    readonly measureRows: (rows: Iterable<readonly [index: number, element: Element]>) => void;
     /**
      * Scrolls so row `index` is in view. A mounted row is scrolled to directly;
      * one outside the window is jumped to at its estimated offset, then
      * scrolled to properly once it mounts and can be measured. A later call
-     * replaces one still waiting for its row, and so does a row count that no
-     * longer holds that row.
+     * replaces one still waiting for its row; a row count that no longer holds
+     * that row, or `resetHeights`, drops it.
      */
     readonly scrollToIndex: (index: number, options?: ScrollIntoViewOptions) => void;
     /**
@@ -912,8 +940,8 @@ interface PrintDocumentOptions {
  * Prints a document through a hidden frame: its own page, holding only
  * `bodyHtml` under `styles`, so what is printed is what was built — every
  * row, not the slice of them a virtualised grid has drawn — and nothing of
- * the page around it. The frame loads, waits for its fonts, opens the
- * print dialog, and is removed once the dialog closes, when the promise
+ * the page around it. The frame loads, waits for its fonts (a few seconds
+ * at most), opens the print dialog, and is removed once the dialog closes, when the promise
  * resolves; focus goes back where it was. A frame rather than a new window,
  * which a popup blocker would stop.
  *

package/dist/index.js

@@ -69,13 +69,15 @@ function bodyRowFrom(target) {
 // src/checklist/attachChecklist.ts
 var ITEM = "[data-gridkit-checklist-item]";
 var INDEX = "data-gridkit-checklist-index";
+var SETTLED = { kind: "settled" };
+var DETACHED = { kind: "detached" };
 function indexOf(item) {
   return Number(item.getAttribute(INDEX));
 }
 function attachChecklist(list, options) {
   let count = 0;
   let active = 0;
-  let pending = null;
+  let state = SETTLED;
   function items() {
     return Array.from(list.querySelectorAll(ITEM));
   }
@@ -102,7 +104,7 @@ function attachChecklist(list, options) {
     }
   }
   function moveTo(index) {
-    if (count === 0) {
+    if (state.kind === "detached" || count === 0) {
       return;
     }
     const target = Math.max(0, Math.min(index, count - 1));
@@ -111,9 +113,9 @@ function attachChecklist(list, options) {
     options.scrollToIndex(target);
     const item = itemAt(target);
     if (item === null) {
-      pending = target;
+      state = { kind: "awaiting-item", index: target };
     } else {
-      pending = null;
+      state = SETTLED;
       item.focus({ preventScroll: true });
     }
   }
@@ -163,7 +165,7 @@ function attachChecklist(list, options) {
   function onFocusIn(event) {
     const item = itemOf(event.target);
     if (item !== null) {
-      pending = null;
+      state = SETTLED;
       makeActive(indexOf(item));
       setTabStop();
     }
@@ -175,12 +177,12 @@ function attachChecklist(list, options) {
       item.focus({ preventScroll: true });
     }
   }
-  function focusPendingIfMounted() {
-    const item = pending === null ? null : itemAt(pending);
+  function focusAwaitedItemIfMounted() {
+    const item = state.kind === "awaiting-item" ? itemAt(state.index) : null;
     if (item === null) {
       return;
     }
-    pending = null;
+    state = SETTLED;
     const focused = document.activeElement;
     if (focused === null || focused === document.body || list.contains(focused)) {
       item.focus({ preventScroll: true });
@@ -188,7 +190,7 @@ function attachChecklist(list, options) {
   }
   const observer = new MutationObserver(() => {
     setTabStop();
-    focusPendingIfMounted();
+    focusAwaitedItemIfMounted();
   });
   observer.observe(list, {
     childList: true,
@@ -201,17 +203,23 @@ function attachChecklist(list, options) {
   list.addEventListener("click", onClick);
   return {
     setCount(next) {
+      if (state.kind === "detached") {
+        return;
+      }
       count = next;
       active = Math.max(0, Math.min(active, count - 1));
-      if (pending !== null) {
-        pending = count === 0 ? null : Math.min(pending, count - 1);
+      if (state.kind === "awaiting-item") {
+        state = count === 0 ? SETTLED : {
+          kind: "awaiting-item",
+          index: Math.min(state.index, count - 1)
+        };
       }
       setTabStop();
-      focusPendingIfMounted();
+      focusAwaitedItemIfMounted();
     },
     focusItem: moveTo,
     detach() {
-      pending = null;
+      state = DETACHED;
       observer.disconnect();
       list.removeEventListener("keydown", onKeyDown2);
       list.removeEventListener("focusin", onFocusIn);
@@ -333,11 +341,13 @@ function mayStartGesture(press, signal) {
   return press.button === 0 && press.isPrimary && signal?.aborted !== true;
 }
 function startPointerGesture(element, pointerId, handlers, signal) {
+  const { ownerDocument } = element;
   element.setPointerCapture(pointerId);
   function stop() {
-    element.removeEventListener("pointermove", move);
-    element.removeEventListener("pointerup", end);
-    element.removeEventListener("pointercancel", cancel);
+    ownerDocument.removeEventListener("pointermove", move, true);
+    ownerDocument.removeEventListener("pointerup", end, true);
+    ownerDocument.removeEventListener("pointercancel", cancel, true);
+    element.removeEventListener("lostpointercapture", recapture);
     window.removeEventListener("keydown", onKeyDown2);
     signal?.removeEventListener("abort", abandon);
     if (element.hasPointerCapture(pointerId)) {
@@ -360,6 +370,11 @@ function startPointerGesture(element, pointerId, handlers, signal) {
       abandon();
     }
   }
+  function recapture(event) {
+    if (event.pointerId === pointerId && element.isConnected) {
+      element.setPointerCapture(pointerId);
+    }
+  }
   function abandon() {
     stop();
     handlers.onCancel();
@@ -369,9 +384,10 @@ function startPointerGesture(element, pointerId, handlers, signal) {
       abandon();
     }
   }
-  element.addEventListener("pointermove", move);
-  element.addEventListener("pointerup", end);
-  element.addEventListener("pointercancel", cancel);
+  ownerDocument.addEventListener("pointermove", move, true);
+  ownerDocument.addEventListener("pointerup", end, true);
+  ownerDocument.addEventListener("pointercancel", cancel, true);
+  element.addEventListener("lostpointercapture", recapture);
   window.addEventListener("keydown", onKeyDown2);
   signal?.addEventListener("abort", abandon);
 }
@@ -383,16 +399,18 @@ function startColumnResizeGesture(handle, press, session, handlers) {
   }
   press.preventDefault();
   let width = session.startWidth;
+  let resized = false;
   startPointerGesture(
     handle,
     press.pointerId,
     {
       onMove(event) {
         width = applyColumnResize(session, event.clientX);
+        resized ||= width !== session.startWidth;
         handlers.onMove(width);
       },
       onEnd() {
-        handlers.onEnd(width === session.startWidth ? null : width);
+        handlers.onEnd(resized ? width : null);
       },
       onCancel() {
         handlers.onCancel();
@@ -520,11 +538,7 @@ function downloadBlob(blob, fileName) {
 
 // src/dragReorder.ts
 var DRAG_THRESHOLD = 4;
-var NO_DRAG = {
-  draggedId: null,
-  dropTarget: null,
-  ghostTransform: null
-};
+var NO_DRAG = { kind: "idle" };
 function startDragReorder(id, grabElement, press, handlers) {
   if (!mayStartGesture(press, handlers.signal)) {
     return false;
@@ -546,6 +560,7 @@ function startDragReorder(id, grabElement, press, handlers) {
           target: handlers.resolveTarget(clientX, clientY, id)
         };
         handlers.onState({
+          kind: "dragging",
           draggedId: id,
           dropTarget: phase.target,
           ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
@@ -619,7 +634,7 @@ function observeElementWidth(element, onWidth) {
 // src/gridFocus.ts
 import {
   clampFocus,
-  HEADER_ROW,
+  headerFocus,
   nextFocusForKey
 } from "@gridkitjs/core";
 var FALLBACK_PAGE = 10;
@@ -629,6 +644,12 @@ function cellIn(row, columnIndex) {
   }
   return row.cells[Math.min(columnIndex, row.cells.length - 1)] ?? null;
 }
+function sameCell(a, b) {
+  if (a.area === "body" && b.area === "body") {
+    return a.rowIndex === b.rowIndex && a.columnIndex === b.columnIndex;
+  }
+  return a.area === b.area && a.columnIndex === b.columnIndex;
+}
 function findBodyRow(bodyTable, rowIndex) {
   return bodyTable?.tBodies[0]?.querySelector(
     `:scope > tr[data-gridkit-row-index="${String(rowIndex)}"]`
@@ -646,7 +667,7 @@ function createGridFocus(initialOptions) {
   let options = initialOptions;
   let rows = null;
   const listeners = /* @__PURE__ */ new Set();
-  let stored = { rowIndex: HEADER_ROW, columnIndex: 0 };
+  let stored = headerFocus(0);
   let snapshot = {
     stored,
     rowCount: options.rowCount,
@@ -684,14 +705,9 @@ function createGridFocus(initialOptions) {
       root.removeEventListener("pointerdown", dropPendingMove);
     };
   }
-  function focusCell(rowIndex, columnIndex) {
-    const next = clampFocus(
-      { rowIndex, columnIndex },
-      options.rowCount,
-      options.columnCount
-    );
-    const current = getFocus();
-    if (next.rowIndex === current.rowIndex && next.columnIndex === current.columnIndex) {
+  function focusCell(focus) {
+    const next = clampFocus(focus, options.rowCount, options.columnCount);
+    if (sameCell(next, getFocus())) {
       return;
     }
     pendingMove = next;
@@ -725,7 +741,7 @@ function createGridFocus(initialOptions) {
       if (next === null) {
         return false;
       }
-      focusCell(next.rowIndex, next.columnIndex);
+      focusCell(next);
       return true;
     },
     attach(next, root) {
@@ -743,7 +759,7 @@ function createGridFocus(initialOptions) {
         return;
       }
       const cell = cellIn(
-        drawn.rowIndex === HEADER_ROW ? rows.getHeaderRow() : rows.getBodyRow(drawn.rowIndex),
+        drawn.area === "header" ? rows.getHeaderRow() : rows.getBodyRow(drawn.rowIndex),
         drawn.columnIndex
       );
       if (cell !== null) {
@@ -752,7 +768,7 @@ function createGridFocus(initialOptions) {
         return;
       }
       const range = options.virtualRange;
-      if (range != null && drawn.rowIndex !== HEADER_ROW && (drawn.rowIndex < range.startIndex || drawn.rowIndex > range.endIndex)) {
+      if (range != null && drawn.area === "body" && (drawn.rowIndex < range.startIndex || drawn.rowIndex > range.endIndex)) {
         range.scrollToIndex(drawn.rowIndex);
         return;
       }
@@ -763,15 +779,17 @@ function createGridFocus(initialOptions) {
 
 // src/infiniteScroll.ts
 var IDLE = { kind: "idle" };
-var REQUESTED = { kind: "requested" };
 var LOADING = { kind: "loading" };
-var DETACHED = { kind: "detached" };
+var DETACHED2 = { kind: "detached" };
 function afterUpdate(state, loading, hasMoreChanged) {
   if (loading) {
     return LOADING;
   }
   return state.kind === "loading" || hasMoreChanged ? IDLE : state;
 }
+function contentOffset(root, sentinel) {
+  return sentinel.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;
+}
 function attachInfiniteScroll(root, options) {
   let latest = options;
   let intersecting = false;
@@ -779,12 +797,22 @@ function attachInfiniteScroll(root, options) {
   let observer = null;
   let observed = null;
   function maybeLoadMore() {
-    if (state.kind !== "idle" || !intersecting || !latest.hasMore) {
+    if (state.kind !== "idle" || !intersecting || observed === null || !latest.hasMore) {
       return;
     }
-    state = REQUESTED;
+    state = {
+      kind: "requested",
+      sentinelOffset: contentOffset(root, observed.sentinel)
+    };
     latest.onLoadMore?.();
   }
+  function requestAnswered() {
+    if (state.kind !== "requested" || observed === null) {
+      return false;
+    }
+    const moved = contentOffset(root, observed.sentinel) - state.sentinelOffset;
+    return Math.abs(moved) >= 1;
+  }
   function report(isIntersecting) {
     intersecting = isIntersecting;
     if (!intersecting && state.kind === "requested") {
@@ -830,11 +858,16 @@ function attachInfiniteScroll(root, options) {
       latest = next;
       state = afterUpdate(state, next.isLoadingMore ?? false, hasMoreChanged);
       observe();
+      if (requestAnswered()) {
+        state = IDLE;
+        disconnect();
+        observe();
+      }
       maybeLoadMore();
     },
     detach() {
       disconnect();
-      state = DETACHED;
+      state = DETACHED2;
     }
   };
 }
@@ -1414,6 +1447,9 @@ function createRowVirtualizer(scrollElement, options) {
       recompute();
     },
     resetHeights() {
+      if (phase.kind === "awaiting-row") {
+        phase = READY;
+      }
       heights = new Array(heights.length).fill(void 0);
       recompute();
     },
@@ -1442,6 +1478,17 @@ function createRowVirtualizer(scrollElement, options) {
       }
       return callback;
     },
+    measureRows(rows) {
+      if (phase.kind === "destroyed") {
+        return;
+      }
+      for (const [index, element] of rows) {
+        if (index >= 0 && index < heights.length) {
+          heights[index] = element.getBoundingClientRect().height;
+        }
+      }
+      recompute();
+    },
     scrollToIndex(index, scrollOptions) {
       if (phase.kind === "destroyed" || heights.length === 0) {
         return;
@@ -1670,6 +1717,7 @@ function observeToolbarOverflow(toolbar, options) {
 
 // src/print/printDocument.ts
 var RETURN_EVENTS = ["pointerdown", "keydown"];
+var FONTS_TIMEOUT_MS = 3e3;
 var printing = false;
 function createFrame(bodyHtml) {
   const frame = document.createElement("iframe");
@@ -1716,6 +1764,17 @@ function fill(view, { title, styles }) {
   style.textContent = styles;
   frameDocument.head.append(style);
 }
+async function fontsLoaded(view) {
+  let timer = 0;
+  const timeout = new Promise((resolve) => {
+    timer = window.setTimeout(resolve, FONTS_TIMEOUT_MS);
+  });
+  try {
+    await Promise.race([view.document.fonts.ready, timeout]);
+  } finally {
+    window.clearTimeout(timer);
+  }
+}
 async function print(view) {
   const listeners = [
     [view, "afterprint"],
@@ -1751,7 +1810,7 @@ async function printDocument(options) {
   try {
     const view = await load(frame);
     fill(view, options);
-    await view.document.fonts.ready;
+    await fontsLoaded(view);
     await print(view);
   } finally {
     frame.remove();