@atlaskit/editor-common 70.2.1 → 71.0.0

package/dist/esm/styles/shared/table.js

@@ -4,15 +4,15 @@ var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4153
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
-import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import browser from '../../utils/browser';
+import { CodeBlockSharedCssClassName } from './code-block';
 export var tableMarginTop = 24;
 export var tableMarginBottom = 16;
 export var tableMarginSides = 8;
@@ -38,7 +38,7 @@ export var TableSharedCssClassName = {
 };
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
     light: token('color.border', akEditorTableBorder),
     dark: token('color.border', akEditorTableBorderDark)
   })(props), token('color.background.neutral.subtle', 'white'), tableCellMinWidth, themed({
@@ -49,22 +49,25 @@ var tableSharedStyle = function tableSharedStyle(props) {
   })(props), themed({
     light: token('color.background.neutral', akEditorTableToolbar),
     dark: token('color.background.neutral', akEditorTableToolbarDark)
-  })(props), overflowShadow({
+  })(props), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, themed({
+    light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
+    dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
+  })(props), akEditorSelectedNodeClassName, token('color.border', 'transparent'), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
     background: themed({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')
-  })(props), themed({
+  })(props), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
     light: token('color.background.neutral', 'rgb(226, 229, 233)'),
     dark: token('color.background.neutral', DN20)
   })(props), overflowShadow({
     background: themed({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({

package/dist/esm/styles/shared/text-color.js

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-text-color-mark {\n    color: var(--custom-text-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));
+export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-text-color-mark {\n    color: var(--custom-palette-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));

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

@@ -23,7 +23,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "70.2.1";
+var packageVersion = "71.0.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -61,7 +62,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
-          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar;
+          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar,
+          useDesignTokens = _this$props2.useDesignTokens;
+      var colorStyle = useDesignTokens ? hexToEditorTextPaletteColor(value) : value;
       return jsx(Tooltip, {
         content: label
       }, jsx("span", {
@@ -76,7 +79,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         tabIndex: tabIndex,
         className: "".concat(isSelected ? 'selected' : ''),
         style: {
-          backgroundColor: value || 'transparent',
+          backgroundColor: colorStyle || 'transparent',
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus

package/dist/esm/ui-color/ColorPalette/index.js

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Color from './Color';
 import { colorPaletteWrapper } from './styles';
 
@@ -14,10 +15,21 @@ import { colorPaletteWrapper } from './styles';
  * @param color color string, suppports HEX, RGB, RGBA etc.
  * @return Highest contrast color in pool
  */
-function getContrastColor(color, pool) {
-  return pool.sort(function (a, b) {
+function getCheckMarkColor(color, textPalette) {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  var contrastColor = [N0, N500].sort(function (a, b) {
     return chromatism.difference(b, color) - chromatism.difference(a, color);
   })[0];
+
+  if (!textPalette) {
+    return contrastColor;
+  } // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+
+  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
 }
 
 var ColorPalette = function ColorPalette(props) {
@@ -27,7 +39,9 @@ var ColorPalette = function ColorPalette(props) {
       onClick = props.onClick,
       selectedColor = props.selectedColor,
       className = props.className,
-      formatMessage = props.intl.formatMessage;
+      formatMessage = props.intl.formatMessage,
+      _props$textPalette = props.textPalette,
+      textPalette = _props$textPalette === void 0 ? false : _props$textPalette;
   var colorsPerRow = React.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
       var chunkIndex = Math.floor(index / cols);
@@ -54,14 +68,9 @@ var ColorPalette = function ColorPalette(props) {
         borderColor: border,
         label: message ? formatMessage(message) : label,
         onClick: onClick,
-        isSelected: value === selectedColor
-        /** this is not new usage - old code extracted from editor-core */
-
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-        ,
-        checkMarkColor: getContrastColor(value, [N0, N500])
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+        isSelected: value === selectedColor,
+        checkMarkColor: getCheckMarkColor(value, textPalette),
+        useDesignTokens: textPalette === true
       });
     }));
   }));

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

@@ -14,6 +14,7 @@ import React, { PureComponent } from 'react';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
+import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
@@ -65,7 +66,9 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
           onOpenChange = _this$props.onOpenChange,
           fitHeight = _this$props.fitHeight,
           fitWidth = _this$props.fitWidth,
-          zIndex = _this$props.zIndex;
+          zIndex = _this$props.zIndex,
+          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+          keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return /*#__PURE__*/React.createElement(Popup, {
         target: target,
         mountTo: mountTo,
@@ -75,6 +78,16 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex
+      }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true,
+        handleClose: function handleClose(event) {
+          return onOpenChange && onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
           height: 0,
@@ -85,7 +98,7 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         onOpenChange: onOpenChange,
         position: popupPlacement.join(' '),
         shouldFitContainer: true
-      }, children)));
+      }, children))));
     }
   }, {
     key: "render",

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

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }; }
 
@@ -21,14 +21,16 @@ import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
-import { DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
+import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
+import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
+var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), token('color.border.focused', B100));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -36,9 +38,9 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'));
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'), focusedMenuItemStyle);
     } else {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n    "])), themed({
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), themed({
         light: token('color.text', N900),
         dark: token('color.text', DN600)
       })(theme), themed({
@@ -50,7 +52,7 @@ var buttonStyles = function buttonStyles(isActive) {
       })(theme), themed({
         light: token('color.text.disabled', N70),
         dark: token('color.text.disabled', DN80)
-      })(theme));
+      })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };
 };
@@ -99,6 +101,14 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleCloseandFocus", function () {
+      var _this$state$target, _this$state$target$qu;
+
+      _this.handleClose();
+
+      (_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       if (_this.props.onOpenChange) {
         _this.props.onOpenChange({
@@ -128,7 +138,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           fitWidth = _this$props.fitWidth,
           isOpen = _this$props.isOpen,
           zIndex = _this$props.zIndex,
-          shouldUseDefaultRole = _this$props.shouldUseDefaultRole;
+          shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
+          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+          keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return jsx(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -139,6 +151,11 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || akEditorFloatingPanelZIndex,
         offset: offset
+      }, jsx(MenuArrowKeyNavigationProvider, {
+        disableArrowKeyNavigation: disableArrowKeyNavigation,
+        handleClose: this.handleCloseandFocus,
+        keyDownHandlerContext: keyDownHandlerContext,
+        closeonTab: true
       }, jsx(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -147,7 +164,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleClose
+        handleEscapeKeydown: this.handleCloseandFocus,
+        targetRef: this.state.target
       }, jsx("div", {
         style: {
           height: 0,
@@ -169,7 +187,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
             onMouseLeave: _this2.props.onMouseLeave
           });
         }));
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -220,7 +238,8 @@ function DropdownMenuItem(_ref) {
       return buttonStyles(item.isActive)({
         theme: theme
       });
-    }
+    },
+    tabIndex: -1
   }, 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

@@ -0,0 +1,147 @@
+import React, { useLayoutEffect, useRef } from 'react';
+
+/**
+ * This component is a wrapper of vertical menus which listens to keydown events of children
+ * and handles up/down arrow key navigation
+ */
+export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+      handleClose = _ref.handleClose,
+      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
+      keyDownHandlerContext = _ref.keyDownHandlerContext,
+      closeonTab = _ref.closeonTab;
+  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 decrementIndex = function decrementIndex(list) {
+    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = list.length - 1;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    }
+  };
+
+  useLayoutEffect(function () {
+    if (disableArrowKeyNavigation) {
+      return;
+    }
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+
+    var handleKeyDown = function handleKeyDown(event) {
+      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+
+      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) {
+        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);
+
+      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;
+      }
+
+      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;
+
+        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;
+        //ArrowLeft/Right on the menu should close the menus
+        //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
+
+        case 'ArrowLeft':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          break;
+
+        case 'ArrowRight':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          break;
+
+        case 'Escape':
+          handleClose(event);
+          break;
+
+        default:
+          return;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+
+  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"];
+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); }; }
 
@@ -41,7 +41,16 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
 
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         if (_this.props.handleClickOutside) {
-          _this.props.handleClickOutside(evt);
+          var _this$props$editorVie;
+
+          _this.props.handleClickOutside(evt); //When the menus are closed by clicking outside the focus is set on editor.
+
+
+          if (!((_this$props$editorVie = _this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+            var _this$props$editorVie2;
+
+            (_this$props$editorVie2 = _this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
+          }
         }
       }
     });
@@ -52,22 +61,18 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (evt.code === 'Escape' && _this.props.handleEscapeKeydown) {
-        var _this$props$editorVie;
-
         evt.preventDefault();
         evt.stopPropagation();
 
-        _this.props.handleEscapeKeydown(evt);
-
-        if (!((_this$props$editorVie = _this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
-          var _this$props$editorVie2;
+        _this.props.handleEscapeKeydown(evt); //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
 
-          (_this$props$editorVie2 = _this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
-        }
 
         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) {
+        //The menus should be closed when the tab is pressed as it takes the focus out of the menu
+        _this.props.handleEscapeKeydown(evt);
       }
     });
 
@@ -84,7 +89,8 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       if (this.props.handleEscapeKeydown) {
         var _this$props$editorRef;
 
-        (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+        //Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
+        (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
       }
     }
   }, {
@@ -97,7 +103,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       if (this.props.handleEscapeKeydown) {
         var _this$props$editorRef2;
 
-        (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
+        (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
       }
     }
   }, {
@@ -119,6 +125,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
         handleEnterKeydown = _ref.handleEnterKeydown,
         handleEscapeKeydown = _ref.handleEscapeKeydown,
+        closeonTab = _ref.closeonTab,
         props = _objectWithoutProperties(_ref, _excluded);
 
     var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -128,10 +135,12 @@ export default function withReactEditorViewOuterListeners(Component) {
       return /*#__PURE__*/React.createElement(WithOutsideClick, {
         editorView: editorView,
         editorRef: editorRef,
+        targetRef: props.targetRef,
         isActiveComponent: isActiveComponent,
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
-        handleEscapeKeydown: handleEscapeKeydown
+        handleEscapeKeydown: handleEscapeKeydown,
+        closeonTab: closeonTab
       }, /*#__PURE__*/React.createElement(Component, props));
     });
   };

package/dist/esm/utils/index.js

@@ -13,7 +13,7 @@ export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, close
 export { default as ADFTraversor } from './traversor';
 export { analyticsEventKey, getAnalyticsAppearance, getAnalyticsEventSeverity, SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './analytics';
 export { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
-export { measureRender } from './performance/measure-render';
+export { getDistortedDurationMonitor, measureRender } from './performance/measure-render';
 export { startMeasure, stopMeasure, clearMeasure } from './performance/measure';
 export { measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS } from './performance/measure-tti';
 export { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from './performance/is-performance-api-available';