@floegence/floe-webapp-core 0.86.34 → 0.86.37

package/dist/hooks/useOverlayMask.d.ts

@@ -8,6 +8,8 @@ export interface UseOverlayMaskOptions {
     /** Ordered focus regions that belong to one overlay, including persistent navigation. */
     focusRoots?: Accessor<readonly HTMLElement[]>;
     onClose?: () => void;
+    /** Outside pointer/focus interactions routed only to the owning overlay layer. */
+    onInteractOutside?: (event: PointerEvent | FocusEvent) => void;
     /** Treat additional nodes as part of the overlay surface (e.g. portaled layers). */
     containsTarget?: (target: EventTarget | null) => boolean;
     /** Optional alternate close path for Escape pressed outside the overlay surface. */

package/dist/hooks/useOverlayMask.js

@@ -1,65 +1,65 @@
-import { createEffect as Q, onCleanup as U } from "solid-js";
-import { lockBodyStyle as X } from "../utils/bodyStyleLock.js";
-import { deferAfterPaint as K } from "../utils/defer.js";
-import { getFocusableElements as x, getFirstFocusableElement as Y } from "../utils/focus.js";
-import { matchKeybind as Z } from "../utils/keybind.js";
+import { createEffect as U, onCleanup as X } from "solid-js";
+import { lockBodyStyle as Y } from "../utils/bodyStyleLock.js";
+import { deferAfterPaint as x } from "../utils/defer.js";
+import { getFocusableElements as I, getFirstFocusableElement as Z } from "../utils/focus.js";
+import { matchKeybind as _ } from "../utils/keybind.js";
 const H = /* @__PURE__ */ new WeakMap();
 function A(t) {
   return typeof Node < "u" && t instanceof Node;
 }
-function p(t, o, c) {
+function g(t, o, c) {
   return c ? c(o) : !t || !A(o) ? !1 : t.contains(o);
 }
-function W(t, o, c, i) {
-  return c === "none" ? !1 : c === "all" ? !0 : !p(t, o, i);
+function W(t, o, c, f) {
+  return c === "none" ? !1 : c === "all" ? !0 : !g(t, o, f);
 }
-function _(t) {
+function $(t) {
   return typeof t == "function" ? t() ?? [] : t ?? [];
 }
 function s(t, o) {
   return typeof t == "function" ? t() ?? o : t ?? o;
 }
-function $(t, o) {
-  for (const c of _(o)) {
-    const i = c.trim();
-    if (i && Z(t, i))
+function ee(t, o) {
+  for (const c of $(o)) {
+    const f = c.trim();
+    if (f && _(t, f))
       return !0;
   }
   return !1;
 }
-function ue(t) {
-  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), i = () => {
-    const f = s(
+function se(t) {
+  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), f = () => {
+    const l = s(
       t.closeOnEscape,
       !0
     );
-    return f === !1 ? "none" : f === "inside" ? "inside" : f === "none" ? "none" : "always";
-  }, I = () => s(t.blockHotkeys, !0), R = () => s(t.restoreFocus, !0), N = () => s(t.blockWheel, "none"), q = () => s(t.blockTouchMove, "none"), j = () => s(t.autoFocus, !0);
-  Q(() => {
+    return l === !1 ? "none" : l === "inside" ? "inside" : l === "none" ? "none" : "always";
+  }, R = () => s(t.blockHotkeys, !0), N = () => s(t.restoreFocus, !0), q = () => s(t.blockWheel, "none"), j = () => s(t.blockTouchMove, "none"), z = () => s(t.autoFocus, !0);
+  U(() => {
     if (!t.open() || typeof document > "u") return;
-    const f = o(), w = c(), v = i(), h = s(t.escapeKeyPhase, "capture"), z = I(), V = R(), g = N(), k = q(), E = j(), d = H.get(document) ?? [];
+    const l = o(), L = c(), v = f(), y = s(t.escapeKeyPhase, "capture"), V = R(), G = N(), E = q(), k = j(), b = z(), d = H.get(document) ?? [];
     H.set(document, d);
-    const y = {
-      global: f || v === "always",
-      contains: (e) => p(t.root(), e, t.containsTarget)
+    const h = {
+      global: l || v === "always",
+      contains: (e) => g(t.root(), e, t.containsTarget)
     };
-    d.push(y);
-    let T = !0;
-    const l = (e) => T && !d.slice(d.indexOf(y) + 1).some((n) => n.global || n.contains(e)), b = document.activeElement instanceof HTMLElement ? document.activeElement : null, G = f ? X({ overflow: "hidden" }) : null;
-    K(() => {
+    d.push(h);
+    let O = !0;
+    const a = (e) => O && !d.slice(d.indexOf(h) + 1).some((n) => n.global || n.contains(e)), w = document.activeElement instanceof HTMLElement ? document.activeElement : null, J = l ? Y({ overflow: "hidden" }) : null;
+    x(() => {
       const e = t.root();
-      if (!e?.isConnected || !l(e) || E === !1 || y.contains(document.activeElement)) return;
-      const n = typeof E == "object" ? E.selector : void 0, r = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Y(e) ?? e;
+      if (!e?.isConnected || !a(e) || b === !1 || h.contains(document.activeElement)) return;
+      const n = typeof b == "object" ? b.selector : void 0, r = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Z(e) ?? e;
       try {
         r.focus({ preventScroll: !0 });
       } catch {
       }
     });
-    const L = (e) => {
-      if (e.key !== "Tab" || !l(e.target)) return;
+    const T = (e) => {
+      if (e.key !== "Tab" || !a(e.target)) return;
       const n = t.root();
       if (!n) return;
-      const m = t.focusRoots?.() ?? [n], r = t.focusRoots ? [...new Set(m.flatMap(x))].filter((u) => u.tabIndex >= 0 && !u.closest('[hidden], [inert], [aria-hidden="true"]')) : x(n);
+      const m = t.focusRoots?.() ?? [n], r = t.focusRoots ? [...new Set(m.flatMap(I))].filter((u) => u.tabIndex >= 0 && !u.closest('[hidden], [inert], [aria-hidden="true"]')) : I(n);
       if (!r.length) {
         e.preventDefault();
         try {
@@ -68,30 +68,30 @@ function ue(t) {
         }
         return;
       }
-      const D = r[0], P = r[r.length - 1], a = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const P = r[0], K = r[r.length - 1], i = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       if (t.focusRoots) {
-        const u = a ? r.indexOf(a) : -1, J = u < 0 ? e.shiftKey ? r.length - 1 : 0 : (u + (e.shiftKey ? -1 : 1) + r.length) % r.length;
-        e.preventDefault(), r[J]?.focus({ preventScroll: !0 });
+        const u = i ? r.indexOf(i) : -1, Q = u < 0 ? e.shiftKey ? r.length - 1 : 0 : (u + (e.shiftKey ? -1 : 1) + r.length) % r.length;
+        e.preventDefault(), r[Q]?.focus({ preventScroll: !0 });
         return;
       }
       if (e.shiftKey) {
-        if (a === D || !a || !m.some((u) => u.contains(a))) {
+        if (i === P || !i || !m.some((u) => u.contains(i))) {
           e.preventDefault();
           try {
-            P.focus();
+            K.focus();
           } catch {
           }
         }
-      } else if (a === P || !a || !m.some((u) => u.contains(a))) {
+      } else if (i === K || !i || !m.some((u) => u.contains(i))) {
         e.preventDefault();
         try {
-          D.focus();
+          P.focus();
         } catch {
         }
       }
     }, M = (e) => {
-      if (e.key !== "Escape" || !l(e.target) || h === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
-      const n = t.root(), m = p(
+      if (e.key !== "Escape" || !a(e.target) || y === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
+      const n = t.root(), m = g(
         n,
         A(e.target) ? e.target : document.activeElement,
         t.containsTarget
@@ -105,41 +105,43 @@ function ue(t) {
         return;
       }
       e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
-    }, O = (e) => {
-      if (!l(e.target)) return;
-      const n = t.root();
-      n && z && p(n, e.target, t.containsTarget) && ($(e, t.allowHotkeys) || e.stopPropagation());
     }, B = (e) => {
-      if (!l(e.target)) return;
+      if (!a(e.target)) return;
       const n = t.root();
-      W(n, e.target, g, t.containsTarget) && e.cancelable && e.preventDefault();
+      n && V && g(n, e.target, t.containsTarget) && (ee(e, t.allowHotkeys) || e.stopPropagation());
     }, F = (e) => {
-      l(e.target) && e.stopPropagation();
+      if (!a(e.target)) return;
+      const n = t.root();
+      W(n, e.target, E, t.containsTarget) && e.cancelable && e.preventDefault();
     }, S = (e) => {
-      if (!l(e.target)) return;
+      a(e.target) && e.stopPropagation();
+    }, C = (e) => {
+      if (!a(e.target)) return;
       const n = t.root();
       W(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
+    }, p = (e) => {
+      a(e.target) && !h.contains(e.target) && t.onInteractOutside?.(e);
     };
-    w && document.addEventListener("keydown", L, !0);
-    const C = h === "capture" ? window : document;
-    v !== "none" && C.addEventListener(
+    t.onInteractOutside && (document.addEventListener("pointerdown", p, !0), document.addEventListener("focusin", p)), L && document.addEventListener("keydown", T, !0);
+    const D = y === "capture" ? window : document;
+    v !== "none" && D.addEventListener(
       "keydown",
       M,
-      h === "capture"
-    ), document.addEventListener("keydown", O), g !== "none" && (document.addEventListener("wheel", B, { capture: !0, passive: !1 }), document.addEventListener("wheel", F)), k !== "none" && document.addEventListener("touchmove", S, {
+      y === "capture"
+    ), document.addEventListener("keydown", B), E !== "none" && (document.addEventListener("wheel", F, { capture: !0, passive: !1 }), document.addEventListener("wheel", S)), k !== "none" && document.addEventListener("touchmove", C, {
       capture: !0,
       passive: !1
-    }), U(() => {
-      T = !1, d.splice(d.indexOf(y), 1), w && document.removeEventListener("keydown", L, !0), v !== "none" && C.removeEventListener(
+    }), X(() => {
+      O = !1, document.removeEventListener("pointerdown", p, !0), document.removeEventListener("focusin", p), d.splice(d.indexOf(h), 1), L && document.removeEventListener("keydown", T, !0), v !== "none" && D.removeEventListener(
         "keydown",
         M,
-        h === "capture"
-      ), document.removeEventListener("keydown", O), g !== "none" && (document.removeEventListener("wheel", B, !0), document.removeEventListener("wheel", F)), k !== "none" && document.removeEventListener("touchmove", S, !0), G?.(), V && b && b.isConnected && K(() => {
+        y === "capture"
+      ), document.removeEventListener("keydown", B), E !== "none" && (document.removeEventListener("wheel", F, !0), document.removeEventListener("wheel", S)), k !== "none" && document.removeEventListener("touchmove", C, !0), J?.(), G && w && w.isConnected && x(() => {
         if (typeof document > "u") return;
         const e = document.activeElement;
         if (!(e && e !== document.body && e !== document.documentElement))
           try {
-            b.focus({ preventScroll: !0 });
+            w.focus({ preventScroll: !0 });
           } catch {
           }
       });
@@ -147,5 +149,5 @@ function ue(t) {
   });
 }
 export {
-  ue as useOverlayMask
+  se as useOverlayMask
 };