[pull] main from bvaughn:main

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,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

public/generated/examples/CollapsiblePanelsCollapsedByDefault.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">collapsible</span><span class=\"\"> </span><span class=\"tok-propertyName\">defaultSize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"0%\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">minSize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"10%\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Separator</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

src/routes/CollapsiblePanelsRoute.tsx

@@ -1,5 +1,6 @@
 import { Box, Callout, Code, Header } from "react-lib-tools";
 import { html as ExampleHTML } from "../../public/generated/examples/CollapsiblePanels.json";
+import { html as ExampleCollapsedByDefaultHTML } from "../../public/generated/examples/CollapsiblePanelsCollapsedByDefault.json";
 import { html as ExampleWithCollapsedSizeHTML } from "../../public/generated/examples/CollapsiblePanelsCollapsedSize.json";
 import { Group } from "../components/styled-panels/Group";
 import { Panel } from "../components/styled-panels/Panel";
@@ -48,6 +49,25 @@ export default function CollapsiblePanelsRoute() {
       <Callout intent="primary">
         A panel's collapse threshold is half its minimum size.
       </Callout>
+      <div>
+        Collapsible panels can also be collapsed by default by setting their{" "}
+        <code>defaultSize</code> to 0 (pixels or percent).
+      </div>
+      <Code html={ExampleCollapsedByDefaultHTML} />
+      <Group>
+        <Panel
+          collapsible
+          defaultSize={0}
+          maxSize="75%"
+          minSize="10%"
+          showSizeAsPercentage
+        />
+        <Separator />
+        <Panel>
+          The panel on the left is collapsed by default but can be expanded by
+          dragging the separator.
+        </Panel>
+      </Group>
     </Box>
   );
 }

src/routes/examples/CollapsiblePanelsCollapsedByDefault.tsx

@@ -0,0 +1,10 @@
+import { Group, Panel, Separator } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Group>
+  <Panel collapsible defaultSize="0%" minSize="10%" />
+  <Separator />
+  <Panel />
+</Group>