@atlaskit/media-document-viewer 0.1.0

package/dist/esm/utils/useIntersectionObserver.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useRef } from "react";
+import { useStaticCallback } from "./useStaticCallback";
+export var useIntersectionObserver = function useIntersectionObserver(options, onVisible) {
+  var staticOnVisible = useStaticCallback(onVisible);
+  var observerRef = useRef(null);
+  var timeoutRef = useRef(null);
+  var isVisibleRef = useRef(false);
+  var currentNodeRef = useRef(null);
+  var observedRef = 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 = _slicedToArray(_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);
+    }
+  });
+  useEffect(function () {
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    observedRef: observedRef,
+    isVisibleRef: isVisibleRef
+  };
+};

package/dist/esm/utils/useStaticCallback.js

@@ -0,0 +1,8 @@
+import { useCallback, useRef } from "react";
+export var useStaticCallback = function useStaticCallback(callback) {
+  var callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback(function () {
+    return callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+};

package/dist/types/documentViewer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type PageRangeContent } from './types';
+type DocumentViewerProps = {
+    getContent: (pageStart: number, pageEnd: number) => Promise<PageRangeContent>;
+    getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
+    paginationSize?: number;
+    zoom: number;
+};
+export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom }: DocumentViewerProps) => JSX.Element;
+export {};

package/dist/types/index.d.ts

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

package/dist/types/page.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+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: () => void;
+};
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible }: PageProps) => JSX.Element;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,42 @@
+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[];
+};
+export type PageRangeContent = {
+    start_index: number;
+    end_index: number;
+    total_pages: number;
+    fonts: readonly Font[];
+    pages: readonly PageContent[];
+};

package/dist/types/usePageContent.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const useStaticCallback: <Params extends any[], Result>(callback: (...args: Params) => Result) => (...args: Params) => Result;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type PageRangeContent } from './types';
+type DocumentViewerProps = {
+    getContent: (pageStart: number, pageEnd: number) => Promise<PageRangeContent>;
+    getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
+    paginationSize?: number;
+    zoom: number;
+};
+export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom }: DocumentViewerProps) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+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: () => void;
+};
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible }: PageProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+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[];
+};
+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

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

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

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

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

@@ -0,0 +1 @@
+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

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

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

@@ -0,0 +1 @@
+export declare const useStaticCallback: <Params extends any[], Result>(callback: (...args: Params) => Result) => (...args: Params) => Result;

package/package.json

@@ -0,0 +1,92 @@
+{
+	"atlassian": {
+		"team": "Media Exif",
+		"runReact18": true,
+		"website": {
+			"name": "MediaDocumentViewer",
+			"category": "Layout and structure"
+		}
+	},
+	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+	"main": "dist/cjs/index.js",
+	"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",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/tokens": "^5.1.0",
+		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
+		"@testing-library/react": "^13.4.0",
+		"react-dom": "^18.2.0",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	},
+	"name": "@atlaskit/media-document-viewer",
+	"version": "0.1.0",
+	"description": "Modern and fast document viewer",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	}
+}