@floegence/floe-webapp-core 0.52.5 → 0.52.7

package/dist/components/ui/SurfaceFloatingPanel.js

@@ -0,0 +1,136 @@
+import { memo as A, createComponent as $, mergeProps as W, template as k, use as E } from "solid-js/web";
+import { splitProps as R, createSignal as y, createMemo as _, onMount as B, onCleanup as K } from "solid-js";
+import { SurfaceFloatingLayer as L } from "./SurfaceFloatingLayer.js";
+import { readSurfaceSafeArea as j, resolveFloatingBoundary as q } from "./surfaceFloatingBoundary.js";
+import { startPointerSession as G } from "./pointerSession.js";
+import { resolveSurfacePortalHost as I, resolveSurfacePortalScale as O } from "./dialogSurfaceScope.js";
+var T = /* @__PURE__ */ k("<span hidden>");
+function Z(X) {
+  const [l, Y] = R(X, ["children", "owner", "boundary", "style"]);
+  let m, d, p, h = !1;
+  const v = j(), [C, D] = y(!1), [w, x] = y({
+    x: 1,
+    y: 1
+  }), [a, F] = y({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    panelWidth: 0,
+    panelHeight: 0,
+    scaleX: 1,
+    scaleY: 1
+  }), P = () => l.owner ?? m, f = () => {
+    if (!d) return;
+    const t = I({
+      owner: P()
+    }), e = q(t, l.boundary, v), o = O(t), n = d.getBoundingClientRect(), i = {
+      left: e?.left ?? 0,
+      top: e?.top ?? 0,
+      width: e?.width ?? 0,
+      height: e?.height ?? 0,
+      panelWidth: n.width,
+      panelHeight: n.height,
+      scaleX: o.x,
+      scaleY: o.y
+    };
+    F((r) => Object.keys(i).every((c) => i[c] === r[c]) ? r : i);
+  }, g = _(() => {
+    const t = a(), e = w();
+    return {
+      x: t.left + 8 + e.x * Math.max(0, t.width - t.panelWidth - 16),
+      y: t.top + 8 + e.y * Math.max(0, t.height - t.panelHeight - 16)
+    };
+  }), M = (t, e) => {
+    const o = a(), n = (i, r) => r > 0 ? Math.max(0, Math.min(1, i / r)) : 0;
+    x({
+      x: n(t - o.left - 8, o.width - o.panelWidth - 16),
+      y: n(e - o.top - 8, o.height - o.panelHeight - 16)
+    });
+  }, H = {
+    style: {
+      "touch-action": "none",
+      "user-select": "none"
+    },
+    onPointerDown: (t) => {
+      if (t.button !== 0 || p) return;
+      t.stopPropagation(), f();
+      const e = w(), o = g(), n = t.clientX, i = t.clientY;
+      h = !1;
+      let r = !1;
+      const c = (s, u) => {
+        const S = s - n, b = u - i;
+        r ||= Math.hypot(S, b) >= 4, r && M(o.x + S, o.y + b);
+      };
+      p = G({
+        pointerEvent: t,
+        captureEl: t.currentTarget,
+        onMove: (s) => {
+          s.preventDefault(), c(s.clientX, s.clientY);
+        },
+        onEnd: ({
+          commit: s,
+          snapshot: u
+        }) => {
+          s ? c(u.latestClientX, u.latestClientY) : x(e), h = r, p = void 0;
+        }
+      });
+    },
+    "oncapture:click": (t) => {
+      h && t.detail !== 0 && (t.preventDefault(), t.stopImmediatePropagation()), h = !1;
+    },
+    onKeyDown: (t) => {
+      const e = {
+        ArrowLeft: [-1, 0],
+        ArrowRight: [1, 0],
+        ArrowUp: [0, -1],
+        ArrowDown: [0, 1]
+      }[t.key];
+      if (!e) return;
+      t.preventDefault(), t.stopPropagation(), f();
+      const o = g(), n = t.shiftKey ? 40 : 10;
+      M(o.x + e[0] * n, o.y + e[1] * n);
+    }
+  };
+  return B(() => {
+    D(!0);
+    let t = 0;
+    const e = () => {
+      f(), t = requestAnimationFrame(e);
+    };
+    e(), K(() => {
+      cancelAnimationFrame(t), p?.stop();
+    });
+  }), [(() => {
+    var t = T(), e = m;
+    return typeof e == "function" ? E(e, t) : m = t, t;
+  })(), A(() => A(() => !!C())() && $(L, W(Y, {
+    get owner() {
+      return P();
+    },
+    get boundary() {
+      return l.boundary;
+    },
+    get position() {
+      return g();
+    },
+    clamp: !1,
+    layerRef: (t) => {
+      d = t;
+    },
+    get style() {
+      return {
+        ...l.style,
+        "max-width": `${Math.max(0, a().width - 16) / a().scaleX}px`,
+        "max-height": `${Math.max(0, a().height - 16) / a().scaleY}px`,
+        visibility: a().width <= 16 || a().height <= 16 ? "hidden" : void 0
+      };
+    },
+    get children() {
+      return l.children(H);
+    }
+  })))];
+}
+export {
+  Z as SurfaceFloatingPanel
+};

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

@@ -5,6 +5,7 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { DialogPlacementProvider, type DialogPlacementMode, type DialogPlacementProviderProps, } from './DialogPlacementContext';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
+export { SurfaceFloatingPanel, type SurfaceFloatingPanelProps, type SurfaceFloatingPanelHandleProps } from './SurfaceFloatingPanel';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
 export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';