react-mentions 3.3.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,17 +7,13 @@ import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
7
7
  import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
8
8
  import _inherits from '@babel/runtime/helpers/esm/inherits';
9
9
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
10
- import isEqual from 'lodash/isEqual';
11
- import isNumber from 'lodash/isNumber';
12
- import keys from 'lodash/keys';
13
- import omit from 'lodash/omit';
14
- import values from 'lodash/values';
15
- import PropTypes from 'prop-types';
16
10
  import React, { Children, Component } from 'react';
17
- import ReactDOM from 'react-dom';
18
- import substyle, { defaultStyle } from 'substyle';
19
11
  import invariant from 'invariant';
20
12
  import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
13
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
14
+ import useStyles, { inline } from 'substyle';
15
+ import PropTypes from 'prop-types';
16
+ import ReactDOM from 'react-dom';
21
17
 
22
18
  // escape RegExp special characters https://stackoverflow.com/a/9310752/5142490
23
19
  var escapeRegex = function escapeRegex(str) {
@@ -621,9 +617,58 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
621
617
  return normalizeString(str).indexOf(normalizeString(substr));
622
618
  };
623
619
 
624
- 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; }
620
+ var isNumber = function isNumber(val) {
621
+ return typeof val === 'number';
622
+ };
625
623
 
626
- 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; }
624
+ var keys = function keys(obj) {
625
+ return obj === Object(obj) ? Object.keys(obj) : [];
626
+ };
627
+
628
+ var omit = function omit(obj) {
629
+ var _ref;
630
+
631
+ for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
632
+ rest[_key - 1] = arguments[_key];
633
+ }
634
+
635
+ var keys = (_ref = []).concat.apply(_ref, rest);
636
+
637
+ return Object.keys(obj).reduce(function (acc, k) {
638
+ if (obj.hasOwnProperty(k) && !keys.includes(k) && obj[k] !== undefined) {
639
+ acc[k] = obj[k];
640
+ }
641
+
642
+ return acc;
643
+ }, {});
644
+ };
645
+
646
+ function createDefaultStyle(defaultStyle, getModifiers) {
647
+ var enhance = function enhance(ComponentToWrap) {
648
+ var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
649
+ var style = _ref.style,
650
+ className = _ref.className,
651
+ classNames = _ref.classNames,
652
+ rest = _objectWithoutProperties(_ref, ["style", "className", "classNames"]);
653
+
654
+ var modifiers = getModifiers ? getModifiers(rest) : undefined;
655
+ var styles = useStyles(defaultStyle, {
656
+ style: style,
657
+ className: className,
658
+ classNames: classNames
659
+ }, modifiers);
660
+ return React.createElement(ComponentToWrap, _extends({}, rest, {
661
+ style: styles
662
+ }));
663
+ };
664
+
665
+ var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
666
+ DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
667
+ return DefaultStyleEnhancer;
668
+ };
669
+
670
+ return enhance;
671
+ }
627
672
 
628
673
  var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
629
674
  if (!usedKeys.hasOwnProperty(id)) {
@@ -646,8 +691,14 @@ function (_Component) {
646
691
  _classCallCheck(this, Highlighter);
647
692
 
648
693
  _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
694
+
695
+ _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
696
+ _this.caretElement = el;
697
+ });
698
+
649
699
  _this.state = {
650
- lastPosition: {}
700
+ left: undefined,
701
+ top: undefined
651
702
  };
652
703
  return _this;
653
704
  }
@@ -665,24 +716,24 @@ function (_Component) {
665
716
  }, {
666
717
  key: "notifyCaretPosition",
667
718
  value: function notifyCaretPosition() {
668
- if (!this.caretRef) {
719
+ if (!this.caretElement) {
669
720
  return;
670
721
  }
671
722
 
672
- var position = {
673
- left: this.caretRef.offsetLeft,
674
- top: this.caretRef.offsetTop
675
- };
676
- var lastPosition = this.state.lastPosition;
723
+ var _this$caretElement = this.caretElement,
724
+ offsetLeft = _this$caretElement.offsetLeft,
725
+ offsetTop = _this$caretElement.offsetTop;
677
726
 
678
- if (isEqual(lastPosition, position)) {
727
+ if (this.state.left === offsetLeft && this.state.top === offsetTop) {
679
728
  return;
680
729
  }
681
730
 
682
- this.setState({
683
- lastPosition: position
684
- });
685
- this.props.onCaretPositionChange(position);
731
+ var newPosition = {
732
+ left: offsetLeft,
733
+ top: offsetTop
734
+ };
735
+ this.setState(newPosition);
736
+ this.props.onCaretPositionChange(newPosition);
686
737
  }
687
738
  }, {
688
739
  key: "render",
@@ -690,17 +741,18 @@ function (_Component) {
690
741
  var _this2 = this;
691
742
 
692
743
  var _this$props = this.props,
693
- selection = _this$props.selection,
744
+ selectionStart = _this$props.selectionStart,
745
+ selectionEnd = _this$props.selectionEnd,
694
746
  value = _this$props.value,
695
747
  style = _this$props.style,
696
- inputStyle = _this$props.inputStyle,
697
- children = _this$props.children;
748
+ children = _this$props.children,
749
+ containerRef = _this$props.containerRef;
698
750
  var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
699
751
 
700
752
  var caretPositionInMarkup;
701
753
 
702
- if (selection.start === selection.end) {
703
- caretPositionInMarkup = mapPlainTextIndex(value, config, selection.start, 'START');
754
+ if (selectionStart === selectionEnd) {
755
+ caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
704
756
  }
705
757
 
706
758
  var resultComponents = [];
@@ -742,7 +794,7 @@ function (_Component) {
742
794
  }
743
795
 
744
796
  return React.createElement("div", _extends({}, style, {
745
- style: _objectSpread({}, inputStyle, {}, style.style)
797
+ ref: containerRef
746
798
  }), resultComponents);
747
799
  }
748
800
  }, {
@@ -769,12 +821,8 @@ function (_Component) {
769
821
  }, {
770
822
  key: "renderHighlighterCaret",
771
823
  value: function renderHighlighterCaret(children) {
772
- var _this3 = this;
773
-
774
824
  return React.createElement("span", _extends({}, this.props.style('caret'), {
775
- ref: function ref(el) {
776
- _this3.caretRef = el;
777
- },
825
+ ref: this.setCaretElement,
778
826
  key: "caret"
779
827
  }), children);
780
828
  }
@@ -784,28 +832,30 @@ function (_Component) {
784
832
  }(Component);
785
833
 
786
834
  _defineProperty(Highlighter, "propTypes", {
787
- selection: PropTypes.shape({
788
- start: PropTypes.number,
789
- end: PropTypes.number
790
- }).isRequired,
835
+ selectionStart: PropTypes.number,
836
+ selectionEnd: PropTypes.number,
791
837
  value: PropTypes.string.isRequired,
792
838
  onCaretPositionChange: PropTypes.func.isRequired,
793
- inputStyle: PropTypes.object,
839
+ containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
840
+ current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
841
+ })]),
794
842
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
795
843
  });
796
844
 
797
845
  _defineProperty(Highlighter, "defaultProps", {
798
- value: '',
799
- inputStyle: {}
846
+ value: ''
800
847
  });
801
848
 
802
- var styled = defaultStyle({
849
+ var styled = createDefaultStyle({
803
850
  position: 'relative',
804
- width: 'inherit',
851
+ boxSizing: 'border-box',
852
+ width: '100%',
805
853
  color: 'transparent',
806
854
  overflow: 'hidden',
807
855
  whiteSpace: 'pre-wrap',
808
856
  wordWrap: 'break-word',
857
+ border: '1px solid transparent',
858
+ textAlign: 'start',
809
859
  '&singleLine': {
810
860
  whiteSpace: 'pre',
811
861
  wordWrap: null
@@ -834,7 +884,8 @@ function (_Component) {
834
884
  _createClass(Suggestion, [{
835
885
  key: "render",
836
886
  value: function render() {
837
- var rest = omit(this.props, 'style', keys(Suggestion.propTypes));
887
+ var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
888
+ keys(Suggestion.propTypes));
838
889
  return React.createElement("li", _extends({}, rest, this.props.style), this.renderContent());
839
890
  }
840
891
  }, {
@@ -906,7 +957,7 @@ _defineProperty(Suggestion, "propTypes", {
906
957
  focused: PropTypes.bool
907
958
  });
908
959
 
909
- var styled$1 = defaultStyle({
960
+ var styled$1 = createDefaultStyle({
910
961
  cursor: 'pointer'
911
962
  }, function (props) {
912
963
  return {
@@ -915,75 +966,98 @@ var styled$1 = defaultStyle({
915
966
  });
916
967
  var Suggestion$1 = styled$1(Suggestion);
917
968
 
918
- function LoadingIndicator(_ref) {
919
- var style = _ref.style;
920
- var spinnerStyle = style('spinner');
921
- return React.createElement("div", style, React.createElement("div", spinnerStyle, React.createElement("div", spinnerStyle(['element', 'element1'])), React.createElement("div", spinnerStyle(['element', 'element2'])), React.createElement("div", spinnerStyle(['element', 'element3'])), React.createElement("div", spinnerStyle(['element', 'element4'])), React.createElement("div", spinnerStyle(['element', 'element5']))));
969
+ function LoadingIndicator() {
970
+ var styles = useStyles();
971
+ var spinnerStyles = styles('spinner');
972
+ 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']))));
922
973
  }
923
974
 
924
- var LoadingIndicator$1 = substyle(LoadingIndicator);
925
-
926
- 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; }
927
-
928
- 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; }
929
-
930
975
  var SuggestionsOverlay =
931
976
  /*#__PURE__*/
932
977
  function (_Component) {
933
978
  _inherits(SuggestionsOverlay, _Component);
934
979
 
935
980
  function SuggestionsOverlay() {
981
+ var _getPrototypeOf2;
982
+
983
+ var _this;
984
+
936
985
  _classCallCheck(this, SuggestionsOverlay);
937
986
 
938
- return _possibleConstructorReturn(this, _getPrototypeOf(SuggestionsOverlay).apply(this, arguments));
987
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
988
+ args[_key] = arguments[_key];
989
+ }
990
+
991
+ _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
992
+
993
+ _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
994
+ if (_this.props.onMouseEnter) {
995
+ _this.props.onMouseEnter(index);
996
+ }
997
+ });
998
+
999
+ _defineProperty(_assertThisInitialized(_this), "select", function (suggestion, queryInfo) {
1000
+ _this.props.onSelect(suggestion, queryInfo);
1001
+ });
1002
+
1003
+ _defineProperty(_assertThisInitialized(_this), "setUlElement", function (el) {
1004
+ _this.ulElement = el;
1005
+ });
1006
+
1007
+ return _this;
939
1008
  }
940
1009
 
941
1010
  _createClass(SuggestionsOverlay, [{
942
1011
  key: "componentDidUpdate",
943
1012
  value: function componentDidUpdate() {
944
- if (!this.suggestionsRef || this.suggestionsRef.offsetHeight >= this.suggestionsRef.scrollHeight || !this.props.scrollFocusedIntoView) {
1013
+ if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
945
1014
  return;
946
1015
  }
947
1016
 
948
- var scrollTop = this.suggestionsRef.scrollTop;
1017
+ var scrollTop = this.ulElement.scrollTop;
949
1018
 
950
- var _this$suggestionsRef$ = this.suggestionsRef.children[this.props.focusIndex].getBoundingClientRect(),
951
- top = _this$suggestionsRef$.top,
952
- bottom = _this$suggestionsRef$.bottom;
1019
+ var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
1020
+ top = _this$ulElement$child.top,
1021
+ bottom = _this$ulElement$child.bottom;
953
1022
 
954
- var _this$suggestionsRef$2 = this.suggestionsRef.getBoundingClientRect(),
955
- topContainer = _this$suggestionsRef$2.top;
1023
+ var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
1024
+ topContainer = _this$ulElement$getBo.top;
956
1025
 
957
1026
  top = top - topContainer + scrollTop;
958
1027
  bottom = bottom - topContainer + scrollTop;
959
1028
 
960
1029
  if (top < scrollTop) {
961
- this.suggestionsRef.scrollTop = top;
962
- } else if (bottom > this.suggestionsRef.offsetHeight) {
963
- this.suggestionsRef.scrollTop = bottom - this.suggestionsRef.offsetHeight;
1030
+ this.ulElement.scrollTop = top;
1031
+ } else if (bottom > this.ulElement.offsetHeight) {
1032
+ this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
964
1033
  }
965
1034
  }
966
1035
  }, {
967
1036
  key: "render",
968
1037
  value: function render() {
969
- var _this = this;
970
-
971
1038
  var _this$props = this.props,
972
1039
  suggestions = _this$props.suggestions,
973
1040
  isLoading = _this$props.isLoading,
974
1041
  style = _this$props.style,
975
- onMouseDown = _this$props.onMouseDown; // do not show suggestions until there is some data
1042
+ onMouseDown = _this$props.onMouseDown,
1043
+ containerRef = _this$props.containerRef,
1044
+ position = _this$props.position,
1045
+ left = _this$props.left,
1046
+ top = _this$props.top; // do not show suggestions until there is some data
976
1047
 
977
1048
  if (countSuggestions(suggestions) === 0 && !isLoading) {
978
1049
  return null;
979
1050
  }
980
1051
 
981
- return React.createElement("div", _extends({}, style, {
982
- onMouseDown: onMouseDown
1052
+ return React.createElement("div", _extends({}, inline({
1053
+ position: position || 'absolute',
1054
+ left: left,
1055
+ top: top
1056
+ }, style), {
1057
+ onMouseDown: onMouseDown,
1058
+ ref: containerRef
983
1059
  }), React.createElement("ul", _extends({
984
- ref: function ref(el) {
985
- _this.suggestionsRef = el;
986
- }
1060
+ ref: this.setUlElement
987
1061
  }, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
988
1062
  }
989
1063
  }, {
@@ -1004,7 +1078,7 @@ function (_Component) {
1004
1078
  value: function renderSuggestion(result, queryInfo, index) {
1005
1079
  var _this3 = this;
1006
1080
 
1007
- var id = this.getID(result);
1081
+ var id = getID(result);
1008
1082
  var isFocused = index === this.props.focusIndex;
1009
1083
  var childIndex = queryInfo.childIndex,
1010
1084
  query = queryInfo.query;
@@ -1028,15 +1102,6 @@ function (_Component) {
1028
1102
  }
1029
1103
  });
1030
1104
  }
1031
- }, {
1032
- key: "getID",
1033
- value: function getID(suggestion) {
1034
- if (suggestion instanceof String) {
1035
- return suggestion;
1036
- }
1037
-
1038
- return suggestion.id;
1039
- }
1040
1105
  }, {
1041
1106
  key: "renderLoadingIndicator",
1042
1107
  value: function renderLoadingIndicator() {
@@ -1044,22 +1109,10 @@ function (_Component) {
1044
1109
  return;
1045
1110
  }
1046
1111
 
1047
- return React.createElement(LoadingIndicator$1, {
1112
+ return React.createElement(LoadingIndicator, {
1048
1113
  style: this.props.style('loadingIndicator')
1049
1114
  });
1050
1115
  }
1051
- }, {
1052
- key: "handleMouseEnter",
1053
- value: function handleMouseEnter(index, ev) {
1054
- if (this.props.onMouseEnter) {
1055
- this.props.onMouseEnter(index);
1056
- }
1057
- }
1058
- }, {
1059
- key: "select",
1060
- value: function select(suggestion, queryInfo) {
1061
- this.props.onSelect(suggestion, queryInfo);
1062
- }
1063
1116
  }]);
1064
1117
 
1065
1118
  return SuggestionsOverlay;
@@ -1068,10 +1121,16 @@ function (_Component) {
1068
1121
  _defineProperty(SuggestionsOverlay, "propTypes", {
1069
1122
  suggestions: PropTypes.object.isRequired,
1070
1123
  focusIndex: PropTypes.number,
1124
+ position: PropTypes.string,
1125
+ left: PropTypes.number,
1126
+ top: PropTypes.number,
1071
1127
  scrollFocusedIntoView: PropTypes.bool,
1072
1128
  isLoading: PropTypes.bool,
1073
1129
  onSelect: PropTypes.func,
1074
1130
  ignoreAccents: PropTypes.bool,
1131
+ containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
1132
+ current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
1133
+ })]),
1075
1134
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
1076
1135
  });
1077
1136
 
@@ -1082,27 +1141,30 @@ _defineProperty(SuggestionsOverlay, "defaultProps", {
1082
1141
  }
1083
1142
  });
1084
1143
 
1085
- var styled$2 = defaultStyle(function (_ref2) {
1086
- var position = _ref2.position;
1087
- return _objectSpread$1({
1088
- position: 'absolute',
1089
- zIndex: 1,
1090
- backgroundColor: 'white',
1091
- marginTop: 14,
1092
- minWidth: 100
1093
- }, position, {
1094
- list: {
1095
- margin: 0,
1096
- padding: 0,
1097
- listStyleType: 'none'
1098
- }
1099
- });
1144
+ var getID = function getID(suggestion) {
1145
+ if (suggestion instanceof String) {
1146
+ return suggestion;
1147
+ }
1148
+
1149
+ return suggestion.id;
1150
+ };
1151
+
1152
+ var styled$2 = createDefaultStyle({
1153
+ zIndex: 1,
1154
+ backgroundColor: 'white',
1155
+ marginTop: 14,
1156
+ minWidth: 100,
1157
+ list: {
1158
+ margin: 0,
1159
+ padding: 0,
1160
+ listStyleType: 'none'
1161
+ }
1100
1162
  });
1101
1163
  var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
1102
1164
 
1103
- 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; }
1165
+ 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; }
1104
1166
 
1105
- 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; }
1167
+ 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; }
1106
1168
  var makeTriggerRegex = function makeTriggerRegex(trigger) {
1107
1169
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1108
1170
 
@@ -1154,7 +1216,6 @@ var propTypes = {
1154
1216
  */
1155
1217
  singleLine: PropTypes.bool,
1156
1218
  allowSpaceInQuery: PropTypes.bool,
1157
- EXPERIMENTAL_cutCopyPaste: PropTypes.bool,
1158
1219
  allowSuggestionsAboveCursor: PropTypes.bool,
1159
1220
  ignoreAccents: PropTypes.bool,
1160
1221
  value: PropTypes.string,
@@ -1181,14 +1242,19 @@ function (_React$Component) {
1181
1242
 
1182
1243
  _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
1183
1244
 
1184
- _defineProperty(_assertThisInitialized(_this), "getInputProps", function (isTextarea) {
1245
+ _defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
1246
+ _this.containerElement = el;
1247
+ });
1248
+
1249
+ _defineProperty(_assertThisInitialized(_this), "getInputProps", function () {
1185
1250
  var _this$props = _this.props,
1186
1251
  readOnly = _this$props.readOnly,
1187
1252
  disabled = _this$props.disabled,
1188
- style = _this$props.style; // pass all props that we don't use through to the input control
1253
+ style = _this$props.style; // pass all props that neither we, nor substyle, consume through to the input control
1189
1254
 
1190
- var props = omit(_this.props, 'style', keys(propTypes));
1191
- return _objectSpread$2({}, props, {}, style('input'), {
1255
+ var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
1256
+ keys(propTypes));
1257
+ return _objectSpread({}, props, {}, style('input'), {
1192
1258
  value: _this.getPlainText()
1193
1259
  }, !readOnly && !disabled && {
1194
1260
  onChange: _this.handleChange,
@@ -1206,9 +1272,9 @@ function (_React$Component) {
1206
1272
  singleLine = _this$props2.singleLine,
1207
1273
  style = _this$props2.style;
1208
1274
 
1209
- var inputProps = _this.getInputProps(!singleLine);
1275
+ var inputProps = _this.getInputProps();
1210
1276
 
1211
- return React.createElement("div", style('control'), _this.renderHighlighter(inputProps.style), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
1277
+ return React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
1212
1278
  });
1213
1279
 
1214
1280
  _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
@@ -1225,7 +1291,7 @@ function (_React$Component) {
1225
1291
  });
1226
1292
 
1227
1293
  _defineProperty(_assertThisInitialized(_this), "setInputRef", function (el) {
1228
- _this.inputRef = el;
1294
+ _this.inputElement = el;
1229
1295
  var inputRef = _this.props.inputRef;
1230
1296
 
1231
1297
  if (typeof inputRef === 'function') {
@@ -1235,29 +1301,32 @@ function (_React$Component) {
1235
1301
  }
1236
1302
  });
1237
1303
 
1304
+ _defineProperty(_assertThisInitialized(_this), "setSuggestionsElement", function (el) {
1305
+ _this.suggestionsElement = el;
1306
+ });
1307
+
1238
1308
  _defineProperty(_assertThisInitialized(_this), "renderSuggestionsOverlay", function () {
1239
1309
  if (!isNumber(_this.state.selectionStart)) {
1240
1310
  // do not show suggestions when the input does not have the focus
1241
1311
  return null;
1242
1312
  }
1243
1313
 
1314
+ var _this$state$suggestio = _this.state.suggestionsPosition,
1315
+ position = _this$state$suggestio.position,
1316
+ left = _this$state$suggestio.left,
1317
+ top = _this$state$suggestio.top;
1244
1318
  var suggestionsNode = React.createElement(SuggestionsOverlay$1, {
1245
1319
  style: _this.props.style('suggestions'),
1246
- position: _this.state.suggestionsPosition,
1320
+ position: position,
1321
+ left: left,
1322
+ top: top,
1247
1323
  focusIndex: _this.state.focusIndex,
1248
1324
  scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
1249
- ref: function ref(el) {
1250
- _this.suggestionsRef = el;
1251
- },
1325
+ containerRef: _this.setSuggestionsElement,
1252
1326
  suggestions: _this.state.suggestions,
1253
1327
  onSelect: _this.addMention,
1254
1328
  onMouseDown: _this.handleSuggestionsMouseDown,
1255
- onMouseEnter: function onMouseEnter(focusIndex) {
1256
- return _this.setState({
1257
- focusIndex: focusIndex,
1258
- scrollFocusedIntoView: false
1259
- });
1260
- },
1329
+ onMouseEnter: _this.handleSuggestionsMouseEnter,
1261
1330
  isLoading: _this.isLoading(),
1262
1331
  ignoreAccents: _this.props.ignoreAccents
1263
1332
  }, _this.props.children);
@@ -1269,7 +1338,7 @@ function (_React$Component) {
1269
1338
  }
1270
1339
  });
1271
1340
 
1272
- _defineProperty(_assertThisInitialized(_this), "renderHighlighter", function (inputStyle) {
1341
+ _defineProperty(_assertThisInitialized(_this), "renderHighlighter", function () {
1273
1342
  var _this$state = _this.state,
1274
1343
  selectionStart = _this$state.selectionStart,
1275
1344
  selectionEnd = _this$state.selectionEnd;
@@ -1279,25 +1348,26 @@ function (_React$Component) {
1279
1348
  value = _this$props3.value,
1280
1349
  style = _this$props3.style;
1281
1350
  return React.createElement(Highlighter$1, {
1282
- ref: function ref(el) {
1283
- _this.highlighterRef = el;
1284
- },
1351
+ containerRef: _this.setHighlighterElement,
1285
1352
  style: style('highlighter'),
1286
- inputStyle: inputStyle,
1287
1353
  value: value,
1288
1354
  singleLine: singleLine,
1289
- selection: {
1290
- start: selectionStart,
1291
- end: selectionEnd
1292
- },
1293
- onCaretPositionChange: function onCaretPositionChange(position) {
1294
- return _this.setState({
1295
- caretPosition: position
1296
- });
1297
- }
1355
+ selectionStart: selectionStart,
1356
+ selectionEnd: selectionEnd,
1357
+ onCaretPositionChange: _this.handleCaretPositionChange
1298
1358
  }, children);
1299
1359
  });
1300
1360
 
1361
+ _defineProperty(_assertThisInitialized(_this), "setHighlighterElement", function (el) {
1362
+ _this.highlighterElement = el;
1363
+ });
1364
+
1365
+ _defineProperty(_assertThisInitialized(_this), "handleCaretPositionChange", function (position) {
1366
+ _this.setState({
1367
+ caretPosition: position
1368
+ });
1369
+ });
1370
+
1301
1371
  _defineProperty(_assertThisInitialized(_this), "getPlainText", function () {
1302
1372
  return getPlainText(_this.props.value || '', readConfigFromChildren(_this.props.children));
1303
1373
  });
@@ -1321,7 +1391,8 @@ function (_React$Component) {
1321
1391
  });
1322
1392
 
1323
1393
  _defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
1324
- // if we are inside iframe, we need to find activeElement within its contentDocument
1394
+ isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
1395
+
1325
1396
  var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
1326
1397
 
1327
1398
  if (currentDocument.activeElement !== ev.target) {
@@ -1383,7 +1454,7 @@ function (_React$Component) {
1383
1454
 
1384
1455
  if (isComposing) return; // refresh suggestions queries
1385
1456
 
1386
- var el = _this.inputRef;
1457
+ var el = _this.inputElement;
1387
1458
 
1388
1459
  if (ev.target.selectionStart === ev.target.selectionEnd) {
1389
1460
  _this.updateMentionsQueries(el.value, ev.target.selectionStart);
@@ -1400,15 +1471,14 @@ function (_React$Component) {
1400
1471
  _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
1401
1472
  // do not intercept key events if the suggestions overlay is not shown
1402
1473
  var suggestionsCount = countSuggestions(_this.state.suggestions);
1403
- var suggestionsComp = _this.suggestionsRef;
1404
1474
 
1405
- if (suggestionsCount === 0 || !suggestionsComp) {
1475
+ if (suggestionsCount === 0 || !_this.suggestionsElement) {
1406
1476
  _this.props.onKeyDown(ev);
1407
1477
 
1408
1478
  return;
1409
1479
  }
1410
1480
 
1411
- if (values(KEY).indexOf(ev.keyCode) >= 0) {
1481
+ if (Object.values(KEY).indexOf(ev.keyCode) >= 0) {
1412
1482
  ev.preventDefault();
1413
1483
  }
1414
1484
 
@@ -1511,18 +1581,25 @@ function (_React$Component) {
1511
1581
  _this._suggestionsMouseDown = true;
1512
1582
  });
1513
1583
 
1584
+ _defineProperty(_assertThisInitialized(_this), "handleSuggestionsMouseEnter", function (focusIndex) {
1585
+ _this.setState({
1586
+ focusIndex: focusIndex,
1587
+ scrollFocusedIntoView: false
1588
+ });
1589
+ });
1590
+
1514
1591
  _defineProperty(_assertThisInitialized(_this), "updateSuggestionsPosition", function () {
1515
1592
  var caretPosition = _this.state.caretPosition;
1516
1593
  var _this$props5 = _this.props,
1517
1594
  suggestionsPortalHost = _this$props5.suggestionsPortalHost,
1518
1595
  allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
1519
1596
 
1520
- if (!caretPosition || !_this.suggestionsRef) {
1597
+ if (!caretPosition || !_this.suggestionsElement) {
1521
1598
  return;
1522
1599
  }
1523
1600
 
1524
- var suggestions = ReactDOM.findDOMNode(_this.suggestionsRef);
1525
- var highlighter = ReactDOM.findDOMNode(_this.highlighterRef); // first get viewport-relative position (highlighter is offsetParent of caret):
1601
+ var suggestions = _this.suggestionsElement;
1602
+ var highlighter = _this.highlighterElement; // first get viewport-relative position (highlighter is offsetParent of caret):
1526
1603
 
1527
1604
  var caretOffsetParentRect = highlighter.getBoundingClientRect();
1528
1605
  var caretHeight = getComputedStyleLengthProp(highlighter, 'font-size');
@@ -1571,7 +1648,7 @@ function (_React$Component) {
1571
1648
  var _top = caretPosition.top - highlighter.scrollTop; // guard for mentions suggestions list clipped by right edge of window
1572
1649
 
1573
1650
 
1574
- if (_left + suggestions.offsetWidth > _this.containerRef.offsetWidth) {
1651
+ if (_left + suggestions.offsetWidth > _this.containerElement.offsetWidth) {
1575
1652
  position.right = 0;
1576
1653
  } else {
1577
1654
  position.left = _left;
@@ -1587,7 +1664,7 @@ function (_React$Component) {
1587
1664
  }
1588
1665
  }
1589
1666
 
1590
- if (isEqual(position, _this.state.suggestionsPosition)) {
1667
+ if (position.left === _this.state.suggestionsPosition.left && position.top === _this.state.suggestionsPosition.top && position.position === _this.state.suggestionsPosition.position) {
1591
1668
  return;
1592
1669
  }
1593
1670
 
@@ -1597,14 +1674,15 @@ function (_React$Component) {
1597
1674
  });
1598
1675
 
1599
1676
  _defineProperty(_assertThisInitialized(_this), "updateHighlighterScroll", function () {
1600
- if (!_this.inputRef || !_this.highlighterRef) {
1677
+ var input = _this.inputElement;
1678
+ var highlighter = _this.highlighterElement;
1679
+
1680
+ if (!input || !highlighter) {
1601
1681
  // since the invocation of this function is deferred,
1602
1682
  // the whole component may have been unmounted in the meanwhile
1603
1683
  return;
1604
1684
  }
1605
1685
 
1606
- var input = _this.inputRef;
1607
- var highlighter = ReactDOM.findDOMNode(_this.highlighterRef);
1608
1686
  highlighter.scrollLeft = input.scrollLeft;
1609
1687
  highlighter.scrollTop = input.scrollTop;
1610
1688
  highlighter.height = input.height;
@@ -1620,7 +1698,7 @@ function (_React$Component) {
1620
1698
 
1621
1699
  _defineProperty(_assertThisInitialized(_this), "setSelection", function (selectionStart, selectionEnd) {
1622
1700
  if (selectionStart === null || selectionEnd === null) return;
1623
- var el = _this.inputRef;
1701
+ var el = _this.inputElement;
1624
1702
 
1625
1703
  if (el.setSelectionRange) {
1626
1704
  el.setSelectionRange(selectionStart, selectionEnd);
@@ -1701,7 +1779,7 @@ function (_React$Component) {
1701
1779
  if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
1702
1780
  // won't overwrite each other
1703
1781
 
1704
- _this.suggestions = _objectSpread$2({}, _this.suggestions, _defineProperty({}, childIndex, {
1782
+ _this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
1705
1783
  queryInfo: {
1706
1784
  childIndex: childIndex,
1707
1785
  query: query,
@@ -1746,7 +1824,7 @@ function (_React$Component) {
1746
1824
 
1747
1825
  var newValue = spliceString(value, start, end, insert); // Refocus input and set caret position to end of mention
1748
1826
 
1749
- _this.inputRef.focus();
1827
+ _this.inputElement.focus();
1750
1828
 
1751
1829
  var displayValue = displayTransform(id, display);
1752
1830
 
@@ -1801,7 +1879,7 @@ function (_React$Component) {
1801
1879
  selectionEnd: null,
1802
1880
  suggestions: {},
1803
1881
  caretPosition: null,
1804
- suggestionsPosition: null
1882
+ suggestionsPosition: {}
1805
1883
  };
1806
1884
  return _this;
1807
1885
  }
@@ -1809,14 +1887,9 @@ function (_React$Component) {
1809
1887
  _createClass(MentionsInput, [{
1810
1888
  key: "componentDidMount",
1811
1889
  value: function componentDidMount() {
1812
- var EXPERIMENTAL_cutCopyPaste = this.props.EXPERIMENTAL_cutCopyPaste;
1813
-
1814
- if (EXPERIMENTAL_cutCopyPaste) {
1815
- document.addEventListener('copy', this.handleCopy);
1816
- document.addEventListener('cut', this.handleCut);
1817
- document.addEventListener('paste', this.handlePaste);
1818
- }
1819
-
1890
+ document.addEventListener('copy', this.handleCopy);
1891
+ document.addEventListener('cut', this.handleCut);
1892
+ document.addEventListener('paste', this.handlePaste);
1820
1893
  this.updateSuggestionsPosition();
1821
1894
  }
1822
1895
  }, {
@@ -1840,29 +1913,21 @@ function (_React$Component) {
1840
1913
  }, {
1841
1914
  key: "componentWillUnmount",
1842
1915
  value: function componentWillUnmount() {
1843
- var EXPERIMENTAL_cutCopyPaste = this.props.EXPERIMENTAL_cutCopyPaste;
1844
-
1845
- if (EXPERIMENTAL_cutCopyPaste) {
1846
- document.removeEventListener('copy', this.handleCopy);
1847
- document.removeEventListener('cut', this.handleCut);
1848
- document.removeEventListener('paste', this.handlePaste);
1849
- }
1916
+ document.removeEventListener('copy', this.handleCopy);
1917
+ document.removeEventListener('cut', this.handleCut);
1918
+ document.removeEventListener('paste', this.handlePaste);
1850
1919
  }
1851
1920
  }, {
1852
1921
  key: "render",
1853
1922
  value: function render() {
1854
- var _this2 = this;
1855
-
1856
1923
  return React.createElement("div", _extends({
1857
- ref: function ref(el) {
1858
- _this2.containerRef = el;
1859
- }
1924
+ ref: this.setContainerElement
1860
1925
  }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
1861
1926
  }
1862
1927
  }, {
1863
1928
  key: "handlePaste",
1864
1929
  value: function handlePaste(event) {
1865
- if (event.target !== this.inputRef) {
1930
+ if (event.target !== this.inputElement) {
1866
1931
  return;
1867
1932
  }
1868
1933
 
@@ -1882,10 +1947,10 @@ function (_React$Component) {
1882
1947
  var markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, 'END');
1883
1948
  var pastedMentions = event.clipboardData.getData('text/react-mentions');
1884
1949
  var pastedData = event.clipboardData.getData('text/plain');
1885
- var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData);
1950
+ var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
1886
1951
  var newPlainTextValue = getPlainText(newValue, config);
1887
1952
  var eventMock = {
1888
- target: _objectSpread$2({}, event.target, {
1953
+ target: _objectSpread({}, event.target, {
1889
1954
  value: newValue
1890
1955
  })
1891
1956
  };
@@ -1914,7 +1979,7 @@ function (_React$Component) {
1914
1979
  }, {
1915
1980
  key: "handleCopy",
1916
1981
  value: function handleCopy(event) {
1917
- if (event.target !== this.inputRef) {
1982
+ if (event.target !== this.inputElement) {
1918
1983
  return;
1919
1984
  }
1920
1985
 
@@ -1928,7 +1993,7 @@ function (_React$Component) {
1928
1993
  }, {
1929
1994
  key: "handleCut",
1930
1995
  value: function handleCut(event) {
1931
- if (event.target !== this.inputRef) {
1996
+ if (event.target !== this.inputElement) {
1932
1997
  return;
1933
1998
  }
1934
1999
 
@@ -1950,7 +2015,7 @@ function (_React$Component) {
1950
2015
  var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
1951
2016
  var newPlainTextValue = getPlainText(newValue, config);
1952
2017
  var eventMock = {
1953
- target: _objectSpread$2({}, event.target, {
2018
+ target: _objectSpread({}, event.target, {
1954
2019
  value: newPlainTextValue
1955
2020
  })
1956
2021
  };
@@ -1990,24 +2055,24 @@ var getComputedStyleLengthProp = function getComputedStyleLengthProp(forElement,
1990
2055
  };
1991
2056
 
1992
2057
  var isMobileSafari = typeof navigator !== 'undefined' && /iPhone|iPad|iPod/i.test(navigator.userAgent);
1993
- var styled$3 = defaultStyle({
2058
+ var styled$3 = createDefaultStyle({
1994
2059
  position: 'relative',
1995
2060
  overflowY: 'visible',
1996
2061
  input: {
1997
2062
  display: 'block',
2063
+ width: '100%',
1998
2064
  position: 'absolute',
2065
+ margin: 0,
1999
2066
  top: 0,
2000
2067
  left: 0,
2001
2068
  boxSizing: 'border-box',
2002
2069
  backgroundColor: 'transparent',
2003
- width: 'inherit',
2004
2070
  fontFamily: 'inherit',
2005
2071
  fontSize: 'inherit',
2006
2072
  letterSpacing: 'inherit'
2007
2073
  },
2008
2074
  '&multiLine': {
2009
- input: _objectSpread$2({
2010
- width: '100%',
2075
+ input: _objectSpread({
2011
2076
  height: '100%',
2012
2077
  bottom: 0,
2013
2078
  overflow: 'hidden',
@@ -2026,14 +2091,23 @@ var styled$3 = defaultStyle({
2026
2091
  });
2027
2092
  var MentionsInput$1 = styled$3(MentionsInput);
2028
2093
 
2029
- var styled$4 = defaultStyle({
2094
+ var defaultStyle = {
2030
2095
  fontWeight: 'inherit'
2031
- });
2032
- var Mention = styled$4(function (_ref) {
2096
+ };
2097
+
2098
+ var Mention = function Mention(_ref) {
2033
2099
  var display = _ref.display,
2034
- style = _ref.style;
2035
- return React.createElement("strong", style, display);
2036
- });
2100
+ style = _ref.style,
2101
+ className = _ref.className,
2102
+ classNames = _ref.classNames;
2103
+ var styles = useStyles(defaultStyle, {
2104
+ style: style,
2105
+ className: className,
2106
+ classNames: classNames
2107
+ });
2108
+ return React.createElement("strong", styles, display);
2109
+ };
2110
+
2037
2111
  Mention.propTypes = {
2038
2112
  /**
2039
2113
  * Called when a new mention is added in the input