@atlaskit/media-card 78.16.0 → 78.17.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-card
 
+## 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
+
+- [#181001](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/181001)
+  [`6108eab3b6a57`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6108eab3b6a57) -
+  Fixed positioning when Action Bar items add a tooltip
+
 ## 78.16.0
 
 ### Minor 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.0";
+var packageVersion = "78.17.0";
 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.0";
+var packageVersion = "78.17.0";
 
 // @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/actionsBarWrapper.js

@@ -13,13 +13,21 @@ var _styles = require("./styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ActionsBarWrapper = exports.ActionsBarWrapper = function ActionsBarWrapper(props) {
-  return (0, _react.jsx)("div", {
-    id: "actionsBarWrapper"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: (0, _styles.wrapperStyles)(props.isFixed)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _styles.actionsBarClassName
-  }, props.children);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    (0, _react.jsx)("div", {
+      id: "actionsBarWrapper",
+      "data-testId": "actionsBarWrapper"
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: (0, _styles.wrapperStyles)(props.isFixed)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: _styles.actionsBarClassName,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }, props.children)
+  );
 };

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

@@ -53,9 +53,7 @@ var CardActionIconButton = exports.CardActionIconButton = function CardActionIco
     variant: variant,
     disabled: isDisabled
   }, icon);
-  var useTooltip = !!tooltip && false; // TODO: Tooltip breaks Button positioning
-
-  return useTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return tooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: tooltip,
     position: "bottom",
     tag: "span"

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

@@ -13,9 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _cardActionIconButton = require("./cardActionIconButton");
-var _styles = require("./styles");
 var _cardActionsDropdownMenu = require("./cardActionsDropdownMenu");
-var _preventClickThrough = require("../../../../utils/preventClickThrough");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -36,9 +34,7 @@ var CardActionsView = exports.CardActionsView = /*#__PURE__*/function (_Componen
       }
       var primaryAction = actions.find(actionWithIcon);
       var otherActions = actions.filter(actionNotEqualTo(primaryAction));
-      return (0, _react.jsx)(_preventClickThrough.PreventClickThrough, null, (0, _react.jsx)("div", {
-        css: _styles.wrapperStyles
-      }, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
+      return (0, _react.jsx)(_react2.Fragment, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions));
     }
   }, {
     key: "renderActionIconButton",

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

@@ -3,32 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyles = exports.cardActionButtonStyles = exports.CardActionIconButtonVariant = void 0;
+exports.cardActionButtonStyles = exports.CardActionIconButtonVariant = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("../../styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
-  boxSizing: 'border-box',
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '*': {
-    boxSizing: 'border-box'
-  },
-  display: 'flex',
-  position: 'relative',
-  lineHeight: 0
-});
 var CardActionIconButtonVariant = exports.CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
   return CardActionIconButtonVariant;
 }({});
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _styles.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _styles.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
+  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _styles.rgba)(_colors.N0, 0.8), ")"), ";\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _styles.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
 var cardActionButtonStyles = exports.cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;

package/dist/cjs/card/ui/actionsBar/styles.js

@@ -15,11 +15,13 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(isFixed) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)(), {
       position: 'absolute',
-      top: "var(--ds-space-100, 8px)",
-      right: "var(--ds-space-100, 8px)",
+      top: 0,
       display: 'flex',
       flexFlow: 'row nowrap',
-      alignItems: 'center'
+      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.0",
+        packageName: "78.17.0",
         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.0";
+var packageVersion = "78.17.0";
 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.0";
+const packageVersion = "78.17.0";
 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,