@atlaskit/editor-core 180.0.0 → 181.0.0

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

@@ -10,7 +10,21 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-import * as colors from '@atlaskit/theme/colors';
+import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+const querySpan = css({
+  outline: 'none',
+  '& input': {
+    width: '5px',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    margin: 0,
+    // ED-17022 Fixes firefox caret position
+    fontSize: '1em',
+    height: blockNodesVerticalMargin,
+    caretColor: "var(--ds-text-accent-blue, #0052CC)"
+  }
+});
 const isNavigationKey = event => {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
@@ -27,10 +41,6 @@ const isUndoRedoShortcut = event => {
   }
   return false;
 };
-const isSelectAllShortcut = event => {
-  const key = keyNameNormalized(event);
-  return (event.ctrlKey || event.metaKey) && key === 'a';
-};
 const getAriaLabel = (triggerPrefix, intl) => {
   switch (triggerPrefix) {
     case '@':
@@ -57,20 +67,25 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   editorView,
   items
 }) => {
-  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);
+  const ref = useRef(document.createElement('span'));
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState(null);
+  const cleanedInputContent = useCallback(() => {
+    var _ref$current;
+    const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  const onKeyUp = useCallback(event => {
+    const text = cleanedInputContent();
     onQueryChange(text);
-  }, [onQueryChange]);
+  }, [onQueryChange, cleanedInputContent]);
   const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
+    var _ref$current2;
     const key = keyNameNormalized(event);
-    const text = ref.current.value;
+    const sel = document.getSelection();
+    const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
+    const text = cleanedInputContent();
     let stopDefault = false;
     const {
       selectedIndex
@@ -102,7 +117,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         stopDefault = true;
         break;
       case 'Backspace':
-        if (text.length === 0 || ref.current.selectionStart === 0) {
+        if (raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -141,66 +156,24 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
         break;
     }
-    if (isSelectAllShortcut(event)) {
-      cancel({
-        forceFocusOnEditor: true,
-        addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
-      });
-      return 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 (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
     }
     if (isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   const onClick = useCallback(event => {
-    var _ref$current;
+    var _inputRef$current;
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$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: `${`var(--ds-link, ${colors.B400})`}`
-    }
-  });
   useLayoutEffect(() => {
     if (!ref.current) {
       return;
@@ -214,18 +187,18 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const keyDown = event => {
       const key = keyNameNormalized(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current2, _ref$current3;
-        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);
+        var _ref$current3;
+        const q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        const sel = document.getSelection();
+        const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        const isMovingLeft = sel && 'ArrowLeft' === key && (sel.anchorOffset === 0 || event.metaKey);
         if (!isMovingRight && !isMovingLeft) {
           return;
         }
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
-          text: ref.current.value,
+          text: cleanedInputContent(),
           setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
         event.preventDefault();
@@ -258,8 +231,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       }
       cancel({
         addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: cleanedInputContent(),
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -277,7 +250,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       const {
         target
       } = e;
-      if (e.isComposing || !(target instanceof HTMLInputElement)) {
+      if (e.isComposing || !(target instanceof HTMLElement)) {
         return;
       }
       if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
@@ -286,6 +259,23 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         close();
         return;
       }
+      if (e.data != null && inputRef.current === null) {
+        setQuery('');
+
+        // 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;
     if (browser.safari) {
@@ -297,7 +287,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         const {
           target
         } = e;
-        if (e.isComposing || !(target instanceof HTMLInputElement)) {
+        if (e.isComposing || !(target instanceof HTMLElement)) {
           return;
         }
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {
@@ -322,12 +312,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
-      ref.current.value = hasReopenQuery ? reopenQuery : '';
-      sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
+      setQuery(hasReopenQuery ? reopenQuery : null);
       requestAnimationFrame(() => {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -355,20 +344,10 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
    */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    style: {
-      position: 'relative'
-    }
-  }, jsx("span", {
-    ref: sizeSpanRef,
-    "aria-hidden": true,
-    style: {
-      marginLeft: '1px',
-      visibility: 'hidden'
-    }
-  }), jsx("input", {
-    css: queryStyle,
+    css: querySpan,
+    contentEditable: true,
     ref: ref,
-    onChange: onChange,
+    onKeyUp: onKeyUp,
     onClick: onClick,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -376,9 +355,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
-    value: query
-  })), jsx("span", {
+    "data-query-prefix": triggerQueryPrefix
+  }, query === null ? jsx("input", {
+    ref: inputRef,
+    type: "text"
+  }) : query), jsx("span", {
     id: assistiveHintID,
     style: {
       display: 'none'

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

@@ -1,31 +1,8 @@
-import { TextSelection } from 'prosemirror-state';
-import { DecorationSet } from 'prosemirror-view';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
 import { typeAheadListMessages } from './messages';
-export const findTypeAheadDecorations = state => {
-  const {
-    selection
-  } = state;
-  const {
-    decorationSet
-  } = typeAheadPluginKey.getState(state);
-  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  const {
-    $cursor: {
-      pos
-    }
-  } = selection;
-  const decoration = decorationSet.find(pos, pos, spec => spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration);
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return decoration[0];
-};
 export const isTypeAheadHandler = handler => {
   return handler && Object.values(TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };

package/dist/es2019/test-utils.js

@@ -1,11 +1,10 @@
 import { TextSelection } from 'prosemirror-state';
 import { sortByOrder } from './create-editor/sort-by-order';
-import { Preset } from './labs/next/presets/preset';
 import { createSchema } from './create-editor/create-schema';
 import basePlugin from './plugins/base';
 import { analyticsPluginKey } from './plugins/analytics/plugin-key';
 export { createTypeAheadTools } from './plugins/type-ahead/api';
-export { Preset } from './labs/next/presets/preset';
+import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 export function getFireAnalytics(editorView) {
   var _analyticsPluginKey$g;
   return analyticsPluginKey === null || analyticsPluginKey === void 0 ? void 0 : (_analyticsPluginKey$g = analyticsPluginKey.getState(editorView.state)) === null || _analyticsPluginKey$g === void 0 ? void 0 : _analyticsPluginKey$g.fireAnalytics;
@@ -50,12 +49,10 @@ function lightProcessPluginsList(editorPlugins) {
     onEditorViewStateUpdatedCallbacks: []
   });
 }
-export const createPMSchemaAndPlugins = (preset = new Preset()) => pluginFactoryParams => {
+export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()) => pluginFactoryParams => {
   let editorPlugins = [];
-  if (!preset.has(basePlugin)) {
-    preset.add(basePlugin);
-  }
-  editorPlugins = preset.getEditorPlugins();
+  const preset = inputPreset.has(basePlugin) ? inputPreset : inputPreset.add(basePlugin);
+  editorPlugins = preset.build();
   const editorConfig = lightProcessPluginsList(editorPlugins);
   const schema = createSchema(editorConfig);
   const plugins = editorConfig.plugins.sort(sortByOrder('plugins')).map(({

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

@@ -41,10 +41,18 @@ const stickyToolbarWrapperStyle = css`
 `;
 const StickyToolbar = props => {
   const [top, setTop] = useState(0);
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
   useEffect(() => {
     var _props$externalToolba, _props$externalToolba2;
-    setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
-  }, [setTop, props.externalToolbarRef]);
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
   return jsx("div", {
     css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
           top: ${top}px;
@@ -57,14 +65,40 @@ const FixedToolbar = props => jsx("div", {
   css: mainToolbarWrapperStyle,
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
+
+/**
+ * ED-15802: Scenarios when a sticky bar is used:
+ * 1. useStickyToolbar is true
+ * 2. useStickyToolbar is a DOM element
+ * 3. useStickyToolbar is an object and has offsetTop key;
+ */
+const getStickyParameters = configuration => {
+  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
+  const isHTMLElement = typeof configuration === 'object' && !('offsetTop' in configuration);
+  const isUsingStickyOffset = typeof configuration === 'object' && 'offsetTop' in configuration;
+  if (typeof configuration !== 'object') {
+    return {
+      externalToolbarRef: undefined,
+      offsetTop: undefined
+    };
+  }
+  if (isUsingStickyOffset) {
+    return {
+      offsetTop: configuration.offsetTop
+    };
+  }
+  if (isHTMLElement) {
+    return {
+      externalToolbarRef: configuration
+    };
+  }
+};
 export const MainToolbar = ({
   useStickyToolbar,
   children
 }) => {
-  if (!!useStickyToolbar) {
-    return jsx(StickyToolbar, {
-      externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
-    }, children);
+  if (useStickyToolbar) {
+    return jsx(StickyToolbar, getStickyParameters(useStickyToolbar), children);
   }
   return jsx(FixedToolbar, null, children);
 };

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

@@ -30,6 +30,7 @@ class ChromeCollapsed extends PureComponent {
   render() {
     const placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
     return jsx("input", {
+      "data-testid": "chrome-collapsed",
       css: inputStyle,
       ref: this.handleInputRef,
       onFocus: this.focusHandler,

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

@@ -2,6 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
+import EditorNext from '../../editor-next';
+import EditorMigrationComponent from '../../editor-next/editor-migration-component';
 import EditorWithActions from '../../labs/EditorWithActions';
 import ChromeCollapsed from '../ChromeCollapsed';
 export default class CollapsedEditor extends React.Component {
@@ -14,22 +16,16 @@ export default class CollapsedEditor extends React.Component {
       this.editorComponent = editorRef;
     });
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.isExpanded && nextProps.isExpanded) {
-      this.shouldTriggerExpandEvent = true;
-    }
-  }
   componentDidUpdate() {
-    if (this.shouldTriggerExpandEvent && this.editorComponent) {
-      this.shouldTriggerExpandEvent = false;
-      if (this.props.onExpand) {
-        this.props.onExpand();
-      }
+    if (this.props.isExpanded && this.editorComponent && (!this.previouslyExpanded || this.previouslyExpanded === undefined)) {
+      var _this$props$onExpand, _this$props;
+      (_this$props$onExpand = (_this$props = this.props).onExpand) === null || _this$props$onExpand === void 0 ? void 0 : _this$props$onExpand.call(_this$props);
     }
+    this.previouslyExpanded = this.props.isExpanded;
   }
   render() {
     const child = React.Children.only(this.props.children);
-    if (child.type !== Editor && child.type !== EditorWithActions) {
+    if (child.type !== Editor && child.type !== EditorWithActions && child.type !== EditorNext && child.type !== EditorMigrationComponent) {
       throw new Error('Expected child to be of type `Editor`');
     }
     if (!this.props.isExpanded) {

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

@@ -1,2 +1,3 @@
-import { ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, backgroundPaletteTooltipMessages, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+export { ColorPalette, backgroundPaletteTooltipMessages, textPaletteTooltipMessages };
 export default ColorPalette;

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

@@ -2,9 +2,12 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
-import { N60A } from '@atlaskit/theme/colors';
+import { DN50, N0, N60A } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import ColorPalette from '../ColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
@@ -19,9 +22,12 @@ const colorPickerButtonWrapper = css`
 // 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`
+const colorPickerWrapper = theme => css`
   border-radius: ${borderRadius()}px;
-  background-color: white;
+  background-color: ${themed({
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
+})(theme)};
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
   padding: 8px 0px;
 `;
@@ -31,8 +37,14 @@ const ColorPickerButton = props => {
   var _props$size, _props$size2;
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
+  const [isPopupPositioned, setIsPopupPositioned] = React.useState(false);
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = React.useState(false);
   const togglePopup = () => {
     setIsPopupOpen(!isPopupOpen);
+    if (!isPopupOpen) {
+      setIsOpenedByKeyboard(false);
+      setIsPopupPositioned(false);
+    }
   };
   React.useEffect(() => {
     if (props.setDisableParentScroll) {
@@ -40,9 +52,25 @@ const ColorPickerButton = props => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPopupOpen]);
+  const focusButton = () => {
+    var _buttonRef$current;
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
+  const handleEsc = React.useCallback(() => {
+    setIsOpenedByKeyboard(false);
+    setIsPopupPositioned(false);
+    setIsPopupOpen(false);
+    focusButton();
+  }, []);
+  const onPositionCalculated = React.useCallback(position => {
+    setIsPopupPositioned(true);
+    return position;
+  }, []);
   const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
   const onColorSelected = (color, label) => {
+    setIsOpenedByKeyboard(false);
     setIsPopupOpen(false);
+    setIsPopupPositioned(false);
     if (props.onChange) {
       if (props.createAnalyticsEvent) {
         // fire analytics
@@ -62,11 +90,17 @@ const ColorPickerButton = props => {
       const newPalette = props.colorPalette.find(colorPalette => colorPalette.value === color);
       newPalette && props.onChange(newPalette);
     }
+    focusButton();
   };
   const renderPopup = () => {
     if (!isPopupOpen || !buttonRef.current) {
       return;
     }
+    const selectedColor = props.currentColor || null;
+    const {
+      selectedRowIndex,
+      selectedColumnIndex
+    } = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols);
     return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
@@ -79,19 +113,35 @@ const ColorPickerButton = props => {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup"
+      ariaLabel: "Color picker popup",
+      onPositionCalculated: onPositionCalculated
     }, jsx("div", {
       css: colorPickerWrapper,
       "data-test-id": "color-picker-menu"
+    }, jsx(ArrowKeyNavigationProvider, {
+      type: ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      closeOnTab: true,
+      handleClose: () => setIsPopupOpen(false),
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: isPopupPositioned
     }, jsx(ColorPaletteWithListeners, {
-      palette: props.colorPalette,
       cols: props.cols,
-      selectedColor: props.currentColor || null,
+      selectedColor: selectedColor,
       onClick: onColorSelected,
-      handleClickOutside: togglePopup
-    })));
+      handleClickOutside: togglePopup,
+      handleEscapeKeydown: handleEsc,
+      paletteOptions: {
+        palette: props.colorPalette,
+        hexToPaletteColor: props.hexToPaletteColor,
+        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
+        paletteColorTooltipMessages: props.paletteColorTooltipMessages
+      }
+    }))));
   };
   const title = props.title || '';
+  const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
   const buttonStyle = css`
     padding: 6px;
     background-color: ${"var(--ds-background-neutral, transparent)"};
@@ -103,7 +153,7 @@ const ColorPickerButton = props => {
       content: '';
       border: 1px solid ${DEFAULT_BORDER_COLOR};
       border-radius: ${borderRadius()}px;
-      background-color: ${props.currentColor || 'transparent'};
+      background-color: ${currentColor || 'transparent'};
       width: ${((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14}px;
       height: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14}px;
       padding: 0;
@@ -119,6 +169,13 @@ const ColorPickerButton = props => {
     "aria-label": title,
     spacing: "compact",
     onClick: togglePopup,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     css: buttonStyle
   })), renderPopup());
 };

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

@@ -7,7 +7,7 @@ import Form from '@atlaskit/form';
 import { isTabGroup } from '@atlaskit/editor-common/extensions';
 import _isEqual from 'lodash/isEqual';
 import _mergeRecursive from 'lodash/merge';
-import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../plugins/analytics';
+import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 import LoadingState from './LoadingState';
 import Header from './Header';
 import ErrorMessage from './ErrorMessage';

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

@@ -44,6 +44,7 @@ function Expand({
 }) {
   const [expanded, setExpanded] = useState(isExpanded);
   return jsx("div", {
+    "data-testid": "expand-config-field",
     css: expandContainer
   }, jsx("div", {
     css: expandControl

package/dist/es2019/ui/ConfigPanel/utils.js

@@ -2,12 +2,6 @@ import { ValidationError } from './types';
 export const validate = (field, value) => {
   return validateRequired(field, value);
 };
-export const fromEntries = iterable => {
-  return [...iterable].reduce((obj, [key, val]) => {
-    obj[key] = val;
-    return obj;
-  }, {});
-};
 const isEmptyString = value => typeof value === 'string' && value === '';
 const isEmptyArray = value => Array.isArray(value) && value.length === 0;
 export const validateRequired = ({

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

@@ -78,7 +78,7 @@ const contentStyles = props => css`
   ${listsStyles}
   ${ruleStyles(props)}
   ${mediaStyles}
-  ${layoutStyles}
+  ${layoutStyles(props)}
   ${telepointerStyle}
   ${gapCursorStyles};
   ${tableStyles(props)}