@floegence/floe-webapp-core 0.51.0 → 0.52.1

package/dist/floe.css

@@ -490,6 +490,37 @@
     --floe-floating-exit-scale: 0.985;
   }
 
+  .floe-bottom-drawer-overlay {
+    padding: max(1.25rem, env(safe-area-inset-top, 0px))
+      max(1.5rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px))
+      max(1.5rem, env(safe-area-inset-left, 0px));
+  }
+
+  .floe-bottom-drawer-backdrop {
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+    --floe-floating-enter-duration: 240ms;
+    --floe-floating-exit-duration: 180ms;
+  }
+
+  .floe-bottom-drawer-panel {
+    --floe-floating-enter-duration: 240ms;
+    --floe-floating-exit-duration: 180ms;
+    --floe-floating-enter-y: calc(100% + 1.25rem);
+    --floe-floating-exit-y: calc(100% + 1.25rem);
+    --floe-floating-enter-scale: 1;
+    --floe-floating-exit-scale: 1;
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+
+  @media (max-width: 639px) {
+    .floe-bottom-drawer-overlay {
+      padding: max(0.75rem, env(safe-area-inset-top, 0px))
+        max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px))
+        max(0.75rem, env(safe-area-inset-left, 0px));
+    }
+  }
+
   .floe-floating-menu {
     --floe-floating-enter-duration: 120ms;
     --floe-floating-exit-duration: 100ms;

package/dist/hooks/useOverlayMask.js

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