react-resizable-panels 2.0.16 → 2.0.18

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 # Changelog
 
+## 2.0.18
+
+- Inline object `hitAreaMargins` will not trigger re-initialization logic unless inner values change (#342)
+
+## 2.0.17
+
+- Prevent pointer events handled by resize handles from triggering elements behind/underneath (#338)
+
 ## 2.0.16
 
-- Replaced `.toPrecision()` with `.toFixed()` to avoid undesirable layout shift (#323)
+- Replaced .toPrecision() with .toFixed() to avoid undesirable layout shift (#323)
 
 ## 2.0.15
 

package/README.md

@@ -6,7 +6,7 @@ React components for resizable panel groups/layouts
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 <PanelGroup autoSaveId="example" direction="horizontal">
-  <Panel defaultSizePercentage={25}>
+  <Panel defaultSize={25}>
     <SourcesExplorer />
   </Panel>
   <PanelResizeHandle />
@@ -14,7 +14,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
     <SourceViewer />
   </Panel>
   <PanelResizeHandle />
-  <Panel defaultSizePercentage={25}>
+  <Panel defaultSize={25}>
     <Console />
   </Panel>
 </PanelGroup>;
@@ -74,7 +74,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 `Panel` components also expose an imperative API for manual resizing:
 | method                   | description                                                                        |
 | :----------------------- | :--------------------------------------------------------------------------------- |
-| `collapse()`v            | If panel is `collapsible`, collapse it fully.                                      |
+| `collapse()`             | If panel is `collapsible`, collapse it fully.                                      |
 | `expand()`               | If panel is currently _collapsed_, expand it to its most recent size.              |
 | `getId(): string`        | Gets the ID of the panel.                                                          |
 | `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |

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

@@ -1,3 +1,3 @@
 export type Direction = "horizontal" | "vertical";
-export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+export type ResizeEvent = KeyboardEvent | PointerEvent | MouseEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;

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

@@ -47,6 +47,8 @@ const {
 const useId = React__namespace["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
@@ -261,27 +263,26 @@ function setGlobalCursorStyle(state, constraintFlags) {
 function isKeyDown(event) {
   return event.type === "keydown";
 }
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
 function isMouseEvent(event) {
   return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
 
 function getResizeEventCoordinates(event) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-    }
   }
   return {
     x: Infinity,
@@ -473,6 +474,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -621,15 +623,12 @@ function updateListeners() {
       body
     } = ownerDocument;
     body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("mousedown", handlePointerDown);
-    body.removeEventListener("mouseleave", handlePointerMove);
-    body.removeEventListener("mousemove", handlePointerMove);
-    body.removeEventListener("touchmove", handlePointerMove);
-    body.removeEventListener("touchstart", handlePointerDown);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
@@ -639,29 +638,23 @@ function updateListeners() {
           } = ownerDocument;
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerUp);
     } else {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const {
           body
         } = ownerDocument;
         if (count > 0) {
-          body.addEventListener("mousedown", handlePointerDown);
-          body.addEventListener("mousemove", handlePointerMove);
-          body.addEventListener("touchmove", handlePointerMove, {
-            passive: false
+          body.addEventListener("pointerdown", handlePointerDown, {
+            capture: true
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }
@@ -900,7 +893,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1380,12 +1373,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toFixed(precision);
+    flexGrow = size.toPrecision(precision);
   }
   return {
     flexBasis: 0,
@@ -1949,7 +1942,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.
@@ -2215,6 +2208,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2254,8 +2248,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2305,12 +2303,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

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

@@ -47,6 +47,8 @@ const {
 const useId = React__namespace["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
@@ -267,27 +269,26 @@ function setGlobalCursorStyle(state, constraintFlags) {
 function isKeyDown(event) {
   return event.type === "keydown";
 }
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
 function isMouseEvent(event) {
   return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
 
 function getResizeEventCoordinates(event) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-    }
   }
   return {
     x: Infinity,
@@ -479,6 +480,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -627,15 +629,12 @@ function updateListeners() {
       body
     } = ownerDocument;
     body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("mousedown", handlePointerDown);
-    body.removeEventListener("mouseleave", handlePointerMove);
-    body.removeEventListener("mousemove", handlePointerMove);
-    body.removeEventListener("touchmove", handlePointerMove);
-    body.removeEventListener("touchstart", handlePointerDown);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
@@ -645,29 +644,23 @@ function updateListeners() {
           } = ownerDocument;
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerUp);
     } else {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const {
           body
         } = ownerDocument;
         if (count > 0) {
-          body.addEventListener("mousedown", handlePointerDown);
-          body.addEventListener("mousemove", handlePointerMove);
-          body.addEventListener("touchmove", handlePointerMove, {
-            passive: false
+          body.addEventListener("pointerdown", handlePointerDown, {
+            capture: true
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }
@@ -906,7 +899,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1396,12 +1389,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toFixed(precision);
+    flexGrow = size.toPrecision(precision);
   }
   return {
     flexBasis: 0,
@@ -2055,7 +2048,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.
@@ -2321,6 +2314,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2360,8 +2354,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2411,12 +2409,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,

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

@@ -23,6 +23,8 @@ const {
 const useId = React["useId".toString()];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
+// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
+
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
 
@@ -243,27 +245,26 @@ function setGlobalCursorStyle(state, constraintFlags) {
 function isKeyDown(event) {
   return event.type === "keydown";
 }
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
 function isMouseEvent(event) {
   return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
-}
 
 function getResizeEventCoordinates(event) {
-  if (isMouseEvent(event)) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
     return {
       x: event.clientX,
       y: event.clientY
     };
-  } else if (isTouchEvent(event)) {
-    const touch = event.touches[0];
-    if (touch && touch.clientX && touch.clientY) {
-      return {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-    }
   }
   return {
     x: Infinity,
@@ -455,6 +456,7 @@ function handlePointerDown(event) {
   if (intersectingHandles.length > 0) {
     updateResizeHandlerStates("down", event);
     event.preventDefault();
+    event.stopPropagation();
   }
 }
 function handlePointerMove(event) {
@@ -603,15 +605,12 @@ function updateListeners() {
       body
     } = ownerDocument;
     body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("mousedown", handlePointerDown);
-    body.removeEventListener("mouseleave", handlePointerMove);
-    body.removeEventListener("mousemove", handlePointerMove);
-    body.removeEventListener("touchmove", handlePointerMove);
-    body.removeEventListener("touchstart", handlePointerDown);
+    body.removeEventListener("pointerdown", handlePointerDown);
+    body.removeEventListener("pointerleave", handlePointerMove);
+    body.removeEventListener("pointermove", handlePointerMove);
   });
-  window.removeEventListener("mouseup", handlePointerUp);
-  window.removeEventListener("touchcancel", handlePointerUp);
-  window.removeEventListener("touchend", handlePointerUp);
+  window.removeEventListener("pointerup", handlePointerUp);
+  window.removeEventListener("pointercancel", handlePointerUp);
   if (registeredResizeHandlers.size > 0) {
     if (isPointerDown) {
       if (intersectingHandles.length > 0) {
@@ -621,29 +620,23 @@ function updateListeners() {
           } = ownerDocument;
           if (count > 0) {
             body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("mouseleave", handlePointerMove);
-            body.addEventListener("mousemove", handlePointerMove);
-            body.addEventListener("touchmove", handlePointerMove, {
-              passive: false
-            });
+            body.addEventListener("pointerleave", handlePointerMove);
+            body.addEventListener("pointermove", handlePointerMove);
           }
         });
       }
-      window.addEventListener("mouseup", handlePointerUp);
-      window.addEventListener("touchcancel", handlePointerUp);
-      window.addEventListener("touchend", handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerUp);
     } else {
       ownerDocumentCounts.forEach((count, ownerDocument) => {
         const {
           body
         } = ownerDocument;
         if (count > 0) {
-          body.addEventListener("mousedown", handlePointerDown);
-          body.addEventListener("mousemove", handlePointerMove);
-          body.addEventListener("touchmove", handlePointerMove, {
-            passive: false
+          body.addEventListener("pointerdown", handlePointerDown, {
+            capture: true
           });
-          body.addEventListener("touchstart", handlePointerDown);
+          body.addEventListener("pointermove", handlePointerMove);
         }
       });
     }
@@ -882,7 +875,7 @@ function adjustLayoutByDelta({
       if (!fuzzyNumbersEqual(prevSize, safeSize)) {
         deltaApplied += prevSize - safeSize;
         nextLayout[index] = safeSize;
-        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
           numeric: true
         }) >= 0) {
           break;
@@ -1372,12 +1365,12 @@ function computePanelFlexBoxStyle({
   if (size == null) {
     // Initial render (before panels have registered themselves)
     // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
+    flexGrow = defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
   } else if (panelData.length === 1) {
     // Special case: Single panel group should always fill full width/height
     flexGrow = "1";
   } else {
-    flexGrow = size.toFixed(precision);
+    flexGrow = size.toPrecision(precision);
   }
   return {
     flexBasis: 0,
@@ -2031,7 +2024,7 @@ function PanelGroupWithForwardedRef({
 
       // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
       // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
+      if (isPointerEvent(event) || isMouseEvent(event)) {
         // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
         // In this case, Panel sizes might not change–
         // but updating cursor in this scenario would cause a flicker.
@@ -2297,6 +2290,7 @@ function PanelResizeHandle({
   tagName: Type = "div",
   ...rest
 }) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
   const elementRef = useRef(null);
 
   // Use a ref to guard against users passing inline props
@@ -2336,8 +2330,12 @@ function PanelResizeHandle({
       setResizeHandler(() => resizeHandler);
     }
   }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+
+  // Extract hit area margins before passing them to the effect's dependency array
+  // so that inline object values won't trigger re-renders
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
   useEffect(() => {
-    var _hitAreaMargins$coars, _hitAreaMargins$fine;
     if (disabled || resizeHandler == null) {
       return;
     }
@@ -2387,12 +2385,10 @@ function PanelResizeHandle({
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {
-      // Coarse inputs (e.g. finger/touch)
-      coarse: (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15,
-      // Fine inputs (e.g. mouse)
-      fine: (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
     }, setResizeHandlerState);
-  }, [direction, disabled, hitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
   useWindowSplitterResizeHandlerBehavior({
     disabled,
     handleId: resizeHandleId,