@atlaskit/editor-core 175.0.5 → 176.0.0

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

@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InputQuery = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -33,14 +33,15 @@ var _messages = require("../messages");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _templateObject;
+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); }
 
 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 querySpan = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n"])));
-
+/** @jsx jsx */
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
@@ -63,6 +64,11 @@ var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
   return false;
 };
 
+var isSelectAllShortcut = function isSelectAllShortcut(event) {
+  var key = (0, _w3cKeyname.keyName)(event);
+  return (event.ctrlKey || event.metaKey) && key === 'a';
+};
+
 var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
   var triggerQueryPrefix = _ref.triggerQueryPrefix,
       cancel = _ref.cancel,
@@ -76,30 +82,34 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       onUndoRedo = _ref.onUndoRedo,
       editorView = _ref.editorView,
       items = _ref.items;
-  var ref = (0, _react.useRef)(document.createElement('span'));
-  var cleanedInputContent = (0, _react.useCallback)(function () {
-    var _ref$current;
+  var ref = (0, _react.useRef)(document.createElement('input'));
+  var sizeSpanRef = (0, _react.useRef)(document.createElement('span'));
 
-    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
-    return raw.replace(_utils.ZERO_WIDTH_SPACE, '');
-  }, []);
-  var onKeyUp = (0, _react.useCallback)(function (event) {
-    var text = cleanedInputContent();
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      redoBuffer = _useState2[0],
+      setRedoBuffer = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(reopenQuery),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      query = _useState4[0],
+      setQuery = _useState4[1];
+
+  var onChange = (0, _react.useCallback)(function (event) {
+    var text = event.currentTarget.value;
+    sizeSpanRef.current.textContent = text;
+    setQuery(text);
     onQueryChange(text);
-  }, [onQueryChange, cleanedInputContent]);
+  }, [onQueryChange]);
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isInFocus = _useState2[0],
-      setInFocus = _useState2[1];
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isInFocus = _useState6[0],
+      setInFocus = _useState6[1];
 
   var checkKeyEvent = (0, _react.useCallback)(function (event) {
-    var _ref$current2;
-
     var key = (0, _w3cKeyname.keyName)(event);
-    var sel = document.getSelection();
-    var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
-    var text = cleanedInputContent();
+    var text = ref.current.value;
     var stopDefault = false;
 
     var _getPluginState = (0, _utils2.getPluginState)(editorView.state),
@@ -123,6 +133,9 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         break;
 
       case 'Escape':
+      case 'PageUp':
+      case 'PageDown':
+      case 'Home':
         cancel({
           text: text,
           forceFocusOnEditor: true,
@@ -133,7 +146,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         break;
 
       case 'Backspace':
-        if (raw === _utils.ZERO_WIDTH_SPACE || raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+        if (text.length === 0 || ref.current.selectionStart === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -173,13 +186,49 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
           selectNextItem();
         }
 
+        break;
+
+      case 'ArrowUp':
+        if (selectedIndex === -1) {
+          selectPreviousItem();
+        }
+
         break;
     }
 
+    if (isSelectAllShortcut(event)) {
+      cancel({
+        forceFocusOnEditor: true,
+        addPrefixTrigger: true,
+        text: ref.current.value,
+        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+      return true;
+    }
+
     var undoRedoType = isUndoRedoShortcut(event);
+    var hasReopenQuery = reopenQuery && reopenQuery.length > 0;
 
-    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
-      stopDefault = true;
+    if (onUndoRedo && undoRedoType) {
+      if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
+        setRedoBuffer(function (buffer) {
+          return [ref.current.value].concat((0, _toConsumableArray2.default)(buffer));
+        });
+        var undoValue = text.substring(0, text.length - 1);
+        ref.current.value = undoValue;
+        sizeSpanRef.current.textContent = undoValue;
+        stopDefault = true;
+      } else if (undoRedoType === 'historyRedo' && redoBuffer.length > 0) {
+        var redoValue = redoBuffer[0];
+        ref.current.value = redoValue;
+        sizeSpanRef.current.textContent = redoValue;
+        setRedoBuffer(function (buffer) {
+          return buffer.slice(1);
+        });
+        stopDefault = true;
+      } else {
+        stopDefault = onUndoRedo(undoRedoType);
+      }
     }
 
     if (isNavigationKey(event) || stopDefault) {
@@ -187,16 +236,34 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, cleanedInputContent, editorView.state]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
   var onClick = (0, _react.useCallback)(function (event) {
-    var _ref$current3;
+    var _ref$current;
 
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     return false;
   }, [onQueryFocus]);
+  var queryStyle = (0, _react2.css)({
+    outline: 'none',
+    position: 'absolute',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    letterSpacing: 'inherit',
+    padding: 0,
+    height: '100%',
+    width: '100%',
+    top: 0,
+    left: 0,
+    background: 'transparent',
+    border: 'none',
+    '&&': {
+      color: "".concat((0, _tokens.token)('color.link', colors.B400))
+    }
+  });
   (0, _react.useLayoutEffect)(function () {
     if (!ref.current) {
       return;
@@ -212,12 +279,12 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       var key = (0, _w3cKeyname.keyName)(event);
 
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current4;
+        var _ref$current2, _ref$current3;
 
-        var q = ((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.textContent) || '';
-        var sel = document.getSelection();
-        var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
-        var isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;
+        var q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
+        var anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
+        var isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
+        var isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
 
         if (!isMovingRight && !isMovingLeft) {
           return;
@@ -226,7 +293,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
-          text: cleanedInputContent(),
+          text: ref.current.value,
           setSelectionAt: isMovingRight ? _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED : _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
         event.preventDefault();
@@ -260,8 +327,8 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
 
       cancel({
         addPrefixTrigger: true,
-        text: cleanedInputContent(),
-        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED,
+        text: ref.current.value,
+        setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -281,33 +348,16 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       setInFocus(false);
       var target = e.target;
 
-      if (e.isComposing || !(target instanceof HTMLElement)) {
+      if (e.isComposing || !(target instanceof HTMLInputElement)) {
         return;
       }
 
-      if (e.inputType === 'historyUndo' && (((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0 || target.textContent === _utils.ZERO_WIDTH_SPACE)) {
+      if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
         e.preventDefault();
         e.stopPropagation();
         close();
         return;
       }
-
-      if (e.data != null && target.textContent === _utils.ZERO_WIDTH_SPACE) {
-        element.textContent = ''; // We need to change the content on Safari
-        // and set the cursor at the right place
-
-        if (_utils.browser.safari) {
-          e.preventDefault();
-          var dataElement = document.createTextNode(e.data);
-          element.appendChild(dataElement);
-          var sel = window.getSelection();
-          var range = document.createRange();
-          range.setStart(dataElement, dataElement.length);
-          range.collapse(true);
-          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
-          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
-        }
-      }
     };
 
     var onInput = null;
@@ -321,7 +371,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
 
         var target = e.target;
 
-        if (e.isComposing || !(target instanceof HTMLElement)) {
+        if (e.isComposing || !(target instanceof HTMLInputElement)) {
           return;
         }
 
@@ -350,12 +400,13 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
     if (ref.current && forceFocus) {
-      ref.current.textContent = hasReopenQuery ? reopenQuery : _utils.ZERO_WIDTH_SPACE;
+      ref.current.value = hasReopenQuery ? reopenQuery : '';
+      sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
       requestAnimationFrame(function () {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -386,10 +437,20 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
    */
 
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
-    css: querySpan,
-    contentEditable: true,
+    style: {
+      position: 'relative'
+    }
+  }, (0, _react2.jsx)("span", {
+    ref: sizeSpanRef,
+    "aria-hidden": true,
+    style: {
+      marginLeft: '1px',
+      visibility: 'hidden'
+    }
+  }), (0, _react2.jsx)("input", {
+    css: queryStyle,
     ref: ref,
-    onKeyUp: onKeyUp,
+    onChange: onChange,
     onClick: onClick,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -397,8 +458,9 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-  }), (0, _react2.jsx)("span", {
+    "data-query-prefix": triggerQueryPrefix,
+    value: query
+  })), (0, _react2.jsx)("span", {
     id: assistiveHintID,
     style: {
       display: 'none'

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

@@ -175,7 +175,16 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
       defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    }));
+    })); // When query is updated, sometimes the scroll position of the menu is not at the top
+    // Scrolling back to top for consistency
+
+    requestAnimationFrame(function () {
+      var _listContainerRef$cur;
+
+      if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
+        listContainerRef.current.firstChild.scrollTo(0, 0);
+      }
+    });
   }, [items]);
   (0, _react.useLayoutEffect)(function () {
     var height = Math.min(items.reduce(function (prevValue, currentValue, index) {
@@ -200,23 +209,12 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       if (isNavigationKey(event)) {
         switch (event.key) {
           case 'ArrowDown':
-            if (selectedIndex === items.length - 1) {
-              event.stopPropagation();
-            } else {
-              selectNextItem();
-            }
-
+            selectNextItem();
             event.preventDefault();
             break;
 
           case 'ArrowUp':
-            if (selectedIndex === 0) {
-              //To set focus on target element when up arrow is pressed on first option of list
-              focusTargetElement();
-            } else {
-              selectPreviousItem();
-            }
-
+            selectPreviousItem();
             event.preventDefault();
             break;
 

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

@@ -33,6 +33,10 @@ var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
 var _tokens = require("@atlaskit/tokens");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../messages");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
@@ -47,13 +51,13 @@ 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);
 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  line-height: 1.4;\n"])));
+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-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _components.themed)({
+  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)(11.67), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), (0, _tokens.token)('color.text.subtlest', _colors.N200));
 };
 
 var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
@@ -82,12 +86,24 @@ var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
 
 var noop = function noop() {};
 
-var TypeAheadListItem = function TypeAheadListItem(_ref2) {
-  var item = _ref2.item,
-      itemsLength = _ref2.itemsLength,
-      selectedIndex = _ref2.selectedIndex,
-      onItemClick = _ref2.onItemClick,
-      itemIndex = _ref2.itemIndex;
+var AssistiveText = function AssistiveText(_ref2) {
+  var title = _ref2.title,
+      description = _ref2.description,
+      shortcut = _ref2.shortcut;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var descriptionText = description ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
+  var shortcutText = shortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
+  return (0, _react2.jsx)("span", {
+    className: "assistive"
+  }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
+};
+
+var TypeAheadListItem = function TypeAheadListItem(_ref3) {
+  var item = _ref3.item,
+      itemsLength = _ref3.itemsLength,
+      selectedIndex = _ref3.selectedIndex,
+      onItemClick = _ref3.onItemClick,
+      itemIndex = _ref3.itemIndex;
 
   /**
    * To select and highlight the first Item when no item is selected
@@ -166,19 +182,26 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     "aria-label": item.title,
     "aria-setsize": itemsLength,
     role: "option",
-    ref: buttonItemRef,
-    description: item.description
+    ref: buttonItemRef
   }, (0, _react2.jsx)("div", {
-    css: itemBody
+    "aria-hidden": true
   }, (0, _react2.jsx)("div", {
     css: itemText
+  }, (0, _react2.jsx)("div", {
+    css: itemBody
   }, (0, _react2.jsx)("div", {
     className: "item-title"
-  }, item.title)), (0, _react2.jsx)("div", {
+  }, item.title), (0, _react2.jsx)("div", {
     css: itemAfter
   }, item.keyshortcut && (0, _react2.jsx)("div", {
     css: _styles.shortcutStyle
-  }, item.keyshortcut)))));
+  }, item.keyshortcut))), (0, _react2.jsx)("div", {
+    className: "item-description"
+  }, item.description))), (0, _react2.jsx)(AssistiveText, {
+    title: item.title,
+    description: item.description,
+    shortcut: item.keyshortcut
+  })));
 };
 
 exports.TypeAheadListItem = TypeAheadListItem;

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

@@ -27,7 +27,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 
 var _constants2 = require("../constants");
 
@@ -54,8 +54,7 @@ var Highlight = function Highlight(_ref) {
     return null;
   }
 
-  var highlight = triggerHandler.getHighlight(state);
-  return highlight;
+  return triggerHandler.getHighlight(state);
 };
 
 var OFFSET = [0, 8];
@@ -71,7 +70,9 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
       selectedIndex = props.selectedIndex,
       onItemInsert = props.onItemInsert,
       fireAnalyticsCallback = props.fireAnalyticsCallback,
-      isEmptyQuery = props.isEmptyQuery;
+      isEmptyQuery = props.isEmptyQuery,
+      cancel = props.cancel;
+  var ref = (0, _react.useRef)(null);
   var startTime = (0, _react.useMemo)(function () {
     return performance.now();
   }, // In case those props changes
@@ -183,6 +184,35 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
       }
     };
   }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  (0, _react.useLayoutEffect)(function () {
+    var focusOut = function focusOut(event) {
+      var _window$getSelection;
+
+      var relatedTarget = event.relatedTarget; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants2.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
+        return;
+      }
+
+      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
+        return;
+      }
+
+      cancel({
+        addPrefixTrigger: true,
+        setSelectionAt: _constants2.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+
+    var element = ref.current;
+    element === null || element === void 0 ? void 0 : element.addEventListener('focusout', focusOut);
+    return function () {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
+    };
+  }, [ref, cancel]);
   return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -195,7 +225,8 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
   }, (0, _react2.jsx)("div", {
     css: typeAheadContent,
     tabIndex: 0,
-    className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS
+    className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
   }, (0, _react2.jsx)(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler

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

@@ -44,6 +44,8 @@ exports.findTypeAheadDecorations = findTypeAheadDecorations;
 var isTypeAheadHandler = function isTypeAheadHandler(handler) {
   return handler && Object.values(_typeAhead.TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
 };
+/** Is a typeahead plugin open? */
+
 
 exports.isTypeAheadHandler = isTypeAheadHandler;
 
@@ -135,7 +137,7 @@ var moveSelectedIndex = function moveSelectedIndex(_ref2) {
       nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
     } else {
       stats.increaseArrowUp();
-      nextIndex = selectedIndex === 0 ? items.length - 1 : selectedIndex - 1;
+      nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
     }
 
     (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex)(editorView.state, editorView.dispatch);

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

@@ -46,7 +46,6 @@ var alignmentOptions = [{
   value: 'center'
 }, {
   title: _messages.alignmentMessages.alignRight,
-  shortcut: _keymaps.alignRight,
   value: 'end'
 }];
 

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

@@ -45,7 +45,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var chromelessEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 20px;\n  height: auto;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), _styles.scrollbarStyles);
+var chromelessEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 20px;\n  height: auto;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n\n    & > :last-child {\n      padding-bottom: 0.5em;\n    }\n  }\n"])), _styles.scrollbarStyles);
 var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
 

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

@@ -48,7 +48,7 @@ var StickyToolbar = function StickyToolbar(props) {
     setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
   }, [setTop, props.externalToolbarRef]);
   return (0, _react2.jsx)("div", {
-    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", ";\n        "])), top)],
+    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", "px;\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
     className: 'show-keyline'
   }, props.children);

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

@@ -31,6 +31,8 @@ var _context = require("../../ContextPanel/context");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
+var _ToolbarArrowKeyNavigationProvider = require("../../ToolbarArrowKeyNavigationProvider");
+
 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; }
@@ -101,7 +103,9 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
 
     var contextPanelWidth = _ref.width;
-    return (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {
+      editorView: props.editorView
+    }, (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"
     }, (0, _react2.jsx)("div", {
@@ -113,7 +117,7 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
       "data-testid": 'avatar-group-outside-plugin',
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.default.pageActionsLabel)
-    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar)));
   });
 });
 

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

@@ -39,8 +39,12 @@ var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
 var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var colorPickerWrapper = (0, _react2.css)(_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);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -206,14 +206,12 @@ function CustomSelect(_ref2) {
         // for isDirty
 
         onFieldChange(name, true);
-      } // @see DST-2386 & ED-12503
-      ,
-      enableAnimation: false // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+      } // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
       ,
       isMulti: isMultiple || false,
       isClearable: true,
       isValidNewOption: function isValidNewOption(value) {
-        return isCreatable && value;
+        return !!(isCreatable && value);
       },
       validationState: error ? 'error' : 'default',
       defaultOptions: defaultOptions,