add follow cursor boundary flip and tooltip mount check

Author: mohsinulhaq

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14562,
-    "minified": 7842,
-    "gzipped": 2194
+    "bundled": 15320,
+    "minified": 8206,
+    "gzipped": 2346
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14510,
-    "minified": 7809,
-    "gzipped": 2190,
+    "bundled": 15268,
+    "minified": 8173,
+    "gzipped": 2343,
     "treeshaked": {
       "rollup": {
-        "code": 7284,
+        "code": 7648,
         "import_statements": 331
       },
       "webpack": {
-        "code": 8518
+        "code": 8882
       }
     }
   }

package.json

@@ -18,7 +18,7 @@
     "*.css"
   ],
   "scripts": {
-    "build": "rimraf dist && rollup -c && cp src/styles.css dist && yarn tsc && rimraf compiled",
+    "build": "rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled",
     "prepublishOnly": "yarn typecheck && yarn lint && yarn test && yarn build",
     "docs": "docz dev",
     "docs:build": "docz build",
@@ -47,19 +47,19 @@
     "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.3.4",
     "react-popper": "^1.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-transform-runtime": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@types/jest": "^24.0.6",
-    "@types/react": "^16.8.4",
+    "@types/jest": "^24.0.9",
+    "@types/react": "^16.8.6",
     "@types/react-dom": "^16.8.2",
     "docz": "^0.13.7",
     "docz-plugin-css": "^0.11.0",
@@ -70,13 +70,12 @@
     "prettier": "^1.16.4",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-testing-library": "^5.9.0",
-    "rimraf": "^2.6.3",
-    "rollup": "^1.2.2",
+    "react-testing-library": "^6.0.0",
+    "rollup": "^1.4.1",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-size-snapshot": "^0.8.0",
-    "tslint": "^5.12.1",
+    "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",

src/Tooltip.tsx

@@ -9,9 +9,11 @@ const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
 };
 
 class Tooltip extends Component<ITooltipProps> {
+  private mounted?: boolean;
   private observer?: MutationObserver;
 
   public componentDidMount() {
+    this.mounted = true;
     const {trigger} = this.props;
     const observer = (this.observer = new MutationObserver(() => {
       this.props.scheduleUpdate();
@@ -41,6 +43,7 @@ class Tooltip extends Component<ITooltipProps> {
   }
 
   public componentWillUnmount() {
+    this.mounted = false;
     const {trigger} = this.props;
     if (this.observer) {
       this.observer.disconnect();
@@ -93,7 +96,7 @@ class Tooltip extends Component<ITooltipProps> {
   private handleOutsideClick?: EventListener = event => {
     event.stopPropagation();
     event.preventDefault();
-    if (!findDOMNode(this)!.contains(event.target as Node)) {
+    if (this.mounted && !findDOMNode(this)!.contains(event.target as Node)) {
       const {
         hideTooltip,
         clearScheduled,
@@ -109,7 +112,7 @@ class Tooltip extends Component<ITooltipProps> {
   };
 
   private handleOutsideRightClick?: EventListener = event => {
-    if (!findDOMNode(this)!.contains(event.target as Node)) {
+    if (this.mounted && !findDOMNode(this)!.contains(event.target as Node)) {
       const {
         hideTooltip,
         clearScheduled,

src/TooltipTrigger.tsx

@@ -44,6 +44,7 @@ class TooltipTrigger extends Component<
 
   private hideTimeout?: number;
   private showTimeout?: number;
+  private popperOffset?: PopperJS.Offset;
 
   public componentWillUnmount() {
     this.clearScheduled();
@@ -77,7 +78,20 @@ class TooltipTrigger extends Component<
       <Popper
         innerRef={getTooltipRef}
         placement={placement}
-        modifiers={{...DEFAULT_MODIFIERS, ...modifiers}}
+        modifiers={{
+          ...DEFAULT_MODIFIERS,
+          ...(followCursor && {
+            followCursorModifier: {
+              enabled: true,
+              fn: data => {
+                this.popperOffset = data.offsets.popper;
+                return data;
+              },
+              order: 1000
+            }
+          }),
+          ...modifiers
+        }}
       >
         {({
           ref,
@@ -88,9 +102,18 @@ class TooltipTrigger extends Component<
           outOfBoundaries,
           scheduleUpdate
         }) => {
-          if (followCursor) {
+          if (followCursor && this.popperOffset) {
             const {pageX, pageY} = this.state;
-            style.transform = `translate3d(${pageX}px, ${pageY}px, 0`;
+            const {width, height} = this.popperOffset;
+            const x =
+              pageX! + width > window.scrollX + document.body.offsetWidth
+                ? pageX! - width
+                : pageX;
+            const y =
+              pageY! + height > window.scrollY + document.body.offsetHeight
+                ? pageY! - height
+                : pageY;
+            style.transform = `translate3d(${x}px, ${y}px, 0`;
           }
 
           return (