@atlaskit/media-document-viewer 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-document-viewer
 
+## 0.3.2
+
+### Patch Changes
+
+- [#183808](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183808)
+  [`4436100210ca9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4436100210ca9) -
+  Added spinner to document viewer
+
+## 0.3.1
+
+### Patch Changes
+
+- [#180383](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180383)
+  [`ff93dcfae3aa1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff93dcfae3aa1) -
+  Fixed zoom centering correctly, zooming on mixed page size pdfs no longer cutting off PDFs and
+  pressing arrow keys on PDF inputs no longer causing media viewer to scroll
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/annotations.js

@@ -32,6 +32,12 @@ var TextInputFormField = exports.TextInputFormField = function TextInputFormFiel
     type: "text",
     value: field.text,
     readOnly: true,
+    onKeyUp: function onKeyUp(e) {
+      // stop propagation of the arrow key events because they can be used to navigate viewports
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
   })));
 };
@@ -51,7 +57,14 @@ var ComboBoxFormField = exports.ComboBoxFormField = function ComboBoxFormField(_
   }), /*#__PURE__*/_react.default.createElement("input", {
     style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
     type: "text",
-    value: field.text,
+    value: field.text
+    // stop propagation of the arrow key events because they can be used to navigate viewports
+    ,
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     readOnly: true,
     className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
   }), /*#__PURE__*/_react.default.createElement(_chevronDown.default, {

package/dist/cjs/documentViewer.compiled.css

@@ -1,9 +1,7 @@
 
 ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
 ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
-._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
 ._1ul91osq{min-width:100%}
-._2lx21bp4{flex-direction:column}
-._4cvr1h6o{align-items:center}
+._2lx21bp4{flex-direction:column}

package/dist/cjs/documentViewer.js

@@ -8,11 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DocumentViewer = void 0;
 require("./documentViewer.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _page = require("./page");
 var _usePageContent2 = require("./usePageContent");
+var _getDocumentRoot = require("./utils/getDocumentRoot");
 var _useCachedGetImage = require("./utils/useCachedGetImage");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var documentViewerStyles = null;
@@ -33,10 +35,39 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
   var style = {
     '--document-viewer-zoom': zoom
   };
+  var previousZoomRef = (0, _react.useRef)(zoom);
+
+  // Apply zoom with center-based adjustment
+  (0, _react.useLayoutEffect)(function () {
+    var previousZoom = previousZoomRef.current;
+
+    // Only adjust scroll if zoom actually changed
+    if (previousZoom !== zoom) {
+      // If we are not using a custom scroll element, we don't need to adjust the scroll position
+      var container = (0, _getDocumentRoot.getScrollElement)();
+      if (!container) {
+        return;
+      }
+
+      // Calculate the center point of the viewport before zoom
+      var viewportCenterX = container.scrollLeft + container.clientWidth / 2;
+      var viewportCenterY = container.scrollTop + container.clientHeight / 2;
+
+      // Calculate scale difference
+      var scaleDiff = zoom / previousZoom - 1;
+
+      // Adjust scroll to keep center point fixed
+      container.scrollLeft += viewportCenterX * scaleDiff;
+      container.scrollTop += viewportCenterY * scaleDiff;
+
+      // Update previous zoom
+      previousZoomRef.current = zoom;
+    }
+  }, [zoom]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "document-viewer",
     style: style,
-    className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o"])
+    className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
   }, (0, _toConsumableArray2.default)(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
     var _getPageContent = getPageContent(i),
       page = _getPageContent.page,

package/dist/cjs/page.compiled.css

@@ -1,6 +1,13 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/cjs/page.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaCommon = require("@atlaskit/media-common");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _annotations = require("./annotations");
 var _documentLinks = require("./documentLinks");
 var _getDocumentRoot = require("./utils/getDocumentRoot");
@@ -66,7 +67,12 @@ var Line = function Line() {
 };
 var pageSvgStyles = null;
 var pageImageStyles = null;
+var pageSpinnerStyles = null;
 var pageWrapperStyles = null;
+var a4Dimensions = {
+  height: 595,
+  width: 842
+};
 var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
   var dimensions = _ref4.dimensions,
     imageSrc = _ref4.imageSrc,
@@ -75,17 +81,31 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     pageIndex = _ref4.pageIndex,
     zoom = _ref4.zoom,
     onImageLoad = _ref4.onImageLoad;
-  var style = {
-    width: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)") : 'initial',
-    height: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)") : 'initial'
-  };
+  var style = {};
+  if (dimensions) {
+    // contents endpoint has loaded so dimensions are available
+    style.width = "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)");
+    style.height = "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)");
+  } else if (imageSrc) {
+    // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
+    style.width = 'initial';
+    style.height = 'initial';
+  } else {
+    // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
+    style.width = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.width, "px)");
+    style.height = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.height, "px)");
+  }
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: style,
     "data-testid": "page-".concat(pageIndex),
     id: "page-".concat(pageIndex + 1),
-    className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f"])
-  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
+  }, !imageSrc && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
+    size: "large"
+  })), imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": "page-".concat(pageIndex, "-image"),
     "data-zoom": zoom,

package/dist/cjs/utils/getDocumentRoot.js

@@ -3,18 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDocumentRoot = exports.DOCUMENT_SCROLL_ROOT_ID = void 0;
+exports.getScrollElement = exports.getDocumentRoot = exports.DOCUMENT_SCROLL_ROOT_ID = void 0;
+var _browserApis = require("@atlaskit/browser-apis");
 var DOCUMENT_SCROLL_ROOT_ID = exports.DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
 var getDocumentRoot = exports.getDocumentRoot = function getDocumentRoot() {
-  if (typeof window === 'undefined') {
+  var doc = (0, _browserApis.getDocument)();
+  if (!doc) {
     return;
   }
-  if (typeof window.document === 'undefined') {
-    return;
-  }
-  var root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  var root = doc.getElementById(DOCUMENT_SCROLL_ROOT_ID);
   if (root) {
     return root;
   }
-  return window.document;
+  return doc;
+};
+var getScrollElement = exports.getScrollElement = function getScrollElement() {
+  var element = (0, _browserApis.getDocument)();
+  return element && element.getElementById(DOCUMENT_SCROLL_ROOT_ID);
 };

package/dist/es2019/annotations.js

@@ -28,6 +28,12 @@ export const TextInputFormField = ({
     type: "text",
     value: field.text,
     readOnly: true,
+    onKeyUp: e => {
+      // stop propagation of the arrow key events because they can be used to navigate viewports
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
   })));
 };
@@ -50,7 +56,14 @@ export const ComboBoxFormField = ({
       ['fontSize']: `${field.f}px`
     },
     type: "text",
-    value: field.text,
+    value: field.text
+    // stop propagation of the arrow key events because they can be used to navigate viewports
+    ,
+    onKeyUp: e => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     readOnly: true,
     className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
   }), /*#__PURE__*/React.createElement(ChevronDownIcon, {

package/dist/es2019/documentViewer.compiled.css

@@ -1,9 +1,7 @@
 
 ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
 ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
-._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
 ._1ul91osq{min-width:100%}
-._2lx21bp4{flex-direction:column}
-._4cvr1h6o{align-items:center}
+._2lx21bp4{flex-direction:column}

package/dist/es2019/documentViewer.js

@@ -2,8 +2,10 @@
 import "./documentViewer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useLayoutEffect, useRef } from 'react';
 import { Page } from './page';
 import { usePageContent } from './usePageContent';
+import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 const documentViewerStyles = null;
 const DEFAULT_PAGINATION_SIZE = 50;
@@ -24,10 +26,39 @@ export const DocumentViewer = ({
   const style = {
     '--document-viewer-zoom': zoom
   };
+  const previousZoomRef = useRef(zoom);
+
+  // Apply zoom with center-based adjustment
+  useLayoutEffect(() => {
+    const previousZoom = previousZoomRef.current;
+
+    // Only adjust scroll if zoom actually changed
+    if (previousZoom !== zoom) {
+      // If we are not using a custom scroll element, we don't need to adjust the scroll position
+      const container = getScrollElement();
+      if (!container) {
+        return;
+      }
+
+      // Calculate the center point of the viewport before zoom
+      const viewportCenterX = container.scrollLeft + container.clientWidth / 2;
+      const viewportCenterY = container.scrollTop + container.clientHeight / 2;
+
+      // Calculate scale difference
+      const scaleDiff = zoom / previousZoom - 1;
+
+      // Adjust scroll to keep center point fixed
+      container.scrollLeft += viewportCenterX * scaleDiff;
+      container.scrollTop += viewportCenterY * scaleDiff;
+
+      // Update previous zoom
+      previousZoomRef.current = zoom;
+    }
+  }, [zoom]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "document-viewer",
     style: style,
-    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o"])
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
   }, [...Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)].map((_, i) => {
     const {
       page,

package/dist/es2019/page.compiled.css

@@ -1,6 +1,13 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/es2019/page.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useEffect, useState } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
+import Spinner from '@atlaskit/spinner';
 import { Annotations } from './annotations';
 import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
@@ -55,7 +56,12 @@ const Line = ({
 })));
 const pageSvgStyles = null;
 const pageImageStyles = null;
+const pageSpinnerStyles = null;
 const pageWrapperStyles = null;
+const a4Dimensions = {
+  height: 595,
+  width: 842
+};
 const PageView = /*#__PURE__*/forwardRef(({
   dimensions,
   imageSrc,
@@ -65,17 +71,31 @@ const PageView = /*#__PURE__*/forwardRef(({
   zoom,
   onImageLoad
 }, ref) => {
-  const style = {
-    width: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.width}px)` : 'initial',
-    height: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.height}px)` : 'initial'
-  };
+  const style = {};
+  if (dimensions) {
+    // contents endpoint has loaded so dimensions are available
+    style.width = `calc(var(--document-viewer-zoom) * ${dimensions.width}px)`;
+    style.height = `calc(var(--document-viewer-zoom) * ${dimensions.height}px)`;
+  } else if (imageSrc) {
+    // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
+    style.width = 'initial';
+    style.height = 'initial';
+  } else {
+    // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
+    style.width = `calc(var(--document-viewer-zoom) * ${a4Dimensions.width}px)`;
+    style.height = `calc(var(--document-viewer-zoom) * ${a4Dimensions.height}px)`;
+  }
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: style,
     "data-testid": `page-${pageIndex}`,
     id: `page-${pageIndex + 1}`,
-    className: ax(["_kqswh2mm _bfhku67f"])
-  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
+  }, !imageSrc && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })), imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": `page-${pageIndex}-image`,
     "data-zoom": zoom,

package/dist/es2019/utils/getDocumentRoot.js

@@ -1,14 +1,17 @@
+import { getDocument } from '@atlaskit/browser-apis';
 export const DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
 export const getDocumentRoot = () => {
-  if (typeof window === 'undefined') {
+  const doc = getDocument();
+  if (!doc) {
     return;
   }
-  if (typeof window.document === 'undefined') {
-    return;
-  }
-  const root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  const root = doc.getElementById(DOCUMENT_SCROLL_ROOT_ID);
   if (root) {
     return root;
   }
-  return window.document;
+  return doc;
+};
+export const getScrollElement = () => {
+  const element = getDocument();
+  return element && element.getElementById(DOCUMENT_SCROLL_ROOT_ID);
 };

package/dist/esm/annotations.js

@@ -26,6 +26,12 @@ export var TextInputFormField = function TextInputFormField(_ref) {
     type: "text",
     value: field.text,
     readOnly: true,
+    onKeyUp: function onKeyUp(e) {
+      // stop propagation of the arrow key events because they can be used to navigate viewports
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
   })));
 };
@@ -45,7 +51,14 @@ export var ComboBoxFormField = function ComboBoxFormField(_ref3) {
   }), /*#__PURE__*/React.createElement("input", {
     style: _defineProperty({}, 'fontSize', "".concat(field.f, "px")),
     type: "text",
-    value: field.text,
+    value: field.text
+    // stop propagation of the arrow key events because they can be used to navigate viewports
+    ,
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      }
+    },
     readOnly: true,
     className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
   }), /*#__PURE__*/React.createElement(ChevronDownIcon, {

package/dist/esm/documentViewer.compiled.css

@@ -1,9 +1,7 @@
 
 ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
 ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
-._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
 ._1ul91osq{min-width:100%}
-._2lx21bp4{flex-direction:column}
-._4cvr1h6o{align-items:center}
+._2lx21bp4{flex-direction:column}

package/dist/esm/documentViewer.js

@@ -3,8 +3,10 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./documentViewer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useLayoutEffect, useRef } from 'react';
 import { Page } from './page';
 import { usePageContent } from './usePageContent';
+import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
@@ -24,10 +26,39 @@ export var DocumentViewer = function DocumentViewer(_ref) {
   var style = {
     '--document-viewer-zoom': zoom
   };
+  var previousZoomRef = useRef(zoom);
+
+  // Apply zoom with center-based adjustment
+  useLayoutEffect(function () {
+    var previousZoom = previousZoomRef.current;
+
+    // Only adjust scroll if zoom actually changed
+    if (previousZoom !== zoom) {
+      // If we are not using a custom scroll element, we don't need to adjust the scroll position
+      var container = getScrollElement();
+      if (!container) {
+        return;
+      }
+
+      // Calculate the center point of the viewport before zoom
+      var viewportCenterX = container.scrollLeft + container.clientWidth / 2;
+      var viewportCenterY = container.scrollTop + container.clientHeight / 2;
+
+      // Calculate scale difference
+      var scaleDiff = zoom / previousZoom - 1;
+
+      // Adjust scroll to keep center point fixed
+      container.scrollLeft += viewportCenterX * scaleDiff;
+      container.scrollTop += viewportCenterY * scaleDiff;
+
+      // Update previous zoom
+      previousZoomRef.current = zoom;
+    }
+  }, [zoom]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "document-viewer",
     style: style,
-    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o"])
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
   }, _toConsumableArray(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
     var _getPageContent = getPageContent(i),
       page = _getPageContent.page,

package/dist/esm/page.compiled.css

@@ -1,6 +1,13 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/esm/page.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useEffect, useState } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
+import Spinner from '@atlaskit/spinner';
 import { Annotations } from './annotations';
 import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
@@ -57,7 +58,12 @@ var Line = function Line() {
 };
 var pageSvgStyles = null;
 var pageImageStyles = null;
+var pageSpinnerStyles = null;
 var pageWrapperStyles = null;
+var a4Dimensions = {
+  height: 595,
+  width: 842
+};
 var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var dimensions = _ref4.dimensions,
     imageSrc = _ref4.imageSrc,
@@ -66,17 +72,31 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     pageIndex = _ref4.pageIndex,
     zoom = _ref4.zoom,
     onImageLoad = _ref4.onImageLoad;
-  var style = {
-    width: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)") : 'initial',
-    height: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)") : 'initial'
-  };
+  var style = {};
+  if (dimensions) {
+    // contents endpoint has loaded so dimensions are available
+    style.width = "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)");
+    style.height = "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)");
+  } else if (imageSrc) {
+    // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
+    style.width = 'initial';
+    style.height = 'initial';
+  } else {
+    // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
+    style.width = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.width, "px)");
+    style.height = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.height, "px)");
+  }
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: style,
     "data-testid": "page-".concat(pageIndex),
     id: "page-".concat(pageIndex + 1),
-    className: ax(["_kqswh2mm _bfhku67f"])
-  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
+  }, !imageSrc && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })), imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": "page-".concat(pageIndex, "-image"),
     "data-zoom": zoom,

package/dist/esm/utils/getDocumentRoot.js

@@ -1,14 +1,17 @@
+import { getDocument } from '@atlaskit/browser-apis';
 export var DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
 export var getDocumentRoot = function getDocumentRoot() {
-  if (typeof window === 'undefined') {
+  var doc = getDocument();
+  if (!doc) {
     return;
   }
-  if (typeof window.document === 'undefined') {
-    return;
-  }
-  var root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  var root = doc.getElementById(DOCUMENT_SCROLL_ROOT_ID);
   if (root) {
     return root;
   }
-  return window.document;
+  return doc;
+};
+export var getScrollElement = function getScrollElement() {
+  var element = getDocument();
+  return element && element.getElementById(DOCUMENT_SCROLL_ROOT_ID);
 };

package/dist/types/utils/getDocumentRoot.d.ts

@@ -1,2 +1,3 @@
 export declare const DOCUMENT_SCROLL_ROOT_ID = "document-scroll-root";
 export declare const getDocumentRoot: () => HTMLElement | Document | undefined;
+export declare const getScrollElement: () => HTMLElement | null;

package/dist/types-ts4.5/utils/getDocumentRoot.d.ts

@@ -1,2 +1,3 @@
 export declare const DOCUMENT_SCROLL_ROOT_ID = "document-scroll-root";
 export declare const getDocumentRoot: () => HTMLElement | Document | undefined;
+export declare const getScrollElement: () => HTMLElement | null;

package/package.json

@@ -27,10 +27,12 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/icon": "^27.2.0",
+		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
@@ -44,6 +46,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},
@@ -83,7 +86,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",