react-mentions 4.4.2 → 4.4.6

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,85 +884,68 @@ var styled = createDefaultStyle({
 });
 var Highlighter$1 = styled(Highlighter);
 
-var Suggestion =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Suggestion, _Component);
-
-  function Suggestion() {
-    _classCallCheck(this, Suggestion);
+function Suggestion(_ref) {
+  var id = _ref.id,
+      focused = _ref.focused,
+      ignoreAccents = _ref.ignoreAccents,
+      index = _ref.index,
+      onClick = _ref.onClick,
+      onMouseEnter = _ref.onMouseEnter,
+      query = _ref.query,
+      renderSuggestion = _ref.renderSuggestion,
+      suggestion = _ref.suggestion,
+      style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var rest = {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  };
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
-  }
+  var renderContent = function renderContent() {
+    var display = getDisplay();
+    var highlightedDisplay = renderHighlightedDisplay(display);
 
-  _createClass(Suggestion, [{
-    key: "render",
-    value: function render() {
-      var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
-      keys(Suggestion.propTypes));
-      return React.createElement("li", _extends({
-        id: this.props.id,
-        role: "option",
-        "aria-selected": this.props.focused
-      }, rest, this.props.style), this.renderContent());
+    if (renderSuggestion) {
+      return renderSuggestion(suggestion, query, highlightedDisplay, index, focused);
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var _this$props = this.props,
-          query = _this$props.query,
-          renderSuggestion = _this$props.renderSuggestion,
-          suggestion = _this$props.suggestion,
-          index = _this$props.index,
-          focused = _this$props.focused;
-      var display = this.getDisplay();
-      var highlightedDisplay = this.renderHighlightedDisplay(display, query);
-
-      if (renderSuggestion) {
-        return renderSuggestion(suggestion, query, highlightedDisplay, index, focused);
-      }
-
-      return highlightedDisplay;
-    }
-  }, {
-    key: "getDisplay",
-    value: function getDisplay() {
-      var suggestion = this.props.suggestion;
 
-      if (typeof suggestion === 'string') {
-        return suggestion;
-      }
+    return highlightedDisplay;
+  };
 
-      var id = suggestion.id,
-          display = suggestion.display;
+  var getDisplay = function getDisplay() {
+    if (typeof suggestion === 'string') {
+      return suggestion;
+    }
 
-      if (id === undefined || !display) {
-        return id;
-      }
+    var id = suggestion.id,
+        display = suggestion.display;
 
-      return display;
+    if (id === undefined || !display) {
+      return id;
     }
-  }, {
-    key: "renderHighlightedDisplay",
-    value: function renderHighlightedDisplay(display) {
-      var _this$props2 = this.props,
-          ignoreAccents = _this$props2.ignoreAccents,
-          query = _this$props2.query,
-          style = _this$props2.style;
-      var i = getSubstringIndex(display, query, ignoreAccents);
 
-      if (i === -1) {
-        return React.createElement("span", style('display'), display);
-      }
+    return display;
+  };
+
+  var renderHighlightedDisplay = function renderHighlightedDisplay(display) {
+    var i = getSubstringIndex(display, query, ignoreAccents);
 
-      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));
+    if (i === -1) {
+      return /*#__PURE__*/React.createElement("span", style('display'), display);
     }
-  }]);
 
-  return Suggestion;
-}(Component);
+    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));
+  };
+
+  return /*#__PURE__*/React.createElement("li", _extends({
+    id: id,
+    role: "option",
+    "aria-selected": focused
+  }, rest, style), renderContent());
+}
 
-_defineProperty(Suggestion, "propTypes", {
+Suggestion.propTypes = {
   id: PropTypes.string.isRequired,
   query: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
@@ -967,8 +956,7 @@ _defineProperty(Suggestion, "propTypes", {
   })]).isRequired,
   renderSuggestion: PropTypes.func,
   focused: PropTypes.bool
-});
-
+};
 var styled$1 = createDefaultStyle({
   cursor: 'pointer'
 }, function (props) {
@@ -978,20 +966,31 @@ var styled$1 = createDefaultStyle({
 });
 var Suggestion$1 = styled$1(Suggestion);
 
-function LoadingIndicator() {
-  var styles = useStyles();
+function LoadingIndicator(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var styles = useStyles(defaultstyle, {
+    style: style,
+    className: className,
+    classNames: classNames
+  });
   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) {
+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; } }
+
+var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
   _inherits(SuggestionsOverlay, _Component);
 
-  function SuggestionsOverlay() {
-    var _getPrototypeOf2;
+  var _super = _createSuper$1(SuggestionsOverlay);
 
+  function SuggestionsOverlay() {
     var _this;
 
     _classCallCheck(this, SuggestionsOverlay);
@@ -1000,7 +999,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 +1062,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 +1070,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 +1082,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 +1102,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 +1127,7 @@ function (_Component) {
         return;
       }
 
-      return React.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1183,9 +1184,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$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 makeTriggerRegex = function makeTriggerRegex(trigger) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -1243,6 +1248,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 +1259,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$2(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,17 +1283,17 @@ function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread({}, props, {}, style('input'), {
-        value: _this.getPlainText()
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+        value: _this.getPlainText(),
+        onScroll: _this.updateHighlighterScroll
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
         onSelect: _this.handleSelect,
         onKeyDown: _this.handleKeyDown,
         onBlur: _this.handleBlur,
         onCompositionStart: _this.handleCompositionStart,
-        onCompositionEnd: _this.handleCompositionEnd,
-        onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+        onCompositionEnd: _this.handleCompositionEnd
+      }), _this.isOpened() && {
         role: 'combobox',
         'aria-controls': _this.uuidSuggestionsOverlay,
         'aria-expanded': true,
@@ -1304,18 +1310,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 +1352,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 +1363,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 +1374,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 +1389,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 +1466,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;
       }
@@ -1697,7 +1704,7 @@ function (_React$Component) {
         // is small enough to NOT cover up the caret
 
 
-        if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop) {
+        if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop || forceSuggestionsAboveCursor) {
           position.top = _top - suggestions.offsetHeight - caretHeight;
         } else {
           position.top = _top;
@@ -1819,7 +1826,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 +1972,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 +2002,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 +2015,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 +2060,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 +2072,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 +2162,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.4.2",
+  "version": "4.4.6",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",
@@ -12,9 +12,11 @@
     "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_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"
+    "now-build": "webpack --config demo/webpack.config.js",
+    "prerelease": "yarn build",
+    "release": "changeset publish",
+    "change": "changeset"
   },
   "repository": {
     "type": "git",
@@ -31,7 +33,7 @@
     "safari >= 10",
     "ie >= 11"
   ],
-  "author": "Jan-Felix Schwarz",
+  "author": "SAP-Signavio",
   "license": "BSD-3-Clause",
   "bugs": {
     "url": "https://github.com/signavio/react-mentions/issues"
@@ -47,13 +49,13 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@changesets/cli": "^2.23.0",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^8.0.6",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "condition-circle": "^2.0.2",
     "core-js": "^3.1.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.0.0",
@@ -77,7 +79,6 @@
     "react-dom": "16.8.6",
     "recompose": "^0.30.0",
     "regenerator-runtime": "^0.13.2",
-    "semantic-release": "^19.0.2",
     "style-loader": "^0.23.1",
     "substyle-jss": "^4.0.1",
     "webpack": "^4.35.2",