react-mentions 4.4.2 → 4.4.4
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.
- package/CHANGELOG.md +13 -0
- package/dist/react-mentions.cjs.dev.js +92 -62
- package/dist/react-mentions.cjs.prod.js +144 -31
- package/dist/react-mentions.esm.js +92 -62
- package/package.json +7 -6
|
@@ -2,10 +2,10 @@ import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
|
|
|
2
2
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
3
3
|
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
|
|
4
4
|
import _createClass from '@babel/runtime/helpers/esm/createClass';
|
|
5
|
-
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
|
|
6
|
-
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
|
7
5
|
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
|
|
8
6
|
import _inherits from '@babel/runtime/helpers/esm/inherits';
|
|
7
|
+
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
|
|
8
|
+
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
|
9
9
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
10
10
|
import React, { Children, Component } from 'react';
|
|
11
11
|
import invariant from 'invariant';
|
|
@@ -651,13 +651,15 @@ var omit = function omit(obj) {
|
|
|
651
651
|
}, {});
|
|
652
652
|
};
|
|
653
653
|
|
|
654
|
+
var _excluded = ["style", "className", "classNames"];
|
|
655
|
+
|
|
654
656
|
function createDefaultStyle(defaultStyle, getModifiers) {
|
|
655
657
|
var enhance = function enhance(ComponentToWrap) {
|
|
656
658
|
var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
|
|
657
659
|
var style = _ref.style,
|
|
658
660
|
className = _ref.className,
|
|
659
661
|
classNames = _ref.classNames,
|
|
660
|
-
rest = _objectWithoutProperties(_ref,
|
|
662
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
661
663
|
|
|
662
664
|
var modifiers = getModifiers ? getModifiers(rest) : undefined;
|
|
663
665
|
var styles = useStyles(defaultStyle, {
|
|
@@ -665,7 +667,7 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
|
665
667
|
className: className,
|
|
666
668
|
classNames: classNames
|
|
667
669
|
}, modifiers);
|
|
668
|
-
return React.createElement(ComponentToWrap, _extends({}, rest, {
|
|
670
|
+
return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({}, rest, {
|
|
669
671
|
style: styles
|
|
670
672
|
}));
|
|
671
673
|
};
|
|
@@ -678,6 +680,10 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
|
678
680
|
return enhance;
|
|
679
681
|
}
|
|
680
682
|
|
|
683
|
+
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); }; }
|
|
684
|
+
|
|
685
|
+
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; } }
|
|
686
|
+
|
|
681
687
|
var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
|
|
682
688
|
if (!usedKeys.hasOwnProperty(id)) {
|
|
683
689
|
usedKeys[id] = 0;
|
|
@@ -688,17 +694,17 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
|
|
|
688
694
|
return id + '_' + usedKeys[id];
|
|
689
695
|
};
|
|
690
696
|
|
|
691
|
-
var Highlighter =
|
|
692
|
-
/*#__PURE__*/
|
|
693
|
-
function (_Component) {
|
|
697
|
+
var Highlighter = /*#__PURE__*/function (_Component) {
|
|
694
698
|
_inherits(Highlighter, _Component);
|
|
695
699
|
|
|
700
|
+
var _super = _createSuper(Highlighter);
|
|
701
|
+
|
|
696
702
|
function Highlighter() {
|
|
697
703
|
var _this;
|
|
698
704
|
|
|
699
705
|
_classCallCheck(this, Highlighter);
|
|
700
706
|
|
|
701
|
-
_this =
|
|
707
|
+
_this = _super.apply(this, arguments);
|
|
702
708
|
|
|
703
709
|
_defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
|
|
704
710
|
_this.caretElement = el;
|
|
@@ -801,7 +807,7 @@ function (_Component) {
|
|
|
801
807
|
resultComponents.push(this.renderHighlighterCaret(components));
|
|
802
808
|
}
|
|
803
809
|
|
|
804
|
-
return React.createElement("div", _extends({}, style, {
|
|
810
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, style, {
|
|
805
811
|
ref: containerRef
|
|
806
812
|
}), resultComponents);
|
|
807
813
|
}
|
|
@@ -809,7 +815,7 @@ function (_Component) {
|
|
|
809
815
|
key: "renderSubstring",
|
|
810
816
|
value: function renderSubstring(string, key) {
|
|
811
817
|
// set substring span to hidden, so that Emojis are not shown double in Mobile Safari
|
|
812
|
-
return React.createElement("span", _extends({}, this.props.style('substring'), {
|
|
818
|
+
return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('substring'), {
|
|
813
819
|
key: key
|
|
814
820
|
}), string);
|
|
815
821
|
} // Returns a clone of the Mention child applicable for the specified type to be rendered inside the highlighter
|
|
@@ -823,13 +829,13 @@ function (_Component) {
|
|
|
823
829
|
key: key
|
|
824
830
|
};
|
|
825
831
|
var child = Children.toArray(this.props.children)[mentionChildIndex];
|
|
826
|
-
return React.cloneElement(child, props);
|
|
832
|
+
return /*#__PURE__*/React.cloneElement(child, props);
|
|
827
833
|
} // Renders an component to be inserted in the highlighter at the current caret position
|
|
828
834
|
|
|
829
835
|
}, {
|
|
830
836
|
key: "renderHighlighterCaret",
|
|
831
837
|
value: function renderHighlighterCaret(children) {
|
|
832
|
-
return React.createElement("span", _extends({}, this.props.style('caret'), {
|
|
838
|
+
return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('caret'), {
|
|
833
839
|
ref: this.setCaretElement,
|
|
834
840
|
key: "caret"
|
|
835
841
|
}), children);
|
|
@@ -878,15 +884,19 @@ var styled = createDefaultStyle({
|
|
|
878
884
|
});
|
|
879
885
|
var Highlighter$1 = styled(Highlighter);
|
|
880
886
|
|
|
881
|
-
var
|
|
882
|
-
|
|
883
|
-
function (
|
|
887
|
+
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); }; }
|
|
888
|
+
|
|
889
|
+
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; } }
|
|
890
|
+
|
|
891
|
+
var Suggestion = /*#__PURE__*/function (_Component) {
|
|
884
892
|
_inherits(Suggestion, _Component);
|
|
885
893
|
|
|
894
|
+
var _super = _createSuper$1(Suggestion);
|
|
895
|
+
|
|
886
896
|
function Suggestion() {
|
|
887
897
|
_classCallCheck(this, Suggestion);
|
|
888
898
|
|
|
889
|
-
return
|
|
899
|
+
return _super.apply(this, arguments);
|
|
890
900
|
}
|
|
891
901
|
|
|
892
902
|
_createClass(Suggestion, [{
|
|
@@ -894,7 +904,7 @@ function (_Component) {
|
|
|
894
904
|
value: function render() {
|
|
895
905
|
var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
|
|
896
906
|
keys(Suggestion.propTypes));
|
|
897
|
-
return React.createElement("li", _extends({
|
|
907
|
+
return /*#__PURE__*/React.createElement("li", _extends({
|
|
898
908
|
id: this.props.id,
|
|
899
909
|
role: "option",
|
|
900
910
|
"aria-selected": this.props.focused
|
|
@@ -946,10 +956,10 @@ function (_Component) {
|
|
|
946
956
|
var i = getSubstringIndex(display, query, ignoreAccents);
|
|
947
957
|
|
|
948
958
|
if (i === -1) {
|
|
949
|
-
return React.createElement("span", style('display'), display);
|
|
959
|
+
return /*#__PURE__*/React.createElement("span", style('display'), display);
|
|
950
960
|
}
|
|
951
961
|
|
|
952
|
-
return React.createElement("span", style('display'), display.substring(0, i), React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
|
|
962
|
+
return /*#__PURE__*/React.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
|
|
953
963
|
}
|
|
954
964
|
}]);
|
|
955
965
|
|
|
@@ -978,20 +988,31 @@ var styled$1 = createDefaultStyle({
|
|
|
978
988
|
});
|
|
979
989
|
var Suggestion$1 = styled$1(Suggestion);
|
|
980
990
|
|
|
981
|
-
function LoadingIndicator() {
|
|
982
|
-
var
|
|
991
|
+
function LoadingIndicator(_ref) {
|
|
992
|
+
var style = _ref.style,
|
|
993
|
+
className = _ref.className,
|
|
994
|
+
classNames = _ref.classNames;
|
|
995
|
+
var styles = useStyles(defaultstyle, {
|
|
996
|
+
style: style,
|
|
997
|
+
className: className,
|
|
998
|
+
classNames: classNames
|
|
999
|
+
});
|
|
983
1000
|
var spinnerStyles = styles('spinner');
|
|
984
|
-
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']))));
|
|
1001
|
+
return /*#__PURE__*/React.createElement("div", styles, /*#__PURE__*/React.createElement("div", spinnerStyles, /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element5']))));
|
|
985
1002
|
}
|
|
986
1003
|
|
|
987
|
-
var
|
|
988
|
-
|
|
989
|
-
function (
|
|
1004
|
+
var defaultstyle = {};
|
|
1005
|
+
|
|
1006
|
+
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); }; }
|
|
1007
|
+
|
|
1008
|
+
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; } }
|
|
1009
|
+
|
|
1010
|
+
var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
|
|
990
1011
|
_inherits(SuggestionsOverlay, _Component);
|
|
991
1012
|
|
|
992
|
-
|
|
993
|
-
var _getPrototypeOf2;
|
|
1013
|
+
var _super = _createSuper$2(SuggestionsOverlay);
|
|
994
1014
|
|
|
1015
|
+
function SuggestionsOverlay() {
|
|
995
1016
|
var _this;
|
|
996
1017
|
|
|
997
1018
|
_classCallCheck(this, SuggestionsOverlay);
|
|
@@ -1000,7 +1021,7 @@ function (_Component) {
|
|
|
1000
1021
|
args[_key] = arguments[_key];
|
|
1001
1022
|
}
|
|
1002
1023
|
|
|
1003
|
-
_this =
|
|
1024
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
1004
1025
|
|
|
1005
1026
|
_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
|
|
1006
1027
|
if (_this.props.onMouseEnter) {
|
|
@@ -1063,7 +1084,7 @@ function (_Component) {
|
|
|
1063
1084
|
return null;
|
|
1064
1085
|
}
|
|
1065
1086
|
|
|
1066
|
-
return React.createElement("div", _extends({}, inline({
|
|
1087
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, inline({
|
|
1067
1088
|
position: position || 'absolute',
|
|
1068
1089
|
left: left,
|
|
1069
1090
|
right: right,
|
|
@@ -1071,7 +1092,7 @@ function (_Component) {
|
|
|
1071
1092
|
}, style), {
|
|
1072
1093
|
onMouseDown: onMouseDown,
|
|
1073
1094
|
ref: containerRef
|
|
1074
|
-
}), React.createElement("ul", _extends({
|
|
1095
|
+
}), /*#__PURE__*/React.createElement("ul", _extends({
|
|
1075
1096
|
ref: this.setUlElement,
|
|
1076
1097
|
id: id,
|
|
1077
1098
|
role: "listbox",
|
|
@@ -1083,13 +1104,15 @@ function (_Component) {
|
|
|
1083
1104
|
value: function renderSuggestions() {
|
|
1084
1105
|
var _this2 = this;
|
|
1085
1106
|
|
|
1086
|
-
|
|
1107
|
+
var customSuggestionsContainer = this.props.customSuggestionsContainer;
|
|
1108
|
+
var suggestions = Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
|
|
1087
1109
|
var results = _ref.results,
|
|
1088
1110
|
queryInfo = _ref.queryInfo;
|
|
1089
1111
|
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
|
|
1090
1112
|
return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
|
|
1091
1113
|
})));
|
|
1092
1114
|
}, []);
|
|
1115
|
+
if (customSuggestionsContainer) return customSuggestionsContainer(suggestions);else return suggestions;
|
|
1093
1116
|
}
|
|
1094
1117
|
}, {
|
|
1095
1118
|
key: "renderSuggestion",
|
|
@@ -1101,7 +1124,7 @@ function (_Component) {
|
|
|
1101
1124
|
query = queryInfo.query;
|
|
1102
1125
|
var renderSuggestion = Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
|
|
1103
1126
|
var ignoreAccents = this.props.ignoreAccents;
|
|
1104
|
-
return React.createElement(Suggestion$1, {
|
|
1127
|
+
return /*#__PURE__*/React.createElement(Suggestion$1, {
|
|
1105
1128
|
style: this.props.style('item'),
|
|
1106
1129
|
key: "".concat(childIndex, "-").concat(getID(result)),
|
|
1107
1130
|
id: getSuggestionHtmlId(this.props.id, index),
|
|
@@ -1126,7 +1149,7 @@ function (_Component) {
|
|
|
1126
1149
|
return;
|
|
1127
1150
|
}
|
|
1128
1151
|
|
|
1129
|
-
return React.createElement(LoadingIndicator, {
|
|
1152
|
+
return /*#__PURE__*/React.createElement(LoadingIndicator, {
|
|
1130
1153
|
style: this.props.style('loadingIndicator')
|
|
1131
1154
|
});
|
|
1132
1155
|
}
|
|
@@ -1183,9 +1206,13 @@ var styled$2 = createDefaultStyle({
|
|
|
1183
1206
|
});
|
|
1184
1207
|
var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
|
|
1185
1208
|
|
|
1186
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
1209
|
+
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; }
|
|
1210
|
+
|
|
1211
|
+
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; }
|
|
1187
1212
|
|
|
1188
|
-
function
|
|
1213
|
+
function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
1214
|
+
|
|
1215
|
+
function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
1189
1216
|
var makeTriggerRegex = function makeTriggerRegex(trigger) {
|
|
1190
1217
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1191
1218
|
|
|
@@ -1243,6 +1270,7 @@ var propTypes = {
|
|
|
1243
1270
|
a11ySuggestionsListLabel: PropTypes.string,
|
|
1244
1271
|
value: PropTypes.string,
|
|
1245
1272
|
onKeyDown: PropTypes.func,
|
|
1273
|
+
customSuggestionsContainer: PropTypes.func,
|
|
1246
1274
|
onSelect: PropTypes.func,
|
|
1247
1275
|
onBlur: PropTypes.func,
|
|
1248
1276
|
onChange: PropTypes.func,
|
|
@@ -1253,17 +1281,17 @@ var propTypes = {
|
|
|
1253
1281
|
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
|
|
1254
1282
|
};
|
|
1255
1283
|
|
|
1256
|
-
var MentionsInput =
|
|
1257
|
-
/*#__PURE__*/
|
|
1258
|
-
function (_React$Component) {
|
|
1284
|
+
var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1259
1285
|
_inherits(MentionsInput, _React$Component);
|
|
1260
1286
|
|
|
1287
|
+
var _super = _createSuper$3(MentionsInput);
|
|
1288
|
+
|
|
1261
1289
|
function MentionsInput(_props) {
|
|
1262
1290
|
var _this;
|
|
1263
1291
|
|
|
1264
1292
|
_classCallCheck(this, MentionsInput);
|
|
1265
1293
|
|
|
1266
|
-
_this =
|
|
1294
|
+
_this = _super.call(this, _props);
|
|
1267
1295
|
|
|
1268
1296
|
_defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
|
|
1269
1297
|
_this.containerElement = el;
|
|
@@ -1277,17 +1305,17 @@ function (_React$Component) {
|
|
|
1277
1305
|
|
|
1278
1306
|
var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
|
|
1279
1307
|
keys(propTypes));
|
|
1280
|
-
return _objectSpread({}, props,
|
|
1281
|
-
value: _this.getPlainText()
|
|
1308
|
+
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
|
|
1309
|
+
value: _this.getPlainText(),
|
|
1310
|
+
onScroll: _this.updateHighlighterScroll
|
|
1282
1311
|
}, !readOnly && !disabled && {
|
|
1283
1312
|
onChange: _this.handleChange,
|
|
1284
1313
|
onSelect: _this.handleSelect,
|
|
1285
1314
|
onKeyDown: _this.handleKeyDown,
|
|
1286
1315
|
onBlur: _this.handleBlur,
|
|
1287
1316
|
onCompositionStart: _this.handleCompositionStart,
|
|
1288
|
-
onCompositionEnd: _this.handleCompositionEnd
|
|
1289
|
-
|
|
1290
|
-
}, {}, _this.isOpened() && {
|
|
1317
|
+
onCompositionEnd: _this.handleCompositionEnd
|
|
1318
|
+
}), _this.isOpened() && {
|
|
1291
1319
|
role: 'combobox',
|
|
1292
1320
|
'aria-controls': _this.uuidSuggestionsOverlay,
|
|
1293
1321
|
'aria-expanded': true,
|
|
@@ -1304,18 +1332,18 @@ function (_React$Component) {
|
|
|
1304
1332
|
|
|
1305
1333
|
var inputProps = _this.getInputProps();
|
|
1306
1334
|
|
|
1307
|
-
return React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
|
|
1335
|
+
return /*#__PURE__*/React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
|
|
1308
1336
|
});
|
|
1309
1337
|
|
|
1310
1338
|
_defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
|
|
1311
|
-
return React.createElement("input", _extends({
|
|
1339
|
+
return /*#__PURE__*/React.createElement("input", _extends({
|
|
1312
1340
|
type: "text",
|
|
1313
1341
|
ref: _this.setInputRef
|
|
1314
1342
|
}, props));
|
|
1315
1343
|
});
|
|
1316
1344
|
|
|
1317
1345
|
_defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
|
|
1318
|
-
return React.createElement("textarea", _extends({
|
|
1346
|
+
return /*#__PURE__*/React.createElement("textarea", _extends({
|
|
1319
1347
|
ref: _this.setInputRef
|
|
1320
1348
|
}, props));
|
|
1321
1349
|
});
|
|
@@ -1346,7 +1374,7 @@ function (_React$Component) {
|
|
|
1346
1374
|
left = _this$state$suggestio.left,
|
|
1347
1375
|
top = _this$state$suggestio.top,
|
|
1348
1376
|
right = _this$state$suggestio.right;
|
|
1349
|
-
var suggestionsNode = React.createElement(SuggestionsOverlay$1, {
|
|
1377
|
+
var suggestionsNode = /*#__PURE__*/React.createElement(SuggestionsOverlay$1, {
|
|
1350
1378
|
id: _this.uuidSuggestionsOverlay,
|
|
1351
1379
|
style: _this.props.style('suggestions'),
|
|
1352
1380
|
position: position,
|
|
@@ -1357,6 +1385,7 @@ function (_React$Component) {
|
|
|
1357
1385
|
scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
|
|
1358
1386
|
containerRef: _this.setSuggestionsElement,
|
|
1359
1387
|
suggestions: _this.state.suggestions,
|
|
1388
|
+
customSuggestionsContainer: _this.props.customSuggestionsContainer,
|
|
1360
1389
|
onSelect: _this.addMention,
|
|
1361
1390
|
onMouseDown: _this.handleSuggestionsMouseDown,
|
|
1362
1391
|
onMouseEnter: _this.handleSuggestionsMouseEnter,
|
|
@@ -1367,7 +1396,7 @@ function (_React$Component) {
|
|
|
1367
1396
|
}, _this.props.children);
|
|
1368
1397
|
|
|
1369
1398
|
if (_this.props.suggestionsPortalHost) {
|
|
1370
|
-
return ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
|
|
1399
|
+
return /*#__PURE__*/ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
|
|
1371
1400
|
} else {
|
|
1372
1401
|
return suggestionsNode;
|
|
1373
1402
|
}
|
|
@@ -1382,7 +1411,7 @@ function (_React$Component) {
|
|
|
1382
1411
|
children = _this$props3.children,
|
|
1383
1412
|
value = _this$props3.value,
|
|
1384
1413
|
style = _this$props3.style;
|
|
1385
|
-
return React.createElement(Highlighter$1, {
|
|
1414
|
+
return /*#__PURE__*/React.createElement(Highlighter$1, {
|
|
1386
1415
|
containerRef: _this.setHighlighterElement,
|
|
1387
1416
|
style: style('highlighter'),
|
|
1388
1417
|
value: value,
|
|
@@ -1459,7 +1488,7 @@ function (_React$Component) {
|
|
|
1459
1488
|
|
|
1460
1489
|
if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
|
|
1461
1490
|
// only if a deletion has taken place
|
|
1462
|
-
selectionStart = startOfMention;
|
|
1491
|
+
selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
|
|
1463
1492
|
selectionEnd = selectionStart;
|
|
1464
1493
|
setSelectionAfterMentionChange = true;
|
|
1465
1494
|
}
|
|
@@ -1819,7 +1848,7 @@ function (_React$Component) {
|
|
|
1819
1848
|
if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
|
|
1820
1849
|
// won't overwrite each other
|
|
1821
1850
|
|
|
1822
|
-
_this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
|
|
1851
|
+
_this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
|
1823
1852
|
queryInfo: {
|
|
1824
1853
|
childIndex: childIndex,
|
|
1825
1854
|
query: query,
|
|
@@ -1965,7 +1994,7 @@ function (_React$Component) {
|
|
|
1965
1994
|
}, {
|
|
1966
1995
|
key: "render",
|
|
1967
1996
|
value: function render() {
|
|
1968
|
-
return React.createElement("div", _extends({
|
|
1997
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
1969
1998
|
ref: this.setContainerElement
|
|
1970
1999
|
}, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
|
|
1971
2000
|
}
|
|
@@ -1995,7 +2024,7 @@ function (_React$Component) {
|
|
|
1995
2024
|
var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
|
|
1996
2025
|
var newPlainTextValue = getPlainText(newValue, config);
|
|
1997
2026
|
var eventMock = {
|
|
1998
|
-
target: _objectSpread({}, event.target, {
|
|
2027
|
+
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
|
1999
2028
|
value: newValue
|
|
2000
2029
|
})
|
|
2001
2030
|
};
|
|
@@ -2008,9 +2037,10 @@ function (_React$Component) {
|
|
|
2008
2037
|
}, {
|
|
2009
2038
|
key: "saveSelectionToClipboard",
|
|
2010
2039
|
value: function saveSelectionToClipboard(event) {
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2040
|
+
// use the actual selectionStart & selectionEnd instead of the one stored
|
|
2041
|
+
// in state to ensure copy & paste also works on disabled inputs & textareas
|
|
2042
|
+
var selectionStart = this.inputElement.selectionStart;
|
|
2043
|
+
var selectionEnd = this.inputElement.selectionEnd;
|
|
2014
2044
|
var _this$props8 = this.props,
|
|
2015
2045
|
children = _this$props8.children,
|
|
2016
2046
|
value = _this$props8.value;
|
|
@@ -2052,9 +2082,9 @@ function (_React$Component) {
|
|
|
2052
2082
|
|
|
2053
2083
|
event.preventDefault();
|
|
2054
2084
|
this.saveSelectionToClipboard(event);
|
|
2055
|
-
var _this$
|
|
2056
|
-
selectionStart = _this$
|
|
2057
|
-
selectionEnd = _this$
|
|
2085
|
+
var _this$state4 = this.state,
|
|
2086
|
+
selectionStart = _this$state4.selectionStart,
|
|
2087
|
+
selectionEnd = _this$state4.selectionEnd;
|
|
2058
2088
|
var _this$props9 = this.props,
|
|
2059
2089
|
children = _this$props9.children,
|
|
2060
2090
|
value = _this$props9.value;
|
|
@@ -2064,7 +2094,7 @@ function (_React$Component) {
|
|
|
2064
2094
|
var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
|
|
2065
2095
|
var newPlainTextValue = getPlainText(newValue, config);
|
|
2066
2096
|
var eventMock = {
|
|
2067
|
-
target: _objectSpread({}, event.target, {
|
|
2097
|
+
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
|
2068
2098
|
value: newPlainTextValue
|
|
2069
2099
|
})
|
|
2070
2100
|
};
|
|
@@ -2154,7 +2184,7 @@ var Mention = function Mention(_ref) {
|
|
|
2154
2184
|
className: className,
|
|
2155
2185
|
classNames: classNames
|
|
2156
2186
|
});
|
|
2157
|
-
return React.createElement("strong", styles, display);
|
|
2187
|
+
return /*#__PURE__*/React.createElement("strong", styles, display);
|
|
2158
2188
|
};
|
|
2159
2189
|
|
|
2160
2190
|
Mention.propTypes = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-mentions",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.4",
|
|
4
4
|
"description": "React mentions input",
|
|
5
5
|
"main": "dist/react-mentions.cjs.js",
|
|
6
6
|
"module": "dist/react-mentions.esm.js",
|
|
@@ -12,9 +12,11 @@
|
|
|
12
12
|
"format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,test,demo/src}/**/*.js\"",
|
|
13
13
|
"lint": "eslint --max-warnings=0 --ext .js src test demo",
|
|
14
14
|
"start": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
|
|
15
|
-
"semantic-release": "semantic-release",
|
|
16
15
|
"test": "jest",
|
|
17
|
-
"now-build": "webpack --config demo/webpack.config.js"
|
|
16
|
+
"now-build": "webpack --config demo/webpack.config.js",
|
|
17
|
+
"prerelease": "yarn build",
|
|
18
|
+
"release": "changeset publish",
|
|
19
|
+
"change": "changeset"
|
|
18
20
|
},
|
|
19
21
|
"repository": {
|
|
20
22
|
"type": "git",
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
"safari >= 10",
|
|
32
34
|
"ie >= 11"
|
|
33
35
|
],
|
|
34
|
-
"author": "
|
|
36
|
+
"author": "SAP-Signavio",
|
|
35
37
|
"license": "BSD-3-Clause",
|
|
36
38
|
"bugs": {
|
|
37
39
|
"url": "https://github.com/signavio/react-mentions/issues"
|
|
@@ -47,13 +49,13 @@
|
|
|
47
49
|
"@babel/preset-env": "^7.4.5",
|
|
48
50
|
"@babel/preset-flow": "^7.0.0",
|
|
49
51
|
"@babel/preset-react": "^7.0.0",
|
|
52
|
+
"@changesets/cli": "^2.23.0",
|
|
50
53
|
"@testing-library/dom": "^8.13.0",
|
|
51
54
|
"@testing-library/jest-dom": "^5.16.4",
|
|
52
55
|
"@testing-library/react": "^13.2.0",
|
|
53
56
|
"babel-eslint": "^7.2.3",
|
|
54
57
|
"babel-loader": "^8.0.6",
|
|
55
58
|
"case-sensitive-paths-webpack-plugin": "^2.2.0",
|
|
56
|
-
"condition-circle": "^2.0.2",
|
|
57
59
|
"core-js": "^3.1.4",
|
|
58
60
|
"cross-env": "^5.2.1",
|
|
59
61
|
"css-loader": "^3.0.0",
|
|
@@ -77,7 +79,6 @@
|
|
|
77
79
|
"react-dom": "16.8.6",
|
|
78
80
|
"recompose": "^0.30.0",
|
|
79
81
|
"regenerator-runtime": "^0.13.2",
|
|
80
|
-
"semantic-release": "^19.0.2",
|
|
81
82
|
"style-loader": "^0.23.1",
|
|
82
83
|
"substyle-jss": "^4.0.1",
|
|
83
84
|
"webpack": "^4.35.2",
|