@gridkitjs/dom 0.3.2 → 0.4.0

package/dist/index.js

@@ -175,8 +175,7 @@ function attachChecklist(list, options) {
       item.focus({ preventScroll: true });
     }
   }
-  const observer = new MutationObserver(() => {
-    setTabStop();
+  function focusPendingIfMounted() {
     const item = pending === null ? null : itemAt(pending);
     if (item === null) {
       return;
@@ -186,6 +185,10 @@ function attachChecklist(list, options) {
     if (focused === null || focused === document.body || list.contains(focused)) {
       item.focus({ preventScroll: true });
     }
+  }
+  const observer = new MutationObserver(() => {
+    setTabStop();
+    focusPendingIfMounted();
   });
   observer.observe(list, {
     childList: true,
@@ -200,7 +203,11 @@ function attachChecklist(list, options) {
     setCount(next) {
       count = next;
       active = Math.max(0, Math.min(active, count - 1));
+      if (pending !== null) {
+        pending = count === 0 ? null : Math.min(pending, count - 1);
+      }
       setTabStop();
+      focusPendingIfMounted();
     },
     focusItem: moveTo,
     detach() {
@@ -322,61 +329,77 @@ function attachContextMenuTrigger(root, options) {
 import { applyColumnResize } from "@gridkitjs/core";
 
 // src/pointerGesture.ts
-function isPrimaryPress(press) {
-  return press.button === 0 && press.isPrimary;
+function mayStartGesture(press, signal) {
+  return press.button === 0 && press.isPrimary && signal?.aborted !== true;
 }
-function startPointerGesture(element, pointerId, handlers) {
+function startPointerGesture(element, pointerId, handlers, signal) {
   element.setPointerCapture(pointerId);
   function stop() {
     element.removeEventListener("pointermove", move);
     element.removeEventListener("pointerup", end);
     element.removeEventListener("pointercancel", cancel);
     window.removeEventListener("keydown", onKeyDown2);
+    signal?.removeEventListener("abort", abandon);
     if (element.hasPointerCapture(pointerId)) {
       element.releasePointerCapture(pointerId);
     }
   }
   function move(event) {
-    handlers.onMove(event);
+    if (event.pointerId === pointerId) {
+      handlers.onMove(event);
+    }
   }
-  function end() {
-    stop();
-    handlers.onEnd();
+  function end(event) {
+    if (event.pointerId === pointerId) {
+      stop();
+      handlers.onEnd();
+    }
   }
-  function cancel() {
+  function cancel(event) {
+    if (event.pointerId === pointerId) {
+      abandon();
+    }
+  }
+  function abandon() {
     stop();
     handlers.onCancel();
   }
   function onKeyDown2(event) {
     if (event.key === "Escape") {
-      cancel();
+      abandon();
     }
   }
   element.addEventListener("pointermove", move);
   element.addEventListener("pointerup", end);
   element.addEventListener("pointercancel", cancel);
   window.addEventListener("keydown", onKeyDown2);
+  signal?.addEventListener("abort", abandon);
 }
 
 // src/columnResize.ts
 function startColumnResizeGesture(handle, press, session, handlers) {
-  if (!isPrimaryPress(press)) {
+  if (!mayStartGesture(press, handlers.signal)) {
     return false;
   }
   press.preventDefault();
   let width = session.startWidth;
-  startPointerGesture(handle, press.pointerId, {
-    onMove(event) {
-      width = applyColumnResize(session, event.clientX);
-      handlers.onMove(width);
-    },
-    onEnd() {
-      handlers.onEnd(width === session.startWidth ? null : width);
+  startPointerGesture(
+    handle,
+    press.pointerId,
+    {
+      onMove(event) {
+        width = applyColumnResize(session, event.clientX);
+        handlers.onMove(width);
+      },
+      onEnd() {
+        handlers.onEnd(width === session.startWidth ? null : width);
+      },
+      onCancel() {
+        handlers.onCancel();
+      }
     },
-    onCancel() {
-      handlers.onCancel();
-    }
-  });
+    handlers.signal
+  );
   return true;
 }
 function measureColumnContent(table, columnId) {
@@ -503,41 +526,43 @@ var NO_DRAG = {
   ghostTransform: null
 };
 function startDragReorder(id, grabElement, press, handlers) {
-  if (!isPrimaryPress(press)) {
+  if (!mayStartGesture(press, handlers.signal)) {
     return false;
   }
-  const { pointerId, clientX: startX } = press;
+  const { pointerId, clientX: startX, clientY: startY } = press;
   const grabX = startX - grabElement.getBoundingClientRect().left;
-  let dragging = false;
-  let target = null;
-  startPointerGesture(grabElement, pointerId, {
-    onMove(moveEvent) {
-      const { clientX, clientY } = moveEvent;
-      if (!dragging) {
-        if (Math.abs(clientX - startX) < DRAG_THRESHOLD) {
+  let phase = { kind: "pressed" };
+  startPointerGesture(
+    grabElement,
+    pointerId,
+    {
+      onMove(moveEvent) {
+        const { clientX, clientY } = moveEvent;
+        if (phase.kind === "pressed" && Math.hypot(clientX - startX, clientY - startY) < DRAG_THRESHOLD) {
           return;
         }
-        dragging = true;
-      }
-      target = handlers.resolveTarget(clientX, clientY, id);
-      handlers.onState({
-        draggedId: id,
-        dropTarget: target,
-        ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
-      });
-    },
-    onEnd() {
-      const dropped = target;
-      handlers.onState(NO_DRAG);
-      if (dragging && dropped !== null) {
-        handlers.onDrop(dropped, id);
+        phase = {
+          kind: "dragging",
+          target: handlers.resolveTarget(clientX, clientY, id)
+        };
+        handlers.onState({
+          draggedId: id,
+          dropTarget: phase.target,
+          ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
+        });
+      },
+      onEnd() {
+        handlers.onState(NO_DRAG);
+        if (phase.kind === "dragging" && phase.target !== null) {
+          handlers.onDrop(phase.target, id);
+        }
+      },
+      onCancel() {
+        handlers.onState(NO_DRAG);
       }
     },
-    onCancel() {
-      target = null;
-      handlers.onState(NO_DRAG);
-    }
-  });
+    handlers.signal
+  );
   return true;
 }
 
@@ -640,6 +665,25 @@ function createGridFocus(initialOptions) {
     }
     return snapshot.focus;
   }
+  function dropPendingMove() {
+    pendingMove = null;
+  }
+  function listenForTakeover(root) {
+    function onFocusOut(event) {
+      const to = event.relatedTarget;
+      if (to instanceof Node && !root.contains(to)) {
+        dropPendingMove();
+      }
+    }
+    root.addEventListener("focusout", onFocusOut);
+    root.addEventListener("wheel", dropPendingMove, { passive: true });
+    root.addEventListener("pointerdown", dropPendingMove);
+    return () => {
+      root.removeEventListener("focusout", onFocusOut);
+      root.removeEventListener("wheel", dropPendingMove);
+      root.removeEventListener("pointerdown", dropPendingMove);
+    };
+  }
   function focusCell(rowIndex, columnIndex) {
     const next = clampFocus(
       { rowIndex, columnIndex },
@@ -684,9 +728,11 @@ function createGridFocus(initialOptions) {
       focusCell(next.rowIndex, next.columnIndex);
       return true;
     },
-    attach(next) {
+    attach(next, root) {
       rows = next;
+      const stopListening = root == null ? void 0 : listenForTakeover(root);
       return () => {
+        stopListening?.();
         if (rows === next) {
           rows = null;
         }
@@ -716,20 +762,36 @@ function createGridFocus(initialOptions) {
 }
 
 // src/infiniteScroll.ts
+var IDLE = { kind: "idle" };
+var REQUESTED = { kind: "requested" };
+var LOADING = { kind: "loading" };
+var DETACHED = { kind: "detached" };
+function afterUpdate(state, loading, hasMoreChanged) {
+  if (loading) {
+    return LOADING;
+  }
+  return state.kind === "loading" || hasMoreChanged ? IDLE : state;
+}
 function attachInfiniteScroll(root, options) {
   let latest = options;
   let intersecting = false;
-  let fired = false;
-  let wasLoading = options.isLoadingMore ?? false;
+  let state = options.isLoadingMore ?? false ? LOADING : IDLE;
   let observer = null;
   let observed = null;
   function maybeLoadMore() {
-    if (!intersecting || !latest.hasMore || (latest.isLoadingMore ?? false) || fired) {
+    if (state.kind !== "idle" || !intersecting || !latest.hasMore) {
       return;
     }
-    fired = true;
+    state = REQUESTED;
     latest.onLoadMore?.();
   }
+  function report(isIntersecting) {
+    intersecting = isIntersecting;
+    if (!intersecting && state.kind === "requested") {
+      state = IDLE;
+    }
+    maybeLoadMore();
+  }
   function disconnect() {
     observer?.disconnect();
     observer = null;
@@ -749,11 +811,9 @@ function attachInfiniteScroll(root, options) {
     observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[entries.length - 1];
-        if (entry === void 0) {
-          return;
+        if (entry !== void 0) {
+          report(entry.isIntersecting);
         }
-        intersecting = entry.isIntersecting;
-        maybeLoadMore();
       },
       { root, rootMargin }
     );
@@ -763,16 +823,19 @@ function attachInfiniteScroll(root, options) {
   observe();
   return {
     update(next) {
-      latest = next;
-      const loading = next.isLoadingMore ?? false;
-      if (wasLoading && !loading) {
-        fired = false;
-        maybeLoadMore();
+      if (state.kind === "detached") {
+        return;
       }
-      wasLoading = loading;
+      const hasMoreChanged = next.hasMore !== latest.hasMore;
+      latest = next;
+      state = afterUpdate(state, next.isLoadingMore ?? false, hasMoreChanged);
       observe();
+      maybeLoadMore();
     },
-    detach: disconnect
+    detach() {
+      disconnect();
+      state = DETACHED;
+    }
   };
 }
 
@@ -792,6 +855,8 @@ var MOVES = {
   Home: "first",
   End: "last"
 };
+var IDLE2 = { kind: "idle" };
+var AWAY = { kind: "away" };
 function idOf(item) {
   return item.getAttribute("data-gridkit-menu-item") ?? "";
 }
@@ -809,10 +874,8 @@ function isTypeahead(event) {
   return /^\S$/u.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
 function attachMenu(panel, options) {
-  let typed = "";
-  let typeaheadTimer;
-  let hovered = null;
-  let hoverTimer;
+  let typeahead = IDLE2;
+  let hover = AWAY;
   function items() {
     return Array.from(panel.querySelectorAll(ITEM2));
   }
@@ -841,21 +904,58 @@ function attachMenu(panel, options) {
       options.onActivate(idOf(item));
     }
   }
-  function typeahead(key, all, from) {
-    typed += key;
-    window.clearTimeout(typeaheadTimer);
-    typeaheadTimer = window.setTimeout(() => {
-      typed = "";
-    }, TYPEAHEAD_TIMEOUT);
+  function endTyping() {
+    if (typeahead.kind === "typing") {
+      window.clearTimeout(typeahead.timer);
+    }
+    typeahead = IDLE2;
+  }
+  function endHover() {
+    if (hover.kind === "resting") {
+      window.clearTimeout(hover.timer);
+    }
+    hover = AWAY;
+  }
+  function type(key, all, from) {
+    const typed = (typeahead.kind === "typing" ? typeahead.typed : "") + key;
+    endTyping();
+    typeahead = {
+      kind: "typing",
+      typed,
+      timer: window.setTimeout(() => {
+        typeahead = IDLE2;
+      }, TYPEAHEAD_TIMEOUT)
+    };
     const match = all[typeaheadIndex(all.map(labelOf), from, typed)];
     if (match !== void 0) {
       focus(match);
     }
   }
+  function rest(item) {
+    hover = {
+      kind: "resting",
+      item,
+      timer: window.setTimeout(() => {
+        hover = { kind: "rested", item };
+        if (opensSubmenu(item) && !isDisabled(item)) {
+          openSubmenu(item, "none");
+        } else {
+          options.onCollapseSubmenu?.();
+        }
+      }, HOVER_DELAY)
+    };
+  }
   function onKeyDown2(event) {
-    if (event.isComposing) {
+    if (event.isComposing || !actOnKey(event)) {
       return;
     }
+    event.preventDefault();
+    endHover();
+    if (!isTypeahead(event)) {
+      endTyping();
+    }
+  }
+  function actOnKey(event) {
     const all = items();
     const item = itemOf(event.target);
     const from = item === null ? -1 : all.indexOf(item);
@@ -882,11 +982,11 @@ function attachMenu(panel, options) {
     } else if (event.key === "Tab") {
       options.onClose("tab");
     } else if (isTypeahead(event)) {
-      typeahead(event.key, all, from);
+      type(event.key, all, from);
     } else {
-      return;
+      return false;
     }
-    event.preventDefault();
+    return true;
   }
   function onFocusIn(event) {
     const item = itemOf(event.target);
@@ -908,24 +1008,16 @@ function attachMenu(panel, options) {
     if (item !== null && document.activeElement !== item) {
       focus(item);
     }
-    if (item === hovered) {
+    if (hover.kind !== "away" && hover.item === item) {
       return;
     }
-    hovered = item;
-    window.clearTimeout(hoverTimer);
+    endHover();
     if (item !== null) {
-      hoverTimer = window.setTimeout(() => {
-        if (opensSubmenu(item) && !isDisabled(item)) {
-          openSubmenu(item, "none");
-        } else {
-          options.onCollapseSubmenu?.();
-        }
-      }, HOVER_DELAY);
+      rest(item);
     }
   }
   function onPointerLeave() {
-    hovered = null;
-    window.clearTimeout(hoverTimer);
+    endHover();
   }
   const focused = itemOf(document.activeElement);
   setTabStop(focused ?? items()[0]);
@@ -943,8 +1035,8 @@ function attachMenu(panel, options) {
       }
     },
     detach() {
-      window.clearTimeout(typeaheadTimer);
-      window.clearTimeout(hoverTimer);
+      endTyping();
+      endHover();
       panel.removeEventListener("keydown", onKeyDown2);
       panel.removeEventListener("focusin", onFocusIn);
       panel.removeEventListener("click", onClick);
@@ -1238,15 +1330,18 @@ function attachOverlay(anchor, panel, options) {
     if (settlingFrame !== null) {
       cancelAnimationFrame(settlingFrame);
     }
-    if (returnFocusTo !== null && focusInside) {
-      returnFocusTo.focus({ preventScroll: true });
+    if (!focusInside) {
+      return;
     }
+    const target = returnFocusTo?.isConnected === true ? returnFocusTo : options.returnFocusFallback?.();
+    target?.focus({ preventScroll: true });
   }
   return detach;
 }
 
 // src/rowVirtualizer.ts
 import { visibleRange } from "@gridkitjs/core";
+var READY = { kind: "ready" };
 function sameRange(a, b) {
   return a.startIndex === b.startIndex && a.endIndex === b.endIndex && a.offsetBefore === b.offsetBefore && a.offsetAfter === b.offsetAfter;
 }
@@ -1256,13 +1351,12 @@ function createRowVirtualizer(scrollElement, options) {
   let scrollTop = scrollElement.scrollTop;
   let viewportHeight = scrollElement.clientHeight;
   let range = null;
-  let destroyed = false;
-  let pendingScroll;
+  let phase = READY;
   const elements = /* @__PURE__ */ new Map();
   const indexByElement = /* @__PURE__ */ new Map();
   const refCallbacks = /* @__PURE__ */ new Map();
   function recompute() {
-    if (destroyed) {
+    if (phase.kind === "destroyed") {
       return;
     }
     const next = visibleRange(
@@ -1313,6 +1407,9 @@ function createRowVirtualizer(scrollElement, options) {
   recompute();
   return {
     setRowCount(count) {
+      if (phase.kind === "awaiting-row" && phase.index >= count) {
+        phase = READY;
+      }
       heights = Array.from({ length: count }, (_, index) => heights[index]);
       recompute();
     },
@@ -1330,15 +1427,15 @@ function createRowVirtualizer(scrollElement, options) {
             indexByElement.delete(previous);
             elements.delete(index);
           }
-          if (element === null || destroyed) {
+          if (element === null || phase.kind === "destroyed") {
             return;
           }
           elements.set(index, element);
           indexByElement.set(element, index);
           rowObserver.observe(element);
-          if (pendingScroll?.index === index) {
-            element.scrollIntoView(pendingScroll.options);
-            pendingScroll = void 0;
+          if (phase.kind === "awaiting-row" && phase.index === index) {
+            element.scrollIntoView(phase.options);
+            phase = READY;
           }
         };
         refCallbacks.set(index, callback);
@@ -1346,21 +1443,21 @@ function createRowVirtualizer(scrollElement, options) {
       return callback;
     },
     scrollToIndex(index, scrollOptions) {
-      if (heights.length === 0) {
+      if (phase.kind === "destroyed" || heights.length === 0) {
         return;
       }
       const clamped = Math.max(0, Math.min(index, heights.length - 1));
       const mounted = elements.get(clamped);
       if (mounted !== void 0) {
+        phase = READY;
         mounted.scrollIntoView(scrollOptions);
         return;
       }
-      pendingScroll = { index: clamped, options: scrollOptions };
+      phase = { kind: "awaiting-row", index: clamped, options: scrollOptions };
       scrollElement.scrollTop = estimateOffsetBefore(clamped);
     },
     destroy() {
-      destroyed = true;
-      pendingScroll = void 0;
+      phase = { kind: "destroyed" };
       scrollElement.removeEventListener("scroll", handleScroll);
       viewportObserver.disconnect();
       rowObserver.disconnect();
@@ -1589,17 +1686,26 @@ function createFrame(bodyHtml) {
 }
 function load(frame) {
   return new Promise((resolve, reject) => {
-    frame.addEventListener(
-      "load",
-      () => {
-        if (frame.contentWindow === null) {
-          reject(new Error("The print frame has no window."));
-        } else {
-          resolve(frame.contentWindow);
-        }
-      },
-      { once: true }
-    );
+    const removal = new MutationObserver(() => {
+      if (!frame.isConnected) {
+        settle();
+        reject(new Error("The print frame was removed before it loaded."));
+      }
+    });
+    function loaded() {
+      settle();
+      if (frame.contentWindow === null) {
+        reject(new Error("The print frame has no window."));
+      } else {
+        resolve(frame.contentWindow);
+      }
+    }
+    function settle() {
+      removal.disconnect();
+      frame.removeEventListener("load", loaded);
+    }
+    frame.addEventListener("load", loaded);
+    removal.observe(document.body, { childList: true });
     document.body.append(frame);
   });
 }
@@ -1610,7 +1716,7 @@ function fill(view, { title, styles }) {
   style.textContent = styles;
   frameDocument.head.append(style);
 }
-function print(view) {
+async function print(view) {
   const listeners = [
     [view, "afterprint"],
     ...RETURN_EVENTS.flatMap((type) => [
@@ -1618,19 +1724,22 @@ function print(view) {
       [window, type]
     ])
   ];
-  return new Promise((resolve) => {
-    function done() {
-      for (const [target, type] of listeners) {
-        target.removeEventListener(type, done, { capture: true });
-      }
-      resolve();
-    }
-    for (const [target, type] of listeners) {
-      target.addEventListener(type, done, { capture: true });
-    }
+  let done = () => void 0;
+  const closed = new Promise((resolve) => {
+    done = resolve;
+  });
+  for (const [target, type] of listeners) {
+    target.addEventListener(type, done, { capture: true });
+  }
+  try {
     view.focus();
     view.print();
-  });
+    await closed;
+  } finally {
+    for (const [target, type] of listeners) {
+      target.removeEventListener(type, done, { capture: true });
+    }
+  }
 }
 async function printDocument(options) {
   if (printing) {