@atlaskit/editor-common 70.3.0 → 71.0.1

package/dist/es2019/styles/shared/panel.js

@@ -1,5 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
@@ -8,7 +6,19 @@ import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+const tokenPanelColor = {
+  info: 'color.background.information',
+  note: 'color.background.discovery',
+  tip: 'color.background.success',
+  success: 'color.background.success',
+  warning: 'color.background.warning',
+  error: 'color.background.danger'
+};
 const lightPanelColor = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -18,7 +28,7 @@ const lightPanelColor = {
 };
 export const darkPanelColors = {
   // standard panels
-  info: '#0C294F',
+  info: `#0C294F`,
   error: `#441C13`,
   warning: `#413001`,
   tip: `#052E21`,
@@ -78,26 +88,31 @@ export const darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 const lightIconColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+  info: token('color.icon.information', colors.B400),
+  note: token('color.icon.discovery', colors.P400),
+  tip: token('color.icon.success', colors.G400),
+  success: token('color.icon.success', colors.G400),
+  warning: token('color.icon.warning', colors.Y400),
+  error: token('color.icon.danger', colors.R400)
 };
 const darkIconColor = {
-  info: colors.B100,
-  note: colors.P100,
-  tip: colors.G200,
-  success: colors.G200,
-  warning: colors.Y100,
-  error: colors.R200
+  info: token('color.icon.information', colors.B100),
+  note: token('color.icon.discovery', colors.P100),
+  tip: token('color.icon.success', colors.G200),
+  success: token('color.icon.success', colors.G200),
+  warning: token('color.icon.warning', colors.Y100),
+  error: token('color.icon.danger', colors.R200)
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
 const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
-const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 const panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 export const getPanelDarkColor = panelColor => {
   const colorObject = panelDarkModeColors.find(color => color[0] === panelColor || color[1] === panelColor);
@@ -152,9 +167,10 @@ const iconDynamicStyles = panelType => props => {
   return `
     color: ${color};
   `;
-};
+}; // Provides the color without tokens, used when converting to a custom panel
 
-export const getPanelTypeBackground = (panelType, props = {}) => {
+
+export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
   const light = lightPanelColor[panelType];
   const dark = darkPanelColors[panelType];
   const background = themed({
@@ -163,6 +179,20 @@ export const getPanelTypeBackground = (panelType, props = {}) => {
   })(props);
   return background || 'none';
 };
+export const getPanelTypeBackground = (panelType, props = {}) => {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+  const light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  const dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+
+  const background = themed({
+    light,
+    dark
+  })(props);
+  return background || 'none';
+};
 
 const mainDynamicStyles = panelType => props => {
   const background = getPanelTypeBackground(panelType, props);

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

@@ -1,14 +1,14 @@
 /* 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 const tableMarginTop = 24;
 export const tableMarginBottom = 16;
 export const tableMarginSides = 8;
@@ -140,23 +140,34 @@ const tableSharedStyle = props => css`
 
         /* only apply this styling to codeblocks in default background headercells */
         /* TODO this needs to be overhauled as it relies on unsafe selectors */
-        &:not([style]) {
-          .code-block {
-            background-image: ${overflowShadow({
+        &:not([style]):not(.danger) {
+          .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}:not(.danger) {
+            background-color: ${themed({
+  light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
+  dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
+})(props)};
+
+            :not(.${akEditorSelectedNodeClassName}) {
+              box-shadow: 0px 0px 0px 1px
+                ${token('color.border', 'transparent')};
+            }
+
+            .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
+              background-image: ${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: `${gridSize()}px`
 })};
-            background-attachment: local, scroll, scroll;
-            background-position: 100% 0, 100% 0, 0 0;
-            background-color: ${themed({
+
+              background-color: ${themed({
   light: token('color.background.neutral', 'rgb(235, 237, 240)'),
   dark: token('color.background.neutral', 'rgb(36, 47, 66)')
 })(props)};
+            }
 
-            .line-number-gutter {
+            .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
               background-color: ${themed({
   light: token('color.background.neutral', 'rgb(226, 229, 233)'),
   dark: token('color.background.neutral', DN20)
@@ -167,8 +178,8 @@ const tableSharedStyle = props => css`
             > [data-ds--code--code-block] {
               background-image: ${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: `${gridSize()}px`
 })}!important;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 export const textColorStyles = css`
   .fabric-text-color-mark {
-    color: var(--custom-text-color, inherit);
+    color: var(--custom-palette-color, inherit);
   }
 
   a .fabric-text-color-mark {

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

@@ -10,7 +10,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "70.3.0";
+const packageVersion = "71.0.1";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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';
@@ -39,10 +40,12 @@ class Color extends PureComponent {
       /** this is not new usage - old code extracted from editor-core */
 
       /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-      checkMarkColor = N0
-      /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      checkMarkColor = N0,
 
+      /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      useDesignTokens
     } = this.props;
+    const colorStyle = useDesignTokens ? hexToEditorTextPaletteColor(value) : value;
     return jsx(Tooltip, {
       content: label
     }, jsx("span", {
@@ -57,7 +60,7 @@ class Color extends PureComponent {
       tabIndex: tabIndex,
       className: `${isSelected ? 'selected' : ''}`,
       style: {
-        backgroundColor: value || 'transparent',
+        backgroundColor: colorStyle || 'transparent',
         border: `1px solid ${borderColor}`
       },
       autoFocus: autoFocus

package/dist/es2019/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,8 +15,19 @@ 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((a, b) => chromatism.difference(b, color) - chromatism.difference(a, color))[0];
+function getCheckMarkColor(color, textPalette) {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  const contrastColor = [N0, N500].sort((a, b) => 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);
 }
 
 const ColorPalette = props => {
@@ -27,7 +39,8 @@ const ColorPalette = props => {
     className,
     intl: {
       formatMessage
-    }
+    },
+    textPalette = false
   } = props;
   const colorsPerRow = React.useMemo(() => {
     return palette.reduce((resultArray, item, index) => {
@@ -54,14 +67,9 @@ const 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/es2019/ui-menu/Dropdown/index.js

@@ -3,6 +3,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
@@ -44,7 +45,9 @@ export class Dropdown extends PureComponent {
       onOpenChange,
       fitHeight,
       fitWidth,
-      zIndex
+      zIndex,
+      disableArrowKeyNavigation,
+      keyDownHandlerContext
     } = this.props;
     return /*#__PURE__*/React.createElement(Popup, {
       target: target,
@@ -55,6 +58,14 @@ export class Dropdown extends PureComponent {
       fitHeight: fitHeight,
       fitWidth: fitWidth,
       zIndex: zIndex
+    }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
+      disableArrowKeyNavigation: disableArrowKeyNavigation,
+      keyDownHandlerContext: keyDownHandlerContext,
+      closeonTab: true,
+      handleClose: event => onOpenChange && onOpenChange({
+        isOpen: false,
+        event
+      })
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -65,7 +76,7 @@ export class Dropdown extends PureComponent {
       onOpenChange: onOpenChange,
       position: popupPlacement.join(' '),
       shouldFitContainer: true
-    }, children)));
+    }, children))));
   }
 
   render() {

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

@@ -6,19 +6,24 @@ 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';
 const wrapper = css`
   /* tooltip in ToolbarButton is display:block */
   & > div > div {
     display: flex;
   }
 `;
+const focusedMenuItemStyle = css`
+  box-shadow: inset 0px 0px 0px 2px ${token('color.border.focused', B100)};
+  outline: none;
+`;
 
 const buttonStyles = isActive => theme => {
   if (isActive) {
@@ -32,6 +37,13 @@ const buttonStyles = isActive => theme => {
         background: ${token('color.background.selected', '#6c798f')};
         color: ${token('color.text', '#fff')};
       }
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
     `;
   } else {
     return css`
@@ -57,7 +69,14 @@ const buttonStyles = isActive => theme => {
       dark: token('color.text.disabled', DN80)
     })(theme)};
       }
-    `;
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
+    `; // The deafut focus-visible style is removed to ensure consistency across browsers
   }
 };
 
@@ -95,6 +114,13 @@ export default class DropdownMenuWrapper extends PureComponent {
       }
     });
 
+    _defineProperty(this, "handleCloseandFocus", () => {
+      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(this, "handleClose", () => {
       if (this.props.onOpenChange) {
         this.props.onOpenChange({
@@ -119,7 +145,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       fitWidth,
       isOpen,
       zIndex,
-      shouldUseDefaultRole
+      shouldUseDefaultRole,
+      disableArrowKeyNavigation,
+      keyDownHandlerContext
     } = this.props;
     return jsx(Popup, {
       target: isOpen ? target : undefined,
@@ -131,6 +159,11 @@ export default class DropdownMenuWrapper extends 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",
@@ -139,7 +172,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldFitContainer: true,
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: this.handleClose
+      handleEscapeKeydown: this.handleCloseandFocus,
+      targetRef: this.state.target
     }, jsx("div", {
       style: {
         height: 0,
@@ -159,7 +193,7 @@ export default class DropdownMenuWrapper extends PureComponent {
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave
       });
-    })))));
+    }))))));
   }
 
   render() {
@@ -205,7 +239,8 @@ function DropdownMenuItem({
   const dropListItem = jsx("div", {
     css: theme => buttonStyles(item.isActive)({
       theme
-    })
+    }),
+    tabIndex: -1
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),

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

@@ -0,0 +1,146 @@
+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 const MenuArrowKeyNavigationProvider = ({
+  children,
+  handleClose,
+  disableArrowKeyNavigation,
+  keyDownHandlerContext,
+  closeonTab
+}) => {
+  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 decrementIndex = list => {
+    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = list.length - 1;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (disableArrowKeyNavigation) {
+      return;
+    }
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+
+    const handleKeyDown = event => {
+      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+
+      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) {
+        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);
+
+      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 () => {
+      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 [];
+  }
+
+  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"]'));
+}