@atlaskit/smart-card 24.0.0 → 24.0.2

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

@@ -1,21 +1,26 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export const blockCardContentHeaderClassName = 'block-card-content-header';
 export const ContentHeader = ({
   onClick,
   link,
   children
-}) => jsx("a", {
-  onClick: onClick,
-  href: link,
-  target: "_blank",
-  css: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    // EDM-713: fixes copy-paste from renderer to editor for Firefox
-    // due to HTML its unwrapping behaviour on paste.
-    MozUserSelect: 'none'
-  },
-  "data-trello-do-not-use-override": "block-card-content-header",
-  className: blockCardContentHeaderClassName
-}, children);
+}) => {
+  const onMouseDown = useMouseDownEvent();
+  return jsx("a", {
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    href: link,
+    target: "_blank",
+    css: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      // EDM-713: fixes copy-paste from renderer to editor for Firefox
+      // due to HTML its unwrapping behaviour on paste.
+      MozUserSelect: 'none'
+    },
+    "data-trello-do-not-use-override": "block-card-content-header",
+    className: blockCardContentHeaderClassName
+  }, children);
+};

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

@@ -70,6 +70,7 @@ export const BlockCard = ({
       cardState,
       url,
       testId,
+      onClick: handleFrameClick,
       onError,
       onResolve,
       renderers,

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -63,6 +63,8 @@ const FlexibleResolvedView = ({
       name: ElementName.ViewCount
     }, {
       name: ElementName.VoteCount
+    }, {
+      name: ElementName.ChecklistProgress
     }, {
       name: ElementName.DueOn
     }],

package/dist/es2019/view/CardWithUrl/component.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
@@ -11,6 +12,7 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { APIError } from '../..';
 import { CardDisplay } from '../../constants';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
 export function CardWithUrlContent({
   id,
   url,
@@ -33,6 +35,10 @@ export function CardWithUrlContent({
   showAuthTooltip: showAuthTooltipProp,
   analyticsEvents
 }) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+
   // Get state, actions for this card.
   const {
     state,
@@ -55,10 +61,6 @@ export function CardWithUrlContent({
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
 
   // Setup UI handlers.
-  const handleClick = useCallback(event => {
-    const clickUrl = getClickUrl(url, state.details);
-    isSpecialEvent(event) ? window.open(clickUrl, '_blank') : window.open(clickUrl, '_self');
-  }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -71,12 +73,26 @@ export function CardWithUrlContent({
       destinationProduct: product,
       destinationSubproduct: subproduct
     });
-    if (onClick) {
-      onClick(event);
-    } else if (!isFlexibleUi) {
-      handleClick(event);
+    if (!onClick && !isFlexibleUi) {
+      const clickUrl = getClickUrl(url, state.details);
+      // Ctrl+left click on mac typically doesn't trigger onClick
+      // The event could have potentially had `e.preventDefault()` called on it by now
+      // event by smart card internally
+      // If it has been called then only then can `isModifierKeyPressed` be true.
+      const target = isModifierKeyPressed ? '_blank' : '_self';
+      window.open(clickUrl, target);
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
+  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export const ExpandedFrame = ({
   isPlaceholder = false,
   children,
@@ -19,6 +20,7 @@ export const ExpandedFrame = ({
 }) => {
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
+  const handleMouseDown = useMouseDownEvent();
   const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
     className: "embed-header"
   }, /*#__PURE__*/React.createElement(IconWrapper, {
@@ -27,7 +29,8 @@ export const ExpandedFrame = ({
     isPlaceholder: isPlaceholder
   }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
     href: href,
-    onClick: handleClick
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
   }, text)));
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
     "data-testid": "embed-content-wrapper",

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 const LinkInfoButton = ({
   content,
   href,
@@ -9,6 +10,7 @@ const LinkInfoButton = ({
   target,
   testId
 }) => {
+  const onMouseDown = useMouseDownEvent();
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     hideTooltipOnClick: true,
@@ -20,6 +22,7 @@ const LinkInfoButton = ({
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     spacing: "none",
     target: target,
     testId: `${testId}-button`

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';
@@ -90,10 +91,12 @@ const TitleBlock = ({
   const overrideText = !!text ? {
     text
   } : {};
+  const onMouseDown = useMouseDownEvent();
   const title = /*#__PURE__*/React.createElement(Title, _extends({
     hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     target: anchorTarget,
     theme: theme
   }, overrideText));

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 const styles = css`
   // Stretch the invisible link over the whole of the post.
   // Hide the link’s text.
@@ -47,13 +48,17 @@ const LayeredLink = ({
   testId,
   text,
   url
-}) => jsx("a", {
-  className: "layered-link",
-  css: styles,
-  "data-testid": `${testId}-layered-link`,
-  href: url,
-  onClick: onClick,
-  target: target,
-  tabIndex: -1 // Hide tab index and let the title link be the link.
-}, text);
+}) => {
+  const onMouseDown = useMouseDownEvent();
+  return jsx("a", {
+    className: "layered-link",
+    css: styles,
+    "data-testid": `${testId}-layered-link`,
+    href: url,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+  }, text);
+};
 export default LayeredLink;

package/dist/es2019/view/FlexibleCard/components/elements/link/index.js

@@ -5,6 +5,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
@@ -83,6 +84,7 @@ const Link = ({
   onClick,
   target
 }) => {
+  const onMouseDown = useMouseDownEvent();
   const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
   const anchor = jsx("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
@@ -90,6 +92,7 @@ const Link = ({
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     href: url,
     target: target || '_blank'
   }, text);

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

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
@@ -16,6 +17,7 @@ import HoverCardResolvedView from './views/resolved';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { useSmartCardActions } from '../../../state/actions';
+import { fireLinkClickedEvent } from '../../../utils/analytics/click';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
@@ -60,6 +62,9 @@ const HoverCardContent = ({
   onMouseLeave
 }) => {
   var _cardState$details;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const actions = useSmartCardActions(id, url, analytics);
   useEffect(() => {
@@ -74,7 +79,8 @@ const HoverCardContent = ({
       isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
     });
-  }, [cardState.status, analytics.ui, id]);
+    fireLinkClickedEvent(createAnalyticsEvent)(event);
+  }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
   const titleActions = useMemo(() => [getCopyAction(url), getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const types = data ? extractType(data) : undefined;

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { WrapperAnchor, WrapperSpan } from './styled';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export const Frame = props => {
   const {
     isSelected,
@@ -28,6 +29,7 @@ export const Frame = props => {
       onClick(event);
     }
   }, [onClick]);
+  const handleMouseDown = useMouseDownEvent();
   const isInteractive = Boolean(onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
@@ -44,6 +46,7 @@ export const Frame = props => {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

package/dist/esm/state/analytics/useMouseDownEvent.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
+var useMouseDownEvent = function useMouseDownEvent(onMouseDown) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  return useCallback(function (event) {
+    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+
+    // ignore left clicks
+    // these would be handled by `onClick` handler instead
+    if (event.button !== 0) {
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
+    }
+  }, [onMouseDown, createAnalyticsEvent]);
+};
+export default useMouseDownEvent;

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

@@ -0,0 +1,109 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { browser } from '@atlaskit/linking-common/user-agent';
+import { ANALYTICS_CHANNEL } from './analytics';
+export var buttonMap = new Map([[undefined, 'none'], [0, 'left'], [1, 'middle'], [2, 'right']]);
+export var getKeys = function getKeys(e) {
+  return ['alt', 'ctrl', 'meta', 'shift'].filter(function (key) {
+    return e["".concat(key, "Key")] === true;
+  });
+};
+var isContentEditable = function isContentEditable(el) {
+  return el instanceof HTMLElement && el.isContentEditable;
+};
+export function getLinkClickOutcome(e, clickType) {
+  var _browser = browser(),
+    mac = _browser.mac,
+    safari = _browser.safari;
+  if (e.defaultPrevented) {
+    return 'prevented';
+  }
+  /**
+   * If the link/parent is content editable then left click won't have typical effect
+   */
+  if (isContentEditable(e.currentTarget) && ['left', 'middle'].includes(clickType)) {
+    return 'contentEditable';
+  }
+  switch (clickType) {
+    case 'left':
+      {
+        // Meta key = Cmd for macOS, Windows key sometimes for Windows (otherwise false)
+        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
+        if (e.metaKey) {
+          return mac ? 'clickThroughNewTabOrWindow' : 'clickThrough';
+        }
+        if (e.shiftKey) {
+          // Alt/option click in safari typically adds the link to bookmarks
+          if (safari) {
+            return 'alt';
+          }
+          return 'clickThroughNewTabOrWindow';
+        }
+        if (e.ctrlKey) {
+          // Ctrl+Left on macOS defaults to triggering a right click instead (so won't trigger onClick)
+          // but if this behaviour is disabled, likely outcome is clickThrough
+          if (mac) {
+            return 'clickThrough';
+          }
+          return 'clickThroughNewTabOrWindow';
+        }
+        if (e.altKey) {
+          return 'alt';
+        }
+        var target = e.currentTarget.getAttribute('target');
+        if (target === '_blank') {
+          return 'clickThroughNewTabOrWindow';
+        }
+        return 'clickThrough';
+      }
+    case 'middle':
+      {
+        return 'clickThroughNewTabOrWindow';
+      }
+    case 'right':
+      {
+        return 'contextMenu';
+      }
+  }
+  return '_unknown';
+}
+var linkClickedEvent = function linkClickedEvent(_ref) {
+  var clickType = _ref.clickType,
+    clickOutcome = _ref.clickOutcome,
+    keysHeld = _ref.keysHeld;
+  return {
+    action: 'clicked',
+    actionSubject: 'link',
+    eventType: 'ui',
+    attributes: {
+      clickType: clickType,
+      clickOutcome: clickOutcome,
+      keysHeld: keysHeld
+    }
+  };
+};
+export var createLinkClickedPayload = function createLinkClickedPayload(event) {
+  var clickType = buttonMap.get(event.button);
+  if (!clickType) {
+    return;
+  }
+  var clickOutcome = getLinkClickOutcome(event, clickType);
+  var keysHeld = getKeys(event);
+  return linkClickedEvent({
+    clickType: clickType,
+    clickOutcome: clickOutcome,
+    keysHeld: keysHeld
+  });
+};
+export var fireLinkClickedEvent = function fireLinkClickedEvent(createAnalyticsEvent) {
+  return function (event) {
+    var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var payload = createLinkClickedPayload(event);
+    if (payload) {
+      createAnalyticsEvent(_objectSpread(_objectSpread(_objectSpread({}, payload), overrides), {}, {
+        attributes: _objectSpread(_objectSpread({}, payload.attributes), overrides === null || overrides === void 0 ? void 0 : overrides.attributes)
+      })).fire(ANALYTICS_CHANNEL);
+    }
+  };
+};

package/dist/esm/utils/index.js

@@ -12,6 +12,16 @@ export var isSpecialEvent = function isSpecialEvent(evt) {
 export var isIframe = function isIframe() {
   return window.parent !== parent;
 };
+
+/**
+ * Meta key = cmd on mac, windows key on windows
+ * Ctrl key on mac by default triggers a right click instead of left click
+ * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ *
+ * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
+ * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
+ * in which case typically only a standard clickthrough will occur, this is likely a small portion of events
+ */
 export var isSpecialKey = function isSpecialKey(event) {
   return event.metaKey || event.ctrlKey;
 };

package/dist/esm/version.json

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

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

@@ -1,12 +1,15 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export var blockCardContentHeaderClassName = 'block-card-content-header';
 export var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
     link = _ref.link,
     children = _ref.children;
+  var onMouseDown = useMouseDownEvent();
   return jsx("a", {
     onClick: onClick,
+    onMouseDown: onMouseDown,
     href: link,
     target: "_blank",
     css: {

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

@@ -65,6 +65,7 @@ export var BlockCard = function BlockCard(_ref) {
       cardState: cardState,
       url: url,
       testId: testId,
+      onClick: handleFrameClick,
       onError: onError,
       onResolve: onResolve,
       renderers: renderers,

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -71,6 +71,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       name: ElementName.ViewCount
     }, {
       name: ElementName.VoteCount
+    }, {
+      name: ElementName.ChecklistProgress
     }, {
       name: ElementName.DueOn
     }],

package/dist/esm/view/CardWithUrl/component.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
@@ -11,6 +12,7 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { APIError } from '../..';
 import { CardDisplay } from '../../constants';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -32,6 +34,9 @@ export function CardWithUrlContent(_ref) {
     showHoverPreview = _ref.showHoverPreview,
     showAuthTooltipProp = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   // Get state, actions for this card.
   var _useSmartLink = useSmartLink(id, url, dispatchAnalytics),
     state = _useSmartLink.state,
@@ -55,10 +60,6 @@ export function CardWithUrlContent(_ref) {
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
 
   // Setup UI handlers.
-  var handleClick = useCallback(function (event) {
-    var clickUrl = getClickUrl(url, state.details);
-    isSpecialEvent(event) ? window.open(clickUrl, '_blank') : window.open(clickUrl, '_self');
-  }, [state.details, url]);
   var handleClickWrapper = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -71,12 +72,26 @@ export function CardWithUrlContent(_ref) {
       destinationProduct: product,
       destinationSubproduct: subproduct
     });
-    if (onClick) {
-      onClick(event);
-    } else if (!isFlexibleUi) {
-      handleClick(event);
+    if (!onClick && !isFlexibleUi) {
+      var clickUrl = getClickUrl(url, state.details);
+      // Ctrl+left click on mac typically doesn't trigger onClick
+      // The event could have potentially had `e.preventDefault()` called on it by now
+      // event by smart card internally
+      // If it has been called then only then can `isModifierKeyPressed` be true.
+      var target = isModifierKeyPressed ? '_blank' : '_self';
+      window.open(clickUrl, target);
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
+  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent]);
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
+import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -25,6 +26,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
   var handleClick = function handleClick(event) {
     return handleClickCommon(event, onClick);
   };
+  var handleMouseDown = useMouseDownEvent();
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       className: "embed-header"
@@ -34,7 +36,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       isPlaceholder: isPlaceholder
     }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
       href: href,
-      onClick: handleClick
+      onClick: handleClick,
+      onMouseDown: handleMouseDown
     }, text)));
   };
   var renderContent = function renderContent() {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 var LinkInfoButton = function LinkInfoButton(_ref) {
   var content = _ref.content,
     href = _ref.href,
@@ -8,6 +9,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     onClick = _ref.onClick,
     target = _ref.target,
     testId = _ref.testId;
+  var onMouseDown = useMouseDownEvent();
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     hideTooltipOnClick: true,
@@ -19,6 +21,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     spacing: "none",
     target: target,
     testId: "".concat(testId, "-button")

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -6,6 +6,7 @@ var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onA
 var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
+import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';
@@ -89,10 +90,12 @@ var TitleBlock = function TitleBlock(_ref) {
   var overrideText = !!text ? {
     text: text
   } : {};
+  var onMouseDown = useMouseDownEvent();
   var title = /*#__PURE__*/React.createElement(Title, _extends({
     hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     target: anchorTarget,
     theme: theme
   }, overrideText));