@atlaskit/media-viewer 49.5.3 → 49.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-viewer
 
+## 49.6.0
+
+### Minor Changes
+
+- [#97492](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97492)
+  [`5195c4fd974a3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5195c4fd974a3) -
+  Integrated warning modal dialog to prevent against abuse-classified file downloads.
+
+  Exported MediaViewerWithPortal implementing internal DS Portal, for correct integration with DS
+  Modal.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 49.5.3
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "49.5.3";
+var packageVersion = exports.packageVersion = "49.6.0";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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-viewer";
-var packageVersion = "49.5.3";
+var packageVersion = "49.6.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/components/media-viewer-loader.js

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MediaViewerWithPortal = MediaViewerWithPortal;
 exports.default = AsyncMediaViewer;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _modalSpinner = _interopRequireDefault(require("../viewers/modalSpinner"));
+var _portal = require("./portal");
 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" != (0, _typeof2.default)(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 MediaViewer = /*#__PURE__*/(0, _react.lazy)(function () {
@@ -24,4 +26,7 @@ function AsyncMediaViewer(props) {
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement(_modalSpinner.default, null)
   }, /*#__PURE__*/_react.default.createElement(MediaViewer, props));
+}
+function MediaViewerWithPortal(props) {
+  return /*#__PURE__*/_react.default.createElement(_portal.MediaViewerPortal, null, /*#__PURE__*/_react.default.createElement(AsyncMediaViewer, props));
 }

package/dist/cjs/components/portal.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaViewerPortal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var MediaViewerPortal = exports.MediaViewerPortal = function MediaViewerPortal(_ref) {
+  var children = _ref.children;
+  return (
+    /*#__PURE__*/
+    // This zIndex matches with zIndex used by DS Modal and Jira Issue View Modal.
+    // This value makes layers stack work correctly:
+    //  -> Issue View -> Media Viewer -> DS Modal
+    _react.default.createElement(_portal.default, {
+      zIndex: 510
+    }, children)
+  );
+};

package/dist/cjs/download.js

@@ -23,6 +23,7 @@ var _failedPreviewDownloadButtonClicked = require("./analytics/events/ui/failedP
 var _styleWrappers = require("./styleWrappers");
 var _errors = require("./errors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _abuseModal = require("@atlaskit/media-ui/abuseModal");
 var _excluded = ["analyticspayload", "onClick", "tooltip"];
 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; }
@@ -84,59 +85,85 @@ var useDownloadButtonDisabledProps = function useDownloadButtonDisabledProps(med
     tooltip: tooltip
   };
 };
-var ErrorViewDownloadButton = exports.ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref3) {
-  var fileState = _ref3.fileState,
+var DownloadItem = function DownloadItem(_ref3) {
+  var testId = _ref3.testId,
+    fileState = _ref3.fileState,
     mediaClient = _ref3.mediaClient,
-    error = _ref3.error,
+    collectionName = _ref3.collectionName,
+    appearance = _ref3.appearance,
+    analyticspayload = _ref3.analyticspayload,
     traceContext = _ref3.traceContext,
-    collectionName = _ref3.collectionName;
-  var downloadEvent = (0, _failedPreviewDownloadButtonClicked.createFailedPreviewDownloadButtonClickedEvent)(fileState, error);
+    iconBefore = _ref3.iconBefore,
+    children = _ref3.children;
+  var openModalRef = /*#__PURE__*/(0, _react.createRef)();
   var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
   var _useDownloadButtonDis = useDownloadButtonDisabledProps(mediaClient),
     isDisabled = _useDownloadButtonDis.isDisabled,
     tooltip = _useDownloadButtonDis.tooltip;
-  return /*#__PURE__*/_react.default.createElement(_styleWrappers.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadButton
-  // testId="media-viewer-failed-preview-download-button"
-  , {
-    testId: "media-viewer-error-download-button",
-    analyticspayload: downloadEvent,
-    appearance: "primary",
+  var shouldRenderAbuseModal = !(0, _mediaClient.isErrorFileState)(fileState) && !!fileState.abuseClassification;
+  var itemDownloader = createItemDownloader(fileState, mediaClient, {
+    collectionName: collectionName,
+    createAnalyticsEvent: createAnalyticsEvent,
+    traceContext: traceContext
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_abuseModal.AbuseModal, {
+    ref: openModalRef,
+    shouldMount: shouldRenderAbuseModal,
+    onConfirm: itemDownloader
+  }), /*#__PURE__*/_react.default.createElement(DownloadButton, {
+    testId: testId,
+    appearance: appearance,
+    analyticspayload: analyticspayload,
     isDisabled: isDisabled,
     tooltip: tooltip,
-    onClick: createItemDownloader(fileState, mediaClient, {
-      collectionName: collectionName,
-      traceContext: traceContext,
-      createAnalyticsEvent: createAnalyticsEvent
-    })
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.download)));
+    onClick: function onClick() {
+      if (shouldRenderAbuseModal) {
+        var _openModalRef$current;
+        (_openModalRef$current = openModalRef.current) === null || _openModalRef$current === void 0 || _openModalRef$current.call(openModalRef);
+      } else {
+        itemDownloader();
+      }
+    },
+    iconBefore: iconBefore
+  }, children));
 };
-var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(_ref4) {
-  var state = _ref4.state,
+var ErrorViewDownloadButton = exports.ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref4) {
+  var fileState = _ref4.fileState,
     mediaClient = _ref4.mediaClient,
-    identifier = _ref4.identifier,
-    traceContext = _ref4.traceContext;
-  var _useAnalyticsEvents3 = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents3.createAnalyticsEvent;
-  var downloadEvent = (0, _downloadButtonClicked.createDownloadButtonClickedEvent)(state);
-  var _useDownloadButtonDis2 = useDownloadButtonDisabledProps(mediaClient),
-    isDisabled = _useDownloadButtonDis2.isDisabled,
-    tooltip = _useDownloadButtonDis2.tooltip;
-
+    error = _ref4.error,
+    traceContext = _ref4.traceContext,
+    collectionName = _ref4.collectionName;
+  var downloadEvent = (0, _failedPreviewDownloadButtonClicked.createFailedPreviewDownloadButtonClickedEvent)(fileState, error);
+  var testId = 'media-viewer-error-download-button';
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.DownloadButtonWrapper, null, /*#__PURE__*/_react.default.createElement(DownloadItem, {
+    testId: testId,
+    analyticspayload: downloadEvent,
+    appearance: "primary",
+    fileState: fileState,
+    mediaClient: mediaClient,
+    collectionName: collectionName,
+    traceContext: traceContext
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.download)));
+};
+var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(_ref5) {
+  var state = _ref5.state,
+    mediaClient = _ref5.mediaClient,
+    identifier = _ref5.identifier,
+    traceContext = _ref5.traceContext;
   // TODO [MS-1731]: make it work for external files as well
   if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(DownloadButton, {
-    testId: "media-viewer-download-button",
+  var downloadEvent = (0, _downloadButtonClicked.createDownloadButtonClickedEvent)(state);
+  var testId = 'media-viewer-download-button';
+  return /*#__PURE__*/_react.default.createElement(DownloadItem, {
+    testId: testId,
     analyticspayload: downloadEvent,
-    isDisabled: isDisabled,
-    tooltip: tooltip,
-    onClick: createItemDownloader(state, mediaClient, {
-      collectionName: identifier.collectionName,
-      createAnalyticsEvent: createAnalyticsEvent,
-      traceContext: traceContext
-    }),
+    fileState: state,
+    mediaClient: mediaClient,
+    collectionName: identifier.collectionName,
+    traceContext: traceContext,
     iconBefore: downloadIcon
   });
 };

package/dist/cjs/errorMessage.js

@@ -92,9 +92,13 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.ErrorMessageWrapper, {
         "data-testid": "media-viewer-error"
       }, /*#__PURE__*/_react.default.createElement("div", null, errorInfo.icon, errorInfo.messages.map(function (formatMessage, i) {
-        return /*#__PURE__*/_react.default.createElement("p", {
-          key: "p".concat(i)
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, formatMessage));
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+          _react.default.createElement("p", {
+            key: "p".concat(i)
+          }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, formatMessage))
+        );
       })), this.props.children);
     }
   }], [{

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,4 +10,12 @@ Object.defineProperty(exports, "MediaViewer", {
     return _mediaViewerLoader.default;
   }
 });
-var _mediaViewerLoader = _interopRequireDefault(require("./components/media-viewer-loader"));
+Object.defineProperty(exports, "MediaViewerWithPortal", {
+  enumerable: true,
+  get: function get() {
+    return _mediaViewerLoader.MediaViewerWithPortal;
+  }
+});
+var _mediaViewerLoader = _interopRequireWildcard(require("./components/media-viewer-loader"));
+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; }

package/dist/cjs/styleWrappers.js

@@ -117,6 +117,7 @@ var zoomRightControlsStyles = (0, _react.css)({
 });
 var zoomLevelIndicatorStyles = (0, _react.css)({
   height: '32px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '32px',
   verticalAlign: 'middle'
 });
@@ -137,6 +138,7 @@ var errorMessageWrapperStyles = (0, _react.css)({
   color: '#c7d1db',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   p: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '100%'
   }
 });

package/dist/cjs/viewers/archiveSidebar/styleWrappers.js

@@ -111,6 +111,7 @@ var sidebarHeaderEntryStyles = (0, _react.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.14286,
   color: "var(--ds-text, ".concat(_colors.DN500, ")")
 });

package/dist/cjs/viewers/doc/pdfRenderer.js

@@ -62,6 +62,7 @@ var globalStyles = (0, _react2.css)((0, _defineProperty2.default)({}, ".".concat
     bottom: 0,
     overflow: 'hidden',
     opacity: 0.2,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "49.5.3";
+const packageVersion = "49.6.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "49.5.3";
+const packageVersion = "49.6.0";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/components/media-viewer-loader.js

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from 'react';
 import ModalSpinner from '../viewers/modalSpinner';
+import { MediaViewerPortal } from './portal';
 const MediaViewer = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_media-viewer" */'./media-viewer-error-boundary').then(({
   MediaViewerWithErrorBoundary
 }) => ({
@@ -9,4 +10,7 @@ export default function AsyncMediaViewer(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement(ModalSpinner, null)
   }, /*#__PURE__*/React.createElement(MediaViewer, props));
+}
+export function MediaViewerWithPortal(props) {
+  return /*#__PURE__*/React.createElement(MediaViewerPortal, null, /*#__PURE__*/React.createElement(AsyncMediaViewer, props));
 }

package/dist/es2019/components/portal.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Portal from '@atlaskit/portal';
+export const MediaViewerPortal = ({
+  children
+}) =>
+/*#__PURE__*/
+// This zIndex matches with zIndex used by DS Modal and Jira Issue View Modal.
+// This value makes layers stack work correctly:
+//  -> Issue View -> Media Viewer -> DS Modal
+React.createElement(Portal, {
+  zIndex: 510
+}, children);

package/dist/es2019/download.js

@@ -3,7 +3,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { isErrorFileState, isExternalImageIdentifier } from '@atlaskit/media-client';
 import { MediaButton, messages } from '@atlaskit/media-ui';
-import React, { useCallback } from 'react';
+import React, { createRef, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { createDownloadButtonClickedEvent } from './analytics/events/ui/downloadButtonClicked';
 import { createDownloadFailedEventPayload, createDownloadSucceededEventPayload } from './analytics/events/operational/download';
@@ -12,6 +12,7 @@ import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/event
 import { DownloadButtonWrapper } from './styleWrappers';
 import { MediaViewerError } from './errors';
 import Tooltip from '@atlaskit/tooltip';
+import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 const downloadIcon = /*#__PURE__*/React.createElement(DownloadIcon, {
   color: "currentColor",
   spacing: "spacious",
@@ -65,14 +66,18 @@ const useDownloadButtonDisabledProps = mediaClient => {
     tooltip
   };
 };
-export const ErrorViewDownloadButton = ({
+const DownloadItem = ({
+  testId,
   fileState,
   mediaClient,
-  error,
+  collectionName,
+  appearance,
+  analyticspayload,
   traceContext,
-  collectionName
+  iconBefore,
+  children
 }) => {
-  const downloadEvent = createFailedPreviewDownloadButtonClickedEvent(fileState, error);
+  const openModalRef = /*#__PURE__*/createRef();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -80,19 +85,50 @@ export const ErrorViewDownloadButton = ({
     isDisabled,
     tooltip
   } = useDownloadButtonDisabledProps(mediaClient);
-  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadButton
-  // testId="media-viewer-failed-preview-download-button"
-  , {
-    testId: "media-viewer-error-download-button",
-    analyticspayload: downloadEvent,
-    appearance: "primary",
+  const shouldRenderAbuseModal = !isErrorFileState(fileState) && !!fileState.abuseClassification;
+  const itemDownloader = createItemDownloader(fileState, mediaClient, {
+    collectionName: collectionName,
+    createAnalyticsEvent,
+    traceContext
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbuseModal, {
+    ref: openModalRef,
+    shouldMount: shouldRenderAbuseModal,
+    onConfirm: itemDownloader
+  }), /*#__PURE__*/React.createElement(DownloadButton, {
+    testId: testId,
+    appearance: appearance,
+    analyticspayload: analyticspayload,
     isDisabled: isDisabled,
     tooltip: tooltip,
-    onClick: createItemDownloader(fileState, mediaClient, {
-      collectionName,
-      traceContext,
-      createAnalyticsEvent
-    })
+    onClick: () => {
+      if (shouldRenderAbuseModal) {
+        var _openModalRef$current;
+        (_openModalRef$current = openModalRef.current) === null || _openModalRef$current === void 0 ? void 0 : _openModalRef$current.call(openModalRef);
+      } else {
+        itemDownloader();
+      }
+    },
+    iconBefore: iconBefore
+  }, children));
+};
+export const ErrorViewDownloadButton = ({
+  fileState,
+  mediaClient,
+  error,
+  traceContext,
+  collectionName
+}) => {
+  const downloadEvent = createFailedPreviewDownloadButtonClickedEvent(fileState, error);
+  const testId = 'media-viewer-error-download-button';
+  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadItem, {
+    testId: testId,
+    analyticspayload: downloadEvent,
+    appearance: "primary",
+    fileState: fileState,
+    mediaClient: mediaClient,
+    collectionName: collectionName,
+    traceContext: traceContext
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.download)));
 };
 export const ToolbarDownloadButton = ({
@@ -101,29 +137,19 @@ export const ToolbarDownloadButton = ({
   identifier,
   traceContext
 }) => {
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  const downloadEvent = createDownloadButtonClickedEvent(state);
-  const {
-    isDisabled,
-    tooltip
-  } = useDownloadButtonDisabledProps(mediaClient);
-
   // TODO [MS-1731]: make it work for external files as well
   if (isExternalImageIdentifier(identifier)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DownloadButton, {
-    testId: "media-viewer-download-button",
+  const downloadEvent = createDownloadButtonClickedEvent(state);
+  const testId = 'media-viewer-download-button';
+  return /*#__PURE__*/React.createElement(DownloadItem, {
+    testId: testId,
     analyticspayload: downloadEvent,
-    isDisabled: isDisabled,
-    tooltip: tooltip,
-    onClick: createItemDownloader(state, mediaClient, {
-      collectionName: identifier.collectionName,
-      createAnalyticsEvent,
-      traceContext
-    }),
+    fileState: state,
+    mediaClient: mediaClient,
+    collectionName: identifier.collectionName,
+    traceContext: traceContext,
     iconBefore: downloadIcon
   });
 };

package/dist/es2019/errorMessage.js

@@ -75,7 +75,10 @@ export class ErrorMessage extends React.Component {
     const errorInfo = this.getErrorInfo();
     return /*#__PURE__*/React.createElement(ErrorMessageWrapper, {
       "data-testid": "media-viewer-error"
-    }, /*#__PURE__*/React.createElement("div", null, errorInfo.icon, errorInfo.messages.map((formatMessage, i) => /*#__PURE__*/React.createElement("p", {
+    }, /*#__PURE__*/React.createElement("div", null, errorInfo.icon, errorInfo.messages.map((formatMessage, i) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    React.createElement("p", {
       key: `p${i}`
     }, /*#__PURE__*/React.createElement(FormattedMessage, formatMessage)))), this.props.children);
   }

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default as MediaViewer } from './components/media-viewer-loader';
+export { default as MediaViewer, MediaViewerWithPortal } from './components/media-viewer-loader';

package/dist/es2019/styleWrappers.js

@@ -106,6 +106,7 @@ const zoomRightControlsStyles = css({
 });
 const zoomLevelIndicatorStyles = css({
   height: '32px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '32px',
   verticalAlign: 'middle'
 });
@@ -126,6 +127,7 @@ const errorMessageWrapperStyles = css({
   color: '#c7d1db',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   p: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '100%'
   }
 });

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -104,6 +104,7 @@ const sidebarHeaderEntryStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.14286,
   color: `var(--ds-text, ${DN500})`
 });

package/dist/es2019/viewers/doc/pdfRenderer.js

@@ -47,6 +47,7 @@ const globalStyles = css({
       bottom: 0,
       overflow: 'hidden',
       opacity: 0.2,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       lineHeight: 1
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "49.5.3";
+var packageVersion = "49.6.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "49.5.3";
+var packageVersion = "49.6.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/components/media-viewer-loader.js

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from 'react';
 import ModalSpinner from '../viewers/modalSpinner';
+import { MediaViewerPortal } from './portal';
 var MediaViewer = /*#__PURE__*/lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-internal_media-viewer" */'./media-viewer-error-boundary').then(function (_ref) {
     var MediaViewerWithErrorBoundary = _ref.MediaViewerWithErrorBoundary;
@@ -12,4 +13,7 @@ export default function AsyncMediaViewer(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement(ModalSpinner, null)
   }, /*#__PURE__*/React.createElement(MediaViewer, props));
+}
+export function MediaViewerWithPortal(props) {
+  return /*#__PURE__*/React.createElement(MediaViewerPortal, null, /*#__PURE__*/React.createElement(AsyncMediaViewer, props));
 }

package/dist/esm/components/portal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Portal from '@atlaskit/portal';
+export var MediaViewerPortal = function MediaViewerPortal(_ref) {
+  var children = _ref.children;
+  return (
+    /*#__PURE__*/
+    // This zIndex matches with zIndex used by DS Modal and Jira Issue View Modal.
+    // This value makes layers stack work correctly:
+    //  -> Issue View -> Media Viewer -> DS Modal
+    React.createElement(Portal, {
+      zIndex: 510
+    }, children)
+  );
+};

package/dist/esm/download.js

@@ -7,7 +7,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { isErrorFileState, isExternalImageIdentifier } from '@atlaskit/media-client';
 import { MediaButton, messages } from '@atlaskit/media-ui';
-import React, { useCallback } from 'react';
+import React, { createRef, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { createDownloadButtonClickedEvent } from './analytics/events/ui/downloadButtonClicked';
 import { createDownloadFailedEventPayload, createDownloadSucceededEventPayload } from './analytics/events/operational/download';
@@ -16,6 +16,7 @@ import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/event
 import { DownloadButtonWrapper } from './styleWrappers';
 import { MediaViewerError } from './errors';
 import Tooltip from '@atlaskit/tooltip';
+import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 var downloadIcon = /*#__PURE__*/React.createElement(DownloadIcon, {
   color: "currentColor",
   spacing: "spacious",
@@ -74,59 +75,85 @@ var useDownloadButtonDisabledProps = function useDownloadButtonDisabledProps(med
     tooltip: tooltip
   };
 };
-export var ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref3) {
-  var fileState = _ref3.fileState,
+var DownloadItem = function DownloadItem(_ref3) {
+  var testId = _ref3.testId,
+    fileState = _ref3.fileState,
     mediaClient = _ref3.mediaClient,
-    error = _ref3.error,
+    collectionName = _ref3.collectionName,
+    appearance = _ref3.appearance,
+    analyticspayload = _ref3.analyticspayload,
     traceContext = _ref3.traceContext,
-    collectionName = _ref3.collectionName;
-  var downloadEvent = createFailedPreviewDownloadButtonClickedEvent(fileState, error);
+    iconBefore = _ref3.iconBefore,
+    children = _ref3.children;
+  var openModalRef = /*#__PURE__*/createRef();
   var _useAnalyticsEvents2 = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
   var _useDownloadButtonDis = useDownloadButtonDisabledProps(mediaClient),
     isDisabled = _useDownloadButtonDis.isDisabled,
     tooltip = _useDownloadButtonDis.tooltip;
-  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadButton
-  // testId="media-viewer-failed-preview-download-button"
-  , {
-    testId: "media-viewer-error-download-button",
-    analyticspayload: downloadEvent,
-    appearance: "primary",
+  var shouldRenderAbuseModal = !isErrorFileState(fileState) && !!fileState.abuseClassification;
+  var itemDownloader = createItemDownloader(fileState, mediaClient, {
+    collectionName: collectionName,
+    createAnalyticsEvent: createAnalyticsEvent,
+    traceContext: traceContext
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbuseModal, {
+    ref: openModalRef,
+    shouldMount: shouldRenderAbuseModal,
+    onConfirm: itemDownloader
+  }), /*#__PURE__*/React.createElement(DownloadButton, {
+    testId: testId,
+    appearance: appearance,
+    analyticspayload: analyticspayload,
     isDisabled: isDisabled,
     tooltip: tooltip,
-    onClick: createItemDownloader(fileState, mediaClient, {
-      collectionName: collectionName,
-      traceContext: traceContext,
-      createAnalyticsEvent: createAnalyticsEvent
-    })
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.download)));
+    onClick: function onClick() {
+      if (shouldRenderAbuseModal) {
+        var _openModalRef$current;
+        (_openModalRef$current = openModalRef.current) === null || _openModalRef$current === void 0 || _openModalRef$current.call(openModalRef);
+      } else {
+        itemDownloader();
+      }
+    },
+    iconBefore: iconBefore
+  }, children));
 };
-export var ToolbarDownloadButton = function ToolbarDownloadButton(_ref4) {
-  var state = _ref4.state,
+export var ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref4) {
+  var fileState = _ref4.fileState,
     mediaClient = _ref4.mediaClient,
-    identifier = _ref4.identifier,
-    traceContext = _ref4.traceContext;
-  var _useAnalyticsEvents3 = useAnalyticsEvents(),
-    createAnalyticsEvent = _useAnalyticsEvents3.createAnalyticsEvent;
-  var downloadEvent = createDownloadButtonClickedEvent(state);
-  var _useDownloadButtonDis2 = useDownloadButtonDisabledProps(mediaClient),
-    isDisabled = _useDownloadButtonDis2.isDisabled,
-    tooltip = _useDownloadButtonDis2.tooltip;
-
+    error = _ref4.error,
+    traceContext = _ref4.traceContext,
+    collectionName = _ref4.collectionName;
+  var downloadEvent = createFailedPreviewDownloadButtonClickedEvent(fileState, error);
+  var testId = 'media-viewer-error-download-button';
+  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadItem, {
+    testId: testId,
+    analyticspayload: downloadEvent,
+    appearance: "primary",
+    fileState: fileState,
+    mediaClient: mediaClient,
+    collectionName: collectionName,
+    traceContext: traceContext
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.download)));
+};
+export var ToolbarDownloadButton = function ToolbarDownloadButton(_ref5) {
+  var state = _ref5.state,
+    mediaClient = _ref5.mediaClient,
+    identifier = _ref5.identifier,
+    traceContext = _ref5.traceContext;
   // TODO [MS-1731]: make it work for external files as well
   if (isExternalImageIdentifier(identifier)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DownloadButton, {
-    testId: "media-viewer-download-button",
+  var downloadEvent = createDownloadButtonClickedEvent(state);
+  var testId = 'media-viewer-download-button';
+  return /*#__PURE__*/React.createElement(DownloadItem, {
+    testId: testId,
     analyticspayload: downloadEvent,
-    isDisabled: isDisabled,
-    tooltip: tooltip,
-    onClick: createItemDownloader(state, mediaClient, {
-      collectionName: identifier.collectionName,
-      createAnalyticsEvent: createAnalyticsEvent,
-      traceContext: traceContext
-    }),
+    fileState: state,
+    mediaClient: mediaClient,
+    collectionName: identifier.collectionName,
+    traceContext: traceContext,
     iconBefore: downloadIcon
   });
 };

package/dist/esm/errorMessage.js

@@ -85,9 +85,13 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ErrorMessageWrapper, {
         "data-testid": "media-viewer-error"
       }, /*#__PURE__*/React.createElement("div", null, errorInfo.icon, errorInfo.messages.map(function (formatMessage, i) {
-        return /*#__PURE__*/React.createElement("p", {
-          key: "p".concat(i)
-        }, /*#__PURE__*/React.createElement(FormattedMessage, formatMessage));
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+          React.createElement("p", {
+            key: "p".concat(i)
+          }, /*#__PURE__*/React.createElement(FormattedMessage, formatMessage))
+        );
       })), this.props.children);
     }
   }], [{

package/dist/esm/index.js

@@ -1 +1 @@
-export { default as MediaViewer } from './components/media-viewer-loader';
+export { default as MediaViewer, MediaViewerWithPortal } from './components/media-viewer-loader';

package/dist/esm/styleWrappers.js

@@ -109,6 +109,7 @@ var zoomRightControlsStyles = css({
 });
 var zoomLevelIndicatorStyles = css({
   height: '32px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '32px',
   verticalAlign: 'middle'
 });
@@ -129,6 +130,7 @@ var errorMessageWrapperStyles = css({
   color: '#c7d1db',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   p: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '100%'
   }
 });

package/dist/esm/viewers/archiveSidebar/styleWrappers.js

@@ -104,6 +104,7 @@ var sidebarHeaderEntryStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.14286,
   color: "var(--ds-text, ".concat(DN500, ")")
 });

package/dist/esm/viewers/doc/pdfRenderer.js

@@ -51,6 +51,7 @@ var globalStyles = css(_defineProperty({}, ".".concat(pdfViewerClassName), {
     bottom: 0,
     overflow: 'hidden',
     opacity: 0.2,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/types/components/media-viewer-loader.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { MediaViewerWithMediaClientConfigProps } from './types';
 export default function AsyncMediaViewer(props: MediaViewerWithMediaClientConfigProps): JSX.Element;
+export declare function MediaViewerWithPortal(props: MediaViewerWithMediaClientConfigProps): JSX.Element;

package/dist/types/components/portal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaViewerPortal: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { default as MediaViewer } from './components/media-viewer-loader';
+export { default as MediaViewer, MediaViewerWithPortal } from './components/media-viewer-loader';
 export type { MediaViewerExtensions, MediaViewerExtensionsActions, MediaViewerProps, MediaMessage, } from './components/types';
 export type { ViewerOptionsProps, CustomRendererConfig, CustomRendererStateProps, CustomRendererProps, ArchiveFileItem, } from './viewerOptions';

package/dist/types-ts4.5/components/media-viewer-loader.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { MediaViewerWithMediaClientConfigProps } from './types';
 export default function AsyncMediaViewer(props: MediaViewerWithMediaClientConfigProps): JSX.Element;
+export declare function MediaViewerWithPortal(props: MediaViewerWithMediaClientConfigProps): JSX.Element;

package/dist/types-ts4.5/components/portal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaViewerPortal: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
-export { default as MediaViewer } from './components/media-viewer-loader';
+export { default as MediaViewer, MediaViewerWithPortal } from './components/media-viewer-loader';
 export type { MediaViewerExtensions, MediaViewerExtensionsActions, MediaViewerProps, MediaMessage, } from './components/types';
 export type { ViewerOptionsProps, CustomRendererConfig, CustomRendererStateProps, CustomRendererProps, ArchiveFileItem, } from './viewerOptions';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "49.5.3",
+	"version": "49.6.0",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,14 +38,15 @@
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
 		"@atlaskit/form": "^11.0.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.2.0",
 		"@atlaskit/icon-file-type": "^6.8.0",
 		"@atlaskit/media-client": "^29.0.0",
 		"@atlaskit/media-client-react": "^2.5.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-svg": "^1.0.0",
-		"@atlaskit/media-ui": "^27.2.0",
+		"@atlaskit/media-ui": "^27.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/portal": "^4.10.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/side-navigation": "^3.6.0",
 		"@atlaskit/spinner": "^16.3.0",
@@ -78,8 +79,8 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/media-core": "^34.4.0",
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
-		"@atlaskit/media-state": "^1.2.0",
-		"@atlaskit/media-test-data": "^2.7.0",
+		"@atlaskit/media-state": "^1.3.0",
+		"@atlaskit/media-test-data": "^2.8.0",
 		"@atlaskit/media-test-helpers": "^34.7.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "14.0.1",