@atlaskit/smart-card 24.0.0 → 24.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 24.0.2
+
+### Patch Changes
+
+- [`134bac37edc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/134bac37edc) - [ux] Adds the ChecklistProgress element to Flexible Block View's secondary section
+
+## 24.0.1
+
+### Patch Changes
+
+- [`4661d4f7f7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4661d4f7f7b) - Add `link clicked` UI event to Smart Card.
+- Updated dependencies
+
 ## 24.0.0
 
 ### Patch Changes

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _click = require("../../utils/analytics/click");
+var useMouseDownEvent = function useMouseDownEvent(onMouseDown) {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  return (0, _react.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) {
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
+    }
+  }, [onMouseDown, createAnalyticsEvent]);
+};
+var _default = useMouseDownEvent;
+exports.default = _default;

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getKeys = exports.fireLinkClickedEvent = exports.createLinkClickedPayload = exports.buttonMap = void 0;
+exports.getLinkClickOutcome = getLinkClickOutcome;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
+var _analytics = require("./analytics");
+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) { (0, _defineProperty2.default)(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; }
+var buttonMap = new Map([[undefined, 'none'], [0, 'left'], [1, 'middle'], [2, 'right']]);
+exports.buttonMap = buttonMap;
+var getKeys = function getKeys(e) {
+  return ['alt', 'ctrl', 'meta', 'shift'].filter(function (key) {
+    return e["".concat(key, "Key")] === true;
+  });
+};
+exports.getKeys = getKeys;
+var isContentEditable = function isContentEditable(el) {
+  return el instanceof HTMLElement && el.isContentEditable;
+};
+function getLinkClickOutcome(e, clickType) {
+  var _browser = (0, _userAgent.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
+    }
+  };
+};
+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
+  });
+};
+exports.createLinkClickedPayload = createLinkClickedPayload;
+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.ANALYTICS_CHANNEL);
+    }
+  };
+};
+exports.fireLinkClickedEvent = fireLinkClickedEvent;

package/dist/cjs/utils/index.js

@@ -24,6 +24,16 @@ exports.isSpecialEvent = isSpecialEvent;
 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
+ */
 exports.isIframe = isIframe;
 var isSpecialKey = function isSpecialKey(event) {
   return event.metaKey || event.ctrlKey;

package/dist/cjs/version.json

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

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

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockCardContentHeaderClassName = exports.ContentHeader = void 0;
 var _react = require("@emotion/react");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../state/analytics/useMouseDownEvent"));
 /** @jsx jsx */
 
 var blockCardContentHeaderClassName = 'block-card-content-header';
@@ -13,8 +15,10 @@ var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
     link = _ref.link,
     children = _ref.children;
+  var onMouseDown = (0, _useMouseDownEvent.default)();
   return (0, _react.jsx)("a", {
     onClick: onClick,
+    onMouseDown: onMouseDown,
     href: link,
     target: "_blank",
     css: {

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

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

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

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

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardWithUrlContent = CardWithUrlContent;
 var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
 var _utils = require("../../utils");
 var measure = _interopRequireWildcard(require("../../utils/performance"));
@@ -19,6 +20,7 @@ var _flexible = require("../../utils/flexible");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _ = require("../..");
 var _constants = require("../../constants");
+var _click = require("../../utils/analytics/click");
 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; }
 function CardWithUrlContent(_ref) {
@@ -42,6 +44,9 @@ function CardWithUrlContent(_ref) {
     showHoverPreview = _ref.showHoverPreview,
     showAuthTooltipProp = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
     state = _useSmartLink.state,
@@ -65,10 +70,6 @@ function CardWithUrlContent(_ref) {
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard'));
 
   // Setup UI handlers.
-  var handleClick = (0, _react.useCallback)(function (event) {
-    var clickUrl = (0, _helpers.getClickUrl)(url, state.details);
-    (0, _utils.isSpecialEvent)(event) ? window.open(clickUrl, '_blank') : window.open(clickUrl, '_self');
-  }, [state.details, url]);
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
@@ -81,12 +82,26 @@ function CardWithUrlContent(_ref) {
       destinationProduct: product,
       destinationSubproduct: subproduct
     });
-    if (onClick) {
-      onClick(event);
-    } else if (!isFlexibleUi) {
-      handleClick(event);
+    if (!onClick && !isFlexibleUi) {
+      var clickUrl = (0, _helpers.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);
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      (0, _click.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 = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

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

@@ -8,6 +8,7 @@ exports.ExpandedFrame = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 var _handlers = require("../../BlockCard/utils/handlers");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../state/analytics/useMouseDownEvent"));
 var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -32,6 +33,7 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
   var handleClick = function handleClick(event) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
+  var handleMouseDown = (0, _useMouseDownEvent.default)();
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/_react.default.createElement(_styled.Header, {
       className: "embed-header"
@@ -41,7 +43,8 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
       isPlaceholder: isPlaceholder
     }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
       href: href,
-      onClick: handleClick
+      onClick: handleClick,
+      onMouseDown: handleMouseDown
     }, text)));
   };
   var renderContent = function renderContent() {

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _useMouseDownEvent = _interopRequireDefault(require("../../../../../state/analytics/useMouseDownEvent"));
 var LinkInfoButton = function LinkInfoButton(_ref) {
   var content = _ref.content,
     href = _ref.href,
@@ -15,6 +16,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     onClick = _ref.onClick,
     target = _ref.target,
     testId = _ref.testId;
+  var onMouseDown = (0, _useMouseDownEvent.default)();
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: content,
     hideTooltipOnClick: true,
@@ -26,6 +28,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     spacing: "none",
     target: target,
     testId: "".concat(testId, "-button")

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

@@ -12,6 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../../../state/analytics/useMouseDownEvent"));
 var _constants = require("../../../../../constants");
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _errored = _interopRequireDefault(require("./errored"));
@@ -99,10 +100,12 @@ var TitleBlock = function TitleBlock(_ref) {
   var overrideText = !!text ? {
     text: text
   } : {};
+  var onMouseDown = (0, _useMouseDownEvent.default)();
   var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
     hideTooltip: hideTitleTooltip,
     maxLines: maxLines,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     target: anchorTarget,
     theme: theme
   }, overrideText));

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../../../state/analytics/useMouseDownEvent"));
 var _templateObject;
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
 
@@ -22,12 +23,14 @@ var LayeredLink = function LayeredLink(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     url = _ref.url;
+  var onMouseDown = (0, _useMouseDownEvent.default)();
   return (0, _react2.jsx)("a", {
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(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);

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

@@ -13,6 +13,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../constants");
 var _utils = require("../../utils");
 var _token = require("../../../../../utils/token");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../../../state/analytics/useMouseDownEvent"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
@@ -73,6 +74,7 @@ var Link = function Link(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     target = _ref.target;
+  var onMouseDown = (0, _useMouseDownEvent.default)();
   var hasSpace = (0, _react.useMemo)(function () {
     return text ? (0, _utils.hasWhiteSpace)(text) : false;
   }, [text]);
@@ -82,6 +84,7 @@ var Link = function Link(_ref) {
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
+    onMouseDown: onMouseDown,
     href: url,
     target: target || '_blank'
   }, text);

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

@@ -12,6 +12,7 @@ var _react = require("@emotion/react");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 var _extractors = require("@atlaskit/linking-common/extractors");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _react2 = _interopRequireWildcard(require("react"));
 var _constants = require("../../../constants");
 var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
@@ -25,6 +26,7 @@ var _resolved = _interopRequireDefault(require("./views/resolved"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
 var _actions = require("../../../state/actions");
+var _click = require("../../../utils/analytics/click");
 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; }
 /** @jsx jsx */
@@ -102,6 +104,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var extensionKey = (0, _react2.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
@@ -118,7 +122,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
       isModifierKeyPressed: isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
     });
-  }, [cardState.status, analytics.ui, id]);
+    (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
+  }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
   var titleActions = (0, _react2.useMemo)(function () {
     return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ exports.Frame = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _components = require("@atlaskit/theme/components");
 var _styled = require("./styled");
+var _useMouseDownEvent = _interopRequireDefault(require("../../../state/analytics/useMouseDownEvent"));
 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 Frame = function Frame(props) {
@@ -35,6 +37,7 @@ var Frame = function Frame(props) {
       onClick(event);
     }
   }, [onClick]);
+  var handleMouseDown = (0, _useMouseDownEvent.default)();
   var isInteractive = Boolean(onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
@@ -51,6 +54,7 @@ var Frame = function Frame(props) {
     tabIndex: isInteractive ? 0 : undefined,
     role: isInteractive ? 'button' : undefined,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
     "data-testid": testId,
     className: className

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

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
+const useMouseDownEvent = onMouseDown => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  return useCallback(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/es2019/utils/analytics/click.js

@@ -0,0 +1,106 @@
+import { browser } from '@atlaskit/linking-common/user-agent';
+import { ANALYTICS_CHANNEL } from './analytics';
+export const buttonMap = new Map([[undefined, 'none'], [0, 'left'], [1, 'middle'], [2, 'right']]);
+export const getKeys = e => {
+  return ['alt', 'ctrl', 'meta', 'shift'].filter(key => e[`${key}Key`] === true);
+};
+const isContentEditable = el => {
+  return el instanceof HTMLElement && el.isContentEditable;
+};
+export function getLinkClickOutcome(e, clickType) {
+  const {
+    mac,
+    safari
+  } = browser();
+  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';
+        }
+        const target = e.currentTarget.getAttribute('target');
+        if (target === '_blank') {
+          return 'clickThroughNewTabOrWindow';
+        }
+        return 'clickThrough';
+      }
+    case 'middle':
+      {
+        return 'clickThroughNewTabOrWindow';
+      }
+    case 'right':
+      {
+        return 'contextMenu';
+      }
+  }
+  return '_unknown';
+}
+const linkClickedEvent = ({
+  clickType,
+  clickOutcome,
+  keysHeld
+}) => ({
+  action: 'clicked',
+  actionSubject: 'link',
+  eventType: 'ui',
+  attributes: {
+    clickType,
+    clickOutcome,
+    keysHeld
+  }
+});
+export const createLinkClickedPayload = event => {
+  const clickType = buttonMap.get(event.button);
+  if (!clickType) {
+    return;
+  }
+  const clickOutcome = getLinkClickOutcome(event, clickType);
+  const keysHeld = getKeys(event);
+  return linkClickedEvent({
+    clickType,
+    clickOutcome,
+    keysHeld
+  });
+};
+export const fireLinkClickedEvent = createAnalyticsEvent => (event, overrides = {}) => {
+  const payload = createLinkClickedPayload(event);
+  if (payload) {
+    createAnalyticsEvent({
+      ...payload,
+      ...overrides,
+      attributes: {
+        ...payload.attributes,
+        ...(overrides === null || overrides === void 0 ? void 0 : overrides.attributes)
+      }
+    }).fire(ANALYTICS_CHANNEL);
+  }
+};

package/dist/es2019/utils/index.js

@@ -3,6 +3,16 @@ import Loadable from 'react-loadable';
 export const isCardWithData = props => !!props.data;
 export const isSpecialEvent = evt => evt.isDefaultPrevented() && (isIframe() || isSpecialKey(evt) || isSpecialClick(evt));
 export const isIframe = () => 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 const isSpecialKey = event => event.metaKey || event.ctrlKey;
 export const isSpecialClick = event => event.button === 1;
 export const getIconForFileType = fileMimeType => {

package/dist/es2019/version.json

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