@atlaskit/media-card 78.2.2 → 78.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-card
 
+## 78.2.3
+
+### Patch Changes
+
+- [#139310](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139310)
+  [`3037eb69f8dbc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3037eb69f8dbc) -
+  Updated Media card and UI to avoid unnecessary re-renders to avoid contributing to TTVC metrics
+
 ## 78.2.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.2.2";
+var packageVersion = "78.2.3";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -16,7 +16,6 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../utils/analytics");
-var _actions = require("./actions");
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
 var _titleBox = require("./ui/titleBox/titleBox");
 var _failedTitleBox = require("./ui/titleBox/failedTitleBox");
@@ -32,6 +31,7 @@ var _wrapper = require("./ui/wrapper");
 var _classnames = require("./classnames");
 var _useBreakpoint = require("./useBreakpoint");
 var _openMediaViewerButton = _interopRequireDefault(require("./ui/openMediaViewerButton/openMediaViewerButton"));
+var _useCurrentValueRef = require("../utils/useCurrentValueRef");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -125,7 +125,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
       renderImageRenderer: !!cardPreview,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
-      renderTitleBox: !disableOverlay && !!name,
+      renderTitleBox: !disableOverlay,
       renderTickBox: !disableOverlay && !!selectable
     };
     switch (status) {
@@ -205,13 +205,33 @@ var CardViewBase = exports.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 ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
+  var isTitleBoxVisible = renderTitleBox && name;
+  var hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
+  var metadataRef = (0, _useCurrentValueRef.useCurrentValueRef)(metadata);
+  var actionsWithDetails = (0, _react2.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 = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
     testId: _classnames.fileCardImageViewSelector,
     mediaName: name,
@@ -221,7 +241,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
     testId: "media-card-file-type-icon",
     mediaType: mediaType,
@@ -229,7 +249,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     name: name
   }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, (0, _react.jsx)(_spinner.default, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
@@ -245,22 +265,23 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     forceSyncDisplay: forceSyncDisplay
   }), renderPlayButton && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, (0, _react.jsx)(_playButton.PlayButton, null)), renderBlanket && (0, _react.jsx)(_blanket.Blanket, {
     isFixed: isFixedBlanket
-  }), renderTitleBox && name && (0, _react.jsx)(_titleBox.TitleBox, {
+  }), renderTitleBox && (0, _react.jsx)(_titleBox.TitleBox, {
     name: name,
     createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
-    titleBoxBgColor: titleBoxBgColor
+    titleBoxBgColor: titleBoxBgColor,
+    hidden: !isTitleBoxVisible
   }), renderFailedTitleBox && (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
     breakpoint: breakpoint,
     customMessage: customTitleMessage
   }), renderProgressBar && (0, _react.jsx)(_progressBar.ProgressBar, {
     progress: progress,
     breakpoint: breakpoint,
-    positionBottom: !hasTitleBox
+    positionBottom: !hasVisibleTitleBox
   }), renderTickBox && (0, _react.jsx)(_tickBox.TickBox, {
     selected: selected
   })), disableOverlay || !actions || actions.length === 0 ? null : (0, _react.jsx)(_actionsBar.ActionsBar, {

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

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

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

@@ -1,62 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardActionIconButton = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _cardActionButton = require("./cardActionButton");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var CardActionIconButton = exports.CardActionIconButton = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CardActionIconButton, _Component);
-  var _super = _createSuper(CardActionIconButton);
-  function CardActionIconButton() {
-    var _this;
-    (0, _classCallCheck2.default)(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
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
-      event.preventDefault();
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(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.default.createElement(_cardActionButton.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;
-}(_react.Component);
+var _analytics = require("../../../../utils/analytics");
+var CardActionIconButton = exports.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 = (0, _analyticsNext.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';
+    (0, _analytics.fireMediaCardEvent)({
+      eventType: 'ui',
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: actionSubjectId,
+      attributes: {
+        label: label
+      }
+    }, createAnalyticsEvent);
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_cardActionButton.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/cjs/card/ui/actionsBar/cardActions/cardActionsView.js

@@ -16,16 +16,11 @@ var _cardActionIconButton = require("./cardActionIconButton");
 var _styles = require("./styles");
 var _cardActionsDropdownMenu = require("./cardActionsDropdownMenu");
 var _preventClickThrough = require("../../../../utils/preventClickThrough");
-var _analytics = require("../../../../utils/analytics");
-var _analyticsNext = require("@atlaskit/analytics-next");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
-  return (0, _react.jsx)(_cardActionIconButton.CardActionIconButton, props);
-};
 var CardActionsView = exports.CardActionsView = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardActionsView, _Component);
   var _super = _createSuper(CardActionsView);
@@ -56,21 +51,11 @@ var CardActionsView = exports.CardActionsView = /*#__PURE__*/function (_Componen
       var icon = action.icon,
         handler = action.handler,
         label = action.label;
-      var actionSubjectId = isPrimary ? 'mediaCardPrimaryActionButton' : 'mediaCardSecondaryActionButton';
-      var CardActionIconButtonWithAnalytics = (0, _analyticsNext.withAnalyticsEvents)({
-        onClick: (0, _analytics.createAndFireMediaCardEvent)({
-          eventType: 'ui',
-          action: 'clicked',
-          actionSubject: 'button',
-          actionSubjectId: actionSubjectId,
-          attributes: {
-            label: label
-          }
-        })
-      })(CardActionIconButtonWithProps);
-      return (0, _react.jsx)(CardActionIconButtonWithAnalytics, {
+      return (0, _react.jsx)(_cardActionIconButton.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/cjs/card/ui/titleBox/styles.js

@@ -21,6 +21,8 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
     titleBoxBgColor = _ref.titleBoxBgColor;
   return (0, _react.css)({
     position: 'absolute',
@@ -32,7 +34,8 @@ var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWra
     color: "var(--ds-text, ".concat(_colors.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/cjs/card/ui/titleBox/titleBox.js

@@ -4,42 +4,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleBox = exports.FormattedDate = void 0;
+exports.TitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 var _truncateText = require("@atlaskit/media-ui/truncateText");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 var _titleBoxComponents = require("./titleBoxComponents");
-var FormattedDate = exports.FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
-  var timestamp = _ref.timestamp,
+var placeholderText = " ";
+var isValidTimestamp = function isValidTimestamp(timeStamp) {
+  return new Date(timeStamp).getTime() > 0;
+};
+var TitleBox = exports.TitleBox = (0, _reactIntlNext.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.default.createElement(_react.default.Fragment, null, (0, _formatDate.formatDate)(timestamp, locale));
-});
-var TitleBox = exports.TitleBox = function TitleBox(_ref3) {
-  var name = _ref3.name,
-    createdAt = _ref3.createdAt,
-    breakpoint = _ref3.breakpoint,
-    titleBoxBgColor = _ref3.titleBoxBgColor,
-    titleBoxIcon = _ref3.titleBoxIcon;
   return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
+    hidden: hidden,
     breakpoint: breakpoint,
     titleBoxBgColor: titleBoxBgColor
   }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxHeader, {
     hasIconOverlap: !!titleBoxIcon && !createdAt
   }, /*#__PURE__*/_react.default.createElement(_truncateText.Truncate, {
-    text: name
-  })), createdAt ? /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxFooter, {
+    text: name !== null && name !== void 0 ? name : placeholderText
+  })), /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
-  }, /*#__PURE__*/_react.default.createElement(FormattedDate, {
-    timestamp: createdAt
-  })) : null, titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.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.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "",
     size: "small"
   })));
-};
+}, {
+  enforceContext: false
+});

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

@@ -14,7 +14,8 @@ var _styles = require("./styles");
 
 var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
-    titleBoxBgColor = props.titleBoxBgColor;
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
   return (0, _react.jsx)("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box"
@@ -22,42 +23,43 @@ var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props)
     ,
     css: (0, _styles.titleBoxWrapperStyles)({
       breakpoint: breakpoint,
+      display: hidden ? 'none' : 'flex',
       titleBoxBgColor: titleBoxBgColor
     })
   }, props.children);
 };
 var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (
+  return (0, _react.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
-    (0, _react.jsx)("div", {
-      id: "titleBoxHeader",
-      css: (0, _styles.titleBoxHeaderStyles)({
-        hasIconOverlap: hasIconOverlap
-      })
-    }, props.children)
-  );
+    ,
+    css: (0, _styles.titleBoxHeaderStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
 };
 var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
-  return (
+  return (0, _react.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
-    (0, _react.jsx)("div", {
-      id: "titleBoxFooter",
-      css: (0, _styles.titleBoxFooterStyles)({
-        hasIconOverlap: hasIconOverlap
-      })
-    }, props.children)
-  );
+    ,
+    css: (0, _styles.titleBoxFooterStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
 };
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
-  return (
+  return (0, _react.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
-    (0, _react.jsx)("div", {
-      id: "titleBoxIcon",
-      css: _styles.titleBoxIconStyles
-    }, props.children)
-  );
+    ,
+    css: _styles.titleBoxIconStyles
+  }, props.children);
 };
 var ErrorMessageWrapper = exports.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/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "78.2.2",
+        packageName: "78.2.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.2.2";
+var packageVersion = "78.2.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.2.2";
+const packageVersion = "78.2.3";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -4,14 +4,13 @@
  */
 // 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';
@@ -27,6 +26,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 const CardViewBase = ({
   innerRef,
   onImageLoad,
@@ -112,7 +112,7 @@ export const CardViewBase = ({
       renderImageRenderer: !!cardPreview,
       renderPlayButton: !!cardPreview && mediaType === 'video',
       renderBlanket: !disableOverlay,
-      renderTitleBox: !disableOverlay && !!name,
+      renderTitleBox: !disableOverlay,
       renderTickBox: !disableOverlay && !!selectable
     };
     switch (status) {
@@ -200,14 +200,33 @@ export const CardViewBase = ({
   const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
   // Disable tooltip for Media Single
   const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
-  const hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
   const {
     mediaType,
     mimeType,
     name,
     createdAt
   } = metadata || {};
-  const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
+  const isTitleBoxVisible = renderTitleBox && name;
+  const hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
+  const metadataRef = useCurrentValueRef(metadata);
+  const actionsWithDetails = useMemo(() => {
+    if (!actions) {
+      return [];
+    }
+    return actions.map(action => ({
+      ...action,
+      handler: () => {
+        if (!metadataRef.current) {
+          action.handler();
+        } else {
+          action.handler({
+            type: 'file',
+            details: metadataRef.current
+          });
+        }
+      }
+    }));
+  }, [actions, metadataRef]);
   const contents = jsx(React.Fragment, null, jsx(ImageContainer, {
     testId: fileCardImageViewSelector,
     mediaName: name,
@@ -217,7 +236,7 @@ export const CardViewBase = ({
     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,
@@ -225,7 +244,7 @@ export const CardViewBase = ({
     name: name
   }), iconMessage), renderSpinner && jsx(IconWrapper, {
     breakpoint: breakpoint,
-    hasTitleBox: hasTitleBox
+    hasTitleBox: hasVisibleTitleBox
   }, jsx(SpinnerIcon, {
     testId: "media-card-loading",
     interactionName: "media-card-loading"
@@ -241,22 +260,23 @@ export const CardViewBase = ({
     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/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.2.2";
+const packageVersion = "78.2.3";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({