@invana/ui 0.0.25 → 0.0.26

package/dist/index.cjs

@@ -4719,6 +4719,8 @@ function PanelContent({
 }
 function PanelStack({
   sections,
+  stackRef,
+  onCollapsedChange,
   headerHeight = 35,
   withHandle = false,
   className,
@@ -4763,19 +4765,26 @@ function PanelStack({
     for (const s of targets) refs.current[s.id]?.collapse();
     group.setLayout(next);
   }, []);
-  const toggle = (id) => {
+  const notify = React23__namespace.useRef(onCollapsedChange);
+  React23__namespace.useEffect(() => {
+    notify.current = onCollapsedChange;
+  }, [onCollapsedChange]);
+  const collapsedRef = React23__namespace.useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const collapsePanel = React23__namespace.useCallback((id) => {
     const ref = refs.current[id];
-    if (!ref) return;
-    if (!ref.isCollapsed()) {
-      ref.collapse();
-      return;
-    }
+    if (!ref || ref.isCollapsed()) return;
+    ref.collapse();
+  }, []);
+  const expandPanel = React23__namespace.useCallback((id) => {
+    const ref = refs.current[id];
+    if (!ref || !ref.isCollapsed()) return;
     ref.expand();
     if (!ref.isCollapsed()) return;
     const group = groupRef.current;
     if (!group) return;
     const layout = group.getLayout();
-    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsed[panelId]).sort((a, b) => b[1] - a[1])[0];
+    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsedRef.current[panelId]).sort((a, b) => b[1] - a[1])[0];
     if (!donor) return;
     const [donorId, donorPct] = donor;
     const share = donorPct / 2;
@@ -4784,7 +4793,26 @@ function PanelStack({
       [id]: (layout[id] ?? 0) + share,
       [donorId]: donorPct - share
     });
-  };
+  }, []);
+  const toggle = React23__namespace.useCallback(
+    (id) => {
+      const ref = refs.current[id];
+      if (!ref) return;
+      if (ref.isCollapsed()) expandPanel(id);
+      else collapsePanel(id);
+    },
+    [expandPanel, collapsePanel]
+  );
+  React23__namespace.useImperativeHandle(
+    stackRef,
+    () => ({
+      expand: expandPanel,
+      collapse: collapsePanel,
+      toggle,
+      isCollapsed: (id) => !!collapsedRef.current[id]
+    }),
+    [expandPanel, collapsePanel, toggle]
+  );
   return (
     // Header actions are nav items, and those carry tooltips — provide the
     // context here so a `PanelStack` works outside an app shell too. Nesting
@@ -4822,9 +4850,12 @@ function PanelStack({
                 },
                 onResize: (size) => {
                   const next = size.inPixels <= headerHeight + 1;
-                  setCollapsed(
-                    (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
-                  );
+                  setCollapsed((prev) => {
+                    if (prev[section.id] === next) return prev;
+                    const map = { ...prev, [section.id]: next };
+                    notify.current?.(map);
+                    return map;
+                  });
                 },
                 className: "flex flex-col overflow-hidden",
                 children: [