@atlaskit/smart-card 19.1.16 → 19.1.17

package/dist/es2019/i18n/zh_TW.js

@@ -6,152 +6,66 @@
  */
 //Chinese (Traditional)
 export default {
-  'fabric.linking.cannot_connect': '無法連結，請再試一次',
-  'fabric.linking.cannot_find_link': '找不到連結',
-  'fabric.linking.join_to_view': '加入 {context} 以查看此議題',
-  'fabric.linking.create_on': '建立時間：{context}',
-  'fabric.linking.created_by': '建立者：{context}',
-  'fabric.linking.delete': '刪除',
-  'fabric.linking.edit': '編輯',
-  'fabric.linking.forbidden_access': '您的存取遭拒',
-  'fabric.linking.restricted_link': '連結受到限制，請嘗試其他帳戶',
-  'fabric.linking.modified_on': '更新時間：{context}',
-  'fabric.linking.pending_request': '您的存取要求擱置中',
-  'fabric.linking.priority_blocker': '封鎖程式',
-  'fabric.linking.priority_critical': '重要',
-  'fabric.linking.priority_high': '高',
-  'fabric.linking.priority_highest': '最高',
-  'fabric.linking.priority_low': '低',
-  'fabric.linking.priority_lowest': '最低',
-  'fabric.linking.priority_major': '主要',
-  'fabric.linking.priority_medium': '中',
-  'fabric.linking.priority_minor': '次要',
-  'fabric.linking.priority_trivial': '不太重要',
-  'fabric.linking.priority_undefined': '未定義',
-  'fabric.linking.request_access_to_view': '要求存取 {context} 以檢視此議題',
-  'fabric.linking.request_denied': '您的存取要求遭拒',
-  'fabric.linking.updated_by': '修改者：{context}',
-  'fabric.linking.accounts': '帳戶',
   'fabric.linking.actions': '動作',
   'fabric.linking.add_account': '新增帳戶',
-  'fabric.linking.annotate': '加上註解',
-  'fabric.linking.annotate.confirmation.close.anyway': '仍要關閉',
-  'fabric.linking.annotate.confirmation.content': '您有一些未儲存的變更，確定要離開嗎？',
-  'fabric.linking.annotate.confirmation.heading': '未儲存的變更',
-  'fabric.linking.annotate.tool.arrow': '箭頭',
-  'fabric.linking.annotate.tool.blur': '模糊',
-  'fabric.linking.annotate.tool.brush': '筆刷',
-  'fabric.linking.annotate.tool.color': '顏色',
-  'fabric.linking.annotate.tool.line.thickness': '線條粗細',
-  'fabric.linking.annotate.tool.shape': '形狀',
-  'fabric.linking.annotate.tool.text': '文字',
-  'fabric.linking.archive': '封存',
-  'fabric.linking.audio': '音訊',
   'fabric.linking.cancel': '取消',
-  'fabric.linking.cant_preview_file_type': '我們無法預覽此檔案類型。',
-  'fabric.linking.cant_retrieve_files': '唉呦！我們無法擷取任何檔案',
-  'fabric.linking.cant_retrieve_gifs': '唉呦！我們無法擷取任何 GIF',
-  'fabric.linking.change_view': '變更檢視畫面',
-  'fabric.linking.check_your_network': '請檢查您的網路連線',
+  'fabric.linking.cannot_connect': '無法連結，請再試一次',
+  'fabric.linking.cannot_find_link': '找不到連結',
   'fabric.linking.click_to_join': '加入 {context}',
   'fabric.linking.click_to_join_description': '您已獲得核准，因此可以立即加入 {context}。',
   'fabric.linking.close': '關閉',
-  'fabric.linking.close_and_reopen': '請試著關閉此檔案，然後再重新開啟。',
   'fabric.linking.connect_account_description': '我們會開啟新的頁面來協助您連結 {name} 帳戶',
   'fabric.linking.connect_link_account': '連線以預覽',
   'fabric.linking.connect_link_account_card_view': '連結',
   'fabric.linking.connect_link_account_card_view_description': '若要顯示此連結的預覽，請連接您的 {context} 帳戶。',
   'fabric.linking.connect_link_account_card_view_name': '連結 {context} 帳戶',
   'fabric.linking.connect_to': '連結至 {name}',
-  'fabric.linking.could_not_load_editor': '唉呦！我們無法載入編輯器',
-  'fabric.linking.could_not_save_image': '唉呦！我們無法儲存影像',
-  'fabric.linking.couldnt_generate_encrypted_entry_preview': '我們無法預覽加密或以密碼保護的檔案。',
-  'fabric.linking.couldnt_generate_preview': '我們無法為此檔案產生預覽。',
-  'fabric.linking.couldnt_load_file': '我們無法載入檔案。',
   'fabric.linking.couldnt_load_link': '基於不明原因，我們無法載入此連結。',
-  'fabric.linking.creating_preview': '正在建立預覽...',
-  'fabric.linking.default_avatars': '預設顯示圖片',
-  'fabric.linking.disable_fullscreen': '停用全螢幕',
-  'fabric.linking.display_thumbnail': '顯示縮圖',
-  'fabric.linking.document': '文件',
+  'fabric.linking.create_on_absolute': '於 {context} 建立',
+  'fabric.linking.create_on_relative': '建立時間：{context}',
+  'fabric.linking.created_by': '建立者：{context}',
+  'fabric.linking.delete': '刪除',
   'fabric.linking.download': '下載',
-  'fabric.linking.drag_and_drop_images_here': '將影像拖曳至此',
-  'fabric.linking.drag_and_drop_your_files': '將檔案拖曳至任何位置或',
-  'fabric.linking.drag_and_drop_your_files_and_folders': '將檔案和資料夾拖曳至任何位置或',
-  'fabric.linking.drop_your_files': '置放要上傳的檔案',
-  'fabric.linking.drop_your_files_here': '將檔案置放在此',
-  'fabric.linking.email': '電子郵件',
-  'fabric.linking.enable_fullscreen': '啟用全螢幕',
-  'fabric.linking.error_429': '錯誤 429',
-  'fabric.linking.error_generating_preview': '產生預覽時發生錯誤',
-  'fabric.linking.error_hint_critical': '如果問題持續發生，請聯絡支援人員。',
-  'fabric.linking.error_hint_retry': '請再試一次。',
-  'fabric.linking.error_loading_file': '載入檔案時發生錯誤',
-  'fabric.linking.failed_to_load': '無法載入',
-  'fabric.linking.failed_to_upload': '無法上傳',
+  'fabric.linking.edit': '編輯',
+  'fabric.linking.forbidden_access': '您的存取遭拒',
   'fabric.linking.forbidden_description': '您沒有此預覽的存取權。如果您需要存取權，請連絡網站管理員。',
-  'fabric.linking.give_feedback': '提供意見反應',
-  'fabric.linking.image': '影像',
-  'fabric.linking.image_format_invalid_error': '無法載入影像，格式無效。',
-  'fabric.linking.image_size_too_large_error': '影像太大，不得大於 {MAX_SIZE_MB}Mb',
-  'fabric.linking.image_url_invalid_error': '無法載入影像，URL 無效。',
-  'fabric.linking.insert_files': '{0, plural, other {插入 {0} 個檔案}}',
   'fabric.linking.invalid_permissions': '限制連結',
   'fabric.linking.invalid_permissions_description': '您需要請求存取或嘗試不同的帳戶，來檢視此預覽。',
-  'fabric.linking.item_not_found_in_list': '在清單上找不到所選的項目。',
-  'fabric.linking.learn_more': '深入了解',
-  'fabric.linking.load_more_gifs': '載入更多 GIF',
+  'fabric.linking.join_to_view': '加入 {context} 以查看此議題',
   'fabric.linking.loading': '正在載入...',
-  'fabric.linking.loading_file': '正在載入檔案...',
-  'fabric.linking.might_be_a_hiccup': '可能只是出了點小問題。',
-  'fabric.linking.no_gifs_found': '嗨！您找我嗎？',
-  'fabric.linking.no_gifs_found_suggestion': '我們找不到符合「{query}」的項目',
-  'fabric.linking.no_pdf_artifacts': '找不到符合此檔案的 PDF 成品。',
+  'fabric.linking.modified_on_absolute': '更新於 {context}',
+  'fabric.linking.modified_on_relative': '更新時間：{context}',
+  'fabric.linking.more_actions': '更多動作',
   'fabric.linking.not_found_description': '我們找不到此連結。請檢查 URL，然後試著編輯或再次貼上。',
   'fabric.linking.not_found_title': '糟糕，我們找不到此連結！',
-  'fabric.linking.or': '或',
-  'fabric.linking.pause': '暫停',
-  'fabric.linking.play': '播放',
-  'fabric.linking.playback_default_speed': '預設',
-  'fabric.linking.playback_speed': '播放速度',
+  'fabric.linking.pending_request': '您的存取要求擱置中',
   'fabric.linking.preview': '預覽',
-  'fabric.linking.preview_currently_unavailable': '目前無法預覽',
-  'fabric.linking.preview_unavailable': '無法建立預覽',
-  'fabric.linking.recent_uploads': '最近上傳的項目',
-  'fabric.linking.remove_image': '移除影像',
+  'fabric.linking.priority_blocker': '受阻',
+  'fabric.linking.priority_critical': '嚴重',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '主要',
+  'fabric.linking.priority_medium': '中',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '不太重要',
+  'fabric.linking.priority_undefined': '未定義',
   'fabric.linking.request_access': '要求存取權',
   'fabric.linking.request_access_description': '要求 {context} 的存取權以檢視此預覽。',
   'fabric.linking.request_access_pending': '存取擱置',
   'fabric.linking.request_access_pending_description': '您的存取要求擱置中。',
+  'fabric.linking.request_access_to_view': '要求存取 {context} 以檢視此議題',
+  'fabric.linking.request_denied': '您的存取要求遭拒',
   'fabric.linking.request_denied_description': '您的存取要求遭到拒絕。如果您仍需要存取權，請連絡網站管理員。',
+  'fabric.linking.restricted_link': '連結受到限制，請嘗試其他帳戶',
   'fabric.linking.retry': '重試',
   'fabric.linking.save': '儲存',
-  'fabric.linking.search': '搜尋',
-  'fabric.linking.search_all_gifs': '搜尋所有 GIF！',
-  'fabric.linking.share_files_instantly': '我們會立即分享',
-  'fabric.linking.skip_backward': '倒退 10 秒',
-  'fabric.linking.skip_forward': '快轉 10 秒',
-  'fabric.linking.something_went_wrong': '發生錯誤。',
   'fabric.linking.srclink': '使用以下檢視：',
   'fabric.linking.srclinkunknown': '檢視原始狀態',
-  'fabric.linking.text': '文字',
   'fabric.linking.try_again': '再試一次',
   'fabric.linking.try_another_account': '使用其他帳戶嘗試',
-  'fabric.linking.try_downloading_file': '嘗試下載檔案來進行檢視。',
-  'fabric.linking.unable_to_annotate_image': '您無法對此影像加上註解',
-  'fabric.linking.unknown': '未知',
   'fabric.linking.unlink_account': '取消帳戶的連結',
-  'fabric.linking.upload': '上傳',
-  'fabric.linking.upload_an_avatar': '上傳圖片',
-  'fabric.linking.upload_file': '上傳檔案',
-  'fabric.linking.upload_file_from': '從 {name} 上傳檔案',
-  'fabric.linking.upload_image': '上傳影像',
-  'fabric.linking.upload_photo': '上傳相片',
-  'fabric.linking.video': '影片',
-  'fabric.linking.view': '檢視',
-  'fabric.linking.viewer_rateLimited': '載入您的檔案時發生問題。',
-  'fabric.linking.webgl_warning_description': '您的瀏覽器不支援 WebGL。使用啟用 WebGL 的瀏覽器來為影像加上註解。',
-  'fabric.linking.zip_entry_load_failed': '我們無法載入該 zip 檔案項目來進行預覽',
-  'fabric.linking.zoom_in': '縮小',
-  'fabric.linking.zoom_out': '放大'
+  'fabric.linking.updated_by': '修改者：{context}',
+  'fabric.linking.view': '檢視'
 };

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -77,7 +77,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
         extensionKey,
         invokeType
       });
-      dispatchAnalytics(uiActionClickedEvent(actionType, extensionKey, display));
+      dispatchAnalytics(uiActionClickedEvent(id, actionType, extensionKey, display));
     },
 
     /**
@@ -89,7 +89,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param previewInvokeMethod How the preview was triggered.
      */
     hoverCardOpenLinkClickedEvent: (previewDisplay, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => {
-      dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(defaultId, previewDisplay, definitionId, extensionKey, previewInvokeMethod));
     },
 
     /**
@@ -129,7 +129,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param previewInvokeMethod How the preview was triggered.
      * @returns
      */
-    hoverCardViewedEvent: (previewDisplay, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardViewedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod)),
+    hoverCardViewedEvent: (previewDisplay, previewInvokeMethod, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiHoverCardViewedEvent(id, previewDisplay, definitionId, extensionKey, previewInvokeMethod)),
 
     /**
      * This fires an event that represents a hover preview being dismissed.
@@ -140,7 +140,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param previewInvokeMethod How the preview was triggered.
      * @returns
      */
-    hoverCardDismissedEvent: (previewDisplay, hoverTime, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardDismissedEvent(previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
+    hoverCardDismissedEvent: (previewDisplay, hoverTime, previewInvokeMethod, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
   }), [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
   /** Contains all operational analytics events */
 

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -24,7 +24,8 @@ export function useSmartLinkActions({
     const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
       handleInvoke: opts => linkActions.invoke(opts, appearance),
       handleAnalytics: analyticsHandler,
-      extensionKey: getExtensionKey(linkState.details)
+      extensionKey: getExtensionKey(linkState.details),
+      source: appearance
     }, undefined, platform);
 
     if (!cardProperties.actions || cardProperties.actions.length === 0) {

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

@@ -190,12 +190,13 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     destinationProduct
   }
 });
-export const uiActionClickedEvent = (actionType, extensionKey, display) => ({
+export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: uiActionSubjectIds[actionType],
   eventType: 'ui',
   attributes: { ...context,
+    id,
     display,
     extensionKey: extensionKey || '',
     actionType: actionType
@@ -240,22 +241,24 @@ export const uiRenderFailedEvent = (display, error, errorInfo) => ({
     display
   }
 });
-export const uiHoverCardViewedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardViewedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'viewed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     previewDisplay,
     previewInvokeMethod
   }
 });
-export const uiHoverCardDismissedEvent = (previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardDismissedEvent = (id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'dismissed',
   actionSubject: 'hoverCard',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     hoverTime,
@@ -263,12 +266,13 @@ export const uiHoverCardDismissedEvent = (previewDisplay, hoverTime, definitionI
     previewInvokeMethod
   }
 });
-export const uiHoverCardOpenLinkClickedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+export const uiHoverCardOpenLinkClickedEvent = (id, previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
   action: 'clicked',
   actionSubject: 'button',
   actionSubjectId: 'shortcutGoToLink',
   eventType: 'ui',
   attributes: { ...context,
+    id,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     previewDisplay,

package/dist/es2019/version.json

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

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import FlexibleCard from '../../FlexibleCard';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { isSpecialEvent } from '../../../utils';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { getExtensionKey } from '../../../state/helpers';
+const flexibleUiOptions = {
+  hideElevation: true,
+  size: SmartLinkSize.Large,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: SmartLinkTheme.Black
+};
+
+const getOpenAction = (url, analytics) => ({
+  name: ActionName.CustomAction,
+  icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+    label: "open in new tab",
+    size: "medium"
+  }),
+  iconPosition: 'before',
+  onClick: () => {
+    window.open(url, '_blank');
+    analytics.ui.hoverCardOpenLinkClickedEvent('card');
+  },
+  testId: 'hover-card-open-button'
+});
+
+const toFooterActions = cardActions => cardActions.map(action => ({
+  content: action.text,
+  name: ActionName.CustomAction,
+  onClick: () => action.invoke(),
+  testId: action.id
+}));
+
+const HoverCardContent = ({
+  analytics,
+  cardActions = [],
+  cardState,
+  onResolve,
+  renderers,
+  url
+}) => {
+  var _cardState$details;
+
+  useEffect(() => {
+    // Since hover preview only render on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent(HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+  }, [analytics.ui, cardState.status]);
+  const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
+  const onClick = useCallback(event => {
+    const isModifierKeyPressed = isSpecialEvent(event);
+    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed);
+  }, [cardState.status, analytics.ui]);
+  const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
+  const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+  const {
+    primary,
+    secondary
+  } = extractMetadata(getSimulatedMetadata(extensionKey));
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  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, {
+    actions: titleActions
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary
+  }), body, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: footerActions
+  }));
+};
+
+export default HoverCardContent;

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

@@ -2,22 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback, useRef, useMemo } from 'react';
-import { TitleBlock, SnippetBlock, FooterBlock, MetadataBlock, PreviewBlock } from '../FlexibleCard/components/blocks';
-import { Card } from '../Card';
+import React, { useCallback, useRef } from 'react';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize, ActionName, SmartLinkTheme } from '../../constants';
 import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
 import { HoverCardContainer } from './styled';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { withAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { useSmartCardState as useLinkState } from '../../state/store';
 import { useSmartLinkAnalytics } from '../../state/analytics';
-import { getExtensionKey, getDefinitionId } from '../../state/helpers';
-import { extractMetadata } from '../../extractors/hover/extractMetadata';
-import { getSimulatedMetadata } from './utils';
-import extractPreview from '../../extractors/flexible/extract-preview';
+import { useSmartLinkRenderers } from '../../state/renderers';
+import HoverCardContent from './components/hover-card-content';
+import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
 export const HoverCardComponent = ({
   children,
   id,
@@ -32,10 +27,9 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
-  const extensionKey = useMemo(() => getExtensionKey(linkState.details), [linkState]);
-  const definitionId = useMemo(() => getDefinitionId(linkState.details), [linkState]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -45,12 +39,12 @@ export const HoverCardComponent = ({
       //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, definitionId, extensionKey, 'mouse_hover');
+        analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
       }
 
       setIsOpen(false);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   const initShowCard = useCallback(() => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
@@ -60,73 +54,17 @@ export const HoverCardComponent = ({
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
       if (isOpen === false) {
         cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent('card', definitionId, extensionKey, 'mouse_hover');
+        analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
       }
 
       setIsOpen(true);
     }, delay);
-  }, [delay, isOpen, definitionId, extensionKey, analytics]);
+  }, [delay, isOpen, analytics.ui]);
   const linkActions = useSmartLinkActions({
     url,
-    appearance: 'block',
+    appearance: HOVER_CARD_ANALYTICS_DISPLAY,
     analyticsHandler
   });
-  const smartlinkActions = useMemo(() => linkActions.map(action => ({
-    content: action.text,
-    name: ActionName.CustomAction,
-    onClick: () => action.invoke(),
-    testId: action.id
-  })), [linkActions]);
-  const openAction = useMemo(() => {
-    return {
-      name: ActionName.CustomAction,
-      icon: jsx(ShortcutIcon, {
-        label: "open in new tab",
-        size: "medium"
-      }),
-      iconPosition: 'before',
-      onClick: () => {
-        window.open(url, '_blank');
-        analytics.ui.hoverCardOpenLinkClickedEvent('card', definitionId, extensionKey);
-      },
-      testId: 'hover-card-open-button'
-    };
-  }, [url, definitionId, extensionKey, analytics]);
-
-  const CardComponent = ({
-    update
-  }) => {
-    var _linkState$details;
-
-    //TODO: EDM-3224 deleted simulated and use real JsonLd
-    const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
-    const linkData = (_linkState$details = linkState.details) === null || _linkState$details === void 0 ? void 0 : _linkState$details.data;
-    const content = extractPreview(linkData) ? jsx(PreviewBlock, null) : jsx(SnippetBlock, null);
-    return jsx("div", {
-      onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard,
-      css: HoverCardContainer
-    }, jsx(Card, {
-      id: id,
-      appearance: "block",
-      url: url,
-      ui: {
-        hideElevation: true,
-        size: SmartLinkSize.Large,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-        theme: SmartLinkTheme.Black
-      },
-      onResolve: update
-    }, jsx(TitleBlock, {
-      actions: [openAction]
-    }), jsx(MetadataBlock, {
-      primary: metadataElements.primary,
-      secondary: metadataElements.secondary
-    }), content, jsx(FooterBlock, {
-      actions: smartlinkActions
-    })));
-  };
-
   const onClose = useCallback(() => setIsOpen(false), []);
   return jsx(Popup, {
     testId: "hover-card",
@@ -135,11 +73,18 @@ export const HoverCardComponent = ({
     placement: "bottom-start",
     content: ({
       update
-    }) => {
-      return jsx(CardComponent, {
-        update: update
-      });
-    },
+    }) => jsx("div", {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      css: HoverCardContainer
+    }, jsx(HoverCardContent, {
+      analytics: analytics,
+      cardActions: linkActions,
+      cardState: linkState,
+      onResolve: update,
+      renderers: renderers,
+      url: url
+    })),
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard

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

@@ -1,3 +1,4 @@
+export const HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
 export const getSimulatedMetadata = (extensionKey = '') => {
   switch (extensionKey) {
     case 'confluence-object-provider':

package/dist/esm/extractors/block/index.js

@@ -45,9 +45,10 @@ export var extractBlockActions = function extractBlockActions(props, jsonLd, opt
     var handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
         extensionKey = opts.extensionKey,
+        source = opts.source,
         testId = opts.testId;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

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

@@ -60,6 +60,7 @@ export var extractPreviewAction = function extractPreviewAction() {
   var handleAnalytics = arguments.length > 4 ? arguments[4] : undefined;
   var testId = arguments.length > 5 ? arguments[5] : undefined;
   var platform = arguments.length > 6 ? arguments[6] : undefined;
+  var source = arguments.length > 7 ? arguments[7] : undefined;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -87,7 +88,7 @@ export var extractPreviewAction = function extractPreviewAction() {
     })); // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.
 
-    var previewActionProps = getInvokeOpts(key, 'PreviewAction', 'block'); // - Promise invoked by the action invocation handler; open preview.
+    var previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - Promise invoked by the action invocation handler; open preview.
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.