react-resizable-panels 0.0.56 → 0.0.58

package/src/utils/convertPixelConstraintsToPercentages.ts

@@ -21,6 +21,23 @@ export function convertPixelConstraintsToPercentages(
     minSizePixels,
   } = panelConstraints;
 
+  const hasPixelConstraints =
+    collapsedSizePixels != null ||
+    defaultSizePixels != null ||
+    minSizePixels != null ||
+    maxSizePixels != null;
+
+  if (hasPixelConstraints && groupSizePixels <= 0) {
+    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
+
+    return {
+      collapsedSizePercentage: 0,
+      defaultSizePercentage,
+      maxSizePercentage: 0,
+      minSizePercentage: 0,
+    };
+  }
+
   if (collapsedSizePixels != null) {
     collapsedSizePercentage = convertPixelsToPercentage(
       collapsedSizePixels,

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,5 +1,7 @@
 export function getPanelGroupElement(id: string): HTMLDivElement | null {
-  const element = document.querySelector(`[data-panel-group-id="${id}"]`);
+  const element = document.querySelector(
+    `[data-panel-group][data-panel-group-id="${id}"]`
+  );
   if (element) {
     return element as HTMLDivElement;
   }

package/src/utils/resizePanel.test.ts

@@ -0,0 +1,105 @@
+import { resizePanel } from "./resizePanel";
+
+describe("resizePanel", () => {
+  it("should not collapse (or expand) until a panel size dips below the halfway point between min size and collapsed size", () => {
+    expect(
+      resizePanel({
+        groupSizePixels: 100,
+        panelConstraints: [
+          {
+            collapsible: true,
+            collapsedSizePercentage: 10,
+            minSizePercentage: 20,
+          },
+        ],
+        panelIndex: 0,
+        size: 15,
+      })
+    ).toBe(20);
+
+    expect(
+      resizePanel({
+        groupSizePixels: 100,
+        panelConstraints: [
+          {
+            collapsible: true,
+            collapsedSizePercentage: 10,
+            minSizePercentage: 20,
+          },
+        ],
+        panelIndex: 0,
+        size: 14,
+      })
+    ).toBe(10);
+
+    expect(
+      resizePanel({
+        groupSizePixels: 100,
+        panelConstraints: [
+          {
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+        ],
+        panelIndex: 0,
+        size: 10,
+      })
+    ).toBe(20);
+
+    expect(
+      resizePanel({
+        groupSizePixels: 100,
+        panelConstraints: [
+          {
+            collapsible: true,
+            minSizePercentage: 20,
+          },
+        ],
+        panelIndex: 0,
+        size: 9,
+      })
+    ).toBe(0);
+  });
+
+  // Edge case test (issues/206)
+  it("should respect percentage panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      resizePanel({
+        groupSizePixels: -100,
+        panelConstraints: [
+          {
+            minSizePercentage: 25,
+            maxSizePercentage: 75,
+          },
+        ],
+        panelIndex: 0,
+        size: 50,
+      })
+    ).toBe(50);
+
+    expect(console.warn).toHaveBeenCalledTimes(0);
+  });
+
+  // Edge case test (issues/206)
+  it("should handle pixel panel constraints if group size is negative", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(
+      resizePanel({
+        groupSizePixels: -100,
+        panelConstraints: [
+          {
+            minSizePixels: 25,
+            maxSizePixels: 75,
+          },
+        ],
+        panelIndex: 0,
+        size: 50,
+      })
+    ).toBe(0);
+
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/resizePanel.ts

@@ -14,6 +14,25 @@ export function resizePanel({
   panelIndex: number;
   size: number;
 }) {
+  const hasPixelConstraints = panelConstraints.some(
+    ({
+      collapsedSizePixels,
+      defaultSizePixels,
+      minSizePixels,
+      maxSizePixels,
+    }) =>
+      collapsedSizePixels != null ||
+      defaultSizePixels != null ||
+      minSizePixels != null ||
+      maxSizePixels != null
+  );
+
+  if (hasPixelConstraints && groupSizePixels <= 0) {
+    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
+
+    return 0;
+  }
+
   let { collapsible } = panelConstraints[panelIndex]!;
 
   const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
@@ -26,7 +45,13 @@ export function resizePanel({
   if (minSizePercentage != null) {
     if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
       if (collapsible) {
-        size = collapsedSizePercentage;
+        // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+        const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
+        if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+          size = collapsedSizePercentage;
+        } else {
+          size = minSizePercentage;
+        }
       } else {
         size = minSizePercentage;
       }

package/src/utils/validatePanelGroupLayout.test.ts

@@ -156,16 +156,31 @@ describe("validatePanelGroupLayout", () => {
       ).toEqual([25, 75]);
     });
 
-    it("should collapse a panel that's below the minimum percentage size", () => {
+    it("should collapse a panel once it drops below the halfway point between collapsed and minimum percentage sizes", () => {
       expect(
         validatePanelGroupLayout({
           groupSizePixels: NaN,
-          layout: [20, 80],
+          layout: [15, 85],
           panelConstraints: [
             {
               collapsible: true,
               collapsedSizePercentage: 10,
-              minSizePercentage: 25,
+              minSizePercentage: 20,
+            },
+            {},
+          ],
+        })
+      ).toEqual([20, 80]);
+
+      expect(
+        validatePanelGroupLayout({
+          groupSizePixels: NaN,
+          layout: [14, 86],
+          panelConstraints: [
+            {
+              collapsible: true,
+              collapsedSizePercentage: 10,
+              minSizePercentage: 20,
             },
             {},
           ],
@@ -173,7 +188,7 @@ describe("validatePanelGroupLayout", () => {
       ).toEqual([10, 90]);
     });
 
-    it("should collapse a panel that's below the minimum pixel size", () => {
+    it("should collapse a panel once it drops below the halfway point between collapsed and minimum pixel sizes", () => {
       expect(
         validatePanelGroupLayout({
           groupSizePixels: 400,
@@ -181,13 +196,28 @@ describe("validatePanelGroupLayout", () => {
           panelConstraints: [
             {
               collapsible: true,
-              collapsedSizePixels: 40,
+              collapsedSizePixels: 0,
               minSizePixels: 100,
             },
             {},
           ],
         })
-      ).toEqual([10, 90]);
+      ).toEqual([25, 75]);
+
+      expect(
+        validatePanelGroupLayout({
+          groupSizePixels: 400,
+          layout: [10, 90],
+          panelConstraints: [
+            {
+              collapsible: true,
+              collapsedSizePixels: 0,
+              minSizePixels: 100,
+            },
+            {},
+          ],
+        })
+      ).toEqual([0, 100]);
     });
   });