react-resizable-panels 2.1.6 → 2.1.8

package/src/utils/test-utils.ts

@@ -1,205 +0,0 @@
-import { assert } from "./assert";
-
-const util = require("util");
-
-export function dispatchPointerEvent(type: string, target: HTMLElement) {
-  const rect = target.getBoundingClientRect();
-
-  const clientX = rect.left + rect.width / 2;
-  const clientY = rect.top + rect.height / 2;
-
-  const event = new MouseEvent(type, {
-    bubbles: true,
-    clientX,
-    clientY,
-    buttons: 1,
-  });
-  Object.defineProperties(event, {
-    pageX: {
-      get() {
-        return clientX;
-      },
-    },
-    pageY: {
-      get() {
-        return clientY;
-      },
-    },
-    isPrimary: {
-      value: true,
-    },
-  });
-
-  target.dispatchEvent(event);
-}
-
-export function expectToBeCloseToArray(
-  actualNumbers: number[],
-  expectedNumbers: number[]
-) {
-  expect(actualNumbers.length).toBe(expectedNumbers.length);
-
-  try {
-    actualNumbers.forEach((actualNumber, index) => {
-      const expectedNumber = expectedNumbers[index];
-      assert(expectedNumber != null, `Expected number not found`);
-
-      expect(actualNumber).toBeCloseTo(expectedNumber, 1);
-    });
-  } catch (error) {
-    expect(actualNumbers).toEqual(expectedNumbers);
-  }
-}
-
-export function mockBoundingClientRect(
-  element: HTMLElement,
-  rect: {
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-  }
-) {
-  const { height, width, x, y } = rect;
-
-  Object.defineProperty(element, "getBoundingClientRect", {
-    configurable: true,
-    value: () =>
-      ({
-        bottom: y + height,
-        height,
-        left: x,
-        right: x + width,
-        toJSON() {
-          return "";
-        },
-        top: y,
-        width,
-        x,
-        y,
-      }) satisfies DOMRect,
-  });
-}
-
-export function mockPanelGroupOffsetWidthAndHeight(
-  mockWidth = 1_000,
-  mockHeight = 1_000
-) {
-  const offsetHeightPropertyDescriptor = Object.getOwnPropertyDescriptor(
-    HTMLElement.prototype,
-    "offsetHeight"
-  );
-
-  const offsetWidthPropertyDescriptor = Object.getOwnPropertyDescriptor(
-    HTMLElement.prototype,
-    "offsetWidth"
-  );
-
-  Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
-    configurable: true,
-    get: function () {
-      if (this.hasAttribute("data-resize-handle")) {
-        return 0;
-      } else if (this.hasAttribute("data-panel-group")) {
-        return mockHeight;
-      }
-    },
-  });
-
-  Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-    configurable: true,
-    get: function () {
-      if (this.hasAttribute("data-resize-handle")) {
-        return 0;
-      } else if (this.hasAttribute("data-panel-group")) {
-        return mockWidth;
-      }
-    },
-  });
-
-  return function uninstallMocks() {
-    if (offsetHeightPropertyDescriptor) {
-      Object.defineProperty(
-        HTMLElement.prototype,
-        "offsetHeight",
-        offsetHeightPropertyDescriptor
-      );
-    }
-
-    if (offsetWidthPropertyDescriptor) {
-      Object.defineProperty(
-        HTMLElement.prototype,
-        "offsetWidth",
-        offsetWidthPropertyDescriptor
-      );
-    }
-  };
-}
-
-export function verifyAttribute(
-  element: HTMLElement,
-  attributeName: string,
-  expectedValue: string | null
-) {
-  const actualValue = element.getAttribute(attributeName);
-  expect(actualValue).toBe(expectedValue);
-}
-
-export function verifyExpandedPanelGroupLayout(
-  actualLayout: number[],
-  expectedLayout: number[]
-) {
-  expect(actualLayout).toEqual(expectedLayout);
-}
-
-export function verifyExpectedWarnings(
-  callback: Function,
-  ...expectedMessages: string[]
-) {
-  const consoleSpy = (format: any, ...args: any[]) => {
-    const message = util.format(format, ...args);
-
-    for (let index = 0; index < expectedMessages.length; index++) {
-      const expectedMessage = expectedMessages[index];
-      if (message.includes(expectedMessage)) {
-        expectedMessages.splice(index, 1);
-        return;
-      }
-    }
-
-    if (expectedMessages.length === 0) {
-      throw new Error(`Unexpected message recorded:\n\n${message}`);
-    }
-  };
-
-  const originalError = console.error;
-  const originalWarn = console.warn;
-
-  console.error = consoleSpy;
-  console.warn = consoleSpy;
-
-  let caughtError;
-  let didCatch = false;
-  try {
-    callback();
-  } catch (error) {
-    caughtError = error;
-    didCatch = true;
-  } finally {
-    console.error = originalError;
-    console.warn = originalWarn;
-
-    if (didCatch) {
-      throw caughtError;
-    }
-
-    // Any remaining messages indicate a failed expectations.
-    if (expectedMessages.length > 0) {
-      throw Error(
-        `Expected message(s) not recorded:\n\n${expectedMessages.join("\n")}`
-      );
-    }
-
-    return { pass: true };
-  }
-}

package/src/utils/validatePanelConstraints.test.ts

@@ -1,143 +0,0 @@
-import { verifyExpectedWarnings } from "./test-utils";
-import { validatePanelConstraints } from "./validatePanelConstraints";
-
-describe("validatePanelConstraints", () => {
-  it("should not warn if there are no validation errors", () => {
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [{}],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    });
-  });
-
-  it("should warn about conflicting min/max sizes", () => {
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            maxSize: 5,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "min size (10%) should not be greater than max size (5%)");
-  });
-
-  it("should warn about conflicting collapsed and min sizes", () => {
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            collapsedSize: 15,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "collapsed size should not be greater than min size");
-  });
-
-  it("should warn about conflicting default and min/max sizes", () => {
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            defaultSize: -1,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be less than 0");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            defaultSize: 5,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be less than min size");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            collapsedSize: 5,
-            collapsible: true,
-            defaultSize: 5,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    });
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            collapsedSize: 7,
-            collapsible: true,
-            defaultSize: 5,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be less than min size");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            collapsedSize: 5,
-            collapsible: false,
-            defaultSize: 5,
-            minSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be less than min size");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            defaultSize: 101,
-            maxSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be greater than 100");
-
-    verifyExpectedWarnings(() => {
-      validatePanelConstraints({
-        panelConstraints: [
-          {
-            defaultSize: 15,
-            maxSize: 10,
-          },
-        ],
-        panelIndex: 0,
-        panelId: "test",
-      });
-    }, "default size should not be greater than max size");
-  });
-});

package/src/utils/validatePanelConstraints.ts

@@ -1,69 +0,0 @@
-import { isDevelopment } from "#is-development";
-import { PanelConstraints } from "../Panel";
-import { assert } from "./assert";
-
-export function validatePanelConstraints({
-  panelConstraints: panelConstraintsArray,
-  panelId,
-  panelIndex,
-}: {
-  panelConstraints: PanelConstraints[];
-  panelId: string | undefined;
-  panelIndex: number;
-}): boolean {
-  if (isDevelopment) {
-    const warnings = [];
-
-    const panelConstraints = panelConstraintsArray[panelIndex];
-    assert(
-      panelConstraints,
-      `No panel constraints found for index ${panelIndex}`
-    );
-
-    const {
-      collapsedSize = 0,
-      collapsible = false,
-      defaultSize,
-      maxSize = 100,
-      minSize = 0,
-    } = panelConstraints;
-
-    if (minSize > maxSize) {
-      warnings.push(
-        `min size (${minSize}%) should not be greater than max size (${maxSize}%)`
-      );
-    }
-
-    if (defaultSize != null) {
-      if (defaultSize < 0) {
-        warnings.push("default size should not be less than 0");
-      } else if (
-        defaultSize < minSize &&
-        (!collapsible || defaultSize !== collapsedSize)
-      ) {
-        warnings.push("default size should not be less than min size");
-      }
-
-      if (defaultSize > 100) {
-        warnings.push("default size should not be greater than 100");
-      } else if (defaultSize > maxSize) {
-        warnings.push("default size should not be greater than max size");
-      }
-    }
-
-    if (collapsedSize > minSize) {
-      warnings.push("collapsed size should not be greater than min size");
-    }
-
-    if (warnings.length > 0) {
-      const name = panelId != null ? `Panel "${panelId}"` : "Panel";
-      console.warn(
-        `${name} has an invalid configuration:\n\n${warnings.join("\n")}`
-      );
-
-      return false;
-    }
-  }
-
-  return true;
-}

package/src/utils/validatePanelGroupLayout.test.ts

@@ -1,148 +0,0 @@
-import { verifyExpectedWarnings } from "./test-utils";
-import { validatePanelGroupLayout } from "./validatePanelGroupLayout";
-
-describe("validatePanelGroupLayout", () => {
-  it("should accept requested layout if there are no constraints provided", () => {
-    expect(
-      validatePanelGroupLayout({
-        layout: [10, 60, 30],
-        panelConstraints: [{}, {}, {}],
-      })
-    ).toEqual([10, 60, 30]);
-  });
-
-  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(() => {
-      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({
-        layout: [10, 20, 30],
-        panelConstraints: [{}, {}],
-      })
-    ).toThrow("Invalid 2 panel layout");
-
-    expect(() =>
-      validatePanelGroupLayout({
-        layout: [50, 50],
-        panelConstraints: [{}, {}, {}],
-      })
-    ).toThrow("Invalid 3 panel layout");
-  });
-
-  describe("minimum size constraints", () => {
-    it("should adjust the layout to account for minimum percentage sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [25, 75],
-          panelConstraints: [
-            {
-              minSize: 35,
-            },
-            {},
-          ],
-        })
-      ).toEqual([35, 65]);
-    });
-
-    it("should account for multiple panels with minimum size constraints", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [20, 60, 20],
-          panelConstraints: [
-            {
-              minSize: 25,
-            },
-            {},
-            {
-              minSize: 25,
-            },
-          ],
-        })
-      ).toEqual([25, 50, 25]);
-    });
-  });
-
-  describe("maximum size constraints", () => {
-    it("should adjust the layout to account for maximum percentage sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [25, 75],
-          panelConstraints: [{}, { maxSize: 65 }],
-        })
-      ).toEqual([35, 65]);
-    });
-
-    it("should account for multiple panels with maximum size constraints", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [20, 60, 20],
-          panelConstraints: [
-            {
-              maxSize: 15,
-            },
-            { maxSize: 50 },
-            {},
-          ],
-        })
-      ).toEqual([15, 50, 35]);
-    });
-  });
-
-  describe("collapsible panels", () => {
-    it("should not collapse a panel that's at or above the minimum size", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [25, 75],
-          panelConstraints: [{ collapsible: true, minSize: 25 }, {}],
-        })
-      ).toEqual([25, 75]);
-    });
-
-    it("should collapse a panel once it drops below the halfway point between collapsed and minimum percentage sizes", () => {
-      expect(
-        validatePanelGroupLayout({
-          layout: [15, 85],
-          panelConstraints: [
-            {
-              collapsible: true,
-              collapsedSize: 10,
-              minSize: 20,
-            },
-            {},
-          ],
-        })
-      ).toEqual([20, 80]);
-
-      expect(
-        validatePanelGroupLayout({
-          layout: [14, 86],
-          panelConstraints: [
-            {
-              collapsible: true,
-              collapsedSize: 10,
-              minSize: 20,
-            },
-            {},
-          ],
-        })
-      ).toEqual([10, 90]);
-    });
-  });
-});

package/src/utils/validatePanelGroupLayout.ts

@@ -1,95 +0,0 @@
-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({
-  layout: prevLayout,
-  panelConstraints,
-}: {
-  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) {
-    throw Error(
-      `Invalid ${panelConstraints.length} panel layout: ${nextLayout
-        .map((size) => `${size}%`)
-        .join(", ")}`
-    );
-  } else if (
-    !fuzzyNumbersEqual(nextLayoutTotalSize, 100) &&
-    nextLayout.length > 0
-  ) {
-    // 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(", ")}. Layout normalization will be applied.`
-      );
-    }
-    for (let index = 0; index < panelConstraints.length; index++) {
-      const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null, `No layout data found for index ${index}`);
-      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];
-    assert(unsafeSize != null, `No layout data found for index ${index}`);
-
-    const safeSize = resizePanel({
-      panelConstraints,
-      panelIndex: index,
-      size: unsafeSize,
-    });
-
-    if (unsafeSize != safeSize) {
-      remainingSize += unsafeSize - safeSize;
-
-      nextLayout[index] = safeSize;
-    }
-  }
-
-  // If there is additional, left over space, assign it to any panel(s) that permits it
-  // (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];
-      assert(prevSize != null, `No layout data found for index ${index}`);
-      const unsafeSize = prevSize + remainingSize;
-      const safeSize = resizePanel({
-        panelConstraints,
-        panelIndex: index,
-        size: unsafeSize,
-      });
-
-      if (prevSize !== safeSize) {
-        remainingSize -= safeSize - prevSize;
-        nextLayout[index] = safeSize;
-
-        // Once we've used up the remainder, bail
-        if (fuzzyNumbersEqual(remainingSize, 0)) {
-          break;
-        }
-      }
-    }
-  }
-
-  return nextLayout;
-}