@geomak/ui 7.4.2 → 7.4.4

package/dist/index.cjs

@@ -4622,30 +4622,43 @@ function ScalableContainer({
     let el = containerRef.current.parentElement;
     while (el && el !== bound && bound.contains(el)) {
       const parent = el.parentElement;
-      if (parent && getComputedStyle(parent).display.includes("flex")) {
+      const parentStyle = parent ? getComputedStyle(parent) : null;
+      if (parent && parentStyle && parentStyle.display.includes("flex")) {
         grown.push({
           el,
+          parent,
           prev: {
             flexGrow: el.style.flexGrow,
             flexBasis: el.style.flexBasis,
-            transition: el.style.transition
+            height: el.style.height,
+            transition: el.style.transition,
+            parentFlexWrap: parent.style.flexWrap
           }
         });
-        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);
+        const t = (prop) => `${prop} ${reduced ? 0 : 0.32}s cubic-bezier(0.16, 1, 0.3, 1)`;
+        const ours = `${t("flex-grow")}, ${t("flex-basis")}, ${t("height")}`;
+        el.style.transition = el.style.transition ? `${el.style.transition}, ${ours}` : ours;
+        if (parentStyle.flexDirection.startsWith("row")) {
+          parent.style.flexWrap = "wrap";
+          el.style.flexBasis = "100%";
+          el.style.height = `${expandRatio / (expandRatio + 1) * 100}%`;
+        } else {
+          el.style.flexBasis = "0%";
+          el.style.flexGrow = String(expandRatio);
+        }
       }
       el = parent;
     }
     grownRef.current = grown;
   };
   const restoreAncestors = () => {
-    for (const { el, prev } of grownRef.current) {
+    for (const { el, parent, prev } of grownRef.current) {
       el.style.flexGrow = prev.flexGrow;
       el.style.flexBasis = prev.flexBasis;
+      el.style.height = prev.height;
       window.setTimeout(() => {
         el.style.transition = prev.transition;
+        parent.style.flexWrap = prev.parentFlexWrap;
       }, reduced ? 0 : 360);
     }
     grownRef.current = [];
@@ -4658,10 +4671,12 @@ function ScalableContainer({
     kickResizeDuringTransition();
   }, [isScaled, usePush]);
   React30.useEffect(() => () => {
-    for (const { el, prev } of grownRef.current) {
+    for (const { el, parent, prev } of grownRef.current) {
       el.style.flexGrow = prev.flexGrow;
       el.style.flexBasis = prev.flexBasis;
+      el.style.height = prev.height;
       el.style.transition = prev.transition;
+      parent.style.flexWrap = prev.parentFlexWrap;
     }
   }, []);
   const onToggle = () => {