react-mentions 4.3.2 → 4.4.0

package/README.md

@@ -65,6 +65,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | inputRef                    | React ref                                               | undefined      | Accepts a React ref to forward to the underlying input element                         |
 | allowSuggestionsAboveCursor | boolean                                                 | false          | Renders the SuggestionList above the cursor if there is not enough space below         |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
+| customSuggestionsContainer    | function(children)                                                  | empty function | Allows customizing the container of the suggestions            |
 
 Each data source is configured using a `Mention` component, which has the following props:
 

package/dist/react-mentions.cjs.dev.js

@@ -8,10 +8,10 @@ var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsu
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
-var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
+var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
+var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var React = require('react');
 var React__default = _interopDefault(React);
@@ -659,13 +659,15 @@ var omit = function omit(obj) {
   }, {});
 };
 
+var _excluded = ["style", "className", "classNames"];
+
 function createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
       var style = _ref.style,
           className = _ref.className,
           classNames = _ref.classNames,
-          rest = _objectWithoutProperties(_ref, ["style", "className", "classNames"]);
+          rest = _objectWithoutProperties(_ref, _excluded);
 
       var modifiers = getModifiers ? getModifiers(rest) : undefined;
       var styles = useStyles__default(defaultStyle, {
@@ -673,7 +675,7 @@ function createDefaultStyle(defaultStyle, getModifiers) {
         className: className,
         classNames: classNames
       }, modifiers);
-      return React__default.createElement(ComponentToWrap, _extends({}, rest, {
+      return /*#__PURE__*/React__default.createElement(ComponentToWrap, _extends({}, rest, {
         style: styles
       }));
     };
@@ -686,6 +688,10 @@ function createDefaultStyle(defaultStyle, getModifiers) {
   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;
@@ -696,17 +702,17 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   return id + '_' + usedKeys[id];
 };
 
-var Highlighter =
-/*#__PURE__*/
-function (_Component) {
+var Highlighter = /*#__PURE__*/function (_Component) {
   _inherits(Highlighter, _Component);
 
+  var _super = _createSuper(Highlighter);
+
   function Highlighter() {
     var _this;
 
     _classCallCheck(this, Highlighter);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
+    _this = _super.apply(this, arguments);
 
     _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
       _this.caretElement = el;
@@ -809,7 +815,7 @@ function (_Component) {
         resultComponents.push(this.renderHighlighterCaret(components));
       }
 
-      return React__default.createElement("div", _extends({}, style, {
+      return /*#__PURE__*/React__default.createElement("div", _extends({}, style, {
         ref: containerRef
       }), resultComponents);
     }
@@ -817,7 +823,7 @@ function (_Component) {
     key: "renderSubstring",
     value: function renderSubstring(string, key) {
       // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
-      return React__default.createElement("span", _extends({}, this.props.style('substring'), {
+      return /*#__PURE__*/React__default.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
@@ -831,13 +837,13 @@ function (_Component) {
         key: key
       };
       var child = React.Children.toArray(this.props.children)[mentionChildIndex];
-      return React__default.cloneElement(child, props);
+      return /*#__PURE__*/React__default.cloneElement(child, props);
     } // Renders an component to be inserted in the highlighter at the current caret position
 
   }, {
     key: "renderHighlighterCaret",
     value: function renderHighlighterCaret(children) {
-      return React__default.createElement("span", _extends({}, this.props.style('caret'), {
+      return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('caret'), {
         ref: this.setCaretElement,
         key: "caret"
       }), children);
@@ -886,15 +892,19 @@ var styled = createDefaultStyle({
 });
 var Highlighter$1 = styled(Highlighter);
 
-var Suggestion =
-/*#__PURE__*/
-function (_Component) {
+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; } }
+
+var Suggestion = /*#__PURE__*/function (_Component) {
   _inherits(Suggestion, _Component);
 
+  var _super = _createSuper$1(Suggestion);
+
   function Suggestion() {
     _classCallCheck(this, Suggestion);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(Suggestion, [{
@@ -902,7 +912,7 @@ function (_Component) {
     value: function render() {
       var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
       keys(Suggestion.propTypes));
-      return React__default.createElement("li", _extends({
+      return /*#__PURE__*/React__default.createElement("li", _extends({
         id: this.props.id,
         role: "option",
         "aria-selected": this.props.focused
@@ -954,10 +964,10 @@ function (_Component) {
       var i = getSubstringIndex(display, query, ignoreAccents);
 
       if (i === -1) {
-        return React__default.createElement("span", style('display'), display);
+        return /*#__PURE__*/React__default.createElement("span", style('display'), display);
       }
 
-      return React__default.createElement("span", style('display'), display.substring(0, i), React__default.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
+      return /*#__PURE__*/React__default.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React__default.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
     }
   }]);
 
@@ -989,17 +999,19 @@ var Suggestion$1 = styled$1(Suggestion);
 function LoadingIndicator() {
   var styles = useStyles__default();
   var spinnerStyles = styles('spinner');
-  return React__default.createElement("div", styles, React__default.createElement("div", spinnerStyles, React__default.createElement("div", spinnerStyles(['element', 'element1'])), React__default.createElement("div", spinnerStyles(['element', 'element2'])), React__default.createElement("div", spinnerStyles(['element', 'element3'])), React__default.createElement("div", spinnerStyles(['element', 'element4'])), React__default.createElement("div", spinnerStyles(['element', 'element5']))));
+  return /*#__PURE__*/React__default.createElement("div", styles, /*#__PURE__*/React__default.createElement("div", spinnerStyles, /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element5']))));
 }
 
-var SuggestionsOverlay =
-/*#__PURE__*/
-function (_Component) {
+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 _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; } }
+
+var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
   _inherits(SuggestionsOverlay, _Component);
 
-  function SuggestionsOverlay() {
-    var _getPrototypeOf2;
+  var _super = _createSuper$2(SuggestionsOverlay);
 
+  function SuggestionsOverlay() {
     var _this;
 
     _classCallCheck(this, SuggestionsOverlay);
@@ -1008,7 +1020,7 @@ function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
       if (_this.props.onMouseEnter) {
@@ -1071,7 +1083,7 @@ function (_Component) {
         return null;
       }
 
-      return React__default.createElement("div", _extends({}, useStyles.inline({
+      return /*#__PURE__*/React__default.createElement("div", _extends({}, useStyles.inline({
         position: position || 'absolute',
         left: left,
         right: right,
@@ -1079,7 +1091,7 @@ function (_Component) {
       }, style), {
         onMouseDown: onMouseDown,
         ref: containerRef
-      }), React__default.createElement("ul", _extends({
+      }), /*#__PURE__*/React__default.createElement("ul", _extends({
         ref: this.setUlElement,
         id: id,
         role: "listbox",
@@ -1091,13 +1103,15 @@ function (_Component) {
     value: function renderSuggestions() {
       var _this2 = this;
 
-      return Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
+      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",
@@ -1109,7 +1123,7 @@ function (_Component) {
           query = queryInfo.query;
       var renderSuggestion = React.Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
       var ignoreAccents = this.props.ignoreAccents;
-      return React__default.createElement(Suggestion$1, {
+      return /*#__PURE__*/React__default.createElement(Suggestion$1, {
         style: this.props.style('item'),
         key: "".concat(childIndex, "-").concat(getID(result)),
         id: getSuggestionHtmlId(this.props.id, index),
@@ -1134,7 +1148,7 @@ function (_Component) {
         return;
       }
 
-      return React__default.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1191,9 +1205,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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); 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$3() { 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] : {};
 
@@ -1251,6 +1269,7 @@ var propTypes = {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -1261,17 +1280,17 @@ var propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
 };
 
-var MentionsInput =
-/*#__PURE__*/
-function (_React$Component) {
+var MentionsInput = /*#__PURE__*/function (_React$Component) {
   _inherits(MentionsInput, _React$Component);
 
+  var _super = _createSuper$3(MentionsInput);
+
   function MentionsInput(_props) {
     var _this;
 
     _classCallCheck(this, MentionsInput);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
+    _this = _super.call(this, _props);
 
     _defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
       _this.containerElement = el;
@@ -1285,7 +1304,7 @@ function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread({}, props, {}, style('input'), {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -1295,7 +1314,7 @@ function (_React$Component) {
         onCompositionStart: _this.handleCompositionStart,
         onCompositionEnd: _this.handleCompositionEnd,
         onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+      }), _this.isOpened() && {
         role: 'combobox',
         'aria-controls': _this.uuidSuggestionsOverlay,
         'aria-expanded': true,
@@ -1312,18 +1331,18 @@ function (_React$Component) {
 
       var inputProps = _this.getInputProps();
 
-      return React__default.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
+      return /*#__PURE__*/React__default.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
-      return React__default.createElement("input", _extends({
+      return /*#__PURE__*/React__default.createElement("input", _extends({
         type: "text",
         ref: _this.setInputRef
       }, props));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
-      return React__default.createElement("textarea", _extends({
+      return /*#__PURE__*/React__default.createElement("textarea", _extends({
         ref: _this.setInputRef
       }, props));
     });
@@ -1354,7 +1373,7 @@ function (_React$Component) {
           left = _this$state$suggestio.left,
           top = _this$state$suggestio.top,
           right = _this$state$suggestio.right;
-      var suggestionsNode = React__default.createElement(SuggestionsOverlay$1, {
+      var suggestionsNode = /*#__PURE__*/React__default.createElement(SuggestionsOverlay$1, {
         id: _this.uuidSuggestionsOverlay,
         style: _this.props.style('suggestions'),
         position: position,
@@ -1365,6 +1384,7 @@ function (_React$Component) {
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
         containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
+        customSuggestionsContainer: _this.props.customSuggestionsContainer,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
         onMouseEnter: _this.handleSuggestionsMouseEnter,
@@ -1375,7 +1395,7 @@ function (_React$Component) {
       }, _this.props.children);
 
       if (_this.props.suggestionsPortalHost) {
-        return ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
+        return /*#__PURE__*/ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
       } else {
         return suggestionsNode;
       }
@@ -1390,7 +1410,7 @@ function (_React$Component) {
           children = _this$props3.children,
           value = _this$props3.value,
           style = _this$props3.style;
-      return React__default.createElement(Highlighter$1, {
+      return /*#__PURE__*/React__default.createElement(Highlighter$1, {
         containerRef: _this.setHighlighterElement,
         style: style('highlighter'),
         value: value,
@@ -1467,7 +1487,7 @@ function (_React$Component) {
 
       if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
         // only if a deletion has taken place
-        selectionStart = startOfMention;
+        selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
         selectionEnd = selectionStart;
         setSelectionAfterMentionChange = true;
       }
@@ -1827,7 +1847,7 @@ 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({}, _this.suggestions, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1973,7 +1993,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React__default.createElement("div", _extends({
+      return /*#__PURE__*/React__default.createElement("div", _extends({
         ref: this.setContainerElement
       }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
     }
@@ -2003,7 +2023,7 @@ function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newValue
         })
       };
@@ -2016,9 +2036,10 @@ function (_React$Component) {
   }, {
     key: "saveSelectionToClipboard",
     value: function saveSelectionToClipboard(event) {
-      var _this$state4 = this.state,
-          selectionStart = _this$state4.selectionStart,
-          selectionEnd = _this$state4.selectionEnd;
+      // use the actual selectionStart & selectionEnd instead of the one stored
+      // in state to ensure copy & paste also works on disabled inputs & textareas
+      var selectionStart = this.inputElement.selectionStart;
+      var selectionEnd = this.inputElement.selectionEnd;
       var _this$props8 = this.props,
           children = _this$props8.children,
           value = _this$props8.value;
@@ -2060,9 +2081,9 @@ function (_React$Component) {
 
       event.preventDefault();
       this.saveSelectionToClipboard(event);
-      var _this$state5 = this.state,
-          selectionStart = _this$state5.selectionStart,
-          selectionEnd = _this$state5.selectionEnd;
+      var _this$state4 = this.state,
+          selectionStart = _this$state4.selectionStart,
+          selectionEnd = _this$state4.selectionEnd;
       var _this$props9 = this.props,
           children = _this$props9.children,
           value = _this$props9.value;
@@ -2072,7 +2093,7 @@ function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2162,7 +2183,7 @@ var Mention = function Mention(_ref) {
     className: className,
     classNames: classNames
   });
-  return React__default.createElement("strong", styles, display);
+  return /*#__PURE__*/React__default.createElement("strong", styles, display);
 };
 
 Mention.propTypes = {

package/dist/react-mentions.cjs.prod.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: !0
 });
 
-var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), _assertThisInitialized = _interopDefault(require("@babel/runtime/helpers/assertThisInitialized")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), React__default = _interopDefault(React), invariant = _interopDefault(require("invariant")), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), useStyles = require("substyle"), useStyles__default = _interopDefault(useStyles), PropTypes = _interopDefault(require("prop-types")), ReactDOM = _interopDefault(require("react-dom")), escapeRegex = function(str) {
+var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _assertThisInitialized = _interopDefault(require("@babel/runtime/helpers/assertThisInitialized")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), React__default = _interopDefault(React), invariant = _interopDefault(require("invariant")), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), useStyles = require("substyle"), useStyles__default = _interopDefault(useStyles), PropTypes = _interopDefault(require("prop-types")), ReactDOM = _interopDefault(require("react-dom")), escapeRegex = function(str) {
   return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 }, PLACEHOLDERS = {
   id: "__id__",
@@ -418,12 +418,12 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
     return obj.hasOwnProperty(k) && !keys.includes(k) && void 0 !== obj[k] && (acc[k] = obj[k]), 
     acc;
   }, {});
-};
+}, _excluded = [ "style", "className", "classNames" ];
 
 function createDefaultStyle(defaultStyle, getModifiers) {
   return function(ComponentToWrap) {
     var DefaultStyleEnhancer = function(_ref) {
-      var style = _ref.style, className = _ref.className, classNames = _ref.classNames, rest = _objectWithoutProperties(_ref, [ "style", "className", "classNames" ]), modifiers = getModifiers ? getModifiers(rest) : void 0, styles = useStyles__default(defaultStyle, {
+      var style = _ref.style, className = _ref.className, classNames = _ref.classNames, rest = _objectWithoutProperties(_ref, _excluded), modifiers = getModifiers ? getModifiers(rest) : void 0, styles = useStyles__default(defaultStyle, {
         style: style,
         className: className,
         classNames: classNames
@@ -437,12 +437,38 @@ function createDefaultStyle(defaultStyle, getModifiers) {
   };
 }
 
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    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 ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var _generateComponentKey = function(usedKeys, id) {
   return usedKeys.hasOwnProperty(id) ? usedKeys[id]++ : usedKeys[id] = 0, id + "_" + usedKeys[id];
 }, Highlighter = function(_Component) {
+  _inherits(Highlighter, _Component);
+  var _super = _createSuper(Highlighter);
   function Highlighter() {
     var _this;
-    return _classCallCheck(this, Highlighter), _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments)), 
+    return _classCallCheck(this, Highlighter), _this = _super.apply(this, arguments), 
     _defineProperty(_assertThisInitialized(_this), "setCaretElement", function(el) {
       _this.caretElement = el;
     }), _this.state = {
@@ -450,7 +476,7 @@ var _generateComponentKey = function(usedKeys, id) {
       top: void 0
     }, _this;
   }
-  return _inherits(Highlighter, _Component), _createClass(Highlighter, [ {
+  return _createClass(Highlighter, [ {
     key: "componentDidMount",
     value: function() {
       this.notifyCaretPosition();
@@ -557,11 +583,39 @@ var styled = createDefaultStyle({
   return {
     "&singleLine": props.singleLine
   };
-}), Highlighter$1 = styled(Highlighter), Suggestion = function(_Component) {
+}), Highlighter$1 = styled(Highlighter);
+
+function _createSuper$1(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    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 ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
+var Suggestion = function(_Component) {
+  _inherits(Suggestion, _Component);
+  var _super = _createSuper$1(Suggestion);
   function Suggestion() {
-    return _classCallCheck(this, Suggestion), _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
+    return _classCallCheck(this, Suggestion), _super.apply(this, arguments);
   }
-  return _inherits(Suggestion, _Component), _createClass(Suggestion, [ {
+  return _createClass(Suggestion, [ {
     key: "render",
     value: function() {
       var rest = omit(this.props, [ "style", "classNames", "className" ], keys(Suggestion.propTypes));
@@ -620,13 +674,38 @@ function LoadingIndicator() {
   return React__default.createElement("div", styles, React__default.createElement("div", spinnerStyles, React__default.createElement("div", spinnerStyles([ "element", "element1" ])), React__default.createElement("div", spinnerStyles([ "element", "element2" ])), React__default.createElement("div", spinnerStyles([ "element", "element3" ])), React__default.createElement("div", spinnerStyles([ "element", "element4" ])), React__default.createElement("div", spinnerStyles([ "element", "element5" ]))));
 }
 
+function _createSuper$2(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$2();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    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 ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var SuggestionsOverlay = function(_Component) {
+  _inherits(SuggestionsOverlay, _Component);
+  var _super = _createSuper$2(SuggestionsOverlay);
   function SuggestionsOverlay() {
-    var _getPrototypeOf2, _this;
+    var _this;
     _classCallCheck(this, SuggestionsOverlay);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    return _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [ this ].concat(args))), 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
+    return _this = _super.call.apply(_super, [ this ].concat(args)), _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
       _this.props.onMouseEnter && _this.props.onMouseEnter(index);
     }), _defineProperty(_assertThisInitialized(_this), "select", function(suggestion, queryInfo) {
       _this.props.onSelect(suggestion, queryInfo);
@@ -634,7 +713,7 @@ var SuggestionsOverlay = function(_Component) {
       _this.ulElement = el;
     }), _this;
   }
-  return _inherits(SuggestionsOverlay, _Component), _createClass(SuggestionsOverlay, [ {
+  return _createClass(SuggestionsOverlay, [ {
     key: "componentDidUpdate",
     value: function() {
       if (this.ulElement && !(this.ulElement.offsetHeight >= this.ulElement.scrollHeight) && this.props.scrollFocusedIntoView) {
@@ -664,13 +743,13 @@ var SuggestionsOverlay = function(_Component) {
   }, {
     key: "renderSuggestions",
     value: function() {
-      var _this2 = this;
-      return Object.values(this.props.suggestions).reduce(function(accResults, _ref) {
+      var _this2 = this, customSuggestionsContainer = this.props.customSuggestionsContainer, 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);
         })));
       }, []);
+      return customSuggestionsContainer ? customSuggestionsContainer(suggestions) : suggestions;
     }
   }, {
     key: "renderSuggestion",
@@ -757,15 +836,39 @@ function ownKeys(object, enumerableOnly) {
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(source, !0).forEach(function(key) {
+    i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
       _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(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 _createSuper$3(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$3();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    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$3() {
+  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var makeTriggerRegex = function(trigger) {
   var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
   if (trigger instanceof RegExp) return trigger;
@@ -794,6 +897,7 @@ var makeTriggerRegex = function(trigger) {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -803,14 +907,16 @@ var makeTriggerRegex = function(trigger) {
   }) ]),
   children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
 }, MentionsInput = function(_React$Component) {
+  _inherits(MentionsInput, _React$Component);
+  var _super = _createSuper$3(MentionsInput);
   function MentionsInput(_props) {
     var _this;
-    return _classCallCheck(this, MentionsInput), _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props)), 
+    return _classCallCheck(this, MentionsInput), _this = _super.call(this, _props), 
     _defineProperty(_assertThisInitialized(_this), "setContainerElement", function(el) {
       _this.containerElement = el;
     }), _defineProperty(_assertThisInitialized(_this), "getInputProps", function() {
       var _this$props = _this.props, readOnly = _this$props.readOnly, disabled = _this$props.disabled, style = _this$props.style;
-      return _objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes)), {}, style("input"), {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -820,7 +926,7 @@ var makeTriggerRegex = function(trigger) {
         onCompositionStart: _this.handleCompositionStart,
         onCompositionEnd: _this.handleCompositionEnd,
         onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+      }), _this.isOpened() && {
         role: "combobox",
         "aria-controls": _this.uuidSuggestionsOverlay,
         "aria-expanded": !0,
@@ -859,6 +965,7 @@ var makeTriggerRegex = function(trigger) {
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
         containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
+        customSuggestionsContainer: _this.props.customSuggestionsContainer,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
         onMouseEnter: _this.handleSuggestionsMouseEnter,
@@ -900,7 +1007,7 @@ var makeTriggerRegex = function(trigger) {
       }, config);
       newPlainTextValue = getPlainText(newValue, config);
       var selectionStart = ev.target.selectionStart, selectionEnd = ev.target.selectionEnd, setSelectionAfterMentionChange = !1, startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
-      void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (selectionEnd = selectionStart = startOfMention, 
+      void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (selectionEnd = selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0), 
       setSelectionAfterMentionChange = !0), _this.setState({
         selectionStart: selectionStart,
         selectionEnd: selectionEnd,
@@ -1045,7 +1152,7 @@ var makeTriggerRegex = function(trigger) {
       syncResult instanceof Array && _this.updateSuggestions(_this._queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, syncResult);
     }), _defineProperty(_assertThisInitialized(_this), "updateSuggestions", function(queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, results) {
       if (queryId === _this._queryId) {
-        _this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
+        _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
           queryInfo: {
             childIndex: childIndex,
             query: query,
@@ -1100,7 +1207,7 @@ var makeTriggerRegex = function(trigger) {
       suggestionsPosition: {}
     }, _this;
   }
-  return _inherits(MentionsInput, _React$Component), _createClass(MentionsInput, [ {
+  return _createClass(MentionsInput, [ {
     key: "componentDidMount",
     value: function() {
       document.addEventListener("copy", this.handleCopy), document.addEventListener("cut", this.handleCut), 
@@ -1133,7 +1240,7 @@ var makeTriggerRegex = function(trigger) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
         event.preventDefault();
         var _this$state3 = this.state, selectionStart = _this$state3.selectionStart, selectionEnd = _this$state3.selectionEnd, _this$props7 = this.props, value = _this$props7.value, children = _this$props7.children, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), pastedMentions = event.clipboardData.getData("text/react-mentions"), pastedData = event.clipboardData.getData("text/plain"), newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, ""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread({}, event.target, {
+          target: _objectSpread(_objectSpread({}, event.target), {}, {
             value: newValue
           })
         };
@@ -1145,7 +1252,7 @@ var makeTriggerRegex = function(trigger) {
   }, {
     key: "saveSelectionToClipboard",
     value: function(event) {
-      var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props8 = this.props, children = _this$props8.children, value = _this$props8.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END");
+      var selectionStart = this.inputElement.selectionStart, selectionEnd = this.inputElement.selectionEnd, _this$props8 = this.props, children = _this$props8.children, value = _this$props8.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END");
       event.clipboardData.setData("text/plain", event.target.value.slice(selectionStart, selectionEnd)), 
       event.clipboardData.setData("text/react-mentions", value.slice(markupStartIndex, markupEndIndex));
     }
@@ -1165,8 +1272,8 @@ var makeTriggerRegex = function(trigger) {
     value: function(event) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
         event.preventDefault(), this.saveSelectionToClipboard(event);
-        var _this$state5 = this.state, selectionStart = _this$state5.selectionStart, selectionEnd = _this$state5.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread({}, event.target, {
+        var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
+          target: _objectSpread(_objectSpread({}, event.target), {}, {
             value: newPlainTextValue
           })
         };

package/dist/react-mentions.esm.js

@@ -2,10 +2,10 @@ import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 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 invariant from 'invariant';
@@ -651,13 +651,15 @@ var omit = function omit(obj) {
   }, {});
 };
 
+var _excluded = ["style", "className", "classNames"];
+
 function createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
       var style = _ref.style,
           className = _ref.className,
           classNames = _ref.classNames,
-          rest = _objectWithoutProperties(_ref, ["style", "className", "classNames"]);
+          rest = _objectWithoutProperties(_ref, _excluded);
 
       var modifiers = getModifiers ? getModifiers(rest) : undefined;
       var styles = useStyles(defaultStyle, {
@@ -665,7 +667,7 @@ function createDefaultStyle(defaultStyle, getModifiers) {
         className: className,
         classNames: classNames
       }, modifiers);
-      return React.createElement(ComponentToWrap, _extends({}, rest, {
+      return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({}, rest, {
         style: styles
       }));
     };
@@ -678,6 +680,10 @@ function createDefaultStyle(defaultStyle, getModifiers) {
   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;
@@ -688,17 +694,17 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   return id + '_' + usedKeys[id];
 };
 
-var Highlighter =
-/*#__PURE__*/
-function (_Component) {
+var Highlighter = /*#__PURE__*/function (_Component) {
   _inherits(Highlighter, _Component);
 
+  var _super = _createSuper(Highlighter);
+
   function Highlighter() {
     var _this;
 
     _classCallCheck(this, Highlighter);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
+    _this = _super.apply(this, arguments);
 
     _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
       _this.caretElement = el;
@@ -801,7 +807,7 @@ function (_Component) {
         resultComponents.push(this.renderHighlighterCaret(components));
       }
 
-      return React.createElement("div", _extends({}, style, {
+      return /*#__PURE__*/React.createElement("div", _extends({}, style, {
         ref: containerRef
       }), resultComponents);
     }
@@ -809,7 +815,7 @@ function (_Component) {
     key: "renderSubstring",
     value: function renderSubstring(string, key) {
       // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
-      return React.createElement("span", _extends({}, this.props.style('substring'), {
+      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
@@ -823,13 +829,13 @@ function (_Component) {
         key: key
       };
       var child = Children.toArray(this.props.children)[mentionChildIndex];
-      return React.cloneElement(child, props);
+      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 React.createElement("span", _extends({}, this.props.style('caret'), {
+      return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('caret'), {
         ref: this.setCaretElement,
         key: "caret"
       }), children);
@@ -878,15 +884,19 @@ var styled = createDefaultStyle({
 });
 var Highlighter$1 = styled(Highlighter);
 
-var Suggestion =
-/*#__PURE__*/
-function (_Component) {
+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; } }
+
+var Suggestion = /*#__PURE__*/function (_Component) {
   _inherits(Suggestion, _Component);
 
+  var _super = _createSuper$1(Suggestion);
+
   function Suggestion() {
     _classCallCheck(this, Suggestion);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(Suggestion, [{
@@ -894,7 +904,7 @@ function (_Component) {
     value: function render() {
       var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
       keys(Suggestion.propTypes));
-      return React.createElement("li", _extends({
+      return /*#__PURE__*/React.createElement("li", _extends({
         id: this.props.id,
         role: "option",
         "aria-selected": this.props.focused
@@ -946,10 +956,10 @@ function (_Component) {
       var i = getSubstringIndex(display, query, ignoreAccents);
 
       if (i === -1) {
-        return React.createElement("span", style('display'), display);
+        return /*#__PURE__*/React.createElement("span", style('display'), display);
       }
 
-      return React.createElement("span", style('display'), display.substring(0, i), React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
+      return /*#__PURE__*/React.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
     }
   }]);
 
@@ -981,17 +991,19 @@ var Suggestion$1 = styled$1(Suggestion);
 function LoadingIndicator() {
   var styles = useStyles();
   var spinnerStyles = styles('spinner');
-  return React.createElement("div", styles, React.createElement("div", spinnerStyles, React.createElement("div", spinnerStyles(['element', 'element1'])), React.createElement("div", spinnerStyles(['element', 'element2'])), React.createElement("div", spinnerStyles(['element', 'element3'])), React.createElement("div", spinnerStyles(['element', 'element4'])), React.createElement("div", spinnerStyles(['element', 'element5']))));
+  return /*#__PURE__*/React.createElement("div", styles, /*#__PURE__*/React.createElement("div", spinnerStyles, /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element5']))));
 }
 
-var SuggestionsOverlay =
-/*#__PURE__*/
-function (_Component) {
+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 _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; } }
+
+var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
   _inherits(SuggestionsOverlay, _Component);
 
-  function SuggestionsOverlay() {
-    var _getPrototypeOf2;
+  var _super = _createSuper$2(SuggestionsOverlay);
 
+  function SuggestionsOverlay() {
     var _this;
 
     _classCallCheck(this, SuggestionsOverlay);
@@ -1000,7 +1012,7 @@ function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
       if (_this.props.onMouseEnter) {
@@ -1063,7 +1075,7 @@ function (_Component) {
         return null;
       }
 
-      return React.createElement("div", _extends({}, inline({
+      return /*#__PURE__*/React.createElement("div", _extends({}, inline({
         position: position || 'absolute',
         left: left,
         right: right,
@@ -1071,7 +1083,7 @@ function (_Component) {
       }, style), {
         onMouseDown: onMouseDown,
         ref: containerRef
-      }), React.createElement("ul", _extends({
+      }), /*#__PURE__*/React.createElement("ul", _extends({
         ref: this.setUlElement,
         id: id,
         role: "listbox",
@@ -1083,13 +1095,15 @@ function (_Component) {
     value: function renderSuggestions() {
       var _this2 = this;
 
-      return Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
+      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",
@@ -1101,7 +1115,7 @@ function (_Component) {
           query = queryInfo.query;
       var renderSuggestion = Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
       var ignoreAccents = this.props.ignoreAccents;
-      return React.createElement(Suggestion$1, {
+      return /*#__PURE__*/React.createElement(Suggestion$1, {
         style: this.props.style('item'),
         key: "".concat(childIndex, "-").concat(getID(result)),
         id: getSuggestionHtmlId(this.props.id, index),
@@ -1126,7 +1140,7 @@ function (_Component) {
         return;
       }
 
-      return React.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1183,9 +1197,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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); 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$3() { 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] : {};
 
@@ -1243,6 +1261,7 @@ var propTypes = {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -1253,17 +1272,17 @@ var propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
 };
 
-var MentionsInput =
-/*#__PURE__*/
-function (_React$Component) {
+var MentionsInput = /*#__PURE__*/function (_React$Component) {
   _inherits(MentionsInput, _React$Component);
 
+  var _super = _createSuper$3(MentionsInput);
+
   function MentionsInput(_props) {
     var _this;
 
     _classCallCheck(this, MentionsInput);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
+    _this = _super.call(this, _props);
 
     _defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
       _this.containerElement = el;
@@ -1277,7 +1296,7 @@ function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread({}, props, {}, style('input'), {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -1287,7 +1306,7 @@ function (_React$Component) {
         onCompositionStart: _this.handleCompositionStart,
         onCompositionEnd: _this.handleCompositionEnd,
         onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+      }), _this.isOpened() && {
         role: 'combobox',
         'aria-controls': _this.uuidSuggestionsOverlay,
         'aria-expanded': true,
@@ -1304,18 +1323,18 @@ function (_React$Component) {
 
       var inputProps = _this.getInputProps();
 
-      return React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
+      return /*#__PURE__*/React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
-      return React.createElement("input", _extends({
+      return /*#__PURE__*/React.createElement("input", _extends({
         type: "text",
         ref: _this.setInputRef
       }, props));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
-      return React.createElement("textarea", _extends({
+      return /*#__PURE__*/React.createElement("textarea", _extends({
         ref: _this.setInputRef
       }, props));
     });
@@ -1346,7 +1365,7 @@ function (_React$Component) {
           left = _this$state$suggestio.left,
           top = _this$state$suggestio.top,
           right = _this$state$suggestio.right;
-      var suggestionsNode = React.createElement(SuggestionsOverlay$1, {
+      var suggestionsNode = /*#__PURE__*/React.createElement(SuggestionsOverlay$1, {
         id: _this.uuidSuggestionsOverlay,
         style: _this.props.style('suggestions'),
         position: position,
@@ -1357,6 +1376,7 @@ function (_React$Component) {
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
         containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
+        customSuggestionsContainer: _this.props.customSuggestionsContainer,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
         onMouseEnter: _this.handleSuggestionsMouseEnter,
@@ -1367,7 +1387,7 @@ function (_React$Component) {
       }, _this.props.children);
 
       if (_this.props.suggestionsPortalHost) {
-        return ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
+        return /*#__PURE__*/ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
       } else {
         return suggestionsNode;
       }
@@ -1382,7 +1402,7 @@ function (_React$Component) {
           children = _this$props3.children,
           value = _this$props3.value,
           style = _this$props3.style;
-      return React.createElement(Highlighter$1, {
+      return /*#__PURE__*/React.createElement(Highlighter$1, {
         containerRef: _this.setHighlighterElement,
         style: style('highlighter'),
         value: value,
@@ -1459,7 +1479,7 @@ function (_React$Component) {
 
       if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
         // only if a deletion has taken place
-        selectionStart = startOfMention;
+        selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
         selectionEnd = selectionStart;
         setSelectionAfterMentionChange = true;
       }
@@ -1819,7 +1839,7 @@ 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({}, _this.suggestions, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1965,7 +1985,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React.createElement("div", _extends({
+      return /*#__PURE__*/React.createElement("div", _extends({
         ref: this.setContainerElement
       }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
     }
@@ -1995,7 +2015,7 @@ function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newValue
         })
       };
@@ -2008,9 +2028,10 @@ function (_React$Component) {
   }, {
     key: "saveSelectionToClipboard",
     value: function saveSelectionToClipboard(event) {
-      var _this$state4 = this.state,
-          selectionStart = _this$state4.selectionStart,
-          selectionEnd = _this$state4.selectionEnd;
+      // use the actual selectionStart & selectionEnd instead of the one stored
+      // in state to ensure copy & paste also works on disabled inputs & textareas
+      var selectionStart = this.inputElement.selectionStart;
+      var selectionEnd = this.inputElement.selectionEnd;
       var _this$props8 = this.props,
           children = _this$props8.children,
           value = _this$props8.value;
@@ -2052,9 +2073,9 @@ function (_React$Component) {
 
       event.preventDefault();
       this.saveSelectionToClipboard(event);
-      var _this$state5 = this.state,
-          selectionStart = _this$state5.selectionStart,
-          selectionEnd = _this$state5.selectionEnd;
+      var _this$state4 = this.state,
+          selectionStart = _this$state4.selectionStart,
+          selectionEnd = _this$state4.selectionEnd;
       var _this$props9 = this.props,
           children = _this$props9.children,
           value = _this$props9.value;
@@ -2064,7 +2085,7 @@ function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2154,7 +2175,7 @@ var Mention = function Mention(_ref) {
     className: className,
     classNames: classNames
   });
-  return React.createElement("strong", styles, display);
+  return /*#__PURE__*/React.createElement("strong", styles, display);
 };
 
 Mention.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",
@@ -11,7 +11,7 @@
     "build": "preconstruct build",
     "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,test,demo/src}/**/*.js\"",
     "lint": "eslint --max-warnings=0 --ext .js src test demo",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
     "semantic-release": "semantic-release",
     "test": "jest",
     "now-build": "webpack --config demo/webpack.config.js"
@@ -50,7 +50,7 @@
     "babel-eslint": "^7.2.3",
     "babel-loader": "^8.0.6",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "condition-circle": "^2.0.1",
+    "condition-circle": "^2.0.2",
     "core-js": "^3.1.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.0.0",
@@ -74,7 +74,7 @@
     "react-dom": "16.8.6",
     "recompose": "^0.30.0",
     "regenerator-runtime": "^0.13.2",
-    "semantic-release": "^12.4.1",
+    "semantic-release": "^19.0.2",
     "style-loader": "^0.23.1",
     "substyle-jss": "^4.0.1",
     "webpack": "^4.35.2",
@@ -90,8 +90,5 @@
   "peerDependencies": {
     "react": ">=16.8.3",
     "react-dom": ">=16.8.3"
-  },
-  "release": {
-    "verifyConditions": "condition-circle"
   }
 }