@atlaskit/editor-plugin-media-insert 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 1.2.2
+
+### Patch Changes
+
+- [#128111](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128111)
+  [`5d65c0d1d28c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d65c0d1d28c8) -
+  [ux] [ED-24322] Add onPaste UX improvements to url upload
+- Updated dependencies
+
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/ui/FromURL.js

@@ -89,118 +89,141 @@ function MediaFromURL(_ref) {
   };
   var _React$useState = _react.default.useState(placeholders[1]),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    url = _React$useState2[0],
+    inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
   var _React$useReducer = _react.default.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
     _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
     previewState = _React$useReducer2[0],
     dispatch = _React$useReducer2[1];
+  var pasteFlag = _react.default.useRef(false);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
     onUploadAnalytics = _useAnalyticsEvents.onUploadAnalytics,
     onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
-  var onURLChange = _react.default.useCallback(function (e) {
-    setUrl(e.target.value);
-    dispatch({
-      type: 'reset'
-    });
-  }, []);
-  var uploadExternalMedia = _react.default.useCallback( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          dispatch({
-            type: 'loading'
-          });
-          _context.next = 3;
-          return mediaProvider;
-        case 3:
-          _yield$mediaProvider = _context.sent;
-          uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
-          uploadParams = _yield$mediaProvider.uploadParams;
-          if (uploadMediaClientConfig) {
-            _context.next = 8;
-            break;
-          }
-          return _context.abrupt("return");
-        case 8:
-          mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
-          collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
-          onUploadAnalytics();
-          _context.prev = 11;
-          _context.next = 14;
-          return mediaClient.file.uploadExternal(url, collection);
-        case 14:
-          _yield$mediaClient$fi = _context.sent;
-          uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
-          dimensions = _yield$mediaClient$fi.dimensions;
-          onUploadSuccessAnalytics();
-          dispatch({
-            type: 'success',
-            payload: {
-              id: uploadableFileUpfrontIds.id,
-              collection: collection,
-              height: dimensions.height,
-              width: dimensions.width,
-              occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
-            }
-          });
-          _context.next = 24;
-          break;
-        case 21:
-          _context.prev = 21;
-          _context.t0 = _context["catch"](11);
-          if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
-            // TODO: Make sure this gets good unit test coverage with the actual
-            // media plugin. This hard coded error message could be changed at any
-            // point and we need a unit test to break to stop people changing it.
-            onUploadFailureAnalytics(_context.t0);
-            dispatch({
-              type: 'warning',
-              warning: _context.t0,
-              url: url
-            });
-          } else if (_context.t0 instanceof Error) {
-            message = 'Image preview fetch failed';
-            onUploadFailureAnalytics(message);
+  var uploadExternalMedia = _react.default.useCallback( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(url) {
+      var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
             dispatch({
-              type: 'error',
-              error: message
+              type: 'loading'
             });
-          } else {
-            onUploadFailureAnalytics('Unknown error');
+            _context.next = 3;
+            return mediaProvider;
+          case 3:
+            _yield$mediaProvider = _context.sent;
+            uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
+            uploadParams = _yield$mediaProvider.uploadParams;
+            if (uploadMediaClientConfig) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return");
+          case 8:
+            mediaClient = (0, _mediaClientReact.getMediaClient)(uploadMediaClientConfig);
+            collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+            onUploadAnalytics();
+            _context.prev = 11;
+            _context.next = 14;
+            return mediaClient.file.uploadExternal(url, collection);
+          case 14:
+            _yield$mediaClient$fi = _context.sent;
+            uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
+            dimensions = _yield$mediaClient$fi.dimensions;
+            onUploadSuccessAnalytics();
             dispatch({
-              type: 'error',
-              error: 'Unknown error'
+              type: 'success',
+              payload: {
+                id: uploadableFileUpfrontIds.id,
+                collection: collection,
+                height: dimensions.height,
+                width: dimensions.width,
+                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+              }
             });
-          }
-        case 24:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[11, 21]]);
-  })), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+            _context.next = 24;
+            break;
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](11);
+            if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
+              // TODO: Make sure this gets good unit test coverage with the actual
+              // media plugin. This hard coded error message could be changed at any
+              // point and we need a unit test to break to stop people changing it.
+              onUploadFailureAnalytics(_context.t0);
+              dispatch({
+                type: 'warning',
+                warning: _context.t0,
+                url: inputUrl
+              });
+            } else if (_context.t0 instanceof Error) {
+              message = 'Image preview fetch failed';
+              onUploadFailureAnalytics(message);
+              dispatch({
+                type: 'error',
+                error: message
+              });
+            } else {
+              onUploadFailureAnalytics('Unknown error');
+              dispatch({
+                type: 'error',
+                error: 'Unknown error'
+              });
+            }
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[11, 21]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, inputUrl]);
+  var onURLChange = _react.default.useCallback(function (e) {
+    var url = e.target.value;
+    setUrl(url);
+    dispatch({
+      type: 'reset'
+    });
+    if (pasteFlag.current === true) {
+      pasteFlag.current = false;
+      uploadExternalMedia(url);
+    }
+  }, [uploadExternalMedia]);
+  var onPaste = _react.default.useCallback(function (e) {
+    // Note: this is a little weird, but the paste event will always be
+    // fired before the change event when pasting. We don't really want to
+    // duplicate logic by handling pastes separately to changes, so we're
+    // just noting paste occured to then be handled in the onURLChange fn
+    // above. The one exception to this is where paste inputs exactly what was
+    // already in the input, in which case we want to ignore it.
+    if (e.clipboardData.getData('text') !== inputUrl) {
+      pasteFlag.current = true;
+    }
+  }, [inputUrl]);
   var onInsertClick = _react.default.useCallback(function () {
     if (previewState.previewInfo) {
       return onInsert(previewState.previewInfo);
     }
     if (previewState.warning) {
-      return onExternalInsert(url);
+      return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   return /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: function onSubmit(e) {
       e.preventDefault();
-      uploadExternalMedia();
+      uploadExternalMedia(inputUrl);
     }
   }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.150"
   }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
     autoFocus: true,
-    value: url,
+    value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
-    onChange: onURLChange
+    onChange: onURLChange,
+    onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignInline: "center",
     alignBlock: "center",
@@ -220,7 +243,7 @@ function MediaFromURL(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_new.default, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !url,
+    isDisabled: !inputUrl,
     iconBefore: _filePreview.default
   }, strings.loadPreview)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: ButtonGroupStyles

package/dist/es2019/ui/FromURL.js

@@ -79,20 +79,15 @@ export function MediaFromURL({
     errorMessage: intl.formatMessage(mediaInsertMessages.errorMessage),
     warning: intl.formatMessage(mediaInsertMessages.warning)
   };
-  const [url, setUrl] = React.useState(placeholders[1]);
+  const [inputUrl, setUrl] = React.useState(placeholders[1]);
   const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
+  const pasteFlag = React.useRef(false);
   const {
     onUploadAnalytics,
     onUploadSuccessAnalytics,
     onUploadFailureAnalytics
   } = useAnalyticsEvents(dispatchAnalyticsEvent);
-  const onURLChange = React.useCallback(e => {
-    setUrl(e.target.value);
-    dispatch({
-      type: 'reset'
-    });
-  }, []);
-  const uploadExternalMedia = React.useCallback(async () => {
+  const uploadExternalMedia = React.useCallback(async url => {
     dispatch({
       type: 'loading'
     });
@@ -131,7 +126,7 @@ export function MediaFromURL({
         dispatch({
           type: 'warning',
           warning: e,
-          url
+          url: inputUrl
         });
       } else if (e instanceof Error) {
         const message = 'Image preview fetch failed';
@@ -148,27 +143,50 @@ export function MediaFromURL({
         });
       }
     }
-  }, [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+  }, [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, inputUrl]);
+  const onURLChange = React.useCallback(e => {
+    const url = e.target.value;
+    setUrl(url);
+    dispatch({
+      type: 'reset'
+    });
+    if (pasteFlag.current === true) {
+      pasteFlag.current = false;
+      uploadExternalMedia(url);
+    }
+  }, [uploadExternalMedia]);
+  const onPaste = React.useCallback(e => {
+    // Note: this is a little weird, but the paste event will always be
+    // fired before the change event when pasting. We don't really want to
+    // duplicate logic by handling pastes separately to changes, so we're
+    // just noting paste occured to then be handled in the onURLChange fn
+    // above. The one exception to this is where paste inputs exactly what was
+    // already in the input, in which case we want to ignore it.
+    if (e.clipboardData.getData('text') !== inputUrl) {
+      pasteFlag.current = true;
+    }
+  }, [inputUrl]);
   const onInsertClick = React.useCallback(() => {
     if (previewState.previewInfo) {
       return onInsert(previewState.previewInfo);
     }
     if (previewState.warning) {
-      return onExternalInsert(url);
+      return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: e => {
       e.preventDefault();
-      uploadExternalMedia();
+      uploadExternalMedia(inputUrl);
     }
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
   }, /*#__PURE__*/React.createElement(TextField, {
     autoFocus: true,
-    value: url,
+    value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
-    onChange: onURLChange
+    onChange: onURLChange,
+    onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
     alignBlock: "center",
@@ -188,7 +206,7 @@ export function MediaFromURL({
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !url,
+    isDisabled: !inputUrl,
     iconBefore: EditorFilePreviewIcon
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles

package/dist/esm/ui/FromURL.js

@@ -82,118 +82,141 @@ export function MediaFromURL(_ref) {
   };
   var _React$useState = React.useState(placeholders[1]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    url = _React$useState2[0],
+    inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
   var _React$useReducer = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
     previewState = _React$useReducer2[0],
     dispatch = _React$useReducer2[1];
+  var pasteFlag = React.useRef(false);
   var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
     onUploadAnalytics = _useAnalyticsEvents.onUploadAnalytics,
     onUploadSuccessAnalytics = _useAnalyticsEvents.onUploadSuccessAnalytics,
     onUploadFailureAnalytics = _useAnalyticsEvents.onUploadFailureAnalytics;
-  var onURLChange = React.useCallback(function (e) {
-    setUrl(e.target.value);
-    dispatch({
-      type: 'reset'
-    });
-  }, []);
-  var uploadExternalMedia = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          dispatch({
-            type: 'loading'
-          });
-          _context.next = 3;
-          return mediaProvider;
-        case 3:
-          _yield$mediaProvider = _context.sent;
-          uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
-          uploadParams = _yield$mediaProvider.uploadParams;
-          if (uploadMediaClientConfig) {
-            _context.next = 8;
-            break;
-          }
-          return _context.abrupt("return");
-        case 8:
-          mediaClient = getMediaClient(uploadMediaClientConfig);
-          collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
-          onUploadAnalytics();
-          _context.prev = 11;
-          _context.next = 14;
-          return mediaClient.file.uploadExternal(url, collection);
-        case 14:
-          _yield$mediaClient$fi = _context.sent;
-          uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
-          dimensions = _yield$mediaClient$fi.dimensions;
-          onUploadSuccessAnalytics();
-          dispatch({
-            type: 'success',
-            payload: {
-              id: uploadableFileUpfrontIds.id,
-              collection: collection,
-              height: dimensions.height,
-              width: dimensions.width,
-              occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
-            }
-          });
-          _context.next = 24;
-          break;
-        case 21:
-          _context.prev = 21;
-          _context.t0 = _context["catch"](11);
-          if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
-            // TODO: Make sure this gets good unit test coverage with the actual
-            // media plugin. This hard coded error message could be changed at any
-            // point and we need a unit test to break to stop people changing it.
-            onUploadFailureAnalytics(_context.t0);
-            dispatch({
-              type: 'warning',
-              warning: _context.t0,
-              url: url
-            });
-          } else if (_context.t0 instanceof Error) {
-            message = 'Image preview fetch failed';
-            onUploadFailureAnalytics(message);
+  var uploadExternalMedia = React.useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+      var _yield$mediaProvider, uploadMediaClientConfig, uploadParams, mediaClient, collection, _yield$mediaClient$fi, uploadableFileUpfrontIds, dimensions, message;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
             dispatch({
-              type: 'error',
-              error: message
+              type: 'loading'
             });
-          } else {
-            onUploadFailureAnalytics('Unknown error');
+            _context.next = 3;
+            return mediaProvider;
+          case 3:
+            _yield$mediaProvider = _context.sent;
+            uploadMediaClientConfig = _yield$mediaProvider.uploadMediaClientConfig;
+            uploadParams = _yield$mediaProvider.uploadParams;
+            if (uploadMediaClientConfig) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return");
+          case 8:
+            mediaClient = getMediaClient(uploadMediaClientConfig);
+            collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+            onUploadAnalytics();
+            _context.prev = 11;
+            _context.next = 14;
+            return mediaClient.file.uploadExternal(url, collection);
+          case 14:
+            _yield$mediaClient$fi = _context.sent;
+            uploadableFileUpfrontIds = _yield$mediaClient$fi.uploadableFileUpfrontIds;
+            dimensions = _yield$mediaClient$fi.dimensions;
+            onUploadSuccessAnalytics();
             dispatch({
-              type: 'error',
-              error: 'Unknown error'
+              type: 'success',
+              payload: {
+                id: uploadableFileUpfrontIds.id,
+                collection: collection,
+                height: dimensions.height,
+                width: dimensions.width,
+                occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+              }
             });
-          }
-        case 24:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[11, 21]]);
-  })), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, url]);
+            _context.next = 24;
+            break;
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](11);
+            if (typeof _context.t0 === 'string' && _context.t0 === 'Could not download remote file') {
+              // TODO: Make sure this gets good unit test coverage with the actual
+              // media plugin. This hard coded error message could be changed at any
+              // point and we need a unit test to break to stop people changing it.
+              onUploadFailureAnalytics(_context.t0);
+              dispatch({
+                type: 'warning',
+                warning: _context.t0,
+                url: inputUrl
+              });
+            } else if (_context.t0 instanceof Error) {
+              message = 'Image preview fetch failed';
+              onUploadFailureAnalytics(message);
+              dispatch({
+                type: 'error',
+                error: message
+              });
+            } else {
+              onUploadFailureAnalytics('Unknown error');
+              dispatch({
+                type: 'error',
+                error: 'Unknown error'
+              });
+            }
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[11, 21]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [mediaProvider, onUploadAnalytics, onUploadFailureAnalytics, onUploadSuccessAnalytics, inputUrl]);
+  var onURLChange = React.useCallback(function (e) {
+    var url = e.target.value;
+    setUrl(url);
+    dispatch({
+      type: 'reset'
+    });
+    if (pasteFlag.current === true) {
+      pasteFlag.current = false;
+      uploadExternalMedia(url);
+    }
+  }, [uploadExternalMedia]);
+  var onPaste = React.useCallback(function (e) {
+    // Note: this is a little weird, but the paste event will always be
+    // fired before the change event when pasting. We don't really want to
+    // duplicate logic by handling pastes separately to changes, so we're
+    // just noting paste occured to then be handled in the onURLChange fn
+    // above. The one exception to this is where paste inputs exactly what was
+    // already in the input, in which case we want to ignore it.
+    if (e.clipboardData.getData('text') !== inputUrl) {
+      pasteFlag.current = true;
+    }
+  }, [inputUrl]);
   var onInsertClick = React.useCallback(function () {
     if (previewState.previewInfo) {
       return onInsert(previewState.previewInfo);
     }
     if (previewState.warning) {
-      return onExternalInsert(url);
+      return onExternalInsert(inputUrl);
     }
-  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, url]);
+  }, [onExternalInsert, onInsert, previewState.previewInfo, previewState.warning, inputUrl]);
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: function onSubmit(e) {
       e.preventDefault();
-      uploadExternalMedia();
+      uploadExternalMedia(inputUrl);
     }
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
   }, /*#__PURE__*/React.createElement(TextField, {
     autoFocus: true,
-    value: url,
+    value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
-    onChange: onURLChange
+    onChange: onURLChange,
+    onPaste: onPaste
   }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
     alignBlock: "center",
@@ -213,7 +236,7 @@ export function MediaFromURL(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: !url,
+    isDisabled: !inputUrl,
     iconBefore: EditorFilePreviewIcon
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,21 +24,21 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/editor-common": "^87.6.0",
-		"@atlaskit/icon": "^22.11.0",
+		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/editor-common": "^87.8.0",
+		"@atlaskit/icon": "^22.12.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
-		"@atlaskit/primitives": "^11.1.0",
-		"@atlaskit/section-message": "^6.5.0",
-		"@atlaskit/textfield": "^6.4.0",
+		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/section-message": "^6.6.0",
+		"@atlaskit/textfield": "^6.5.0",
 		"@babel/runtime": "^7.0.0",
 		"react": "^16.8.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/tokens": "^1.57.0"
+		"@atlaskit/tokens": "^1.58.0"
 	},
 	"devDependencies": {
 		"typescript": "~5.4.2"