@atlaskit/media-picker 70.1.1 → 70.1.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-picker
 
+## 70.1.3
+
+### Patch Changes
+
+- [`143a6c6aea5cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/143a6c6aea5cf) -
+  Move media picker loader components to use componentDidMount instead of UNSAFE_componentWillMount
+  (under FF: jfp-magma-media-clipboard-init-after-mount)
+
+## 70.1.2
+
+### Patch Changes
+
+- [`33c6d6aaeef68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33c6d6aaeef68) -
+  Use payload.error.description as fallback for errorDetail when rawError does not provide a message
+  in upload failure handling
+
 ## 70.1.1
 
 ### Patch Changes

package/dist/cjs/components/browser/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BrowserLoader = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -16,6 +16,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 = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; })(); }
@@ -37,7 +38,26 @@ var BrowserLoader = exports.BrowserLoader = /*#__PURE__*/function (_React$PureCo
   return (0, _createClass2.default)(BrowserLoader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
       this.mounted = true;
+      if (!this.state.Browser && (0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+        }), Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-browser" */'./browser'));
+        })]).then(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            mediaClient = _ref2[0],
+            browserModule = _ref2[1];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
+          if (_this2.mounted) {
+            _this2.setState({
+              Browser: BrowserLoader.Browser
+            });
+          }
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -52,7 +72,7 @@ var BrowserLoader = exports.BrowserLoader = /*#__PURE__*/function (_React$PureCo
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (this.state.Browser) {
+              if (!(!this.state.Browser && !(0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 9;
                 break;
               }

package/dist/cjs/components/clipboard/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ClipboardLoader = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -16,6 +16,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 = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; })(); }
@@ -34,6 +35,27 @@ var ClipboardLoader = exports.ClipboardLoader = /*#__PURE__*/function (_React$Pu
   }
   (0, _inherits2.default)(ClipboardLoader, _React$PureComponent);
   return (0, _createClass2.default)(ClipboardLoader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if (!this.state.Clipboard && (0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+        }), Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-clipboard" */'./clipboard'));
+        })]).then(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            mediaClient = _ref2[0],
+            clipboardModule = _ref2[1];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
+          _this2.setState({
+            Clipboard: ClipboardLoader.Clipboard
+          });
+        });
+      }
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function () {
       var _UNSAFE_componentWillMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -41,7 +63,7 @@ var ClipboardLoader = exports.ClipboardLoader = /*#__PURE__*/function (_React$Pu
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (this.state.Clipboard) {
+              if (!(!this.state.Clipboard && !(0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 9;
                 break;
               }

package/dist/cjs/components/dropzone/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropzoneLoader = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -16,6 +16,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 = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; })(); }
@@ -35,6 +36,33 @@ var DropzoneLoader = exports.DropzoneLoader = /*#__PURE__*/function (_React$Pure
   }
   (0, _inherits2.default)(DropzoneLoader, _React$PureComponent);
   return (0, _createClass2.default)(DropzoneLoader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if ((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && (0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+        }), Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-dropzone" */'./dropzone'));
+        }), Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-picker-error-boundary" */'../media-picker-analytics-error-boundary'));
+        })]).then(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 3),
+            mediaClient = _ref2[0],
+            dropzoneModule = _ref2[1],
+            mediaPickerErrorBoundaryModule = _ref2[2];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
+          DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
+          _this2.setState({
+            Dropzone: DropzoneLoader.Dropzone,
+            MediaPickerErrorBoundary: DropzoneLoader.MediaPickerErrorBoundary
+          });
+        });
+        // TODO [MS-2272]: Add operational error to catch import error
+      }
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function () {
       var _UNSAFE_componentWillMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -42,7 +70,7 @@ var DropzoneLoader = exports.DropzoneLoader = /*#__PURE__*/function (_React$Pure
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!(!this.state.Dropzone || !this.state.MediaPickerErrorBoundary)) {
+              if (!((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && !(0, _platformFeatureFlags.fg)('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 16;
                 break;
               }

package/dist/cjs/components/localUploadReact.js

@@ -114,7 +114,7 @@ var LocalUploadComponentReact = exports.LocalUploadComponentReact = /*#__PURE__*
               _end2 = (0, _perfMarks.end)("MediaPicker.fireUpload.".concat(fileId)), _end2$duration = _end2.duration, uploadDurationMsec = _end2$duration === void 0 ? -1 : _end2$duration;
               errorDetail = 'unknown';
               if ((0, _platformFeatureFlags.fg)('add_media_picker_error_detail')) {
-                errorDetail = rawError && (0, _mediaClient.isCommonMediaClientError)(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : 'unknown';
+                errorDetail = rawError && (0, _mediaClient.isCommonMediaClientError)(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : payload.error.description;
               }
               requestMetadata = !!rawError ? (0, _analytics.getRequestMetadata)(rawError) : undefined;
               _this.createAndFireAnalyticsEvent({

package/dist/cjs/util/analytics.js

@@ -9,7 +9,7 @@ var _mediaClient = require("@atlaskit/media-client");
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "70.1.0";
+var packageVersion = "0.0.0-development";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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-picker";
-var packageVersion = "70.1.0";
+var packageVersion = "0.0.0-development";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/es2019/components/browser/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class BrowserLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -10,12 +11,23 @@ export class BrowserLoader extends React.PureComponent {
   }
   componentDidMount() {
     this.mounted = true;
+    if (!this.state.Browser && fg('jfp-magma-media-clipboard-init-after-mount')) {
+      Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-browser" */'./browser')]).then(([mediaClient, browserModule]) => {
+        // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+        BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
+        if (this.mounted) {
+          this.setState({
+            Browser: BrowserLoader.Browser
+          });
+        }
+      });
+    }
   }
   componentWillUnmount() {
     this.mounted = false;
   }
   async UNSAFE_componentWillMount() {
-    if (!this.state.Browser) {
+    if (!this.state.Browser && !fg('jfp-magma-media-clipboard-init-after-mount')) {
       const [mediaClient, browserModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-browser" */'./browser')]);
 
       // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18

package/dist/es2019/components/clipboard/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class ClipboardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -7,8 +8,19 @@ export class ClipboardLoader extends React.PureComponent {
       Clipboard: ClipboardLoader.Clipboard
     });
   }
+  componentDidMount() {
+    if (!this.state.Clipboard && fg('jfp-magma-media-clipboard-init-after-mount')) {
+      Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-clipboard" */'./clipboard')]).then(([mediaClient, clipboardModule]) => {
+        // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+        ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
+        this.setState({
+          Clipboard: ClipboardLoader.Clipboard
+        });
+      });
+    }
+  }
   async UNSAFE_componentWillMount() {
-    if (!this.state.Clipboard) {
+    if (!this.state.Clipboard && !fg('jfp-magma-media-clipboard-init-after-mount')) {
       const [mediaClient, clipboardModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-clipboard" */'./clipboard')]);
 
       // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18

package/dist/es2019/components/dropzone/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export class DropzoneLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -8,8 +9,22 @@ export class DropzoneLoader extends React.PureComponent {
       MediaPickerErrorBoundary: DropzoneLoader.MediaPickerErrorBoundary
     });
   }
+  componentDidMount() {
+    if ((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && fg('jfp-magma-media-clipboard-init-after-mount')) {
+      Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-dropzone" */'./dropzone'), import( /* webpackChunkName: "@atlaskit-internal_media-picker-error-boundary" */'../media-picker-analytics-error-boundary')]).then(([mediaClient, dropzoneModule, mediaPickerErrorBoundaryModule]) => {
+        // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+        DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
+        DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
+        this.setState({
+          Dropzone: DropzoneLoader.Dropzone,
+          MediaPickerErrorBoundary: DropzoneLoader.MediaPickerErrorBoundary
+        });
+      });
+      // TODO [MS-2272]: Add operational error to catch import error
+    }
+  }
   async UNSAFE_componentWillMount() {
-    if (!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) {
+    if ((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && !fg('jfp-magma-media-clipboard-init-after-mount')) {
       try {
         const [mediaClient, dropzoneModule, mediaPickerErrorBoundaryModule] = await Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-dropzone" */'./dropzone'), import( /* webpackChunkName: "@atlaskit-internal_media-picker-error-boundary" */'../media-picker-analytics-error-boundary')]);
 

package/dist/es2019/components/localUploadReact.js

@@ -106,7 +106,7 @@ export class LocalUploadComponentReact extends Component {
       let errorDetail = 'unknown';
       if (fg('add_media_picker_error_detail')) {
         var _rawError$innerError, _rawError$innerError2;
-        errorDetail = rawError && isCommonMediaClientError(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : 'unknown';
+        errorDetail = rawError && isCommonMediaClientError(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : payload.error.description;
       }
       const requestMetadata = !!rawError ? getRequestMetadata(rawError) : undefined;
       this.createAndFireAnalyticsEvent({

package/dist/es2019/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "70.1.0";
+const packageVersion = "0.0.0-development";
 export function getPackageAttributes(componentName) {
   return {
     packageName,

package/dist/es2019/util/ufoExperiences.js

@@ -2,7 +2,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "70.1.0";
+const packageVersion = "0.0.0-development";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

package/dist/esm/components/browser/index.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -10,6 +10,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var BrowserLoader = /*#__PURE__*/function (_React$PureComponent) {
   function BrowserLoader() {
     var _this;
@@ -28,7 +29,22 @@ export var BrowserLoader = /*#__PURE__*/function (_React$PureComponent) {
   return _createClass(BrowserLoader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
       this.mounted = true;
+      if (!this.state.Browser && fg('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-browser" */'./browser')]).then(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            mediaClient = _ref2[0],
+            browserModule = _ref2[1];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          BrowserLoader.Browser = mediaClient.withMediaClient(browserModule.Browser);
+          if (_this2.mounted) {
+            _this2.setState({
+              Browser: BrowserLoader.Browser
+            });
+          }
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -43,7 +59,7 @@ export var BrowserLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (this.state.Browser) {
+              if (!(!this.state.Browser && !fg('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 9;
                 break;
               }

package/dist/esm/components/clipboard/index.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -10,6 +10,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var ClipboardLoader = /*#__PURE__*/function (_React$PureComponent) {
   function ClipboardLoader() {
     var _this;
@@ -25,6 +26,23 @@ export var ClipboardLoader = /*#__PURE__*/function (_React$PureComponent) {
   }
   _inherits(ClipboardLoader, _React$PureComponent);
   return _createClass(ClipboardLoader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if (!this.state.Clipboard && fg('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-clipboard" */'./clipboard')]).then(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            mediaClient = _ref2[0],
+            clipboardModule = _ref2[1];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          ClipboardLoader.Clipboard = mediaClient.withMediaClient(clipboardModule.Clipboard);
+          _this2.setState({
+            Clipboard: ClipboardLoader.Clipboard
+          });
+        });
+      }
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function () {
       var _UNSAFE_componentWillMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -32,7 +50,7 @@ export var ClipboardLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (this.state.Clipboard) {
+              if (!(!this.state.Clipboard && !fg('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 9;
                 break;
               }

package/dist/esm/components/dropzone/index.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -10,6 +10,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var DropzoneLoader = /*#__PURE__*/function (_React$PureComponent) {
   function DropzoneLoader() {
     var _this;
@@ -26,6 +27,27 @@ export var DropzoneLoader = /*#__PURE__*/function (_React$PureComponent) {
   }
   _inherits(DropzoneLoader, _React$PureComponent);
   return _createClass(DropzoneLoader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if ((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && fg('jfp-magma-media-clipboard-init-after-mount')) {
+        Promise.all([import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'), import( /* webpackChunkName: "@atlaskit-internal_media-dropzone" */'./dropzone'), import( /* webpackChunkName: "@atlaskit-internal_media-picker-error-boundary" */'../media-picker-analytics-error-boundary')]).then(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 3),
+            mediaClient = _ref2[0],
+            dropzoneModule = _ref2[1],
+            mediaPickerErrorBoundaryModule = _ref2[2];
+          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+          DropzoneLoader.Dropzone = mediaClient.withMediaClient(dropzoneModule.Dropzone);
+          DropzoneLoader.MediaPickerErrorBoundary = mediaPickerErrorBoundaryModule.default;
+          _this2.setState({
+            Dropzone: DropzoneLoader.Dropzone,
+            MediaPickerErrorBoundary: DropzoneLoader.MediaPickerErrorBoundary
+          });
+        });
+        // TODO [MS-2272]: Add operational error to catch import error
+      }
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function () {
       var _UNSAFE_componentWillMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -33,7 +55,7 @@ export var DropzoneLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!(!this.state.Dropzone || !this.state.MediaPickerErrorBoundary)) {
+              if (!((!this.state.Dropzone || !this.state.MediaPickerErrorBoundary) && !fg('jfp-magma-media-clipboard-init-after-mount'))) {
                 _context.next = 16;
                 break;
               }

package/dist/esm/components/localUploadReact.js

@@ -107,7 +107,7 @@ export var LocalUploadComponentReact = /*#__PURE__*/function (_Component) {
               _end2 = end("MediaPicker.fireUpload.".concat(fileId)), _end2$duration = _end2.duration, uploadDurationMsec = _end2$duration === void 0 ? -1 : _end2$duration;
               errorDetail = 'unknown';
               if (fg('add_media_picker_error_detail')) {
-                errorDetail = rawError && isCommonMediaClientError(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : 'unknown';
+                errorDetail = rawError && isCommonMediaClientError(rawError) && (_rawError$innerError = rawError.innerError) !== null && _rawError$innerError !== void 0 && _rawError$innerError.message ? (_rawError$innerError2 = rawError.innerError) === null || _rawError$innerError2 === void 0 ? void 0 : _rawError$innerError2.message : rawError instanceof Error ? rawError.message : payload.error.description;
               }
               requestMetadata = !!rawError ? getRequestMetadata(rawError) : undefined;
               _this.createAndFireAnalyticsEvent({

package/dist/esm/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "70.1.0";
+var packageVersion = "0.0.0-development";
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/ufoExperiences.js

@@ -5,7 +5,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "70.1.0";
+var packageVersion = "0.0.0-development";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/types/components/clipboard/index.d.ts

@@ -15,6 +15,7 @@ export declare class ClipboardLoader extends React.PureComponent<ClipboardWithMe
     state: {
         Clipboard: ClipboardWithMediaClientConfigComponent | undefined;
     };
+    componentDidMount(): void;
     UNSAFE_componentWillMount(): Promise<void>;
     render(): React.JSX.Element | null;
 }

package/dist/types/components/dropzone/index.d.ts

@@ -17,6 +17,7 @@ export declare class DropzoneLoader extends React.PureComponent<DropzoneWithMedi
         Dropzone: DropzoneWithMediaClientConfigComponent | undefined;
         MediaPickerErrorBoundary: MediaPickerErrorBoundaryComponent | undefined;
     };
+    componentDidMount(): void;
     UNSAFE_componentWillMount(): Promise<void>;
     render(): React.JSX.Element | null;
 }

package/dist/types-ts4.5/components/clipboard/index.d.ts

@@ -15,6 +15,7 @@ export declare class ClipboardLoader extends React.PureComponent<ClipboardWithMe
     state: {
         Clipboard: ClipboardWithMediaClientConfigComponent | undefined;
     };
+    componentDidMount(): void;
     UNSAFE_componentWillMount(): Promise<void>;
     render(): React.JSX.Element | null;
 }

package/dist/types-ts4.5/components/dropzone/index.d.ts

@@ -17,6 +17,7 @@ export declare class DropzoneLoader extends React.PureComponent<DropzoneWithMedi
         Dropzone: DropzoneWithMediaClientConfigComponent | undefined;
         MediaPickerErrorBoundary: MediaPickerErrorBoundaryComponent | undefined;
     };
+    componentDidMount(): void;
     UNSAFE_componentWillMount(): Promise<void>;
     render(): React.JSX.Element | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "70.1.1",
+	"version": "70.1.3",
 	"description": "Library for handling file uploads",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -92,6 +92,9 @@
 		},
 		"add_media_picker_error_detail": {
 			"type": "boolean"
+		},
+		"jfp-magma-media-clipboard-init-after-mount": {
+			"type": "boolean"
 		}
 	}
 }