@atlaskit/smart-card 26.26.0 → 26.26.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.26.2
+
+### Patch Changes
+
+- [`da7fcd582e2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da7fcd582e2) - Fixed embed modal go to url and download button inconsitent behaviour when triggered from hover preview and block card
+
+## 26.26.1
+
+### Patch Changes
+
+- [`2cd7af71b63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cd7af71b63) - Bump json-ld-types 3.8.0 -> 3.9.1
+
 ## 26.26.0
 
 ### Minor Changes

package/dist/cjs/extractors/common/actions/extractPreviewAction.js

@@ -75,14 +75,9 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
     var key = extensionKey;
     var previewAction = (0, _BlockCard.PreviewAction)(_objectSpread(_objectSpread({}, metadata), {}, {
       analytics: analytics,
+      extensionKey: extensionKey,
       origin: origin,
       testId: testId,
-      onDownloadActionClick: function onDownloadActionClick() {
-        handleInvoke(getInvokeOpts(key, 'DownloadAction'));
-      },
-      onViewActionClick: function onViewActionClick() {
-        handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      },
       isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)
     }));
     // Setup props to go through proper Redux 'invocation' flow

package/dist/cjs/utils/analytics/analytics.js

@@ -23,7 +23,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0"
+  packageVersion: "26.26.2"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -25,47 +25,41 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 
 var LinkInfo = function LinkInfo(_ref) {
-  var downloadUrl = _ref.downloadUrl,
-    icon = _ref.icon,
+  var icon = _ref.icon,
     providerName = _ref.providerName,
     onDownloadButtonClick = _ref.onDownloadButtonClick,
     onResizeButtonClick = _ref.onResizeButtonClick,
     onViewButtonClick = _ref.onViewButtonClick,
     size = _ref.size,
     testId = _ref.testId,
-    title = _ref.title,
-    url = _ref.url;
+    title = _ref.title;
   var _useModal = (0, _modalDialog.useModal)(),
     onClose = _useModal.onClose;
   var downloadButton = (0, _react2.useMemo)(function () {
-    if (downloadUrl) {
+    if (onDownloadButtonClick) {
       return (0, _react.jsx)(_linkInfoButton.default, {
         content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
-        href: downloadUrl,
         icon: (0, _react.jsx)(_download.default, {
           label: _messages.messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
-        testId: "".concat(testId, "-download"),
-        target: "_blank"
+        testId: "".concat(testId, "-download")
       });
     }
-  }, [downloadUrl, onDownloadButtonClick, testId]);
+  }, [onDownloadButtonClick, testId]);
   var urlButton = (0, _react2.useMemo)(function () {
-    if (url) {
+    if (onViewButtonClick) {
       var content = providerName ? (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
       return (0, _react.jsx)(_linkInfoButton.default, {
         content: content,
-        href: url,
         icon: (0, _react.jsx)(_shortcut.default, {
           label: _messages.messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
-        target: "_blank",
         testId: "".concat(testId, "-url")
       });
     }
-  }, [onViewButtonClick, providerName, testId, url]);
+  }, [onViewButtonClick, providerName, testId]);
   var sizeButton = (0, _react2.useMemo)(function () {
     var isFullScreen = size === _constants.MAX_MODAL_SIZE;
     var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;

package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -20,7 +20,6 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: content,
     hideTooltipOnClick: true,
-    position: "top",
     tag: "span",
     testId: "".concat(testId, "-tooltip")
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
@@ -16,6 +18,9 @@ var _types = require("./types");
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
 var _analytics = _interopRequireDefault(require("./components/analytics"));
 var _tokens = require("@atlaskit/tokens");
+var _useInvokeClientAction = _interopRequireDefault(require("../../state/hooks/use-invoke-client-action"));
+var _constants2 = require("../../constants");
+var _utils = require("../../utils");
 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; }
 var toSize = function toSize(width) {
@@ -25,16 +30,17 @@ var toWidth = function toWidth(size) {
   return size === _types.EmbedModalSize.Large ? _constants.MAX_MODAL_SIZE : _constants.MIN_MODAL_SIZE;
 };
 var EmbedModal = function EmbedModal(_ref) {
-  var downloadUrl = _ref.download,
+  var analytics = _ref.analytics,
+    download = _ref.download,
+    extensionKey = _ref.extensionKey,
     icon = _ref.icon,
     iframeName = _ref.iframeName,
+    isSupportTheming = _ref.isSupportTheming,
     _ref$isTrusted = _ref.isTrusted,
     isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
     onClose = _ref.onClose,
-    onDownloadActionClick = _ref.onDownloadActionClick,
     onOpen = _ref.onOpen,
     onResize = _ref.onResize,
-    onViewActionClick = _ref.onViewActionClick,
     providerName = _ref.providerName,
     showModal = _ref.showModal,
     _ref$size = _ref.size,
@@ -43,8 +49,7 @@ var EmbedModal = function EmbedModal(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
     title = _ref.title,
-    url = _ref.url,
-    isSupportTheming = _ref.isSupportTheming;
+    url = _ref.url;
   var defaultWidth = toWidth(size);
   var _useState = (0, _react.useState)(showModal),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -55,6 +60,9 @@ var EmbedModal = function EmbedModal(_ref) {
     width = _useState4[0],
     setWidth = _useState4[1];
   var openAt = (0, _react.useRef)();
+  var invoke = (0, _useInvokeClientAction.default)({
+    analytics: analytics
+  });
   var handleOnOpenComplete = (0, _react.useCallback)(function () {
     openAt.current = Date.now();
     if (onOpen) {
@@ -87,6 +95,54 @@ var EmbedModal = function EmbedModal(_ref) {
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
   var previewUrl = src;
+  var handleOnViewActionClick = (0, _react.useCallback)(function () {
+    invoke({
+      actionType: _constants2.ActionName.ViewAction,
+      actionFn: function () {
+        var _actionFn = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", (0, _utils.openUrl)(url));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function actionFn() {
+          return _actionFn.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      display: _constants2.CardDisplay.EmbedPreview,
+      extensionKey: extensionKey
+    });
+  }, [extensionKey, invoke, url]);
+  var handleOnDownloadActionClick = (0, _react.useCallback)(function () {
+    invoke({
+      actionType: _constants2.ActionName.DownloadAction,
+      actionFn: function () {
+        var _actionFn2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                return _context2.abrupt("return", (0, _utils.downloadUrl)(download));
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function actionFn() {
+          return _actionFn2.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      display: _constants2.CardDisplay.EmbedPreview,
+      extensionKey: extensionKey
+    });
+  }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
     previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
   }
@@ -98,16 +154,14 @@ var EmbedModal = function EmbedModal(_ref) {
     testId: testId,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
-    downloadUrl: downloadUrl,
     icon: icon,
     providerName: providerName,
-    onViewButtonClick: onViewActionClick,
-    onDownloadButtonClick: onDownloadActionClick,
+    onViewButtonClick: url ? handleOnViewActionClick : undefined,
+    onDownloadButtonClick: download ? handleOnDownloadActionClick : undefined,
     onResizeButtonClick: handleOnResizeClick,
     size: width,
     title: title,
-    testId: testId,
-    url: url
+    testId: testId
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_embedContent.default, {
     isTrusted: isTrusted,
     name: iframeName,

package/dist/cjs/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -43,6 +43,7 @@ var PreviewAction = function PreviewAction(props) {
             case 0:
               return _context.abrupt("return", (0, _utils.openEmbedModalWithFlexibleUiIcon)({
                 download: downloadUrl,
+                extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
                 title: title,
                 providerName: providerName,
                 isSupportTheming: isSupportTheming,

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0",
+  packageVersion: "26.26.2",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -62,14 +62,9 @@ export const extractPreviewAction = ({
     const previewAction = PreviewAction({
       ...metadata,
       analytics,
+      extensionKey,
       origin,
       testId,
-      onDownloadActionClick: () => {
-        handleInvoke(getInvokeOpts(key, 'DownloadAction'));
-      },
-      onViewActionClick: () => {
-        handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      },
       isSupportTheming: extractIsSupportTheming(meta)
     });
     // Setup props to go through proper Redux 'invocation' flow

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0"
+  packageVersion: "26.26.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -14,7 +14,6 @@ import { MAX_MODAL_SIZE } from '../../constants';
 import LinkInfoButton from './link-info-button';
 import { actionCss, containerStyles, iconCss, titleCss } from './styled';
 const LinkInfo = ({
-  downloadUrl,
   icon,
   providerName,
   onDownloadButtonClick,
@@ -22,41 +21,36 @@ const LinkInfo = ({
   onViewButtonClick,
   size,
   testId,
-  title,
-  url
+  title
 }) => {
   const {
     onClose
   } = useModal();
   const downloadButton = useMemo(() => {
-    if (downloadUrl) {
+    if (onDownloadButtonClick) {
       return jsx(LinkInfoButton, {
         content: jsx(FormattedMessage, messages.download),
-        href: downloadUrl,
         icon: jsx(DownloadIcon, {
           label: messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
-        testId: `${testId}-download`,
-        target: "_blank"
+        testId: `${testId}-download`
       });
     }
-  }, [downloadUrl, onDownloadButtonClick, testId]);
+  }, [onDownloadButtonClick, testId]);
   const urlButton = useMemo(() => {
-    if (url) {
+    if (onViewButtonClick) {
       const content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
       return jsx(LinkInfoButton, {
         content: content,
-        href: url,
         icon: jsx(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
-        target: "_blank",
         testId: `${testId}-url`
       });
     }
-  }, [onViewButtonClick, providerName, testId, url]);
+  }, [onViewButtonClick, providerName, testId]);
   const sizeButton = useMemo(() => {
     const isFullScreen = size === MAX_MODAL_SIZE;
     const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -14,7 +14,6 @@ const LinkInfoButton = ({
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     hideTooltipOnClick: true,
-    position: "top",
     tag: "span",
     testId: `${testId}-tooltip`
   }, /*#__PURE__*/React.createElement(Button, {

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

@@ -7,31 +7,37 @@ import { EmbedModalSize } from './types';
 import withErrorBoundary from './components/error-boundary';
 import withAnalytics from './components/analytics';
 import { useThemeObserver } from '@atlaskit/tokens';
+import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
+import { ActionName, CardDisplay } from '../../constants';
+import { downloadUrl, openUrl } from '../../utils';
 const toSize = width => width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
 const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
 const EmbedModal = ({
-  download: downloadUrl,
+  analytics,
+  download,
+  extensionKey,
   icon,
   iframeName,
+  isSupportTheming,
   isTrusted = false,
   onClose,
-  onDownloadActionClick,
   onOpen,
   onResize,
-  onViewActionClick,
   providerName,
   showModal,
   size = EmbedModalSize.Large,
   src,
   testId = 'smart-embed-preview-modal',
   title,
-  url,
-  isSupportTheming
+  url
 }) => {
   const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
   const [width, setWidth] = useState(defaultWidth);
   const openAt = useRef();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   const handleOnOpenComplete = useCallback(() => {
     openAt.current = Date.now();
     if (onOpen) {
@@ -63,6 +69,22 @@ const EmbedModal = ({
     colorMode
   } = useThemeObserver();
   let previewUrl = src;
+  const handleOnViewActionClick = useCallback(() => {
+    invoke({
+      actionType: ActionName.ViewAction,
+      actionFn: async () => openUrl(url),
+      display: CardDisplay.EmbedPreview,
+      extensionKey
+    });
+  }, [extensionKey, invoke, url]);
+  const handleOnDownloadActionClick = useCallback(() => {
+    invoke({
+      actionType: ActionName.DownloadAction,
+      actionFn: async () => downloadUrl(download),
+      display: CardDisplay.EmbedPreview,
+      extensionKey
+    });
+  }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
     previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
   }
@@ -74,16 +96,14 @@ const EmbedModal = ({
     testId: testId,
     width: width
   }, /*#__PURE__*/React.createElement(LinkInfo, {
-    downloadUrl: downloadUrl,
     icon: icon,
     providerName: providerName,
-    onViewButtonClick: onViewActionClick,
-    onDownloadButtonClick: onDownloadActionClick,
+    onViewButtonClick: url ? handleOnViewActionClick : undefined,
+    onDownloadButtonClick: download ? handleOnDownloadActionClick : undefined,
     onResizeButtonClick: handleOnResizeClick,
     size: width,
     title: title,
-    testId: testId,
-    url: url
+    testId: testId
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -28,6 +28,7 @@ const PreviewAction = props => {
   if (src && url) {
     const actionFn = async () => openEmbedModalWithFlexibleUiIcon({
       download: downloadUrl,
+      extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
       title,
       providerName,
       isSupportTheming,

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0",
+  packageVersion: "26.26.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -68,14 +68,9 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
     var key = extensionKey;
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
       analytics: analytics,
+      extensionKey: extensionKey,
       origin: origin,
       testId: testId,
-      onDownloadActionClick: function onDownloadActionClick() {
-        handleInvoke(getInvokeOpts(key, 'DownloadAction'));
-      },
-      onViewActionClick: function onViewActionClick() {
-        handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      },
       isSupportTheming: extractIsSupportTheming(meta)
     }));
     // Setup props to go through proper Redux 'invocation' flow

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0"
+  packageVersion: "26.26.2"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -14,47 +14,41 @@ import { MAX_MODAL_SIZE } from '../../constants';
 import LinkInfoButton from './link-info-button';
 import { actionCss, containerStyles, iconCss, titleCss } from './styled';
 var LinkInfo = function LinkInfo(_ref) {
-  var downloadUrl = _ref.downloadUrl,
-    icon = _ref.icon,
+  var icon = _ref.icon,
     providerName = _ref.providerName,
     onDownloadButtonClick = _ref.onDownloadButtonClick,
     onResizeButtonClick = _ref.onResizeButtonClick,
     onViewButtonClick = _ref.onViewButtonClick,
     size = _ref.size,
     testId = _ref.testId,
-    title = _ref.title,
-    url = _ref.url;
+    title = _ref.title;
   var _useModal = useModal(),
     onClose = _useModal.onClose;
   var downloadButton = useMemo(function () {
-    if (downloadUrl) {
+    if (onDownloadButtonClick) {
       return jsx(LinkInfoButton, {
         content: jsx(FormattedMessage, messages.download),
-        href: downloadUrl,
         icon: jsx(DownloadIcon, {
           label: messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
-        testId: "".concat(testId, "-download"),
-        target: "_blank"
+        testId: "".concat(testId, "-download")
       });
     }
-  }, [downloadUrl, onDownloadButtonClick, testId]);
+  }, [onDownloadButtonClick, testId]);
   var urlButton = useMemo(function () {
-    if (url) {
+    if (onViewButtonClick) {
       var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
       return jsx(LinkInfoButton, {
         content: content,
-        href: url,
         icon: jsx(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
-        target: "_blank",
         testId: "".concat(testId, "-url")
       });
     }
-  }, [onViewButtonClick, providerName, testId, url]);
+  }, [onViewButtonClick, providerName, testId]);
   var sizeButton = useMemo(function () {
     var isFullScreen = size === MAX_MODAL_SIZE;
     var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -13,7 +13,6 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     hideTooltipOnClick: true,
-    position: "top",
     tag: "span",
     testId: "".concat(testId, "-tooltip")
   }, /*#__PURE__*/React.createElement(Button, {

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

@@ -1,4 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
 import LinkInfo from './components/link-info';
@@ -8,6 +10,9 @@ import { EmbedModalSize } from './types';
 import withErrorBoundary from './components/error-boundary';
 import withAnalytics from './components/analytics';
 import { useThemeObserver } from '@atlaskit/tokens';
+import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
+import { ActionName, CardDisplay } from '../../constants';
+import { downloadUrl, openUrl } from '../../utils';
 var toSize = function toSize(width) {
   return width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
 };
@@ -15,16 +20,17 @@ var toWidth = function toWidth(size) {
   return size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
 };
 var EmbedModal = function EmbedModal(_ref) {
-  var downloadUrl = _ref.download,
+  var analytics = _ref.analytics,
+    download = _ref.download,
+    extensionKey = _ref.extensionKey,
     icon = _ref.icon,
     iframeName = _ref.iframeName,
+    isSupportTheming = _ref.isSupportTheming,
     _ref$isTrusted = _ref.isTrusted,
     isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
     onClose = _ref.onClose,
-    onDownloadActionClick = _ref.onDownloadActionClick,
     onOpen = _ref.onOpen,
     onResize = _ref.onResize,
-    onViewActionClick = _ref.onViewActionClick,
     providerName = _ref.providerName,
     showModal = _ref.showModal,
     _ref$size = _ref.size,
@@ -33,8 +39,7 @@ var EmbedModal = function EmbedModal(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
     title = _ref.title,
-    url = _ref.url,
-    isSupportTheming = _ref.isSupportTheming;
+    url = _ref.url;
   var defaultWidth = toWidth(size);
   var _useState = useState(showModal),
     _useState2 = _slicedToArray(_useState, 2),
@@ -45,6 +50,9 @@ var EmbedModal = function EmbedModal(_ref) {
     width = _useState4[0],
     setWidth = _useState4[1];
   var openAt = useRef();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
   var handleOnOpenComplete = useCallback(function () {
     openAt.current = Date.now();
     if (onOpen) {
@@ -77,6 +85,54 @@ var EmbedModal = function EmbedModal(_ref) {
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
   var previewUrl = src;
+  var handleOnViewActionClick = useCallback(function () {
+    invoke({
+      actionType: ActionName.ViewAction,
+      actionFn: function () {
+        var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", openUrl(url));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function actionFn() {
+          return _actionFn.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      display: CardDisplay.EmbedPreview,
+      extensionKey: extensionKey
+    });
+  }, [extensionKey, invoke, url]);
+  var handleOnDownloadActionClick = useCallback(function () {
+    invoke({
+      actionType: ActionName.DownloadAction,
+      actionFn: function () {
+        var _actionFn2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                return _context2.abrupt("return", downloadUrl(download));
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function actionFn() {
+          return _actionFn2.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      display: CardDisplay.EmbedPreview,
+      extensionKey: extensionKey
+    });
+  }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
     previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
   }
@@ -88,16 +144,14 @@ var EmbedModal = function EmbedModal(_ref) {
     testId: testId,
     width: width
   }, /*#__PURE__*/React.createElement(LinkInfo, {
-    downloadUrl: downloadUrl,
     icon: icon,
     providerName: providerName,
-    onViewButtonClick: onViewActionClick,
-    onDownloadButtonClick: onDownloadActionClick,
+    onViewButtonClick: url ? handleOnViewActionClick : undefined,
+    onDownloadButtonClick: download ? handleOnDownloadActionClick : undefined,
     onResizeButtonClick: handleOnResizeClick,
     size: width,
     title: title,
-    testId: testId,
-    url: url
+    testId: testId
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -36,6 +36,7 @@ var PreviewAction = function PreviewAction(props) {
             case 0:
               return _context.abrupt("return", openEmbedModalWithFlexibleUiIcon({
                 download: downloadUrl,
+                extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
                 title: title,
                 providerName: providerName,
                 isSupportTheming: isSupportTheming,

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.0",
+  packageVersion: "26.26.2",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/BlockCard/actions/PreviewAction.d.ts

@@ -21,6 +21,7 @@ type PreviewInfo = {
     analytics: AnalyticsFacade;
     origin?: AnalyticsOrigin;
     isSupportTheming?: boolean;
+    extensionKey?: string;
 };
 declare const _default: ({ details, ...rest }: PreviewInfo) => ActionProps;
 export default _default;

package/dist/types/view/EmbedModal/components/analytics/types.d.ts

@@ -2,5 +2,6 @@ import { AnalyticsFacade } from '../../../../state/analytics';
 import { AnalyticsOrigin } from '../../../../utils/types';
 export type WithAnalytics = {
     analytics?: AnalyticsFacade;
+    extensionKey?: string;
     origin?: AnalyticsOrigin;
 };

package/dist/types/view/EmbedModal/components/link-info/types.d.ts

@@ -1,6 +1,5 @@
 import { IconProps } from '../../../common/Icon';
 export type LinkInfoProps = {
-    downloadUrl?: string;
     icon?: IconProps;
     providerName?: string;
     onDownloadButtonClick?: () => void;
@@ -9,5 +8,4 @@ export type LinkInfoProps = {
     size?: string;
     testId?: string;
     title?: string;
-    url?: string;
 };

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

@@ -7,11 +7,9 @@ declare const _default: React.FC<{
     isTrusted?: boolean | undefined;
     isSupportTheming?: boolean | undefined;
     onClose: (context: import("./types").EmbedModalContext) => void;
-    onDownloadActionClick?: (() => void) | undefined;
     onOpen?: ((context: import("./types").EmbedModalContext) => void) | undefined;
     onOpenFailed?: ((error: Error, errorInfo: React.ErrorInfo) => void) | undefined;
     onResize?: ((context: import("./types").EmbedModalContext) => void) | undefined;
-    onViewActionClick?: (() => void) | undefined;
     providerName?: string | undefined;
     showModal?: boolean | undefined;
     size?: EmbedModalSize | undefined;

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

@@ -16,11 +16,9 @@ export type EmbedModalProps = {
     isTrusted?: boolean;
     isSupportTheming?: boolean;
     onClose: (context: EmbedModalContext) => void;
-    onDownloadActionClick?: () => void;
     onOpen?: (context: EmbedModalContext) => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
     onResize?: (context: EmbedModalContext) => void;
-    onViewActionClick?: () => void;
     providerName?: string;
     showModal?: boolean;
     size?: EmbedModalSize;

package/dist/types-ts4.5/view/BlockCard/actions/PreviewAction.d.ts

@@ -21,6 +21,7 @@ type PreviewInfo = {
     analytics: AnalyticsFacade;
     origin?: AnalyticsOrigin;
     isSupportTheming?: boolean;
+    extensionKey?: string;
 };
 declare const _default: ({ details, ...rest }: PreviewInfo) => ActionProps;
 export default _default;

package/dist/types-ts4.5/view/EmbedModal/components/analytics/types.d.ts

@@ -2,5 +2,6 @@ import { AnalyticsFacade } from '../../../../state/analytics';
 import { AnalyticsOrigin } from '../../../../utils/types';
 export type WithAnalytics = {
     analytics?: AnalyticsFacade;
+    extensionKey?: string;
     origin?: AnalyticsOrigin;
 };

package/dist/types-ts4.5/view/EmbedModal/components/link-info/types.d.ts

@@ -1,6 +1,5 @@
 import { IconProps } from '../../../common/Icon';
 export type LinkInfoProps = {
-    downloadUrl?: string;
     icon?: IconProps;
     providerName?: string;
     onDownloadButtonClick?: () => void;
@@ -9,5 +8,4 @@ export type LinkInfoProps = {
     size?: string;
     testId?: string;
     title?: string;
-    url?: string;
 };

package/dist/types-ts4.5/view/EmbedModal/index.d.ts

@@ -7,11 +7,9 @@ declare const _default: React.FC<{
     isTrusted?: boolean | undefined;
     isSupportTheming?: boolean | undefined;
     onClose: (context: import("./types").EmbedModalContext) => void;
-    onDownloadActionClick?: (() => void) | undefined;
     onOpen?: ((context: import("./types").EmbedModalContext) => void) | undefined;
     onOpenFailed?: ((error: Error, errorInfo: React.ErrorInfo) => void) | undefined;
     onResize?: ((context: import("./types").EmbedModalContext) => void) | undefined;
-    onViewActionClick?: (() => void) | undefined;
     providerName?: string | undefined;
     showModal?: boolean | undefined;
     size?: EmbedModalSize | undefined;

package/dist/types-ts4.5/view/EmbedModal/types.d.ts

@@ -16,11 +16,9 @@ export type EmbedModalProps = {
     isTrusted?: boolean;
     isSupportTheming?: boolean;
     onClose: (context: EmbedModalContext) => void;
-    onDownloadActionClick?: () => void;
     onOpen?: (context: EmbedModalContext) => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
     onResize?: (context: EmbedModalContext) => void;
-    onViewActionClick?: () => void;
     providerName?: string;
     showModal?: boolean;
     size?: EmbedModalSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.26.0",
+  "version": "26.26.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,10 +35,10 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-analytics": "^8.2.0",
-    "@atlaskit/link-client-extension": "^1.6.0",
+    "@atlaskit/link-analytics": "^8.3.0",
+    "@atlaskit/link-client-extension": "^1.7.0",
     "@atlaskit/link-extractors": "^1.1.0",
-    "@atlaskit/linking-common": "^4.8.0",
+    "@atlaskit/linking-common": "^4.9.0",
     "@atlaskit/linking-types": "^8.3.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -56,7 +56,7 @@
     "@emotion/styled": "^11.0.0",
     "@formatjs/intl-utils": "^3.8.4",
     "facepaint": "^1.2.1",
-    "json-ld-types": "3.8.0",
+    "json-ld-types": "3.9.1",
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",