react-resizable-panels 2.0.2 → 2.0.4

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

@@ -354,24 +354,19 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+  if (!isPointerDown) {
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
       x,
       y
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
@@ -504,15 +499,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -2049,6 +2037,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -2064,26 +2058,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
+            }
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
+            }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {

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

@@ -365,24 +365,19 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+  if (!isPointerDown) {
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
       x,
       y
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
@@ -515,15 +510,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -2160,6 +2148,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -2175,26 +2169,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
+            }
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
+            }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {

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

@@ -341,24 +341,19 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+  if (!isPointerDown) {
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
       x,
       y
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
@@ -491,15 +486,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -2136,6 +2124,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -2151,26 +2145,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
+            }
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
+            }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {

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

@@ -328,24 +328,19 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+  if (!isPointerDown) {
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
       x,
       y
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
@@ -478,15 +473,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -1929,6 +1917,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -1944,26 +1938,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
+            }
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
+            }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {

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

@@ -304,24 +304,19 @@ function handlePointerMove(event) {
     x,
     y
   } = getResizeEventCoordinates(event);
-  if (isPointerDown) {
-    intersectingHandles.forEach(data => {
-      const {
-        setResizeHandlerState
-      } = data;
-      setResizeHandlerState("move", "drag", event);
-    });
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-  } else {
+  if (!isPointerDown) {
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
     recalculateIntersectingHandles({
       x,
       y
     });
-    updateResizeHandlerStates("move", event);
-    updateCursor();
   }
+  updateResizeHandlerStates("move", event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
   if (intersectingHandles.length > 0) {
     event.preventDefault();
   }
@@ -454,15 +449,8 @@ function updateResizeHandlerStates(action, event) {
     const {
       setResizeHandlerState
     } = data;
-    if (intersectingHandles.includes(data)) {
-      if (isPointerDown) {
-        setResizeHandlerState(action, "drag", event);
-      } else {
-        setResizeHandlerState(action, "hover", event);
-      }
-    } else {
-      setResizeHandlerState(action, "inactive", event);
-    }
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
   });
 }
 
@@ -1905,6 +1893,12 @@ function PanelResizeHandle({
   const [state, setState] = useState("inactive");
   const [isFocused, setIsFocused] = useState(false);
   const [resizeHandler, setResizeHandler] = useState(null);
+  const committedValuesRef = useRef({
+    state
+  });
+  useLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -1920,26 +1914,47 @@ function PanelResizeHandle({
     }
     const element = elementRef.current;
     assert(element);
-    const setResizeHandlerState = (action, state, event) => {
-      setState(state);
-      switch (action) {
-        case "down":
-          {
-            startDragging(resizeHandleId, event);
-            break;
-          }
-        case "up":
-          {
-            stopDragging();
-            break;
-          }
-      }
-      switch (state) {
-        case "drag":
-          {
-            resizeHandler(event);
-            break;
-          }
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (isActive) {
+        switch (action) {
+          case "down":
+            {
+              setState("drag");
+              startDragging(resizeHandleId, event);
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(true);
+              }
+              break;
+            }
+          case "move":
+            {
+              const {
+                state
+              } = committedValuesRef.current;
+              if (state !== "drag") {
+                setState("hover");
+              }
+              resizeHandler(event);
+              break;
+            }
+          case "up":
+            {
+              setState("hover");
+              stopDragging();
+              const {
+                onDragging
+              } = callbacksRef.current;
+              if (onDragging) {
+                onDragging(false);
+              }
+              break;
+            }
+        }
+      } else {
+        setState("inactive");
       }
     };
     return registerResizeHandle(resizeHandleId, element, direction, {