react-resizable-panels 0.0.63 → 1.0.0-rc.1

package/src/utils/validatePanelGroupLayout.test.ts

@@ -5,39 +5,34 @@ describe("validatePanelGroupLayout", () => {
   it("should accept requested layout if there are no constraints provided", () => {
     expect(
       validatePanelGroupLayout({
-        groupSizePixels: NaN,
         layout: [10, 60, 30],
         panelConstraints: [{}, {}, {}],
       })
     ).toEqual([10, 60, 30]);
   });
 
-  it("should reject layouts that do not total 100%", () => {
-    verifyExpectedWarnings(
-      () =>
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [10, 20, 30],
-          panelConstraints: [{}, {}, {}],
-        }),
-      "Invalid layout total size"
-    );
+  it("should normalize layouts that do not total 100%", () => {
+    let layout;
+    verifyExpectedWarnings(() => {
+      layout = validatePanelGroupLayout({
+        layout: [10, 20, 20],
+        panelConstraints: [{}, {}, {}],
+      });
+    }, "Invalid layout total size");
+    expect(layout).toEqual([20, 40, 40]);
 
-    verifyExpectedWarnings(
-      () =>
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [50, 100, 150],
-          panelConstraints: [{}, {}, {}],
-        }),
-      "Invalid layout total size"
-    );
+    verifyExpectedWarnings(() => {
+      layout = validatePanelGroupLayout({
+        layout: [50, 100, 50],
+        panelConstraints: [{}, {}, {}],
+      });
+    }, "Invalid layout total size");
+    expect(layout).toEqual([25, 50, 25]);
   });
 
   it("should reject layouts that do not match the number of panels", () => {
     expect(() =>
       validatePanelGroupLayout({
-        groupSizePixels: NaN,
         layout: [10, 20, 30],
         panelConstraints: [{}, {}],
       })
@@ -45,7 +40,6 @@ describe("validatePanelGroupLayout", () => {
 
     expect(() =>
       validatePanelGroupLayout({
-        groupSizePixels: NaN,
         layout: [50, 50],
         panelConstraints: [{}, {}, {}],
       })
@@ -56,11 +50,10 @@ describe("validatePanelGroupLayout", () => {
     it("should adjust the layout to account for minimum percentage sizes", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [25, 75],
           panelConstraints: [
             {
-              minSizePercentage: 35,
+              minSize: 35,
             },
             {},
           ],
@@ -68,33 +61,17 @@ describe("validatePanelGroupLayout", () => {
       ).toEqual([35, 65]);
     });
 
-    it("should adjust the layout to account for minimum pixel sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: 400,
-          layout: [20, 80],
-          panelConstraints: [
-            {
-              minSizePixels: 100,
-            },
-            {},
-          ],
-        })
-      ).toEqual([25, 75]);
-    });
-
     it("should account for multiple panels with minimum size constraints", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [20, 60, 20],
           panelConstraints: [
             {
-              minSizePercentage: 25,
+              minSize: 25,
             },
             {},
             {
-              minSizePercentage: 25,
+              minSize: 25,
             },
           ],
         })
@@ -106,38 +83,21 @@ describe("validatePanelGroupLayout", () => {
     it("should adjust the layout to account for maximum percentage sizes", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [25, 75],
-          panelConstraints: [{}, { maxSizePercentage: 65 }],
+          panelConstraints: [{}, { maxSize: 65 }],
         })
       ).toEqual([35, 65]);
     });
 
-    it("should adjust the layout to account for maximum pixel sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: 400,
-          layout: [20, 80],
-          panelConstraints: [
-            {},
-            {
-              maxSizePixels: 100,
-            },
-          ],
-        })
-      ).toEqual([75, 25]);
-    });
-
     it("should account for multiple panels with maximum size constraints", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [20, 60, 20],
           panelConstraints: [
             {
-              maxSizePercentage: 15,
+              maxSize: 15,
             },
-            { maxSizePercentage: 50 },
+            { maxSize: 50 },
             {},
           ],
         })
@@ -149,9 +109,8 @@ describe("validatePanelGroupLayout", () => {
     it("should not collapse a panel that's at or above the minimum size", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [25, 75],
-          panelConstraints: [{ collapsible: true, minSizePercentage: 25 }, {}],
+          panelConstraints: [{ collapsible: true, minSize: 25 }, {}],
         })
       ).toEqual([25, 75]);
     });
@@ -159,13 +118,12 @@ describe("validatePanelGroupLayout", () => {
     it("should collapse a panel once it drops below the halfway point between collapsed and minimum percentage sizes", () => {
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [15, 85],
           panelConstraints: [
             {
               collapsible: true,
-              collapsedSizePercentage: 10,
-              minSizePercentage: 20,
+              collapsedSize: 10,
+              minSize: 20,
             },
             {},
           ],
@@ -174,90 +132,17 @@ describe("validatePanelGroupLayout", () => {
 
       expect(
         validatePanelGroupLayout({
-          groupSizePixels: NaN,
           layout: [14, 86],
           panelConstraints: [
             {
               collapsible: true,
-              collapsedSizePercentage: 10,
-              minSizePercentage: 20,
+              collapsedSize: 10,
+              minSize: 20,
             },
             {},
           ],
         })
       ).toEqual([10, 90]);
     });
-
-    it("should collapse a panel once it drops below the halfway point between collapsed and minimum pixel sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: 400,
-          layout: [20, 80],
-          panelConstraints: [
-            {
-              collapsible: true,
-              collapsedSizePixels: 0,
-              minSizePixels: 100,
-            },
-            {},
-          ],
-        })
-      ).toEqual([25, 75]);
-
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: 400,
-          layout: [10, 90],
-          panelConstraints: [
-            {
-              collapsible: true,
-              collapsedSizePixels: 0,
-              minSizePixels: 100,
-            },
-            {},
-          ],
-        })
-      ).toEqual([0, 100]);
-    });
-  });
-
-  describe("combination of minimum and maximum size constraints", () => {
-    it("three panel min/max configuration", () => {
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [25, 50, 25],
-          panelConstraints: [
-            { minSizePercentage: 10, maxSizePercentage: 25 },
-            { maxSizePercentage: 75 },
-            { minSizePercentage: 10, maxSizePercentage: 50 },
-          ],
-        })
-      ).toEqual([25, 50, 25]);
-
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [5, 80, 15],
-          panelConstraints: [
-            { minSizePercentage: 10, maxSizePercentage: 25 },
-            { maxSizePercentage: 75 },
-            { minSizePercentage: 10, maxSizePercentage: 50 },
-          ],
-        })
-      ).toEqual([10, 75, 15]);
-
-      expect(
-        validatePanelGroupLayout({
-          groupSizePixels: NaN,
-          layout: [30, 10, 60],
-          panelConstraints: [
-            { minSizePercentage: 10, maxSizePercentage: 25 },
-            { maxSizePercentage: 75 },
-            { minSizePercentage: 10, maxSizePercentage: 50 },
-          ],
-        })
-      ).toEqual([25, 25, 50]);
-    });
   });
 });

package/src/utils/validatePanelGroupLayout.ts

@@ -1,19 +1,22 @@
 import { isDevelopment } from "#is-development";
 import { PanelConstraints } from "../Panel";
+import { assert } from "./assert";
 import { fuzzyNumbersEqual } from "./numbers/fuzzyNumbersEqual";
 import { resizePanel } from "./resizePanel";
 
 // All units must be in percentages; pixel values should be pre-converted
 export function validatePanelGroupLayout({
-  groupSizePixels,
   layout: prevLayout,
   panelConstraints,
 }: {
-  groupSizePixels: number;
   layout: number[];
   panelConstraints: PanelConstraints[];
 }): number[] {
   const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce(
+    (accumulated, current) => accumulated + current,
+    0
+  );
 
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
@@ -22,31 +25,32 @@ export function validatePanelGroupLayout({
         .map((size) => `${size}%`)
         .join(", ")}`
     );
-  } else if (
-    !fuzzyNumbersEqual(
-      nextLayout.reduce((accumulated, current) => accumulated + current, 0),
-      100
-    )
-  ) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     if (isDevelopment) {
       console.warn(
         `WARNING: Invalid layout total size: ${nextLayout
           .map((size) => `${size}%`)
-          .join(", ")}`
+          .join(", ")}. Layout normalization will be applied.`
       );
     }
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      assert(unsafeSize != null);
+      const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
   }
 
   let remainingSize = 0;
 
   // First pass: Validate the proposed layout given each panel's constraints
   for (let index = 0; index < panelConstraints.length; index++) {
-    const unsafeSize = nextLayout[index]!;
+    const unsafeSize = nextLayout[index];
+    assert(unsafeSize != null);
 
     const safeSize = resizePanel({
-      groupSizePixels,
       panelConstraints,
       panelIndex: index,
       size: unsafeSize,
@@ -63,10 +67,10 @@ export function validatePanelGroupLayout({
   // (It's not worth taking multiple additional passes to evenly distribute)
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
-      const prevSize = nextLayout[index]!;
+      const prevSize = nextLayout[index];
+      assert(prevSize != null);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
-        groupSizePixels,
         panelConstraints,
         panelIndex: index,
         size: unsafeSize,

package/src/vendor/react.ts

@@ -12,6 +12,7 @@ import type {
   CSSProperties,
   ElementType,
   ForwardedRef,
+  HTMLAttributes,
   MouseEvent,
   PropsWithChildren,
   ReactNode,
@@ -57,6 +58,7 @@ export type {
   CSSProperties,
   ElementType,
   ForwardedRef,
+  HTMLAttributes,
   MouseEvent,
   PropsWithChildren,
   ReactNode,

package/src/utils/computePercentagePanelConstraints.test.ts

@@ -1,98 +0,0 @@
-import { PanelConstraints } from "../Panel";
-import { computePercentagePanelConstraints } from "./computePercentagePanelConstraints";
-
-describe("computePercentagePanelConstraints", () => {
-  it("should compute reasonable defaults with no constraints", () => {
-    expect(computePercentagePanelConstraints([{}, {}], 0, 100))
-      .toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 100,
-  "minSizePercentage": 0,
-}
-`);
-
-    expect(computePercentagePanelConstraints([{}, {}], 1, 100))
-      .toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 100,
-  "minSizePercentage": 0,
-}
-`);
-  });
-
-  it("should compute percentage based constraints based on a mix of pixels and percentages", () => {
-    const constraints: PanelConstraints[] = [
-      {
-        maxSizePixels: 20,
-        minSizePixels: 10,
-      },
-      {
-        minSizePixels: 10,
-      },
-      {
-        minSizePixels: 10,
-      },
-    ];
-
-    expect(computePercentagePanelConstraints(constraints, 0, 100))
-      .toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 20,
-  "minSizePercentage": 10,
-}
-`);
-
-    expect(computePercentagePanelConstraints(constraints, 1, 100))
-      .toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 80,
-  "minSizePercentage": 10,
-}
-`);
-
-    expect(computePercentagePanelConstraints(constraints, 2, 100))
-      .toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 80,
-  "minSizePercentage": 10,
-}
-`);
-  });
-
-  it("should compute reasonable percentage based constraints from pixels if group size is negative", () => {
-    jest.spyOn(console, "warn").mockImplementation(() => {});
-
-    expect(
-      computePercentagePanelConstraints(
-        [
-          {
-            minSizePixels: 25,
-            maxSizePixels: 100,
-          },
-        ],
-
-        0,
-        -100
-      )
-    ).toMatchInlineSnapshot(`
-{
-  "collapsedSizePercentage": 0,
-  "defaultSizePercentage": undefined,
-  "maxSizePercentage": 0,
-  "minSizePercentage": 0,
-}
-`);
-
-    expect(console.warn).toHaveBeenCalledTimes(1);
-  });
-});

package/src/utils/computePercentagePanelConstraints.ts

@@ -1,56 +0,0 @@
-import { PanelConstraints } from "../Panel";
-import { convertPixelConstraintsToPercentages } from "./convertPixelConstraintsToPercentages";
-
-export function computePercentagePanelConstraints(
-  panelConstraintsArray: PanelConstraints[],
-  panelIndex: number,
-  groupSizePixels: number
-): {
-  collapsedSizePercentage: number;
-  defaultSizePercentage: number | undefined;
-  maxSizePercentage: number;
-  minSizePercentage: number;
-} {
-  // All panel constraints, excluding the current one
-  let totalMinConstraints = 0;
-  let totalMaxConstraints = 0;
-
-  for (let index = 0; index < panelConstraintsArray.length; index++) {
-    if (index !== panelIndex) {
-      const { collapsible } = panelConstraintsArray[index]!;
-      const { collapsedSizePercentage, maxSizePercentage, minSizePercentage } =
-        convertPixelConstraintsToPercentages(
-          panelConstraintsArray[index]!,
-          groupSizePixels
-        );
-
-      totalMaxConstraints += maxSizePercentage;
-      totalMinConstraints += collapsible
-        ? collapsedSizePercentage
-        : minSizePercentage;
-    }
-  }
-
-  const {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage,
-    minSizePercentage,
-  } = convertPixelConstraintsToPercentages(
-    panelConstraintsArray[panelIndex]!,
-    groupSizePixels
-  );
-
-  return {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage:
-      panelConstraintsArray.length > 1
-        ? Math.min(maxSizePercentage, 100 - totalMinConstraints)
-        : maxSizePercentage,
-    minSizePercentage:
-      panelConstraintsArray.length > 1
-        ? Math.max(minSizePercentage, 100 - totalMaxConstraints)
-        : minSizePercentage,
-  };
-}

package/src/utils/convertPercentageToPixels.test.ts

@@ -1,9 +0,0 @@
-import { convertPercentageToPixels } from "./convertPercentageToPixels";
-
-describe("convertPercentageToPixels", () => {
-  it("should convert percentages to pixels", () => {
-    expect(convertPercentageToPixels(0, 100_000)).toBe(0);
-    expect(convertPercentageToPixels(50, 100_000)).toBe(50_000);
-    expect(convertPercentageToPixels(100, 100_000)).toBe(100_000);
-  });
-});

package/src/utils/convertPercentageToPixels.ts

@@ -1,6 +0,0 @@
-export function convertPercentageToPixels(
-  percentage: number,
-  groupSizePixels: number
-): number {
-  return (percentage / 100) * groupSizePixels;
-}

package/src/utils/convertPixelConstraintsToPercentages.test.ts

@@ -1,47 +0,0 @@
-import { convertPixelConstraintsToPercentages } from "./convertPixelConstraintsToPercentages";
-
-describe("convertPixelConstraintsToPercentages", () => {
-  it("should respect percentage panel constraints if group size is negative", () => {
-    jest.spyOn(console, "warn").mockImplementation(() => {});
-
-    expect(
-      convertPixelConstraintsToPercentages(
-        {
-          minSizePercentage: 25,
-          defaultSizePercentage: 50,
-          maxSizePercentage: 75,
-        },
-        -100
-      )
-    ).toEqual({
-      collapsedSizePercentage: 0,
-      defaultSizePercentage: 50,
-      maxSizePercentage: 75,
-      minSizePercentage: 25,
-    });
-
-    expect(console.warn).toHaveBeenCalledTimes(0);
-  });
-
-  // Edge case test (issues/206)
-  it("should ignore pixel panel constraints if group size is negative", () => {
-    jest.spyOn(console, "warn").mockImplementation(() => {});
-
-    expect(
-      convertPixelConstraintsToPercentages(
-        {
-          minSizePixels: 25,
-          maxSizePixels: 75,
-        },
-        -100
-      )
-    ).toEqual({
-      collapsedSizePercentage: 0,
-      defaultSizePercentage: undefined,
-      maxSizePercentage: 0,
-      minSizePercentage: 0,
-    });
-
-    expect(console.warn).toHaveBeenCalledTimes(1);
-  });
-});

package/src/utils/convertPixelConstraintsToPercentages.ts

@@ -1,72 +0,0 @@
-import { PanelConstraints } from "../Panel";
-import { convertPixelsToPercentage } from "./convertPixelsToPercentage";
-
-export function convertPixelConstraintsToPercentages(
-  panelConstraints: PanelConstraints,
-  groupSizePixels: number
-): {
-  collapsedSizePercentage: number;
-  defaultSizePercentage: number | undefined;
-  maxSizePercentage: number;
-  minSizePercentage: number;
-} {
-  let {
-    collapsedSizePercentage = 0,
-    collapsedSizePixels,
-    defaultSizePercentage,
-    defaultSizePixels,
-    maxSizePercentage = 100,
-    maxSizePixels,
-    minSizePercentage = 0,
-    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,
-      groupSizePixels
-    );
-  }
-  if (defaultSizePixels != null) {
-    defaultSizePercentage = convertPixelsToPercentage(
-      defaultSizePixels,
-      groupSizePixels
-    );
-  }
-  if (minSizePixels != null) {
-    minSizePercentage = convertPixelsToPercentage(
-      minSizePixels,
-      groupSizePixels
-    );
-  }
-  if (maxSizePixels != null) {
-    maxSizePercentage = convertPixelsToPercentage(
-      maxSizePixels,
-      groupSizePixels
-    );
-  }
-
-  return {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage,
-    minSizePercentage,
-  };
-}

package/src/utils/convertPixelsToPercentage.test.ts

@@ -1,9 +0,0 @@
-import { convertPixelsToPercentage } from "./convertPixelsToPercentage";
-
-describe("convertPixelsToPercentage", () => {
-  it("should convert pixels to percentages", () => {
-    expect(convertPixelsToPercentage(0, 100_000)).toBe(0);
-    expect(convertPixelsToPercentage(50_000, 100_000)).toBe(50);
-    expect(convertPixelsToPercentage(100_000, 100_000)).toBe(100);
-  });
-});

package/src/utils/convertPixelsToPercentage.ts

@@ -1,6 +0,0 @@
-export function convertPixelsToPercentage(
-  pixels: number,
-  groupSizePixels: number
-): number {
-  return (pixels / groupSizePixels) * 100;
-}