@atlaskit/media-document-viewer 0.7.2 → 1.0.1

package/AGENTS.md

@@ -0,0 +1,58 @@
+# media-document-viewer — Agent Guide
+
+> **Parent guide:** Always read [`../AGENTS.md`](../AGENTS.md) before working in this package — it
+> contains workspace-wide rules covering platform guidelines, changeset workflow, accessibility
+> standards, and the knowledge index protocol that applies to every Media package.
+
+## Package identity
+
+| Field    | Value                                                                                                  |
+| -------- | ------------------------------------------------------------------------------------------------------ |
+| NPM name | `@atlaskit/media-document-viewer`                                                                      |
+| Path     | `media-document-viewer/`                                                                               |
+| Owner    | Media Exif                                                                                             |
+| Purpose  | Modern and fast document viewer — renders paginated document previews with annotation and link support |
+
+## Knowledge index
+
+> Read, search, edit, investigate, and validate the repository knowledge index at
+> `.agents/knowledge-index/`. ALWAYS use this skill before making ANY repo change, or when exploring
+> the codebase. The knowledge index is the canonical starting point for every coding task in this
+> repo, trigger this skill aggressively whenever the user mentions architecture, conventions,
+> packages, modules, services, build, coding, writing code, APIs, feature flags, testing, or
+> anything similar. Also trigger when "is the knowledge index up to date?" / "update the knowledge
+> index" / "what does the knowledge index say about Y?" — even if they don't say the words
+> "knowledge index". Also use it (via the `validate` subcommand) to detect drift between the
+> codebase and the docs after any code change. Use the `generate` subcommand to bootstrap the index
+> in a new repository.
+
+**Entry point:** `.agents/knowledge-index/INDEX.md`
+**Unit doc:** `.agents/knowledge-index/domains/media/units/atlaskit-media-document-viewer.md`
+**Standards page:** `.agents/knowledge-index/domains/media/units/atlaskit-media-document-viewer/standards-and-patterns.md`
+**CLI:** `python3 .agents/skills/knowledge-index/scripts/kg.py {find,read,edit,investigate,validate,init,explore,generate} …`
+**Refresh protocol:** never silently bump `Last verified` — always re-read the listed `Sources` first, edit, then `kg.py edit <path> --message "<reason>"`.
+
+## Key source files
+
+- `src/index.ts` — public API entry point
+- `src/documentViewer.tsx` — main `DocumentViewer` component
+- `src/page.tsx` — individual page rendering
+- `src/annotations.tsx` — annotation overlay
+- `src/documentLinks.tsx` — document link handling
+- `src/usePageContent.ts` — hook for page content fetching
+- `src/utils/` — utilities
+- `__tests__/playwright/` — Playwright integration tests
+- `__tests__/vr-tests/` — visual regression tests
+
+## Public API (key exports)
+
+`DocumentViewer`, `DOCUMENT_SCROLL_ROOT_ID`
+
+## Development notes
+
+- Only internal dependency: `@atlaskit/media-common`
+- No feature flags registered in this package
+- Peer dependency: `react`
+- Has both Playwright and VR test suites
+- All new behaviour changes must be behind a feature gate (`fg()` from
+  `@atlaskit/platform-feature-flags`)

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/media-document-viewer
 
+## 1.0.1
+
+### Patch Changes
+
+- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
+  Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
+  gating.
+- Updated dependencies
+
+## 1.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/cjs/usePageContent.js

@@ -21,29 +21,29 @@ function usePageContent(getContent, paginationSize) {
     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) {
+      return _regenerator.default.wrap(function (_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;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return");
-          case 3:
+          case 1:
             startIndex = contentRangeInd * paginationSize;
             endIndex = startIndex + paginationSize;
             (_contentRangesRequest2 = (_contentRangesRequest = contentRangesRequestRef.current)[contentRangeInd]) !== null && _contentRangesRequest2 !== void 0 ? _contentRangesRequest2 : _contentRangesRequest[contentRangeInd] = getContent(startIndex, endIndex);
-            _context.next = 8;
+            _context.next = 2;
             return contentRangesRequestRef.current[contentRangeInd];
-          case 8:
+          case 2:
             content = _context.sent;
             setContentRanges(function (prev) {
               var newRanges = (0, _toConsumableArray2.default)(prev);
               newRanges[contentRangeInd] = content;
               return newRanges;
             });
-          case 10:
+          case 3:
           case "end":
             return _context.stop();
         }

package/dist/cjs/utils/useCachedGetImage.js

@@ -23,36 +23,36 @@ 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;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             key = "".concat(pageNumber, "-").concat(zoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 3;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 3:
-            _context.next = 5;
+          case 1:
+            _context.next = 2;
             return getPageImageUrl(pageNumber, zoom);
-          case 5:
+          case 2:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 12;
+              _context.next = 4;
               break;
             }
-            _context.next = 10;
+            _context.next = 3;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 10:
+          case 3:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 12:
+          case 4:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 14:
+          case 5:
           case "end":
             return _context.stop();
         }

package/dist/esm/usePageContent.js

@@ -14,29 +14,29 @@ export function usePageContent(getContent, paginationSize) {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageInd) {
       var _contentRangesRequest, _contentRangesRequest2;
       var contentRangeInd, startIndex, endIndex, content;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_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;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return");
-          case 3:
+          case 1:
             startIndex = contentRangeInd * paginationSize;
             endIndex = startIndex + paginationSize;
             (_contentRangesRequest2 = (_contentRangesRequest = contentRangesRequestRef.current)[contentRangeInd]) !== null && _contentRangesRequest2 !== void 0 ? _contentRangesRequest2 : _contentRangesRequest[contentRangeInd] = getContent(startIndex, endIndex);
-            _context.next = 8;
+            _context.next = 2;
             return contentRangesRequestRef.current[contentRangeInd];
-          case 8:
+          case 2:
             content = _context.sent;
             setContentRanges(function (prev) {
               var newRanges = _toConsumableArray(prev);
               newRanges[contentRangeInd] = content;
               return newRanges;
             });
-          case 10:
+          case 3:
           case "end":
             return _context.stop();
         }

package/dist/esm/utils/useCachedGetImage.js

@@ -16,36 +16,36 @@ 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;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             key = "".concat(pageNumber, "-").concat(zoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 3;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 3:
-            _context.next = 5;
+          case 1:
+            _context.next = 2;
             return getPageImageUrl(pageNumber, zoom);
-          case 5:
+          case 2:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 12;
+              _context.next = 4;
               break;
             }
-            _context.next = 10;
+            _context.next = 3;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 10:
+          case 3:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 12:
+          case 4:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 14:
+          case 5:
           case "end":
             return _context.stop();
         }

package/package.json

@@ -18,25 +18,18 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <5.4": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/browser-apis": "^0.0.2",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/media-common": "^13.3.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/browser-apis": "^1.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/media-common": "^14.1.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/spinner": "^20.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -47,11 +40,11 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlassian/a11y-jest-testing": "^0.11.0",
+		"@atlassian/a11y-jest-testing": "^0.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -90,7 +83,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.7.2",
+	"version": "1.0.1",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

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

@@ -1,12 +0,0 @@
-import { type ComboBoxField, type PageAnnotations, type TextField } from './types';
-export declare const TextInputFormField: ({ field, dataTestId, }: {
-    field: TextField;
-    dataTestId?: string;
-}) => JSX.Element;
-export declare const ComboBoxFormField: ({ field, dataTestId, }: {
-    field: ComboBoxField;
-    dataTestId?: string;
-}) => JSX.Element;
-export declare const Annotations: ({ annotations }: {
-    annotations: PageAnnotations;
-}) => JSX.Element;

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

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

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

@@ -1,23 +0,0 @@
-import { type PageRangeContent } from './types';
-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;
-    /**
-     * 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, zoom, enableLazyPageRendering, }: DocumentViewerProps) => JSX.Element;

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

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

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

@@ -1,23 +0,0 @@
-import { type Font, type PageContent } from './types';
-type PageProps = {
-    getPageSrc: (pageIndex: number, zoom: number) => Promise<string>;
-    content?: PageContent;
-    fonts: readonly Font[];
-    pageIndex: number;
-    zoom: number;
-    defaultDimensions?: {
-        width: number;
-        height: number;
-    };
-    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, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, appendUpTo, }: PageProps) => JSX.Element;
-export {};

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

@@ -1,80 +0,0 @@
-export type Font = {
-    name: string;
-    size: number;
-    weight: number;
-    is_all_caps: boolean;
-    is_bold_reenforced: boolean;
-    is_cursive: boolean;
-    is_fixed_pitch: boolean;
-    is_italic: boolean;
-    is_non_symbolic: boolean;
-    is_proportional_pitch: boolean;
-    is_sans_serif: boolean;
-    is_serif: boolean;
-    is_small_caps: boolean;
-    is_symbolic: boolean;
-};
-export type Span = {
-    text: string;
-    fi: number;
-    r: number;
-    x: number;
-    y: number;
-    h: number;
-    l: number;
-};
-export type Line = {
-    r: number;
-    spans: readonly Span[];
-};
-export type PageContent = {
-    rotation: number;
-    width: number;
-    height: number;
-    lines: readonly Line[];
-    annotations?: PageAnnotations;
-    links?: readonly Link[];
-};
-export type PageAnnotations = {
-    text_form_fields: readonly TextField[];
-    combobox_form_fields: readonly ComboBoxField[];
-};
-export type TextField = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    f: number;
-    multiline: boolean;
-    text: string;
-};
-export type ComboBoxField = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    f: number;
-    text: string;
-};
-export type Link = {
-    type: 'uri';
-    dest: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-} | {
-    type: 'local';
-    p_num: number;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};
-export type PageRangeContent = {
-    start_index: number;
-    end_index: number;
-    total_pages: number;
-    fonts: readonly Font[];
-    pages: readonly PageContent[];
-};

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

@@ -1,15 +0,0 @@
-import type { Font, PageContent, PageRangeContent } from './types';
-export declare function usePageContent(getContent: (startIndex: number, endIndex: number) => Promise<PageRangeContent>, paginationSize: number): {
-    getPageContent: (pageInd: number) => {
-        page: PageContent;
-        fonts: readonly Font[];
-    };
-    loadPageContent: (pageInd: number) => Promise<void>;
-    documentMetadata: {
-        defaultDimensions: {
-            height: number;
-            width: number;
-        } | undefined;
-        pageCount: number;
-    };
-};

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

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

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

@@ -1 +0,0 @@
-export declare const useCachedGetImage: (getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>) => ((pageNumber: number, zoom: number) => Promise<string>);

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

@@ -1,5 +0,0 @@
-import { type MutableRefObject } from 'react';
-export declare const useIntersectionObserver: (options: IntersectionObserverInit, onVisible: () => void) => {
-    observedRef: (node: HTMLElement | null) => void;
-    isVisibleRef: MutableRefObject<boolean>;
-};