[bugfix] Support Panel defaultSize={0} (#600)

Author: bvaughn

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.4.1
+
+- [600](https://github.com/bvaughn/react-resizable-panels/pull/600): Bugfix: Collapsible `Panel` should treat `defaultSize={0}` as _collapsed_ on mount
+
 ## 4.4.0
 
 - [599](https://github.com/bvaughn/react-resizable-panels/pull/599): Add new `onLayoutChanged` prop to `Group`.

integrations/tests/tests/default-sizes.spec.tsx

@@ -12,14 +12,17 @@ test.describe("default panel sizes", () => {
           <Group>
             <Panel defaultSize="30%" id="left" minSize={50} />
             <Separator />
+            <Panel collapsible defaultSize="0%" id="middle" minSize={50} />
+            <Separator />
             <Panel id="right" minSize={50} />
           </Group>,
           { usePopUpWindow }
         );
 
         await expect(page.getByText("id: left")).toContainText("30%");
-        await expect(page.getByRole("separator")).toBeVisible();
+        await expect(page.getByText("id: middle")).toContainText("0%");
         await expect(page.getByText("id: right")).toContainText("70%");
+        await expect(page.getByRole("separator")).toHaveCount(2);
       });
 
       test("pixels", async ({ page: mainPage }) => {
@@ -28,14 +31,17 @@ test.describe("default panel sizes", () => {
           <Group>
             <Panel defaultSize={200} id="left" minSize={50} />
             <Separator />
+            <Panel collapsible defaultSize={0} id="middle" minSize={50} />
+            <Separator />
             <Panel id="right" minSize={50} />
           </Group>,
           { usePopUpWindow }
         );
 
         await expect(page.getByText("id: left")).toContainText("200px");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("776px");
+        await expect(page.getByText("id: middle")).toContainText("0px");
+        await expect(page.getByText("id: right")).toContainText("752px");
+        await expect(page.getByRole("separator")).toHaveCount(2);
       });
 
       test("rems", async ({ page: mainPage }) => {
@@ -44,14 +50,17 @@ test.describe("default panel sizes", () => {
           <Group>
             <Panel defaultSize="10rem" id="left" minSize={50} />
             <Separator />
+            <Panel collapsible defaultSize="0rem" id="middle" minSize={50} />
+            <Separator />
             <Panel id="right" minSize={50} />
           </Group>,
           { usePopUpWindow }
         );
 
         await expect(page.getByText("id: left")).toContainText("160px");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("816px");
+        await expect(page.getByText("id: middle")).toContainText("0px");
+        await expect(page.getByText("id: right")).toContainText("792px");
+        await expect(page.getByRole("separator")).toHaveCount(2);
       });
 
       test("vw", async ({ page: mainPage }) => {
@@ -60,14 +69,17 @@ test.describe("default panel sizes", () => {
           <Group>
             <Panel defaultSize="25vw" id="left" minSize={50} />
             <Separator />
+            <Panel collapsible defaultSize="0vw" id="middle" minSize={50} />
+            <Separator />
             <Panel id="right" minSize={50} />
           </Group>,
           { usePopUpWindow }
         );
 
         await expect(page.getByText("id: left")).toContainText("250px");
-        await expect(page.getByRole("separator")).toBeVisible();
-        await expect(page.getByText("id: right")).toContainText("726px");
+        await expect(page.getByText("id: middle")).toContainText("0px");
+        await expect(page.getByText("id: right")).toContainText("702px");
+        await expect(page.getByRole("separator")).toHaveCount(2);
       });
     });
   }

lib/global/dom/calculatePanelConstraints.ts

@@ -25,7 +25,7 @@ export function calculatePanelConstraints(group: RegisteredGroup) {
     const { element, panelConstraints } = panel;
 
     let collapsedSize = 0;
-    if (panelConstraints.collapsedSize) {
+    if (panelConstraints.collapsedSize !== undefined) {
       const pixels = sizeStyleToPixels({
         groupSize,
         panelElement: element,
@@ -36,7 +36,7 @@ export function calculatePanelConstraints(group: RegisteredGroup) {
     }
 
     let defaultSize: number | undefined = undefined;
-    if (panelConstraints.defaultSize) {
+    if (panelConstraints.defaultSize !== undefined) {
       const pixels = sizeStyleToPixels({
         groupSize,
         panelElement: element,
@@ -47,7 +47,7 @@ export function calculatePanelConstraints(group: RegisteredGroup) {
     }
 
     let minSize = 0;
-    if (panelConstraints.minSize) {
+    if (panelConstraints.minSize !== undefined) {
       const pixels = sizeStyleToPixels({
         groupSize,
         panelElement: element,
@@ -58,7 +58,7 @@ export function calculatePanelConstraints(group: RegisteredGroup) {
     }
 
     let maxSize = 100;
-    if (panelConstraints.maxSize) {
+    if (panelConstraints.maxSize !== undefined) {
       const pixels = sizeStyleToPixels({
         groupSize,
         panelElement: element,