@geomak/ui 7.3.4 → 7.4.1

package/dist/index.cjs

@@ -4595,17 +4595,70 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
+  expandContainerRef,
+  expandRatio = 5,
   className = ""
 }) {
   const containerRef = React30.useRef(null);
   const [internalScaled, setInternalScaled] = React30.useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
+  const usePush = expandContainerRef != null;
+  const grownRef = React30.useRef([]);
+  const prevScaled = React30.useRef(isScaled);
+  const growAncestors = () => {
+    const bound = expandContainerRef?.current;
+    if (!bound || !containerRef.current) return;
+    const grown = [];
+    let el = containerRef.current.parentElement;
+    while (el && el !== bound && bound.contains(el)) {
+      const parent = el.parentElement;
+      if (parent && getComputedStyle(parent).display.includes("flex")) {
+        grown.push({
+          el,
+          prev: {
+            flexGrow: el.style.flexGrow,
+            flexBasis: el.style.flexBasis,
+            transition: el.style.transition
+          }
+        });
+        const grow = `flex-grow ${reduced ? 0 : 0.32}s cubic-bezier(0.16, 1, 0.3, 1), flex-basis ${reduced ? 0 : 0.32}s cubic-bezier(0.16, 1, 0.3, 1)`;
+        el.style.transition = el.style.transition ? `${el.style.transition}, ${grow}` : grow;
+        el.style.flexBasis = "0%";
+        el.style.flexGrow = String(expandRatio);
+      }
+      el = parent;
+    }
+    grownRef.current = grown;
+  };
+  const restoreAncestors = () => {
+    for (const { el, prev } of grownRef.current) {
+      el.style.flexGrow = prev.flexGrow;
+      el.style.flexBasis = prev.flexBasis;
+      window.setTimeout(() => {
+        el.style.transition = prev.transition;
+      }, reduced ? 0 : 360);
+    }
+    grownRef.current = [];
+  };
+  React30.useEffect(() => {
+    if (!usePush || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) growAncestors();
+    else restoreAncestors();
+  }, [isScaled, usePush]);
+  React30.useEffect(() => () => {
+    for (const { el, prev } of grownRef.current) {
+      el.style.flexGrow = prev.flexGrow;
+      el.style.flexBasis = prev.flexBasis;
+      el.style.transition = prev.transition;
+    }
+  }, []);
   const onToggle = () => {
     const next = !isScaled;
     if (expanded === void 0) setInternalScaled(next);
     onExpandedChange?.(next);
-    if (next) {
+    if (next && !usePush) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4618,8 +4671,10 @@ function ScalableContainer({
     {
       ref: containerRef,
       animate: {
-        width: isScaled ? expandedWidth : width,
-        height: isScaled ? expandedHeight : height
+        // Push mode keeps the container filling its (now growing)
+        // wrapper — the wrapper's flex-grow does the work.
+        width: isScaled && !usePush ? expandedWidth : width,
+        height: isScaled && !usePush ? expandedHeight : height
       },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
@@ -4653,7 +4708,7 @@ function ScalableContainer({
             children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("h-full w-full", wrapperClass), children })
       ]
     }
   );