react-resizable-panels 2.0.19 → 2.0.21

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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)
+- Resize handle supports (optional) `onFocus` or `onBlur` props (#370)
+
 ## 2.0.19
 
 - Add optional `minSize` override param to panel `expand` imperative API

package/README.md

@@ -223,4 +223,7 @@ export function ClientComponent({
 }
 ```
 
+> [!NOTE]
+> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.
+
 A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,18 +1,20 @@
-import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 import { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "./vendor/react.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
-export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
+export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onBlur" | "onFocus"> & PropsWithChildren<{
     className?: string;
     disabled?: boolean;
     hitAreaMargins?: PointerHitAreaMargins;
     id?: string | null;
+    onBlur?: () => void;
     onDragging?: PanelResizeHandleOnDragging;
+    onFocus?: () => void;
     style?: CSSProperties;
     tabIndex?: number;
     tagName?: keyof HTMLElementTagNameMap;
 }>;
-export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onBlur, onDragging, onFocus, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
 export declare namespace PanelResizeHandle {
     var displayName: string;
 }

package/dist/declarations/src/index.d.ts

@@ -14,4 +14,5 @@ import { intersects } from "./utils/rects/intersects.js";
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };
+import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, };

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

@@ -454,6 +454,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -482,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
@@ -1921,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";
@@ -2203,7 +2217,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2323,8 +2339,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -460,6 +460,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -488,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
@@ -2027,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";
@@ -2309,7 +2323,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2429,8 +2445,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -436,6 +436,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -464,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
@@ -2003,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";
@@ -2285,7 +2299,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2405,8 +2421,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -430,6 +430,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -458,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
@@ -1897,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";
@@ -2179,7 +2193,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2299,8 +2315,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -456,6 +456,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -484,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
@@ -1923,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";
@@ -2205,7 +2219,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2325,8 +2341,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -467,6 +467,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -495,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
@@ -2034,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";
@@ -2316,7 +2330,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2436,8 +2452,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -443,6 +443,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -471,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
@@ -2010,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";
@@ -2292,7 +2306,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2412,8 +2428,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -429,6 +429,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -457,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
@@ -1802,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";
@@ -2084,7 +2098,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2201,8 +2217,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -405,6 +405,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -433,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
@@ -1778,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";
@@ -2060,7 +2074,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2177,8 +2193,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -432,6 +432,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -460,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
@@ -1899,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";
@@ -2181,7 +2195,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2301,8 +2317,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -418,6 +418,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -446,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
@@ -1701,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";
@@ -1983,7 +1997,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2100,8 +2116,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

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

@@ -394,6 +394,16 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+    }
   };
 }
 function handlePointerDown(event) {
@@ -422,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
@@ -1677,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";
@@ -1959,7 +1973,9 @@ function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -2076,8 +2092,14 @@ function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
     ref: elementRef,
     role: "separator",
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.19",
+  "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/PanelResizeHandle.test.tsx

@@ -1,8 +1,13 @@
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
-import type { PanelResizeHandleProps } from "react-resizable-panels";
-import { Panel, PanelGroup, PanelResizeHandle } from ".";
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+  type PanelResizeHandleProps,
+} from ".";
 import { assert } from "./utils/assert";
+import * as cursorUtils from "./utils/cursor";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import {
   dispatchPointerEvent,
@@ -10,6 +15,12 @@ import {
   verifyAttribute,
 } from "./utils/test-utils";
 
+jest.mock("./utils/cursor", () => ({
+  getCursorStyle: jest.fn(),
+  resetGlobalCursorStyle: jest.fn(),
+  setGlobalCursorStyle: jest.fn(),
+}));
+
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
   let root: Root;
@@ -305,4 +316,33 @@ describe("PanelResizeHandle", () => {
       expect(element?.getAttribute("id")).toBeNull();
     });
   });
+
+  it("resets the global cursor style on unmount", () => {
+    const onDraggingLeft = jest.fn();
+
+    const { leftElement } = setupMockedGroup({
+      leftProps: { onDragging: onDraggingLeft },
+      rightProps: {},
+    });
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+
+    act(() => {
+      dispatchPointerEvent("pointerdown", leftElement);
+    });
+    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+    expect(onDraggingLeft).toHaveBeenCalledWith(true);
+
+    expect(cursorUtils.resetGlobalCursorStyle).not.toHaveBeenCalled();
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      root.unmount();
+    });
+
+    expect(cursorUtils.resetGlobalCursorStyle).toHaveBeenCalled();
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+  });
 });

package/src/PanelResizeHandle.ts

@@ -1,16 +1,5 @@
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
-import {
-  createElement,
-  CSSProperties,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "./vendor/react";
-
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
 import {
   PanelGroupContext,
@@ -23,21 +12,33 @@ import {
   ResizeHandlerAction,
 } from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
+import {
+  createElement,
+  CSSProperties,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "./vendor/react";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
 
 export type PanelResizeHandleProps = Omit<
   HTMLAttributes<keyof HTMLElementTagNameMap>,
-  "id"
+  "id" | "onBlur" | "onFocus"
 > &
   PropsWithChildren<{
     className?: string;
     disabled?: boolean;
     hitAreaMargins?: PointerHitAreaMargins;
     id?: string | null;
+    onBlur?: () => void;
     onDragging?: PanelResizeHandleOnDragging;
+    onFocus?: () => void;
     style?: CSSProperties;
     tabIndex?: number;
     tagName?: keyof HTMLElementTagNameMap;
@@ -49,7 +50,9 @@ export function PanelResizeHandle({
   disabled = false,
   hitAreaMargins,
   id: idFromProps,
+  onBlur,
   onDragging,
+  onFocus,
   style: styleFromProps = {},
   tabIndex = 0,
   tagName: Type = "div",
@@ -208,8 +211,14 @@ export function PanelResizeHandle({
     children,
     className: classNameFromProps,
     id: idFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur?.();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus?.();
+    },
     ref: elementRef,
     role: "separator",
     style: {

package/src/PanelResizeHandleRegistry.ts

@@ -73,10 +73,21 @@ export function registerResizeHandle(
     if (count === 1) {
       ownerDocumentCounts.delete(ownerDocument);
     }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+
+      updateCursor();
+    }
   };
 }
 
-function handlePointerDown(event: ResizeEvent) {
+function handlePointerDown(event: PointerEvent) {
   const { target } = event;
   const { x, y } = getResizeEventCoordinates(event);
 
@@ -93,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/index.ts

@@ -29,6 +29,7 @@ import type {
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
 } from "./PanelResizeHandle";
+import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry";
 
 export {
   // TypeScript types
@@ -43,6 +44,7 @@ export {
   PanelProps,
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
+  PointerHitAreaMargins,
 
   // React components
   Panel,

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