@atlaskit/media-card 71.0.0 → 73.1.0

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

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResponsiveStyles = generateResponsiveStyles;
 exports.StyledBar = void 0;
+exports.generateResponsiveStyles = generateResponsiveStyles;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -20,8 +20,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _templateObject;
 
 var height = 3;
@@ -37,19 +35,20 @@ var largeSizeSettings = {
   marginBottom: 12
 };
 
-function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var setting = breakpoint === _Breakpoint.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 
 var StyledBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.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(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.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(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 
 exports.StyledBar = StyledBar;

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

@@ -5,38 +5,91 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NewFileExperienceWrapper = void 0;
+exports.calcBreakpointSize = exports.NewFileExperienceWrapper = exports.CardImageContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
 
 var _cardDimensions = require("../../utils/cardDimensions");
 
+var _constants = require("@atlaskit/theme/constants");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+
 var _selection = require("@atlaskit/editor-shared-styles/selection");
 
+var _styles = require("../../styles");
+
 var _styled = require("./tickBox/styled");
 
-var _styled2 = require("./actionsBar/styled");
+var _styled2 = require("./blanket/styled");
 
-var _styled3 = require("./playButton/styled");
+var _styled3 = require("./actionsBar/styled");
 
-var _styledSSR = require("./styledSSR");
+var _styled4 = require("./playButton/styled");
 
-var _templateObject;
+var _common = require("./common");
+
+var _templateObject, _templateObject2;
+
+var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
+
+var calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  var _ref = breakpointSizes.find(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        _breakpoint = _ref4[0],
+        limit = _ref4[1];
+
+    return wrapperWidth <= limit;
+  }) || [_common.Breakpoint.SMALL],
+      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      breakpoint = _ref2[0];
+
+  return breakpoint;
+};
+
+exports.calcBreakpointSize = calcBreakpointSize;
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var setting = _common.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 = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
       defaultWidth = _getDefaultCardDimens.width,
       defaultHeight = _getDefaultCardDimens.height;
 
   return "\n    width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.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(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
+  var selectedShadow = selected ? _consts.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) {
@@ -44,7 +97,7 @@ var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayB
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled3.playButtonClassName, " {\n      ").concat(_styled3.fixedPlayButtonStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styled4.playButtonClassName, " {\n      ").concat(_styled4.fixedPlayButtonStyles, "\n    }\n  ");
 };
 
 var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
@@ -55,13 +108,23 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(_styled.tickBoxClassName, " {\n      ").concat(_styled.tickboxFixedStyles, "\n    }\n  ");
 };
 
-var NewFileExperienceWrapper = (0, _styledComponents.default)(_styledSSR.SSRFileExperienceWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref2) {
-  var dimensions = _ref2.dimensions,
-      appearance = _ref2.appearance,
-      isPlayButtonClickable = _ref2.isPlayButtonClickable,
-      isTickBoxSelectable = _ref2.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref2.shouldDisplayTooltip;
-  return "\n    ".concat(_selection.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(_styled2.actionsBarClassName, " {\n      ").concat(_styled2.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.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(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
+
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+
+var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _mediaUi.borderRadius);
+
+exports.CardImageContainer = CardImageContainer;

package/dist/cjs/root/ui/tickBox/styled.js

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

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

@@ -13,19 +13,25 @@ var _styled = require("./styled");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _getErrorMessage = require("../../../utils/getErrorMessage");
+var _reactIntlNext = require("react-intl-next");
+
+var _styled2 = require("../../styled");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), (0, _getErrorMessage.getErrorMessage)('error')));
+  }), /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ErrorMessageWrapper = exports.TitleBoxIcon = exports.TitleBoxFooter = exports.TitleBoxHeader = exports.TitleBoxWrapper = void 0;
+exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _mixins = require("../../../styles/mixins");
@@ -22,7 +20,7 @@ var _mixins = require("../../../styles/mixins");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
   var verticalPadding = setting.titleBox.verticalPadding;
   var horizontalPadding = setting.titleBox.horizontalPadding;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styled = require("./styled");
 
@@ -19,7 +19,7 @@ var _truncateText = require("@atlaskit/media-ui/truncateText");
 
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 
-var FormattedDate = (0, _reactIntl.injectIntl)(function (_ref) {
+var FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
   var timestamp = _ref.timestamp,
       intl = _ref.intl;
 

package/dist/cjs/styles/index.js

@@ -5,12 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "defaultTransitionDuration", {
-  enumerable: true,
-  get: function get() {
-    return _config.defaultTransitionDuration;
-  }
-});
+exports.Root = exports.FadeinImage = void 0;
 Object.defineProperty(exports, "antialiased", {
   enumerable: true,
   get: function get() {
@@ -29,6 +24,7 @@ Object.defineProperty(exports, "capitalize", {
     return _mixins.capitalize;
   }
 });
+exports.cardShadow = void 0;
 Object.defineProperty(exports, "centerSelf", {
   enumerable: true,
   get: function get() {
@@ -53,55 +49,61 @@ Object.defineProperty(exports, "centerX", {
     return _mixins.centerX;
   }
 });
-Object.defineProperty(exports, "hexToRgb", {
+exports.default = void 0;
+Object.defineProperty(exports, "defaultTransitionDuration", {
   enumerable: true,
   get: function get() {
-    return _mixins.hexToRgb;
+    return _config.defaultTransitionDuration;
   }
 });
-Object.defineProperty(exports, "rgba", {
+Object.defineProperty(exports, "easeOutCubic", {
   enumerable: true,
   get: function get() {
-    return _mixins.rgba;
+    return _easing.easeOutCubic;
   }
 });
-Object.defineProperty(exports, "spaceAround", {
+Object.defineProperty(exports, "easeOutExpo", {
   enumerable: true,
   get: function get() {
-    return _mixins.spaceAround;
+    return _easing.easeOutExpo;
   }
 });
-Object.defineProperty(exports, "transition", {
+Object.defineProperty(exports, "hexToRgb", {
   enumerable: true,
   get: function get() {
-    return _mixins.transition;
+    return _mixins.hexToRgb;
   }
 });
-Object.defineProperty(exports, "withAppearance", {
+Object.defineProperty(exports, "rgba", {
   enumerable: true,
   get: function get() {
-    return _mixins.withAppearance;
+    return _mixins.rgba;
   }
 });
-Object.defineProperty(exports, "easeOutCubic", {
+Object.defineProperty(exports, "spaceAround", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutCubic;
+    return _mixins.spaceAround;
   }
 });
-Object.defineProperty(exports, "easeOutExpo", {
+Object.defineProperty(exports, "spin", {
   enumerable: true,
   get: function get() {
-    return _easing.easeOutExpo;
+    return _animations.spin;
   }
 });
-Object.defineProperty(exports, "spin", {
+Object.defineProperty(exports, "transition", {
   enumerable: true,
   get: function get() {
-    return _animations.spin;
+    return _mixins.transition;
+  }
+});
+Object.defineProperty(exports, "withAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _mixins.withAppearance;
   }
 });
-exports.default = exports.FadeinImage = exports.cardShadow = exports.Root = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/styles/mixins.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withAppearance = exports.capitalize = exports.rgba = exports.hexToRgb = exports.transition = exports.spaceAround = exports.borderRadiusLeft = exports.centerSelf = exports.centerSelfX = exports.centerSelfY = exports.antialiased = exports.centerX = void 0;
+exports.withAppearance = exports.transition = exports.spaceAround = exports.rgba = exports.hexToRgb = exports.centerX = exports.centerSelfY = exports.centerSelfX = exports.centerSelf = exports.capitalize = exports.borderRadiusLeft = exports.antialiased = void 0;
 
 var _constants = require("@atlaskit/theme/constants");
 

package/dist/cjs/utils/analytics.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createAndFireMediaCardEvent = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.createAndFireMediaCardEvent = exports.getCopiedFilePayload = exports.getRenderFailedFileStatusPayload = exports.getRenderErrorEventPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorErrorDetail = exports.getRenderErrorErrorReason = exports.getRenderErrorFailReason = exports.getRenderFailedExternalUriPayload = exports.getRenderFailedFileUriPayload = exports.getFailedFileUriFailReason = exports.getRenderSucceededEventPayload = exports.getRenderCommencedEventPayload = exports.getRenderPreviewableCardPayload = exports.getFileAttributes = exports.RenderEventAction = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
 
 var _mediaClient = require("@atlaskit/media-client");
 
@@ -14,15 +15,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _errors = require("../errors");
 
-var RenderEventAction;
-exports.RenderEventAction = RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (exports.RenderEventAction = RenderEventAction = {}));
-
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -53,7 +45,7 @@ exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -67,7 +59,7 @@ exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -79,39 +71,10 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
 
 exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
 
-var getFailedFileUriFailReason = function getFailedFileUriFailReason(fileStatus) {
-  if (!fileStatus) {
-    // This fail reason will come from a bug, most likely.
-    return "unknown-uri";
-  } else if (fileStatus === 'uploading') {
-    return 'local-uri';
-  }
-
-  return 'remote-uri';
-};
-
-exports.getFailedFileUriFailReason = getFailedFileUriFailReason;
-
-var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes, performanceAttributes) {
-  return {
-    eventType: 'operational',
-    action: RenderEventAction.FAILED,
-    actionSubject: 'mediaCardRender',
-    attributes: {
-      fileAttributes: fileAttributes,
-      performanceAttributes: performanceAttributes,
-      status: 'fail',
-      failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
-    }
-  };
-};
-
-exports.getRenderFailedFileUriPayload = getRenderFailedFileUriPayload;
-
 var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -169,7 +132,7 @@ exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -188,7 +151,7 @@ exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,

package/dist/cjs/utils/breakpoint.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.breakpointStyles = exports.cardBreakpointSizes = exports.breakpointSize = void 0;
+exports.cardBreakpointSizes = exports.breakpointStyles = exports.breakpointSize = void 0;
 
 var _mediaUi = require("@atlaskit/media-ui");
 

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardActionsDropdownMenu = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -33,6 +35,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _analytics = require("../analytics");
 
+var _excluded = ["triggerRef"];
+
 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; }
@@ -103,16 +107,21 @@ var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/_react.default.createElement(_more.default, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+            return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/_react.default.createElement(_more.default, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/cjs/utils/cardActions/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "CardActionIconButton", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _cardActionIconButton.CardActionIconButton;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "CardActionIconButtonVariant", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _styled.CardActionIconButtonVariant;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
   enumerable: true,
   get: function get() {
-    return _cardActionIconButton.CardActionIconButton;
+    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "CardActionsView", {
   enumerable: true,
   get: function get() {
-    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
+    return _cardActionsView.CardActionsView;
   }
 });
-Object.defineProperty(exports, "CardActionIconButtonVariant", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _styled.CardActionIconButtonVariant;
+    return _cardActionsView.CardActionsView;
   }
 });
 

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

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

package/dist/cjs/utils/cardDimensions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultCardDimensions = exports.getCardMaxWidth = exports.getCardMinWidth = exports.getCardMaxHeight = exports.maxSquareCardDimensions = exports.maxHorizontalCardDimensions = exports.maxImageCardDimensions = exports.minHorizontalCardDimensions = exports.minSquareCardDimensions = exports.minImageCardDimensions = exports.minSmallCardDimensions = exports.defaultSquareCardDimensions = exports.defaultHorizontalCardDimensions = exports.defaultImageCardDimensions = exports.defaultSmallCardDimensions = void 0;
+exports.minSquareCardDimensions = exports.minSmallCardDimensions = exports.minImageCardDimensions = exports.minHorizontalCardDimensions = exports.maxSquareCardDimensions = exports.maxImageCardDimensions = exports.maxHorizontalCardDimensions = exports.getDefaultCardDimensions = exports.getCardMinWidth = exports.getCardMaxWidth = exports.getCardMaxHeight = exports.defaultSquareCardDimensions = exports.defaultSmallCardDimensions = exports.defaultImageCardDimensions = exports.defaultHorizontalCardDimensions = void 0;
 // Default dimensions
 var defaultSmallCardDimensions = {
   width: '100%',

package/dist/cjs/utils/dimensionComparer.js

@@ -32,7 +32,7 @@ var canCompareDimension = function canCompareDimension(current, next) {
 exports.canCompareDimension = canCompareDimension;
 
 var isBigger = function isBigger(current, next) {
-  if (canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
+  if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
     var nextIsHigher = parseInt("".concat(current.width), 10) < parseInt("".concat(next.width), 10);
     var nextIsWider = parseInt("".concat(current.height), 10) < parseInt("".concat(next.height), 10);
     return nextIsHigher || nextIsWider;

package/dist/cjs/utils/getErrorMessage.js

@@ -9,12 +9,12 @@ exports.getErrorMessage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
 var getErrorMessage = function getErrorMessage(status) {
-  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.failed_to_load);
+  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.failed_to_load);
 };
 
 exports.getErrorMessage = getErrorMessage;