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

package/dist/es2019/ui/InputQuery.js

@@ -0,0 +1,393 @@
+/** @jsx jsx */
+import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { browser } from '@atlaskit/editor-common/utils';
+import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
+import { typeAheadListMessages } from '../messages';
+import { getPluginState } from '../utils';
+import { AssistiveText } from './AssistiveText';
+const querySpanStyles = 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)"
+  }
+});
+const isNavigationKey = event => {
+  return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
+};
+const isUndoRedoShortcut = event => {
+  const 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;
+};
+const getAriaLabel = (triggerPrefix, intl) => {
+  switch (triggerPrefix) {
+    case '@':
+      return typeAheadListMessages.mentionInputLabel;
+    case '/':
+      return typeAheadListMessages.quickInsertInputLabel;
+    case ':':
+      return typeAheadListMessages.emojiInputLabel;
+    default:
+      return typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+export const InputQuery = /*#__PURE__*/React.memo(({
+  triggerQueryPrefix,
+  cancel,
+  onQueryChange,
+  onItemSelect,
+  selectNextItem,
+  selectPreviousItem,
+  forceFocus,
+  reopenQuery,
+  onQueryFocus,
+  onUndoRedo,
+  editorView,
+  items
+}) => {
+  const ref = useRef(document.createElement('span'));
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState(null);
+  const cleanedInputContent = useCallback(() => {
+    var _ref$current;
+    const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  const onKeyUp = useCallback(event => {
+    const text = cleanedInputContent();
+    onQueryChange(text);
+  }, [onQueryChange, cleanedInputContent]);
+  const [isInFocus, setInFocus] = useState(false);
+  const checkKeyEvent = useCallback(event => {
+    var _ref$current2;
+    const key = keyNameNormalized(event);
+    const sel = document.getSelection();
+    const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
+    const text = cleanedInputContent();
+    let stopDefault = false;
+    const {
+      selectedIndex
+    } = getPluginState(editorView.state) || {};
+    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,
+          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,
+            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;
+    }
+    const 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]);
+  const onClick = useCallback(event => {
+    var _inputRef$current;
+    event.stopPropagation();
+    event.preventDefault();
+    onQueryFocus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    return false;
+  }, [onQueryFocus]);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      current: element
+    } = ref;
+    const onFocusIn = event => {
+      onQueryFocus();
+    };
+    const keyDown = event => {
+      const key = keyNameNormalized(event);
+      if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
+        var _ref$current3;
+        const q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        const sel = document.getSelection();
+        const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        const 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);
+    };
+    const onFocusOut = event => {
+      var _window$getSelection;
+      const {
+        relatedTarget
+      } = event;
+
+      // 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(`.${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
+      });
+    };
+    const close = () => {
+      cancel({
+        addPrefixTrigger: false,
+        text: '',
+        forceFocusOnEditor: true,
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+    };
+    const beforeinput = e => {
+      var _target$textContent;
+      setInFocus(false);
+      const {
+        target
+      } = e;
+      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();
+          const dataElement = document.createTextNode(e.data);
+          element.appendChild(dataElement);
+          const sel = window.getSelection();
+          const 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);
+        }
+      }
+    };
+    let 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.
+      const onInput = e => {
+        var _target$textContent2;
+        const {
+          target
+        } = e;
+        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 () => {
+      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(() => {
+    const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+    if (ref.current && forceFocus) {
+      setQuery(hasReopenQuery ? reopenQuery : null);
+      requestAnimationFrame(() => {
+        if (!(ref !== null && ref !== void 0 && ref.current)) {
+          return;
+        }
+        const sel = window.getSelection();
+        if (sel && hasReopenQuery && ref.current.lastChild instanceof Text) {
+          const lastChild = ref.current.lastChild;
+          const 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]);
+  const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  const 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: querySpanStyles,
+    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/es2019/ui/TypeAheadList.js

@@ -0,0 +1,273 @@
+/** @jsx jsx */
+
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl, useIntl } from 'react-intl-next';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { MenuGroup } from '@atlaskit/menu';
+import { updateSelectedIndex } from '../commands/update-selected-index';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
+import { typeAheadListMessages } from '../messages';
+import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
+import { AssistiveText } from './AssistiveText';
+import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
+const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
+const LIST_WIDTH = 320;
+const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
+  numberOfResults
+}) => {
+  const 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'
+  });
+});
+const TypeAheadListComponent = /*#__PURE__*/React.memo(({
+  items,
+  selectedIndex,
+  editorView,
+  onItemClick,
+  intl,
+  fitHeight,
+  decorationElement,
+  triggerHandler
+}) => {
+  var _decorationElement$qu2;
+  const listRef = useRef();
+  const listContainerRef = useRef(null);
+  const lastVisibleIndexes = useRef({
+    overscanStartIndex: 0,
+    overscanStopIndex: 0,
+    startIndex: 0,
+    stopIndex: 0
+  });
+  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  const [height, setHeight] = useState(Math.min(estimatedHeight, fitHeight));
+  const [cache, setCache] = useState(new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  }));
+  const onItemsRendered = useCallback(props => {
+    lastVisibleIndexes.current = props;
+  }, []);
+  const actions = useMemo(() => ({
+    onItemClick
+  }), [onItemClick]);
+  const isNavigationKey = event => {
+    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
+  };
+  const focusTargetElement = useCallback(() => {
+    var _decorationElement$qu;
+    //To reset the selected index
+    updateSelectedIndex(-1)(editorView.state, editorView.dispatch);
+    listRef.current.scrollToRow(0);
+    decorationElement === null || decorationElement === void 0 ? void 0 : (_decorationElement$qu = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu === void 0 ? void 0 : _decorationElement$qu.focus();
+  }, [editorView, listRef, decorationElement]);
+  const selectNextItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'next'
+  }), [editorView]);
+  const selectPreviousItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'previous'
+  }), [editorView]);
+  const lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
+  const lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
+  const onScroll = useCallback(({
+    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(() => {
+      requestAnimationFrame(() => {
+        const 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]);
+  const onMouseMove = (event, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (selectedIndex === index) {
+      return;
+    }
+    updateSelectedIndex(index)(editorView.state, editorView.dispatch);
+  };
+  useLayoutEffect(() => {
+    if (!listRef.current) {
+      return;
+    }
+    const 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(() => {
+    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(() => {
+      var _listContainerRef$cur;
+      if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
+        listContainerRef.current.firstChild.scrollTo(0, 0);
+      }
+    });
+  }, [items]);
+  useLayoutEffect(() => {
+    const height = Math.min(items.reduce((prevValue, currentValue, index) => {
+      return prevValue + cache.rowHeight({
+        index: index
+      });
+    }, 0), fitHeight);
+    setHeight(height);
+  }, [items, cache, fitHeight]);
+  useLayoutEffect(() => {
+    if (!listContainerRef.current) {
+      return;
+    }
+    const {
+      current: element
+    } = listContainerRef;
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    const 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 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+  const renderRow = ({
+    index,
+    key,
+    style,
+    parent
+  }) => {
+    const 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-${index}`,
+      onMouseMove: e => 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
+    }))));
+  };
+  const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+  if (!Array.isArray(items)) {
+    return null;
+  }
+  const 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`
+              button {
+                padding: ${"var(--ds-space-150, 12px)"}
+                  ${"var(--ds-space-150, 12px)"} 11px;
+                span:last-child span:last-child {
+                  white-space: normal;
+                }
+              }
+            `
+  }), jsx(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: items.length.toString()
+  })));
+});
+export const TypeAheadList = injectIntl(TypeAheadListComponent);
+TypeAheadList.displayName = 'TypeAheadList';