Support element-dependent Window and Document objects (i.e. popup using React Portals)

[aszmyd]

Description

It happens sometimes that the globally available window and document objects are not the ones we want to use when attaching listeners and searching through DOM.
In our application, we're using React Portals together with a blank pop-up window to have a multi-window experience. This works really well except for the fact that the window and document contexts in such an approach are not the global ones (because React renders HTML in the other context window than the javascript is still executing).

You've baked in the use of global window and document (i.e. here)

You can get the right context from any DOM element by accessing its ownerDocument (document, document.querySelectAll etc) and defaultView attribute of the document (to get the window object related to a document)

I think what could be done to support it is to store somewhere these objects (making a hook to make it easy to use), default to the global ones and update the references when the node is available (i.e. in setRef of the element)

[parassantra]

I have attached a codesandbox with version "@hello-pangea/dnd": "18.0.1" :

1. this example shows when popout button is clicked and DnD list moves to new window created through portal, it breaks and drag and drop doesn't work. refer to console log for errors
   https://codesandbox.io/p/sandbox/vibrant-https-wfc2lm

this issue is fixed and addressed in PR #932