@atlaskit/media-viewer 48.2.13 → 48.2.14

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/media-viewer
 
+## 48.2.14
+
+### Patch Changes
+
+- [#69045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69045) [`284fc8e26be1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/284fc8e26be1) - Fixed potential memory leak by checking for mounting before updating state
+- Updated dependencies
+
 ## 48.2.13
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _mediaCommon = require("@atlaskit/media-common");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "48.2.13";
+var packageVersion = exports.packageVersion = "48.2.14";
 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 = "48.2.13";
+var packageVersion = "48.2.14";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/components/media-viewer-loader.js

@@ -32,6 +32,7 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -69,10 +70,12 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
               MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
               AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
               AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-              this.setState({
-                MediaViewer: MediaViewerWithClient,
-                MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-              });
+              if (this.isMounted) {
+                this.setState({
+                  MediaViewer: MediaViewerWithClient,
+                  MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+                });
+              }
               _context.next = 17;
               break;
             case 15:
@@ -89,6 +92,16 @@ var AsyncMediaViewer = exports.AsyncMediaViewer = /*#__PURE__*/function (_React$
       }
       return UNSAFE_componentWillMount;
     }()
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMounted = false;
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/cjs/item-viewer.js

@@ -123,9 +123,15 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
       traceId: (0, _mediaCommon.getRandomHex)(8)
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (newState) {
+      if (_this.isMounted) {
+        _this.setState(newState);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
@@ -140,7 +146,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLoadFail", function (mediaViewerError) {
-      _this.setState({
+      _this.safeSetState({
         item: _domain.Outcome.failed(mediaViewerError)
       });
     });
@@ -156,7 +162,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
-      _this.setState({
+      _this.safeSetState({
         item: _domain.Outcome.failed(new _errors.MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -167,7 +173,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.needsReset(this.props, nextProps)) {
         this.release();
-        this.setState(initialState);
+        this.safeSetState(initialState);
       }
     }
   }, {
@@ -180,11 +186,13 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.isMounted = false;
       this.release();
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.isMounted = true;
       this.init(this.props);
     }
   }, {
@@ -358,7 +366,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
         // just set a successful outcome of type "external-image".
-        this.setState({
+        this.safeSetState({
           item: _domain.Outcome.successful('external-image')
         });
         return;
@@ -371,12 +379,12 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       }).subscribe({
         next: function next(file) {
           _this3.updateFileStateFlag(file);
-          _this3.setState({
+          _this3.safeSetState({
             item: _domain.Outcome.successful(file)
           });
         },
         error: function error(_error) {
-          _this3.setState({
+          _this3.safeSetState({
             item: _domain.Outcome.failed(new _errors.MediaViewerError('itemviewer-fetch-metadata', _error))
           });
         }

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.2.13";
+const packageVersion = "48.2.14";
 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 = "48.2.13";
+const packageVersion = "48.2.14";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/components/media-viewer-loader.js

@@ -4,6 +4,7 @@ import ModalSpinner from '../viewers/modalSpinner';
 export class AsyncMediaViewer extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "isMounted", false);
     _defineProperty(this, "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -17,15 +18,23 @@ export class AsyncMediaViewer extends React.PureComponent {
         const MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
         AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
         AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-        this.setState({
-          MediaViewer: MediaViewerWithClient,
-          MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-        });
+        if (this.isMounted) {
+          this.setState({
+            MediaViewer: MediaViewerWithClient,
+            MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+          });
+        }
       } catch (error) {
         // TODO [MS-2277]: Add operational error to catch async import error
       }
     }
   }
+  componentDidMount() {
+    this.isMounted = true;
+  }
+  componentWillUnmount() {
+    this.isMounted = false;
+  }
   render() {
     const {
       MediaViewer,

package/dist/es2019/item-viewer.js

@@ -54,9 +54,15 @@ export class ItemViewerBase extends React.Component {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    _defineProperty(this, "isMounted", false);
     _defineProperty(this, "traceContext", {
       traceId: getRandomHex(8)
     });
+    _defineProperty(this, "safeSetState", newState => {
+      if (this.isMounted) {
+        this.setState(newState);
+      }
+    });
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -73,7 +79,7 @@ export class ItemViewerBase extends React.Component {
       });
     });
     _defineProperty(this, "onLoadFail", mediaViewerError => {
-      this.setState({
+      this.safeSetState({
         item: Outcome.failed(mediaViewerError)
       });
     });
@@ -89,7 +95,7 @@ export class ItemViewerBase extends React.Component {
       });
     });
     _defineProperty(this, "onExternalImgError", () => {
-      this.setState({
+      this.safeSetState({
         item: Outcome.failed(new MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -97,7 +103,7 @@ export class ItemViewerBase extends React.Component {
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.needsReset(this.props, nextProps)) {
       this.release();
-      this.setState(initialState);
+      this.safeSetState(initialState);
     }
   }
   componentDidUpdate(oldProps) {
@@ -106,9 +112,11 @@ export class ItemViewerBase extends React.Component {
     }
   }
   componentWillUnmount() {
+    this.isMounted = false;
     this.release();
   }
   componentDidMount() {
+    this.isMounted = true;
     this.init(this.props);
   }
   renderItem(fileState) {
@@ -277,7 +285,7 @@ export class ItemViewerBase extends React.Component {
       // external images do not need to talk to our backend,
       // so therefore no need for media-client subscriptions.
       // just set a successful outcome of type "external-image".
-      this.setState({
+      this.safeSetState({
         item: Outcome.successful('external-image')
       });
       return;
@@ -292,12 +300,12 @@ export class ItemViewerBase extends React.Component {
     }).subscribe({
       next: file => {
         this.updateFileStateFlag(file);
-        this.setState({
+        this.safeSetState({
           item: Outcome.successful(file)
         });
       },
       error: error => {
-        this.setState({
+        this.safeSetState({
           item: Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', error))
         });
       }

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.2.13";
+var packageVersion = "48.2.14";
 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 = "48.2.13";
+var packageVersion = "48.2.14";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/components/media-viewer-loader.js

@@ -22,6 +22,7 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
     _defineProperty(_assertThisInitialized(_this), "state", {
       // Set state value to equal to current static value of this class.
       MediaViewer: AsyncMediaViewer.MediaViewer,
@@ -53,10 +54,12 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
               MediaViewerWithClient = mediaClient.withMediaClient(mediaViewerModule.MediaViewer);
               AsyncMediaViewer.MediaViewer = MediaViewerWithClient;
               AsyncMediaViewer.MediaViewerErrorBoundary = mediaViewerErrorBoundaryModule.default;
-              this.setState({
-                MediaViewer: MediaViewerWithClient,
-                MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
-              });
+              if (this.isMounted) {
+                this.setState({
+                  MediaViewer: MediaViewerWithClient,
+                  MediaViewerErrorBoundary: AsyncMediaViewer.MediaViewerErrorBoundary
+                });
+              }
               _context.next = 17;
               break;
             case 15:
@@ -73,6 +76,16 @@ export var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
       }
       return UNSAFE_componentWillMount;
     }()
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMounted = false;
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/esm/item-viewer.js

@@ -103,9 +103,15 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
     _defineProperty(_assertThisInitialized(_this), "traceContext", {
       traceId: getRandomHex(8)
     });
+    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (newState) {
+      if (_this.isMounted) {
+        _this.setState(newState);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
@@ -120,7 +126,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onLoadFail", function (mediaViewerError) {
-      _this.setState({
+      _this.safeSetState({
         item: Outcome.failed(mediaViewerError)
       });
     });
@@ -136,7 +142,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onExternalImgError", function () {
-      _this.setState({
+      _this.safeSetState({
         item: Outcome.failed(new MediaViewerError('imageviewer-external-onerror'))
       });
     });
@@ -147,7 +153,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.needsReset(this.props, nextProps)) {
         this.release();
-        this.setState(initialState);
+        this.safeSetState(initialState);
       }
     }
   }, {
@@ -160,11 +166,13 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.isMounted = false;
       this.release();
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.isMounted = true;
       this.init(this.props);
     }
   }, {
@@ -338,7 +346,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
         // just set a successful outcome of type "external-image".
-        this.setState({
+        this.safeSetState({
           item: Outcome.successful('external-image')
         });
         return;
@@ -351,12 +359,12 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }).subscribe({
         next: function next(file) {
           _this3.updateFileStateFlag(file);
-          _this3.setState({
+          _this3.safeSetState({
             item: Outcome.successful(file)
           });
         },
         error: function error(_error) {
-          _this3.setState({
+          _this3.safeSetState({
             item: Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', _error))
           });
         }

package/dist/types/components/media-viewer-loader.d.ts

@@ -13,8 +13,11 @@ export declare class AsyncMediaViewer extends React.PureComponent<MediaViewerWit
     static displayName: string;
     static MediaViewer?: MediaViewerWithMediaClientConfigComponent;
     static MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+    isMounted: boolean;
     state: AsyncMediaViewerState;
     UNSAFE_componentWillMount(): Promise<void>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }
 export default AsyncMediaViewer;

package/dist/types/item-viewer.d.ts

@@ -24,7 +24,9 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    isMounted: boolean;
     private traceContext;
+    safeSetState: (newState: State) => void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/dist/types-ts4.5/components/media-viewer-loader.d.ts

@@ -13,8 +13,11 @@ export declare class AsyncMediaViewer extends React.PureComponent<MediaViewerWit
     static displayName: string;
     static MediaViewer?: MediaViewerWithMediaClientConfigComponent;
     static MediaViewerErrorBoundary?: MediaViewerErrorBoundaryComponent;
+    isMounted: boolean;
     state: AsyncMediaViewerState;
     UNSAFE_componentWillMount(): Promise<void>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }
 export default AsyncMediaViewer;

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

@@ -24,7 +24,9 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    isMounted: boolean;
     private traceContext;
+    safeSetState: (newState: State) => void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.2.13",
+  "version": "48.2.14",
   "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/"
@@ -35,20 +35,20 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/button": "^17.3.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/media-ui": "^25.0.0",
+    "@atlaskit/media-ui": "^25.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/side-navigation": "^3.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.36.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@kenjiuno/msgreader": "^1.2.6",
@@ -73,7 +73,7 @@
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-state": "^1.0.0",
-    "@atlaskit/media-test-data": "^1.1.0",
+    "@atlaskit/media-test-data": "^1.2.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",