@atlaskit/media-viewer 52.4.4 → 52.4.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-viewer
 
+## 52.4.6
+
+### Patch Changes
+
+- [#183808](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183808)
+  [`4436100210ca9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4436100210ca9) -
+  Added spinner to document viewer
+- Updated dependencies
+
+## 52.4.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 52.4.4
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "52.4.3";
+var packageVersion = exports.packageVersion = "52.4.5";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.3";
+var packageVersion = "52.4.5";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/cjs/viewers/doc-next/doc-viewer.js

@@ -8,13 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DocViewer = void 0;
 require("./doc-viewer.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaDocumentViewer = require("@atlaskit/media-document-viewer");
 var _mediaCommon = require("@atlaskit/media-common");
@@ -22,6 +21,7 @@ var _errors = require("../../errors");
 var _zoomControls = require("../../zoomControls");
 var _zoomLevel = require("../../domain/zoomLevel");
 var _passwordInput = require("./passwordInput");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -29,7 +29,8 @@ var initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new _zoomLevel.ZoomLevel(1.75)
+  zoomLevel: new _zoomLevel.ZoomLevel(1.75),
+  isLoading: true
 };
 var reducer = function reducer(state, action) {
   switch (action.type) {
@@ -54,11 +55,16 @@ var reducer = function reducer(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         isMissingPassword: true
       });
+    case 'loading_completed':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isLoading: false
+      });
     default:
       return state;
   }
 };
 var documentViewerStyles = null;
+var spinnerStyles = null;
 var DocViewer = exports.DocViewer = function DocViewer(_ref) {
   var mediaClient = _ref.mediaClient,
     fileState = _ref.fileState,
@@ -175,6 +181,12 @@ var DocViewer = exports.DocViewer = function DocViewer(_ref) {
       return _ref4.apply(this, arguments);
     };
   }());
+  var onSuccessHandler = (0, _mediaCommon.useStaticCallback)(function () {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 || onSuccess();
+  });
   var onZoomChange = (0, _mediaCommon.useStaticCallback)(function (newZoomLevel) {
     dispatch({
       type: 'set_zoom_level',
@@ -182,22 +194,30 @@ var DocViewer = exports.DocViewer = function DocViewer(_ref) {
     });
   });
   if (state.isMissingPassword) {
-    return /*#__PURE__*/React.createElement(_passwordInput.PasswordInput, {
+    return /*#__PURE__*/_react.default.createElement(_passwordInput.PasswordInput, {
       onSubmit: onPasswordSubmit,
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, state.isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: _mediaDocumentViewer.DOCUMENT_SCROLL_ROOT_ID,
     className: (0, _runtime.ax)(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
-  }, /*#__PURE__*/React.createElement(_mediaDocumentViewer.DocumentViewer, {
+  }, /*#__PURE__*/_react.default.createElement(_mediaDocumentViewer.DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
-  }), /*#__PURE__*/React.createElement(_zoomControls.ZoomControls, {
+    onSuccess: onSuccessHandler
+  }), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 var _default = exports.default = DocViewer;

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.3";
+const packageVersion = "52.4.5";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.3";
+const packageVersion = "52.4.5";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/es2019/viewers/doc-next/doc-viewer.js

@@ -1,8 +1,7 @@
 /* doc-viewer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./doc-viewer.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { isCommonMediaClientError } from '@atlaskit/media-client';
 import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
 import { useStaticCallback } from '@atlaskit/media-common';
@@ -10,11 +9,13 @@ import { MediaViewerError } from '../../errors';
 import { ZoomControls } from '../../zoomControls';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { PasswordInput } from './passwordInput';
+import Spinner from '@atlaskit/spinner';
 const initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new ZoomLevel(1.75)
+  zoomLevel: new ZoomLevel(1.75),
+  isLoading: true
 };
 const reducer = (state, action) => {
   switch (action.type) {
@@ -44,11 +45,17 @@ const reducer = (state, action) => {
         ...state,
         isMissingPassword: true
       };
+    case 'loading_completed':
+      return {
+        ...state,
+        isLoading: false
+      };
     default:
       return state;
   }
 };
 const documentViewerStyles = null;
+const spinnerStyles = null;
 export const DocViewer = ({
   mediaClient,
   fileState,
@@ -112,6 +119,12 @@ export const DocViewer = ({
     }, traceContext);
     return URL.createObjectURL(src);
   });
+  const onSuccessHandler = useStaticCallback(() => {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+  });
   const onZoomChange = useStaticCallback(newZoomLevel => {
     dispatch({
       type: 'set_zoom_level',
@@ -124,17 +137,25 @@ export const DocViewer = ({
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: DOCUMENT_SCROLL_ROOT_ID,
     className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
   }, /*#__PURE__*/React.createElement(DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
+    onSuccess: onSuccessHandler
   }), /*#__PURE__*/React.createElement(ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 export default DocViewer;

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.3";
+var packageVersion = "52.4.5";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.3";
+var packageVersion = "52.4.5";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/esm/viewers/doc-next/doc-viewer.js

@@ -3,12 +3,11 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./doc-viewer.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { isCommonMediaClientError } from '@atlaskit/media-client';
 import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
 import { useStaticCallback } from '@atlaskit/media-common';
@@ -16,11 +15,13 @@ import { MediaViewerError } from '../../errors';
 import { ZoomControls } from '../../zoomControls';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { PasswordInput } from './passwordInput';
+import Spinner from '@atlaskit/spinner';
 var initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new ZoomLevel(1.75)
+  zoomLevel: new ZoomLevel(1.75),
+  isLoading: true
 };
 var reducer = function reducer(state, action) {
   switch (action.type) {
@@ -45,11 +46,16 @@ var reducer = function reducer(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         isMissingPassword: true
       });
+    case 'loading_completed':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isLoading: false
+      });
     default:
       return state;
   }
 };
 var documentViewerStyles = null;
+var spinnerStyles = null;
 export var DocViewer = function DocViewer(_ref) {
   var mediaClient = _ref.mediaClient,
     fileState = _ref.fileState,
@@ -166,6 +172,12 @@ export var DocViewer = function DocViewer(_ref) {
       return _ref4.apply(this, arguments);
     };
   }());
+  var onSuccessHandler = useStaticCallback(function () {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 || onSuccess();
+  });
   var onZoomChange = useStaticCallback(function (newZoomLevel) {
     dispatch({
       type: 'set_zoom_level',
@@ -178,17 +190,25 @@ export var DocViewer = function DocViewer(_ref) {
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: DOCUMENT_SCROLL_ROOT_ID,
     className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
   }, /*#__PURE__*/React.createElement(DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
+    onSuccess: onSuccessHandler
   }), /*#__PURE__*/React.createElement(ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 export default DocViewer;

package/dist/types/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
-import { MediaViewerError } from '../../../errors';
+import { type MediaViewerError } from '../../../errors';
 export type Props = {
     item: Exclude<FileState, ErrorFileState>;
     src: string;

package/dist/types/viewers/codeViewer/codeViewerRenderer.d.ts

@@ -1,8 +1,8 @@
 import React, { type ReactNode } from 'react';
 import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
-import { Outcome } from '../../domain';
+import { type Outcome } from '../../domain';
 import type { SupportedLanguages } from '@atlaskit/code/types';
-import { MediaViewerError } from '../../errors';
+import { type MediaViewerError } from '../../errors';
 export declare const CodeViewWrapper: (props: {
     children: ReactNode;
     'data-testid': string | undefined;

package/dist/types/viewers/doc-next/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type MediaClient, type FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
-import { MediaViewerError } from '../../errors';
+import { type MediaViewerError } from '../../errors';
 import { BaseViewer } from '../base-viewer';
 import { type MediaTraceContext } from '@atlaskit/media-common';
 import { ZoomLevel } from '../../domain/zoomLevel';

package/dist/types-ts4.5/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
-import { MediaViewerError } from '../../../errors';
+import { type MediaViewerError } from '../../../errors';
 export type Props = {
     item: Exclude<FileState, ErrorFileState>;
     src: string;

package/dist/types-ts4.5/viewers/codeViewer/codeViewerRenderer.d.ts

@@ -1,8 +1,8 @@
 import React, { type ReactNode } from 'react';
 import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
-import { Outcome } from '../../domain';
+import { type Outcome } from '../../domain';
 import type { SupportedLanguages } from '@atlaskit/code/types';
-import { MediaViewerError } from '../../errors';
+import { type MediaViewerError } from '../../errors';
 export declare const CodeViewWrapper: (props: {
     children: ReactNode;
     'data-testid': string | undefined;

package/dist/types-ts4.5/viewers/doc-next/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type MediaClient, type FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
-import { MediaViewerError } from '../../errors';
+import { type MediaViewerError } from '../../errors';
 import { BaseViewer } from '../base-viewer';
 import { type MediaTraceContext } from '@atlaskit/media-common';
 import { ZoomLevel } from '../../domain/zoomLevel';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.4.4",
+	"version": "52.4.6",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.2.0",
+		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-lab": "^5.1.0",
 		"@atlaskit/media-client": "^35.0.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/side-navigation": "^11.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/theme": "^19.0.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",