@atlaskit/media-document-viewer 0.1.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/media-document-viewer

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1,9 @@
+# MediaDocumentViewer
+
+Modern and fast document viewer
+
+## Usage
+
+`import MediaDocumentViewer from '@atlaskit/media-document-viewer';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/media/media-document-viewer).

package/dist/cjs/documentViewer.compiled.css

@@ -0,0 +1,9 @@
+
+._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}

package/dist/cjs/documentViewer.js

@@ -0,0 +1,56 @@
+/* documentViewer.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocumentViewer = void 0;
+require("./documentViewer.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _page = require("./page");
+var _usePageContent2 = require("./usePageContent");
+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,
+    getPageImageUrl = _ref.getPageImageUrl,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
+    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 style = {
+    '--document-viewer-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"])
+  }, (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,
+      fonts = _getPageContent.fonts;
+    return /*#__PURE__*/React.createElement(_page.Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: function onVisible() {
+        return loadPageContent(i);
+      },
+      fonts: fonts,
+      content: page
+    });
+  }));
+};

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DOCUMENT_SCROLL_ROOT_ID", {
+  enumerable: true,
+  get: function get() {
+    return _getDocumentRoot.DOCUMENT_SCROLL_ROOT_ID;
+  }
+});
+Object.defineProperty(exports, "DocumentViewer", {
+  enumerable: true,
+  get: function get() {
+    return _documentViewer.DocumentViewer;
+  }
+});
+var _documentViewer = require("./documentViewer");
+var _getDocumentRoot = require("./utils/getDocumentRoot");

package/dist/cjs/page.compiled.css

@@ -0,0 +1,11 @@
+._154iidpf{top:0}
+._1kemd8h4{image-rendering:pixelated}
+._1ltvidpf{left:0}
+._80om1kdv{cursor:text}
+._bfhku67f{background-color:#fff}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lswu1j28{fill:transparent}
+._o572qvpr{white-space:pre}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/cjs/page.js

@@ -0,0 +1,162 @@
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Page = void 0;
+require("./page.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _getDocumentRoot = require("./utils/getDocumentRoot");
+var _useIntersectionObserver = require("./utils/useIntersectionObserver");
+var _useStaticCallback = require("./utils/useStaticCallback");
+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) {
+  var span = _ref.span,
+    font = _ref.font;
+  var width = span.l;
+  var height = span.h;
+  if (width <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("tspan", {
+    lengthAdjust: "spacingAndGlyphs",
+    x: span.x,
+    y: "-".concat(span.y),
+    height: height,
+    textLength: width,
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'fontFamily', "".concat(font.name)), 'fontSize', "".concat(font.size === 1 ? height : font.size, "px"))
+  }, span.text);
+};
+var textStyles = null;
+var Line = function Line() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      spans: [],
+      rotation: 0,
+      fonts: []
+    },
+    spans = _ref3.spans,
+    rotation = _ref3.rotation,
+    fonts = _ref3.fonts,
+    dataTestId = _ref3.dataTestId;
+  return /*#__PURE__*/React.createElement("text", {
+    opacity: "0.5",
+    // eslint-disable-next-line react/no-unknown-property
+    "transform-origin": "".concat(spans[0].x, " -").concat(spans[0].y),
+    style: {
+      transform: "rotate(".concat(rotation, "rad)")
+    },
+    "data-testid": dataTestId,
+    className: (0, _runtime.ax)(["_o572qvpr"])
+  }, spans.map(function (span, i) {
+    return /*#__PURE__*/React.createElement(Span, {
+      span: span,
+      font: fonts[span.fi],
+      key: i
+    });
+  }));
+};
+var pageSvgStyles = null;
+var pageImageStyles = null;
+var pageWrapperStyles = null;
+var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var dimensions = _ref4.dimensions,
+    imageSrc = _ref4.imageSrc,
+    content = _ref4.content,
+    fonts = _ref4.fonts,
+    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'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: style,
+    "data-testid": "page-".concat(pageIndex),
+    className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f"])
+  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    style: style,
+    "data-testid": "page-".concat(pageIndex, "-image"),
+    "data-zoom": zoom,
+    src: imageSrc,
+    alt: "",
+    onLoad: onImageLoad,
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+  }), content && /*#__PURE__*/React.createElement("svg", {
+    "data-testid": "page-".concat(pageIndex, "-text-layer"),
+    style: style,
+    viewBox: "0 -".concat(content.height, " ").concat(content.width, " ").concat(content.height),
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
+  }, content.lines.map(function (line, i) {
+    return /*#__PURE__*/React.createElement(Line, {
+      dataTestId: "page-".concat(pageIndex, "-line-").concat(i),
+      spans: line.spans,
+      rotation: line.r,
+      fonts: fonts,
+      key: i
+    });
+  })));
+});
+var Page = exports.Page = function Page(_ref5) {
+  var _ref6;
+  var getPageSrc = _ref5.getPageSrc,
+    content = _ref5.content,
+    fonts = _ref5.fonts,
+    pageIndex = _ref5.pageIndex,
+    zoom = _ref5.zoom,
+    defaultDimensions = _ref5.defaultDimensions,
+    onVisible = _ref5.onVisible;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    imageSrc = _useState2[0],
+    setImageSrc = _useState2[1];
+  var _useIntersectionObser = (0, _useIntersectionObserver.useIntersectionObserver)({
+      root: (0, _getDocumentRoot.getDocumentRoot)(),
+      // this will load the page 3 pages before or after the current page
+      // ensuring that the page is loaded before the user scrolls to it
+      rootMargin: '300%',
+      threshold: 0.1
+    }, function () {
+      onVisible();
+      getPageSrc(pageIndex, zoom).then(setImageSrc);
+    }),
+    observedRef = _useIntersectionObser.observedRef,
+    isVisibleRef = _useIntersectionObser.isVisibleRef;
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  var onImageLoad = (0, _useStaticCallback.useStaticCallback)(function (event) {
+    var image = event.currentTarget;
+    if (!content) {
+      var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      setDimensions({
+        width: image.width / _zoom,
+        height: image.height / _zoom
+      });
+    }
+  });
+  (0, _react.useEffect)(function () {
+    if (isVisibleRef.current) {
+      getPageSrc(pageIndex, zoom).then(setImageSrc);
+    }
+  }, [isVisibleRef, pageIndex, zoom, getPageSrc]);
+  return /*#__PURE__*/React.createElement(PageView, {
+    ref: observedRef,
+    dimensions: (_ref6 = content !== null && content !== void 0 ? content : dimensions) !== null && _ref6 !== void 0 ? _ref6 : defaultDimensions,
+    imageSrc: imageSrc,
+    content: content,
+    fonts: fonts,
+    pageIndex: pageIndex,
+    zoom: zoom,
+    onImageLoad: onImageLoad
+  });
+};

package/dist/cjs/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/usePageContent.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageContent = usePageContent;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useStaticCallback = require("./utils/useStaticCallback");
+function usePageContent(getContent, paginationSize) {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    contentRanges = _useState2[0],
+    setContentRanges = _useState2[1];
+  var contentRangesRequestRef = (0, _react.useRef)({});
+  var loadPageContent = (0, _useStaticCallback.useStaticCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageInd) {
+      var _contentRangesRequest, _contentRangesRequest2;
+      var contentRangeInd, startIndex, endIndex, content;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            contentRangeInd = Math.floor(pageInd / paginationSize); // Content already loaded for this page range
+            if (!contentRanges[contentRangeInd]) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            startIndex = contentRangeInd * paginationSize;
+            endIndex = startIndex + paginationSize;
+            (_contentRangesRequest2 = (_contentRangesRequest = contentRangesRequestRef.current)[contentRangeInd]) !== null && _contentRangesRequest2 !== void 0 ? _contentRangesRequest2 : _contentRangesRequest[contentRangeInd] = getContent(startIndex, endIndex);
+            _context.next = 8;
+            return contentRangesRequestRef.current[contentRangeInd];
+          case 8:
+            content = _context.sent;
+            setContentRanges(function (prev) {
+              var newRanges = (0, _toConsumableArray2.default)(prev);
+              newRanges[contentRangeInd] = content;
+              return newRanges;
+            });
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  function getPageContent(pageInd) {
+    var _contentRanges$conten, _contentRanges$conten2;
+    var contentRangeInd = Math.floor(pageInd / paginationSize);
+    var page = (_contentRanges$conten = contentRanges[contentRangeInd]) === null || _contentRanges$conten === void 0 ? void 0 : _contentRanges$conten.pages[pageInd % paginationSize];
+    var fonts = (_contentRanges$conten2 = contentRanges[contentRangeInd]) === null || _contentRanges$conten2 === void 0 ? void 0 : _contentRanges$conten2.fonts;
+    return {
+      page: page,
+      fonts: fonts
+    };
+  }
+  var documentMetadata = (0, _react.useMemo)(function () {
+    var _contentRanges$, _contentRanges$0$tota, _contentRanges$2;
+    return {
+      defaultDimensions: (_contentRanges$ = contentRanges[0]) !== null && _contentRanges$ !== void 0 && _contentRanges$.pages[0] ? {
+        height: contentRanges[0].pages[0].height,
+        width: contentRanges[0].pages[0].width
+      } : undefined,
+      pageCount: (_contentRanges$0$tota = (_contentRanges$2 = contentRanges[0]) === null || _contentRanges$2 === void 0 ? void 0 : _contentRanges$2.total_pages) !== null && _contentRanges$0$tota !== void 0 ? _contentRanges$0$tota : 4
+    };
+  }, [contentRanges]);
+  return {
+    getPageContent: getPageContent,
+    loadPageContent: loadPageContent,
+    documentMetadata: documentMetadata
+  };
+}

package/dist/cjs/utils/getDocumentRoot.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDocumentRoot = exports.DOCUMENT_SCROLL_ROOT_ID = void 0;
+var DOCUMENT_SCROLL_ROOT_ID = exports.DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
+var getDocumentRoot = exports.getDocumentRoot = function getDocumentRoot() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+  var root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  if (root) {
+    return root;
+  }
+  return window.document;
+};

package/dist/cjs/utils/useCachedGetImage.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCachedGetImage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _useStaticCallback = require("./useStaticCallback");
+var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
+  var imageUrlRefs = (0, _react.useRef)({});
+  var getImageUrl = (0, _useStaticCallback.useStaticCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageNumber, zoom) {
+      var 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);
+            if (!imageUrlRefs.current[key]) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return", imageUrlRefs.current[key]);
+          case 3:
+            _context.next = 5;
+            return getPageImageUrl(pageNumber, zoom);
+          case 5:
+            url = _context.sent;
+            isBlobUrl = url.startsWith('blob:');
+            if (isBlobUrl) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 10;
+            return fetch(url).then(function (res) {
+              return res.blob();
+            });
+          case 10:
+            blob = _context.sent;
+            url = URL.createObjectURL(blob);
+          case 12:
+            imageUrlRefs.current[key] = url;
+            return _context.abrupt("return", url);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  return getImageUrl;
+};

package/dist/cjs/utils/useIntersectionObserver.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIntersectionObserver = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useStaticCallback = require("./useStaticCallback");
+var useIntersectionObserver = exports.useIntersectionObserver = function useIntersectionObserver(options, onVisible) {
+  var staticOnVisible = (0, _useStaticCallback.useStaticCallback)(onVisible);
+  var observerRef = (0, _react.useRef)(null);
+  var timeoutRef = (0, _react.useRef)(null);
+  var isVisibleRef = (0, _react.useRef)(false);
+  var currentNodeRef = (0, _react.useRef)(null);
+  var observedRef = (0, _useStaticCallback.useStaticCallback)(function (node) {
+    currentNodeRef.current = node;
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (node) {
+      observerRef.current = new IntersectionObserver(function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+        if (entry.isIntersecting && !isVisibleRef.current) {
+          isVisibleRef.current = true;
+          timeoutRef.current = setTimeout(function () {
+            if (isVisibleRef.current) {
+              staticOnVisible();
+              timeoutRef.current = null;
+            }
+          }, 100);
+        }
+        if (!entry.isIntersecting && isVisibleRef.current) {
+          isVisibleRef.current = false;
+        }
+        if (!entry.isIntersecting && isVisibleRef.current && timeoutRef.current) {
+          isVisibleRef.current = false;
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+      }, options);
+      observerRef.current.observe(node);
+    }
+  });
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    observedRef: observedRef,
+    isVisibleRef: isVisibleRef
+  };
+};

package/dist/cjs/utils/useStaticCallback.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStaticCallback = void 0;
+var _react = require("react");
+var useStaticCallback = exports.useStaticCallback = function useStaticCallback(callback) {
+  var callbackRef = (0, _react.useRef)(callback);
+  callbackRef.current = callback;
+  return (0, _react.useCallback)(function () {
+    return callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+};

package/dist/es2019/documentViewer.compiled.css

@@ -0,0 +1,9 @@
+
+._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}

package/dist/es2019/documentViewer.js

@@ -0,0 +1,46 @@
+/* documentViewer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./documentViewer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Page } from './page';
+import { usePageContent } from './usePageContent';
+import { useCachedGetImage } from './utils/useCachedGetImage';
+const documentViewerStyles = null;
+const DEFAULT_PAGINATION_SIZE = 50;
+export const DocumentViewer = ({
+  getContent,
+  getPageImageUrl,
+  paginationSize = DEFAULT_PAGINATION_SIZE,
+  zoom
+}) => {
+  var _documentMetadata$pag;
+  const {
+    getPageContent,
+    loadPageContent,
+    documentMetadata
+  } = usePageContent(getContent, paginationSize);
+  const getImageUrl = useCachedGetImage(getPageImageUrl);
+  const style = {
+    '--document-viewer-zoom': zoom
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o"])
+  }, [...Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)].map((_, i) => {
+    const {
+      page,
+      fonts
+    } = getPageContent(i);
+    return /*#__PURE__*/React.createElement(Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: () => loadPageContent(i),
+      fonts: fonts,
+      content: page
+    });
+  }));
+};

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { DocumentViewer } from './documentViewer';
+export { DOCUMENT_SCROLL_ROOT_ID } from './utils/getDocumentRoot';

package/dist/es2019/page.compiled.css

@@ -0,0 +1,11 @@
+._154iidpf{top:0}
+._1kemd8h4{image-rendering:pixelated}
+._1ltvidpf{left:0}
+._80om1kdv{cursor:text}
+._bfhku67f{background-color:#fff}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lswu1j28{fill:transparent}
+._o572qvpr{white-space:pre}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}