[pull] main from bvaughn:main

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.5.3
+
+- [635](https://github.com/bvaughn/react-resizable-panels/pull/635): Expand pre-collapsed panels if drug past the halfway point for more consistent collapse/expand behavior.
+- [631](https://github.com/bvaughn/react-resizable-panels/pull/631): **Bugfix**: Panels set `max-width` and `max-height` to 100% to fix potential CSS overflow bug.
+
 ## 4.5.2
 
 - [626](https://github.com/bvaughn/react-resizable-panels/pull/626): Decrease default hit target size for `Separator` and `Panel` edges; make configurable via a new `Group` prop.

lib/components/panel/Panel.tsx

@@ -137,6 +137,8 @@ export function Panel({
       <div
         className={className}
         style={{
+          maxHeight: "100%",
+          maxWidth: "100%",
           flexGrow: 1,
 
           ...style

lib/global/utils/adjustLayoutByDelta.test.ts

@@ -1906,17 +1906,17 @@ describe("adjustLayoutByDelta", () => {
   test("should fallback to the previous layout if an intermediate layout is invalid", () => {
     expect(
       adjustLayoutByDelta({
-        delta: 1,
+        delta: 16,
         initialLayout: l([5, 15, 40, 40]),
         panelConstraints: c([
           { collapsedSize: 5, collapsible: true, minSize: 15, maxSize: 20 },
-          { minSize: 15, maxSize: 30 },
+          { minSize: 30, maxSize: 30 },
           { minSize: 30 },
           { minSize: 20, maxSize: 40 }
         ]),
-        prevLayout: l([5, 30, 30, 36])
+        prevLayout: l([20, 30, 30, 20])
       })
-    ).toEqual(l([5, 30, 30, 36]));
+    ).toEqual(l([20, 30, 30, 20]));
   });
 
   // Edge case (issues/311)
@@ -1935,4 +1935,211 @@ describe("adjustLayoutByDelta", () => {
       })
     ).toEqual(l([5, 15, 40, 40]));
   });
+
+  // Edge case issues/210 and issues/629
+  describe("collapsible panel thresholds", () => {
+    ["left", "right"].forEach((panelId) => {
+      describe(`${panelId} panel`, () => {
+        const collapsiblePanelConstraints = {
+          collapsedSize: 0,
+          collapsible: true,
+          minSize: 10
+        };
+
+        const open = panelId === "left" ? l([10, 90]) : l([90, 10]);
+        const closed = panelId === "left" ? l([0, 100]) : l([100, 0]);
+        const panelConstraints =
+          panelId === "left"
+            ? c([collapsiblePanelConstraints, {}])
+            : c([{}, collapsiblePanelConstraints]);
+
+        test.each([
+          [
+            "remain open if delta is less than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: open,
+              delta: panelId === "left" ? -4 : 4,
+              expectedLayout: open
+            }
+          ],
+          [
+            "close if delta is greater than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: open,
+              delta: panelId === "left" ? -6 : 6,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "re-open if delta is less than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: closed,
+              delta: panelId === "left" ? -4 : 4,
+              expectedLayout: open
+            }
+          ],
+          [
+            "remain closed if delta is more than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: closed,
+              delta: panelId === "left" ? -6 : 6,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "remain closed if delta is less than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: closed,
+              delta: panelId === "left" ? 4 : -4,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "open if delta is greater than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: closed,
+              delta: panelId === "left" ? 6 : -6,
+              expectedLayout: open
+            }
+          ],
+          [
+            "close if delta is less than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: open,
+              delta: panelId === "left" ? 4 : -4,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "remain open if delta is more than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: open,
+              delta: panelId === "left" ? 6 : -6,
+              expectedLayout: open
+            }
+          ]
+        ])("%s", (_, { initialLayout, prevLayout, delta, expectedLayout }) => {
+          expect(
+            adjustLayoutByDelta({
+              delta,
+              initialLayout,
+              panelConstraints,
+              prevLayout,
+              trigger: "mouse-or-touch"
+            })
+          ).toEqual(expectedLayout);
+        });
+      });
+    });
+
+    ["left", "right"].forEach((panelId) => {
+      describe(`${panelId} panel`, () => {
+        const collapsiblePanelConstraints = {
+          collapsedSize: 5,
+          collapsible: true,
+          minSize: 15
+        };
+
+        const open = panelId === "left" ? l([15, 85]) : l([85, 15]);
+        const closed = panelId === "left" ? l([5, 95]) : l([95, 5]);
+        const panelConstraints =
+          panelId === "left"
+            ? c([collapsiblePanelConstraints, {}])
+            : c([{}, collapsiblePanelConstraints]);
+
+        test.each([
+          [
+            "remain open if delta is less than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: open,
+              delta: panelId === "left" ? -4 : 4,
+              expectedLayout: open
+            }
+          ],
+          [
+            "close if delta is greater than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: open,
+              delta: panelId === "left" ? -6 : 6,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "re-open if delta is less than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: closed,
+              delta: panelId === "left" ? -4 : 4,
+              expectedLayout: open
+            }
+          ],
+          [
+            "remain closed if delta is more than minimum threshold",
+            {
+              initialLayout: open,
+              prevLayout: closed,
+              delta: panelId === "left" ? -6 : 6,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "remain closed if delta is less than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: closed,
+              delta: panelId === "left" ? 4 : -4,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "open if delta is greater than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: closed,
+              delta: panelId === "left" ? 6 : -6,
+              expectedLayout: open
+            }
+          ],
+          [
+            "close if delta is less than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: open,
+              delta: panelId === "left" ? 4 : -4,
+              expectedLayout: closed
+            }
+          ],
+          [
+            "remain open if delta is more than minimum threshold",
+            {
+              initialLayout: closed,
+              prevLayout: open,
+              delta: panelId === "left" ? 6 : -6,
+              expectedLayout: open
+            }
+          ]
+        ])("%s", (_, { initialLayout, prevLayout, delta, expectedLayout }) => {
+          expect(
+            adjustLayoutByDelta({
+              delta,
+              initialLayout,
+              panelConstraints,
+              prevLayout,
+              trigger: "mouse-or-touch"
+            })
+          ).toEqual(expectedLayout);
+        });
+      });
+    });
+  });
 });