@geomak/ui 7.3.4 → 7.4.1

package/dist/index.d.cts

@@ -2061,35 +2061,55 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * 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 `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.
+     */
+    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, 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

@@ -2061,35 +2061,55 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * 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 `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.
+     */
+    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, 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

@@ -4558,17 +4558,70 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
+  expandContainerRef,
+  expandRatio = 5,
   className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
+  const usePush = expandContainerRef != null;
+  const grownRef = useRef([]);
+  const prevScaled = 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 = [];
+  };
+  useEffect(() => {
+    if (!usePush || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) growAncestors();
+    else restoreAncestors();
+  }, [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) {
+    if (next && !usePush) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4581,8 +4634,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] },
@@ -4616,7 +4671,7 @@ function ScalableContainer({
             children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: wrapperClass, children })
+        /* @__PURE__ */ jsx("div", { className: cx("h-full w-full", wrapperClass), children })
       ]
     }
   );