react-mentions 3.3.0 → 4.0.1

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

@@ -13,19 +13,15 @@ var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototy
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var isEqual = _interopDefault(require('lodash/isEqual'));
-var isNumber = _interopDefault(require('lodash/isNumber'));
-var keys = _interopDefault(require('lodash/keys'));
-var omit = _interopDefault(require('lodash/omit'));
-var values = _interopDefault(require('lodash/values'));
-var PropTypes = _interopDefault(require('prop-types'));
 var React = require('react');
 var React__default = _interopDefault(React);
-var ReactDOM = _interopDefault(require('react-dom'));
-var substyle = require('substyle');
-var substyle__default = _interopDefault(substyle);
 var invariant = _interopDefault(require('invariant'));
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
+var useStyles = require('substyle');
+var useStyles__default = _interopDefault(useStyles);
+var PropTypes = _interopDefault(require('prop-types'));
+var ReactDOM = _interopDefault(require('react-dom'));
 
 // escape RegExp special characters https://stackoverflow.com/a/9310752/5142490
 var escapeRegex = function escapeRegex(str) {
@@ -629,9 +625,58 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
   return normalizeString(str).indexOf(normalizeString(substr));
 };
 
-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; }
+var isNumber = function isNumber(val) {
+  return typeof val === 'number';
+};
 
-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; }
+var keys = function keys(obj) {
+  return obj === Object(obj) ? Object.keys(obj) : [];
+};
+
+var omit = function omit(obj) {
+  var _ref;
+
+  for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    rest[_key - 1] = arguments[_key];
+  }
+
+  var keys = (_ref = []).concat.apply(_ref, rest);
+
+  return Object.keys(obj).reduce(function (acc, k) {
+    if (obj.hasOwnProperty(k) && !keys.includes(k) && obj[k] !== undefined) {
+      acc[k] = obj[k];
+    }
+
+    return acc;
+  }, {});
+};
+
+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"]);
+
+      var modifiers = getModifiers ? getModifiers(rest) : undefined;
+      var styles = useStyles__default(defaultStyle, {
+        style: style,
+        className: className,
+        classNames: classNames
+      }, modifiers);
+      return React__default.createElement(ComponentToWrap, _extends({}, rest, {
+        style: styles
+      }));
+    };
+
+    var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
+    return DefaultStyleEnhancer;
+  };
+
+  return enhance;
+}
 
 var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   if (!usedKeys.hasOwnProperty(id)) {
@@ -654,8 +699,14 @@ function (_Component) {
     _classCallCheck(this, Highlighter);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
+
+    _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
+      _this.caretElement = el;
+    });
+
     _this.state = {
-      lastPosition: {}
+      left: undefined,
+      top: undefined
     };
     return _this;
   }
@@ -673,24 +724,24 @@ function (_Component) {
   }, {
     key: "notifyCaretPosition",
     value: function notifyCaretPosition() {
-      if (!this.caretRef) {
+      if (!this.caretElement) {
         return;
       }
 
-      var position = {
-        left: this.caretRef.offsetLeft,
-        top: this.caretRef.offsetTop
-      };
-      var lastPosition = this.state.lastPosition;
+      var _this$caretElement = this.caretElement,
+          offsetLeft = _this$caretElement.offsetLeft,
+          offsetTop = _this$caretElement.offsetTop;
 
-      if (isEqual(lastPosition, position)) {
+      if (this.state.left === offsetLeft && this.state.top === offsetTop) {
         return;
       }
 
-      this.setState({
-        lastPosition: position
-      });
-      this.props.onCaretPositionChange(position);
+      var newPosition = {
+        left: offsetLeft,
+        top: offsetTop
+      };
+      this.setState(newPosition);
+      this.props.onCaretPositionChange(newPosition);
     }
   }, {
     key: "render",
@@ -698,17 +749,18 @@ function (_Component) {
       var _this2 = this;
 
       var _this$props = this.props,
-          selection = _this$props.selection,
+          selectionStart = _this$props.selectionStart,
+          selectionEnd = _this$props.selectionEnd,
           value = _this$props.value,
           style = _this$props.style,
-          inputStyle = _this$props.inputStyle,
-          children = _this$props.children;
+          children = _this$props.children,
+          containerRef = _this$props.containerRef;
       var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
 
       var caretPositionInMarkup;
 
-      if (selection.start === selection.end) {
-        caretPositionInMarkup = mapPlainTextIndex(value, config, selection.start, 'START');
+      if (selectionStart === selectionEnd) {
+        caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
       }
 
       var resultComponents = [];
@@ -750,7 +802,7 @@ function (_Component) {
       }
 
       return React__default.createElement("div", _extends({}, style, {
-        style: _objectSpread({}, inputStyle, {}, style.style)
+        ref: containerRef
       }), resultComponents);
     }
   }, {
@@ -777,12 +829,8 @@ function (_Component) {
   }, {
     key: "renderHighlighterCaret",
     value: function renderHighlighterCaret(children) {
-      var _this3 = this;
-
       return React__default.createElement("span", _extends({}, this.props.style('caret'), {
-        ref: function ref(el) {
-          _this3.caretRef = el;
-        },
+        ref: this.setCaretElement,
         key: "caret"
       }), children);
     }
@@ -792,28 +840,30 @@ function (_Component) {
 }(React.Component);
 
 _defineProperty(Highlighter, "propTypes", {
-  selection: PropTypes.shape({
-    start: PropTypes.number,
-    end: PropTypes.number
-  }).isRequired,
+  selectionStart: PropTypes.number,
+  selectionEnd: PropTypes.number,
   value: PropTypes.string.isRequired,
   onCaretPositionChange: PropTypes.func.isRequired,
-  inputStyle: PropTypes.object,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
+  })]),
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
 });
 
 _defineProperty(Highlighter, "defaultProps", {
-  value: '',
-  inputStyle: {}
+  value: ''
 });
 
-var styled = substyle.defaultStyle({
+var styled = createDefaultStyle({
   position: 'relative',
-  width: 'inherit',
+  boxSizing: 'border-box',
+  width: '100%',
   color: 'transparent',
   overflow: 'hidden',
   whiteSpace: 'pre-wrap',
   wordWrap: 'break-word',
+  border: '1px solid transparent',
+  textAlign: 'start',
   '&singleLine': {
     whiteSpace: 'pre',
     wordWrap: null
@@ -842,7 +892,8 @@ function (_Component) {
   _createClass(Suggestion, [{
     key: "render",
     value: function render() {
-      var rest = omit(this.props, 'style', keys(Suggestion.propTypes));
+      var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
+      keys(Suggestion.propTypes));
       return React__default.createElement("li", _extends({}, rest, this.props.style), this.renderContent());
     }
   }, {
@@ -914,7 +965,7 @@ _defineProperty(Suggestion, "propTypes", {
   focused: PropTypes.bool
 });
 
-var styled$1 = substyle.defaultStyle({
+var styled$1 = createDefaultStyle({
   cursor: 'pointer'
 }, function (props) {
   return {
@@ -923,75 +974,98 @@ var styled$1 = substyle.defaultStyle({
 });
 var Suggestion$1 = styled$1(Suggestion);
 
-function LoadingIndicator(_ref) {
-  var style = _ref.style;
-  var spinnerStyle = style('spinner');
-  return React__default.createElement("div", style, React__default.createElement("div", spinnerStyle, React__default.createElement("div", spinnerStyle(['element', 'element1'])), React__default.createElement("div", spinnerStyle(['element', 'element2'])), React__default.createElement("div", spinnerStyle(['element', 'element3'])), React__default.createElement("div", spinnerStyle(['element', 'element4'])), React__default.createElement("div", spinnerStyle(['element', 'element5']))));
+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']))));
 }
 
-var LoadingIndicator$1 = substyle__default(LoadingIndicator);
-
-function ownKeys$1(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 _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 var SuggestionsOverlay =
 /*#__PURE__*/
 function (_Component) {
   _inherits(SuggestionsOverlay, _Component);
 
   function SuggestionsOverlay() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     _classCallCheck(this, SuggestionsOverlay);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(SuggestionsOverlay).apply(this, arguments));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(index);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "select", function (suggestion, queryInfo) {
+      _this.props.onSelect(suggestion, queryInfo);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setUlElement", function (el) {
+      _this.ulElement = el;
+    });
+
+    return _this;
   }
 
   _createClass(SuggestionsOverlay, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      if (!this.suggestionsRef || this.suggestionsRef.offsetHeight >= this.suggestionsRef.scrollHeight || !this.props.scrollFocusedIntoView) {
+      if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
         return;
       }
 
-      var scrollTop = this.suggestionsRef.scrollTop;
+      var scrollTop = this.ulElement.scrollTop;
 
-      var _this$suggestionsRef$ = this.suggestionsRef.children[this.props.focusIndex].getBoundingClientRect(),
-          top = _this$suggestionsRef$.top,
-          bottom = _this$suggestionsRef$.bottom;
+      var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
+          top = _this$ulElement$child.top,
+          bottom = _this$ulElement$child.bottom;
 
-      var _this$suggestionsRef$2 = this.suggestionsRef.getBoundingClientRect(),
-          topContainer = _this$suggestionsRef$2.top;
+      var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
+          topContainer = _this$ulElement$getBo.top;
 
       top = top - topContainer + scrollTop;
       bottom = bottom - topContainer + scrollTop;
 
       if (top < scrollTop) {
-        this.suggestionsRef.scrollTop = top;
-      } else if (bottom > this.suggestionsRef.offsetHeight) {
-        this.suggestionsRef.scrollTop = bottom - this.suggestionsRef.offsetHeight;
+        this.ulElement.scrollTop = top;
+      } else if (bottom > this.ulElement.offsetHeight) {
+        this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
-
       var _this$props = this.props,
           suggestions = _this$props.suggestions,
           isLoading = _this$props.isLoading,
           style = _this$props.style,
-          onMouseDown = _this$props.onMouseDown; // do not show suggestions until there is some data
+          onMouseDown = _this$props.onMouseDown,
+          containerRef = _this$props.containerRef,
+          position = _this$props.position,
+          left = _this$props.left,
+          top = _this$props.top; // do not show suggestions until there is some data
 
       if (countSuggestions(suggestions) === 0 && !isLoading) {
         return null;
       }
 
-      return React__default.createElement("div", _extends({}, style, {
-        onMouseDown: onMouseDown
+      return React__default.createElement("div", _extends({}, useStyles.inline({
+        position: position || 'absolute',
+        left: left,
+        top: top
+      }, style), {
+        onMouseDown: onMouseDown,
+        ref: containerRef
       }), React__default.createElement("ul", _extends({
-        ref: function ref(el) {
-          _this.suggestionsRef = el;
-        }
+        ref: this.setUlElement
       }, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
     }
   }, {
@@ -1012,7 +1086,7 @@ function (_Component) {
     value: function renderSuggestion(result, queryInfo, index) {
       var _this3 = this;
 
-      var id = this.getID(result);
+      var id = getID(result);
       var isFocused = index === this.props.focusIndex;
       var childIndex = queryInfo.childIndex,
           query = queryInfo.query;
@@ -1036,15 +1110,6 @@ function (_Component) {
         }
       });
     }
-  }, {
-    key: "getID",
-    value: function getID(suggestion) {
-      if (suggestion instanceof String) {
-        return suggestion;
-      }
-
-      return suggestion.id;
-    }
   }, {
     key: "renderLoadingIndicator",
     value: function renderLoadingIndicator() {
@@ -1052,22 +1117,10 @@ function (_Component) {
         return;
       }
 
-      return React__default.createElement(LoadingIndicator$1, {
+      return React__default.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
-  }, {
-    key: "handleMouseEnter",
-    value: function handleMouseEnter(index, ev) {
-      if (this.props.onMouseEnter) {
-        this.props.onMouseEnter(index);
-      }
-    }
-  }, {
-    key: "select",
-    value: function select(suggestion, queryInfo) {
-      this.props.onSelect(suggestion, queryInfo);
-    }
   }]);
 
   return SuggestionsOverlay;
@@ -1076,10 +1129,16 @@ function (_Component) {
 _defineProperty(SuggestionsOverlay, "propTypes", {
   suggestions: PropTypes.object.isRequired,
   focusIndex: PropTypes.number,
+  position: PropTypes.string,
+  left: PropTypes.number,
+  top: PropTypes.number,
   scrollFocusedIntoView: PropTypes.bool,
   isLoading: PropTypes.bool,
   onSelect: PropTypes.func,
   ignoreAccents: PropTypes.bool,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
+  })]),
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
 });
 
@@ -1090,27 +1149,30 @@ _defineProperty(SuggestionsOverlay, "defaultProps", {
   }
 });
 
-var styled$2 = substyle.defaultStyle(function (_ref2) {
-  var position = _ref2.position;
-  return _objectSpread$1({
-    position: 'absolute',
-    zIndex: 1,
-    backgroundColor: 'white',
-    marginTop: 14,
-    minWidth: 100
-  }, position, {
-    list: {
-      margin: 0,
-      padding: 0,
-      listStyleType: 'none'
-    }
-  });
+var getID = function getID(suggestion) {
+  if (suggestion instanceof String) {
+    return suggestion;
+  }
+
+  return suggestion.id;
+};
+
+var styled$2 = createDefaultStyle({
+  zIndex: 1,
+  backgroundColor: 'white',
+  marginTop: 14,
+  minWidth: 100,
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none'
+  }
 });
 var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
 
-function ownKeys$2(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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(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 = 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; }
 var makeTriggerRegex = function makeTriggerRegex(trigger) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -1162,7 +1224,6 @@ var propTypes = {
    */
   singleLine: PropTypes.bool,
   allowSpaceInQuery: PropTypes.bool,
-  EXPERIMENTAL_cutCopyPaste: PropTypes.bool,
   allowSuggestionsAboveCursor: PropTypes.bool,
   ignoreAccents: PropTypes.bool,
   value: PropTypes.string,
@@ -1189,14 +1250,19 @@ function (_React$Component) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
 
-    _defineProperty(_assertThisInitialized(_this), "getInputProps", function (isTextarea) {
+    _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; // pass all props that we don't use through to the input control
+          style = _this$props.style; // pass all props that neither we, nor substyle, consume through to the input control
 
-      var props = omit(_this.props, 'style', keys(propTypes));
-      return _objectSpread$2({}, props, {}, style('input'), {
+      var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
+      keys(propTypes));
+      return _objectSpread({}, props, {}, style('input'), {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -1214,9 +1280,9 @@ function (_React$Component) {
           singleLine = _this$props2.singleLine,
           style = _this$props2.style;
 
-      var inputProps = _this.getInputProps(!singleLine);
+      var inputProps = _this.getInputProps();
 
-      return React__default.createElement("div", style('control'), _this.renderHighlighter(inputProps.style), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
+      return React__default.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
@@ -1233,7 +1299,7 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setInputRef", function (el) {
-      _this.inputRef = el;
+      _this.inputElement = el;
       var inputRef = _this.props.inputRef;
 
       if (typeof inputRef === 'function') {
@@ -1243,29 +1309,32 @@ function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setSuggestionsElement", function (el) {
+      _this.suggestionsElement = el;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderSuggestionsOverlay", function () {
       if (!isNumber(_this.state.selectionStart)) {
         // do not show suggestions when the input does not have the focus
         return null;
       }
 
+      var _this$state$suggestio = _this.state.suggestionsPosition,
+          position = _this$state$suggestio.position,
+          left = _this$state$suggestio.left,
+          top = _this$state$suggestio.top;
       var suggestionsNode = React__default.createElement(SuggestionsOverlay$1, {
         style: _this.props.style('suggestions'),
-        position: _this.state.suggestionsPosition,
+        position: position,
+        left: left,
+        top: top,
         focusIndex: _this.state.focusIndex,
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
-        ref: function ref(el) {
-          _this.suggestionsRef = el;
-        },
+        containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
-        onMouseEnter: function onMouseEnter(focusIndex) {
-          return _this.setState({
-            focusIndex: focusIndex,
-            scrollFocusedIntoView: false
-          });
-        },
+        onMouseEnter: _this.handleSuggestionsMouseEnter,
         isLoading: _this.isLoading(),
         ignoreAccents: _this.props.ignoreAccents
       }, _this.props.children);
@@ -1277,7 +1346,7 @@ function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderHighlighter", function (inputStyle) {
+    _defineProperty(_assertThisInitialized(_this), "renderHighlighter", function () {
       var _this$state = _this.state,
           selectionStart = _this$state.selectionStart,
           selectionEnd = _this$state.selectionEnd;
@@ -1287,25 +1356,26 @@ function (_React$Component) {
           value = _this$props3.value,
           style = _this$props3.style;
       return React__default.createElement(Highlighter$1, {
-        ref: function ref(el) {
-          _this.highlighterRef = el;
-        },
+        containerRef: _this.setHighlighterElement,
         style: style('highlighter'),
-        inputStyle: inputStyle,
         value: value,
         singleLine: singleLine,
-        selection: {
-          start: selectionStart,
-          end: selectionEnd
-        },
-        onCaretPositionChange: function onCaretPositionChange(position) {
-          return _this.setState({
-            caretPosition: position
-          });
-        }
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd,
+        onCaretPositionChange: _this.handleCaretPositionChange
       }, children);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setHighlighterElement", function (el) {
+      _this.highlighterElement = el;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleCaretPositionChange", function (position) {
+      _this.setState({
+        caretPosition: position
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getPlainText", function () {
       return getPlainText(_this.props.value || '', readConfigFromChildren(_this.props.children));
     });
@@ -1329,7 +1399,8 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
-      // if we are inside iframe, we need to find activeElement within its contentDocument
+      isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
+
       var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
 
       if (currentDocument.activeElement !== ev.target) {
@@ -1391,7 +1462,7 @@ function (_React$Component) {
 
       if (isComposing) return; // refresh suggestions queries
 
-      var el = _this.inputRef;
+      var el = _this.inputElement;
 
       if (ev.target.selectionStart === ev.target.selectionEnd) {
         _this.updateMentionsQueries(el.value, ev.target.selectionStart);
@@ -1408,15 +1479,14 @@ function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
       // do not intercept key events if the suggestions overlay is not shown
       var suggestionsCount = countSuggestions(_this.state.suggestions);
-      var suggestionsComp = _this.suggestionsRef;
 
-      if (suggestionsCount === 0 || !suggestionsComp) {
+      if (suggestionsCount === 0 || !_this.suggestionsElement) {
         _this.props.onKeyDown(ev);
 
         return;
       }
 
-      if (values(KEY).indexOf(ev.keyCode) >= 0) {
+      if (Object.values(KEY).indexOf(ev.keyCode) >= 0) {
         ev.preventDefault();
       }
 
@@ -1519,18 +1589,25 @@ function (_React$Component) {
       _this._suggestionsMouseDown = true;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleSuggestionsMouseEnter", function (focusIndex) {
+      _this.setState({
+        focusIndex: focusIndex,
+        scrollFocusedIntoView: false
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "updateSuggestionsPosition", function () {
       var caretPosition = _this.state.caretPosition;
       var _this$props5 = _this.props,
           suggestionsPortalHost = _this$props5.suggestionsPortalHost,
           allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
 
-      if (!caretPosition || !_this.suggestionsRef) {
+      if (!caretPosition || !_this.suggestionsElement) {
         return;
       }
 
-      var suggestions = ReactDOM.findDOMNode(_this.suggestionsRef);
-      var highlighter = ReactDOM.findDOMNode(_this.highlighterRef); // first get viewport-relative position (highlighter is offsetParent of caret):
+      var suggestions = _this.suggestionsElement;
+      var highlighter = _this.highlighterElement; // first get viewport-relative position (highlighter is offsetParent of caret):
 
       var caretOffsetParentRect = highlighter.getBoundingClientRect();
       var caretHeight = getComputedStyleLengthProp(highlighter, 'font-size');
@@ -1579,7 +1656,7 @@ function (_React$Component) {
         var _top = caretPosition.top - highlighter.scrollTop; // guard for mentions suggestions list clipped by right edge of window
 
 
-        if (_left + suggestions.offsetWidth > _this.containerRef.offsetWidth) {
+        if (_left + suggestions.offsetWidth > _this.containerElement.offsetWidth) {
           position.right = 0;
         } else {
           position.left = _left;
@@ -1595,7 +1672,7 @@ function (_React$Component) {
         }
       }
 
-      if (isEqual(position, _this.state.suggestionsPosition)) {
+      if (position.left === _this.state.suggestionsPosition.left && position.top === _this.state.suggestionsPosition.top && position.position === _this.state.suggestionsPosition.position) {
         return;
       }
 
@@ -1605,14 +1682,15 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateHighlighterScroll", function () {
-      if (!_this.inputRef || !_this.highlighterRef) {
+      var input = _this.inputElement;
+      var highlighter = _this.highlighterElement;
+
+      if (!input || !highlighter) {
         // since the invocation of this function is deferred,
         // the whole component may have been unmounted in the meanwhile
         return;
       }
 
-      var input = _this.inputRef;
-      var highlighter = ReactDOM.findDOMNode(_this.highlighterRef);
       highlighter.scrollLeft = input.scrollLeft;
       highlighter.scrollTop = input.scrollTop;
       highlighter.height = input.height;
@@ -1628,7 +1706,7 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "setSelection", function (selectionStart, selectionEnd) {
       if (selectionStart === null || selectionEnd === null) return;
-      var el = _this.inputRef;
+      var el = _this.inputElement;
 
       if (el.setSelectionRange) {
         el.setSelectionRange(selectionStart, selectionEnd);
@@ -1709,7 +1787,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$2({}, _this.suggestions, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1754,7 +1832,7 @@ function (_React$Component) {
 
       var newValue = spliceString(value, start, end, insert); // Refocus input and set caret position to end of mention
 
-      _this.inputRef.focus();
+      _this.inputElement.focus();
 
       var displayValue = displayTransform(id, display);
 
@@ -1809,7 +1887,7 @@ function (_React$Component) {
       selectionEnd: null,
       suggestions: {},
       caretPosition: null,
-      suggestionsPosition: null
+      suggestionsPosition: {}
     };
     return _this;
   }
@@ -1817,14 +1895,9 @@ function (_React$Component) {
   _createClass(MentionsInput, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var EXPERIMENTAL_cutCopyPaste = this.props.EXPERIMENTAL_cutCopyPaste;
-
-      if (EXPERIMENTAL_cutCopyPaste) {
-        document.addEventListener('copy', this.handleCopy);
-        document.addEventListener('cut', this.handleCut);
-        document.addEventListener('paste', this.handlePaste);
-      }
-
+      document.addEventListener('copy', this.handleCopy);
+      document.addEventListener('cut', this.handleCut);
+      document.addEventListener('paste', this.handlePaste);
       this.updateSuggestionsPosition();
     }
   }, {
@@ -1848,29 +1921,21 @@ function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var EXPERIMENTAL_cutCopyPaste = this.props.EXPERIMENTAL_cutCopyPaste;
-
-      if (EXPERIMENTAL_cutCopyPaste) {
-        document.removeEventListener('copy', this.handleCopy);
-        document.removeEventListener('cut', this.handleCut);
-        document.removeEventListener('paste', this.handlePaste);
-      }
+      document.removeEventListener('copy', this.handleCopy);
+      document.removeEventListener('cut', this.handleCut);
+      document.removeEventListener('paste', this.handlePaste);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       return React__default.createElement("div", _extends({
-        ref: function ref(el) {
-          _this2.containerRef = el;
-        }
+        ref: this.setContainerElement
       }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
     }
   }, {
     key: "handlePaste",
     value: function handlePaste(event) {
-      if (event.target !== this.inputRef) {
+      if (event.target !== this.inputElement) {
         return;
       }
 
@@ -1890,10 +1955,10 @@ function (_React$Component) {
       var markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, 'END');
       var pastedMentions = event.clipboardData.getData('text/react-mentions');
       var pastedData = event.clipboardData.getData('text/plain');
-      var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData);
+      var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread$2({}, event.target, {
+        target: _objectSpread({}, event.target, {
           value: newValue
         })
       };
@@ -1922,7 +1987,7 @@ function (_React$Component) {
   }, {
     key: "handleCopy",
     value: function handleCopy(event) {
-      if (event.target !== this.inputRef) {
+      if (event.target !== this.inputElement) {
         return;
       }
 
@@ -1936,7 +2001,7 @@ function (_React$Component) {
   }, {
     key: "handleCut",
     value: function handleCut(event) {
-      if (event.target !== this.inputRef) {
+      if (event.target !== this.inputElement) {
         return;
       }
 
@@ -1958,7 +2023,7 @@ function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread$2({}, event.target, {
+        target: _objectSpread({}, event.target, {
           value: newPlainTextValue
         })
       };
@@ -1998,24 +2063,24 @@ var getComputedStyleLengthProp = function getComputedStyleLengthProp(forElement,
 };
 
 var isMobileSafari = typeof navigator !== 'undefined' && /iPhone|iPad|iPod/i.test(navigator.userAgent);
-var styled$3 = substyle.defaultStyle({
+var styled$3 = createDefaultStyle({
   position: 'relative',
   overflowY: 'visible',
   input: {
     display: 'block',
+    width: '100%',
     position: 'absolute',
+    margin: 0,
     top: 0,
     left: 0,
     boxSizing: 'border-box',
     backgroundColor: 'transparent',
-    width: 'inherit',
     fontFamily: 'inherit',
     fontSize: 'inherit',
     letterSpacing: 'inherit'
   },
   '&multiLine': {
-    input: _objectSpread$2({
-      width: '100%',
+    input: _objectSpread({
       height: '100%',
       bottom: 0,
       overflow: 'hidden',
@@ -2034,14 +2099,23 @@ var styled$3 = substyle.defaultStyle({
 });
 var MentionsInput$1 = styled$3(MentionsInput);
 
-var styled$4 = substyle.defaultStyle({
+var defaultStyle = {
   fontWeight: 'inherit'
-});
-var Mention = styled$4(function (_ref) {
+};
+
+var Mention = function Mention(_ref) {
   var display = _ref.display,
-      style = _ref.style;
-  return React__default.createElement("strong", style, display);
-});
+      style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var styles = useStyles__default(defaultStyle, {
+    style: style,
+    className: className,
+    classNames: classNames
+  });
+  return React__default.createElement("strong", styles, display);
+};
+
 Mention.propTypes = {
   /**
    * Called when a new mention is added in the input