react-mentions 4.4.7 → 4.4.8
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +11 -0
- package/README.md +1 -3
- package/dist/react-mentions.cjs.dev.js +49 -26
- package/dist/react-mentions.cjs.prod.js +54 -20
- package/dist/react-mentions.esm.js +49 -26
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,16 @@
|
|
1
1
|
# react-mentions
|
2
2
|
|
3
|
+
## 4.4.8
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- ad43016: Typing fix in SuggestionsOverlay.js
|
8
|
+
- e13731f: Fix package.json properties for release
|
9
|
+
- 3f40576: Fixed the suggestions container that was not aligned with the caret position
|
10
|
+
- db2d91a: Fix cursor jumping to the end of the textfield when pasting and using React 18
|
11
|
+
- 1eef7df: Fix scroll into view automatically
|
12
|
+
- a69db87: Custom container scrolling fixed, now works like other containers
|
13
|
+
|
3
14
|
## 4.4.7
|
4
15
|
|
5
16
|
### Patch Changes
|
package/README.md
CHANGED
@@ -661,6 +661,10 @@ var omit = function omit(obj) {
|
|
661
661
|
|
662
662
|
var _excluded = ["style", "className", "classNames"];
|
663
663
|
|
664
|
+
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; }
|
665
|
+
|
666
|
+
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; }
|
667
|
+
|
664
668
|
function createDefaultStyle(defaultStyle, getModifiers) {
|
665
669
|
var enhance = function enhance(ComponentToWrap) {
|
666
670
|
var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
|
@@ -681,8 +685,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
681
685
|
};
|
682
686
|
|
683
687
|
var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
|
684
|
-
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
|
685
|
-
|
688
|
+
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
|
689
|
+
|
690
|
+
return /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
691
|
+
return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
|
692
|
+
ref: ref
|
693
|
+
}));
|
694
|
+
});
|
686
695
|
};
|
687
696
|
|
688
697
|
return enhance;
|
@@ -724,7 +733,7 @@ function Highlighter(_ref) {
|
|
724
733
|
|
725
734
|
React.useEffect(function () {
|
726
735
|
notifyCaretPosition();
|
727
|
-
}
|
736
|
+
});
|
728
737
|
|
729
738
|
var notifyCaretPosition = function notifyCaretPosition() {
|
730
739
|
if (!caretElement) {
|
@@ -973,7 +982,7 @@ function SuggestionsOverlay(_ref) {
|
|
973
982
|
onMouseDown = _ref.onMouseDown,
|
974
983
|
onMouseEnter = _ref.onMouseEnter;
|
975
984
|
|
976
|
-
var _useState = React.useState(),
|
985
|
+
var _useState = React.useState(undefined),
|
977
986
|
_useState2 = _slicedToArray(_useState, 2),
|
978
987
|
ulElement = _useState2[0],
|
979
988
|
setUlElement = _useState2[1];
|
@@ -1000,17 +1009,23 @@ function SuggestionsOverlay(_ref) {
|
|
1000
1009
|
} else if (bottom > ulElement.offsetHeight) {
|
1001
1010
|
ulElement.scrollTop = bottom - ulElement.offsetHeight;
|
1002
1011
|
}
|
1003
|
-
}, []);
|
1012
|
+
}, [focusIndex, scrollFocusedIntoView, ulElement]);
|
1004
1013
|
|
1005
1014
|
var renderSuggestions = function renderSuggestions() {
|
1006
|
-
var suggestionsToRender =
|
1015
|
+
var suggestionsToRender = /*#__PURE__*/React__default.createElement("ul", _extends({
|
1016
|
+
ref: setUlElement,
|
1017
|
+
id: id,
|
1018
|
+
role: "listbox",
|
1019
|
+
"aria-label": a11ySuggestionsListLabel
|
1020
|
+
}, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
|
1007
1021
|
var results = _ref2.results,
|
1008
1022
|
queryInfo = _ref2.queryInfo;
|
1009
1023
|
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
|
1010
1024
|
return renderSuggestion(result, queryInfo, accResults.length + index);
|
1011
1025
|
})));
|
1012
|
-
}, []);
|
1013
|
-
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
|
1026
|
+
}, []));
|
1027
|
+
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
|
1028
|
+
return suggestionsToRender;
|
1014
1029
|
};
|
1015
1030
|
|
1016
1031
|
var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
|
@@ -1077,12 +1092,7 @@ function SuggestionsOverlay(_ref) {
|
|
1077
1092
|
}, style), {
|
1078
1093
|
onMouseDown: onMouseDown,
|
1079
1094
|
ref: containerRef
|
1080
|
-
}),
|
1081
|
-
ref: setUlElement,
|
1082
|
-
id: id,
|
1083
|
-
role: "listbox",
|
1084
|
-
"aria-label": a11ySuggestionsListLabel
|
1085
|
-
}, style('list')), renderSuggestions()), renderLoadingIndicator());
|
1095
|
+
}), renderSuggestions(), renderLoadingIndicator());
|
1086
1096
|
}
|
1087
1097
|
|
1088
1098
|
SuggestionsOverlay.propTypes = {
|
@@ -1099,7 +1109,7 @@ SuggestionsOverlay.propTypes = {
|
|
1099
1109
|
isOpened: PropTypes.bool.isRequired,
|
1100
1110
|
onSelect: PropTypes.func,
|
1101
1111
|
ignoreAccents: PropTypes.bool,
|
1102
|
-
customSuggestionsContainer: PropTypes.
|
1112
|
+
customSuggestionsContainer: PropTypes.func,
|
1103
1113
|
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
1104
1114
|
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
1105
1115
|
})])
|
@@ -1117,9 +1127,9 @@ var styled$2 = createDefaultStyle({
|
|
1117
1127
|
});
|
1118
1128
|
var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
|
1119
1129
|
|
1120
|
-
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; }
|
1130
|
+
function ownKeys$1(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; }
|
1121
1131
|
|
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; }
|
1132
|
+
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
1123
1133
|
|
1124
1134
|
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); }; }
|
1125
1135
|
|
@@ -1216,7 +1226,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1216
1226
|
|
1217
1227
|
var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
|
1218
1228
|
keys(propTypes));
|
1219
|
-
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
|
1229
|
+
return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
|
1220
1230
|
value: _this.getPlainText(),
|
1221
1231
|
onScroll: _this.updateHighlighterScroll
|
1222
1232
|
}, !readOnly && !disabled && {
|
@@ -1255,6 +1265,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1255
1265
|
|
1256
1266
|
_defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
|
1257
1267
|
return /*#__PURE__*/React__default.createElement("textarea", _extends({
|
1268
|
+
autoFocus: true,
|
1258
1269
|
ref: _this.setInputRef
|
1259
1270
|
}, props));
|
1260
1271
|
});
|
@@ -1759,7 +1770,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1759
1770
|
if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
|
1760
1771
|
// won't overwrite each other
|
1761
1772
|
|
1762
|
-
_this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1773
|
+
_this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1763
1774
|
queryInfo: {
|
1764
1775
|
childIndex: childIndex,
|
1765
1776
|
query: query,
|
@@ -1864,7 +1875,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1864
1875
|
selectionEnd: null,
|
1865
1876
|
suggestions: {},
|
1866
1877
|
caretPosition: null,
|
1867
|
-
suggestionsPosition: {}
|
1878
|
+
suggestionsPosition: {},
|
1879
|
+
setSelectionAfterHandlePaste: false
|
1868
1880
|
};
|
1869
1881
|
return _this;
|
1870
1882
|
}
|
@@ -1894,6 +1906,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1894
1906
|
});
|
1895
1907
|
this.setSelection(this.state.selectionStart, this.state.selectionEnd);
|
1896
1908
|
}
|
1909
|
+
|
1910
|
+
if (this.state.setSelectionAfterHandlePaste) {
|
1911
|
+
this.setState({
|
1912
|
+
setSelectionAfterHandlePaste: false
|
1913
|
+
});
|
1914
|
+
this.setSelection(this.state.selectionStart, this.state.selectionEnd);
|
1915
|
+
}
|
1897
1916
|
}
|
1898
1917
|
}, {
|
1899
1918
|
key: "componentWillUnmount",
|
@@ -1918,9 +1937,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1918
1937
|
|
1919
1938
|
if (!this.supportsClipboardActions(event)) {
|
1920
1939
|
return;
|
1921
|
-
}
|
1940
|
+
} // event.preventDefault()
|
1941
|
+
|
1922
1942
|
|
1923
|
-
event.preventDefault();
|
1924
1943
|
var _this$state3 = this.state,
|
1925
1944
|
selectionStart = _this$state3.selectionStart,
|
1926
1945
|
selectionEnd = _this$state3.selectionEnd;
|
@@ -1935,7 +1954,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1935
1954
|
var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
|
1936
1955
|
var newPlainTextValue = getPlainText(newValue, config);
|
1937
1956
|
var eventMock = {
|
1938
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
1957
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
1939
1958
|
value: newValue
|
1940
1959
|
})
|
1941
1960
|
};
|
@@ -1943,7 +1962,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1943
1962
|
|
1944
1963
|
var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
|
1945
1964
|
var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
|
1946
|
-
this.
|
1965
|
+
this.setState({
|
1966
|
+
selectionStart: nextPos,
|
1967
|
+
selectionEnd: nextPos,
|
1968
|
+
setSelectionAfterHandlePaste: true
|
1969
|
+
});
|
1947
1970
|
}
|
1948
1971
|
}, {
|
1949
1972
|
key: "saveSelectionToClipboard",
|
@@ -2005,7 +2028,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
2005
2028
|
var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
|
2006
2029
|
var newPlainTextValue = getPlainText(newValue, config);
|
2007
2030
|
var eventMock = {
|
2008
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
2031
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
2009
2032
|
value: newPlainTextValue
|
2010
2033
|
})
|
2011
2034
|
};
|
@@ -2062,7 +2085,7 @@ var styled$3 = createDefaultStyle({
|
|
2062
2085
|
letterSpacing: 'inherit'
|
2063
2086
|
},
|
2064
2087
|
'&multiLine': {
|
2065
|
-
input: _objectSpread({
|
2088
|
+
input: _objectSpread$1({
|
2066
2089
|
height: '100%',
|
2067
2090
|
bottom: 0,
|
2068
2091
|
overflow: 'hidden',
|
@@ -420,6 +420,29 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
|
|
420
420
|
}, {});
|
421
421
|
}, _excluded = [ "style", "className", "classNames" ];
|
422
422
|
|
423
|
+
function ownKeys(object, enumerableOnly) {
|
424
|
+
var keys = Object.keys(object);
|
425
|
+
if (Object.getOwnPropertySymbols) {
|
426
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
427
|
+
enumerableOnly && (symbols = symbols.filter(function(sym) {
|
428
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
429
|
+
})), keys.push.apply(keys, symbols);
|
430
|
+
}
|
431
|
+
return keys;
|
432
|
+
}
|
433
|
+
|
434
|
+
function _objectSpread(target) {
|
435
|
+
for (var i = 1; i < arguments.length; i++) {
|
436
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
437
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
|
438
|
+
_defineProperty(target, key, source[key]);
|
439
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
|
440
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
441
|
+
});
|
442
|
+
}
|
443
|
+
return target;
|
444
|
+
}
|
445
|
+
|
423
446
|
function createDefaultStyle(defaultStyle, getModifiers) {
|
424
447
|
return function(ComponentToWrap) {
|
425
448
|
var DefaultStyleEnhancer = function(_ref) {
|
@@ -433,7 +456,11 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
433
456
|
}));
|
434
457
|
}, displayName = ComponentToWrap.displayName || ComponentToWrap.name || "Component";
|
435
458
|
return DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"),
|
436
|
-
|
459
|
+
React__default.forwardRef(function(props, ref) {
|
460
|
+
return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
|
461
|
+
ref: ref
|
462
|
+
}));
|
463
|
+
});
|
437
464
|
};
|
438
465
|
}
|
439
466
|
|
@@ -449,7 +476,7 @@ function Highlighter(_ref) {
|
|
449
476
|
}), _useState2 = _slicedToArray(_useState, 2), position = _useState2[0], setPosition = _useState2[1], _useState3 = React.useState(), _useState4 = _slicedToArray(_useState3, 2), caretElement = _useState4[0], setCaretElement = _useState4[1];
|
450
477
|
React.useEffect(function() {
|
451
478
|
notifyCaretPosition();
|
452
|
-
}
|
479
|
+
});
|
453
480
|
var caretPositionInMarkup, notifyCaretPosition = function() {
|
454
481
|
if (caretElement) {
|
455
482
|
var offsetLeft = caretElement.offsetLeft, offsetTop = caretElement.offsetTop;
|
@@ -585,13 +612,13 @@ var defaultstyle = {};
|
|
585
612
|
function SuggestionsOverlay(_ref) {
|
586
613
|
var id = _ref.id, _ref$suggestions = _ref.suggestions, suggestions = void 0 === _ref$suggestions ? {} : _ref$suggestions, a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel, focusIndex = _ref.focusIndex, position = _ref.position, left = _ref.left, right = _ref.right, top = _ref.top, scrollFocusedIntoView = _ref.scrollFocusedIntoView, isLoading = _ref.isLoading, isOpened = _ref.isOpened, _ref$onSelect = _ref.onSelect, onSelect = void 0 === _ref$onSelect ? function() {
|
587
614
|
return null;
|
588
|
-
} : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
|
615
|
+
} : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(void 0), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
|
589
616
|
React.useEffect(function() {
|
590
617
|
if (ulElement && !(ulElement.offsetHeight >= ulElement.scrollHeight) && scrollFocusedIntoView) {
|
591
618
|
var scrollTop = ulElement.scrollTop, _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(), top = _ulElement$children$f.top, bottom = _ulElement$children$f.bottom, topContainer = ulElement.getBoundingClientRect().top;
|
592
619
|
bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? ulElement.scrollTop = top : bottom > ulElement.offsetHeight && (ulElement.scrollTop = bottom - ulElement.offsetHeight);
|
593
620
|
}
|
594
|
-
}, []);
|
621
|
+
}, [ focusIndex, scrollFocusedIntoView, ulElement ]);
|
595
622
|
var suggestionsToRender, renderSuggestion = function(result, queryInfo, index) {
|
596
623
|
var isFocused = index === focusIndex, childIndex = queryInfo.childIndex, query = queryInfo.query, renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
|
597
624
|
return React__default.createElement(Suggestion$1, {
|
@@ -626,17 +653,17 @@ function SuggestionsOverlay(_ref) {
|
|
626
653
|
}, style), {
|
627
654
|
onMouseDown: onMouseDown,
|
628
655
|
ref: containerRef
|
629
|
-
}), React__default.createElement("ul", _extends({
|
656
|
+
}), (suggestionsToRender = React__default.createElement("ul", _extends({
|
630
657
|
ref: setUlElement,
|
631
658
|
id: id,
|
632
659
|
role: "listbox",
|
633
660
|
"aria-label": a11ySuggestionsListLabel
|
634
|
-
}, style("list")),
|
661
|
+
}, style("list")), Object.values(suggestions).reduce(function(accResults, _ref2) {
|
635
662
|
var results = _ref2.results, queryInfo = _ref2.queryInfo;
|
636
663
|
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
|
637
664
|
return renderSuggestion(result, queryInfo, accResults.length + index);
|
638
665
|
})));
|
639
|
-
}, []), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender)
|
666
|
+
}, [])), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender), function() {
|
640
667
|
if (isLoading) return React__default.createElement(LoadingIndicator, {
|
641
668
|
style: style("loadingIndicator")
|
642
669
|
});
|
@@ -657,7 +684,7 @@ SuggestionsOverlay.propTypes = {
|
|
657
684
|
isOpened: PropTypes.bool.isRequired,
|
658
685
|
onSelect: PropTypes.func,
|
659
686
|
ignoreAccents: PropTypes.bool,
|
660
|
-
customSuggestionsContainer: PropTypes.
|
687
|
+
customSuggestionsContainer: PropTypes.func,
|
661
688
|
containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({
|
662
689
|
current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
|
663
690
|
}) ])
|
@@ -675,7 +702,7 @@ var styled$2 = createDefaultStyle({
|
|
675
702
|
}
|
676
703
|
}), SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
|
677
704
|
|
678
|
-
function ownKeys(object, enumerableOnly) {
|
705
|
+
function ownKeys$1(object, enumerableOnly) {
|
679
706
|
var keys = Object.keys(object);
|
680
707
|
if (Object.getOwnPropertySymbols) {
|
681
708
|
var symbols = Object.getOwnPropertySymbols(object);
|
@@ -686,12 +713,12 @@ function ownKeys(object, enumerableOnly) {
|
|
686
713
|
return keys;
|
687
714
|
}
|
688
715
|
|
689
|
-
function _objectSpread(target) {
|
716
|
+
function _objectSpread$1(target) {
|
690
717
|
for (var i = 1; i < arguments.length; i++) {
|
691
718
|
var source = null != arguments[i] ? arguments[i] : {};
|
692
|
-
i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
|
719
|
+
i % 2 ? ownKeys$1(Object(source), !0).forEach(function(key) {
|
693
720
|
_defineProperty(target, key, source[key]);
|
694
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
|
721
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function(key) {
|
695
722
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
696
723
|
});
|
697
724
|
}
|
@@ -769,7 +796,7 @@ var makeTriggerRegex = function(trigger) {
|
|
769
796
|
_this.containerElement = el;
|
770
797
|
}), _defineProperty(_assertThisInitialized(_this), "getInputProps", function() {
|
771
798
|
var _this$props = _this.props, readOnly = _this$props.readOnly, disabled = _this$props.disabled, style = _this$props.style;
|
772
|
-
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
|
799
|
+
return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
|
773
800
|
value: _this.getPlainText(),
|
774
801
|
onScroll: _this.updateHighlighterScroll
|
775
802
|
}, !readOnly && !disabled && {
|
@@ -797,6 +824,7 @@ var makeTriggerRegex = function(trigger) {
|
|
797
824
|
}, props));
|
798
825
|
}), _defineProperty(_assertThisInitialized(_this), "renderTextarea", function(props) {
|
799
826
|
return React__default.createElement("textarea", _extends({
|
827
|
+
autoFocus: !0,
|
800
828
|
ref: _this.setInputRef
|
801
829
|
}, props));
|
802
830
|
}), _defineProperty(_assertThisInitialized(_this), "setInputRef", function(el) {
|
@@ -1005,7 +1033,7 @@ var makeTriggerRegex = function(trigger) {
|
|
1005
1033
|
syncResult instanceof Array && _this.updateSuggestions(_this._queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, syncResult);
|
1006
1034
|
}), _defineProperty(_assertThisInitialized(_this), "updateSuggestions", function(queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, results) {
|
1007
1035
|
if (queryId === _this._queryId) {
|
1008
|
-
_this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1036
|
+
_this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1009
1037
|
queryInfo: {
|
1010
1038
|
childIndex: childIndex,
|
1011
1039
|
query: query,
|
@@ -1057,7 +1085,8 @@ var makeTriggerRegex = function(trigger) {
|
|
1057
1085
|
selectionEnd: null,
|
1058
1086
|
suggestions: {},
|
1059
1087
|
caretPosition: null,
|
1060
|
-
suggestionsPosition: {}
|
1088
|
+
suggestionsPosition: {},
|
1089
|
+
setSelectionAfterHandlePaste: !1
|
1061
1090
|
}, _this;
|
1062
1091
|
}
|
1063
1092
|
return _createClass(MentionsInput, [ {
|
@@ -1072,6 +1101,8 @@ var makeTriggerRegex = function(trigger) {
|
|
1072
1101
|
prevState.suggestionsPosition === this.state.suggestionsPosition && this.updateSuggestionsPosition(),
|
1073
1102
|
this.state.setSelectionAfterMentionChange && (this.setState({
|
1074
1103
|
setSelectionAfterMentionChange: !1
|
1104
|
+
}), this.setSelection(this.state.selectionStart, this.state.selectionEnd)), this.state.setSelectionAfterHandlePaste && (this.setState({
|
1105
|
+
setSelectionAfterHandlePaste: !1
|
1075
1106
|
}), this.setSelection(this.state.selectionStart, this.state.selectionEnd));
|
1076
1107
|
}
|
1077
1108
|
}, {
|
@@ -1091,15 +1122,18 @@ var makeTriggerRegex = function(trigger) {
|
|
1091
1122
|
key: "handlePaste",
|
1092
1123
|
value: function(event) {
|
1093
1124
|
if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
|
1094
|
-
event.preventDefault();
|
1095
1125
|
var _this$state3 = this.state, selectionStart = _this$state3.selectionStart, selectionEnd = _this$state3.selectionEnd, _this$props7 = this.props, value = _this$props7.value, children = _this$props7.children, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), pastedMentions = event.clipboardData.getData("text/react-mentions"), pastedData = event.clipboardData.getData("text/plain"), newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, ""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
|
1096
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
1126
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
1097
1127
|
value: newValue
|
1098
1128
|
})
|
1099
1129
|
};
|
1100
1130
|
this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
|
1101
1131
|
var nextPos = (findStartOfMentionInPlainText(value, config, selectionStart) || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
|
1102
|
-
this.
|
1132
|
+
this.setState({
|
1133
|
+
selectionStart: nextPos,
|
1134
|
+
selectionEnd: nextPos,
|
1135
|
+
setSelectionAfterHandlePaste: !0
|
1136
|
+
});
|
1103
1137
|
}
|
1104
1138
|
}
|
1105
1139
|
}, {
|
@@ -1126,7 +1160,7 @@ var makeTriggerRegex = function(trigger) {
|
|
1126
1160
|
if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
|
1127
1161
|
event.preventDefault(), this.saveSelectionToClipboard(event);
|
1128
1162
|
var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
|
1129
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
1163
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
1130
1164
|
value: newPlainTextValue
|
1131
1165
|
})
|
1132
1166
|
};
|
@@ -1171,7 +1205,7 @@ var getComputedStyleLengthProp = function(forElement, propertyName) {
|
|
1171
1205
|
letterSpacing: "inherit"
|
1172
1206
|
},
|
1173
1207
|
"&multiLine": {
|
1174
|
-
input: _objectSpread({
|
1208
|
+
input: _objectSpread$1({
|
1175
1209
|
height: "100%",
|
1176
1210
|
bottom: 0,
|
1177
1211
|
overflow: "hidden",
|
@@ -653,6 +653,10 @@ var omit = function omit(obj) {
|
|
653
653
|
|
654
654
|
var _excluded = ["style", "className", "classNames"];
|
655
655
|
|
656
|
+
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; }
|
657
|
+
|
658
|
+
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; }
|
659
|
+
|
656
660
|
function createDefaultStyle(defaultStyle, getModifiers) {
|
657
661
|
var enhance = function enhance(ComponentToWrap) {
|
658
662
|
var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
|
@@ -673,8 +677,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
673
677
|
};
|
674
678
|
|
675
679
|
var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
|
676
|
-
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
|
677
|
-
|
680
|
+
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
|
681
|
+
|
682
|
+
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
683
|
+
return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
|
684
|
+
ref: ref
|
685
|
+
}));
|
686
|
+
});
|
678
687
|
};
|
679
688
|
|
680
689
|
return enhance;
|
@@ -716,7 +725,7 @@ function Highlighter(_ref) {
|
|
716
725
|
|
717
726
|
useEffect(function () {
|
718
727
|
notifyCaretPosition();
|
719
|
-
}
|
728
|
+
});
|
720
729
|
|
721
730
|
var notifyCaretPosition = function notifyCaretPosition() {
|
722
731
|
if (!caretElement) {
|
@@ -965,7 +974,7 @@ function SuggestionsOverlay(_ref) {
|
|
965
974
|
onMouseDown = _ref.onMouseDown,
|
966
975
|
onMouseEnter = _ref.onMouseEnter;
|
967
976
|
|
968
|
-
var _useState = useState(),
|
977
|
+
var _useState = useState(undefined),
|
969
978
|
_useState2 = _slicedToArray(_useState, 2),
|
970
979
|
ulElement = _useState2[0],
|
971
980
|
setUlElement = _useState2[1];
|
@@ -992,17 +1001,23 @@ function SuggestionsOverlay(_ref) {
|
|
992
1001
|
} else if (bottom > ulElement.offsetHeight) {
|
993
1002
|
ulElement.scrollTop = bottom - ulElement.offsetHeight;
|
994
1003
|
}
|
995
|
-
}, []);
|
1004
|
+
}, [focusIndex, scrollFocusedIntoView, ulElement]);
|
996
1005
|
|
997
1006
|
var renderSuggestions = function renderSuggestions() {
|
998
|
-
var suggestionsToRender =
|
1007
|
+
var suggestionsToRender = /*#__PURE__*/React.createElement("ul", _extends({
|
1008
|
+
ref: setUlElement,
|
1009
|
+
id: id,
|
1010
|
+
role: "listbox",
|
1011
|
+
"aria-label": a11ySuggestionsListLabel
|
1012
|
+
}, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
|
999
1013
|
var results = _ref2.results,
|
1000
1014
|
queryInfo = _ref2.queryInfo;
|
1001
1015
|
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
|
1002
1016
|
return renderSuggestion(result, queryInfo, accResults.length + index);
|
1003
1017
|
})));
|
1004
|
-
}, []);
|
1005
|
-
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
|
1018
|
+
}, []));
|
1019
|
+
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
|
1020
|
+
return suggestionsToRender;
|
1006
1021
|
};
|
1007
1022
|
|
1008
1023
|
var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
|
@@ -1069,12 +1084,7 @@ function SuggestionsOverlay(_ref) {
|
|
1069
1084
|
}, style), {
|
1070
1085
|
onMouseDown: onMouseDown,
|
1071
1086
|
ref: containerRef
|
1072
|
-
}),
|
1073
|
-
ref: setUlElement,
|
1074
|
-
id: id,
|
1075
|
-
role: "listbox",
|
1076
|
-
"aria-label": a11ySuggestionsListLabel
|
1077
|
-
}, style('list')), renderSuggestions()), renderLoadingIndicator());
|
1087
|
+
}), renderSuggestions(), renderLoadingIndicator());
|
1078
1088
|
}
|
1079
1089
|
|
1080
1090
|
SuggestionsOverlay.propTypes = {
|
@@ -1091,7 +1101,7 @@ SuggestionsOverlay.propTypes = {
|
|
1091
1101
|
isOpened: PropTypes.bool.isRequired,
|
1092
1102
|
onSelect: PropTypes.func,
|
1093
1103
|
ignoreAccents: PropTypes.bool,
|
1094
|
-
customSuggestionsContainer: PropTypes.
|
1104
|
+
customSuggestionsContainer: PropTypes.func,
|
1095
1105
|
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
1096
1106
|
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
1097
1107
|
})])
|
@@ -1109,9 +1119,9 @@ var styled$2 = createDefaultStyle({
|
|
1109
1119
|
});
|
1110
1120
|
var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
|
1111
1121
|
|
1112
|
-
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; }
|
1122
|
+
function ownKeys$1(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; }
|
1113
1123
|
|
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; }
|
1124
|
+
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
1115
1125
|
|
1116
1126
|
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); }; }
|
1117
1127
|
|
@@ -1208,7 +1218,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1208
1218
|
|
1209
1219
|
var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
|
1210
1220
|
keys(propTypes));
|
1211
|
-
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
|
1221
|
+
return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
|
1212
1222
|
value: _this.getPlainText(),
|
1213
1223
|
onScroll: _this.updateHighlighterScroll
|
1214
1224
|
}, !readOnly && !disabled && {
|
@@ -1247,6 +1257,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1247
1257
|
|
1248
1258
|
_defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
|
1249
1259
|
return /*#__PURE__*/React.createElement("textarea", _extends({
|
1260
|
+
autoFocus: true,
|
1250
1261
|
ref: _this.setInputRef
|
1251
1262
|
}, props));
|
1252
1263
|
});
|
@@ -1751,7 +1762,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1751
1762
|
if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
|
1752
1763
|
// won't overwrite each other
|
1753
1764
|
|
1754
|
-
_this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1765
|
+
_this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
|
1755
1766
|
queryInfo: {
|
1756
1767
|
childIndex: childIndex,
|
1757
1768
|
query: query,
|
@@ -1856,7 +1867,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1856
1867
|
selectionEnd: null,
|
1857
1868
|
suggestions: {},
|
1858
1869
|
caretPosition: null,
|
1859
|
-
suggestionsPosition: {}
|
1870
|
+
suggestionsPosition: {},
|
1871
|
+
setSelectionAfterHandlePaste: false
|
1860
1872
|
};
|
1861
1873
|
return _this;
|
1862
1874
|
}
|
@@ -1886,6 +1898,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1886
1898
|
});
|
1887
1899
|
this.setSelection(this.state.selectionStart, this.state.selectionEnd);
|
1888
1900
|
}
|
1901
|
+
|
1902
|
+
if (this.state.setSelectionAfterHandlePaste) {
|
1903
|
+
this.setState({
|
1904
|
+
setSelectionAfterHandlePaste: false
|
1905
|
+
});
|
1906
|
+
this.setSelection(this.state.selectionStart, this.state.selectionEnd);
|
1907
|
+
}
|
1889
1908
|
}
|
1890
1909
|
}, {
|
1891
1910
|
key: "componentWillUnmount",
|
@@ -1910,9 +1929,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1910
1929
|
|
1911
1930
|
if (!this.supportsClipboardActions(event)) {
|
1912
1931
|
return;
|
1913
|
-
}
|
1932
|
+
} // event.preventDefault()
|
1933
|
+
|
1914
1934
|
|
1915
|
-
event.preventDefault();
|
1916
1935
|
var _this$state3 = this.state,
|
1917
1936
|
selectionStart = _this$state3.selectionStart,
|
1918
1937
|
selectionEnd = _this$state3.selectionEnd;
|
@@ -1927,7 +1946,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1927
1946
|
var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
|
1928
1947
|
var newPlainTextValue = getPlainText(newValue, config);
|
1929
1948
|
var eventMock = {
|
1930
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
1949
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
1931
1950
|
value: newValue
|
1932
1951
|
})
|
1933
1952
|
};
|
@@ -1935,7 +1954,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1935
1954
|
|
1936
1955
|
var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
|
1937
1956
|
var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
|
1938
|
-
this.
|
1957
|
+
this.setState({
|
1958
|
+
selectionStart: nextPos,
|
1959
|
+
selectionEnd: nextPos,
|
1960
|
+
setSelectionAfterHandlePaste: true
|
1961
|
+
});
|
1939
1962
|
}
|
1940
1963
|
}, {
|
1941
1964
|
key: "saveSelectionToClipboard",
|
@@ -1997,7 +2020,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
1997
2020
|
var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
|
1998
2021
|
var newPlainTextValue = getPlainText(newValue, config);
|
1999
2022
|
var eventMock = {
|
2000
|
-
target: _objectSpread(_objectSpread({}, event.target), {}, {
|
2023
|
+
target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
|
2001
2024
|
value: newPlainTextValue
|
2002
2025
|
})
|
2003
2026
|
};
|
@@ -2054,7 +2077,7 @@ var styled$3 = createDefaultStyle({
|
|
2054
2077
|
letterSpacing: 'inherit'
|
2055
2078
|
},
|
2056
2079
|
'&multiLine': {
|
2057
|
-
input: _objectSpread({
|
2080
|
+
input: _objectSpread$1({
|
2058
2081
|
height: '100%',
|
2059
2082
|
bottom: 0,
|
2060
2083
|
overflow: 'hidden',
|