@atlaskit/media-avatar-picker 26.4.13 → 27.0.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- [`770f036c93884`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/770f036c93884) -
+  Removed `react-intl-next` alias and replaced all usages with `react-intl` directly.
+
+  What changed: The `react-intl-next` npm alias (which resolved to `react-intl@^5`) has been
+  removed. All imports now reference `react-intl` directly, and `peerDependencies` have been updated
+  to `"^5.25.1 || ^6.0.0 || ^7.0.0"`.
+
+  How consumer should update their code: Ensure `react-intl` is installed at a version satisfying
+  `^5.25.1 || ^6.0.0 || ^7.0.0`. If your application was using `react-intl-next` as an npm alias, it
+  can be safely removed. Replace any remaining `react-intl-next` imports with `react-intl`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.4.13
 
 ### Patch Changes

package/dist/cjs/avatar-list/index.js

@@ -13,7 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 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; }
@@ -30,7 +30,7 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
     selectedAvatar = _ref.selectedAvatar,
     onItemClick = _ref.onItemClick,
     selectAvatarLabel = _ref.selectAvatarLabel;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(Object.fromEntries(avatars.map(function (avatar) {
       return [avatar.dataURI, false];
     }))),

package/dist/cjs/avatar-picker-dialog/SRLiveTitle.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SRLiveTitle = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _types = require("./types");
 var _mediaUi = require("@atlaskit/media-ui");
 var SRLiveTitle = exports.SRLiveTitle = function SRLiveTitle(_ref) {
   var mode = _ref.mode;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, /*#__PURE__*/_react.default.createElement("div", {
     "aria-live": "polite"
   }, mode === _types.Mode.Cropping && intl.formatMessage(_mediaUi.messages.or_select_default_avatars), mode === _types.Mode.PredefinedAvatars && intl.formatMessage(_mediaUi.messages.select_an_avatar_from_all_defaults)));

package/dist/cjs/avatar-picker-dialog/SubmitErrorDialog.js

@@ -14,11 +14,11 @@ var _runtime = require("@compiled/react/runtime");
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
 var _flag = _interopRequireDefault(require("@atlaskit/flag"));
 var _mediaUi = require("@atlaskit/media-ui");
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 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); }
 var avatarPickerErrorStyles = null;
 var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog() {
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var flagContainerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (flagContainerRef.current) {

package/dist/cjs/avatar-picker-dialog/index.js

@@ -21,7 +21,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _form = require("@atlaskit/form");
 var _mediaUi = require("@atlaskit/media-ui");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -238,11 +238,11 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         appearance: "default",
         onClick: onCancel
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel)), /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.cancel)), /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
         appearance: "primary",
         isLoading: isLoading,
         type: "submit"
-      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.save))));
+      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.save))));
     });
     return _this;
   }
@@ -260,14 +260,14 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
         testId: "modal-header",
         hasCloseButton: true
-      }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
+      }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
         className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
       }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
       }, this.renderBody())), this.footerContent()));
-      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
         locale: "en"
       }, content);
     }
@@ -363,7 +363,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       }, /*#__PURE__*/_react.default.createElement(_form.Field, {
         name: "altText",
         isRequired: true,
-        label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text)
+        label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.alt_text)
       }, function (_ref2) {
         var fieldProps = _ref2.fieldProps;
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
@@ -371,7 +371,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
             return _this2.updateAltText(event.currentTarget.value);
           },
           value: altText || ''
-        })), /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text_description)));
+        })), /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.alt_text_description)));
       }));
     }
   }, {
@@ -419,6 +419,6 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
 (0, _defineProperty2.default)(AvatarPickerDialog, "defaultProps", {
   avatars: []
 });
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(AvatarPickerDialog, {
+var _default = exports.default = (0, _reactIntl.injectIntl)(AvatarPickerDialog, {
   enforceContext: false
 });

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

@@ -18,7 +18,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 var _isImageRemote = require("./isImageRemote");
 var _new = require("@atlaskit/button/new");
@@ -245,4 +245,4 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
   onDragStarted: function onDragStarted() {},
   onImageSize: function onImageSize() {}
 });
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(ImageCropper);
+var _default = exports.default = (0, _reactIntl.injectIntl)(ImageCropper);

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

@@ -19,7 +19,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _imageCropper = _interopRequireDefault(require("../image-cropper"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -359,11 +359,11 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       }, this.renderDragZone(), isLoading ? null : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
         id: "padded-break",
         className: (0, _runtime.ax)(["_19pk1a66 _otyru2gc _y3gn1h6o"])
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         onClick: this.onUploadButtonClick,
         isDisabled: isLoading,
         testId: "upload-button"
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), /*#__PURE__*/_react.default.createElement("input", {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_photo), /*#__PURE__*/_react.default.createElement("input", {
         "data-testid": "image-navigator-input-file",
         type: "file",
         id: "image-input",
@@ -438,4 +438,4 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
     }
   }]);
 }(_react.Component);
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(ImageNavigator);
+var _default = exports.default = (0, _reactIntl.injectIntl)(ImageNavigator);

package/dist/cjs/image-navigator/slider.js

@@ -21,7 +21,7 @@ var _range = _interopRequireDefault(require("@atlaskit/range"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _image = _interopRequireDefault(require("@atlaskit/icon/core/image"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 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 _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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -79,5 +79,5 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
   }]);
 }(_react.Component);
 (0, _defineProperty2.default)(Slider, "defaultProps", defaultProps);
-var _default_1 = (0, _reactIntlNext.injectIntl)(Slider);
+var _default_1 = (0, _reactIntl.injectIntl)(Slider);
 var _default = exports.default = _default_1;

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

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 var _excluded = ["x", "y", "width", "height", "transform"];
 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); }
@@ -24,7 +24,7 @@ var ImageWrapper = exports.ImageWrapper = function ImageWrapper(_ref) {
     height = _ref.height,
     transform = _ref.transform,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
     style: {
       left: "".concat(x, "px"),

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/cjs/predefined-avatar-list/index.js

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _avatarList = require("../avatar-list");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 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); }
 var predefinedAvatarsWrapperStyles = null;
@@ -27,7 +27,7 @@ var PredefinedAvatarList = exports.PredefinedAvatarList = /*#__PURE__*/(0, _reac
     onAvatarSelected = _ref.onAvatarSelected,
     selectAvatarLabel = _ref.selectAvatarLabel,
     showMoreAvatarsButtonLabel = _ref.showMoreAvatarsButtonLabel;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/React.createElement("div", {
     id: "predefined-avatar-wrapper",
     className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o"])

package/dist/cjs/predefined-avatar-view/index.js

@@ -13,7 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _mediaUi = require("@atlaskit/media-ui");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -37,7 +37,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _reac
     onGoBack = _ref.onGoBack,
     predefinedAvatarsText = _ref.predefinedAvatarsText,
     selectAvatarLabel = _ref.selectAvatarLabel;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(Object.fromEntries(avatars.map(function (avatar) {
       return [avatar.dataURI, false];
     }))),
@@ -91,7 +91,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _reac
     className: (0, _runtime.ax)(["_2rko1i7s _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsbzwfg _4t3izwfg _4cvr1h6o _1bah1h6o"])
   }), /*#__PURE__*/React.createElement("h2", {
     className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c8fhey _19bvu2gc"])
-  }, predefinedAvatarsText || /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.default_avatars))), /*#__PURE__*/React.createElement("div", {
+  }, predefinedAvatarsText || /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.default_avatars))), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
     className: (0, _runtime.ax)(["_2lx2vrvc _1n261g80 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _1bsb1665 _c71lgrxc _18m91wug _ca0qu2gc _u5f3idpf _n3tdidpf _19bvidpf"])

package/dist/es2019/avatar-list/index.js

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import { useState } from 'react';
 const smallAvatarImageStyles = null;

package/dist/es2019/avatar-picker-dialog/SRLiveTitle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { Mode } from './types';
 import { messages } from '@atlaskit/media-ui';

package/dist/es2019/avatar-picker-dialog/SubmitErrorDialog.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
 import Flag from '@atlaskit/flag';
 import { messages } from '@atlaskit/media-ui';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 const avatarPickerErrorStyles = null;
 export const SubmitErrorDialog = () => {
   const intl = useIntl();

package/dist/es2019/avatar-picker-dialog/index.js

@@ -7,7 +7,7 @@ import React, { Fragment, createRef } from 'react';
 import { PureComponent } from 'react';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import Button from '@atlaskit/button/standard-button';
-import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl';
 import { Field, HelperMessage } from '@atlaskit/form';
 import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
 import { Box } from '@atlaskit/primitives/compiled';

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

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 import { messages, MediaImage } from '@atlaskit/media-ui';
 import { isImageRemote } from './isImageRemote';
 import { IconButton } from '@atlaskit/button/new';

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

@@ -4,7 +4,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/standard-button';
 import ImageCropper from '../image-cropper';
 import Spinner from '@atlaskit/spinner';

package/dist/es2019/image-navigator/slider.js

@@ -9,7 +9,7 @@ import { messages } from '@atlaskit/media-ui';
 import ScaleLargeIcon from '@atlaskit/icon/core/image';
 import ScaleSmallIcon from '@atlaskit/icon/core/image';
 import Button from '@atlaskit/button/standard-button';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 export const defaultProps = {
   value: 0
 };

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./imageWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 const imageWrapperStyles = null;
 export const ImageWrapper = ({

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/es2019/predefined-avatar-list/index.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { AvatarList } from '../avatar-list';
 import EditorMoreIcon from '@atlaskit/icon/core/show-more-horizontal';
 import Button from '@atlaskit/button/standard-button';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import { forwardRef } from 'react';
 const predefinedAvatarsWrapperStyles = null;

package/dist/es2019/predefined-avatar-view/index.js

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
 import Button from '@atlaskit/button/standard-button';

package/dist/esm/avatar-list/index.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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 { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import { useState } from 'react';
 var smallAvatarImageStyles = null;

package/dist/esm/avatar-picker-dialog/SRLiveTitle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { Mode } from './types';
 import { messages } from '@atlaskit/media-ui';

package/dist/esm/avatar-picker-dialog/SubmitErrorDialog.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
 import Flag from '@atlaskit/flag';
 import { messages } from '@atlaskit/media-ui';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 var avatarPickerErrorStyles = null;
 export var SubmitErrorDialog = function SubmitErrorDialog() {
   var intl = useIntl();

package/dist/esm/avatar-picker-dialog/index.js

@@ -16,7 +16,7 @@ import React, { Fragment, createRef } from 'react';
 import { PureComponent } from 'react';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import Button from '@atlaskit/button/standard-button';
-import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl';
 import { Field, HelperMessage } from '@atlaskit/form';
 import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
 import { Box } from '@atlaskit/primitives/compiled';

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

@@ -15,7 +15,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 import { messages, MediaImage } from '@atlaskit/media-ui';
 import { isImageRemote } from './isImageRemote';
 import { IconButton } from '@atlaskit/button/new';

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

@@ -14,7 +14,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/standard-button';
 import ImageCropper from '../image-cropper';
 import Spinner from '@atlaskit/spinner';

package/dist/esm/image-navigator/slider.js

@@ -16,7 +16,7 @@ import { messages } from '@atlaskit/media-ui';
 import ScaleLargeIcon from '@atlaskit/icon/core/image';
 import ScaleSmallIcon from '@atlaskit/icon/core/image';
 import Button from '@atlaskit/button/standard-button';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl';
 export var defaultProps = {
   value: 0
 };

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

@@ -5,7 +5,7 @@ var _excluded = ["x", "y", "width", "height", "transform"];
 import "./imageWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 var imageWrapperStyles = null;
 export var ImageWrapper = function ImageWrapper(_ref) {

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/esm/predefined-avatar-list/index.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { AvatarList } from '../avatar-list';
 import EditorMoreIcon from '@atlaskit/icon/core/show-more-horizontal';
 import Button from '@atlaskit/button/standard-button';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import { forwardRef } from 'react';
 var predefinedAvatarsWrapperStyles = null;

package/dist/esm/predefined-avatar-view/index.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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 { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { messages } from '@atlaskit/media-ui';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
 import Button from '@atlaskit/button/standard-button';

package/dist/types/avatar-picker-dialog/index.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { PureComponent } from 'react';
-import { type MessageDescriptor, type WrappedComponentProps } from 'react-intl-next';
+import { type MessageDescriptor, type WrappedComponentProps } from 'react-intl';
 import { type Avatar } from '../avatar-list';
 import { type CropProperties } from '../image-navigator';
 import { type LoadParameters } from '../image-navigator/index';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component } from 'react';
-import { type WrappedComponentProps } from 'react-intl-next';
+import { type WrappedComponentProps } from 'react-intl';
 export interface ImageCropperProp {
     imageSource: string;
     containerSize?: number;

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

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { Component } from 'react';
-import { type WrappedComponentProps } from 'react-intl-next';
+import { type WrappedComponentProps } from 'react-intl';
 import { Vector2 } from '@atlaskit/media-ui';
 import { Viewport } from '../viewport';
 export declare const AVATAR_DIALOG_WIDTH = 375;

package/dist/types/image-navigator/slider.d.ts

@@ -1,5 +1,5 @@
 import { Component, type ComponentType, type FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;

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/avatar-picker-dialog/index.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { PureComponent } from 'react';
-import { type MessageDescriptor, type WrappedComponentProps } from 'react-intl-next';
+import { type MessageDescriptor, type WrappedComponentProps } from 'react-intl';
 import { type Avatar } from '../avatar-list';
 import { type CropProperties } from '../image-navigator';
 import { type LoadParameters } from '../image-navigator/index';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component } from 'react';
-import { type WrappedComponentProps } from 'react-intl-next';
+import { type WrappedComponentProps } from 'react-intl';
 export interface ImageCropperProp {
     imageSource: string;
     containerSize?: number;

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

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { Component } from 'react';
-import { type WrappedComponentProps } from 'react-intl-next';
+import { type WrappedComponentProps } from 'react-intl';
 import { Vector2 } from '@atlaskit/media-ui';
 import { Viewport } from '../viewport';
 export declare const AVATAR_DIALOG_WIDTH = 375;

package/dist/types-ts4.5/image-navigator/slider.d.ts

@@ -1,5 +1,5 @@
 import { Component, type ComponentType, type FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
+import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;

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": "26.4.13",
+	"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/"
@@ -35,9 +35,10 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/flag": "^17.9.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/icon": "^34.0.0",
-		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/modal-dialog": "^14.15.0",
+		"@atlaskit/icon": "^34.2.0",
+		"@atlaskit/media-ui": "^29.0.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",
@@ -52,11 +53,11 @@
 	"peerDependencies": {
 		"@emotion/react": "^11.7.1",
 		"react": "^18.2.0",
-		"react-intl-next": "npm:react-intl@^5.18.1"
+		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
 		"@atlaskit/media-core": "^37.0.0",
-		"@atlaskit/media-test-helpers": "^40.0.0",
+		"@atlaskit/media-test-helpers": "^41.0.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -65,7 +66,12 @@
 		"enzyme": "^3.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-intl-next": "npm:react-intl@^5.18.1"
+		"react-intl": "^6.6.2"
+	},
+	"platform-feature-flags": {
+		"platform_media_package_react19_lifecycle_fix": {
+			"type": "boolean"
+		}
 	},
 	"techstack": {
 		"@repo/internal": {

package/report.api.md

@@ -137,7 +137,7 @@ export type OnLoadHandler = (params: LoadParameters) => void;
 {
 	"@emotion/react": "^11.7.1",
 	"react": "^16.8.0",
-	"react-intl-next": "npm:react-intl@^5.18.1"
+	"react-intl": "npm:react-intl@^5.18.1"
 }
 ```