@atlaskit/media-card 81.10.12 → 81.10.13

package/dist/es2019/utils/mediaPerformanceObserver/mediaPerformanceObserver.js

@@ -1,81 +1 @@
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common/analytics';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
-import { createMediaDurationMetrics, createUfoDurationMetrics } from './durationMetrics';
-import { sendUfoDurationMetrics } from './ufo';
-const MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';
-// this should fire around 10% of the time
-const shouldSamplePerfObserver = () => Math.random() < 0.1;
-const urlRegex = /(?:https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/|media-api\/)file\/([^/]+)\/image.*[?&]source=mediaCard/;
-const clientIdParamRegex = /[?&]clientId=([^&]+)/;
-const ssrParamRegex = /[?&]token=([^&]+)/;
-const createAndGetResourceObserver = () => {
-  return new PerformanceObserver(list => {
-    list.getEntries().forEach(baseEntry => {
-      var _window$MEDIA_CARD_PE;
-      const entry = baseEntry;
-      const matchFileId = entry.name.match(urlRegex);
-      const matchClientId = entry.name.match(clientIdParamRegex);
-      const matchSSR = entry.name.match(ssrParamRegex);
-      if (matchFileId && (_window$MEDIA_CARD_PE = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE !== void 0 && _window$MEDIA_CARD_PE.mediaCardCreateAnalyticsEvent) {
-        var _interaction$start;
-        const fileId = matchFileId[1];
-        const clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
-        const ssr = matchSSR ? 'server' : undefined;
-
-        // Get UFO interaction start time for proper timing in SPAs
-        // For page_load: start = 0 (relative to page navigation)
-        // For transitions: start = performance.now() when transition started
-        const interaction = getActiveInteraction();
-        const interactionStartTime = (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
-        const mediaDurationMetrics = createMediaDurationMetrics(entry, interactionStartTime);
-        const event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
-          eventType: 'operational',
-          action: 'succeeded',
-          actionSubject: 'mediaCardPerfObserver',
-          attributes: {
-            ssr,
-            fileId: fileId,
-            mediaClientId: clientId,
-            featureFlags: {
-              'media-perf-lazy-loading-optimisation': fg('media-perf-lazy-loading-optimisation')
-            },
-            ...mediaDurationMetrics
-          }
-        });
-        if (shouldSamplePerfObserver()) {
-          event.fire(ANALYTICS_MEDIA_CHANNEL);
-        }
-        if (fg('platform_media_card_ufo_network_metrics')) {
-          const ufoDurationMetrics = createUfoDurationMetrics(entry, interactionStartTime);
-          const endpointName = 'image';
-          sendUfoDurationMetrics(ufoDurationMetrics, endpointName);
-        }
-      }
-    });
-  });
-};
-export const setAnalyticsContext = newAnalyticsContext => {
-  if (!window[MEDIA_CARD_PERF_STATE_KEY]) {
-    window[MEDIA_CARD_PERF_STATE_KEY] = {};
-  }
-  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent = newAnalyticsContext;
-};
-const isDefinedPerformanceObserver = () => typeof window['PerformanceObserver'] !== 'undefined';
-export const startResourceObserver = () => {
-  var _window$MEDIA_CARD_PE2;
-  if (!isDefinedPerformanceObserver()) {
-    return;
-  }
-  if ((_window$MEDIA_CARD_PE2 = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE2 !== void 0 && _window$MEDIA_CARD_PE2.mediaCardPerfObserver) {
-    return;
-  }
-  if (!window[MEDIA_CARD_PERF_STATE_KEY]) {
-    window[MEDIA_CARD_PERF_STATE_KEY] = {};
-  }
-  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardPerfObserver = createAndGetResourceObserver();
-  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardPerfObserver.observe({
-    type: 'resource',
-    buffered: true
-  });
-};
+export const MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';

package/dist/es2019/utils/mediaPerformanceObserver/setAnalyticsContext.js

@@ -0,0 +1,7 @@
+import { MEDIA_CARD_PERF_STATE_KEY } from './mediaPerformanceObserver';
+export const setAnalyticsContext = newAnalyticsContext => {
+  if (!window[MEDIA_CARD_PERF_STATE_KEY]) {
+    window[MEDIA_CARD_PERF_STATE_KEY] = {};
+  }
+  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent = newAnalyticsContext;
+};

package/dist/es2019/utils/mediaPerformanceObserver/startResourceObserver.js

@@ -0,0 +1,77 @@
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
+import { createMediaDurationMetrics } from './createMediaDurationMetrics';
+import { createUfoDurationMetrics } from './createUfoDurationMetrics';
+import { MEDIA_CARD_PERF_STATE_KEY } from './mediaPerformanceObserver';
+import { sendUfoDurationMetrics } from './ufo';
+
+// this should fire around 10% of the time
+const shouldSamplePerfObserver = () => Math.random() < 0.1;
+const urlRegex = /(?:https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/|media-api\/)file\/([^/]+)\/image.*[?&]source=mediaCard/;
+const clientIdParamRegex = /[?&]clientId=([^&]+)/;
+const ssrParamRegex = /[?&]token=([^&]+)/;
+const createAndGetResourceObserver = () => {
+  return new PerformanceObserver(list => {
+    list.getEntries().forEach(baseEntry => {
+      const entry = baseEntry;
+      const matchFileId = entry.name.match(urlRegex);
+      const matchClientId = entry.name.match(clientIdParamRegex);
+      const matchSSR = entry.name.match(ssrParamRegex);
+      const state = window[MEDIA_CARD_PERF_STATE_KEY];
+      if (matchFileId && state !== null && state !== void 0 && state.mediaCardCreateAnalyticsEvent) {
+        var _interaction$start;
+        const fileId = matchFileId[1];
+        const clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
+        const ssr = matchSSR ? 'server' : undefined;
+
+        // Get UFO interaction start time for proper timing in SPAs
+        // For page_load: start = 0 (relative to page navigation)
+        // For transitions: start = performance.now() when transition started
+        const interaction = getActiveInteraction();
+        const interactionStartTime = (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
+        const mediaDurationMetrics = createMediaDurationMetrics(entry, interactionStartTime);
+        const event = state.mediaCardCreateAnalyticsEvent({
+          eventType: 'operational',
+          action: 'succeeded',
+          actionSubject: 'mediaCardPerfObserver',
+          attributes: {
+            ssr,
+            fileId: fileId,
+            mediaClientId: clientId,
+            featureFlags: {
+              'media-perf-lazy-loading-optimisation': fg('media-perf-lazy-loading-optimisation')
+            },
+            ...mediaDurationMetrics
+          }
+        });
+        if (shouldSamplePerfObserver()) {
+          event.fire(ANALYTICS_MEDIA_CHANNEL);
+        }
+        if (fg('platform_media_card_ufo_network_metrics')) {
+          const ufoDurationMetrics = createUfoDurationMetrics(entry, interactionStartTime);
+          const endpointName = 'image';
+          sendUfoDurationMetrics(ufoDurationMetrics, endpointName);
+        }
+      }
+    });
+  });
+};
+const isDefinedPerformanceObserver = () => typeof window['PerformanceObserver'] !== 'undefined';
+export const startResourceObserver = () => {
+  var _window$MEDIA_CARD_PE;
+  if (!isDefinedPerformanceObserver()) {
+    return;
+  }
+  if ((_window$MEDIA_CARD_PE = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE !== void 0 && _window$MEDIA_CARD_PE.mediaCardPerfObserver) {
+    return;
+  }
+  if (!window[MEDIA_CARD_PERF_STATE_KEY]) {
+    window[MEDIA_CARD_PERF_STATE_KEY] = {};
+  }
+  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardPerfObserver = createAndGetResourceObserver();
+  window[MEDIA_CARD_PERF_STATE_KEY].mediaCardPerfObserver.observe({
+    type: 'resource',
+    buffered: true
+  });
+};

package/dist/es2019/utils/printFunctionCall.js

@@ -0,0 +1,12 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+  return param;
+};
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;

package/dist/es2019/utils/printScript.js

@@ -1,15 +1,3 @@
-const printParam = param => {
-  if (typeof param === 'string') {
-    return `'${param}'`;
-  } else if (typeof param === 'object') {
-    return JSON.stringify(param);
-  } else if (param === undefined) {
-    return 'undefined';
-  }
-  return param;
-};
-const printParams = args => args.map(arg => printParam(arg)).join(',');
-export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
 export const printScript = statements => `(function(){
   ${statements.join(';')}
 })();

package/dist/es2019/utils/resolveCardPreviewDimension.js

@@ -0,0 +1,22 @@
+import { defaultImageCardDimensions } from './cardDimensions';
+import { containsPixelUnit } from './containsPixelUnit';
+import { getElementDimension } from './getElementDimension';
+import { isValidPercentageUnit } from './isValidPercentageUnit';
+
+// Same as getDataURIDimension but without Retina factor
+export const resolveCardPreviewDimension = (dimensionName, {
+  dimensions,
+  element
+}) => {
+  const dimensionValue = (dimensions === null || dimensions === void 0 ? void 0 : dimensions[dimensionName]) || '';
+  if (isValidPercentageUnit(dimensionValue) && element) {
+    return getElementDimension(element, dimensionName);
+  }
+  if (typeof dimensionValue === 'number') {
+    return dimensionValue;
+  }
+  if (containsPixelUnit(`${dimensionValue}`)) {
+    return parseInt(`${dimensionValue}`, 10);
+  }
+  return defaultImageCardDimensions[dimensionName];
+};

package/dist/es2019/utils/resolveCardPreviewDimensions.js

@@ -0,0 +1,9 @@
+import { resolveCardPreviewDimension } from './resolveCardPreviewDimension';
+export const resolveCardPreviewDimensions = options => {
+  const width = resolveCardPreviewDimension('width', options);
+  const height = resolveCardPreviewDimension('height', options);
+  return {
+    width,
+    height
+  };
+};

package/dist/es2019/utils/ufoExperiences.js

@@ -1,17 +1,18 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { UFOExperience } from '@atlaskit/ufo/experience';
-import { ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo/experience-types';
-import { ConcurrentExperience } from '@atlaskit/ufo/concurrent-experience';
+import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { isValidUuid } from '@atlaskit/media-common/isValidUuid';
-import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
-import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
-import { MediaCardError } from '../errors';
-import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
-import { getMediaGlobalScope } from './globalScope/globalScope';
+import { ConcurrentExperience } from '@atlaskit/ufo/concurrent-experience';
+import { UFOExperience } from '@atlaskit/ufo/experience';
+import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
+import { ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo/experience-types';
+import { MediaCardError } from '../MediaCardError';
+import { extractErrorInfo } from './analytics/extractErrorInfo';
+import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
+import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.11";
+const packageVersion = "81.10.12";
 const SAMPLE_RATE = 0.05;
 
 /**
@@ -211,6 +212,7 @@ const createExperience = (instanceId, timings = []) => {
  * ufoExperience.complete(status, fileAttributes, fileStateFlags, ssrReliability, error, ssrPreviewInfo);
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Keep the UFO experience lifecycle API co-located with its shared module state.
 export const useMediaCardUfoExperience = ({
   instanceId,
   enabled
@@ -400,9 +402,13 @@ const getExperience = id => {
   }
   return concurrentExperience.getInstance(id);
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Start, complete, and abort must share the same concurrentExperience singleton.
 export const startUfoExperience = (id, startTime) => {
   getExperience(id).start(startTime);
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Start, complete, and abort must share the same concurrentExperience singleton.
 export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags, ssrReliability, error = new MediaCardError('missing-error-data'), ssrPreviewInfo) => {
   // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
   if (!['complete', 'error', 'failed-processing'].includes(status)) {
@@ -474,6 +480,8 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
   }
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Start, complete, and abort must share the same concurrentExperience singleton.
 export const abortUfoExperience = (id, properties) => {
   const metadata = {
     ...getBasePayloadAttributes()

package/dist/esm/ImageLoadError.js

@@ -0,0 +1,17 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { getImageLoadPrimaryReason } from './getImageLoadPrimaryReason';
+import { MediaCardError } from './MediaCardError';
+export var ImageLoadError = /*#__PURE__*/function (_MediaCardError) {
+  function ImageLoadError(source) {
+    _classCallCheck(this, ImageLoadError);
+    return _callSuper(this, ImageLoadError, [getImageLoadPrimaryReason(source)]);
+  }
+  _inherits(ImageLoadError, _MediaCardError);
+  return _createClass(ImageLoadError);
+}(MediaCardError);

package/dist/esm/LocalPreviewError.js

@@ -0,0 +1,20 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { MediaCardError } from './MediaCardError';
+export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
+  function LocalPreviewError(primaryReason, secondaryError) {
+    var _this;
+    _classCallCheck(this, LocalPreviewError);
+    _this = _callSuper(this, LocalPreviewError, [primaryReason, secondaryError]);
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    return _this;
+  }
+  _inherits(LocalPreviewError, _MediaCardError);
+  return _createClass(LocalPreviewError);
+}(MediaCardError);

package/dist/esm/MediaCardError.js

@@ -0,0 +1,31 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+export var MediaCardError = /*#__PURE__*/function (_Error) {
+  function MediaCardError(primaryReason, secondaryError) {
+    var _this;
+    _classCallCheck(this, MediaCardError);
+    _this = _callSuper(this, MediaCardError, [primaryReason]);
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    Object.setPrototypeOf(_this, (this instanceof MediaCardError ? this.constructor : void 0).prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace(_this, this instanceof MediaCardError ? this.constructor : void 0);
+    }
+    return _this;
+  }
+  _inherits(MediaCardError, _Error);
+  return _createClass(MediaCardError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */

package/dist/esm/RemotePreviewError.js

@@ -0,0 +1,20 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { MediaCardError } from './MediaCardError';
+export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError) {
+  function RemotePreviewError(primaryReason, secondaryError) {
+    var _this;
+    _classCallCheck(this, RemotePreviewError);
+    _this = _callSuper(this, RemotePreviewError, [primaryReason, secondaryError]);
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    return _this;
+  }
+  _inherits(RemotePreviewError, _MediaCardError);
+  return _createClass(RemotePreviewError);
+}(MediaCardError);

package/dist/esm/SsrPreviewError.js

@@ -0,0 +1,20 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { MediaCardError } from './MediaCardError';
+export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError) {
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this;
+    _classCallCheck(this, SsrPreviewError);
+    _this = _callSuper(this, SsrPreviewError, [primaryReason, secondaryError]);
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    return _this;
+  }
+  _inherits(SsrPreviewError, _MediaCardError);
+  return _createClass(SsrPreviewError);
+}(MediaCardError);

package/dist/esm/card/CardBase.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["identifier"];
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { isFileIdentifier } from '@atlaskit/media-client';
+import UFOLabel from '@atlaskit/react-ufo/label';
+import { ExternalImageCard } from './externalImageCard';
+import { FileCard } from './fileCard';
+export var CardBase = function CardBase(_ref) {
+  var identifier = _ref.identifier,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(UFOLabel, {
+    name: "media-card-file-card"
+  }, /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
+    identifier: identifier,
+    key: identifier.id
+  }))) : /*#__PURE__*/React.createElement(UFOLabel, {
+    name: "media-card-external-image"
+  }, /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
+    identifier: identifier,
+    key: identifier.dataURI
+  })));
+  return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, innerContent);
+};

package/dist/esm/card/CardWithPerformanceObserver.js

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { setAnalyticsContext } from '../utils/mediaPerformanceObserver/setAnalyticsContext';
+import { startResourceObserver } from '../utils/mediaPerformanceObserver/startResourceObserver';
+import { CardBase } from './CardBase';
+export var CardWithPerformanceObserver = function CardWithPerformanceObserver(props) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  useEffect(function () {
+    startResourceObserver();
+  }, []);
+  useEffect(function () {
+    setAnalyticsContext(createAnalyticsEvent);
+  }, [createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(CardBase, props);
+};