@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -10,7 +10,9 @@ export var ImageRenderer = function ImageRenderer(_ref) {
       onImageLoad = _ref.onImageLoad,
       onImageError = _ref.onImageError,
       onDisplayImage = _ref.onDisplayImage,
-      mediaType = _ref.mediaType;
+      mediaType = _ref.mediaType,
+      nativeLazyLoad = _ref.nativeLazyLoad,
+      forceSyncDisplay = _ref.forceSyncDisplay;
   useEffect(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -22,6 +24,8 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));
 };

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
+import { FormattedMessageWrapper } from '../../styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../Breakpoint';
+import { FormattedMessage } from 'react-intl-next';
+import { Breakpoint } from '../common';
 export var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,
@@ -12,5 +13,5 @@ export var LoadingRateLimited = function LoadingRateLimited(_ref) {
   return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file)), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429))));
+  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
 };

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

@@ -10,7 +10,7 @@ export var WarningIconWrapper = styled.div(_templateObject2 || (_templateObject2
 export var LoadingRateLimitedTextWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, 1), "\n  ");
+  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, false, 1), "\n  ");
 });
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
 export var CouldntLoadWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));

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

@@ -1,16 +1,19 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
-      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
+      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
+      _ref$showOnTop = _ref.showOnTop,
+      showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

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

@@ -6,8 +6,7 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { getTitleBoxHeight, responsiveSettings } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 var height = 3;
 var padding = 1;
 var width = 95; // %
@@ -20,17 +19,18 @@ var smallSizeSettings = {
 var largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 export var StyledBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n    box-sizing: border-box;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 StyledBar.displayName = 'StyledProgressBar';

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

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

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

@@ -3,7 +3,8 @@ import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
       _ref$customMessage = _ref.customMessage,
@@ -14,5 +15,5 @@ export var FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';

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

@@ -1,9 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["triggerRef"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -80,16 +82,22 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/React.createElement(DropdownMenu, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/React.createElement(MoreIcon, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = _objectWithoutProperties(_ref, _excluded);
+
+            return /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/esm/utils/getErrorMessage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export var getErrorMessage = function getErrorMessage(status) {
   return status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/esm/utils/viewportDetector.js

@@ -4,8 +4,28 @@ 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; }
 
-import React, { useEffect } from 'react';
-import { LazyContent } from './lazyContent';
+import React, { useEffect, forwardRef } from 'react';
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+
+export var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px")
+    }
+  });
+});
 
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
@@ -30,33 +50,40 @@ 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;
   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.createElement(React.Fragment, null, children);
 };
 
-export var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/React.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/React.createElement(LazyContent, {
-      placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
-};
-export var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export 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.createElement(React.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/React.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
+};

package/dist/esm/version.json

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

package/dist/types/errors.d.ts

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

package/dist/types/index.d.ts

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

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

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

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

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

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

@@ -1,19 +1,18 @@
-/// <reference types="react-intl" />
 import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { FileIdentifier } from '@atlaskit/media-client';
 import { Subscription } from 'rxjs/Subscription';
+import { WrappedComponentProps } from 'react-intl-next';
 import { CardAction, CardProps, CardState } from '../..';
-export declare type CardWithAnalyticsEventsProps = CardProps & WithAnalyticsEventsProps;
-export declare class CardBase extends Component<CardWithAnalyticsEventsProps, CardState> {
+export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
+export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
+    private viewportPreAnchorRef;
+    private viewportPostAnchorRef;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
     static defaultProps: Partial<CardProps>;
-    static contextTypes: {
-        intl: ReactIntl.IntlShape;
-    };
-    constructor(props: CardWithAnalyticsEventsProps);
+    constructor(props: CardBaseProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CardProps, prevState: CardState): void;
     componentWillUnmount(): void;
@@ -21,6 +20,8 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     private getImageURLParams;
     private getMediaBlobUrlAttrs;
     private getCardPreviewParams;
+    private setCacheSSRPreview;
+    private resolveSSRPreview;
     private resolvePreview;
     subscribeInternalFile(identifier: FileIdentifier): void;
     private get requestedDimensions();
@@ -50,4 +51,4 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent | undefined) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export declare const Card: React.ComponentType<CardWithAnalyticsEventsProps>;
+export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -1,9 +1,9 @@
 import React, { MouseEvent } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
 import { MediaCardError } from '../errors';
+import { MessageDescriptor } from 'react-intl-next';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
@@ -18,6 +18,8 @@ export interface CardViewOwnProps extends SharedCardProps {
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
     readonly onImageLoad: () => void;
     readonly onImageError: () => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
 }
 export interface CardViewState {
@@ -37,7 +39,7 @@ export interface RenderConfigByStatus {
     renderSpinner?: boolean;
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
-    customTitleMessage?: FormattedMessage.MessageDescriptor;
+    customTitleMessage?: MessageDescriptor;
 }
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -71,4 +73,4 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private getRenderConfigByStatus;
     private renderNewExperienceCard;
 }
-export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;
+export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;

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

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

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

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