@atlaskit/media-document-viewer 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1 +1,9 @@
 # @atlaskit/media-document-viewer
+
+## 0.2.0
+
+### Minor Changes
+
+- [#172332](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172332)
+  [`29b26fc9964d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/29b26fc9964d8) -
+  Added support for forms and links in documents

package/dist/cjs/annotations.compiled.css

@@ -0,0 +1,13 @@
+
+._19itglyw{border:none}._19bvidpf{padding-left:0}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ca0qidpf{padding-top:0}
+._kqswstnw{position:absolute}
+._n3tdidpf{padding-bottom:0}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._u5f3idpf{padding-right:0}
+._yv0e1ghl{grid-template-columns:1fr auto}

package/dist/cjs/annotations.js

@@ -0,0 +1,79 @@
+/* annotations.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.TextInputFormField = exports.ComboBoxFormField = exports.Annotations = void 0;
+require("./annotations.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+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); }
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+var formInputBaseStyles = null;
+var textInputStyles = null;
+var foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+var TextInputFormField = exports.TextInputFormField = function TextInputFormField(_ref) {
+  var field = _ref.field,
+    dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, foreignObjectProps, {
+    style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
+  })));
+};
+var comboBoxStyles = null;
+var comboBoxInputStyles = null;
+var ComboBoxFormField = exports.ComboBoxFormField = function ComboBoxFormField(_ref3) {
+  var field = _ref3.field,
+    dataTestId = _ref3.dataTestId;
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, foreignObjectProps, {
+    className: (0, _runtime.ax)(["_1e0c11p5 _yv0e1ghl _4cvr1h6o _1bah1yb4 _kqswstnw _4t3i1osq _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement("input", {
+    style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
+  }), /*#__PURE__*/React.createElement(_chevronDown.default, {
+    label: "",
+    size: "small"
+  })));
+};
+var Annotations = exports.Annotations = function Annotations(_ref5) {
+  var annotations = _ref5.annotations;
+  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
+    return /*#__PURE__*/React.createElement(TextInputFormField, {
+      field: field,
+      dataTestId: "text-form-field-".concat(i),
+      key: i
+    });
+  }), annotations.combobox_form_fields.map(function (field, i) {
+    return /*#__PURE__*/React.createElement(ComboBoxFormField, {
+      field: field,
+      dataTestId: "combobox-form-field-".concat(i),
+      key: i
+    });
+  }));
+};

package/dist/cjs/documentLinks.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocumentLinks = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+var anchorStyles = {
+  display: 'block',
+  width: '100%',
+  height: '100%'
+};
+var DocumentLink = function DocumentLink(_ref) {
+  var link = _ref.link,
+    dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: link.x,
+    y: -link.y,
+    width: link.w,
+    height: link.h,
+    "data-testid": dataTestId
+  }, link.type === 'uri' ? /*#__PURE__*/_react.default.createElement(_anchor.default, (0, _extends2.default)({}, foreignObjectProps, {
+    href: link.dest,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: anchorStyles
+  })) : /*#__PURE__*/_react.default.createElement(_anchor.default, (0, _extends2.default)({}, foreignObjectProps, {
+    href: "#page-".concat(link.p_num + 1),
+    style: anchorStyles
+  })));
+};
+var DocumentLinks = exports.DocumentLinks = function DocumentLinks(_ref2) {
+  var links = _ref2.links;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, links.map(function (link, i) {
+    return /*#__PURE__*/_react.default.createElement(DocumentLink, {
+      link: link,
+      dataTestId: "document-link-".concat(i),
+      key: i
+    });
+  }));
+};

package/dist/cjs/page.js

@@ -13,6 +13,8 @@ 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 _annotations = require("./annotations");
+var _documentLinks = require("./documentLinks");
 var _getDocumentRoot = require("./utils/getDocumentRoot");
 var _useIntersectionObserver = require("./utils/useIntersectionObserver");
 var _useStaticCallback = require("./utils/useStaticCallback");
@@ -81,6 +83,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     ref: ref,
     style: style,
     "data-testid": "page-".concat(pageIndex),
+    id: "page-".concat(pageIndex + 1),
     className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
@@ -103,6 +106,10 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
       fonts: fonts,
       key: i
     });
+  }), content.annotations && /*#__PURE__*/React.createElement(_annotations.Annotations, {
+    annotations: content.annotations
+  }), content.links && /*#__PURE__*/React.createElement(_documentLinks.DocumentLinks, {
+    links: content.links
   })));
 });
 var Page = exports.Page = function Page(_ref5) {

package/dist/es2019/annotations.compiled.css

@@ -0,0 +1,13 @@
+
+._19itglyw{border:none}._19bvidpf{padding-left:0}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ca0qidpf{padding-top:0}
+._kqswstnw{position:absolute}
+._n3tdidpf{padding-bottom:0}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._u5f3idpf{padding-right:0}
+._yv0e1ghl{grid-template-columns:1fr auto}

package/dist/es2019/annotations.js

@@ -0,0 +1,77 @@
+/* annotations.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./annotations.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+const formInputBaseStyles = null;
+const textInputStyles = null;
+const foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+export const TextInputFormField = ({
+  field,
+  dataTestId
+}) => {
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("input", _extends({}, foreignObjectProps, {
+    style: {
+      ['fontSize']: `${field.f}px`
+    },
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
+  })));
+};
+const comboBoxStyles = null;
+const comboBoxInputStyles = null;
+export const ComboBoxFormField = ({
+  field,
+  dataTestId
+}) => {
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", _extends({}, foreignObjectProps, {
+    className: ax(["_1e0c11p5 _yv0e1ghl _4cvr1h6o _1bah1yb4 _kqswstnw _4t3i1osq _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement("input", {
+    style: {
+      ['fontSize']: `${field.f}px`
+    },
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
+  }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "",
+    size: "small"
+  })));
+};
+export const Annotations = ({
+  annotations
+}) => {
+  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map((field, i) => {
+    return /*#__PURE__*/React.createElement(TextInputFormField, {
+      field: field,
+      dataTestId: `text-form-field-${i}`,
+      key: i
+    });
+  }), annotations.combobox_form_fields.map((field, i) => {
+    return /*#__PURE__*/React.createElement(ComboBoxFormField, {
+      field: field,
+      dataTestId: `combobox-form-field-${i}`,
+      key: i
+    });
+  }));
+};

package/dist/es2019/documentLinks.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+import Anchor from '@atlaskit/primitives/anchor';
+const foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+const anchorStyles = {
+  display: 'block',
+  width: '100%',
+  height: '100%'
+};
+const DocumentLink = ({
+  link,
+  dataTestId
+}) => {
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: link.x,
+    y: -link.y,
+    width: link.w,
+    height: link.h,
+    "data-testid": dataTestId
+  }, link.type === 'uri' ? /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
+    href: link.dest,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: anchorStyles
+  })) : /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
+    href: `#page-${link.p_num + 1}`,
+    style: anchorStyles
+  })));
+};
+export const DocumentLinks = ({
+  links
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map((link, i) => /*#__PURE__*/React.createElement(DocumentLink, {
+    link: link,
+    dataTestId: `document-link-${i}`,
+    key: i
+  })));
+};

package/dist/es2019/page.js

@@ -3,6 +3,8 @@ import "./page.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useEffect, useState } from 'react';
+import { Annotations } from './annotations';
+import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
 import { useIntersectionObserver } from './utils/useIntersectionObserver';
 import { useStaticCallback } from './utils/useStaticCallback';
@@ -71,6 +73,7 @@ const PageView = /*#__PURE__*/forwardRef(({
     ref: ref,
     style: style,
     "data-testid": `page-${pageIndex}`,
+    id: `page-${pageIndex + 1}`,
     className: ax(["_kqswh2mm _bfhku67f"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
@@ -91,7 +94,11 @@ const PageView = /*#__PURE__*/forwardRef(({
     rotation: line.r,
     fonts: fonts,
     key: i
-  }))));
+  })), content.annotations && /*#__PURE__*/React.createElement(Annotations, {
+    annotations: content.annotations
+  }), content.links && /*#__PURE__*/React.createElement(DocumentLinks, {
+    links: content.links
+  })));
 });
 export const Page = ({
   getPageSrc,

package/dist/es2019/usePageContent.js

@@ -1,5 +1,5 @@
-import { useMemo, useRef, useState } from "react";
-import { useStaticCallback } from "./utils/useStaticCallback";
+import { useMemo, useRef, useState } from 'react';
+import { useStaticCallback } from './utils/useStaticCallback';
 export function usePageContent(getContent, paginationSize) {
   const [contentRanges, setContentRanges] = useState([]);
   const contentRangesRequestRef = useRef({});

package/dist/es2019/utils/useCachedGetImage.js

@@ -1,5 +1,5 @@
-import { useRef } from "react";
-import { useStaticCallback } from "./useStaticCallback";
+import { useRef } from 'react';
+import { useStaticCallback } from './useStaticCallback';
 export const useCachedGetImage = getPageImageUrl => {
   const imageUrlRefs = useRef({});
   const getImageUrl = useStaticCallback(async (pageNumber, zoom) => {

package/dist/es2019/utils/useIntersectionObserver.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
-import { useStaticCallback } from "./useStaticCallback";
+import { useEffect, useRef } from 'react';
+import { useStaticCallback } from './useStaticCallback';
 export const useIntersectionObserver = (options, onVisible) => {
   const staticOnVisible = useStaticCallback(onVisible);
   const observerRef = useRef(null);

package/dist/es2019/utils/useStaticCallback.js

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef } from 'react';
 export const useStaticCallback = callback => {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;

package/dist/esm/annotations.compiled.css

@@ -0,0 +1,13 @@
+
+._19itglyw{border:none}._19bvidpf{padding-left:0}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ca0qidpf{padding-top:0}
+._kqswstnw{position:absolute}
+._n3tdidpf{padding-bottom:0}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._u5f3idpf{padding-right:0}
+._yv0e1ghl{grid-template-columns:1fr auto}

package/dist/esm/annotations.js

@@ -0,0 +1,71 @@
+/* annotations.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./annotations.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+var formInputBaseStyles = null;
+var textInputStyles = null;
+var foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+export var TextInputFormField = function TextInputFormField(_ref) {
+  var field = _ref.field,
+    dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("input", _extends({}, foreignObjectProps, {
+    style: _defineProperty({}, 'fontSize', "".concat(field.f, "px")),
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_kqswstnw _4t3i1osq _1bsb1osq"])
+  })));
+};
+var comboBoxStyles = null;
+var comboBoxInputStyles = null;
+export var ComboBoxFormField = function ComboBoxFormField(_ref3) {
+  var field = _ref3.field,
+    dataTestId = _ref3.dataTestId;
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: field.x,
+    y: -field.y,
+    width: field.w,
+    height: field.h,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", _extends({}, foreignObjectProps, {
+    className: ax(["_1e0c11p5 _yv0e1ghl _4cvr1h6o _1bah1yb4 _kqswstnw _4t3i1osq _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement("input", {
+    style: _defineProperty({}, 'fontSize', "".concat(field.f, "px")),
+    type: "text",
+    value: field.text,
+    readOnly: true,
+    className: ax(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
+  }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "",
+    size: "small"
+  })));
+};
+export var Annotations = function Annotations(_ref5) {
+  var annotations = _ref5.annotations;
+  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
+    return /*#__PURE__*/React.createElement(TextInputFormField, {
+      field: field,
+      dataTestId: "text-form-field-".concat(i),
+      key: i
+    });
+  }), annotations.combobox_form_fields.map(function (field, i) {
+    return /*#__PURE__*/React.createElement(ComboBoxFormField, {
+      field: field,
+      dataTestId: "combobox-form-field-".concat(i),
+      key: i
+    });
+  }));
+};

package/dist/esm/documentLinks.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+import Anchor from '@atlaskit/primitives/anchor';
+var foreignObjectProps = {
+  xmlns: 'http://www.w3.org/1999/xhtml'
+};
+var anchorStyles = {
+  display: 'block',
+  width: '100%',
+  height: '100%'
+};
+var DocumentLink = function DocumentLink(_ref) {
+  var link = _ref.link,
+    dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: link.x,
+    y: -link.y,
+    width: link.w,
+    height: link.h,
+    "data-testid": dataTestId
+  }, link.type === 'uri' ? /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
+    href: link.dest,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    style: anchorStyles
+  })) : /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
+    href: "#page-".concat(link.p_num + 1),
+    style: anchorStyles
+  })));
+};
+export var DocumentLinks = function DocumentLinks(_ref2) {
+  var links = _ref2.links;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map(function (link, i) {
+    return /*#__PURE__*/React.createElement(DocumentLink, {
+      link: link,
+      dataTestId: "document-link-".concat(i),
+      key: i
+    });
+  }));
+};

package/dist/esm/page.js

@@ -5,6 +5,8 @@ import "./page.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useEffect, useState } from 'react';
+import { Annotations } from './annotations';
+import { DocumentLinks } from './documentLinks';
 import { getDocumentRoot } from './utils/getDocumentRoot';
 import { useIntersectionObserver } from './utils/useIntersectionObserver';
 import { useStaticCallback } from './utils/useStaticCallback';
@@ -72,6 +74,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     ref: ref,
     style: style,
     "data-testid": "page-".concat(pageIndex),
+    id: "page-".concat(pageIndex + 1),
     className: ax(["_kqswh2mm _bfhku67f"])
   }, imageSrc && /*#__PURE__*/React.createElement("img", {
     style: style,
@@ -94,6 +97,10 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       fonts: fonts,
       key: i
     });
+  }), content.annotations && /*#__PURE__*/React.createElement(Annotations, {
+    annotations: content.annotations
+  }), content.links && /*#__PURE__*/React.createElement(DocumentLinks, {
+    links: content.links
   })));
 });
 export var Page = function Page(_ref5) {

package/dist/esm/usePageContent.js

@@ -2,8 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useMemo, useRef, useState } from "react";
-import { useStaticCallback } from "./utils/useStaticCallback";
+import { useMemo, useRef, useState } from 'react';
+import { useStaticCallback } from './utils/useStaticCallback';
 export function usePageContent(getContent, paginationSize) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/utils/useCachedGetImage.js

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useRef } from "react";
-import { useStaticCallback } from "./useStaticCallback";
+import { useRef } from 'react';
+import { useStaticCallback } from './useStaticCallback';
 export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
   var imageUrlRefs = useRef({});
   var getImageUrl = useStaticCallback( /*#__PURE__*/function () {

package/dist/esm/utils/useIntersectionObserver.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useRef } from "react";
-import { useStaticCallback } from "./useStaticCallback";
+import { useEffect, useRef } from 'react';
+import { useStaticCallback } from './useStaticCallback';
 export var useIntersectionObserver = function useIntersectionObserver(options, onVisible) {
   var staticOnVisible = useStaticCallback(onVisible);
   var observerRef = useRef(null);

package/dist/esm/utils/useStaticCallback.js

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef } from 'react';
 export var useStaticCallback = function useStaticCallback(callback) {
   var callbackRef = useRef(callback);
   callbackRef.current = callback;

package/dist/types/annotations.d.ts

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

package/dist/types/documentLinks.d.ts

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

package/dist/types/documentViewer.d.ts

@@ -6,5 +6,5 @@ type DocumentViewerProps = {
     paginationSize?: number;
     zoom: number;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

package/dist/types/page.d.ts

@@ -12,5 +12,5 @@ type PageProps = {
     };
     onVisible: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -32,6 +32,43 @@ export type PageContent = {
     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;
+    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;

package/dist/types/usePageContent.d.ts

@@ -1,4 +1,4 @@
-import { PageRangeContent } from "./types";
+import { PageRangeContent } from './types';
 export declare function usePageContent(getContent: (startIndex: number, endIndex: number) => Promise<PageRangeContent>, paginationSize: number): {
     getPageContent: (pageInd: number) => {
         page: import("./types").PageContent;

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

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

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

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

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

@@ -6,5 +6,5 @@ type DocumentViewerProps = {
     paginationSize?: number;
     zoom: number;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

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

@@ -12,5 +12,5 @@ type PageProps = {
     };
     onVisible: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
 export {};

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

@@ -32,6 +32,43 @@ export type PageContent = {
     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;
+    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;

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

@@ -1,4 +1,4 @@
-import { PageRangeContent } from "./types";
+import { PageRangeContent } from './types';
 export declare function usePageContent(getContent: (startIndex: number, endIndex: number) => Promise<PageRangeContent>, paginationSize: number): {
     getPageContent: (pageInd: number) => {
         page: import("./types").PageContent;

package/package.json

@@ -29,8 +29,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/icon": "^27.0.0",
 		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -82,7 +83,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",