npm - react-resizable-panels - Versions diffs - 2.0.17 → 2.0.18 - Mend

react-resizable-panels 2.0.17 → 2.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # 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)

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

@@ -2208,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
@@ -2247,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;
     }
@@ -2298,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 CHANGED Viewed

@@ -2314,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
@@ -2353,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;
     }
@@ -2404,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 CHANGED Viewed

@@ -2290,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
@@ -2329,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;
     }
@@ -2380,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,

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

@@ -2184,6 +2184,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
@@ -2223,8 +2224,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;
     }
@@ -2274,12 +2279,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.cjs.js CHANGED Viewed

@@ -2210,6 +2210,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
@@ -2249,8 +2250,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;
     }
@@ -2300,12 +2305,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.development.cjs.js CHANGED Viewed

@@ -2321,6 +2321,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 +2361,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 +2416,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.development.esm.js CHANGED Viewed

@@ -2297,6 +2297,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 +2337,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 +2392,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.development.node.cjs.js CHANGED Viewed

@@ -2089,6 +2089,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
@@ -2125,8 +2126,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;
     }
@@ -2176,12 +2181,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.development.node.esm.js CHANGED Viewed

@@ -2065,6 +2065,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
@@ -2101,8 +2102,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;
     }
@@ -2152,12 +2157,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.esm.js CHANGED Viewed

@@ -2186,6 +2186,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
@@ -2225,8 +2226,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;
     }
@@ -2276,12 +2281,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.node.cjs.js CHANGED Viewed

@@ -1988,6 +1988,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
@@ -2024,8 +2025,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;
     }
@@ -2075,12 +2080,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.node.esm.js CHANGED Viewed

@@ -1964,6 +1964,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
@@ -2000,8 +2001,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;
     }
@@ -2051,12 +2056,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/package.json CHANGED Viewed

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

package/src/PanelResizeHandle.ts CHANGED Viewed

@@ -110,6 +110,11 @@ export function PanelResizeHandle({
     }
   }, [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?.coarse ?? 15;
+  const fineHitAreaMargins = hitAreaMargins?.fine ?? 5;
   useEffect(() => {
     if (disabled || resizeHandler == null) {
       return;
@@ -168,17 +173,16 @@ export function PanelResizeHandle({
       element,
       direction,
       {
-        // Coarse inputs (e.g. finger/touch)
-        coarse: hitAreaMargins?.coarse ?? 15,
-        // Fine inputs (e.g. mouse)
-        fine: hitAreaMargins?.fine ?? 5,
+        coarse: coarseHitAreaMargins,
+        fine: fineHitAreaMargins,
       },
       setResizeHandlerState
     );
   }, [
+    coarseHitAreaMargins,
     direction,
     disabled,
-    hitAreaMargins,
+    fineHitAreaMargins,
     registerResizeHandleWithParentGroup,
     resizeHandleId,
     resizeHandler,