Panel expand() API should restore pre-collapse size

Author: bvaughn

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.16
+
+- [563](https://github.com/bvaughn/react-resizable-panels/pull/563): Panel `expand()` API should restore pre-collapse size
+
 ## 4.0.15
 
 - [556](https://github.com/bvaughn/react-resizable-panels/pull/556): Ignore `defaultLayout` when keys don't match Panel ids

lib/components/panel/Panel.tsx

@@ -70,6 +70,7 @@ export function Panel({
     if (element !== null) {
       return registerPanel({
         element,
+        expandToSizeRef: { current: undefined },
         id,
         idIsStable,
         onResize: hasOnResize ? onResizeStable : undefined,

lib/components/panel/types.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, HTMLAttributes, Ref } from "react";
+import type { CSSProperties, HTMLAttributes, Ref, RefObject } from "react";
 
 export type PanelSize = {
   asPercentage: number;
@@ -22,6 +22,7 @@ export type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";
 
 export type RegisteredPanel = {
   element: HTMLDivElement;
+  expandToSizeRef: RefObject<number | undefined>;
   id: string;
   idIsStable: boolean;
   onResize: OnPanelResize | undefined;

lib/global/test/mockGroup.ts

@@ -92,6 +92,7 @@ export function mockGroup(
 
       const panel: RegisteredPanel = {
         element,
+        expandToSizeRef: { current: undefined },
         id: panelId,
         idIsStable: true,
         panelConstraints: constraints,

lib/global/utils/getImperativePanelMethods.test.ts

@@ -172,7 +172,26 @@ describe("getImperativePanelMethods", () => {
         expect(onLayoutChange).not.toHaveBeenCalled();
       });
 
-      test("expands panel to the minimum size", () => {
+      test("expands the panel to the previous pre-collapse size", () => {
+        const { panelApis } = init([
+          { collapsible: true, defaultSize: 50, minSize: 25 },
+          {}
+        ]);
+
+        panelApis[0].resize("35");
+        expect(onLayoutChange).toHaveBeenCalledTimes(1);
+        expect(onLayoutChange).toHaveBeenLastCalledWith([35, 65]);
+
+        panelApis[0].collapse();
+        expect(onLayoutChange).toHaveBeenCalledTimes(2);
+        expect(onLayoutChange).toHaveBeenLastCalledWith([0, 100]);
+
+        panelApis[0].expand();
+        expect(onLayoutChange).toHaveBeenCalledTimes(3);
+        expect(onLayoutChange).toHaveBeenLastCalledWith([35, 65]);
+      });
+
+      test("expands panel to the minimum size as a fallback", () => {
         const { panelApis } = init([
           { collapsible: true, defaultSize: 0, minSize: 25 },
           {}
@@ -182,6 +201,18 @@ describe("getImperativePanelMethods", () => {
         expect(onLayoutChange).toHaveBeenCalledTimes(1);
         expect(onLayoutChange).toHaveBeenCalledWith([25, 75]);
       });
+
+      // See github.com/bvaughn/react-resizable-panels/issues/561
+      test("edge case: expands panel to a non-zero size if minSize is 0", () => {
+        const { panelApis } = init([
+          { collapsible: true, defaultSize: 0, minSize: 0 },
+          {}
+        ]);
+        panelApis[0].expand();
+
+        expect(onLayoutChange).toHaveBeenCalledTimes(1);
+        expect(onLayoutChange).toHaveBeenCalledWith([5, 95]);
+      });
     });
 
     describe("getSize", () => {

lib/global/utils/getImperativePanelMethods.ts

@@ -113,18 +113,31 @@ export function getImperativePanelMethods({
   return {
     collapse: () => {
       const { collapsible, collapsedSize } = getPanelConstraints();
+      const { expandToSizeRef } = getPanel();
       const size = getPanelSize();
 
       if (collapsible && size !== collapsedSize) {
+        // Store previous size in to restore if expand() is called
+        expandToSizeRef.current = size;
+
         setPanelSize(collapsedSize);
       }
     },
     expand: () => {
       const { collapsible, collapsedSize, minSize } = getPanelConstraints();
+      const { expandToSizeRef } = getPanel();
       const size = getPanelSize();
 
       if (collapsible && size === collapsedSize) {
-        setPanelSize(minSize);
+        // Restore pre-collapse size, fallback to minSize
+        let nextSize = expandToSizeRef.current ?? minSize;
+
+        // Edge case: if minSize is 0, pick something meaningful to expand the panel to
+        if (nextSize === 0) {
+          nextSize = 5;
+        }
+
+        setPanelSize(nextSize);
       }
     },
     getSize: () => {

src/routes/LayoutBasicsRoute.tsx

@@ -1,58 +1,39 @@
-import { Box, Callout, Code, ExternalLink, Header } from "react-lib-tools";
-import { html as HorizontalHTML } from "../../public/generated/examples/LayoutBasicsHorizontal.json";
-import { html as SeparatorHTML } from "../../public/generated/examples/LayoutBasicsSeparator.json";
-import { html as VerticalHTML } from "../../public/generated/examples/LayoutBasicsVertical.json";
+import { useDefaultLayout, usePanelRef } from "react-resizable-panels";
 import { Group } from "../components/styled-panels/Group";
 import { Panel } from "../components/styled-panels/Panel";
 import { Separator } from "../components/styled-panels/Separator";
 
 export default function LayoutBasicsRoute() {
+  const { defaultLayout, onLayoutChange } = useDefaultLayout({
+    id: "1",
+    storage: localStorage
+  });
+
+  const panelRef = usePanelRef();
+
+  const togglePanel = () => {
+    const panel = panelRef.current;
+    if (panel) {
+      if (panel.isCollapsed()) {
+        panel.expand();
+      } else {
+        panel.collapse();
+      }
+    }
+  };
+
   return (
-    <Box direction="column" gap={4}>
-      <Header section="Examples" title="The basics" />
-      <div>
-        The simplest resizable panel configuration is two panels within a group.
-      </div>
-      <Code html={HorizontalHTML} />
-      <Group className="h-15">
-        <Panel>left</Panel>
-        <Panel>right</Panel>
-      </Group>
-      <div>
-        Panel groups use a{" "}
-        <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts">
-          flexbox
-        </ExternalLink>{" "}
-        layout with a default orientation of <em>horizontal</em> but the{" "}
-        <code>orientation</code> prop can be used to specify a <em>vertical</em>{" "}
-        layout.
-      </div>
-      <Code html={VerticalHTML} />
-      <Callout intent="warning">
-        Vertical groups require an explicit height to be set using either{" "}
-        <code>className</code> or <code>style</code> props.
-      </Callout>
-      <Group className="h-30" orientation="vertical">
-        <Panel>top</Panel>
-        <Panel>bottom</Panel>
-      </Group>
-      <div>
-        Panels can be resized by clicking on their borders but explicit
-        separators can be rendered to improve UX.
-      </div>
-      <Group className="h-15">
-        <Panel>left</Panel>
-        <Separator orientation="horizontal" />
-        <Panel>right</Panel>
+    <div>
+      <button onClick={togglePanel}>Toggle Panel</button>
+      <Group defaultLayout={defaultLayout} onLayoutChange={onLayoutChange}>
+        <Panel id="panel1" defaultSize={30}>
+          Panel 1
+        </Panel>
+        <Separator />
+        <Panel id="panel2" defaultSize={70} collapsible panelRef={panelRef}>
+          Panel 2
+        </Panel>
       </Group>
-      <Code html={SeparatorHTML} />
-      <Callout intent="primary">
-        Separators improve keyboard accessibility by providing a tab-focusable{" "}
-        <ExternalLink href="https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/">
-          window splitter
-        </ExternalLink>{" "}
-        element.
-      </Callout>
-    </Box>
+    </div>
   );
 }