@atlaskit/smart-card 20.0.0 → 20.0.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/smart-card
 
+## 20.0.3
+
+### Patch Changes
+
+- [`4c2c26ca270`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c2c26ca270) - Fix regression in logos in BlockCard footers in preview mode cuased by the `appearance` prop.
+- [`d4133fe0edc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4133fe0edc) - Fix regression in logos in BlockCard footers caused by inheriting ProseMirror styles after a change in @atlaskit/logo internals.
+- Updated dependencies
+
+## 20.0.2
+
+### Patch Changes
+
+- [`12950ccea1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12950ccea1b) - Hover Preview: Stop hover preview from propagating click event to parent element
+
+## 20.0.1
+
+### Patch Changes
+
+- [`3e4f8e1490a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e4f8e1490a) - Hover Preview: Fix Hover Preview shows on top of Preview modal
+
 ## 20.0.0
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/Provider.js

@@ -33,11 +33,12 @@ var Provider = function Provider(_ref) {
   return (0, _core.jsx)("div", {
     css: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      fontSize: (0, _utils.gs)(1.5),
+      whiteSpace: 'normal'
     }
   }, iconToRender, (0, _core.jsx)("span", {
     css: {
-      fontSize: (0, _utils.gs)(1.5),
       color: (0, _tokens.token)('color.text.subtlest', _colors.N300),
       margin: 0,
       marginLeft: (0, _utils.gs)(0.5),

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -13,6 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _react = require("react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _core = require("@emotion/core");
@@ -62,10 +64,15 @@ var ActionGroup = function ActionGroup(_ref) {
       testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
   return (0, _core.jsx)("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(firstActions, size, appearance), restActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;

package/dist/cjs/view/HoverCard/components/hover-card-content.js

@@ -45,7 +45,7 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 
-var getOpenAction = function getOpenAction(url, analytics) {
+var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: _constants.ActionName.CustomAction,
     icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
@@ -54,6 +54,10 @@ var getOpenAction = function getOpenAction(url, analytics) {
     }),
     iconPosition: 'before',
     onClick: function onClick() {
+      if (onActionClick) {
+        onActionClick('open-content');
+      }
+
       window.open(url, '_blank');
       analytics.ui.hoverCardOpenLinkClickedEvent('card');
     },
@@ -61,12 +65,16 @@ var getOpenAction = function getOpenAction(url, analytics) {
   };
 };
 
-var toFooterActions = function toFooterActions(cardActions) {
+var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
       name: _constants.ActionName.CustomAction,
       onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
         return action.invoke();
       },
       testId: action.id
@@ -81,6 +89,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       _ref$cardActions = _ref.cardActions,
       cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
       cardState = _ref.cardState,
+      onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
@@ -97,11 +106,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = (0, _react.useMemo)(function () {
-    return [getOpenAction(url, analytics)];
-  }, [url, analytics]);
+    return [getOpenAction(url, analytics, onActionClick)];
+  }, [url, analytics, onActionClick]);
   var footerActions = (0, _react.useMemo)(function () {
-    return toFooterActions(cardActions);
-  }, [cardActions]);
+    return toFooterActions(cardActions, onActionClick);
+  }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

package/dist/cjs/view/HoverCard/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCardComponent = exports.HoverCard = void 0;
+exports.hoverCardClassName = exports.HoverCardComponent = exports.HoverCard = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -42,6 +42,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /** @jsx jsx */
+var hoverCardClassName = 'smart-links-hover-preview';
+exports.hoverCardClassName = hoverCardClassName;
+
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -63,21 +66,24 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
+  var hideCard = (0, _react.useCallback)(function () {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      var hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   var initHideCard = (0, _react.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        var hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
+      return hideCard();
     }, delay);
-  }, [delay, isOpen, analytics.ui]);
+  }, [hideCard]);
   var initShowCard = (0, _react.useCallback)(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -98,24 +104,33 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     appearance: _utils.HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler: analyticsHandler
   });
-  var onClose = (0, _react.useCallback)(function () {
-    return setIsOpen(false);
+  var onActionClick = (0, _react.useCallback)(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
   }, []);
   return (0, _core.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: function content(_ref2) {
       var update = _ref2.update;
       return (0, _core.jsx)("div", {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        css: _styled.HoverCardContainer
+        className: hoverCardClassName,
+        css: _styled.HoverCardContainer,
+        onClick: onClick
       }, (0, _core.jsx)(_hoverCardContent.default, {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
+        onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
         url: url

package/dist/cjs/view/common/Modal.js

@@ -72,7 +72,8 @@ var Modal = function Modal(_ref) {
   var onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       src = _ref.src,
-      testId = _ref.testId,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
       showModal = _ref.showModal,
       providerName = _ref.providerName,
       metadata = _ref.metadata,

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/components/Provider.js

@@ -23,11 +23,12 @@ export const Provider = ({
   return jsx("div", {
     css: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      fontSize: gs(1.5),
+      whiteSpace: 'normal'
     }
   }, iconToRender, jsx("span", {
     css: {
-      fontSize: gs(1.5),
       color: token('color.text.subtlest', N300),
       margin: 0,
       marginLeft: gs(0.5),

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -47,10 +48,13 @@ const ActionGroup = ({
 }) => {
   const isMoreThenTwoItems = items.length > visibleButtonsNum;
   const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: ({
       isOpen

package/dist/es2019/view/HoverCard/components/hover-card-content.js

@@ -18,7 +18,7 @@ const flexibleUiOptions = {
   hidePadding: true
 };
 
-const getOpenAction = (url, analytics) => ({
+const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
     label: "open in new tab",
@@ -26,16 +26,26 @@ const getOpenAction = (url, analytics) => ({
   }),
   iconPosition: 'before',
   onClick: () => {
+    if (onActionClick) {
+      onActionClick('open-content');
+    }
+
     window.open(url, '_blank');
     analytics.ui.hoverCardOpenLinkClickedEvent('card');
   },
   testId: 'hover-card-open-button'
 });
 
-const toFooterActions = cardActions => cardActions.map(action => ({
+const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
   content: action.text,
   name: ActionName.CustomAction,
-  onClick: () => action.invoke(),
+  onClick: () => {
+    if (onActionClick) {
+      onActionClick(action.id);
+    }
+
+    return action.invoke();
+  },
   testId: action.id
 }));
 
@@ -43,6 +53,7 @@ const HoverCardContent = ({
   analytics,
   cardActions = [],
   cardState,
+  onActionClick,
   onResolve,
   renderers,
   url
@@ -59,8 +70,8 @@ const HoverCardContent = ({
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
-  const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
-  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]);
+  const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
+  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

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

@@ -13,6 +13,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
 import { useSmartLinkRenderers } from '../../state/renderers';
 import HoverCardContent from './components/hover-card-content';
 import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
+export const hoverCardClassName = 'smart-links-hover-preview';
 export const HoverCardComponent = ({
   children,
   id,
@@ -30,21 +31,22 @@ export const HoverCardComponent = ({
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
+  const hideCard = useCallback(() => {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      const hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
-    fadeOutTimeoutId.current = setTimeout(() => {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        const hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
-    }, delay);
-  }, [delay, isOpen, analytics.ui]);
+    fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
+  }, [hideCard]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -65,22 +67,31 @@ export const HoverCardComponent = ({
     appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler
   });
-  const onClose = useCallback(() => setIsOpen(false), []);
+  const onActionClick = useCallback(actionId => {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: ({
       update
     }) => jsx("div", {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      css: HoverCardContainer
+      className: hoverCardClassName,
+      css: HoverCardContainer,
+      onClick: onClick
     }, jsx(HoverCardContent, {
       analytics: analytics,
       cardActions: linkActions,
       cardState: linkState,
+      onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
       url: url

package/dist/es2019/view/common/Modal.js

@@ -40,7 +40,7 @@ const Modal = ({
   onClose,
   onOpen,
   src,
-  testId,
+  testId = 'smart-links-preview-modal',
   showModal,
   providerName,
   metadata,

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/components/Provider.js

@@ -22,11 +22,12 @@ export var Provider = function Provider(_ref) {
   return jsx("div", {
     css: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      fontSize: gs(1.5),
+      whiteSpace: 'normal'
     }
   }, iconToRender, jsx("span", {
     css: {
-      fontSize: gs(1.5),
       color: token('color.text.subtlest', N300),
       margin: 0,
       marginLeft: gs(0.5),

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -6,6 +6,7 @@ var _excluded = ["triggerRef"];
 var _templateObject;
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -39,10 +40,15 @@ var ActionGroup = function ActionGroup(_ref) {
       testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var onClick = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
   return jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    onClick: onClick
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;

package/dist/esm/view/HoverCard/components/hover-card-content.js

@@ -18,7 +18,7 @@ var flexibleUiOptions = {
   hidePadding: true
 };
 
-var getOpenAction = function getOpenAction(url, analytics) {
+var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
     icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -27,6 +27,10 @@ var getOpenAction = function getOpenAction(url, analytics) {
     }),
     iconPosition: 'before',
     onClick: function onClick() {
+      if (onActionClick) {
+        onActionClick('open-content');
+      }
+
       window.open(url, '_blank');
       analytics.ui.hoverCardOpenLinkClickedEvent('card');
     },
@@ -34,12 +38,16 @@ var getOpenAction = function getOpenAction(url, analytics) {
   };
 };
 
-var toFooterActions = function toFooterActions(cardActions) {
+var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
       name: ActionName.CustomAction,
       onClick: function onClick() {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+
         return action.invoke();
       },
       testId: action.id
@@ -54,6 +62,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       _ref$cardActions = _ref.cardActions,
       cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
       cardState = _ref.cardState,
+      onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
@@ -70,11 +79,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
     analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = useMemo(function () {
-    return [getOpenAction(url, analytics)];
-  }, [url, analytics]);
+    return [getOpenAction(url, analytics, onActionClick)];
+  }, [url, analytics, onActionClick]);
   var footerActions = useMemo(function () {
-    return toFooterActions(cardActions);
-  }, [cardActions]);
+    return toFooterActions(cardActions, onActionClick);
+  }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 

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

@@ -14,6 +14,7 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
 import { useSmartLinkRenderers } from '../../state/renderers';
 import HoverCardContent from './components/hover-card-content';
 import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
+export var hoverCardClassName = 'smart-links-hover-preview';
 export var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       id = _ref.id,
@@ -35,21 +36,24 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
+  var hideCard = useCallback(function () {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      var hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
 
     fadeOutTimeoutId.current = setTimeout(function () {
-      //Check its previously open to avoid firing events when moving between the child and hover card components
-      if (isOpen === true && cardOpenTime.current) {
-        var hoverTime = Date.now() - cardOpenTime.current;
-        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-      }
-
-      setIsOpen(false);
+      return hideCard();
     }, delay);
-  }, [delay, isOpen, analytics.ui]);
+  }, [hideCard]);
   var initShowCard = useCallback(function () {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -70,24 +74,33 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler: analyticsHandler
   });
-  var onClose = useCallback(function () {
-    return setIsOpen(false);
+  var onActionClick = useCallback(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = useCallback(function (e) {
+    return e.stopPropagation();
   }, []);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
-    onClose: onClose,
+    onClose: hideCard,
     placement: "bottom-start",
     content: function content(_ref2) {
       var update = _ref2.update;
       return jsx("div", {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        css: HoverCardContainer
+        className: hoverCardClassName,
+        css: HoverCardContainer,
+        onClick: onClick
       }, jsx(HoverCardContent, {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
+        onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
         url: url

package/dist/esm/view/common/Modal.js

@@ -66,7 +66,8 @@ var Modal = function Modal(_ref) {
   var onClose = _ref.onClose,
       onOpen = _ref.onOpen,
       src = _ref.src,
-      testId = _ref.testId,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
       showModal = _ref.showModal,
       providerName = _ref.providerName,
       metadata = _ref.metadata,

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

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
 import { HoverCardProps } from './types';
+export declare const hoverCardClassName = "smart-links-hover-preview";
 export declare const HoverCardComponent: FC<HoverCardProps>;
 export declare const HoverCard: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "id" | "analyticsContext" | "key" | "url"> & React.RefAttributes<any>>;

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

@@ -20,6 +20,7 @@ export declare type HoverCardContentProps = {
     cardActions?: LinkAction[];
     cardState: CardState;
     renderers?: CardProviderRenderers;
+    onActionClick: (actionId: string) => void;
     onResolve: () => void;
     url: string;
 };