kerfjs 5.0.0-beta.52 → 5.0.0-beta.53

package/dist/overlay.js

@@ -1,11 +1,12 @@
-import { mount } from './chunk-H3TTM7PQ.js';
-import { delegate } from './chunk-E5R5GNKE.js';
+import { attach } from './chunk-FM6N2B4N.js';
+import { mount } from './chunk-HTXQR2KL.js';
+import { delegate } from './chunk-X6OQ2HTR.js';
 
 
-import { jsx, escapeHtml } from './chunk-3GSWKMBZ.js';
-
+import { jsx, escapeHtml } from './chunk-DU35YGKW.js';
 
 
+import { devHooks } from './chunk-3C6F6NM4.js';
 
 // src/overlay-position.ts
 function positionAnchored(el, anchor, options = {}) {
@@ -54,10 +55,32 @@ function supportsDialog() {
 function supportsPopover() {
   return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
 }
-var FALLBACK_OVERLAY_STACK = /* @__PURE__ */ Symbol("kerf.fallbackOverlayStack");
-function fallbackOverlayStack(wrapper) {
-  const document2 = wrapper.ownerDocument;
-  return document2[FALLBACK_OVERLAY_STACK] ??= [];
+var OVERLAY_ARBITRATION = /* @__PURE__ */ Symbol("kerf.overlayArbitration");
+function overlayArbitration(doc) {
+  return doc[OVERLAY_ARBITRATION] ??= {
+    stack: [],
+    handled: /* @__PURE__ */ new WeakSet()
+  };
+}
+function modalDialogOpen(doc, arbitration) {
+  if (arbitration.stack.some(
+    ({ el, modal }) => modal && el.isConnected && el.open === true
+  ))
+    return true;
+  try {
+    for (const dialog of doc.querySelectorAll("dialog[open]"))
+      if (dialog.matches(":modal")) return true;
+  } catch {
+  }
+  return false;
+}
+function ownsInput(stack, self, kind) {
+  for (let i = stack.indexOf(self) + 1; i < stack.length; i++) {
+    const above = stack[i];
+    if (above.modal || kind !== "trap" && above.triggers.includes(kind))
+      return false;
+  }
+  return true;
 }
 function assertInitialFocusSelector(selector) {
   try {
@@ -84,9 +107,11 @@ function overlay(content, options = {}) {
   if (typeof initialFocus === "string")
     assertInitialFocusSelector(initialFocus);
   const triggers = dismiss === false ? [] : Array.isArray(dismiss) ? dismiss : [dismiss];
-  const restoreTo = document.activeElement;
-  const useDialog = native && trap && supportsDialog();
-  const usePopover = native && !trap && supportsPopover();
+  const arbitration = overlayArbitration(document);
+  const liftOverModal = !native && modalDialogOpen(document, arbitration);
+  const topLayer = native || liftOverModal;
+  const useDialog = topLayer && trap && supportsDialog();
+  const usePopover = topLayer && !trap && supportsPopover();
   const wrapper = useDialog ? document.createElement("dialog") : document.createElement("div");
   wrapper.className = className;
   if (usePopover) wrapper.setAttribute("popover", "manual");
@@ -94,9 +119,13 @@ function overlay(content, options = {}) {
     wrapper.setAttribute("role", role);
     wrapper.setAttribute("aria-modal", "true");
   }
-  const fallback = !useDialog && !usePopover;
-  const fallbackStack = fallback ? fallbackOverlayStack(wrapper) : void 0;
-  const isTopmostFallback = () => fallbackStack === void 0 || fallbackStack[fallbackStack.length - 1] === wrapper;
+  const surface = {
+    el: wrapper,
+    triggers,
+    modal: trap,
+    restoreTo: document.activeElement
+  };
+  const owns = (kind, event) => !(event !== void 0 && arbitration.handled.has(event)) && ownsInput(arbitration.stack, surface, kind);
   const removers = [];
   const resultBox = {};
   const result = new Promise((resolve) => {
@@ -105,13 +134,33 @@ function overlay(content, options = {}) {
   const state = { closed: false };
   let disposeMount;
   let nativeOpened = false;
+  if (!trap)
+    surface.liftAbove = () => {
+      if (!supportsPopover()) {
+        devHooks.overlayBlockedByModal?.("hidden");
+        return;
+      }
+      const el = wrapper;
+      if (nativeOpened) el.hidePopover();
+      else {
+        wrapper.setAttribute("popover", "manual");
+        wrapper.style.inset = "auto";
+      }
+      el.showPopover();
+      nativeOpened = true;
+      if (wrapper.querySelector(FOCUSABLE) !== null)
+        devHooks.overlayBlockedByModal?.("inert");
+    };
   function close(value) {
     if (state.closed) return;
     state.closed = true;
-    if (fallbackStack !== void 0) {
-      const stackIndex = fallbackStack.indexOf(wrapper);
-      if (stackIndex !== -1) fallbackStack.splice(stackIndex, 1);
-    }
+    const { stack } = arbitration;
+    const stackIndex = stack.indexOf(surface);
+    if (stackIndex !== -1) stack.splice(stackIndex, 1);
+    for (const other of stack)
+      if (other.restoreTo !== null && wrapper.contains(other.restoreTo))
+        other.restoreTo = surface.restoreTo;
+    const active = document.activeElement;
     for (const remove of removers) remove();
     disposeMount?.();
     if (nativeOpened) {
@@ -120,9 +169,17 @@ function overlay(content, options = {}) {
       else wrapper.hidePopover();
     }
     wrapper.remove();
+    restoreFocus(active);
+    resultBox.resolve?.(value);
+  }
+  function restoreFocus(active) {
+    if (active instanceof HTMLElement && active.isConnected && arbitration.stack.some((other) => other.el.contains(active))) {
+      if (document.activeElement !== active) active.focus();
+      return;
+    }
+    const { restoreTo } = surface;
     if (restoreTo instanceof HTMLElement && restoreTo.isConnected)
       restoreTo.focus();
-    resultBox.resolve?.(value);
   }
   function userDismiss() {
     onDismiss?.();
@@ -134,10 +191,12 @@ function overlay(content, options = {}) {
       wrapper,
       typeof content === "function" ? content : () => content
     );
-    fallbackStack?.push(wrapper);
+    arbitration.stack.push(surface);
     if (useDialog) {
       wrapper.showModal();
       nativeOpened = true;
+      for (const other of arbitration.stack)
+        if (other !== surface && other.el.isConnected) other.liftAbove?.();
     } else if (usePopover) {
       wrapper.showPopover();
       nativeOpened = true;
@@ -149,25 +208,32 @@ function overlay(content, options = {}) {
     close();
     throw error;
   }
+  if (liftOverModal) {
+    if (!useDialog && !usePopover) devHooks.overlayBlockedByModal?.("hidden");
+    else if (usePopover && wrapper.querySelector(FOCUSABLE) !== null)
+      devHooks.overlayBlockedByModal?.("inert");
+  }
   return { el: wrapper, close, result };
   function installDismissal() {
     const wantEscape = triggers.includes("escape");
     if (useDialog) {
       const onCancel = (event) => {
         event.preventDefault();
-        if (wantEscape) userDismiss();
+        if (wantEscape && owns("escape")) userDismiss();
       };
       wrapper.addEventListener("cancel", onCancel);
       removers.push(() => wrapper.removeEventListener("cancel", onCancel));
     } else if (wantEscape || trap) {
       const onKeydown = (event) => {
-        if (!isTopmostFallback()) return;
         if (wantEscape && event.key === "Escape") {
+          if (!owns("escape", event)) return;
           event.stopPropagation();
+          event.preventDefault();
+          arbitration.handled.add(event);
           userDismiss();
           return;
         }
-        if (trap && event.key === "Tab") {
+        if (trap && event.key === "Tab" && owns("trap")) {
           const items = focusable(wrapper);
           if (items.length === 0) {
             event.preventDefault();
@@ -193,8 +259,9 @@ function overlay(content, options = {}) {
     }
     if (triggers.includes("backdrop")) {
       const onClick = (event) => {
-        if (!isTopmostFallback()) return;
-        if (event.target === wrapper) userDismiss();
+        if (event.target !== wrapper || !owns("backdrop", event)) return;
+        arbitration.handled.add(event);
+        userDismiss();
       };
       wrapper.addEventListener("click", onClick);
       removers.push(() => wrapper.removeEventListener("click", onClick));
@@ -202,11 +269,12 @@ function overlay(content, options = {}) {
     if (triggers.includes("outside")) {
       const ignore = outsideIgnore === void 0 ? [] : Array.isArray(outsideIgnore) ? outsideIgnore : [outsideIgnore];
       const onDocClick = (event) => {
-        if (!isTopmostFallback()) return;
         const target = event.target;
         if (target === null) return;
         if (wrapper.contains(target)) return;
         if (ignore.some((el) => el === target || el.contains(target))) return;
+        if (!owns("outside", event)) return;
+        arbitration.handled.add(event);
         userDismiss();
       };
       document.addEventListener("click", onDocClick, true);
@@ -292,6 +360,7 @@ function popover(anchor, content, options = {}) {
     throw error;
   }
   void handle.result.then(stopReposition);
+  void handle.result.then(attach(anchor, () => handle.close));
   return handle;
 }
 function tooltip(anchor, content, options = {}) {
@@ -311,6 +380,7 @@ function tooltip(anchor, content, options = {}) {
   let current;
   let presence = 0;
   function show() {
+    if (!anchor.isConnected) return;
     const handle = overlay(body, {
       container,
       className,
@@ -327,13 +397,20 @@ function tooltip(anchor, content, options = {}) {
       handle.close();
       throw error;
     }
-    current = { handle, stop };
+    const unwatch = attach(anchor, () => () => {
+      presence = 0;
+      if (timers.hide !== void 0) clearTimeout(timers.hide);
+      hide();
+    });
+    current = { handle, stop, unwatch };
   }
   function hide() {
-    if (current === void 0) return;
-    current.stop();
-    current.handle.close();
+    const shown = current;
+    if (shown === void 0) return;
     current = void 0;
+    shown.unwatch();
+    shown.stop();
+    shown.handle.close();
   }
   const onEnter = (event) => {
     presence |= event.type === "focus" ? 2 : 1;