@atlaskit/editor-plugin-type-ahead 0.6.0 → 0.7.1

package/dist/cjs/ui/InputQuery.js

@@ -0,0 +1,400 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputQuery = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _w3cKeyname = require("w3c-keyname");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _utils = require("@atlaskit/editor-common/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _constants = require("../constants");
+var _messages = require("../messages");
+var _utils2 = require("../utils");
+var _AssistiveText = require("./AssistiveText");
+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; }
+/** @jsx jsx */
+
+var querySpanStyles = (0, _react2.css)({
+  outline: 'none',
+  '& input': {
+    width: '5px',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    margin: 0,
+    // ED-17022 Fixes firefox caret position
+    fontSize: '1em',
+    height: _editorSharedStyles.blockNodesVerticalMargin,
+    caretColor: "var(--ds-text-accent-blue, #0052CC)"
+  }
+});
+var isNavigationKey = function isNavigationKey(event) {
+  return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
+};
+var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
+  var key = (0, _w3cKeyname.keyName)(event);
+  if (event.ctrlKey && key === 'y') {
+    return 'historyRedo';
+  }
+  if ((event.ctrlKey || event.metaKey) && event.shiftKey && key === 'Z') {
+    return 'historyRedo';
+  }
+  if ((event.ctrlKey || event.metaKey) && key === 'z') {
+    return 'historyUndo';
+  }
+  return false;
+};
+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 = exports.InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var triggerQueryPrefix = _ref.triggerQueryPrefix,
+    cancel = _ref.cancel,
+    onQueryChange = _ref.onQueryChange,
+    onItemSelect = _ref.onItemSelect,
+    selectNextItem = _ref.selectNextItem,
+    selectPreviousItem = _ref.selectPreviousItem,
+    forceFocus = _ref.forceFocus,
+    reopenQuery = _ref.reopenQuery,
+    onQueryFocus = _ref.onQueryFocus,
+    onUndoRedo = _ref.onUndoRedo,
+    editorView = _ref.editorView,
+    items = _ref.items;
+  var ref = (0, _react.useRef)(document.createElement('span'));
+  var inputRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var cleanedInputContent = (0, _react.useCallback)(function () {
+    var _ref$current;
+    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  var onKeyUp = (0, _react.useCallback)(function (event) {
+    var text = cleanedInputContent();
+    onQueryChange(text);
+  }, [onQueryChange, cleanedInputContent]);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isInFocus = _useState4[0],
+    setInFocus = _useState4[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 stopDefault = false;
+    var _ref2 = (0, _utils2.getPluginState)(editorView.state) || {},
+      selectedIndex = _ref2.selectedIndex;
+    setInFocus(true);
+    switch (key) {
+      case ' ':
+        // space key
+        if (text.length === 0) {
+          cancel({
+            forceFocusOnEditor: true,
+            text: ' ',
+            addPrefixTrigger: true,
+            setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
+          });
+          stopDefault = true;
+        }
+        break;
+      case 'Escape':
+      case 'PageUp':
+      case 'PageDown':
+      case 'Home':
+        cancel({
+          text: text,
+          forceFocusOnEditor: true,
+          addPrefixTrigger: true,
+          setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
+        });
+        stopDefault = true;
+        break;
+      case 'Backspace':
+        if (raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          event.stopPropagation();
+          event.preventDefault();
+          cancel({
+            forceFocusOnEditor: true,
+            text: text,
+            addPrefixTrigger: false,
+            setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
+          });
+        }
+        break;
+      case 'Enter':
+        // ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
+        // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
+        // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
+        if (!event.isComposing && event.which !== 229 && event.keyCode !== 229) {
+          if (selectedIndex === -1) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             * The focus behaviour still needs cleanup
+             */
+            selectPreviousItem();
+            selectNextItem();
+          }
+          onItemSelect(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER);
+        }
+        break;
+      case 'Tab':
+        if (selectedIndex === -1) {
+          /**
+           * TODO DTR-1401: (also see ED-17200) There are two options
+           * here, either
+           * - set the index directly to 1 in WrapperTypeAhead.tsx's
+           *   `insertSelectedItem` at the cost of breaking some of the a11y
+           *   focus changes,
+           * - or do this jank at the cost of some small analytics noise.
+           *
+           */
+          selectPreviousItem();
+          selectNextItem();
+        }
+        // TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
+        onItemSelect(_typeAhead.SelectItemMode.TAB);
+        break;
+      case 'ArrowDown':
+        selectNextItem();
+        break;
+      case 'ArrowUp':
+        selectPreviousItem();
+        break;
+    }
+    var undoRedoType = isUndoRedoShortcut(event);
+    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
+    }
+    if (isNavigationKey(event) || stopDefault) {
+      event.stopPropagation();
+      event.preventDefault();
+      return false;
+    }
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  var onClick = (0, _react.useCallback)(function (event) {
+    var _inputRef$current;
+    event.stopPropagation();
+    event.preventDefault();
+    onQueryFocus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    return false;
+  }, [onQueryFocus]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var element = ref.current;
+    var onFocusIn = function onFocusIn(event) {
+      onQueryFocus();
+    };
+    var keyDown = function keyDown(event) {
+      var key = (0, _w3cKeyname.keyName)(event);
+      if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
+        var _ref$current3;
+        var q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        var sel = document.getSelection();
+        var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        var isMovingLeft = sel && 'ArrowLeft' === key && (sel.anchorOffset === 0 || event.metaKey);
+        if (!isMovingRight && !isMovingLeft) {
+          return;
+        }
+        cancel({
+          forceFocusOnEditor: true,
+          addPrefixTrigger: true,
+          text: cleanedInputContent(),
+          setSelectionAt: isMovingRight ? _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED : _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
+        });
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      checkKeyEvent(event);
+    };
+    var onFocusOut = function onFocusOut(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(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
+        return;
+      }
+
+      // See ED-14909: Chrome may emit focusout events where an input
+      // device was not directly responsible. (This rears in react v17+ consumers
+      // where react-managed node removal now appears to propagate focusout events to
+      // our event listener). As this path is strictly for click or other typeahead
+      // dismissals that don't involve typeahead item selection, we carve out an
+      // exception for Chrome-specific events where an input device was not the initiator.
+      if (_utils.browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !('sourceCapabilities' in event && event.sourceCapabilities)) {
+        return;
+      }
+      cancel({
+        addPrefixTrigger: true,
+        text: cleanedInputContent(),
+        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    var close = function close() {
+      cancel({
+        addPrefixTrigger: false,
+        text: '',
+        forceFocusOnEditor: true,
+        setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+    };
+    var beforeinput = function beforeinput(e) {
+      var _target$textContent;
+      setInFocus(false);
+      var target = e.target;
+      if (e.isComposing || !(target instanceof HTMLElement)) {
+        return;
+      }
+      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 && inputRef.current === null) {
+        setQuery('');
+
+        // 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 || sel.removeAllRanges();
+          sel === null || sel === void 0 || sel.addRange(range);
+        }
+      }
+    };
+    var onInput = null;
+    if (_utils.browser.safari) {
+      // On Safari, for reasons beyond my understanding,
+      // The undo behavior is totally different from other browsers
+      // That why we need to have an specific branch only for Safari.
+      var _onInput = function _onInput(e) {
+        var _target$textContent2;
+        var target = e.target;
+        if (e.isComposing || !(target instanceof HTMLElement)) {
+          return;
+        }
+        if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+          return;
+        }
+      };
+      element.addEventListener('input', _onInput);
+    }
+    element.addEventListener('focusout', onFocusOut);
+    element.addEventListener('focusin', onFocusIn);
+    element.addEventListener('keydown', keyDown);
+    element.addEventListener('beforeinput', beforeinput);
+    return function () {
+      element.removeEventListener('focusout', onFocusOut);
+      element.removeEventListener('focusin', onFocusIn);
+      element.removeEventListener('keydown', keyDown);
+      element.removeEventListener('beforeinput', beforeinput);
+      if (_utils.browser.safari) {
+        element.removeEventListener('input', onInput);
+      }
+    };
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  (0, _react.useLayoutEffect)(function () {
+    var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+    if (ref.current && forceFocus) {
+      setQuery(hasReopenQuery ? reopenQuery : null);
+      requestAnimationFrame(function () {
+        if (!(ref !== null && ref !== void 0 && ref.current)) {
+          return;
+        }
+        var sel = window.getSelection();
+        if (sel && hasReopenQuery && ref.current.lastChild instanceof Text) {
+          var lastChild = ref.current.lastChild;
+          var range = document.createRange();
+          range.setStart(ref.current.lastChild, lastChild.length);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+        ref.current.focus();
+        setInFocus(true);
+      });
+    }
+  }, [forceFocus, reopenQuery]);
+  var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  var intl = (0, _reactIntlNext.useIntl)();
+
+  /**
+    When we migrated to emotion from styled component, we started getting this error.
+    jsx-a11y/interactive-supports-focus
+    Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+   */
+  return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
+    css: querySpanStyles,
+    contentEditable: true,
+    ref: ref,
+    onKeyUp: onKeyUp,
+    onClick: onClick,
+    role: "combobox",
+    "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-autocomplete": "list",
+    "aria-expanded": items.length !== 0,
+    "aria-labelledby": assistiveHintID,
+    suppressContentEditableWarning: true,
+    "data-query-prefix": triggerQueryPrefix
+  }, query === null ? (0, _react2.jsx)("input", {
+    ref: inputRef,
+    type: "text"
+  }) : query), (0, _react2.jsx)("span", {
+    id: assistiveHintID,
+    style: {
+      display: 'none'
+    }
+  }, 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
+    }) : '',
+    isInFocus: items.length === 0 || isInFocus,
+    id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID
+  }));
+});
+InputQuery.displayName = 'InputQuery';

package/dist/cjs/ui/TypeAheadList.js

@@ -0,0 +1,285 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadList = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
+var _List = require("react-virtualized/dist/commonjs/List");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _menu = require("@atlaskit/menu");
+var _updateSelectedIndex = require("../commands/update-selected-index");
+var _constants = require("../constants");
+var _messages = require("../messages");
+var _utils = require("../utils");
+var _AssistiveText = require("./AssistiveText");
+var _TypeAheadListItem = require("./TypeAheadListItem");
+var _templateObject;
+/** @jsx jsx */
+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 LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
+var LIST_WIDTH = 320;
+var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var numberOfResults = _ref.numberOfResults;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+    assistiveText: intl.formatMessage(_messages.typeAheadListMessages.searchResultsLabel, {
+      itemsLength: numberOfResults
+    })
+    // when the popup is open its always in focus
+    ,
+    isInFocus: true,
+    id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
+  });
+});
+var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var _decorationElement$qu2;
+  var items = _ref2.items,
+    selectedIndex = _ref2.selectedIndex,
+    editorView = _ref2.editorView,
+    onItemClick = _ref2.onItemClick,
+    intl = _ref2.intl,
+    fitHeight = _ref2.fitHeight,
+    decorationElement = _ref2.decorationElement,
+    triggerHandler = _ref2.triggerHandler;
+  var listRef = (0, _react.useRef)();
+  var listContainerRef = (0, _react.useRef)(null);
+  var lastVisibleIndexes = (0, _react.useRef)({
+    overscanStartIndex: 0,
+    overscanStopIndex: 0,
+    startIndex: 0,
+    stopIndex: 0
+  });
+  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  var _useState = (0, _react.useState)(Math.min(estimatedHeight, fitHeight)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _useState3 = (0, _react.useState)(new _CellMeasurer.CellMeasurerCache({
+      fixedWidth: true,
+      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+    })),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    cache = _useState4[0],
+    setCache = _useState4[1];
+  var onItemsRendered = (0, _react.useCallback)(function (props) {
+    lastVisibleIndexes.current = props;
+  }, []);
+  var actions = (0, _react.useMemo)(function () {
+    return {
+      onItemClick: onItemClick
+    };
+  }, [onItemClick]);
+  var isNavigationKey = function isNavigationKey(event) {
+    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
+  };
+  var focusTargetElement = (0, _react.useCallback)(function () {
+    var _decorationElement$qu;
+    //To reset the selected index
+    (0, _updateSelectedIndex.updateSelectedIndex)(-1)(editorView.state, editorView.dispatch);
+    listRef.current.scrollToRow(0);
+    decorationElement === null || decorationElement === void 0 || (_decorationElement$qu = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu === void 0 || _decorationElement$qu.focus();
+  }, [editorView, listRef, decorationElement]);
+  var selectNextItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
+  var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
+  var onScroll = (0, _react.useCallback)(function (_ref3) {
+    var scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
+    if (!scrollUpdateWasRequested) {
+      return;
+    }
+
+    // In case the user scroll to a non-visible item like press ArrowUp from the first index
+    // We will force the scroll calling the scrollToItem in the useEffect hook
+    // When the scroll happens and we render the elements,
+    // we still need calculate the items height and re-draw the List.
+    // It is possible the item selected became invisible again (because the items height changed)
+    // So, we need to wait for height to be calculated. Then we need to check
+    // if the selected item is visible or not. If it isn't visible we call the scrollToItem again.
+    //
+    // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
+    // to calculate each height. THen, we can schedule a new frame when this one finishs.
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+
+        //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
+        if (!isSelectedItemVisible && selectedIndex !== -1) {
+          listRef.current.scrollToRow(selectedIndex);
+        } else if (selectedIndex === -1) {
+          listRef.current.scrollToRow(0);
+        }
+      });
+    });
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  var _onMouseMove = function onMouseMove(event, index) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (selectedIndex === index) {
+      return;
+    }
+    (0, _updateSelectedIndex.updateSelectedIndex)(index)(editorView.state, editorView.dispatch);
+  };
+  (0, _react.useLayoutEffect)(function () {
+    if (!listRef.current) {
+      return;
+    }
+    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+
+    //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
+    if (!isSelectedItemVisible && selectedIndex !== -1) {
+      listRef.current.scrollToRow(selectedIndex);
+    } else if (selectedIndex === -1) {
+      listRef.current.scrollToRow(0);
+    }
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  (0, _react.useLayoutEffect)(function () {
+    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) {
+      return prevValue + cache.rowHeight({
+        index: index
+      });
+    }, 0), fitHeight);
+    setHeight(height);
+  }, [items, cache, fitHeight]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!listContainerRef.current) {
+      return;
+    }
+    var element = listContainerRef.current;
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    var handleKeyDown = function handleKeyDown(event) {
+      if (isNavigationKey(event)) {
+        switch (event.key) {
+          case 'ArrowDown':
+            selectNextItem();
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+          case 'ArrowUp':
+            selectPreviousItem();
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+
+          // TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
+          case 'Tab':
+            //Tab key quick inserts the selected item.
+            onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex);
+            event.preventDefault();
+            break;
+          case 'Enter':
+            //Enter key quick inserts the selected item.
+            if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
+              onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex);
+              event.preventDefault();
+            }
+            break;
+          default:
+            event.preventDefault();
+        }
+      } else {
+        //All the remaining keys sets focus on the typeahead query(inputQuery.tsx))
+        focusTargetElement();
+      }
+    };
+    element === null || element === void 0 || element.addEventListener('keydown', handleKeyDown);
+    return function () {
+      element === null || element === void 0 || element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+  var renderRow = function renderRow(_ref4) {
+    var index = _ref4.index,
+      key = _ref4.key,
+      style = _ref4.style,
+      parent = _ref4.parent;
+    var currentItem = items[index];
+    return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, (0, _react2.jsx)("div", {
+      style: style,
+      "data-index": index
+    }, (0, _react2.jsx)("div", {
+      "data-testid": "list-item-height-observed-".concat(index),
+      onMouseMove: function onMouseMove(e) {
+        return _onMouseMove(e, index);
+      }
+    }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
+      key: items[index].title,
+      item: currentItem,
+      itemsLength: items.length,
+      itemIndex: index,
+      selectedIndex: selectedIndex,
+      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": popupAriaLabel,
+    "aria-relevant": "additions removals"
+  }, (0, _react2.jsx)("div", {
+    id: menuGroupId,
+    ref: listContainerRef
+  }, (0, _react2.jsx)(_List.List, {
+    rowRenderer: renderRow,
+    ref: listRef,
+    rowCount: items.length,
+    rowHeight: cache.rowHeight,
+    onRowsRendered: onItemsRendered,
+    width: LIST_WIDTH,
+    onScroll: onScroll,
+    height: height,
+    overscanRowCount: 3,
+    containerRole: "presentation",
+    role: "listbox",
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              button {\n                padding: ", "\n                  ", " 11px;\n                span:last-child span:last-child {\n                  white-space: normal;\n                }\n              }\n            "])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)")
+  }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: items.length.toString()
+  })));
+});
+var TypeAheadList = exports.TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);
+TypeAheadList.displayName = 'TypeAheadList';