@atlaskit/editor-core 178.1.0 → 178.1.2

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

@@ -1,8 +1,6 @@
 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';
@@ -25,7 +23,8 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref
   return jsx(AssistiveText, {
     assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
       itemsLength: numberOfResults
-    }) // when the popup is open its always in focus
+    })
+    // when the popup is open its always in focus
     ,
     isInFocus: true,
     id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
@@ -33,15 +32,14 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref
 });
 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;
+    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({
@@ -51,20 +49,17 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     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];
-
+    _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];
-
+      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;
   }, []);
@@ -73,14 +68,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       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);
@@ -102,10 +94,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   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
+    }
+
+    // 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.
@@ -115,12 +108,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     //
     // 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
+        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) {
@@ -133,9 +125,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     if (!listRef.current) {
       return;
     }
+    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
 
-    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
-
+    //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) {
@@ -146,12 +138,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     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
+    }));
+    // 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);
       }
@@ -169,13 +160,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     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) {
@@ -183,27 +172,22 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
             selectNextItem();
             event.preventDefault();
             break;
-
           case 'ArrowUp':
             selectPreviousItem();
             event.preventDefault();
             break;
-
           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();
         }
@@ -212,18 +196,16 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         focusTargetElement();
       }
     };
-
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return function () {
       element === null || element === void 0 ? 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;
+      key = _ref4.key,
+      style = _ref4.style,
+      parent = _ref4.parent;
     var currentItem = items[index];
     return jsx(CellMeasurer, {
       key: key,
@@ -246,13 +228,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       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,

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

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 /** @jsx jsx */
 import React, { useCallback, useMemo, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -20,22 +18,20 @@ export var ICON_WIDTH = 40;
 export var ITEM_PADDING = 12;
 export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* 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, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), ICON_WIDTH, ICON_HEIGHT);
 var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n"])));
-
 var itemText = function itemText(theme) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  color: ", ";\n  .item-title {\n    line-height: 1.4;\n  }\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 3px;\n  }\n"])), themed({
     light: "var(--ds-text, ".concat(N800, ")"),
     dark: "var(--ds-text, ".concat(DN600, ")")
   })(theme), relativeFontSizeToBase16(12), "var(--ds-text-subtlest, ".concat(N200, ")"));
 };
-
 var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
 var customRenderItemDivStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-selected, ".concat(N30, ")"), "var(--ds-border-focused, ".concat(B100, ")"));
+
 /**
  * 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.
  */
-
 var selectionFrame = {
   '& > button:focus': {
     boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
@@ -50,13 +46,11 @@ var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;
   return jsx(IconFallback, null);
 });
-
 var noop = function noop() {};
-
 var AssistiveText = function AssistiveText(_ref2) {
   var title = _ref2.title,
-      description = _ref2.description,
-      shortcut = _ref2.shortcut;
+    description = _ref2.description,
+    shortcut = _ref2.shortcut;
   var intl = useIntl();
   var descriptionText = description ? " ".concat(intl.formatMessage(typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
   var shortcutText = shortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
@@ -64,23 +58,21 @@ var AssistiveText = function AssistiveText(_ref2) {
     className: "assistive"
   }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
 };
-
 export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
   var item = _ref3.item,
-      itemsLength = _ref3.itemsLength,
-      selectedIndex = _ref3.selectedIndex,
-      onItemClick = _ref3.onItemClick,
-      itemIndex = _ref3.itemIndex,
-      ariaLabel = _ref3.ariaLabel;
-
+    itemsLength = _ref3.itemsLength,
+    selectedIndex = _ref3.selectedIndex,
+    onItemClick = _ref3.onItemClick,
+    itemIndex = _ref3.itemIndex,
+    ariaLabel = _ref3.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)
    */
   var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   var icon = item.icon,
-      title = item.title,
-      customRenderItem = item.render;
+    title = item.title,
+    customRenderItem = item.render;
   var elementIcon = useMemo(function () {
     return jsx("div", {
       css: itemIcon
@@ -97,14 +89,12 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
   useLayoutEffect(function () {
     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(function () {
     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]);
@@ -112,7 +102,6 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     if (!customRenderItem) {
       return null;
     }
-
     var Comp = customRenderItem;
     var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return jsx("div", {
@@ -122,7 +111,8 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
-      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '') //CSS classes added for test cases purpose
+      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
+      //CSS classes added for test cases purpose
       ,
       ref: customItemRef
     }, jsx("div", {
@@ -134,11 +124,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       onHover: noop
     })));
   }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
-
   if (customItem) {
     return customItem;
   }
-
   return jsx("span", {
     css: selectionFrame
   }, jsx(ButtonItem, {

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

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, useState, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,44 +15,41 @@ import { TypeAheadList } from './TypeAheadList';
 import { ITEM_PADDING } from './TypeAheadListItem';
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(N60A, ", 0 4px 8px -2px ").concat(N50A), ")"), gridSize() / 2);
-
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
-      triggerHandler = _ref.triggerHandler;
-
+    triggerHandler = _ref.triggerHandler;
   if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
     return null;
   }
-
   return triggerHandler.getHighlight(state);
 };
-
 var OFFSET = [0, 8];
 export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   var editorView = props.editorView,
-      triggerHandler = props.triggerHandler,
-      anchorElement = props.anchorElement,
-      popupsMountPoint = props.popupsMountPoint,
-      popupsBoundariesElement = props.popupsBoundariesElement,
-      popupsScrollableElement = props.popupsScrollableElement,
-      items = props.items,
-      selectedIndex = props.selectedIndex,
-      onItemInsert = props.onItemInsert,
-      fireAnalyticsCallback = props.fireAnalyticsCallback,
-      isEmptyQuery = props.isEmptyQuery,
-      cancel = props.cancel;
+    triggerHandler = props.triggerHandler,
+    anchorElement = props.anchorElement,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    items = props.items,
+    selectedIndex = props.selectedIndex,
+    onItemInsert = props.onItemInsert,
+    fireAnalyticsCallback = props.fireAnalyticsCallback,
+    isEmptyQuery = props.isEmptyQuery,
+    cancel = props.cancel;
   var ref = useRef(null);
   var startTime = useMemo(function () {
     return performance.now();
-  }, // In case those props changes
+  },
+  // In case those props changes
   // we need to recreate the startTime
   [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
   );
+
   useEffect(function () {
     if (!fireAnalyticsCallback) {
       return;
     }
-
     var stopTime = performance.now();
     var time = stopTime - startTime;
     fireAnalyticsCallback({
@@ -69,7 +64,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
         }
       }
     });
-  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery, // In case the current triggerHandler changes
+  }, [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
@@ -78,7 +74,6 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     if (!fireAnalyticsCallback) {
       return;
     }
-
     fireAnalyticsCallback({
       payload: {
         action: ACTION.VIEWED,
@@ -90,50 +85,48 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
         }
       }
     });
-  }, [items, fireAnalyticsCallback, selectedIndex, // In case the current triggerHandler changes
+  }, [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]);
-
   var _useState = useState(DEFAULT_TYPEAHEAD_MENU_HEIGHT),
-      _useState2 = _slicedToArray(_useState, 2),
-      fitHeight = _useState2[0],
-      setFitHeight = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    fitHeight = _useState2[0],
+    setFitHeight = _useState2[1];
   var getFitHeight = useCallback(function () {
     if (!anchorElement || !popupsMountPoint) {
       return;
     }
-
     var target = anchorElement;
-
     var _target$getBoundingCl = target.getBoundingClientRect(),
-        targetTop = _target$getBoundingCl.top,
-        targetHeight = _target$getBoundingCl.height;
-
+      targetTop = _target$getBoundingCl.top,
+      targetHeight = _target$getBoundingCl.height;
     var boundariesElement = document.body;
-
     var _boundariesElement$ge = boundariesElement.getBoundingClientRect(),
-        boundariesHeight = _boundariesElement$ge.height,
-        boundariesTop = _boundariesElement$ge.top; // Calculating the space above and space below our decoration
-
+      boundariesHeight = _boundariesElement$ge.height,
+      boundariesTop = _boundariesElement$ge.top;
 
+    // Calculating the space above and space below our decoration
     var spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
-    var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight); // Keep default height if more than enough space
+    var 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.
+    }
 
+    // Determines whether typeahead will fit above or below decoration
+    // and return the space available.
+    var newFitHeight = spaceBelow >= spaceAbove ? spaceBelow : spaceAbove;
 
-    var newFitHeight = spaceBelow >= spaceAbove ? spaceBelow : spaceAbove; // Each typeahead item has some padding
+    // Each typeahead item has some padding
     // We want to leave some space at the top so first item
     // is not partially cropped
+    var fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2;
 
-    var fitHeightWithSpace = newFitHeight - ITEM_PADDING * 2; // Ensure typeahead height is max its default height
-
+    // Ensure typeahead height is max its default height
     var minFitHeight = Math.min(DEFAULT_TYPEAHEAD_MENU_HEIGHT, fitHeightWithSpace);
     return setFitHeight(minFitHeight);
   }, [anchorElement, popupsMountPoint]);
@@ -142,14 +135,11 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     var scrollableElement = popupsScrollableElement || findOverflowScrollParent(anchorElement);
     getFitHeight();
     window.addEventListener('resize', getFitHeightDebounced);
-
     if (scrollableElement) {
       scrollableElement.addEventListener('scroll', getFitHeightDebounced);
     }
-
     return function () {
       window.removeEventListener('resize', getFitHeightDebounced);
-
       if (scrollableElement) {
         scrollableElement.removeEventListener('scroll', getFitHeightDebounced);
       }
@@ -158,26 +148,23 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   useLayoutEffect(function () {
     var focusOut = function focusOut(event) {
       var _window$getSelection;
+      var relatedTarget = event.relatedTarget;
 
-      var relatedTarget = event.relatedTarget; // Given the user is changing the focus
+      // 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)) || relatedTarget.closest("[data-type-ahead=\"".concat(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
       });
     };
-
     var element = ref.current;
     element === null || element === void 0 ? void 0 : element.addEventListener('focusout', focusOut);
     return function () {

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

@@ -9,40 +9,35 @@ import { useItemInsert } from './hooks/use-item-insert';
 import { useOnForceSelect } from './hooks/use-on-force-select';
 export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   var triggerHandler = _ref.triggerHandler,
-      editorView = _ref.editorView,
-      anchorElement = _ref.anchorElement,
-      shouldFocusCursorInsideQuery = _ref.shouldFocusCursorInsideQuery,
-      popupsMountPoint = _ref.popupsMountPoint,
-      popupsBoundariesElement = _ref.popupsBoundariesElement,
-      popupsScrollableElement = _ref.popupsScrollableElement,
-      createAnalyticsEvent = _ref.createAnalyticsEvent,
-      inputMethod = _ref.inputMethod,
-      getDecorationPosition = _ref.getDecorationPosition,
-      reopenQuery = _ref.reopenQuery,
-      onUndoRedo = _ref.onUndoRedo;
-
+    editorView = _ref.editorView,
+    anchorElement = _ref.anchorElement,
+    shouldFocusCursorInsideQuery = _ref.shouldFocusCursorInsideQuery,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    inputMethod = _ref.inputMethod,
+    getDecorationPosition = _ref.getDecorationPosition,
+    reopenQuery = _ref.reopenQuery,
+    onUndoRedo = _ref.onUndoRedo;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      closed = _useState2[0],
-      setClosed = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    closed = _useState2[0],
+    setClosed = _useState2[1];
   var _useState3 = useState(reopenQuery || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      query = _useState4[0],
-      setQuery = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    query = _useState4[0],
+    setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
   var items = useLoadItems(triggerHandler, editorView, query);
   useLayoutEffect(function () {
     queryRef.current = query;
   }, [query]);
-
   var _useItemInsert = useItemInsert(triggerHandler, editorView, items),
-      _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
-      onItemInsert = _useItemInsert2[0],
-      onTextInsert = _useItemInsert2[1];
-
+    _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
+    onItemInsert = _useItemInsert2[0],
+    onTextInsert = _useItemInsert2[1];
   var selectNextItem = useMemo(function () {
     return moveSelectedIndex({
       editorView: editorView,
@@ -57,9 +52,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   }, [editorView]);
   var cancel = useCallback(function (_ref2) {
     var setSelectionAt = _ref2.setSelectionAt,
-        addPrefixTrigger = _ref2.addPrefixTrigger,
-        text = _ref2.text,
-        forceFocusOnEditor = _ref2.forceFocusOnEditor;
+      addPrefixTrigger = _ref2.addPrefixTrigger,
+      text = _ref2.text,
+      forceFocusOnEditor = _ref2.forceFocusOnEditor;
     setClosed(true);
     var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
     onTextInsert({
@@ -71,10 +66,8 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   var insertSelectedItem = useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
     var view = editorViewRef.current;
-
     var _getPluginState = getPluginState(view.state),
-        selectedIndex = _getPluginState.selectedIndex;
-
+      selectedIndex = _getPluginState.selectedIndex;
     setClosed(true);
     queueMicrotask(function () {
       onItemInsert({
@@ -91,11 +84,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   useEffect(function () {
     var view = editorViewRef.current;
     var pluginState = getPluginState(view.state);
-
     if (query.length === 0 || query === pluginState.query || !pluginState.triggerHandler) {
       return;
     }
-
     updateQuery(query)(view.state, view.dispatch);
   }, [query, reopenQuery]);
   useOnForceSelect({
@@ -105,11 +96,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     editorView: editorView,
     closePopup: closePopup
   });
-
   if (closed) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(InputQuery, {
     triggerQueryPrefix: triggerHandler.trigger,
     onQueryChange: setQuery,