@atlaskit/media-card 72.0.0 → 72.1.0

package/dist/esm/root/ui/progressBar/progressBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,

package/dist/esm/root/ui/progressBar/styled.js

@@ -6,8 +6,7 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { getTitleBoxHeight, responsiveSettings } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 var height = 3;
 var padding = 1;
 var width = 95; // %

package/dist/esm/root/ui/styled.js

@@ -1,26 +1,68 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import styled from 'styled-components';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20, N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../styles';
 import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
+import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
 import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
 import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { SSRFileExperienceWrapper } from './styledSSR';
+import { Breakpoint, responsiveSettings } from './common';
+var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export var calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  var _ref = breakpointSizes.find(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        _breakpoint = _ref4[0],
+        limit = _ref4[1];
+
+    return wrapperWidth <= limit;
+  }) || [Breakpoint.SMALL],
+      _ref2 = _slicedToArray(_ref, 1),
+      breakpoint = _ref2[0];
+
+  return breakpoint;
+};
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
+  var setting = responsiveSettings[breakpoint];
+  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
+};
 
 var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref = dimensions || {},
-      width = _ref.width,
-      height = _ref.height;
+  var _ref5 = dimensions || {},
+      width = _ref5.width,
+      height = _ref5.height;
 
   var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
       defaultWidth = _getDefaultCardDimens.width,
       defaultHeight = _getDefaultCardDimens.height;
 
   return "\n    width: ".concat(getCSSUnitValue(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A) : '';
+  var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
+};
+
+var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
+  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -39,12 +81,18 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
 
-export var NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
-  var dimensions = _ref2.dimensions,
-      appearance = _ref2.appearance,
-      isPlayButtonClickable = _ref2.isPlayButtonClickable,
-      isTickBoxSelectable = _ref2.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref2.shouldDisplayTooltip;
-  return "\n    ".concat(hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+export var NewFileExperienceWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var breakpoint = _ref6.breakpoint,
+      dimensions = _ref6.dimensions,
+      appearance = _ref6.appearance,
+      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
+      disableOverlay = _ref6.disableOverlay,
+      displayBackground = _ref6.displayBackground,
+      selected = _ref6.selected,
+      isPlayButtonClickable = _ref6.isPlayButtonClickable,
+      isTickBoxSelectable = _ref6.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
+  return "\n    ".concat(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
 });
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);

package/dist/esm/root/ui/titleBox/styled.js

@@ -3,8 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

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

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -80,16 +81,22 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/React.createElement(DropdownMenu, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/React.createElement(MoreIcon, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = _objectWithoutProperties(_ref, ["triggerRef"]);
+
+            return /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/esm/version.json

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

package/dist/types/errors.d.ts

@@ -1,8 +1,9 @@
 import { CardPreview } from '.';
-export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | 'preview-fetch';
+export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | '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 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 {
     readonly primaryReason: MediaCardErrorPrimaryReason;
     readonly secondaryError?: Error | undefined;
@@ -18,7 +19,12 @@ export declare class RemotePreviewError extends MediaCardError {
     readonly secondaryError?: Error | undefined;
     constructor(primaryReason: RemotePreviewPrimaryReason, secondaryError?: Error | undefined);
 }
-export declare const getImageLoadPrimaryReason: (source?: "local" | "remote" | "cache-local" | "cache-remote" | "external" | undefined) => ImageLoadPrimaryReason;
+export declare class SsrPreviewError extends MediaCardError {
+    readonly primaryReason: SsrPreviewPrimaryReason;
+    readonly secondaryError?: Error | undefined;
+    constructor(primaryReason: SsrPreviewPrimaryReason, secondaryError?: Error | undefined);
+}
+export declare const getImageLoadPrimaryReason: (source?: "local" | "remote" | "ssr-server" | "ssr-client" | "cache-local" | "cache-remote" | "cache-ssr-client" | "cache-ssr-server" | "external" | undefined) => ImageLoadPrimaryReason;
 export declare class ImageLoadError extends MediaCardError {
     constructor(source?: CardPreview['source']);
 }
@@ -28,4 +34,4 @@ export declare const isRemotePreviewError: (err: Error) => err is LocalPreviewEr
 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 isUploadError: (error: MediaCardError) => boolean;
+export declare const isUploadError: (error?: MediaCardError | undefined) => boolean | undefined;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { FileDetails, MediaClient, Identifier, ImageResizeMode, FileState } from '@atlaskit/media-client';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { MediaFeatureFlags, NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaFeatureFlags, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { CardAction } from './actions';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
 import { CardPreview, CardStatus, CardAppearance } from './types';
@@ -48,6 +48,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly mediaViewerDataSource?: MediaViewerDataSource;
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;
+    readonly ssr?: SSR;
 }
 export interface CardState {
     status: CardStatus;

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

@@ -1,20 +1,6 @@
 import React from 'react';
-import { WithMediaClientConfigProps } from '@atlaskit/media-client';
-import { MediaCardAnalyticsErrorBoundaryProps } from '../media-card-analytics-error-boundary';
-import { CardWithAnalyticsEventsProps } from '.';
+import type { WithMediaClientConfigProps } from '@atlaskit/media-client';
+import type { CardWithAnalyticsEventsProps } from '.';
 export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardWithAnalyticsEventsProps>;
-declare type CardWithMediaClientConfigComponent = React.ComponentType<CardWithMediaClientConfigProps>;
-declare type MediaCardErrorBoundaryComponent = React.ComponentType<MediaCardAnalyticsErrorBoundaryProps>;
-export interface AsyncCardState {
-    Card?: CardWithMediaClientConfigComponent;
-    MediaCardErrorBoundary?: MediaCardErrorBoundaryComponent;
-}
-export default class CardLoader extends React.PureComponent<CardWithMediaClientConfigProps & AsyncCardState, AsyncCardState> {
-    static displayName: string;
-    static Card?: CardWithMediaClientConfigComponent;
-    static MediaCardErrorBoundary?: MediaCardErrorBoundaryComponent;
-    state: AsyncCardState;
-    componentDidMount(): Promise<void>;
-    render(): JSX.Element;
-}
-export {};
+declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
+export default CardLoader;

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

@@ -1,5 +1,5 @@
 import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs } from '@atlaskit/media-client';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
 import { CardDimensions } from '../../../utils/cardDimensions';
 import { MediaCardError } from '../../../errors';
 import { CardStatus, CardPreview } from '../../../types';
@@ -42,3 +42,9 @@ export declare const shouldResolvePreview: ({ status, fileState, dimensions, pre
     isBannedLocalPreview: boolean;
     featureFlags?: MediaFeatureFlags | undefined;
 }) => boolean;
+export declare const getSSRCardPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => CardPreview;
+export declare const isLocalPreview: (preview: CardPreview) => boolean;
+export declare const isSSRPreview: (preview: CardPreview) => boolean;
+export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
+export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
+export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => Promise<CardPreview>;

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

@@ -21,6 +21,8 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     private getImageURLParams;
     private getMediaBlobUrlAttrs;
     private getCardPreviewParams;
+    private setCacheSSRPreview;
+    private resolveSSRPreview;
     private resolvePreview;
     subscribeInternalFile(identifier: FileIdentifier): void;
     private get requestedDimensions();

package/dist/types/root/cardView.d.ts

@@ -18,6 +18,8 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
     readonly onImageLoad: () => void;
     readonly onImageError: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
 }
 export interface CardViewState {
@@ -71,4 +73,4 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private getRenderConfigByStatus;
     private renderNewExperienceCard;
 }
-export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;
+export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;

package/dist/types/root/ui/common.d.ts

@@ -1,4 +1,7 @@
-import { Breakpoint } from './Breakpoint';
+export declare enum Breakpoint {
+    SMALL = "small",
+    LARGE = "large"
+}
 export declare const responsiveSettings: {
     small: {
         fontSize: number;

package/dist/types/root/ui/iconWrapper/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare function titleBoxHeight(hasTitleBox: boolean, breakpoint: Breakpoint): string;
 export declare type IconWrapperProps = {
     hasTitleBox: boolean;

package/dist/types/root/ui/imageRenderer/imageRenderer.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
-import { MediaType, ImageResizeMode, MediaItemType } from '@atlaskit/media-client';
+import { MediaType, ImageResizeMode } from '@atlaskit/media-client';
 export declare type ImageRendererProps = {
     readonly dataURI: string;
     readonly mediaType: MediaType;
-    readonly mediaItemType: MediaItemType;
     readonly previewOrientation?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
     readonly onDisplayImage?: () => void;
     readonly onImageError?: () => void;
     readonly onImageLoad?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
 };
 export declare const ImageRenderer: React.FC<ImageRendererProps>;

package/dist/types/root/ui/loadingRateLimited/loadingRateLimited.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare const LoadingRateLimited: ({ breakpoint, positionBottom, }: {
     breakpoint?: Breakpoint | undefined;
     positionBottom?: boolean | undefined;

package/dist/types/root/ui/loadingRateLimited/styled.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ComponentClass } from 'react';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare const LoadingRateLimitedContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const WarningIconWrapper: ComponentClass<HTMLAttributes<{}>>;
 export declare type StyledTextProps = {

package/dist/types/root/ui/progressBar/progressBar.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare type ProgressBarProps = {
     progress?: number;
     breakpoint?: Breakpoint;

package/dist/types/root/ui/progressBar/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, multiplier?: number): string;
 export declare type StyledBarProps = {
     progress: number;

package/dist/types/root/ui/styled.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
-import { BaseNewFileExperienceWrapperProps } from './styledSSR';
-export interface NewFileExperienceWrapperProps extends BaseNewFileExperienceWrapperProps {
+import { CardDimensions, CardAppearance } from '../..';
+import { Breakpoint } from './common';
+export declare const calcBreakpointSize: (wrapperWidth?: number) => Breakpoint;
+export interface NewFileExperienceWrapperProps {
+    breakpoint: Breakpoint;
+    dimensions?: CardDimensions;
+    appearance?: CardAppearance;
+    mediaType?: string;
     shouldUsePointerCursor: boolean;
     disableOverlay: boolean;
     displayBackground: boolean;
@@ -9,4 +15,5 @@ export interface NewFileExperienceWrapperProps extends BaseNewFileExperienceWrap
     isTickBoxSelectable: boolean;
     shouldDisplayTooltip: boolean;
 }
-export declare const NewFileExperienceWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BaseNewFileExperienceWrapperProps & NewFileExperienceWrapperProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BaseNewFileExperienceWrapperProps & NewFileExperienceWrapperProps>;
+export declare const NewFileExperienceWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps>;
+export declare const CardImageContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/types/root/ui/titleBox/failedTitleBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 import { FormattedMessage } from 'react-intl';
 export declare type OnRetryFunction = () => void;
 export declare type FailedTitleBoxProps = {

package/dist/types/root/ui/titleBox/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare type TitleBoxWrapperProps = {
     breakpoint: Breakpoint;
     titleBoxBgColor?: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react-intl" />
 import React from 'react';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export declare type TitleBoxProps = {
     name: string;
     breakpoint: Breakpoint;

package/dist/types/types.d.ts

@@ -7,7 +7,7 @@ export declare type FilePreviewStatus = {
 };
 export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
 export declare type CardDimensionValue = number | string;
-export declare type CardPreviewSource = 'local' | 'remote' | 'cache-local' | 'cache-remote' | 'external';
+export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
 export interface CardPreview {
     dataURI: string;
     orientation?: number;

package/example-helpers/developmentUseMessage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import InlineMessage from '@atlaskit/inline-message';
+
+const DevelopmentUseMessage: React.FC = () => (
+  <div style={{ textAlign: 'center' }}>
+    <InlineMessage type={'warning'} title={'Development use only'}>
+      The purpose of this example is to explore on edge cases for this
+      component's feature. Some ways of using the component in here might not be
+      the standard way. It is discouraged to use this code as a base for
+      consumers.
+    </InlineMessage>
+  </div>
+);
+export default DevelopmentUseMessage;

package/example-helpers/index.tsx

@@ -9,11 +9,16 @@ import {
   FeatureFlagsWrapper,
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import FabricAnalyticsListeners, {
+  AnalyticsWebClient,
+} from '@atlaskit/analytics-listeners';
+
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
 import { Card, CardAppearance, CardEvent, CardAction } from '../src';
 import { relevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
 import { MediaCardError } from '../src/errors';
+import DevelopmentUseMessage from './developmentUseMessage';
 
 const mediaClientConfig = createStorybookMediaClientConfig();
 
@@ -119,10 +124,20 @@ export const wrongMediaClientConfig = createStorybookMediaClientConfig({
 });
 export const wrongCollection = 'adfasdf';
 
-export const MainWrapper: React.FC = ({ children }) => (
-  <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
-    {children}
-  </FeatureFlagsWrapper>
+export type MainWrapperProps = {
+  developmentOnly?: boolean;
+};
+
+export const MainWrapper: React.FC<MainWrapperProps> = ({
+  children,
+  developmentOnly,
+}) => (
+  <>
+    {developmentOnly && <DevelopmentUseMessage />}
+    <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
+      {children}
+    </FeatureFlagsWrapper>
+  </>
 );
 
 export const mediaCardErrorState = (
@@ -142,3 +157,18 @@ export const mediaCardErrorState = (
       return undefined;
   }
 };
+
+export const SSRAnalyticsWrapper: React.FC = ({ children }) => {
+  const mockClient: AnalyticsWebClient = {
+    sendUIEvent: (e) => console.debug('UI event', e),
+    sendOperationalEvent: (e) => console.debug('Operational event', e),
+    sendTrackEvent: (e) => console.debug('Track event', e),
+    sendScreenEvent: (e) => console.debug('Screen event', e),
+  };
+
+  return (
+    <FabricAnalyticsListeners client={mockClient}>
+      {children}
+    </FabricAnalyticsListeners>
+  );
+};

package/example-helpers/selectableCard.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Component } from 'react';
+import { MediaClientConfig } from '@atlaskit/media-core';
 import { Identifier } from '@atlaskit/media-client';
 import { Card } from '../src';
 
 export interface SelectableCardProps {
-  mediaClientConfig: Card['props']['mediaClientConfig'];
+  mediaClientConfig: MediaClientConfig;
   identifier: Identifier;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "72.0.0",
+  "version": "72.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,13 +29,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^10.1.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/media-client": "^14.3.0",
-    "@atlaskit/media-common": "^2.9.0",
-    "@atlaskit/media-ui": "^17.1.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/media-ui": "^17.2.0",
     "@atlaskit/media-viewer": "^45.8.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.0.0",
@@ -45,6 +45,7 @@
     "eventemitter2": "^4.1.0",
     "lru-fast": "^0.2.2",
     "react-lazily-render": "^1.2.0",
+    "react-loadable": "^5.1.0",
     "video-snapshot": "^1.0.11"
   },
   "peerDependencies": {
@@ -61,9 +62,10 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/inline-message": "^11.1.5",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.8.0",
+    "@atlaskit/media-test-helpers": "^28.9.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^5.1.0",
     "@atlaskit/select": "^15.2.1",
@@ -75,6 +77,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.6",
+    "@types/react-loadable": "^5.4.1",
     "deepcopy": "0.6.3",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",