@atlaskit/media-document-viewer 0.6.10 → 0.7.0

package/dist/esm/page.js

@@ -6,12 +6,10 @@ 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,
@@ -74,7 +72,8 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     fonts = _ref4.fonts,
     pageIndex = _ref4.pageIndex,
     zoom = _ref4.zoom,
-    onImageLoad = _ref4.onImageLoad;
+    onImageLoad = _ref4.onImageLoad,
+    appendUpTo = _ref4.appendUpTo;
   var style = {};
   if (dimensions) {
     // contents endpoint has loaded so dimensions are available
@@ -106,7 +105,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !fg('media-document-viewer-clear-render') && "_1kemd8h4"])
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": "page-".concat(pageIndex, "-text-layer"),
     style: style,
@@ -123,20 +122,21 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   }), content.annotations && /*#__PURE__*/React.createElement(Annotations, {
     annotations: content.annotations
   }), content.links && /*#__PURE__*/React.createElement(DocumentLinks, {
-    links: content.links
+    links: content.links,
+    appendUpTo: appendUpTo
   })));
 });
 export var Page = function Page(_ref5) {
   var _ref6;
   var getPageSrc = _ref5.getPageSrc,
-    maxPageImageZoom = _ref5.maxPageImageZoom,
     content = _ref5.content,
     fonts = _ref5.fonts,
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
     onVisible = _ref5.onVisible,
-    onLoad = _ref5.onLoad;
+    onLoad = _ref5.onLoad,
+    appendUpTo = _ref5.appendUpTo;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     imageSrc = _useState2[0],
@@ -148,7 +148,7 @@ export var Page = function Page(_ref5) {
       rootMargin: '300%',
       threshold: 0.1
     }, function () {
-      onVisible();
+      onVisible(pageIndex);
       getPageSrc(pageIndex, zoom).then(setImageSrc);
     }),
     observedRef = _useIntersectionObser.observedRef,
@@ -162,7 +162,7 @@ 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 imageZoom = _zoom;
       var contentWidth = image.naturalWidth / imageZoom;
       var contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
@@ -184,6 +184,7 @@ export var Page = function Page(_ref5) {
     fonts: fonts,
     pageIndex: pageIndex,
     zoom: zoom,
-    onImageLoad: onImageLoad
+    onImageLoad: onImageLoad,
+    appendUpTo: appendUpTo
   });
 };

package/dist/esm/utils/useCachedGetImage.js

@@ -2,8 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useEffect, useRef } from 'react';
 import { useStaticCallback } from '@atlaskit/media-common';
-import { fg } from '@atlaskit/platform-feature-flags';
-export var useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPageImageZoom) {
+export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
   var imageUrlRefs = useRef({});
   useEffect(function () {
     return function () {
@@ -16,38 +15,37 @@ export var useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPa
   }, []);
   var getImageUrl = useStaticCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageNumber, zoom) {
-      var imageZoom, key, url, isBlobUrl, blob;
+      var key, url, isBlobUrl, blob;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            imageZoom = getImageZoom(zoom, maxPageImageZoom);
-            key = "".concat(pageNumber, "-").concat(imageZoom);
+            key = "".concat(pageNumber, "-").concat(zoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 4;
+              _context.next = 3;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 4:
-            _context.next = 6;
-            return getPageImageUrl(pageNumber, imageZoom);
-          case 6:
+          case 3:
+            _context.next = 5;
+            return getPageImageUrl(pageNumber, zoom);
+          case 5:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 13;
+              _context.next = 12;
               break;
             }
-            _context.next = 11;
+            _context.next = 10;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 11:
+          case 10:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 13:
+          case 12:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 15:
+          case 14:
           case "end":
             return _context.stop();
         }
@@ -58,21 +56,4 @@ export var useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPa
     };
   }());
   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/documentLinks.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type Link } from './types';
-export declare const DocumentLinks: ({ links }: {
+export declare const DocumentLinks: ({ links, appendUpTo, }: {
     links: readonly Link[];
+    appendUpTo?: (n: number) => void;
 }) => React.JSX.Element;

package/dist/types/documentViewer.d.ts

@@ -13,5 +13,11 @@ export type DocumentViewerProps = {
     maxPageImageZoom?: number;
     zoom: number;
     onSuccess?: () => void;
+    /**
+     * When true, renders an initial batch of pages and appends more as the user scrolls.
+     * Intended for large documents (e.g. large Excel previews).
+     * Default: false.
+     */
+    enableLazyPageRendering?: boolean;
 };
-export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, maxPageImageZoom, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, enableLazyPageRendering, }: DocumentViewerProps) => JSX.Element;

package/dist/types/page.d.ts

@@ -1,7 +1,6 @@
 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;
@@ -10,8 +9,15 @@ type PageProps = {
         width: number;
         height: number;
     };
-    onVisible: () => void;
+    onVisible: (pageIndex: number) => void;
     onLoad?: () => void;
+    /**
+     * Called when a local `#page-N` anchor inside this page is clicked.
+     * Fast-forwards the lazy page count so the target page exists in the DOM
+     * before the browser performs the native anchor scroll.
+     * Only provided when `enableLazyPageRendering` is true.
+     */
+    appendUpTo?: (n: number) => void;
 };
-export declare const Page: ({ getPageSrc, maxPageImageZoom, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, appendUpTo, }: PageProps) => JSX.Element;
 export {};

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

@@ -1,11 +1 @@
-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;
+export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>) => ((pageNumber: number, zoom: number) => Promise<string>);

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type Link } from './types';
-export declare const DocumentLinks: ({ links }: {
+export declare const DocumentLinks: ({ links, appendUpTo, }: {
     links: readonly Link[];
+    appendUpTo?: (n: number) => void;
 }) => React.JSX.Element;

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

@@ -13,5 +13,11 @@ export type DocumentViewerProps = {
     maxPageImageZoom?: number;
     zoom: number;
     onSuccess?: () => void;
+    /**
+     * When true, renders an initial batch of pages and appends more as the user scrolls.
+     * Intended for large documents (e.g. large Excel previews).
+     * Default: false.
+     */
+    enableLazyPageRendering?: boolean;
 };
-export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, maxPageImageZoom, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, enableLazyPageRendering, }: DocumentViewerProps) => JSX.Element;

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

@@ -1,7 +1,6 @@
 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;
@@ -10,8 +9,15 @@ type PageProps = {
         width: number;
         height: number;
     };
-    onVisible: () => void;
+    onVisible: (pageIndex: number) => void;
     onLoad?: () => void;
+    /**
+     * Called when a local `#page-N` anchor inside this page is clicked.
+     * Fast-forwards the lazy page count so the target page exists in the DOM
+     * before the browser performs the native anchor scroll.
+     * Only provided when `enableLazyPageRendering` is true.
+     */
+    appendUpTo?: (n: number) => void;
 };
-export declare const Page: ({ getPageSrc, maxPageImageZoom, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, appendUpTo, }: PageProps) => JSX.Element;
 export {};

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

@@ -1,11 +1 @@
-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;
+export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>) => ((pageNumber: number, zoom: number) => Promise<string>);

package/package.json

@@ -26,11 +26,10 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/media-common": "^13.0.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/media-common": "^13.3.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -47,11 +46,6 @@
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0"
 	},
-	"platform-feature-flags": {
-		"media-document-viewer-clear-render": {
-			"type": "boolean"
-		}
-	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [
@@ -88,7 +82,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.6.10",
+	"version": "0.7.0",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",