react-resizable-panels 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.
+
 ## 2.0.0
 
 - Support resizing multiple (intersecting) panels at once (#274)

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

@@ -337,13 +337,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -343,13 +343,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -319,13 +319,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -313,13 +313,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -339,13 +339,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -350,13 +350,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -326,13 +326,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -313,13 +313,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }

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

@@ -289,13 +289,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }

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

@@ -315,13 +315,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }
@@ -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();

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

@@ -302,13 +302,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }

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

@@ -278,13 +278,13 @@ function handlePointerDown(event) {
     y
   } = getResizeEventCoordinates(event);
   isPointerDown = true;
-  updateResizeHandlerStates("down", event);
   recalculateIntersectingHandles({
     x,
     y
   });
   updateListeners();
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
     event.preventDefault();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -72,8 +72,8 @@
     "eslint": "^8.37.0",
     "eslint-plugin-no-restricted-imports": "^0.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "react": "latest",
-    "react-dom": "latest"
+    "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/PanelResizeHandleRegistry.ts

@@ -80,12 +80,12 @@ function handlePointerDown(event: ResizeEvent) {
 
   isPointerDown = true;
 
-  updateResizeHandlerStates("down", event);
-
   recalculateIntersectingHandles({ x, y });
   updateListeners();
 
   if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
+
     event.preventDefault();
   }
 }