accept boundary and appendTo props

Author: chrisbreiding

src/portal-popper.jsx

@@ -27,6 +27,7 @@ class PortalPopper extends Component {
   static defaultProps = {
     Popper,
     className: '',
+    boundary: document.body,
   }
 
   constructor (...props) {
@@ -49,6 +50,7 @@ class PortalPopper extends Component {
         ref='portal'
         className={`${className} ${prefix}-${placement}${flippedClass}`}
         style={this._getPopperStyle()}
+        appendTo={this.props.appendTo}
       >
         <span>{title}</span>
         <div
@@ -59,7 +61,7 @@ class PortalPopper extends Component {
           <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
             <polygon points='5,0 10,5 5,10 0,5' />
           </svg>
-          </div>
+        </div>
       </Portal>
     )
   }
@@ -69,8 +71,10 @@ class PortalPopper extends Component {
       content: this.props.title,
       placement: this.props.placement,
       modifiers: {
-        applyStyle: { enabled: true },
         arrow: { element: this.refs.arrow },
+        preventOverflow: {
+          boundariesElement: this.props.boundary,
+        },
       },
       onCreate: this._updateData,
       onUpdate: this._updateData,

src/portal-popper.spec.jsx

@@ -63,17 +63,16 @@ describe('<PortalPopper />', () => {
 
   it('creates Popper instance with the right props', () => {
     const Popper = popperStub(popperInstanceStub())
-    const component = mount(<PortalPopper {...getProps({ Popper })} />)
+    mount(<PortalPopper {...getProps({ Popper, boundary: 'boundary' })} />)
     expect(Popper).to.have.been.called
-    expect(Popper.getCall(0).args[0]).to.equal('target node')
-    expect(Popper.getCall(0).args[2]).to.eql({
-      content: 'tooltip title',
-      placement: 'top',
-      modifiers: {
-        applyStyle: { enabled: true },
-        arrow: { element: component.ref('arrow').node },
-      },
+    expect(Popper.firstCall.args[0]).to.equal('target node')
+    expect(Popper.firstCall.args[2].content).to.equal('tooltip title')
+    expect(Popper.firstCall.args[2].placement).to.equal('top')
+    expect(Popper.firstCall.args[2].modifiers.preventOverflow).to.eql({
+      boundariesElement: 'boundary',
     })
+    expect(Popper.firstCall.args[2].onCreate).to.be.a('function')
+    expect(Popper.firstCall.args[2].onUpdate).to.be.a('function')
   })
 
   it('calls scheduleUpdate() on the Popper instance', () => {

src/portal.jsx

@@ -3,25 +3,33 @@ import React, { Component } from 'react'
 import { render } from 'react-dom'
 
 class Portal extends Component {
+  static idNum = 0
+
+  static defaultProps = {
+    appendTo: document.body,
+  }
+
   componentDidMount () {
+    const appendTo = this.props.appendTo
     const id = `portal-${Portal.idNum++}`
-    let element = document.getElementById(id)
+    let element = appendTo.ownerDocument.getElementById(id)
     if (!element) {
-      element = document.createElement('div')
+      element = appendTo.ownerDocument.createElement('div')
       element.id = id
-      document.body.appendChild(element)
+      appendTo.appendChild(element)
     }
     this._element = element
     this.componentDidUpdate()
   }
 
   componentWillUnmount () {
-    document.body.removeChild(this._element)
+    const appendTo = this.props.appendTo
+    appendTo.removeChild(this._element)
   }
 
   componentDidUpdate () {
     render((
-      <div ref={(node) => this.domNode = node} {..._.omit(this.props, 'children')}>
+      <div ref={(node) => this.domNode = node} {..._.omit(this.props, 'children', 'appendTo')}>
         {this.props.children}
       </div>
     ), this._element)
@@ -32,6 +40,4 @@ class Portal extends Component {
   }
 }
 
-Portal.idNum = 0
-
 export default Portal

src/tooltip.jsx

@@ -14,8 +14,8 @@ class Tooltip extends Component {
   }
 
   static defaultProps = {
-    placement: 'top',
     className: 'tooltip',
+    placement: 'top',
     wrapperClassName: '',
   }
 
@@ -47,7 +47,7 @@ class Tooltip extends Component {
   _popper () {
     if (this.props.visible !== true && (!this.state.shouldShow || this.props.visible === false)) return null
 
-    const props = _.pick(this.props, 'title', 'placement', 'className', 'updateCue')
+    const props = _.omit(this.props, 'wrapperClassName', 'children')
 
     return (
       <PortalPopper getTargetNode={() => this.refs.target} {...props} />