@atlaskit/editor-core 188.8.0 → 188.9.2

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

@@ -1,390 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
-import React, { useRef, useCallback, Fragment, useLayoutEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { browser } from '@atlaskit/editor-common/utils';
-import { getPluginState } from '../utils';
-import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
-import { AssistiveText } from './AssistiveText';
-import { typeAheadListMessages } from '../messages';
-import { useIntl } from 'react-intl-next';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-var querySpan = css({
-  outline: 'none',
-  '& input': {
-    width: '5px',
-    border: 'none',
-    background: 'transparent',
-    padding: 0,
-    margin: 0,
-    // ED-17022 Fixes firefox caret position
-    fontSize: '1em',
-    height: 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 = keyNameNormalized(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 typeAheadListMessages.mentionInputLabel;
-    case '/':
-      return typeAheadListMessages.quickInsertInputLabel;
-    case ':':
-      return typeAheadListMessages.emojiInputLabel;
-    default:
-      return typeAheadListMessages.quickInsertInputLabel;
-  }
-};
-export var InputQuery = /*#__PURE__*/React.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 = useRef(document.createElement('span'));
-  var inputRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    query = _useState2[0],
-    setQuery = _useState2[1];
-  var cleanedInputContent = 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 = useCallback(function (event) {
-    var text = cleanedInputContent();
-    onQueryChange(text);
-  }, [onQueryChange, cleanedInputContent]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isInFocus = _useState4[0],
-    setInFocus = _useState4[1];
-  var checkKeyEvent = useCallback(function (event) {
-    var _ref$current2;
-    var key = keyNameNormalized(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 = getPluginState(editorView.state) || {},
-      selectedIndex = _ref2.selectedIndex;
-    setInFocus(true);
-    switch (key) {
-      case ' ':
-        // space key
-        if (text.length === 0) {
-          cancel({
-            forceFocusOnEditor: true,
-            text: ' ',
-            addPrefixTrigger: true,
-            setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
-          });
-          stopDefault = true;
-        }
-        break;
-      case 'Escape':
-      case 'PageUp':
-      case 'PageDown':
-      case 'Home':
-        cancel({
-          text: text,
-          forceFocusOnEditor: true,
-          addPrefixTrigger: true,
-          setSelectionAt: 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: 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 ? SelectItemMode.SHIFT_ENTER : 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(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 = 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]);
-  useLayoutEffect(function () {
-    if (!ref.current) {
-      return;
-    }
-    var element = ref.current;
-    var onFocusIn = function onFocusIn(event) {
-      onQueryFocus();
-    };
-    var keyDown = function keyDown(event) {
-      var key = keyNameNormalized(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 ? CloseSelectionOptions.AFTER_TEXT_INSERTED : 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(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 (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: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
-        forceFocusOnEditor: false
-      });
-    };
-    var close = function close() {
-      cancel({
-        addPrefixTrigger: false,
-        text: '',
-        forceFocusOnEditor: true,
-        setSelectionAt: 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 (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 (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 (browser.safari) {
-        element.removeEventListener('input', onInput);
-      }
-    };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
-  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 = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
-  var intl = 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 jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: querySpan,
-    contentEditable: true,
-    ref: ref,
-    onKeyUp: onKeyUp,
-    onClick: onClick,
-    role: "combobox",
-    "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
-    "aria-autocomplete": "list",
-    "aria-expanded": items.length !== 0,
-    "aria-labelledby": assistiveHintID,
-    suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
-  }, query === null ? jsx("input", {
-    ref: inputRef,
-    type: "text"
-  }) : query), jsx("span", {
-    id: assistiveHintID,
-    style: {
-      display: 'none'
-    }
-  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
-    assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
-      itemsLength: items.length
-    }) : '',
-    isInFocus: items.length === 0 || isInFocus,
-    id: TYPE_AHEAD_DECORATION_ELEMENT_ID
-  }));
-});
-InputQuery.displayName = 'InputQuery';

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

@@ -1,276 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
-/** @jsx jsx */
-
-import React, { useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
-import { jsx, css } from '@emotion/react';
-import { MenuGroup } from '@atlaskit/menu';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
-import { List } from 'react-virtualized/dist/commonjs/List';
-import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
-import { injectIntl, useIntl } from 'react-intl-next';
-import { typeAheadListMessages } from '../messages';
-import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
-import { updateSelectedIndex } from '../commands/update-selected-index';
-import { AssistiveText } from './AssistiveText';
-import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
-var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
-var LIST_WIDTH = 320;
-var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
-  var numberOfResults = _ref.numberOfResults;
-  var intl = useIntl();
-  return jsx(AssistiveText, {
-    assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
-      itemsLength: numberOfResults
-    })
-    // when the popup is open its always in focus
-    ,
-    isInFocus: true,
-    id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
-  });
-});
-var TypeAheadListComponent = /*#__PURE__*/React.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 = useRef();
-  var listContainerRef = useRef(null);
-  var lastVisibleIndexes = useRef({
-    overscanStartIndex: 0,
-    overscanStopIndex: 0,
-    startIndex: 0,
-    stopIndex: 0
-  });
-  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-  var _useState = useState(Math.min(estimatedHeight, fitHeight)),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var _useState3 = useState(new CellMeasurerCache({
-      fixedWidth: true,
-      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    })),
-    _useState4 = _slicedToArray(_useState3, 2),
-    cache = _useState4[0],
-    setCache = _useState4[1];
-  var onItemsRendered = useCallback(function (props) {
-    lastVisibleIndexes.current = props;
-  }, []);
-  var actions = useMemo(function () {
-    return {
-      onItemClick: onItemClick
-    };
-  }, [onItemClick]);
-  var isNavigationKey = function isNavigationKey(event) {
-    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
-  };
-  var focusTargetElement = useCallback(function () {
-    var _decorationElement$qu;
-    //To reset the selected index
-    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 = useMemo(function () {
-    return moveSelectedIndex({
-      editorView: editorView,
-      direction: 'next'
-    });
-  }, [editorView]);
-  var selectPreviousItem = useMemo(function () {
-    return moveSelectedIndex({
-      editorView: editorView,
-      direction: 'previous'
-    });
-  }, [editorView]);
-  var lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
-  var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
-  var onScroll = 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;
-    }
-    updateSelectedIndex(index)(editorView.state, editorView.dispatch);
-  };
-  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]);
-  useLayoutEffect(function () {
-    setCache(new 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]);
-  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]);
-  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(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 ? SelectItemMode.SHIFT_ENTER : 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 jsx(CellMeasurer, {
-      key: key,
-      cache: cache,
-      parent: parent,
-      columnIndex: 0,
-      rowIndex: index
-    }, jsx("div", {
-      style: style,
-      "data-index": index
-    }, jsx("div", {
-      "data-testid": "list-item-height-observed-".concat(index),
-      onMouseMove: function onMouseMove(e) {
-        return _onMouseMove(e, index);
-      }
-    }, jsx(TypeAheadListItem, {
-      key: items[index].title,
-      item: currentItem,
-      itemsLength: items.length,
-      itemIndex: index,
-      selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
-      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
-    }))));
-  };
-  var popupAriaLabel = 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')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
-  return jsx(MenuGroup, {
-    "aria-label": popupAriaLabel,
-    "aria-relevant": "additions removals"
-  }, jsx("div", {
-    id: menuGroupId,
-    ref: listContainerRef
-  }, jsx(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: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)")
-  }), jsx(TypeaheadAssistiveTextPureComponent, {
-    numberOfResults: items.length.toString()
-  })));
-});
-export var TypeAheadList = injectIntl(TypeAheadListComponent);
-TypeAheadList.displayName = 'TypeAheadList';