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

package/dist/es2019/ui/TypeAheadListItem.js

@@ -0,0 +1,216 @@
+/** @jsx jsx */
+import React, { useCallback, useLayoutEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { IconFallback } from '@atlaskit/editor-common/quick-insert';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { ButtonItem } from '@atlaskit/menu';
+import { B400, DN600, N200, N30, N800 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { typeAheadListMessages } from '../messages';
+export const ICON_HEIGHT = 40;
+export const ICON_WIDTH = 40;
+export const ITEM_PADDING = 12;
+export const itemIcon = css`
+  width: ${ICON_WIDTH}px;
+  height: ${ICON_HEIGHT}px;
+  overflow: hidden;
+  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
+  border-radius: ${borderRadius()}px;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  div {
+    width: ${ICON_WIDTH}px;
+    height: ${ICON_HEIGHT}px;
+  }
+`;
+const itemBody = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+`;
+const itemText = theme => css`
+  white-space: initial;
+  color: ${themed({
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${DN600})`
+})(theme)};
+  .item-title {
+    line-height: 1.4;
+  }
+  .item-description {
+    font-size: ${relativeFontSizeToBase16(12)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
+    margin-top: 3px;
+  }
+`;
+const itemAfter = css`
+  flex: 0 0 auto;
+`;
+const customRenderItemDivStyle = css`
+  overflow: hidden;
+  &:focus {
+    box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
+    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
+    outline: none;
+  }
+`;
+
+/**
+ * This CSS emulates the desired behaviour with :focus-visible for firefox.
+ * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
+ * resulting in focus-visible style not drawn.
+ */
+const selectionFrame = {
+  '& > button:focus': {
+    boxShadow: `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};`,
+    backgroundColor: `${`var(--ds-background-neutral-subtle-hovered, ${N30})`}`,
+    outline: 'none',
+    '&:active': {
+      boxShadow: 'none'
+    }
+  },
+  '& > button:hover': {
+    backgroundColor: 'inherit',
+    outline: 'none'
+  }
+};
+const selectedStyle = css`
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
+  box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
+`;
+const FallbackIcon = /*#__PURE__*/React.memo(({
+  label
+}) => {
+  return jsx(IconFallback, null);
+});
+const noop = () => {};
+const AssistiveText = ({
+  title,
+  description,
+  shortcut
+}) => {
+  const intl = useIntl();
+  const descriptionText = description ? ` ${intl.formatMessage(typeAheadListMessages.descriptionLabel)} ${description}.` : '';
+  const shortcutText = shortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${shortcut}.` : '';
+  return jsx("span", {
+    className: "assistive"
+  }, `${title}. ${descriptionText} ${shortcutText}`);
+};
+export const TypeAheadListItem = ({
+  item,
+  itemsLength,
+  selectedIndex,
+  onItemClick,
+  itemIndex,
+  ariaLabel
+}) => {
+  /**
+   * To select and highlight the first Item when no item is selected
+   * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
+   */
+  const isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
+  const {
+    icon,
+    title,
+    render: customRenderItem
+  } = item;
+  const elementIcon = useMemo(() => {
+    return jsx("div", {
+      css: itemIcon
+    }, icon ? icon() : jsx(FallbackIcon, {
+      label: title
+    }));
+  }, [icon, title]);
+  const insertSelectedItem = useCallback(() => {
+    onItemClick(SelectItemMode.SELECTED, itemIndex);
+  }, [onItemClick, itemIndex]);
+  const customItemRef = /*#__PURE__*/React.createRef();
+  const buttonItemRef = /*#__PURE__*/React.createRef();
+  const shouldUpdateFocus = selectedIndex === itemIndex;
+  useLayoutEffect(() => {
+    if (shouldUpdateFocus) {
+      var _customItemRef$curren;
+      customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
+    }
+  }, [customItemRef, shouldUpdateFocus]);
+  useLayoutEffect(() => {
+    if (shouldUpdateFocus) {
+      var _buttonItemRef$curren;
+      buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
+    }
+  }, [buttonItemRef, shouldUpdateFocus]);
+  const customItem = useMemo(() => {
+    if (!customRenderItem) {
+      return null;
+    }
+    const Comp = customRenderItem;
+    const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
+    return jsx("div", {
+      "aria-selected": isSelected,
+      role: "option",
+      "aria-label": ariaLabel,
+      "aria-setsize": itemsLength,
+      "aria-posinset": itemIndex,
+      tabIndex: 0,
+      css: listItemClasses,
+      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
+      //CSS classes added for test cases purpose
+      ,
+      ref: customItemRef
+    }, jsx("div", {
+      "aria-hidden": true
+    }, jsx(Comp, {
+      onClick: insertSelectedItem,
+      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
+      ,
+      onHover: noop
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
+  if (customItem) {
+    return customItem;
+  }
+  const listItemClasses = [selectionFrame, isSelected && selectedStyle];
+  return jsx("span", {
+    css: listItemClasses
+  }, jsx(ButtonItem, {
+    onClick: insertSelectedItem,
+    iconBefore: elementIcon,
+    isSelected: isSelected,
+    "aria-selected": isSelected,
+    "aria-label": title,
+    "aria-setsize": itemsLength,
+    "aria-posinset": itemIndex,
+    role: "option",
+    ref: buttonItemRef
+    // @ts-ignore
+    ,
+    css: listItemClasses
+  }, jsx("div", {
+    "aria-hidden": true
+  }, jsx("div", {
+    css: itemText
+  }, jsx("div", {
+    css: itemBody
+  }, jsx("div", {
+    className: "item-title"
+  }, item.title), jsx("div", {
+    css: itemAfter
+  }, item.keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, item.keyshortcut))), jsx("div", {
+    className: "item-description"
+  }, item.description))), jsx(AssistiveText, {
+    title: item.title,
+    description: item.description,
+    shortcut: item.keyshortcut
+  })));
+};

package/dist/es2019/ui/TypeAheadPopup.js

@@ -0,0 +1,233 @@
+/** @jsx jsx */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import rafSchedule from 'raf-schd';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
+import { TypeAheadList } from './TypeAheadList';
+import { ITEM_PADDING } from './TypeAheadListItem';
+const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
+const typeAheadContent = css`
+  background: ${`var(--ds-surface-overlay, ${N0})`};
+  border-radius: ${borderRadius()}px;
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
+  padding: ${"var(--ds-space-050, 4px)"} 0;
+  width: 320px;
+  max-height: 380px; /* ~5.5 visibile items */
+  overflow-y: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  position: relative;
+`;
+const Highlight = ({
+  state,
+  triggerHandler
+}) => {
+  if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
+    return null;
+  }
+  return triggerHandler.getHighlight(state);
+};
+const OFFSET = [0, 8];
+export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
+  const {
+    editorView,
+    triggerHandler,
+    anchorElement,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    items,
+    selectedIndex,
+    onItemInsert,
+    fireAnalyticsCallback,
+    isEmptyQuery,
+    cancel
+  } = props;
+  const ref = useRef(null);
+  const startTime = useMemo(() => performance.now(),
+  // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  useEffect(() => {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+    const stopTime = performance.now();
+    const time = stopTime - startTime;
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          time,
+          items: items.length,
+          initial: isEmptyQuery
+        }
+      }
+    });
+  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery,
+  // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  useEffect(() => {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.VIEWED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD_ITEM,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          index: selectedIndex,
+          items: items.length
+        }
+      }
+    });
+  }, [items, fireAnalyticsCallback, selectedIndex,
+  // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  const [fitHeight, setFitHeight] = useState(DEFAULT_TYPEAHEAD_MENU_HEIGHT);
+  const getFitHeight = useCallback(() => {
+    if (!anchorElement || !popupsMountPoint) {
+      return;
+    }
+    const target = anchorElement;
+    const {
+      top: targetTop,
+      height: targetHeight
+    } = target.getBoundingClientRect();
+    const boundariesElement = document.body;
+    const {
+      height: boundariesHeight,
+      top: boundariesTop
+    } = boundariesElement.getBoundingClientRect();
+
+    // Calculating the space above and space below our decoration
+    const spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
+    const spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+
+    // Keep default height if more than enough space
+    if (spaceBelow >= DEFAULT_TYPEAHEAD_MENU_HEIGHT) {
+      return setFitHeight(DEFAULT_TYPEAHEAD_MENU_HEIGHT);
+    }
+
+    // Determines whether typeahead will fit above or below decoration
+    // and return the space available.
+    const newFitHeight = spaceBelow >= spaceAbove ? spaceBelow : spaceAbove;
+
+    // Each typeahead item has some padding
+    // We want to leave some space at the top so first item
+    // is not partially cropped
+    const fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2;
+
+    // Ensure typeahead height is max its default height
+    const minFitHeight = Math.min(DEFAULT_TYPEAHEAD_MENU_HEIGHT, fitHeightWithSpace);
+    return setFitHeight(minFitHeight);
+  }, [anchorElement, popupsMountPoint]);
+  const getFitHeightDebounced = rafSchedule(getFitHeight);
+  useLayoutEffect(() => {
+    const scrollableElement = popupsScrollableElement || findOverflowScrollParent(anchorElement);
+    getFitHeight();
+    window.addEventListener('resize', getFitHeightDebounced);
+    if (scrollableElement) {
+      scrollableElement.addEventListener('scroll', getFitHeightDebounced);
+    }
+    return () => {
+      window.removeEventListener('resize', getFitHeightDebounced);
+      if (scrollableElement) {
+        scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
+      }
+    };
+  }, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
+  useLayoutEffect(() => {
+    const focusOut = 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}`) || relatedTarget.closest(`[data-type-ahead="${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: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    const {
+      current: element
+    } = ref;
+    element === null || element === void 0 ? void 0 : element.addEventListener('focusout', focusOut);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
+    };
+  }, [ref, cancel]);
+
+  // ED-17443 When you press escape on typeahead panel, it should remove focus and close the panel
+  // This is the expected keyboard behaviour advised by the Accessibility team
+  useLayoutEffect(() => {
+    const escape = event => {
+      if (event.key === 'Escape') {
+        cancel({
+          addPrefixTrigger: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          forceFocusOnEditor: true
+        });
+      }
+    };
+    const {
+      current: element
+    } = ref;
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', escape);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
+    };
+  }, [ref, cancel]);
+  return jsx(Popup, {
+    zIndex: akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: fitHeight,
+    fitWidth: 340,
+    offset: OFFSET
+  }, jsx("div", {
+    css: typeAheadContent,
+    tabIndex: 0,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
+    ref: ref
+  }, jsx(Highlight, {
+    state: editorView.state,
+    triggerHandler: triggerHandler
+  }), jsx(TypeAheadList, {
+    items: items,
+    selectedIndex: selectedIndex,
+    onItemClick: onItemInsert,
+    fitHeight: fitHeight,
+    editorView: editorView,
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
+  })));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { updateQuery } from '../commands/update-query';
+import { getPluginState, moveSelectedIndex } from '../utils';
+import { useItemInsert } from './hooks/use-item-insert';
+import { useLoadItems } from './hooks/use-load-items';
+import { useOnForceSelect } from './hooks/use-on-force-select';
+import { InputQuery } from './InputQuery';
+export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
+  triggerHandler,
+  editorView,
+  anchorElement,
+  shouldFocusCursorInsideQuery,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  createAnalyticsEvent,
+  inputMethod,
+  getDecorationPosition,
+  reopenQuery,
+  onUndoRedo
+}) => {
+  const [closed, setClosed] = useState(false);
+  const [query, setQuery] = useState(reopenQuery || '');
+  const queryRef = useRef(query);
+  const editorViewRef = useRef(editorView);
+  const items = useLoadItems(triggerHandler, editorView, query);
+  useLayoutEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+  const [onItemInsert, onTextInsert] = useItemInsert(triggerHandler, editorView, items);
+  const selectNextItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'next'
+  }), [editorView]);
+  const selectPreviousItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'previous'
+  }), [editorView]);
+  const cancel = useCallback(({
+    setSelectionAt,
+    addPrefixTrigger,
+    text,
+    forceFocusOnEditor
+  }) => {
+    setClosed(true);
+    const fullquery = addPrefixTrigger ? `${triggerHandler.trigger}${text}` : text;
+    onTextInsert({
+      forceFocusOnEditor,
+      setSelectionAt,
+      text: fullquery
+    });
+  }, [triggerHandler, onTextInsert]);
+  const insertSelectedItem = useCallback((mode = SelectItemMode.SELECTED) => {
+    const {
+      current: view
+    } = editorViewRef;
+    const {
+      selectedIndex
+    } = getPluginState(view.state);
+    setClosed(true);
+    queueMicrotask(() => {
+      onItemInsert({
+        mode,
+        index: selectedIndex,
+        query: queryRef.current
+      });
+    });
+  }, [onItemInsert]);
+  const showTypeAheadPopupList = useCallback(() => {}, []);
+  const closePopup = useCallback(() => {
+    setClosed(true);
+  }, []);
+  useEffect(() => {
+    const {
+      current: view
+    } = editorViewRef;
+    const pluginState = getPluginState(view.state);
+    if (query.length === 0 || query === (pluginState === null || pluginState === void 0 ? void 0 : pluginState.query) || !(pluginState !== null && pluginState !== void 0 && pluginState.triggerHandler)) {
+      return;
+    }
+    updateQuery(query)(view.state, view.dispatch);
+  }, [query, reopenQuery]);
+  useOnForceSelect({
+    triggerHandler,
+    items,
+    query,
+    editorView,
+    closePopup
+  });
+  if (closed) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(InputQuery, {
+    triggerQueryPrefix: triggerHandler.trigger,
+    onQueryChange: setQuery,
+    onItemSelect: insertSelectedItem,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    onQueryFocus: showTypeAheadPopupList,
+    cancel: cancel,
+    forceFocus: shouldFocusCursorInsideQuery,
+    onUndoRedo: onUndoRedo,
+    reopenQuery: reopenQuery,
+    editorView: editorView,
+    items: items
+  });
+});
+WrapperTypeAhead.displayName = 'WrapperTypeAhead';

package/dist/es2019/ui/hooks/use-item-insert.js

@@ -0,0 +1,112 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { insertTypeAheadItem } from '../../commands/insert-type-ahead-item';
+import { CloseSelectionOptions } from '../../constants';
+import { closeTypeAhead } from '../../transforms/close-type-ahead';
+import { setSelectionBeforeQuery } from '../../transforms/set-selection-before-query';
+const insertRawQuery = ({
+  view,
+  setSelectionAt,
+  text,
+  forceFocusOnEditor
+}) => {
+  const {
+    tr,
+    schema
+  } = view.state;
+  closeTypeAhead(tr);
+  if (text.length > 0) {
+    tr.replaceSelectionWith(schema.text(text));
+    if (setSelectionAt === CloseSelectionOptions.BEFORE_TEXT_INSERTED) {
+      setSelectionBeforeQuery(text)(tr);
+    }
+  }
+  view.dispatch(tr);
+  if (forceFocusOnEditor) {
+    view.focus();
+  }
+};
+export const useItemInsert = (triggerHandler, editorView, items) => {
+  const editorViewRef = useRef(editorView);
+  const itemsRef = useRef(items);
+  const onTextInsert = useCallback(({
+    setSelectionAt,
+    text,
+    forceFocusOnEditor
+  }) => {
+    if (!triggerHandler) {
+      return;
+    }
+    const {
+      current: view
+    } = editorViewRef;
+    insertRawQuery({
+      view,
+      setSelectionAt,
+      text,
+      forceFocusOnEditor
+    });
+  }, [triggerHandler]);
+  const onItemInsert = useCallback(({
+    mode,
+    index,
+    query
+  }) => {
+    const sourceListItem = itemsRef.current;
+    if (sourceListItem.length === 0 || !triggerHandler) {
+      const text = `${triggerHandler.trigger}${query}`;
+      onTextInsert({
+        forceFocusOnEditor: true,
+        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text
+      });
+      return;
+    }
+    const itemToInsert = sourceListItem[index];
+    if (!itemToInsert) {
+      return;
+    }
+    const {
+      current: view
+    } = editorViewRef;
+    insertTypeAheadItem(view)({
+      item: itemToInsert,
+      handler: triggerHandler,
+      mode,
+      query,
+      sourceListItem
+    });
+  }, [triggerHandler, onTextInsert]);
+  const onItemMatch = useCallback(({
+    mode,
+    query
+  }) => {
+    const _items = itemsRef.current;
+    if (_items && _items.length > 1) {
+      return false;
+    }
+    if (_items.length === 1) {
+      queueMicrotask(() => {
+        onItemInsert({
+          mode,
+          query,
+          index: 0
+        });
+      });
+    } else {
+      const text = `${triggerHandler.trigger}${query}`;
+      queueMicrotask(() => {
+        onTextInsert({
+          forceFocusOnEditor: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          text: mode === SelectItemMode.SPACE ? text.concat(' ') : text
+        });
+      });
+    }
+    return true;
+  }, [onItemInsert, triggerHandler, onTextInsert]);
+  useLayoutEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  return [onItemInsert, onTextInsert, onItemMatch];
+};