@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/esm/utils/analytics.js

@@ -15,7 +15,6 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: true
 };
 export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
@@ -55,7 +54,7 @@ export var getRenderCommencedEventPayload = function getRenderCommencedEventPayl
     }
   };
 };
-export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -65,7 +64,8 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
       performanceAttributes: performanceAttributes,
       status: 'success',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };
@@ -127,19 +127,27 @@ export var getRenderErrorErrorDetail = function getRenderErrorErrorDetail(error)
     return error.message;
   }
 };
+export var getErrorTraceContext = function getErrorTraceContext(error) {
+  if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
+    var _error$secondaryError;
+
+    return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+  }
+};
 export var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error) {
   if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
     return error.secondaryError.metadata;
   }
 };
-export var extractErrorInfo = function extractErrorInfo(error) {
+export var extractErrorInfo = function extractErrorInfo(error, metadataTraceContext) {
   return {
     failReason: getRenderErrorFailReason(error),
     error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error)
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
 };
-export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
+export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -148,14 +156,30 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
-    }, extractErrorInfo(error)), {}, {
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
       request: getRenderErrorRequestMetadata(error),
       ssrReliability: ssrReliability,
       traceContext: traceContext
     })
   };
 };
-export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+export var getErrorEventPayload = function getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
+  return {
+    eventType: 'operational',
+    action: 'nonCriticalFail',
+    actionSubject: 'mediaCardRender',
+    attributes: _objectSpread(_objectSpread({
+      fileAttributes: fileAttributes,
+      status: 'fail'
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
+      request: getRenderErrorRequestMetadata(error),
+      ssrReliability: ssrReliability,
+      traceContext: traceContext,
+      cardStatus: cardStatus
+    })
+  };
+};
+export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -166,7 +190,8 @@ export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatus
       status: 'fail',
       failReason: 'failed-processing',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };

package/dist/esm/utils/cardActions/styles.js

@@ -4,7 +4,6 @@ var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rootStyles } from '../../card/styles';
 import { rgba } from '../../card/styles/mixins';
@@ -17,10 +16,10 @@ export var CardActionIconButtonVariant;
 })(CardActionIconButtonVariant || (CardActionIconButtonVariant = {}));
 
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background-color: ".concat(token('elevation.surface.overlay', rgba(N0, 0.8)), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ").concat(token('elevation.surface.overlay.hovered', rgba(N0, 0.6)), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat(token('color.background.neutral.subtle.hovered', 'rgba(9, 30, 66, 0.06)'), ";\n    }\n  ");
+  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat(rgba(N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat(rgba(N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
 
 export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), token('color.icon', N500), getVariantStyles(variant));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
 };

package/dist/esm/utils/errorIcon/styles.js

@@ -2,6 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
-export var errorIconWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n"])), token('color.icon.warning', '#ff991f'));
+export var errorIconWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");

package/dist/esm/utils/lightCards/styles.js

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 
 import { css, keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
@@ -12,13 +11,13 @@ export var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions,
       theme = _ref.theme;
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: "var(--ds-background-neutral, ".concat(N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })({
     theme: theme
   }), themed({
-    light: token('color.icon', N50),
-    dark: token('color.icon', DN100)
+    light: "var(--ds-icon, ".concat(N50, ")"),
+    dark: "var(--ds-icon, ".concat(DN100, ")")
   })({
     theme: theme
   }), borderRadius, dimensions.width, dimensions.height);

package/dist/esm/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.1";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.3.2",
+	"version": "74.4.1",
 	"sideEffects": false
 }

package/dist/types/card/card.d.ts

@@ -39,7 +39,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private fireCommencedEvent;
     private fireCopiedEvent;
     private fireScreenEvent;
-    private fireLocalPreviewErrorEvent;
+    private fireNonCriticalErrorEvent;
     private safeSetState;
     unsubscribe: () => void;
     get actions(): CardAction[];

package/dist/types/card/cardAnalytics.d.ts

@@ -3,7 +3,8 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../utils/analytics';
 import { CardStatus } from '../types';
 import { MediaCardError } from '../errors';
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;
+export declare const fireNonCriticalErrorEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, cardStatus: CardStatus, fileAttributes: FileAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => void;

package/dist/types/card/cardState.d.ts

@@ -1,5 +1,10 @@
 import { FileState } from '@atlaskit/media-client';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { CardState } from '../types';
-export declare const createStateUpdater: (newState: Partial<CardState>) => (prevState: CardState) => Pick<CardState, keyof CardState>;
+import { MediaCardError } from '../errors';
+/**
+ * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
+ * The output of the updater is shallowly merged with state."
+ */
+export declare const createStateUpdater: (newState: Partial<CardState>, fireErrorEvent: (error: MediaCardError) => void) => (prevState: CardState) => Partial<CardState>;
 export declare const getCardStateFromFileState: (fileState: FileState, isBannedLocalPreview: boolean, featureFlags?: MediaFeatureFlags | undefined) => Partial<CardState>;

package/dist/types/card/getCardPreview/index.d.ts

@@ -19,7 +19,7 @@ export declare type CardPreviewParams = {
     id: string;
     dimensions?: CardDimensions;
     filePreview?: FilePreview | Promise<FilePreview>;
-    onLocalPreviewError?: (error: MediaCardError) => void;
+    onLocalPreviewError: (error: MediaCardError) => void;
     isRemotePreviewReady: boolean;
     imageUrlParams: MediaStoreGetFileImageParams;
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;

package/dist/types/card/media-card-analytics-error-boundary.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { CardDimensions, CardOnClickCallback } from '../types';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export declare type MediaCardAnalyticsErrorBoundaryProps = {
+    dimensions?: CardDimensions;
+    data?: {
+        [k: string]: any;
+    };
+    onClick?: CardOnClickCallback;
+    featureFlags?: MediaFeatureFlags;
+} & WithAnalyticsEventsProps;
+declare const MediaCardAnalyticsErrorBoundary: React.ComponentType<MediaCardAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
+export default MediaCardAnalyticsErrorBoundary;

package/dist/types/card/ui/newFileExperience/styles.d.ts

@@ -1,5 +1,5 @@
 import { NewFileExperienceWrapperProps } from './types';
 export declare const newFileExperienceWrapperStyles: {
-    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, }: NewFileExperienceWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, dimensions, appearance, disableOverlay, displayBackground, selected, isPlayButtonClickable, isTickBoxSelectable, shouldDisplayTooltip, mediaCardCursor, theme, }: NewFileExperienceWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

package/dist/types/card/ui/newFileExperience/types.d.ts

@@ -3,6 +3,7 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions, CardAppearance } from '../../../types';
 import { Breakpoint } from '../common';
 import { MediaCardCursor } from '../../../types';
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export interface NewFileExperienceWrapperProps {
     testId?: string;
     breakpoint: Breakpoint;
@@ -20,4 +21,5 @@ export interface NewFileExperienceWrapperProps {
     shouldDisplayTooltip: boolean;
     innerRef?: RefObject<HTMLDivElement>;
     children?: JSX.Element;
+    theme?: GlobalThemeTokens;
 }

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { TitleBoxFooterProps, TitleBoxHeaderProps, TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor, theme, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types/card/ui/titleBox/types.d.ts

@@ -2,6 +2,7 @@
 import { MessageDescriptor } from 'react-intl-next';
 import { Breakpoint } from '../common';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../types';
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
 export declare type TitleBoxProps = {
     name: string;
     breakpoint: Breakpoint;
@@ -16,6 +17,7 @@ export declare type TitleBoxWrapperProps = {
     breakpoint: Breakpoint;
     titleBoxBgColor?: string;
     children?: JSX.Element | JSX.Element[] | any;
+    theme?: GlobalThemeTokens;
 };
 export declare type TitleBoxFooterProps = {
     hasIconOverlap: boolean;

package/dist/types/card/ui/unhandledErrorCard/index.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { UnhandledErrorCardProps } from './types';
+export declare class UnhandledErrorCard extends Component<UnhandledErrorCardProps, {}> {
+    render(): jsx.JSX.Element;
+}

package/dist/types/card/ui/unhandledErrorCard/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CardDimensions } from '../../../types';
+export interface UnhandledErrorCardProps {
+    dimensions?: CardDimensions;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}

package/dist/types/errors.d.ts

@@ -5,7 +5,7 @@ import { CardPreview } from './types';
  */
 export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export declare type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
-export declare type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready';
+export declare type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export declare type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export declare type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
 export declare class MediaCardError extends Error {
@@ -37,5 +37,5 @@ export declare const isLocalPreviewError: (err: Error) => err is LocalPreviewErr
 export declare const isRemotePreviewError: (err: Error) => err is LocalPreviewError;
 export declare const isUnsupportedLocalPreviewError: (err: Error) => boolean;
 export declare function isImageLoadError(err: Error): err is ImageLoadError;
-export declare const ensureMediaCardError: (primaryReason: MediaCardErrorPrimaryReason, error: Error) => MediaCardError;
+export declare const ensureMediaCardError: (primaryReason: MediaCardErrorPrimaryReason, error: Error, updatePrimaryReason?: boolean | undefined) => MediaCardError;
 export declare const isUploadError: (error?: MediaCardError | undefined) => boolean | undefined;

package/dist/types/inline/mediaInlineAnalyticsErrorBoundary.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export declare type MediaInlineAnalyticsErrorBoundaryProps = {
+    data?: {
+        [k: string]: any;
+    };
+    featureFlags?: MediaFeatureFlags;
+} & WithAnalyticsEventsProps;
+declare const MediaInlineAnalyticsErrorBoundary: React.ComponentType<MediaInlineAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
+export default MediaInlineAnalyticsErrorBoundary;

package/dist/types/types.d.ts

@@ -75,6 +75,9 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly isLazy?: boolean;
     readonly useInlinePlayer?: boolean;
     readonly shouldOpenMediaViewer?: boolean;
+    /** Imported from MediaViewer. It includes data source like collection name,
+     *  media file list.
+     */
     readonly mediaViewerDataSource?: MediaViewerDataSource;
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;

package/dist/types/utils/analytics.d.ts

@@ -2,7 +2,7 @@ import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/
 import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
-import { CardPreviewSource, CardDimensions } from '../types';
+import { CardPreviewSource, CardDimensions, CardStatus } from '../types';
 export declare type CardPreviewAttributes = {
     fileId: string;
     prevDimensions: CardDimensions | undefined;
@@ -21,6 +21,7 @@ export declare type MediaCardErrorInfo = {
     failReason: FailedErrorFailReason;
     error: MediaClientErrorReason | 'nativeError';
     errorDetail: string;
+    metadataTraceContext?: MediaTraceContext;
 };
 export declare type SSRStatusFail = MediaCardErrorInfo & {
     status: 'fail';
@@ -42,6 +43,23 @@ export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileA
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
 }, 'failed', 'mediaCardRender'>;
+export declare type ErrorEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & WithTraceContext & FailureAttributes & {
+    cardStatus: CardStatus;
+    failReason: FailedErrorFailReason | 'failed-processing';
+    error?: MediaClientErrorReason | 'nativeError';
+    request?: RequestMetadata;
+}, 'nonCriticalFail', 'mediaCardRender'>;
+export declare type ErrorBoundaryErrorInfo = {
+    componentStack: string;
+};
+export declare type AnalyticsErrorBoundaryAttributes = {
+    error?: Error | string;
+    info?: ErrorBoundaryErrorInfo;
+    browserInfo: string;
+    failReason: string;
+};
+export declare type AnalyticsErrorBoundaryCardPayload = OperationalEventPayload<AnalyticsErrorBoundaryAttributes, 'failed', 'mediaCardRender'>;
+export declare type AnalyticsErrorBoundaryInlinePayload = OperationalEventPayload<AnalyticsErrorBoundaryAttributes, 'failed', 'mediaInlineRender'>;
 export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes & WithTraceContext, 'succeeded', 'mediaCardRender'>;
 export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithTraceContext, 'commenced', 'mediaCardRender'>;
 export declare type CacheHitEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'cache-hit', 'mediaCardCache'>;
@@ -56,21 +74,23 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
         fileAttributes: FileAttributes;
     };
 };
-export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload | CacheHitEventPayload | RemoteSuccessEventPayload;
+export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload | CacheHitEventPayload | RemoteSuccessEventPayload | ErrorEventPayload | AnalyticsErrorBoundaryCardPayload | AnalyticsErrorBoundaryInlinePayload;
 export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: import("@atlaskit/media-common").FileStatus | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
 export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => RenderCommencedEventPayload;
-export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderSucceededEventPayload;
+export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => RenderSucceededEventPayload;
 export declare const getCacheHitEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => CacheHitEventPayload;
 export declare const getRemoteSuccessEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => RemoteSuccessEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderErrorFailReason: (error: MediaCardError) => FailedErrorFailReason;
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
+export declare const getErrorTraceContext: (error: MediaCardError) => MediaTraceContext | undefined;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
-export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
-export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
-export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
+export declare const extractErrorInfo: (error: MediaCardError, metadataTraceContext?: MediaTraceContext | undefined) => MediaCardErrorInfo;
+export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => RenderFailedEventPayload;
+export declare const getErrorEventPayload: (cardStatus: CardStatus, fileAttributes: FileAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => ErrorEventPayload;
+export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext, metadataTraceContext?: MediaTraceContext | undefined) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;
 export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 export declare const createAndFireMediaCardEvent: (payload: MediaCardAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/example-helpers/styles.ts

@@ -84,6 +84,19 @@ export const externalIdentifierWrapperStyles = css`
   }
 `;
 
+export const unhandledErrorCardWrapperStyles = css`
+  padding: 20px;
+
+  > div:first-child {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  label {
+    margin-right: 20px;
+  }
+`;
+
 export const inlineCardVideoWrapperItemStyles = css`
   padding: 10px;
   border: 1px solid ${token('color.border.bold', 'black')};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.3.2",
+  "version": "74.4.1",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/dropdown-menu": "^11.5.0",
-    "@atlaskit/editor-shared-styles": "^2.2.0",
+    "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^19.0.0",
-    "@atlaskit/media-common": "^2.17.0",
+    "@atlaskit/media-client": "^20.0.0",
+    "@atlaskit/media-common": "^2.18.0",
     "@atlaskit/media-ui": "^22.2.0",
-    "@atlaskit/media-viewer": "^47.2.0",
+    "@atlaskit/media-viewer": "^47.3.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
@@ -61,11 +61,12 @@
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.4.0",
     "@atlaskit/media-core": "^34.0.0",
-    "@atlaskit/media-picker": "^64.0.0",
-    "@atlaskit/media-test-helpers": "^30.0.0",
+    "@atlaskit/media-picker": "^64.1.0",
+    "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/section-message": "^6.3.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/media-card"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -147,7 +148,6 @@ export interface CardProps extends SharedCardProps, CardEventProps {
   readonly isLazy?: boolean;
   // (undocumented)
   readonly mediaClient: MediaClient;
-  // (undocumented)
   readonly mediaViewerDataSource?: MediaViewerDataSource;
   // (undocumented)
   readonly shouldEnableDownloadButton?: boolean;
@@ -333,6 +333,7 @@ export { NumericalCardDimensions };
 // @public (undocumented)
 type RemotePreviewPrimaryReason =
   | 'remote-preview-fetch'
+  | 'remote-preview-fetch-ssr'
   | 'remote-preview-not-ready';
 
 // @public (undocumented)
@@ -389,3 +390,18 @@ export type TitleBoxIcon = 'LockFilledIcon';
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "@emotion/react": "^11.7.1",
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/dist/cjs/utils/media-card-analytics-error-boundary.js

@@ -1,59 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _mediaCommon = require("@atlaskit/media-common");
-
-var _AnalyticsErrorBoundary = _interopRequireDefault(require("@atlaskit/analytics-next/AnalyticsErrorBoundary"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var MediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(MediaCardAnalyticsErrorBoundary, _React$Component);
-
-  var _super = _createSuper(MediaCardAnalyticsErrorBoundary);
-
-  function MediaCardAnalyticsErrorBoundary() {
-    (0, _classCallCheck2.default)(this, MediaCardAnalyticsErrorBoundary);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(MediaCardAnalyticsErrorBoundary, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$data = _this$props.data,
-          data = _this$props$data === void 0 ? {} : _this$props$data,
-          children = _this$props.children;
-      return /*#__PURE__*/_react.default.createElement(_AnalyticsErrorBoundary.default, {
-        channel: _mediaCommon.ANALYTICS_MEDIA_CHANNEL,
-        data: data
-      }, children);
-    }
-  }]);
-  return MediaCardAnalyticsErrorBoundary;
-}(_react.default.Component);
-
-exports.default = MediaCardAnalyticsErrorBoundary;
-(0, _defineProperty2.default)(MediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');

package/dist/es2019/utils/media-card-analytics-error-boundary.js

@@ -1,19 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import AnalyticsErrorBoundary from '@atlaskit/analytics-next/AnalyticsErrorBoundary';
-export default class MediaCardAnalyticsErrorBoundary extends React.Component {
-  render() {
-    const {
-      data = {},
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
-      channel: ANALYTICS_MEDIA_CHANNEL,
-      data: data
-    }, children);
-  }
-
-}
-
-_defineProperty(MediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');