@atlaskit/media-card 79.0.12 → 79.0.13

package/dist/es2019/card/ui/imageRenderer/helpers.js

@@ -0,0 +1,73 @@
+export const calculateDimensions = (imgElement, parentElement, resizeMode) => {
+  const {
+    naturalWidth,
+    width,
+    naturalHeight,
+    height
+  } = imgElement;
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  const imgWidth = naturalWidth || width;
+  const imgHeight = naturalHeight || height;
+  const {
+    width: parentWidth,
+    height: parentHeight
+  } = parentElement.getBoundingClientRect();
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: `min(100%, ${imgWidth}px)`,
+      maxHeight: `min(100%, ${imgHeight}px)`
+    };
+  }
+  const imgRatio = imgWidth / imgHeight;
+  const cardRatio = parentWidth / parentHeight;
+  const 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 {};
+};
+export const calculateInitialDimensions = resizeMode => {
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: `100%`,
+      maxHeight: `100%`
+    };
+  }
+  if (resizeMode === 'stretchy-fit') {
+    // assume the image is landscape
+    return {
+      width: '100%',
+      maxHeight: '100%'
+    };
+  }
+
+  // resizeMode === 'crop'
+  // assume the image is landscape
+  return {
+    width: '100%'
+  };
+};

package/dist/es2019/card/ui/imageRenderer/imageRendererV2.compiled.css

@@ -0,0 +1,2 @@
+._5ral1f51{object-fit:contain}
+._bfhku67f{background-color:#fff}

package/dist/es2019/card/ui/imageRenderer/imageRendererV2.js

@@ -0,0 +1,68 @@
+/* imageRendererV2.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./imageRendererV2.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useState, useRef, useEffect } from 'react';
+import { calculateDimensions, calculateInitialDimensions } from './helpers';
+import { useCurrentValueRef } from '../../../utils/useCurrentValueRef';
+import { ImageRendererWrapper } from './wrapper';
+import { isFileIdentifier } from '@atlaskit/media-client';
+const baseStyles = null;
+const backgroundStyles = null;
+export const ImageRenderer = ({
+  cardPreview,
+  alt = '',
+  resizeMode = 'crop',
+  onImageLoad,
+  onImageError,
+  onDisplayImage,
+  mediaType,
+  nativeLazyLoad,
+  forceSyncDisplay,
+  identifier,
+  wrapperRef,
+  useWhiteBackground,
+  testId
+}) => {
+  const onDisplayImageRef = useCurrentValueRef(onDisplayImage);
+  useEffect(() => {
+    if (mediaType === 'image') {
+      var _onDisplayImageRef$cu;
+      (_onDisplayImageRef$cu = onDisplayImageRef.current) === null || _onDisplayImageRef$cu === void 0 ? void 0 : _onDisplayImageRef$cu.call(onDisplayImageRef);
+    }
+  }, [mediaType, onDisplayImageRef]);
+  const [didRender, setDidRender] = useState(false);
+  const [resolvedDimensions, setResolvedDimensions] = useState(calculateInitialDimensions(resizeMode));
+  const imgRef = useRef(null);
+  const onLoad = evt => {
+    wrapperRef.current && setResolvedDimensions(calculateDimensions(evt.currentTarget, wrapperRef.current, resizeMode));
+    setDidRender(true);
+    cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
+  };
+  const onError = () => {
+    onImageError && cardPreview && onImageError(cardPreview);
+  };
+  useEffect(() => {
+    if (imgRef.current && wrapperRef.current && imgRef.current) {
+      setResolvedDimensions(calculateDimensions(imgRef.current, wrapperRef.current, resizeMode));
+    }
+  }, [resizeMode, wrapperRef]);
+  return cardPreview ? /*#__PURE__*/React.createElement(ImageRendererWrapper, null, /*#__PURE__*/React.createElement("img", {
+    ref: imgRef,
+    "data-testid": testId,
+    "data-fileid": isFileIdentifier(identifier) ? identifier.id : null,
+    "data-filecollection": isFileIdentifier(identifier) ? identifier.collectionName : null,
+    "data-resizemode": resizeMode,
+    "data-source": cardPreview.source,
+    src: cardPreview.dataURI,
+    alt: alt,
+    onLoad: onLoad,
+    onError: onError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    style: {
+      visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...resolvedDimensions
+    },
+    className: ax(["_5ral1f51", useWhiteBackground && "_bfhku67f"])
+  })) : null;
+};

package/dist/es2019/card/ui/imageRenderer/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageRenderer as ImageRendererV1 } from './imageRenderer';
+import { ImageRenderer as ImageRendererV2 } from './imageRendererV2';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const ImageRenderer = props => {
+  return fg('platform_media_card_image_render') ? /*#__PURE__*/React.createElement(ImageRendererV2, props) : /*#__PURE__*/React.createElement(ImageRendererV1, props);
+};

package/dist/es2019/card/ui/imageRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/card/ui/imageRenderer/wrapper.compiled.css

@@ -0,0 +1,7 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}

package/dist/es2019/card/ui/imageRenderer/wrapper.js

@@ -0,0 +1,11 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const wrapperStyles = null;
+export const ImageRendererWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": "ImageRendererWrapper",
+  className: ax(["_kqswstnw _1bsb1osq _4t3i1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+}, children);

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: "79.0.12",
+      packageName: "79.0.13",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -5,7 +5,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.0.12";
+const packageVersion = "79.0.13";
 const SAMPLE_RATE = 0.05;
 let concurrentExperience;
 const getExperience = id => {

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.12";
+var packageVersion = "79.0.13";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -3,6 +3,7 @@ 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 React, { useEffect, useState, useRef, useMemo } from 'react';
+import { isFileIdentifier } from '@atlaskit/media-client';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
@@ -10,7 +11,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { useMergeRefs } from 'use-callback-ref';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
-import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
+import { ImageRenderer } from './ui/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
@@ -27,6 +28,7 @@ import { useBreakpoint } from './useBreakpoint';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { SvgView } from './svgView';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var CardViewBase = function CardViewBase(_ref) {
   var identifier = _ref.identifier,
     _ref$innerRef = _ref.innerRef,
@@ -235,7 +237,8 @@ export var CardViewBase = function CardViewBase(_ref) {
     onSvgLoad === null || onSvgLoad === void 0 || onSvgLoad();
   };
   var contents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageContainer, {
-    centerElements: didSvgRender,
+    centerElements: didSvgRender && !fg('platform_media_card_image_render') // The whole centerElements styles can go after removing the flag
+    ,
     testId: fileCardImageViewSelector,
     mediaName: name,
     status: status,
@@ -256,13 +259,13 @@ export var CardViewBase = function CardViewBase(_ref) {
   }, /*#__PURE__*/React.createElement(SpinnerIcon, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
-  })), renderSvgView && identifier && /*#__PURE__*/React.createElement(SvgView, {
+  })), renderSvgView && identifier && isFileIdentifier(identifier) && /*#__PURE__*/React.createElement(SvgView, {
     identifier: identifier,
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
     wrapperRef: divRef
-  }), renderImageRenderer && /*#__PURE__*/React.createElement(ImageRenderer, {
+  }), renderImageRenderer && identifier && /*#__PURE__*/React.createElement(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
     alt: alt !== null && alt !== void 0 ? alt : name,
@@ -271,7 +274,9 @@ export var CardViewBase = function CardViewBase(_ref) {
     onImageLoad: handleOnImageLoad,
     onImageError: handleOnImageError,
     nativeLazyLoad: nativeLazyLoad,
-    forceSyncDisplay: forceSyncDisplay
+    forceSyncDisplay: forceSyncDisplay,
+    identifier: identifier,
+    wrapperRef: divRef
   }), renderPlayButton && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/esm/card/externalImageCard.js

@@ -191,6 +191,7 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
 
   var mediaCardCursor = getMediaCardCursor(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardView, {
+    identifier: identifier,
     status: status,
     error: error,
     mediaItemType: identifier.mediaItemType,

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.12";
+var packageVersion = "79.0.13";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SvgView as SvgViewCompiled } from './svgImage-compiled';
 import { SvgView as SvgViewEmotion } from './svgImage-emotion';
+import { SvgView as SvgViewV2 } from './svgViewV2';
 export var SvgView = function SvgView(props) {
-  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(SvgViewCompiled, props) : /*#__PURE__*/React.createElement(SvgViewEmotion, props);
+  return fg('platform_media_card_image_render') ? /*#__PURE__*/React.createElement(SvgViewV2, props) : fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(SvgViewCompiled, props) : /*#__PURE__*/React.createElement(SvgViewEmotion, props);
 };

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

@@ -0,0 +1,57 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useMemo } from 'react';
+import { MediaCardError } from '../../errors';
+import { useResolveSvg, MediaSVGError } from '@atlaskit/media-svg';
+import { ImageRenderer } from '../ui/imageRenderer/imageRendererV2';
+var getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    case 'blob-to-datauri':
+      return 'svg-blob-to-datauri';
+    default:
+      return 'svg-unknown-error';
+  }
+};
+export var SvgView = function SvgView(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    wrapperRef = _ref.wrapperRef,
+    alt = _ref.alt;
+  var onSvgError = function onSvgError(err) {
+    var error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError === null || onError === void 0 || onError(error);
+  };
+  var _useResolveSvg = useResolveSvg(identifier, onSvgError),
+    svgUrl = _useResolveSvg.svgUrl,
+    source = _useResolveSvg.source;
+  var cardPreview = useMemo(function () {
+    return svgUrl && source ? {
+      dataURI: svgUrl,
+      source: source
+    } : undefined;
+  }, [svgUrl, source]);
+  return cardPreview ? jsx(ImageRenderer, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    cardPreview: cardPreview,
+    alt: alt,
+    resizeMode: resizeMode,
+    onImageLoad: onLoad,
+    onImageError: function onImageError() {
+      onSvgError(new MediaSVGError('img-error'));
+    },
+    wrapperRef: wrapperRef,
+    mediaType: "image",
+    useWhiteBackground: true
+  }) : null;
+};

package/dist/esm/card/ui/imageRenderer/helpers.js

@@ -0,0 +1,70 @@
+export var calculateDimensions = function calculateDimensions(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 {};
+};
+export var calculateInitialDimensions = function calculateInitialDimensions(resizeMode) {
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: "100%",
+      maxHeight: "100%"
+    };
+  }
+  if (resizeMode === 'stretchy-fit') {
+    // assume the image is landscape
+    return {
+      width: '100%',
+      maxHeight: '100%'
+    };
+  }
+
+  // resizeMode === 'crop'
+  // assume the image is landscape
+  return {
+    width: '100%'
+  };
+};

package/dist/esm/card/ui/imageRenderer/imageRendererV2.compiled.css

@@ -0,0 +1,2 @@
+._5ral1f51{object-fit:contain}
+._bfhku67f{background-color:#fff}

package/dist/esm/card/ui/imageRenderer/imageRendererV2.js

@@ -0,0 +1,77 @@
+/* imageRendererV2.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./imageRendererV2.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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 React, { useState, useRef, useEffect } from 'react';
+import { calculateDimensions, calculateInitialDimensions } from './helpers';
+import { useCurrentValueRef } from '../../../utils/useCurrentValueRef';
+import { ImageRendererWrapper } from './wrapper';
+import { isFileIdentifier } from '@atlaskit/media-client';
+var baseStyles = null;
+var backgroundStyles = null;
+export var ImageRenderer = function ImageRenderer(_ref) {
+  var cardPreview = _ref.cardPreview,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    onImageLoad = _ref.onImageLoad,
+    onImageError = _ref.onImageError,
+    onDisplayImage = _ref.onDisplayImage,
+    mediaType = _ref.mediaType,
+    nativeLazyLoad = _ref.nativeLazyLoad,
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    identifier = _ref.identifier,
+    wrapperRef = _ref.wrapperRef,
+    useWhiteBackground = _ref.useWhiteBackground,
+    testId = _ref.testId;
+  var onDisplayImageRef = useCurrentValueRef(onDisplayImage);
+  useEffect(function () {
+    if (mediaType === 'image') {
+      var _onDisplayImageRef$cu;
+      (_onDisplayImageRef$cu = onDisplayImageRef.current) === null || _onDisplayImageRef$cu === void 0 || _onDisplayImageRef$cu.call(onDisplayImageRef);
+    }
+  }, [mediaType, onDisplayImageRef]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    didRender = _useState2[0],
+    setDidRender = _useState2[1];
+  var _useState3 = useState(calculateInitialDimensions(resizeMode)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resolvedDimensions = _useState4[0],
+    setResolvedDimensions = _useState4[1];
+  var imgRef = useRef(null);
+  var onLoad = function onLoad(evt) {
+    wrapperRef.current && setResolvedDimensions(calculateDimensions(evt.currentTarget, wrapperRef.current, resizeMode));
+    setDidRender(true);
+    cardPreview && (onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview));
+  };
+  var onError = function onError() {
+    onImageError && cardPreview && onImageError(cardPreview);
+  };
+  useEffect(function () {
+    if (imgRef.current && wrapperRef.current && imgRef.current) {
+      setResolvedDimensions(calculateDimensions(imgRef.current, wrapperRef.current, resizeMode));
+    }
+  }, [resizeMode, wrapperRef]);
+  return cardPreview ? /*#__PURE__*/React.createElement(ImageRendererWrapper, null, /*#__PURE__*/React.createElement("img", {
+    ref: imgRef,
+    "data-testid": testId,
+    "data-fileid": isFileIdentifier(identifier) ? identifier.id : null,
+    "data-filecollection": isFileIdentifier(identifier) ? identifier.collectionName : null,
+    "data-resizemode": resizeMode,
+    "data-source": cardPreview.source,
+    src: cardPreview.dataURI,
+    alt: alt,
+    onLoad: onLoad,
+    onError: onError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    style: _objectSpread({
+      visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden'
+    }, resolvedDimensions),
+    className: ax(["_5ral1f51", useWhiteBackground && "_bfhku67f"])
+  })) : null;
+};

package/dist/esm/card/ui/imageRenderer/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageRenderer as ImageRendererV1 } from './imageRenderer';
+import { ImageRenderer as ImageRendererV2 } from './imageRendererV2';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var ImageRenderer = function ImageRenderer(props) {
+  return fg('platform_media_card_image_render') ? /*#__PURE__*/React.createElement(ImageRendererV2, props) : /*#__PURE__*/React.createElement(ImageRendererV1, props);
+};

package/dist/esm/card/ui/imageRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/card/ui/imageRenderer/wrapper.compiled.css

@@ -0,0 +1,7 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}

package/dist/esm/card/ui/imageRenderer/wrapper.js

@@ -0,0 +1,12 @@
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var wrapperStyles = null;
+export var ImageRendererWrapper = function ImageRendererWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ImageRendererWrapper",
+    className: ax(["_kqswstnw _1bsb1osq _4t3i1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, children);
+};

package/dist/esm/inline/loader.js

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

package/dist/esm/utils/ufoExperiences.js

@@ -8,7 +8,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.0.12";
+var packageVersion = "79.0.13";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

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

@@ -1,13 +1,13 @@
 import React, { type MouseEvent } from 'react';
 import { type MessageDescriptor } from 'react-intl-next';
-import { type MediaItemType, type FileDetails, type ImageResizeMode, type FileIdentifier } from '@atlaskit/media-client';
+import { type MediaItemType, type FileDetails, type ImageResizeMode, type Identifier } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type CardStatus, type MediaCardCursor, type CardDimensions, type TitleBoxIcon } from '../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
 import { type CardAction } from './actions';
 import { type MediaCardError } from '../errors';
 export interface CardViewProps {
-    readonly identifier?: FileIdentifier;
+    readonly identifier: Identifier;
     readonly disableOverlay?: boolean;
     readonly resizeMode?: ImageResizeMode;
     readonly dimensions: CardDimensions;

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

@@ -0,0 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { SvgViewProps } from './types';
+export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, }: SvgViewProps) => jsx.JSX.Element | null;

package/dist/types/card/ui/imageRenderer/helpers.d.ts

@@ -0,0 +1,3 @@
+import { type ImageResizeMode } from '@atlaskit/media-client';
+export declare const calculateDimensions: (imgElement: HTMLImageElement, parentElement: HTMLElement, resizeMode: ImageResizeMode) => React.CSSProperties;
+export declare const calculateInitialDimensions: (resizeMode: ImageResizeMode) => React.CSSProperties;

package/dist/types/card/ui/imageRenderer/imageRenderer.d.ts

@@ -1,15 +1,3 @@
 import React from 'react';
-import { type MediaType, type ImageResizeMode } from '@atlaskit/media-client';
-import { type CardPreview } from '../../../types';
-export type ImageRendererProps = {
-    readonly cardPreview?: CardPreview;
-    readonly mediaType: MediaType;
-    readonly alt?: string;
-    readonly resizeMode?: ImageResizeMode;
-    readonly onDisplayImage?: () => void;
-    readonly onImageError?: (cardPreview: CardPreview) => void;
-    readonly onImageLoad?: (cardPreview: CardPreview) => void;
-    readonly nativeLazyLoad?: boolean;
-    readonly forceSyncDisplay?: boolean;
-};
-export declare const ImageRenderer: React.FC<ImageRendererProps>;
+import type { ImageRendererProps } from './types';
+export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, }: ImageRendererProps) => React.JSX.Element;

package/dist/types/card/ui/imageRenderer/imageRendererV2.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ImageRendererProps } from './types';
+export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, identifier, wrapperRef, useWhiteBackground, testId, }: ImageRendererProps) => JSX.Element | null;

package/dist/types/card/ui/imageRenderer/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageRendererProps } from './types';
+export declare const ImageRenderer: (props: ImageRendererProps) => React.JSX.Element;

package/dist/types/card/ui/imageRenderer/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type MediaType, type ImageResizeMode, type Identifier } from '@atlaskit/media-client';
+import { type CardPreview } from '../../../types';
+export type ImageRendererProps = {
+    readonly cardPreview?: CardPreview;
+    readonly mediaType: MediaType;
+    readonly alt?: string;
+    readonly resizeMode?: ImageResizeMode;
+    readonly onDisplayImage?: () => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    readonly identifier: Identifier;
+    readonly useWhiteBackground?: boolean;
+    readonly testId?: string;
+};