react-resizable-panels 2.0.10 → 2.0.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.12
+
+- Improve resize for edge cases with collapsed panels; intermediate resize states should now fall back to the most recent valid layout rather than the initial layout (#311)
+
+## 2.0.11
+
+- Fix resize handle cursor hit detection when when viewport is scrolled (#305)
+
 ## 2.0.10
 
 - Fix conditional layout edge case (#309)

package/dist/react-resizable-panels.browser.cjs.js

@@ -271,15 +271,15 @@ function isTouchEvent(event) {
 function getResizeEventCoordinates(event) {
   if (isMouseEvent(event)) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.clientX,
+      y: event.clientY
     };
   } else if (isTouchEvent(event)) {
     const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
+    if (touch && touch.clientX && touch.clientY) {
       return {
-        x: touch.pageX,
-        y: touch.pageY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
   }
@@ -694,6 +694,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
   return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
 }
 
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 // Panel size must be in percentages; pixel values should be pre-converted
 function resizePanel({
   panelConstraints: panelConstraintsArray,
@@ -729,26 +743,29 @@ function resizePanel({
 // All units must be in percentages; pixel values should be pre-converted
 function adjustLayoutByDelta({
   delta,
-  layout: prevLayout,
+  initialLayout,
   panelConstraints: panelConstraintsArray,
   pivotIndices,
+  prevLayout,
   trigger
 }) {
   if (fuzzyNumbersEqual(delta, 0)) {
-    return prevLayout;
+    return initialLayout;
   }
-  const nextLayout = [...prevLayout];
+  const nextLayout = [...initialLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
   assert(firstPivotIndex != null, "Invalid first pivot index");
   assert(secondPivotIndex != null, "Invalid second pivot index");
   let deltaApplied = 0;
 
-  //const DEBUG = [];
-  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
-  //DEBUG.push(`  delta: ${delta}`);
-  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
-  //DEBUG.push(`  trigger: ${trigger}`);
-  //DEBUG.push("");
+  // const DEBUG = [];
+  // DEBUG.push(`adjustLayoutByDelta()`);
+  // DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
+  // DEBUG.push(`  prevLayout: ${prevLayout.join(", ")}`);
+  // DEBUG.push(`  delta: ${delta}`);
+  // DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+  // DEBUG.push(`  trigger: ${trigger}`);
+  // DEBUG.push("");
 
   // A resizing panel affects the panels before or after it.
   //
@@ -773,18 +790,18 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 1: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        // DEBUG.push(`edge case check 1: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
@@ -801,24 +818,24 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        // DEBUG.push(`edge case check 2: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
       }
     }
-    //DEBUG.push("");
+    // DEBUG.push("");
   }
 
   {
@@ -832,9 +849,9 @@ function adjustLayoutByDelta({
     let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
-    //DEBUG.push("pre calc...");
+    // DEBUG.push("pre calc...");
     while (true) {
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -842,7 +859,7 @@ function adjustLayoutByDelta({
         size: 100
       });
       const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
 
       maxAvailableDelta += delta;
       index += increment;
@@ -851,11 +868,11 @@ function adjustLayoutByDelta({
       }
     }
 
-    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    // DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
     const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
     delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
-    //DEBUG.push(`  -> adjusted delta: ${delta}`);
-    //DEBUG.push("");
+    // DEBUG.push(`  -> adjusted delta: ${delta}`);
+    // DEBUG.push("");
   }
 
   {
@@ -865,7 +882,7 @@ function adjustLayoutByDelta({
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
@@ -889,20 +906,22 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   // If we were unable to resize any of the panels panels, return the previous state.
   // This will essentially bailout and ignore e.g. drags past a panel's boundaries
-  if (fuzzyNumbersEqual(deltaApplied, 0)) {
-    //console.log(DEBUG.join("\n"));
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
   {
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    const prevSize = prevLayout[pivotIndex];
+    const prevSize = initialLayout[pivotIndex];
     assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
@@ -943,17 +962,23 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  //DEBUG.push(`total size: ${totalSize}`);
-  //console.log(DEBUG.join("\n"));
+  // DEBUG.push(`total size: ${totalSize}`);
 
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
   if (!fuzzyNumbersEqual(totalSize, 100)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
+
+  // console.log(DEBUG.join("\n"));
   return nextLayout;
 }
 
@@ -1133,9 +1158,10 @@ function useWindowSplitterPanelGroupBehavior({
                 if (size != null && collapsible) {
                   const nextLayout = adjustLayoutByDelta({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    layout,
+                    initialLayout: layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
                     pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                    prevLayout: layout,
                     trigger: "keyboard"
                   });
                   if (layout !== nextLayout) {
@@ -1677,9 +1703,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1719,9 +1746,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1903,9 +1931,10 @@ function PanelGroupWithForwardedRef({
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
       const nextLayout = adjustLayoutByDelta({
         delta,
-        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
+        prevLayout,
         trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
       });
       const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -1961,9 +1990,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
-      layout: prevLayout,
+      initialLayout: prevLayout,
       panelConstraints: panelConstraintsArray,
       pivotIndices,
+      prevLayout,
       trigger: "imperative-api"
     });
     if (!compareLayouts(prevLayout, nextLayout)) {

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -277,15 +277,15 @@ function isTouchEvent(event) {
 function getResizeEventCoordinates(event) {
   if (isMouseEvent(event)) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.clientX,
+      y: event.clientY
     };
   } else if (isTouchEvent(event)) {
     const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
+    if (touch && touch.clientX && touch.clientY) {
       return {
-        x: touch.pageX,
-        y: touch.pageY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
   }
@@ -700,6 +700,20 @@ function fuzzyNumbersEqual(actual, expected, fractionDigits) {
   return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
 }
 
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 // Panel size must be in percentages; pixel values should be pre-converted
 function resizePanel({
   panelConstraints: panelConstraintsArray,
@@ -735,26 +749,29 @@ function resizePanel({
 // All units must be in percentages; pixel values should be pre-converted
 function adjustLayoutByDelta({
   delta,
-  layout: prevLayout,
+  initialLayout,
   panelConstraints: panelConstraintsArray,
   pivotIndices,
+  prevLayout,
   trigger
 }) {
   if (fuzzyNumbersEqual(delta, 0)) {
-    return prevLayout;
+    return initialLayout;
   }
-  const nextLayout = [...prevLayout];
+  const nextLayout = [...initialLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
   assert(firstPivotIndex != null, "Invalid first pivot index");
   assert(secondPivotIndex != null, "Invalid second pivot index");
   let deltaApplied = 0;
 
-  //const DEBUG = [];
-  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
-  //DEBUG.push(`  delta: ${delta}`);
-  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
-  //DEBUG.push(`  trigger: ${trigger}`);
-  //DEBUG.push("");
+  // const DEBUG = [];
+  // DEBUG.push(`adjustLayoutByDelta()`);
+  // DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
+  // DEBUG.push(`  prevLayout: ${prevLayout.join(", ")}`);
+  // DEBUG.push(`  delta: ${delta}`);
+  // DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+  // DEBUG.push(`  trigger: ${trigger}`);
+  // DEBUG.push("");
 
   // A resizing panel affects the panels before or after it.
   //
@@ -779,18 +796,18 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 1: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        // DEBUG.push(`edge case check 1: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
@@ -807,24 +824,24 @@ function adjustLayoutByDelta({
           minSize = 0
         } = panelConstraints;
 
-        //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        // DEBUG.push(`edge case check 2: ${index}`);
+        // DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
-          const prevSize = prevLayout[index];
+          const prevSize = initialLayout[index];
           assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+            // DEBUG.push(`  -> expand delta: ${localDelta}`);
 
             if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
               delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+              // DEBUG.push(`  -> delta: ${delta}`);
             }
           }
         }
       }
     }
-    //DEBUG.push("");
+    // DEBUG.push("");
   }
 
   {
@@ -838,9 +855,9 @@ function adjustLayoutByDelta({
     let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
     let maxAvailableDelta = 0;
 
-    //DEBUG.push("pre calc...");
+    // DEBUG.push("pre calc...");
     while (true) {
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -848,7 +865,7 @@ function adjustLayoutByDelta({
         size: 100
       });
       const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
 
       maxAvailableDelta += delta;
       index += increment;
@@ -857,11 +874,11 @@ function adjustLayoutByDelta({
       }
     }
 
-    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    // DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
     const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
     delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
-    //DEBUG.push(`  -> adjusted delta: ${delta}`);
-    //DEBUG.push("");
+    // DEBUG.push(`  -> adjusted delta: ${delta}`);
+    // DEBUG.push("");
   }
 
   {
@@ -871,7 +888,7 @@ function adjustLayoutByDelta({
     let index = pivotIndex;
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = prevLayout[index];
+      const prevSize = initialLayout[index];
       assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
@@ -895,20 +912,22 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   // If we were unable to resize any of the panels panels, return the previous state.
   // This will essentially bailout and ignore e.g. drags past a panel's boundaries
-  if (fuzzyNumbersEqual(deltaApplied, 0)) {
-    //console.log(DEBUG.join("\n"));
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
   {
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    const prevSize = prevLayout[pivotIndex];
+    const prevSize = initialLayout[pivotIndex];
     assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
@@ -949,17 +968,23 @@ function adjustLayoutByDelta({
       }
     }
   }
-  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
+  // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  // DEBUG.push("");
 
   const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  //DEBUG.push(`total size: ${totalSize}`);
-  //console.log(DEBUG.join("\n"));
+  // DEBUG.push(`total size: ${totalSize}`);
 
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
   if (!fuzzyNumbersEqual(totalSize, 100)) {
+    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+    // console.log(DEBUG.join("\n"));
+
     return prevLayout;
   }
+
+  // console.log(DEBUG.join("\n"));
   return nextLayout;
 }
 
@@ -1149,9 +1174,10 @@ function useWindowSplitterPanelGroupBehavior({
                 if (size != null && collapsible) {
                   const nextLayout = adjustLayoutByDelta({
                     delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    layout,
+                    initialLayout: layout,
                     panelConstraints: panelDataArray.map(panelData => panelData.constraints),
                     pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                    prevLayout: layout,
                     trigger: "keyboard"
                   });
                   if (layout !== nextLayout) {
@@ -1783,9 +1809,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -1825,9 +1852,10 @@ function PanelGroupWithForwardedRef({
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
-          layout: prevLayout,
+          initialLayout: prevLayout,
           panelConstraints: panelConstraintsArray,
           pivotIndices,
+          prevLayout,
           trigger: "imperative-api"
         });
         if (!compareLayouts(prevLayout, nextLayout)) {
@@ -2009,9 +2037,10 @@ function PanelGroupWithForwardedRef({
       const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
       const nextLayout = adjustLayoutByDelta({
         delta,
-        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
         panelConstraints,
         pivotIndices,
+        prevLayout,
         trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
       });
       const layoutChanged = !compareLayouts(prevLayout, nextLayout);
@@ -2067,9 +2096,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
-      layout: prevLayout,
+      initialLayout: prevLayout,
       panelConstraints: panelConstraintsArray,
       pivotIndices,
+      prevLayout,
       trigger: "imperative-api"
     });
     if (!compareLayouts(prevLayout, nextLayout)) {