@atlaskit/media-viewer 48.0.7 → 48.0.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-viewer
 
+## 48.0.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 48.0.8
+
+### Patch Changes
+
+- [`5953474fd5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5953474fd5f) - [ux] [MEX-2514] Prevent the body (i.e. the background) from scrolling when Media Viewer is open to improve the user experience
+
 ## 48.0.7
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -12,7 +12,7 @@ var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
 var packageName = "@atlaskit/media-viewer";
 exports.packageName = packageName;
-var packageVersion = "48.0.7";
+var packageVersion = "48.0.9";
 exports.packageVersion = packageVersion;
 function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.0.7";
+var packageVersion = "48.0.9";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/media-viewer.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaViewerComponent = exports.MediaViewer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -25,6 +26,8 @@ var _content = require("./content");
 var _styleWrappers = require("./styleWrappers");
 var _perfMarks = require("perf-marks");
 var _classnames = require("./classnames");
+var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
@@ -106,9 +109,12 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         items = _this$props2.items,
         extensions = _this$props2.extensions,
         contextId = _this$props2.contextId,
-        featureFlags = _this$props2.featureFlags;
+        featureFlags = _this$props2.featureFlags,
+        innerRef = _this$props2.innerRef;
       var isSidebarVisible = this.state.isSidebarVisible;
-      var content = /*#__PURE__*/_react.default.createElement(_styleWrappers.Blanket, {
+      var content = /*#__PURE__*/_react.default.createElement("div", {
+        ref: innerRef
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.Blanket, {
         "data-testid": "media-viewer-popup",
         className: _classnames.mediaViewerPopupClass
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
@@ -128,7 +134,7 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         isSidebarVisible: isSidebarVisible,
         contextId: contextId,
         featureFlags: featureFlags
-      })), this.renderSidebar());
+      })), this.renderSidebar()));
       return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
@@ -137,12 +143,23 @@ var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
   return MediaViewerComponent;
 }(_react.default.Component);
 exports.MediaViewerComponent = MediaViewerComponent;
+var MediaViewerWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(MediaViewerComponent, (0, _extends2.default)({}, props, {
+    innerRef: ref
+  }));
+});
+var MediaViewerWithScrollLock = function MediaViewerWithScrollLock(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+    autoFocus: true,
+    returnFocus: true
+  }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null), /*#__PURE__*/_react.default.createElement(MediaViewerWithRef, props));
+};
 var MediaViewer = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageName: _analytics.packageName,
   packageVersion: _analytics.packageVersion,
   component: _analytics.component,
   componentName: _analytics.componentName
-})((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerComponent, {
+})((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerWithScrollLock, {
   enforceContext: false
 })));
 exports.MediaViewer = MediaViewer;

package/dist/cjs/styleWrappers.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ZoomWrapper = exports.ZoomLevelIndicator = exports.ZoomControlsWrapper = exports.Video = exports.SpinnerWrapper = exports.SidebarWrapper = exports.RightWrapper = exports.RightHeader = exports.PDFWrapper = exports.MetadataWrapper = exports.MetadataSubText = exports.MetadataIconWrapper = exports.MetadataFileName = exports.MedatadataTextWrapper = exports.ListWrapper = exports.LeftWrapper = exports.LeftHeader = exports.Img = exports.ImageWrapper = exports.HeaderWrapper = exports.Header = exports.HDIconWrapper = exports.HDIconGroupWrapper = exports.FormattedMessageWrapper = exports.ErrorMessageWrapper = exports.ErrorImage = exports.DownloadButtonWrapper = exports.DefaultCoverWrapper = exports.CustomVideoPlayerWrapper = exports.CustomAudioPlayerWrapper = exports.ContentWrapper = exports.CloseButtonWrapper = exports.Blanket = exports.BaselineExtend = exports.AudioPlayer = exports.AudioCover = exports.Audio = exports.ArrowsWrapper = exports.Arrow = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _styles = require("./styles");
+var _reactScrolllock = require("react-scrolllock");
+var _useCallbackRef = require("use-callback-ref");
 /** @jsx jsx */
 
 var Blanket = function Blanket(_ref) {
@@ -140,15 +144,22 @@ var Video = function Video(_ref14) {
   );
 };
 exports.Video = Video;
-var PDFWrapper = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref15, ref) {
-  var datatestId = _ref15['data-testid'],
+var PDFWrapperBody = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref15, ref) {
+  var innerRef = _ref15.innerRef,
+    datatestId = _ref15['data-testid'],
     children = _ref15.children;
+  var bodyRef = (0, _useCallbackRef.useMergeRefs)([ref, innerRef]);
   return (0, _react.jsx)("div", {
     css: _styles.pdfWrapperStyles,
-    ref: ref,
+    ref: bodyRef,
     "data-testid": datatestId
   }, children);
 });
+var PDFWrapper = /*#__PURE__*/(0, _react2.forwardRef)(function (props, ref) {
+  return (0, _react.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react.jsx)(PDFWrapperBody, (0, _extends2.default)({
+    innerRef: ref
+  }, props)));
+});
 exports.PDFWrapper = PDFWrapper;
 var Arrow = function Arrow(_ref16) {
   var className = _ref16.className,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SidebarItemWrapper = exports.SidebarHeaderWrapper = exports.SidebarHeaderIcon = exports.SidebarHeaderEntry = exports.Separator = exports.ArchiveViewerWrapper = exports.ArchiveSidebarFolderWrapper = exports.ArchiveSidebarFileEntryWrapper = exports.ArchiveSideBar = exports.ArchiveLayout = exports.ArchiveItemViewerWrapper = exports.ArchiveDownloadButtonWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
+var _reactScrolllock = require("react-scrolllock");
 /** @jsx jsx */
 
 var ArchiveItemViewerWrapper = function ArchiveItemViewerWrapper(_ref) {
@@ -17,9 +18,9 @@ var ArchiveItemViewerWrapper = function ArchiveItemViewerWrapper(_ref) {
 exports.ArchiveItemViewerWrapper = ArchiveItemViewerWrapper;
 var ArchiveSideBar = function ArchiveSideBar(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("div", {
+  return (0, _react.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react.jsx)("div", {
     css: _styles.archiveSideBarStyles
-  }, children);
+  }, children));
 };
 exports.ArchiveSideBar = ArchiveSideBar;
 var ArchiveSidebarFolderWrapper = function ArchiveSidebarFolderWrapper(_ref3) {

package/dist/cjs/viewers/codeViewer/codeViewerRenderer.js

@@ -23,6 +23,7 @@ var _errorMessage = _interopRequireDefault(require("../../errorMessage"));
 var _errors = require("../../errors");
 var _util = require("./util");
 var _styles = require("./styles");
+var _reactScrolllock = require("react-scrolllock");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
 // Based on some basic benchmarking with @atlaskit/code it was found that ~10,000 lines took around ~5secs to render, which locks the main thread.
@@ -35,10 +36,10 @@ var MAX_FILE_SIZE_USE_CODE_VIEWER = 5 * 1024 * 1024;
 var CodeViewWrapper = function CodeViewWrapper(_ref) {
   var children = _ref.children,
     testId = _ref['data-testid'];
-  return (0, _react.jsx)("div", {
+  return (0, _react.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react.jsx)("div", {
     css: _styles.codeViewWrapperStyles,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 exports.CodeViewWrapper = CodeViewWrapper;
 var CodeViewerHeaderBar = function CodeViewerHeaderBar() {

package/dist/es2019/analytics/index.js

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

package/dist/es2019/analytics/ufoExperiences.js

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

package/dist/es2019/media-viewer.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
@@ -12,6 +13,8 @@ import { Content } from './content';
 import { Blanket, SidebarWrapper } from './styleWrappers';
 import { start } from 'perf-marks';
 import { mediaViewerPopupClass } from './classnames';
+import ScrollLock from 'react-scrolllock';
+import FocusLock from 'react-focus-lock';
 export class MediaViewerComponent extends React.Component {
   constructor(...args) {
     super(...args);
@@ -85,12 +88,15 @@ export class MediaViewerComponent extends React.Component {
       items,
       extensions,
       contextId,
-      featureFlags
+      featureFlags,
+      innerRef
     } = this.props;
     const {
       isSidebarVisible
     } = this.state;
-    const content = /*#__PURE__*/React.createElement(Blanket, {
+    const content = /*#__PURE__*/React.createElement("div", {
+      ref: innerRef
+    }, /*#__PURE__*/React.createElement(Blanket, {
       "data-testid": "media-viewer-popup",
       className: mediaViewerPopupClass
     }, /*#__PURE__*/React.createElement(Shortcut, {
@@ -110,17 +116,28 @@ export class MediaViewerComponent extends React.Component {
       isSidebarVisible: isSidebarVisible,
       contextId: contextId,
       featureFlags: featureFlags
-    })), this.renderSidebar());
+    })), this.renderSidebar()));
     return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, content);
   }
 }
+const MediaViewerWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(MediaViewerComponent, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+const MediaViewerWithScrollLock = props => {
+  return /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: true,
+    returnFocus: true
+  }, /*#__PURE__*/React.createElement(ScrollLock, null), /*#__PURE__*/React.createElement(MediaViewerWithRef, props));
+};
 export const MediaViewer = withMediaAnalyticsContext({
   packageName,
   packageVersion,
   component,
   componentName
-})(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
+})(withAnalyticsEvents()(injectIntl(MediaViewerWithScrollLock, {
   enforceContext: false
 })));

package/dist/es2019/styleWrappers.js

@@ -1,7 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { forwardRef, useMemo } from 'react';
 import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
+import { useMergeRefs } from 'use-callback-ref';
 export const Blanket = ({
   'data-testid': datatestId,
   className,
@@ -106,14 +109,23 @@ jsx("video", {
   controls: controls,
   src: src
 });
-export const PDFWrapper = /*#__PURE__*/forwardRef(({
+const PDFWrapperBody = /*#__PURE__*/forwardRef(({
+  innerRef,
   'data-testid': datatestId,
   children
-}, ref) => jsx("div", {
-  css: pdfWrapperStyles,
-  ref: ref,
-  "data-testid": datatestId
-}, children));
+}, ref) => {
+  const bodyRef = useMergeRefs([ref, innerRef]);
+  return jsx("div", {
+    css: pdfWrapperStyles,
+    ref: bodyRef,
+    "data-testid": datatestId
+  }, children);
+});
+export const PDFWrapper = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(TouchScrollable, null, jsx(PDFWrapperBody, _extends({
+    innerRef: ref
+  }, props)));
+});
 export const Arrow = ({
   className,
   children

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

@@ -2,6 +2,7 @@
 
 import { jsx } from '@emotion/react';
 import { archiveDownloadButtonWrapperStyles, archiveItemViewerWrapperStyles, archiveLayoutStyles, archiveSidebarFileEntryWrapperStyles, archiveSidebarFolderWrapperStyles, archiveSideBarStyles, archiveViewerWrapperStyles, separatorStyles, sidebarHeaderEntryStyles, sidebarHeaderIconStyles, sidebarHeaderWrapperStyles, sidebarItemWrapperStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
 export const ArchiveItemViewerWrapper = ({
   children
 }) => {
@@ -12,9 +13,9 @@ export const ArchiveItemViewerWrapper = ({
 export const ArchiveSideBar = ({
   children
 }) => {
-  return jsx("div", {
+  return jsx(TouchScrollable, null, jsx("div", {
     css: archiveSideBarStyles
-  }, children);
+  }, children));
 };
 export const ArchiveSidebarFolderWrapper = ({
   children

package/dist/es2019/viewers/codeViewer/codeViewerRenderer.js

@@ -9,6 +9,7 @@ import ErrorMessage from '../../errorMessage';
 import { MediaViewerError } from '../../errors';
 import { lineCount } from './util';
 import { codeViewerHeaderBarStyles, codeViewWrapperStyles, codeViewerHTMLStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
 
 // Based on some basic benchmarking with @atlaskit/code it was found that ~10,000 lines took around ~5secs to render, which locks the main thread.
 // Therefore we set a hard limit on the amount of lines which we apply formatting to,
@@ -21,10 +22,10 @@ export const CodeViewWrapper = ({
   children,
   'data-testid': testId
 }) => {
-  return jsx("div", {
+  return jsx(TouchScrollable, null, jsx("div", {
     css: codeViewWrapperStyles,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 export const CodeViewerHeaderBar = () => {
   return jsx("div", {

package/dist/esm/analytics/index.js

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

package/dist/esm/analytics/ufoExperiences.js

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

package/dist/esm/media-viewer.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -20,6 +21,8 @@ import { Content } from './content';
 import { Blanket, SidebarWrapper } from './styleWrappers';
 import { start } from 'perf-marks';
 import { mediaViewerPopupClass } from './classnames';
+import ScrollLock from 'react-scrolllock';
+import FocusLock from 'react-focus-lock';
 export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(MediaViewerComponent, _React$Component);
   var _super = _createSuper(MediaViewerComponent);
@@ -99,9 +102,12 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         items = _this$props2.items,
         extensions = _this$props2.extensions,
         contextId = _this$props2.contextId,
-        featureFlags = _this$props2.featureFlags;
+        featureFlags = _this$props2.featureFlags,
+        innerRef = _this$props2.innerRef;
       var isSidebarVisible = this.state.isSidebarVisible;
-      var content = /*#__PURE__*/React.createElement(Blanket, {
+      var content = /*#__PURE__*/React.createElement("div", {
+        ref: innerRef
+      }, /*#__PURE__*/React.createElement(Blanket, {
         "data-testid": "media-viewer-popup",
         className: mediaViewerPopupClass
       }, /*#__PURE__*/React.createElement(Shortcut, {
@@ -121,7 +127,7 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         isSidebarVisible: isSidebarVisible,
         contextId: contextId,
         featureFlags: featureFlags
-      })), this.renderSidebar());
+      })), this.renderSidebar()));
       return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, content);
@@ -129,11 +135,22 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
   }]);
   return MediaViewerComponent;
 }(React.Component);
+var MediaViewerWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(MediaViewerComponent, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+var MediaViewerWithScrollLock = function MediaViewerWithScrollLock(props) {
+  return /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: true,
+    returnFocus: true
+  }, /*#__PURE__*/React.createElement(ScrollLock, null), /*#__PURE__*/React.createElement(MediaViewerWithRef, props));
+};
 export var MediaViewer = withMediaAnalyticsContext({
   packageName: packageName,
   packageVersion: packageVersion,
   component: component,
   componentName: componentName
-})(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
+})(withAnalyticsEvents()(injectIntl(MediaViewerWithScrollLock, {
   enforceContext: false
 })));

package/dist/esm/styleWrappers.js

@@ -1,7 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { forwardRef, useMemo } from 'react';
 import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
+import { useMergeRefs } from 'use-callback-ref';
 export var Blanket = function Blanket(_ref) {
   var datatestId = _ref['data-testid'],
     className = _ref.className,
@@ -119,15 +122,22 @@ export var Video = function Video(_ref14) {
     })
   );
 };
-export var PDFWrapper = /*#__PURE__*/forwardRef(function (_ref15, ref) {
-  var datatestId = _ref15['data-testid'],
+var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref15, ref) {
+  var innerRef = _ref15.innerRef,
+    datatestId = _ref15['data-testid'],
     children = _ref15.children;
+  var bodyRef = useMergeRefs([ref, innerRef]);
   return jsx("div", {
     css: pdfWrapperStyles,
-    ref: ref,
+    ref: bodyRef,
     "data-testid": datatestId
   }, children);
 });
+export var PDFWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  return jsx(TouchScrollable, null, jsx(PDFWrapperBody, _extends({
+    innerRef: ref
+  }, props)));
+});
 export var Arrow = function Arrow(_ref16) {
   var className = _ref16.className,
     children = _ref16.children;

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

@@ -2,6 +2,7 @@
 
 import { jsx } from '@emotion/react';
 import { archiveDownloadButtonWrapperStyles, archiveItemViewerWrapperStyles, archiveLayoutStyles, archiveSidebarFileEntryWrapperStyles, archiveSidebarFolderWrapperStyles, archiveSideBarStyles, archiveViewerWrapperStyles, separatorStyles, sidebarHeaderEntryStyles, sidebarHeaderIconStyles, sidebarHeaderWrapperStyles, sidebarItemWrapperStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
 export var ArchiveItemViewerWrapper = function ArchiveItemViewerWrapper(_ref) {
   var children = _ref.children;
   return jsx("div", {
@@ -10,9 +11,9 @@ export var ArchiveItemViewerWrapper = function ArchiveItemViewerWrapper(_ref) {
 };
 export var ArchiveSideBar = function ArchiveSideBar(_ref2) {
   var children = _ref2.children;
-  return jsx("div", {
+  return jsx(TouchScrollable, null, jsx("div", {
     css: archiveSideBarStyles
-  }, children);
+  }, children));
 };
 export var ArchiveSidebarFolderWrapper = function ArchiveSidebarFolderWrapper(_ref3) {
   var children = _ref3.children;

package/dist/esm/viewers/codeViewer/codeViewerRenderer.js

@@ -19,6 +19,7 @@ import ErrorMessage from '../../errorMessage';
 import { MediaViewerError } from '../../errors';
 import { lineCount } from './util';
 import { codeViewerHeaderBarStyles, codeViewWrapperStyles, codeViewerHTMLStyles } from './styles';
+import { TouchScrollable } from 'react-scrolllock';
 
 // Based on some basic benchmarking with @atlaskit/code it was found that ~10,000 lines took around ~5secs to render, which locks the main thread.
 // Therefore we set a hard limit on the amount of lines which we apply formatting to,
@@ -30,10 +31,10 @@ var MAX_FILE_SIZE_USE_CODE_VIEWER = 5 * 1024 * 1024;
 export var CodeViewWrapper = function CodeViewWrapper(_ref) {
   var children = _ref.children,
     testId = _ref['data-testid'];
-  return jsx("div", {
+  return jsx(TouchScrollable, null, jsx("div", {
     css: codeViewWrapperStyles,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 export var CodeViewerHeaderBar = function CodeViewerHeaderBar() {
   return jsx("div", {

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

@@ -13,6 +13,7 @@ export type Props = {
     items: Identifier[];
     extensions?: MediaViewerExtensions;
     contextId?: string;
+    innerRef?: React.Ref<HTMLDivElement>;
 } & WithAnalyticsEventsProps;
 export interface State {
     isSidebarVisible: boolean;

package/dist/types/styleWrappers.d.ts

@@ -48,7 +48,7 @@ type VideoProps = {
     autoPlay: boolean;
 };
 export declare const Video: ({ autoPlay, controls, src }: VideoProps) => jsx.JSX.Element;
-export declare const PDFWrapper: import("react").ForwardRefExoticComponent<DataTestID & Children & import("react").RefAttributes<unknown>>;
+export declare const PDFWrapper: import("react").ForwardRefExoticComponent<DataTestID & Children & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Arrow: ({ className, children }: ClassName & Children) => jsx.JSX.Element;
 export type LeftWrapperProps = {
     isArchiveSideBarVisible: boolean;

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

@@ -13,6 +13,7 @@ export type Props = {
     items: Identifier[];
     extensions?: MediaViewerExtensions;
     contextId?: string;
+    innerRef?: React.Ref<HTMLDivElement>;
 } & WithAnalyticsEventsProps;
 export interface State {
     isSidebarVisible: boolean;

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

@@ -48,7 +48,7 @@ type VideoProps = {
     autoPlay: boolean;
 };
 export declare const Video: ({ autoPlay, controls, src }: VideoProps) => jsx.JSX.Element;
-export declare const PDFWrapper: import("react").ForwardRefExoticComponent<DataTestID & Children & import("react").RefAttributes<unknown>>;
+export declare const PDFWrapper: import("react").ForwardRefExoticComponent<DataTestID & Children & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Arrow: ({ className, children }: ClassName & Children) => jsx.JSX.Element;
 export type LeftWrapperProps = {
     isArchiveSideBarVisible: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.0.7",
+  "version": "48.0.9",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,14 +36,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/media-client": "^23.1.0",
     "@atlaskit/media-common": "^8.0.0",
-    "@atlaskit/media-ui": "^23.2.0",
-    "@atlaskit/side-navigation": "^1.10.0",
+    "@atlaskit/media-ui": "^23.3.0",
+    "@atlaskit/side-navigation": "^2.0.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.14.0",
@@ -54,8 +54,11 @@
     "mime": "^2.4.6",
     "pdfjs-dist": "2.0.943",
     "perf-marks": "^1.5.0",
+    "react-focus-lock": "^2.5.2",
     "react-loadable": "^5.1.0",
-    "unzipit": "^1.3.0"
+    "react-scrolllock": "^5.0.1",
+    "unzipit": "^1.3.0",
+    "use-callback-ref": "^1.2.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
@@ -63,7 +66,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/media-card": "^76.1.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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