@atlaskit/smart-card 20.1.2 → 20.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.1.3
+
+### Patch Changes
+
+- [`7c0644e5daf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c0644e5daf) - fix on mouse hover functionality for hover cards
+
 ## 20.1.2
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -58,6 +58,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     x: 0,
     y: 0
   });
+  var popupOffset = (0, _react.useRef)();
+  var parentSpan = (0, _react.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var hoverDisplay = 'card';
@@ -92,6 +94,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + _styled.CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -124,6 +134,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: function content(_ref2) {
       var update = _ref2.update;
       return (0, _core.jsx)("div", {
@@ -145,18 +156,12 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     },
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", {
+        ref: parentSpan
+      }, (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
         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);
+      }), 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/cjs/view/HoverCard/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = void 0;
+exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = exports.loadingViewContainer = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -25,8 +25,11 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 exports.flexibleUiOptions = flexibleUiOptions;
-var CARD_WIDTH_REM = 24;
+var CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
 exports.CARD_WIDTH_REM = CARD_WIDTH_REM;
+var CARD_GAP_PX = 10;
+exports.CARD_GAP_PX = CARD_GAP_PX;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

package/dist/es2019/version.json

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

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

@@ -8,7 +8,7 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
-import { HoverCardContainer } from '../styled';
+import { HoverCardContainer, CARD_GAP_PX } from '../styled';
 import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const HoverCardComponent = ({
@@ -26,6 +26,8 @@ export const HoverCardComponent = ({
     x: 0,
     y: 0
   });
+  const popupOffset = useRef();
+  const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
@@ -58,6 +60,14 @@ export const HoverCardComponent = ({
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        const {
+          bottom,
+          left
+        } = parentSpan.current.getBoundingClientRect();
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -88,6 +98,7 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: ({
       update
     }) => jsx("div", {
@@ -107,18 +118,12 @@ export const HoverCardComponent = ({
       url: url
     })),
     trigger: triggerProps => jsx("span", {
+      ref: parentSpan
+    }, jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition
-    }, jsx("span", _extends({}, triggerProps, {
-      css: {
-        position: 'sticky'
-      },
-      style: {
-        left: mousePos.current.x,
-        top: mousePos.current.y
-      }
-    })), children),
+    }), 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/view/HoverCard/styled.js

@@ -8,7 +8,9 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
-export const CARD_WIDTH_REM = 24;
+export const CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
+export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
 const separatorCss = css`

package/dist/esm/version.json

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

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

@@ -9,7 +9,7 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
-import { HoverCardContainer } from '../styled';
+import { HoverCardContainer, CARD_GAP_PX } from '../styled';
 import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
@@ -31,6 +31,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     x: 0,
     y: 0
   });
+  var popupOffset = useRef();
+  var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var hoverDisplay = 'card';
@@ -65,6 +67,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
       }
 
+      if (parentSpan.current) {
+        var _parentSpan$current$g = parentSpan.current.getBoundingClientRect(),
+            bottom = _parentSpan$current$g.bottom,
+            left = _parentSpan$current$g.left;
+
+        popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
+      }
+
       setIsOpen(true);
     }, delay);
   }, [delay, isOpen, analytics.ui]);
@@ -97,6 +107,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: function content(_ref2) {
       var update = _ref2.update;
       return jsx("div", {
@@ -118,18 +129,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     },
     trigger: function trigger(triggerProps) {
       return jsx("span", {
+        ref: parentSpan
+      }, jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
         onMouseMove: setMousePosition
-      }, jsx("span", _extends({}, triggerProps, {
-        css: {
-          position: 'sticky'
-        },
-        style: {
-          left: mousePos.current.x,
-          top: mousePos.current.y
-        }
-      })), children);
+      }), 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/view/HoverCard/styled.js

@@ -12,7 +12,9 @@ export var flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
-export var CARD_WIDTH_REM = 24;
+export var CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
+
+export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

package/dist/types/view/HoverCard/styled.d.ts

@@ -1,6 +1,7 @@
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 export declare const flexibleUiOptions: FlexibleUiOptions;
 export declare const CARD_WIDTH_REM = 24;
+export declare const CARD_GAP_PX = 10;
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "20.1.2",
+  "version": "20.1.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.6",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/inline-message": "^11.2.0",
+    "@atlaskit/inline-message": "^11.3.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",