@atlaskit/smart-card 20.0.6 → 20.1.2

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

@@ -27,6 +27,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeOutTimeoutId = useRef();
   var fadeInTimeoutId = useRef();
   var cardOpenTime = useRef();
+  var mousePos = useRef({
+    x: 0,
+    y: 0
+  });
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
   var hoverDisplay = 'card';
@@ -73,7 +77,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+  var setMousePosition = useCallback(function (event) {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]); // Stop hover preview content to propagate event to parent.
 
   var onClick = useCallback(function (e) {
     return e.stopPropagation();
@@ -103,10 +117,19 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return jsx("span", _extends({}, triggerProps, {
+      return 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/esm/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 var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: ActionName.CustomAction,
@@ -49,7 +51,9 @@ export 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,
@@ -57,6 +61,10 @@ 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.
@@ -85,21 +93,33 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var 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, {
+  var titleBlockProps = {
     actions: titleActions,
     maxLines: titleMaxLines,
     overrideCss: titleBlockCss,
     size: SmartLinkSize.Large,
     position: SmartLinkPosition.Center,
     subtitle: subtitle
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  };
+  var 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/esm/view/HoverCard/components/HoverCardLoadingView.js

@@ -0,0 +1,31 @@
+/** @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';
+
+var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+  var flexibleCardProps = _ref.flexibleCardProps,
+      titleBlockProps = _ref.titleBlockProps;
+  var lineHeightRem = 1.25;
+  var 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/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
@@ -12,10 +12,13 @@ export var flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
+export var CARD_WIDTH_REM = 24;
 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);
-export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
+export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));

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/hooks/useSmartLink.d.ts

@@ -7,6 +7,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         reload: () => void;
         authorize: (appearance: import("@atlaskit/linking-common").CardAppearance) => void;
         invoke: (opts: import("../../model/invoke-opts").InvokeClientOpts | import("../../model/invoke-opts").InvokeServerOpts, appearance: import("../../view/Card/types").CardInnerAppearance) => Promise<void | import("json-ld-types").JsonLd.Response<import("json-ld-types").JsonLd.Data.BaseData>>;
+        loadMetadata: () => Promise<void> | undefined;
     };
     config: (import("@atlaskit/link-provider").CardProviderCacheOpts & import("@atlaskit/link-provider").CardAuthFlowOpts) | undefined;
     analytics: {

package/dist/types/view/BlockCard/types.d.ts

@@ -4,6 +4,7 @@ import { CardState } from '../../state/types';
 import { InvokeHandler } from '../../model/invoke-handler';
 import { AnalyticsHandler } from '../../utils/types';
 import { OnResolveCallback, CardPlatform } from '../Card/types';
+import { OnErrorCallback } from '../types';
 export declare type BlockCardProps = {
     id: string;
     url: string;
@@ -16,6 +17,7 @@ export declare type BlockCardProps = {
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     isSelected?: boolean;
     onResolve?: OnResolveCallback;
+    onError?: OnErrorCallback;
     testId?: string;
     showActions?: boolean;
     renderers?: CardProviderRenderers;

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onError" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/Card/types.d.ts

@@ -3,7 +3,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { CardAppearance, CardPlatform } from '@atlaskit/linking-common';
 import { AnalyticsFacade } from '../../state/analytics';
 import { FlexibleUiOptions } from '../FlexibleCard/types';
-import { InlinePreloaderStyle } from '../types';
+import { InlinePreloaderStyle, OnErrorCallback } from '../types';
 export type { CardAppearance, CardPlatform };
 export declare type CardInnerAppearance = CardAppearance | 'preview' | 'flexible';
 export declare type OnResolveCallback = (data: {
@@ -25,6 +25,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     testId?: string;
     showActions?: boolean;
     onResolve?: OnResolveCallback;
+    onError?: OnErrorCallback;
     inheritDimensions?: boolean;
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
     inlinePreloaderStyle?: InlinePreloaderStyle;

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from './types';
-export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;
+export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -2,7 +2,7 @@ import { EventHandler, MouseEvent, KeyboardEvent } from 'react';
 import { CardAppearance, CardPlatform, OnResolveCallback } from '../Card/types';
 import { AnalyticsHandler } from '../../utils/types';
 import { FlexibleUiOptions } from '../FlexibleCard/types';
-import { InlinePreloaderStyle } from '../types';
+import { InlinePreloaderStyle, OnErrorCallback } from '../types';
 import { AnalyticsFacade } from '../../state/analytics';
 export declare type CardWithUrlContentProps = {
     id: string;
@@ -16,6 +16,7 @@ export declare type CardWithUrlContentProps = {
     dispatchAnalytics: AnalyticsHandler;
     testId?: string;
     onResolve?: OnResolveCallback;
+    onError?: OnErrorCallback;
     showActions?: boolean;
     inheritDimensions?: boolean;
     embedIframeRef?: React.Ref<HTMLIFrameElement>;

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -13,33 +13,33 @@ export interface WrapperProps {
 export declare const borderRadius: string;
 export declare const ellipsis: (maxWidth?: string | number) => string;
 export declare const csssize: (value?: string | number) => string;
-export declare const LinkWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, any>;
-export declare const Wrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, any>;
+export declare const LinkWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, object>;
+export declare const Wrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, object>;
 export declare const embedHeaderHeight = 32;
-export declare const Header: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
+export declare const Header: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export interface PlaceholderProps {
     isPlaceholder: boolean;
 }
-export declare const IconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderProps, any>;
-export declare const TextWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderProps, any>;
+export declare const IconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderProps, object>;
+export declare const TextWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderProps, object>;
 export interface ContentProps {
     isInteractive: boolean;
 }
-export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentProps, any>;
+export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentProps, object>;
 export interface ImageProps {
     size: number;
 }
-export declare const Image: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageProps, any>;
+export declare const Image: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageProps, object>;
 export declare const maxAvatarCount = 6;
-export declare const ContentWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const Title: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const Byline: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const Description: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const ResolvedViewIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
+export declare const ContentWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Title: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Byline: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Description: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ResolvedViewIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export interface ThumbnailProps {
     src: string;
 }
-export declare const Thumbnail: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThumbnailProps, any>;
-export declare const UsersWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const ActionsWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const AlertWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
+export declare const Thumbnail: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThumbnailProps, object>;
+export declare const UsersWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ActionsWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const AlertWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/dist/types/view/EmbedCard/types.d.ts

@@ -5,6 +5,7 @@ import { CardPlatform, OnResolveCallback } from '../Card/types';
 import { ReactNode } from 'react';
 import { ActionProps } from '../BlockCard/components/Action';
 import { RequestAccessMessageKey } from '../../messages';
+import { OnErrorCallback } from '../types';
 export declare type EmbedCardProps = {
     url: string;
     cardState: CardState;
@@ -18,6 +19,7 @@ export declare type EmbedCardProps = {
     isFrameVisible?: boolean;
     platform?: CardPlatform;
     onResolve?: OnResolveCallback;
+    onError?: OnErrorCallback;
     testId?: string;
     inheritDimensions?: boolean;
     showActions?: boolean;

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/types.d.ts

@@ -5,4 +5,12 @@ export declare type LoadingSkeletonProps = {
      * code, serving as a hook for automated tests
      */
     testId?: string;
+    /**
+     * Width of the loading skeleton, defaults to width of the parent element
+     */
+    width?: number;
+    /**
+     * Height of loading skeleton, defaults to height of the parent element
+     */
+    height?: number;
 };

package/dist/types/view/FlexibleCard/types.d.ts

@@ -5,6 +5,7 @@ import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { CardAppearance } from '../../view/Card';
 import { OnResolveCallback } from '../Card/types';
+import { OnErrorCallback } from '../types';
 export declare type FlexibleCardProps = {
     /**
      * @internal A unique ID for a Smart Link.
@@ -36,6 +37,14 @@ export declare type FlexibleCardProps = {
      * @internal
      */
     onAuthorize?: () => void;
+    /**
+     * function to be called after a flexible card has rendered its error states
+     */
+    onError?: OnErrorCallback;
+    /**
+     * function to be called after a flexible card has rendered its resolved state
+     */
+    onResolve?: OnResolveCallback;
     /**
      * Any additional renderers required by Flexible UI. Currently used by icon
      * to render Emoji.
@@ -56,10 +65,6 @@ export declare type FlexibleCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
-    /**
-     * function to be called after a flexible card has rendered its resolved state
-     */
-    onResolve?: OnResolveCallback;
 };
 export declare type FlexibleUiOptions = {
     /**

package/dist/types/view/HoverCard/components/HoverCardLoadingView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HoverCardLoadingViewProps } from '../types';
+declare const HoverCardLoadingView: React.FC<HoverCardLoadingViewProps>;
+export default HoverCardLoadingView;

package/dist/types/view/HoverCard/styled.d.ts

@@ -1,6 +1,9 @@
 import { FlexibleUiOptions } from '../FlexibleCard/types';
 export declare const flexibleUiOptions: FlexibleUiOptions;
+export declare const CARD_WIDTH_REM = 24;
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;
 export declare const footerBlockCss: import("@emotion/utils").SerializedStyles;
+export declare const loadingViewContainer: import("@emotion/utils").SerializedStyles;
+export declare const skeletonContainer: import("@emotion/utils").SerializedStyles;

package/dist/types/view/HoverCard/types.d.ts

@@ -6,6 +6,8 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsHandler } from '../../utils/types';
 import { ReactElement } from 'react';
+import { TitleBlockProps } from '../FlexibleCard/components/blocks/title-block/types';
+import { FlexibleCardProps } from '../FlexibleCard/types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     id?: string;
     url: string;
@@ -23,6 +25,7 @@ export interface MetadataOptions {
     subtitle: Array<ElementItem>;
 }
 export declare type HoverCardContentProps = {
+    id?: string;
     analytics: AnalyticsFacade;
     cardActions?: LinkAction[];
     cardState: CardState;
@@ -31,3 +34,7 @@ export declare type HoverCardContentProps = {
     onResolve: () => void;
     url: string;
 };
+export declare type HoverCardLoadingViewProps = {
+    flexibleCardProps: FlexibleCardProps;
+    titleBlockProps: TitleBlockProps;
+};

package/dist/types/view/InlineCard/Frame/styled.d.ts

@@ -5,4 +5,4 @@ export interface WrapperProps {
     withoutHover?: boolean;
     withoutBackground?: boolean;
 }
-export declare const Wrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, WrapperProps, any>;
+export declare const Wrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, WrapperProps, object>;

package/dist/types/view/InlineCard/Icon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const Icon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const AKIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").ClassAttributes<any>>, any>;
-export declare const Shimmer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").ClassAttributes<any>>, any>;
+export declare const Icon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, Pick<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement>, keyof import("react").ImgHTMLAttributes<HTMLImageElement>>, object>;
+export declare const AKIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
+export declare const Shimmer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;