react-mentions 4.4.6 → 4.4.8

package/dist/react-mentions.esm.js

@@ -7,7 +7,7 @@ import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { Children, Component } from 'react';
+import React, { Children, useState, useEffect } from 'react';
 import invariant from 'invariant';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -653,6 +653,10 @@ var omit = function omit(obj) {
 
 var _excluded = ["style", "className", "classNames"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
@@ -673,17 +677,18 @@ function createDefaultStyle(defaultStyle, getModifiers) {
     };
 
     var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
-    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
-    return DefaultStyleEnhancer;
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
+
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
   };
 
   return enhance;
 }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   if (!usedKeys.hasOwnProperty(id)) {
     usedKeys[id] = 0;
@@ -694,158 +699,126 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   return id + '_' + usedKeys[id];
 };
 
-var Highlighter = /*#__PURE__*/function (_Component) {
-  _inherits(Highlighter, _Component);
-
-  var _super = _createSuper(Highlighter);
-
-  function Highlighter() {
-    var _this;
-
-    _classCallCheck(this, Highlighter);
-
-    _this = _super.apply(this, arguments);
-
-    _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
-      _this.caretElement = el;
-    });
-
-    _this.state = {
-      left: undefined,
-      top: undefined
-    };
-    return _this;
-  }
+function Highlighter(_ref) {
+  var selectionStart = _ref.selectionStart,
+      selectionEnd = _ref.selectionEnd,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      onCaretPositionChange = _ref.onCaretPositionChange,
+      containerRef = _ref.containerRef,
+      children = _ref.children,
+      singleLine = _ref.singleLine,
+      style = _ref.style;
+
+  var _useState = useState({
+    left: undefined,
+    top: undefined
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      position = _useState2[0],
+      setPosition = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      caretElement = _useState4[0],
+      setCaretElement = _useState4[1];
+
+  useEffect(function () {
+    notifyCaretPosition();
+  });
 
-  _createClass(Highlighter, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.notifyCaretPosition();
+  var notifyCaretPosition = function notifyCaretPosition() {
+    if (!caretElement) {
+      return;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.notifyCaretPosition();
-    }
-  }, {
-    key: "notifyCaretPosition",
-    value: function notifyCaretPosition() {
-      if (!this.caretElement) {
-        return;
-      }
-
-      var _this$caretElement = this.caretElement,
-          offsetLeft = _this$caretElement.offsetLeft,
-          offsetTop = _this$caretElement.offsetTop;
 
-      if (this.state.left === offsetLeft && this.state.top === offsetTop) {
-        return;
-      }
+    var offsetLeft = caretElement.offsetLeft,
+        offsetTop = caretElement.offsetTop;
 
-      var newPosition = {
-        left: offsetLeft,
-        top: offsetTop
-      };
-      this.setState(newPosition);
-      this.props.onCaretPositionChange(newPosition);
+    if (position.left === offsetLeft && position.top === offsetTop) {
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          selectionStart = _this$props.selectionStart,
-          selectionEnd = _this$props.selectionEnd,
-          value = _this$props.value,
-          style = _this$props.style,
-          children = _this$props.children,
-          containerRef = _this$props.containerRef;
-      var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
 
-      var caretPositionInMarkup;
+    var newPosition = {
+      left: offsetLeft,
+      top: offsetTop
+    };
+    setPosition(newPosition);
+    onCaretPositionChange(newPosition);
+  };
 
-      if (selectionStart === selectionEnd) {
-        caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
-      }
+  var config = readConfigFromChildren(children);
+  var caretPositionInMarkup;
 
-      var resultComponents = [];
-      var componentKeys = {}; // start by appending directly to the resultComponents
+  if (selectionEnd === selectionStart) {
+    caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
+  }
 
-      var components = resultComponents;
-      var substringComponentKey = 0;
+  var resultComponents = [];
+  var componentKeys = {};
+  var components = resultComponents;
+  var substringComponentKey = 0;
+
+  var textIteratee = function textIteratee(substr, index, indexInPlainText) {
+    // check whether the caret element has to be inserted inside the current plain substring
+    if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
+      // if yes, split substr at the caret position and insert the caret component
+      var splitIndex = caretPositionInMarkup - index;
+      components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
+
+      components = [renderSubstring(substr.substring(splitIndex), substringComponentKey)];
+    } else {
+      components.push(renderSubstring(substr, substringComponentKey));
+    }
 
-      var textIteratee = function textIteratee(substr, index, indexInPlainText) {
-        // check whether the caret element has to be inserted inside the current plain substring
-        if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
-          // if yes, split substr at the caret position and insert the caret component
-          var splitIndex = caretPositionInMarkup - index;
-          components.push(_this2.renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
+    substringComponentKey++;
+  };
 
-          components = [_this2.renderSubstring(substr.substring(splitIndex), substringComponentKey)];
-        } else {
-          // otherwise just push the plain text substring
-          components.push(_this2.renderSubstring(substr, substringComponentKey));
-        }
+  var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
+    var key = _generateComponentKey(componentKeys, id);
 
-        substringComponentKey++;
-      };
+    components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
+  };
 
-      var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
-        // generate a component key based on the id
-        var key = _generateComponentKey(componentKeys, id);
+  var renderSubstring = function renderSubstring(string, key) {
+    // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
+    return /*#__PURE__*/React.createElement("span", _extends({}, style('substring'), {
+      key: key
+    }), string);
+  };
 
-        components.push(_this2.getMentionComponentForMatch(id, display, mentionChildIndex, key));
-      };
+  var getMentionComponentForMatch = function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
+    var props = {
+      id: id,
+      display: display,
+      key: key
+    };
+    var child = Children.toArray(children)[mentionChildIndex];
+    return /*#__PURE__*/React.cloneElement(child, props);
+  };
 
-      iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
+  var renderHighlighterCaret = function renderHighlighterCaret(children) {
+    return /*#__PURE__*/React.createElement("span", _extends({}, style('caret'), {
+      ref: setCaretElement,
+      key: "caret"
+    }), children);
+  };
 
-      components.push(' ');
+  iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
 
-      if (components !== resultComponents) {
-        // if a caret component is to be rendered, add all components that followed as its children
-        resultComponents.push(this.renderHighlighterCaret(components));
-      }
+  components.push(' ');
 
-      return /*#__PURE__*/React.createElement("div", _extends({}, style, {
-        ref: containerRef
-      }), resultComponents);
-    }
-  }, {
-    key: "renderSubstring",
-    value: function renderSubstring(string, key) {
-      // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
-      return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('substring'), {
-        key: key
-      }), string);
-    } // Returns a clone of the Mention child applicable for the specified type to be rendered inside the highlighter
-
-  }, {
-    key: "getMentionComponentForMatch",
-    value: function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
-      var props = {
-        id: id,
-        display: display,
-        key: key
-      };
-      var child = Children.toArray(this.props.children)[mentionChildIndex];
-      return /*#__PURE__*/React.cloneElement(child, props);
-    } // Renders an component to be inserted in the highlighter at the current caret position
-
-  }, {
-    key: "renderHighlighterCaret",
-    value: function renderHighlighterCaret(children) {
-      return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('caret'), {
-        ref: this.setCaretElement,
-        key: "caret"
-      }), children);
-    }
-  }]);
+  if (components !== resultComponents) {
+    // if a caret component is to be rendered, add all components that followed as its children
+    resultComponents.push(renderHighlighterCaret(components));
+  }
 
-  return Highlighter;
-}(Component);
+  return /*#__PURE__*/React.createElement("div", _extends({}, style, {
+    ref: containerRef
+  }), resultComponents);
+}
 
-_defineProperty(Highlighter, "propTypes", {
+Highlighter.propTypes = {
   selectionStart: PropTypes.number,
   selectionEnd: PropTypes.number,
   value: PropTypes.string.isRequired,
@@ -854,12 +827,7 @@ _defineProperty(Highlighter, "propTypes", {
     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
   })]),
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
-});
-
-_defineProperty(Highlighter, "defaultProps", {
-  value: ''
-});
-
+};
 var styled = createDefaultStyle({
   position: 'relative',
   boxSizing: 'border-box',
@@ -981,162 +949,145 @@ function LoadingIndicator(_ref) {
 
 var defaultstyle = {};
 
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function SuggestionsOverlay(_ref) {
+  var id = _ref.id,
+      _ref$suggestions = _ref.suggestions,
+      suggestions = _ref$suggestions === void 0 ? {} : _ref$suggestions,
+      a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel,
+      focusIndex = _ref.focusIndex,
+      position = _ref.position,
+      left = _ref.left,
+      right = _ref.right,
+      top = _ref.top,
+      scrollFocusedIntoView = _ref.scrollFocusedIntoView,
+      isLoading = _ref.isLoading,
+      isOpened = _ref.isOpened,
+      _ref$onSelect = _ref.onSelect,
+      onSelect = _ref$onSelect === void 0 ? function () {
+    return null;
+  } : _ref$onSelect,
+      ignoreAccents = _ref.ignoreAccents,
+      containerRef = _ref.containerRef,
+      children = _ref.children,
+      style = _ref.style,
+      customSuggestionsContainer = _ref.customSuggestionsContainer,
+      onMouseDown = _ref.onMouseDown,
+      onMouseEnter = _ref.onMouseEnter;
+
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      ulElement = _useState2[0],
+      setUlElement = _useState2[1];
+
+  useEffect(function () {
+    if (!ulElement || ulElement.offsetHeight >= ulElement.scrollHeight || !scrollFocusedIntoView) {
+      return;
+    }
 
-var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
-  _inherits(SuggestionsOverlay, _Component);
+    var scrollTop = ulElement.scrollTop;
 
-  var _super = _createSuper$1(SuggestionsOverlay);
+    var _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(),
+        top = _ulElement$children$f.top,
+        bottom = _ulElement$children$f.bottom;
 
-  function SuggestionsOverlay() {
-    var _this;
+    var _ulElement$getBoundin = ulElement.getBoundingClientRect(),
+        topContainer = _ulElement$getBoundin.top;
 
-    _classCallCheck(this, SuggestionsOverlay);
+    top = top - topContainer + scrollTop;
+    bottom = bottom - topContainer + scrollTop;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (top < scrollTop) {
+      ulElement.scrollTop = top;
+    } else if (bottom > ulElement.offsetHeight) {
+      ulElement.scrollTop = bottom - ulElement.offsetHeight;
     }
+  }, [focusIndex, scrollFocusedIntoView, ulElement]);
 
-    _this = _super.call.apply(_super, [this].concat(args));
+  var renderSuggestions = function renderSuggestions() {
+    var suggestionsToRender = /*#__PURE__*/React.createElement("ul", _extends({
+      ref: setUlElement,
+      id: id,
+      role: "listbox",
+      "aria-label": a11ySuggestionsListLabel
+    }, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
+      var results = _ref2.results,
+          queryInfo = _ref2.queryInfo;
+      return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
+        return renderSuggestion(result, queryInfo, accResults.length + index);
+      })));
+    }, []));
+    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
+    return suggestionsToRender;
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
-      if (_this.props.onMouseEnter) {
-        _this.props.onMouseEnter(index);
+  var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
+    var isFocused = index === focusIndex;
+    var childIndex = queryInfo.childIndex,
+        query = queryInfo.query;
+    var renderSuggestion = Children.toArray(children)[childIndex].props.renderSuggestion;
+    return /*#__PURE__*/React.createElement(Suggestion$1, {
+      style: style('item'),
+      key: "".concat(childIndex, "-").concat(getID(result)),
+      id: getSuggestionHtmlId(id, index),
+      query: query,
+      index: index,
+      ignoreAccents: ignoreAccents,
+      renderSuggestion: renderSuggestion,
+      suggestion: result,
+      focused: isFocused,
+      onClick: function onClick() {
+        return select(result, queryInfo);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return handleMouseEnter(index);
       }
     });
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "select", function (suggestion, queryInfo) {
-      _this.props.onSelect(suggestion, queryInfo);
-    });
+  var renderLoadingIndicator = function renderLoadingIndicator() {
+    if (!isLoading) {
+      return;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "setUlElement", function (el) {
-      _this.ulElement = el;
+    return /*#__PURE__*/React.createElement(LoadingIndicator, {
+      style: style('loadingIndicator')
     });
+  };
 
-    return _this;
-  }
-
-  _createClass(SuggestionsOverlay, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
-        return;
-      }
-
-      var scrollTop = this.ulElement.scrollTop;
-
-      var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
-          top = _this$ulElement$child.top,
-          bottom = _this$ulElement$child.bottom;
-
-      var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
-          topContainer = _this$ulElement$getBo.top;
-
-      top = top - topContainer + scrollTop;
-      bottom = bottom - topContainer + scrollTop;
-
-      if (top < scrollTop) {
-        this.ulElement.scrollTop = top;
-      } else if (bottom > this.ulElement.offsetHeight) {
-        this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
-      }
+  var handleMouseEnter = function handleMouseEnter(index, ev) {
+    if (onMouseEnter) {
+      onMouseEnter(index);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel,
-          isOpened = _this$props.isOpened,
-          style = _this$props.style,
-          onMouseDown = _this$props.onMouseDown,
-          containerRef = _this$props.containerRef,
-          position = _this$props.position,
-          left = _this$props.left,
-          right = _this$props.right,
-          top = _this$props.top; // do not show suggestions until there is some data
-
-      if (!isOpened) {
-        return null;
-      }
+  };
 
-      return /*#__PURE__*/React.createElement("div", _extends({}, inline({
-        position: position || 'absolute',
-        left: left,
-        right: right,
-        top: top
-      }, style), {
-        onMouseDown: onMouseDown,
-        ref: containerRef
-      }), /*#__PURE__*/React.createElement("ul", _extends({
-        ref: this.setUlElement,
-        id: id,
-        role: "listbox",
-        "aria-label": a11ySuggestionsListLabel
-      }, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
-    }
-  }, {
-    key: "renderSuggestions",
-    value: function renderSuggestions() {
-      var _this2 = this;
+  var select = function select(suggestion, queryInfo) {
+    onSelect(suggestion, queryInfo);
+  };
 
-      var customSuggestionsContainer = this.props.customSuggestionsContainer;
-      var suggestions = Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
-        var results = _ref.results,
-            queryInfo = _ref.queryInfo;
-        return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
-          return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
-        })));
-      }, []);
-      if (customSuggestionsContainer) return customSuggestionsContainer(suggestions);else return suggestions;
-    }
-  }, {
-    key: "renderSuggestion",
-    value: function renderSuggestion(result, queryInfo, index) {
-      var _this3 = this;
-
-      var isFocused = index === this.props.focusIndex;
-      var childIndex = queryInfo.childIndex,
-          query = queryInfo.query;
-      var renderSuggestion = Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
-      var ignoreAccents = this.props.ignoreAccents;
-      return /*#__PURE__*/React.createElement(Suggestion$1, {
-        style: this.props.style('item'),
-        key: "".concat(childIndex, "-").concat(getID(result)),
-        id: getSuggestionHtmlId(this.props.id, index),
-        query: query,
-        index: index,
-        ignoreAccents: ignoreAccents,
-        renderSuggestion: renderSuggestion,
-        suggestion: result,
-        focused: isFocused,
-        onClick: function onClick() {
-          return _this3.select(result, queryInfo);
-        },
-        onMouseEnter: function onMouseEnter() {
-          return _this3.handleMouseEnter(index);
-        }
-      });
+  var getID = function getID(suggestion) {
+    if (typeof suggestion === 'string') {
+      return suggestion;
     }
-  }, {
-    key: "renderLoadingIndicator",
-    value: function renderLoadingIndicator() {
-      if (!this.props.isLoading) {
-        return;
-      }
 
-      return /*#__PURE__*/React.createElement(LoadingIndicator, {
-        style: this.props.style('loadingIndicator')
-      });
-    }
-  }]);
+    return suggestion.id;
+  };
+
+  if (!isOpened) {
+    return null;
+  }
 
-  return SuggestionsOverlay;
-}(Component);
+  return /*#__PURE__*/React.createElement("div", _extends({}, inline({
+    position: position || 'absolute',
+    left: left,
+    right: right,
+    top: top
+  }, style), {
+    onMouseDown: onMouseDown,
+    ref: containerRef
+  }), renderSuggestions(), renderLoadingIndicator());
+}
 
-_defineProperty(SuggestionsOverlay, "propTypes", {
+SuggestionsOverlay.propTypes = {
   id: PropTypes.string.isRequired,
   suggestions: PropTypes.object.isRequired,
   a11ySuggestionsListLabel: PropTypes.string,
@@ -1150,27 +1101,11 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
   isOpened: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
   ignoreAccents: PropTypes.bool,
+  customSuggestionsContainer: PropTypes.func,
   containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
-  })]),
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
-});
-
-_defineProperty(SuggestionsOverlay, "defaultProps", {
-  suggestions: {},
-  onSelect: function onSelect() {
-    return null;
-  }
-});
-
-var getID = function getID(suggestion) {
-  if (typeof suggestion === 'string') {
-    return suggestion;
-  }
-
-  return suggestion.id;
+  })])
 };
-
 var styled$2 = createDefaultStyle({
   zIndex: 1,
   backgroundColor: 'white',
@@ -1184,13 +1119,13 @@ var styled$2 = createDefaultStyle({
 });
 var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var makeTriggerRegex = function makeTriggerRegex(trigger) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -1262,7 +1197,7 @@ var propTypes = {
 var MentionsInput = /*#__PURE__*/function (_React$Component) {
   _inherits(MentionsInput, _React$Component);
 
-  var _super = _createSuper$2(MentionsInput);
+  var _super = _createSuper(MentionsInput);
 
   function MentionsInput(_props) {
     var _this;
@@ -1283,7 +1218,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
         value: _this.getPlainText(),
         onScroll: _this.updateHighlighterScroll
       }, !readOnly && !disabled && {
@@ -1322,6 +1257,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
       return /*#__PURE__*/React.createElement("textarea", _extends({
+        autoFocus: true,
         ref: _this.setInputRef
       }, props));
     });
@@ -1826,7 +1762,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
       // won't overwrite each other
 
-      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1931,7 +1867,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       selectionEnd: null,
       suggestions: {},
       caretPosition: null,
-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: false
     };
     return _this;
   }
@@ -1961,6 +1898,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
         });
         this.setSelection(this.state.selectionStart, this.state.selectionEnd);
       }
+
+      if (this.state.setSelectionAfterHandlePaste) {
+        this.setState({
+          setSelectionAfterHandlePaste: false
+        });
+        this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -1985,9 +1929,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (!this.supportsClipboardActions(event)) {
         return;
-      }
+      } // event.preventDefault()
+
 
-      event.preventDefault();
       var _this$state3 = this.state,
           selectionStart = _this$state3.selectionStart,
           selectionEnd = _this$state3.selectionEnd;
@@ -2002,7 +1946,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newValue
         })
       };
@@ -2010,7 +1954,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
       var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
-      this.setSelection(nextPos, nextPos);
+      this.setState({
+        selectionStart: nextPos,
+        selectionEnd: nextPos,
+        setSelectionAfterHandlePaste: true
+      });
     }
   }, {
     key: "saveSelectionToClipboard",
@@ -2072,7 +2020,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2129,7 +2077,7 @@ var styled$3 = createDefaultStyle({
     letterSpacing: 'inherit'
   },
   '&multiLine': {
-    input: _objectSpread({
+    input: _objectSpread$1({
       height: '100%',
       bottom: 0,
       overflow: 'hidden',