@atlaskit/smart-card 20.0.6 → 20.1.2

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

@@ -22,6 +22,10 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
+  const mousePos = useRef({
+    x: 0,
+    y: 0
+  });
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
@@ -66,7 +70,17 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  const setMousePosition = useCallback(event => {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
@@ -92,10 +106,19 @@ export const HoverCardComponent = ({
       renderers: renderers,
       url: url
     })),
-    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
+    trigger: triggerProps => jsx("span", {
       onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard
-    }), children),
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition
+    }, jsx("span", _extends({}, triggerProps, {
+      css: {
+        position: 'sticky'
+      },
+      style: {
+        left: mousePos.current.x,
+        top: mousePos.current.y
+      }
+    })), 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/es2019/view/HoverCard/components/HoverCardContent.js

@@ -4,12 +4,14 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import extractPreview from '../../../extractors/flexible/extract-preview';
 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 { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss } from '../styled';
 import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import HoverCardLoadingView from './HoverCardLoadingView';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
   icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
@@ -41,6 +43,7 @@ export const toFooterActions = (cardActions, onActionClick) => cardActions.map(a
 }));
 
 const HoverCardContent = ({
+  id = '',
   analytics,
   cardActions = [],
   cardState,
@@ -51,6 +54,10 @@ const HoverCardContent = ({
 }) => {
   var _cardState$details;
 
+  const actions = useSmartCardActions(id, url, analytics);
+  useEffect(() => {
+    actions.loadMetadata();
+  }, [actions]);
   useEffect(() => {
     // Since hover preview only render on resolved status,
     // there is no need to check for statuses.
@@ -73,21 +80,33 @@ const HoverCardContent = ({
   } = extractMetadata(getSimulatedMetadata(extensionKey, types));
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-  return /*#__PURE__*/React.createElement(FlexibleCard, {
-    cardState: cardState,
-    onClick: onClick,
-    onResolve: onResolve,
-    renderers: renderers,
-    ui: flexibleUiOptions,
-    url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  const titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  const flexibleCardProps = {
+    cardState: cardState,
+    onClick: onClick,
+    onResolve: onResolve,
+    renderers: renderers,
+    ui: flexibleUiOptions,
+    url: url,
+    children: {}
+  };
+
+  if (cardState.metadataStatus === 'pending') {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      flexibleCardProps: flexibleCardProps,
+      titleBlockProps: titleBlockProps
+    });
+  } // if metadataStatus is 'errored' simply render using data available (normal path)
+
+
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
+import FlexibleCard from '../../FlexibleCard';
+import { TitleBlock } from '../../FlexibleCard/components/blocks';
+import { CARD_WIDTH_REM, loadingViewContainer, skeletonContainer } from '../styled';
+
+const HoverCardLoadingView = ({
+  flexibleCardProps,
+  titleBlockProps
+}) => {
+  const lineHeightRem = 1.25;
+  const skeletonWidth = CARD_WIDTH_REM - 2;
+  return jsx("div", {
+    css: loadingViewContainer,
+    "data-testid": "hover-card-loading-view"
+  }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
+    css: skeletonContainer
+  }, jsx("span", null), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), jsx(LoadingSkeleton, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  })));
+};
+
+export default HoverCardLoadingView;

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

@@ -8,6 +8,7 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+export const CARD_WIDTH_REM = 24;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
 const separatorCss = css`
@@ -19,7 +20,7 @@ export const HoverCardContainer = css`
   background: none;
   border-width: 0;
   box-sizing: border-box;
-  width: 24rem;
+  width: ${CARD_WIDTH_REM}rem;
   padding: 1rem;
 
   .${loadingPlaceholderClassName} {
@@ -70,4 +71,14 @@ export const metadataBlockCss = css`
 `;
 export const footerBlockCss = css`
   padding-top: 0.25rem;
+`;
+export const loadingViewContainer = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const skeletonContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: center;
 `;

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

@@ -20,6 +20,7 @@ export const InlineCard = ({
   isSelected,
   renderers,
   onResolve,
+  onError,
   testId,
   inlinePreloaderStyle,
   showHoverPreview
@@ -64,6 +65,13 @@ export const InlineCard = ({
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const provider = extractProvider(cardDetails);
       return /*#__PURE__*/React.createElement(InlineCardUnauthorizedView, {
         icon: provider && provider.icon,
@@ -75,6 +83,13 @@ export const InlineCard = ({
       });
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const providerForbidden = extractProvider(cardDetails);
       const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getUnauthorizedJsonLd().meta;
       const requestAccessContext = extractRequestAccessContext({
@@ -94,6 +109,13 @@ export const InlineCard = ({
       });
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       const providerNotFound = extractProvider(cardDetails);
       return /*#__PURE__*/React.createElement(InlineCardErroredView, {
         url: url,
@@ -106,6 +128,13 @@ export const InlineCard = ({
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+
       return /*#__PURE__*/React.createElement(CardLinkView, {
         link: url,
         isSelected: isSelected,

package/dist/esm/state/actions/constants.js

@@ -2,4 +2,5 @@ export var ANALYTICS_RESOLVING = 'resolving';
 export var ANALYTICS_ERROR = 'errored';
 export var ANALYTICS_FALLBACK = 'fallback';
 export var ERROR_MESSAGE_OAUTH = 'Provider.authFlow is not set to OAuth2.';
-export var ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
+export var ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
+export var ERROR_MESSAGE_METADATA = 'Error resolving metadata.';

package/dist/esm/state/actions/index.js

@@ -2,11 +2,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
-import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_UPDATE_METADATA_STATUS, cardAction, APIError } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
-import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
+import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL, ERROR_MESSAGE_METADATA } from './constants';
 import * as measure from '../../utils/performance';
 import { getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { addMetadataToExperience } from '../analytics';
@@ -24,11 +23,23 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     details: undefined
   },
       details = _ref.details,
-      status = _ref.status;
+      status = _ref.status,
+      metadataStatus = _ref.metadataStatus;
 
   var hasAuthFlowSupported = config.authFlow !== 'disabled';
   var hasData = !!(details && details.data);
-  var handleResolvedLinkError = useCallback(function (url, error, response) {
+  var setMetadataStatus = useCallback(function (metadataStatus) {
+    dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
+      url: url
+    }, undefined, undefined, metadataStatus));
+  }, [dispatch, url]);
+  var handleResolvedLinkError = useCallback(function (url, error, response, isMetadataRequest) {
+    // If metadata request then set metadata status, return and do not alter link status
+    if (isMetadataRequest) {
+      setMetadataStatus('errored');
+      return;
+    }
+
     if (error.kind === 'fatal') {
       // If there's no previous data in the store for this URL, then bail
       // out and let the editor handle fallbacks (returns to a blue link).
@@ -65,25 +76,34 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
         }, undefined, error));
       }
     }
-  }, [hasData, status, dispatch, details]);
+  }, [setMetadataStatus, hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = useCallback(function (resourceUrl, response) {
     var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var isMetadataRequest = arguments.length > 3 ? arguments[3] : undefined;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
     if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
-      handleResolvedLinkError(resourceUrl, new APIError('fallback', hostname, ERROR_MESSAGE_OAUTH), response);
+      handleResolvedLinkError(resourceUrl, new APIError('fallback', hostname, ERROR_MESSAGE_OAUTH), response, isMetadataRequest);
       return;
     } // Handle any other errors
 
 
     if (nextStatus === 'fatal') {
-      handleResolvedLinkError(resourceUrl, new APIError('fatal', hostname, ERROR_MESSAGE_FATAL));
+      handleResolvedLinkError(resourceUrl, new APIError('fatal', hostname, ERROR_MESSAGE_FATAL), undefined, isMetadataRequest);
+      return;
+    } // Handle errors of any other kind in the metadata request response
+
+
+    if (isMetadataRequest && nextStatus !== 'resolved') {
+      handleResolvedLinkError(resourceUrl, new APIError('error', hostname, ERROR_MESSAGE_METADATA), response, isMetadataRequest);
       return;
-    } // Dispatch Analytics and resolved card action - including unauthorized states.
+    } //if a link resolves normally, metadata will also always be resolved
 
 
+    setMetadataStatus('resolved'); // Dispatch Analytics and resolved card action - including unauthorized states.
+
     if (isReloading) {
       dispatch(cardAction(ACTION_RELOADING, {
         url: resourceUrl
@@ -91,12 +111,13 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     } else {
       dispatch(cardAction(ACTION_RESOLVED, {
         url: resourceUrl
-      }, response));
+      }, response, undefined, undefined, isMetadataRequest));
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
+  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
   var resolve = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var resourceUrl,
         isReloading,
+        isMetadataRequest,
         _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -104,24 +125,25 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
           case 0:
             resourceUrl = _args.length > 0 && _args[0] !== undefined ? _args[0] : url;
             isReloading = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
+            isMetadataRequest = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
 
-            if (!(isReloading || !hasData)) {
-              _context.next = 6;
+            if (!(isReloading || !hasData || isMetadataRequest)) {
+              _context.next = 7;
               break;
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading, isMetadataRequest);
             }).catch(function (error) {
-              return handleResolvedLinkError(resourceUrl, error);
+              return handleResolvedLinkError(resourceUrl, error, undefined, isMetadataRequest);
             }));
 
-          case 6:
+          case 7:
             addMetadataToExperience('smart-link-rendered', id, {
               cached: true
             });
 
-          case 7:
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -133,10 +155,11 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       dispatch(cardAction(ACTION_PENDING, {
         url: url
       }));
+      setMetadataStatus('pending');
     }
 
     return resolve();
-  }, [url, resolve, details, dispatch]);
+  }, [details, resolve, dispatch, url, setMetadataStatus]);
   var reload = useCallback(function () {
     var definitionId = getDefinitionId(details);
 
@@ -148,6 +171,13 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       resolve(url, true);
     }
   }, [url, details, getState, resolve]);
+  var loadMetadata = useCallback(function () {
+    //metadataStatus will be undefined for SSR links only
+    if (metadataStatus === undefined) {
+      setMetadataStatus('pending');
+      return resolve(url, false, true);
+    }
+  }, [metadataStatus, resolve, setMetadataStatus, url]);
   var authorize = useCallback(function (appearance) {
     var definitionId = getDefinitionId(details);
     var extensionKey = getExtensionKey(details);
@@ -243,7 +273,8 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       register: register,
       reload: reload,
       authorize: authorize,
-      invoke: invoke
+      invoke: invoke,
+      loadMetadata: loadMetadata
     };
-  }, [register, reload, authorize, invoke]);
+  }, [register, reload, authorize, invoke, loadMetadata]);
 };

package/dist/esm/version.json

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

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

@@ -31,6 +31,7 @@ export var BlockCard = function BlockCard(_ref) {
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform;
@@ -68,6 +69,13 @@ export var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
       return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
@@ -78,6 +86,13 @@ export var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var forbiddenViewProps = extractBlockProps(data, meta, extractorOpts);
       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({
@@ -94,6 +109,13 @@ export var BlockCard = function BlockCard(_ref) {
       }));
 
     case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       var notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
       return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
@@ -103,6 +125,13 @@ export var BlockCard = function BlockCard(_ref) {
 
     case 'fallback':
     case 'errored':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+
       if (authFlow && authFlow === 'disabled') {
         return /*#__PURE__*/React.createElement(CardLinkView, {
           link: url,

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

@@ -20,6 +20,7 @@ export function CardWithUrlContent(_ref) {
       appearance = _ref.appearance,
       dispatchAnalytics = _ref.dispatchAnalytics,
       onResolve = _ref.onResolve,
+      onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
       inheritDimensions = _ref.inheritDimensions,
@@ -97,7 +98,7 @@ export function CardWithUrlContent(_ref) {
     if (isFinalState(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
+  }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
     var cardState = state;
@@ -121,7 +122,8 @@ export function CardWithUrlContent(_ref) {
       ui: ui,
       url: url,
       testId: testId,
-      onResolve: onResolve
+      onResolve: onResolve,
+      onError: onError
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 
@@ -141,6 +143,7 @@ export function CardWithUrlContent(_ref) {
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview
@@ -160,6 +163,7 @@ export function CardWithUrlContent(_ref) {
         handleAnalytics: dispatchAnalytics,
         isSelected: isSelected,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         showActions: showActions,
         platform: platform
@@ -179,6 +183,7 @@ export function CardWithUrlContent(_ref) {
         isFrameVisible: isFrameVisible,
         platform: platform,
         onResolve: onResolve,
+        onError: onError,
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,

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

@@ -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,
@@ -89,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/common/loading-skeleton/index.js

@@ -6,11 +6,14 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
-  var testId = _ref.testId;
+  var testId = _ref.testId,
+      width = _ref.width,
+      height = _ref.height;
+  var animationWidth = width ? "".concat(width, "rem") : '20px';
+  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: -", "  0; }\n    100% { background-position: ", " 0; }\n  "])), animationWidth, animationWidth);
+  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return jsx("span", {
     css: styles,
     "data-testid": testId