@atlaskit/editor-core 185.2.14 → 185.2.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 185.2.19
+
+### Patch Changes
+
+- [`6d852a003e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d852a003e4) - Fixes link picker not returning focus on close when `lp-link-picker-focus-trap` feature flag is enabled
+
+## 185.2.16
+
+### Patch Changes
+
+- [`b273cb8b28a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b273cb8b28a) - The ModalElementBrower will no longer rerender when the editor state changes, instead it will only cause a rerender when the view is changed. This is to avoid lose of context within the element browser.
+
 ## 185.2.14
 
 ### Patch Changes

package/dist/cjs/plugins/hyperlink/Toolbar.js

@@ -84,7 +84,7 @@ var getToolbarConfig = function getToolbarConfig(options, featureFlags, editorAn
     var lpLinkPicker = featureFlags.lpLinkPicker,
       lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    var shouldEnableFocusTrap = Boolean(lpLinkPicker && lpLinkPickerFocusTrap);
     if (linkState && linkState.activeLinkMark) {
       var activeLinkMark = linkState.activeLinkMark;
       var hyperLinkToolbar = {
@@ -220,6 +220,9 @@ var getToolbarConfig = function getToolbarConfig(options, featureFlags, editorAn
                     onCancel: function onCancel() {
                       return view.focus();
                     },
+                    onClose: lpLinkPickerFocusTrap ? function () {
+                      return view.focus();
+                    } : undefined,
                     onSubmit: function onSubmit(href) {
                       var _options$cardOptions;
                       var title = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -233,7 +236,9 @@ var getToolbarConfig = function getToolbarConfig(options, featureFlags, editorAn
                         sourceEvent: analytic
                       }) : (0, _commands.insertLinkWithAnalytics)(inputMethod, activeLinkMark.from, activeLinkMark.to, href, title, displayText, !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider), analytic);
                       command(view.state, view.dispatch, view);
-                      view.focus();
+                      if (!lpLinkPickerFocusTrap) {
+                        view.focus();
+                      }
                     }
                   });
                 }

package/dist/cjs/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -15,7 +15,7 @@ var _commands = require("../../commands");
 var _useEscapeClickaway = require("./useEscapeClickaway");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("@atlaskit/editor-common/utils");
-var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance"];
+var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance", "onClose"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -28,7 +28,29 @@ var EditorLinkPicker = function EditorLinkPicker(_ref) {
     _ref$invokeMethod = _ref.invokeMethod,
     invokeMethod = _ref$invokeMethod === void 0 ? '_unknown' : _ref$invokeMethod,
     editorAppearance = _ref.editorAppearance,
+    onClose = _ref.onClose,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  /**
+   * Track onClose handler in a
+   * ref so that we void needing it in the dependency array
+   * below
+   */
+  var onCloseRef = (0, _react.useRef)(onClose);
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = onClose;
+  });
+
+  /**
+   * Call onClose on mount, usefull to provide
+   * a handler for performing an action after the component has been
+   * unmounted (e.g. return focus to the editors)
+   */
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _onCloseRef$current;
+      return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+    };
+  }, []);
   var onEscape = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
     view.dispatch((0, _actions.hideLinkToolbar)(view.state.tr));

package/dist/cjs/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -53,7 +53,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         view = _this$props.view,
         onCancel = _this$props.onCancel,
         invokeMethod = _this$props.invokeMethod,
-        featureFlags = _this$props.featureFlags;
+        featureFlags = _this$props.featureFlags,
+        onClose = _this$props.onClose;
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['activityProvider', 'searchProvider'],
         providerFactory: providerFactory,
@@ -79,7 +80,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
                   url: displayUrl,
                   displayText: displayText,
                   onSubmit: onSubmitInterface(onSubmit),
-                  onCancel: onCancel
+                  onCancel: onCancel,
+                  onClose: onClose
                 }));
               }
               return /*#__PURE__*/_react.default.createElement(_HyperlinkAddToolbar.default, {

package/dist/cjs/plugins/media/ui/ImageBorder/styles.js

@@ -30,11 +30,11 @@ exports.itemSpacing = itemSpacing;
 var contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: 4px;\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-icon, ".concat(colors.N90, ")"));
 exports.contextualMenuArrow = contextualMenuArrow;
 var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-100, 3px)", color && "background: ".concat(color));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
 };
 exports.contextualMenuColorIcon = contextualMenuColorIcon;
 var contextualSubMenu = function contextualSubMenu(index) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N60A, ", 0 0 1px ").concat(colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N60A, ", 0 0 1px ").concat(colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
 };
 exports.contextualSubMenu = contextualSubMenu;
 var buttonStyle = function buttonStyle(selected) {

package/dist/cjs/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -30,11 +30,11 @@ var Modal = function Modal(_ref) {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
     focusInEditor();
     (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   var onClose = (0, _react.useCallback)(function () {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
     focusInEditor();
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
     getItems: getItems,
     onInsertItem: onInsertItem,

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -38,13 +38,15 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     selectedItem = _useState2[0],
     setSelectedItem = _useState2[1];
   var helpUrl = props.helpUrl,
-    intl = props.intl;
+    intl = props.intl,
+    onClose = props.onClose,
+    onInsertItemFn = props.onInsertItem;
   var onSelectItem = (0, _react.useCallback)(function (item) {
     setSelectedItem(item);
   }, [setSelectedItem]);
   var onInsertItem = (0, _react.useCallback)(function (item) {
-    props.onInsertItem(item);
-  }, [props]);
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
   var RenderFooter = (0, _react.useCallback)(function () {
     return (0, _react2.jsx)(Footer, {
       onInsert: function onInsert() {
@@ -57,9 +59,9 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   var onKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === 'Escape') {
-      props.onClose();
+      onClose();
     }
-  }, [props]);
+  }, [onClose]);
   var RenderBody = (0, _react.useCallback)(function () {
     return (0, _react2.jsx)("div", {
       css: wrapper

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "185.2.14";
+var version = "185.2.19";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.14",
+	"version": "185.2.19",
 	"sideEffects": false
 }

package/dist/es2019/plugins/hyperlink/Toolbar.js

@@ -72,7 +72,7 @@ export const getToolbarConfig = (options, featureFlags, editorAnalyticsApi) => (
     lpLinkPickerFocusTrap,
     preventPopupOverflow
   } = featureFlags;
-  const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+  const shouldEnableFocusTrap = Boolean(lpLinkPicker && lpLinkPickerFocusTrap);
   if (linkState && linkState.activeLinkMark) {
     const {
       activeLinkMark
@@ -206,6 +206,7 @@ export const getToolbarConfig = (options, featureFlags, editorAnalyticsApi) => (
                   displayText: displayText || '',
                   providerFactory: providerFactory,
                   onCancel: () => view.focus(),
+                  onClose: lpLinkPickerFocusTrap ? () => view.focus() : undefined,
                   onSubmit: (href, title = '', displayText, inputMethod, analytic) => {
                     var _options$cardOptions;
                     const isEdit = isEditLink(activeLinkMark);
@@ -215,7 +216,9 @@ export const getToolbarConfig = (options, featureFlags, editorAnalyticsApi) => (
                       sourceEvent: analytic
                     }) : insertLinkWithAnalytics(inputMethod, activeLinkMark.from, activeLinkMark.to, href, title, displayText, !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider), analytic);
                     command(view.state, view.dispatch, view);
-                    view.focus();
+                    if (!lpLinkPickerFocusTrap) {
+                      view.focus();
+                    }
                   }
                 });
               }

package/dist/es2019/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { LinkPicker } from '@atlaskit/link-picker';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { hideLinkToolbar } from '../../commands';
@@ -16,8 +16,28 @@ export const EditorLinkPicker = ({
   onCancel,
   invokeMethod = '_unknown',
   editorAppearance,
+  onClose,
   ...restProps
 }) => {
+  /**
+   * Track onClose handler in a
+   * ref so that we void needing it in the dependency array
+   * below
+   */
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+
+  /**
+   * Call onClose on mount, usefull to provide
+   * a handler for performing an action after the component has been
+   * unmounted (e.g. return focus to the editors)
+   */
+  useEffect(() => () => {
+    var _onCloseRef$current;
+    return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+  }, []);
   const onEscape = useCallback(() => {
     hideLinkToolbar()(view.state, view.dispatch);
     view.dispatch(cardHideLinkToolbar(view.state.tr));

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -29,7 +29,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
       view,
       onCancel,
       invokeMethod,
-      featureFlags
+      featureFlags,
+      onClose
     } = this.props;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['activityProvider', 'searchProvider'],
@@ -59,7 +60,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
               url: displayUrl,
               displayText: displayText,
               onSubmit: onSubmitInterface(onSubmit),
-              onCancel: onCancel
+              onCancel: onCancel,
+              onClose: onClose
             }));
           }
           return /*#__PURE__*/React.createElement(HyperlinkAddToolbarComp, {

package/dist/es2019/plugins/media/ui/ImageBorder/styles.js

@@ -31,14 +31,14 @@ export const contextualMenuColorIcon = color => css`
     content: '';
     display: block;
     border: 1px solid ${DEFAULT_BORDER_COLOR};
-    border-radius: ${"var(--ds-radius-100, 3px)"};
+    border-radius: ${"var(--ds-border-radius-100, 3px)"};
     width: 20px;
     height: 20px;
     ${color && `background: ${color}`}
   }
 `;
 export const contextualSubMenu = index => css`
-  border-radius: ${"var(--ds-radius-100, 3px)"};
+  border-radius: ${"var(--ds-border-radius-100, 3px)"};
   background: ${"var(--ds-surface-overlay, white)"};
   box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
   display: flex;

package/dist/es2019/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -19,11 +19,11 @@ const Modal = ({
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
     insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   const onClose = useCallback(() => {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -44,14 +44,16 @@ const ModalElementBrowser = props => {
   const [selectedItem, setSelectedItem] = useState();
   const {
     helpUrl,
-    intl
+    intl,
+    onClose,
+    onInsertItem: onInsertItemFn
   } = props;
   const onSelectItem = useCallback(item => {
     setSelectedItem(item);
   }, [setSelectedItem]);
   const onInsertItem = useCallback(item => {
-    props.onInsertItem(item);
-  }, [props]);
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
   const RenderFooter = useCallback(() => jsx(Footer, {
     onInsert: () => onInsertItem(selectedItem),
     beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
@@ -60,9 +62,9 @@ const ModalElementBrowser = props => {
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   const onKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
-      props.onClose();
+      onClose();
     }
-  }, [props]);
+  }, [onClose]);
   const RenderBody = useCallback(() => jsx("div", {
     css: wrapper
   }, jsx(ElementBrowser, {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.2.14";
+export const version = "185.2.19";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.14",
+	"version": "185.2.19",
 	"sideEffects": false
 }

package/dist/esm/plugins/hyperlink/Toolbar.js

@@ -77,7 +77,7 @@ export var getToolbarConfig = function getToolbarConfig(options, featureFlags, e
     var lpLinkPicker = featureFlags.lpLinkPicker,
       lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    var shouldEnableFocusTrap = Boolean(lpLinkPicker && lpLinkPickerFocusTrap);
     if (linkState && linkState.activeLinkMark) {
       var activeLinkMark = linkState.activeLinkMark;
       var hyperLinkToolbar = {
@@ -213,6 +213,9 @@ export var getToolbarConfig = function getToolbarConfig(options, featureFlags, e
                     onCancel: function onCancel() {
                       return view.focus();
                     },
+                    onClose: lpLinkPickerFocusTrap ? function () {
+                      return view.focus();
+                    } : undefined,
                     onSubmit: function onSubmit(href) {
                       var _options$cardOptions;
                       var title = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -226,7 +229,9 @@ export var getToolbarConfig = function getToolbarConfig(options, featureFlags, e
                         sourceEvent: analytic
                       }) : insertLinkWithAnalytics(inputMethod, activeLinkMark.from, activeLinkMark.to, href, title, displayText, !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider), analytic);
                       command(view.state, view.dispatch, view);
-                      view.focus();
+                      if (!lpLinkPickerFocusTrap) {
+                        view.focus();
+                      }
                     }
                   });
                 }

package/dist/esm/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance"];
-import React, { useCallback, useMemo } from 'react';
+var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance", "onClose"];
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { LinkPicker } from '@atlaskit/link-picker';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { hideLinkToolbar } from '../../commands';
@@ -19,7 +19,29 @@ export var EditorLinkPicker = function EditorLinkPicker(_ref) {
     _ref$invokeMethod = _ref.invokeMethod,
     invokeMethod = _ref$invokeMethod === void 0 ? '_unknown' : _ref$invokeMethod,
     editorAppearance = _ref.editorAppearance,
+    onClose = _ref.onClose,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * Track onClose handler in a
+   * ref so that we void needing it in the dependency array
+   * below
+   */
+  var onCloseRef = useRef(onClose);
+  useEffect(function () {
+    onCloseRef.current = onClose;
+  });
+
+  /**
+   * Call onClose on mount, usefull to provide
+   * a handler for performing an action after the component has been
+   * unmounted (e.g. return focus to the editors)
+   */
+  useEffect(function () {
+    return function () {
+      var _onCloseRef$current;
+      return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+    };
+  }, []);
   var onEscape = useCallback(function () {
     hideLinkToolbar()(view.state, view.dispatch);
     view.dispatch(cardHideLinkToolbar(view.state.tr));

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -46,7 +46,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         view = _this$props.view,
         onCancel = _this$props.onCancel,
         invokeMethod = _this$props.invokeMethod,
-        featureFlags = _this$props.featureFlags;
+        featureFlags = _this$props.featureFlags,
+        onClose = _this$props.onClose;
       return /*#__PURE__*/React.createElement(WithProviders, {
         providers: ['activityProvider', 'searchProvider'],
         providerFactory: providerFactory,
@@ -72,7 +73,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
                   url: displayUrl,
                   displayText: displayText,
                   onSubmit: onSubmitInterface(onSubmit),
-                  onCancel: onCancel
+                  onCancel: onCancel,
+                  onClose: onClose
                 }));
               }
               return /*#__PURE__*/React.createElement(HyperlinkAddToolbarComp, {

package/dist/esm/plugins/media/ui/ImageBorder/styles.js

@@ -20,10 +20,10 @@ export var menuItemDimensions = {
 export var itemSpacing = gridSize() / 2;
 export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: 4px;\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-icon, ".concat(N90, ")"));
 export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-radius-100, 3px)", color && "background: ".concat(color));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
 };
 export var contextualSubMenu = function contextualSubMenu(index) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
 };
 export var buttonStyle = function buttonStyle(selected) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);

package/dist/esm/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -20,11 +20,11 @@ var Modal = function Modal(_ref) {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
     insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   var onClose = useCallback(function () {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
-  }, [editorView.dispatch, editorView.state, focusInEditor]);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,

package/dist/esm/ui/ElementBrowser/ModalElementBrowser.js

@@ -28,13 +28,15 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     selectedItem = _useState2[0],
     setSelectedItem = _useState2[1];
   var helpUrl = props.helpUrl,
-    intl = props.intl;
+    intl = props.intl,
+    onClose = props.onClose,
+    onInsertItemFn = props.onInsertItem;
   var onSelectItem = useCallback(function (item) {
     setSelectedItem(item);
   }, [setSelectedItem]);
   var onInsertItem = useCallback(function (item) {
-    props.onInsertItem(item);
-  }, [props]);
+    onInsertItemFn(item);
+  }, [onInsertItemFn]);
   var RenderFooter = useCallback(function () {
     return jsx(Footer, {
       onInsert: function onInsert() {
@@ -47,9 +49,9 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   var onKeyDown = useCallback(function (e) {
     if (e.key === 'Escape') {
-      props.onClose();
+      onClose();
     }
-  }, [props]);
+  }, [onClose]);
   var RenderBody = useCallback(function () {
     return jsx("div", {
       css: wrapper

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.2.14";
+export var version = "185.2.19";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.14",
+	"version": "185.2.19",
 	"sideEffects": false
 }

package/dist/types/plugins/hyperlink/ui/EditorLinkPicker/index.d.ts

@@ -14,6 +14,8 @@ export interface EditorLinkPickerProps extends OptionalKeys<LinkPickerProps, 'on
      */
     invokeMethod?: string;
     editorAppearance?: EditorAppearance;
+    /** Callback to execute on unmount */
+    onClose?: () => void;
 }
-export declare const EditorLinkPicker: ({ view, onCancel, invokeMethod, editorAppearance, ...restProps }: EditorLinkPickerProps) => JSX.Element;
+export declare const EditorLinkPicker: ({ view, onCancel, invokeMethod, editorAppearance, onClose, ...restProps }: EditorLinkPickerProps) => JSX.Element;
 export {};

package/dist/types/plugins/hyperlink/ui/HyperlinkAddToolbar/index.d.ts

@@ -5,7 +5,7 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { LinkInputType, LinkPickerOptions } from '@atlaskit/editor-common/types';
 import { EditorLinkPickerProps } from '../EditorLinkPicker';
 import { FeatureFlags } from '@atlaskit/editor-common/types';
-export interface Props extends Pick<EditorLinkPickerProps, 'onCancel' | 'invokeMethod'> {
+export interface Props extends Pick<EditorLinkPickerProps, 'onCancel' | 'invokeMethod' | 'onClose'> {
     view: EditorView;
     providerFactory: ProviderFactory;
     onSubmit: (href: string, title: string | undefined, displayText: string | undefined, inputMethod: LinkInputType, analytic?: UIAnalyticsEvent | null | undefined) => void;

package/dist/types-ts4.5/plugins/hyperlink/ui/EditorLinkPicker/index.d.ts

@@ -14,6 +14,8 @@ export interface EditorLinkPickerProps extends OptionalKeys<LinkPickerProps, 'on
      */
     invokeMethod?: string;
     editorAppearance?: EditorAppearance;
+    /** Callback to execute on unmount */
+    onClose?: () => void;
 }
-export declare const EditorLinkPicker: ({ view, onCancel, invokeMethod, editorAppearance, ...restProps }: EditorLinkPickerProps) => JSX.Element;
+export declare const EditorLinkPicker: ({ view, onCancel, invokeMethod, editorAppearance, onClose, ...restProps }: EditorLinkPickerProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/hyperlink/ui/HyperlinkAddToolbar/index.d.ts

@@ -5,7 +5,7 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { LinkInputType, LinkPickerOptions } from '@atlaskit/editor-common/types';
 import { EditorLinkPickerProps } from '../EditorLinkPicker';
 import { FeatureFlags } from '@atlaskit/editor-common/types';
-export interface Props extends Pick<EditorLinkPickerProps, 'onCancel' | 'invokeMethod'> {
+export interface Props extends Pick<EditorLinkPickerProps, 'onCancel' | 'invokeMethod' | 'onClose'> {
     view: EditorView;
     providerFactory: ProviderFactory;
     onSubmit: (href: string, title: string | undefined, displayText: string | undefined, inputMethod: LinkInputType, analytic?: UIAnalyticsEvent | null | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "185.2.14",
+  "version": "185.2.19",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/link-analytics": "^8.0.0",
-    "@atlaskit/link-picker": "^1.24.0",
+    "@atlaskit/link-picker": "^1.25.0",
     "@atlaskit/locale": "^2.5.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/media-card": "^76.0.0",
@@ -98,7 +98,7 @@
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/toggle": "^12.6.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.6.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -167,7 +167,7 @@
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/menu": "^1.7.0",
-    "@atlaskit/page-layout": "^1.6.0",
+    "@atlaskit/page-layout": "^1.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/renderer": "^108.2.0",
     "@atlaskit/section-message": "^6.4.0",
@@ -181,7 +181,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/link-picker-plugins": "^22.3.0",
+    "@atlassian/link-picker-plugins": "^23.0.0",
     "@atlassian/search-provider": "2.4.6",
     "@atlassian/ufo": "^0.2.0",
     "@emotion/jest": "^11.8.0",