diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3074ce259..27a586c25 100644
--- a/CHANGELOG.md
+++ b/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`.
diff --git a/integrations/tests/tests/default-sizes.spec.tsx b/integrations/tests/tests/default-sizes.spec.tsx
index 9a41a4733..998534f1f 100644
--- a/integrations/tests/tests/default-sizes.spec.tsx
+++ b/integrations/tests/tests/default-sizes.spec.tsx
@@ -12,14 +12,17 @@ test.describe("default panel sizes", () => {
+
+
,
{ 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", () => {
+
+
,
{ 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", () => {
+
+
,
{ 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", () => {
+
+
,
{ 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);
});
});
}
diff --git a/lib/global/dom/calculatePanelConstraints.ts b/lib/global/dom/calculatePanelConstraints.ts
index 39327ae89..fa1e0b922 100644
--- a/lib/global/dom/calculatePanelConstraints.ts
+++ b/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,
diff --git a/package.json b/package.json
index 7f73c4fd9..4406c7788 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-resizable-panels",
- "version": "4.4.0",
+ "version": "4.4.1",
"type": "module",
"author": "Brian Vaughn (https://github.com/bvaughn/)",
"contributors": [
diff --git a/public/generated/examples/CollapsiblePanelsCollapsedByDefault.json b/public/generated/examples/CollapsiblePanelsCollapsedByDefault.json
new file mode 100644
index 000000000..b39134e6c
--- /dev/null
+++ b/public/generated/examples/CollapsiblePanelsCollapsedByDefault.json
@@ -0,0 +1,3 @@
+{
+ "html": "<Group>
\n <Panel collapsible defaultSize=\"0%\" minSize=\"10%\" />
\n <Separator />
\n <Panel />
\n</Group>
"
+}
\ No newline at end of file
diff --git a/src/routes/CollapsiblePanelsRoute.tsx b/src/routes/CollapsiblePanelsRoute.tsx
index c973ffb8b..ca3437aca 100644
--- a/src/routes/CollapsiblePanelsRoute.tsx
+++ b/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() {
A panel's collapse threshold is half its minimum size.
+
+ Collapsible panels can also be collapsed by default by setting their{" "}
+ defaultSize to 0 (pixels or percent).
+
+