@atlaskit/smart-card 20.0.4 → 20.1.0

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

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { lazy, useEffect, useState, Suspense, useCallback } from 'react';
 import uuid from 'uuid';
-import { uiRenderFailedEvent, fireSmartLinkEvent } from '../../utils/analytics';
+import { fireSmartLinkEvent } from '../../utils/analytics';
 import { clearMarks, clearMeasures } from '../../utils/performance';
 import { ErrorBoundary } from 'react-error-boundary';
-import { failUfoExperience, startUfoExperience } from '../../state/analytics/ufoExperiences';
+import { useSmartLinkAnalytics } from '../../state/analytics';
 import { LoadingCardLink } from './component-lazy/LazyFallback';
 var LazyCardWithUrlContent = /*#__PURE__*/lazy(function () {
   return import(
@@ -32,6 +32,7 @@ export function CardWithURLRenderer(props) {
       onClick = props.onClick,
       container = props.container,
       onResolve = props.onResolve,
+      onError = props.onError,
       testId = props.testId,
       showActions = props.showActions,
       inheritDimensions = props.inheritDimensions,
@@ -56,6 +57,7 @@ export function CardWithURLRenderer(props) {
 
     fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
   }, [appearance, createAnalyticsEvent]);
+  var analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
   var logError = 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
@@ -69,15 +71,10 @@ export function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      }; // 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(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.');
@@ -93,6 +90,7 @@ export function CardWithURLRenderer(props) {
     dispatchAnalytics: dispatchAnalytics,
     container: container,
     onResolve: onResolve,
+    onError: onError,
     testId: testId,
     showActions: showActions,
     inheritDimensions: inheritDimensions,

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

@@ -30,6 +30,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       isFrameVisible = _ref.isFrameVisible,
       platform = _ref.platform,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       inheritDimensions = _ref.inheritDimensions;
   var data = details && details.data || getEmptyJsonLd();
@@ -89,6 +90,13 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var unauthorisedViewProps = extractEmbedProps(data, meta, platform);
       return /*#__PURE__*/React.createElement(EmbedCardUnauthorisedView, _extends({}, unauthorisedViewProps, {
         isSelected: isSelected,
@@ -98,6 +106,13 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var forbiddenViewProps = extractEmbedProps(data, meta, platform);
       var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
       var requestAccessContext = extractRequestAccessContext({
@@ -114,6 +129,13 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var notFoundViewProps = extractEmbedProps(data, meta, platform);
       return /*#__PURE__*/React.createElement(EmbedCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -123,6 +145,13 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       return /*#__PURE__*/React.createElement(EmbedCardErroredView, {
         onRetry: handleErrorRetry,
         inheritDimensions: inheritDimensions,

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -12,11 +12,11 @@ import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case SmartLinkAlignment.Left:
     default:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
+import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -14,24 +15,49 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardState = _ref.cardState,
       children = _ref.children,
       onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId,
-      onResolve = _ref.onResolve;
+      testId = _ref.testId;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
   var context = getContextByStatus(url, status, details, renderers);
   var retry = getRetryOptions(url, status, details, onAuthorize);
+
+  var _ref2 = context || {},
+      title = _ref2.title;
+
   useEffect(function () {
-    if (status === 'resolved' && onResolve) {
-      onResolve({
-        url: url
-      });
+    switch (status) {
+      case SmartLinkStatus.Resolved:
+        if (onResolve) {
+          onResolve({
+            title: title,
+            url: url
+          });
+        }
+
+        break;
+
+      case SmartLinkStatus.Errored:
+      case SmartLinkStatus.Fallback:
+      case SmartLinkStatus.Forbidden:
+      case SmartLinkStatus.NotFound:
+      case SmartLinkStatus.Unauthorized:
+        if (onError) {
+          onError({
+            status: status,
+            url: url
+          });
+        }
+
+        break;
     }
-  }, [onResolve, status, url]);
+  }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({

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

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import Popup from '@atlaskit/popup';
+import { jsx } from '@emotion/core';
+import React, { useCallback, useRef } from 'react';
+import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
+import { useSmartLinkRenderers } from '../../../state/renderers';
+import { useSmartCardState as useLinkState } from '../../../state/store';
+import HoverCardContent from '../components/HoverCardContent';
+import { HoverCardContainer } from '../styled';
+import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+export var hoverCardClassName = 'smart-links-hover-preview';
+export 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.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var fadeOutTimeoutId = useRef();
+  var fadeInTimeoutId = useRef();
+  var cardOpenTime = useRef();
+  var renderers = useSmartLinkRenderers();
+  var linkState = useLinkState(url);
+  var hoverDisplay = 'card';
+  var invokeMethod = 'mouse_hover';
+  var hideCard = 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 = useCallback(function () {
+    if (fadeInTimeoutId.current) {
+      clearTimeout(fadeInTimeoutId.current);
+    }
+
+    fadeOutTimeoutId.current = setTimeout(function () {
+      return hideCard();
+    }, delay);
+  }, [hideCard]);
+  var initShowCard = 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 = useSmartLinkActions({
+    url: url,
+    appearance: SMART_CARD_ANALYTICS_DISPLAY,
+    analyticsHandler: analyticsHandler
+  });
+  var onActionClick = useCallback(function (actionId) {
+    if (actionId === 'preview-content') {
+      hideCard();
+    }
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+
+  var onClick = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
+  return jsx(Popup, {
+    testId: "hover-card",
+    isOpen: isOpen,
+    onClose: hideCard,
+    placement: "bottom-start",
+    content: function content(_ref2) {
+      var update = _ref2.update;
+      return jsx("div", {
+        onMouseEnter: initShowCard,
+        onMouseLeave: initHideCard,
+        onClick: onClick,
+        css: HoverCardContainer // class name for trello to exclude click events
+        ,
+        className: hoverCardClassName
+      }, jsx(HoverCardContent, {
+        analytics: analytics,
+        cardActions: linkActions,
+        cardState: linkState,
+        onActionClick: onActionClick,
+        onResolve: update,
+        renderers: renderers,
+        url: url
+      }));
+    },
+    trigger: function trigger(triggerProps) {
+      return jsx("span", _extends({}, 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
+
+  });
+};

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

@@ -1,24 +1,17 @@
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { extractMetadata } from '../../../extractors/hover/extractMetadata';
-import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { useSmartCardActions } from '../../../state/actions';
+import { getExtensionKey } from '../../../state/helpers';
+import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { isSpecialEvent } from '../../../utils';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { getExtensionKey } from '../../../state/helpers';
-import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
-import { extractType } from '@atlaskit/linking-common/extractors';
-var flexibleUiOptions = {
-  hideElevation: true,
-  size: SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black,
-  hidePadding: true
-};
-
-var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
+import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
+import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
     icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -37,8 +30,7 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
     testId: 'hover-card-open-button'
   };
 };
-
-var toFooterActions = function toFooterActions(cardActions, onActionClick) {
+export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   return cardActions.map(function (action) {
     return {
       content: action.text,
@@ -58,7 +50,9 @@ var toFooterActions = function toFooterActions(cardActions, onActionClick) {
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
 
-  var analytics = _ref.analytics,
+  var _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      analytics = _ref.analytics,
       _ref$cardActions = _ref.cardActions,
       cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
       cardState = _ref.cardState,
@@ -66,17 +60,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
+  var actions = useSmartCardActions(id, url, analytics);
+  useEffect(function () {
+    actions.loadMetadata();
+  }, [actions]);
   useEffect(function () {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent(HOVER_CARD_ANALYTICS_DISPLAY, cardState.status);
+    analytics.ui.renderSuccessEvent(SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
   }, [analytics.ui, cardState.status]);
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
+    analytics.ui.cardClickedEvent(undefined, SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
   }, [cardState.status, analytics.ui]);
   var titleActions = useMemo(function () {
     return [getOpenAction(url, analytics, onActionClick)];

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

@@ -1,121 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useCallback, useRef } from 'react';
-import Popup from '@atlaskit/popup';
-import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
-import { HoverCardContainer } from './styled';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireSmartLinkEvent } from '../../utils/analytics';
-import { useSmartCardState as useLinkState } from '../../state/store';
+import { jsx } from '@emotion/core';
+import { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
-import { useSmartLinkRenderers } from '../../state/renderers';
-import HoverCardContent from './components/hover-card-content';
-import { HOVER_CARD_ANALYTICS_DISPLAY } from './utils';
-export var hoverCardClassName = 'smart-links-hover-preview';
-export var HoverCardComponent = function HoverCardComponent(_ref) {
-  var children = _ref.children,
-      id = _ref.id,
-      url = _ref.url,
-      createAnalyticsEvent = _ref.createAnalyticsEvent;
+import { fireSmartLinkEvent } from '../../utils/analytics';
+import { HoverCardComponent } from './components/HoverCardComponent';
+import { SMART_CARD_ANALYTICS_DISPLAY } from './utils';
+
+var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
+  var url = props.url,
+      id = props.id,
+      children = props.children,
+      createAnalyticsEvent = props.createAnalyticsEvent;
   var analyticsHandler = useCallback(function (analyticsPayload) {
     fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
-  var delay = 300;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  var fadeOutTimeoutId = useRef();
-  var fadeInTimeoutId = useRef();
-  var cardOpenTime = useRef();
-  var renderers = useSmartLinkRenderers();
-  var linkState = useLinkState(url);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
-  var hideCard = 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 = useCallback(function () {
-    if (fadeInTimeoutId.current) {
-      clearTimeout(fadeInTimeoutId.current);
-    }
-
-    fadeOutTimeoutId.current = setTimeout(function () {
-      return hideCard();
-    }, delay);
-  }, [hideCard]);
-  var initShowCard = 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 = useSmartLinkActions({
-    url: url,
-    appearance: HOVER_CARD_ANALYTICS_DISPLAY,
-    analyticsHandler: analyticsHandler
-  });
-  var onActionClick = useCallback(function (actionId) {
-    if (actionId === 'preview-content') {
-      hideCard();
-    }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
-
-  var onClick = useCallback(function (e) {
-    return e.stopPropagation();
-  }, []);
-  return jsx(Popup, {
-    testId: "hover-card",
-    isOpen: isOpen,
-    onClose: hideCard,
-    placement: "bottom-start",
-    content: function content(_ref2) {
-      var update = _ref2.update;
-      return jsx("div", {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        className: hoverCardClassName,
-        css: HoverCardContainer,
-        onClick: onClick
-      }, jsx(HoverCardContent, {
-        analytics: analytics,
-        cardActions: linkActions,
-        cardState: linkState,
-        onActionClick: onActionClick,
-        onResolve: update,
-        renderers: renderers,
-        url: url
-      }));
-    },
-    trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, 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 onError = useCallback(function (error, info) {
+    analytics.ui.renderFailedEvent(SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+  }, [analytics.ui, id]);
+  return jsx(ErrorBoundary, {
+    fallback: children,
+    onError: onError
+  }, jsx(HoverCardComponent, _extends({}, props, {
+    analyticsHandler: analyticsHandler,
+    analytics: analytics
+  }), children));
 };
+
 export var HoverCard = withAnalyticsContext({
   source: 'smartLinkPreviewHoverCard'
-})(withAnalyticsEvents()(HoverCardComponent));
+})(withAnalyticsEvents()(HoverCardWithErrorBoundary));

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

@@ -4,6 +4,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
+import { SmartLinkSize, SmartLinkTheme } from '../../constants';
+export var flexibleUiOptions = {
+  hideElevation: true,
+  size: SmartLinkSize.Medium,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
+};
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);

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

@@ -1,5 +1,5 @@
 import { ElementName } from '../../constants';
-export var HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
+export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

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

@@ -22,6 +22,7 @@ export var InlineCard = function InlineCard(_ref) {
       isSelected = _ref.isSelected,
       renderers = _ref.renderers,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       showHoverPreview = _ref.showHoverPreview;
@@ -61,6 +62,13 @@ export var InlineCard = function InlineCard(_ref) {
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var provider = extractProvider(cardDetails);
       return /*#__PURE__*/React.createElement(InlineCardUnauthorizedView, {
         icon: provider && provider.icon,
@@ -72,6 +80,13 @@ export var InlineCard = function InlineCard(_ref) {
       });
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var providerForbidden = extractProvider(cardDetails);
       var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
       var requestAccessContext = extractRequestAccessContext({
@@ -91,6 +106,13 @@ export var InlineCard = function InlineCard(_ref) {
       });
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var providerNotFound = extractProvider(cardDetails);
       return /*#__PURE__*/React.createElement(InlineCardErroredView, {
         url: url,
@@ -103,6 +125,13 @@ export var InlineCard = function InlineCard(_ref) {
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       return /*#__PURE__*/React.createElement(CardLinkView, {
         link: url,
         isSelected: isSelected,

package/dist/types/state/actions/constants.d.ts

@@ -3,3 +3,4 @@ export declare const ANALYTICS_ERROR = "errored";
 export declare const ANALYTICS_FALLBACK = "fallback";
 export declare const ERROR_MESSAGE_OAUTH = "Provider.authFlow is not set to OAuth2.";
 export declare const ERROR_MESSAGE_FATAL = "Fatal error resolving URL";
+export declare const ERROR_MESSAGE_METADATA = "Error resolving metadata.";

package/dist/types/state/actions/index.d.ts

@@ -8,4 +8,5 @@ export declare const useSmartCardActions: (id: string, url: string, analytics: A
     reload: () => void;
     authorize: (appearance: CardAppearance) => void;
     invoke: (opts: InvokeClientOpts | InvokeServerOpts, appearance: CardInnerAppearance) => Promise<JsonLd.Response | void>;
+    loadMetadata: () => Promise<void> | undefined;
 };

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -1,3 +1,4 @@
+import { ErrorInfo } from 'react';
 import { CardType, APIError } from '@atlaskit/linking-common';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
@@ -83,6 +84,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          */
         renderSuccessEvent: (display: CardInnerAppearance, status: CardType, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        /**
+         * 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: CardInnerAppearance, id: string | undefined, error: Error, errorInfo: ErrorInfo) => void;
         /**
          * This fires an event that represents a hover preview being opened.
          * @param hoverDisplay Whether the hover preview was displayed as a card or embed.