@atlaskit/media-viewer 46.0.0 → 46.2.0

package/dist/esm/collection.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

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

@@ -7,9 +7,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/download.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["analyticspayload", "onClick"];
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { isErrorFileState, isExternalImageIdentifier } from '@atlaskit/media-client';
 import { MediaButton, messages } from '@atlaskit/media-ui';
@@ -19,7 +20,7 @@ export function DownloadButton(_ref) {
   var analyticspayload = _ref.analyticspayload,
       _ref$onClick = _ref.onClick,
       providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
-      rest = _objectWithoutProperties(_ref, ["analyticspayload", "onClick"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var onClick = useCallback(function (event, analyticsEvent) {
     var clone = analyticsEvent.clone();

package/dist/esm/errorMessage.js

@@ -1,9 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -18,6 +23,7 @@ import { fireAnalytics } from './analytics';
 import { getPrimaryErrorReason, getSecondaryErrorReason } from './errors';
 import { createLoadFailedEvent } from './analytics/events/operational/loadFailed';
 import { createPreviewUnsupportedEvent } from './analytics/events/operational/previewUnsupported';
+import { failMediaFileUfoExperience } from './analytics/ufoExperiences';
 
 var errorLoadingFileImage = function errorLoadingFileImage(formatMessage) {
   return /*#__PURE__*/React.createElement(ErrorImage, {
@@ -74,6 +80,15 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       if (supressAnalytics !== true) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         fireAnalytics(payload, props);
+
+        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+
+        if (Object.keys(rawPayload).includes('status')) {
+          delete rawPayload['status'];
+        }
+
+        var failMediaFileUfoExperiencePayload = rawPayload;
+        failMediaFileUfoExperience(failMediaFileUfoExperiencePayload);
       }
     }
   }, {

package/dist/esm/errors.js

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -9,7 +10,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import { getMediaClientErrorReason, isMediaClientError, isRequestError } from '@atlaskit/media-client';
+import { getMediaClientErrorReason, isMediaClientError, isRequestError, isMediaStoreError } from '@atlaskit/media-client';
 export var MediaViewerError = /*#__PURE__*/function (_Error) {
   _inherits(MediaViewerError, _Error);
 
@@ -33,7 +34,7 @@ export var MediaViewerError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return MediaViewerError;
+  return _createClass(MediaViewerError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 export function isMediaViewerError(err) {
   return err instanceof MediaViewerError;
@@ -55,7 +56,7 @@ export var ArchiveViewerError = /*#__PURE__*/function (_MediaViewerError) {
     return _this2;
   }
 
-  return ArchiveViewerError;
+  return _createClass(ArchiveViewerError);
 }(MediaViewerError);
 export function isArchiveViewerError(err) {
   return err instanceof ArchiveViewerError;
@@ -77,9 +78,19 @@ export function getSecondaryErrorReason(error) {
 }
 export function getErrorDetail(error) {
   // when the secondaryReason is "nativeError" we extract the error message for debugging
-  if (error && isMediaViewerError(error) && getSecondaryErrorReason(error) === 'nativeError') {
-    // pls don't send stack traces, they can get polluted and blow out payload sizes
-    return error.secondaryError && error.secondaryError.message;
+  if (error && isMediaViewerError(error)) {
+    if (getSecondaryErrorReason(error) === 'nativeError') {
+      // pls don't send stack traces, they can get polluted and blow out payload sizes
+      return error.secondaryError && error.secondaryError.message;
+    }
+
+    var _secondaryError = error.secondaryError;
+
+    if (_secondaryError && (isRequestError(_secondaryError) || isMediaStoreError(_secondaryError))) {
+      var _secondaryError$inner;
+
+      return (_secondaryError$inner = _secondaryError.innerError) === null || _secondaryError$inner === void 0 ? void 0 : _secondaryError$inner.message;
+    }
   }
 }
 export function getRequestMetadata(error) {

package/dist/esm/item-viewer.js

@@ -12,15 +12,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
+import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
 import { Outcome } from './domain';
-import { ImageViewer } from './viewers/image';
-import { VideoViewer } from './viewers/video';
-import { DocViewer } from './viewers/doc';
-import { CodeViewer } from './viewers/codeViewer';
 import { Spinner } from './loading';
 import deepEqual from 'deep-equal';
 import ErrorMessage from './errorMessage';
@@ -30,9 +27,59 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createCommencedEvent } from './analytics/events/operational/commenced';
 import { createLoadSucceededEvent } from './analytics/events/operational/loadSucceeded';
 import { fireAnalytics, getFileAttributes } from './analytics';
-import { AudioViewer } from './viewers/audio';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
+var ImageViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/image').then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var VideoViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/video').then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var AudioViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/audio').then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var DocViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/doc').then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
+var CodeViewer = Loadable({
+  loader: function loader() {
+    return import('./viewers/codeViewer').then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+});
 export var isExternalImageItem = function isExternalImageItem(fileItem) {
   return fileItem === 'external-image';
 };
@@ -66,6 +113,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), _this.props);
+          succeedMediaFileUfoExperience(fileAttributes);
         }
       });
     });
@@ -80,6 +128,9 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       fireAnalytics(createLoadSucceededEvent({
         fileId: 'external-image'
       }), _this.props);
+      succeedMediaFileUfoExperience({
+        fileId: 'external-image'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "onExternalImgError", function () {
@@ -288,6 +339,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       var id = identifier.id;
       fireAnalytics(createCommencedEvent(id), this.props);
+      startMediaFileUfoExperience();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName
       }).subscribe({

package/dist/esm/navigation.js

@@ -14,7 +14,7 @@ import ArrowLeftCircleIcon from '@atlaskit/icon/glyph/chevron-left-circle';
 import ArrowRightCircleIcon from '@atlaskit/icon/glyph/chevron-right-circle';
 import { N800 } from '@atlaskit/theme/colors';
 import { hideControlsClassName } from '@atlaskit/media-ui';
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styled';

package/dist/esm/styled.js

@@ -66,7 +66,7 @@ export var CustomAudioPlayerWrapper = styled.div(_templateObject31 || (_template
 export var AudioPlayer = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  align-items: center;\n  justify-content: center;\n  width: 400px;\n  height: 400px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), blanketColor, borderRadius());
 AudioPlayer.displayName = 'AudioPlayer';
 export var Audio = styled.audio(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])));
-export var AudioCover = styled.img(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000000;\n"])));
+export var AudioCover = styled.img(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 export var DefaultCoverWrapper = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > * {\n    transform: scale(2);\n  }\n"])));
 export var DownloadButtonWrapper = styled.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin-top: 28px;\n  text-align: center;\n\n  button {\n    font-weight: bold;\n  }\n"])));
 export var CustomVideoPlayerWrapper = styled.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  video {\n    flex: 1;\n    width: 100vw;\n    height: 100vh;\n    max-height: 100vh;\n  }\n"])));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.0.0",
+	"version": "46.2.0",
 	"sideEffects": false
 }

package/dist/esm/viewers/archiveSidebar/archive-sidebar-folder-entry.js

@@ -13,12 +13,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { ArchiveSidebarFolderWrapper, ArchiveSidebarFileEntryWrapper, ArchiveDownloadButtonWrapper, SidebarItemWrapper } from './styled';
-import { Item } from '@atlaskit/navigation-next';
+import { ButtonItem } from '@atlaskit/side-navigation';
 import Folder24Icon from '@atlaskit/icon-file-type/glyph/folder/24';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { downloadUrl } from '@atlaskit/media-common';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
+import { ArchiveSidebarFolderWrapper, ArchiveSidebarFileEntryWrapper, ArchiveDownloadButtonWrapper, SidebarItemWrapper, itemStyle } from './styled';
 import { getMediaTypeFromFilename, isMacPrivateFile, rejectAfter } from '../../utils';
 export var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
   _inherits(ArchiveSidebarFolderEntry, _React$Component);
@@ -47,14 +47,13 @@ export var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component)
 
       return /*#__PURE__*/React.createElement(ArchiveSidebarFileEntryWrapper, {
         key: entry.name
-      }, /*#__PURE__*/React.createElement(SidebarItemWrapper, null, /*#__PURE__*/React.createElement(Item, {
-        before: function before() {
-          return _this.renderEntryIcon(entry);
-        },
-        text: _this.formatName(root, entry.name),
-        spacing: "compact",
-        onClick: onClick
-      })), entry.isDirectory ? null : _this.renderDownloadButton(entry, root));
+      }, /*#__PURE__*/React.createElement(SidebarItemWrapper, null, /*#__PURE__*/React.createElement(ButtonItem, {
+        iconBefore: _this.renderEntryIcon(entry),
+        onClick: onClick,
+        cssFn: function cssFn() {
+          return itemStyle;
+        }
+      }, _this.formatName(root, entry.name))), entry.isDirectory ? null : _this.renderDownloadButton(entry, root));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderEntryIcon", function (entry) {

package/dist/esm/viewers/archiveSidebar/archive-sidebar-header.js

@@ -12,9 +12,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
-import { Item } from '@atlaskit/navigation-next';
+import { ButtonItem } from '@atlaskit/side-navigation';
 import HomeIcon from '@atlaskit/icon/glyph/home';
 import { getFormattedFolderName } from '../../utils';
+import { itemStyle, SidebarHeaderEntry, SidebarHeaderIcon, SidebarHeaderWrapper } from './styled';
 export var ArchiveSidebarHeader = /*#__PURE__*/function (_React$Component) {
   _inherits(ArchiveSidebarHeader, _React$Component);
 
@@ -48,12 +49,12 @@ export var ArchiveSidebarHeader = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           folderName = _this$props.folderName,
           onHeaderClick = _this$props.onHeaderClick;
-      return /*#__PURE__*/React.createElement(Item, {
-        before: this.getHeaderIcon,
-        text: getFormattedFolderName(folderName),
-        spacing: "compact",
-        onClick: onHeaderClick
-      });
+      return /*#__PURE__*/React.createElement(ButtonItem, {
+        onClick: onHeaderClick,
+        cssFn: function cssFn() {
+          return itemStyle;
+        }
+      }, /*#__PURE__*/React.createElement(SidebarHeaderWrapper, null, /*#__PURE__*/React.createElement(SidebarHeaderIcon, null, this.getHeaderIcon()), /*#__PURE__*/React.createElement(SidebarHeaderEntry, null, getFormattedFolderName(folderName))));
     }
   }]);
 

package/dist/esm/viewers/archiveSidebar/archive-sidebar-renderer.js

@@ -12,15 +12,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { SpinnerWrapper } from '../../styled';
 import { ArchiveSidebar } from './archive-sidebar';
 import { getArchiveEntriesFromFileState } from './archive';
 import { Spinner } from '../../loading';
 import { ArchiveViewerError } from '../../errors';
 import { ArchiveSideBar } from './styled';
-import { ThemeProvider, dark } from '@atlaskit/navigation-next';
 
 var ArchiveSidebarRenderer = /*#__PURE__*/function (_Component) {
   _inherits(ArchiveSidebarRenderer, _Component);
@@ -106,12 +104,7 @@ var ArchiveSidebarRenderer = /*#__PURE__*/function (_Component) {
           isArchiveEntryLoading = _this$props2.isArchiveEntryLoading,
           onSelectedArchiveEntryChange = _this$props2.onSelectedArchiveEntryChange,
           onError = _this$props2.onError;
-      return /*#__PURE__*/React.createElement(ThemeProvider, {
-        theme: {
-          context: 'product',
-          mode: dark
-        }
-      }, status === 'loading' && /*#__PURE__*/React.createElement(ArchiveSideBar, null, /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null))) || /*#__PURE__*/React.createElement(ArchiveSidebar, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, status === 'loading' && /*#__PURE__*/React.createElement(ArchiveSideBar, null, /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null))) || /*#__PURE__*/React.createElement(ArchiveSidebar, {
         entries: entries,
         onEntrySelected: onSelectedArchiveEntryChange,
         onHeaderClicked: onHeaderClicked,

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

@@ -9,9 +9,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -19,10 +19,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { unzip } from 'unzipit';
-import { ArchiveSideBar } from './styled';
+import { ArchiveSideBar, Separator } from './styled';
 import { ArchiveSidebarFolderEntry } from './archive-sidebar-folder-entry';
-import { Separator } from '@atlaskit/navigation-next'; // TODO [BMPT-370] remove usage of navigation-next
-
 import { ArchiveSidebarHeader } from './archive-sidebar-header';
 import { getMediaTypeFromFilename, getFolderParent, extractArchiveFolderName, rejectAfter } from '../../utils';
 export var ArchiveSidebar = /*#__PURE__*/function (_React$Component) {

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

@@ -8,25 +8,25 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
+import { unzip, HTTPRangeReader } from 'unzipit';
+import { FormattedMessage } from 'react-intl-next';
+import { CustomMediaPlayer, messages } from '@atlaskit/media-ui';
 import { Outcome } from '../../domain';
 import { CustomVideoPlayerWrapper, AudioPlayer, CustomAudioPlayerWrapper, DefaultCoverWrapper, blanketColor } from '../../styled';
 import AudioIcon from '@atlaskit/icon/glyph/media-services/audio';
 import ErrorMessage from '../../errorMessage';
 import { BaseViewer } from '../base-viewer';
 import { InteractiveImg } from '../image/interactive-img';
-import { CustomMediaPlayer, messages } from '@atlaskit/media-ui';
 import { PDFRenderer } from '../doc/pdfRenderer';
-import { unzip, HTTPRangeReader } from 'unzipit';
-import { FormattedMessage } from 'react-intl-next';
 import { ArchiveItemViewerWrapper, ArchiveLayout, ArchiveViewerWrapper } from './styled';
 import ArchiveSidebarRenderer from './archive-sidebar-renderer';
 import { getMediaTypeFromFilename, rejectAfter } from '../../utils';

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

@@ -13,10 +13,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import ErrorMessage from '../../errorMessage';
-import { MediaViewerError } from '../../errors';
 import { DN30 } from '@atlaskit/theme/colors';
 import ModalSpinner from '@atlaskit/media-ui/modalSpinner';
+import ErrorMessage from '../../errorMessage';
+import { MediaViewerError } from '../../errors';
 
 var ArchiveViewerLoader = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ArchiveViewerLoader, _React$PureComponent);

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

@@ -1,8 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 import styled, { keyframes } from 'styled-components';
+import { gridSize } from '@atlaskit/theme/constants';
+import { DN10, DN500 } from '@atlaskit/theme/colors';
 export var ArchiveSideBarWidth = 300;
 export var ArchiveItemViewerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])));
 export var ArchiveSideBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 22px 20px 20px 20px;\n  /** TODO [BMPT-370] Use new bg color after ThemeProvider is removed */\n  background-color: rgba(14, 22, 36);\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", "px;\n  bottom: 0;\n  box-sizing: border-box;\n  overflow-y: scroll;\n"])), ArchiveSideBarWidth);
@@ -12,4 +14,19 @@ export var ArchiveDownloadButtonWrapper = styled.div(_templateObject5 || (_templ
 export var SidebarItemWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 85%;\n"])));
 export var ArchiveSidebarFileEntryWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding-bottom: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s;\n"])));
 export var ArchiveLayout = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
-export var ArchiveViewerWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  display: flex;\n"])), ArchiveSideBarWidth);
+export var ArchiveViewerWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  display: flex;\n"])), ArchiveSideBarWidth);
+export var Separator = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: rgb(36, 50, 76);\n  flex-shrink: 0;\n"])), (gridSize() * 5 - 2) / 2);
+export var SidebarHeaderWrapper = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+export var SidebarHeaderIcon = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
+export var SidebarHeaderEntry = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), DN500);
+/** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
+
+export var itemStyle = {
+  backgroundColor: "".concat(DN10),
+  fill: "".concat(DN10),
+  color: "".concat(DN500),
+  ':hover': {
+    backgroundColor: '#253a5f',
+    color: "".concat(DN500)
+  }
+};

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

@@ -287,7 +287,17 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       var canDrag = camera && zoomLevel.value > camera.scaleToFit || false; // We use style attr instead of SC prop for perf reasons
       // @ts-ignore
 
-      var imgStyle = camera && camera.scaledImg(zoomLevel.value) || {};
+      var 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
+
+      var wrapperStyleOverride = camera ? {} : {
+        overflow: 'hidden'
+      };
 
       if (orientation) {
         imgStyle.transform = getCssFromImageOrientation(orientation);
@@ -297,7 +307,8 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ImageWrapper, {
         "data-testid": "media-viewer-image-content",
         onClick: this.onImageClicked,
-        innerRef: this.saveWrapperRef
+        innerRef: this.saveWrapperRef,
+        style: wrapperStyleOverride
       }, /*#__PURE__*/React.createElement(Img, {
         "data-testid": "media-viewer-image",
         canDrag: canDrag,

package/dist/types/analytics/ufoExperiences.d.ts

@@ -0,0 +1,13 @@
+import { FileAttributes } from '@atlaskit/media-common';
+import { RequestMetadata } from '@atlaskit/media-client';
+import { PrimaryErrorReason } from '../errors';
+export declare type UFOFailedEventPayload = {
+    failReason?: PrimaryErrorReason;
+    error?: string;
+    errorDetail?: string;
+    request?: RequestMetadata;
+    fileAttributes: FileAttributes;
+};
+export declare const startMediaFileUfoExperience: () => void;
+export declare const succeedMediaFileUfoExperience: (properties?: FileAttributes | undefined) => void;
+export declare const failMediaFileUfoExperience: (properties?: UFOFailedEventPayload | undefined) => void;

package/dist/types/item-viewer.d.ts

@@ -38,4 +38,4 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     private needsReset;
     private release;
 }
-export declare const ItemViewer: React.ForwardRefExoticComponent<Pick<Props, "onClose" | "mediaClient" | "identifier" | "contextId" | "previewCount" | "showControls" | "featureFlags"> & React.RefAttributes<any>>;
+export declare const ItemViewer: React.ForwardRefExoticComponent<Pick<Props, "mediaClient" | "identifier" | "onClose" | "featureFlags" | "showControls" | "contextId" | "previewCount"> & React.RefAttributes<any>>;

package/dist/types/viewers/archiveSidebar/archive-sidebar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ZipEntry } from 'unzipit';
-import { ArchiveSidebarFolderProps } from './archive-sidebar-folder-entry';
 import { MediaClient } from '@atlaskit/media-client';
+import { ArchiveSidebarFolderProps } from './archive-sidebar-folder-entry';
 import { ArchiveViewerError } from '../../errors';
 export interface ArchiveSidebarProps {
     entries: {

package/dist/types/viewers/archiveSidebar/archive.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
+import { ZipInfo, ZipEntry } from 'unzipit';
 import { MediaClient, FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
 import { BaseViewer } from '../base-viewer';
-import { ZipInfo, ZipEntry } from 'unzipit';
 import { ArchiveViewerProps } from './types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { ArchiveViewerError } from '../../errors';

package/dist/types/viewers/archiveSidebar/styled.d.ts

@@ -8,3 +8,17 @@ export declare const SidebarItemWrapper: import("styled-components").StyledCompo
 export declare const ArchiveSidebarFileEntryWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ArchiveLayout: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ArchiveViewerWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const Separator: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SidebarHeaderWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const SidebarHeaderIcon: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SidebarHeaderEntry: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+/** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
+export declare const itemStyle: {
+    backgroundColor: string;
+    fill: string;
+    color: string;
+    ':hover': {
+        backgroundColor: string;
+        color: string;
+    };
+};