@atlaskit/editor-common 72.8.0 → 72.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 72.9.0
+
+### Minor Changes
+
+- [`135df1a1e78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/135df1a1e78) - [ux] ED-17405 - Bugfix: Editor toolbar dropdown menus not receiving keyboard events for navigation
+
 ## 72.8.0
 
 ### Minor Changes

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.8.0";
+var packageVersion = "72.9.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,10 +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.ColorPaletteArrowKeyNavigationProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -19,10 +21,14 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
     isOpenedByKeyboard = _ref.isOpenedByKeyboard,
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
-    closeOnTab = _ref.closeOnTab;
+    closeOnTab = _ref.closeOnTab,
+    editorRef = _ref.editorRef;
   var wrapperRef = (0, _react.useRef)(null);
   var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var _useState = (0, _react.useState)(editorRef.current),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    listenerTargetElement = _useState2[0];
   var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -105,7 +111,7 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -116,9 +122,9 @@ var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNaviga
       });
     }
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -20,12 +20,16 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
     disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
     keyDownHandlerContext = _ref.keyDownHandlerContext,
     closeOnTab = _ref.closeOnTab,
-    onSelection = _ref.onSelection;
+    onSelection = _ref.onSelection,
+    editorRef = _ref.editorRef;
   var wrapperRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(editorRef.current),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    listenerTargetElement = _useState4[0];
   var incrementIndex = (0, _react.useCallback)(function (list) {
     var currentIndex = currentSelectedItemIndex;
     var nextIndex = (currentIndex + 1) % list.length;
@@ -141,11 +145,11 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/index.js

@@ -8,6 +8,7 @@ exports.ArrowKeyNavigationProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _uiReact = require("../../ui-react");
 var _ColorPaletteArrowKeyNavigationProvider = require("./ColorPaletteArrowKeyNavigationProvider");
 var _MenuArrowKeyNavigationProvider = require("./MenuArrowKeyNavigationProvider");
 var _types = require("./types");
@@ -17,13 +18,24 @@ var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(props) {
     type = props.type,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   if (type === _types.ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
-      selectedRowIndex: props.selectedRowIndex,
-      selectedColumnIndex: props.selectedColumnIndex,
-      isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+    return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref) {
+      var editorView = _ref.editorView,
+        editorRef = _ref.editorRef;
+      return editorRef && /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
+        selectedRowIndex: props.selectedRowIndex,
+        selectedColumnIndex: props.selectedColumnIndex,
+        isOpenedByKeyboard: props.isOpenedByKeyboard,
+        isPopupPositioned: props.isPopupPositioned,
+        editorRef: editorRef
+      }, restProps), children);
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref2) {
+    var editorView = _ref2.editorView,
+      editorRef = _ref2.editorRef;
+    return editorRef && /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, (0, _extends2.default)({
+      editorRef: editorRef
+    }, restProps), children);
+  });
 };
 exports.ArrowKeyNavigationProvider = ArrowKeyNavigationProvider;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.8.0",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.8.0";
+const packageVersion = "72.9.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 class DropList extends Component {

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
@@ -10,11 +10,13 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
   isOpenedByKeyboard,
   isPopupPositioned,
   handleClose,
-  closeOnTab
+  closeOnTab,
+  editorRef
 }) => {
   const wrapperRef = useRef(null);
   const currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   const currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  const [listenerTargetElement] = useState(editorRef.current);
   const incrementRowIndex = (rowElements, columnElements) => {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -97,7 +99,7 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -108,9 +110,9 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
       });
     }
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -9,10 +9,12 @@ export const MenuArrowKeyNavigationProvider = ({
   disableArrowKeyNavigation,
   keyDownHandlerContext,
   closeOnTab,
-  onSelection
+  onSelection,
+  editorRef
 }) => {
   const wrapperRef = useRef(null);
   const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
+  const [listenerTargetElement] = useState(editorRef.current);
   const incrementIndex = useCallback(list => {
     const currentIndex = currentSelectedItemIndex;
     let nextIndex = (currentIndex + 1) % list.length;
@@ -128,11 +130,11 @@ export const MenuArrowKeyNavigationProvider = ({
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/index.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { ReactEditorViewContext } from '../../ui-react';
 import { ColorPaletteArrowKeyNavigationProvider } from './ColorPaletteArrowKeyNavigationProvider';
 import { MenuArrowKeyNavigationProvider } from './MenuArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from './types';
@@ -10,12 +11,21 @@ export const ArrowKeyNavigationProvider = props => {
     ...restProps
   } = props;
   if (type === ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+      editorView,
+      editorRef
+    }) => editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
       selectedRowIndex: props.selectedRowIndex,
       selectedColumnIndex: props.selectedColumnIndex,
       isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+      isPopupPositioned: props.isPopupPositioned,
+      editorRef: editorRef
+    }, restProps), children));
   }
-  return /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+    editorView,
+    editorRef
+  }) => editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
+    editorRef: editorRef
+  }, restProps), children));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.8.0",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.8.0";
+var packageVersion = "72.9.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,4 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
@@ -10,10 +11,14 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
     isOpenedByKeyboard = _ref.isOpenedByKeyboard,
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
-    closeOnTab = _ref.closeOnTab;
+    closeOnTab = _ref.closeOnTab,
+    editorRef = _ref.editorRef;
   var wrapperRef = useRef(null);
   var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var _useState = useState(editorRef.current),
+    _useState2 = _slicedToArray(_useState, 1),
+    listenerTargetElement = _useState2[0];
   var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -96,7 +101,7 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -107,9 +112,9 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
       });
     }
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -10,12 +10,16 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
     disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
     keyDownHandlerContext = _ref.keyDownHandlerContext,
     closeOnTab = _ref.closeOnTab,
-    onSelection = _ref.onSelection;
+    onSelection = _ref.onSelection,
+    editorRef = _ref.editorRef;
   var wrapperRef = useRef(null);
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
+  var _useState3 = useState(editorRef.current),
+    _useState4 = _slicedToArray(_useState3, 1),
+    listenerTargetElement = _useState4[0];
   var incrementIndex = useCallback(function (list) {
     var currentIndex = currentSelectedItemIndex;
     var nextIndex = (currentIndex + 1) % list.length;
@@ -131,11 +135,11 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "type"];
 import React from 'react';
+import { ReactEditorViewContext } from '../../ui-react';
 import { ColorPaletteArrowKeyNavigationProvider } from './ColorPaletteArrowKeyNavigationProvider';
 import { MenuArrowKeyNavigationProvider } from './MenuArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from './types';
@@ -10,12 +11,23 @@ export var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(prop
     type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   if (type === ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
-      selectedRowIndex: props.selectedRowIndex,
-      selectedColumnIndex: props.selectedColumnIndex,
-      isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref) {
+      var editorView = _ref.editorView,
+        editorRef = _ref.editorRef;
+      return editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
+        selectedRowIndex: props.selectedRowIndex,
+        selectedColumnIndex: props.selectedColumnIndex,
+        isOpenedByKeyboard: props.isOpenedByKeyboard,
+        isPopupPositioned: props.isPopupPositioned,
+        editorRef: editorRef
+      }, restProps), children);
+    });
   }
-  return /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
+    var editorView = _ref2.editorView,
+      editorRef = _ref2.editorRef;
+    return editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
+      editorRef: editorRef
+    }, restProps), children);
+  });
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.8.0",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface KeyDownHandlerContext {
     handleArrowRight: () => void;
     handleArrowLeft: () => void;
@@ -18,6 +19,7 @@ export declare type ColorPaletteArrowKeyNavigationOptions = {
 export declare type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigationOptions & {
     handleClose?: SimpleEventHandler<KeyboardEvent>;
     closeOnTab?: boolean;
+    editorRef: React.RefObject<HTMLDivElement>;
 };
 export declare type MenuArrowKeyNavigationOptions = {
     type: ArrowKeyNavigationType.MENU;
@@ -28,6 +30,7 @@ export declare type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigation
     handleClose?: SimpleEventHandler<KeyboardEvent>;
     onSelection?: (index: number) => void;
     closeOnTab?: boolean;
+    editorRef: React.RefObject<HTMLDivElement>;
 };
 export declare type ArrowKeyNavigationProviderOptions = ColorPaletteArrowKeyNavigationOptions | MenuArrowKeyNavigationOptions;
-export declare type ArrowKeyNavigationProviderProps = ColorPaletteArrowKeyNavigationProps | MenuArrowKeyNavigationProviderProps;
+export declare type ArrowKeyNavigationProviderProps = Omit<ColorPaletteArrowKeyNavigationProps, 'editorRef'> | Omit<MenuArrowKeyNavigationProviderProps, 'editorRef'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "72.8.0",
+  "version": "72.9.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -80,7 +80,7 @@
     "@atlaskit/mention": "^22.0.0",
     "@atlaskit/menu": "^1.5.0",
     "@atlaskit/profilecard": "^19.2.0",
-    "@atlaskit/smart-card": "^25.4.0",
+    "@atlaskit/smart-card": "^25.5.0",
     "@atlaskit/smart-user-picker": "^6.0.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.4.0",