react-resizable-panels 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.3
+
+- Fix resize handle onDragging callback (#278)
+
 ## 2.0.2
 
 - Fixed an issue where size might not be re-initialized correctly after a panel was hidden by the `unstable_Activity` (previously "Offscreen") API.

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

@@ -2068,11 +2068,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2174,11 +2174,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2150,11 +2150,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2044,11 +2044,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2070,11 +2070,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2181,11 +2181,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2157,11 +2157,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -1950,11 +1950,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -1926,11 +1926,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -2046,11 +2046,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -1849,11 +1849,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

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

@@ -1825,11 +1825,23 @@ function PanelResizeHandle({
         case "down":
           {
             startDragging(resizeHandleId, event);
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(true);
+            }
             break;
           }
         case "up":
           {
             stopDragging();
+            const {
+              onDragging
+            } = callbacksRef.current;
+            if (onDragging) {
+              onDragging(false);
+            }
             break;
           }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "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/PanelResizeHandle.test.tsx

@@ -3,6 +3,7 @@ import { act } from "react-dom/test-utils";
 import { Panel, PanelGroup, PanelResizeHandle } from ".";
 import { assert } from "./utils/assert";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
+import { dispatchPointerEvent } from "./utils/test-utils";
 
 describe("PanelResizeHandle", () => {
   let expectedWarnings: string[] = [];
@@ -68,7 +69,45 @@ describe("PanelResizeHandle", () => {
 
   describe("callbacks", () => {
     describe("onDragging", () => {
-      // TODO: Test this
+      it("should fire when dragging starts/stops", async () => {
+        const onDragging = jest.fn();
+
+        act(() => {
+          root.render(
+            <PanelGroup direction="horizontal">
+              <Panel />
+              <PanelResizeHandle
+                id="handle"
+                onDragging={onDragging}
+                tabIndex={123}
+                title="bar"
+              />
+              <Panel />
+            </PanelGroup>
+          );
+        });
+
+        const handleElement = container.querySelector(
+          '[data-panel-resize-handle-id="handle"]'
+        ) as HTMLElement;
+
+        act(() => {
+          dispatchPointerEvent("mouseover", handleElement);
+        });
+        expect(onDragging).not.toHaveBeenCalled();
+
+        act(() => {
+          dispatchPointerEvent("mousedown", handleElement);
+        });
+        expect(onDragging).toHaveBeenCalledTimes(1);
+        expect(onDragging).toHaveBeenCalledWith(true);
+
+        act(() => {
+          dispatchPointerEvent("mouseup", handleElement);
+        });
+        expect(onDragging).toHaveBeenCalledTimes(2);
+        expect(onDragging).toHaveBeenCalledWith(false);
+      });
     });
   });
 });

package/src/PanelResizeHandle.ts

@@ -117,10 +117,20 @@ export function PanelResizeHandle({
       switch (action) {
         case "down": {
           startDragging(resizeHandleId, event);
+
+          const { onDragging } = callbacksRef.current;
+          if (onDragging) {
+            onDragging(true);
+          }
           break;
         }
         case "up": {
           stopDragging();
+
+          const { onDragging } = callbacksRef.current;
+          if (onDragging) {
+            onDragging(false);
+          }
           break;
         }
       }

package/src/hooks/useWindowSplitterBehavior.ts

@@ -68,8 +68,8 @@ export function useWindowSplitterResizeHandlerBehavior({
               ? index - 1
               : handles.length - 1
             : index + 1 < handles.length
-            ? index + 1
-            : 0;
+              ? index + 1
+              : 0;
 
           const nextHandle = handles[nextIndex] as HTMLElement;
           nextHandle.focus();

package/src/utils/test-utils.ts

@@ -2,6 +2,33 @@ import { assert } from "./assert";
 
 const util = require("util");
 
+export function dispatchPointerEvent(type: string, target: HTMLElement) {
+  const rect = target.getBoundingClientRect();
+
+  const clientX = rect.left + rect.width / 2;
+  const clientY = rect.top + rect.height / 2;
+
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    clientX,
+    clientY,
+  });
+  Object.defineProperties(event, {
+    pageX: {
+      get() {
+        return clientX;
+      },
+    },
+    pageY: {
+      get() {
+        return clientY;
+      },
+    },
+  });
+
+  target.dispatchEvent(event);
+}
+
 export function expectToBeCloseToArray(
   actualNumbers: number[],
   expectedNumbers: number[]