@atlaskit/editor-plugin-block-menu 5.1.8 → 5.1.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.1.9
+
+### Patch Changes
+
+- [`fdcaf17b021af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fdcaf17b021af) -
+  Editor-2676: keep block menu open when move up down clicked
+- Updated dependencies
+
 ## 5.1.8
 
 ### Patch Changes

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

@@ -8,7 +8,10 @@ exports.useBlockMenu = exports.BlockMenuProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
-  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  moveFocusTo: function moveFocusTo() {},
+  moveDownRef: /*#__PURE__*/_react.default.createRef(),
+  moveUpRef: /*#__PURE__*/_react.default.createRef()
 });
 var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
   var context = (0, _react.useContext)(BlockMenuContext);
@@ -20,6 +23,8 @@ var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
 var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_ref) {
   var children = _ref.children,
     api = _ref.api;
+  var moveUpRef = (0, _react.useRef)(null);
+  var moveDownRef = (0, _react.useRef)(null);
   var onDropdownOpenChanged = (0, _react.useCallback)(function (isOpen) {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -32,9 +37,21 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
       }, 1);
     }
   }, [api]);
+  var moveFocusTo = (0, _react.useCallback)(function (direction) {
+    if (direction === 'moveUp') {
+      var _moveUpRef$current;
+      (_moveUpRef$current = moveUpRef.current) === null || _moveUpRef$current === void 0 || _moveUpRef$current.focus();
+    } else if (direction === 'moveDown') {
+      var _moveDownRef$current;
+      (_moveDownRef$current = moveDownRef.current) === null || _moveDownRef$current === void 0 || _moveDownRef$current.focus();
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged: onDropdownOpenChanged
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      moveFocusTo: moveFocusTo,
+      moveDownRef: moveDownRef,
+      moveUpRef: moveUpRef
     }
   }, children);
 };

package/dist/cjs/ui/move-down.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MoveDownDropdownItem = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -13,11 +14,16 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
+var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveDownRef = _useBlockMenu.moveDownRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -26,9 +32,18 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       };
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
+  (0, _react.useEffect)(function () {
+    var moveDownElement = moveDownRef.current;
+    if (!moveDownElement) {
+      return;
+    }
+    if (!canMoveDown && moveDownElement === document.activeElement) {
+      moveFocusTo('moveUp');
+    }
+  }, [canMoveDown, moveFocusTo, moveDownRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: _analytics.ACTION.CLICKED,
@@ -42,15 +57,11 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(_types.DIRECTION.DOWN)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    triggerRef: moveDownRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
       label: ""

package/dist/cjs/ui/move-up.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MoveUpDropdownItem = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -13,11 +14,16 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _blockMenuProvider = require("./block-menu-provider");
 var _consts = require("./consts");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveUpRef = _useBlockMenu.moveUpRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -26,9 +32,18 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       };
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
+  (0, _react.useEffect)(function () {
+    var moveUpElement = moveUpRef.current;
+    if (!moveUpElement) {
+      return;
+    }
+    if (!canMoveUp && moveUpElement === document.activeElement) {
+      moveFocusTo('moveDown');
+    }
+  }, [canMoveUp, moveFocusTo, moveUpRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: _analytics.ACTION.CLICKED,
@@ -42,15 +57,11 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(_types.DIRECTION.UP)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    triggerRef: moveUpRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
       label: ""

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

@@ -1,6 +1,9 @@
-import React, { useCallback, createContext, useContext } from 'react';
+import React, { useCallback, createContext, useContext, useRef } from 'react';
 const BlockMenuContext = /*#__PURE__*/createContext({
-  onDropdownOpenChanged: () => {}
+  onDropdownOpenChanged: () => {},
+  moveFocusTo: () => {},
+  moveDownRef: /*#__PURE__*/React.createRef(),
+  moveUpRef: /*#__PURE__*/React.createRef()
 });
 export const useBlockMenu = () => {
   const context = useContext(BlockMenuContext);
@@ -13,6 +16,8 @@ export const BlockMenuProvider = ({
   children,
   api
 }) => {
+  const moveUpRef = useRef(null);
+  const moveDownRef = useRef(null);
   const onDropdownOpenChanged = useCallback(isOpen => {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -23,9 +28,21 @@ export const BlockMenuProvider = ({
       }), 1);
     }
   }, [api]);
+  const moveFocusTo = useCallback(direction => {
+    if (direction === 'moveUp') {
+      var _moveUpRef$current;
+      (_moveUpRef$current = moveUpRef.current) === null || _moveUpRef$current === void 0 ? void 0 : _moveUpRef$current.focus();
+    } else if (direction === 'moveDown') {
+      var _moveDownRef$current;
+      (_moveDownRef$current = moveDownRef.current) === null || _moveDownRef$current === void 0 ? void 0 : _moveDownRef$current.focus();
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged
+      onDropdownOpenChanged,
+      moveFocusTo,
+      moveDownRef,
+      moveUpRef
     }
   }, children);
 };

package/dist/es2019/ui/move-down.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,6 +6,7 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 const MoveDownDropdownItemContent = ({
   api
@@ -13,6 +14,10 @@ const MoveDownDropdownItemContent = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    moveFocusTo,
+    moveDownRef
+  } = useBlockMenu();
   const {
     canMoveDown
   } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -23,11 +28,20 @@ const MoveDownDropdownItemContent = ({
       canMoveDown: blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveDown
     };
   });
+  useEffect(() => {
+    const moveDownElement = moveDownRef.current;
+    if (!moveDownElement) {
+      return;
+    }
+    if (!canMoveDown && moveDownElement === document.activeElement) {
+      moveFocusTo('moveUp');
+    }
+  }, [canMoveDown, moveFocusTo, moveDownRef]);
   const handleClick = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
-      var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$co, _api$blockControls2, _api$blockControls2$c;
+      var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$co;
       const payload = {
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
@@ -40,15 +54,11 @@ const MoveDownDropdownItemContent = ({
       api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveNodeWithBlockMenu(DIRECTION.DOWN)({
         tr
       });
-      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveDownRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       label: ""

package/dist/es2019/ui/move-up.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,6 +6,7 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 const MoveUpDropdownItemContent = ({
   api
@@ -13,6 +14,10 @@ const MoveUpDropdownItemContent = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    moveFocusTo,
+    moveUpRef
+  } = useBlockMenu();
   const {
     canMoveUp
   } = useSharedPluginStateWithSelector(api, ['blockControls'], ({
@@ -23,11 +28,20 @@ const MoveUpDropdownItemContent = ({
       canMoveUp: blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$b = blockControlsState.blockMenuOptions) === null || _blockControlsState$b === void 0 ? void 0 : _blockControlsState$b.canMoveUp
     };
   });
+  useEffect(() => {
+    const moveUpElement = moveUpRef.current;
+    if (!moveUpElement) {
+      return;
+    }
+    if (!canMoveUp && moveUpElement === document.activeElement) {
+      moveFocusTo('moveDown');
+    }
+  }, [canMoveUp, moveFocusTo, moveUpRef]);
   const handleClick = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
-      var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$co, _api$blockControls2, _api$blockControls2$c;
+      var _api$analytics, _api$analytics$action, _api$blockControls, _api$blockControls$co;
       const payload = {
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
@@ -40,15 +54,11 @@ const MoveUpDropdownItemContent = ({
       api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveNodeWithBlockMenu(DIRECTION.UP)({
         tr
       });
-      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveUpRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       label: ""

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

@@ -1,6 +1,9 @@
-import React, { useCallback, createContext, useContext } from 'react';
+import React, { useCallback, createContext, useContext, useRef } from 'react';
 var BlockMenuContext = /*#__PURE__*/createContext({
-  onDropdownOpenChanged: function onDropdownOpenChanged() {}
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  moveFocusTo: function moveFocusTo() {},
+  moveDownRef: /*#__PURE__*/React.createRef(),
+  moveUpRef: /*#__PURE__*/React.createRef()
 });
 export var useBlockMenu = function useBlockMenu() {
   var context = useContext(BlockMenuContext);
@@ -12,6 +15,8 @@ export var useBlockMenu = function useBlockMenu() {
 export var BlockMenuProvider = function BlockMenuProvider(_ref) {
   var children = _ref.children,
     api = _ref.api;
+  var moveUpRef = useRef(null);
+  var moveDownRef = useRef(null);
   var onDropdownOpenChanged = useCallback(function (isOpen) {
     if (!isOpen) {
       // On Dropdown closed, return focus to editor
@@ -24,9 +29,21 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
       }, 1);
     }
   }, [api]);
+  var moveFocusTo = useCallback(function (direction) {
+    if (direction === 'moveUp') {
+      var _moveUpRef$current;
+      (_moveUpRef$current = moveUpRef.current) === null || _moveUpRef$current === void 0 || _moveUpRef$current.focus();
+    } else if (direction === 'moveDown') {
+      var _moveDownRef$current;
+      (_moveDownRef$current = moveDownRef.current) === null || _moveDownRef$current === void 0 || _moveDownRef$current.focus();
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
     value: {
-      onDropdownOpenChanged: onDropdownOpenChanged
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      moveFocusTo: moveFocusTo,
+      moveDownRef: moveDownRef,
+      moveUpRef: moveUpRef
     }
   }, children);
 };

package/dist/esm/ui/move-down.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,11 +6,15 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveDownRef = _useBlockMenu.moveDownRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -19,9 +23,18 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       };
     }),
     canMoveDown = _useSharedPluginState.canMoveDown;
+  useEffect(function () {
+    var moveDownElement = moveDownRef.current;
+    if (!moveDownElement) {
+      return;
+    }
+    if (!canMoveDown && moveDownElement === document.activeElement) {
+      moveFocusTo('moveUp');
+    }
+  }, [canMoveDown, moveFocusTo, moveDownRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: ACTION.CLICKED,
@@ -35,15 +48,11 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.DOWN)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveDownRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       label: ""

package/dist/esm/ui/move-up.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -6,11 +6,15 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { useBlockMenu } from './block-menu-provider';
 import { BLOCK_MENU_ITEM_NAME } from './consts';
 var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useBlockMenu = useBlockMenu(),
+    moveFocusTo = _useBlockMenu.moveFocusTo,
+    moveUpRef = _useBlockMenu.moveUpRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
       var _blockControlsState$b;
       var blockControlsState = _ref2.blockControlsState;
@@ -19,9 +23,18 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       };
     }),
     canMoveUp = _useSharedPluginState.canMoveUp;
+  useEffect(function () {
+    var moveUpElement = moveUpRef.current;
+    if (!moveUpElement) {
+      return;
+    }
+    if (!canMoveUp && moveUpElement === document.activeElement) {
+      moveFocusTo('moveDown');
+    }
+  }, [canMoveUp, moveFocusTo, moveUpRef]);
   var handleClick = function handleClick() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
-      var _api$analytics, _api$blockControls, _api$blockControls2;
+      var _api$analytics, _api$blockControls;
       var tr = _ref3.tr;
       var payload = {
         action: ACTION.CLICKED,
@@ -35,15 +48,11 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveNodeWithBlockMenu(DIRECTION.UP)({
         tr: tr
       });
-      api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
-        closeMenu: true
-      })({
-        tr: tr
-      });
       return tr;
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    triggerRef: moveUpRef,
     onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       label: ""

package/dist/types/ui/block-menu-provider.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
+export type Direction = 'moveUp' | 'moveDown';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 };
 export type BlockMenuContextType = {
+    moveDownRef: React.MutableRefObject<HTMLButtonElement | null>;
+    /**
+     * Function to move focus between move up and move down items.
+     * Used when one item is disabled and focused.
+     */
+    moveFocusTo: (direction: Direction) => void;
+    moveUpRef: React.MutableRefObject<HTMLButtonElement | null>;
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *

package/dist/types-ts4.5/ui/block-menu-provider.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockMenuPlugin } from '../blockMenuPluginType';
+export type Direction = 'moveUp' | 'moveDown';
 type BlockMenuProviderProps = {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     children: React.ReactNode;
 };
 export type BlockMenuContextType = {
+    moveDownRef: React.MutableRefObject<HTMLButtonElement | null>;
+    /**
+     * Function to move focus between move up and move down items.
+     * Used when one item is disabled and focused.
+     */
+    moveFocusTo: (direction: Direction) => void;
+    moveUpRef: React.MutableRefObject<HTMLButtonElement | null>;
     /**
      * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "5.1.8",
+	"version": "5.1.9",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^14.8.0",
+		"@atlaskit/tmp-editor-statsig": "^14.9.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0"
 	},