react-mentions 4.4.2 → 4.4.6

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# react-mentions
+
+## 4.4.6
+
+### Patch Changes
+
+- 959625b: Suggestions.js refactored to functional component
+
+## 4.4.5
+
+### Patch Changes
+
+- f40cff2: Fix #507 for forceSuggestionsAboveCursor when suggestionsPortalHost is not being used
+
+## 4.4.4
+
+### Patch Changes
+
+- 748d38a: fix npm publishing
+
+## 4.4.3
+
+### Patch Changes
+
+- e7f35ab: fix npm publishing

package/README.md

@@ -1,9 +1,6 @@
 # [React Mentions](https://react-mentions.now.sh)
 
-[![CircleCI][build-badge]][build]
-[![codecov][codecov-badge]][codecov]
 [![npm package][npm-badge]][npm]
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
 
@@ -58,14 +55,16 @@ The `MentionsInput` supports the following props for configuring the widget:
 | --------------------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
 | value                       | string                                                  | `''`           | The value containing markup for mentions                                               |
 | onChange                    | function (event, newValue, newPlainTextValue, mentions) | empty function | A callback that is invoked when the user changes the value in the mentions input       |
+| onKeyDown                   | function (event)                                        | empty function | A callback that is invoked when the user presses a key in the mentions input           |
 | singleLine                  | boolean                                                 | `false`        | Renders a single line text input instead of a textarea, if set to `true`               |
 | onBlur                      | function (event, clickedSuggestion)                     | empty function | Passes `true` as second argument if the blur was caused by a mousedown on a suggestion |
 | allowSpaceInQuery           | boolean                                                 | false          | Keep suggestions open even if the user separates keywords with spaces.                 |
 | suggestionsPortalHost       | DOM Element                                             | undefined      | Render suggestions into the DOM in the supplied host element.                          |
 | 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         |
+| forceSuggestionsAboveCursor | boolean                                                 | false          | Forces the SuggestionList to be rendered above the cursor                              |
 | 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            |
+| 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:
 
@@ -77,7 +76,7 @@ Each data source is configured using a `Mention` component, which has the follow
 | markup           | string                                                       | `'@[__display__](__id__)'`                  | A template string for the markup to use for mentions                                                                                                   |
 | displayTransform | function (id, display)                                       | returns `display`                           | Accepts a function for customizing the string that is displayed for a mention                                                                          |
 | regex            | RegExp                                                       | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional)                          |  |
-| onAdd            | function (id, display, startPos, endPos)                                       | empty function                              | Callback invoked when a suggestion has been added (optional)                                                                                           |
+| onAdd            | function (id, display, startPos, endPos)                     | empty function                              | Callback invoked when a suggestion has been added (optional)                                                                                           |
 | appendSpaceOnAdd | boolean                                                      | `false`                                     | Append a space when a suggestion has been added (optional)                                                                                             |
 
 If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)
@@ -97,18 +96,7 @@ You can also assign `className` and `style` props to the `Mention` elements to d
 Due to react-mentions' internal cursor tracking it is not good enough to simulate the editing of the textarea value using `ReactTestUtils.Simulate.change`.
 We recommend using [@testing-library/user-event](https://github.com/testing-library/user-event) for a realistic simulation of events as they would happen in the browser as the user interacts the textarea.
 
-## Contributing
+---
 
-Spawn a development server with an example page and module hot loading all set up:
-
-```
-yarn start
-
-```
-
-[build-badge]: https://circleci.com/gh/signavio/react-mentions/tree/master.svg?style=shield&circle-token=:circle-token
-[build]: https://circleci.com/gh/signavio/react-mentions/tree/master
-[npm-badge]: https://img.shields.io/npm/v/react-mentions.png?style=flat-square
-[npm]: https://www.npmjs.org/package/react-mentions
-[codecov-badge]: https://img.shields.io/codecov/c/github/signavio/react-mentions.svg
-[codecov]: https://codecov.io/gh/signavio/react-mentions
+If you want to contribute, first of all: thank you ❤️.
+Please check [CONTRIBUTING.md](/CONTRIBUTING.md) and/or create an issue.

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,85 +892,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__default.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__default.createElement("span", style('display'), display);
-      }
+    return display;
+  };
+
+  var renderHighlightedDisplay = function renderHighlightedDisplay(display) {
+    var i = getSubstringIndex(display, query, ignoreAccents);
 
-      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));
+    if (i === -1) {
+      return /*#__PURE__*/React__default.createElement("span", style('display'), display);
     }
-  }]);
 
-  return Suggestion;
-}(React.Component);
+    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));
+  };
+
+  return /*#__PURE__*/React__default.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,
@@ -975,8 +964,7 @@ _defineProperty(Suggestion, "propTypes", {
   })]).isRequired,
   renderSuggestion: PropTypes.func,
   focused: PropTypes.bool
-});
-
+};
 var styled$1 = createDefaultStyle({
   cursor: 'pointer'
 }, function (props) {
@@ -986,20 +974,31 @@ var styled$1 = createDefaultStyle({
 });
 var Suggestion$1 = styled$1(Suggestion);
 
-function LoadingIndicator() {
-  var styles = useStyles__default();
+function LoadingIndicator(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var styles = useStyles__default(defaultstyle, {
+    style: style,
+    className: className,
+    classNames: classNames
+  });
   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) {
+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);
@@ -1008,7 +1007,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 +1070,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 +1078,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 +1090,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 +1110,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 +1135,7 @@ function (_Component) {
         return;
       }
 
-      return React__default.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1191,9 +1192,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] : {};
 
@@ -1251,6 +1256,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 +1267,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;
@@ -1285,17 +1291,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,
@@ -1312,18 +1318,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 +1360,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 +1371,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 +1382,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 +1397,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 +1474,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;
       }
@@ -1705,7 +1712,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;
@@ -1827,7 +1834,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 +1980,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 +2010,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 +2023,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 +2068,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 +2080,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 +2170,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 = {