stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/AutoCompleteTextarea/Textarea.js

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __extends, __generator, __rest } from "tslib";
 import React from 'react';
 import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
@@ -10,39 +9,37 @@ import { DEFAULT_CARET_POSITION, defaultScrollToItem, errorMessage, triggerProps
 import { CommandItem } from '../CommandItem';
 import { UserItem } from '../UserItem';
 import { isSafari } from '../../utils/browsers';
-var ReactTextareaAutocomplete = /** @class */ (function (_super) {
-    __extends(ReactTextareaAutocomplete, _super);
-    function ReactTextareaAutocomplete(props) {
-        var _this = _super.call(this, props) || this;
+export class ReactTextareaAutocomplete extends React.Component {
+    constructor(props) {
+        super(props);
         // FIXME: unused method
-        _this.getSelectionPosition = function () {
-            if (!_this.textareaRef)
+        this.getSelectionPosition = () => {
+            if (!this.textareaRef)
                 return null;
             return {
-                selectionEnd: _this.textareaRef.selectionEnd,
-                selectionStart: _this.textareaRef.selectionStart,
+                selectionEnd: this.textareaRef.selectionEnd,
+                selectionStart: this.textareaRef.selectionStart,
             };
         };
         // FIXME: unused method
-        _this.getSelectedText = function () {
-            if (!_this.textareaRef)
+        this.getSelectedText = () => {
+            if (!this.textareaRef)
                 return null;
-            var _a = _this.textareaRef, selectionEnd = _a.selectionEnd, selectionStart = _a.selectionStart;
+            const { selectionEnd, selectionStart } = this.textareaRef;
             if (selectionStart === selectionEnd)
                 return null;
-            return _this.state.value.substr(selectionStart, selectionEnd - selectionStart);
+            return this.state.value.substr(selectionStart, selectionEnd - selectionStart);
         };
-        _this.setCaretPosition = function (position) {
-            if (position === void 0) { position = 0; }
-            if (!_this.textareaRef)
+        this.setCaretPosition = (position = 0) => {
+            if (!this.textareaRef)
                 return;
-            _this.textareaRef.focus();
-            _this.textareaRef.setSelectionRange(position, position);
+            this.textareaRef.focus();
+            this.textareaRef.setSelectionRange(position, position);
         };
-        _this.getCaretPosition = function () {
-            if (!_this.textareaRef)
+        this.getCaretPosition = () => {
+            if (!this.textareaRef)
                 return 0;
-            return _this.textareaRef.selectionEnd;
+            return this.textareaRef.selectionEnd;
         };
         /**
          * isComposing prevents double submissions in Korean and other languages.
@@ -51,97 +48,75 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
          * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
          * @param event React.KeyboardEvent
          */
-        _this._defaultShouldSubmit = function (event) {
-            return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
-        };
-        _this._handleKeyDown = function (event) {
-            var _a = _this.props.shouldSubmit, shouldSubmit = _a === void 0 ? _this._defaultShouldSubmit : _a;
+        this._defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
+        this._handleKeyDown = (event) => {
+            const { shouldSubmit = this._defaultShouldSubmit } = this.props;
             // prevent default behaviour when the selection list is rendered
-            if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && _this.dropdownRef)
+            if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && this.dropdownRef)
                 event.preventDefault();
-            if (shouldSubmit === null || shouldSubmit === void 0 ? void 0 : shouldSubmit(event))
-                return _this._onEnter(event);
+            if (shouldSubmit?.(event))
+                return this._onEnter(event);
             if (event.key === ' ')
-                return _this._onSpace(event);
+                return this._onSpace(event);
             if (event.key === 'Escape')
-                return _this._closeAutocomplete();
+                return this._closeAutocomplete();
         };
-        _this._onEnter = function (event) { return __awaiter(_this, void 0, void 0, function () {
-            var trigger;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!this.textareaRef)
-                            return [2 /*return*/];
-                        trigger = this.state.currentTrigger;
-                        if (!(!trigger || !this.state.data)) return [3 /*break*/, 2];
-                        // https://legacy.reactjs.org/docs/legacy-event-pooling.html
-                        event.persist();
-                        // trigger a submit
-                        return [4 /*yield*/, this._replaceWord()];
-                    case 1:
-                        // trigger a submit
-                        _a.sent();
-                        if (this.textareaRef) {
-                            this.textareaRef.selectionEnd = 0;
-                        }
-                        this.props.handleSubmit(event);
-                        this._closeAutocomplete();
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+        this._onEnter = async (event) => {
+            if (!this.textareaRef)
+                return;
+            const trigger = this.state.currentTrigger;
+            if (!trigger || !this.state.data) {
+                // https://legacy.reactjs.org/docs/legacy-event-pooling.html
+                event.persist();
+                // trigger a submit
+                await this._replaceWord();
+                if (this.textareaRef) {
+                    this.textareaRef.selectionEnd = 0;
                 }
-            });
-        }); };
-        _this._onSpace = function () {
-            if (!_this.props.replaceWord || !_this.textareaRef)
+                this.props.handleSubmit(event);
+                this._closeAutocomplete();
+            }
+        };
+        this._onSpace = () => {
+            if (!this.props.replaceWord || !this.textareaRef)
                 return;
             // don't change characters if the element doesn't have focus
-            var hasFocus = _this.textareaRef.matches(':focus');
+            const hasFocus = this.textareaRef.matches(':focus');
             if (!hasFocus)
                 return;
-            _this._replaceWord();
+            this._replaceWord();
         };
-        _this._replaceWord = function () { return __awaiter(_this, void 0, void 0, function () {
-            var value, lastWordRegex, match, lastWord, spaces, newWord, textBeforeWord, textAfterCaret, newText;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        value = this.state.value;
-                        lastWordRegex = /([^\s]+)(\s*)$/;
-                        match = lastWordRegex.exec(value.slice(0, this.getCaretPosition()));
-                        lastWord = match && match[1];
-                        if (!lastWord)
-                            return [2 /*return*/];
-                        spaces = match[2];
-                        return [4 /*yield*/, this.props.replaceWord(lastWord)];
-                    case 1:
-                        newWord = _a.sent();
-                        if (newWord == null)
-                            return [2 /*return*/];
-                        textBeforeWord = value.slice(0, this.getCaretPosition() - match[0].length);
-                        textAfterCaret = value.slice(this.getCaretPosition(), -1);
-                        newText = textBeforeWord + newWord + spaces + textAfterCaret;
-                        this.setState({
-                            value: newText,
-                        }, function () {
-                            // fire onChange event after successful selection
-                            var e = new CustomEvent('change', { bubbles: true });
-                            _this.textareaRef.dispatchEvent(e);
-                            if (_this.props.onChange)
-                                _this.props.onChange(e);
-                        });
-                        return [2 /*return*/];
-                }
+        this._replaceWord = async () => {
+            const { value } = this.state;
+            const lastWordRegex = /([^\s]+)(\s*)$/;
+            const match = lastWordRegex.exec(value.slice(0, this.getCaretPosition()));
+            const lastWord = match && match[1];
+            if (!lastWord)
+                return;
+            const spaces = match[2];
+            const newWord = await this.props.replaceWord(lastWord);
+            if (newWord == null)
+                return;
+            const textBeforeWord = value.slice(0, this.getCaretPosition() - match[0].length);
+            const textAfterCaret = value.slice(this.getCaretPosition(), -1);
+            const newText = textBeforeWord + newWord + spaces + textAfterCaret;
+            this.setState({
+                value: newText,
+            }, () => {
+                // fire onChange event after successful selection
+                const e = new CustomEvent('change', { bubbles: true });
+                this.textareaRef.dispatchEvent(e);
+                if (this.props.onChange)
+                    this.props.onChange(e);
             });
-        }); };
-        _this._onSelect = function (newToken) {
-            var _a = _this.props, closeCommandsList = _a.closeCommandsList, closeMentionsList = _a.closeMentionsList, onChange = _a.onChange, showCommandsList = _a.showCommandsList, showMentionsList = _a.showMentionsList;
-            var _b = _this.state, stateTrigger = _b.currentTrigger, selectionEnd = _b.selectionEnd, textareaValue = _b.value;
-            var currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
+        };
+        this._onSelect = (newToken) => {
+            const { closeCommandsList, closeMentionsList, onChange, showCommandsList, showMentionsList, } = this.props;
+            const { currentTrigger: stateTrigger, selectionEnd, value: textareaValue } = this.state;
+            const currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
             if (!currentTrigger)
                 return;
-            var computeCaretPosition = function (position, token, startToken) {
+            const computeCaretPosition = (position, token, startToken) => {
                 switch (position) {
                     case 'start':
                         return startToken;
@@ -155,45 +130,45 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                         return position;
                 }
             };
-            var textToModify = showCommandsList
+            const textToModify = showCommandsList
                 ? '/'
                 : showMentionsList
                     ? '@'
                     : textareaValue.slice(0, selectionEnd);
-            var startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
+            const startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
             // we add space after emoji is selected if a caret position is next
-            var newTokenString = newToken.caretPosition === 'next' ? "".concat(newToken.text, " ") : newToken.text;
-            var newCaretPosition = computeCaretPosition(newToken.caretPosition, newTokenString, startOfTokenPosition);
-            var modifiedText = textToModify.substring(0, startOfTokenPosition) + newTokenString;
-            var valueToReplace = textareaValue.replace(textToModify, modifiedText);
+            const newTokenString = newToken.caretPosition === 'next' ? `${newToken.text} ` : newToken.text;
+            const newCaretPosition = computeCaretPosition(newToken.caretPosition, newTokenString, startOfTokenPosition);
+            const modifiedText = textToModify.substring(0, startOfTokenPosition) + newTokenString;
+            const valueToReplace = textareaValue.replace(textToModify, modifiedText);
             // set the new textarea value and after that set the caret back to its position
-            _this.setState({
+            this.setState({
                 dataLoading: false,
                 value: valueToReplace,
-            }, function () {
+            }, () => {
                 // fire onChange event after successful selection
-                var e = new CustomEvent('change', { bubbles: true });
-                _this.textareaRef.dispatchEvent(e);
+                const e = new CustomEvent('change', { bubbles: true });
+                this.textareaRef.dispatchEvent(e);
                 if (onChange)
                     onChange(e);
-                _this.setCaretPosition(newCaretPosition);
+                this.setCaretPosition(newCaretPosition);
             });
-            _this._closeAutocomplete();
+            this._closeAutocomplete();
             if (showCommandsList)
                 closeCommandsList();
             if (showMentionsList)
                 closeMentionsList();
         };
-        _this._getItemOnSelect = function (paramTrigger) {
-            var stateTrigger = _this.state.currentTrigger;
-            var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-            var currentTrigger = paramTrigger || stateTrigger;
+        this._getItemOnSelect = (paramTrigger) => {
+            const { currentTrigger: stateTrigger } = this.state;
+            const triggerSettings = this._getCurrentTriggerSettings(paramTrigger);
+            const currentTrigger = paramTrigger || stateTrigger;
             if (!currentTrigger || !triggerSettings)
                 return null;
-            var callback = triggerSettings.callback;
+            const { callback } = triggerSettings;
             if (!callback)
                 return null;
-            return function (item) {
+            return (item) => {
                 if (typeof callback !== 'function') {
                     throw new Error('Output functor is not defined! You have to define "output" function. https://github.com/webscopeio/react-textarea-autocomplete#trigger-type');
                 }
@@ -203,21 +178,21 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 return null;
             };
         };
-        _this._getTextToReplace = function (paramTrigger) {
-            var _a = _this.state, actualToken = _a.actualToken, stateTrigger = _a.currentTrigger;
-            var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-            var currentTrigger = paramTrigger || stateTrigger;
+        this._getTextToReplace = (paramTrigger) => {
+            const { actualToken, currentTrigger: stateTrigger } = this.state;
+            const triggerSettings = this._getCurrentTriggerSettings(paramTrigger);
+            const currentTrigger = paramTrigger || stateTrigger;
             if (!currentTrigger || !triggerSettings)
                 return null;
-            var output = triggerSettings.output;
-            return function (item) {
+            const { output } = triggerSettings;
+            return (item) => {
                 if (typeof item === 'object' && (!output || typeof output !== 'function')) {
                     throw new Error('Output functor is not defined! If you are using items as object you have to define "output" function. https://github.com/webscopeio/react-textarea-autocomplete#trigger-type');
                 }
                 if (output) {
-                    var textToReplace = output(item, currentTrigger);
+                    const textToReplace = output(item, currentTrigger);
                     if (!textToReplace || typeof textToReplace === 'number') {
-                        throw new Error("Output functor should return string or object in shape {text: string, caretPosition: string | number}.\nGot \"".concat(String(textToReplace), "\". Check the implementation for trigger \"").concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n\nSee https://github.com/webscopeio/react-textarea-autocomplete#trigger-type for more informations.\n"));
+                        throw new Error(`Output functor should return string or object in shape {text: string, caretPosition: string | number}.\nGot "${String(textToReplace)}". Check the implementation for trigger "${currentTrigger}" and its token "${actualToken}"\n\nSee https://github.com/webscopeio/react-textarea-autocomplete#trigger-type for more informations.\n`);
                     }
                     if (typeof textToReplace === 'string') {
                         return {
@@ -226,10 +201,10 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                         };
                     }
                     if (!textToReplace.text && currentTrigger !== ':') {
-                        throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
+                        throw new Error(`Output "text" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger "${currentTrigger}" and its token "${actualToken}"\n`);
                     }
                     if (!textToReplace.caretPosition) {
-                        throw new Error("Output \"caretPosition\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
+                        throw new Error(`Output "caretPosition" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger "${currentTrigger}" and its token "${actualToken}"\n`);
                     }
                     return textToReplace;
                 }
@@ -238,31 +213,31 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 }
                 return {
                     caretPosition: DEFAULT_CARET_POSITION,
-                    text: "".concat(currentTrigger).concat(item).concat(currentTrigger),
+                    text: `${currentTrigger}${item}${currentTrigger}`,
                 };
             };
         };
-        _this._getCurrentTriggerSettings = function (paramTrigger) {
-            var stateTrigger = _this.state.currentTrigger;
-            var currentTrigger = paramTrigger || stateTrigger;
+        this._getCurrentTriggerSettings = (paramTrigger) => {
+            const { currentTrigger: stateTrigger } = this.state;
+            const currentTrigger = paramTrigger || stateTrigger;
             if (!currentTrigger)
                 return null;
-            return _this.props.trigger[currentTrigger];
+            return this.props.trigger[currentTrigger];
         };
-        _this._getValuesFromProvider = function () {
-            var _a = _this.state, actualToken = _a.actualToken, currentTrigger = _a.currentTrigger;
-            var triggerSettings = _this._getCurrentTriggerSettings();
+        this._getValuesFromProvider = () => {
+            const { actualToken, currentTrigger } = this.state;
+            const triggerSettings = this._getCurrentTriggerSettings();
             if (!currentTrigger || !triggerSettings)
                 return;
-            var component = triggerSettings.component, dataProvider = triggerSettings.dataProvider;
+            const { component, dataProvider } = triggerSettings;
             if (typeof dataProvider !== 'function') {
                 throw new Error('Trigger provider has to be a function!');
             }
-            _this.setState({ dataLoading: true });
+            this.setState({ dataLoading: true });
             // Modified: send the full text to support / style commands
-            dataProvider(actualToken, _this.state.value, function (data, token) {
+            dataProvider(actualToken, this.state.value, (data, token) => {
                 // Make sure that the result is still relevant for current query
-                if (token !== _this.state.actualToken)
+                if (token !== this.state.actualToken)
                     return;
                 if (!Array.isArray(data)) {
                     throw new Error('Trigger provider has to provide an array!');
@@ -271,23 +246,23 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                     throw new Error('Component should be defined!');
                 }
                 // throw away if we resolved old trigger
-                if (currentTrigger !== _this.state.currentTrigger)
+                if (currentTrigger !== this.state.currentTrigger)
                     return;
                 // if we haven't resolved any data let's close the autocomplete
                 if (!data.length) {
-                    _this._closeAutocomplete();
+                    this._closeAutocomplete();
                     return;
                 }
-                _this.setState({
-                    component: component,
-                    data: data,
+                this.setState({
+                    component,
+                    data,
                     dataLoading: false,
                 });
             });
         };
-        _this._getSuggestions = function (paramTrigger) {
-            var _a = _this.state, stateTrigger = _a.currentTrigger, data = _a.data;
-            var currentTrigger = paramTrigger || stateTrigger;
+        this._getSuggestions = (paramTrigger) => {
+            const { currentTrigger: stateTrigger, data } = this.state;
+            const currentTrigger = paramTrigger || stateTrigger;
             if (!currentTrigger || !data || (data && !data.length))
                 return null;
             return data;
@@ -295,8 +270,8 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
         /**
          * Close autocomplete, also clean up trigger (to avoid slow promises)
          */
-        _this._closeAutocomplete = function () {
-            _this.setState({
+        this._closeAutocomplete = () => {
+            this.setState({
                 currentTrigger: null,
                 data: null,
                 dataLoading: false,
@@ -304,9 +279,9 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 top: null,
             });
         };
-        _this._cleanUpProps = function () {
-            var props = __assign({}, _this.props);
-            var notSafe = [
+        this._cleanUpProps = () => {
+            const props = { ...this.props };
+            const notSafe = [
                 'additionalTextareaProps',
                 'className',
                 'closeCommandsList',
@@ -343,53 +318,53 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 'value',
             ];
             // eslint-disable-next-line
-            for (var prop in props) {
+            for (const prop in props) {
                 if (notSafe.includes(prop))
                     delete props[prop];
             }
             return props;
         };
-        _this._isCommand = function (text) {
+        this._isCommand = (text) => {
             if (text[0] !== '/')
                 return false;
-            var tokens = text.split(' ');
+            const tokens = text.split(' ');
             return tokens.length <= 1;
         };
-        _this._changeHandler = function (e) {
-            var _a = _this.props, minChar = _a.minChar, movePopupAsYouType = _a.movePopupAsYouType, onCaretPositionChange = _a.onCaretPositionChange, onChange = _a.onChange, trigger = _a.trigger;
-            var _b = _this.state, left = _b.left, top = _b.top;
-            var textarea = e.target;
-            var selectionEnd = textarea.selectionEnd, selectionStart = textarea.selectionStart, value = textarea.value;
+        this._changeHandler = (e) => {
+            const { minChar, movePopupAsYouType, onCaretPositionChange, onChange, trigger } = this.props;
+            const { left, top } = this.state;
+            const textarea = e.target;
+            const { selectionEnd, selectionStart, value } = textarea;
             if (onChange) {
                 e.persist();
                 onChange(e);
             }
             if (onCaretPositionChange)
-                onCaretPositionChange(_this.getCaretPosition());
-            _this.setState({ value: value });
-            var currentTrigger;
-            var lastToken;
-            if (_this._isCommand(value)) {
+                onCaretPositionChange(this.getCaretPosition());
+            this.setState({ value });
+            let currentTrigger;
+            let lastToken;
+            if (this._isCommand(value)) {
                 currentTrigger = '/';
                 lastToken = value;
             }
             else {
-                var triggerTokens = Object.keys(trigger).join().replace('/', '');
-                var triggerNorWhitespace = "[^\\s".concat(triggerTokens, "]*");
-                var regex = new RegExp("(?!^|\\W)?[".concat(triggerTokens, "]").concat(triggerNorWhitespace, "\\s?").concat(triggerNorWhitespace, "$"), 'g');
-                var tokenMatch = value.slice(0, selectionEnd).match(regex);
+                const triggerTokens = Object.keys(trigger).join().replace('/', '');
+                const triggerNorWhitespace = `[^\\s${triggerTokens}]*`;
+                const regex = new RegExp(`(?!^|\\W)?[${triggerTokens}]${triggerNorWhitespace}\\s?${triggerNorWhitespace}$`, 'g');
+                const tokenMatch = value.slice(0, selectionEnd).match(regex);
                 lastToken = tokenMatch && tokenMatch[tokenMatch.length - 1].trim();
-                currentTrigger = (lastToken && Object.keys(trigger).find(function (a) { return a === lastToken[0]; })) || null;
+                currentTrigger = (lastToken && Object.keys(trigger).find((a) => a === lastToken[0])) || null;
             }
             /*
              if we lost the trigger token or there is no following character we want to close
              the autocomplete
             */
             if (!lastToken || lastToken.length <= minChar) {
-                _this._closeAutocomplete();
+                this._closeAutocomplete();
                 return;
             }
-            var actualToken = lastToken.slice(1);
+            const actualToken = lastToken.slice(1);
             // if trigger is not configured step out from the function, otherwise proceed
             if (!currentTrigger)
                 return;
@@ -397,109 +372,109 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
                 (top === null && left === null) ||
                 // if we have single char - trigger it means we want to re-position the autocomplete
                 lastToken.length === 1) {
-                var _c = getCaretCoordinates(textarea, selectionEnd), newLeft = _c.left, newTop = _c.top;
-                _this.setState({
+                const { left: newLeft, top: newTop } = getCaretCoordinates(textarea, selectionEnd);
+                this.setState({
                     // make position relative to textarea
                     left: newLeft,
-                    top: newTop - _this.textareaRef.scrollTop || 0,
+                    top: newTop - this.textareaRef.scrollTop || 0,
                 });
             }
-            _this.setState({
-                actualToken: actualToken,
-                currentTrigger: currentTrigger,
-                selectionEnd: selectionEnd,
-                selectionStart: selectionStart,
-            }, function () {
+            this.setState({
+                actualToken,
+                currentTrigger,
+                selectionEnd,
+                selectionStart,
+            }, () => {
                 try {
-                    _this._getValuesFromProvider();
+                    this._getValuesFromProvider();
                 }
                 catch (err) {
                     errorMessage(err.message);
                 }
             });
         };
-        _this._selectHandler = function (e) {
-            var _a = _this.props, onCaretPositionChange = _a.onCaretPositionChange, onSelect = _a.onSelect;
+        this._selectHandler = (e) => {
+            const { onCaretPositionChange, onSelect } = this.props;
             if (onCaretPositionChange)
-                onCaretPositionChange(_this.getCaretPosition());
+                onCaretPositionChange(this.getCaretPosition());
             if (onSelect) {
                 e.persist();
                 onSelect(e);
             }
         };
         // The textarea itself is outside the auto-select dropdown.
-        _this._onClickAndBlurHandler = function (e) {
-            var _a = _this.props, closeOnClickOutside = _a.closeOnClickOutside, onBlur = _a.onBlur;
+        this._onClickAndBlurHandler = (e) => {
+            const { closeOnClickOutside, onBlur } = this.props;
             // If this is a click: e.target is the textarea, and e.relatedTarget is the thing
             // that was actually clicked. If we clicked inside the auto-select dropdown, then
             // that's not a blur, from the auto-select point of view, so then do nothing.
-            var el = e.relatedTarget;
+            const el = e.relatedTarget;
             // If this is a blur event in Safari, then relatedTarget is never a dropdown item, but a common parent
             // of textarea and dropdown container. That means that dropdownRef will not contain its parent and the
             // autocomplete will be closed before onclick handler can be invoked selecting an item.
             // It seems that Safari has different implementation determining the relatedTarget node than Chrome and Firefox.
             // Therefore, if focused away in Safari, the dropdown will be kept rendered until pressing Esc or selecting and item from it.
-            var focusedAwayInSafari = isSafari() && e.type === 'blur';
-            if ((_this.dropdownRef && el instanceof Node && _this.dropdownRef.contains(el)) ||
+            const focusedAwayInSafari = isSafari() && e.type === 'blur';
+            if ((this.dropdownRef && el instanceof Node && this.dropdownRef.contains(el)) ||
                 focusedAwayInSafari) {
                 return;
             }
             if (closeOnClickOutside)
-                _this._closeAutocomplete();
+                this._closeAutocomplete();
             if (onBlur) {
                 e.persist();
                 onBlur(e);
             }
         };
-        _this._onScrollHandler = function () { return _this._closeAutocomplete(); };
-        _this._dropdownScroll = function (item) {
-            var scrollToItem = _this.props.scrollToItem;
+        this._onScrollHandler = () => this._closeAutocomplete();
+        this._dropdownScroll = (item) => {
+            const { scrollToItem } = this.props;
             if (!scrollToItem)
                 return;
             if (scrollToItem === true) {
-                defaultScrollToItem(_this.dropdownRef, item);
+                defaultScrollToItem(this.dropdownRef, item);
                 return;
             }
             if (typeof scrollToItem !== 'function' || scrollToItem.length !== 2) {
                 throw new Error('`scrollToItem` has to be boolean (true for default implementation) or function with two parameters: container, item.');
             }
-            scrollToItem(_this.dropdownRef, item);
+            scrollToItem(this.dropdownRef, item);
         };
-        _this.getTriggerProps = function () {
-            var _a = _this.props, showCommandsList = _a.showCommandsList, showMentionsList = _a.showMentionsList, trigger = _a.trigger;
-            var _b = _this.state, component = _b.component, currentTrigger = _b.currentTrigger, selectionEnd = _b.selectionEnd, value = _b.value;
-            var selectedItem = _this._getItemOnSelect();
-            var suggestionData = _this._getSuggestions();
-            var textToReplace = _this._getTextToReplace();
-            var triggerProps = {
-                component: component,
-                currentTrigger: currentTrigger,
+        this.getTriggerProps = () => {
+            const { showCommandsList, showMentionsList, trigger } = this.props;
+            const { component, currentTrigger, selectionEnd, value } = this.state;
+            const selectedItem = this._getItemOnSelect();
+            const suggestionData = this._getSuggestions();
+            const textToReplace = this._getTextToReplace();
+            const triggerProps = {
+                component,
+                currentTrigger,
                 getSelectedItem: selectedItem,
                 getTextToReplace: textToReplace,
-                selectionEnd: selectionEnd,
-                value: value,
+                selectionEnd,
+                value,
                 values: suggestionData,
             };
             if ((showCommandsList && trigger['/']) || (showMentionsList && trigger['@'])) {
-                var currentCommands_1;
-                var getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
-                getCommands === null || getCommands === void 0 ? void 0 : getCommands('', showCommandsList ? '/' : '@', function (data) {
-                    currentCommands_1 = data;
+                let currentCommands;
+                const getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
+                getCommands?.('', showCommandsList ? '/' : '@', (data) => {
+                    currentCommands = data;
                 });
                 triggerProps.component = showCommandsList ? CommandItem : UserItem;
                 triggerProps.currentTrigger = showCommandsList ? '/' : '@';
-                triggerProps.getTextToReplace = _this._getTextToReplace(showCommandsList ? '/' : '@');
-                triggerProps.getSelectedItem = _this._getItemOnSelect(showCommandsList ? '/' : '@');
+                triggerProps.getTextToReplace = this._getTextToReplace(showCommandsList ? '/' : '@');
+                triggerProps.getSelectedItem = this._getItemOnSelect(showCommandsList ? '/' : '@');
                 triggerProps.selectionEnd = 1;
                 triggerProps.value = showCommandsList ? '/' : '@';
-                triggerProps.values = currentCommands_1;
+                triggerProps.values = currentCommands;
             }
             return triggerProps;
         };
-        _this.setDropdownRef = function (element) {
-            _this.dropdownRef = element;
+        this.setDropdownRef = (element) => {
+            this.dropdownRef = element;
         };
-        var _a = _this.props, loadingComponent = _a.loadingComponent, trigger = _a.trigger, value = _a.value;
+        const { loadingComponent, trigger, value } = this.props;
         // TODO: it would be better to have the parent control state...
         // if (value) this.state.value = value;
         if (!loadingComponent) {
@@ -508,7 +483,7 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
         if (!trigger) {
             throw new Error('RTA: trigger is not defined');
         }
-        _this.state = {
+        this.state = {
             actualToken: '',
             component: null,
             currentTrigger: null,
@@ -521,85 +496,79 @@ var ReactTextareaAutocomplete = /** @class */ (function (_super) {
             top: null,
             value: value || '',
         };
-        return _this;
     }
     /**
      * setup to emulate the UNSAFE_componentWillReceiveProps
      */
-    ReactTextareaAutocomplete.getDerivedStateFromProps = function (props, state) {
+    static getDerivedStateFromProps(props, state) {
         if (props.value !== state.propsValue || !state.value) {
             return { propsValue: props.value, value: props.value };
         }
         else {
             return null;
         }
-    };
-    ReactTextareaAutocomplete.prototype.renderSuggestionListContainer = function () {
-        var _a = this.props, disableMentions = _a.disableMentions, dropdownClassName = _a.dropdownClassName, dropdownStyle = _a.dropdownStyle, itemClassName = _a.itemClassName, itemStyle = _a.itemStyle, listClassName = _a.listClassName, SuggestionItem = _a.SuggestionItem, _b = _a.SuggestionList, SuggestionList = _b === void 0 ? DefaultSuggestionList : _b;
-        var isComposing = this.state.isComposing;
-        var triggerProps = this.getTriggerProps();
+    }
+    renderSuggestionListContainer() {
+        const { disableMentions, dropdownClassName, dropdownStyle, itemClassName, itemStyle, listClassName, SuggestionItem, SuggestionList = DefaultSuggestionList, } = this.props;
+        const { isComposing } = this.state;
+        const triggerProps = this.getTriggerProps();
         if (isComposing ||
             !triggerProps.values ||
             !triggerProps.currentTrigger ||
             (disableMentions && triggerProps.currentTrigger === '@'))
             return null;
-        return (React.createElement("div", { className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName), ref: this.setDropdownRef, style: dropdownStyle },
-            React.createElement(SuggestionList, __assign({ className: clsx('str-chat__suggestion-list', listClassName), dropdownScroll: this._dropdownScroll, itemClassName: clsx('str-chat__suggestion-list-item', itemClassName), itemStyle: itemStyle, onSelect: this._onSelect, SuggestionItem: SuggestionItem }, triggerProps))));
-    };
-    ReactTextareaAutocomplete.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, className = _a.className, containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, style = _a.style;
-        var _b = this.props.additionalTextareaProps || {}, onBlur = _b.onBlur, onChange = _b.onChange, onClick = _b.onClick, onFocus = _b.onFocus, onKeyDown = _b.onKeyDown, onScroll = _b.onScroll, onSelect = _b.onSelect, restAdditionalTextareaProps = __rest(_b, ["onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onScroll", "onSelect"]);
-        var maxRows = this.props.maxRows;
-        var _c = this.state, dataLoading = _c.dataLoading, value = _c.value;
+        return (React.createElement("div", { className: clsx('str-chat__suggestion-list-container', dropdownClassName), ref: this.setDropdownRef, style: dropdownStyle },
+            React.createElement(SuggestionList, { className: listClassName, dropdownScroll: this._dropdownScroll, itemClassName: clsx('str-chat__suggestion-list-item', itemClassName), itemStyle: itemStyle, onSelect: this._onSelect, SuggestionItem: SuggestionItem, ...triggerProps })));
+    }
+    render() {
+        const { className, containerClassName, containerStyle, style } = this.props;
+        const { onBlur, onChange, onClick, onFocus, onKeyDown, onScroll, onSelect, ...restAdditionalTextareaProps } = this.props.additionalTextareaProps || {};
+        let { maxRows } = this.props;
+        const { dataLoading, value } = this.state;
         if (!this.props.grow)
             maxRows = 1;
         // By setting defaultValue to undefined, avoid error:
         // ForwardRef(TextareaAutosize) contains a textarea with both value and defaultValue props.
         // Textarea elements must be either controlled or uncontrolled
         return (React.createElement("div", { className: clsx('rta', containerClassName, {
-                'rta--loading': dataLoading,
+                ['rta--loading']: dataLoading,
             }), style: containerStyle },
             this.renderSuggestionListContainer(),
-            React.createElement(Textarea, __assign({ "data-testid": 'message-input' }, this._cleanUpProps(), { className: clsx('rta__textarea', className), maxRows: maxRows, onBlur: function (e) {
-                    _this._onClickAndBlurHandler(e);
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, onChange: function (e) {
-                    _this._changeHandler(e);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                }, onClick: function (e) {
-                    _this._onClickAndBlurHandler(e);
-                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                }, onCompositionEnd: function () { return _this.setState(function (pv) { return (__assign(__assign({}, pv), { isComposing: false })); }); }, onCompositionStart: function () { return _this.setState(function (pv) { return (__assign(__assign({}, pv), { isComposing: true })); }); }, onFocus: function (e) {
-                    var _a, _b;
-                    (_b = (_a = _this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-                }, onKeyDown: function (e) {
-                    _this._handleKeyDown(e);
-                    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-                }, onScroll: function (e) {
-                    _this._onScrollHandler(e);
-                    onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
-                }, onSelect: function (e) {
-                    _this._selectHandler(e);
-                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(e);
-                }, ref: function (ref) {
-                    var _a;
-                    (_a = _this.props) === null || _a === void 0 ? void 0 : _a.innerRef(ref);
-                    _this.textareaRef = ref;
-                }, style: style, value: value }, restAdditionalTextareaProps, { defaultValue: undefined }))));
-    };
-    ReactTextareaAutocomplete.defaultProps = {
-        closeOnClickOutside: true,
-        maxRows: 10,
-        minChar: 1,
-        movePopupAsYouType: false,
-        scrollToItem: true,
-        value: '',
-    };
-    return ReactTextareaAutocomplete;
-}(React.Component));
-export { ReactTextareaAutocomplete };
+            React.createElement(Textarea, { "data-testid": 'message-input', ...this._cleanUpProps(), className: clsx('rta__textarea', className), maxRows: maxRows, onBlur: (e) => {
+                    this._onClickAndBlurHandler(e);
+                    onBlur?.(e);
+                }, onChange: (e) => {
+                    this._changeHandler(e);
+                    onChange?.(e);
+                }, onClick: (e) => {
+                    this._onClickAndBlurHandler(e);
+                    onClick?.(e);
+                }, onCompositionEnd: () => this.setState((pv) => ({ ...pv, isComposing: false })), onCompositionStart: () => this.setState((pv) => ({ ...pv, isComposing: true })), onFocus: (e) => {
+                    this.props.onFocus?.(e);
+                    onFocus?.(e);
+                }, onKeyDown: (e) => {
+                    this._handleKeyDown(e);
+                    onKeyDown?.(e);
+                }, onScroll: (e) => {
+                    this._onScrollHandler(e);
+                    onScroll?.(e);
+                }, onSelect: (e) => {
+                    this._selectHandler(e);
+                    onSelect?.(e);
+                }, ref: (ref) => {
+                    this.props?.innerRef(ref);
+                    this.textareaRef = ref;
+                }, style: style, value: value, ...restAdditionalTextareaProps, defaultValue: undefined })));
+    }
+}
+ReactTextareaAutocomplete.defaultProps = {
+    closeOnClickOutside: true,
+    maxRows: 10,
+    minChar: 1,
+    movePopupAsYouType: false,
+    scrollToItem: true,
+    value: '',
+};
 ReactTextareaAutocomplete.propTypes = {
     className: PropTypes.string,
     closeOnClickOutside: PropTypes.bool,