@floegence/floe-webapp-core 0.77.2 → 0.78.0

package/dist/components/layout/index.d.ts

@@ -1,4 +1,5 @@
 export { Shell, type ShellProps, type ShellSlotClassNames } from './Shell';
+export type { MobileNavigationPanelProps } from './MobileNavigationPanel';
 export { ActivityBar, type ActivityBarItem, type ActivityBarProps } from './ActivityBar';
 export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemContextMenuSource, } from './barItemContextMenu';
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';

package/dist/hooks/useOverlayMask.d.ts

@@ -5,6 +5,8 @@ type MaybeAccessor<T> = T | Accessor<T>;
 export interface UseOverlayMaskOptions {
     open: Accessor<boolean>;
     root: Accessor<HTMLElement | undefined>;
+    /** Ordered focus regions that belong to one overlay, including persistent navigation. */
+    focusRoots?: Accessor<readonly HTMLElement[]>;
     onClose?: () => void;
     /** Treat additional nodes as part of the overlay surface (e.g. portaled layers). */
     containsTarget?: (target: EventTarget | null) => boolean;

package/dist/hooks/useOverlayMask.js

@@ -1,66 +1,66 @@
-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) {
+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";
+const H = /* @__PURE__ */ new WeakMap();
+function A(t) {
   return typeof Node < "u" && t instanceof Node;
 }
-function p(t, o, r) {
-  return r ? r(o) : !t || !K(o) ? !1 : t.contains(o);
+function p(t, o, c) {
+  return c ? c(o) : !t || !A(o) ? !1 : t.contains(o);
 }
-function H(t, o, r, a) {
-  return r === "none" ? !1 : r === "all" ? !0 : !p(t, o, a);
+function W(t, o, c, i) {
+  return c === "none" ? !1 : c === "all" ? !0 : !p(t, o, i);
 }
-function X(t) {
+function _(t) {
   return typeof t == "function" ? t() ?? [] : t ?? [];
 }
-function c(t, o) {
+function s(t, o) {
   return typeof t == "function" ? t() ?? o : t ?? o;
 }
-function Y(t, o) {
-  for (const r of X(o)) {
-    const a = r.trim();
-    if (a && U(t, a))
+function $(t, o) {
+  for (const c of _(o)) {
+    const i = c.trim();
+    if (i && Z(t, i))
       return !0;
   }
   return !1;
 }
-function oe(t) {
-  const o = () => c(t.lockBodyScroll, !0), r = () => c(t.trapFocus, !0), a = () => {
-    const i = c(
+function ue(t) {
+  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), i = () => {
+    const f = s(
       t.closeOnEscape,
       !0
     );
-    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(() => {
+    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(() => {
     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",
+    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) ?? [];
+    H.set(document, d);
+    const y = {
+      global: f || v === "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(() => {
+    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(() => {
       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;
+      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;
       try {
-        y.focus();
+        r.focus({ preventScroll: !0 });
       } catch {
       }
     });
-    const T = (e) => {
-      if (e.key !== "Tab" || !u(e.target)) return;
+    const L = (e) => {
+      if (e.key !== "Tab" || !l(e.target)) return;
       const n = t.root();
       if (!n) return;
-      const s = J(n);
-      if (!s.length) {
+      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);
+      if (!r.length) {
         e.preventDefault();
         try {
           n.focus();
@@ -68,31 +68,36 @@ function oe(t) {
         }
         return;
       }
-      const y = s[0], P = s[s.length - 1], f = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const D = r[0], P = r[r.length - 1], a = 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 });
+        return;
+      }
       if (e.shiftKey) {
-        if (f === y || !f || !n.contains(f)) {
+        if (a === D || !a || !m.some((u) => u.contains(a))) {
           e.preventDefault();
           try {
             P.focus();
           } catch {
           }
         }
-      } else if (f === P || !f || !n.contains(f)) {
+      } else if (a === P || !a || !m.some((u) => u.contains(a))) {
         e.preventDefault();
         try {
-          y.focus();
+          D.focus();
         } catch {
         }
       }
-    }, L = (e) => {
-      if (e.key !== "Escape" || !u(e.target) || m === "bubble" && (e.defaultPrevented || e.isComposing) || d === "none") return;
-      const n = t.root(), s = p(
+    }, M = (e) => {
+      if (e.key !== "Escape" || !l(e.target) || h === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
+      const n = t.root(), m = p(
         n,
-        K(e.target) ? e.target : document.activeElement,
+        A(e.target) ? e.target : document.activeElement,
         t.containsTarget
       );
-      if (d === "inside") {
-        if (s) {
+      if (v === "inside") {
+        if (m) {
           e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
           return;
         }
@@ -100,41 +105,41 @@ function oe(t) {
         return;
       }
       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;
+      if (!l(e.target)) return;
       const n = t.root();
-      H(n, e.target, h, t.containsTarget) && e.cancelable && e.preventDefault();
+      n && z && p(n, e.target, t.containsTarget) && ($(e, t.allowHotkeys) || e.stopPropagation());
     }, B = (e) => {
-      u(e.target) && e.stopPropagation();
+      if (!l(e.target)) return;
+      const n = t.root();
+      W(n, e.target, g, t.containsTarget) && e.cancelable && e.preventDefault();
     }, F = (e) => {
-      if (!u(e.target)) return;
+      l(e.target) && e.stopPropagation();
+    }, S = (e) => {
+      if (!l(e.target)) return;
       const n = t.root();
-      H(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
+      W(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
     };
-    b && document.addEventListener("keydown", T, !0);
-    const C = m === "capture" ? window : document;
-    d !== "none" && C.addEventListener(
+    w && document.addEventListener("keydown", L, !0);
+    const C = h === "capture" ? window : document;
+    v !== "none" && C.addEventListener(
       "keydown",
-      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, {
+      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, {
       capture: !0,
       passive: !1
-    }), V(() => {
-      w = !1, l.splice(l.indexOf(v), 1), b && document.removeEventListener("keydown", T, !0), d !== "none" && C.removeEventListener(
+    }), U(() => {
+      T = !1, d.splice(d.indexOf(y), 1), w && document.removeEventListener("keydown", L, !0), v !== "none" && C.removeEventListener(
         "keydown",
-        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(() => {
+        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(() => {
         if (typeof document > "u") return;
         const e = document.activeElement;
         if (!(e && e !== document.body && e !== document.documentElement))
           try {
-            g.focus();
+            b.focus({ preventScroll: !0 });
           } catch {
           }
       });
@@ -142,5 +147,5 @@ function oe(t) {
   });
 }
 export {
-  oe as useOverlayMask
+  ue as useOverlayMask
 };