react-resizable-panels 2.0.20 → 2.0.22

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.22
+
+- Force eager layout re-calculation after panel added/removed (#375)
+
+## 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
@@ -680,6 +687,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1589,6 +1601,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1851,7 +1864,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1931,9 +1945,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";
@@ -2086,8 +2097,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -686,6 +693,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1653,6 +1665,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1957,7 +1970,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2037,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";
@@ -2192,8 +2203,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -662,6 +669,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1629,6 +1641,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1933,7 +1946,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2013,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";
@@ -2168,8 +2179,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -656,6 +663,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1565,6 +1577,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1827,7 +1840,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1907,9 +1921,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";
@@ -2062,8 +2073,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -682,6 +689,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1591,6 +1603,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1853,7 +1866,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1933,9 +1947,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";
@@ -2088,8 +2099,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -693,6 +700,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1660,6 +1672,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1964,7 +1977,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2044,9 +2058,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";
@@ -2199,8 +2210,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -669,6 +676,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1636,6 +1648,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1940,7 +1953,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2020,9 +2034,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";
@@ -2175,8 +2186,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -655,6 +662,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1492,6 +1504,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1788,7 +1801,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1812,9 +1826,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";
@@ -1967,8 +1978,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -631,6 +638,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1468,6 +1480,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1764,7 +1777,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1788,9 +1802,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";
@@ -1943,8 +1954,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -658,6 +665,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1567,6 +1579,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1829,7 +1842,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1909,9 +1923,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";
@@ -2064,8 +2075,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -644,6 +651,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1433,6 +1445,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1687,7 +1700,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1711,9 +1725,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";
@@ -1866,8 +1877,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

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
@@ -620,6 +627,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1409,6 +1421,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1663,7 +1676,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1687,9 +1701,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";
@@ -1842,8 +1853,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/package.json

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

package/src/PanelGroup.ts

@@ -13,6 +13,7 @@ import {
   EXCEEDED_VERTICAL_MIN,
   reportConstraintsViolation,
 } from "./PanelResizeHandleRegistry";
+import { useForceUpdate } from "./hooks/useForceUpdate";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
@@ -123,6 +124,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef<HTMLDivElement | null>(null);
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
+  const forceUpdate = useForceUpdate();
 
   const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
@@ -521,26 +523,31 @@ function PanelGroupWithForwardedRef({
     return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
   }, []);
 
-  const registerPanel = useCallback((panelData: PanelData) => {
-    const { panelDataArray } = eagerValuesRef.current;
+  const registerPanel = useCallback(
+    (panelData: PanelData) => {
+      const { panelDataArray } = eagerValuesRef.current;
 
-    panelDataArray.push(panelData);
-    panelDataArray.sort((panelA, panelB) => {
-      const orderA = panelA.order;
-      const orderB = panelB.order;
-      if (orderA == null && orderB == null) {
-        return 0;
-      } else if (orderA == null) {
-        return -1;
-      } else if (orderB == null) {
-        return 1;
-      } else {
-        return orderA - orderB;
-      }
-    });
+      panelDataArray.push(panelData);
+      panelDataArray.sort((panelA, panelB) => {
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null) {
+          return 0;
+        } else if (orderA == null) {
+          return -1;
+        } else if (orderB == null) {
+          return 1;
+        } else {
+          return orderA - orderB;
+        }
+      });
 
-    eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+      eagerValuesRef.current.panelDataArrayChanged = true;
+
+      forceUpdate();
+    },
+    [forceUpdate]
+  );
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -638,9 +645,6 @@ function PanelGroupWithForwardedRef({
         keyboardResizeBy,
         panelGroupElement
       );
-      if (delta === 0) {
-        return;
-      }
 
       // Support RTL layouts
       const isHorizontal = direction === "horizontal";
@@ -847,22 +851,27 @@ function PanelGroupWithForwardedRef({
     setDragState(null);
   }, []);
 
-  const unregisterPanel = useCallback((panelData: PanelData) => {
-    const { panelDataArray } = eagerValuesRef.current;
+  const unregisterPanel = useCallback(
+    (panelData: PanelData) => {
+      const { panelDataArray } = eagerValuesRef.current;
 
-    const index = findPanelDataIndex(panelDataArray, panelData);
-    if (index >= 0) {
-      panelDataArray.splice(index, 1);
+      const index = findPanelDataIndex(panelDataArray, panelData);
+      if (index >= 0) {
+        panelDataArray.splice(index, 1);
 
-      // TRICKY
-      // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-      // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-      // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
+        // TRICKY
+        // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
+        // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
+        // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
+        delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
 
-      eagerValuesRef.current.panelDataArrayChanged = true;
-    }
-  }, []);
+        eagerValuesRef.current.panelDataArrayChanged = true;
+
+        forceUpdate();
+      }
+    },
+    [forceUpdate]
+  );
 
   const context = useMemo(
     () =>

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/hooks/useForceUpdate.ts

@@ -0,0 +1,7 @@
+import { useCallback, useState } from "../vendor/react";
+
+export function useForceUpdate() {
+  const [_, setCount] = useState(0);
+
+  return useCallback(() => setCount((prevCount) => prevCount + 1), []);
+}

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: {