@atlaskit/editor-common 72.4.0 → 72.5.0

package/dist/es2019/analytics/fire-analytics-event.js

@@ -0,0 +1,27 @@
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { AnalyticsQueue } from './analytics-queue';
+const editorAnalyticsChannel = FabricChannel.editor;
+export const fireAnalyticsEvent = createAnalyticsEvent => ({
+  payload,
+  channel = editorAnalyticsChannel
+}) => {
+  if (!createAnalyticsEvent) {
+    return;
+  }
+
+  // START TEMPORARY CODE ED-10584
+  // __queueAnalytics property set in ReactEditorView based on featureFlags.queueAnalytics
+  const queueAnalytics = Boolean(createAnalyticsEvent.__queueAnalytics);
+  // END TEMPORARY CODE ED-10584
+
+  if (queueAnalytics) {
+    const queue = AnalyticsQueue.get();
+    queue.schedule(() => {
+      var _createAnalyticsEvent;
+      return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
+    });
+  } else {
+    var _createAnalyticsEvent2;
+    (_createAnalyticsEvent2 = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent2 === void 0 ? void 0 : _createAnalyticsEvent2.fire(channel);
+  }
+};

package/dist/es2019/analytics/index.js

@@ -1 +1,3 @@
-export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
+export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
+export { fireAnalyticsEvent } from './fire-analytics-event';
+export { getAnalyticsEventsFromTransaction } from './utils';

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

@@ -57,6 +57,10 @@ export let ACTION;
   ACTION["INITIALISED_FRAGMENT_MARK"] = "initialisedFragmentMark";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
+  ACTION["INPUT_PERF_SAMPLING_SINGLE_KEYPRESS"] = "inputPerfSamplingSingleKeypress";
+  ACTION["INPUT_PERF_SAMPLING_SINGLE_KEYPRESS_AVG"] = "inputPerfSamplingSingleKeypressAvg";
+  ACTION["INPUT_PERF_SAMPLING_RENDERED"] = "inputPerfSamplingRendered";
+  ACTION["INPUT_PERF_SAMPLING_RENDERED_AVG"] = "inputPerfSamplingRenderedAvg";
   ACTION["INSERTED"] = "inserted";
   ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";

package/dist/es2019/analytics/utils.js

@@ -0,0 +1,4 @@
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
+export function getAnalyticsEventsFromTransaction(tr) {
+  return tr.steps.filter(step => step instanceof AnalyticsStep).reduce((acc, step) => [...acc, ...step.analyticsEvents], []);
+}

package/dist/es2019/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as usePreviousState } from './usePreviousState';
+export { default as useConstructor } from './useConstructor';

package/dist/es2019/hooks/useConstructor.js

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+/**
+ *
+ * Hook to run code once in a functional component.
+ * Emulates the behaviour of a `constructor` in a class component
+ * Place this at the top of your functional component so that it is run first.
+ *
+ * @param callback Callback function to run once
+ */
+export default function useConstructor(callback) {
+  const hasRun = useRef(false);
+  if (!hasRun.current) {
+    callback();
+    hasRun.current = true;
+  }
+}

package/dist/es2019/hooks/usePreviousState.js

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+
+/**
+ *
+ * Can be used to get the previous state of a prop.
+ * This can be helpful when converting class components to functional
+ * where we don't have the `prevProps`.
+ *
+ * @param value New state of the
+ * @param initialValue Optional parameter for the inital state of the component
+ * @returns
+ */
+export default function usePreviousState(value, initialValue) {
+  const ref = useRef(initialValue);
+  const prevValue = ref.current;
+  ref.current = value;
+  return prevValue;
+}

package/dist/es2019/keymaps/index.js

@@ -23,7 +23,7 @@ export const toggleHeading6 = makeKeyMapWithCommon('Heading 6', 'Mod-Alt-6');
 export const toggleOrderedList = makeKeyMapWithCommon('Numbered list', 'Mod-Shift-7');
 export const ctrlBackSpace = makeKeyMapWithCommon('Cmd + Backspace', 'Mod-Backspace');
 export const toggleBulletList = makeKeyMapWithCommon('Bullet list', 'Mod-Shift-8');
-export const toggleBlockQuote = makeKeymap('Quote', '', 'Cmd-Alt-9');
+export const toggleBlockQuote = makeKeyMapWithCommon('Quote', 'Mod-Shift-9');
 export const insertNewLine = makeKeyMapWithCommon('Insert new line', 'Shift-Enter');
 export const shiftBackspace = makeKeyMapWithCommon('Shift Backspace', 'Shift-Backspace');
 export const splitCodeBlock = makeKeyMapWithCommon('Split code block', 'Enter');

package/dist/es2019/styles/index.js

@@ -1,5 +1,5 @@
 export { textColorStyles } from './shared/text-color';
-export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding } from './shared/table';
+export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
 export { AnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';

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

@@ -10,6 +10,7 @@ import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
 export const tableMarginTop = 24;
 export const tableMarginBottom = 16;
+export const tableMarginTopWithControl = 14;
 export const tableMarginSides = 8;
 export const tableCellMinWidth = 48;
 export const tableNewColumnMinWidth = 140;

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

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

package/dist/es2019/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';

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

@@ -2,7 +2,6 @@ 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';
@@ -34,10 +33,14 @@ 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 */
-      useDesignTokens
+      /**
+       * When hexToPaletteColor prop is set,
+       * it will be used to get background color style based on
+       * value (which will be hexcode) prop
+       */
+      hexToPaletteColor
     } = this.props;
-    const colorStyle = useDesignTokens ? hexToEditorTextPaletteColor(value) : value;
+    const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
     return jsx(Tooltip, {
       content: label
     }, jsx("span", {

package/dist/es2019/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -70,7 +70,7 @@ export const panelBackgroundPalette = [{
   value: colors.P100
 }].map(color => ({
   ...color,
-  border: DEFAULT_BORDER_COLOR
+  border: `var(--ds-border, ${DEFAULT_BORDER_COLOR})`
 }));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 

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

@@ -9,6 +9,7 @@ import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
@@ -16,10 +17,10 @@ import { colorPaletteWrapper } from './styles';
  * @param color color string, suppports HEX, RGB, RGBA etc.
  * @return Highest contrast color in pool
  */
-function getCheckMarkColor(color, textPalette) {
+function getCheckMarkColor(color, useIconToken) {
   // 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) {
+  if (!useIconToken) {
     return contrastColor;
   }
 
@@ -32,7 +33,7 @@ function getCheckMarkColor(color, textPalette) {
 const ColorPalette = props => {
   const {
     palette,
-    cols = 7,
+    cols = DEFAULT_COLOR_PICKER_COLUMNS,
     onClick,
     selectedColor,
     className,
@@ -40,18 +41,15 @@ const ColorPalette = props => {
       formatMessage
     },
     textPalette = false,
+    hexToPaletteColor,
     useSomewhatSemanticTextColorNames = false
   } = props;
   const {
     colorMode: tokenTheme
   } = useThemeObserver();
+  const useIconToken = !!hexToPaletteColor;
   const colorsPerRow = React.useMemo(() => {
-    return palette.reduce((resultArray, item, index) => {
-      const chunkIndex = Math.floor(index / cols);
-      resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
-      resultArray[chunkIndex].push(item);
-      return resultArray;
-    }, []);
+    return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
   return jsx(React.Fragment, null, colorsPerRow.map((row, rowIdx) => jsx("div", {
     css: colorPaletteWrapper,
@@ -79,8 +77,8 @@ const ColorPalette = props => {
       label: message ? formatMessage(message) : label,
       onClick: onClick,
       isSelected: value === selectedColor,
-      checkMarkColor: getCheckMarkColor(value, textPalette),
-      useDesignTokens: textPalette === true
+      checkMarkColor: getCheckMarkColor(value, useIconToken),
+      hexToPaletteColor: hexToPaletteColor
     });
   }))));
 };

package/dist/es2019/ui-color/ColorPalette/utils.js

@@ -0,0 +1,31 @@
+export const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+export function getColorsPerRowFromPalette(palette, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
+  return palette.reduce((resultArray, item, index) => {
+    const chunkIndex = Math.floor(index / cols);
+    resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
+export function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
+  let selectedRowIndex = -1;
+  let selectedColumnIndex = -1;
+  colorsPerRow.forEach((row, rowIndex) => {
+    row.forEach(({
+      value
+    }, columnIndex) => {
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex,
+    selectedColumnIndex
+  };
+}
+export function getSelectedRowAndColumnFromPalette(palette, selectedColor, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
+  const colorsPerRow = getColorsPerRowFromPalette(palette, cols);
+  return getSelectedRowAndColumn(colorsPerRow, selectedColor);
+}

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

@@ -1,5 +1,6 @@
 export { default as ColorPalette } from './ColorPalette';
 export { default as Color } from './ColorPalette/Color';
+export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRowAndColumn, getSelectedRowAndColumnFromPalette } from './ColorPalette/utils';
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';

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

@@ -0,0 +1,132 @@
+import React, { useLayoutEffect, useRef } from 'react';
+/**
+ * This component is a wrapper for color picker which listens to keydown events of children
+ * and handles arrow key navigation
+ */
+export const ColorPaletteArrowKeyNavigationProvider = ({
+  children,
+  selectedRowIndex,
+  selectedColumnIndex,
+  isOpenedByKeyboard,
+  isPopupPositioned,
+  handleClose,
+  closeOnTab
+}) => {
+  const wrapperRef = useRef(null);
+  const currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
+  const currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  const incrementRowIndex = (rowElements, columnElements) => {
+    if (currentSelectedRowIndex.current === rowElements.length - 1) {
+      currentSelectedRowIndex.current = 0;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current + 1;
+    }
+  };
+  const decrementRowIndex = (rowElements, columnElements) => {
+    if (currentSelectedRowIndex.current === 0) {
+      currentSelectedRowIndex.current = rowElements.length - 1;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current - 1;
+    }
+  };
+  useLayoutEffect(() => {
+    const incrementColumnIndex = (rowElements, columnElements) => {
+      if (currentSelectedColumnIndex.current === columnElements.length - 1) {
+        incrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = 0;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current + 1;
+      }
+    };
+    const decrementColumnIndex = (rowElements, columnElements) => {
+      if (currentSelectedColumnIndex.current === 0) {
+        decrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = columnElements.length - 1;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current - 1;
+      }
+    };
+    const focusColorSwatch = () => {
+      var _focusableElements$cu;
+      const colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      const currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      const focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
+        return;
+      }
+      (_focusableElements$cu = focusableElements[currentSelectedColumnIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
+    };
+
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' && closeOnTab) {
+        handleClose(event);
+        return;
+      }
+      const colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      const currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      const focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      switch (event.key) {
+        case 'ArrowDown':
+          incrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          decrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          decrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          incrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'Escape':
+          handleClose(event);
+          break;
+        default:
+          return;
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    // set focus to current selected color swatch if only opened by keyboard
+    if (isOpenedByKeyboard && isPopupPositioned) {
+      // Using timeout because, we need to wait till color palette is rendered
+      //  and visible on screen, then only focus color swatch, otherwise focus will be
+      //  moved to body
+      setTimeout(() => {
+        focusColorSwatch();
+      });
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+function getColorSwatchesRows(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  const colorSwatchesRowElements = rootNode.querySelectorAll('div[role=radiogroup]') || [];
+  return Array.from(colorSwatchesRowElements);
+}
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  const focusableModalElements = rootNode.querySelectorAll('button[role=radio]:not([disabled])') || [];
+  return Array.from(focusableModalElements);
+}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper of vertical menus which listens to keydown events of children
  * and handles up/down arrow key navigation
@@ -33,6 +33,21 @@ export const MenuArrowKeyNavigationProvider = ({
     setCurrentSelectedItemIndex(nextIndex);
     return nextIndex;
   }, [currentSelectedItemIndex]);
+
+  // this useEffect uses onSelection in it's dependency list which gets
+  // changed as a result of the dropdown menu getting re-rendered in it's
+  // parent component. Note that if onSelection gets updated to useMemo
+  // this will no longer work.
+  useEffect(() => {
+    const currentIndex = currentSelectedItemIndex;
+    const list = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    const currentElement = list[currentIndex];
+    if (currentElement && currentElement.getAttribute('aria-disabled') === 'true') {
+      var _list$focusIndex;
+      const focusIndex = incrementIndex(list);
+      (_list$focusIndex = list[focusIndex]) === null || _list$focusIndex === void 0 ? void 0 : _list$focusIndex.focus();
+    }
+  }, [currentSelectedItemIndex, onSelection, incrementIndex, decrementIndex]);
   useLayoutEffect(() => {
     if (disableArrowKeyNavigation) {
       return;

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ColorPaletteArrowKeyNavigationProvider } from './ColorPaletteArrowKeyNavigationProvider';
+import { MenuArrowKeyNavigationProvider } from './MenuArrowKeyNavigationProvider';
+import { ArrowKeyNavigationType } from './types';
+export const ArrowKeyNavigationProvider = props => {
+  const {
+    children,
+    type,
+    ...restProps
+  } = props;
+  if (type === ArrowKeyNavigationType.COLOR) {
+    return /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
+      selectedRowIndex: props.selectedRowIndex,
+      selectedColumnIndex: props.selectedColumnIndex,
+      isOpenedByKeyboard: props.isOpenedByKeyboard,
+      isPopupPositioned: props.isPopupPositioned
+    }, restProps), children);
+  }
+  return /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, restProps, children);
+};

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

@@ -0,0 +1,5 @@
+export let ArrowKeyNavigationType;
+(function (ArrowKeyNavigationType) {
+  ArrowKeyNavigationType["COLOR"] = "color";
+  ArrowKeyNavigationType["MENU"] = "menu";
+})(ArrowKeyNavigationType || (ArrowKeyNavigationType = {}));

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

@@ -1,9 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
-import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
+import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * droplist outside of "overflow: hidden" containers when needed.
@@ -41,8 +42,7 @@ export class Dropdown extends PureComponent {
       fitHeight,
       fitWidth,
       zIndex,
-      disableArrowKeyNavigation,
-      keyDownHandlerContext
+      arrowKeyNavigationProviderOptions
     } = this.props;
     return /*#__PURE__*/React.createElement(Popup, {
       target: target,
@@ -53,15 +53,13 @@ export class Dropdown extends PureComponent {
       fitHeight: fitHeight,
       fitWidth: fitWidth,
       zIndex: zIndex
-    }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
-      disableArrowKeyNavigation: disableArrowKeyNavigation,
-      keyDownHandlerContext: keyDownHandlerContext,
+    }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, _extends({}, arrowKeyNavigationProviderOptions, {
       closeOnTab: true,
       handleClose: event => onOpenChange && onOpenChange({
         isOpen: false,
         event
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
         minWidth: fitWidth || 0

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

@@ -12,7 +12,8 @@ import { DropdownMenuSharedCssClassName } from '../../styles';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
-import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
+import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
+import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 const wrapper = css`
   /* tooltip in ToolbarButton is display:block */
   & > div > div {
@@ -75,7 +76,7 @@ const buttonStyles = (isActive, submenuActive) => theme => {
         :focus-visible > span[aria-disabled='false'] {
           outline: none;
         }
-      `; // The deafut focus-visible style is removed to ensure consistency across browsers
+      `; // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 
@@ -94,6 +95,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       popupPlacement: ['bottom', 'left'],
       selectionIndex: -1
     });
+    _defineProperty(this, "popupRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "handleRef", target => {
       this.setState({
         target: target || undefined
@@ -138,24 +140,17 @@ export default class DropdownMenuWrapper extends PureComponent {
       isOpen,
       zIndex,
       shouldUseDefaultRole,
-      disableArrowKeyNavigation,
-      keyDownHandlerContext,
-      onItemActivated
+      onItemActivated,
+      arrowKeyNavigationProviderOptions
     } = this.props;
-    return jsx(Popup, {
-      target: isOpen ? target : undefined,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      onPlacementChanged: this.updatePopupPlacement,
-      fitHeight: fitHeight,
-      fitWidth: fitWidth,
-      zIndex: zIndex || akEditorFloatingPanelZIndex,
-      offset: offset
-    }, jsx(MenuArrowKeyNavigationProvider, {
-      disableArrowKeyNavigation: disableArrowKeyNavigation,
-      handleClose: this.handleCloseAndFocus,
-      keyDownHandlerContext: keyDownHandlerContext,
+
+    // Note that this onSelection function can't be refactored to useMemo for
+    // performance gains as it is being used as a dependency in a useEffect in
+    // MenuArrowKeyNavigationProvider in order to check for re-renders to adjust
+    // focus for accessibility. If this needs to be refactored in future refer
+    // back to ED-16740 for context.
+    const navigationProviderProps = arrowKeyNavigationProviderOptions.type === ArrowKeyNavigationType.COLOR ? arrowKeyNavigationProviderOptions : {
+      ...arrowKeyNavigationProviderOptions,
       onSelection: index => {
         let result = [];
         if (typeof onItemActivated === 'function') {
@@ -167,9 +162,22 @@ export default class DropdownMenuWrapper extends PureComponent {
             shouldCloseMenu: false
           });
         }
-      },
+      }
+    };
+    return jsx(Popup, {
+      target: isOpen ? target : undefined,
+      mountTo: mountTo,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      onPlacementChanged: this.updatePopupPlacement,
+      fitHeight: fitHeight,
+      fitWidth: fitWidth,
+      zIndex: zIndex || akEditorFloatingPanelZIndex,
+      offset: offset
+    }, jsx(ArrowKeyNavigationProvider, _extends({}, navigationProviderProps, {
+      handleClose: this.handleCloseAndFocus,
       closeOnTab: true
-    }, jsx(DropListWithOutsideListeners, {
+    }), jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
       position: popupPlacement.join(' '),
@@ -184,7 +192,9 @@ export default class DropdownMenuWrapper extends PureComponent {
         height: 0,
         minWidth: fitWidth || 0
       }
-    }), items.map((group, index) => jsx(MenuGroup, {
+    }), jsx("div", {
+      ref: this.popupRef
+    }, items.map((group, index) => jsx(MenuGroup, {
       key: index,
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => {
@@ -197,7 +207,7 @@ export default class DropdownMenuWrapper extends PureComponent {
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave
       });
-    }))))));
+    })))))));
   }
   render() {
     const {
@@ -210,6 +220,19 @@ export default class DropdownMenuWrapper extends PureComponent {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }
+  componentDidUpdate(previousProps) {
+    const isOpenToggled = this.props.isOpen !== previousProps.isOpen;
+    if (this.props.isOpen && isOpenToggled) {
+      if (typeof this.props.shouldFocusFirstItem === 'function' && this.props.shouldFocusFirstItem()) {
+        var _this$state$target2;
+        const keyboardEvent = new KeyboardEvent('keydown', {
+          key: 'ArrowDown',
+          bubbles: true
+        });
+        (_this$state$target2 = this.state.target) === null || _this$state$target2 === void 0 ? void 0 : _this$state$target2.dispatchEvent(keyboardEvent);
+      }
+    }
+  }
 }
 const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {