@atlaskit/media-card 78.2.2 → 78.2.4

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 = "78.2.2";
+const packageVersion = "78.2.4";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.2.2";
+var packageVersion = "78.2.4";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -8,14 +8,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
-import { attachDetailsToActions } from './actions';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -31,6 +30,7 @@ import { Wrapper, ImageContainer } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
 import { useBreakpoint } from './useBreakpoint';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
+import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 export var CardViewBase = function CardViewBase(_ref) {
   var innerRef = _ref.innerRef,
     onImageLoad = _ref.onImageLoad,
@@ -117,7 +117,7 @@ export var CardViewBase = function CardViewBase(_ref) {
       renderImageRenderer: !!cardPreview,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
-      renderTitleBox: !disableOverlay && !!name,
+      renderTitleBox: !disableOverlay,
       renderTickBox: !disableOverlay && !!selectable
     };
     switch (status) {
@@ -197,13 +197,33 @@ export var CardViewBase = function CardViewBase(_ref) {
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   // Disable tooltip for Media Single
   var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-  var hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
   var _ref5 = metadata || {},
     mediaType = _ref5.mediaType,
     mimeType = _ref5.mimeType,
     name = _ref5.name,
     createdAt = _ref5.createdAt;
-  var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
+  var isTitleBoxVisible = renderTitleBox && name;
+  var hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
+  var metadataRef = useCurrentValueRef(metadata);
+  var actionsWithDetails = useMemo(function () {
+    if (!actions) {
+      return [];
+    }
+    return actions.map(function (action) {
+      return _objectSpread(_objectSpread({}, action), {}, {
+        handler: function handler() {
+          if (!metadataRef.current) {
+            action.handler();
+          } else {
+            action.handler({
+              type: 'file',
+              details: metadataRef.current
+            });
+          }
+        }
+      });
+    });
+  }, [actions, metadataRef]);
   var contents = jsx(React.Fragment, null, jsx(ImageContainer, {
     testId: fileCardImageViewSelector,
     mediaName: name,
@@ -213,7 +233,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && jsx(IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, jsx(MimeTypeIcon, {
     testId: "media-card-file-type-icon",
     mediaType: mediaType,
@@ -221,7 +241,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     name: name
   }), iconMessage), renderSpinner && jsx(IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, jsx(SpinnerIcon, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
@@ -237,22 +257,23 @@ export var CardViewBase = function CardViewBase(_ref) {
     forceSyncDisplay: forceSyncDisplay
   }), renderPlayButton && jsx(IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, jsx(PlayButton, null)), renderBlanket && jsx(Blanket, {
     isFixed: isFixedBlanket
-  }), renderTitleBox && name && jsx(TitleBox, {
+  }), renderTitleBox && jsx(TitleBox, {
     name: name,
     createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
-    titleBoxBgColor: titleBoxBgColor
+    titleBoxBgColor: titleBoxBgColor,
+    hidden: !isTitleBoxVisible
   }), renderFailedTitleBox && jsx(FailedTitleBox, {
     breakpoint: breakpoint,
     customMessage: customTitleMessage
   }), renderProgressBar && jsx(ProgressBar, {
     progress: progress,
     breakpoint: breakpoint,
-    positionBottom: !hasTitleBox
+    positionBottom: !hasVisibleTitleBox
   }), renderTickBox && jsx(TickBox, {
     selected: selected
   })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {

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

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.2.2";
+var packageVersion = "78.2.4";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

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

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { CardActionIconButtonVariant, CardActionsView } from './cardActions';

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

@@ -1,53 +1,45 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { Component } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { CardActionButton } from './cardActionButton';
-export var CardActionIconButton = /*#__PURE__*/function (_Component) {
-  _inherits(CardActionIconButton, _Component);
-  var _super = _createSuper(CardActionIconButton);
-  function CardActionIconButton() {
-    var _this;
-    _classCallCheck(this, CardActionIconButton);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    // this is to prevent currently focused text to loose cursor on clicking card action
-    // this does not prevent onclick behavior
-    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
-      event.preventDefault();
-    });
-    return _this;
-  }
-  _createClass(CardActionIconButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        icon = _this$props.icon,
-        label = _this$props.label,
-        triggerColor = _this$props.triggerColor,
-        onClick = _this$props.onClick,
-        variant = _this$props.variant;
-      return /*#__PURE__*/React.createElement(CardActionButton, {
-        onClick: onClick,
-        onMouseDown: this.onMouseDown
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: {
-          color: triggerColor
-        },
-        label: label,
-        variant: variant
-      }, icon);
-    }
-  }]);
-  return CardActionIconButton;
-}(Component);
+import { fireMediaCardEvent } from '../../../../utils/analytics';
+export var CardActionIconButton = function CardActionIconButton(_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    filename = _ref.filename,
+    triggerColor = _ref.triggerColor,
+    onClick = _ref.onClick,
+    isPrimary = _ref.isPrimary,
+    variant = _ref.variant;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  // this is to prevent currently focused text to loose cursor on clicking card action
+  // this does not prevent onclick behavior
+  var onMouseDown = function onMouseDown(event) {
+    event.preventDefault();
+  };
+  var handleClick = function handleClick(e) {
+    var actionSubjectId = isPrimary ? 'mediaCardPrimaryActionButton' : 'mediaCardSecondaryActionButton';
+    fireMediaCardEvent({
+      eventType: 'ui',
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: actionSubjectId,
+      attributes: {
+        label: label
+      }
+    }, createAnalyticsEvent);
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  return /*#__PURE__*/React.createElement(CardActionButton, {
+    onClick: handleClick,
+    onMouseDown: onMouseDown
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      color: triggerColor
+    },
+    label: filename ? "".concat(filename, " \u2014 ").concat(label) : label,
+    variant: variant
+  }, icon);
+};

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["triggerRef"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';

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

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic
@@ -16,11 +16,6 @@ import { CardActionIconButton } from './cardActionIconButton';
 import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 import { PreventClickThrough } from '../../../../utils/preventClickThrough';
-import { createAndFireMediaCardEvent } from '../../../../utils/analytics';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-var CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
-  return jsx(CardActionIconButton, props);
-};
 export var CardActionsView = /*#__PURE__*/function (_Component) {
   _inherits(CardActionsView, _Component);
   var _super = _createSuper(CardActionsView);
@@ -51,21 +46,11 @@ export var CardActionsView = /*#__PURE__*/function (_Component) {
       var icon = action.icon,
         handler = action.handler,
         label = action.label;
-      var actionSubjectId = isPrimary ? 'mediaCardPrimaryActionButton' : 'mediaCardSecondaryActionButton';
-      var CardActionIconButtonWithAnalytics = withAnalyticsEvents({
-        onClick: createAndFireMediaCardEvent({
-          eventType: 'ui',
-          action: 'clicked',
-          actionSubject: 'button',
-          actionSubjectId: actionSubjectId,
-          attributes: {
-            label: label
-          }
-        })
-      })(CardActionIconButtonWithProps);
-      return jsx(CardActionIconButtonWithAnalytics, {
+      return jsx(CardActionIconButton, {
         icon: icon,
-        label: filename ? "".concat(filename, " \u2014 ").concat(label) : label,
+        label: label,
+        filename: filename,
+        isPrimary: isPrimary,
         triggerColor: triggerColor,
         onClick: function onClick() {
           return handler();

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

@@ -14,6 +14,8 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
     titleBoxBgColor = _ref.titleBoxBgColor;
   return css({
     position: 'absolute',
@@ -25,7 +27,8 @@ export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
     color: "var(--ds-text, ".concat(N800, ")"),
     cursor: 'inherit',
     pointerEvents: 'none',
-    display: 'flex',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    display: display,
     flexDirection: 'column',
     justifyContent: 'center'
   },

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

@@ -4,35 +4,33 @@ import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
-export var FormattedDate = injectIntl(function (_ref) {
-  var timestamp = _ref.timestamp,
+var placeholderText = ' ';
+var isValidTimestamp = function isValidTimestamp(timeStamp) {
+  return new Date(timeStamp).getTime() > 0;
+};
+export var TitleBox = injectIntl(function (_ref) {
+  var _intl$locale;
+  var name = _ref.name,
+    createdAt = _ref.createdAt,
+    breakpoint = _ref.breakpoint,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    hidden = _ref.hidden,
     intl = _ref.intl;
-  var _ref2 = intl || {
-      locale: 'en'
-    },
-    _ref2$locale = _ref2.locale,
-    locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, formatDate(timestamp, locale));
-});
-export var TitleBox = function TitleBox(_ref3) {
-  var name = _ref3.name,
-    createdAt = _ref3.createdAt,
-    breakpoint = _ref3.breakpoint,
-    titleBoxBgColor = _ref3.titleBoxBgColor,
-    titleBoxIcon = _ref3.titleBoxIcon;
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
+    hidden: hidden,
     breakpoint: breakpoint,
     titleBoxBgColor: titleBoxBgColor
   }, /*#__PURE__*/React.createElement(TitleBoxHeader, {
     hasIconOverlap: !!titleBoxIcon && !createdAt
   }, /*#__PURE__*/React.createElement(Truncate, {
-    text: name
-  })), createdAt ? /*#__PURE__*/React.createElement(TitleBoxFooter, {
+    text: name !== null && name !== void 0 ? name : placeholderText
+  })), /*#__PURE__*/React.createElement(TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
-  }, /*#__PURE__*/React.createElement(FormattedDate, {
-    timestamp: createdAt
-  })) : null, titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
+  }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
     label: "",
     size: "small"
   })));
-};
+}, {
+  enforceContext: false
+});

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

@@ -7,7 +7,8 @@ import { jsx } from '@emotion/react';
 import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
-    titleBoxBgColor = props.titleBoxBgColor;
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
   return jsx("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box"
@@ -15,42 +16,43 @@ export var TitleBoxWrapper = function TitleBoxWrapper(props) {
     ,
     css: titleBoxWrapperStyles({
       breakpoint: breakpoint,
+      display: hidden ? 'none' : 'flex',
       titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };
 export var TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (
+  return jsx("div", {
+    id: "titleBoxHeader",
+    "data-testid": "title-box-header"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      id: "titleBoxHeader",
-      css: titleBoxHeaderStyles({
-        hasIconOverlap: hasIconOverlap
-      })
-    }, props.children)
-  );
+    ,
+    css: titleBoxHeaderStyles({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
 };
 export var TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (
+  return jsx("div", {
+    id: "titleBoxFooter",
+    "data-testid": "title-box-footer"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      id: "titleBoxFooter",
-      css: titleBoxFooterStyles({
-        hasIconOverlap: hasIconOverlap
-      })
-    }, props.children)
-  );
+    ,
+    css: titleBoxFooterStyles({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
 };
 export var TitleBoxIcon = function TitleBoxIcon(props) {
-  return (
+  return jsx("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      id: "titleBoxIcon",
-      css: titleBoxIconStyles
-    }, props.children)
-  );
+    ,
+    css: titleBoxIconStyles
+  }, props.children);
 };
 export var ErrorMessageWrapper = function ErrorMessageWrapper(props) {
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic

package/dist/esm/errors.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { isPollingError as isMediaClientPollingError, isRateLimitedError as isMediaClientRateLimitedError } from '@atlaskit/media-client';
 import { MediaFileStateError } from '@atlaskit/media-client-react';

package/dist/esm/inline/loader.js

@@ -8,7 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.2.2",
+        packageName: "78.2.4",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; }

package/dist/esm/utils/lightCards/cardError.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';

package/dist/esm/utils/lightCards/cardLoading.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';

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

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic

package/dist/esm/utils/mediaPerformanceObserver/mediaPerformanceObserver.js

@@ -1,4 +1,5 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 var MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';
 var urlRegex = /https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/file\/([^/]+)\/image.*[?&]source=mediaCard/;
 var clientIdParamRegex = /[?&]clientId=([^&]+)/;
@@ -33,6 +34,9 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
             fileId: fileId,
             mediaClientId: clientId,
             startedAt: entry.startTime - ((navigationTime === null || navigationTime === void 0 ? void 0 : navigationTime.domContentLoadedEventEnd) || 0),
+            featureFlags: {
+              "media-cdn-single-host": fg('platform.media-cdn-single-host')
+            },
             /**
              * Performance resource timing data regarding the loading of an
              * application's resources as described in

package/dist/esm/utils/objectURLCache.js

@@ -4,7 +4,7 @@ import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { LRUMap } from 'lru_map';
 import { EventEmitter2 } from 'eventemitter2';

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 = "78.2.2";
+var packageVersion = "78.2.4";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {