react-resizable-panels 2.0.18 → 2.0.20

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,6 +73,17 @@ 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();
+    }
   };
 }
 

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,