@atlaskit/editor-core 151.3.0 → 153.0.1

package/dist/esm/plugins/type-ahead/index.js

@@ -113,9 +113,9 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         name: 'typeAhead',
         plugin: function plugin(_ref3) {
           var dispatch = _ref3.dispatch,
-              reactContext = _ref3.reactContext;
+              getIntl = _ref3.getIntl;
           return createPlugin({
-            reactContext: reactContext,
+            getIntl: getIntl,
             popupMountRef: popupMountRef,
             reactDispatch: dispatch,
             typeAheadHandlers: typeAhead,

package/dist/esm/plugins/type-ahead/pm-plugins/decorations.js

@@ -5,7 +5,7 @@ import { TextSelection } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { B400 } from '@atlaskit/theme/colors';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider } from 'react-intl-next';
 import { redo, undo } from 'prosemirror-history';
 import { TYPE_AHEAD_DECORATION_KEY, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';

package/dist/esm/plugins/type-ahead/pm-plugins/main.js

@@ -23,11 +23,11 @@ var hasTypeAheadStep = function hasTypeAheadStep(tr) {
 
 export function createPlugin(_ref) {
   var reactDispatch = _ref.reactDispatch,
-      reactContext = _ref.reactContext,
       popupMountRef = _ref.popupMountRef,
       createAnalyticsEvent = _ref.createAnalyticsEvent,
-      typeAheadHandlers = _ref.typeAheadHandlers;
-  var intl = reactContext().intl;
+      typeAheadHandlers = _ref.typeAheadHandlers,
+      getIntl = _ref.getIntl;
+  var intl = getIntl();
 
   var _factoryDecorations = factoryDecorations({
     intl: intl,

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
 import { themed } from '@atlaskit/theme/components';
 import { ThemeProvider } from 'styled-components';

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

@@ -4,7 +4,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';

package/dist/esm/plugins/undo-redo/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   undo: {
     id: 'fabric.editor.undo',

package/dist/esm/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -9,7 +9,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';

package/dist/esm/plugins/unsupported-content/index.js

@@ -8,22 +8,23 @@ var createPlugin = function createPlugin(_ref) {
   var portalProviderAPI = _ref.portalProviderAPI,
       eventDispatcher = _ref.eventDispatcher,
       dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var hasIntlContext = true;
   return new Plugin({
     key: pluginKey,
     props: {
       nodeViews: {
         confluenceUnsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         confluenceUnsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         unsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         unsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        })
+        }, undefined, hasIntlContext)
       }
     }
   });

package/dist/esm/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js

@@ -62,7 +62,9 @@ export var subscribeToToolbarAndPickerUpdates = function subscribeToToolbarAndPi
       var oldToolbarConfig = getOldConfigWithNodeInfo(lastUpdatedState);
       var isToolbarEqual = areToolbarsSame(toolbarConfig, oldToolbarConfig);
 
-      if (dateState !== oldDateState || statusState !== oldStatusState || !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
+      if (dateState !== oldDateState || statusState !== oldStatusState || // Sometimes the toolbar changes while a picker is open, we dont care about this
+      // EG A nested status or date node in a table
+      !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
         shouldCallback = true;
       }
     } else {

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

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { iconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';

package/dist/esm/ui/Alignment/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var alignmentMessages = defineMessages({
   alignLeft: {
     id: 'fabric.editor.alignLeft',

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -33,7 +33,7 @@ import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
 import { GRID_GUTTER } from '../../../plugins/grid';
 import classnames from 'classnames';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
 import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
 var CommentEditorMargin = 14;

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

@@ -1,38 +1,78 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
+import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
+import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarCustomComponentsSlot } from './MainToolbar';
+import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 export var FullPageToolbar = /*#__PURE__*/React.memo(function (props) {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldSplitToolbar = _useState2[0],
+      setShouldSplitToolbar = _useState2[1];
+
+  var nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    items: props.primaryToolbarComponents,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth
+  }));
+  var customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+    beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
+    inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    editorView: props.editorView,
+    containerElement: props.containerElement,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
+  useEffect(function () {
+    var _props$featureFlags6;
+
+    if ((_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.twoLineEditorToolbar) {
+      var updateOnResize = function updateOnResize() {
+        setShouldSplitToolbar(window.innerWidth <= MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', updateOnResize);
+      updateOnResize();
+      return function () {
+        return window.removeEventListener('resize', updateOnResize);
+      };
+    }
+  });
   return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
-    var _props$featureFlags;
+    var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
     return /*#__PURE__*/React.createElement(MainToolbar, {
       "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0
-    }, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
-      editorView: props.editorView,
-      editorActions: props.editorActions,
-      eventDispatcher: props.eventDispatcher,
-      providerFactory: props.providerFactory,
-      appearance: props.appearance,
-      items: props.primaryToolbarComponents,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsScrollableElement: props.popupsScrollableElement,
-      disabled: props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      containerElement: props.containerElement,
-      hasMinWidth: props.hasMinWidth
-    }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, {
-      "data-testid": 'avatar-group-outside-plugin'
-    }, (props === null || props === void 0 ? void 0 : (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
-      inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
-      isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected
-    }), props.customPrimaryToolbarComponents));
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
+    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+      "data-testid": 'avatar-group-outside-plugin',
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
 });

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,19 +1,32 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import styled from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
-export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
+export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
   return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';
-}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, akEditorMobileMaxWidth, toolbarLineHeight);
+}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
+}, akEditorMobileMaxWidth, toolbarLineHeight);
 MainToolbar.displayName = 'MainToolbar';
 export var MainToolbarIconBefore = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
 MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export var MainToolbarCustomComponentsSlot = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), akEditorMobileMaxWidth);
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
-export var SecondaryToolbar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+export var MainToolbarFirstChild = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        flex: 1 1 100%;\n        height: ".concat(toolbarLineHeight, "px;\n        justify-content: flex-end;\n        // ED-10241: We add fit-content to ensure that MainToolbar does not\n        // shrink more than the size of its contents. This will prevent the\n        // find/replace icon from being overlapped during a confluence\n        // publish operation\n        min-width: fit-content;\n      ");
+}, akEditorMobileMaxWidth);
+MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
+export var MainToolbarSecondChild = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    ", "\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        display: flex;\n        flex-grow: 1;\n        flex: 1 1 100%;\n        margin: auto;\n        height: ".concat(toolbarLineHeight, "px;\n        min-width: 0;\n      ");
+});
+MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
+export var SecondaryToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
+SecondaryToolbar.displayName = 'SecondaryToolbar';
+export var NonCustomToolbarWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
+export var CustomToolbarWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+CustomToolbarWrapper.displayName = 'CustomToolbar';

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

@@ -12,19 +12,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import { Button, ButtonWrapper } from './styles';
-import Tooltip from '@atlaskit/tooltip'; // IMO these should live inside @atlaskit/theme
-
-var messages = defineMessages({
-  selected: {
-    id: 'fabric.editor.selected',
-    defaultMessage: 'Selected',
-    description: 'If the item is selected or not.'
-  }
-});
+import Tooltip from '@atlaskit/tooltip';
 
 var Color = /*#__PURE__*/function (_PureComponent) {
   _inherits(Color, _PureComponent);
@@ -62,19 +53,20 @@ var Color = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
+          autoFocus = _this$props2.autoFocus,
           tabIndex = _this$props2.tabIndex,
           value = _this$props2.value,
           label = _this$props2.label,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
-          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar,
-          formatMessage = _this$props2.intl.formatMessage;
-      var ariaLabelText = isSelected ? "".concat(label, " ").concat(formatMessage(messages.selected)) : label;
+          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar;
       return /*#__PURE__*/React.createElement(Tooltip, {
         content: label
       }, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-        "aria-label": ariaLabelText,
+        "aria-label": label,
+        role: "radio",
+        "aria-checked": isSelected,
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         tabIndex: tabIndex,
@@ -82,7 +74,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         style: {
           backgroundColor: value || 'transparent',
           border: "1px solid ".concat(borderColor)
-        }
+        },
+        autoFocus: autoFocus
       }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
         primaryColor: checkMarkColor,
         label: ""
@@ -93,4 +86,4 @@ var Color = /*#__PURE__*/function (_PureComponent) {
   return Color;
 }(PureComponent);
 
-export default injectIntl(Color);
+export default Color;

package/dist/esm/ui/ColorPalette/Palettes/paletteMessages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   white: {
     id: 'fabric.theme.white',

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

@@ -2,7 +2,7 @@ import React from 'react';
 import chromatism from 'chromatism';
 import Color from './Color';
 import { ColorPaletteWrapper } from './styles';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
 
 /**
@@ -25,6 +25,7 @@ var ColorPalette = function ColorPalette(props) {
       onClick = props.onClick,
       selectedColor = props.selectedColor,
       className = props.className,
+      isShowingMoreColors = props.isShowingMoreColors,
       formatMessage = props.intl.formatMessage;
   var colorsPerRow = React.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
@@ -35,11 +36,12 @@ var ColorPalette = function ColorPalette(props) {
       return resultArray;
     }, []);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
     return /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
       className: className,
-      key: "row-first-color-".concat(row[0].value)
-    }, row.map(function (_ref) {
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref, colorIdx) {
       var value = _ref.value,
           label = _ref.label,
           border = _ref.border,
@@ -51,7 +53,8 @@ var ColorPalette = function ColorPalette(props) {
         label: message ? formatMessage(message) : label,
         onClick: onClick,
         isSelected: value === selectedColor,
-        checkMarkColor: getContrastColor(value, [N0, N500])
+        checkMarkColor: getContrastColor(value, [N0, N500]),
+        autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
       });
     }));
   }));

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

@@ -18,7 +18,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plu
 
 var ColorPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
-var ColorPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 4px;\n"])), borderRadius(), N60A, N60A);
+var ColorPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;