@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/es2019/viewers/image/interactive-img.js

@@ -1,297 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Camera } from '@atlaskit/media-ui/camera/camera';
-import { getCssFromImageOrientation } from '@atlaskit/media-ui/imageMetaData/getCssFromImageOrientation';
-import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
-import { Rectangle } from '@atlaskit/media-ui/rectangle';
-import { Vector2 } from '@atlaskit/media-ui/vector2';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import { MAX_RESOLUTION } from '@atlaskit/media-client/constants';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import VideoHdIcon from '@atlaskit/icon-lab/core/video-hd';
-import VideoHdFilledIcon from '@atlaskit/icon-lab/core/video-hd-filled';
-import Spinner from '@atlaskit/spinner/spinner';
-import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
-import { ZoomLevel } from '../../domain/zoomLevel';
-import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
-import { ZoomControls } from '../../zoomControls';
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
-export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
-  const isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
-  const zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
-  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
-}
-const clientRectangle = el => {
-  const {
-    clientWidth,
-    clientHeight
-  } = el;
-  return new Rectangle(clientWidth, clientHeight);
-};
-const naturalSizeRectangle = el => {
-  const {
-    naturalWidth,
-    naturalHeight
-  } = el;
-  return new Rectangle(naturalWidth, naturalHeight);
-};
-const initialState = {
-  zoomLevel: new ZoomLevel(1),
-  isHDActive: false,
-  isHDActivating: false,
-  isHDAvailable: false,
-  isDragging: false,
-  cursorPos: new Vector2(0, 0),
-  hasBeenLoadedOnce: false
-};
-export class InteractiveImgComponent extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", initialState);
-    _defineProperty(this, "saveWrapperRef", ref => this.wrapper = ref);
-    _defineProperty(this, "onImageClicked", e => {
-      const {
-        onClose,
-        onBlanketClicked
-      } = this.props;
-      if (e.target === e.currentTarget && onBlanketClicked) {
-        onBlanketClicked();
-      }
-      closeOnDirectClick(onClose)(e);
-    });
-    _defineProperty(this, "onImgLoad", ev => {
-      const {
-        onLoad,
-        originalBinaryImageSrc
-      } = this.props;
-      const {
-        hasBeenLoadedOnce,
-        zoomLevel: oldZoomLevel,
-        camera: currentCamera
-      } = this.state;
-      let {
-        isHDActivating,
-        isHDAvailable,
-        isHDActive
-      } = this.state;
-      if (!this.wrapper) {
-        return;
-      }
-      const viewport = clientRectangle(this.wrapper);
-      const originalImgRect = naturalSizeRectangle(ev.currentTarget);
-      const camera = new Camera(viewport, originalImgRect);
-      let newZoomLevel;
-      if (hasBeenLoadedOnce && currentCamera) {
-        /* This is not first time image is loading. Likely due to new (HD) image is loaded.
-         * In order to keep new image on the same perceived zoom level we need to scale.
-         * It depends on ration between old and new images and current zoom level.
-         * For example:
-         * - old image is 2000px with zoom at 50% (0.5). New image is 4000px. 2000/4000 * 0.5 = 0.25 (25%)
-         * - old image is 2000px with zoom at 200% (2). New image is 4000px. 2000/4000 * 2 = 1 (100%)
-         */
-        const previousImageWidth = currentCamera.originalImg.width;
-        const newImageWidth = originalImgRect.width;
-        newZoomLevel = new ZoomLevel(previousImageWidth / newImageWidth * oldZoomLevel.value);
-        isHDActivating = false;
-      } else {
-        newZoomLevel = new ZoomLevel(camera.scaleDownToFit);
-
-        // If initial (non-HD) image is equal to MAX resolution -
-        // this means most likely original image had higher res (because non-HD is downsized and caped off with MAX res)
-        isHDAvailable = !!originalBinaryImageSrc && (originalImgRect.width === MAX_RESOLUTION || originalImgRect.height === MAX_RESOLUTION);
-
-        // Automatically activate HD on first load if zoom level is already 100% or bigger
-        isHDActive = newZoomLevel.value >= 1;
-        if (onLoad) {
-          // Call onLoad only once on initial image render
-          onLoad();
-        }
-      }
-      this.setState({
-        camera,
-        zoomLevel: newZoomLevel,
-        hasBeenLoadedOnce: true,
-        isHDActivating,
-        isHDAvailable,
-        isHDActive
-      });
-    });
-    _defineProperty(this, "onResize", () => {
-      const {
-        camera
-      } = this.state;
-      if (!this.wrapper || !camera) {
-        return;
-      }
-      const oldZoomLevel = this.state.zoomLevel;
-      const newViewport = clientRectangle(this.wrapper);
-      const newCamera = camera.resizedViewport(newViewport);
-      const newZoomLevel = zoomLevelAfterResize(newCamera, camera, oldZoomLevel);
-      this.setState({
-        camera: newCamera,
-        zoomLevel: newZoomLevel
-      });
-    });
-    _defineProperty(this, "onZoomChange", nextZoomLevel => {
-      const {
-        camera
-      } = this.state;
-      const {
-        wrapper
-      } = this;
-      if (!wrapper || !camera) {
-        return;
-      }
-      const {
-        scrollLeft,
-        scrollTop
-      } = wrapper;
-      const prevOffset = new Vector2(scrollLeft, scrollTop);
-      const {
-        zoomLevel: prevZoomLevel,
-        isHDActive: prevIsHDActive,
-        isHDActivating: prevIsHDActivating
-      } = this.state;
-      const isHDActive = prevIsHDActive || nextZoomLevel.value >= 1;
-      const isHDActivating = prevIsHDActivating || !prevIsHDActive && isHDActive;
-      this.setState({
-        zoomLevel: nextZoomLevel,
-        isHDActive,
-        isHDActivating
-      }, () => {
-        const {
-          x,
-          y
-        } = camera.scaledOffset(prevOffset, prevZoomLevel.value, nextZoomLevel.value);
-        wrapper.scrollLeft = x;
-        wrapper.scrollTop = y;
-      });
-    });
-    _defineProperty(this, "startDragging", ev => {
-      // stopping propagation to prevent media viewer from closing
-      // when clicking on the image
-      ev.stopPropagation();
-      ev.preventDefault();
-      this.setState({
-        isDragging: true,
-        cursorPos: new Vector2(ev.screenX, ev.screenY)
-      });
-    });
-    _defineProperty(this, "stopDragging", ev => {
-      ev.preventDefault();
-      this.setState({
-        isDragging: false
-      });
-    });
-    _defineProperty(this, "panImage", ev => {
-      if (this.state.isDragging && this.wrapper) {
-        const cursorPos = new Vector2(ev.screenX, ev.screenY);
-        const delta = this.state.cursorPos.sub(cursorPos);
-        this.setState({
-          cursorPos
-        });
-        this.wrapper.scrollLeft += delta.x;
-        this.wrapper.scrollTop += delta.y;
-      }
-    });
-  }
-  componentDidMount() {
-    this.state = initialState;
-    window.addEventListener('resize', this.onResize);
-    document.addEventListener('mousemove', this.panImage);
-    document.addEventListener('mouseup', this.stopDragging);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-    document.removeEventListener('mousemove', this.panImage);
-    document.removeEventListener('mouseup', this.stopDragging);
-  }
-  renderHDIndicator() {
-    const {
-      isHDActivating,
-      isHDAvailable,
-      isHDActive
-    } = this.state;
-    if (!isHDAvailable) {
-      return null;
-    }
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(HDIconGroupWrapper, {
-        className: hideControlsClassName
-      }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
-        appearance: "invert"
-      }) : undefined, isHDActive ? /*#__PURE__*/React.createElement(VideoHdFilledIcon, {
-        label: "hd active"
-      }) : /*#__PURE__*/React.createElement(VideoHdIcon, {
-        label: "hd"
-      }))
-    );
-  }
-  render() {
-    const {
-      src,
-      originalBinaryImageSrc,
-      orientation,
-      onError
-    } = this.props;
-    const {
-      zoomLevel,
-      isHDAvailable,
-      isHDActive,
-      camera,
-      isDragging
-    } = this.state;
-    const canDrag = camera && zoomLevel.value > camera.scaleToFit || false;
-    // We use style attr instead of SC prop for perf reasons
-    const imgStyle = camera && camera.scaledImg(zoomLevel.value) || {
-      visibility: 'hidden'
-    };
-    // When image loads it does two things at the same time 1) it renders itself in the browser 2) triggers onLoad
-    // visibility: 'hidden' is here to prevent image rendering on the screen (with 100%) before next
-    // react re-render when we have `camera` and can control it's zoom level.
-    // overflow: 'hidden' is here to prevent scroll going wild while image is rendered in visibility: 'hidden'
-    // We can't use display: none or not render image, because we do need `onLoad` to trigger and read it's dimensions
-    const wrapperStyleOverride = camera ? {} : {
-      overflow: 'hidden'
-    };
-    if (orientation) {
-      imgStyle.transform = getCssFromImageOrientation(orientation);
-    }
-    const srcToDisplay = isHDAvailable && isHDActive && originalBinaryImageSrc ? originalBinaryImageSrc : src;
-    return /*#__PURE__*/React.createElement(ImageWrapper, {
-      "data-testid": "media-viewer-image-content",
-      onClick: this.onImageClicked,
-      ref: this.saveWrapperRef
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: wrapperStyleOverride
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "media-viewer-image-content"
-    }, /*#__PURE__*/React.createElement(Img, {
-      "data-testid": "media-viewer-image",
-      canDrag: canDrag,
-      isDragging: isDragging,
-      src: srcToDisplay,
-      alt: this.props.alt
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: imgStyle,
-      onLoad: this.onImgLoad,
-      onError: onError,
-      onMouseDown: this.startDragging,
-      shouldPixelate: zoomLevel.value > 1
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "media-viewer-image"
-    }), /*#__PURE__*/React.createElement(BaselineExtend, null), /*#__PURE__*/React.createElement(ZoomControls, {
-      zoomLevel: zoomLevel,
-      onChange: this.onZoomChange
-    }, this.renderHDIndicator()));
-  }
-}
+import { InteractiveImgComponent } from './interactive-img-component';
 export const InteractiveImg = withAnalyticsEvents({
   onBlanketClicked: createAnalyticsEvent => {
     const event = createAnalyticsEvent(createClosedEvent('blanket'));

package/dist/es2019/viewers/image/zoom-level-after-resize.js

@@ -0,0 +1,6 @@
+import { ZoomLevel } from '../../domain/zoomLevel';
+export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
+  const isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
+  const zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
+  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
+}

package/dist/es2019/viewers/svg/clientRectangle.js

@@ -0,0 +1,8 @@
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+export const clientRectangle = el => {
+  const {
+    clientWidth,
+    clientHeight
+  } = el;
+  return new Rectangle(clientWidth, clientHeight);
+};

package/dist/es2019/viewers/svg/index.js

@@ -1,19 +1,21 @@
 import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useIntl } from 'react-intl';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+import MediaSvg from '@atlaskit/media-svg/media-svg';
 import { Camera } from '@atlaskit/media-ui/camera/camera';
 import { messages } from '@atlaskit/media-ui/messages';
 import { Vector2 } from '@atlaskit/media-ui/vector2';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { BaselineExtend } from '../../styleWrappers';
+import { MediaViewerError } from '../../MediaViewerError';
+import { createClosedEvent } from '../../analytics/events/ui/closed';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { BaselineExtend } from '../../styleWrappers';
 import { ZoomControls } from '../../zoomControls';
-import { createClosedEvent } from '../../analytics/events/ui/closed';
-import MediaSvg from '@atlaskit/media-svg/media-svg';
-import { MediaViewerError } from '../../errors';
-import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
 import { ImageWrapper } from './ImageWrapper';
+import { clientRectangle } from './clientRectangle';
 import { getErrorReason } from './errors';
-import { useIntl } from 'react-intl';
+import { naturalSizeRectangle } from './naturalSizeRectangle';
+import { zoomLevelAfterResize } from './zoomLevelAfterResize';
 const SvgViewerBase = ({
   identifier,
   onLoad,

package/dist/es2019/viewers/svg/naturalSizeRectangle.js

@@ -0,0 +1,12 @@
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+export const naturalSizeRectangle = el => {
+  // Firefox & Safari can't always read the "natural" dimensions correctly.
+  // When these are undefined or zero, we replace them with the rendered values
+  const {
+    naturalWidth,
+    naturalHeight,
+    width,
+    height
+  } = el;
+  return new Rectangle(naturalWidth || width, naturalHeight || height);
+};

package/dist/es2019/viewers/svg/zoomLevelAfterResize.js

@@ -0,0 +1,6 @@
+import { ZoomLevel } from '../../domain/zoomLevel';
+export function zoomLevelAfterResize(newCamera, oldCamera, oldZoomLevel) {
+  const isImgScaledToFit = oldZoomLevel.value === oldCamera.scaleDownToFit;
+  const zoomLevelToRefit = new ZoomLevel(newCamera.scaleDownToFit);
+  return isImgScaledToFit ? zoomLevelToRefit : oldZoomLevel;
+}

package/dist/es2019/viewers/video.js

@@ -3,13 +3,14 @@ import React from 'react';
 import { getArtifactUrl, globalMediaEventEmitter, isFileIdentifier } from '@atlaskit/media-client';
 import { CustomMediaPlayer } from '@atlaskit/media-ui/customMediaPlayer';
 import { MediaPlayer } from '@atlaskit/media-ui/mediaPlayer';
-import { Outcome } from '../domain';
-import { buildVideoErrorDiagnostics, MediaViewerError } from '../errors';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { MediaViewerError } from '../MediaViewerError';
+import { buildVideoErrorDiagnostics } from '../buildVideoErrorDiagnostics';
+import { Outcome } from '../domain/outcome';
 import { Video, CustomVideoPlayerWrapper } from '../styleWrappers';
+import { getObjectUrlFromFileState } from '../utils/getObjectUrlFromFileState';
 import { isIE } from '../utils/isIE';
 import { BaseViewer } from './base-viewer';
-import { getObjectUrlFromFileState } from '../utils/getObjectUrlFromFileState';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 const hdArtifact = 'video_1280.mp4';
 const sdArtifact = 'video_640.mp4';
 export class VideoViewer extends BaseViewer {

package/dist/es2019/zoomControls.js

@@ -1,17 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
+import { injectIntl } from 'react-intl';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import ZoomInIcon from '@atlaskit/icon/core/zoom-in';
+import ZoomOutIcon from '@atlaskit/icon/core/zoom-out';
 import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
 import MediaButton from '@atlaskit/media-ui/MediaButton';
-import ZoomOutIcon from '@atlaskit/icon/core/zoom-out';
-import ZoomInIcon from '@atlaskit/icon/core/zoom-in';
-import { ZoomWrapper, ZoomCenterControls, ZoomRightControls, ZoomLevelIndicator } from './styleWrappers';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { fireAnalytics } from './analytics/';
+import { messages } from '@atlaskit/media-ui/messages';
 import { createZoomInButtonClickEvent } from './analytics/events/ui/zoomInButtonClicked';
 import { createZoomOutButtonClickedEvent } from './analytics/events/ui/zoomOutButtonClicked';
-import { injectIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui/messages';
+import { fireAnalytics } from './analytics/fireAnalytics';
+import { ZoomWrapper, ZoomCenterControls, ZoomRightControls, ZoomLevelIndicator } from './styleWrappers';
 export class ZoomControlsBase extends Component {
   constructor(...args) {
     super(...args);

package/dist/esm/ArchiveViewerError.js

@@ -0,0 +1,21 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { MediaViewerError } from './MediaViewerError';
+export var ArchiveViewerError = /*#__PURE__*/function (_MediaViewerError) {
+  function ArchiveViewerError(primaryReason, secondaryError, zipEntry) {
+    var _this;
+    _classCallCheck(this, ArchiveViewerError);
+    _this = _callSuper(this, ArchiveViewerError, [primaryReason, secondaryError]);
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    _this.zipEntry = zipEntry;
+    return _this;
+  }
+  _inherits(ArchiveViewerError, _MediaViewerError);
+  return _createClass(ArchiveViewerError);
+}(MediaViewerError);

package/dist/esm/DownloadButton.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["analyticspayload", "onClick", "tooltip"];
+import React, { useCallback } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import MediaButton from '@atlaskit/media-ui/MediaButton';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+import { fireAnalytics } from './analytics/fireAnalytics';
+import { noop } from './noop';
+export function DownloadButton(_ref) {
+  var analyticspayload = _ref.analyticspayload,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    tooltip = _ref.tooltip,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var onClick = useCallback(function (event, analyticsEvent) {
+    fireAnalytics(analyticspayload, createAnalyticsEvent);
+    providedOnClick(event, analyticsEvent);
+  }, [analyticspayload, providedOnClick, createAnalyticsEvent]);
+  var downloadButton = /*#__PURE__*/React.createElement(MediaButton, _extends({}, rest, {
+    onClick: onClick
+  }));
+  return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltip,
+    position: "bottom",
+    tag: "span"
+  }, downloadButton) : downloadButton;
+}

package/dist/esm/DownloadButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/DownloadItem.js

@@ -0,0 +1,57 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { isErrorFileState } from '@atlaskit/media-client';
+import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
+import { createItemDownloader } from './createItemDownloader';
+import { DownloadButton } from './DownloadButton';
+import { useDownloadButtonDisabledProps } from './useDownloadButtonDisabledProps';
+export var DownloadItem = function DownloadItem(_ref) {
+  var testId = _ref.testId,
+    fileState = _ref.fileState,
+    mediaClient = _ref.mediaClient,
+    collectionName = _ref.collectionName,
+    appearance = _ref.appearance,
+    analyticspayload = _ref.analyticspayload,
+    traceContext = _ref.traceContext,
+    iconBefore = _ref.iconBefore,
+    children = _ref.children,
+    fallbackMediaName = _ref.fallbackMediaName;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAbuseModalOpen = _useState2[0],
+    setIsAbuseModalOpen = _useState2[1];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useDownloadButtonDis = useDownloadButtonDisabledProps(mediaClient),
+    isDisabled = _useDownloadButtonDis.isDisabled,
+    tooltip = _useDownloadButtonDis.tooltip;
+  var shouldRenderAbuseModal = !isErrorFileState(fileState) && !!fileState.abuseClassification;
+  var itemDownloader = createItemDownloader(fileState, mediaClient, {
+    collectionName: collectionName,
+    createAnalyticsEvent: createAnalyticsEvent,
+    traceContext: traceContext,
+    fallbackMediaName: fallbackMediaName
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderAbuseModal && /*#__PURE__*/React.createElement(AbuseModal, {
+    isOpen: isAbuseModalOpen,
+    onConfirm: itemDownloader,
+    onClose: function onClose() {
+      return setIsAbuseModalOpen(false);
+    }
+  }), /*#__PURE__*/React.createElement(DownloadButton, {
+    testId: testId,
+    appearance: appearance,
+    analyticspayload: analyticspayload,
+    isDisabled: isDisabled,
+    tooltip: tooltip,
+    onClick: function onClick() {
+      if (shouldRenderAbuseModal) {
+        setIsAbuseModalOpen(true);
+      } else {
+        itemDownloader();
+      }
+    },
+    iconBefore: iconBefore
+  }, children));
+};

package/dist/esm/DownloadItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ErrorViewDownloadButton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { messages } from '@atlaskit/media-ui/messages';
+import { DownloadItem } from './DownloadItem';
+import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/events/ui/failedPreviewDownloadButtonClicked';
+import { DownloadButtonWrapper } from './styleWrappers';
+export var ErrorViewDownloadButton = function ErrorViewDownloadButton(_ref) {
+  var fileState = _ref.fileState,
+    mediaClient = _ref.mediaClient,
+    error = _ref.error,
+    traceContext = _ref.traceContext,
+    collectionName = _ref.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)));
+};