@atlaskit/smart-card 20.1.1 → 20.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.1.2
+
+### Patch Changes
+
+- [`0fb4cccede9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fb4cccede9) - add on mouse hover to hover card
+
 ## 20.1.1
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "20.1.1",
+	"version": "20.1.2",
 	"sideEffects": false
 }

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -54,6 +54,10 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = (0, _react.useRef)();
   var fadeInTimeoutId = (0, _react.useRef)();
   var cardOpenTime = (0, _react.useRef)();
+  var mousePos = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var hoverDisplay = 'card';
@@ -100,7 +104,17 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  var setMousePosition = (0, _react.useCallback)(function (event) {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   var onClick = (0, _react.useCallback)(function (e) {
     return e.stopPropagation();
@@ -130,10 +144,19 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+      return (0, _core.jsx)("span", {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }, (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+        css: {
+          position: 'sticky'
+        },
+        style: {
+          left: mousePos.current.x,
+          top: mousePos.current.y
+        }
+      })), children);
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "20.1.1",
+	"version": "20.1.2",
 	"sideEffects": false
 }

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -22,6 +22,10 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const mousePos = useRef({
+    x: 0,
+    y: 0
+  });
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
@@ -66,7 +70,17 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  const setMousePosition = useCallback(event => {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
@@ -92,10 +106,19 @@ export const HoverCardComponent = ({
       renderers: renderers,
       url: url
     })),
-    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
+    trigger: triggerProps => jsx("span", {
       onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard
-    }), children),
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition
+    }, jsx("span", _extends({}, triggerProps, {
+      css: {
+        position: 'sticky'
+      },
+      style: {
+        left: mousePos.current.x,
+        top: mousePos.current.y
+      }
+    })), children),
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 
   });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "20.1.1",
+	"version": "20.1.2",
 	"sideEffects": false
 }

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -27,6 +27,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
   var cardOpenTime = useRef();
+  var mousePos = useRef({
+    x: 0,
+    y: 0
+  });
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var hoverDisplay = 'card';
@@ -73,7 +77,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  var setMousePosition = useCallback(function (event) {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   var onClick = useCallback(function (e) {
     return e.stopPropagation();
@@ -103,10 +117,19 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, triggerProps, {
+      return jsx("span", {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }, jsx("span", _extends({}, triggerProps, {
+        css: {
+          position: 'sticky'
+        },
+        style: {
+          left: mousePos.current.x,
+          top: mousePos.current.y
+        }
+      })), children);
     },
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "20.1.1",
+  "version": "20.1.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"