@atlaskit/smart-card 26.3.6 → 26.3.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.3.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.3.7
+
+### Patch Changes
+
+- [`b270cd7542b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b270cd7542b) - Updates internal analytics for link clicked events in Smart Card and adds more attributes to link clicked event fired by LinkUrl (blue links) that are rendered in editor.
+
 ## 26.3.6
 
 ### Patch Changes

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMouseDownEvent = exports.useLinkClicked = exports.ClickButton = void 0;
+var _react = require("react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _click = require("../../utils/analytics/click");
+var ClickButton = /*#__PURE__*/function (ClickButton) {
+  ClickButton[ClickButton["Left"] = 0] = "Left";
+  ClickButton[ClickButton["Middle"] = 1] = "Middle";
+  ClickButton[ClickButton["Right"] = 2] = "Right";
+  return ClickButton;
+}({});
+exports.ClickButton = ClickButton;
+var useLinkClicked = function useLinkClicked(handler, predicate) {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  return (0, _react.useCallback)(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var event = args[0];
+    handler === null || handler === void 0 ? void 0 : handler.apply(null, args);
+    if (!predicate || predicate !== null && predicate !== void 0 && predicate(event)) {
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
+    }
+  }, [handler, predicate, createAnalyticsEvent]);
+};
+exports.useLinkClicked = useLinkClicked;
+var isNotLeftClick = function isNotLeftClick(event) {
+  return event.button !== 0;
+};
+var useMouseDownEvent = function useMouseDownEvent(onMouseDown) {
+  return useLinkClicked(onMouseDown, isNotLeftClick);
+};
+exports.useMouseDownEvent = useMouseDownEvent;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkAnalyticsContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
+/**
+ * Provides an analytics context to supply attributes to events based on a URL
+ */
+var LinkAnalyticsContext = function LinkAnalyticsContext(_ref) {
+  var _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url,
+    display = _ref.display,
+    id = _ref.id,
+    children = _ref.children,
+    source = _ref.source;
+  var _getUrlAttributes = (0, _resolvedAttributes.getUrlAttributes)(url),
+    urlHash = _getUrlAttributes.urlHash;
+  var displayCategory = display === 'url' ? 'link' : undefined;
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      source: source,
+      attributes: {
+        displayCategory: displayCategory,
+        urlHash: urlHash,
+        display: display,
+        id: id
+      }
+    }
+  }, children);
+};
+exports.LinkAnalyticsContext = LinkAnalyticsContext;

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

@@ -1,49 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SmartLinkAnalyticsContext = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
 var _flexible = require("../flexible");
 var _constants = require("../../constants");
 var _store = require("../../state/store");
-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 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 SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
-  var children = _ref.children,
-    url = _ref.url,
-    appearance = _ref.appearance,
-    id = _ref.id,
-    source = _ref.source;
+var _LinkAnalyticsContext = require("./LinkAnalyticsContext");
+/**
+ * Provides an analytics context to supply attributes to events based on a URL
+ * and the link state in the store
+ */
+var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(props) {
+  var children = props.children,
+    appearance = props.appearance,
+    url = props.url;
   var _useSmartLinkState = (0, _store.useSmartCardState)(url),
     details = _useSmartLinkState.details,
     status = _useSmartLinkState.status;
-  var resolvedAttributes = (0, _resolvedAttributes.getResolvedAttributes)({
+  var attributes = (0, _resolvedAttributes.getResolvedAttributes)({
     url: url
   }, details, status);
-  var _getUrlAttributes = (0, _resolvedAttributes.getUrlAttributes)(url),
-    urlHash = _getUrlAttributes.urlHash;
-  var isFlexibleUi = (0, _react.useMemo)(function () {
-    return (0, _flexible.isFlexibleUiCard)(children);
-  }, [children]);
-  var display = isFlexibleUi ? _constants.CardDisplay.Flexible : appearance;
-  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+  var display = (0, _flexible.isFlexibleUiCard)(children) ? _constants.CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/_react.default.createElement(_LinkAnalyticsContext.LinkAnalyticsContext, (0, _extends2.default)({}, props, {
+    display: display
+  }), /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
-      source: source,
-      attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
-        urlHash: urlHash,
-        display: display,
-        id: id
-      })
+      attributes: attributes
     }
-  }, children);
+  }, children));
 };
 exports.SmartLinkAnalyticsContext = SmartLinkAnalyticsContext;

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

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getKeys = exports.fireLinkClickedEvent = exports.createLinkClickedPayload = exports.buttonMap = void 0;
 exports.getLinkClickOutcome = getLinkClickOutcome;
+exports.withLinkClickedEvent = withLinkClickedEvent;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _analytics = require("./analytics");
+var _useLinkClicked = require("../../state/analytics/useLinkClicked");
 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']]);
@@ -124,4 +127,22 @@ var fireLinkClickedEvent = function fireLinkClickedEvent(createAnalyticsEvent) {
     }
   };
 };
-exports.fireLinkClickedEvent = fireLinkClickedEvent;
+exports.fireLinkClickedEvent = fireLinkClickedEvent;
+var getDisplayName = function getDisplayName(WrappedComponent) {
+  if (typeof WrappedComponent === 'string') {
+    return WrappedComponent;
+  }
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+};
+function withLinkClickedEvent(WrappedComponent) {
+  var Component = function Component(props) {
+    var onClick = (0, _useLinkClicked.useLinkClicked)(props.onClick);
+    var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)(props.onMouseDown);
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
+      onClick: onClick,
+      onMouseDown: onMouseDown
+    }));
+  };
+  Component.displayName = "withLinkClickedEvent(".concat(getDisplayName(WrappedComponent), ")");
+  return Component;
+}

package/dist/cjs/version.json

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

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

@@ -1,12 +1,11 @@
 "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"));
+var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 /** @jsx jsx */
 
 var blockCardContentHeaderClassName = 'block-card-content-header';
@@ -15,7 +14,7 @@ var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
     link = _ref.link,
     children = _ref.children;
-  var onMouseDown = (0, _useMouseDownEvent.default)();
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   return (0, _react.jsx)("a", {
     onClick: onClick,
     onMouseDown: onMouseDown,

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,7 +8,7 @@ exports.ExpandedFrame = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styled = require("./styled");
 var _handlers = require("../../BlockCard/utils/handlers");
-var _useMouseDownEvent = _interopRequireDefault(require("../../../state/analytics/useMouseDownEvent"));
+var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 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 ExpandedFrame = function ExpandedFrame(_ref) {
@@ -36,7 +35,7 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
   var handleClick = function handleClick(event) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
-  var handleMouseDown = (0, _useMouseDownEvent.default)();
+  var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var calculatedFrameStyle = (0, _react.useMemo)(function () {
     return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
   }, [frameStyle, isFrameVisible]);

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

@@ -8,7 +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 _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var LinkInfoButton = function LinkInfoButton(_ref) {
   var content = _ref.content,
     href = _ref.href,
@@ -16,7 +16,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     onClick = _ref.onClick,
     target = _ref.target,
     testId = _ref.testId;
-  var onMouseDown = (0, _useMouseDownEvent.default)();
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: content,
     hideTooltipOnClick: true,

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

@@ -12,7 +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 _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _constants = require("../../../../../constants");
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _errored = _interopRequireDefault(require("./errored"));
@@ -100,7 +100,7 @@ var TitleBlock = function TitleBlock(_ref) {
   var overrideText = !!text ? {
     text: text
   } : {};
-  var onMouseDown = (0, _useMouseDownEvent.default)();
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
     hideTooltip: hideTitleTooltip,
     maxLines: maxLines,

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

@@ -8,7 +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 _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _templateObject;
 /** @jsx jsx */
 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: 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"])));
@@ -24,7 +24,7 @@ var LayeredLink = function LayeredLink(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     url = _ref.url;
-  var onMouseDown = (0, _useMouseDownEvent.default)();
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   return (0, _react2.jsx)("a", {
     className: "layered-link",
     css: styles,

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

@@ -13,7 +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 _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 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); }
@@ -79,7 +79,7 @@ var Link = function Link(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     target = _ref.target;
-  var onMouseDown = (0, _useMouseDownEvent.default)();
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var hasSpace = (0, _react.useMemo)(function () {
     return text ? (0, _utils.hasWhiteSpace)(text) : false;
   }, [text]);

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,7 +8,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"));
+var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 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) {
@@ -37,7 +36,7 @@ var Frame = function Frame(props) {
       onClick(event);
     }
   }, [onClick]);
-  var handleMouseDown = (0, _useMouseDownEvent.default)();
+  var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var isInteractive = Boolean(onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements

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

@@ -8,48 +8,43 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-modal");
-var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _version = require("../../version.json");
 var _click = require("../../utils/analytics/click");
-var _useMouseDownEvent = _interopRequireDefault(require("../../state/analytics/useMouseDownEvent"));
-var _excluded = ["href", "children", "checkSafety", "onClick", "onMouseDown", "testId"],
+var _LinkAnalyticsContext = require("../../utils/analytics/LinkAnalyticsContext");
+var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-modal");
+var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
+var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["checkLinkSafety"];
 var PACKAGE_DATA = {
   packageName: _version.name,
   packageVersion: _version.version,
   componentName: 'linkUrl'
 };
+var Link = (0, _click.withLinkClickedEvent)('a');
 var LinkUrl = function LinkUrl(_ref) {
   var href = _ref.href,
     children = _ref.children,
     _ref$checkSafety = _ref.checkSafety,
     checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
     _onClick = _ref.onClick,
-    _onMouseDown = _ref.onMouseDown,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useLinkWarningModal = (0, _useLinkWarningModal2.useLinkWarningModal)(),
     checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
     linkWarningModalProps = (0, _objectWithoutProperties2.default)(_useLinkWarningModal, _excluded2);
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var handleMouseDown = (0, _useMouseDownEvent.default)();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LinkAnalyticsContext.LinkAnalyticsContext, {
+    url: href,
+    display: "url"
+  }, /*#__PURE__*/_react.default.createElement(Link, (0, _extends2.default)({
     "data-testid": testId,
     href: href,
     onClick: function onClick(e) {
       checkSafety && checkLinkSafety(e, href);
       _onClick && _onClick(e);
-      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(e);
-    },
-    onMouseDown: function onMouseDown(e) {
-      _onMouseDown && _onMouseDown(e);
-      handleMouseDown(e); // add analytics
     }
-  }, props), children), checkSafety && /*#__PURE__*/_react.default.createElement(_LinkWarningModal.default, linkWarningModalProps));
+  }, props), children)), checkSafety && /*#__PURE__*/_react.default.createElement(_LinkWarningModal.default, linkWarningModalProps));
 };
 var _default = (0, _analyticsNext.withAnalyticsContext)(PACKAGE_DATA)(LinkUrl);
 exports.default = _default;

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

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
+export let ClickButton = /*#__PURE__*/function (ClickButton) {
+  ClickButton[ClickButton["Left"] = 0] = "Left";
+  ClickButton[ClickButton["Middle"] = 1] = "Middle";
+  ClickButton[ClickButton["Right"] = 2] = "Right";
+  return ClickButton;
+}({});
+export const useLinkClicked = (handler, predicate) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  return useCallback((...args) => {
+    const [event] = args;
+    handler === null || handler === void 0 ? void 0 : handler.apply(null, args);
+    if (!predicate || predicate !== null && predicate !== void 0 && predicate(event)) {
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
+    }
+  }, [handler, predicate, createAnalyticsEvent]);
+};
+const isNotLeftClick = event => event.button !== 0;
+export const useMouseDownEvent = onMouseDown => {
+  return useLinkClicked(onMouseDown, isNotLeftClick);
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+/**
+ * Provides an analytics context to supply attributes to events based on a URL
+ */
+export const LinkAnalyticsContext = ({
+  url = '',
+  display,
+  id,
+  children,
+  source
+}) => {
+  const {
+    urlHash
+  } = getUrlAttributes(url);
+  const displayCategory = display === 'url' ? 'link' : undefined;
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      source,
+      attributes: {
+        displayCategory,
+        urlHash,
+        display,
+        id
+      }
+    }
+  }, children);
+};

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

@@ -1,37 +1,34 @@
-import React, { useMemo } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
 import { isFlexibleUiCard } from '../flexible';
 import { CardDisplay } from '../../constants';
 import { useSmartCardState as useSmartLinkState } from '../../state/store';
-export const SmartLinkAnalyticsContext = ({
-  children,
-  url,
-  appearance,
-  id,
-  source
-}) => {
+import { LinkAnalyticsContext } from './LinkAnalyticsContext';
+/**
+ * Provides an analytics context to supply attributes to events based on a URL
+ * and the link state in the store
+ */
+export const SmartLinkAnalyticsContext = props => {
+  const {
+    children,
+    appearance,
+    url
+  } = props;
   const {
     details,
     status
   } = useSmartLinkState(url);
-  const resolvedAttributes = getResolvedAttributes({
+  const attributes = getResolvedAttributes({
     url
   }, details, status);
-  const {
-    urlHash
-  } = getUrlAttributes(url);
-  const isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
-  const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  const display = isFlexibleUiCard(children) ? CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/React.createElement(LinkAnalyticsContext, _extends({}, props, {
+    display: display
+  }), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
-      source,
-      attributes: {
-        ...resolvedAttributes,
-        urlHash,
-        display,
-        id
-      }
+      attributes
     }
-  }, children);
+  }, children));
 };

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

@@ -1,5 +1,7 @@
+import React from 'react';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { ANALYTICS_CHANNEL } from './analytics';
+import { useLinkClicked, useMouseDownEvent } from '../../state/analytics/useLinkClicked';
 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);
@@ -109,4 +111,23 @@ export const fireLinkClickedEvent = createAnalyticsEvent => (event, overrides =
       }
     }).fire(ANALYTICS_CHANNEL);
   }
-};
+};
+const getDisplayName = WrappedComponent => {
+  if (typeof WrappedComponent === 'string') {
+    return WrappedComponent;
+  }
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+};
+export function withLinkClickedEvent(WrappedComponent) {
+  const Component = props => {
+    const onClick = useLinkClicked(props.onClick);
+    const onMouseDown = useMouseDownEvent(props.onMouseDown);
+    return /*#__PURE__*/React.createElement(WrappedComponent, {
+      ...props,
+      onClick,
+      onMouseDown
+    });
+  };
+  Component.displayName = `withLinkClickedEvent(${getDisplayName(WrappedComponent)})`;
+  return Component;
+}

package/dist/es2019/version.json

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 export const blockCardContentHeaderClassName = 'block-card-content-header';
 export const ContentHeader = ({
   onClick,

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
-import useMouseDownEvent from '../../../state/analytics/useMouseDownEvent';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 export const ExpandedFrame = ({
   isPlaceholder = false,
   children,

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

@@ -1,7 +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';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const LinkInfoButton = ({
   content,
   href,

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

@@ -1,7 +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 { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
-import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const styles = css`
   // Stretch the invisible link over the whole of the post.
   // Hide the link’s text.