@geomak/ui 7.4.1 → 7.4.3

package/dist/index.d.cts

@@ -2065,18 +2065,21 @@ interface ScalableContainerProps {
      * Bounding element the expansion is allowed to grow within. When the
      * container sits in size-constrained flex-item wrappers (where width /
      * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: every flex item between the container and this
-     * element gets its `flex-grow` raised (animated), so this container takes
-     * most of the space while its siblings shrink — but stay visible.
-     * Collapsing restores the wrappers' original sizing. Omit for the classic
+     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
+     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
+     * charts reflow below it at full width — pushed, visible, and intact.
+     * Column levels between the container and this element get `flex-grow`
+     * raised so the expanded row dominates vertically too. Collapsing
+     * restores the wrappers' original sizing exactly. Omit for the classic
      * expand-in-place behaviour.
      */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
     /**
-     * How dominant the pushed expansion is, as a flex-grow multiplier applied
-     * to the container's wrappers (push mode only). Default `5` — i.e. the
-     * expanded container takes roughly 5 parts for every 1 part a sibling
-     * keeps. Raise for a more fullscreen feel, lower for a gentler split.
+     * Vertical dominance of the pushed expansion (push mode only). Default
+     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
+     * height (and its row takes expandRatio parts per sibling row), leaving
+     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
+     * lower for a gentler split.
      */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
@@ -2092,10 +2095,12 @@ interface ScalableContainerProps {
  * - **In place** (default): animates the container's own width/height to
  *   `expandedWidth`/`expandedHeight`.
  * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding raises `flex-grow` on every flex
- *   item between the container and the bounding element, so the container
- *   grows to dominate the section while sibling containers shrink but remain
- *   visible. Collapsing restores the original layout.
+ *   owned by flex-item wrappers. Expanding makes the container span the FULL
+ *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
+ *   `flex-basis: 100%`), with sibling charts reflowing below it at full
+ *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
+ *   so the expanded row also dominates vertically. Collapsing restores the
+ *   original layout exactly.
  *
  * @example
  * ```tsx

package/dist/index.d.ts

@@ -2065,18 +2065,21 @@ interface ScalableContainerProps {
      * Bounding element the expansion is allowed to grow within. When the
      * container sits in size-constrained flex-item wrappers (where width /
      * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: every flex item between the container and this
-     * element gets its `flex-grow` raised (animated), so this container takes
-     * most of the space while its siblings shrink — but stay visible.
-     * Collapsing restores the wrappers' original sizing. Omit for the classic
+     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
+     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
+     * charts reflow below it at full width — pushed, visible, and intact.
+     * Column levels between the container and this element get `flex-grow`
+     * raised so the expanded row dominates vertically too. Collapsing
+     * restores the wrappers' original sizing exactly. Omit for the classic
      * expand-in-place behaviour.
      */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
     /**
-     * How dominant the pushed expansion is, as a flex-grow multiplier applied
-     * to the container's wrappers (push mode only). Default `5` — i.e. the
-     * expanded container takes roughly 5 parts for every 1 part a sibling
-     * keeps. Raise for a more fullscreen feel, lower for a gentler split.
+     * Vertical dominance of the pushed expansion (push mode only). Default
+     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
+     * height (and its row takes expandRatio parts per sibling row), leaving
+     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
+     * lower for a gentler split.
      */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
@@ -2092,10 +2095,12 @@ interface ScalableContainerProps {
  * - **In place** (default): animates the container's own width/height to
  *   `expandedWidth`/`expandedHeight`.
  * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding raises `flex-grow` on every flex
- *   item between the container and the bounding element, so the container
- *   grows to dominate the section while sibling containers shrink but remain
- *   visible. Collapsing restores the original layout.
+ *   owned by flex-item wrappers. Expanding makes the container span the FULL
+ *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
+ *   `flex-basis: 100%`), with sibling charts reflowing below it at full
+ *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
+ *   so the expanded row also dominates vertically. Collapsing restores the
+ *   original layout exactly.
  *
  * @example
  * ```tsx

package/dist/index.js

@@ -4559,7 +4559,7 @@ function ScalableContainer({
   collapseIcon,
   togglePosition = "top-right",
   expandContainerRef,
-  expandRatio = 5,
+  expandRatio = 3,
   className = ""
 }) {
   const containerRef = useRef(null);
@@ -4569,6 +4569,15 @@ function ScalableContainer({
   const usePush = expandContainerRef != null;
   const grownRef = useRef([]);
   const prevScaled = useRef(isScaled);
+  const kickResizeDuringTransition = () => {
+    if (typeof window === "undefined") return;
+    const kick = () => window.dispatchEvent(new Event("resize"));
+    const interval = window.setInterval(kick, 80);
+    window.setTimeout(() => {
+      window.clearInterval(interval);
+      kick();
+    }, reduced ? 0 : 400);
+  };
   const growAncestors = () => {
     const bound = expandContainerRef?.current;
     if (!bound || !containerRef.current) return;
@@ -4576,30 +4585,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 = [];
@@ -4609,12 +4631,15 @@ function ScalableContainer({
     prevScaled.current = isScaled;
     if (isScaled) growAncestors();
     else restoreAncestors();
+    kickResizeDuringTransition();
   }, [isScaled, usePush]);
   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 = () => {
@@ -4633,6 +4658,10 @@ function ScalableContainer({
     motion.div,
     {
       ref: containerRef,
+      style: {
+        width: isScaled && !usePush ? expandedWidth : width,
+        height: isScaled && !usePush ? expandedHeight : height
+      },
       animate: {
         // Push mode keeps the container filling its (now growing)
         // wrapper — the wrapper's flex-grow does the work.