@geomak/ui 7.17.0 → 7.17.1

package/dist/index.js

@@ -5056,12 +5056,52 @@ function useTargetBbox(ref) {
 }
 var TOOLTIP_WIDTH = 280;
 var TOOLTIP_GAP = 12;
-function tooltipStyleFor(bbox, placement) {
-  const pl = placement ?? "right";
-  if (pl === "right") return { left: bbox.right + TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
-  if (pl === "left") return { left: bbox.left - TOOLTIP_WIDTH - TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
-  if (pl === "bottom") return { left: bbox.left + bbox.width / 2, top: bbox.bottom + TOOLTIP_GAP, transform: "translateX(-50%)", width: TOOLTIP_WIDTH };
-  return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
+function tooltipStyleFor(bbox, placement, tooltipHeight) {
+  const GAP2 = TOOLTIP_GAP;
+  const W = TOOLTIP_WIDTH;
+  const H = tooltipHeight;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let side = placement ?? "right";
+  if (side === "right" && bbox.right + GAP2 + W > vw) side = "left";
+  if (side === "left" && bbox.left - W - GAP2 < 0) side = "right";
+  if (side === "bottom" && bbox.bottom + GAP2 + H > vh) side = "top";
+  if (side === "top" && bbox.top - GAP2 - H < 0) side = "bottom";
+  let left;
+  let top;
+  let transform;
+  if (side === "right") {
+    left = bbox.right + GAP2;
+    top = bbox.top + bbox.height / 2;
+    transform = "translateY(-50%)";
+  } else if (side === "left") {
+    left = bbox.left - W - GAP2;
+    top = bbox.top + bbox.height / 2;
+    transform = "translateY(-50%)";
+  } else if (side === "bottom") {
+    left = bbox.left + bbox.width / 2;
+    top = bbox.bottom + GAP2;
+    transform = "translateX(-50%)";
+  } else {
+    left = bbox.left + bbox.width / 2;
+    top = bbox.top - GAP2;
+    transform = "translate(-50%, -100%)";
+  }
+  if (side === "top" || side === "bottom") {
+    left = Math.max(GAP2 + W / 2, Math.min(left, vw - W / 2 - GAP2));
+  } else {
+    left = Math.max(GAP2, Math.min(left, vw - W - GAP2));
+  }
+  if (H > 0) {
+    if (side === "right" || side === "left") {
+      top = Math.max(GAP2 + H / 2, Math.min(top, vh - GAP2 - H / 2));
+    } else if (side === "bottom") {
+      top = Math.max(GAP2, Math.min(top, vh - GAP2 - H));
+    } else {
+      top = Math.max(GAP2 + H, Math.min(top, vh - GAP2));
+    }
+  }
+  return { left, top, transform, width: W };
 }
 function useFocusTrap(containerRef, active) {
   useEffect(() => {
@@ -5109,6 +5149,11 @@ function Wizard({
   const reduced = useReducedMotion();
   const [open, setOpen] = useState(() => steps.length > 0 && !readDismissed(storageKey));
   const [activeIndex, setActiveIndex] = useState(0);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+  useLayoutEffect(() => {
+    const h = tooltipRef.current?.offsetHeight ?? 0;
+    if (h > 0) setTooltipHeight((prev) => prev === h ? prev : h);
+  }, [activeIndex, open]);
   const step = steps[activeIndex];
   const bbox = useTargetBbox(step?.stepRef);
   useFocusTrap(tooltipRef, open);
@@ -5161,7 +5206,7 @@ function Wizard({
     right: 0,
     height: bbox.height + SPOT_PAD * 2
   } : { display: "none" };
-  const tooltipStyle = bbox ? tooltipStyleFor(bbox, step?.placement) : { display: "none" };
+  const tooltipStyle = bbox ? tooltipStyleFor(bbox, step?.placement, tooltipHeight) : { display: "none" };
   const isLast = activeIndex === steps.length - 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,