react-mentions 4.4.6 → 4.4.7

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # react-mentions
2
2
 
3
+ ## 4.4.7
4
+
5
+ ### Patch Changes
6
+
7
+ - 834240e: SuggestionsOverlay.js refactored to functional component
8
+ - f8e5793: Highlighter.js converted to functional component
9
+
3
10
  ## 4.4.6
4
11
 
5
12
  ### Patch Changes
@@ -688,10 +688,6 @@ function createDefaultStyle(defaultStyle, getModifiers) {
688
688
  return enhance;
689
689
  }
690
690
 
691
- 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); }; }
692
-
693
- 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; } }
694
-
695
691
  var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
696
692
  if (!usedKeys.hasOwnProperty(id)) {
697
693
  usedKeys[id] = 0;
@@ -702,158 +698,126 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
702
698
  return id + '_' + usedKeys[id];
703
699
  };
704
700
 
705
- var Highlighter = /*#__PURE__*/function (_Component) {
706
- _inherits(Highlighter, _Component);
707
-
708
- var _super = _createSuper(Highlighter);
709
-
710
- function Highlighter() {
711
- var _this;
712
-
713
- _classCallCheck(this, Highlighter);
714
-
715
- _this = _super.apply(this, arguments);
716
-
717
- _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
718
- _this.caretElement = el;
719
- });
720
-
721
- _this.state = {
722
- left: undefined,
723
- top: undefined
724
- };
725
- return _this;
726
- }
727
-
728
- _createClass(Highlighter, [{
729
- key: "componentDidMount",
730
- value: function componentDidMount() {
731
- this.notifyCaretPosition();
701
+ function Highlighter(_ref) {
702
+ var selectionStart = _ref.selectionStart,
703
+ selectionEnd = _ref.selectionEnd,
704
+ _ref$value = _ref.value,
705
+ value = _ref$value === void 0 ? '' : _ref$value,
706
+ onCaretPositionChange = _ref.onCaretPositionChange,
707
+ containerRef = _ref.containerRef,
708
+ children = _ref.children,
709
+ singleLine = _ref.singleLine,
710
+ style = _ref.style;
711
+
712
+ var _useState = React.useState({
713
+ left: undefined,
714
+ top: undefined
715
+ }),
716
+ _useState2 = _slicedToArray(_useState, 2),
717
+ position = _useState2[0],
718
+ setPosition = _useState2[1];
719
+
720
+ var _useState3 = React.useState(),
721
+ _useState4 = _slicedToArray(_useState3, 2),
722
+ caretElement = _useState4[0],
723
+ setCaretElement = _useState4[1];
724
+
725
+ React.useEffect(function () {
726
+ notifyCaretPosition();
727
+ }, [caretElement]);
728
+
729
+ var notifyCaretPosition = function notifyCaretPosition() {
730
+ if (!caretElement) {
731
+ return;
732
732
  }
733
- }, {
734
- key: "componentDidUpdate",
735
- value: function componentDidUpdate() {
736
- this.notifyCaretPosition();
737
- }
738
- }, {
739
- key: "notifyCaretPosition",
740
- value: function notifyCaretPosition() {
741
- if (!this.caretElement) {
742
- return;
743
- }
744
733
 
745
- var _this$caretElement = this.caretElement,
746
- offsetLeft = _this$caretElement.offsetLeft,
747
- offsetTop = _this$caretElement.offsetTop;
734
+ var offsetLeft = caretElement.offsetLeft,
735
+ offsetTop = caretElement.offsetTop;
748
736
 
749
- if (this.state.left === offsetLeft && this.state.top === offsetTop) {
750
- return;
751
- }
752
-
753
- var newPosition = {
754
- left: offsetLeft,
755
- top: offsetTop
756
- };
757
- this.setState(newPosition);
758
- this.props.onCaretPositionChange(newPosition);
737
+ if (position.left === offsetLeft && position.top === offsetTop) {
738
+ return;
759
739
  }
760
- }, {
761
- key: "render",
762
- value: function render() {
763
- var _this2 = this;
764
-
765
- var _this$props = this.props,
766
- selectionStart = _this$props.selectionStart,
767
- selectionEnd = _this$props.selectionEnd,
768
- value = _this$props.value,
769
- style = _this$props.style,
770
- children = _this$props.children,
771
- containerRef = _this$props.containerRef;
772
- var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
773
-
774
- var caretPositionInMarkup;
775
-
776
- if (selectionStart === selectionEnd) {
777
- caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
778
- }
779
740
 
780
- var resultComponents = [];
781
- var componentKeys = {}; // start by appending directly to the resultComponents
741
+ var newPosition = {
742
+ left: offsetLeft,
743
+ top: offsetTop
744
+ };
745
+ setPosition(newPosition);
746
+ onCaretPositionChange(newPosition);
747
+ };
782
748
 
783
- var components = resultComponents;
784
- var substringComponentKey = 0;
749
+ var config = readConfigFromChildren(children);
750
+ var caretPositionInMarkup;
785
751
 
786
- var textIteratee = function textIteratee(substr, index, indexInPlainText) {
787
- // check whether the caret element has to be inserted inside the current plain substring
788
- if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
789
- // if yes, split substr at the caret position and insert the caret component
790
- var splitIndex = caretPositionInMarkup - index;
791
- components.push(_this2.renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
752
+ if (selectionEnd === selectionStart) {
753
+ caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
754
+ }
792
755
 
793
- components = [_this2.renderSubstring(substr.substring(splitIndex), substringComponentKey)];
794
- } else {
795
- // otherwise just push the plain text substring
796
- components.push(_this2.renderSubstring(substr, substringComponentKey));
797
- }
756
+ var resultComponents = [];
757
+ var componentKeys = {};
758
+ var components = resultComponents;
759
+ var substringComponentKey = 0;
760
+
761
+ var textIteratee = function textIteratee(substr, index, indexInPlainText) {
762
+ // check whether the caret element has to be inserted inside the current plain substring
763
+ if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
764
+ // if yes, split substr at the caret position and insert the caret component
765
+ var splitIndex = caretPositionInMarkup - index;
766
+ components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
767
+
768
+ components = [renderSubstring(substr.substring(splitIndex), substringComponentKey)];
769
+ } else {
770
+ components.push(renderSubstring(substr, substringComponentKey));
771
+ }
798
772
 
799
- substringComponentKey++;
800
- };
773
+ substringComponentKey++;
774
+ };
801
775
 
802
- var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
803
- // generate a component key based on the id
804
- var key = _generateComponentKey(componentKeys, id);
776
+ var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
777
+ var key = _generateComponentKey(componentKeys, id);
805
778
 
806
- components.push(_this2.getMentionComponentForMatch(id, display, mentionChildIndex, key));
807
- };
779
+ components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
780
+ };
808
781
 
809
- iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
782
+ var renderSubstring = function renderSubstring(string, key) {
783
+ // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
784
+ return /*#__PURE__*/React__default.createElement("span", _extends({}, style('substring'), {
785
+ key: key
786
+ }), string);
787
+ };
810
788
 
811
- components.push(' ');
789
+ var getMentionComponentForMatch = function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
790
+ var props = {
791
+ id: id,
792
+ display: display,
793
+ key: key
794
+ };
795
+ var child = React.Children.toArray(children)[mentionChildIndex];
796
+ return /*#__PURE__*/React__default.cloneElement(child, props);
797
+ };
812
798
 
813
- if (components !== resultComponents) {
814
- // if a caret component is to be rendered, add all components that followed as its children
815
- resultComponents.push(this.renderHighlighterCaret(components));
816
- }
799
+ var renderHighlighterCaret = function renderHighlighterCaret(children) {
800
+ return /*#__PURE__*/React__default.createElement("span", _extends({}, style('caret'), {
801
+ ref: setCaretElement,
802
+ key: "caret"
803
+ }), children);
804
+ };
817
805
 
818
- return /*#__PURE__*/React__default.createElement("div", _extends({}, style, {
819
- ref: containerRef
820
- }), resultComponents);
821
- }
822
- }, {
823
- key: "renderSubstring",
824
- value: function renderSubstring(string, key) {
825
- // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
826
- return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('substring'), {
827
- key: key
828
- }), string);
829
- } // Returns a clone of the Mention child applicable for the specified type to be rendered inside the highlighter
806
+ iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
830
807
 
831
- }, {
832
- key: "getMentionComponentForMatch",
833
- value: function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
834
- var props = {
835
- id: id,
836
- display: display,
837
- key: key
838
- };
839
- var child = React.Children.toArray(this.props.children)[mentionChildIndex];
840
- return /*#__PURE__*/React__default.cloneElement(child, props);
841
- } // Renders an component to be inserted in the highlighter at the current caret position
808
+ components.push(' ');
842
809
 
843
- }, {
844
- key: "renderHighlighterCaret",
845
- value: function renderHighlighterCaret(children) {
846
- return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('caret'), {
847
- ref: this.setCaretElement,
848
- key: "caret"
849
- }), children);
850
- }
851
- }]);
810
+ if (components !== resultComponents) {
811
+ // if a caret component is to be rendered, add all components that followed as its children
812
+ resultComponents.push(renderHighlighterCaret(components));
813
+ }
852
814
 
853
- return Highlighter;
854
- }(React.Component);
815
+ return /*#__PURE__*/React__default.createElement("div", _extends({}, style, {
816
+ ref: containerRef
817
+ }), resultComponents);
818
+ }
855
819
 
856
- _defineProperty(Highlighter, "propTypes", {
820
+ Highlighter.propTypes = {
857
821
  selectionStart: PropTypes.number,
858
822
  selectionEnd: PropTypes.number,
859
823
  value: PropTypes.string.isRequired,
@@ -862,12 +826,7 @@ _defineProperty(Highlighter, "propTypes", {
862
826
  current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
863
827
  })]),
864
828
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
865
- });
866
-
867
- _defineProperty(Highlighter, "defaultProps", {
868
- value: ''
869
- });
870
-
829
+ };
871
830
  var styled = createDefaultStyle({
872
831
  position: 'relative',
873
832
  boxSizing: 'border-box',
@@ -989,162 +948,144 @@ function LoadingIndicator(_ref) {
989
948
 
990
949
  var defaultstyle = {};
991
950
 
992
- 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); }; }
993
-
994
- 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; } }
951
+ function SuggestionsOverlay(_ref) {
952
+ var id = _ref.id,
953
+ _ref$suggestions = _ref.suggestions,
954
+ suggestions = _ref$suggestions === void 0 ? {} : _ref$suggestions,
955
+ a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel,
956
+ focusIndex = _ref.focusIndex,
957
+ position = _ref.position,
958
+ left = _ref.left,
959
+ right = _ref.right,
960
+ top = _ref.top,
961
+ scrollFocusedIntoView = _ref.scrollFocusedIntoView,
962
+ isLoading = _ref.isLoading,
963
+ isOpened = _ref.isOpened,
964
+ _ref$onSelect = _ref.onSelect,
965
+ onSelect = _ref$onSelect === void 0 ? function () {
966
+ return null;
967
+ } : _ref$onSelect,
968
+ ignoreAccents = _ref.ignoreAccents,
969
+ containerRef = _ref.containerRef,
970
+ children = _ref.children,
971
+ style = _ref.style,
972
+ customSuggestionsContainer = _ref.customSuggestionsContainer,
973
+ onMouseDown = _ref.onMouseDown,
974
+ onMouseEnter = _ref.onMouseEnter;
975
+
976
+ var _useState = React.useState(),
977
+ _useState2 = _slicedToArray(_useState, 2),
978
+ ulElement = _useState2[0],
979
+ setUlElement = _useState2[1];
980
+
981
+ React.useEffect(function () {
982
+ if (!ulElement || ulElement.offsetHeight >= ulElement.scrollHeight || !scrollFocusedIntoView) {
983
+ return;
984
+ }
995
985
 
996
- var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
997
- _inherits(SuggestionsOverlay, _Component);
986
+ var scrollTop = ulElement.scrollTop;
998
987
 
999
- var _super = _createSuper$1(SuggestionsOverlay);
988
+ var _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(),
989
+ top = _ulElement$children$f.top,
990
+ bottom = _ulElement$children$f.bottom;
1000
991
 
1001
- function SuggestionsOverlay() {
1002
- var _this;
992
+ var _ulElement$getBoundin = ulElement.getBoundingClientRect(),
993
+ topContainer = _ulElement$getBoundin.top;
1003
994
 
1004
- _classCallCheck(this, SuggestionsOverlay);
995
+ top = top - topContainer + scrollTop;
996
+ bottom = bottom - topContainer + scrollTop;
1005
997
 
1006
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1007
- args[_key] = arguments[_key];
998
+ if (top < scrollTop) {
999
+ ulElement.scrollTop = top;
1000
+ } else if (bottom > ulElement.offsetHeight) {
1001
+ ulElement.scrollTop = bottom - ulElement.offsetHeight;
1008
1002
  }
1003
+ }, []);
1004
+
1005
+ var renderSuggestions = function renderSuggestions() {
1006
+ var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
1007
+ var results = _ref2.results,
1008
+ queryInfo = _ref2.queryInfo;
1009
+ return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
1010
+ return renderSuggestion(result, queryInfo, accResults.length + index);
1011
+ })));
1012
+ }, []);
1013
+ if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
1014
+ };
1009
1015
 
1010
- _this = _super.call.apply(_super, [this].concat(args));
1011
-
1012
- _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
1013
- if (_this.props.onMouseEnter) {
1014
- _this.props.onMouseEnter(index);
1016
+ var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
1017
+ var isFocused = index === focusIndex;
1018
+ var childIndex = queryInfo.childIndex,
1019
+ query = queryInfo.query;
1020
+ var renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
1021
+ return /*#__PURE__*/React__default.createElement(Suggestion$1, {
1022
+ style: style('item'),
1023
+ key: "".concat(childIndex, "-").concat(getID(result)),
1024
+ id: getSuggestionHtmlId(id, index),
1025
+ query: query,
1026
+ index: index,
1027
+ ignoreAccents: ignoreAccents,
1028
+ renderSuggestion: renderSuggestion,
1029
+ suggestion: result,
1030
+ focused: isFocused,
1031
+ onClick: function onClick() {
1032
+ return select(result, queryInfo);
1033
+ },
1034
+ onMouseEnter: function onMouseEnter() {
1035
+ return handleMouseEnter(index);
1015
1036
  }
1016
1037
  });
1038
+ };
1017
1039
 
1018
- _defineProperty(_assertThisInitialized(_this), "select", function (suggestion, queryInfo) {
1019
- _this.props.onSelect(suggestion, queryInfo);
1020
- });
1040
+ var renderLoadingIndicator = function renderLoadingIndicator() {
1041
+ if (!isLoading) {
1042
+ return;
1043
+ }
1021
1044
 
1022
- _defineProperty(_assertThisInitialized(_this), "setUlElement", function (el) {
1023
- _this.ulElement = el;
1045
+ return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
1046
+ style: style('loadingIndicator')
1024
1047
  });
1048
+ };
1025
1049
 
1026
- return _this;
1027
- }
1028
-
1029
- _createClass(SuggestionsOverlay, [{
1030
- key: "componentDidUpdate",
1031
- value: function componentDidUpdate() {
1032
- if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
1033
- return;
1034
- }
1035
-
1036
- var scrollTop = this.ulElement.scrollTop;
1037
-
1038
- var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
1039
- top = _this$ulElement$child.top,
1040
- bottom = _this$ulElement$child.bottom;
1041
-
1042
- var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
1043
- topContainer = _this$ulElement$getBo.top;
1044
-
1045
- top = top - topContainer + scrollTop;
1046
- bottom = bottom - topContainer + scrollTop;
1047
-
1048
- if (top < scrollTop) {
1049
- this.ulElement.scrollTop = top;
1050
- } else if (bottom > this.ulElement.offsetHeight) {
1051
- this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
1052
- }
1050
+ var handleMouseEnter = function handleMouseEnter(index, ev) {
1051
+ if (onMouseEnter) {
1052
+ onMouseEnter(index);
1053
1053
  }
1054
- }, {
1055
- key: "render",
1056
- value: function render() {
1057
- var _this$props = this.props,
1058
- id = _this$props.id,
1059
- a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel,
1060
- isOpened = _this$props.isOpened,
1061
- style = _this$props.style,
1062
- onMouseDown = _this$props.onMouseDown,
1063
- containerRef = _this$props.containerRef,
1064
- position = _this$props.position,
1065
- left = _this$props.left,
1066
- right = _this$props.right,
1067
- top = _this$props.top; // do not show suggestions until there is some data
1068
-
1069
- if (!isOpened) {
1070
- return null;
1071
- }
1054
+ };
1072
1055
 
1073
- return /*#__PURE__*/React__default.createElement("div", _extends({}, useStyles.inline({
1074
- position: position || 'absolute',
1075
- left: left,
1076
- right: right,
1077
- top: top
1078
- }, style), {
1079
- onMouseDown: onMouseDown,
1080
- ref: containerRef
1081
- }), /*#__PURE__*/React__default.createElement("ul", _extends({
1082
- ref: this.setUlElement,
1083
- id: id,
1084
- role: "listbox",
1085
- "aria-label": a11ySuggestionsListLabel
1086
- }, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
1087
- }
1088
- }, {
1089
- key: "renderSuggestions",
1090
- value: function renderSuggestions() {
1091
- var _this2 = this;
1056
+ var select = function select(suggestion, queryInfo) {
1057
+ onSelect(suggestion, queryInfo);
1058
+ };
1092
1059
 
1093
- var customSuggestionsContainer = this.props.customSuggestionsContainer;
1094
- var suggestions = Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
1095
- var results = _ref.results,
1096
- queryInfo = _ref.queryInfo;
1097
- return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
1098
- return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
1099
- })));
1100
- }, []);
1101
- if (customSuggestionsContainer) return customSuggestionsContainer(suggestions);else return suggestions;
1102
- }
1103
- }, {
1104
- key: "renderSuggestion",
1105
- value: function renderSuggestion(result, queryInfo, index) {
1106
- var _this3 = this;
1107
-
1108
- var isFocused = index === this.props.focusIndex;
1109
- var childIndex = queryInfo.childIndex,
1110
- query = queryInfo.query;
1111
- var renderSuggestion = React.Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
1112
- var ignoreAccents = this.props.ignoreAccents;
1113
- return /*#__PURE__*/React__default.createElement(Suggestion$1, {
1114
- style: this.props.style('item'),
1115
- key: "".concat(childIndex, "-").concat(getID(result)),
1116
- id: getSuggestionHtmlId(this.props.id, index),
1117
- query: query,
1118
- index: index,
1119
- ignoreAccents: ignoreAccents,
1120
- renderSuggestion: renderSuggestion,
1121
- suggestion: result,
1122
- focused: isFocused,
1123
- onClick: function onClick() {
1124
- return _this3.select(result, queryInfo);
1125
- },
1126
- onMouseEnter: function onMouseEnter() {
1127
- return _this3.handleMouseEnter(index);
1128
- }
1129
- });
1060
+ var getID = function getID(suggestion) {
1061
+ if (typeof suggestion === 'string') {
1062
+ return suggestion;
1130
1063
  }
1131
- }, {
1132
- key: "renderLoadingIndicator",
1133
- value: function renderLoadingIndicator() {
1134
- if (!this.props.isLoading) {
1135
- return;
1136
- }
1137
1064
 
1138
- return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
1139
- style: this.props.style('loadingIndicator')
1140
- });
1141
- }
1142
- }]);
1065
+ return suggestion.id;
1066
+ };
1143
1067
 
1144
- return SuggestionsOverlay;
1145
- }(React.Component);
1068
+ if (!isOpened) {
1069
+ return null;
1070
+ }
1146
1071
 
1147
- _defineProperty(SuggestionsOverlay, "propTypes", {
1072
+ return /*#__PURE__*/React__default.createElement("div", _extends({}, useStyles.inline({
1073
+ position: position || 'absolute',
1074
+ left: left,
1075
+ right: right,
1076
+ top: top
1077
+ }, style), {
1078
+ onMouseDown: onMouseDown,
1079
+ ref: containerRef
1080
+ }), /*#__PURE__*/React__default.createElement("ul", _extends({
1081
+ ref: setUlElement,
1082
+ id: id,
1083
+ role: "listbox",
1084
+ "aria-label": a11ySuggestionsListLabel
1085
+ }, style('list')), renderSuggestions()), renderLoadingIndicator());
1086
+ }
1087
+
1088
+ SuggestionsOverlay.propTypes = {
1148
1089
  id: PropTypes.string.isRequired,
1149
1090
  suggestions: PropTypes.object.isRequired,
1150
1091
  a11ySuggestionsListLabel: PropTypes.string,
@@ -1158,27 +1099,11 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
1158
1099
  isOpened: PropTypes.bool.isRequired,
1159
1100
  onSelect: PropTypes.func,
1160
1101
  ignoreAccents: PropTypes.bool,
1102
+ customSuggestionsContainer: PropTypes.any,
1161
1103
  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
1162
1104
  current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
1163
- })]),
1164
- children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
1165
- });
1166
-
1167
- _defineProperty(SuggestionsOverlay, "defaultProps", {
1168
- suggestions: {},
1169
- onSelect: function onSelect() {
1170
- return null;
1171
- }
1172
- });
1173
-
1174
- var getID = function getID(suggestion) {
1175
- if (typeof suggestion === 'string') {
1176
- return suggestion;
1177
- }
1178
-
1179
- return suggestion.id;
1105
+ })])
1180
1106
  };
1181
-
1182
1107
  var styled$2 = createDefaultStyle({
1183
1108
  zIndex: 1,
1184
1109
  backgroundColor: 'white',
@@ -1196,9 +1121,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
1196
1121
 
1197
1122
  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; }
1198
1123
 
1199
- 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); }; }
1124
+ 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); }; }
1200
1125
 
1201
- 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; } }
1126
+ 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; } }
1202
1127
  var makeTriggerRegex = function makeTriggerRegex(trigger) {
1203
1128
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1204
1129
 
@@ -1270,7 +1195,7 @@ var propTypes = {
1270
1195
  var MentionsInput = /*#__PURE__*/function (_React$Component) {
1271
1196
  _inherits(MentionsInput, _React$Component);
1272
1197
 
1273
- var _super = _createSuper$2(MentionsInput);
1198
+ var _super = _createSuper(MentionsInput);
1274
1199
 
1275
1200
  function MentionsInput(_props) {
1276
1201
  var _this;