@floegence/floe-webapp-core 0.36.1 → 0.36.3

package/dist/hooks/useOverlayMask.d.ts

@@ -1,6 +1,7 @@
 import { type Accessor } from 'solid-js';
 export type OverlayScrollBlockMode = 'none' | 'outside' | 'all';
 export type OverlayEscapeCloseMode = 'none' | 'inside' | 'always';
+type MaybeAccessor<T> = T | Accessor<T>;
 export interface UseOverlayMaskOptions {
     open: Accessor<boolean>;
     root: Accessor<HTMLElement | undefined>;
@@ -10,17 +11,17 @@ export interface UseOverlayMaskOptions {
     /** Optional alternate close path for Escape pressed outside the overlay surface. */
     onEscapeOutside?: () => void;
     /** Lock `document.body` scroll while the overlay is open (default: true). */
-    lockBodyScroll?: boolean;
+    lockBodyScroll?: MaybeAccessor<boolean | undefined>;
     /** Prevent scroll via wheel events (default: none). */
-    blockWheel?: OverlayScrollBlockMode;
+    blockWheel?: MaybeAccessor<OverlayScrollBlockMode | undefined>;
     /** Prevent scroll via touch-move events (default: none). */
-    blockTouchMove?: OverlayScrollBlockMode;
+    blockTouchMove?: MaybeAccessor<OverlayScrollBlockMode | undefined>;
     /** Keep tab focus within the overlay root (default: true). */
-    trapFocus?: boolean;
+    trapFocus?: MaybeAccessor<boolean | undefined>;
     /** Close on Escape and never leak to underlying window handlers (default: always). */
-    closeOnEscape?: boolean | OverlayEscapeCloseMode;
+    closeOnEscape?: MaybeAccessor<boolean | OverlayEscapeCloseMode | undefined>;
     /** Stop bubbling keydown events to window-level hotkeys (default: true). */
-    blockHotkeys?: boolean;
+    blockHotkeys?: MaybeAccessor<boolean | undefined>;
     /**
      * Allow a small set of global keybinds to continue bubbling to window-level handlers
      * while the overlay is focused. This is primarily used by floating overlays that must
@@ -28,10 +29,11 @@ export interface UseOverlayMaskOptions {
      */
     allowHotkeys?: readonly string[] | Accessor<readonly string[] | undefined>;
     /** Auto-focus on open (default: true). */
-    autoFocus?: boolean | {
+    autoFocus?: MaybeAccessor<boolean | {
         selector?: string;
-    };
+    } | undefined>;
     /** Restore focus to the previously active element on close (default: true). */
-    restoreFocus?: boolean;
+    restoreFocus?: MaybeAccessor<boolean | undefined>;
 }
 export declare function useOverlayMask(options: UseOverlayMaskOptions): void;
+export {};

package/dist/hooks/useOverlayMask.js

@@ -1,50 +1,54 @@
-import { createEffect as T, onCleanup as O } from "solid-js";
-import { lockBodyStyle as M } from "../utils/bodyStyleLock.js";
-import { deferAfterPaint as k } from "../utils/defer.js";
-import { getFocusableElements as B, getFirstFocusableElement as D } from "../utils/focus.js";
-import { matchKeybind as F } from "../utils/keybind.js";
-function b(e) {
+import { createEffect as K, onCleanup as I } from "solid-js";
+import { lockBodyStyle as N } from "../utils/bodyStyleLock.js";
+import { deferAfterPaint as B } from "../utils/defer.js";
+import { getFocusableElements as q, getFirstFocusableElement as j } from "../utils/focus.js";
+import { matchKeybind as x } from "../utils/keybind.js";
+function M(e) {
   return typeof Node < "u" && e instanceof Node;
 }
-function i(e, c, r) {
-  return r ? r(c) : !e || !b(c) ? !1 : e.contains(c);
+function h(e, o, r) {
+  return r ? r(o) : !e || !M(o) ? !1 : e.contains(o);
 }
-function p(e, c, r, u) {
-  return r === "none" ? !1 : r === "all" ? !0 : !i(e, c, u);
+function F(e, o, r, s) {
+  return r === "none" ? !1 : r === "all" ? !0 : !h(e, o, s);
 }
-function C(e) {
+function z(e) {
   return typeof e == "function" ? e() ?? [] : e ?? [];
 }
-function P(e, c) {
-  for (const r of C(c)) {
-    const u = r.trim();
-    if (u && F(e, u))
+function c(e, o) {
+  return typeof e == "function" ? e() ?? o : e ?? o;
+}
+function R(e, o) {
+  for (const r of z(o)) {
+    const s = r.trim();
+    if (s && x(e, s))
       return !0;
   }
   return !1;
 }
-function N(e) {
-  const c = () => e.lockBodyScroll !== !1, r = () => e.trapFocus !== !1, u = () => e.closeOnEscape === !1 ? "none" : e.closeOnEscape === "inside" ? "inside" : e.closeOnEscape === "none" ? "none" : "always", w = () => e.blockHotkeys !== !1, g = () => e.restoreFocus !== !1;
-  T(() => {
+function Y(e) {
+  const o = () => c(e.lockBodyScroll, !0), r = () => c(e.trapFocus, !0), s = () => {
+    const a = c(e.closeOnEscape, !0);
+    return a === !1 ? "none" : a === "inside" ? "inside" : a === "none" ? "none" : "always";
+  }, O = () => c(e.blockHotkeys, !0), C = () => c(e.restoreFocus, !0), D = () => c(e.blockWheel, "none"), S = () => c(e.blockTouchMove, "none"), H = () => c(e.autoFocus, !0);
+  K(() => {
     if (!e.open() || typeof document > "u") return;
-    const s = document.activeElement instanceof HTMLElement ? document.activeElement : null, L = c() ? M({ overflow: "hidden" }) : null;
-    k(() => {
+    const a = o(), p = r(), l = s(), P = O(), W = C(), d = D(), m = S(), v = H(), y = document.activeElement instanceof HTMLElement ? document.activeElement : null, A = a ? N({ overflow: "hidden" }) : null;
+    B(() => {
       const t = e.root();
-      if (!t) return;
-      const n = e.autoFocus;
-      if (n === !1) return;
-      const o = typeof n == "object" ? n.selector : void 0, f = (o ? t.querySelector(o) : null) ?? t.querySelector("[data-floe-autofocus]") ?? D(t) ?? t;
+      if (!t || v === !1) return;
+      const n = typeof v == "object" ? v.selector : void 0, f = (n ? t.querySelector(n) : null) ?? t.querySelector("[data-floe-autofocus]") ?? j(t) ?? t;
       try {
         f.focus();
       } catch {
       }
     });
-    const d = (t) => {
+    const E = (t) => {
       if (t.key !== "Tab") return;
       const n = e.root();
       if (!n) return;
-      const o = B(n);
-      if (!o.length) {
+      const u = q(n);
+      if (!u.length) {
         t.preventDefault();
         try {
           n.focus();
@@ -52,29 +56,27 @@ function N(e) {
         }
         return;
       }
-      const a = o[0], f = o[o.length - 1], l = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const f = u[0], T = u[u.length - 1], i = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       if (t.shiftKey) {
-        if (l === a || !l || !n.contains(l)) {
+        if (i === f || !i || !n.contains(i)) {
           t.preventDefault();
           try {
-            f.focus();
+            T.focus();
           } catch {
           }
         }
-      } else if (l === f) {
+      } else if (i === T) {
         t.preventDefault();
         try {
-          a.focus();
+          f.focus();
         } catch {
         }
       }
-    }, m = (t) => {
-      if (t.key !== "Escape") return;
-      const n = u();
-      if (n === "none") return;
-      const o = e.root(), a = i(o, b(t.target) ? t.target : document.activeElement, e.containsTarget);
-      if (n === "inside") {
-        if (a) {
+    }, k = (t) => {
+      if (t.key !== "Escape" || l === "none") return;
+      const n = e.root(), u = h(n, M(t.target) ? t.target : document.activeElement, e.containsTarget);
+      if (l === "inside") {
+        if (u) {
           t.preventDefault(), t.stopImmediatePropagation(), e.onClose?.();
           return;
         }
@@ -82,25 +84,25 @@ function N(e) {
         return;
       }
       t.preventDefault(), t.stopImmediatePropagation(), e.onClose?.();
-    }, v = (t) => {
+    }, b = (t) => {
+      const n = e.root();
+      n && P && h(n, t.target, e.containsTarget) && (R(t, e.allowHotkeys) || t.stopPropagation());
+    }, w = (t) => {
       const n = e.root();
-      n && w() && i(n, t.target, e.containsTarget) && (P(t, e.allowHotkeys) || t.stopPropagation());
-    }, y = (t) => {
-      const n = e.blockWheel ?? "none", o = e.root();
-      p(o, t.target, n, e.containsTarget) && t.cancelable && t.preventDefault();
-    }, h = (t) => {
+      F(n, t.target, d, e.containsTarget) && t.cancelable && t.preventDefault();
+    }, g = (t) => {
       t.stopPropagation();
-    }, E = (t) => {
-      const n = e.blockTouchMove ?? "none", o = e.root();
-      p(o, t.target, n, e.containsTarget) && t.cancelable && t.preventDefault();
+    }, L = (t) => {
+      const n = e.root();
+      F(n, t.target, m, e.containsTarget) && t.cancelable && t.preventDefault();
     };
-    r() && document.addEventListener("keydown", d, !0), u() !== "none" && window.addEventListener("keydown", m, !0), document.addEventListener("keydown", v), (e.blockWheel ?? "none") !== "none" && (document.addEventListener("wheel", y, { capture: !0, passive: !1 }), document.addEventListener("wheel", h)), (e.blockTouchMove ?? "none") !== "none" && document.addEventListener("touchmove", E, { capture: !0, passive: !1 }), O(() => {
-      r() && document.removeEventListener("keydown", d, !0), u() !== "none" && window.removeEventListener("keydown", m, !0), document.removeEventListener("keydown", v), (e.blockWheel ?? "none") !== "none" && (document.removeEventListener("wheel", y, !0), document.removeEventListener("wheel", h)), (e.blockTouchMove ?? "none") !== "none" && document.removeEventListener("touchmove", E, !0), L?.(), g() && s && s.isConnected && k(() => {
+    p && document.addEventListener("keydown", E, !0), l !== "none" && window.addEventListener("keydown", k, !0), document.addEventListener("keydown", b), d !== "none" && (document.addEventListener("wheel", w, { capture: !0, passive: !1 }), document.addEventListener("wheel", g)), m !== "none" && document.addEventListener("touchmove", L, { capture: !0, passive: !1 }), I(() => {
+      p && document.removeEventListener("keydown", E, !0), l !== "none" && window.removeEventListener("keydown", k, !0), document.removeEventListener("keydown", b), d !== "none" && (document.removeEventListener("wheel", w, !0), document.removeEventListener("wheel", g)), m !== "none" && document.removeEventListener("touchmove", L, !0), A?.(), W && y && y.isConnected && B(() => {
         if (typeof document > "u") return;
         const t = document.activeElement;
         if (!(t && t !== document.body && t !== document.documentElement))
           try {
-            s.focus();
+            y.focus();
           } catch {
           }
       });
@@ -108,5 +110,5 @@ function N(e) {
   });
 }
 export {
-  N as useOverlayMask
+  Y as useOverlayMask
 };