react-resizable-panels 2.0.20 → 2.0.21

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.21
+
+- Handle pointer event edge case with different origin iframes (#374)
+
 ## 2.0.20
 
 - Reset global cursor if an active resize handle is unmounted (#313)

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

@@ -492,6 +492,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1931,9 +1938,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -498,6 +498,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -2037,9 +2044,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -474,6 +474,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -2013,9 +2020,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -468,6 +468,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1907,9 +1914,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -494,6 +494,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1933,9 +1940,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -505,6 +505,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -2044,9 +2051,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/dist/react-resizable-panels.development.esm.js

@@ -481,6 +481,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -2020,9 +2027,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -467,6 +467,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1812,9 +1819,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/dist/react-resizable-panels.development.node.esm.js

@@ -443,6 +443,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1788,9 +1795,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/dist/react-resizable-panels.esm.js

@@ -470,6 +470,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1909,9 +1916,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

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

@@ -456,6 +456,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1711,9 +1718,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/dist/react-resizable-panels.node.esm.js

@@ -432,6 +432,13 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
+
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", event);
+  }
   if (!isPointerDown) {
     const {
       target
@@ -1687,9 +1694,6 @@ function PanelGroupWithForwardedRef({
       } = dragState !== null && dragState !== void 0 ? dragState : {};
       const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
       let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/PanelGroup.ts

@@ -638,9 +638,6 @@ function PanelGroupWithForwardedRef({
         keyboardResizeBy,
         panelGroupElement
       );
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";

package/src/PanelResizeHandleRegistry.ts

@@ -87,7 +87,7 @@ export function registerResizeHandle(
   };
 }
 
-function handlePointerDown(event: ResizeEvent) {
+function handlePointerDown(event: PointerEvent) {
   const { target } = event;
   const { x, y } = getResizeEventCoordinates(event);
 
@@ -104,9 +104,17 @@ function handlePointerDown(event: ResizeEvent) {
   }
 }
 
-function handlePointerMove(event: ResizeEvent) {
+function handlePointerMove(event: PointerEvent) {
   const { x, y } = getResizeEventCoordinates(event);
 
+  // Edge case (see #340)
+  // Detect when the pointer has been released outside an iframe on a different domain
+  if (event.buttons === 0) {
+    isPointerDown = false;
+
+    updateResizeHandlerStates("up", event);
+  }
+
   if (!isPointerDown) {
     const { target } = event;
 

package/src/utils/test-utils.ts

@@ -12,6 +12,7 @@ export function dispatchPointerEvent(type: string, target: HTMLElement) {
     bubbles: true,
     clientX,
     clientY,
+    buttons: 1,
   });
   Object.defineProperties(event, {
     pageX: {