react-resizable-panels 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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.
+
 ## 2.0.1
 
 - Fixed a regression introduced in 2.0.0 that caused React `onClick` and `onMouseUp` handlers not to fire.

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

@@ -1709,6 +1709,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2060,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

@@ -1815,6 +1815,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2166,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

@@ -1791,6 +1791,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2142,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

@@ -1685,6 +1685,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2036,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

@@ -1711,6 +1711,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2062,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

@@ -1822,6 +1822,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2173,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

@@ -1798,6 +1798,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2149,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

@@ -1687,6 +1687,14 @@ function PanelGroupWithForwardedRef({
       }
     }
   });
+
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -2038,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.1",
+  "version": "2.0.3",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -72,8 +72,10 @@
     "eslint": "^8.37.0",
     "eslint-plugin-no-restricted-imports": "^0.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "react": "latest",
-    "react-dom": "latest"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "experimental",
+    "react-dom": "experimental"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",

package/src/PanelGroup.test.tsx

@@ -1,3 +1,6 @@
+// @ts-expect-error This is an experimental API
+// eslint-disable-next-line no-restricted-imports
+import { unstable_Activity as Activity } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
@@ -6,6 +9,7 @@ import {
   Panel,
   PanelGroup,
   PanelResizeHandle,
+  getPanelElement,
 } from ".";
 import { assert } from "./utils/assert";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
@@ -62,6 +66,67 @@ describe("PanelGroup", () => {
     expect(expectedWarnings).toHaveLength(0);
   });
 
+  it("should recalculate layout after being hidden by Activity", () => {
+    const panelRef = createRef<ImperativePanelHandle>();
+
+    let mostRecentLayout: number[] | null = null;
+
+    const onLayout = (layout: number[]) => {
+      mostRecentLayout = layout;
+    };
+
+    act(() => {
+      root.render(
+        <Activity mode="visible">
+          <PanelGroup direction="horizontal" onLayout={onLayout}>
+            <Panel id="left" ref={panelRef} />
+            <PanelResizeHandle />
+            <Panel defaultSize={40} id="right" />
+          </PanelGroup>
+        </Activity>
+      );
+    });
+
+    expect(mostRecentLayout).toEqual([60, 40]);
+    expect(panelRef.current?.getSize()).toEqual(60);
+
+    const leftPanelElement = getPanelElement("left");
+    const rightPanelElement = getPanelElement("right");
+    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
+    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
+
+    act(() => {
+      root.render(
+        <Activity mode="hidden">
+          <PanelGroup direction="horizontal" onLayout={onLayout}>
+            <Panel id="left" ref={panelRef} />
+            <PanelResizeHandle />
+            <Panel defaultSize={40} id="right" />
+          </PanelGroup>
+        </Activity>
+      );
+    });
+
+    act(() => {
+      root.render(
+        <Activity mode="visible">
+          <PanelGroup direction="horizontal" onLayout={onLayout}>
+            <Panel id="left" ref={panelRef} />
+            <PanelResizeHandle />
+            <Panel defaultSize={40} id="right" />
+          </PanelGroup>
+        </Activity>
+      );
+    });
+
+    expect(mostRecentLayout).toEqual([60, 40]);
+    expect(panelRef.current?.getSize()).toEqual(60);
+
+    // This bug is only observable in the DOM; callbacks will not re-fire
+    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
+    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
+  });
+
   describe("imperative handle API", () => {
     it("should report the most recently rendered group id", () => {
       const ref = createRef<ImperativePanelGroupHandle>();

package/src/PanelGroup.ts

@@ -25,7 +25,6 @@ import { calculateUnsafeDefaultLayout } from "./utils/calculateUnsafeDefaultLayo
 import { callPanelCallbacks } from "./utils/callPanelCallbacks";
 import { compareLayouts } from "./utils/compareLayouts";
 import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
-import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 import debounce from "./utils/debounce";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
 import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
@@ -571,6 +570,14 @@ function PanelGroupWithForwardedRef({
     }
   });
 
+  // Reset the cached layout if hidden by the Activity/Offscreen API
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
+
   const registerResizeHandle = useCallback((dragHandleId: string) => {
     return function resizeHandler(event: ResizeEvent) {
       event.preventDefault();

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[]