@geomak/ui 7.3.4 → 7.4.0

package/dist/index.cjs

@@ -4577,6 +4577,10 @@ function List2({
     );
   }) });
 }
+var rectOf = (el) => {
+  const r = el.getBoundingClientRect();
+  return { left: r.left, top: r.top, width: r.width, height: r.height };
+};
 var TOGGLE_POSITION_CLASS = {
   "top-left": "top-2 left-2",
   "top-right": "top-2 right-2",
@@ -4595,17 +4599,56 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
+  expandContainerRef,
   className = ""
 }) {
   const containerRef = React30.useRef(null);
   const [internalScaled, setInternalScaled] = React30.useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
+  const usePortal = expandContainerRef != null;
+  const [overlay, setOverlay] = React30.useState("closed");
+  const [fromRect, setFromRect] = React30.useState(null);
+  const [targetRect, setTargetRect] = React30.useState(null);
+  const prevScaled = React30.useRef(isScaled);
+  React30.useEffect(() => {
+    if (!usePortal || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) {
+      const src = containerRef.current ? rectOf(containerRef.current) : null;
+      const tgt = expandContainerRef.current ? rectOf(expandContainerRef.current) : null;
+      if (src && tgt) {
+        setFromRect(src);
+        setTargetRect(tgt);
+        setOverlay("open");
+      }
+    } else if (containerRef.current) {
+      setTargetRect(rectOf(containerRef.current));
+      setOverlay("closing");
+    }
+  }, [isScaled, usePortal, expandContainerRef]);
+  React30.useEffect(() => {
+    if (overlay !== "closing") return;
+    const t = window.setTimeout(() => setOverlay("closed"), reduced ? 0 : 360);
+    return () => window.clearTimeout(t);
+  }, [overlay, reduced]);
+  React30.useEffect(() => {
+    if (overlay !== "open" || !expandContainerRef?.current) return;
+    const update = () => {
+      if (expandContainerRef.current) setTargetRect(rectOf(expandContainerRef.current));
+    };
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [overlay, expandContainerRef]);
   const onToggle = () => {
     const next = !isScaled;
     if (expanded === void 0) setInternalScaled(next);
     onExpandedChange?.(next);
-    if (next) {
+    if (next && !usePortal) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4613,50 +4656,79 @@ function ScalableContainer({
     }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.div,
+  const overlayActive = usePortal && overlay !== "closed";
+  const toggleButton = (scaled) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: scaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
-      ref: containerRef,
-      animate: {
-        width: isScaled ? expandedWidth : width,
-        height: isScaled ? expandedHeight : height
-      },
-      transition: reduced ? { duration: 0 } : {
-        width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
-      },
-      className: cx(
-        "relative rounded-lg overflow-hidden",
-        // OS-window aesthetic: subtle elevation at rest, lifted shadow
-        // when expanded. No background colour change.
-        isScaled ? "shadow-2xl" : "shadow-md",
-        "transition-shadow duration-300",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle,
-            "aria-label": isScaled ? "Collapse container" : "Expand container",
-            "aria-expanded": isScaled,
-            className: [
-              "absolute z-10",
-              TOGGLE_POSITION_CLASS[togglePosition],
-              "w-7 h-7 inline-flex items-center justify-center",
-              "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
-              "text-foreground-secondary hover:text-foreground hover:bg-surface",
-              "shadow-sm transition-colors duration-150",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-            ].join(" "),
-            children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, children })
-      ]
+      type: "button",
+      onClick: onToggle,
+      "aria-label": scaled ? "Collapse container" : "Expand container",
+      "aria-expanded": scaled,
+      className: [
+        "absolute z-10",
+        TOGGLE_POSITION_CLASS[togglePosition],
+        "w-7 h-7 inline-flex items-center justify-center",
+        "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
+        "text-foreground-secondary hover:text-foreground hover:bg-surface",
+        "shadow-sm transition-colors duration-150",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      ].join(" "),
+      children: scaled ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
     }
-  );
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        ref: containerRef,
+        animate: {
+          // Breakout mode never grows in place — the in-flow box stays
+          // at its resting size and acts as the collapse target.
+          width: isScaled && !usePortal ? expandedWidth : width,
+          height: isScaled && !usePortal ? expandedHeight : height
+        },
+        transition: reduced ? { duration: 0 } : {
+          width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        },
+        className: cx(
+          "relative rounded-lg overflow-hidden",
+          // OS-window aesthetic: subtle elevation at rest, lifted shadow
+          // when expanded. No background colour change.
+          isScaled && !usePortal ? "shadow-2xl" : "shadow-md",
+          "transition-shadow duration-300",
+          className
+        ),
+        children: [
+          !overlayActive && toggleButton(isScaled),
+          !overlayActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, children })
+        ]
+      }
+    ),
+    overlayActive && fromRect && targetRect && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { ...fromRect },
+          animate: { ...targetRect },
+          transition: reduced ? { duration: 0 } : { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          onAnimationComplete: () => {
+            if (overlay === "closing") setOverlay("closed");
+          },
+          style: { position: "fixed" },
+          className: cx(
+            "z-dropdown rounded-lg overflow-hidden bg-surface shadow-2xl",
+            className
+          ),
+          children: [
+            toggleButton(isScaled),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("h-full w-full", wrapperClass), children })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 function CollapseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 9L4 4M9 9V4M9 9H4M15 9L20 4M15 9V4M15 9H20M9 15L4 20M9 15V20M9 15H4M15 15L20 20M15 15V20M15 15H20" }) });