@atlaskit/editor-core 148.0.0 → 149.0.3

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

@@ -0,0 +1,325 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _w3cKeyname = require("w3c-keyname");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+var _constants = require("../constants");
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var QuerySpan = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n"])));
+
+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 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;
+  var ref = (0, _react.useRef)(document.createElement('span'));
+  var cleanedInputContent = (0, _react.useCallback)(function () {
+    var raw = ref.current.textContent || '';
+    return raw.replace(_editorCommon.ZERO_WIDTH_SPACE, '');
+  }, []);
+  var onKeyUp = (0, _react.useCallback)(function (event) {
+    var text = cleanedInputContent();
+    onQueryChange(text);
+  }, [onQueryChange, cleanedInputContent]);
+  var checkKeyEvent = (0, _react.useCallback)(function (event) {
+    var key = (0, _w3cKeyname.keyName)(event);
+    var sel = document.getSelection();
+    var raw = ref.current.textContent || '';
+    var text = cleanedInputContent();
+    var stopDefault = false;
+
+    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':
+        cancel({
+          text: text,
+          forceFocusOnEditor: true,
+          addPrefixTrigger: true,
+          setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
+        });
+        break;
+
+      case 'Backspace':
+        if (raw === _editorCommon.ZERO_WIDTH_SPACE || 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':
+        onItemSelect(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER);
+        break;
+
+      case 'Tab':
+        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, cancel, selectPreviousItem, cleanedInputContent]);
+  var onClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    onQueryFocus();
+    ref.current.focus();
+    return false;
+  }, [onQueryFocus]);
+  (0, _react.useEffect)(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 q = ref.current.textContent || '';
+        var sel = document.getSelection();
+        var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        var isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;
+
+        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) {
+      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;
+
+      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 || target.textContent === _editorCommon.ZERO_WIDTH_SPACE)) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        return;
+      }
+
+      if (e.data != null && target.textContent === _editorCommon.ZERO_WIDTH_SPACE) {
+        element.textContent = ''; // We need to change the content on Safari
+        // and set the cursor at the right place
+
+        if (_editorCommon.browser.safari) {
+          e.preventDefault();
+          var dataElement = document.createTextNode(e.data);
+          element.appendChild(dataElement);
+          var sel = window.getSelection();
+          var range = document.createRange();
+          range.setStart(dataElement, dataElement.length);
+          range.collapse(true);
+          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        }
+      }
+    };
+
+    var onInput = null;
+
+    if (_editorCommon.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 (_editorCommon.browser.safari) {
+        element.removeEventListener('input', onInput);
+      }
+    };
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
+  (0, _react.useEffect)(function () {
+    var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+
+    if (ref.current && forceFocus) {
+      ref.current.textContent = hasReopenQuery ? reopenQuery : _editorCommon.ZERO_WIDTH_SPACE;
+      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();
+      });
+    }
+  }, [forceFocus, reopenQuery]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerQueryPrefix, /*#__PURE__*/_react.default.createElement(QuerySpan, {
+    contentEditable: true,
+    innerRef: ref,
+    onKeyUp: onKeyUp,
+    onClick: onClick,
+    role: "textbox",
+    suppressContentEditableWarning: true,
+    "data-query-prefix": triggerQueryPrefix
+  }));
+});
+
+exports.InputQuery = InputQuery;
+InputQuery.displayName = 'InputQuery';

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

@@ -0,0 +1,195 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _item = require("@atlaskit/item");
+
+var _components = require("@atlaskit/theme/components");
+
+var _styledComponents = require("styled-components");
+
+var _TypeAheadListItem = require("./TypeAheadListItem");
+
+var _reactWindow = require("react-window");
+
+var _useResizeObserver = require("./hooks/use-resize-observer");
+
+var _useDynamicListHeightCalculation = require("./hooks/use-dynamic-list-height-calculation");
+
+var _DynamicHeightListItem = require("./DynamicHeightListItem");
+
+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 ITEM_PADDING = 12;
+var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + ITEM_PADDING * 2;
+var LIST_MAX_HEIGHT = 380;
+var LIST_WIDTH = 320;
+var itemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
+  padding: {
+    default: {
+      bottom: ITEM_PADDING,
+      left: ITEM_PADDING,
+      right: ITEM_PADDING,
+      top: ITEM_PADDING
+    }
+  },
+  beforeItemSpacing: {
+    default: function _default() {
+      return ITEM_PADDING;
+    }
+  },
+  borderRadius: function borderRadius() {
+    return 0;
+  },
+  hover: {
+    // background: colors.transparent, transparent is not a thing
+    text: _colors.text,
+    secondaryText: _colors.N200
+  },
+  selected: {
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN70
+    }),
+    text: (0, _components.themed)({
+      light: _colors.N800,
+      dark: _colors.DN600
+    }),
+    secondaryText: (0, _components.themed)({
+      light: _colors.N200,
+      dark: _colors.DN300
+    })
+  }
+});
+
+var TypeAheadList = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var items = _ref.items,
+      selectedIndex = _ref.selectedIndex,
+      onItemHover = _ref.onItemHover,
+      onItemClick = _ref.onItemClick;
+  var listRef = (0, _react.useRef)();
+  var redrawListAtIndex = (0, _react.useCallback)(function (index) {
+    listRef.current.resetAfterIndex(index);
+  }, []);
+  var lastVisibleIndexes = (0, _react.useRef)({
+    overscanStartIndex: 0,
+    overscanStopIndex: 0,
+    visibleStartIndex: 0,
+    visibleStopIndex: 0
+  });
+  var getFirstVisibleIndex = (0, _react.useCallback)(function () {
+    return lastVisibleIndexes.current.overscanStartIndex;
+  }, []);
+
+  var _useDynamicListHeight = (0, _useDynamicListHeightCalculation.useDynamicListHeightCalculation)({
+    redrawListAtIndex: redrawListAtIndex,
+    getFirstVisibleIndex: getFirstVisibleIndex,
+    listLength: items.length,
+    listMaxHeight: LIST_MAX_HEIGHT,
+    listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  }),
+      getListItemHeight = _useDynamicListHeight.getListItemHeight,
+      setListItemHeight = _useDynamicListHeight.setListItemHeight,
+      renderedListHeight = _useDynamicListHeight.renderedListHeight;
+
+  var onItemsRendered = (0, _react.useCallback)(function (props) {
+    lastVisibleIndexes.current = props;
+  }, []);
+  var actions = (0, _react.useMemo)(function () {
+    return {
+      onItemClick: onItemClick,
+      onItemHover: onItemHover
+    };
+  }, [onItemClick, onItemHover]);
+  var onScroll = (0, _react.useCallback)(function (_ref2) {
+    var scrollUpdateWasRequested = _ref2.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 indexes = lastVisibleIndexes.current;
+        var isSelectedItemVisible = selectedIndex >= indexes.visibleStartIndex && selectedIndex <= indexes.visibleStopIndex;
+
+        if (!isSelectedItemVisible) {
+          listRef.current.scrollToItem(selectedIndex);
+        }
+      });
+    });
+  }, [selectedIndex]);
+  (0, _react.useEffect)(function () {
+    if (!listRef.current) {
+      return;
+    }
+
+    listRef.current.scrollToItem(selectedIndex);
+  }, [selectedIndex]);
+  (0, _react.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      listRef.current.resetAfterIndex(lastVisibleIndexes.current.overscanStartIndex);
+    });
+  }, [items]);
+
+  if (!Array.isArray(items)) {
+    return null;
+  }
+
+  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: itemTheme
+  }, /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
+    role: "listbox",
+    "aria-live": "polite",
+    "aria-label": "TypeAhead results",
+    "aria-relevant": "additions removals"
+  }, /*#__PURE__*/_react.default.createElement(_useResizeObserver.ResizeObserverProvider, null, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
+    value: setListItemHeight
+  }, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.ListItemActionsContext.Provider, {
+    value: actions
+  }, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.SelectedIndexContext.Provider, {
+    value: selectedIndex
+  }, /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
+    useIsScrolling: true,
+    ref: listRef,
+    itemData: items,
+    itemCount: items.length,
+    estimatedItemSize: LIST_ITEM_ESTIMATED_HEIGHT,
+    onScroll: onScroll,
+    onItemsRendered: onItemsRendered,
+    itemSize: getListItemHeight,
+    width: LIST_WIDTH,
+    height: height,
+    overscanCount: 3
+  }, _DynamicHeightListItem.DynamicHeightListItem)))))));
+});
+
+exports.TypeAheadList = TypeAheadList;
+TypeAheadList.displayName = 'TypeAheadList';

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadListItem = exports.ItemIcon = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _item = _interopRequireDefault(require("@atlaskit/item"));
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fallback = _interopRequireDefault(require("../../quick-insert/assets/fallback"));
+
+var _styles = require("../../../ui/styles");
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 ICON_HEIGHT = 40;
+exports.ICON_HEIGHT = ICON_HEIGHT;
+var ICON_WIDTH = 40;
+exports.ICON_WIDTH = ICON_WIDTH;
+
+var ItemIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
+
+exports.ItemIcon = ItemIcon;
+
+var ItemBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+
+var ItemText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _colors.N200);
+
+var ItemAfter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+
+var hidden = {
+  overflow: 'hidden'
+};
+
+var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/_react.default.createElement(_fallback.default, null);
+});
+
+var noop = function noop() {};
+
+var TypeAheadListItem = function TypeAheadListItem(_ref2) {
+  var item = _ref2.item,
+      selectedIndex = _ref2.selectedIndex,
+      onItemHover = _ref2.onItemHover,
+      onItemClick = _ref2.onItemClick,
+      itemIndex = _ref2.itemIndex;
+  var isSelected = itemIndex === selectedIndex; // It's possible for onMouseMove to be called multiple times in quick
+  // succession because the mousemove event can fire very rapidly. This
+  // provides an additional safety net to prevent that.
+
+  var mouseMoveCalled = (0, _react.useRef)(false);
+  var onMouseMove = (0, _react.useCallback)(function () {
+    if (isSelected || mouseMoveCalled.current) {
+      return;
+    }
+
+    mouseMoveCalled.current = true;
+    onItemHover({
+      item: item,
+      index: itemIndex
+    });
+  }, [item, itemIndex, onItemHover, isSelected]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!isSelected) {
+      mouseMoveCalled.current = false;
+    }
+  }, [isSelected]);
+  var icon = item.icon,
+      title = item.title,
+      customRenderItem = item.render;
+  var elementIcon = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/_react.default.createElement(FallbackIcon, {
+      label: title
+    }));
+  }, [icon, title]);
+  var insertSelectedItem = (0, _react.useCallback)(function () {
+    onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
+  }, [onItemClick, itemIndex]);
+  var customItem = (0, _react.useMemo)(function () {
+    if (!customRenderItem) {
+      return null;
+    }
+
+    var Comp = customRenderItem;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "aria-selected": isSelected,
+      "aria-label": title,
+      role: "option",
+      tabIndex: 0,
+      style: hidden,
+      onMouseMove: onMouseMove
+    }, /*#__PURE__*/_react.default.createElement(Comp, {
+      onClick: insertSelectedItem,
+      isSelected: isSelected,
+      onHover: noop
+    }));
+  }, [customRenderItem, insertSelectedItem, onMouseMove, isSelected, title]);
+
+  if (customItem) {
+    return customItem;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_item.default, {
+    onClick: insertSelectedItem,
+    onMouseMove: onMouseMove,
+    elemBefore: elementIcon,
+    isSelected: isSelected,
+    "aria-selected": isSelected,
+    "aria-label": item.title,
+    role: "option"
+  }, /*#__PURE__*/_react.default.createElement(ItemBody, null, /*#__PURE__*/_react.default.createElement(ItemText, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "item-title"
+  }, item.title), item.description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "item-description"
+  }, item.description)), /*#__PURE__*/_react.default.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, item.keyshortcut))));
+};
+
+exports.TypeAheadListItem = TypeAheadListItem;