@atlaskit/editor-core 175.0.5 → 176.0.0

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -2,7 +2,7 @@
 import React, { useRef, useCallback, Fragment, useLayoutEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/utils';
 import { getPluginState } from '../utils';
 import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
@@ -10,9 +10,8 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-const querySpan = css`
-  outline: none;
-`;
+import { token } from '@atlaskit/tokens';
+import * as colors from '@atlaskit/theme/colors';
 
 const isNavigationKey = event => {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
@@ -36,6 +35,11 @@ const isUndoRedoShortcut = event => {
   return false;
 };
 
+const isSelectAllShortcut = event => {
+  const key = keyNameNormalized(event);
+  return (event.ctrlKey || event.metaKey) && key === 'a';
+};
+
 export const InputQuery = /*#__PURE__*/React.memo(({
   triggerQueryPrefix,
   cancel,
@@ -50,25 +54,20 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   editorView,
   items
 }) => {
-  const ref = useRef(document.createElement('span'));
-  const cleanedInputContent = useCallback(() => {
-    var _ref$current;
-
-    const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
-    return raw.replace(ZERO_WIDTH_SPACE, '');
-  }, []);
-  const onKeyUp = useCallback(event => {
-    const text = cleanedInputContent();
+  const ref = useRef(document.createElement('input'));
+  const sizeSpanRef = useRef(document.createElement('span'));
+  const [redoBuffer, setRedoBuffer] = useState([]);
+  const [query, setQuery] = useState(reopenQuery);
+  const onChange = useCallback(event => {
+    const text = event.currentTarget.value;
+    sizeSpanRef.current.textContent = text;
+    setQuery(text);
     onQueryChange(text);
-  }, [onQueryChange, cleanedInputContent]);
+  }, [onQueryChange]);
   const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
-    var _ref$current2;
-
     const key = keyNameNormalized(event);
-    const sel = document.getSelection();
-    const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
-    const text = cleanedInputContent();
+    const text = ref.current.value;
     let stopDefault = false;
     const {
       selectedIndex
@@ -91,6 +90,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         break;
 
       case 'Escape':
+      case 'PageUp':
+      case 'PageDown':
+      case 'Home':
         cancel({
           text,
           forceFocusOnEditor: true,
@@ -101,7 +103,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         break;
 
       case 'Backspace':
-        if (raw === ZERO_WIDTH_SPACE || raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+        if (text.length === 0 || ref.current.selectionStart === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -141,13 +143,45 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           selectNextItem();
         }
 
+        break;
+
+      case 'ArrowUp':
+        if (selectedIndex === -1) {
+          selectPreviousItem();
+        }
+
         break;
     }
 
-    const undoRedoType = isUndoRedoShortcut(event);
+    if (isSelectAllShortcut(event)) {
+      cancel({
+        forceFocusOnEditor: true,
+        addPrefixTrigger: true,
+        text: ref.current.value,
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+      return true;
+    }
 
-    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
-      stopDefault = true;
+    const undoRedoType = isUndoRedoShortcut(event);
+    const hasReopenQuery = reopenQuery && reopenQuery.length > 0;
+
+    if (onUndoRedo && undoRedoType) {
+      if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
+        setRedoBuffer(buffer => [ref.current.value, ...buffer]);
+        const undoValue = text.substring(0, text.length - 1);
+        ref.current.value = undoValue;
+        sizeSpanRef.current.textContent = undoValue;
+        stopDefault = true;
+      } else if (undoRedoType === 'historyRedo' && redoBuffer.length > 0) {
+        const redoValue = redoBuffer[0];
+        ref.current.value = redoValue;
+        sizeSpanRef.current.textContent = redoValue;
+        setRedoBuffer(buffer => buffer.slice(1));
+        stopDefault = true;
+      } else {
+        stopDefault = onUndoRedo(undoRedoType);
+      }
     }
 
     if (isNavigationKey(event) || stopDefault) {
@@ -155,16 +189,34 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, cleanedInputContent, editorView.state]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
   const onClick = useCallback(event => {
-    var _ref$current3;
+    var _ref$current;
 
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     return false;
   }, [onQueryFocus]);
+  const queryStyle = css({
+    outline: 'none',
+    position: 'absolute',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    letterSpacing: 'inherit',
+    padding: 0,
+    height: '100%',
+    width: '100%',
+    top: 0,
+    left: 0,
+    background: 'transparent',
+    border: 'none',
+    '&&': {
+      color: `${token('color.link', colors.B400)}`
+    }
+  });
   useLayoutEffect(() => {
     if (!ref.current) {
       return;
@@ -182,12 +234,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       const key = keyNameNormalized(event);
 
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current4;
+        var _ref$current2, _ref$current3;
 
-        const q = ((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.textContent) || '';
-        const sel = document.getSelection();
-        const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
-        const isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;
+        const q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
+        const anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
+        const isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
+        const isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
 
         if (!isMovingRight && !isMovingLeft) {
           return;
@@ -196,7 +248,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
-          text: cleanedInputContent(),
+          text: ref.current.value,
           setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
         event.preventDefault();
@@ -232,8 +284,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
 
       cancel({
         addPrefixTrigger: true,
-        text: cleanedInputContent(),
-        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
+        text: ref.current.value,
+        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -255,33 +307,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         target
       } = e;
 
-      if (e.isComposing || !(target instanceof HTMLElement)) {
+      if (e.isComposing || !(target instanceof HTMLInputElement)) {
         return;
       }
 
-      if (e.inputType === 'historyUndo' && (((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0 || target.textContent === ZERO_WIDTH_SPACE)) {
+      if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
         e.preventDefault();
         e.stopPropagation();
         close();
         return;
       }
-
-      if (e.data != null && target.textContent === ZERO_WIDTH_SPACE) {
-        element.textContent = ''; // We need to change the content on Safari
-        // and set the cursor at the right place
-
-        if (browser.safari) {
-          e.preventDefault();
-          const dataElement = document.createTextNode(e.data);
-          element.appendChild(dataElement);
-          const sel = window.getSelection();
-          const range = document.createRange();
-          range.setStart(dataElement, dataElement.length);
-          range.collapse(true);
-          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
-          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
-        }
-      }
     };
 
     let onInput = null;
@@ -297,7 +332,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           target
         } = e;
 
-        if (e.isComposing || !(target instanceof HTMLElement)) {
+        if (e.isComposing || !(target instanceof HTMLInputElement)) {
           return;
         }
 
@@ -326,12 +361,13 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
     if (ref.current && forceFocus) {
-      ref.current.textContent = hasReopenQuery ? reopenQuery : ZERO_WIDTH_SPACE;
+      ref.current.value = hasReopenQuery ? reopenQuery : '';
+      sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
       requestAnimationFrame(() => {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -362,10 +398,20 @@ export const InputQuery = /*#__PURE__*/React.memo(({
    */
 
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: querySpan,
-    contentEditable: true,
+    style: {
+      position: 'relative'
+    }
+  }, jsx("span", {
+    ref: sizeSpanRef,
+    "aria-hidden": true,
+    style: {
+      marginLeft: '1px',
+      visibility: 'hidden'
+    }
+  }), jsx("input", {
+    css: queryStyle,
     ref: ref,
-    onKeyUp: onKeyUp,
+    onChange: onChange,
     onClick: onClick,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -373,8 +419,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-  }), jsx("span", {
+    "data-query-prefix": triggerQueryPrefix,
+    value: query
+  })), jsx("span", {
     id: assistiveHintID,
     style: {
       display: 'none'

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -127,7 +127,16 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     setCache(new CellMeasurerCache({
       fixedWidth: true,
       defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    }));
+    })); // When query is updated, sometimes the scroll position of the menu is not at the top
+    // Scrolling back to top for consistency
+
+    requestAnimationFrame(() => {
+      var _listContainerRef$cur;
+
+      if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
+        listContainerRef.current.firstChild.scrollTo(0, 0);
+      }
+    });
   }, [items]);
   useLayoutEffect(() => {
     const height = Math.min(items.reduce((prevValue, currentValue, index) => {
@@ -154,23 +163,12 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       if (isNavigationKey(event)) {
         switch (event.key) {
           case 'ArrowDown':
-            if (selectedIndex === items.length - 1) {
-              event.stopPropagation();
-            } else {
-              selectNextItem();
-            }
-
+            selectNextItem();
             event.preventDefault();
             break;
 
           case 'ArrowUp':
-            if (selectedIndex === 0) {
-              //To set focus on target element when up arrow is pressed on first option of list
-              focusTargetElement();
-            } else {
-              selectPreviousItem();
-            }
-
+            selectPreviousItem();
             event.preventDefault();
             break;
 

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -10,6 +10,8 @@ import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { token } from '@atlaskit/tokens';
+import { useIntl } from 'react-intl-next';
+import { typeAheadListMessages } from '../messages';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
 export const ITEM_PADDING = 12;
@@ -35,7 +37,6 @@ const itemBody = css`
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
-  line-height: 1.4;
 `;
 
 const itemText = theme => css`
@@ -44,10 +45,13 @@ const itemText = theme => css`
   light: token('color.text', N800),
   dark: token('color.text', DN600)
 })(theme)};
+  .item-title {
+    line-height: 1.4;
+  }
   .item-description {
-    font-size: ${relativeFontSizeToBase16(11.67)};
+    font-size: ${relativeFontSizeToBase16(12)};
     color: ${token('color.text.subtlest', N200)};
-    margin-top: 4px;
+    margin-top: 3px;
   }
 `;
 
@@ -90,6 +94,19 @@ const FallbackIcon = /*#__PURE__*/React.memo(({
 
 const noop = () => {};
 
+const AssistiveText = ({
+  title,
+  description,
+  shortcut
+}) => {
+  const intl = useIntl();
+  const descriptionText = description ? ` ${intl.formatMessage(typeAheadListMessages.descriptionLabel)} ${description}.` : '';
+  const shortcutText = shortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${shortcut}.` : '';
+  return jsx("span", {
+    className: "assistive"
+  }, `${title}. ${descriptionText} ${shortcutText}`);
+};
+
 export const TypeAheadListItem = ({
   item,
   itemsLength,
@@ -173,17 +190,24 @@ export const TypeAheadListItem = ({
     "aria-label": item.title,
     "aria-setsize": itemsLength,
     role: "option",
-    ref: buttonItemRef,
-    description: item.description
+    ref: buttonItemRef
   }, jsx("div", {
-    css: itemBody
+    "aria-hidden": true
   }, jsx("div", {
     css: itemText
+  }, jsx("div", {
+    css: itemBody
   }, jsx("div", {
     className: "item-title"
-  }, item.title)), jsx("div", {
+  }, item.title), jsx("div", {
     css: itemAfter
   }, item.keyshortcut && jsx("div", {
     css: shortcutStyle
-  }, item.keyshortcut)))));
+  }, item.keyshortcut))), jsx("div", {
+    className: "item-description"
+  }, item.description))), jsx(AssistiveText, {
+    title: item.title,
+    description: item.description,
+    shortcut: item.keyshortcut
+  })));
 };

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -1,13 +1,13 @@
 /** @jsx jsx */
-import React, { useCallback, useEffect, useMemo, useState, useLayoutEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
-import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 import { ITEM_PADDING } from './TypeAheadListItem';
 import { token } from '@atlaskit/tokens';
@@ -32,8 +32,7 @@ const Highlight = ({
     return null;
   }
 
-  const highlight = triggerHandler.getHighlight(state);
-  return highlight;
+  return triggerHandler.getHighlight(state);
 };
 
 const OFFSET = [0, 8];
@@ -49,8 +48,10 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     selectedIndex,
     onItemInsert,
     fireAnalyticsCallback,
-    isEmptyQuery
+    isEmptyQuery,
+    cancel
   } = props;
+  const ref = useRef(null);
   const startTime = useMemo(() => performance.now(), // In case those props changes
   // we need to recreate the startTime
   [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
@@ -153,6 +154,39 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       }
     };
   }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  useLayoutEffect(() => {
+    const focusOut = event => {
+      var _window$getSelection;
+
+      const {
+        relatedTarget
+      } = event; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || relatedTarget.closest(`[data-type-ahead="${TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE}"]`))) {
+        return;
+      }
+
+      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
+        return;
+      }
+
+      cancel({
+        addPrefixTrigger: true,
+        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+
+    const {
+      current: element
+    } = ref;
+    element === null || element === void 0 ? void 0 : element.addEventListener('focusout', focusOut);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
+    };
+  }, [ref, cancel]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -165,7 +199,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   }, jsx("div", {
     css: typeAheadContent,
     tabIndex: 0,
-    className: TYPE_AHEAD_POPUP_CONTENT_CLASS
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
   }, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler

package/dist/es2019/plugins/type-ahead/utils.js

@@ -32,6 +32,8 @@ export const findTypeAheadDecorations = state => {
 export const isTypeAheadHandler = handler => {
   return handler && Object.values(TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };
+/** Is a typeahead plugin open? */
+
 export const isTypeAheadOpen = editorState => {
   var _typeAheadPluginKey$g, _typeAheadPluginKey$g2;
 
@@ -101,7 +103,7 @@ export const moveSelectedIndex = ({
     nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
   } else {
     stats.increaseArrowUp();
-    nextIndex = selectedIndex === 0 ? items.length - 1 : selectedIndex - 1;
+    nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
   }
 
   updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);

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

@@ -6,7 +6,7 @@ import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
 import { alignmentWrapper } from './styles';
-import { alignLeft, alignRight } from '../../keymaps';
+import { alignLeft } from '../../keymaps';
 const alignmentOptions = [{
   title: alignmentMessages.alignLeft,
   shortcut: alignLeft,
@@ -16,7 +16,6 @@ const alignmentOptions = [{
   value: 'center'
 }, {
   title: alignmentMessages.alignRight,
-  shortcut: alignRight,
   value: 'end'
 }];
 

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -25,6 +25,10 @@ const chromelessEditor = css`
     white-space: pre-wrap;
     padding: 0;
     margin: 0;
+
+    & > :last-child {
+      padding-bottom: 0.5em;
+    }
   }
 `;
 const ContentArea = createEditorContentStyle();

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -50,7 +50,7 @@ const StickyToolbar = props => {
   }, [setTop, props.externalToolbarRef]);
   return jsx("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
-          top: ${top};
+          top: ${top}px;
         `],
     "data-testid": "ak-editor-main-toolbar",
     className: 'show-keyline'

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -9,6 +9,7 @@ import Toolbar from '../../Toolbar';
 import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import messages from './messages';
+import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags5, _props$featureFlags6;
 
@@ -69,7 +70,9 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   }) => {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
 
-    return jsx("div", {
+    return jsx(ToolbarArrowKeyNavigationProvider, {
+      editorView: props.editorView
+    }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"
     }, jsx("div", {
@@ -81,7 +84,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       "data-testid": 'avatar-group-outside-plugin',
       role: "region",
       "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
-    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar)));
   });
 });
 export const FullPageToolbar = injectIntl(EditorToolbar);

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

@@ -15,6 +15,9 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plu
 const colorPickerButtonWrapper = css`
   position: relative;
 `; // Control the size of color picker buttons and preview
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 const colorPickerWrapper = css`
   border-radius: ${borderRadius()}px;
@@ -22,6 +25,7 @@ const colorPickerWrapper = css`
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
   padding: 8px 0px;
 `;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const ColorPickerButton = props => {
   var _props$size, _props$size2;

package/dist/es2019/ui/ConfigPanel/Fields/CustomSelect.js

@@ -117,13 +117,11 @@ function CustomSelect({
       // for isDirty
 
       onFieldChange(name, true);
-    } // @see DST-2386 & ED-12503
-    ,
-    enableAnimation: false // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+    } // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
     ,
     isMulti: isMultiple || false,
     isClearable: true,
-    isValidNewOption: value => isCreatable && value,
+    isValidNewOption: value => !!(isCreatable && value),
     validationState: error ? 'error' : 'default',
     defaultOptions: defaultOptions,
     formatCreateLabel: value => formatCreateLabel(value),

package/dist/es2019/ui/ConfigPanel/Fields/Select.js

@@ -31,9 +31,7 @@ export default function SelectField({
     onChange: value => {
       fieldProps.onChange(value);
       onFieldChange(name, true);
-    } // @see DST-2386 & ED-12503
-    ,
-    enableAnimation: false // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+    } // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
     ,
     isMulti: field.isMultiple || false,
     options: field.items || [],

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

@@ -1,2 +1,17 @@
-import { Dropdown } from '@atlaskit/editor-common/ui-menu';
+import _extends from "@babel/runtime/helpers/extends";
+import { Dropdown as DropdownComponent } from '@atlaskit/editor-common/ui-menu';
+import React, { useContext } from 'react';
+import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
+const Dropdown = /*#__PURE__*/React.memo(({ ...props
+}) => {
+  const keydownHandlerContext = useContext(KeyDownHandlerContext);
+  return (
+    /*#__PURE__*/
+    //This context is to handle the tab, Arrow Right/Left key events for dropdown.
+    //Default context has the void callbacks for above key events
+    React.createElement(DropdownComponent, _extends({
+      keyDownHandlerContext: keydownHandlerContext
+    }, props))
+  );
+});
 export default Dropdown;