@atlaskit/media-card 71.0.0 → 73.1.0

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

@@ -1,15 +1,12 @@
-import { MediaClient, FilePreview, ImageResizeMode, FileState } from '@atlaskit/media-client';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { NumericalCardDimensions } from '../../..';
+import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
 import { CardDimensions } from '../../../utils/cardDimensions';
-import { CardPreview } from './types';
 import { MediaCardError } from '../../../errors';
-import { CardStatus, FilePreviewStatus } from '../../../types';
-export type { CardPreview } from './types';
+import { CardStatus, CardPreview } from '../../../types';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview, } from './helpers';
-export declare const extractFilePreviewStatus: (fileState: FileState, featureFlags?: MediaFeatureFlags | undefined) => FilePreviewStatus;
-export declare const shouldGetCardPreview: (cardStatus: CardStatus, { isPreviewable, hasPreview, isSupportedByBrowser }: FilePreviewStatus) => boolean;
+export { extractFilePreviewStatus } from './filePreviewStatus';
 export declare const getCardPreviewFromCache: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
+export declare const removeCardPreviewFromCache: (id: string, dimensions: CardDimensions) => void;
 /**
  * Will return the preview if available and supported by the browser
  * See extractFilePreviewStatus "hasLocalPreview" logic
@@ -18,14 +15,12 @@ export declare const getFilePreviewFromFileState: (fileState: FileState) => File
 export declare type CardPreviewParams = {
     mediaClient: MediaClient;
     id: string;
-    collectionName?: string;
     dimensions?: CardDimensions;
-    requestedDimensions: NumericalCardDimensions;
-    resizeMode?: ImageResizeMode;
-    isRemotePreviewReady: boolean;
     filePreview?: FilePreview | Promise<FilePreview>;
-    addContextToDataURI: (dataURI: string) => string;
     onLocalPreviewError?: (error: MediaCardError) => void;
+    isRemotePreviewReady: boolean;
+    imageUrlParams: MediaStoreGetFileImageParams;
+    mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -37,4 +32,19 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, collectionName, requestedDimensions, isRemotePreviewReady, addContextToDataURI, filePreview, dimensions, resizeMode, onLocalPreviewError, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const shouldResolvePreview: ({ status, fileState, dimensions, prevDimensions, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
+    status: CardStatus;
+    fileState: FileState;
+    dimensions?: CardDimensions | undefined;
+    prevDimensions?: CardDimensions | undefined;
+    hasCardPreview: boolean;
+    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/getCardStatus.d.ts

@@ -1,3 +1,4 @@
 import { FileStatus } from '@atlaskit/media-client';
 import { CardStatus, FilePreviewStatus } from '../../types';
+export declare const isFinalCardStatus: (status: CardStatus) => boolean;
 export declare const getCardStatus: (fileStatus: FileStatus, { hasFilesize, isPreviewable, hasPreview }: FilePreviewStatus) => CardStatus;

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

@@ -1,38 +1,40 @@
-/// <reference types="react-intl" />
 import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, FileState } from '@atlaskit/media-client';
+import { FileIdentifier } from '@atlaskit/media-client';
 import { Subscription } from 'rxjs/Subscription';
-import { CardAction, CardDimensions, CardProps, CardState } from '../..';
-import { CardPreviewParams } from './getCardPreview';
-export declare type CardWithAnalyticsEventsProps = CardProps & WithAnalyticsEventsProps;
-export declare class CardBase extends Component<CardWithAnalyticsEventsProps, CardState> {
+import { WrappedComponentProps } from 'react-intl-next';
+import { CardAction, CardProps, CardState } from '../..';
+export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
+export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
-    private lastFileState?;
-    private lastCardStatusUpdateTimestamp?;
+    private viewportPreAnchorRef;
+    private viewportPostAnchorRef;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
     static defaultProps: Partial<CardProps>;
-    static contextTypes: {
-        intl: ReactIntl.IntlShape;
-    };
-    constructor(props: CardWithAnalyticsEventsProps);
+    constructor(props: CardBaseProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CardProps, prevState: CardState): void;
-    shouldRefetchImage: (current?: CardDimensions | undefined, next?: CardDimensions | undefined) => boolean;
     componentWillUnmount(): void;
     updateStateForIdentifier(identifier: FileIdentifier): void;
-    private isLatestCardStatusUpdate;
-    private onLocalPreviewError;
-    private createAddContextToDataURI;
-    getCardPreviewParams: (id: string, collectionName: string | undefined, fileState: FileState) => CardPreviewParams;
+    private getImageURLParams;
+    private getMediaBlobUrlAttrs;
+    private getCardPreviewParams;
+    private setCacheSSRPreview;
+    private resolveSSRPreview;
+    private resolvePreview;
     subscribeInternalFile(identifier: FileIdentifier): void;
+    private get requestedDimensions();
     private get metadata();
     private get fileAttributes();
+    private getPerformanceAttributes;
+    private onImageError;
+    private onImageLoad;
     private fireOperationalEvent;
     private fireCommencedEvent;
     private fireCopiedEvent;
     private fireScreenEvent;
+    private fireLocalPreviewErrorEvent;
     private safeSetState;
     unsubscribe: () => void;
     get actions(): CardAction[];
@@ -49,4 +51,4 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent | undefined) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export declare const Card: React.ComponentType<CardWithAnalyticsEventsProps>;
+export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -1,13 +1,14 @@
-import React from 'react';
-import { MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
+import { MediaCardError } from '../errors';
+import { MessageDescriptor } from 'react-intl-next';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly metadata?: FileDetails;
-    readonly error?: Error;
+    readonly error?: MediaCardError;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
@@ -15,12 +16,15 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly progress?: number;
     readonly previewOrientation?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly onImageLoad: () => void;
+    readonly onImageError: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
-    timeElapsedTillCommenced?: number;
 }
 export interface CardViewState {
     elementWidth?: number;
-    isImageFailedToLoad: boolean;
+    didImageRender: boolean;
 }
 export declare type CardViewProps = CardViewOwnProps & WithAnalyticsEventsProps;
 export interface RenderConfigByStatus {
@@ -34,8 +38,8 @@ export interface RenderConfigByStatus {
     renderProgressBar?: boolean;
     renderSpinner?: boolean;
     renderFailedTitleBox?: boolean;
-    renderLoadingRateLimited?: boolean;
     renderTickBox?: boolean;
+    customTitleMessage?: MessageDescriptor;
 }
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -47,7 +51,8 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     static defaultProps: Partial<CardViewOwnProps>;
     componentDidMount(): void;
     componentDidUpdate({ dataURI: prevDataURI }: CardViewProps): void;
-    private onImageLoadError;
+    private onImageLoad;
+    private onImageError;
     private get width();
     private get breakpoint();
     saveElementWidth: () => void;
@@ -68,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" | "error" | "alt" | "dimensions" | "resizeMode" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "actions" | "testId" | "selectable" | "selected" | "disableOverlay" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "onDisplayImage" | "previewOrientation" | "timeElapsedTillCommenced" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "error" | "alt" | "dimensions" | "resizeMode" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "actions" | "testId" | "selectable" | "selected" | "disableOverlay" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "onDisplayImage" | "previewOrientation" | "timeElapsedTillCommenced" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "error" | "alt" | "dimensions" | "resizeMode" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "actions" | "testId" | "selectable" | "selected" | "disableOverlay" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "onDisplayImage" | "previewOrientation" | "timeElapsedTillCommenced" | "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" | "testId" | "appearance" | "error" | "actions" | "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" | "testId" | "appearance" | "error" | "actions" | "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" | "testId" | "appearance" | "error" | "actions" | "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/inline/loader.d.ts

@@ -16,8 +16,10 @@ export default class MediaInlineCardLoader extends React.PureComponent<MediaInli
     static displayName: string;
     static MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
     static ErrorBoundary?: ErrorBoundaryComponent;
+    isMounted: boolean;
     state: MediaInlineCardLoaderState;
     componentDidMount(): Promise<void>;
+    componentWillUnmount(): Promise<void>;
     render(): JSX.Element;
 }
 export {};

package/dist/types/root/inline/mediaInlineCard.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
 export interface MediaInlineCardProps {
     identifier: FileIdentifier;
@@ -10,7 +10,5 @@ export interface MediaInlineCardProps {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     mediaViewerDataSource?: MediaViewerDataSource;
 }
-export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & InjectedIntlProps>;
-export declare const MediaInlineCard: React.ComponentClass<MediaInlineCardProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<MediaInlineCardProps & InjectedIntlProps>;
-};
+export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
+export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

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

@@ -10,6 +10,7 @@ export interface InlinePlayerOwnProps {
     mediaClient: MediaClient;
     dimensions?: CardDimensions;
     originalDimensions?: NumericalCardDimensions;
+    autoplay: boolean;
     selected?: boolean;
     onError?: (error: Error) => void;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
@@ -19,11 +20,15 @@ export interface InlinePlayerOwnProps {
 export declare type InlinePlayerProps = InlinePlayerOwnProps & WithAnalyticsEventsProps;
 export interface InlinePlayerState {
     fileSrc?: string;
+    isUploading?: boolean;
+    progress?: number;
+    elementWidth?: number;
 }
 export declare const getPreferredVideoArtifact: (fileState: FileState) => keyof MediaFileArtifacts | undefined;
 export declare class InlinePlayerBase extends Component<InlinePlayerProps, InlinePlayerState> {
     subscription?: Subscription;
     state: InlinePlayerState;
+    divRef: React.RefObject<HTMLDivElement>;
     static defaultProps: {
         dimensions: {
             width: number;
@@ -38,6 +43,8 @@ export declare class InlinePlayerBase extends Component<InlinePlayerProps, Inlin
     componentWillUnmount(): void;
     onDownloadClick: () => void;
     onFirstPlay: () => void;
+    private get breakpoint();
+    saveElementWidth: () => void;
     render(): JSX.Element;
 }
-export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "mediaClient" | "dimensions" | "onError" | "onClick" | "createAnalyticsEvent" | "testId" | "selected" | "originalDimensions" | "identifier" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "onError" | "onClick" | "testId" | "createAnalyticsEvent" | "selected" | "dimensions" | "originalDimensions" | "mediaClient" | "identifier" | "autoplay" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -12,4 +12,5 @@ declare type InlinePlayerWrapper = {
     selected?: boolean;
 };
 export declare const InlinePlayerWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper>;
+export declare const FormattedMessageWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export {};

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/iconMessage/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type InternalIconMessageProps = {
-    messageDescriptor: FormattedMessage.MessageDescriptor;
+    messageDescriptor: MessageDescriptor;
     animated?: boolean;
     reducedFont?: boolean;
 };
@@ -11,6 +11,7 @@ declare type CreatingPreviewProps = {
 export declare const IconMessage: React.FC<InternalIconMessageProps>;
 export declare const CreatingPreview: React.FC<CreatingPreviewProps>;
 export declare const PreviewUnavailable: React.FC;
-export declare const RateLimited: React.FC;
+export declare const FailedToLoad: React.FC;
+export declare const FailedToUpload: React.FC;
 export declare const PreviewCurrentlyUnavailable: React.FC;
 export {};

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,25 +1,24 @@
 import React from 'react';
-import { MediaType, ImageResizeMode, MediaItemType } from '@atlaskit/media-client';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { RenderEventAction } from '../../../utils/analytics';
-import { WithFileAttributesProps } from '../../../utils/fileAttributesContext';
+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 timeElapsedTillCommenced?: number;
+    readonly onImageLoad?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly isImageVisible?: boolean;
+    readonly className?: string;
 };
-export declare class ImageRendererBase extends React.Component<ImageRendererProps & WithAnalyticsEventsProps & WithFileAttributesProps> {
-    private lastAnalyticsAction?;
-    componentDidMount(): void;
-    onImageLoad: () => void;
-    onImageError: () => void;
-    shouldFireEvent: (action: RenderEventAction) => boolean;
-    render(): JSX.Element;
-}
-export declare const ImageRenderer: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<ImageRendererProps & WithAnalyticsEventsProps>, "alt" | "resizeMode" | "mediaType" | "children" | "dataURI" | "mediaItemType" | "onDisplayImage" | "previewOrientation" | "timeElapsedTillCommenced" | "onImageError"> & React.RefAttributes<any>>;
+export declare const ImageRendererBase: React.FC<ImageRendererProps>;
+export declare const ImageRenderer: import("styled-components").StyledComponentClass<ImageRendererProps & {
+    isImageVisible?: boolean | undefined;
+}, any, Pick<ImageRendererProps, "className" | "mediaType" | "alt" | "dataURI" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "isImageVisible"> & {
+    theme?: any;
+} & {
+    isImageVisible?: boolean | undefined;
+}>;

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

@@ -1,4 +1,5 @@
-import { Breakpoint } from '../Breakpoint';
+/// <reference types="react" />
+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/playButton/playButton.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlayButton: () => JSX.Element;

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

@@ -1,7 +1,9 @@
-import { Breakpoint } from '../Breakpoint';
+/// <reference types="react" />
+import { Breakpoint } from '../common';
 export declare type ProgressBarProps = {
     progress?: number;
     breakpoint?: Breakpoint;
     positionBottom?: boolean;
+    showOnTop?: boolean;
 };
-export declare const ProgressBar: ({ progress, breakpoint, positionBottom, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, breakpoint, positionBottom, showOnTop, }: ProgressBarProps) => JSX.Element;

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { Breakpoint } from '../Breakpoint';
-export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, multiplier?: number): string;
+import { Breakpoint } from '../common';
+export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, showOnTop: boolean, multiplier?: number): string;
 export declare type StyledBarProps = {
     progress: number;
     breakpoint: Breakpoint;
     positionBottom: boolean;
+    showOnTop: boolean;
 };
 export declare const StyledBar: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledBarProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledBarProps>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TickBoxProps = {
     selected?: boolean;
 };

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type OnRetryFunction = () => void;
 export declare type FailedTitleBoxProps = {
     breakpoint: Breakpoint;
+    customMessage?: MessageDescriptor;
 };
 export declare const FailedTitleBox: React.FC<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,6 @@
-/// <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;
@@ -12,13 +11,6 @@ export declare type TitleBoxProps = {
 declare type FormattedDateProps = {
     timestamp: number;
 };
-declare type WithIntlProps = {
-    intl?: {
-        locale?: string;
-    };
-};
-export declare const FormattedDate: React.ComponentClass<FormattedDateProps & WithIntlProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<FormattedDateProps & WithIntlProps & ReactIntl.InjectedIntlProps>;
-};
+export declare const FormattedDate: React.ComponentType<FormattedDateProps>;
 export declare const TitleBox: ({ name, createdAt, breakpoint, titleBoxBgColor, titleBoxIcon, }: TitleBoxProps) => JSX.Element;
 export {};

package/dist/types/styles/mixins.d.ts

@@ -14,8 +14,8 @@ export interface WithAppearanceProps {
     appearance?: CardAppearance;
 }
 export declare const withAppearance: (styleMap: {
-    auto?: string | undefined;
     image?: string | undefined;
+    auto?: string | undefined;
     square?: string | undefined;
     horizontal?: string | undefined;
 }) => ({ appearance }: WithAppearanceProps) => string;

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-export declare type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing' | 'loading-preview';
+export declare type CardStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
 export declare type FilePreviewStatus = {
     hasFilesize: boolean;
     isPreviewable: boolean;
@@ -7,3 +7,9 @@ export declare type FilePreviewStatus = {
 };
 export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
 export declare type CardDimensionValue = number | string;
+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;
+    source: CardPreviewSource;
+}

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

@@ -1,23 +1,16 @@
 import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
-import { ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
-export declare enum RenderEventAction {
-    COMMENCED = "commenced",
-    SUCCEEDED = "succeeded",
-    FAILED = "failed"
-}
 export declare type FileUriFailReason = 'local-uri' | 'remote-uri' | `unknown-uri`;
 export declare type FailedErrorFailReason = MediaCardErrorPrimaryReason | 'nativeError';
-export declare type RenderEventFailReason = FailedErrorFailReason | 'failed-processing' | FileUriFailReason | 'external-uri';
 export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & FailureAttributes & {
-    failReason: RenderEventFailReason;
+    failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
-}, RenderEventAction.FAILED, 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & SuccessAttributes, RenderEventAction.SUCCEEDED, 'mediaCardRender'>;
-export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, RenderEventAction.COMMENCED, 'mediaCardRender'>;
+}, 'failed', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
+export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
 export declare type ClickedEventPayload = UIEventPayload<{
     label?: string;
@@ -29,12 +22,10 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
     };
 };
 export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload;
-export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: "error" | "uploading" | "processing" | "failed-processing" | "processed" | undefined) => FileAttributes;
+export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: "failed-processing" | "uploading" | "processing" | "processed" | "error" | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
 export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
 export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes?: PerformanceAttributes | undefined) => RenderSucceededEventPayload;
-export declare const getFailedFileUriFailReason: (fileStatus?: "error" | "uploading" | "processing" | "failed-processing" | "processed" | undefined) => FileUriFailReason;
-export declare const getRenderFailedFileUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderErrorFailReason: (error: MediaCardError) => FailedErrorFailReason;
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';

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

@@ -47,7 +47,7 @@ export declare const maxSquareCardDimensions: {
     width: number;
     height: number;
 };
-export declare const getCardMaxHeight: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getCardMinWidth: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getCardMaxWidth: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => number;
-export declare const getDefaultCardDimensions: (appearance?: "auto" | "image" | "square" | "horizontal" | undefined) => Required<CardDimensions>;
+export declare const getCardMaxHeight: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getCardMinWidth: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getCardMaxWidth: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => number;
+export declare const getDefaultCardDimensions: (appearance?: "image" | "auto" | "square" | "horizontal" | undefined) => Required<CardDimensions>;

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

@@ -1,3 +1,3 @@
 import { CardDimensions } from '../';
 export declare const canCompareDimension: (current?: string | number | undefined, next?: string | number | undefined) => boolean;
-export declare const isBigger: (current: CardDimensions, next: CardDimensions) => boolean;
+export declare const isBigger: (current?: CardDimensions | undefined, next?: CardDimensions | undefined) => boolean;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const getErrorMessage: (status: string) => false | JSX.Element;

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

@@ -1,2 +1,2 @@
-import { FileState, FileDetails } from '@atlaskit/media-client';
-export declare const getFileDetails: (state: FileState) => FileDetails;
+import { FileDetails, Identifier, ErrorFileState } from '@atlaskit/media-client';
+export declare const getFileDetails: (identifier: Identifier, fileState?: import("@atlaskit/media-client").UploadingFileState | import("@atlaskit/media-client").ProcessingFileState | import("@atlaskit/media-client").ProcessedFileState | ErrorFileState | import("@atlaskit/media-client").ProcessingFailedState | undefined) => FileDetails;

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

@@ -1,4 +1,4 @@
-import { CardPreview } from '../root/card/getCardPreview';
+import { CardPreview } from '../';
 export declare const PREVIEW_CACHE_LRU_SIZE = 50;
 export declare class ObjectURLCache {
     private readonly cache;
@@ -6,5 +6,6 @@ export declare class ObjectURLCache {
     has(key: string): boolean;
     get(key: string): CardPreview | undefined;
     set(key: string, value: CardPreview): void;
+    remove(key: string): void;
 }
 export declare const createObjectURLCache: () => ObjectURLCache;

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

@@ -1,8 +1,16 @@
-import React, { FC } from 'react';
-declare type ViewportDetectorProps = {
-    targetRef: HTMLElement | null;
+import React from 'react';
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+export declare const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900;
+export declare const ViewportAnchor: React.ForwardRefExoticComponent<{
+    offsetTop: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type ViewportDetectorProps = {
+    cardEl: HTMLElement | null;
+    preAnchorRef: React.RefObject<HTMLDivElement>;
+    postAnchorRef: React.RefObject<HTMLDivElement>;
     onVisible: () => void;
 };
-export declare const createViewportDetector: (isIntersectionObserverSupported: boolean) => React.FC<ViewportDetectorProps>;
 export declare const ViewportDetector: React.FC<ViewportDetectorProps>;
-export {};