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