@geomak/ui 7.4.1 → 7.4.2

package/dist/index.d.cts

@@ -2074,9 +2074,10 @@ interface ScalableContainerProps {
     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.
+     * to the container's wrappers (push mode only). Default `3` — i.e. the
+     * expanded container takes roughly 3 parts for every 1 part a sibling
+     * keeps, leaving the siblings enough room to stay legible. Raise for a
+     * more fullscreen feel, lower for a gentler split.
      */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */

package/dist/index.d.ts

@@ -2074,9 +2074,10 @@ interface ScalableContainerProps {
     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.
+     * to the container's wrappers (push mode only). Default `3` — i.e. the
+     * expanded container takes roughly 3 parts for every 1 part a sibling
+     * keeps, leaving the siblings enough room to stay legible. Raise for a
+     * more fullscreen feel, lower for a gentler split.
      */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */

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;
@@ -4609,6 +4618,7 @@ function ScalableContainer({
     prevScaled.current = isScaled;
     if (isScaled) growAncestors();
     else restoreAncestors();
+    kickResizeDuringTransition();
   }, [isScaled, usePush]);
   useEffect(() => () => {
     for (const { el, prev } of grownRef.current) {
@@ -4633,6 +4643,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.