@atlaskit/media-card 78.16.1 → 78.17.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-card
 
+## 78.17.1
+
+### Patch Changes
+
+- [#98553](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98553)
+  [`d3cdb7e8e6bfb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3cdb7e8e6bfb) -
+  Fixed Media Card Actions click through. Media Viewer opens correctly
+
+## 78.17.0
+
+### Minor Changes
+
+- [#98696](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98696)
+  [`396ff0958321d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/396ff0958321d) -
+  Adding the ability to register copy intents to enable cross site / product copy and paste for
+  media by forwarding the ref from useCopyIntent / useFilePreview
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 78.16.1
 
 ### 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 && {}.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.16.1";
+var packageVersion = "78.17.1";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardAnalytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireDownloadSucceededEvent = exports.fireDownloadFailedEvent = exports.fireCopiedEvent = void 0;
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireDownloadSucceededEvent = exports.fireDownloadFailedEvent = void 0;
 var _analytics = require("../utils/analytics");
 var _errors = require("../errors");
 var fireOperationalEvent = exports.fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
@@ -25,15 +25,6 @@ var fireOperationalEvent = exports.fireOperationalEvent = function fireOperation
       break;
   }
 };
-var fireCopiedEvent = exports.fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, fileId, cardRef) {
-  if (typeof window.getSelection === 'function') {
-    var _selection$containsNo;
-    var selection = window.getSelection();
-    if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
-      (0, _analytics.fireMediaCardEvent)((0, _analytics.getCopiedFilePayload)(fileId), createAnalyticsEvent);
-    }
-  }
-};
 var fireScreenEvent = exports.fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttributes) {
   (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderPreviewableCardPayload)(fileAttributes), createAnalyticsEvent);
 };

package/dist/cjs/card/cardView.js

@@ -14,6 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _useCallbackRef = require("use-callback-ref");
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../utils/analytics");
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
@@ -42,7 +43,8 @@ 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
 var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var identifier = _ref.identifier,
-    innerRef = _ref.innerRef,
+    _ref$innerRef = _ref.innerRef,
+    innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
     onImageLoad = _ref.onImageLoad,
     onImageError = _ref.onImageError,
     dimensions = _ref.dimensions,
@@ -85,9 +87,6 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var divRef = (0, _react2.useRef)(null);
   var prevCardPreviewRef = (0, _react2.useRef)();
   var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  (0, _react2.useEffect)(function () {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
   (0, _react2.useEffect)(function () {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
@@ -123,6 +122,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     }
     return true;
   };
+  var mergedRef = (0, _useCallbackRef.useMergeRefs)([divRef, innerRef]);
   var getRenderConfigByStatus = function getRenderConfigByStatus() {
     var _ref3 = metadata || {},
       name = _ref3.name,
@@ -320,7 +320,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     dimensions: dimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: mergedRef,
     breakpoint: breakpoint,
     mediaCardCursor: mediaCardCursor,
     disableOverlay: !!disableOverlay,

package/dist/cjs/card/externalImageCard.js

@@ -15,7 +15,6 @@ var _mediaViewer = require("@atlaskit/media-viewer");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _errors = require("../errors");
-var _document = _interopRequireDefault(require("../utils/document"));
 var _generateUniqueId = require("../utils/generateUniqueId");
 var _getMediaCardCursor = require("../utils/getMediaCardCursor");
 var _ufoExperiences = require("../utils/ufoExperiences");
@@ -70,10 +69,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
       traceId: (0, _mediaCommon.getRandomHex)(8)
     };
   }, []);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    cardElement = _useState2[0],
-    setCardElement = _useState2[1];
   var fileStateFlagsRef = (0, _react.useRef)({
     wasStatusUploading: false,
     wasStatusProcessing: false
@@ -81,10 +76,10 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
   var startUfoExperienceRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
     (0, _ufoExperiences.startUfoExperience)(internalOccurrenceKey);
   });
-  var _useState3 = (0, _react.useState)('loading-preview'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
+  var _useState = (0, _react.useState)('loading-preview'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
   var cardPreview = (0, _react.useMemo)(function () {
     return {
       dataURI: identifier.dataURI,
@@ -111,18 +106,18 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
       status: 'unknown'
     }
   };
-  var _useState5 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    previewDidRender = _useState4[0],
+    setPreviewDidRender = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    previewDidRender = _useState6[0],
-    setPreviewDidRender = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    error = _useState8[0],
-    setError = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    mediaViewerSelectedItem = _useState10[0],
-    setMediaViewerSelectedItem = _useState10[1];
+    mediaViewerSelectedItem = _useState8[0],
+    setMediaViewerSelectedItem = _useState8[1];
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -159,22 +154,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
   (0, _react.useEffect)(function () {
     startUfoExperienceRef.current();
   }, [startUfoExperienceRef]);
-  (0, _react.useEffect)(function () {
-    var _getDocument;
-    var fireCopiedCardEvent = function fireCopiedCardEvent() {
-      cardElement && createAnalyticsEvent && (0, _cardAnalytics.fireCopiedEvent)(createAnalyticsEvent, metadata.id, cardElement);
-    };
-
-    // we add a listener for each of the cards on the page
-    // and then check if the triggered listener is from the card
-    // that contains a div in current window.getSelection()
-    // won't work in IE11
-    (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', fireCopiedCardEvent);
-    return function () {
-      var _getDocument2;
-      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
-    };
-  }, [cardElement, createAnalyticsEvent, metadata.id]);
   var prevStatus = (0, _usePrevious.usePrevious)(status);
   (0, _react.useEffect)(function () {
     if (prevStatus !== undefined && status !== prevStatus) {
@@ -270,7 +249,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
         viewingLevel: 'minimal'
       }, payloadPart));
     },
-    innerRef: setCardElement,
     testId: testId,
     titleBoxBgColor: titleBoxBgColor,
     titleBoxIcon: titleBoxIcon,

package/dist/cjs/card/fileCard.js

@@ -18,9 +18,9 @@ var _mediaCommon = require("@atlaskit/media-common");
 var _mediaViewer = require("@atlaskit/media-viewer");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _useCallbackRef = require("use-callback-ref");
 var _errors = require("../errors");
 var _types = require("../types");
-var _document = _interopRequireDefault(require("../utils/document"));
 var _generateUniqueId = require("../utils/generateUniqueId");
 var _getDataURIDimension = require("../utils/getDataURIDimension");
 var _getMediaCardCursor = require("../utils/getMediaCardCursor");
@@ -197,7 +197,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     ssrReliability = _useFilePreview.ssrReliability,
     onImageErrorBase = _useFilePreview.onImageError,
     onImageLoadBase = _useFilePreview.onImageLoad,
-    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps,
+    copyNodeRef = _useFilePreview.copyNodeRef;
   var _useState13 = (0, _react.useState)(),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
     error = _useState14[0],
@@ -394,27 +395,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   };
 
-  //----------------------------------------------------------------//
-  //------------------------ handle fireCopiedEvent   --------------//
-  //----------------------------------------------------------------//
-
-  (0, _react.useEffect)(function () {
-    var _getDocument;
-    var fireCopiedCardEvent = function fireCopiedCardEvent() {
-      cardElement && createAnalyticsEvent && (0, _cardAnalytics.fireCopiedEvent)(createAnalyticsEvent, metadata.id, cardElement);
-    };
-
-    // we add a listener for each of the cards on the page
-    // and then check if the triggered listener is from the card
-    // that contains a div in current window.getSelection()
-    // won't work in IE11
-    (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', fireCopiedCardEvent);
-    return function () {
-      var _getDocument2;
-      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
-    };
-  }, [cardElement, createAnalyticsEvent, metadata.id]);
-
   //----------------------------------------------------------------//
   //----------------- update status flags --------------------------//
   //----------------------------------------------------------------//
@@ -535,6 +515,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       }
     }
   });
+  var mergedRef = (0, _useCallbackRef.useMergeRefs)([setCardElement, copyNodeRef]);
   (0, _react.useEffect)(function () {
     updateFileStateRef.current();
   }, [fileState, preview, previewStatus, updateFileStateRef, previewDidRender, finalStatus]);
@@ -598,7 +579,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           viewingLevel: 'minimal'
         }, payloadPart));
       } : undefined,
-      innerRef: setCardElement,
+      innerRef: mergedRef,
       testId: testId,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,

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

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "78.16.1";
+var packageVersion = "78.17.1";
 
 // @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/styles.js

@@ -16,10 +16,10 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(isFixed) {
     (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)(), {
       position: 'absolute',
       top: 0,
+      right: 0,
       display: 'flex',
       flexFlow: 'row nowrap',
       justifyContent: 'right',
-      width: '100%',
       padding: "var(--ds-space-100, 8px)",
       gap: "var(--ds-space-100, 8px)"
     })

package/dist/cjs/inline/loader.js

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

package/dist/cjs/inline/mediaInlineCard.js

@@ -20,6 +20,7 @@ var _reactIntlNext = require("react-intl-next");
 var _errors = require("../errors");
 var _analytics = require("../utils/analytics");
 var _mediaInlineCardAnalytics = require("./mediaInlineCardAnalytics");
+var _mediaClientReact = require("@atlaskit/media-client-react");
 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 && {}.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; }
 // UI component which renders an inline link in the appropiate state based on a media file
@@ -67,6 +68,10 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     setIsSucceededEventSent(true);
     (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
   };
+  var _useCopyIntent = (0, _mediaClientReact.useCopyIntent)(identifier.id, {
+      collectionName: identifier.collectionName
+    }),
+    copyNodeRef = _useCopyIntent.copyNodeRef;
   var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (onClick) {
       var inlineCardEvent = {
@@ -124,6 +129,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
     !isFailedEventSent && fireFailedOperationalEvent(new _errors.MediaCardError(errorReason, subscribeError));
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      innerRef: copyNodeRef,
       message: (intl || defaultIntl).formatMessage(errorMessage),
       isSelected: isSelected
     });
@@ -132,6 +138,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     var error = new _errors.MediaCardError('error-file-state', new Error(fileState.message));
     !isFailedEventSent && fireFailedOperationalEvent(error);
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      innerRef: copyNodeRef,
       message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
     });
@@ -142,18 +149,21 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     var _error = new _errors.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', fileState.id));
     !isFailedEventSent && fireFailedOperationalEvent(_error);
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      innerRef: copyNodeRef,
       message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
   if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      innerRef: copyNodeRef,
       message: fileState.name,
       isSelected: isSelected
     });
   }
   if (!fileState) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      innerRef: copyNodeRef,
       message: (intl || defaultIntl).formatMessage(_mediaUi.messages.loading_file),
       isSelected: isSelected
     });
@@ -192,6 +202,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
       content: formattedDate,
       tag: "span"
     }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadedView, {
+      innerRef: copyNodeRef,
       icon: linkIcon,
       title: name,
       onClick: onMediaInlineCardClick,
@@ -199,6 +210,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     })), mediaViewer));
   } else {
     return renderContent( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadedView, {
+      innerRef: copyNodeRef,
       icon: linkIcon,
       title: name,
       onClick: onMediaInlineCardClick,

package/dist/cjs/utils/analytics/analytics.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractErrorInfo = exports.createAndFireMediaCardEvent = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getErrorTraceContext = exports.getErrorEventPayload = exports.getDownloadSucceededEventPayload = exports.getDownloadFailedEventPayload = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getErrorTraceContext = exports.getErrorEventPayload = exports.getDownloadSucceededEventPayload = exports.getDownloadFailedEventPayload = exports.getCacheHitEventPayload = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
@@ -216,15 +216,6 @@ var getRenderFailedFileStatusPayload = exports.getRenderFailedFileStatusPayload
     }
   };
 };
-var getCopiedFilePayload = exports.getCopiedFilePayload = function getCopiedFilePayload(fileId) {
-  return {
-    eventType: 'ui',
-    action: 'copied',
-    actionSubject: 'file',
-    actionSubjectId: fileId,
-    attributes: {}
-  };
-};
 function fireMediaCardEvent(payload, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     var event = createAnalyticsEvent((0, _analytics.sanitiseAnalyticsPayload)(payload));

package/dist/cjs/utils/analytics/index.js

@@ -27,12 +27,6 @@ Object.defineProperty(exports, "getCacheHitEventPayload", {
     return _analytics.getCacheHitEventPayload;
   }
 });
-Object.defineProperty(exports, "getCopiedFilePayload", {
-  enumerable: true,
-  get: function get() {
-    return _analytics.getCopiedFilePayload;
-  }
-});
 Object.defineProperty(exports, "getDownloadFailedEventPayload", {
   enumerable: true,
   get: function get() {

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.16.1";
+var packageVersion = "78.17.1";
 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 UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "78.16.1";
+const packageVersion = "78.17.1";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardAnalytics.js

@@ -1,4 +1,4 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderPreviewableCardPayload, getErrorEventPayload, getDownloadSucceededEventPayload, getDownloadFailedEventPayload } from '../utils/analytics';
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getRenderPreviewableCardPayload, getErrorEventPayload, getDownloadSucceededEventPayload, getDownloadFailedEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
@@ -14,15 +14,6 @@ export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttribute
       break;
   }
 };
-export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
-  if (typeof window.getSelection === 'function') {
-    var _selection$containsNo;
-    const selection = window.getSelection();
-    if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
-      fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
-    }
-  }
-};
 export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
   fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
 };

package/dist/es2019/card/cardView.js

@@ -9,6 +9,7 @@ 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 { useMergeRefs } from 'use-callback-ref';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
@@ -30,7 +31,7 @@ import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { SvgView } from './svgView';
 export const CardViewBase = ({
   identifier,
-  innerRef,
+  innerRef = null,
   onImageLoad,
   onImageError,
   dimensions,
@@ -67,9 +68,6 @@ export const CardViewBase = ({
   const divRef = useRef(null);
   const prevCardPreviewRef = useRef();
   const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
-  useEffect(() => {
-    innerRef && !!divRef.current && innerRef(divRef.current);
-  }, [innerRef]);
   useEffect(() => {
     // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
     if (prevCardPreviewRef.current && !cardPreview) {
@@ -106,6 +104,7 @@ export const CardViewBase = ({
     }
     return true;
   };
+  const mergedRef = useMergeRefs([divRef, innerRef]);
   const getRenderConfigByStatus = () => {
     const {
       name,
@@ -311,7 +310,7 @@ export const CardViewBase = ({
     dimensions: dimensions,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    innerRef: divRef,
+    innerRef: mergedRef,
     breakpoint: breakpoint,
     mediaCardCursor: mediaCardCursor,
     disableOverlay: !!disableOverlay,

package/dist/es2019/card/externalImageCard.js

@@ -5,14 +5,13 @@ import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { ImageLoadError } from '../errors';
-import getDocument from '../utils/document';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { usePrevious } from '../utils/usePrevious';
-import { fireCopiedEvent, fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
 import { CardView } from './cardView';
 import { performanceNow } from './performance';
 export const ExternalImageCard = ({
@@ -49,7 +48,6 @@ export const ExternalImageCard = ({
   const traceContext = useMemo(() => ({
     traceId: getRandomHex(8)
   }), []);
-  const [cardElement, setCardElement] = useState(null);
   const fileStateFlagsRef = useRef({
     wasStatusUploading: false,
     wasStatusProcessing: false
@@ -121,22 +119,6 @@ export const ExternalImageCard = ({
   useEffect(() => {
     startUfoExperienceRef.current();
   }, [startUfoExperienceRef]);
-  useEffect(() => {
-    var _getDocument;
-    const fireCopiedCardEvent = () => {
-      cardElement && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, metadata.id, cardElement);
-    };
-
-    // we add a listener for each of the cards on the page
-    // and then check if the triggered listener is from the card
-    // that contains a div in current window.getSelection()
-    // won't work in IE11
-    (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', fireCopiedCardEvent);
-    return () => {
-      var _getDocument2;
-      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
-    };
-  }, [cardElement, createAnalyticsEvent, metadata.id]);
   const prevStatus = usePrevious(status);
   useEffect(() => {
     if (prevStatus !== undefined && status !== prevStatus) {
@@ -233,7 +215,6 @@ export const ExternalImageCard = ({
         ...payloadPart
       });
     },
-    innerRef: setCardElement,
     testId: testId,
     titleBoxBgColor: titleBoxBgColor,
     titleBoxIcon: titleBoxIcon,

package/dist/es2019/card/fileCard.js

@@ -5,9 +5,9 @@ import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByB
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { useMergeRefs } from 'use-callback-ref';
 import { MediaCardError } from '../errors';
 import { isSSRPreview } from '../types';
-import getDocument from '../utils/document';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
@@ -17,7 +17,7 @@ import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { usePrevious } from '../utils/usePrevious';
 import { ViewportDetector } from '../utils/viewportDetector';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
-import { fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent, fireDownloadSucceededEvent, fireDownloadFailedEvent } from './cardAnalytics';
+import { fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent, fireDownloadSucceededEvent, fireDownloadFailedEvent } from './cardAnalytics';
 import { CardView } from './cardView';
 import { InlinePlayerLazy } from './inlinePlayerLazy';
 import { useFilePreview } from '@atlaskit/media-file-preview';
@@ -148,7 +148,8 @@ export const FileCard = ({
     ssrReliability,
     onImageError: onImageErrorBase,
     onImageLoad: onImageLoadBase,
-    getSsrScriptProps
+    getSsrScriptProps,
+    copyNodeRef
   } = useFilePreview({
     mediaBlobUrlAttrs,
     resizeMode: imageResizeModeToFileImageMode(resizeMode),
@@ -330,27 +331,6 @@ export const FileCard = ({
     }
   };
 
-  //----------------------------------------------------------------//
-  //------------------------ handle fireCopiedEvent   --------------//
-  //----------------------------------------------------------------//
-
-  useEffect(() => {
-    var _getDocument;
-    const fireCopiedCardEvent = () => {
-      cardElement && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, metadata.id, cardElement);
-    };
-
-    // we add a listener for each of the cards on the page
-    // and then check if the triggered listener is from the card
-    // that contains a div in current window.getSelection()
-    // won't work in IE11
-    (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', fireCopiedCardEvent);
-    return () => {
-      var _getDocument2;
-      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
-    };
-  }, [cardElement, createAnalyticsEvent, metadata.id]);
-
   //----------------------------------------------------------------//
   //----------------- update status flags --------------------------//
   //----------------------------------------------------------------//
@@ -472,6 +452,7 @@ export const FileCard = ({
       }
     }
   });
+  const mergedRef = useMergeRefs([setCardElement, copyNodeRef]);
   useEffect(() => {
     updateFileStateRef.current();
   }, [fileState, preview, previewStatus, updateFileStateRef, previewDidRender, finalStatus]);
@@ -535,7 +516,7 @@ export const FileCard = ({
           ...payloadPart
         });
       } : undefined,
-      innerRef: setCardElement,
+      innerRef: mergedRef,
       testId: testId,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,

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.16.1";
+const packageVersion = "78.17.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({