@atlaskit/media-card 77.4.7 → 77.4.8

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

@@ -5,13 +5,14 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 { addFileAttrsToUrl, imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { getMediaTypeFromMimeType, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ensureMediaCardError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, LocalPreviewError, MediaCardError } from '../../errors';
 import { extractErrorInfo } from '../../utils/analytics';
 import { isBigger } from '../../utils/dimensionComparer';
+import { isRetina } from '../../utils/isRetina';
 import { generateScriptProps, getSSRData } from '../../utils/globalScope';
 import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
 import { usePrevious } from '../../utils/usePrevious';
@@ -23,13 +24,12 @@ export var useFilePreview = function useFilePreview(_ref) {
     resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
     identifier = _ref.identifier,
     ssr = _ref.ssr,
-    mediaClient = _ref.mediaClient,
     dimensions = _ref.dimensions,
-    requestedDimensions = _ref.requestedDimensions,
     traceContext = _ref.traceContext,
     previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+  var mediaClient = useMediaClient();
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     error = _useState2[0],
@@ -38,6 +38,10 @@ export var useFilePreview = function useFilePreview(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     nonCriticalError = _useState4[0],
     setNonCriticalError = _useState4[1];
+  var requestDimensions = useMemo(function () {
+    return dimensions ? createRequestDimensions(dimensions) : undefined;
+  }, [dimensions]);
+
   //----------------------------------------------------------------//
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
@@ -55,10 +59,10 @@ export var useFilePreview = function useFilePreview(_ref) {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
       mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestedDimensions), {}, {
+    }, requestDimensions), {}, {
       allowAnimated: true
     });
-  }, [requestedDimensions, identifier.collectionName, resizeMode]);
+  }, [requestDimensions, identifier.collectionName, resizeMode]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = getSSRData(identifier);
@@ -76,8 +80,12 @@ export var useFilePreview = function useFilePreview(_ref) {
         }, extractErrorInfo(e));
       }
     } else {
+      var _ssrDataRef$current3 = ssrDataRef.current,
+        _dimensions = _ssrDataRef$current3.dimensions,
+        dataURI = _ssrDataRef$current3.dataURI;
       return {
-        dataURI: ssrDataRef.current.dataURI,
+        dataURI: dataURI,
+        dimensions: _dimensions,
         source: 'ssr-data'
       };
     }
@@ -125,7 +133,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------//
 
   var fetchRemotePreviewRef = useCurrentValueRef(function (identifier) {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
   var resolvePreviewRef = useCurrentValueRef( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
@@ -138,7 +146,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             _context.prev = 2;
             mode = imageURLParams.mode;
             cachedPreview = cardPreviewCache.get(identifier.id, mode);
-            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
             if (!(cachedPreview && !dimensionsAreBigger)) {
               _context.next = 8;
               break;
@@ -232,7 +240,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             throw new LocalPreviewError('local-preview-unsupported');
           case 57:
             preview = _objectSpread(_objectSpread({}, localPreview), {}, {
-              dimensions: dimensions
+              dimensions: requestDimensions
             });
             _context.t4 = preview.source;
             _context.next = _context.t4 === 'local' ? 61 : _context.t4 === 'remote' ? 63 : _context.t4 === 'ssr-server' ? 65 : _context.t4 === 'ssr-client' ? 67 : 69;
@@ -299,7 +307,7 @@ export var useFilePreview = function useFilePreview(_ref) {
             throw new MediaCardError('remote-preview-not-ready');
           case 83:
             _context.next = 85;
-            return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+            return fetchRemotePreviewRef.current(identifier);
           case 85:
             remotePreview = _context.sent;
             setCardPreview(remotePreview);
@@ -335,7 +343,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //------------ resolveUpfrontPreview useEffect -------------------//
   //----------------------------------------------------------------//
   var prevCardPreview = usePrevious(cardPreview);
-  var dimensionsRef = useCurrentValueRef(dimensions);
+  var requestDimensionsRef = useCurrentValueRef(requestDimensions);
   useEffect(function () {
     var resolveUpfrontPreview = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
@@ -347,12 +355,12 @@ export var useFilePreview = function useFilePreview(_ref) {
               // If it fails, the normal preview fetch should occur after the file state is fetched anyways
               wasResolvedUpfrontPreviewRef.current = true;
               _context2.prev = 1;
-              fetchedDimensions = _objectSpread({}, dimensions);
+              fetchedDimensions = _objectSpread({}, requestDimensions);
               _context2.next = 5;
               return fetchRemotePreviewRef.current(identifier);
             case 5:
               newCardPreview = _context2.sent;
-              areValidFetchedDimensions = !isBigger(fetchedDimensions, dimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              areValidFetchedDimensions = !isBigger(fetchedDimensions, requestDimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
               // the fetched preview is no longer valid, and thus, we dismiss it
               if (areValidFetchedDimensions) {
                 setCardPreview(newCardPreview);
@@ -378,16 +386,16 @@ export var useFilePreview = function useFilePreview(_ref) {
     if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
       resolveUpfrontPreview(identifier);
     }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
+  }, [cardPreview, requestDimensions, requestDimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
 
   //----------------------------------------------------------------//
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  var prevDimensions = usePrevious(dimensions);
+  var prevRequestDimensions = usePrevious(requestDimensions);
   useEffect(function () {
-    var _ssrDataRef$current3;
-    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger(cardPreview.dimensions, requestDimensions)) {
       // refetchSRRPreview: If dimensions from Server have changed and are bigger,
       // we need to refetch
       fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
@@ -402,8 +410,8 @@ export var useFilePreview = function useFilePreview(_ref) {
     if (fileState && shouldResolvePreview({
       status: status,
       fileState: fileState,
-      prevDimensions: prevDimensions,
-      dimensions: dimensions,
+      prevDimensions: prevRequestDimensions,
+      dimensions: requestDimensions,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview: isBannedLocalPreview,
       wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
@@ -420,7 +428,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     }
-  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevDimensions, resolvePreviewRef, skipRemote, ssr, status]);
+  }, [cardPreview, requestDimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevRequestDimensions, resolvePreviewRef, skipRemote, ssr, status]);
 
   //----------------------------------------------------------------//
   //----------------- set complete status --------------------------//
@@ -561,7 +569,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   // FOR SSR
   var getScriptProps = function getScriptProps() {
     var _ssrReliabilityRef$cu;
-    return generateScriptProps(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestedDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
+    return generateScriptProps(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
   };
 
   // CXP-2723 TODO: should consider simplifying our analytics, and how
@@ -575,4 +583,20 @@ export var useFilePreview = function useFilePreview(_ref) {
     onImageLoad: onImageLoad,
     getScriptProps: getScriptProps
   };
+};
+var createRequestDimensions = function createRequestDimensions(dimensions) {
+  if (!dimensions) {
+    return;
+  }
+  var retinaFactor = isRetina() ? 2 : 1;
+  var width = dimensions.width,
+    height = dimensions.height;
+  var result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
 };

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.4.7",
+        packageName: "77.4.8",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/getDataURIDimension.js

@@ -3,6 +3,13 @@ import { getElementDimension } from './getElementDimension';
 import { defaultImageCardDimensions } from './cardDimensions';
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
+
 export var getDataURIDimension = function getDataURIDimension(dimension, options) {
   var retinaFactor = isRetina() ? 2 : 1;
   var dimensionValue = options.dimensions && options.dimensions[dimension] || '';
@@ -24,4 +31,35 @@ export var getRequestedDimensions = function getRequestedDimensions(options) {
     width: width,
     height: height
   };
+};
+
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+
+// Same as getDataURIDimension but without Retina factor
+export var resolveCardPreviewDimension = function resolveCardPreviewDimension(dimensionName, _ref) {
+  var dimensions = _ref.dimensions,
+    element = _ref.element;
+  var dimensionValue = (dimensions === null || dimensions === void 0 ? void 0 : dimensions[dimensionName]) || '';
+  if (isValidPercentageUnit(dimensionValue) && element) {
+    return getElementDimension(element, dimensionName);
+  }
+  if (typeof dimensionValue === 'number') {
+    return dimensionValue;
+  }
+  if (containsPixelUnit("".concat(dimensionValue))) {
+    return parseInt("".concat(dimensionValue), 10);
+  }
+  return defaultImageCardDimensions[dimensionName];
+};
+export var resolveCardPreviewDimensions = function resolveCardPreviewDimensions(options) {
+  var width = resolveCardPreviewDimension('width', options);
+  var height = resolveCardPreviewDimension('height', options);
+  return {
+    width: width,
+    height: height
+  };
 };

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.4.7";
+var packageVersion = "77.4.8";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

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

@@ -2,11 +2,22 @@
 import { jsx } from '@emotion/react';
 import React, { MouseEvent } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
-import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { MediaItemType, FileDetails, ImageResizeMode } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { SharedCardProps, CardStatus, CardPreview, MediaCardCursor } from '../../types';
+import { CardStatus, CardPreview, MediaCardCursor, CardDimensions, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
 import { MediaCardError } from '../../errors';
-export interface CardViewV2OwnProps extends SharedCardProps {
+export interface CardViewV2Props {
+    readonly disableOverlay?: boolean;
+    readonly resizeMode?: ImageResizeMode;
+    readonly dimensions: CardDimensions;
+    readonly actions?: Array<CardAction>;
+    readonly selectable?: boolean;
+    readonly selected?: boolean;
+    readonly alt?: string;
+    readonly testId?: string;
+    readonly titleBoxBgColor?: string;
+    readonly titleBoxIcon?: TitleBoxIcon;
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly mediaCardCursor?: MediaCardCursor;
@@ -25,7 +36,7 @@ export interface CardViewV2OwnProps extends SharedCardProps {
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
 }
-export type CardViewV2Props = CardViewV2OwnProps & WithAnalyticsEventsProps;
+export type CardViewV2BaseProps = CardViewV2Props & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
     renderTypeIcon?: boolean;
     iconMessage?: JSX.Element;
@@ -40,5 +51,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ 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 CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -1,19 +1,53 @@
 /// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, Identifier, MediaClient } from '@atlaskit/media-client';
-import { SSR } from '@atlaskit/media-common';
-import { CardEventProps, SharedCardProps } from '../../types';
-export interface FileCardProps extends SharedCardProps, CardEventProps {
-    readonly mediaClient: MediaClient;
+import { FileIdentifier, Identifier, ImageResizeMode } from '@atlaskit/media-client';
+import { MediaFeatureFlags, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
+import { CardAppearance, CardDimensions, CardEventProps, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
+export interface FileCardProps extends CardEventProps {
+    /** Overlay the media file. */
+    readonly disableOverlay?: boolean;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit'. */
+    readonly resizeMode?: ImageResizeMode;
+    readonly featureFlags?: MediaFeatureFlags;
+    /** Sets meida card appearance */
+    readonly appearance?: CardAppearance;
+    /** Custom media card dimension like width and height. */
+    readonly dimensions?: CardDimensions;
+    /** Original media card dimension like width and height. */
+    readonly originalDimensions?: NumericalCardDimensions;
+    /** Array of additional media card actions. */
+    readonly actions?: Array<CardAction>;
+    /** Enable media card selectable. */
+    readonly selectable?: boolean;
+    /** Renders media card as selected, if selected is true. */
+    readonly selected?: boolean;
+    /** Alternate text for an media card. */
+    readonly alt?: string;
+    /** ID for testing the media card. */
+    readonly testId?: string;
+    /** Sets the title box background color. */
+    readonly titleBoxBgColor?: string;
+    /** Sets the title box icon. */
+    readonly titleBoxIcon?: TitleBoxIcon;
+    /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
+    /** Lazy loads the media file. */
     readonly isLazy?: boolean;
+    /** Uses the inline player for media file. */
     readonly useInlinePlayer?: boolean;
+    /** Uses media MediaViewer to preview the media file. */
     readonly shouldOpenMediaViewer?: boolean;
+    /** Media file list to display in Media Viewer. */
     readonly mediaViewerItems?: Identifier[];
+    /** Retrieve auth based on a given context. */
     readonly contextId?: string;
+    /** Enables the download button for media file. */
     readonly shouldEnableDownloadButton?: boolean;
+    /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
+    /** Disable tooltip for the card */
     readonly shouldHideTooltip?: boolean;
 }
 export type FileCardBaseProps = FileCardProps & WithAnalyticsEventsProps;
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, mediaClient, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;

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

@@ -1,20 +1,16 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs, MediaClient } from '@atlaskit/media-client';
+import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
 import { MediaTraceContext, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { MediaCardError } from '../../errors';
-import { CardDimensions, CardPreview } from '../../types';
+import { CardPreview } from '../../types';
 import { SSRStatus } from '../../utils/analytics';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Instance of MediaClient. */
-    readonly mediaClient: MediaClient;
     /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
     readonly resizeMode?: ImageResizeMode;
-    /** Custom media card dimension like width and height. */
-    readonly dimensions?: CardDimensions;
-    /** Dimensions to be requested to the server */
-    readonly requestedDimensions: NumericalCardDimensions;
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: Partial<NumericalCardDimensions>;
     /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
     /** Attributes to attach to the created Blob Url */
@@ -26,7 +22,7 @@ export interface UseFilePreviewParams {
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, mediaClient, dimensions, requestedDimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
     cardPreview: CardPreview | undefined;
     error: MediaCardError | undefined;
     nonCriticalError: MediaCardError | undefined;

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

@@ -1,9 +1,26 @@
 import { CardDimensions } from '../types';
 import { ElementDimension } from './getElementDimension';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
 export type getDataURIDimensionOptions = {
     element?: Element | null;
     dimensions?: CardDimensions;
 };
 export declare const getDataURIDimension: (dimension: ElementDimension, options: getDataURIDimensionOptions) => number;
 export declare const getRequestedDimensions: (options: getDataURIDimensionOptions) => NumericalCardDimensions;
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+type ResolveCardDimensionOptions = {
+    element?: Element | null;
+    dimensions?: CardDimensions;
+};
+export declare const resolveCardPreviewDimension: (dimensionName: ElementDimension, { dimensions, element }: ResolveCardDimensionOptions) => number;
+export declare const resolveCardPreviewDimensions: (options: ResolveCardDimensionOptions) => NumericalCardDimensions;
+export {};

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

@@ -11,5 +11,5 @@ export type MediaGlobalScope = {
 export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
 export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
 export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
-export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo, globalScope?: any) => void;
-export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;
+export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo, globalScope?: any) => void;
+export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;

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

@@ -2,7 +2,7 @@ import { NumericalCardDimensions } from '@atlaskit/media-common';
 import { MediaCardErrorInfo } from '../../utils/analytics';
 export type MediaCardSsrData = {
     dataURI?: string;
-    dimensions?: NumericalCardDimensions;
+    dimensions?: Partial<NumericalCardDimensions>;
     error?: MediaCardErrorInfo;
 };
 export type MediaCardSsr = Record<string, MediaCardSsrData>;

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

@@ -2,11 +2,22 @@
 import { jsx } from '@emotion/react';
 import React, { MouseEvent } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
-import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { MediaItemType, FileDetails, ImageResizeMode } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { SharedCardProps, CardStatus, CardPreview, MediaCardCursor } from '../../types';
+import { CardStatus, CardPreview, MediaCardCursor, CardDimensions, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
 import { MediaCardError } from '../../errors';
-export interface CardViewV2OwnProps extends SharedCardProps {
+export interface CardViewV2Props {
+    readonly disableOverlay?: boolean;
+    readonly resizeMode?: ImageResizeMode;
+    readonly dimensions: CardDimensions;
+    readonly actions?: Array<CardAction>;
+    readonly selectable?: boolean;
+    readonly selected?: boolean;
+    readonly alt?: string;
+    readonly testId?: string;
+    readonly titleBoxBgColor?: string;
+    readonly titleBoxIcon?: TitleBoxIcon;
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly mediaCardCursor?: MediaCardCursor;
@@ -25,7 +36,7 @@ export interface CardViewV2OwnProps extends SharedCardProps {
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
 }
-export type CardViewV2Props = CardViewV2OwnProps & WithAnalyticsEventsProps;
+export type CardViewV2BaseProps = CardViewV2Props & WithAnalyticsEventsProps;
 export interface RenderConfigByStatusV2 {
     renderTypeIcon?: boolean;
     iconMessage?: JSX.Element;
@@ -40,5 +51,5 @@ export interface RenderConfigByStatusV2 {
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
 }
-export declare const CardViewV2Base: ({ 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 CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2BaseProps) => jsx.JSX.Element;
+export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2BaseProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -1,19 +1,53 @@
 /// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FileIdentifier, Identifier, MediaClient } from '@atlaskit/media-client';
-import { SSR } from '@atlaskit/media-common';
-import { CardEventProps, SharedCardProps } from '../../types';
-export interface FileCardProps extends SharedCardProps, CardEventProps {
-    readonly mediaClient: MediaClient;
+import { FileIdentifier, Identifier, ImageResizeMode } from '@atlaskit/media-client';
+import { MediaFeatureFlags, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
+import { CardAppearance, CardDimensions, CardEventProps, TitleBoxIcon } from '../../types';
+import { CardAction } from '../actions';
+export interface FileCardProps extends CardEventProps {
+    /** Overlay the media file. */
+    readonly disableOverlay?: boolean;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit'. */
+    readonly resizeMode?: ImageResizeMode;
+    readonly featureFlags?: MediaFeatureFlags;
+    /** Sets meida card appearance */
+    readonly appearance?: CardAppearance;
+    /** Custom media card dimension like width and height. */
+    readonly dimensions?: CardDimensions;
+    /** Original media card dimension like width and height. */
+    readonly originalDimensions?: NumericalCardDimensions;
+    /** Array of additional media card actions. */
+    readonly actions?: Array<CardAction>;
+    /** Enable media card selectable. */
+    readonly selectable?: boolean;
+    /** Renders media card as selected, if selected is true. */
+    readonly selected?: boolean;
+    /** Alternate text for an media card. */
+    readonly alt?: string;
+    /** ID for testing the media card. */
+    readonly testId?: string;
+    /** Sets the title box background color. */
+    readonly titleBoxBgColor?: string;
+    /** Sets the title box icon. */
+    readonly titleBoxIcon?: TitleBoxIcon;
+    /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
+    /** Lazy loads the media file. */
     readonly isLazy?: boolean;
+    /** Uses the inline player for media file. */
     readonly useInlinePlayer?: boolean;
+    /** Uses media MediaViewer to preview the media file. */
     readonly shouldOpenMediaViewer?: boolean;
+    /** Media file list to display in Media Viewer. */
     readonly mediaViewerItems?: Identifier[];
+    /** Retrieve auth based on a given context. */
     readonly contextId?: string;
+    /** Enables the download button for media file. */
     readonly shouldEnableDownloadButton?: boolean;
+    /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
+    /** Disable tooltip for the card */
     readonly shouldHideTooltip?: boolean;
 }
 export type FileCardBaseProps = FileCardProps & WithAnalyticsEventsProps;
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, mediaClient, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, createAnalyticsEvent, }: FileCardBaseProps) => JSX.Element;

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

@@ -1,20 +1,16 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs, MediaClient } from '@atlaskit/media-client';
+import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
 import { MediaTraceContext, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { MediaCardError } from '../../errors';
-import { CardDimensions, CardPreview } from '../../types';
+import { CardPreview } from '../../types';
 import { SSRStatus } from '../../utils/analytics';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Instance of MediaClient. */
-    readonly mediaClient: MediaClient;
     /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
     readonly resizeMode?: ImageResizeMode;
-    /** Custom media card dimension like width and height. */
-    readonly dimensions?: CardDimensions;
-    /** Dimensions to be requested to the server */
-    readonly requestedDimensions: NumericalCardDimensions;
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: Partial<NumericalCardDimensions>;
     /** Server-Side-Rendering modes are "server" and "client" */
     readonly ssr?: SSR;
     /** Attributes to attach to the created Blob Url */
@@ -26,7 +22,7 @@ export interface UseFilePreviewParams {
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, mediaClient, dimensions, requestedDimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
     cardPreview: CardPreview | undefined;
     error: MediaCardError | undefined;
     nonCriticalError: MediaCardError | undefined;

package/dist/types-ts4.5/utils/getDataURIDimension.d.ts

@@ -1,9 +1,26 @@
 import { CardDimensions } from '../types';
 import { ElementDimension } from './getElementDimension';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
 export type getDataURIDimensionOptions = {
     element?: Element | null;
     dimensions?: CardDimensions;
 };
 export declare const getDataURIDimension: (dimension: ElementDimension, options: getDataURIDimensionOptions) => number;
 export declare const getRequestedDimensions: (options: getDataURIDimensionOptions) => NumericalCardDimensions;
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+type ResolveCardDimensionOptions = {
+    element?: Element | null;
+    dimensions?: CardDimensions;
+};
+export declare const resolveCardPreviewDimension: (dimensionName: ElementDimension, { dimensions, element }: ResolveCardDimensionOptions) => number;
+export declare const resolveCardPreviewDimensions: (options: ResolveCardDimensionOptions) => NumericalCardDimensions;
+export {};

package/dist/types-ts4.5/utils/globalScope/globalScope.d.ts

@@ -11,5 +11,5 @@ export type MediaGlobalScope = {
 export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
 export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
 export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
-export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo, globalScope?: any) => void;
-export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: NumericalCardDimensions, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;
+export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo, globalScope?: any) => void;
+export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaCardErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;