@atlaskit/smart-card 20.1.0 → 20.1.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [`0fb4cccede9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fb4cccede9) - add on mouse hover to hover card
+
+## 20.1.1
+
+### Patch Changes
+
+- [`59469f2ed1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59469f2ed1c) - Add loading state for hover previews
+
 ## 20.1.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -17,11 +17,13 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject, _templateObject2;
 
-var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
-
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
-  var testId = _ref.testId;
+  var testId = _ref.testId,
+      width = _ref.width,
+      height = _ref.height;
+  var animationWidth = width ? "".concat(width, "rem") : '20px';
+  var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return (0, _core.jsx)("span", {
     css: styles,
     "data-testid": testId

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

@@ -54,6 +54,12 @@ 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 popupOffset = (0, _react.useRef)();
+  var parentSpan = (0, _react.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var hoverDisplay = 'card';
@@ -88,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]);
@@ -100,7 +114,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();
@@ -110,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", {
@@ -130,10 +155,13 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+      return (0, _core.jsx)("span", {
+        ref: parentSpan
+      }, (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }), 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/components/HoverCardContent.js

@@ -35,6 +35,8 @@ var _styled = require("../styled");
 
 var _utils2 = require("../utils");
 
+var _HoverCardLoadingView = _interopRequireDefault(require("./HoverCardLoadingView"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -125,21 +127,33 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var body = data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, null) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: _styled.flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
+  var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: _styled.titleBlockCss,
     size: _constants.SmartLinkSize.Large,
     position: _constants.SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+  };
+  var flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: _styled.flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/_react.default.createElement(_HoverCardLoadingView.default, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, titleBlockProps), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: _constants.SmartLinkSize.Large,

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadingSkeleton = _interopRequireDefault(require("../../FlexibleCard/components/common/loading-skeleton"));
+
+var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
+
+var _styled = require("../styled");
+
+/** @jsx jsx */
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
+  return (0, _core.jsx)("div", {
+    css: _styled.loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, (0, _core.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _core.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _core.jsx)("div", {
+    css: _styled.skeletonContainer
+  }, (0, _core.jsx)("span", null), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), (0, _core.jsx)(_loadingSkeleton.default, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+var _default = HoverCardLoadingView;
+exports.default = _default;

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.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = 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"));
 
@@ -15,7 +15,7 @@ var _index = require("../../index");
 
 var _constants = require("../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var flexibleUiOptions = {
   hideElevation: true,
@@ -25,14 +25,23 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 exports.flexibleUiOptions = flexibleUiOptions;
+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);
-var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
+var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 var titleBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 exports.titleBlockCss = titleBlockCss;
 var metadataBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 exports.metadataBlockCss = metadataBlockCss;
 var footerBlockCss = (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
-exports.footerBlockCss = footerBlockCss;
+exports.footerBlockCss = footerBlockCss;
+var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.loadingViewContainer = loadingViewContainer;
+var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+exports.skeletonContainer = skeletonContainer;

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -2,38 +2,45 @@
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-const animationNameStyles = keyframes`
-  0% { background-position: -20px 0; }
-  100% { background-position: 20px 0; }
-`;
-const styles = css`
-  border-radius: 2px;
-  user-select: none;
-  background: ${token('color.skeleton.subtle', '#f6f7f8')};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
-  background-image: linear-gradient(
-    to right,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
-    ${token('color.skeleton', '#edeef1')} 20%,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
-    ${token('color.skeleton.subtle', '#f6f7f8')}100%
-  );
-  background-repeat: no-repeat;
-  background-size: 280% 100%;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${animationNameStyles};
-  animation-timing-function: linear;
-`;
 
 const LoadingSkeleton = ({
-  testId
-}) => jsx("span", {
-  css: styles,
-  "data-testid": testId
-});
+  testId,
+  width,
+  height
+}) => {
+  const animationWidth = width ? `${width}rem` : '20px';
+  const animationNameStyles = keyframes`
+    0% { background-position: -${animationWidth}  0; }
+    100% { background-position: ${animationWidth} 0; }
+  `;
+  const styles = css`
+    width: ${width}rem;
+    height: ${height}rem;
+    border-radius: 2px;
+    user-select: none;
+    background: ${token('color.skeleton.subtle', '#f6f7f8')};
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
+    background-image: linear-gradient(
+      to right,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+      ${token('color.skeleton', '#edeef1')} 20%,
+      ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+      ${token('color.skeleton.subtle', '#f6f7f8')}100%
+    );
+    background-repeat: no-repeat;
+    background-size: 280% 100%;
+    display: inline-block;
+
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: ${animationNameStyles};
+    animation-timing-function: linear;
+  `;
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
 
 export default LoadingSkeleton;

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 = ({
@@ -22,6 +22,12 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const mousePos = useRef({
+    x: 0,
+    y: 0
+  });
+  const popupOffset = useRef();
+  const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
@@ -54,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]);
@@ -66,7 +80,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, {
@@ -74,6 +98,7 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: hideCard,
     placement: "bottom-start",
+    offset: popupOffset.current,
     content: ({
       update
     }) => jsx("div", {
@@ -92,10 +117,13 @@ export const HoverCardComponent = ({
       renderers: renderers,
       url: url
     })),
-    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
+    trigger: triggerProps => jsx("span", {
+      ref: parentSpan
+    }, jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard
-    }), children),
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition
+    }), 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/components/HoverCardContent.js

@@ -11,6 +11,7 @@ import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './HoverCardLoadingView';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -79,21 +80,33 @@ const HoverCardContent = ({
   } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  const flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../FlexibleCard';
+import { TitleBlock } from '../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+
+const HoverCardLoadingView = ({
+  flexibleCardProps,
+  titleBlockProps
+}) => {
+  const lineHeightRem = 1.25;
+  const skeletonWidth = CARD_WIDTH_REM - 2;
+  return jsx("div", {
+    css: loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
+    css: skeletonContainer
+  }, jsx("span", null), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+export default HoverCardLoadingView;

package/dist/es2019/view/HoverCard/styled.js

@@ -8,6 +8,9 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+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`
@@ -19,7 +22,7 @@ export const HoverCardContainer = css`
   background: none;
   border-width: 0;
   box-sizing: border-box;
-  width: 24rem;
+  width: ${CARD_WIDTH_REM}rem;
   padding: 1rem;
 
   .${loadingPlaceholderClassName} {
@@ -70,4 +73,14 @@ export const metadataBlockCss = css`
 `;
 export const footerBlockCss = css`
   padding-top: 0.25rem;
+`;
+export const loadingViewContainer = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const skeletonContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: center;
 `;

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -6,11 +6,14 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
-  var testId = _ref.testId;
+  var testId = _ref.testId,
+      width = _ref.width,
+      height = _ref.height;
+  var animationWidth = width ? "".concat(width, "rem") : '20px';
+  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return jsx("span", {
     css: styles,
     "data-testid": testId

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) {
@@ -27,6 +27,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
   var cardOpenTime = useRef();
+  var mousePos = useRef({
+    x: 0,
+    y: 0
+  });
+  var popupOffset = useRef();
+  var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var hoverDisplay = 'card';
@@ -61,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]);
@@ -73,7 +87,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();
@@ -83,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", {
@@ -103,10 +128,13 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, triggerProps, {
+      return jsx("span", {
+        ref: parentSpan
+      }, jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
+        onMouseLeave: initHideCard,
+        onMouseMove: setMousePosition
+      }), 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/components/HoverCardContent.js

@@ -11,6 +11,7 @@ import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './HoverCardLoadingView';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
@@ -92,21 +93,33 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  var flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../FlexibleCard';
+import { TitleBlock } from '../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var skeletonWidth = CARD_WIDTH_REM - 2;
+  return jsx("div", {
+    css: loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
+    css: skeletonContainer
+  }, jsx("span", null), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+export default HoverCardLoadingView;

package/dist/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
@@ -12,10 +12,15 @@ export var flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+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);
-export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/types.d.ts

@@ -5,4 +5,12 @@ export declare type LoadingSkeletonProps = {
      * code, serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * Width of the loading skeleton, defaults to width of the parent element
+     */
+    width?: number;
+    /**
+     * Height of loading skeleton, defaults to height of the parent element
+     */
+    height?: number;
 };

package/dist/types/view/HoverCard/components/HoverCardLoadingView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HoverCardLoadingViewProps } from '../types';
+declare const HoverCardLoadingView: React.FC<HoverCardLoadingViewProps>;
+export default HoverCardLoadingView;

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

@@ -1,6 +1,10 @@
 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;
 export declare const footerBlockCss: import("@emotion/utils").SerializedStyles;
+export declare const loadingViewContainer: import("@emotion/utils").SerializedStyles;
+export declare const skeletonContainer: import("@emotion/utils").SerializedStyles;

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

@@ -6,6 +6,8 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement } from 'react';
+import { TitleBlockProps } from '../FlexibleCard/components/blocks/title-block/types';
+import { FlexibleCardProps } from '../FlexibleCard/types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
@@ -32,3 +34,7 @@ export declare type HoverCardContentProps = {
     onResolve: () => void;
     url: string;
 };
+export declare type HoverCardLoadingViewProps = {
+    flexibleCardProps: FlexibleCardProps;
+    titleBlockProps: TitleBlockProps;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "20.1.0",
+  "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",