feat: Added outOfBoundaries support

Author: Federico Zivolo

.flowconfig

@@ -1,6 +1,7 @@
 [ignore]
 .*/node_modules/config-chain/.*
 /lib/.*
+.*/.cache
 
 [include]
 

README.md

@@ -83,6 +83,7 @@ children: ({|
   ref: (?HTMLElement) => void,
   style: { [string]: string | number },
   placement: ?Placement,
+  outOfBoundaries: ?boolean,
   scheduleUpdate: () => void,
   arrowProps: {
     ref: (?HTMLElement) => void,
@@ -121,6 +122,13 @@ One of the accepted placement values listed in the [Popper.js documentation](htt
 Your popper is going to be placed according to the value of this property.  
 Defaults to `bottom`.
 
+```js
+outOfBoundaries: ?boolean;
+```
+
+A boolean that can be used to hide the popper element in case it's overflowing
+from its boundaries. [Read more](https://popper.js.org/popper-documentation.html#modifiers..hide).
+
 ##### `eventsEnabled`
 
 ```js

src/Popper.js

@@ -19,6 +19,7 @@ type RenderProp = ({|
   ref: getRefFn,
   style: Style,
   placement: ?Placement,
+  outOfBoundaries: ?boolean,
   scheduleUpdate: () => void,
   arrowProps: {
     ref: getRefFn,
@@ -110,6 +111,9 @@ export class InnerPopper extends Component<PopperProps, PopperState> {
       ? initialArrowStyle
       : this.state.data.arrowStyles;
 
+  getOutOfBoundariesState = () =>
+    this.state.data ? this.state.data.hide : undefined;
+
   initPopperInstance = () => {
     const { referenceElement } = this.props;
     const { popperNode, popperInstance } = this.state;
@@ -175,6 +179,7 @@ export class InnerPopper extends Component<PopperProps, PopperState> {
       ref: this.setPopperNode,
       style: this.getPopperStyle(),
       placement: this.getPopperPlacement(),
+      outOfBoundaries: this.getOutOfBoundariesState(),
       scheduleUpdate: this.scheduleUpdate,
       arrowProps: {
         ref: this.setArrowNode,

typings/react-popper.d.ts

@@ -22,6 +22,7 @@ interface PopperProps {
     ref: (ref: HTMLElement | null) => void,
     style: React.CSSProperties,
     placement: ?PopperJS.Placement,
+    outOfBoundaries: boolean | null,
     scheduleUpdate: () => void,
     arrowProps: {
       ref: (ref: HTMLElement | null) => void,

typings/tests/main-test.tsx

@@ -9,10 +9,17 @@ const Test = () => (
       positionFixed
       modifiers={{ flip: { enabled: false } }}
     >
-      {({ ref, style, placement, scheduleUpdate, arrowProps }) => (
+      {({
+        ref,
+        style,
+        placement,
+        outOfBoundaries,
+        scheduleUpdate,
+        arrowProps,
+      }) => (
         <div
           ref={ref}
-          style={style}
+          style={{ ...style, opacity: outOfBoundaries ? 0 : 1 }}
           data-placement={placement}
           onClick={() => scheduleUpdate()}
         >