Pane resizing doesn't work when the component is mounted in external window

[cimak]

Pane resizing doesn't work when the component is mounted in external window (ReactDOM.createPortal() +window.open()). That's because SplitPane is listening for mouseup/mousemove/touchmove on the wrong document:

class SplitPane extends React.Component {
  ...
  componentDidMount() {
    document.addEventListener('mouseup', this.onMouseUp);
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('touchmove', this.onTouchMove);
    this.setState(SplitPane.getSizeUpdate(this.props, this.state));
  }

So although SplitPane is rendered/mounted in the external window, it is listening for events on the document of the main window.

I think something like this should do the trick: https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument

componentDidMount() {
   const parentDoc = this.splitPane.ownerDocument;
   parentDoc.addEventListener('mouseup', this.onMouseUp);
   ...
}

[pocesar]

the library relies completely on the current available document/window... Semantic UI React Modal deals with it with a "mountNode" prop, so you can pass in another DOM ref or another window/document.

[pocesar]

@cimak the ownerDocument was the way to go and I fixed this in my fork (if that's of your liking)