@atlaskit/editor-core 151.2.1 → 153.0.0

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

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _iconMap = require("../../plugins/alignment/ui/ToolbarAlignment/icon-map");
 
@@ -91,6 +91,6 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
   return Alignment;
 }(_react.PureComponent);
 
-var _default = (0, _reactIntl.injectIntl)(Alignment);
+var _default = (0, _reactIntlNext.injectIntl)(Alignment);
 
 exports.default = _default;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.alignmentMessages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var alignmentMessages = (0, _reactIntl.defineMessages)({
+var alignmentMessages = (0, _reactIntlNext.defineMessages)({
   alignLeft: {
     id: 'fabric.editor.alignLeft',
     defaultMessage: 'Align left',

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

@@ -63,7 +63,7 @@ var _grid = require("../../../plugins/grid");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("../../../messages"));
 
@@ -227,5 +227,5 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 (0, _defineProperty2.default)(Editor, "displayName", 'CommentEditorAppearance');
-var CommentEditorWithIntl = (0, _reactIntl.injectIntl)(Editor);
+var CommentEditorWithIntl = (0, _reactIntlNext.injectIntl)(Editor);
 exports.CommentEditorWithIntl = CommentEditorWithIntl;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MainToolbarCustomComponentsSlot = exports.MainToolbar = exports.MainToolbarWrapper = exports.TableControlsPadding = void 0;
+exports.TableControlsPadding = exports.MainToolbarWrapper = exports.MainToolbarCustomComponentsSlot = exports.MainToolbar = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

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

@@ -2,52 +2,103 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPageToolbar = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _ui = _interopRequireDefault(require("../../../plugins/collab-edit/ui"));
 
+var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("../../../plugins/find-replace/FindReplaceToolbarButtonWithState"));
+
+var _BeforePrimaryToolbarWrapper = require("../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper");
+
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 
 var _MainToolbar = require("./MainToolbar");
 
 var _context = require("../../ContextPanel/context");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var FullPageToolbar = /*#__PURE__*/_react.default.memo(function (props) {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      shouldSplitToolbar = _useState2[0],
+      setShouldSplitToolbar = _useState2[1];
+
+  var nonCustomToolbar = /*#__PURE__*/_react.default.createElement(_MainToolbar.NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    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.default.createElement(_MainToolbar.CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/_react.default.createElement(_BeforePrimaryToolbarWrapper.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.default.createElement(_ui.default, {
+    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.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+    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);
+
+  (0, _react.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 <= _MainToolbar.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', updateOnResize);
+      updateOnResize();
+      return function () {
+        return window.removeEventListener('resize', updateOnResize);
+      };
+    }
+  });
   return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref) {
-    var _props$featureFlags;
+    var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
     return /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbar, {
       "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0
-    }, props.beforeIcon && /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
-      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.default.createElement(_MainToolbar.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.default.createElement(_ui.default, {
-      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.default.createElement(_MainToolbar.MainToolbarFirstChild, {
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/_react.default.createElement(_MainToolbar.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/cjs/ui/Appearance/FullPage/MainToolbar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SecondaryToolbar = exports.MainToolbarCustomComponentsSlot = exports.MainToolbarIconBefore = exports.MainToolbar = void 0;
+exports.SecondaryToolbar = exports.NonCustomToolbarWrapper = exports.MainToolbarSecondChild = exports.MainToolbarIconBefore = exports.MainToolbarFirstChild = exports.MainToolbar = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.CustomToolbarWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,13 +17,17 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
+var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
+exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT;
 var toolbarLineHeight = 56;
 
-var MainToolbar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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) {
+var MainToolbar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ").concat(_colors.N30) : 'none';
-}, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
+}, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
+  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
+}, _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
 
 exports.MainToolbar = MainToolbar;
 MainToolbar.displayName = 'MainToolbar';
@@ -33,12 +37,31 @@ var MainToolbarIconBefore = _styledComponents.default.div(_templateObject2 || (_
 exports.MainToolbarIconBefore = MainToolbarIconBefore;
 MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
 
-var MainToolbarCustomComponentsSlot = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorMobileMaxWidth);
+var MainToolbarFirstChild = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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      ");
+}, _editorSharedStyles.akEditorMobileMaxWidth);
 
-exports.MainToolbarCustomComponentsSlot = MainToolbarCustomComponentsSlot;
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+exports.MainToolbarFirstChild = MainToolbarFirstChild;
+MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
 
-var SecondaryToolbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var MainToolbarSecondChild = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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      ");
+});
+
+exports.MainToolbarSecondChild = MainToolbarSecondChild;
+MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
+
+var SecondaryToolbar = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])));
 
 exports.SecondaryToolbar = SecondaryToolbar;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+SecondaryToolbar.displayName = 'SecondaryToolbar';
+
+var NonCustomToolbarWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+
+exports.NonCustomToolbarWrapper = NonCustomToolbarWrapper;
+NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
+
+var CustomToolbarWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n"])));
+
+exports.CustomToolbarWrapper = CustomToolbarWrapper;
+CustomToolbarWrapper.displayName = 'CustomToolbar';

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditorContentGutter = exports.EditorContentArea = exports.SidebarArea = exports.ContentArea = exports.ScrollContainer = exports.FullPageEditorWrapper = void 0;
+exports.SidebarArea = exports.ScrollContainer = exports.FullPageEditorWrapper = exports.EditorContentGutter = exports.EditorContentArea = exports.ContentArea = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

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

@@ -25,8 +25,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
-
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -43,15 +41,6 @@ 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; } }
 
-// IMO these should live inside @atlaskit/theme
-var messages = (0, _reactIntl.defineMessages)({
-  selected: {
-    id: 'fabric.editor.selected',
-    defaultMessage: 'Selected',
-    description: 'If the item is selected or not.'
-  }
-});
-
 var Color = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Color, _PureComponent);
 
@@ -85,19 +74,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 ? _colors.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 ? _colors.N0 : _this$props2$checkMar;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: label
       }, /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
-        "aria-label": ariaLabelText,
+        "aria-label": label,
+        role: "radio",
+        "aria-checked": isSelected,
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         tabIndex: tabIndex,
@@ -105,7 +95,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         style: {
           backgroundColor: value || 'transparent',
           border: "1px solid ".concat(borderColor)
-        }
+        },
+        autoFocus: autoFocus
       }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
         primaryColor: checkMarkColor,
         label: ""
@@ -115,6 +106,5 @@ var Color = /*#__PURE__*/function (_PureComponent) {
   return Color;
 }(_react.PureComponent);
 
-var _default = (0, _reactIntl.injectIntl)(Color);
-
+var _default = Color;
 exports.default = _default;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var _default = (0, _reactIntl.defineMessages)({
+var _default = (0, _reactIntlNext.defineMessages)({
   white: {
     id: 'fabric.theme.white',
     defaultMessage: 'White',

package/dist/cjs/ui/ColorPalette/Palettes/statusColorPalette.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.darkModeStatusColorPalette = exports.lightModeStatusColorPalette = void 0;
+exports.lightModeStatusColorPalette = exports.darkModeStatusColorPalette = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 

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

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getContrastColor = getContrastColor;
 exports.default = void 0;
+exports.getContrastColor = getContrastColor;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -16,7 +16,7 @@ var _Color = _interopRequireDefault(require("./Color"));
 
 var _styles = require("./styles");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -40,6 +40,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.default.useMemo(function () {
@@ -52,11 +53,12 @@ var ColorPalette = function ColorPalette(props) {
     }, []);
   }, [palette, cols]);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
     return /*#__PURE__*/_react.default.createElement(_styles.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,
@@ -68,12 +70,13 @@ var ColorPalette = function ColorPalette(props) {
         label: message ? formatMessage(message) : label,
         onClick: onClick,
         isSelected: value === selectedColor,
-        checkMarkColor: getContrastColor(value, [_colors.N0, _colors.N500])
+        checkMarkColor: getContrastColor(value, [_colors.N0, _colors.N500]),
+        autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
       });
     }));
   }));
 };
 
-var _default = (0, _reactIntl.injectIntl)(ColorPalette);
+var _default = (0, _reactIntlNext.injectIntl)(ColorPalette);
 
 exports.default = _default;

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

@@ -41,7 +41,7 @@ var _templateObject, _templateObject2;
 var ColorPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
 
-var ColorPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 4px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+var ColorPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;