@tensor_1/react 2.26.2 → 2.27.0

package/dist/hooks/useAnchoredPosition.js

@@ -2,43 +2,174 @@
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { computePosition } from "../overlay-position.js";
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
-const resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+const resolveAnchor = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+let anchoringSupported;
+function supportsAnchoring() {
+  if (anchoringSupported === void 0) {
+    try {
+      const css = typeof CSS !== "undefined" ? CSS : void 0;
+      anchoringSupported = !!css && typeof css.supports === "function" && css.supports("anchor-name", "--uix-a") && css.supports("position-anchor", "--uix-a") && css.supports("top", "round(anchor(bottom) + 1px, 1px)");
+    } catch {
+      anchoringSupported = false;
+    }
+  }
+  return anchoringSupported;
+}
+let anchorCount = 0;
+const namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
+function addAnchorName(el, name) {
+  const names = namesOf(getComputedStyle(el).getPropertyValue("anchor-name"));
+  if (!names.includes(name)) names.push(name);
+  el.style.setProperty("anchor-name", names.join(", "));
+}
+function removeAnchorName(el, name) {
+  const names = namesOf(el.style.getPropertyValue("anchor-name")).filter((n) => n !== name);
+  if (names.length) el.style.setProperty("anchor-name", names.join(", "));
+  else el.style.removeProperty("anchor-name");
+}
+function translationOf(el) {
+  const t = getComputedStyle(el).transform;
+  if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
+  try {
+    const m = new DOMMatrixReadOnly(t);
+    return { x: m.m41, y: m.m42 };
+  } catch {
+    return { x: 0, y: 0 };
+  }
+}
+const signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
+const prepared = /* @__PURE__ */ new WeakSet();
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
   const opts = useRef({ placement, offset, padding });
   opts.current = { placement, offset, padding };
+  const session = useRef(false);
+  const side = useRef(null);
+  const written = useRef("");
+  const anchoring = useRef(null);
+  const anchoringFailed = useRef(false);
+  const anchorName = useRef("");
+  const release = useCallback((keepPlace) => {
+    const current = anchoring.current;
+    if (!current) return;
+    anchoring.current = null;
+    written.current = "";
+    const floating = floatingRef.current;
+    if (floating) {
+      const s = floating.style;
+      if (keepPlace && current.anchor.isConnected) {
+        const a = current.anchor.getBoundingClientRect();
+        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
+        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+      }
+      s.removeProperty("position-anchor");
+    }
+    removeAnchorName(current.anchor, current.name);
+  }, [floatingRef]);
   const reposition = useCallback(() => {
-    const anchorEl = resolve(anchor);
+    const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
     if (!anchorEl || !floating) return;
     const s = floating.style;
-    s.position = "fixed";
-    s.inset = "auto";
-    s.margin = "0";
+    if (!prepared.has(floating)) {
+      s.position = "fixed";
+      s.inset = "auto";
+      s.margin = "0";
+      prepared.add(floating);
+      written.current = "";
+    }
     const a = anchorEl.getBoundingClientRect();
+    const size = { width: floating.offsetWidth, height: floating.offsetHeight };
     const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
-      { width: floating.offsetWidth, height: floating.offsetHeight },
+      size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad }
+      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
     );
-    s.left = `${Math.round(pos.x)}px`;
-    s.top = `${Math.round(pos.y)}px`;
-    floating.dataset.placement = pos.placement;
-  }, [anchor, floatingRef]);
+    const measured = size.width > 0 || size.height > 0;
+    if (measured && session.current) side.current = pos.side;
+    if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    const writeFixed = (at) => {
+      const left2 = `${Math.round(at.x)}px`;
+      const top2 = `${Math.round(at.y)}px`;
+      const key2 = `fixed ${left2} ${top2}`;
+      if (key2 === written.current) return;
+      s.left = left2;
+      s.top = top2;
+      written.current = key2;
+    };
+    if (anchoringFailed.current || !supportsAnchoring()) {
+      writeFixed(pos);
+      return;
+    }
+    if (anchoring.current && anchoring.current.anchor !== anchorEl) release(false);
+    if (!anchoring.current) {
+      anchorName.current || (anchorName.current = `--uix-anchor-${++anchorCount}`);
+      addAnchorName(anchorEl, anchorName.current);
+      s.setProperty("position-anchor", anchorName.current);
+      anchoring.current = { anchor: anchorEl, name: anchorName.current, yEdge: "bottom", xEdge: "left", dy: 0, dx: 0, verified: false };
+      written.current = "";
+    }
+    const current = anchoring.current;
+    current.yEdge = pos.side === "bottom" ? "bottom" : "top";
+    current.xEdge = pos.side === "right" ? "right" : "left";
+    current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
+    current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const key = `anchored ${top} ${left}`;
+    if (key !== written.current) {
+      s.top = top;
+      s.left = left;
+      written.current = key;
+    }
+    if (!current.verified && measured) {
+      current.verified = true;
+      const box = floating.getBoundingClientRect();
+      const t = translationOf(floating);
+      const dxc = box.left + box.width / 2 - t.x - (pos.x + size.width / 2);
+      const dyc = box.top + box.height / 2 - t.y - (pos.y + size.height / 2);
+      if (Math.abs(dxc) > 2 || Math.abs(dyc) > 2) {
+        anchoringFailed.current = true;
+        release(false);
+        writeFixed(pos);
+      }
+    }
+  }, [anchor, floatingRef, release]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
+    session.current = true;
     reposition();
-    const onScroll = () => reposition();
+    const anchorEl = resolveAnchor(anchor);
+    const floating = floatingRef.current;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target && typeof target.contains === "function") {
+        if (floating?.contains(target)) return;
+        if (anchorEl && !target.contains(anchorEl)) return;
+      }
+      reposition();
+    };
+    const onResize = () => reposition();
     window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    window.addEventListener("resize", onScroll);
+    window.addEventListener("resize", onResize);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(() => reposition()) : null;
+    if (floating) observer?.observe(floating);
+    if (anchorEl) observer?.observe(anchorEl);
     return () => {
       window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+      session.current = false;
+      side.current = null;
+      anchoringFailed.current = false;
+      release(true);
     };
-  }, [open, reposition]);
+  }, [open, reposition, anchor, floatingRef, release]);
+  useEffect(() => () => release(false), [release]);
   return reposition;
 }
 export {
+  resolveAnchor,
   useAnchoredPosition
 };