@atlaskit/editor-plugin-media-insert 31.0.0 → 31.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 31.1.0
+
+### Minor Changes
+
+- [`8ed6929dc7678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ed6929dc7678) -
+  [ux] [A11Y-42785] Restore keyboard focus to the triggering toolbar button (e.g. "Add image, video,
+  or file") when the media insert picker is closed via Cancel, Escape, or click-outside. Previously
+  focus was lost or moved unpredictably, forcing keyboard and screen-reader users to tab through the
+  page to return to the toolbar. Behind the `platform_editor_fix_focus_MediaInsertPicker`
+  experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 31.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.0.0
 
 ### Minor Changes

package/dist/cjs/ui/MediaFromURL.js

@@ -28,6 +28,7 @@ var _helperMessage = require("@atlaskit/form/helper-message");
 var _messageWrapper = require("@atlaskit/form/message-wrapper");
 var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
 var _getMediaClient = require("@atlaskit/media-client-react/get-media-client");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _primitives = require("@atlaskit/primitives");
 var _message = _interopRequireDefault(require("@atlaskit/section-message/message"));
 var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
@@ -106,6 +107,8 @@ function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
     closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    _ref$cancelMediaInser = _ref.cancelMediaInsertPicker,
+    cancelMediaInsertPicker = _ref$cancelMediaInser === void 0 ? closeMediaInsertPicker : _ref$cancelMediaInser,
     insertMediaSingle = _ref.insertMediaSingle,
     insertExternalMediaSingle = _ref.insertExternalMediaSingle,
     isOnlyExternalLinks = _ref.isOnlyExternalLinks,
@@ -275,9 +278,13 @@ function MediaFromURL(_ref) {
         };
         dispatchAnalyticsEvent(payload);
       }
-      closeMediaInsertPicker();
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+        cancelMediaInsertPicker();
+      } else {
+        closeMediaInsertPicker();
+      }
     }
-  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  }, [dispatchAnalyticsEvent, cancelMediaInsertPicker, closeMediaInsertPicker]);
   var onCancel = _react.default.useCallback(function () {
     if (dispatchAnalyticsEvent) {
       var payload = {
@@ -288,8 +295,12 @@ function MediaFromURL(_ref) {
       };
       dispatchAnalyticsEvent(payload);
     }
-    closeMediaInsertPicker();
-  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+      cancelMediaInsertPicker();
+    } else {
+      closeMediaInsertPicker();
+    }
+  }, [cancelMediaInsertPicker, dispatchAnalyticsEvent, closeMediaInsertPicker]);
   return /*#__PURE__*/_react.default.createElement(_form.default, {
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     onSubmit: function onSubmit(_ref3, form) {

package/dist/cjs/ui/MediaInsertPicker.js

@@ -23,7 +23,7 @@ var _tabList = _interopRequireDefault(require("@atlaskit/tabs/tab-list"));
 var _useTab2 = _interopRequireDefault(require("@atlaskit/tabs/use-tab"));
 var _useTabPanel = _interopRequireDefault(require("@atlaskit/tabs/use-tab-panel"));
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _useFocusEditor = require("./hooks/use-focus-editor");
+var _useFocus = require("./hooks/use-focus");
 var _useUnholyAutofocus2 = require("./hooks/use-unholy-autofocus");
 var _LocalMedia = require("./LocalMedia");
 var _MediaFromURL = require("./MediaFromURL");
@@ -154,10 +154,26 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     targetRef = (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
     mountPoint = popupsMountPoint;
   }
-  var intl = (0, _reactIntl.useIntl)();
-  var focusEditor = (0, _useFocusEditor.useFocusEditor)({
-    editorView: editorView
+  var focusButton = (0, _useFocus.useFocus)({
+    target: targetRef !== null && targetRef !== void 0 ? targetRef : editorView
+  });
+  var focusEditor = (0, _useFocus.useFocus)({
+    target: editorView
   });
+  // returnFocusRef stores which function we call on unmount: focusButton | focusEditor
+  // Needs to be a ref so we can instantly toggle it before unmounting triggers the focus trap
+  var returnFocusRef = _react.default.useRef(focusEditor);
+  // When inserting media, close picker and focus editor.
+  var closeAndFocusEditor = _react.default.useCallback(function () {
+    returnFocusRef.current = focusEditor;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusEditor]);
+  // When cancelling, close picker and return focus to button.
+  var closeAndReturnFocusToButton = _react.default.useCallback(function () {
+    returnFocusRef.current = focusButton;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusButton]);
+  var intl = (0, _reactIntl.useIntl)();
   var _useUnholyAutofocus = (0, _useUnholyAutofocus2.useUnholyAutofocus)(),
     autofocusRef = _useUnholyAutofocus.autofocusRef,
     onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
@@ -292,15 +308,19 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
         };
         dispatchAnalyticsEvent(payload);
       }
-      closeMediaInsertPicker(); // Focuses editor on unmount
-      if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+        closeAndReturnFocusToButton();
+      } else {
+        closeMediaInsertPicker(); // Focuses editor on unmount
         focusEditor();
       }
     };
   };
   var closePickerAndFocusEditor = function closePickerAndFocusEditor() {
-    closeMediaInsertPicker(); // Focuses editor on unmount
-    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
+      closeAndFocusEditor();
+    } else {
+      closeMediaInsertPicker();
       focusEditor();
     }
   };
@@ -315,7 +335,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
-    onUnmount: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker') ? focusEditor : undefined,
+    onUnmount: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker') ? function () {
+      return returnFocusRef.current();
+    } : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
@@ -369,6 +391,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
         mediaProvider: mediaProvider,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         closeMediaInsertPicker: closePickerAndFocusEditor,
+        cancelMediaInsertPicker: closeAndReturnFocusToButton,
         insertMediaSingle: insertMediaSingle,
         insertExternalMediaSingle: insertExternalMediaSingle,
         isOnlyExternalLinks: isOnlyExternalLinks,

package/dist/cjs/ui/hooks/use-focus.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocus = void 0;
+var _react = require("react");
+// Usually either a DOM node or editorView
+
+var useFocus = exports.useFocus = function useFocus(_ref) {
+  var target = _ref.target;
+  var focus = (0, _react.useCallback)(function () {
+    // Use setTimeout to run this async after any DOM updates in same callback
+    setTimeout(function () {
+      return target.focus();
+    }, 0);
+  }, [target]);
+  return focus;
+};

package/dist/es2019/ui/MediaFromURL.js

@@ -14,6 +14,7 @@ import { HelperMessage } from '@atlaskit/form/helper-message';
 import { MessageWrapper } from '@atlaskit/form/message-wrapper';
 import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message/message';
@@ -94,6 +95,7 @@ export function MediaFromURL({
   mediaProvider,
   dispatchAnalyticsEvent,
   closeMediaInsertPicker,
+  cancelMediaInsertPicker = closeMediaInsertPicker,
   insertMediaSingle,
   insertExternalMediaSingle,
   isOnlyExternalLinks,
@@ -240,9 +242,13 @@ export function MediaFromURL({
         };
         dispatchAnalyticsEvent(payload);
       }
-      closeMediaInsertPicker();
+      if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+        cancelMediaInsertPicker();
+      } else {
+        closeMediaInsertPicker();
+      }
     }
-  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  }, [dispatchAnalyticsEvent, cancelMediaInsertPicker, closeMediaInsertPicker]);
   const onCancel = React.useCallback(() => {
     if (dispatchAnalyticsEvent) {
       const payload = {
@@ -253,8 +259,12 @@ export function MediaFromURL({
       };
       dispatchAnalyticsEvent(payload);
     }
-    closeMediaInsertPicker();
-  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+    if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      cancelMediaInsertPicker();
+    } else {
+      closeMediaInsertPicker();
+    }
+  }, [cancelMediaInsertPicker, dispatchAnalyticsEvent, closeMediaInsertPicker]);
   return /*#__PURE__*/React.createElement(Form, {
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     onSubmit: ({

package/dist/es2019/ui/MediaInsertPicker.js

@@ -15,7 +15,7 @@ import TabList from '@atlaskit/tabs/tab-list';
 import useTab from '@atlaskit/tabs/use-tab';
 import useTabPanel from '@atlaskit/tabs/use-tab-panel';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { useFocusEditor } from './hooks/use-focus-editor';
+import { useFocus } from './hooks/use-focus';
 import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
 import { LocalMedia } from './LocalMedia';
 import { MediaFromURL } from './MediaFromURL';
@@ -117,7 +117,7 @@ export const MediaInsertPicker = ({
   customizedUrlValidation,
   customizedHelperMessage
 }) => {
-  var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$acti2, _api$mediaInsert$acti3;
+  var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$acti2, _api$mediaInsert$acti3, _targetRef;
   // Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
   // Read once per render; the registry is mutated only at plugin setup time so this is stable
   // for the lifetime of an editor instance.
@@ -145,10 +145,26 @@ export const MediaInsertPicker = ({
     targetRef = getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
     mountPoint = popupsMountPoint;
   }
-  const intl = useIntl();
-  const focusEditor = useFocusEditor({
-    editorView
+  const focusButton = useFocus({
+    target: (_targetRef = targetRef) !== null && _targetRef !== void 0 ? _targetRef : editorView
+  });
+  const focusEditor = useFocus({
+    target: editorView
   });
+  // returnFocusRef stores which function we call on unmount: focusButton | focusEditor
+  // Needs to be a ref so we can instantly toggle it before unmounting triggers the focus trap
+  const returnFocusRef = React.useRef(focusEditor);
+  // When inserting media, close picker and focus editor.
+  const closeAndFocusEditor = React.useCallback(() => {
+    returnFocusRef.current = focusEditor;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusEditor]);
+  // When cancelling, close picker and return focus to button.
+  const closeAndReturnFocusToButton = React.useCallback(() => {
+    returnFocusRef.current = focusButton;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusButton]);
+  const intl = useIntl();
   const {
     autofocusRef,
     onPositionCalculated
@@ -279,14 +295,18 @@ export const MediaInsertPicker = ({
       };
       dispatchAnalyticsEvent(payload);
     }
-    closeMediaInsertPicker(); // Focuses editor on unmount
-    if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+    if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      closeAndReturnFocusToButton();
+    } else {
+      closeMediaInsertPicker(); // Focuses editor on unmount
       focusEditor();
     }
   };
   const closePickerAndFocusEditor = () => {
-    closeMediaInsertPicker(); // Focuses editor on unmount
-    if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+    if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      closeAndFocusEditor();
+    } else {
+      closeMediaInsertPicker();
       focusEditor();
     }
   };
@@ -301,7 +321,7 @@ export const MediaInsertPicker = ({
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
-    onUnmount: isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker') ? focusEditor : undefined,
+    onUnmount: isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker') ? () => returnFocusRef.current() : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
@@ -352,6 +372,7 @@ export const MediaInsertPicker = ({
       mediaProvider: mediaProvider,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       closeMediaInsertPicker: closePickerAndFocusEditor,
+      cancelMediaInsertPicker: closeAndReturnFocusToButton,
       insertMediaSingle: insertMediaSingle,
       insertExternalMediaSingle: insertExternalMediaSingle,
       isOnlyExternalLinks: isOnlyExternalLinks,

package/dist/es2019/ui/hooks/use-focus.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+// Usually either a DOM node or editorView
+
+export const useFocus = ({
+  target
+}) => {
+  const focus = useCallback(() => {
+    // Use setTimeout to run this async after any DOM updates in same callback
+    setTimeout(() => target.focus(), 0);
+  }, [target]);
+  return focus;
+};

package/dist/esm/ui/MediaFromURL.js

@@ -22,6 +22,7 @@ import { HelperMessage } from '@atlaskit/form/helper-message';
 import { MessageWrapper } from '@atlaskit/form/message-wrapper';
 import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message/message';
@@ -98,6 +99,8 @@ export function MediaFromURL(_ref) {
   var mediaProvider = _ref.mediaProvider,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
     closeMediaInsertPicker = _ref.closeMediaInsertPicker,
+    _ref$cancelMediaInser = _ref.cancelMediaInsertPicker,
+    cancelMediaInsertPicker = _ref$cancelMediaInser === void 0 ? closeMediaInsertPicker : _ref$cancelMediaInser,
     insertMediaSingle = _ref.insertMediaSingle,
     insertExternalMediaSingle = _ref.insertExternalMediaSingle,
     isOnlyExternalLinks = _ref.isOnlyExternalLinks,
@@ -267,9 +270,13 @@ export function MediaFromURL(_ref) {
         };
         dispatchAnalyticsEvent(payload);
       }
-      closeMediaInsertPicker();
+      if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+        cancelMediaInsertPicker();
+      } else {
+        closeMediaInsertPicker();
+      }
     }
-  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  }, [dispatchAnalyticsEvent, cancelMediaInsertPicker, closeMediaInsertPicker]);
   var onCancel = React.useCallback(function () {
     if (dispatchAnalyticsEvent) {
       var payload = {
@@ -280,8 +287,12 @@ export function MediaFromURL(_ref) {
       };
       dispatchAnalyticsEvent(payload);
     }
-    closeMediaInsertPicker();
-  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+    if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      cancelMediaInsertPicker();
+    } else {
+      closeMediaInsertPicker();
+    }
+  }, [cancelMediaInsertPicker, dispatchAnalyticsEvent, closeMediaInsertPicker]);
   return /*#__PURE__*/React.createElement(Form, {
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     onSubmit: function onSubmit(_ref3, form) {

package/dist/esm/ui/MediaInsertPicker.js

@@ -18,7 +18,7 @@ import TabList from '@atlaskit/tabs/tab-list';
 import useTab from '@atlaskit/tabs/use-tab';
 import useTabPanel from '@atlaskit/tabs/use-tab-panel';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { useFocusEditor } from './hooks/use-focus-editor';
+import { useFocus } from './hooks/use-focus';
 import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
 import { LocalMedia } from './LocalMedia';
 import { MediaFromURL } from './MediaFromURL';
@@ -147,10 +147,26 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     targetRef = getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
     mountPoint = popupsMountPoint;
   }
-  var intl = useIntl();
-  var focusEditor = useFocusEditor({
-    editorView: editorView
+  var focusButton = useFocus({
+    target: targetRef !== null && targetRef !== void 0 ? targetRef : editorView
+  });
+  var focusEditor = useFocus({
+    target: editorView
   });
+  // returnFocusRef stores which function we call on unmount: focusButton | focusEditor
+  // Needs to be a ref so we can instantly toggle it before unmounting triggers the focus trap
+  var returnFocusRef = React.useRef(focusEditor);
+  // When inserting media, close picker and focus editor.
+  var closeAndFocusEditor = React.useCallback(function () {
+    returnFocusRef.current = focusEditor;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusEditor]);
+  // When cancelling, close picker and return focus to button.
+  var closeAndReturnFocusToButton = React.useCallback(function () {
+    returnFocusRef.current = focusButton;
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, focusButton]);
+  var intl = useIntl();
   var _useUnholyAutofocus = useUnholyAutofocus(),
     autofocusRef = _useUnholyAutofocus.autofocusRef,
     onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
@@ -285,15 +301,19 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
         };
         dispatchAnalyticsEvent(payload);
       }
-      closeMediaInsertPicker(); // Focuses editor on unmount
-      if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+        closeAndReturnFocusToButton();
+      } else {
+        closeMediaInsertPicker(); // Focuses editor on unmount
         focusEditor();
       }
     };
   };
   var closePickerAndFocusEditor = function closePickerAndFocusEditor() {
-    closeMediaInsertPicker(); // Focuses editor on unmount
-    if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+    if (isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
+      closeAndFocusEditor();
+    } else {
+      closeMediaInsertPicker();
       focusEditor();
     }
   };
@@ -308,7 +328,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
-    onUnmount: isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker') ? focusEditor : undefined,
+    onUnmount: isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker') ? function () {
+      return returnFocusRef.current();
+    } : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
@@ -362,6 +384,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
         mediaProvider: mediaProvider,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         closeMediaInsertPicker: closePickerAndFocusEditor,
+        cancelMediaInsertPicker: closeAndReturnFocusToButton,
         insertMediaSingle: insertMediaSingle,
         insertExternalMediaSingle: insertExternalMediaSingle,
         isOnlyExternalLinks: isOnlyExternalLinks,

package/dist/esm/ui/hooks/use-focus.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+// Usually either a DOM node or editorView
+
+export var useFocus = function useFocus(_ref) {
+  var target = _ref.target;
+  var focus = useCallback(function () {
+    // Use setTimeout to run this async after any DOM updates in same callback
+    setTimeout(function () {
+      return target.focus();
+    }, 0);
+  }, [target]);
+  return focus;
+};

package/dist/types/ui/MediaFromURL.d.ts

@@ -4,6 +4,7 @@ import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { CustomizedHelperMessage, InsertExternalMediaSingle, InsertMediaSingle } from '../types';
 export declare const isValidUrl: (value: string) => boolean;
 type Props = {
+    cancelMediaInsertPicker?: () => void;
     closeMediaInsertPicker: () => void;
     customizedHelperMessage?: CustomizedHelperMessage;
     customizedUrlValidation?: (input: string) => boolean;
@@ -13,5 +14,5 @@ type Props = {
     isOnlyExternalLinks: boolean;
     mediaProvider: MediaProvider;
 };
-export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, customizedUrlValidation, customizedHelperMessage, }: Props): React.JSX.Element;
+export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, cancelMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, customizedUrlValidation, customizedHelperMessage, }: Props): React.JSX.Element;
 export {};

package/dist/types/ui/hooks/use-focus.d.ts

@@ -0,0 +1,7 @@
+type Focusable = {
+    focus: () => unknown;
+};
+export declare const useFocus: ({ target }: {
+    target: Focusable;
+}) => (() => void);
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "31.0.0",
+	"version": "31.1.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,11 +42,12 @@
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/tabs": "^21.1.0",
 		"@atlaskit/textfield": "^10.1.0",
-		"@atlaskit/tmp-editor-statsig": "^160.0.0",
+		"@atlaskit/tmp-editor-statsig": "^161.0.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.0.0",
+		"@atlaskit/editor-common": "^120.1.0",
+		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",

package/dist/cjs/ui/hooks/use-focus-editor.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFocusEditor = void 0;
-var _react = require("react");
-var useFocusEditor = exports.useFocusEditor = function useFocusEditor(_ref) {
-  var editorView = _ref.editorView;
-  var focusEditor = (0, _react.useCallback)(function () {
-    // Use setTimeout to run this async after any DOM updates in same callback
-    setTimeout(function () {
-      return editorView.focus();
-    }, 0);
-  }, [editorView]);
-  return focusEditor;
-};

package/dist/es2019/ui/hooks/use-focus-editor.js

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-export const useFocusEditor = ({
-  editorView
-}) => {
-  const focusEditor = useCallback(() => {
-    // Use setTimeout to run this async after any DOM updates in same callback
-    setTimeout(() => editorView.focus(), 0);
-  }, [editorView]);
-  return focusEditor;
-};

package/dist/esm/ui/hooks/use-focus-editor.js

@@ -1,11 +0,0 @@
-import { useCallback } from 'react';
-export var useFocusEditor = function useFocusEditor(_ref) {
-  var editorView = _ref.editorView;
-  var focusEditor = useCallback(function () {
-    // Use setTimeout to run this async after any DOM updates in same callback
-    setTimeout(function () {
-      return editorView.focus();
-    }, 0);
-  }, [editorView]);
-  return focusEditor;
-};

package/dist/types/ui/hooks/use-focus-editor.d.ts

@@ -1,4 +0,0 @@
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const useFocusEditor: ({ editorView }: {
-    editorView: EditorView;
-}) => (() => void);