@geomak/ui 7.4.0 → 7.4.2

package/dist/index.d.cts

@@ -2062,43 +2062,55 @@ interface ScalableContainerProps {
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /**
-     * Bounding element the EXPANDED state should overlay. When provided, the
-     * expanded content renders into a body portal positioned over this
-     * element's rect instead of growing in place — letting the container break
-     * out of a size-constrained wrapper (e.g. a flex item) whose normal-state
-     * sizing it should otherwise respect. Collapsing returns it to normal
-     * flow. Omit for the classic expand-in-place behaviour.
+     * 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
+     * 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 `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. */
     className?: string;
 }
 /**
- * Container that smoothly expands to fill its parent on click and
- * collapses back to its resting size. Reads like a macOS / Windows
- * window resizing — subtle elevation shift, smooth scale, no flash
- * of colour or harsh background change.
- *
- * **What's different from the previous version**
- * - Animates BOTH width and height (was width-only).
- * - No baked-in background — the container is transparent by default,
- *   so it overlays whatever surface the consumer puts behind it.
- * - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
- *   being raised. No colour change.
- * - The toggle button is a plain rounded chip with the chevron icon,
- *   not the old `IconButton` with the heavy background. Floats over
- *   the content via absolute positioning so it doesn't push layout.
- * - Configurable toggle position (default top-right, matching OS
- *   close-button convention).
+ * Container that smoothly expands on click and collapses back to its
+ * resting size. Reads like a macOS / Windows window resizing — subtle
+ * elevation shift, smooth scale, no flash of colour or harsh background
+ * change.
+ *
+ * Two expansion modes:
+ * - **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.
  *
  * @example
  * ```tsx
  * <ScalableContainer width={480} height={300}>
  *   <Chart data={metrics} />
  * </ScalableContainer>
+ *
+ * // Push mode inside a flex grid:
+ * const sectionRef = useRef<HTMLDivElement>(null)
+ * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
+ *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.d.ts

@@ -2062,43 +2062,55 @@ interface ScalableContainerProps {
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /**
-     * Bounding element the EXPANDED state should overlay. When provided, the
-     * expanded content renders into a body portal positioned over this
-     * element's rect instead of growing in place — letting the container break
-     * out of a size-constrained wrapper (e.g. a flex item) whose normal-state
-     * sizing it should otherwise respect. Collapsing returns it to normal
-     * flow. Omit for the classic expand-in-place behaviour.
+     * 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
+     * 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 `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. */
     className?: string;
 }
 /**
- * Container that smoothly expands to fill its parent on click and
- * collapses back to its resting size. Reads like a macOS / Windows
- * window resizing — subtle elevation shift, smooth scale, no flash
- * of colour or harsh background change.
- *
- * **What's different from the previous version**
- * - Animates BOTH width and height (was width-only).
- * - No baked-in background — the container is transparent by default,
- *   so it overlays whatever surface the consumer puts behind it.
- * - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
- *   being raised. No colour change.
- * - The toggle button is a plain rounded chip with the chevron icon,
- *   not the old `IconButton` with the heavy background. Floats over
- *   the content via absolute positioning so it doesn't push layout.
- * - Configurable toggle position (default top-right, matching OS
- *   close-button convention).
+ * Container that smoothly expands on click and collapses back to its
+ * resting size. Reads like a macOS / Windows window resizing — subtle
+ * elevation shift, smooth scale, no flash of colour or harsh background
+ * change.
+ *
+ * Two expansion modes:
+ * - **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.
  *
  * @example
  * ```tsx
  * <ScalableContainer width={480} height={300}>
  *   <Chart data={metrics} />
  * </ScalableContainer>
+ *
+ * // Push mode inside a flex grid:
+ * const sectionRef = useRef<HTMLDivElement>(null)
+ * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
+ *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.js

@@ -4540,10 +4540,6 @@ 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",
@@ -4563,55 +4559,79 @@ function ScalableContainer({
   collapseIcon,
   togglePosition = "top-right",
   expandContainerRef,
+  expandRatio = 3,
   className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
-  const usePortal = expandContainerRef != null;
-  const [overlay, setOverlay] = useState("closed");
-  const [fromRect, setFromRect] = useState(null);
-  const [targetRect, setTargetRect] = useState(null);
+  const usePush = expandContainerRef != null;
+  const grownRef = useRef([]);
   const prevScaled = useRef(isScaled);
-  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");
+  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;
+    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);
       }
-    } else if (containerRef.current) {
-      setTargetRect(rectOf(containerRef.current));
-      setOverlay("closing");
+      el = parent;
     }
-  }, [isScaled, usePortal, expandContainerRef]);
-  useEffect(() => {
-    if (overlay !== "closing") return;
-    const t = window.setTimeout(() => setOverlay("closed"), reduced ? 0 : 360);
-    return () => window.clearTimeout(t);
-  }, [overlay, reduced]);
+    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 = [];
+  };
   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]);
+    if (!usePush || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) growAncestors();
+    else restoreAncestors();
+    kickResizeDuringTransition();
+  }, [isScaled, usePush]);
+  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 && !usePortal) {
+    if (next && !usePush) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4619,79 +4639,56 @@ function ScalableContainer({
     }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
-  const overlayActive = usePortal && overlay !== "closed";
-  const toggleButton = (scaled) => /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: scaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsxs(
+    motion.div,
     {
-      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__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
-    }
-  ) });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      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__ */ jsx("div", { className: wrapperClass, children })
-        ]
-      }
-    ),
-    overlayActive && fromRect && targetRect && createPortal(
-      /* @__PURE__ */ jsxs(
-        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__ */ jsx("div", { className: cx("h-full w-full", wrapperClass), children })
-          ]
-        }
+      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.
+        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] },
+        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
       ),
-      document.body
-    )
-  ] });
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ 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__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: cx("h-full w-full", wrapperClass), children })
+      ]
+    }
+  );
 }
 function CollapseIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 9L4 4M9 9V4M9 9H4M15 9L20 4M15 9V4M15 9H20M9 15L4 20M9 15V20M9 15H4M15 15L20 20M15 15V20M15 15H20" }) });