@atlaskit/media-card 71.0.0 → 73.1.0

package/dist/cjs/utils/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CardActionIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionIconButton;
+  }
+});
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsDropdownMenu;
+  }
+});
+Object.defineProperty(exports, "CardActionsView", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsView;
+  }
+});
 Object.defineProperty(exports, "ErrorIcon", {
   enumerable: true,
   get: function get() {
@@ -17,34 +35,34 @@ Object.defineProperty(exports, "FileIcon", {
     return _fileIcon.FileIcon;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "breakpointSize", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionIconButton;
+    return _breakpoint.breakpointSize;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "breakpointStyles", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsDropdownMenu;
+    return _breakpoint.breakpointStyles;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "cardBreakpointSizes", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsView;
+    return _breakpoint.cardBreakpointSizes;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "containsPixelUnit", {
   enumerable: true,
   get: function get() {
-    return _cardActions.default;
+    return _containsPixelUnit.containsPixelUnit;
   }
 });
-Object.defineProperty(exports, "isRetina", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _isRetina.isRetina;
+    return _cardActions.default;
   }
 });
 Object.defineProperty(exports, "defaultHorizontalCardDimensions", {
@@ -95,6 +113,24 @@ Object.defineProperty(exports, "getDefaultCardDimensions", {
     return _cardDimensions.getDefaultCardDimensions;
   }
 });
+Object.defineProperty(exports, "getElementDimension", {
+  enumerable: true,
+  get: function get() {
+    return _getElementDimension.getElementDimension;
+  }
+});
+Object.defineProperty(exports, "isRetina", {
+  enumerable: true,
+  get: function get() {
+    return _isRetina.isRetina;
+  }
+});
+Object.defineProperty(exports, "isValidPercentageUnit", {
+  enumerable: true,
+  get: function get() {
+    return _isValidPercentageUnit.isValidPercentageUnit;
+  }
+});
 Object.defineProperty(exports, "maxHorizontalCardDimensions", {
   enumerable: true,
   get: function get() {
@@ -137,42 +173,6 @@ Object.defineProperty(exports, "minSquareCardDimensions", {
     return _cardDimensions.minSquareCardDimensions;
   }
 });
-Object.defineProperty(exports, "breakpointSize", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointSize;
-  }
-});
-Object.defineProperty(exports, "breakpointStyles", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointStyles;
-  }
-});
-Object.defineProperty(exports, "cardBreakpointSizes", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.cardBreakpointSizes;
-  }
-});
-Object.defineProperty(exports, "isValidPercentageUnit", {
-  enumerable: true,
-  get: function get() {
-    return _isValidPercentageUnit.isValidPercentageUnit;
-  }
-});
-Object.defineProperty(exports, "getElementDimension", {
-  enumerable: true,
-  get: function get() {
-    return _getElementDimension.getElementDimension;
-  }
-});
-Object.defineProperty(exports, "containsPixelUnit", {
-  enumerable: true,
-  get: function get() {
-    return _containsPixelUnit.containsPixelUnit;
-  }
-});
 
 var _errorIcon = require("./errorIcon");
 

package/dist/cjs/utils/lightCards/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedWrapper = exports.Wrapper = exports.blinkLoadingAnimation = void 0;
+exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/metadata.js

@@ -20,8 +20,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-var getFileDetails = function getFileDetails(state) {
-  return !(0, _mediaClient.isErrorFileState)(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -29,8 +29,16 @@ var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+var getFileDetails = function getFileDetails(identifier, fileState) {
+  return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };
 

package/dist/cjs/utils/objectURLCache.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createObjectURLCache = exports.ObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = void 0;
+exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -86,6 +86,12 @@ var ObjectURLCache = /*#__PURE__*/function () {
     value: function set(key, value) {
       this.cache.set(key, value);
     }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var removed = this.cache.remove(key);
+      removed && URL.revokeObjectURL(removed.dataURI);
+    }
   }]);
   return ObjectURLCache;
 }();

package/dist/cjs/utils/shouldDisplayImageThumbnail.js

@@ -13,7 +13,7 @@ var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatu
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/cjs/utils/viewportDetector.js

@@ -5,12 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.createViewportDetector = void 0;
+exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lazyContent = require("./lazyContent");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -21,6 +19,29 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+/**
+ * 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.
+ */
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
+var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px")
+    }
+  });
+});
+exports.ViewportAnchor = ViewportAnchor;
+
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -44,36 +65,42 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
   };
 };
 
-var Observer = function Observer(_ref) {
+var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
+      cardEl = _ref.cardEl,
       children = _ref.children,
-      targetRef = _ref.targetRef;
+      preAnchorRef = _ref.preAnchorRef,
+      postAnchorRef = _ref.postAnchorRef;
   (0, _react.useEffect)(function () {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
+    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 
-var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/_react.default.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/_react.default.createElement(_lazyContent.LazyContent, {
-      placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
+var ViewportDetector = function ViewportDetector(_ref2) {
+  var cardEl = _ref2.cardEl,
+      preAnchorRef = _ref2.preAnchorRef,
+      postAnchorRef = _ref2.postAnchorRef,
+      onVisible = _ref2.onVisible,
+      children = _ref2.children;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
 };
 
-exports.createViewportDetector = createViewportDetector;
-var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
 exports.ViewportDetector = ViewportDetector;

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -27,13 +27,53 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export class SsrPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
+}
+export const getImageLoadPrimaryReason = source => {
+  switch (source) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+
+    case 'cache-local':
+      return 'cache-local-uri';
+
+    case 'external':
+      return 'external-uri';
+
+    case 'local':
+      return 'local-uri';
+
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+
+    default:
+      return `unknown-uri`;
+  }
+};
+export class ImageLoadError extends MediaCardError {
+  constructor(source) {
+    super(getImageLoadPrimaryReason(source));
+  }
+
 }
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
 export const isLocalPreviewError = err => err instanceof LocalPreviewError;
 export const isRemotePreviewError = err => err instanceof RemotePreviewError;
-export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported'; // In a try/catch statement, the error caught is the type of any.
+export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
+export function isImageLoadError(err) {
+  return err instanceof ImageLoadError;
+} // In a try/catch statement, the error caught is the type of any.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
-export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const isUploadError = error => error && error.primaryReason === 'upload';

package/dist/es2019/files/cardImageView/index.js

@@ -9,12 +9,9 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
-import { withFileAttributes } from '../../utils/fileAttributesContext';
 export const fileCardImageViewSelector = 'media-file-card-view';
 export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
-export class FileCardImageViewBase extends Component {
+export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
 
@@ -141,54 +138,6 @@ export class FileCardImageViewBase extends Component {
       })));
     });
 
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes,
-        timeElapsedTillCommenced
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        const timeElapsedTillSucceeded = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced
-          }
-        };
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType,
-          timeElapsedTillCommenced
-        } = this.props;
-        const timeElapsedTillFailed = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -198,7 +147,9 @@ export class FileCardImageViewBase extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt
+        alt,
+        onImageLoad,
+        onImageError
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -216,13 +167,11 @@ export class FileCardImageViewBase extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageLoad: onImageLoad,
+        onImageError: onImageError
       });
     });
 
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-
     _defineProperty(this, "renderProgressBar", () => {
       const {
         mediaName,
@@ -345,9 +294,7 @@ export class FileCardImageViewBase extends Component {
 
 }
 
-_defineProperty(FileCardImageViewBase, "defaultProps", {
+_defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false
-});
-
-export const FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
+});

package/dist/es2019/files/index.js

@@ -1 +1 @@
-export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
+export { FileCardImageView } from './cardImageView';

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,22 +1,11 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, {
-  cardPreview,
-  error
-} = {}) => {
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      /**
-       * A Card that is considered Complete and has no preview,
-       * reflects an expected behaviour, and thus a legitimate
-       * success case to be logged.
-       */
-      if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
-        fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':

package/dist/es2019/root/card/cardLoader.js

@@ -1,59 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
+import Loadable from 'react-loadable';
 import { CardLoading } from '../..';
-export default class CardLoader extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+const MediaCardContext = /*#__PURE__*/React.createContext({});
 
-    _defineProperty(this, "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-  }
+const CardLoadingWithContext = () => {
+  const props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
 
-  async componentDidMount() {
-    if (!this.state.Card) {
-      try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
-        /* webpackChunkName: "@atlaskit-internal_media-client" */
-        '@atlaskit/media-client'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card" */
-        './index'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../media-card-analytics-error-boundary')]);
-        CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-        CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          Card: CardLoader.Card,
-          MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-        });
-      } catch (error) {// TODO [MS-2278]: Add operational error to catch async import error
-      }
-    }
-  }
+const MediaCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card" */
+  './index').then(mod => mod.Card),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardErrorBoundary = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+  '../media-card-analytics-error-boundary').then(mod => mod.default),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardWithMediaClient = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-client" */
+  '@atlaskit/media-client'),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
+});
 
-  render() {
-    const {
-      dimensions,
-      testId,
-      featureFlags
-    } = this.props;
-    const {
-      Card,
-      MediaCardErrorBoundary
-    } = this.state;
+const CardWithMediaClient = props => {
+  const {
+    withMediaClient,
+    featureFlags
+  } = props;
+  const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
 
-    if (!Card || !MediaCardErrorBoundary) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions,
-        featureFlags: featureFlags
-      });
-    }
+const CardLoader = props => {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
 
-    return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-  }
-
-}
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
+export default CardLoader;

package/dist/es2019/root/card/cardState.js

@@ -0,0 +1,26 @@
+import { isErrorFileState } from '@atlaskit/media-client';
+import { MediaCardError } from '../../errors';
+import { getCardStatus, isFinalCardStatus } from './getCardStatus';
+import { extractFilePreviewStatus } from './getCardPreview';
+export const createStateUpdater = newState => prevState => {
+  // Only override if previous status is non-final
+  // or new status is 'complete'
+  if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    return prevState;
+  }
+
+  return { ...prevState,
+    ...newState
+  };
+};
+export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
+  const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
+  const error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
+  const progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+  return {
+    fileState,
+    status,
+    progress,
+    error
+  };
+};

package/dist/es2019/root/card/getCardPreview/cache.js

@@ -17,6 +17,11 @@ export class CardPreviewCacheImpl {
       this.previewCache.set(cacheKey, cardPreview);
     });
 
+    _defineProperty(this, "remove", (id, dimensions) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      this.previewCache.remove(cacheKey);
+    });
+
     this.previewCache = previewCache;
   }