@atlaskit/editor-plugin-media-insert 26.0.16 → 26.0.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 26.0.17
+
+### Patch Changes
+
+- [`6c4fbb3dc1b7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c4fbb3dc1b7f) -
+  [ux] Fix MediaInsertPicker not returning focus to the editor on close.
+- Updated dependencies
+
 ## 26.0.16
 
 ### Patch Changes

package/dist/cjs/ui/MediaInsertPicker.js

@@ -18,6 +18,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _useFocusEditor = require("./hooks/use-focus-editor");
 var _useUnholyAutofocus2 = require("./hooks/use-unholy-autofocus");
@@ -275,8 +276,10 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
         };
         dispatchAnalyticsEvent(payload);
       }
-      _closeMediaInsertPicker();
-      focusEditor();
+      _closeMediaInsertPicker(); // Focuses editor on unmount
+      if (!(0, _expValEquals.expValEquals)('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+        focusEditor();
+      }
     };
   };
   var fileTabTitle = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(_messages.mediaInsertMessages.uploadTabTitle) : intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle);
@@ -290,6 +293,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
+    onUnmount: (0, _expValEquals.expValEquals)('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true) ? focusEditor : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
@@ -331,8 +335,10 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       , {
         closeMediaInsertPicker: function closeMediaInsertPicker() {
-          _closeMediaInsertPicker();
-          focusEditor();
+          _closeMediaInsertPicker(); // Focuses editor on unmount
+          if (!(0, _expValEquals.expValEquals)('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+            focusEditor();
+          }
         },
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         insertMediaSingle: insertMediaSingle,
@@ -344,8 +350,10 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       closeMediaInsertPicker: function closeMediaInsertPicker() {
-        _closeMediaInsertPicker();
-        focusEditor();
+        _closeMediaInsertPicker(); // Focuses editor on unmount
+        if (!(0, _expValEquals.expValEquals)('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+          focusEditor();
+        }
       },
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       insertFile: insertFile
@@ -355,8 +363,10 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       closeMediaInsertPicker: function closeMediaInsertPicker() {
-        _closeMediaInsertPicker();
-        focusEditor();
+        _closeMediaInsertPicker(); // Focuses editor on unmount
+        if (!(0, _expValEquals.expValEquals)('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+          focusEditor();
+        }
       },
       insertMediaSingle: insertMediaSingle,
       insertExternalMediaSingle: insertExternalMediaSingle,

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

@@ -8,7 +8,7 @@ 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 the call
+    // Use setTimeout to run this async after any DOM updates in same callback
     setTimeout(function () {
       return editorView.focus();
     }, 0);

package/dist/es2019/ui/MediaInsertPicker.js

@@ -9,6 +9,7 @@ import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@a
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Box, Focusable, Text } from '@atlaskit/primitives/compiled';
 import Tabs, { TabList, useTab, useTabPanel } from '@atlaskit/tabs';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useFocusEditor } from './hooks/use-focus-editor';
 import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
@@ -260,8 +261,10 @@ export const MediaInsertPicker = ({
       };
       dispatchAnalyticsEvent(payload);
     }
-    closeMediaInsertPicker();
-    focusEditor();
+    closeMediaInsertPicker(); // Focuses editor on unmount
+    if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+      focusEditor();
+    }
   };
   const fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
@@ -274,6 +277,7 @@ export const MediaInsertPicker = ({
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
+    onUnmount: expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true) ? focusEditor : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
@@ -312,8 +316,10 @@ export const MediaInsertPicker = ({
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
     closeMediaInsertPicker: () => {
-      closeMediaInsertPicker();
-      focusEditor();
+      closeMediaInsertPicker(); // Focuses editor on unmount
+      if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+        focusEditor();
+      }
     },
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     insertMediaSingle: insertMediaSingle,
@@ -324,8 +330,10 @@ export const MediaInsertPicker = ({
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     closeMediaInsertPicker: () => {
-      closeMediaInsertPicker();
-      focusEditor();
+      closeMediaInsertPicker(); // Focuses editor on unmount
+      if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+        focusEditor();
+      }
     },
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     insertFile: insertFile
@@ -335,8 +343,10 @@ export const MediaInsertPicker = ({
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     closeMediaInsertPicker: () => {
-      closeMediaInsertPicker();
-      focusEditor();
+      closeMediaInsertPicker(); // Focuses editor on unmount
+      if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+        focusEditor();
+      }
     },
     insertMediaSingle: insertMediaSingle,
     insertExternalMediaSingle: insertExternalMediaSingle,

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

@@ -3,7 +3,7 @@ export const useFocusEditor = ({
   editorView
 }) => {
   const focusEditor = useCallback(() => {
-    // use setTimeout to run this async after the call
+    // Use setTimeout to run this async after any DOM updates in same callback
     setTimeout(() => editorView.focus(), 0);
   }, [editorView]);
   return focusEditor;

package/dist/esm/ui/MediaInsertPicker.js

@@ -12,6 +12,7 @@ import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@a
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Box, Focusable, Text } from '@atlaskit/primitives/compiled';
 import Tabs, { TabList, useTab, useTabPanel } from '@atlaskit/tabs';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useFocusEditor } from './hooks/use-focus-editor';
 import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
@@ -266,8 +267,10 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
         };
         dispatchAnalyticsEvent(payload);
       }
-      _closeMediaInsertPicker();
-      focusEditor();
+      _closeMediaInsertPicker(); // Focuses editor on unmount
+      if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+        focusEditor();
+      }
     };
   };
   var fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
@@ -281,6 +284,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     fitHeight: 390,
     fitWidth: 340,
     mountTo: mountPoint,
+    onUnmount: expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true) ? focusEditor : undefined,
     boundariesElement: popupsBoundariesElement,
     handleClickOutside: handleClose(INPUT_METHOD.MOUSE),
     handleEscapeKeydown: handleClose(INPUT_METHOD.KEYBOARD),
@@ -322,8 +326,10 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       , {
         closeMediaInsertPicker: function closeMediaInsertPicker() {
-          _closeMediaInsertPicker();
-          focusEditor();
+          _closeMediaInsertPicker(); // Focuses editor on unmount
+          if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+            focusEditor();
+          }
         },
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         insertMediaSingle: insertMediaSingle,
@@ -335,8 +341,10 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       closeMediaInsertPicker: function closeMediaInsertPicker() {
-        _closeMediaInsertPicker();
-        focusEditor();
+        _closeMediaInsertPicker(); // Focuses editor on unmount
+        if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+          focusEditor();
+        }
       },
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       insertFile: insertFile
@@ -346,8 +354,10 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       closeMediaInsertPicker: function closeMediaInsertPicker() {
-        _closeMediaInsertPicker();
-        focusEditor();
+        _closeMediaInsertPicker(); // Focuses editor on unmount
+        if (!expValEquals('platform_editor_fix_focus_MediaInsertPicker', 'isEnabled', true)) {
+          focusEditor();
+        }
       },
       insertMediaSingle: insertMediaSingle,
       insertExternalMediaSingle: insertExternalMediaSingle,

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

@@ -2,7 +2,7 @@ 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 the call
+    // Use setTimeout to run this async after any DOM updates in same callback
     setTimeout(function () {
       return editorView.focus();
     }, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "26.0.16",
+	"version": "26.0.17",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,16 +33,16 @@
 		"@atlaskit/media-client": "^37.2.0",
 		"@atlaskit/media-client-react": "^6.1.0",
 		"@atlaskit/media-picker": "^72.1.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/tabs": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/tmp-editor-statsig": "^124.1.0",
+		"@atlaskit/tmp-editor-statsig": "^124.7.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.25.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/editor-common": "^116.28.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"