@atlaskit/media-card 77.5.2 → 77.6.0

package/dist/esm/card/v2/cardviews/loadingCardView.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import SpinnerIcon from '@atlaskit/spinner';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+var LoadingCardViewBase = function LoadingCardViewBase(props) {
+  var dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name;
+  var hasTitleBox = !disableOverlay && !!name;
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    ref: divRef
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(SpinnerIcon, {
+    testId: "media-card-loading"
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export var LoadingCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(LoadingCardViewBase);

package/dist/esm/card/v2/cardviews/processingCardView.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { CreatingPreview } from '../../ui/iconMessage';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+var ProcessingCardViewBase = function ProcessingCardViewBase(props) {
+  var disableAnimation = props.disableAnimation,
+    dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    size = _ref.size,
+    mediaType = _ref.mediaType,
+    mimeType = _ref.mimeType;
+  var isZeroSize = size === 0;
+  var hasTitleBox = !disableOverlay && !!name;
+  return jsx(CardViewWrapper, _extends({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": "processing",
+    ref: divRef
+  }), jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), !isZeroSize && jsx(CreatingPreview, {
+    disableAnimation: disableAnimation
+  })));
+};
+
+// TODO: check if analytics is correct
+
+export var ProcessingCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ProcessingCardViewBase);

package/dist/esm/card/v2/cardviews/videoCardView.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { IconWrapper } from '../../ui/iconWrapper/iconWrapper';
+import { PlayButton } from '../../ui/playButton/playButton';
+import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
+import { useBreakpoint } from '../../useBreakpoint';
+import { CardViewWrapper } from './cardViewWrapper';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+var VideoCardViewBase = function VideoCardViewBase(props) {
+  var status = props.status,
+    dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef,
+    progress = props.progress,
+    cardPreview = props.cardPreview,
+    alt = props.alt,
+    resizeMode = props.resizeMode,
+    onDisplayImage = props.onDisplayImage,
+    nativeLazyLoad = props.nativeLazyLoad,
+    forceSyncDisplay = props.forceSyncDisplay,
+    _onImageLoad = props.onImageLoad,
+    _onImageError = props.onImageError;
+  var divRef = useRef(null);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    _ref$mediaType = _ref.mediaType,
+    mediaType = _ref$mediaType === void 0 ? 'unknown' : _ref$mediaType;
+  var hasTitleBox = !disableOverlay && !!name;
+  var isUploading = status === 'uploading';
+  return jsx(CardViewWrapper, _extends({}, props, {
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: function customBlanket() {
+      return disableOverlay ? null : jsx(Blanket, {
+        isFixed: isUploading
+      });
+    },
+    progressBar: isUploading ? function () {
+      return jsx(ProgressBar, {
+        progress: progress,
+        breakpoint: breakpoint,
+        positionBottom: !hasTitleBox
+      });
+    } : undefined
+  }), jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: mediaType,
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: function onImageLoad() {
+      return _onImageLoad === null || _onImageLoad === void 0 ? void 0 : _onImageLoad(cardPreview);
+    },
+    onImageError: function onImageError() {
+      return _onImageError === null || _onImageError === void 0 ? void 0 : _onImageError(cardPreview);
+    },
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }), cardPreview && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)));
+};
+
+// TODO: check if analytics is correct
+
+export var VideoCardView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(VideoCardViewBase);

package/dist/esm/card/v2/fileCard.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isImageRepresentationReady, RECENTS_COLLECTION } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
@@ -25,8 +26,10 @@ import { getDefaultCardDimensions } from '../../utils/cardDimensions';
 import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
 import { isSSRPreview } from '../getCardPreview';
 import { CardViewV2 } from './cardViewV2';
+import { CardViews } from './cardviews';
 import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { useFilePreview } from './useFilePreview';
+var LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
 export var FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
@@ -509,7 +512,7 @@ export var FileCard = function FileCard(_ref) {
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
     var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
-    var card = /*#__PURE__*/React.createElement(CardViewV2, {
+    var card = /*#__PURE__*/React.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
       mediaItemType: mediaItemType,

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.5.2",
+        packageName: "77.6.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.2";
+var packageVersion = "77.6.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent, RefObject } from 'react';
+import React, { MouseEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions, CardAppearance } from '../../../types';
 import { Breakpoint } from '../common';
@@ -18,6 +18,6 @@ export interface WrapperProps {
     isPlayButtonClickable: boolean;
     isTickBoxSelectable: boolean;
     shouldDisplayTooltip: boolean;
-    innerRef?: RefObject<HTMLDivElement>;
+    innerRef?: React.Ref<HTMLDivElement>;
     children?: JSX.Element;
 }

package/dist/types/card/v2/cardviews/cardViewWrapper.d.ts

@@ -0,0 +1,38 @@
+import React, { MouseEvent, ReactNode } from 'react';
+import { FileDetails } from '@atlaskit/media-client';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardAppearance, CardDimensions, MediaCardCursor, TitleBoxIcon } from '../../../types';
+import { CardAction } from '../../actions';
+import { Breakpoint } from '../../ui/common';
+import { MediaFilePreview } from '../useFilePreview';
+export type SharedCardViewProps = {
+    readonly cardPreview?: MediaFilePreview;
+    readonly testId?: string;
+    readonly dimensions?: CardDimensions;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly appearance?: CardAppearance;
+    readonly disableOverlay?: boolean;
+    readonly actions?: Array<CardAction>;
+    readonly selectable?: boolean;
+    readonly selected?: boolean;
+    readonly metadata?: FileDetails;
+    readonly titleBoxBgColor?: string;
+    readonly titleBoxIcon?: TitleBoxIcon;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly shouldHideTooltip?: boolean;
+};
+export type CardViewWrapperProps = SharedCardViewProps & {
+    children: React.ReactNode;
+    readonly breakpoint: Breakpoint;
+    customBlanket?: () => ReactNode;
+    customTitleBox?: () => ReactNode;
+    progressBar?: () => ReactNode;
+};
+export declare const CardViewWrapper: React.ForwardRefExoticComponent<SharedCardViewProps & {
+    children: React.ReactNode;
+    readonly breakpoint: Breakpoint;
+    customBlanket?: (() => ReactNode) | undefined;
+    customTitleBox?: (() => ReactNode) | undefined;
+    progressBar?: (() => ReactNode) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/card/v2/cardviews/errorCardView.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+import { MediaCardError } from '../../../errors';
+export type ErrorCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    metadata?: FileDetails;
+    disableAnimation?: boolean;
+    readonly error?: MediaCardError;
+};
+export declare const ErrorCardView: import("react").ForwardRefExoticComponent<Omit<ErrorCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/card/v2/cardviews/iconCardView.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+import type { CardStatus } from '../../../types';
+export type IconCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    metadata?: FileDetails;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const IconCardView: import("react").ForwardRefExoticComponent<Omit<IconCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/card/v2/cardviews/imageCardView.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import type { CardPreview, CardStatus } from '../../../types';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type ImageCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    cardPreview: CardPreview;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onDisplayImage?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    metadata?: FileDetails;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly progress?: number;
+};
+export declare const ImageCardView: import("react").ForwardRefExoticComponent<Omit<ImageCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/card/v2/cardviews/index.d.ts

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { SharedCardProps, CardStatus, MediaCardCursor } from '../../../types';
+import { MediaCardError } from '../../../errors';
+import { MediaFilePreview } from '../useFilePreview';
+export interface CardViewsOwnProps extends SharedCardProps {
+    readonly status: CardStatus;
+    readonly mediaItemType: MediaItemType;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly metadata?: FileDetails;
+    readonly error?: MediaCardError;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly onDisplayImage?: () => void;
+    readonly cardPreview?: MediaFilePreview;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
+    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
+}
+export type CardViewV2Props = CardViewsOwnProps & WithAnalyticsEventsProps;
+export interface RenderConfigByStatusV2 {
+    renderTypeIcon?: boolean;
+    iconMessage?: JSX.Element;
+    renderImageRenderer?: boolean;
+    renderPlayButton?: boolean;
+    renderTitleBox?: boolean;
+    renderBlanket?: boolean;
+    isFixedBlanket?: boolean;
+    renderProgressBar?: boolean;
+    renderSpinner?: boolean;
+    renderFailedTitleBox?: boolean;
+    renderTickBox?: boolean;
+    customTitleMessage?: MessageDescriptor;
+}
+export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViews: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/card/v2/cardviews/loadingCardView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type LoadingCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    metadata?: FileDetails;
+    disableAnimation?: boolean;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const LoadingCardView: import("react").ForwardRefExoticComponent<Omit<LoadingCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/card/v2/cardviews/processingCardView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type ProcessingCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    disableAnimation?: boolean;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const ProcessingCardView: import("react").ForwardRefExoticComponent<Omit<ProcessingCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/card/v2/cardviews/videoCardView.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import type { CardPreview, CardStatus } from '../../../types';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type VideoCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    cardPreview: CardPreview;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onDisplayImage?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    metadata?: FileDetails;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly progress?: number;
+};
+export declare const VideoCardView: import("react").ForwardRefExoticComponent<Omit<VideoCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/ui/wrapper/types.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent, RefObject } from 'react';
+import React, { MouseEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions, CardAppearance } from '../../../types';
 import { Breakpoint } from '../common';
@@ -18,6 +18,6 @@ export interface WrapperProps {
     isPlayButtonClickable: boolean;
     isTickBoxSelectable: boolean;
     shouldDisplayTooltip: boolean;
-    innerRef?: RefObject<HTMLDivElement>;
+    innerRef?: React.Ref<HTMLDivElement>;
     children?: JSX.Element;
 }

package/dist/types-ts4.5/card/v2/cardviews/cardViewWrapper.d.ts

@@ -0,0 +1,38 @@
+import React, { MouseEvent, ReactNode } from 'react';
+import { FileDetails } from '@atlaskit/media-client';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CardAppearance, CardDimensions, MediaCardCursor, TitleBoxIcon } from '../../../types';
+import { CardAction } from '../../actions';
+import { Breakpoint } from '../../ui/common';
+import { MediaFilePreview } from '../useFilePreview';
+export type SharedCardViewProps = {
+    readonly cardPreview?: MediaFilePreview;
+    readonly testId?: string;
+    readonly dimensions?: CardDimensions;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly appearance?: CardAppearance;
+    readonly disableOverlay?: boolean;
+    readonly actions?: Array<CardAction>;
+    readonly selectable?: boolean;
+    readonly selected?: boolean;
+    readonly metadata?: FileDetails;
+    readonly titleBoxBgColor?: string;
+    readonly titleBoxIcon?: TitleBoxIcon;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly shouldHideTooltip?: boolean;
+};
+export type CardViewWrapperProps = SharedCardViewProps & {
+    children: React.ReactNode;
+    readonly breakpoint: Breakpoint;
+    customBlanket?: () => ReactNode;
+    customTitleBox?: () => ReactNode;
+    progressBar?: () => ReactNode;
+};
+export declare const CardViewWrapper: React.ForwardRefExoticComponent<SharedCardViewProps & {
+    children: React.ReactNode;
+    readonly breakpoint: Breakpoint;
+    customBlanket?: (() => ReactNode) | undefined;
+    customTitleBox?: (() => ReactNode) | undefined;
+    progressBar?: (() => ReactNode) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/card/v2/cardviews/errorCardView.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+import { MediaCardError } from '../../../errors';
+export type ErrorCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    metadata?: FileDetails;
+    disableAnimation?: boolean;
+    readonly error?: MediaCardError;
+};
+export declare const ErrorCardView: import("react").ForwardRefExoticComponent<Omit<ErrorCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/iconCardView.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+import type { CardStatus } from '../../../types';
+export type IconCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    metadata?: FileDetails;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const IconCardView: import("react").ForwardRefExoticComponent<Omit<IconCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/imageCardView.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import type { CardPreview, CardStatus } from '../../../types';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type ImageCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    cardPreview: CardPreview;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onDisplayImage?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    metadata?: FileDetails;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly progress?: number;
+};
+export declare const ImageCardView: import("react").ForwardRefExoticComponent<Omit<ImageCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/index.d.ts

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { SharedCardProps, CardStatus, MediaCardCursor } from '../../../types';
+import { MediaCardError } from '../../../errors';
+import { MediaFilePreview } from '../useFilePreview';
+export interface CardViewsOwnProps extends SharedCardProps {
+    readonly status: CardStatus;
+    readonly mediaItemType: MediaItemType;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly metadata?: FileDetails;
+    readonly error?: MediaCardError;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly onDisplayImage?: () => void;
+    readonly cardPreview?: MediaFilePreview;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
+    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
+}
+export type CardViewV2Props = CardViewsOwnProps & WithAnalyticsEventsProps;
+export interface RenderConfigByStatusV2 {
+    renderTypeIcon?: boolean;
+    iconMessage?: JSX.Element;
+    renderImageRenderer?: boolean;
+    renderPlayButton?: boolean;
+    renderTitleBox?: boolean;
+    renderBlanket?: boolean;
+    isFixedBlanket?: boolean;
+    renderProgressBar?: boolean;
+    renderSpinner?: boolean;
+    renderFailedTitleBox?: boolean;
+    renderTickBox?: boolean;
+    customTitleMessage?: MessageDescriptor;
+}
+export declare const CardViewsBase: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViews: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/loadingCardView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type LoadingCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    metadata?: FileDetails;
+    disableAnimation?: boolean;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const LoadingCardView: import("react").ForwardRefExoticComponent<Omit<LoadingCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/processingCardView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type ProcessingCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    disableAnimation?: boolean;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+};
+export declare const ProcessingCardView: import("react").ForwardRefExoticComponent<Omit<ProcessingCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardviews/videoCardView.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { FileDetails } from '@atlaskit/media-client';
+import type { CardPreview, CardStatus } from '../../../types';
+import { SharedCardViewProps } from './cardViewWrapper';
+export type VideoCardViewProps = SharedCardViewProps & WithAnalyticsEventsProps & {
+    status: CardStatus;
+    cardPreview: CardPreview;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onDisplayImage?: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    metadata?: FileDetails;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly progress?: number;
+};
+export declare const VideoCardView: import("react").ForwardRefExoticComponent<Omit<VideoCardViewProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;