@floegence/floe-webapp-core 0.26.2 → 0.26.5

package/dist/hooks/useFileBrowserDrag.js

@@ -1,41 +1,41 @@
-import { createSignal as B, createEffect as N, onCleanup as q } from "solid-js";
-import { lockBodyStyle as Y } from "../utils/bodyStyleLock.js";
-import { useFileBrowserDrag as x } from "../context/FileBrowserDragContext.js";
-const V = 5, W = 500, j = 10, i = 48, C = 24;
-function Z(n) {
-  const e = x(), [f, T] = B(!1);
-  let c = null, D = 0, P = 0, u = 0, g = 0, d = null, l = null, s = null, m = null, h = !1, p = "mouse";
-  const b = () => (n.enabled?.() ?? !0) && !!e, I = () => {
+import { createSignal as x, createEffect as q, onCleanup as Y } from "solid-js";
+import { lockBodyStyle as V } from "../utils/bodyStyleLock.js";
+import { useFileBrowserDrag as X } from "../context/FileBrowserDragContext.js";
+const W = 5, j = 500, z = 10, i = 48, b = 24;
+function $(n) {
+  const e = X(), [f, T] = x(!1);
+  let c = null, D = 0, P = 0, u = 0, g = 0, d = null, l = null, s = null, m = null, h = !1, p = "mouse", I = null;
+  const L = () => (n.enabled?.() ?? !0) && !!e, _ = () => {
     m !== null && (clearTimeout(m), m = null);
-  }, _ = (t) => {
+  }, R = (t) => {
     if (!t) {
       l?.(), l = null;
       return;
     }
-    l?.(), l = Y({ cursor: "grabbing", "user-select": "none" });
-  }, L = () => {
-    s !== null && (cancelAnimationFrame(s), s = null), I(), c = null, d = null, h = !1, _(!1), T(!1);
-  }, X = () => {
+    l?.(), l = V({ cursor: "grabbing", "user-select": "none" });
+  }, v = () => {
+    s !== null && (cancelAnimationFrame(s), s = null), _(), c = null, d = null, h = !1, I = null, R(!1), T(!1);
+  }, w = () => {
     if (!e) return;
     const t = e.getInstances();
     for (const [, a] of t) {
       const o = a.getScrollContainer();
-      o && R(o, u, g);
+      o && M(o, u, g);
       const r = a.getSidebarScrollContainer();
-      r && R(r, u, g);
+      r && M(r, u, g);
     }
-  }, R = (t, a, o) => {
-    const r = t.getBoundingClientRect();
-    if (a < r.left || a > r.right || o < r.top || o > r.bottom)
+  }, M = (t, a, o) => {
+    const r = I?.get(t) ?? t.getBoundingClientRect();
+    if (I?.set(t, r), a < r.left || a > r.right || o < r.top || o > r.bottom)
       return;
-    const M = o - r.top, O = r.bottom - o, y = a - r.left, A = r.right - a;
-    let v = 0, E = 0;
-    if (M < i ? v = -Math.ceil((i - M) / i * C) : O < i && (v = Math.ceil((i - O) / i * C)), y < i ? E = -Math.ceil((i - y) / i * C) : A < i && (E = Math.ceil((i - A) / i * C)), v !== 0) {
-      const S = Math.max(0, Math.min(t.scrollTop + v, t.scrollHeight - t.clientHeight));
+    const O = o - r.top, y = r.bottom - o, A = a - r.left, B = r.right - a;
+    let E = 0, C = 0;
+    if (O < i ? E = -Math.ceil((i - O) / i * b) : y < i && (E = Math.ceil((i - y) / i * b)), A < i ? C = -Math.ceil((i - A) / i * b) : B < i && (C = Math.ceil((i - B) / i * b)), E !== 0) {
+      const S = Math.max(0, Math.min(t.scrollTop + E, t.scrollHeight - t.clientHeight));
       S !== t.scrollTop && (t.scrollTop = S);
     }
-    if (E !== 0) {
-      const S = Math.max(0, Math.min(t.scrollLeft + E, t.scrollWidth - t.clientWidth));
+    if (C !== 0) {
+      const S = Math.max(0, Math.min(t.scrollLeft + C, t.scrollWidth - t.clientWidth));
       S !== t.scrollLeft && (t.scrollLeft = S);
     }
   }, F = () => {
@@ -45,20 +45,20 @@ function Z(n) {
         s = null;
         return;
       }
-      X(), s = requestAnimationFrame(t);
+      w(), s = requestAnimationFrame(t);
     };
     s = requestAnimationFrame(t);
   }, H = () => {
     if (!e || !d) return;
-    n.isSelected(d.id) || n.selectItem(d.id, !1);
+    I = /* @__PURE__ */ new Map(), n.isSelected(d.id) || n.selectItem(d.id, !1);
     const t = n.getSelectedItems(), o = (t.length > 0 && n.isSelected(d.id) ? t : [d]).map((r) => ({
       item: r,
       sourceInstanceId: n.instanceId,
       sourcePath: n.currentPath()
     }));
-    _(!0), T(!0), e.startDrag(o, u, g), n.onDragStart?.(), F();
-  }, w = (t, a) => {
-    b() && c === null && (t.pointerType === "mouse" && t.button !== 0 || (c = t.pointerId, p = t.pointerType, D = t.clientX, P = t.clientY, u = D, g = P, d = a, h = !1, t.currentTarget.setPointerCapture(t.pointerId), (p === "touch" || p === "pen") && (I(), m = setTimeout(() => {
+    R(!0), T(!0), e.startDrag(o, u, g), n.onDragStart?.(), F();
+  }, U = (t, a) => {
+    L() && c === null && (t.pointerType === "mouse" && t.button !== 0 || (c = t.pointerId, p = t.pointerType, D = t.clientX, P = t.clientY, u = D, g = P, d = a, h = !1, t.currentTarget.setPointerCapture(t.pointerId), (p === "touch" || p === "pen") && (_(), m = setTimeout(() => {
       if (c !== null && d) {
         if (h = !0, "vibrate" in navigator)
           try {
@@ -67,43 +67,43 @@ function Z(n) {
           }
         H();
       }
-    }, W))));
-  }, U = (t) => {
+    }, j))));
+  }, k = (t) => {
     if (c !== t.pointerId) return;
     u = t.clientX, g = t.clientY;
     const a = u - D, o = g - P, r = Math.sqrt(a * a + o * o);
-    if ((p === "touch" || p === "pen") && !h && r > j) {
-      I(), L();
+    if ((p === "touch" || p === "pen") && !h && r > z) {
+      _(), v();
       return;
     }
-    p === "mouse" && !f() && r > V && H(), f() && e && e.updateDrag(u, g);
-  }, k = (t) => {
+    p === "mouse" && !f() && r > W && H(), f() && e && e.updateDrag(u, g);
+  }, G = (t) => {
     if (c === t.pointerId) {
       try {
         t.currentTarget?.releasePointerCapture(t.pointerId);
       } catch {
       }
-      f() && e && e.endDrag(!0), L();
+      f() && e && e.endDrag(!0), v();
     }
-  }, G = (t) => {
-    c === t.pointerId && (f() && e && e.endDrag(!1), L());
+  }, N = (t) => {
+    c === t.pointerId && (f() && e && e.endDrag(!1), v());
   };
-  return N(() => {
-    if (!b() || typeof document > "u") return;
-    const t = (r) => U(r), a = (r) => k(r), o = (r) => G(r);
-    document.addEventListener("pointermove", t, !0), document.addEventListener("pointerup", a, !0), document.addEventListener("pointercancel", o, !0), q(() => {
-      L(), document.removeEventListener("pointermove", t, !0), document.removeEventListener("pointerup", a, !0), document.removeEventListener("pointercancel", o, !0);
+  return q(() => {
+    if (!L() || typeof document > "u") return;
+    const t = (r) => k(r), a = (r) => G(r), o = (r) => N(r);
+    document.addEventListener("pointermove", t, !0), document.addEventListener("pointerup", a, !0), document.addEventListener("pointercancel", o, !0), Y(() => {
+      v(), document.removeEventListener("pointermove", t, !0), document.removeEventListener("pointerup", a, !0), document.removeEventListener("pointercancel", o, !0);
     });
   }), {
     isDragging: f,
     getDragHandlers: (t) => ({
-      onPointerDown: (a) => w(a, t),
+      onPointerDown: (a) => U(a, t),
       "data-draggable": "true"
     })
   };
 }
-function $(n) {
-  const e = x(), [f, T] = B(!1), c = () => (n.enabled?.() ?? !0) && !!e, D = () => f() ? e?.dragState()?.isDragging ?? !1 : !1, P = () => {
+function tt(n) {
+  const e = X(), [f, T] = x(!1), c = () => (n.enabled?.() ?? !0) && !!e, D = () => f() ? e?.dragState()?.isDragging ?? !1 : !1, P = () => {
     if (!D() || !e) return !1;
     const l = e.dragState();
     return l.isDragging ? e.canDropOn(
@@ -117,7 +117,7 @@ function $(n) {
     const s = e.dragState();
     if (!s.isDragging) return;
     T(!0);
-    const m = n.targetPath(), h = n.targetItem(), p = e.canDropOn(s.draggedItems, m, h, n.instanceId), I = l.currentTarget?.getBoundingClientRect() ?? null;
+    const m = n.targetPath(), h = n.targetItem(), p = e.canDropOn(s.draggedItems, m, h, n.instanceId), L = l.currentTarget?.getBoundingClientRect() ?? null;
     e.setDropTarget(
       {
         instanceId: n.instanceId,
@@ -125,7 +125,7 @@ function $(n) {
         targetItem: h
       },
       p,
-      I
+      L
     );
   }, g = (l) => {
     if (!e) return;
@@ -144,6 +144,6 @@ function $(n) {
   };
 }
 export {
-  $ as useFileBrowserDropTarget,
-  Z as useFileBrowserItemDrag
+  tt as useFileBrowserDropTarget,
+  $ as useFileBrowserItemDrag
 };

package/dist/hooks/useOverlayMask.d.ts

@@ -0,0 +1,26 @@
+import { type Accessor } from 'solid-js';
+export type OverlayScrollBlockMode = 'none' | 'outside' | 'all';
+export interface UseOverlayMaskOptions {
+    open: Accessor<boolean>;
+    root: Accessor<HTMLElement | undefined>;
+    onClose?: () => void;
+    /** Lock `document.body` scroll while the overlay is open (default: true). */
+    lockBodyScroll?: boolean;
+    /** Prevent scroll via wheel events (default: none). */
+    blockWheel?: OverlayScrollBlockMode;
+    /** Prevent scroll via touch-move events (default: none). */
+    blockTouchMove?: OverlayScrollBlockMode;
+    /** Keep tab focus within the overlay root (default: true). */
+    trapFocus?: boolean;
+    /** Close on Escape and never leak to underlying window handlers (default: true). */
+    closeOnEscape?: boolean;
+    /** Stop bubbling keydown events to window-level hotkeys (default: true). */
+    blockHotkeys?: boolean;
+    /** Auto-focus on open (default: true). */
+    autoFocus?: boolean | {
+        selector?: string;
+    };
+    /** Restore focus to the previously active element on close (default: true). */
+    restoreFocus?: boolean;
+}
+export declare function useOverlayMask(options: UseOverlayMaskOptions): void;

package/dist/hooks/useOverlayMask.js

@@ -0,0 +1,85 @@
+import { createEffect as g, onCleanup as T } from "solid-js";
+import { lockBodyStyle as B } from "../utils/bodyStyleLock.js";
+import { deferAfterPaint as E } from "../utils/defer.js";
+import { getFocusableElements as F, getFirstFocusableElement as M } from "../utils/focus.js";
+function k(t) {
+  return typeof Node < "u" && t instanceof Node;
+}
+function p(t, c, r) {
+  return r === "none" ? !1 : r === "all" || !t || !k(c) ? !0 : !t.contains(c);
+}
+function H(t) {
+  const c = () => t.lockBodyScroll !== !1, r = () => t.trapFocus !== !1, s = () => t.closeOnEscape !== !1, b = () => t.blockHotkeys !== !1, w = () => t.restoreFocus !== !1;
+  g(() => {
+    if (!t.open() || typeof document > "u") return;
+    const a = document.activeElement instanceof HTMLElement ? document.activeElement : null, L = c() ? B({ overflow: "hidden" }) : null;
+    E(() => {
+      const e = t.root();
+      if (!e) return;
+      const n = t.autoFocus;
+      if (n === !1) return;
+      const o = typeof n == "object" ? n.selector : void 0, u = (o ? e.querySelector(o) : null) ?? e.querySelector("[data-floe-autofocus]") ?? M(e) ?? e;
+      try {
+        u.focus();
+      } catch {
+      }
+    });
+    const d = (e) => {
+      if (e.key !== "Tab") return;
+      const n = t.root();
+      if (!n) return;
+      const o = F(n);
+      if (!o.length) {
+        e.preventDefault();
+        try {
+          n.focus();
+        } catch {
+        }
+        return;
+      }
+      const f = o[0], u = o[o.length - 1], l = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      if (e.shiftKey) {
+        if (l === f || !l || !n.contains(l)) {
+          e.preventDefault();
+          try {
+            u.focus();
+          } catch {
+          }
+        }
+      } else if (l === u) {
+        e.preventDefault();
+        try {
+          f.focus();
+        } catch {
+        }
+      }
+    }, i = (e) => {
+      e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.());
+    }, m = (e) => {
+      const n = t.root();
+      n && b() && k(e.target) && n.contains(e.target) && e.stopPropagation();
+    }, v = (e) => {
+      const n = t.blockWheel ?? "none", o = t.root();
+      p(o, e.target, n) && e.cancelable && e.preventDefault();
+    }, h = (e) => {
+      e.stopPropagation();
+    }, y = (e) => {
+      const n = t.blockTouchMove ?? "none", o = t.root();
+      p(o, e.target, n) && e.cancelable && e.preventDefault();
+    };
+    r() && document.addEventListener("keydown", d, !0), s() && window.addEventListener("keydown", i, !0), document.addEventListener("keydown", m), (t.blockWheel ?? "none") !== "none" && (document.addEventListener("wheel", v, { capture: !0, passive: !1 }), document.addEventListener("wheel", h)), (t.blockTouchMove ?? "none") !== "none" && document.addEventListener("touchmove", y, { capture: !0, passive: !1 }), T(() => {
+      r() && document.removeEventListener("keydown", d, !0), s() && window.removeEventListener("keydown", i, !0), document.removeEventListener("keydown", m), (t.blockWheel ?? "none") !== "none" && (document.removeEventListener("wheel", v, !0), document.removeEventListener("wheel", h)), (t.blockTouchMove ?? "none") !== "none" && document.removeEventListener("touchmove", y, !0), L?.(), w() && a && a.isConnected && E(() => {
+        if (typeof document > "u") return;
+        const e = document.activeElement;
+        if (!(e && e !== document.body && e !== document.documentElement))
+          try {
+            a.focus();
+          } catch {
+          }
+      });
+    });
+  });
+}
+export {
+  H as useOverlayMask
+};