From 02b455581e53cae27215b3dc7ee5ef5c8f278a19 Mon Sep 17 00:00:00 2001
From: Graham Monteith <monteith.g@gmail.com>
Date: Wed, 1 Aug 2018 10:25:59 -0500
Subject: [PATCH] feat(Popover/Tooltip): add boundariesElement prop  (#1149)

Closes #1118
---
 docs/lib/Components/PopoversPage.js | 2 ++
 docs/lib/Components/TooltipsPage.js | 2 ++
 src/Popover.js                      | 2 ++
 src/PopperContent.js                | 4 ++++
 src/Tooltip.js                      | 2 ++
 src/__tests__/Uncontrolled.spec.js  | 5 +++++
 6 files changed, 17 insertions(+)

diff --git a/docs/lib/Components/PopoversPage.js b/docs/lib/Components/PopoversPage.js
index 21b6360fd..e79f17b5c 100644
--- a/docs/lib/Components/PopoversPage.js
+++ b/docs/lib/Components/PopoversPage.js
@@ -30,6 +30,8 @@ export default class PopoversPage extends React.Component {
   isOpen:  PropTypes.bool,
   // callback for toggling isOpen in the controlling component
   toggle:  PropTypes.func,
+  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+  boundariesElement: PropTypes.string,
   target:  PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
index 846cb9931..266016086 100644
--- a/docs/lib/Components/TooltipsPage.js
+++ b/docs/lib/Components/TooltipsPage.js
@@ -30,6 +30,8 @@ export default class TooltipsPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`Tooltip.propTypes = {
+  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+  boundariesElement: PropTypes.string,
   // boolean to control the state of the tooltip
   isOpen: PropTypes.bool,
   hideArrow: PropTypes.bool,
diff --git a/src/Popover.js b/src/Popover.js
index 5da44ecad..07f163487 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -16,6 +16,7 @@ const propTypes = {
     PropTypes.func,
     DOMElement,
   ]),
+  boundariesElement: PropTypes.string,
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   hideArrow: PropTypes.bool,
@@ -182,6 +183,7 @@ class Popover extends React.Component {
         container={this.props.container}
         modifiers={this.props.modifiers}
         offset={this.props.offset}
+        boundariesElement={this.props.boundariesElement}
       >
         <div {...attributes} className={classes} ref={this.getRef} />
       </PopperContent>
diff --git a/src/PopperContent.js b/src/PopperContent.js
index 5e34a76c4..046149c9e 100644
--- a/src/PopperContent.js
+++ b/src/PopperContent.js
@@ -21,9 +21,11 @@ const propTypes = {
   container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]).isRequired,
   modifiers: PropTypes.object,
+  boundariesElement: PropTypes.string,
 };
 
 const defaultProps = {
+  boundariesElement: 'scrollParent',
   placement: 'auto',
   hideArrow: false,
   isOpen: false,
@@ -144,6 +146,7 @@ class PopperContent extends React.Component {
       tag,
       container,
       modifiers,
+      boundariesElement,
       ...attrs
     } = this.props;
     const arrowClassName = mapToCssModules(classNames(
@@ -159,6 +162,7 @@ class PopperContent extends React.Component {
     const extendedModifiers = {
       offset: { offset },
       flip: { enabled: flip, behavior: fallbackPlacement },
+      preventOverflow: { boundariesElement },
       update: {
         enabled: true,
         order: 950,
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 06981b512..c7c9a9e2f 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -19,6 +19,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   hideArrow: PropTypes.bool,
+  boundariesElement: PropTypes.string,
   className: PropTypes.string,
   innerClassName: PropTypes.string,
   arrowClassName: PropTypes.string,
@@ -247,6 +248,7 @@ class Tooltip extends React.Component {
         target={this.props.target}
         isOpen={this.props.isOpen}
         hideArrow={this.props.hideArrow}
+        boundariesElement={this.props.boundariesElement}
         placement={this.props.placement}
         placementPrefix={this.props.placementPrefix}
         arrowClassName={this.props.arrowClassName}
diff --git a/src/__tests__/Uncontrolled.spec.js b/src/__tests__/Uncontrolled.spec.js
index c37badff3..e883e5ec8 100644
--- a/src/__tests__/Uncontrolled.spec.js
+++ b/src/__tests__/Uncontrolled.spec.js
@@ -109,4 +109,9 @@ describe('UncontrolledTooltip', () => {
     tooltip.update();
     expect(tooltip.prop('isOpen')).toBe(true);
   });
+
+  it('should have boundary set to string', () => {
+    const tooltip = shallow(<UncontrolledTooltip boundariesElement="window" target="blah">Yo!</UncontrolledTooltip>);
+    expect(tooltip.prop('boundariesElement')).toBe('window');
+  });
 });