@atlaskit/media-avatar-picker 27.0.0 → 27.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-avatar-picker
 
+## 27.0.1
+
+### Patch Changes
+
+- [`e3d1ec1074c7e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3d1ec1074c7e) -
+  Removing UNSAFE_componentWillReceiveProps from media-picker, media-avatar-picker and media-viewer
+  package to support React19 migration
+
 ## 27.0.0
 
 ### Major Changes

package/dist/cjs/image-placer/index.js

@@ -24,6 +24,7 @@ var _image = require("./image");
 var _margin = require("./margin");
 var _imageProcessor = require("./imageProcessor");
 var _constraints = require("./constraints");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _imagePlacerErrorWrapper = require("./imagePlacerErrorWrapper");
 var _util = require("../util");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -266,6 +267,12 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              if (!(0, _platformFeatureFlags.fg)('platform_media_package_react19_lifecycle_fix')) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
               imageSourceRect = this.imageSourceRect, state = this.state, props = this.props;
               zoom = state.zoom;
               currentUseConstraints = props.useConstraints, currentContainerWidth = props.containerWidth, currentContainerHeight = props.containerHeight, currentMargin = props.margin, currentSrc = props.src;
@@ -294,34 +301,34 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
                 this.updateZoomProp();
               }
               if (!(nextSrc instanceof File && nextSrc !== currentSrc)) {
-                _context.next = 18;
+                _context.next = 20;
                 break;
               }
-              _context.next = 17;
+              _context.next = 19;
               return (0, _mediaUi.getFileInfo)(nextSrc);
-            case 17:
+            case 19:
               fileInfo = _context.sent;
-            case 18:
+            case 20:
               if (!(typeof nextSrc === 'string' && nextSrc !== currentSrc)) {
-                _context.next = 22;
+                _context.next = 24;
                 break;
               }
-              _context.next = 21;
+              _context.next = 23;
               return (0, _mediaUi.getFileInfoFromSrc)(nextSrc);
-            case 21:
+            case 23:
               fileInfo = _context.sent;
-            case 22:
+            case 24:
               if (!fileInfo) {
-                _context.next = 25;
+                _context.next = 27;
                 break;
               }
-              _context.next = 25;
+              _context.next = 27;
               return this.preprocessFile(fileInfo);
-            case 25:
+            case 27:
               if (isImageAction) {
                 this.provideImageActions();
               }
-            case 26:
+            case 28:
             case "end":
               return _context.stop();
           }
@@ -333,18 +340,101 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
       return UNSAFE_componentWillReceiveProps;
     }())
   }, {
-    key: "preprocessFile",
+    key: "componentDidUpdate",
     value: function () {
-      var _preprocessFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(fileInfo) {
-        var maxZoom, previewInfo, width, height;
+      var _componentDidUpdate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(prevProps) {
+        var imageSourceRect, props, nextZoom, nextUseConstraints, nextContainerWidth, nextContainerHeight, nextMargin, nextSrc, nextOnImageActions, prevZoom, prevUseConstraints, prevContainerWidth, prevContainerHeight, prevMargin, prevSrc, prevOnImageActions, isZoomChange, isUseConstraintsChange, isContainerWidthChange, isContainerHeightChange, isMarginChange, isImageActionChange, zoomReset, fileInfo;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if ((0, _platformFeatureFlags.fg)('platform_media_package_react19_lifecycle_fix')) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              imageSourceRect = this.imageSourceRect, props = this.props;
+              nextZoom = props.zoom, nextUseConstraints = props.useConstraints, nextContainerWidth = props.containerWidth, nextContainerHeight = props.containerHeight, nextMargin = props.margin, nextSrc = props.src, nextOnImageActions = props.onImageActions;
+              prevZoom = prevProps.zoom, prevUseConstraints = prevProps.useConstraints, prevContainerWidth = prevProps.containerWidth, prevContainerHeight = prevProps.containerHeight, prevMargin = prevProps.margin, prevSrc = prevProps.src, prevOnImageActions = prevProps.onImageActions;
+              isZoomChange = nextZoom !== prevZoom;
+              isUseConstraintsChange = nextUseConstraints !== undefined && nextUseConstraints !== prevUseConstraints;
+              isContainerWidthChange = nextContainerWidth !== undefined && nextContainerWidth !== prevContainerWidth;
+              isContainerHeightChange = nextContainerHeight !== undefined && nextContainerHeight !== prevContainerHeight;
+              isMarginChange = nextMargin !== undefined && nextMargin !== prevMargin;
+              isImageActionChange = nextOnImageActions !== prevOnImageActions;
+              zoomReset = {
+                zoom: 0
+              };
+              if (isZoomChange) {
+                this.setZoom(nextZoom);
+              }
+              if (isUseConstraintsChange) {
+                this.setState({
+                  zoom: 0,
+                  imageWidth: imageSourceRect.width,
+                  imageHeight: imageSourceRect.height
+                }, this.update);
+              }
+              if (isContainerWidthChange || isContainerHeightChange || isMarginChange) {
+                this.setState(zoomReset, this.update);
+                this.updateZoomProp();
+              }
+              if (!(nextSrc !== prevSrc)) {
+                _context2.next = 27;
+                break;
+              }
+              if (!(nextSrc instanceof File)) {
+                _context2.next = 20;
+                break;
+              }
+              _context2.next = 19;
+              return (0, _mediaUi.getFileInfo)(nextSrc);
+            case 19:
+              fileInfo = _context2.sent;
+            case 20:
+              if (!(typeof nextSrc === 'string')) {
+                _context2.next = 24;
+                break;
+              }
+              _context2.next = 23;
+              return (0, _mediaUi.getFileInfoFromSrc)(nextSrc);
+            case 23:
+              fileInfo = _context2.sent;
+            case 24:
+              if (!fileInfo) {
+                _context2.next = 27;
+                break;
+              }
+              _context2.next = 27;
+              return this.preprocessFile(fileInfo);
+            case 27:
+              if (isImageActionChange) {
+                this.provideImageActions();
+              }
+            case 28:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentDidUpdate(_x2) {
+        return _componentDidUpdate.apply(this, arguments);
+      }
+      return componentDidUpdate;
+    }()
+  }, {
+    key: "preprocessFile",
+    value: function () {
+      var _preprocessFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(fileInfo) {
+        var maxZoom, previewInfo, width, height;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               maxZoom = this.props.maxZoom;
-              _context2.next = 3;
+              _context3.next = 3;
               return (0, _imageProcessor.initialiseImagePreview)(fileInfo, this.containerRect, maxZoom);
             case 3:
-              previewInfo = _context2.sent;
+              previewInfo = _context3.sent;
               if (previewInfo) {
                 width = previewInfo.width, height = previewInfo.height;
                 this.imageSourceRect = new _mediaUi.Rectangle(width, height);
@@ -357,11 +447,11 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
               }
             case 5:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function preprocessFile(_x2) {
+      function preprocessFile(_x3) {
         return _preprocessFile.apply(this, arguments);
       }
       return preprocessFile;

package/dist/es2019/image-placer/index.js

@@ -9,6 +9,7 @@ import { ImagePlacerImage } from './image';
 import { Margin } from './margin';
 import { initialiseImagePreview, renderImageAtCurrentView } from './imageProcessor';
 import { zoomToFit, applyConstraints, transformVisibleBoundsToImageCoords } from './constraints';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ImagePlacerErrorWrapper } from './imagePlacerErrorWrapper';
 import { isSSR } from '../util';
 
@@ -247,6 +248,9 @@ export class ImagePlacer extends React.Component {
 
   /* respond to prop changes */
   async UNSAFE_componentWillReceiveProps(nextProps) {
+    if (fg('platform_media_package_react19_lifecycle_fix')) {
+      return;
+    }
     const {
       imageSourceRect,
       state,
@@ -308,6 +312,71 @@ export class ImagePlacer extends React.Component {
       this.provideImageActions();
     }
   }
+  async componentDidUpdate(prevProps) {
+    if (!fg('platform_media_package_react19_lifecycle_fix')) {
+      return;
+    }
+    const {
+      imageSourceRect,
+      props
+    } = this;
+    const {
+      zoom: nextZoom,
+      useConstraints: nextUseConstraints,
+      containerWidth: nextContainerWidth,
+      containerHeight: nextContainerHeight,
+      margin: nextMargin,
+      src: nextSrc,
+      onImageActions: nextOnImageActions
+    } = props;
+    const {
+      zoom: prevZoom,
+      useConstraints: prevUseConstraints,
+      containerWidth: prevContainerWidth,
+      containerHeight: prevContainerHeight,
+      margin: prevMargin,
+      src: prevSrc,
+      onImageActions: prevOnImageActions
+    } = prevProps;
+    const isZoomChange = nextZoom !== prevZoom;
+    const isUseConstraintsChange = nextUseConstraints !== undefined && nextUseConstraints !== prevUseConstraints;
+    const isContainerWidthChange = nextContainerWidth !== undefined && nextContainerWidth !== prevContainerWidth;
+    const isContainerHeightChange = nextContainerHeight !== undefined && nextContainerHeight !== prevContainerHeight;
+    const isMarginChange = nextMargin !== undefined && nextMargin !== prevMargin;
+    const isImageActionChange = nextOnImageActions !== prevOnImageActions;
+    const zoomReset = {
+      zoom: 0
+    };
+    if (isZoomChange) {
+      this.setZoom(nextZoom);
+    }
+    if (isUseConstraintsChange) {
+      this.setState({
+        zoom: 0,
+        imageWidth: imageSourceRect.width,
+        imageHeight: imageSourceRect.height
+      }, this.update);
+    }
+    if (isContainerWidthChange || isContainerHeightChange || isMarginChange) {
+      this.setState(zoomReset, this.update);
+      this.updateZoomProp();
+    }
+    if (nextSrc !== prevSrc) {
+      let fileInfo;
+      if (nextSrc instanceof File) {
+        fileInfo = await getFileInfo(nextSrc);
+      }
+      if (typeof nextSrc === 'string') {
+        fileInfo = await getFileInfoFromSrc(nextSrc);
+      }
+      if (fileInfo) {
+        await this.preprocessFile(fileInfo);
+      }
+    }
+    if (isImageActionChange) {
+      this.provideImageActions();
+    }
+  }
   async preprocessFile(fileInfo) {
     const {
       maxZoom

package/dist/esm/image-placer/index.js

@@ -19,6 +19,7 @@ import { ImagePlacerImage } from './image';
 import { Margin } from './margin';
 import { initialiseImagePreview, renderImageAtCurrentView } from './imageProcessor';
 import { zoomToFit as _zoomToFit, applyConstraints as _applyConstraints, transformVisibleBoundsToImageCoords as _transformVisibleBoundsToImageCoords } from './constraints';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ImagePlacerErrorWrapper } from './imagePlacerErrorWrapper';
 import { isSSR } from '../util';
 
@@ -260,6 +261,12 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              if (!fg('platform_media_package_react19_lifecycle_fix')) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
               imageSourceRect = this.imageSourceRect, state = this.state, props = this.props;
               zoom = state.zoom;
               currentUseConstraints = props.useConstraints, currentContainerWidth = props.containerWidth, currentContainerHeight = props.containerHeight, currentMargin = props.margin, currentSrc = props.src;
@@ -288,34 +295,34 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
                 this.updateZoomProp();
               }
               if (!(nextSrc instanceof File && nextSrc !== currentSrc)) {
-                _context.next = 18;
+                _context.next = 20;
                 break;
               }
-              _context.next = 17;
+              _context.next = 19;
               return getFileInfo(nextSrc);
-            case 17:
+            case 19:
               fileInfo = _context.sent;
-            case 18:
+            case 20:
               if (!(typeof nextSrc === 'string' && nextSrc !== currentSrc)) {
-                _context.next = 22;
+                _context.next = 24;
                 break;
               }
-              _context.next = 21;
+              _context.next = 23;
               return getFileInfoFromSrc(nextSrc);
-            case 21:
+            case 23:
               fileInfo = _context.sent;
-            case 22:
+            case 24:
               if (!fileInfo) {
-                _context.next = 25;
+                _context.next = 27;
                 break;
               }
-              _context.next = 25;
+              _context.next = 27;
               return this.preprocessFile(fileInfo);
-            case 25:
+            case 27:
               if (isImageAction) {
                 this.provideImageActions();
               }
-            case 26:
+            case 28:
             case "end":
               return _context.stop();
           }
@@ -327,18 +334,101 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
       return UNSAFE_componentWillReceiveProps;
     }())
   }, {
-    key: "preprocessFile",
+    key: "componentDidUpdate",
     value: function () {
-      var _preprocessFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fileInfo) {
-        var maxZoom, previewInfo, width, height;
+      var _componentDidUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(prevProps) {
+        var imageSourceRect, props, nextZoom, nextUseConstraints, nextContainerWidth, nextContainerHeight, nextMargin, nextSrc, nextOnImageActions, prevZoom, prevUseConstraints, prevContainerWidth, prevContainerHeight, prevMargin, prevSrc, prevOnImageActions, isZoomChange, isUseConstraintsChange, isContainerWidthChange, isContainerHeightChange, isMarginChange, isImageActionChange, zoomReset, fileInfo;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (fg('platform_media_package_react19_lifecycle_fix')) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              imageSourceRect = this.imageSourceRect, props = this.props;
+              nextZoom = props.zoom, nextUseConstraints = props.useConstraints, nextContainerWidth = props.containerWidth, nextContainerHeight = props.containerHeight, nextMargin = props.margin, nextSrc = props.src, nextOnImageActions = props.onImageActions;
+              prevZoom = prevProps.zoom, prevUseConstraints = prevProps.useConstraints, prevContainerWidth = prevProps.containerWidth, prevContainerHeight = prevProps.containerHeight, prevMargin = prevProps.margin, prevSrc = prevProps.src, prevOnImageActions = prevProps.onImageActions;
+              isZoomChange = nextZoom !== prevZoom;
+              isUseConstraintsChange = nextUseConstraints !== undefined && nextUseConstraints !== prevUseConstraints;
+              isContainerWidthChange = nextContainerWidth !== undefined && nextContainerWidth !== prevContainerWidth;
+              isContainerHeightChange = nextContainerHeight !== undefined && nextContainerHeight !== prevContainerHeight;
+              isMarginChange = nextMargin !== undefined && nextMargin !== prevMargin;
+              isImageActionChange = nextOnImageActions !== prevOnImageActions;
+              zoomReset = {
+                zoom: 0
+              };
+              if (isZoomChange) {
+                this.setZoom(nextZoom);
+              }
+              if (isUseConstraintsChange) {
+                this.setState({
+                  zoom: 0,
+                  imageWidth: imageSourceRect.width,
+                  imageHeight: imageSourceRect.height
+                }, this.update);
+              }
+              if (isContainerWidthChange || isContainerHeightChange || isMarginChange) {
+                this.setState(zoomReset, this.update);
+                this.updateZoomProp();
+              }
+              if (!(nextSrc !== prevSrc)) {
+                _context2.next = 27;
+                break;
+              }
+              if (!(nextSrc instanceof File)) {
+                _context2.next = 20;
+                break;
+              }
+              _context2.next = 19;
+              return getFileInfo(nextSrc);
+            case 19:
+              fileInfo = _context2.sent;
+            case 20:
+              if (!(typeof nextSrc === 'string')) {
+                _context2.next = 24;
+                break;
+              }
+              _context2.next = 23;
+              return getFileInfoFromSrc(nextSrc);
+            case 23:
+              fileInfo = _context2.sent;
+            case 24:
+              if (!fileInfo) {
+                _context2.next = 27;
+                break;
+              }
+              _context2.next = 27;
+              return this.preprocessFile(fileInfo);
+            case 27:
+              if (isImageActionChange) {
+                this.provideImageActions();
+              }
+            case 28:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentDidUpdate(_x2) {
+        return _componentDidUpdate.apply(this, arguments);
+      }
+      return componentDidUpdate;
+    }()
+  }, {
+    key: "preprocessFile",
+    value: function () {
+      var _preprocessFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(fileInfo) {
+        var maxZoom, previewInfo, width, height;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               maxZoom = this.props.maxZoom;
-              _context2.next = 3;
+              _context3.next = 3;
               return initialiseImagePreview(fileInfo, this.containerRect, maxZoom);
             case 3:
-              previewInfo = _context2.sent;
+              previewInfo = _context3.sent;
               if (previewInfo) {
                 width = previewInfo.width, height = previewInfo.height;
                 this.imageSourceRect = new Rectangle(width, height);
@@ -351,11 +441,11 @@ export var ImagePlacer = /*#__PURE__*/function (_React$Component) {
               }
             case 5:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function preprocessFile(_x2) {
+      function preprocessFile(_x3) {
         return _preprocessFile.apply(this, arguments);
       }
       return preprocessFile;

package/dist/types/image-placer/index.d.ts

@@ -82,6 +82,7 @@ export declare class ImagePlacer extends React.Component<ImagePlacerProps, Image
     constructor(props: ImagePlacerProps);
     private provideImageActions;
     UNSAFE_componentWillReceiveProps(nextProps: ImagePlacerProps): Promise<void>;
+    componentDidUpdate(prevProps: ImagePlacerProps): Promise<void>;
     preprocessFile(fileInfo: FileInfo): Promise<void>;
     setSrc(fileInfo: FileInfo): void;
     private updateZoomProp;

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

@@ -82,6 +82,7 @@ export declare class ImagePlacer extends React.Component<ImagePlacerProps, Image
     constructor(props: ImagePlacerProps);
     private provideImageActions;
     UNSAFE_componentWillReceiveProps(nextProps: ImagePlacerProps): Promise<void>;
+    componentDidUpdate(prevProps: ImagePlacerProps): Promise<void>;
     preprocessFile(fileInfo: FileInfo): Promise<void>;
     setSrc(fileInfo: FileInfo): void;
     private updateZoomProp;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "27.0.0",
+	"version": "27.0.1",
 	"description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,8 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/media-ui": "^29.0.0",
-		"@atlaskit/modal-dialog": "^14.15.0",
+		"@atlaskit/modal-dialog": "^14.16.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/range": "^10.0.0",
 		"@atlaskit/spinner": "^19.1.0",
@@ -67,6 +68,11 @@
 		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2"
 	},
+	"platform-feature-flags": {
+		"platform_media_package_react19_lifecycle_fix": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@repo/internal": {
 			"design-tokens": [