@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/plugins/type-ahead/messages.js

@@ -8,14 +8,54 @@ exports.typeAheadListMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 
 var typeAheadListMessages = (0, _reactIntlNext.defineMessages)({
-  typeAheadResultLabel: {
-    id: 'fabric.editor.typeAheadResultLabel',
-    defaultMessage: 'TypeAhead results',
+  typeAheadPopupLabel: {
+    id: 'fabric.editor.typeAhead.popupLabel',
+    defaultMessage: 'Typeahead results',
     description: 'the result of a typeahead, similar to autocomplete results+'
   },
+  quickInsertPopupLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertPopupLabel',
+    defaultMessage: 'Shortcuts for inserts and formatting',
+    description: 'the result of a quick insert typeahead, similar to autocomplete results+'
+  },
+  quickInsertInputLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertInputLabel',
+    defaultMessage: 'Begin typing to search or filter shortcut options',
+    description: 'assisitve text for typeahed input field'
+  },
+  emojiPopupLabel: {
+    id: 'fabric.editor.typeahead.emojiPopupLabel',
+    defaultMessage: 'Emoji shortcuts',
+    description: 'the result of a emoji typeahead, similar to autocomplete results+'
+  },
+  emojiInputLabel: {
+    id: 'fabric.editor.typeahead.emojiInputLabel',
+    defaultMessage: 'Begin typing to search or filter emoji options',
+    description: 'assisitve text for typeahed input field'
+  },
+  mentionPopupLabel: {
+    id: 'fabric.editor.typeahead.mentionPopupLabel',
+    defaultMessage: 'Users you can tag',
+    description: 'the aria label of a mention typeahead popup'
+  },
+  mentionInputLabel: {
+    id: 'fabric.editor.typeahead.mentionInputLabel',
+    defaultMessage: 'Begin typing to search for users to tag',
+    description: 'assisitve text for typeahed input field'
+  },
+  metionListItemLabel: {
+    id: 'fabric.editor.typeahead.metionListItemLabel',
+    defaultMessage: 'User {name} @{shortName}',
+    description: 'assistive text for user mention items username and nickname'
+  },
+  emojiListItemLabel: {
+    id: 'fabric.editor.typeahead.emojiListItemLabel',
+    defaultMessage: 'Emoji {name} Text Shortcut {shortcut}',
+    description: 'assistive text for emoji name and shortcut'
+  },
   inputQueryAssistiveLabel: {
     id: 'fabric.editor.inputQueryAssistiveTxt',
-    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.',
     description: 'Assistive text to the user when using typeahead shortcut'
   },
   searchResultsLabel: {

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

@@ -35,8 +35,6 @@ var _utils = require("../utils");
 
 var _closeTypeAhead = require("../transforms/close-type-ahead");
 
-var _tokens = require("@atlaskit/tokens");
-
 var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
       popupMountRef = _ref.popupMountRef,
@@ -67,7 +65,6 @@ var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.setAttribute('id', decorationId);
       typeaheadComponent.setAttribute('role', 'search');
-      typeaheadComponent.setAttribute('aria-label', "On ".concat(triggerHandler.id));
       typeaheadComponent.dataset.typeAheadQuery = 'true';
       typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
       // we need that cuz the clickAreaHelper
@@ -77,7 +74,7 @@ var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.dataset.editorPopup = 'true';
       typeaheadComponent.dataset.typeAhead = _constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
-      typeaheadComponent.style.color = (0, _tokens.token)('color.text.accent.blue', _colors.B400);
+      typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(_colors.B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       var onUndoRedo = function onUndoRedo(inputType) {

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

@@ -33,8 +33,6 @@ var _messages = require("../messages");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _tokens = require("@atlaskit/tokens");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 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); }
@@ -69,6 +67,22 @@ var isSelectAllShortcut = function isSelectAllShortcut(event) {
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
 
+var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+  switch (triggerPrefix) {
+    case '@':
+      return _messages.typeAheadListMessages.mentionInputLabel;
+
+    case '/':
+      return _messages.typeAheadListMessages.quickInsertInputLabel;
+
+    case ':':
+      return _messages.typeAheadListMessages.emojiInputLabel;
+
+    default:
+      return _messages.typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+
 var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
   var triggerQueryPrefix = _ref.triggerQueryPrefix,
       cancel = _ref.cancel,
@@ -261,7 +275,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     background: 'transparent',
     border: 'none',
     '&&': {
-      color: "".concat((0, _tokens.token)('color.link', colors.B400))
+      color: "".concat("var(--ds-link, ".concat(colors.B400, ")"))
     }
   });
   (0, _react.useLayoutEffect)(function () {
@@ -465,7 +479,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(_messages.typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

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

@@ -70,7 +70,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       onItemClick = _ref2.onItemClick,
       intl = _ref2.intl,
       fitHeight = _ref2.fitHeight,
-      decorationElement = _ref2.decorationElement;
+      decorationElement = _ref2.decorationElement,
+      triggerHandler = _ref2.triggerHandler;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -253,6 +254,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         key = _ref4.key,
         style = _ref4.style,
         parent = _ref4.parent;
+    var currentItem = items[index];
     return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
       cache: cache,
@@ -266,21 +268,24 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       "data-testid": "list-item-height-observed-".concat(index)
     }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
       key: items[index].title,
-      item: items[index],
+      item: currentItem,
       itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick
+      onItemClick: actions.onItemClick,
+      ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
 
+  var popupAriaLabel = (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+
   if (!Array.isArray(items)) {
     return null;
   }
 
   var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return (0, _react2.jsx)(_menu.MenuGroup, {
-    "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
+    "aria-label": popupAriaLabel,
     "aria-relevant": "additions removals"
   }, (0, _react2.jsx)("div", {
     id: menuGroupId,

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

@@ -31,8 +31,6 @@ var _styles = require("../../../ui/styles");
 
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../messages");
@@ -49,19 +47,19 @@ var ICON_WIDTH = 40;
 exports.ICON_WIDTH = ICON_WIDTH;
 var ITEM_PADDING = 12;
 exports.ITEM_PADDING = ITEM_PADDING;
-var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, (0, _tokens.token)('color.border', 'rgba(223, 225, 229, 0.5)'), (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
+var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
 exports.itemIcon = itemIcon;
 var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n"])));
 
 var itemText = function itemText(theme) {
   return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  color: ", ";\n  .item-title {\n    line-height: 1.4;\n  }\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 3px;\n  }\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.text', _colors.N800),
-    dark: (0, _tokens.token)('color.text', _colors.DN600)
-  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+    light: "var(--ds-text, ".concat(_colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
+  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 };
 
 var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
-var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), (0, _tokens.token)('color.background.selected', _colors.N30), (0, _tokens.token)('color.border.focused', _colors.B100));
+var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 /**
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
  * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
@@ -70,14 +68,14 @@ var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateOb
 
 var selectionFrame = {
   '& > button:focus': {
-    boxShadow: "inset 0px 0px 0px 2px ".concat((0, _tokens.token)('color.border.focused', _colors.B100)),
+    boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
     outline: 'none',
     '&:active': {
       boxShadow: 'none'
     }
   }
 };
-var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.selected', _colors.N30));
+var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"));
 
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;
@@ -103,7 +101,8 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       itemsLength = _ref3.itemsLength,
       selectedIndex = _ref3.selectedIndex,
       onItemClick = _ref3.onItemClick,
-      itemIndex = _ref3.itemIndex;
+      itemIndex = _ref3.itemIndex,
+      ariaLabel = _ref3.ariaLabel;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -152,21 +151,23 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return (0, _react2.jsx)("div", {
       "aria-selected": isSelected,
-      "aria-label": title,
       role: "option",
+      "aria-label": ariaLabel,
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
       className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '') //CSS classes added for test cases purpose
       ,
       ref: customItemRef
+    }, (0, _react2.jsx)("div", {
+      "aria-hidden": true
     }, (0, _react2.jsx)(Comp, {
       onClick: insertSelectedItem,
       isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
       ,
       onHover: noop
-    }));
-  }, [customRenderItem, insertSelectedItem, isSelected, title, customItemRef, itemsLength]);
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
 
   if (customItem) {
     return customItem;
@@ -179,7 +180,7 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
-    "aria-label": item.title,
+    "aria-label": title,
     "aria-setsize": itemsLength,
     role: "option",
     ref: buttonItemRef

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

@@ -35,8 +35,6 @@ var _TypeAheadList = require("./TypeAheadList");
 
 var _TypeAheadListItem = require("./TypeAheadListItem");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 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); }
@@ -44,7 +42,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
-var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), (0, _tokens.token)('elevation.surface.overlay', _colors.N0), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A)), (0, _constants.gridSize)() / 2);
+var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_colors.N60A, ", 0 4px 8px -2px ").concat(_colors.N50A), ")"), (0, _constants.gridSize)() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
@@ -236,7 +234,8 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
     onItemClick: onItemInsert,
     fitHeight: fitHeight,
     editorView: editorView,
-    decorationElement: anchorElement
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
   })));
 });
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
+exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findTypeAheadDecorations = exports.findHandlerByTrigger = exports.findHandler = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
@@ -17,6 +17,8 @@ var _updateSelectedIndex = require("./commands/update-selected-index");
 
 var _statsModifier = require("./stats-modifier");
 
+var _messages = require("./messages");
+
 var findTypeAheadDecorations = function findTypeAheadDecorations(state) {
   var selection = state.selection;
 
@@ -144,4 +146,44 @@ var moveSelectedIndex = function moveSelectedIndex(_ref2) {
   };
 };
 
-exports.moveSelectedIndex = moveSelectedIndex;
+exports.moveSelectedIndex = moveSelectedIndex;
+
+var getTypeAheadListAriaLabels = function getTypeAheadListAriaLabels(trigger, intl, item) {
+  var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
+
+  switch (trigger) {
+    case '@':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.mentionPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.metionListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
+          shortName: (item === null || item === void 0 ? void 0 : (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
+        })
+      };
+
+    case '/':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.quickInsertPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : item.title) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
+        })
+      };
+
+    case ':':
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiPopupLabel),
+        listItemAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
+        })
+      };
+
+    default:
+      return {
+        popupAriaLabel: intl.formatMessage(_messages.typeAheadListMessages.typeAheadPopupLabel)
+      };
+  }
+};
+
+exports.getTypeAheadListAriaLabels = getTypeAheadListAriaLabels;

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

@@ -41,6 +41,8 @@ var _api = require("../../../type-ahead/api");
 
 var _commands = require("../../commands");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 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; }
@@ -117,7 +119,8 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
-        "aria-label": labelUndo,
+        "aria-label": (0, _keymaps.tooltip)(_keymaps.undo, labelUndo),
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.undo),
         title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelUndo,
           keymap: _keymaps.undo
@@ -139,7 +142,8 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
-        "aria-label": labelRedo
+        "aria-label": (0, _keymaps.tooltip)(_keymaps.redo, labelRedo),
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(_keymaps.redo)
       }), (0, _react2.jsx)("span", {
         css: _styles.separatorStyles
       }));

package/dist/cjs/plugins/unsupported-content/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var UnsupportedSharedCssClassName = {
@@ -24,5 +22,5 @@ var UnsupportedSharedCssClassName = {
 exports.UnsupportedSharedCssClassName = UnsupportedSharedCssClassName;
 var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-of-type(2)");
 var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
-var unsupportedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.blanket.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity));
+var unsupportedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background, _editorSharedStyles.SelectionStyle.Border]), _editorSharedStyles.akEditorSelectedNodeClassName, blockUnsupportedSelector, _editorSharedStyles.akEditorSelectedNodeClassName, inlineUnsupportedSelector, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));
 exports.unsupportedStyles = unsupportedStyles;

package/dist/cjs/ui/Addon/Dropdown/styles.js

@@ -15,9 +15,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var dropdown = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)));
+var dropdown = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), "var(--ds-surface-overlay, white)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"));
 exports.dropdown = dropdown;

package/dist/cjs/ui/Addon/DropdownItem/styles.js

@@ -13,9 +13,7 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var dropdownItem = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.text', _colors.N800), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20));
+var dropdownItem = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"));
 exports.dropdownItem = dropdownItem;

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

@@ -29,6 +29,8 @@ var _ToolbarButton = _interopRequireDefault(require("../../ToolbarButton"));
 
 var _keymaps = require("../../../keymaps");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 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; }
@@ -77,8 +79,9 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
           description: label,
           keymap: shortcut
         }),
-        "aria-label": label,
+        "aria-label": shortcut ? (0, _keymaps.tooltip)(shortcut, label) : label,
         "aria-pressed": isSelected,
+        "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(shortcut),
         onClick: this.onClick,
         iconBefore: content
       });

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

@@ -35,8 +35,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
@@ -79,7 +77,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border', _colors.N40), (0, _constants.borderRadius)());
+var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, "var(--ds-background-input, white)", "var(--ds-border, ".concat(_colors.N40, ")"), (0, _constants.borderRadius)());
 var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));

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

@@ -21,8 +21,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -33,8 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var TableControlsPadding = 20;
 exports.TableControlsPadding = TableControlsPadding;
-var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface', 'white'), TableControlsPadding);
-var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorGridLineZIndex + _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
+var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), "var(--ds-surface, white)", TableControlsPadding);
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), (0, _constants.gridSize)(), _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),

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

@@ -104,7 +104,8 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
 
     var contextPanelWidth = _ref.width;
     return (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {
-      editorView: props.editorView
+      editorView: props.editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
     }, (0, _react2.jsx)("div", {
       css: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

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

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -25,9 +23,9 @@ var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT;
 var toolbarLineHeight = 56; // box-shadow is overriden by the mainToolbar
 
-var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
+var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 var mainToolbarTwoLineStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
-var mainToolbar = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, (0, _tokens.token)('elevation.surface', 'white'), _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
+var mainToolbar = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorMenuZIndex, toolbarLineHeight, "var(--ds-surface, white)", _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
 
 var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];

package/dist/cjs/ui/ChromeCollapsed/styles.js

@@ -17,9 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border.input', _editorSharedStyles.akEditorSubtleAccent), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _tokens.token)('color.background.input.hovered', 'white'), (0, _tokens.token)('color.border.input', _colors.N50));
+var inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), "var(--ds-background-input, white)", "var(--ds-border-input, ".concat(_editorSharedStyles.akEditorSubtleAccent, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), "var(--ds-background-input-hovered, white)", "var(--ds-border-input, ".concat(_colors.N50, ")"));
 exports.inputStyle = inputStyle;

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

@@ -21,6 +21,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _ui = require("@atlaskit/editor-common/ui");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _editor = _interopRequireDefault(require("../../editor"));
@@ -88,10 +90,10 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!this.props.isExpanded) {
-        return /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
+        return /*#__PURE__*/_react.default.createElement(_ui.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
           onFocus: this.props.onFocus,
           text: this.props.placeholder
-        });
+        }));
       }
 
       return /*#__PURE__*/_react.default.cloneElement(child, {

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

@@ -114,7 +114,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup"
     }, (0, _react2.jsx)("div", {
-      css: colorPickerWrapper
+      css: colorPickerWrapper,
+      "data-test-id": "color-picker-menu"
     }, (0, _react2.jsx)(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,