@atlaskit/editor-core 180.0.0 → 181.0.0

package/dist/cjs/plugins/status/ui/statusPicker.js

@@ -206,7 +206,10 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
         isNew = _this$props.isNew,
-        target = _this$props.target;
+        target = _this$props.target,
+        mountTo = _this$props.mountTo,
+        boundariesElement = _this$props.boundariesElement,
+        scrollableElement = _this$props.scrollableElement;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
@@ -216,7 +219,10 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
         handleClickOutside: this.handleClickOutside,
         handleEscapeKeydown: this.handleEscapeKeydown,
         zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
-        fitHeight: 40
+        fitHeight: 40,
+        mountTo: mountTo,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement
       }, (0, _react2.jsx)("div", {
         css: pickerContainer,
         onClick: this.handlePopupClick

package/dist/cjs/plugins/status/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setSelectionNearPos = exports.setNodeSelectionNearPos = exports.mayGetStatusAtSelection = exports.mayGetStatusAtPos = exports.isEmptyStatus = void 0;
+exports.setNodeSelectionNearPos = exports.mayGetStatusAtSelection = exports.isEmptyStatus = void 0;
 var _prosemirrorState = require("prosemirror-state");
 var mayGetStatusAtSelection = function mayGetStatusAtSelection(selection) {
   if (selection && selection instanceof _prosemirrorState.NodeSelection) {
@@ -15,24 +15,10 @@ var mayGetStatusAtSelection = function mayGetStatusAtSelection(selection) {
   return null;
 };
 exports.mayGetStatusAtSelection = mayGetStatusAtSelection;
-var mayGetStatusAtPos = function mayGetStatusAtPos(pos, doc) {
-  if (pos) {
-    var node = doc.nodeAt(pos);
-    if (node && node.type.name === 'status') {
-      return node.attrs;
-    }
-  }
-  return null;
-};
-exports.mayGetStatusAtPos = mayGetStatusAtPos;
 var isEmptyStatus = function isEmptyStatus(node) {
   return node && (node.text && node.text.trim().length === 0 || node.text === '');
 };
 exports.isEmptyStatus = isEmptyStatus;
-var setSelectionNearPos = function setSelectionNearPos(tr, pos) {
-  return tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(tr.mapping.map(pos))));
-};
-exports.setSelectionNearPos = setSelectionNearPos;
 var setNodeSelectionNearPos = function setNodeSelectionNearPos(tr, pos) {
   return tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, tr.mapping.map(pos)));
 };

package/dist/cjs/plugins/text-color/pm-plugins/main.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, "DEFAULT_COLOR", {
     return _color.DEFAULT_COLOR;
   }
 });
-exports.createInitialPluginState = createInitialPluginState;
 exports.createPlugin = createPlugin;
 exports.pluginKey = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -16,9 +16,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _ColorPalette = _interopRequireDefault(require("../../../../ui/ColorPalette"));
+var _ColorPalette = _interopRequireWildcard(require("../../../../ui/ColorPalette"));
 var _Dropdown = _interopRequireDefault(require("../../../../ui/Dropdown"));
 var _styles = require("../../../../ui/styles");
 var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButton"));
@@ -54,7 +57,8 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeColor", function (color) {
@@ -68,6 +72,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeTextColor", function (color, disabled) {
+      var _this$toolbarItemRef, _this$toolbarItemRef$;
       if (!disabled) {
         var _this$props$editorVie;
         var palette = _this.props.pluginState.palette;
@@ -87,6 +92,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         //To set the focus on the textcolor button when the menu is closed by 'Esc' only to meet aria guidelines
         (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
       }
+      (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
       return false;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
@@ -95,6 +101,15 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         logCloseEvent: true
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpenedByKeyboard: true
+        });
+        _this.toggleOpen();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (_ref) {
       var isOpen = _ref.isOpen,
         logCloseEvent = _ref.logCloseEvent,
@@ -102,14 +117,19 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         isOpen: isOpen
       });
+      if (!isOpen) {
+        _this.setState({
+          isOpenedByKeyboard: false
+        });
+      }
       if (logCloseEvent) {
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED, {
           noSelect: isOpen === false
         }));
       }
       if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _this$toolbarItemRef, _this$toolbarItemRef$;
-        (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+        var _this$toolbarItemRef2, _this$toolbarItemRef3;
+        (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (e) {
@@ -122,15 +142,15 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           isOpen: false
         });
         if (e instanceof KeyboardEvent && e.key === 'Escape') {
-          var _this$toolbarItemRef2, _this$toolbarItemRef3;
-          (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+          var _this$toolbarItemRef4, _this$toolbarItemRef5;
+          (_this$toolbarItemRef4 = _this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
         }
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideonEsc", function (e) {
-      var _this$toolbarItemRef4, _this$toolbarItemRef5;
+      var _this$toolbarItemRef6, _this$toolbarItemRef7;
       _this.hide(e);
-      (_this$toolbarItemRef4 = _this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
+      (_this$toolbarItemRef6 = _this.toolbarItemRef) === null || _this$toolbarItemRef6 === void 0 ? void 0 : (_this$toolbarItemRef7 = _this$toolbarItemRef6.current) === null || _this$toolbarItemRef7 === void 0 ? void 0 : _this$toolbarItemRef7.focus();
     });
     return _this;
   }
@@ -138,7 +158,9 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var isOpen = this.state.isOpen;
+      var _this$state = this.state,
+        isOpen = _this$state.isOpen,
+        isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
       var _this$props = this.props,
         popupsMountPoint = _this$props.popupsMountPoint,
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -160,6 +182,9 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         fitWidth = 242;
       }
       var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color),
+        selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+        selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
       return (0, _react2.jsx)("span", {
         css: _styles.wrapperStyle
       }, (0, _react2.jsx)(_Dropdown.default, {
@@ -173,6 +198,13 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         fitWidth: fitWidth,
         onOpenChange: this.onOpenChange,
         closeOnTab: true,
+        arrowKeyNavigationProviderOptions: {
+          type: _uiMenu.ArrowKeyNavigationType.COLOR,
+          selectedRowIndex: selectedRowIndex,
+          selectedColumnIndex: selectedColumnIndex,
+          isOpenedByKeyboard: isOpenedByKeyboard,
+          isPopupPositioned: true
+        },
         trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',
@@ -183,6 +215,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
+          onKeyDown: this.onKeyDown,
           ref: this.toolbarItemRef,
           iconBefore: (0, _react2.jsx)("div", {
             css: _styles.triggerWrapperStyles
@@ -199,13 +232,16 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("div", {
         "data-testid": "text-color-palette"
       }, (0, _react2.jsx)(_ColorPalette.default, {
-        palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color,
-        textPalette: true,
-        useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
+        paletteOptions: {
+          palette: palette,
+          hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
+          paletteColorTooltipMessages: _ColorPalette.textPaletteTooltipMessages,
+          showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+        }
       }))), (0, _react2.jsx)("span", {
         css: _styles.separatorStyles
       }));

package/dist/cjs/plugins/text-formatting/pm-plugins/smart-input-rule.js

@@ -23,10 +23,15 @@ function replaceTextUsingCaptureGroup(text) {
     var _match = (0, _slicedToArray2.default)(match, 4),
       prefix = _match[1],
       suffix = _match[3];
-    var replacement = (prefix || '') + text + (suffix || '');
+    var replacement = text + (suffix || '');
     var tr = state.tr,
       $to = state.selection.$to;
-    tr.replaceWith(start, end, state.schema.text(replacement, $to.marks()));
+    var startPos = start + (prefix || '').length;
+    var safePos = Math.min(
+    // I know it is almost impossible to have a negative value at this point.
+    // But, this is JS #trustnoone
+    Math.max(startPos, 0), end);
+    tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
     tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(tr.selection.to)));
     return tr;
   };
@@ -76,6 +81,7 @@ function createSingleQuotesRules() {
   // apostrophe
   createReplacementRule('’', /(\w+)(')(\w+)$/)];
 }
+
 /**
  * Get replacement rules related to product
  */

package/dist/cjs/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -28,6 +28,10 @@ var FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref
     isMenuOpen = _useMenuState2[0],
     toggleMenu = _useMenuState2[1],
     closeMenu = _useMenuState2[2];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
   var group = (0, _react.useMemo)(function () {
     return [{
       items: items
@@ -53,13 +57,29 @@ var FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref
     zIndex: _editorSharedStyles.akEditorMenuZIndex,
     fitHeight: 188,
     fitWidth: 136,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, /*#__PURE__*/_react.default.createElement(_moreButton.MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu,
+    onClick: function onClick() {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     "aria-expanded": isMenuOpen
   }));
 });

package/dist/cjs/plugins/text-formatting/ui/Toolbar/index.js

@@ -26,11 +26,13 @@ var _dropdownMenu = require("./dropdown-menu");
 var _toolbarMessages = require("./toolbar-messages");
 var _utils = require("../../utils");
 var _announcer = _interopRequireDefault(require("../../../../utils/announcer/announcer"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } }
 var ToolbarFormatting = function ToolbarFormatting(_ref) {
+  var _usePreviousState;
   var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -77,7 +79,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var activeItems = [].concat((0, _toConsumableArray2.default)(dropdownItems), (0, _toConsumableArray2.default)(singleItems)).filter(function (item) {
     return item.isActive;
   });
-  var prevActiveItems = (0, _utils.usePreviousObjectState)(activeItems);
+  var prevActiveItems = (_usePreviousState = (0, _hooks.usePreviousState)(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
   var fromSuperscriptToSubscript = (0, _utils.isArrayContainsContent)(activeItems, 'Subscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Superscript');
   var fromSubscriptToSuperscript = (0, _utils.isArrayContainsContent)(activeItems, 'Superscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Subscript');
   var comparedItems;

package/dist/cjs/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -18,11 +18,13 @@ var MoreButton = /*#__PURE__*/_react.default.memo(function (_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
   return (0, _react2.jsx)(_ToolbarButton.default, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore: (0, _react2.jsx)("div", {

package/dist/cjs/plugins/text-formatting/utils.js

@@ -3,35 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePreviousObjectState = exports.nodeLen = exports.markActive = exports.isIgnorable = exports.isBlockNode = exports.isArrayContainsContent = exports.hasCode = exports.domIndex = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
-var _react = require("react");
+exports.markActive = exports.isArrayContainsContent = exports.hasCode = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _clearFormatting = require("./commands/clear-formatting");
-var nodeLen = function nodeLen(node) {
-  return node.nodeType === 3 && node.nodeValue ? node.nodeValue.length : node.childNodes.length;
-};
-exports.nodeLen = nodeLen;
-var isIgnorable = function isIgnorable(dom) {
-  return dom.pmViewDesc && dom.pmViewDesc.size === 0;
-};
-exports.isIgnorable = isIgnorable;
-var isBlockNode = function isBlockNode(dom) {
-  var desc = dom.pmViewDesc;
-  return desc && desc.node && desc.node.isBlock;
-};
-exports.isBlockNode = isBlockNode;
-var domIndex = function domIndex(node) {
-  if (node) {
-    for (var index = 0;; index++) {
-      node = node.previousSibling;
-      if (!node) {
-        return index;
-      }
-    }
-  }
-  return;
-};
-exports.domIndex = domIndex;
 var hasCode = function hasCode(state, pos) {
   var code = state.schema.marks.code;
   var node = pos >= 0 && state.doc.nodeAt(pos);
@@ -126,14 +100,6 @@ var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
   return marksArePresent(state) || blockStylingIsPresent(state);
 };
 exports.checkFormattingIsPresent = checkFormattingIsPresent;
-var usePreviousObjectState = function usePreviousObjectState(value) {
-  var ref = (0, _react.useRef)([]);
-  (0, _react.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-};
-exports.usePreviousObjectState = usePreviousObjectState;
 var compareItemsArrays = function compareItemsArrays(items, prevItems) {
   return items && items.filter(function (item) {
     return !prevItems.includes(item);

package/dist/cjs/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -34,6 +34,10 @@ function ToolbarDropdown(props) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
     setIsDropdownOpen = _React$useState2[1];
+  var _React$useState3 = _react2.default.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isOpenedByKeyboard = _React$useState4[0],
+    setOpenedByKeyboard = _React$useState4[1];
   var labelLists = formatMessage(_messages.messages.lists);
   var onOpenChange = function onOpenChange(attrs) {
     setIsDropdownOpen(attrs.isDropdownOpen);
@@ -43,6 +47,13 @@ function ToolbarDropdown(props) {
       isDropdownOpen: !isDropdownOpen
     });
   };
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsDropdownOpen(!isDropdownOpen);
+      setOpenedByKeyboard(true);
+    }
+  };
   var items = useItems(props);
   var handleOnItemActivated = function handleOnItemActivated(_ref) {
     var item = _ref.item,
@@ -66,7 +77,13 @@ function ToolbarDropdown(props) {
     onOpenChange: onOpenChange,
     fitHeight: 188,
     fitWidth: 175,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, (0, _react.jsx)(_ToolbarButton.default, {
     spacing: isReducedSpacing ? 'none' : 'default',
     selected: bulletListActive || orderedListActive,
@@ -75,6 +92,7 @@ function ToolbarDropdown(props) {
     "aria-label": labelLists,
     disabled: disabled,
     onClick: handleTriggerClick,
+    onKeyDown: handleOnKeyDown,
     title: labelLists,
     iconBefore: (0, _react.jsx)("span", {
       css: _styles.wrapperStyle

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.NavigationDirection = exports.CloseSelectionOptions = void 0;
+exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.CloseSelectionOptions = void 0;
 var TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 exports.TYPE_AHEAD_DECORATION_KEY = TYPE_AHEAD_DECORATION_KEY;
 var TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
@@ -12,12 +12,6 @@ var TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = TYPE_AHEAD_POPUP_CONTENT_CLASS;
 var TYPE_AHEAD_DECORATION_ELEMENT_ID = 'typeahaed_decoration_element_id';
 exports.TYPE_AHEAD_DECORATION_ELEMENT_ID = TYPE_AHEAD_DECORATION_ELEMENT_ID;
-var NavigationDirection;
-exports.NavigationDirection = NavigationDirection;
-(function (NavigationDirection) {
-  NavigationDirection[NavigationDirection["LEFT"] = -1] = "LEFT";
-  NavigationDirection[NavigationDirection["RIGHT"] = 1] = "RIGHT";
-})(NavigationDirection || (exports.NavigationDirection = NavigationDirection = {}));
 var CloseSelectionOptions;
 exports.CloseSelectionOptions = CloseSelectionOptions;
 (function (CloseSelectionOptions) {

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

@@ -25,7 +25,7 @@ var _utils = require("./utils");
 var _useItemInsert3 = require("./ui/hooks/use-item-insert");
 var _updateSelectedIndex = require("./commands/update-selected-index");
 var _statsModifier = require("./stats-modifier");
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelectionInsideTypeAhead = exports.findDecorationElement = exports.factoryDecorations = void 0;
+exports.factoryDecorations = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
@@ -146,37 +146,4 @@ var factoryDecorations = function factoryDecorations(_ref) {
     removeDecorations: removeDecorations
   };
 };
-exports.factoryDecorations = factoryDecorations;
-var isSelectionInsideTypeAhead = function isSelectionInsideTypeAhead(_ref4) {
-  var decorationSet = _ref4.decorationSet,
-    selection = _ref4.selection;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty) {
-    return false;
-  }
-  var typeAheadDecorations = decorationSet.find(undefined, undefined, function (spec) {
-    return spec.isTypeAheadDecoration;
-  });
-  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
-    return false;
-  }
-  return typeAheadDecorations.some(function (dec) {
-    return dec.from === selection.from && dec.to === selection.to;
-  });
-};
-exports.isSelectionInsideTypeAhead = isSelectionInsideTypeAhead;
-var findDecorationElement = function findDecorationElement(_ref5) {
-  var selection = _ref5.selection,
-    decorationSet = _ref5.decorationSet;
-  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty || !(selection instanceof _prosemirrorState.TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  var pos = selection.$cursor.pos;
-  var decoration = decorationSet.find(pos, pos, function (spec) {
-    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
-  });
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return document.querySelector("#".concat(decoration[0].spec.key));
-};
-exports.findDecorationElement = findDecorationElement;
+exports.factoryDecorations = factoryDecorations;