Attach "pointerup" and "pointercancel" listeners to ownerDocument body (#475)

This PR changes which element the handlePointerUp event handler is added
to, it now adds the event handler to the body element of each owner
docment where a panelResizeHandle is rendered. This accounts for use
cases where the panelResizeHandle is rendered in a document that is in a
child window.

This PR also adds a test for checking which document body the event
handler is added to, which demonstrates a usecase where
PanelResizeHandles are rendered to a separate document.

addresses #468

---------

Co-authored-by: Brian Vaughn <[email protected]>

Author: ImmanuelBaskaran

packages/react-resizable-panels/src/PanelResizeHandle.test.tsx

@@ -31,6 +31,7 @@ describe("PanelResizeHandle", () => {
   beforeEach(() => {
     // @ts-expect-error
     global.IS_REACT_ACT_ENVIRONMENT = true;
+
     container = document.createElement("div");
     document.body.appendChild(container);
 
@@ -259,6 +260,42 @@ describe("PanelResizeHandle", () => {
     });
   });
 
+  describe("portals and child windows", () => {
+    test("should add the pointerup event to the separate document NOT the main document", () => {
+      act(() => {
+        root.unmount();
+      });
+
+      const separateWindowDocument =
+        document.implementation.createHTMLDocument();
+
+      container = separateWindowDocument.createElement("div");
+
+      separateWindowDocument.body.appendChild(container);
+
+      vi.spyOn(separateWindowDocument.body, "addEventListener");
+      vi.spyOn(document.body, "addEventListener");
+
+      expectedWarnings = [];
+
+      root = createRoot(container);
+
+      const { leftElement } = setupMockedGroup();
+
+      act(() => {
+        dispatchPointerEvent("pointerdown", leftElement);
+        dispatchPointerEvent("pointerup", leftElement);
+      });
+
+      expect(separateWindowDocument.body.addEventListener).toHaveBeenCalledWith(
+        "pointerup",
+        expect.anything(),
+        expect.anything()
+      );
+      expect(document.body.addEventListener).not.toHaveBeenCalled();
+    });
+  });
+
   describe("data attributes", () => {
     test("should initialize with the correct props based attributes", () => {
       const { leftElement, rightElement } = setupMockedGroup();

packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts

@@ -328,8 +328,12 @@ function updateListeners() {
       });
     }
 
-    window.addEventListener("pointerup", handlePointerUp, options);
-    window.addEventListener("pointercancel", handlePointerUp, options);
+    ownerDocumentCounts.forEach((_, ownerDocument) => {
+      const { body } = ownerDocument;
+
+      body.addEventListener("pointerup", handlePointerUp, options);
+      body.addEventListener("pointercancel", handlePointerUp, options);
+    });
   } else {
     ownerDocumentCounts.forEach((count, ownerDocument) => {
       const { body } = ownerDocument;