react-mentions 4.4.6 → 4.4.7

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 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;