@atlaskit/editor-common 72.1.1 → 72.2.0

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

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 /**
  * This component is a wrapper of vertical menus which listens to keydown events of children
@@ -9,27 +9,34 @@ export const MenuArrowKeyNavigationProvider = ({
   handleClose,
   disableArrowKeyNavigation,
   keyDownHandlerContext,
-  closeonTab
+  closeOnTab,
+  onSelection
 }) => {
   const wrapperRef = useRef(null);
-  const currentSelectedItemIndex = useRef(-1);
-
-  const incrementIndex = list => {
-    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = 0;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+  const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
+  const incrementIndex = useCallback(list => {
+    const currentIndex = currentSelectedItemIndex;
+    let nextIndex = (currentIndex + 1) % list.length; // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
+    // difference between currentIndex and the item index in the menu.
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (nextIndex + 1) % list.length;
     }
-  };
 
-  const decrementIndex = list => {
-    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = list.length - 1;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
+  const decrementIndex = useCallback(list => {
+    const currentIndex = currentSelectedItemIndex;
+    let nextIndex = (list.length + currentIndex - 1) % list.length;
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (list.length + nextIndex - 1) % list.length;
     }
-  };
 
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
   useLayoutEffect(() => {
     if (disableArrowKeyNavigation) {
       return;
@@ -41,49 +48,47 @@ export const MenuArrowKeyNavigationProvider = ({
 
 
     const handleKeyDown = event => {
-      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+      var _wrapperRef$current;
 
       const targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
 
-      if (event.key === 'Tab' && closeonTab) {
+      if (event.key === 'Tab' && closeOnTab) {
         handleClose(event);
         keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
         return;
       } //To trap the focus inside the toolbar using left and right arrow keys
 
 
-      const focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      const focusableElements = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
 
       if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
         return;
       }
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        setCurrentSelectedItemIndex(-1);
       }
 
       switch (event.key) {
         case 'ArrowDown':
-          //If ArrowDown pressed
-          //If on last item
-          // Focus last item
-          //Else
-          // Focus next item
-          incrementIndex(focusableElements);
-          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$fo;
+
+            const focusIndex = incrementIndex(focusableElements);
+            (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
+            event.preventDefault();
+            break;
+          }
 
         case 'ArrowUp':
-          //ArrowUP pressed
-          //If on First item
-          // Focus last item
-          //Else
-          // Focus previous item
-          decrementIndex(focusableElements);
-          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$fo2;
+
+            const focusIndex = decrementIndex(focusableElements);
+            (_focusableElements$fo2 = focusableElements[focusIndex]) === null || _focusableElements$fo2 === void 0 ? void 0 : _focusableElements$fo2.focus();
+            event.preventDefault();
+            break;
+          }
         //ArrowLeft/Right on the menu should close the menus
         //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
 
@@ -93,8 +98,11 @@ export const MenuArrowKeyNavigationProvider = ({
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           break;
 
         case 'ArrowRight':
@@ -103,14 +111,24 @@ export const MenuArrowKeyNavigationProvider = ({
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           break;
 
         case 'Escape':
           handleClose(event);
           break;
 
+        case 'Enter':
+          if (typeof onSelection === 'function') {
+            onSelection(currentSelectedItemIndex);
+          }
+
+          break;
+
         default:
           return;
       }
@@ -120,9 +138,9 @@ export const MenuArrowKeyNavigationProvider = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "custom-key-handler-wrapper",
+    className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef
   }, children);
 };
@@ -134,13 +152,4 @@ function getFocusableElements(rootNode) {
 
   const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
   return Array.from(focusableModalElements);
-}
-/**
- * This method filters out all the disabled menu items
- */
-
-
-function getEnabledElements(rootNode) {
-  const focusableElements = getFocusableElements(rootNode);
-  return focusableElements.filter(element => !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]'));
 }

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -42,7 +42,7 @@ class WithOutsideClick extends PureComponent {
         return false;
       } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
         this.props.handleEnterKeydown(evt);
-      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeonTab) {
+      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeOnTab) {
         //The menus should be closed when the tab is pressed as it takes the focus out of the menu
         this.props.handleEscapeKeydown(evt);
       }
@@ -89,7 +89,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     handleClickOutside,
     handleEnterKeydown,
     handleEscapeKeydown,
-    closeonTab,
+    closeOnTab,
     ...props
   }) => {
     const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -104,7 +104,7 @@ export default function withReactEditorViewOuterListeners(Component) {
       handleClickOutside: handleClickOutside,
       handleEnterKeydown: handleEnterKeydown,
       handleEscapeKeydown: handleEscapeKeydown,
-      closeonTab: closeonTab
+      closeOnTab: closeOnTab
     }, /*#__PURE__*/React.createElement(Component, props)));
   };
 }

package/dist/es2019/version.json

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

package/dist/esm/analytics/types/enums.js

@@ -89,7 +89,7 @@ export var ACTION;
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
   ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
-  ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
+  ACTION["DEDUPE_MARKS_TRANSFORMED_V2"] = "dedupeMarksTransformedV2";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
   ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";

package/dist/esm/styles/shared/code-block.js

@@ -7,7 +7,6 @@ import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth,
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { TaskDecisionSharedCssClassName } from './task-decision';
 export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -38,4 +37,4 @@ export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
     dark: "var(--ds-text, ".concat(DN800, ")")
   })(props), borderRadius(), gridSize(), relativeFontSizeToBase16(fontSize()));
 };
-export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:not(.", ") {\n    ::before {\n      content: ' ';\n      line-height: ", ";\n    }\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorLineHeight, akEditorLineHeight);
+export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

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

@@ -22,7 +22,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.1.1";
+var packageVersion = "72.2.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 

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

@@ -81,7 +81,7 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true,
+        closeOnTab: true,
         handleClose: function handleClose(event) {
           return onOpenChange && onOpenChange({
             isOpen: false,

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

@@ -81,7 +81,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      popupPlacement: ['bottom', 'left']
+      popupPlacement: ['bottom', 'left'],
+      selectionIndex: -1
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
@@ -100,7 +101,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleCloseandFocus", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function () {
       var _this$state$target, _this$state$target$qu;
 
       _this.handleClose();
@@ -139,7 +140,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           zIndex = _this$props.zIndex,
           shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
           disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
-          keyDownHandlerContext = _this$props.keyDownHandlerContext;
+          keyDownHandlerContext = _this$props.keyDownHandlerContext,
+          onItemActivated = _this$props.onItemActivated;
       return jsx(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -152,9 +154,22 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         offset: offset
       }, jsx(MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
-        handleClose: this.handleCloseandFocus,
+        handleClose: this.handleCloseAndFocus,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true
+        onSelection: function onSelection(index) {
+          var result = [];
+
+          if (typeof onItemActivated === 'function') {
+            result = items.reduce(function (result, group) {
+              return result.concat(group.items);
+            }, result);
+            onItemActivated({
+              item: result[index],
+              shouldCloseMenu: false
+            });
+          }
+        },
+        closeOnTab: true
       }, jsx(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -163,7 +178,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleCloseandFocus,
+        handleEscapeKeydown: this.handleCloseAndFocus,
         targetRef: this.state.target
       }, jsx("div", {
         style: {
@@ -238,7 +253,8 @@ function DropdownMenuItem(_ref) {
         theme: theme
       });
     },
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-disabled": item.isDisabled ? 'true' : 'false'
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),

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

@@ -1,4 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 /**
  * This component is a wrapper of vertical menus which listens to keydown events of children
@@ -9,26 +10,38 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
       handleClose = _ref.handleClose,
       disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
       keyDownHandlerContext = _ref.keyDownHandlerContext,
-      closeonTab = _ref.closeonTab;
+      closeOnTab = _ref.closeOnTab,
+      onSelection = _ref.onSelection;
   var wrapperRef = useRef(null);
-  var currentSelectedItemIndex = useRef(-1);
 
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = 0;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+  var _useState = useState(-1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSelectedItemIndex = _useState2[0],
+      setCurrentSelectedItemIndex = _useState2[1];
+
+  var incrementIndex = useCallback(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (currentIndex + 1) % list.length; // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
+    // difference between currentIndex and the item index in the menu.
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (nextIndex + 1) % list.length;
     }
-  };
 
-  var decrementIndex = function decrementIndex(list) {
-    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = list.length - 1;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
+  var decrementIndex = useCallback(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (list.length + currentIndex - 1) % list.length;
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (list.length + nextIndex - 1) % list.length;
     }
-  };
 
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
   useLayoutEffect(function () {
     if (disableArrowKeyNavigation) {
       return;
@@ -40,49 +53,48 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
 
 
     var handleKeyDown = function handleKeyDown(event) {
-      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+      var _wrapperRef$current;
 
       var targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
 
-      if (event.key === 'Tab' && closeonTab) {
+      if (event.key === 'Tab' && closeOnTab) {
         handleClose(event);
         keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
         return;
       } //To trap the focus inside the toolbar using left and right arrow keys
 
 
-      var focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var focusableElements = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
 
       if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
         return;
       }
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        setCurrentSelectedItemIndex(-1);
       }
 
       switch (event.key) {
         case 'ArrowDown':
-          //If ArrowDown pressed
-          //If on last item
-          // Focus last item
-          //Else
-          // Focus next item
-          incrementIndex(focusableElements);
-          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$fo;
+
+            var focusIndex = incrementIndex(focusableElements);
+            (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
+            event.preventDefault();
+            break;
+          }
 
         case 'ArrowUp':
-          //ArrowUP pressed
-          //If on First item
-          // Focus last item
-          //Else
-          // Focus previous item
-          decrementIndex(focusableElements);
-          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$_f;
+
+            var _focusIndex = decrementIndex(focusableElements);
+
+            (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 ? void 0 : _focusableElements$_f.focus();
+            event.preventDefault();
+            break;
+          }
         //ArrowLeft/Right on the menu should close the menus
         //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
 
@@ -92,8 +104,11 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           break;
 
         case 'ArrowRight':
@@ -102,14 +117,24 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           break;
 
         case 'Escape':
           handleClose(event);
           break;
 
+        case 'Enter':
+          if (typeof onSelection === 'function') {
+            onSelection(currentSelectedItemIndex);
+          }
+
+          break;
+
         default:
           return;
       }
@@ -119,9 +144,9 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "custom-key-handler-wrapper",
+    className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef
   }, children);
 };
@@ -133,15 +158,4 @@ function getFocusableElements(rootNode) {
 
   var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
   return Array.from(focusableModalElements);
-}
-/**
- * This method filters out all the disabled menu items
- */
-
-
-function getEnabledElements(rootNode) {
-  var focusableElements = getFocusableElements(rootNode);
-  return focusableElements.filter(function (element) {
-    return !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]');
-  });
 }

package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeonTab"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -70,7 +70,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         return false;
       } else if (evt.code === 'Enter' && _this.props.handleEnterKeydown) {
         _this.props.handleEnterKeydown(evt);
-      } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeonTab) {
+      } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeOnTab) {
         //The menus should be closed when the tab is pressed as it takes the focus out of the menu
         _this.props.handleEscapeKeydown(evt);
       }
@@ -125,7 +125,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
         handleEnterKeydown = _ref.handleEnterKeydown,
         handleEscapeKeydown = _ref.handleEscapeKeydown,
-        closeonTab = _ref.closeonTab,
+        closeOnTab = _ref.closeOnTab,
         props = _objectWithoutProperties(_ref, _excluded);
 
     var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -140,7 +140,7 @@ export default function withReactEditorViewOuterListeners(Component) {
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
         handleEscapeKeydown: handleEscapeKeydown,
-        closeonTab: closeonTab
+        closeOnTab: closeOnTab
       }, /*#__PURE__*/React.createElement(Component, props));
     });
   };

package/dist/esm/version.json

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

package/dist/types/analytics/types/enums.d.ts

@@ -89,7 +89,7 @@ export declare enum ACTION {
     SYNCHRONY_ENTITY_ERROR = "synchronyEntityError",
     SYNCHRONY_ERROR = "synchronyError",
     TEXT_LINK_MARK_TRANSFORMED = "textLinkMarkTransformed",
-    DEDUPE_MARKS_TRANSFORMED = "dedupeMarksTransformed",
+    DEDUPE_MARKS_TRANSFORMED_V2 = "dedupeMarksTransformedV2",
     NODES_MISSING_CONTENT_TRANSFORMED = "nodesMissingContentTransformed",
     INDENTATION_MARKS_TRANSFORMED = "indentationMarksTransformed",
     INVALID_MEDIA_CONTENT_TRANSFORMED = "invalidMediaContentTransformed",

package/dist/types/analytics/types/events.d.ts

@@ -90,13 +90,14 @@ declare type SynchronyEntityErrorAEP = OperationalAEP<ACTION.SYNCHRONY_ENTITY_ER
 declare type ContentComponentErrorAEP = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.CONTENT_COMPONENT, undefined, {
     component: CONTENT_COMPONENT;
     error: string;
-    errorStack?: string;
     selection: {
         [key: string]: string;
     };
     position: number;
     docSize: number;
-}, undefined>;
+}, {
+    errorStack?: string;
+}>;
 export declare type ErrorEventAttributes = {
     error: Error;
     errorInfo: React.ErrorInfo;

package/dist/types/analytics/types/general-events.d.ts

@@ -1,5 +1,4 @@
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
-import type { ADFEntityMark } from '@atlaskit/adf-utils/types';
 import type { FeatureFlagKey } from '../../types/feature-flags';
 import { PropsDifference, ShallowPropsDifference } from '../../utils';
 import type { SEVERITY } from '../../utils/analytics';
@@ -172,8 +171,14 @@ declare type CodeBlockLanguageSelectedAEP = TrackAEP<ACTION.LANGUAGE_SELECTED, A
 }, undefined>;
 declare type MediaLinkTransformedAEP = OperationalAEP<ACTION.MEDIA_LINK_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
 declare type TextLinkCodeMarkTransformedAEP = OperationalAEP<ACTION.TEXT_LINK_MARK_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
-declare type DedupeMarksTransformedAEP = OperationalAEP<ACTION.DEDUPE_MARKS_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, {
-    discardedMarks: ADFEntityMark[];
+declare type DedupeMarksTransformedAEP = OperationalAEP<ACTION.DEDUPE_MARKS_TRANSFORMED_V2, ACTION_SUBJECT.EDITOR, undefined, 
+/** UGC WARNING
+ *
+ * DO NOT include `mark` attributes - only the types
+ *
+ */
+{
+    discardedMarkTypes: string[];
 }, undefined>;
 declare type IndentationMarksTransformedAEP = OperationalAEP<ACTION.INDENTATION_MARKS_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;
 declare type NodesMissingContentTransformedAEP = OperationalAEP<ACTION.NODES_MISSING_CONTENT_TRANSFORMED, ACTION_SUBJECT.EDITOR, undefined, undefined, undefined>;