@atlaskit/smart-card 20.0.4 → 20.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 20.0.5
+
+### Patch Changes
+
+- [`6e4810f82c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e4810f82c3) - wrap hover preview in error boundary and emit failure event
+
 ## 20.0.4
 
 ### Patch Changes

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

@@ -32,12 +32,13 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
       store = _useSmartLinkContext.store;
 
-  var state = (0, _linkingCommon.getUrl)(store, url);
-  var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
-  var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
-  var extractedResourceType = (0, _helpers.getResourceType)(state.details);
-  var extractedSubproduct = (0, _helpers.getSubproduct)(state.details);
-  var extractedProduct = (0, _helpers.getProduct)(state.details);
+  var state = store ? (0, _linkingCommon.getUrl)(store, url) : undefined;
+  var details = state ? state.details : undefined;
+  var extractedDefinitionId = (0, _helpers.getDefinitionId)(details);
+  var extractedExtensionKey = (0, _helpers.getExtensionKey)(details);
+  var extractedResourceType = (0, _helpers.getResourceType)(details);
+  var extractedSubproduct = (0, _helpers.getSubproduct)(details);
+  var extractedProduct = (0, _helpers.getProduct)(details);
   /** Contains all ui analytics events */
 
   var ui = (0, _react.useMemo)(function () {
@@ -172,6 +173,25 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, status, definitionId, extensionKey));
       },
 
+      /**
+       * This fires an event that represents when a Smart Link renders unsuccessfuly.
+       * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param id The unique ID for this Smart Link.
+       * @param error: An error representing why the Smart Link render failed.
+       * @param errorInfo: Additional details about the error including the stack trace.
+       */
+      renderFailedEvent: function renderFailedEvent(display) {
+        var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultId;
+        var error = arguments.length > 2 ? arguments[2] : undefined;
+        var errorInfo = arguments.length > 3 ? arguments[3] : undefined;
+        // Start and fail the smart-link-rendered experience. If it has already
+        // been started nothing happens.
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+        (0, _ufoExperiences.failUfoExperience)('smart-link-rendered', id);
+        (0, _ufoExperiences.failUfoExperience)('smart-link-authenticated', id);
+        dispatchAnalytics((0, _analytics.uiRenderFailedEvent)(display, error, errorInfo));
+      },
+
       /**
        * This fires an event that represents a hover preview being opened.
        * @param hoverDisplay Whether the hover preview was displayed as a card or embed.

package/dist/cjs/version.json

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

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

@@ -21,7 +21,7 @@ var _performance = require("../../utils/performance");
 
 var _reactErrorBoundary = require("react-error-boundary");
 
-var _ufoExperiences = require("../../state/analytics/ufoExperiences");
+var _analytics2 = require("../../state/analytics");
 
 var _LazyFallback = require("./component-lazy/LazyFallback");
 
@@ -80,6 +80,7 @@ function CardWithURLRenderer(props) {
 
     (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
   }, [appearance, createAnalyticsEvent]);
+  var analytics = (0, _analytics2.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
   var logError = (0, _react.useCallback)(function (error, info) {
     var componentStack = info.componentStack; // NB: APIErrors are thrown in response to Object Resolver Service.
     // In these cases, control is handed back to the Editor. We do not
@@ -93,15 +94,10 @@ function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      }; // Start and fail the smart-link-rendered experience. If it has already
-      // been started nothing happens.
-
-      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
-      (0, _ufoExperiences.failUfoExperience)('smart-link-rendered', id);
-      (0, _ufoExperiences.failUfoExperience)('smart-link-authenticated', id);
-      dispatchAnalytics((0, _analytics.uiRenderFailedEvent)(appearance, error, errorInfo));
+      };
+      analytics.ui.renderFailedEvent(appearance, id, error, errorInfo);
     }
-  }, [appearance, dispatchAnalytics, id]);
+  }, [analytics.ui, appearance, id]);
 
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');

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

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hoverCardClassName = exports.HoverCardComponent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkActions");
+
+var _renderers = require("../../../state/renderers");
+
+var _store = require("../../../state/store");
+
+var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
+
+var _styled = require("../styled");
+
+var _utils = require("../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+var hoverCardClassName = 'smart-links-hover-preview';
+exports.hoverCardClassName = hoverCardClassName;
+
+var HoverCardComponent = function HoverCardComponent(_ref) {
+  var children = _ref.children,
+      url = _ref.url,
+      analyticsHandler = _ref.analyticsHandler,
+      analytics = _ref.analytics;
+  var delay = 300;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var fadeOutTimeoutId = (0, _react.useRef)();
+  var fadeInTimeoutId = (0, _react.useRef)();
+  var cardOpenTime = (0, _react.useRef)();
+  var renderers = (0, _renderers.useSmartLinkRenderers)();
+  var linkState = (0, _store.useSmartCardState)(url);
+  var hoverDisplay = 'card';
+  var invokeMethod = 'mouse_hover';
+  var hideCard = (0, _react.useCallback)(function () {
+    //Check its previously open to avoid firing events when moving between the child and hover card components
+    if (isOpen === true && cardOpenTime.current) {
+      var hoverTime = Date.now() - cardOpenTime.current;
+      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
+    }
+
+    setIsOpen(false);
+  }, [analytics.ui, isOpen]);
+  var initHideCard = (0, _react.useCallback)(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      return hideCard();
+    }, delay);
+  }, [hideCard]);
+  var initShowCard = (0, _react.useCallback)(function () {
+    if (fadeOutTimeoutId.current) {
+      clearTimeout(fadeOutTimeoutId.current);
+    }
+
+    fadeInTimeoutId.current = setTimeout(function () {
+      //Check if its previously closed to avoid firing events when moving between the child and hover card components
+      if (isOpen === false) {
+        cardOpenTime.current = Date.now();
+        analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
+      }
+
+      setIsOpen(true);
+    }, delay);
+  }, [delay, isOpen, analytics.ui]);
+  var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
+    url: url,
+    appearance: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+    analyticsHandler: analyticsHandler
+  });
+  var onActionClick = (0, _react.useCallback)(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
+  return (0, _core.jsx)(_popup.default, {
+    testId: "hover-card",
+    isOpen: isOpen,
+    onClose: hideCard,
+    placement: "bottom-start",
+    content: function content(_ref2) {
+      var update = _ref2.update;
+      return (0, _core.jsx)("div", {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard,
+        onClick: onClick,
+        css: _styled.HoverCardContainer // class name for trello to exclude click events
+        ,
+        className: hoverCardClassName
+      }, (0, _core.jsx)(_HoverCardContent.default, {
+        analytics: analytics,
+        cardActions: linkActions,
+        cardState: linkState,
+        onActionClick: onActionClick,
+        onResolve: update,
+        renderers: renderers,
+        url: url
+      }));
+    },
+    trigger: function trigger(triggerProps) {
+      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard
+      }), children);
+    },
+    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+
+  });
+};
+
+exports.HoverCardComponent = HoverCardComponent;

package/dist/cjs/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js}

@@ -7,44 +7,36 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
-var _utils = require("../utils");
+var _extractors = require("@atlaskit/linking-common/extractors");
 
-var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
-var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
 
-var _blocks = require("../../FlexibleCard/components/blocks");
+var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
 
-var _utils2 = require("../../../utils");
+var _helpers = require("../../../state/helpers");
 
-var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+var _utils = require("../../../utils");
 
-var _helpers = require("../../../state/helpers");
+var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+
+var _blocks = require("../../FlexibleCard/components/blocks");
 
 var _styled = require("../styled");
 
-var _extractors = require("@atlaskit/linking-common/extractors");
+var _utils2 = require("../utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var flexibleUiOptions = {
-  hideElevation: true,
-  size: _constants.SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: _constants.SmartLinkTheme.Black,
-  hidePadding: true
-};
-
 var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: _constants.ActionName.CustomAction,
@@ -65,6 +57,8 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   };
 };
 
+exports.getOpenAction = getOpenAction;
+
 var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
@@ -82,6 +76,8 @@ var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   });
 };
 
+exports.toFooterActions = toFooterActions;
+
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
 
@@ -96,14 +92,14 @@ var HoverCardContent = function HoverCardContent(_ref) {
   (0, _react.useEffect)(function () {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent(_utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+    analytics.ui.renderSuccessEvent(_utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
   }, [analytics.ui, cardState.status]);
   var extensionKey = (0, _react.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
   var onClick = (0, _react.useCallback)(function (event) {
-    var isModifierKeyPressed = (0, _utils2.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent(undefined, _utils.HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
+    var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
+    analytics.ui.cardClickedEvent(undefined, _utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = (0, _react.useMemo)(function () {
     return [getOpenAction(url, analytics, onActionClick)];
@@ -114,7 +110,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
-  var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey, types)),
+  var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
       primary = _extractMetadata.primary,
       secondary = _extractMetadata.secondary,
       subtitle = _extractMetadata.subtitle;
@@ -126,7 +122,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onClick: onClick,
     onResolve: onResolve,
     renderers: renderers,
-    ui: flexibleUiOptions,
+    ui: _styled.flexibleUiOptions,
     url: url
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
     actions: titleActions,

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

@@ -2,153 +2,52 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hoverCardClassName = exports.HoverCardComponent = exports.HoverCard = void 0;
+exports.HoverCard = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _core = require("@emotion/core");
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-
-var _useSmartLinkActions = require("../../state/hooks-external/useSmartLinkActions");
-
-var _styled = require("./styled");
+var _react = require("react");
 
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _analytics = require("../../utils/analytics");
-
-var _store = require("../../state/store");
+var _reactErrorBoundary = require("react-error-boundary");
 
-var _analytics2 = require("../../state/analytics");
+var _analytics = require("../../state/analytics");
 
-var _renderers = require("../../state/renderers");
+var _analytics2 = require("../../utils/analytics");
 
-var _hoverCardContent = _interopRequireDefault(require("./components/hover-card-content"));
+var _HoverCardComponent = require("./components/HoverCardComponent");
 
 var _utils = require("./utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
-var hoverCardClassName = 'smart-links-hover-preview';
-exports.hoverCardClassName = hoverCardClassName;
-
-var HoverCardComponent = function HoverCardComponent(_ref) {
-  var children = _ref.children,
-      id = _ref.id,
-      url = _ref.url,
-      createAnalyticsEvent = _ref.createAnalyticsEvent;
+var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
+  var url = props.url,
+      id = props.id,
+      children = props.children,
+      createAnalyticsEvent = props.createAnalyticsEvent;
   var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
-    (0, _analytics.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
+    (0, _analytics2.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
-  var delay = 300;
-
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  var fadeOutTimeoutId = (0, _react.useRef)();
-  var fadeInTimeoutId = (0, _react.useRef)();
-  var cardOpenTime = (0, _react.useRef)();
-  var renderers = (0, _renderers.useSmartLinkRenderers)();
-  var linkState = (0, _store.useSmartCardState)(url);
-  var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
-  var hideCard = (0, _react.useCallback)(function () {
-    //Check its previously open to avoid firing events when moving between the child and hover card components
-    if (isOpen === true && cardOpenTime.current) {
-      var hoverTime = Date.now() - cardOpenTime.current;
-      analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
-    }
-
-    setIsOpen(false);
-  }, [analytics.ui, isOpen]);
-  var initHideCard = (0, _react.useCallback)(function () {
-    if (fadeInTimeoutId.current) {
-      clearTimeout(fadeInTimeoutId.current);
-    }
-
-    fadeOutTimeoutId.current = setTimeout(function () {
-      return hideCard();
-    }, delay);
-  }, [hideCard]);
-  var initShowCard = (0, _react.useCallback)(function () {
-    if (fadeOutTimeoutId.current) {
-      clearTimeout(fadeOutTimeoutId.current);
-    }
-
-    fadeInTimeoutId.current = setTimeout(function () {
-      //Check if its previously closed to avoid firing events when moving between the child and hover card components
-      if (isOpen === false) {
-        cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
-      }
-
-      setIsOpen(true);
-    }, delay);
-  }, [delay, isOpen, analytics.ui]);
-  var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
-    url: url,
-    appearance: _utils.HOVER_CARD_ANALYTICS_DISPLAY,
-    analyticsHandler: analyticsHandler
-  });
-  var onActionClick = (0, _react.useCallback)(function (actionId) {
-    if (actionId === 'preview-content') {
-      hideCard();
-    }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
-
-  var onClick = (0, _react.useCallback)(function (e) {
-    return e.stopPropagation();
-  }, []);
-  return (0, _core.jsx)(_popup.default, {
-    testId: "hover-card",
-    isOpen: isOpen,
-    onClose: hideCard,
-    placement: "bottom-start",
-    content: function content(_ref2) {
-      var update = _ref2.update;
-      return (0, _core.jsx)("div", {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        className: hoverCardClassName,
-        css: _styled.HoverCardContainer,
-        onClick: onClick
-      }, (0, _core.jsx)(_hoverCardContent.default, {
-        analytics: analytics,
-        cardActions: linkActions,
-        cardState: linkState,
-        onActionClick: onActionClick,
-        onResolve: update,
-        renderers: renderers,
-        url: url
-      }));
-    },
-    trigger: function trigger(triggerProps) {
-      return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard
-      }), children);
-    },
-    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
-
-  });
+  var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
+  var onError = (0, _react.useCallback)(function (error, info) {
+    analytics.ui.renderFailedEvent(_utils.SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+  }, [analytics.ui, id]);
+  return (0, _core.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    fallback: children,
+    onError: onError
+  }, (0, _core.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
+    analyticsHandler: analyticsHandler,
+    analytics: analytics
+  }), children));
 };
 
-exports.HoverCardComponent = HoverCardComponent;
 var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
   source: 'smartLinkPreviewHoverCard'
-})((0, _analyticsNext.withAnalyticsEvents)()(HoverCardComponent));
+})((0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary));
 exports.HoverCard = HoverCard;

package/dist/cjs/view/HoverCard/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.HoverCardContainer = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,8 +13,18 @@ var _core = require("@emotion/core");
 
 var _index = require("../../index");
 
+var _constants = require("../../constants");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+var flexibleUiOptions = {
+  hideElevation: true,
+  size: _constants.SmartLinkSize.Medium,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: _constants.SmartLinkTheme.Black,
+  hidePadding: true
+};
+exports.flexibleUiOptions = flexibleUiOptions;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSimulatedMetadata = exports.HOVER_CARD_ANALYTICS_DISPLAY = void 0;
+exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
 
 var _constants = require("../../constants");
 
-var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
-exports.HOVER_CARD_ANALYTICS_DISPLAY = HOVER_CARD_ANALYTICS_DISPLAY;
+var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
+exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
 
 var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
@@ -20,12 +20,13 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
   const {
     store
   } = useSmartLinkContext();
-  const state = getUrl(store, url);
-  const extractedDefinitionId = getDefinitionId(state.details);
-  const extractedExtensionKey = getExtensionKey(state.details);
-  const extractedResourceType = getResourceType(state.details);
-  const extractedSubproduct = getSubproduct(state.details);
-  const extractedProduct = getProduct(state.details);
+  const state = store ? getUrl(store, url) : undefined;
+  const details = state ? state.details : undefined;
+  const extractedDefinitionId = getDefinitionId(details);
+  const extractedExtensionKey = getExtensionKey(details);
+  const extractedResourceType = getResourceType(details);
+  const extractedSubproduct = getSubproduct(details);
+  const extractedProduct = getProduct(details);
   /** Contains all ui analytics events */
 
   const ui = useMemo(() => ({
@@ -124,6 +125,22 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       dispatchAnalytics(uiRenderSuccessEvent(display, status, definitionId, extensionKey));
     },
 
+    /**
+     * This fires an event that represents when a Smart Link renders unsuccessfuly.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param id The unique ID for this Smart Link.
+     * @param error: An error representing why the Smart Link render failed.
+     * @param errorInfo: Additional details about the error including the stack trace.
+     */
+    renderFailedEvent: (display, id = defaultId, error, errorInfo) => {
+      // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+      startUfoExperience('smart-link-rendered', id);
+      failUfoExperience('smart-link-rendered', id);
+      failUfoExperience('smart-link-authenticated', id);
+      dispatchAnalytics(uiRenderFailedEvent(display, error, errorInfo));
+    },
+
     /**
      * This fires an event that represents a hover preview being opened.
      * @param hoverDisplay Whether the hover preview was displayed as a card or embed.

package/dist/es2019/version.json

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