@atlaskit/media-viewer 52.4.37 → 52.5.0

package/dist/esm/styleWrappers.js

@@ -1,135 +1,411 @@
+/* styleWrappers.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
-import { Blanket as CompiledBlanket, HeaderWrapper as CompiledHeaderWrapper, ListWrapper as CompiledListWrapper, ArrowsWrapper as CompiledArrowsWrapper, CloseButtonWrapper as CompiledCloseButtonWrapper, ContentWrapper as CompiledContentWrapper, ZoomWrapper as CompiledZoomWrapper, ZoomCenterControls as CompiledZoomCenterControls, ZoomRightControls as CompiledZoomRightControls, ZoomLevelIndicator as CompiledZoomLevelIndicator, HDIconGroupWrapper as CompiledHDIconGroupWrapper, ErrorMessageWrapper as CompiledErrorMessageWrapper, ErrorImage as CompiledErrorImage, Video as CompiledVideo, PDFWrapper as CompiledPDFWrapper, Arrow as CompiledArrow, LeftWrapper as CompiledLeftWrapper, RightWrapper as CompiledRightWrapper, Header as CompiledHeader, LeftHeader as CompiledLeftHeader, ImageWrapper as CompiledImageWrapper, BaselineExtend as CompiledBaselineExtend, Img as CompiledImg, MedatadataTextWrapper as CompiledMedatadataTextWrapper, MetadataWrapper as CompiledMetadataWrapper, MetadataFileName as CompiledMetadataFileName, MetadataSubText as CompiledMetadataSubText, MetadataIconWrapper as CompiledMetadataIconWrapper, RightHeader as CompiledRightHeader, CustomAudioPlayerWrapper as CompiledCustomAudioPlayerWrapper, AudioPlayer as CompiledAudioPlayer, Audio as CompiledAudio, AudioCover as CompiledAudioCover, DefaultCoverWrapper as CompiledDefaultCoverWrapper, DownloadButtonWrapper as CompiledDownloadButtonWrapper, CustomVideoPlayerWrapper as CompiledCustomVideoPlayerWrapper, SidebarWrapper as CompiledSidebarWrapper, SpinnerWrapper as CompiledSpinnerWrapper, FormattedMessageWrapper as CompiledFormattedMessageWrapper } from './styleWrappers-compiled';
+import "./styleWrappers.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+
+import { forwardRef, useMemo } from 'react';
+import { TouchScrollable } from 'react-scrolllock';
+import { useMergeRefs } from 'use-callback-ref';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Box, xcss } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
+var blanketStyles = null;
+var headerWrapperStyles = null;
+var archiveHeaderWrapperStyles = null;
+var listWrapperStyles = null;
+var closeButtonWrapperStyles = null;
+var contentWrapperStyles = null;
+var contentWrapperStyleWithSideBar = null;
+var zoomWrapperStyles = null;
+var zoomCenterControlsStyles = null;
+var zoomRightControlsStyles = null;
+var zoomLevelIndicatorStyles = null;
+var hdIconGroupWrapperStyles = null;
+var errorMessageWrapperStyles = null;
+var errorImageStyles = null;
+var videoStyles = null;
+var pdfWrapperStyles = null;
+var arrowStyles = null;
+var arrowWrapperStyles = null;
+var arrowsWrapperStyles = null;
+var leftWrapperStyles = null;
+var leftWrapperStylesWithSideBar = null;
+var rightWrapperStyles = null;
+var headerStyles = null;
+var headerStyleWithSideBar = null;
+var leftHeaderStyles = null;
+var imageWrapperStyles = null;
+var baselineExtendStyles = null;
+var imgStyles = null;
+var pixelatedImgStyles = null;
+var medatadataTextWrapperStyles = null;
+var metadataWrapperStyles = null;
+var metadataFileNameStyles = null;
+var metadataSubTextStyles = null;
+var metadataIconWrapperStyles = xcss({
+  paddingTop: 'space.050',
+  paddingRight: 'space.150'
+});
+var rightHeaderStyles = null;
+var customAudioPlayerWrapperStyles = null;
+var audioPlayerStyles = null;
+var audioStyles = null;
+var audioCoverStyles = null;
+var defaultCoverWrapperStyles = null;
+var downloadButtonWrapperStyles = null;
+var customVideoPlayerWrapperStyles = null;
+var sidebarWrapperStyles = null;
+var spinnerWrapperStyles = null;
+var formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
-export var Blanket = function Blanket(props) {
-  return /*#__PURE__*/React.createElement(CompiledBlanket, props);
-};
-export var HeaderWrapper = function HeaderWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledHeaderWrapper, props);
+export var Blanket = function Blanket(_ref) {
+  var datatestId = _ref['data-testid'],
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "media.media-viewer.file.name"
+  }, children);
+};
+export var HeaderWrapper = function HeaderWrapper(_ref2) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_11q75a80 _kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1uc6 _tzy41w01 _ouxlidpf _syaz1poe _k48p1wq8 _ca0q1ejb _n3td1ejb _19bv1ejb _u5f31ejb _vchhusvi _lcxvglyw _1pby3tda", isArchiveSideBarVisible && "_ouxl1klg", className])
+  }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-export var ListWrapper = function ListWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledListWrapper, props);
+export var ListWrapper = function ListWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-export var ArrowsWrapper = function ArrowsWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledArrowsWrapper, props);
-};
-export var CloseButtonWrapper = function CloseButtonWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledCloseButtonWrapper, props);
-};
-export var ContentWrapper = function ContentWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledContentWrapper, props);
-};
-export var ZoomWrapper = function ZoomWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledZoomWrapper, props);
-};
-export var ZoomCenterControls = function ZoomCenterControls(props) {
-  return /*#__PURE__*/React.createElement(CompiledZoomCenterControls, props);
-};
-export var ZoomRightControls = function ZoomRightControls(props) {
-  return /*#__PURE__*/React.createElement(CompiledZoomRightControls, props);
-};
-export var ZoomLevelIndicator = function ZoomLevelIndicator(props) {
-  return /*#__PURE__*/React.createElement(CompiledZoomLevelIndicator, _extends({}, props, {
-    "data-testid": "zoom-level-indicator"
-  }));
-};
-export var HDIconGroupWrapper = function HDIconGroupWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledHDIconGroupWrapper, props);
-};
-export var ErrorMessageWrapper = function ErrorMessageWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledErrorMessageWrapper, props);
-};
-export var ErrorImage = function ErrorImage(props) {
-  return /*#__PURE__*/React.createElement(CompiledErrorImage, props);
-};
-export var Video = function Video(props) {
-  return /*#__PURE__*/React.createElement(CompiledVideo, props);
-};
+export var ArrowsWrapper = function ArrowsWrapper(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "media-viewer-navigation",
+    className: ax(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
+  }, children);
+};
+export var CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
+  var className = _ref5.className,
+    children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
+  }, children);
+};
+export var ContentWrapper = function ContentWrapper(_ref6) {
+  var isSidebarVisible = _ref6.isSidebarVisible,
+    children = _ref6.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
+  }, children);
+};
+export var ZoomWrapper = function ZoomWrapper(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0qymxu _n3td1yov _u5f31ejb _19bv1ejb", className])
+  }, children);
+};
+export var ZoomCenterControls = function ZoomCenterControls(_ref8) {
+  var children = _ref8.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
+  }, children);
+};
+export var ZoomRightControls = function ZoomRightControls(_ref9) {
+  var children = _ref9.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
+  }, children);
+};
+export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref0) {
+  var children = _ref0.children;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "zoom-level-indicator",
+    className: ax(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
+  }, children);
+};
+export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
+  }, children);
+};
+export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref10) {
+  var datatestId = _ref10['data-testid'],
+    children = _ref10.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: ax(["_y3gn1h6o _syaz1poe _zcqx1osq"])
+  }, children);
+};
+export var ErrorImage = function ErrorImage(_ref11) {
+  var src = _ref11.src,
+    alt = _ref11.alt;
+  return /*#__PURE__*/React.createElement("img", {
+    alt: alt,
+    src: src,
+    className: ax(["_otyr1yov _uiztglyw"])
+  });
+};
+export var Video = function Video(_ref12) {
+  var autoPlay = _ref12.autoPlay,
+    controls = _ref12.controls,
+    src = _ref12.src;
+  return /*#__PURE__*/React.createElement("video", {
+    autoPlay: autoPlay,
+    controls: controls,
+    src: src,
+    className: ax(["_1bsbauwl _4t3i1kxc"])
+  });
+};
+var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref13, ref) {
+  var innerRef = _ref13.innerRef,
+    datatestId = _ref13['data-testid'],
+    children = _ref13.children;
+  var bodyRef = useMergeRefs([ref, innerRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: bodyRef,
+    "data-testid": datatestId,
+    className: ax(["_1reo1wug _18m91wug _kqswstnw _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _1l1f1n9t"])
+  }, children);
+});
 export var PDFWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(CompiledPDFWrapper, _extends({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(PDFWrapperBody, _extends({
+    innerRef: ref
+  }, props)));
 });
-export var Arrow = function Arrow(props) {
-  return /*#__PURE__*/React.createElement(CompiledArrow, props);
-};
-export var LeftWrapper = function LeftWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledLeftWrapper, props);
-};
-export var RightWrapper = function RightWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledRightWrapper, props);
+export var Arrow = function Arrow(_ref14) {
+  var className = _ref14.className,
+    children = _ref14.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
+  }, children);
+};
+export var LeftWrapper = function LeftWrapper(_ref15) {
+  var children = _ref15.children,
+    isArchiveSideBarVisible = _ref15.isArchiveSideBarVisible;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
+  }, children);
+};
+export var RightWrapper = function RightWrapper(_ref16) {
+  var children = _ref16.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
+  }, children);
 };
 
 // header.tsx
 
-export var Header = function Header(props) {
-  return /*#__PURE__*/React.createElement(CompiledHeader, props);
-};
-export var LeftHeader = function LeftHeader(props) {
-  return /*#__PURE__*/React.createElement(CompiledLeftHeader, props);
-};
-export var ImageWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(CompiledImageWrapper, _extends({
-    ref: ref
-  }, props));
+export var Header = function Header(_ref17) {
+  var children = _ref17.children,
+    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible,
+    className = _ref17.className;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
+  }, children);
+};
+export var LeftHeader = function LeftHeader(_ref18) {
+  var children = _ref18.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
+  }, children);
+};
+export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref19, ref) {
+  var children = _ref19.children,
+    datatestId = _ref19['data-testid'],
+    onClick = _ref19.onClick,
+    style = _ref19.style,
+    className = _ref19.className;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    onClick: onClick,
+    ref: ref,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children);
 });
 export var BaselineExtend = function BaselineExtend() {
-  return /*#__PURE__*/React.createElement(CompiledBaselineExtend, null);
-};
-export var Img = function Img(props) {
-  return /*#__PURE__*/React.createElement(CompiledImg, props);
-};
-export var MedatadataTextWrapper = function MedatadataTextWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledMedatadataTextWrapper, props);
-};
-export var MetadataWrapper = function MetadataWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledMetadataWrapper, props);
-};
-export var MetadataFileName = function MetadataFileName(props) {
-  return /*#__PURE__*/React.createElement(CompiledMetadataFileName, props);
-};
-export var MetadataSubText = function MetadataSubText(props) {
-  return /*#__PURE__*/React.createElement(CompiledMetadataSubText, props);
-};
-export var MetadataIconWrapper = function MetadataIconWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledMetadataIconWrapper, props);
-};
-export var RightHeader = function RightHeader(props) {
-  return /*#__PURE__*/React.createElement(CompiledRightHeader, props);
-};
-export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledCustomAudioPlayerWrapper, props);
-};
-export var AudioPlayer = function AudioPlayer(props) {
-  return /*#__PURE__*/React.createElement(CompiledAudioPlayer, props);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
+  });
+};
+export var Img = function Img(_ref20) {
+  var canDrag = _ref20.canDrag,
+    isDragging = _ref20.isDragging,
+    shouldPixelate = _ref20.shouldPixelate,
+    datatestId = _ref20['data-testid'],
+    src = _ref20.src,
+    style = _ref20.style,
+    onLoad = _ref20.onLoad,
+    onError = _ref20.onError,
+    onMouseDown = _ref20.onMouseDown,
+    alt = _ref20.alt,
+    className = _ref20.className;
+  var cursor = useMemo(function () {
+    if (canDrag && isDragging) {
+      return 'grabbing';
+    } else if (canDrag) {
+      return 'grab';
+    } else {
+      return 'auto';
+    }
+  }, [canDrag, isDragging]);
+  return /*#__PURE__*/React.createElement("img", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
+    alt: alt,
+    "data-testid": datatestId,
+    src: src
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: _objectSpread({
+      cursor: cursor
+    }, style),
+    onLoad: onLoad,
+    onError: onError,
+    onMouseDown: onMouseDown
+  });
+};
+export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
+  var children = _ref21.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq"])
+  }, children);
+};
+export var MetadataWrapper = function MetadataWrapper(_ref22) {
+  var children = _ref22.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw"])
+  }, children);
+};
+export var MetadataFileName = function MetadataFileName(_ref23) {
+  var datatestId = _ref23['data-testid'],
+    children = _ref23.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h1",
+    size: "medium",
+    id: "media.media-viewer.file.name",
+    testId: datatestId
+  }, children));
+};
+export var MetadataSubText = function MetadataSubText(_ref24) {
+  var datatestId = _ref24['data-testid'],
+    children = _ref24.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
+  }, children);
+};
+export var MetadataIconWrapper = function MetadataIconWrapper(_ref25) {
+  var children = _ref25.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: metadataIconWrapperStyles
+  }, children);
+};
+export var RightHeader = function RightHeader(_ref26) {
+  var children = _ref26.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
+  }, children);
+};
+export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref27) {
+  var children = _ref27.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
+  }, children);
+};
+export var AudioPlayer = function AudioPlayer(_ref28) {
+  var datatestId = _ref28['data-testid'],
+    children = _ref28.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: ax(["_2rkofajl _1reo15vq _18m915vq _bfhk1tzm _4cvr1h6o _1bah1h6o _1bsb1kdj _4t3i1kdj _1e0c1txw _2lx21bp4 _kqswh2mm"])
+  }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-export var Audio = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(CompiledAudio, _extends({
-    ref: ref
-  }, props));
+export var Audio = /*#__PURE__*/forwardRef(function (_ref29, ref) {
+  var autoPlay = _ref29.autoPlay,
+    controls = _ref29.controls,
+    src = _ref29.src,
+    preload = _ref29.preload;
+  return /*#__PURE__*/React.createElement("audio", {
+    ref: ref,
+    autoPlay: autoPlay,
+    controls: controls,
+    src: src,
+    preload: preload,
+    className: ax(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
+  });
 });
-export var AudioCover = function AudioCover(props) {
-  return /*#__PURE__*/React.createElement(CompiledAudioCover, props);
-};
-export var DefaultCoverWrapper = function DefaultCoverWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledDefaultCoverWrapper, props);
-};
-export var DownloadButtonWrapper = function DownloadButtonWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledDownloadButtonWrapper, props);
-};
-export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledCustomVideoPlayerWrapper, props);
-};
-export var SidebarWrapper = function SidebarWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledSidebarWrapper, props);
-};
-export var SpinnerWrapper = function SpinnerWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledSpinnerWrapper, props);
-};
-export var FormattedMessageWrapper = function FormattedMessageWrapper(props) {
-  return /*#__PURE__*/React.createElement(CompiledFormattedMessageWrapper, props);
+export var AudioCover = function AudioCover(_ref30) {
+  var src = _ref30.src,
+    alt = _ref30.alt;
+  return /*#__PURE__*/React.createElement("img", {
+    alt: alt,
+    src: src,
+    className: ax(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
+  });
+};
+export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref31) {
+  var children = _ref31.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
+  }, children);
+};
+export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref32) {
+  var children = _ref32.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
+  }, children);
+};
+export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref33) {
+  var datatestId = _ref33['data-testid'],
+    children = _ref33.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: ax(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
+  }, children);
+};
+export var SidebarWrapper = function SidebarWrapper(_ref34) {
+  var datatestId = _ref34['data-testid'],
+    children = _ref34.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhky0hh _syaz1vvf"])
+  }, children);
+};
+export var SpinnerWrapper = function SpinnerWrapper(_ref35) {
+  var children = _ref35.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
+  }, children);
+};
+export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref36) {
+  var children = _ref36.children;
+  return /*#__PURE__*/React.createElement("span", null, children);
 };

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

@@ -23,7 +23,6 @@ import AudioIcon from '@atlaskit/icon/core/migration/audio--media-services-audio
 import ErrorMessage from '../../errorMessage';
 import { BaseViewer } from '../base-viewer';
 import { InteractiveImg } from '../image/interactive-img';
-import { PDFRenderer } from '../doc/pdfRenderer';
 import { ArchiveItemViewerWrapper, ArchiveLayout, ArchiveViewerWrapper } from './styleWrappers';
 import ArchiveSidebarRenderer from './archive-sidebar-renderer';
 import { getMediaTypeFromFilename, getMimeTypeFromFilename, rejectAfter } from '../../utils';
@@ -37,6 +36,7 @@ import { createZipEntryLoadFailedEvent } from '../../analytics/events/operationa
 import { CodeViewRenderer } from '../codeViewer/codeViewerRenderer';
 import { DEFAULT_LANGUAGE } from '../codeViewer/util';
 import { MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER } from '../../item-viewer';
+import { NativePdfViewer } from './nativePdfViewer';
 export var getArchiveEntriesFromFileState = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileState, mediaClient, collectionName) {
     var url, reader, archive;
@@ -84,7 +84,7 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
     });
     _defineProperty(_this, "onSelectedArchiveEntryChange", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(selectedArchiveEntry) {
-        var src, codeViewerSrc, isCodeMimeType, blob;
+        var src, codeViewerSrc, mimeType, isCodeMimeType, blob, blobWithMimeType;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -96,37 +96,41 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
               });
               src = '';
               codeViewerSrc = '';
-              isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, getMimeTypeFromFilename(selectedArchiveEntry.name));
+              mimeType = getMimeTypeFromFilename(selectedArchiveEntry.name);
+              isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, mimeType);
               if (selectedArchiveEntry.isDirectory) {
-                _context2.next = 19;
+                _context2.next = 21;
                 break;
               }
-              _context2.prev = 5;
-              _context2.next = 8;
+              _context2.prev = 6;
+              _context2.next = 9;
               return rejectAfter(function () {
                 return selectedArchiveEntry.blob();
               }, 10000);
-            case 8:
+            case 9:
               blob = _context2.sent;
-              src = URL.createObjectURL(blob);
+              blobWithMimeType = new Blob([blob], {
+                type: mimeType
+              });
+              src = URL.createObjectURL(blobWithMimeType);
               if (!isCodeMimeType) {
-                _context2.next = 14;
+                _context2.next = 16;
                 break;
               }
-              _context2.next = 13;
+              _context2.next = 15;
               return rejectAfter(function () {
                 return blob.text();
               });
-            case 13:
+            case 15:
               codeViewerSrc = _context2.sent;
-            case 14:
-              _context2.next = 19;
-              break;
             case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](5);
+              _context2.next = 21;
+              break;
+            case 18:
+              _context2.prev = 18;
+              _context2.t0 = _context2["catch"](6);
               return _context2.abrupt("return", _this.onError(new ArchiveViewerError(_context2.t0.message === ENCRYPTED_ENTRY_ERROR_MESSAGE ? 'archiveviewer-encrypted-entry' : 'archiveviewer-create-url', _context2.t0), selectedArchiveEntry));
-            case 19:
+            case 21:
               _this.setState({
                 content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
                   selectedArchiveEntry: selectedArchiveEntry,
@@ -139,11 +143,11 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
                   hasLoadedEntries: true
                 }))
               });
-            case 20:
+            case 22:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[5, 16]]);
+        }, _callee2, null, [[6, 18]]);
       }));
       return function (_x4) {
         return _ref2.apply(this, arguments);
@@ -350,12 +354,13 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
               onError: this.onViewerError('archiveviewer-audioviewer-onerror', selectedArchiveEntry)
             }))));
           case 'doc':
-            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(PDFRenderer, {
-              item: item,
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, {
+              fullHeight: true
+            }, /*#__PURE__*/React.createElement(NativePdfViewer, {
               src: src,
               onSuccess: this.onViewerLoad(selectedArchiveEntry),
               onError: this.onViewerError('archiveviewer-docviewer-onerror', selectedArchiveEntry)
-            }));
+            }, this.renderPreviewError(new ArchiveViewerError('archiveviewer-docviewer-onerror'), selectedArchiveEntry, false)));
           case 'archive':
             //BMPT-388 - Add illustration here, currently empty viewer
             return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null);
@@ -367,10 +372,13 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
   }, {
     key: "renderPreviewError",
     value: function renderPreviewError(error, entry) {
+      var shouldFireAnalytics = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var _this$props3 = this.props,
         item = _this$props3.item,
         createAnalyticsEvent = _this$props3.createAnalyticsEvent;
-      fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
+      if (shouldFireAnalytics) {
+        fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
+      }
       return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: item.id,
         fileState: item,