@atlaskit/media-card 78.0.1 → 78.0.3

package/dist/es2019/card/ui/playButton/styles.js

@@ -12,7 +12,7 @@ export const fixedPlayButtonStyles = `
   }
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -29,7 +29,7 @@ export const playButtonWrapperStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

package/dist/es2019/card/ui/titleBox/styles.js

@@ -55,14 +55,14 @@ infoStyles,
 hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "78.0.1",
+      packageName: "78.0.3",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/errorIcon/styles.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

package/dist/es2019/utils/ufoExperiences.js

@@ -1,10 +1,11 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
+import isValidId from 'uuid-validate';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.0.1";
+const packageVersion = "78.0.3";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {
@@ -23,6 +24,20 @@ const getExperience = id => {
 export const startUfoExperience = id => {
   getExperience(id).start();
 };
+const sanitiseFileAttributes = fileAttributes => {
+  /*
+  	Allow external image mediaItemType as fileId
+  	See ExternalImageIdentifier interface on platform/packages/media/media-client/src/identifier.ts
+   */
+  let sanitisedFileId = 'INVALID_FILE_ID';
+  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
+    sanitisedFileId = fileAttributes.fileId;
+  }
+  return {
+    ...fileAttributes,
+    fileId: sanitisedFileId
+  };
+};
 export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data')) => {
   switch (status) {
     case 'complete':
@@ -58,6 +73,9 @@ const getBasePayloadAttributes = () => ({
   mediaRegion: getMediaRegion()
 });
 const succeedUfoExperience = (id, properties) => {
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).success({
     metadata: {
       ...properties,
@@ -66,6 +84,9 @@ const succeedUfoExperience = (id, properties) => {
   });
 };
 const failUfoExperience = (id, properties) => {
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).failure({
     metadata: {
       ...properties,
@@ -75,6 +96,9 @@ const failUfoExperience = (id, properties) => {
 };
 export const abortUfoExperience = (id, properties) => {
   // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).abort({
     metadata: {
       ...properties,

package/dist/esm/card/card.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.1";
+var packageVersion = "78.0.3";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/fileCard.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
@@ -32,7 +32,7 @@ import { performanceNow } from './performance';
 import { useContext } from 'react';
 import { DateOverrideContext } from '../dateOverrideContext';
 import { SvgView } from './svgView';
-var LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
+var LoadedCardView = fg('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
 export var FileCard = function FileCard(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
@@ -318,7 +318,7 @@ export var FileCard = function FileCard(_ref) {
     setShouldRenderSVG(false);
   };
   var onImageError = function onImageError(newCardPreview) {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageErrorBase(newCardPreview);
@@ -327,7 +327,7 @@ export var FileCard = function FileCard(_ref) {
     setPreviewDidRender(true);
   };
   var onImageLoad = function onImageLoad(newCardPreview) {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+    if (metadata.mimeType === 'image/svg+xml' && fg('platform.media-card-svg-rendering_6tdbv')) {
       return;
     }
     onImageLoadBase(newCardPreview);
@@ -454,14 +454,15 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   useEffect(function () {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
+    if (finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
      * it is able to set isCardVisible to true.
      */
-    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
-    ) {
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay &&
+    // SVG won't be supported when overlay is on
+    fg('platform.media-card-svg-rendering_6tdbv')) {
       setShouldRenderSVG(true);
     }
   }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
@@ -644,7 +645,7 @@ export var FileCard = function FileCard(_ref) {
     cardPreview: preview,
     alt: alt,
     resizeMode: resizeMode,
-    dimensions: cardDimensions,
+    cardDimensions: cardDimensions,
     selected: selected,
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.1";
+var packageVersion = "78.0.3";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/svgView/helpers.js

@@ -1,10 +1,49 @@
-export var calculateSvgDimensions = function calculateSvgDimensions(img, resizeMode) {
-  var naturalWidth = img.naturalWidth,
-    naturalHeight = img.naturalHeight;
-  var isLadscape = naturalWidth / naturalHeight > 1;
-  return resizeMode === 'crop' ? isLadscape ? {
-    height: '100%'
-  } : {
-    width: '100%'
-  } : {};
+export var calculateSvgDimensions = function calculateSvgDimensions(imgElement, parentElement, resizeMode) {
+  var naturalWidth = imgElement.naturalWidth,
+    width = imgElement.width,
+    naturalHeight = imgElement.naturalHeight,
+    height = imgElement.height;
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  var imgWidth = naturalWidth || width;
+  var imgHeight = naturalHeight || height;
+  var _parentElement$getBou = parentElement.getBoundingClientRect(),
+    parentWidth = _parentElement$getBou.width,
+    parentHeight = _parentElement$getBou.height;
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "min(100%, ".concat(imgWidth, "px"),
+      maxHeight: "min(100%, ".concat(imgHeight, "px")
+    };
+  }
+  var imgRatio = imgWidth / imgHeight;
+  var cardRatio = parentWidth / parentHeight;
+  var isImageLandscapier = imgRatio > cardRatio;
+  if (resizeMode === 'stretchy-fit') {
+    if (isImageLandscapier) {
+      return {
+        width: '100%',
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        height: '100%',
+        maxWidth: '100%'
+      };
+    }
+  }
+  if (resizeMode === 'crop') {
+    if (isImageLandscapier) {
+      return {
+        height: imgHeight,
+        maxHeight: '100%'
+      };
+    } else {
+      return {
+        width: imgWidth,
+        maxWidth: '100%'
+      };
+    }
+  }
+  return {};
 };

package/dist/esm/card/svgView/svgView.js

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
@@ -16,22 +19,9 @@ import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
 import { MediaCardError } from '../../errors';
 import { getErrorReason } from './errors';
-export var convertResizeMode = function convertResizeMode(resizeMode) {
-  switch (resizeMode) {
-    case 'crop':
-      return 'cover';
-    case 'fit':
-    case 'full-fit':
-      return 'scale-down';
-    case 'stretchy-fit':
-      return 'contain';
-    default:
-      return;
-  }
-};
 export var SvgViewBase = function SvgViewBase(_ref) {
   var identifier = _ref.identifier,
-    dimensions = _ref.dimensions,
+    cardDimensions = _ref.cardDimensions,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     testId = _ref.testId,
@@ -60,10 +50,17 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     svgDimensions = _useState6[0],
     setSvgDimensions = _useState6[1];
-  var divRef = useRef(null);
-  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var imgRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var breakpoint = useBreakpoint(cardDimensions.width, wrapperRef);
+  var calculateDimensions = useCallback(function (targetImgElem) {
+    if (!wrapperRef.current || !targetImgElem) {
+      return;
+    }
+    setSvgDimensions(calculateSvgDimensions(targetImgElem, wrapperRef.current, resizeMode));
+  }, [resizeMode]);
   var onSvgLoad = function onSvgLoad(evt) {
-    setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
+    calculateDimensions(evt.currentTarget);
     setDidSvgRender(true);
     onLoad();
   };
@@ -74,16 +71,21 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
   };
+  useEffect(function () {
+    if (imgRef.current) {
+      calculateDimensions(imgRef.current);
+    }
+  }, [imgRef, calculateDimensions]);
   return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
     fileName: fileName !== null && fileName !== void 0 ? fileName : '',
     innerRef: openMediaViewerButtonRef,
     onClick: onClick
   }), jsx(Wrapper, {
     testId: testId || 'media-card-svg-wrapper',
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: wrapperRef,
     mediaCardCursor: mediaCardCursor,
     selected: !!selected,
     breakpoint: breakpoint,
@@ -103,13 +105,12 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   }, jsx(MediaSvg, {
     testId: "media-card-svg",
     identifier: identifier,
-    dimensions: svgDimensions,
     onLoad: onSvgLoad,
     onError: onSvgError,
-    style: {
-      visibility: didSvgRender ? 'visible' : 'hidden',
-      objectFit: convertResizeMode(resizeMode)
-    }
+    style: _objectSpread({
+      visibility: didSvgRender ? 'visible' : 'hidden'
+    }, svgDimensions),
+    ref: imgRef
   }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
     cardPreview: cardPreview,
     onImageLoad: onPreviewLoad,

package/dist/esm/card/ui/actionsBar/cardActions/styles.js

@@ -5,7 +5,7 @@ import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var wrapperStyles = css({
   boxSizing: 'border-box',
   fontFamily: fontFamily(),

package/dist/esm/card/ui/playButton/styles.js

@@ -7,7 +7,7 @@ var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var playButtonWrapperStyles = css({
   position: 'absolute',
   top: 0,
@@ -24,7 +24,7 @@ export var playButtonWrapperStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var backgroundStyles = css({
   transitionProperty: 'width, height',
   transitionDuration: '0.1s',

package/dist/esm/card/ui/titleBox/styles.js

@@ -58,14 +58,14 @@ export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var titleBoxIconStyles = css({
   position: 'absolute',
   right: "var(--ds-space-050, 4px)",
   bottom: '0px'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var errorMessageWrapperStyles = css({
   display: 'flex',
   alignItems: 'center',

package/dist/esm/inline/loader.js

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

package/dist/esm/utils/lightCards/errorIcon/styles.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var errorIconWrapperStyles = css({
   display: 'flex',
   color: "var(--ds-icon-warning, #ff991f)"

package/dist/esm/utils/ufoExperiences.js

@@ -3,11 +3,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
+import isValidId from 'uuid-validate';
 import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.0.1";
+var packageVersion = "78.0.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
@@ -26,6 +27,19 @@ var getExperience = function getExperience(id) {
 export var startUfoExperience = function startUfoExperience(id) {
   getExperience(id).start();
 };
+var sanitiseFileAttributes = function sanitiseFileAttributes(fileAttributes) {
+  /*
+  	Allow external image mediaItemType as fileId
+  	See ExternalImageIdentifier interface on platform/packages/media/media-client/src/identifier.ts
+   */
+  var sanitisedFileId = 'INVALID_FILE_ID';
+  if (fileAttributes.fileId === 'external-image' || isValidId(fileAttributes.fileId)) {
+    sanitisedFileId = fileAttributes.fileId;
+  }
+  return _objectSpread(_objectSpread({}, fileAttributes), {}, {
+    fileId: sanitisedFileId
+  });
+};
 export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
   switch (status) {
@@ -64,17 +78,26 @@ var getBasePayloadAttributes = function getBasePayloadAttributes() {
   };
 };
 var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
   });
 };
 var failUfoExperience = function failUfoExperience(id, properties) {
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
   });
 };
 export var abortUfoExperience = function abortUfoExperience(id, properties) {
   // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  }
   getExperience(id).abort({
     metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
   });

package/dist/types/card/svgView/helpers.d.ts

@@ -1,3 +1,2 @@
 import { type ImageResizeMode } from '@atlaskit/media-client';
-import { type MediaSvgProps } from '@atlaskit/media-svg';
-export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];
+export declare const calculateSvgDimensions: (imgElement: HTMLImageElement, parentElement: HTMLElement, resizeMode: ImageResizeMode) => React.CSSProperties;

package/dist/types/card/svgView/svgView.d.ts

@@ -3,16 +3,15 @@ import { jsx } from '@emotion/react';
 import React, { type MouseEvent } from 'react';
 import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../types';
+import { type CardDimensions, type CardStatus, type MediaCardCursor } from '../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
 import { MediaCardError } from '../../errors';
-export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
     readonly testId?: string;
     identifier: FileIdentifier;
     readonly status: CardStatus;
-    readonly dimensions: CardDimensions;
+    readonly cardDimensions: CardDimensions;
     readonly onClick?: OnClickFn;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly selected?: boolean;
@@ -21,12 +20,12 @@ export interface SvgViewBaseOwnProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly progress?: number;
     readonly alt?: string;
-    readonly resizeMode?: ImageResizeMode;
+    readonly resizeMode: ImageResizeMode;
     readonly onLoad: () => void;
     readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, cardDimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/card/svgView/helpers.d.ts

@@ -1,3 +1,2 @@
 import { type ImageResizeMode } from '@atlaskit/media-client';
-import { type MediaSvgProps } from '@atlaskit/media-svg';
-export declare const calculateSvgDimensions: (img: HTMLImageElement, resizeMode?: ImageResizeMode) => MediaSvgProps['dimensions'];
+export declare const calculateSvgDimensions: (imgElement: HTMLImageElement, parentElement: HTMLElement, resizeMode: ImageResizeMode) => React.CSSProperties;

package/dist/types-ts4.5/card/svgView/svgView.d.ts

@@ -3,16 +3,15 @@ import { jsx } from '@emotion/react';
 import React, { type MouseEvent } from 'react';
 import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../types';
+import { type CardDimensions, type CardStatus, type MediaCardCursor } from '../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
 import { MediaCardError } from '../../errors';
-export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
     readonly testId?: string;
     identifier: FileIdentifier;
     readonly status: CardStatus;
-    readonly dimensions: CardDimensions;
+    readonly cardDimensions: CardDimensions;
     readonly onClick?: OnClickFn;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly selected?: boolean;
@@ -21,12 +20,12 @@ export interface SvgViewBaseOwnProps {
     readonly mediaCardCursor?: MediaCardCursor;
     readonly progress?: number;
     readonly alt?: string;
-    readonly resizeMode?: ImageResizeMode;
+    readonly resizeMode: ImageResizeMode;
     readonly onLoad: () => void;
     readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, cardDimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/example-helpers/cardViewWrapper.tsx

@@ -35,8 +35,10 @@ const cardWrapperStyles = ({ small, displayInline }: CardViewWrapperProps) =>
 
 export const CardViewWrapper = (props: CardViewWrapperProps) => {
 	if (props.small) {
+		// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 		return <Box xcss={[cardWrapperStyles(props), smallStyles]}>{props.children}</Box>;
 	} else {
+		// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 		return <Box xcss={[cardWrapperStyles(props), largeStyles]}>{props.children}</Box>;
 	}
 };