@atlaskit/tooltip - npm Package Compare versions

Comparing version 9.1.0 to 9.1.1

CHANGELOG.md

 # @atlaskit/tooltip
 
+## 9.1.1
+- [patch] Fix viewport edge collision detection for non-mouse positions in some cases and improve detection to include scrollbars [e66bce5](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/e66bce5)
+
 ## 9.1.0
@@ -4,0 +7,0 @@ - [patch] Improve viewport edge collision detection. Tooltips will now shift along the secondary position axis (e.g. left/right when position is top/bottom) to show within viewport. Fix auto flip occurring incorrectly in these situations as well. [ebf331a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ebf331a)

dist/cjs/components/utils/getPosition.js

@@ -26,5 +26,17 @@ 'use strict';
 
-// Returns a top or left position that shifts the original coord to within viewport
+// Get viewport height excluding scrollbars
 
 
+function getViewportHeight() {
+  var docEl = document.documentElement;
+  return docEl && docEl.clientHeight || window.innerHeight || 0;
+}
+
+// Get viewport width excluding scrollbars
+function getViewportWidth() {
+  var docEl = document.documentElement;
+  return docEl && docEl.clientWidth || window.innerWidth || 0;
+}
+
+// Returns a top or left position that shifts the original coord to within viewport
 function shiftCoord(coordName, coords, gutter) {
@@ -36,17 +48,12 @@ var shiftedCoord = {};
 
-  var docEl = document.documentElement;
   if (coordName === 'bottom') {
-    var viewportHeight = window.innerHeight || docEl && docEl.clientHeight || 0;
-    var amountClipped = coords.bottom - viewportHeight;
-
+    var amountClipped = coords.bottom - getViewportHeight();
     var shiftedTop = coords.top - amountClipped - gutter;
 
-    shiftedCoord.top = shiftedTop >= 0 ? shiftedTop : coords.top;
+    shiftedCoord.top = shiftedTop >= 0 ? shiftedTop : 0 + gutter;
   } else if (coordName === 'right') {
-    var viewportWidth = window.innerWidth || docEl && docEl.clientWidth || 0;
-    var _amountClipped = coords.right - viewportWidth;
-
+    var _amountClipped = coords.right - getViewportWidth();
     var shiftedLeft = coords.left - _amountClipped - gutter;
 
-    shiftedCoord.left = shiftedLeft >= 0 ? shiftedLeft : coords.top;
+    shiftedCoord.left = shiftedLeft >= 0 ? shiftedLeft : 0 + gutter;
   }
@@ -64,9 +71,7 @@
 
-  var docEl = document.documentElement;
-
   return {
     top: top >= 0 + gutter,
     left: left >= 0 + gutter,
-    bottom: bottom <= (window.innerHeight || docEl && docEl.clientHeight || 0) - gutter,
-    right: right <= (window.innerWidth || docEl && docEl.clientWidth || 0) - gutter
+    bottom: bottom <= getViewportHeight() - gutter,
+    right: right <= getViewportWidth() - gutter
   };
@@ -127,4 +132,4 @@ }
       top: targetRect.top - (tooltipRect.height + gutter),
-      right: 0,
-      bottom: 0,
+      right: targetRect.right - (targetRect.width - tooltipRect.width) / 2,
+      bottom: targetRect.top + (tooltipRect.height - gutter),
       left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
@@ -134,4 +139,4 @@ },
       top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-      right: targetRect.right + gutter + tooltipRect.width, // used to calculate flip
-      bottom: 0,
+      right: targetRect.right + gutter + tooltipRect.width,
+      bottom: targetRect.bottom - (targetRect.height - tooltipRect.height) / 2,
       left: targetRect.right + gutter
@@ -141,4 +146,4 @@ },
       top: targetRect.bottom + gutter,
-      right: 0,
-      bottom: targetRect.bottom + gutter + tooltipRect.height, // used to calculate flip
+      right: targetRect.right - (targetRect.width - tooltipRect.width) / 2,
+      bottom: targetRect.bottom + gutter + tooltipRect.height,
       left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
@@ -148,4 +153,4 @@ },
       top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-      right: 0,
-      bottom: 0,
+      right: targetRect.left - gutter,
+      bottom: targetRect.bottom - (targetRect.height - tooltipRect.height) / 2,
       left: targetRect.left - (tooltipRect.width + gutter)
@@ -152,0 +157,0 @@ }

dist/esm/components/utils/getPosition.js

@@ -12,5 +12,17 @@ import _Object$assign from 'babel-runtime/core-js/object/assign';
 
-// Returns a top or left position that shifts the original coord to within viewport
+// Get viewport height excluding scrollbars
 
 
+function getViewportHeight() {
+  var docEl = document.documentElement;
+  return docEl && docEl.clientHeight || window.innerHeight || 0;
+}
+
+// Get viewport width excluding scrollbars
+function getViewportWidth() {
+  var docEl = document.documentElement;
+  return docEl && docEl.clientWidth || window.innerWidth || 0;
+}
+
+// Returns a top or left position that shifts the original coord to within viewport
 function shiftCoord(coordName, coords, gutter) {
@@ -22,17 +34,12 @@ var shiftedCoord = {};
 
-  var docEl = document.documentElement;
   if (coordName === 'bottom') {
-    var viewportHeight = window.innerHeight || docEl && docEl.clientHeight || 0;
-    var amountClipped = coords.bottom - viewportHeight;
-
+    var amountClipped = coords.bottom - getViewportHeight();
     var shiftedTop = coords.top - amountClipped - gutter;
 
-    shiftedCoord.top = shiftedTop >= 0 ? shiftedTop : coords.top;
+    shiftedCoord.top = shiftedTop >= 0 ? shiftedTop : 0 + gutter;
   } else if (coordName === 'right') {
-    var viewportWidth = window.innerWidth || docEl && docEl.clientWidth || 0;
-    var _amountClipped = coords.right - viewportWidth;
-
+    var _amountClipped = coords.right - getViewportWidth();
     var shiftedLeft = coords.left - _amountClipped - gutter;
 
-    shiftedCoord.left = shiftedLeft >= 0 ? shiftedLeft : coords.top;
+    shiftedCoord.left = shiftedLeft >= 0 ? shiftedLeft : 0 + gutter;
   }
@@ -50,9 +57,7 @@
 
-  var docEl = document.documentElement;
-
   return {
     top: top >= 0 + gutter,
     left: left >= 0 + gutter,
-    bottom: bottom <= (window.innerHeight || docEl && docEl.clientHeight || 0) - gutter,
-    right: right <= (window.innerWidth || docEl && docEl.clientWidth || 0) - gutter
+    bottom: bottom <= getViewportHeight() - gutter,
+    right: right <= getViewportWidth() - gutter
   };
@@ -113,4 +118,4 @@ }
       top: targetRect.top - (tooltipRect.height + gutter),
-      right: 0,
-      bottom: 0,
+      right: targetRect.right - (targetRect.width - tooltipRect.width) / 2,
+      bottom: targetRect.top + (tooltipRect.height - gutter),
       left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
@@ -120,4 +125,4 @@ },
       top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-      right: targetRect.right + gutter + tooltipRect.width, // used to calculate flip
-      bottom: 0,
+      right: targetRect.right + gutter + tooltipRect.width,
+      bottom: targetRect.bottom - (targetRect.height - tooltipRect.height) / 2,
       left: targetRect.right + gutter
@@ -127,4 +132,4 @@ },
       top: targetRect.bottom + gutter,
-      right: 0,
-      bottom: targetRect.bottom + gutter + tooltipRect.height, // used to calculate flip
+      right: targetRect.right - (targetRect.width - tooltipRect.width) / 2,
+      bottom: targetRect.bottom + gutter + tooltipRect.height,
       left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
@@ -134,4 +139,4 @@ },
       top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
-      right: 0,
-      bottom: 0,
+      right: targetRect.left - gutter,
+      bottom: targetRect.bottom - (targetRect.height - tooltipRect.height) / 2,
       left: targetRect.left - (tooltipRect.width + gutter)
@@ -138,0 +143,0 @@ }

dist/package.json

 {
 	"name": "@atlaskit/tooltip",
-	"version": "9.0.0"
+	"version": "9.1.0"
 }

package.json

 {
   "name": "@atlaskit/tooltip",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "A React Component for displaying Tooltips",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135587

increased by1.04%

Number of downloads

66627

increased by92.86%

Lines of code

1729

increased by0.7%

No dependency changes