react-resizable-panels 2.0.8 → 2.0.10

package/src/PanelGroup.ts

@@ -302,7 +302,7 @@ function PanelGroupWithForwardedRef({
           panelIndex++
         ) {
           const panelData = panelDataArray[panelIndex];
-          assert(panelData);
+          assert(panelData, `Panel data not found for index ${panelIndex}`);
 
           const isValid = validatePanelConstraints({
             panelConstraints,
@@ -336,7 +336,10 @@ function PanelGroupWithForwardedRef({
         pivotIndices,
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
 
-      assert(panelSize != null);
+      assert(
+        panelSize != null,
+        `Panel size not found for panel "${panelData.id}"`
+      );
 
       if (panelSize !== collapsedSize) {
         // Store size before collapse;
@@ -443,7 +446,10 @@ function PanelGroupWithForwardedRef({
 
     const { panelSize } = panelDataHelper(panelDataArray, panelData, layout);
 
-    assert(panelSize != null);
+    assert(
+      panelSize != null,
+      `Panel size not found for panel "${panelData.id}"`
+    );
 
     return panelSize;
   }, []);
@@ -489,7 +495,10 @@ function PanelGroupWithForwardedRef({
       panelSize,
     } = panelDataHelper(panelDataArray, panelData, layout);
 
-    assert(panelSize != null);
+    assert(
+      panelSize != null,
+      `Panel size not found for panel "${panelData.id}"`
+    );
 
     return !collapsible || panelSize > collapsedSize;
   }, []);
@@ -699,7 +708,10 @@ function PanelGroupWithForwardedRef({
         prevLayout
       );
 
-      assert(panelSize != null);
+      assert(
+        panelSize != null,
+        `Panel size not found for panel "${panelData.id}"`
+      );
 
       const isLastPanel =
         findPanelDataIndex(panelDataArray, panelData) ===
@@ -756,7 +768,10 @@ function PanelGroupWithForwardedRef({
         panelData,
         layout
       );
-      assert(prevPanelSize != null);
+      if (prevPanelSize == null) {
+        // It's possible that the panels in this group have changed since the last render
+        return;
+      }
 
       if (
         prevCollapsible &&
@@ -788,7 +803,10 @@ function PanelGroupWithForwardedRef({
         dragHandleId,
         panelGroupElementRef.current
       );
-      assert(handleElement);
+      assert(
+        handleElement,
+        `Drag handle element not found for id "${dragHandleId}"`
+      );
 
       const initialCursorPosition = getResizeEventCursorPosition(
         direction,

package/src/PanelResizeHandle.test.tsx

@@ -66,7 +66,7 @@ describe("PanelResizeHandle", () => {
     });
 
     const element = getResizeHandleElement("handle", container);
-    assert(element);
+    assert(element, "");
     expect(element.tabIndex).toBe(123);
     expect(element.getAttribute("data-test-name")).toBe("foo");
     expect(element.title).toBe("bar");
@@ -94,8 +94,8 @@ describe("PanelResizeHandle", () => {
     const leftElement = getResizeHandleElement("handle-left", container);
     const rightElement = getResizeHandleElement("handle-right", container);
 
-    assert(leftElement);
-    assert(rightElement);
+    assert(leftElement, "");
+    assert(rightElement, "");
 
     // JSDom doesn't properly handle bounding rects
     mockBoundingClientRect(leftElement, {

package/src/PanelResizeHandle.ts

@@ -116,7 +116,7 @@ export function PanelResizeHandle({
     }
 
     const element = elementRef.current;
-    assert(element);
+    assert(element, "Element ref not attached");
 
     const setResizeHandlerState = (
       action: ResizeHandlerAction,

package/src/PanelResizeHandleRegistry.ts

@@ -1,9 +1,9 @@
-import { compare } from "stacking-order";
 import { Direction, ResizeEvent } from "./types";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
 import { getInputType } from "./utils/getInputType";
 import { intersects } from "./utils/rects/intersects";
+import { compare } from "./vendor/stacking-order";
 
 export type ResizeHandlerAction = "down" | "move" | "up";
 export type SetResizeHandlerState = (
@@ -269,7 +269,7 @@ function updateListeners() {
   window.removeEventListener("touchcancel", handlePointerUp);
   window.removeEventListener("touchend", handlePointerUp);
 
-  if (registerResizeHandle.length > 0) {
+  if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
         ownerDocumentCounts.forEach((count, ownerDocument) => {

package/src/hooks/useWindowSplitterBehavior.ts

@@ -49,7 +49,7 @@ export function useWindowSplitterResizeHandlerBehavior({
           event.preventDefault();
 
           const groupId = handleElement.getAttribute("data-panel-group-id");
-          assert(groupId);
+          assert(groupId, `No group element found for id "${groupId}"`);
 
           const handles = getResizeHandleElementsForGroup(
             groupId,
@@ -61,7 +61,10 @@ export function useWindowSplitterResizeHandlerBehavior({
             panelGroupElement
           );
 
-          assert(index !== null);
+          assert(
+            index !== null,
+            `No resize element found for id "${handleId}"`
+          );
 
           const nextIndex = event.shiftKey
             ? index > 0

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -72,7 +72,7 @@ export function useWindowSplitterPanelGroupBehavior({
         }
       } else {
         const panelData = panelDataArray[index];
-        assert(panelData);
+        assert(panelData, `No panel data found for index "${index}"`);
 
         resizeHandleElement.setAttribute("aria-controls", panelData.id);
         resizeHandleElement.setAttribute(
@@ -105,18 +105,18 @@ export function useWindowSplitterPanelGroupBehavior({
       return;
     }
     const eagerValues = eagerValuesRef.current;
-    assert(eagerValues);
+    assert(eagerValues, `Eager values not found`);
 
     const { panelDataArray } = eagerValues;
     const groupElement = getPanelGroupElement(groupId, panelGroupElement);
     assert(groupElement != null, `No group found for id "${groupId}"`);
 
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles);
+    assert(handles, `No resize handles found for group id "${groupId}"`);
 
     const cleanupFunctions = handles.map((handle) => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      assert(handleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
 
       const [idBefore, idAfter] = getResizeHandlePanelIds(
         groupId,
@@ -142,7 +142,7 @@ export function useWindowSplitterPanelGroupBehavior({
             );
             if (index >= 0) {
               const panelData = panelDataArray[index];
-              assert(panelData);
+              assert(panelData, `No panel data found for index ${index}`);
 
               const size = layout[index];
 

package/src/utils/adjustLayoutByDelta.ts

@@ -25,8 +25,8 @@ export function adjustLayoutByDelta({
   const nextLayout = [...prevLayout];
 
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-  assert(firstPivotIndex != null);
-  assert(secondPivotIndex != null);
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
 
   let deltaApplied = 0;
 
@@ -53,17 +53,25 @@ export function adjustLayoutByDelta({
         // Check if we should expand a collapsed panel
         const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(
+          panelConstraints,
+          `Panel constraints not found for index ${index}`
+        );
+
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0,
+        } = panelConstraints;
 
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (panelConstraints.collapsible) {
+        if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const { collapsedSize = 0, minSize = 0 } = panelConstraints;
+          assert(
+            prevSize != null,
+            `Previous layout not found for panel index ${index}`
+          );
 
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
@@ -81,18 +89,25 @@ export function adjustLayoutByDelta({
         // Check if we should collapse a panel at its minimum size
         const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
-        const { collapsible } = panelConstraints;
+        assert(
+          panelConstraints,
+          `No panel constraints found for index ${index}`
+        );
+
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0,
+        } = panelConstraints;
 
         //DEBUG.push(`edge case check 2: ${index}`);
         //DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const { collapsedSize = 0, minSize = 0 } = panelConstraints;
+          assert(
+            prevSize != null,
+            `Previous layout not found for panel index ${index}`
+          );
 
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
@@ -124,7 +139,10 @@ export function adjustLayoutByDelta({
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(
+        prevSize != null,
+        `Previous layout not found for panel index ${index}`
+      );
 
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -158,7 +176,10 @@ export function adjustLayoutByDelta({
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
 
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(
+        prevSize != null,
+        `Previous layout not found for panel index ${index}`
+      );
 
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
@@ -206,7 +227,10 @@ export function adjustLayoutByDelta({
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
 
     const prevSize = prevLayout[pivotIndex];
-    assert(prevSize != null);
+    assert(
+      prevSize != null,
+      `Previous layout not found for panel index ${pivotIndex}`
+    );
 
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
@@ -226,7 +250,10 @@ export function adjustLayoutByDelta({
       let index = pivotIndex;
       while (index >= 0 && index < panelConstraintsArray.length) {
         const prevSize = nextLayout[index];
-        assert(prevSize != null);
+        assert(
+          prevSize != null,
+          `Previous layout not found for panel index ${index}`
+        );
 
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({

package/src/utils/assert.ts

@@ -1,6 +1,6 @@
 export function assert(
   expectedCondition: any,
-  message: string = "Assertion failed!"
+  message: string
 ): asserts expectedCondition {
   if (!expectedCondition) {
     console.error(message);

package/src/utils/calculateAriaValues.ts

@@ -16,7 +16,7 @@ export function calculateAriaValues({
   let totalMaxSize = 0;
 
   const firstIndex = pivotIndices[0];
-  assert(firstIndex != null);
+  assert(firstIndex != null, "No pivot index found");
 
   // A panel's effective min/max sizes also need to account for other panel's sizes.
   panelsArray.forEach((panelData, index) => {

package/src/utils/calculateDragOffsetPercentage.ts

@@ -15,17 +15,20 @@ export function calculateDragOffsetPercentage(
   const isHorizontal = direction === "horizontal";
 
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
-  assert(handleElement);
+  assert(
+    handleElement,
+    `No resize handle element found for id "${dragHandleId}"`
+  );
 
   const groupId = handleElement.getAttribute("data-panel-group-id");
-  assert(groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
 
   let { initialCursorPosition } = initialDragState;
 
   const cursorPosition = getResizeEventCursorPosition(direction, event);
 
   const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-  assert(groupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
 
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;

package/src/utils/calculateUnsafeDefaultLayout.ts

@@ -18,7 +18,7 @@ export function calculateUnsafeDefaultLayout({
   // Distribute default sizes first
   for (let index = 0; index < panelDataArray.length; index++) {
     const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
     const { defaultSize } = panelConstraints;
 
     if (defaultSize != null) {
@@ -31,7 +31,7 @@ export function calculateUnsafeDefaultLayout({
   // Remaining size should be distributed evenly between panels without default sizes
   for (let index = 0; index < panelDataArray.length; index++) {
     const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints);
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
     const { defaultSize } = panelConstraints;
 
     if (defaultSize != null) {

package/src/utils/callPanelCallbacks.ts

@@ -9,7 +9,7 @@ export function callPanelCallbacks(
 ) {
   layout.forEach((size, index) => {
     const panelData = panelsArray[index];
-    assert(panelData);
+    assert(panelData, `Panel data not found for index ${index}`);
 
     const { callbacks, constraints, id: panelId } = panelData;
     const { collapsedSize = 0, collapsible } = constraints;

package/src/utils/resizePanel.ts

@@ -14,7 +14,10 @@ export function resizePanel({
   size: number;
 }) {
   const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(panelConstraints != null);
+  assert(
+    panelConstraints != null,
+    `Panel constraints not found for index ${panelIndex}`
+  );
 
   let {
     collapsedSize = 0,

package/src/utils/test-utils.ts

@@ -38,7 +38,7 @@ export function expectToBeCloseToArray(
   try {
     actualNumbers.forEach((actualNumber, index) => {
       const expectedNumber = expectedNumbers[index];
-      assert(expectedNumber != null);
+      assert(expectedNumber != null, `Expected number not found`);
 
       expect(actualNumber).toBeCloseTo(expectedNumber, 1);
     });

package/src/utils/validatePanelConstraints.ts

@@ -15,7 +15,10 @@ export function validatePanelConstraints({
     const warnings = [];
 
     const panelConstraints = panelConstraintsArray[panelIndex];
-    assert(panelConstraints);
+    assert(
+      panelConstraints,
+      `No panel constraints found for index ${panelIndex}`
+    );
 
     const {
       collapsedSize = 0,

package/src/utils/validatePanelGroupLayout.ts

@@ -37,7 +37,7 @@ export function validatePanelGroupLayout({
     }
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null);
+      assert(unsafeSize != null, `No layout data found for index ${index}`);
       const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
       nextLayout[index] = safeSize;
     }
@@ -48,7 +48,7 @@ export function validatePanelGroupLayout({
   // 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);
+    assert(unsafeSize != null, `No layout data found for index ${index}`);
 
     const safeSize = resizePanel({
       panelConstraints,
@@ -68,7 +68,7 @@ export function validatePanelGroupLayout({
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const prevSize = nextLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `No layout data found for index ${index}`);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
         panelConstraints,

package/src/vendor/stacking-order.ts

@@ -0,0 +1,133 @@
+// Forked from NPM stacking-order@2.0.0
+// Background at https://github.com/Rich-Harris/stacking-order/issues/3
+
+import { assert } from "..";
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ */
+export function compare(a: HTMLElement, b: HTMLElement): number {
+  if (a === b) throw new Error("Cannot compare node with itself");
+
+  const ancestors = {
+    a: get_ancestors(a),
+    b: get_ancestors(b),
+  };
+
+  let common_ancestor;
+
+  // remove shared ancestors
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop() as HTMLElement;
+    b = ancestors.b.pop() as HTMLElement;
+
+    common_ancestor = a;
+  }
+
+  assert(
+    common_ancestor,
+    "Stacking order can only be calculated for elements with a common ancestor"
+  );
+
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b)),
+  };
+
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1),
+    };
+
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a) return 1;
+      if (child === furthest_ancestors.b) return -1;
+    }
+  }
+
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+
+const props =
+  /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement} node */
+function is_flex_item(node: HTMLElement) {
+  const display = getComputedStyle(get_parent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+
+/** @param {HTMLElement} node */
+function creates_stacking_context(node: HTMLElement) {
+  const style = getComputedStyle(node);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+  if (style.position === "fixed") return true;
+  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+  // if (
+  //   (style.zIndex !== "auto" && style.position !== "static") ||
+  //   is_flex_item(node)
+  // )
+  if (
+    style.zIndex !== "auto" &&
+    (style.position !== "static" || is_flex_item(node))
+  )
+    return true;
+  if (+style.opacity < 1) return true;
+  if ("transform" in style && style.transform !== "none") return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none")
+    return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
+  if ("filter" in style && style.filter !== "none") return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
+  if ("isolation" in style && style.isolation === "isolate") return true;
+  if (props.test(style.willChange)) return true;
+  // @ts-expect-error
+  if (style.webkitOverflowScrolling === "touch") return true;
+
+  return false;
+}
+
+/** @param {HTMLElement[]} nodes */
+function find_stacking_context(nodes: HTMLElement[]) {
+  let i = nodes.length;
+
+  while (i--) {
+    const node = nodes[i];
+    assert(node, "Missing node");
+    if (creates_stacking_context(node)) return node;
+  }
+
+  return null;
+}
+
+/** @param {HTMLElement} node */
+function get_z_index(node: HTMLElement | null) {
+  return (node && Number(getComputedStyle(node).zIndex)) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node: HTMLElement) {
+  const ancestors = [];
+
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+
+  return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node: HTMLElement) {
+  // @ts-ignore
+  return node.parentNode?.host || node.parentNode;
+}