@atlaskit/editor-plugin-block-controls 7.2.4 → 7.2.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.2.6
+
+### Patch Changes
+
+- [`0b4cd77e72217`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b4cd77e72217) -
+  clean up references to platform_editor_controls_performance_fixes
+- Updated dependencies
+
+## 7.2.5
+
+### Patch Changes
+
+- [`e3ca1a4b9b932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3ca1a4b9b932) -
+  [ux] ED-29489 Remove focus ring when drag handle is clicked and fix menu closing on menu open
+- Updated dependencies
+
 ## 7.2.4
 
 ### Patch Changes

package/dist/cjs/ui/block-menu.js

@@ -11,7 +11,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockMenuItems = require("./block-menu-items");
 var _consts = require("./consts");
 var _domAttrName = require("./utils/dom-attr-name");
@@ -95,70 +94,17 @@ var BlockMenu = function BlockMenu(_ref3) {
   if (isMenuOpen) {
     return null;
   }
-  if ((0, _experiments.editorExperiment)('platform_editor_controls_performance_fixes', true)) {
-    if (!menuTriggerBy) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
-      editorView: editorView,
-      mountPoint: mountPoint,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      api: api,
-      menuTriggerBy: menuTriggerBy,
-      formatMessage: formatMessage
-    });
+  if (!menuTriggerBy) {
+    return null;
   }
-  var activeNodeSelector = "[".concat((0, _domAttrName.getAnchorAttrName)(), "=").concat(menuTriggerBy, "]");
-  var targetHandleRef = document.querySelector(activeNodeSelector);
-  var items = (0, _blockMenuItems.getBlockMenuItems)(formatMessage);
-  var handleOpenChange = function handleOpenChange(payload) {
-    if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  var onMenuItemActivated = function onMenuItemActivated(_ref4) {
-    var item = _ref4.item;
-    if (editorView) {
-      var _menuItemsCallback2, _menuItemsCallback2$c;
-      (_menuItemsCallback2 = _blockMenuItems.menuItemsCallback[item.value.name]) === null || _menuItemsCallback2 === void 0 || (_menuItemsCallback2$c = _menuItemsCallback2.call(_blockMenuItems.menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback2$c === void 0 || _menuItemsCallback2$c(editorView.state, editorView.dispatch, editorView);
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: 'left',
-    alignY: 'start'
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    ,
-    target: targetHandleRef,
-    mountTo: undefined,
-    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
-    forcePlacement: true,
-    stick: true,
-    offset: [-6, 8]
-  }, /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, {
-    mountTo: mountPoint,
+  return /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
+    editorView: editorView,
+    mountPoint: mountPoint,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: _uiMenu.ArrowKeyNavigationType.MENU
-    },
-    items: items,
-    isOpen: true,
-    fitWidth: _consts.BLOCK_MENU_WIDTH,
-    section: {
-      hasSeparator: true
-    },
-    onOpenChange: handleOpenChange,
-    onItemActivated: onMenuItemActivated
-  }));
+    scrollableElement: scrollableElement,
+    api: api,
+    menuTriggerBy: menuTriggerBy,
+    formatMessage: formatMessage
+  });
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(BlockMenu);

package/dist/cjs/ui/drag-handle.js

@@ -127,9 +127,6 @@ var dragHandleButtonStyles = (0, _react2.css)({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -184,6 +181,19 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var focusedStylesOld = (0, _react2.css)({
+  '&:focus': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var focusedStyles = (0, _react2.css)({
+  '&:focus-visible': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var keyboardFocusedDragHandleStyles = (0, _react2.css)({
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+});
 var dragHandleContainerStyles = (0, _primitives.xcss)({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -309,6 +319,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     positionStylesOld = _useState0[0],
     setPositionStylesOld = _useState0[1];
+  var _useState1 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    isFocused = _useState10[0],
+    setIsFocused = _useState10[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -941,7 +955,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -955,7 +969,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle",
-        "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+        "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+        onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
+          return setIsFocused(false);
+        } : undefined
       }, (0, _react2.jsx)(_primitives.Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

package/dist/es2019/ui/block-menu.js

@@ -4,7 +4,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -93,71 +92,17 @@ const BlockMenu = ({
   if (isMenuOpen) {
     return null;
   }
-  if (editorExperiment('platform_editor_controls_performance_fixes', true)) {
-    if (!menuTriggerBy) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(BlockMenuContent, {
-      editorView: editorView,
-      mountPoint: mountPoint,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      api: api,
-      menuTriggerBy: menuTriggerBy,
-      formatMessage: formatMessage
-    });
+  if (!menuTriggerBy) {
+    return null;
   }
-  const activeNodeSelector = `[${getAnchorAttrName()}=${menuTriggerBy}]`;
-  const targetHandleRef = document.querySelector(activeNodeSelector);
-  const items = getBlockMenuItems(formatMessage);
-  const handleOpenChange = payload => {
-    if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
-      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  const onMenuItemActivated = ({
-    item
-  }) => {
-    if (editorView) {
-      var _menuItemsCallback2, _menuItemsCallback2$c;
-      (_menuItemsCallback2 = menuItemsCallback[item.value.name]) === null || _menuItemsCallback2 === void 0 ? void 0 : (_menuItemsCallback2$c = _menuItemsCallback2.call(menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback2$c === void 0 ? void 0 : _menuItemsCallback2$c(editorView.state, editorView.dispatch, editorView);
-      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  return /*#__PURE__*/React.createElement(Popup, {
-    alignX: 'left',
-    alignY: 'start'
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    ,
-    target: targetHandleRef,
-    mountTo: undefined,
-    zIndex: akEditorFloatingOverlapPanelZIndex,
-    forcePlacement: true,
-    stick: true,
-    offset: [-6, 8]
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    mountTo: mountPoint,
+  return /*#__PURE__*/React.createElement(BlockMenuContent, {
+    editorView: editorView,
+    mountPoint: mountPoint,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU
-    },
-    items: items,
-    isOpen: true,
-    fitWidth: BLOCK_MENU_WIDTH,
-    section: {
-      hasSeparator: true
-    },
-    onOpenChange: handleOpenChange,
-    onItemActivated: onMenuItemActivated
-  }));
+    scrollableElement: scrollableElement,
+    api: api,
+    menuTriggerBy: menuTriggerBy,
+    formatMessage: formatMessage
+  });
 };
 export default injectIntl(BlockMenu);

package/dist/es2019/ui/drag-handle.js

@@ -119,9 +119,6 @@ const dragHandleButtonStyles = css({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -179,6 +176,19 @@ const dragHandleButtonStylesOld = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+const focusedStylesOld = css({
+  '&:focus': {
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+const focusedStyles = css({
+  '&:focus-visible': {
+    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+const keyboardFocusedDragHandleStyles = css({
+  outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
+});
 const dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -289,6 +299,7 @@ export const DragHandle = ({
   const [positionStylesOld, setPositionStylesOld] = useState({
     display: 'none'
   });
+  const [isFocused, setIsFocused] = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused));
   const {
     macroInteractionUpdates
   } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
@@ -929,7 +940,7 @@ export const DragHandle = ({
     css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
     // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
     // See https://product-fabric.atlassian.net/browse/ED-26266
-    browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+    browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
@@ -943,7 +954,8 @@ export const DragHandle = ({
     disabled: dragHandleDisabled,
     "data-editor-block-ctrl-drag-handle": true,
     "data-testid": "block-ctrl-drag-handle",
-    "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+    "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+    onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? () => setIsFocused(false) : undefined
   }, jsx(Box, {
     xcss: iconWrapperStyles
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

package/dist/esm/ui/block-menu.js

@@ -4,7 +4,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getBlockMenuItems, menuItemsCallback } from './block-menu-items';
 import { BLOCK_MENU_WIDTH } from './consts';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -87,70 +86,17 @@ var BlockMenu = function BlockMenu(_ref3) {
   if (isMenuOpen) {
     return null;
   }
-  if (editorExperiment('platform_editor_controls_performance_fixes', true)) {
-    if (!menuTriggerBy) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(BlockMenuContent, {
-      editorView: editorView,
-      mountPoint: mountPoint,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      api: api,
-      menuTriggerBy: menuTriggerBy,
-      formatMessage: formatMessage
-    });
+  if (!menuTriggerBy) {
+    return null;
   }
-  var activeNodeSelector = "[".concat(getAnchorAttrName(), "=").concat(menuTriggerBy, "]");
-  var targetHandleRef = document.querySelector(activeNodeSelector);
-  var items = getBlockMenuItems(formatMessage);
-  var handleOpenChange = function handleOpenChange(payload) {
-    if (!(payload !== null && payload !== void 0 && payload.isOpen)) {
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  var onMenuItemActivated = function onMenuItemActivated(_ref4) {
-    var item = _ref4.item;
-    if (editorView) {
-      var _menuItemsCallback2, _menuItemsCallback2$c;
-      (_menuItemsCallback2 = menuItemsCallback[item.value.name]) === null || _menuItemsCallback2 === void 0 || (_menuItemsCallback2$c = _menuItemsCallback2.call(menuItemsCallback, api, formatMessage)) === null || _menuItemsCallback2$c === void 0 || _menuItemsCallback2$c(editorView.state, editorView.dispatch, editorView);
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.toggleBlockMenu({
-        closeMenu: true
-      }));
-    }
-  };
-  return /*#__PURE__*/React.createElement(Popup, {
-    alignX: 'left',
-    alignY: 'start'
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    ,
-    target: targetHandleRef,
-    mountTo: undefined,
-    zIndex: akEditorFloatingOverlapPanelZIndex,
-    forcePlacement: true,
-    stick: true,
-    offset: [-6, 8]
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    mountTo: mountPoint,
+  return /*#__PURE__*/React.createElement(BlockMenuContent, {
+    editorView: editorView,
+    mountPoint: mountPoint,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU
-    },
-    items: items,
-    isOpen: true,
-    fitWidth: BLOCK_MENU_WIDTH,
-    section: {
-      hasSeparator: true
-    },
-    onOpenChange: handleOpenChange,
-    onItemActivated: onMenuItemActivated
-  }));
+    scrollableElement: scrollableElement,
+    api: api,
+    menuTriggerBy: menuTriggerBy,
+    formatMessage: formatMessage
+  });
 };
 export default injectIntl(BlockMenu);

package/dist/esm/ui/drag-handle.js

@@ -124,9 +124,6 @@ var dragHandleButtonStyles = css({
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   },
-  '&:focus': {
-    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
-  },
   '&:disabled': {
     color: "var(--ds-icon-disabled, #8993A4)",
     backgroundColor: 'transparent'
@@ -181,6 +178,19 @@ var dragHandleButtonStylesOld = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var focusedStylesOld = css({
+  '&:focus': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var focusedStyles = css({
+  '&:focus-visible': {
+    outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+  }
+});
+var keyboardFocusedDragHandleStyles = css({
+  outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
+});
 var dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
@@ -306,6 +316,10 @@ export var DragHandle = function DragHandle(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     positionStylesOld = _useState0[0],
     setPositionStylesOld = _useState0[1];
+  var _useState1 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isFocused = _useState10[0],
+    setIsFocused = _useState10[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
       var _states$featureFlagsS;
       return {
@@ -938,7 +952,7 @@ export var DragHandle = function DragHandle(_ref) {
         css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -952,7 +966,10 @@ export var DragHandle = function DragHandle(_ref) {
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle",
-        "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
+        "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
+        onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
+          return setIsFocused(false);
+        } : undefined
       }, jsx(Box, {
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.2.4",
+	"version": "7.2.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,20 +31,20 @@
 		"@atlaskit/adf-schema": "^51.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
 		"@atlaskit/editor-plugin-analytics": "^6.1.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^6.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
 		"@atlaskit/editor-plugin-interaction": "^8.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^3.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^6.3.0",
+		"@atlaskit/editor-plugin-type-ahead": "^6.4.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^28.4.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.4.0",
+		"@atlaskit/tmp-editor-statsig": "^13.9.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.7.0",
+		"@atlaskit/editor-common": "^110.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"