@atlaskit/media-document-viewer 0.2.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-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
+
+- [#179532](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179532)
+  [`3102656e971a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3102656e971a4) -
+  Fixed form view by removing unnecessary div and replacing with fragment and added a new
+  `onSuccess` callback to enable success analytics
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/cjs/annotations.js

@@ -2,18 +2,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextInputFormField = exports.ComboBoxFormField = exports.Annotations = void 0;
 require("./annotations.compiled.css");
-var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
-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); }
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 var formInputBaseStyles = null;
 var textInputStyles = null;
@@ -23,17 +21,23 @@ var foreignObjectProps = {
 var TextInputFormField = exports.TextInputFormField = function TextInputFormField(_ref) {
   var field = _ref.field,
     dataTestId = _ref.dataTestId;
-  return /*#__PURE__*/React.createElement("foreignObject", {
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: field.x,
     y: -field.y,
     width: field.w,
     height: field.h,
     "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, foreignObjectProps, {
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, foreignObjectProps, {
     style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
     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"])
   })));
 };
@@ -42,35 +46,42 @@ var comboBoxInputStyles = null;
 var ComboBoxFormField = exports.ComboBoxFormField = function ComboBoxFormField(_ref3) {
   var field = _ref3.field,
     dataTestId = _ref3.dataTestId;
-  return /*#__PURE__*/React.createElement("foreignObject", {
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: field.x,
     y: -field.y,
     width: field.w,
     height: field.h,
     "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, foreignObjectProps, {
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, foreignObjectProps, {
     className: (0, _runtime.ax)(["_1e0c11p5 _yv0e1ghl _4cvr1h6o _1bah1yb4 _kqswstnw _4t3i1osq _1bsb1osq"])
-  }), /*#__PURE__*/React.createElement("input", {
+  }), /*#__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.createElement(_chevronDown.default, {
+  }), /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
     label: "",
     size: "small"
   })));
 };
 var Annotations = exports.Annotations = function Annotations(_ref5) {
   var annotations = _ref5.annotations;
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
-    return /*#__PURE__*/React.createElement(TextInputFormField, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, annotations.text_form_fields.map(function (field, i) {
+    return /*#__PURE__*/_react.default.createElement(TextInputFormField, {
       field: field,
       dataTestId: "text-form-field-".concat(i),
       key: i
     });
   }), annotations.combobox_form_fields.map(function (field, i) {
-    return /*#__PURE__*/React.createElement(ComboBoxFormField, {
+    return /*#__PURE__*/_react.default.createElement(ComboBoxFormField, {
       field: field,
       dataTestId: "combobox-form-field-".concat(i),
       key: i

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,18 +8,21 @@ 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;
 var DEFAULT_PAGINATION_SIZE = 50;
 var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
-  var getContent = _ref.getContent,
+  var onSuccess = _ref.onSuccess,
+    getContent = _ref.getContent,
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
@@ -32,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,
@@ -49,6 +81,7 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
       onVisible: function onVisible() {
         return loadPageContent(i);
       },
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/cjs/page.compiled.css

@@ -1,6 +1,8 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/cjs/page.js

@@ -84,7 +84,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     style: style,
     "data-testid": "page-".concat(pageIndex),
     id: "page-".concat(pageIndex + 1),
-    className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f"])
+    className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": "page-".concat(pageIndex, "-image"),
@@ -120,7 +120,8 @@ var Page = exports.Page = function Page(_ref5) {
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
-    onVisible = _ref5.onVisible;
+    onVisible = _ref5.onVisible,
+    onLoad = _ref5.onLoad;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     imageSrc = _useState2[0],
@@ -143,6 +144,7 @@ var Page = exports.Page = function Page(_ref5) {
     setDimensions = _useState4[1];
   var onImageLoad = (0, _mediaCommon.useStaticCallback)(function (event) {
     var image = event.currentTarget;
+    onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

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

@@ -1,10 +1,10 @@
 /* annotations.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./annotations.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 
+import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 const formInputBaseStyles = null;
 const textInputStyles = null;
@@ -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, {
@@ -61,7 +74,7 @@ export const ComboBoxFormField = ({
 export const Annotations = ({
   annotations
 }) => {
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map((field, i) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, annotations.text_form_fields.map((field, i) => {
     return /*#__PURE__*/React.createElement(TextInputFormField, {
       field: field,
       dataTestId: `text-form-field-${i}`,

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,12 +2,15 @@
 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;
 export const DocumentViewer = ({
+  onSuccess,
   getContent,
   getPageImageUrl,
   paginationSize = DEFAULT_PAGINATION_SIZE,
@@ -23,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,
@@ -39,6 +71,7 @@ export const DocumentViewer = ({
       zoom: zoom,
       defaultDimensions: documentMetadata.defaultDimensions,
       onVisible: () => loadPageContent(i),
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/es2019/page.compiled.css

@@ -1,6 +1,8 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/es2019/page.js

@@ -74,7 +74,7 @@ const PageView = /*#__PURE__*/forwardRef(({
     style: style,
     "data-testid": `page-${pageIndex}`,
     id: `page-${pageIndex + 1}`,
-    className: ax(["_kqswh2mm _bfhku67f"])
+    className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": `page-${pageIndex}-image`,
@@ -107,7 +107,8 @@ export const Page = ({
   pageIndex,
   zoom,
   defaultDimensions,
-  onVisible
+  onVisible,
+  onLoad
 }) => {
   var _ref;
   const [imageSrc, setImageSrc] = useState();
@@ -127,6 +128,7 @@ export const Page = ({
   const [dimensions, setDimensions] = useState();
   const onImageLoad = useStaticCallback(event => {
     const image = event.currentTarget;
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     if (!content) {
       const zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

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

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./annotations.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 
+import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 var formInputBaseStyles = null;
 var textInputStyles = null;
@@ -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, {
@@ -55,7 +68,7 @@ export var ComboBoxFormField = function ComboBoxFormField(_ref3) {
 };
 export var Annotations = function Annotations(_ref5) {
   var annotations = _ref5.annotations;
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, annotations.text_form_fields.map(function (field, i) {
     return /*#__PURE__*/React.createElement(TextInputFormField, {
       field: field,
       dataTestId: "text-form-field-".concat(i),

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,14 +3,17 @@ 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;
 export var DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
-  var getContent = _ref.getContent,
+  var onSuccess = _ref.onSuccess,
+    getContent = _ref.getContent,
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
@@ -23,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,
@@ -40,6 +72,7 @@ export var DocumentViewer = function DocumentViewer(_ref) {
       onVisible: function onVisible() {
         return loadPageContent(i);
       },
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/esm/page.compiled.css

@@ -1,6 +1,8 @@
 ._154iidpf{top:0}
+._18u01wug{margin-left:auto}
 ._1kemd8h4{image-rendering:pixelated}
 ._1ltvidpf{left:0}
+._2hwx1wug{margin-right:auto}
 ._80om1kdv{cursor:text}
 ._bfhku67f{background-color:#fff}
 ._kqswh2mm{position:relative}

package/dist/esm/page.js

@@ -75,7 +75,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     style: style,
     "data-testid": "page-".concat(pageIndex),
     id: "page-".concat(pageIndex + 1),
-    className: ax(["_kqswh2mm _bfhku67f"])
+    className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
     "data-testid": "page-".concat(pageIndex, "-image"),
@@ -111,7 +111,8 @@ export var Page = function Page(_ref5) {
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
-    onVisible = _ref5.onVisible;
+    onVisible = _ref5.onVisible,
+    onLoad = _ref5.onLoad;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     imageSrc = _useState2[0],
@@ -134,6 +135,7 @@ export var Page = function Page(_ref5) {
     setDimensions = _useState4[1];
   var onImageLoad = useStaticCallback(function (event) {
     var image = event.currentTarget;
+    onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

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/documentViewer.d.ts

@@ -5,6 +5,7 @@ type DocumentViewerProps = {
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
     zoom: number;
+    onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

package/dist/types/page.d.ts

@@ -11,6 +11,7 @@ type PageProps = {
         height: number;
     };
     onVisible: () => void;
+    onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

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/documentViewer.d.ts

@@ -5,6 +5,7 @@ type DocumentViewerProps = {
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
     zoom: number;
+    onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ type PageProps = {
         height: number;
     };
     onVisible: () => void;
+    onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
 {
 	"atlassian": {
 		"team": "Media Exif",
-		"runReact18": true,
 		"website": {
 			"name": "MediaDocumentViewer",
 			"category": "Layout and structure"
@@ -28,6 +27,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -45,6 +45,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"
 	},
@@ -84,7 +85,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.2.3",
+	"version": "0.3.1",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",