react-resizable-panels 2.0.2 → 2.0.4

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

@@ -330,24 +330,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();
   }
@@ -480,15 +475,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);
   });
 }
 
@@ -2025,6 +2013,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);
@@ -2040,26 +2034,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.node.cjs.js

@@ -317,24 +317,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();
   }
@@ -467,15 +462,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);
   });
 }
 
@@ -1828,6 +1816,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);
@@ -1843,26 +1837,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.node.esm.js

@@ -293,24 +293,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();
   }
@@ -443,15 +438,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);
   });
 }
 
@@ -1804,6 +1792,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);
@@ -1819,26 +1813,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -72,6 +72,8 @@
     "eslint": "^8.37.0",
     "eslint-plugin-no-restricted-imports": "^0.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "experimental",
     "react-dom": "experimental"
   },

package/src/Panel.test.tsx

@@ -5,6 +5,7 @@ import { assert } from "./utils/assert";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import {
   mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
   verifyExpandedPanelGroupLayout,
 } from "./utils/test-utils";
 import { createRef } from "./vendor/react";
@@ -675,6 +676,68 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel", "");
+      verifyAttribute(leftElement, "data-panel-id", "left-panel");
+      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(leftElement, "data-panel-collapsible", null);
+
+      verifyAttribute(rightElement, "data-panel", "");
+      verifyAttribute(rightElement, "data-panel-id", "right-panel");
+      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+      verifyAttribute(rightElement, "data-panel-collapsible", "true");
+    });
+
+    it("should update the data-panel-size attribute when the panel resizes", () => {
+      const leftPanelRef = createRef<ImperativePanelHandle>();
+
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group">
+            <Panel defaultSize={75} id="left-panel" ref={leftPanelRef} />
+            <PanelResizeHandle />
+            <Panel collapsible id="right-panel" />
+          </PanelGroup>
+        );
+      });
+
+      const leftElement = getPanelElement("left-panel", container);
+      const rightElement = getPanelElement("right-panel", container);
+
+      assert(leftElement);
+      assert(rightElement);
+
+      verifyAttribute(leftElement, "data-panel-size", "75.0");
+      verifyAttribute(rightElement, "data-panel-size", "25.0");
+
+      act(() => {
+        leftPanelRef.current?.resize(30);
+      });
+
+      verifyAttribute(leftElement, "data-panel-size", "30.0");
+      verifyAttribute(rightElement, "data-panel-size", "70.0");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about server rendered panels with no default size", () => {
       jest.resetModules();

package/src/PanelGroup.test.tsx

@@ -13,7 +13,10 @@ import {
 } from ".";
 import { assert } from "./utils/assert";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
-import { mockPanelGroupOffsetWidthAndHeight } from "./utils/test-utils";
+import {
+  mockPanelGroupOffsetWidthAndHeight,
+  verifyAttribute,
+} from "./utils/test-utils";
 import { createRef } from "./vendor/react";
 
 describe("PanelGroup", () => {
@@ -256,6 +259,23 @@ describe("PanelGroup", () => {
     });
   });
 
+  describe("data attributes", () => {
+    it("should initialize with the correct props based attributes", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="test-group"></PanelGroup>
+        );
+      });
+
+      const element = getPanelGroupElement("test-group", container);
+      assert(element);
+
+      verifyAttribute(element, "data-panel-group", "");
+      verifyAttribute(element, "data-panel-group-direction", "horizontal");
+      verifyAttribute(element, "data-panel-group-id", "test-group");
+    });
+  });
+
   describe("DEV warnings", () => {
     it("should warn about unstable layouts without id and order props", () => {
       act(() => {