@atlaskit/media-document-viewer 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-document-viewer
 
+## 0.5.0
+
+### Minor Changes
+
+- [`3a4089c3a27b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a4089c3a27b3) -
+  Improve handling of zoom to take into account device DPI to prevent blurry images. Also update
+  form handling to show default pdfium rendered forms, and only show HTML input elements on focus.
+
 ## 0.4.4
 
 ### Patch Changes

package/dist/cjs/annotations.compiled.css

@@ -1,15 +1,25 @@
 
 ._19itglyw{border:none}._14zgglyw{resize:none}
+._18m915vq{overflow-y:hidden}
 ._19bvidpf{padding-left:0}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
+._ect41ttw{font-family:Arial}
 ._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
+._syaz1j28{color:transparent}
 ._u5f3idpf{padding-right:0}
 ._vchhusvi{box-sizing:border-box}
-._yv0e1ghl{grid-template-columns:1fr auto}
+._vwz410nf{line-height:1.25}
+._yv0e1ghl{grid-template-columns:1fr auto}
+._1chs1wug:focus{overflow-y:auto}
+._f8pjr3uz:focus{color:#000}
+._jomru67f:focus{background-color:#fff}
+._p6m71wug:focus{overflow-x:auto}

package/dist/cjs/annotations.js

@@ -12,8 +12,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 var formInputBaseStyles = null;
+
+/**
+ * By default, the visual pdf form elements are rendered by pdfium server side. Therefore we only
+ * show visibility of the html input if the user interacts with it. This allows us to show visually
+ * accurate PDF form elements while still allowing the user to interact with the input.
+ */
+var invisibleInputStyles = null;
 var textInputStyles = null;
 var foreignObjectProps = {
   xmlns: 'http://www.w3.org/1999/xhtml'
@@ -33,7 +41,7 @@ var TextInput = function TextInput(_ref) {
     value: value,
     type: "text",
     readOnly: true,
-    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq"])
+    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq", (0, _platformFeatureFlags.fg)('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
   }));
 };
 var TextInputFormField = exports.TextInputFormField = function TextInputFormField(_ref2) {
@@ -77,8 +85,8 @@ var ComboBoxFormField = exports.ComboBoxFormField = function ComboBoxFormField(_
       }
     },
     readOnly: true,
-    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_1bsb1osq"])
-  }), /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_1bsb1osq", (0, _platformFeatureFlags.fg)('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
+  }), !(0, _platformFeatureFlags.fg)('media-document-viewer-annotations') && /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
     label: "",
     size: "small"
   })));

package/dist/cjs/documentViewer.js

@@ -19,6 +19,7 @@ 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 DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
 var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
   var onSuccess = _ref.onSuccess,
@@ -26,12 +27,14 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
+    _ref$maxPageImageZoom = _ref.maxPageImageZoom,
+    maxPageImageZoom = _ref$maxPageImageZoom === void 0 ? DEFAULT_MAX_PAGE_IMAGE_ZOOM : _ref$maxPageImageZoom,
     zoom = _ref.zoom;
   var _usePageContent = (0, _usePageContent2.usePageContent)(getContent, paginationSize),
     getPageContent = _usePageContent.getPageContent,
     loadPageContent = _usePageContent.loadPageContent,
     documentMetadata = _usePageContent.documentMetadata;
-  var getImageUrl = (0, _useCachedGetImage.useCachedGetImage)(getPageImageUrl);
+  var getImageUrl = (0, _useCachedGetImage.useCachedGetImage)(getPageImageUrl, maxPageImageZoom);
   var style = {
     '--document-viewer-zoom': zoom
   };
@@ -75,6 +78,7 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
     return /*#__PURE__*/React.createElement(_page.Page, {
       key: i,
       getPageSrc: getImageUrl,
+      maxPageImageZoom: maxPageImageZoom,
       pageIndex: i,
       zoom: zoom,
       defaultDimensions: documentMetadata.defaultDimensions,

package/dist/cjs/page.js

@@ -14,10 +14,12 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _annotations = require("./annotations");
 var _documentLinks = require("./documentLinks");
 var _getDocumentRoot = require("./utils/getDocumentRoot");
+var _useCachedGetImage = require("./utils/useCachedGetImage");
 var _useIntersectionObserver = require("./utils/useIntersectionObserver");
 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 Span = function Span(_ref) {
@@ -67,6 +69,7 @@ var Line = function Line() {
 };
 var pageSvgStyles = null;
 var pageImageStyles = null;
+var pixelatedImageRendering = null;
 var pageSpinnerStyles = null;
 var pageWrapperStyles = null;
 var a4Dimensions = {
@@ -112,7 +115,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !(0, _platformFeatureFlags.fg)('media-document-viewer-clear-render') && "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": "page-".concat(pageIndex, "-text-layer"),
     style: style,
@@ -135,6 +138,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
 var Page = exports.Page = function Page(_ref5) {
   var _ref6;
   var getPageSrc = _ref5.getPageSrc,
+    maxPageImageZoom = _ref5.maxPageImageZoom,
     content = _ref5.content,
     fonts = _ref5.fonts,
     pageIndex = _ref5.pageIndex,
@@ -167,9 +171,12 @@ var Page = exports.Page = function Page(_ref5) {
     onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      var imageZoom = (0, _useCachedGetImage.getImageZoom)(_zoom, maxPageImageZoom);
+      var contentWidth = image.naturalWidth / imageZoom;
+      var contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
-        width: image.width / _zoom,
-        height: image.height / _zoom
+        width: contentWidth,
+        height: contentHeight
       });
     }
   });

package/dist/cjs/utils/useCachedGetImage.js

@@ -4,12 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getImageZoom = getImageZoom;
 exports.useCachedGetImage = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _mediaCommon = require("@atlaskit/media-common");
-var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPageImageZoom) {
   var imageUrlRefs = (0, _react.useRef)({});
   (0, _react.useEffect)(function () {
     return function () {
@@ -22,37 +24,38 @@ var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(g
   }, []);
   var getImageUrl = (0, _mediaCommon.useStaticCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageNumber, zoom) {
-      var key, url, isBlobUrl, blob;
+      var imageZoom, key, url, isBlobUrl, blob;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            key = "".concat(pageNumber, "-").concat(zoom);
+            imageZoom = getImageZoom(zoom, maxPageImageZoom);
+            key = "".concat(pageNumber, "-").concat(imageZoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 3;
+              _context.next = 4;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 3:
-            _context.next = 5;
-            return getPageImageUrl(pageNumber, zoom);
-          case 5:
+          case 4:
+            _context.next = 6;
+            return getPageImageUrl(pageNumber, imageZoom);
+          case 6:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 12;
+              _context.next = 13;
               break;
             }
-            _context.next = 10;
+            _context.next = 11;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 10:
+          case 11:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 12:
+          case 13:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 14:
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -63,4 +66,21 @@ var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(g
     };
   }());
   return getImageUrl;
-};
+};
+
+/**
+ * The actual zoom that will be requested from the image service.
+ *
+ * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
+ * We're achieving the same result as a srcset, crisp images for high DPI screens.
+ *
+ * We also reduce impact of excessively slow rendering by setting a max zoom level.
+ * If the user is zoomed past this level, the image will just be scaled-up client side.
+ */
+function getImageZoom(zoom, maxPageImageZoom) {
+  if (!(0, _platformFeatureFlags.fg)('media-document-viewer-clear-render')) {
+    return zoom;
+  }
+  var dpiAdjustedZoom = zoom * (window.devicePixelRatio || 1);
+  return Math.min(dpiAdjustedZoom, maxPageImageZoom);
+}

package/dist/es2019/annotations.compiled.css

@@ -1,15 +1,25 @@
 
 ._19itglyw{border:none}._14zgglyw{resize:none}
+._18m915vq{overflow-y:hidden}
 ._19bvidpf{padding-left:0}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
+._ect41ttw{font-family:Arial}
 ._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
+._syaz1j28{color:transparent}
 ._u5f3idpf{padding-right:0}
 ._vchhusvi{box-sizing:border-box}
-._yv0e1ghl{grid-template-columns:1fr auto}
+._vwz410nf{line-height:1.25}
+._yv0e1ghl{grid-template-columns:1fr auto}
+._1chs1wug:focus{overflow-y:auto}
+._f8pjr3uz:focus{color:#000}
+._jomru67f:focus{background-color:#fff}
+._p6m71wug:focus{overflow-x:auto}

package/dist/es2019/annotations.js

@@ -6,7 +6,15 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 const formInputBaseStyles = null;
+
+/**
+ * By default, the visual pdf form elements are rendered by pdfium server side. Therefore we only
+ * show visibility of the html input if the user interacts with it. This allows us to show visually
+ * accurate PDF form elements while still allowing the user to interact with the input.
+ */
+const invisibleInputStyles = null;
 const textInputStyles = null;
 const foreignObjectProps = {
   xmlns: 'http://www.w3.org/1999/xhtml'
@@ -26,7 +34,7 @@ const TextInput = ({
   value: value,
   type: "text",
   readOnly: true,
-  className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq"])
+  className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq", fg('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
 }));
 export const TextInputFormField = ({
   field,
@@ -75,8 +83,8 @@ export const ComboBoxFormField = ({
       }
     },
     readOnly: true,
-    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_1bsb1osq"])
-  }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_1bsb1osq", fg('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
+  }), !fg('media-document-viewer-annotations') && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small"
   })));

package/dist/es2019/documentViewer.js

@@ -9,11 +9,13 @@ import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 const documentViewerStyles = null;
 const DEFAULT_PAGINATION_SIZE = 50;
+const DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
 export const DocumentViewer = ({
   onSuccess,
   getContent,
   getPageImageUrl,
   paginationSize = DEFAULT_PAGINATION_SIZE,
+  maxPageImageZoom = DEFAULT_MAX_PAGE_IMAGE_ZOOM,
   zoom
 }) => {
   var _documentMetadata$pag;
@@ -22,7 +24,7 @@ export const DocumentViewer = ({
     loadPageContent,
     documentMetadata
   } = usePageContent(getContent, paginationSize);
-  const getImageUrl = useCachedGetImage(getPageImageUrl);
+  const getImageUrl = useCachedGetImage(getPageImageUrl, maxPageImageZoom);
   const style = {
     '--document-viewer-zoom': zoom
   };
@@ -67,6 +69,7 @@ export const DocumentViewer = ({
     return /*#__PURE__*/React.createElement(Page, {
       key: i,
       getPageSrc: getImageUrl,
+      maxPageImageZoom: maxPageImageZoom,
       pageIndex: i,
       zoom: zoom,
       defaultDimensions: documentMetadata.defaultDimensions,

package/dist/es2019/page.js

@@ -4,10 +4,12 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Annotations } from './annotations';
 import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
+import { getImageZoom } from './utils/useCachedGetImage';
 import { useIntersectionObserver } from './utils/useIntersectionObserver';
 const Span = ({
   span,
@@ -56,6 +58,7 @@ const Line = ({
 })));
 const pageSvgStyles = null;
 const pageImageStyles = null;
+const pixelatedImageRendering = null;
 const pageSpinnerStyles = null;
 const pageWrapperStyles = null;
 const a4Dimensions = {
@@ -102,7 +105,7 @@ const PageView = /*#__PURE__*/forwardRef(({
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !fg('media-document-viewer-clear-render') && "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": `page-${pageIndex}-text-layer`,
     style: style,
@@ -122,6 +125,7 @@ const PageView = /*#__PURE__*/forwardRef(({
 });
 export const Page = ({
   getPageSrc,
+  maxPageImageZoom,
   content,
   fonts,
   pageIndex,
@@ -151,9 +155,12 @@ export const Page = ({
     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     if (!content) {
       const zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      const imageZoom = getImageZoom(zoom, maxPageImageZoom);
+      const contentWidth = image.naturalWidth / imageZoom;
+      const contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
-        width: image.width / zoom,
-        height: image.height / zoom
+        width: contentWidth,
+        height: contentHeight
       });
     }
   });

package/dist/es2019/utils/useCachedGetImage.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
-export const useCachedGetImage = getPageImageUrl => {
+import { fg } from '@atlaskit/platform-feature-flags';
+export const useCachedGetImage = (getPageImageUrl, maxPageImageZoom) => {
   const imageUrlRefs = useRef({});
   useEffect(() => {
     return () => {
@@ -11,11 +12,12 @@ export const useCachedGetImage = getPageImageUrl => {
     };
   }, []);
   const getImageUrl = useStaticCallback(async (pageNumber, zoom) => {
-    const key = `${pageNumber}-${zoom}`;
+    const imageZoom = getImageZoom(zoom, maxPageImageZoom);
+    const key = `${pageNumber}-${imageZoom}`;
     if (imageUrlRefs.current[key]) {
       return imageUrlRefs.current[key];
     }
-    let url = await getPageImageUrl(pageNumber, zoom);
+    let url = await getPageImageUrl(pageNumber, imageZoom);
     const isBlobUrl = url.startsWith('blob:');
     if (!isBlobUrl) {
       const blob = await fetch(url).then(res => res.blob());
@@ -25,4 +27,21 @@ export const useCachedGetImage = getPageImageUrl => {
     return url;
   });
   return getImageUrl;
-};
+};
+
+/**
+ * The actual zoom that will be requested from the image service.
+ *
+ * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
+ * We're achieving the same result as a srcset, crisp images for high DPI screens.
+ *
+ * We also reduce impact of excessively slow rendering by setting a max zoom level.
+ * If the user is zoomed past this level, the image will just be scaled-up client side.
+ */
+export function getImageZoom(zoom, maxPageImageZoom) {
+  if (!fg('media-document-viewer-clear-render')) {
+    return zoom;
+  }
+  const dpiAdjustedZoom = zoom * (window.devicePixelRatio || 1);
+  return Math.min(dpiAdjustedZoom, maxPageImageZoom);
+}

package/dist/esm/annotations.compiled.css

@@ -1,15 +1,25 @@
 
 ._19itglyw{border:none}._14zgglyw{resize:none}
+._18m915vq{overflow-y:hidden}
 ._19bvidpf{padding-left:0}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
+._ect41ttw{font-family:Arial}
 ._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
+._syaz1j28{color:transparent}
 ._u5f3idpf{padding-right:0}
 ._vchhusvi{box-sizing:border-box}
-._yv0e1ghl{grid-template-columns:1fr auto}
+._vwz410nf{line-height:1.25}
+._yv0e1ghl{grid-template-columns:1fr auto}
+._1chs1wug:focus{overflow-y:auto}
+._f8pjr3uz:focus{color:#000}
+._jomru67f:focus{background-color:#fff}
+._p6m71wug:focus{overflow-x:auto}

package/dist/esm/annotations.js

@@ -7,7 +7,15 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 var formInputBaseStyles = null;
+
+/**
+ * By default, the visual pdf form elements are rendered by pdfium server side. Therefore we only
+ * show visibility of the html input if the user interacts with it. This allows us to show visually
+ * accurate PDF form elements while still allowing the user to interact with the input.
+ */
+var invisibleInputStyles = null;
 var textInputStyles = null;
 var foreignObjectProps = {
   xmlns: 'http://www.w3.org/1999/xhtml'
@@ -27,7 +35,7 @@ var TextInput = function TextInput(_ref) {
     value: value,
     type: "text",
     readOnly: true,
-    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq"])
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_kqswstnw _4t3i1osq _vchhusvi _1bsb1osq", fg('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
   }));
 };
 export var TextInputFormField = function TextInputFormField(_ref2) {
@@ -71,8 +79,8 @@ export var ComboBoxFormField = function ComboBoxFormField(_ref3) {
       }
     },
     readOnly: true,
-    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw _14zgglyw", "_1bsb1osq"])
-  }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _ect41ttw _vwz410nf _r06hglyw _14zgglyw", "_1bsb1osq", fg('media-document-viewer-annotations') && "_1reo15vq _18m915vq _bfhk1j28 _syaz1j28 _p6m71wug _1chs1wug _jomru67f _f8pjr3uz"])
+  }), !fg('media-document-viewer-annotations') && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small"
   })));

package/dist/esm/documentViewer.js

@@ -10,6 +10,7 @@ import { getScrollElement } from './utils/getDocumentRoot';
 import { useCachedGetImage } from './utils/useCachedGetImage';
 var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
+var DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
 export var DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
   var onSuccess = _ref.onSuccess,
@@ -17,12 +18,14 @@ export var DocumentViewer = function DocumentViewer(_ref) {
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
+    _ref$maxPageImageZoom = _ref.maxPageImageZoom,
+    maxPageImageZoom = _ref$maxPageImageZoom === void 0 ? DEFAULT_MAX_PAGE_IMAGE_ZOOM : _ref$maxPageImageZoom,
     zoom = _ref.zoom;
   var _usePageContent = usePageContent(getContent, paginationSize),
     getPageContent = _usePageContent.getPageContent,
     loadPageContent = _usePageContent.loadPageContent,
     documentMetadata = _usePageContent.documentMetadata;
-  var getImageUrl = useCachedGetImage(getPageImageUrl);
+  var getImageUrl = useCachedGetImage(getPageImageUrl, maxPageImageZoom);
   var style = {
     '--document-viewer-zoom': zoom
   };
@@ -66,6 +69,7 @@ export var DocumentViewer = function DocumentViewer(_ref) {
     return /*#__PURE__*/React.createElement(Page, {
       key: i,
       getPageSrc: getImageUrl,
+      maxPageImageZoom: maxPageImageZoom,
       pageIndex: i,
       zoom: zoom,
       defaultDimensions: documentMetadata.defaultDimensions,

package/dist/esm/page.js

@@ -6,10 +6,12 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Annotations } from './annotations';
 import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
+import { getImageZoom } from './utils/useCachedGetImage';
 import { useIntersectionObserver } from './utils/useIntersectionObserver';
 var Span = function Span(_ref) {
   var span = _ref.span,
@@ -58,6 +60,7 @@ var Line = function Line() {
 };
 var pageSvgStyles = null;
 var pageImageStyles = null;
+var pixelatedImageRendering = null;
 var pageSpinnerStyles = null;
 var pageWrapperStyles = null;
 var a4Dimensions = {
@@ -103,7 +106,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !fg('media-document-viewer-clear-render') && "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": "page-".concat(pageIndex, "-text-layer"),
     style: style,
@@ -126,6 +129,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
 export var Page = function Page(_ref5) {
   var _ref6;
   var getPageSrc = _ref5.getPageSrc,
+    maxPageImageZoom = _ref5.maxPageImageZoom,
     content = _ref5.content,
     fonts = _ref5.fonts,
     pageIndex = _ref5.pageIndex,
@@ -158,9 +162,12 @@ export var Page = function Page(_ref5) {
     onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      var imageZoom = getImageZoom(_zoom, maxPageImageZoom);
+      var contentWidth = image.naturalWidth / imageZoom;
+      var contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
-        width: image.width / _zoom,
-        height: image.height / _zoom
+        width: contentWidth,
+        height: contentHeight
       });
     }
   });

package/dist/esm/utils/useCachedGetImage.js

@@ -2,7 +2,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useEffect, useRef } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
-export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
+import { fg } from '@atlaskit/platform-feature-flags';
+export var useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPageImageZoom) {
   var imageUrlRefs = useRef({});
   useEffect(function () {
     return function () {
@@ -15,37 +16,38 @@ export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
   }, []);
   var getImageUrl = useStaticCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageNumber, zoom) {
-      var key, url, isBlobUrl, blob;
+      var imageZoom, key, url, isBlobUrl, blob;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            key = "".concat(pageNumber, "-").concat(zoom);
+            imageZoom = getImageZoom(zoom, maxPageImageZoom);
+            key = "".concat(pageNumber, "-").concat(imageZoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 3;
+              _context.next = 4;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 3:
-            _context.next = 5;
-            return getPageImageUrl(pageNumber, zoom);
-          case 5:
+          case 4:
+            _context.next = 6;
+            return getPageImageUrl(pageNumber, imageZoom);
+          case 6:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 12;
+              _context.next = 13;
               break;
             }
-            _context.next = 10;
+            _context.next = 11;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 10:
+          case 11:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 12:
+          case 13:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 14:
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -56,4 +58,21 @@ export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
     };
   }());
   return getImageUrl;
-};
+};
+
+/**
+ * The actual zoom that will be requested from the image service.
+ *
+ * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
+ * We're achieving the same result as a srcset, crisp images for high DPI screens.
+ *
+ * We also reduce impact of excessively slow rendering by setting a max zoom level.
+ * If the user is zoomed past this level, the image will just be scaled-up client side.
+ */
+export function getImageZoom(zoom, maxPageImageZoom) {
+  if (!fg('media-document-viewer-clear-render')) {
+    return zoom;
+  }
+  var dpiAdjustedZoom = zoom * (window.devicePixelRatio || 1);
+  return Math.min(dpiAdjustedZoom, maxPageImageZoom);
+}

package/dist/types/documentViewer.d.ts

@@ -1,10 +1,17 @@
 import { type PageRangeContent } from './types';
-type DocumentViewerProps = {
+export type DocumentViewerProps = {
     getContent: (pageStart: number, pageEnd: number) => Promise<PageRangeContent>;
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
+    /**
+     * The maximum zoom level that will be requested from the image service.
+     * This is used to prevent the page from being too large to render server side in a reasonable time.
+     *
+     * The 'zoom' prop can still be greater than this value, but the server side image service will return
+     * a smaller image and the image will be scaled-up client side.
+     */
+    maxPageImageZoom?: number;
     zoom: number;
     onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
-export {};
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, maxPageImageZoom, zoom, }: DocumentViewerProps) => JSX.Element;

package/dist/types/page.d.ts

@@ -1,6 +1,7 @@
 import { type Font, type PageContent } from './types';
 type PageProps = {
     getPageSrc: (pageIndex: number, zoom: number) => Promise<string>;
+    maxPageImageZoom: number;
     content?: PageContent;
     fonts: readonly Font[];
     pageIndex: number;
@@ -12,5 +13,5 @@ type PageProps = {
     onVisible: () => void;
     onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, maxPageImageZoom, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

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

@@ -1 +1,11 @@
-export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>) => (pageNumber: number, zoom: number) => Promise<string>;
+export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>, maxPageImageZoom: number) => (pageNumber: number, zoom: number) => Promise<string>;
+/**
+ * The actual zoom that will be requested from the image service.
+ *
+ * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
+ * We're achieving the same result as a srcset, crisp images for high DPI screens.
+ *
+ * We also reduce impact of excessively slow rendering by setting a max zoom level.
+ * If the user is zoomed past this level, the image will just be scaled-up client side.
+ */
+export declare function getImageZoom(zoom: number, maxPageImageZoom: number): number;

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

@@ -1,10 +1,17 @@
 import { type PageRangeContent } from './types';
-type DocumentViewerProps = {
+export type DocumentViewerProps = {
     getContent: (pageStart: number, pageEnd: number) => Promise<PageRangeContent>;
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
+    /**
+     * The maximum zoom level that will be requested from the image service.
+     * This is used to prevent the page from being too large to render server side in a reasonable time.
+     *
+     * The 'zoom' prop can still be greater than this value, but the server side image service will return
+     * a smaller image and the image will be scaled-up client side.
+     */
+    maxPageImageZoom?: number;
     zoom: number;
     onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
-export {};
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, maxPageImageZoom, zoom, }: DocumentViewerProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import { type Font, type PageContent } from './types';
 type PageProps = {
     getPageSrc: (pageIndex: number, zoom: number) => Promise<string>;
+    maxPageImageZoom: number;
     content?: PageContent;
     fonts: readonly Font[];
     pageIndex: number;
@@ -12,5 +13,5 @@ type PageProps = {
     onVisible: () => void;
     onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, maxPageImageZoom, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

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

@@ -1 +1,11 @@
-export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>) => (pageNumber: number, zoom: number) => Promise<string>;
+export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>, maxPageImageZoom: number) => (pageNumber: number, zoom: number) => Promise<string>;
+/**
+ * The actual zoom that will be requested from the image service.
+ *
+ * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
+ * We're achieving the same result as a srcset, crisp images for high DPI screens.
+ *
+ * We also reduce impact of excessively slow rendering by setting a max zoom level.
+ * If the user is zoomed past this level, the image will just be scaled-up client side.
+ */
+export declare function getImageZoom(zoom: number, maxPageImageZoom: number): number;

package/package.json

@@ -28,6 +28,7 @@
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/media-common": "^12.3.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^7.0.0",
@@ -41,10 +42,19 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0"
 	},
+	"platform-feature-flags": {
+		"media-document-viewer-clear-render": {
+			"type": "boolean"
+		},
+		"media-document-viewer-annotations": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [
@@ -81,7 +91,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.4.4",
+	"version": "0.5.0",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",