stream-chat-react 11.0.0 → 11.1.1

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icons = require('./icons-427fd8d5.js');
+var icons = require('./icons-a35a8ee7.js');
 var React = require('react');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
@@ -10,21 +10,10 @@ var sanitizeUrl = require('@braintree/sanitize-url');
 var ImageGallery = require('react-image-gallery');
 var PropTypes = require('prop-types');
 var linkify = require('linkifyjs');
-var _defineProperty$2 = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray$2 = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
 var uniqBy = require('lodash.uniqby');
-var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var _extends = require('@babel/runtime/helpers/extends');
-var _typeof = require('@babel/runtime/helpers/typeof');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var _defineProperty$2 = require('@babel/runtime/helpers/defineProperty');
 var Textarea = require('react-textarea-autosize');
 var getCaretCoordinates = require('textarea-caret');
 var reactIs = require('react-is');
@@ -84,21 +73,10 @@ var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
 var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$2);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray$2);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties$1);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$2);
 var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
 var getCaretCoordinates__default = /*#__PURE__*/_interopDefaultLegacy(getCaretCoordinates);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
@@ -227,7 +205,7 @@ var PlayButton = function (_a) {
 var ProgressBar = function (_a) {
     var onClick = _a.onClick, progress = _a.progress;
     return (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
-            background: "linear-gradient(\n\t\t to right, \n\t\t var(--str-chat__primary-color),\n\t\t var(--str-chat__primary-color) ".concat(progress, "%,\n\t\t var(--str-chat__disabled-color) ").concat(progress, "%,\n\t\t var(--str-chat__disabled-color)\n\t  )"),
+            background: "linear-gradient(\n\t\t to right,\n\t\t var(--str-chat__primary-color),\n\t\t var(--str-chat__primary-color) ".concat(progress, "%,\n\t\t var(--str-chat__disabled-color) ").concat(progress, "%,\n\t\t var(--str-chat__disabled-color)\n\t  )"),
         } },
         React__default["default"].createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: "".concat(progress, "px") } })));
 };
@@ -261,6 +239,23 @@ var UnMemoizedAudio = function (props) {
  */
 var Audio = React__default["default"].memo(UnMemoizedAudio);
 
+var BaseImage = React.forwardRef(function BaseImage(_a, ref) {
+    var props = icons.__rest(_a, []);
+    var propsClassName = props.className, propsOnError = props.onError;
+    var _b = React.useState(false), error = _b[0], setError = _b[1];
+    React.useEffect(function () { return function () {
+        setError(false);
+    }; }, [props.src]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("img", icons.__assign({ "data-testid": 'str-chat__base-image' }, props, { className: clsx(propsClassName, 'str-chat__base-image', {
+                'str-chat__base-image--load-failed': error,
+            }), onError: function (e) {
+                setError(true);
+                propsOnError === null || propsOnError === void 0 ? void 0 : propsOnError(e);
+            }, ref: ref })),
+        error && React__default["default"].createElement(DownloadButton, { assetUrl: props.src })));
+});
+
 var CloseIconRound = function () { return (React__default["default"].createElement("svg", { "data-testid": 'close-icon-round', fill: 'none', height: '28', viewBox: '0 0 28 28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
     React__default["default"].createElement("rect", { fill: '#72767E', height: '28', rx: '14', width: '28' }),
     React__default["default"].createElement("circle", { cx: '14', cy: '14', fill: '#72767E', r: '12' }),
@@ -303,12 +298,13 @@ var Modal = function (_a) {
 
 var ModalGallery = function (props) {
     var images = props.images, index = props.index;
+    var t = icons.useTranslationContext('ModalGallery').t;
     var formattedArray = React.useMemo(function () {
         return images.map(function (image) {
             var imageSrc = image.image_url || image.thumb_url || '';
             return {
                 original: imageSrc,
-                originalAlt: 'User uploaded content',
+                originalAlt: t('User uploaded content'),
                 source: imageSrc,
             };
         });
@@ -320,8 +316,9 @@ var UnMemoizedGallery = function (props) {
     var images = props.images, innerRefs = props.innerRefs;
     var _a = React.useState(0), index = _a[0], setIndex = _a[1];
     var _b = React.useState(false), modalOpen = _b[0], setModalOpen = _b[1];
-    var _c = icons.useComponentContext('Gallery').ModalGallery, ModalGallery$1 = _c === void 0 ? ModalGallery : _c;
+    var _c = icons.useComponentContext('Gallery'), _d = _c.BaseImage, BaseImage$1 = _d === void 0 ? BaseImage : _d, _e = _c.ModalGallery, ModalGallery$1 = _e === void 0 ? ModalGallery : _e;
     var t = icons.useTranslationContext('Gallery').t;
+    var imageFallbackTitle = t('User uploaded content');
     var countImagesDisplayedInPreview = 4;
     var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
     var toggleModal = function (selectedIndex) {
@@ -340,7 +337,7 @@ var UnMemoizedGallery = function (props) {
             React__default["default"].createElement("p", null, t('{{ imageCount }} more', {
                 imageCount: images.length - countImagesDisplayedInPreview,
             })))) : (React__default["default"].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-            React__default["default"].createElement("img", icons.__assign({ alt: 'User uploaded content', src: sanitizeUrl.sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
+            React__default["default"].createElement(BaseImage$1, icons.__assign({ alt: (image === null || image === void 0 ? void 0 : image.fallback) || imageFallbackTitle, src: sanitizeUrl.sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url), style: image.style, title: (image === null || image === void 0 ? void 0 : image.fallback) || imageFallbackTitle }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
     });
     var className = clsx('str-chat__gallery', {
         'str-chat__gallery--square': images.length > lastImageIndexInPreview,
@@ -362,11 +359,11 @@ var Gallery = React__default["default"].memo(UnMemoizedGallery);
 var ImageComponent = function (props) {
     var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url, innerRef = props.innerRef, previewUrl = props.previewUrl, style = props.style;
     var _b = React.useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
-    var _c = icons.useComponentContext('ImageComponent').ModalGallery, ModalGallery$1 = _c === void 0 ? ModalGallery : _c;
+    var _c = icons.useComponentContext('ImageComponent'), _d = _c.BaseImage, BaseImage$1 = _d === void 0 ? BaseImage : _d, _e = _c.ModalGallery, ModalGallery$1 = _e === void 0 ? ModalGallery : _e;
     var imageSrc = sanitizeUrl.sanitizeUrl(previewUrl || image_url || thumb_url);
     var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("img", icons.__assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0 }, dimensions, (innerRef && { ref: innerRef }))),
+        React__default["default"].createElement(BaseImage$1, icons.__assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback }, dimensions, (innerRef && { ref: innerRef }))),
         React__default["default"].createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
             React__default["default"].createElement(ModalGallery$1, { images: [props], index: 0 }))));
 };
@@ -1524,9 +1521,9 @@ function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Sy
 
 function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function ownKeys$3(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; }
+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; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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$1(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; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -1743,7 +1740,7 @@ function pickerOptionsFromAccept(accept) {
           mimeType = _ref5[0],
           ext = _ref5[1];
 
-      return _objectSpread$3(_objectSpread$3({}, agg), {}, _defineProperty$1({}, mimeType, ext));
+      return _objectSpread$1(_objectSpread$1({}, agg), {}, _defineProperty$1({}, mimeType, ext));
     }, {});
     return [{
       // description is required due to https://crbug.com/1264708
@@ -1831,7 +1828,7 @@ function isExt(v) {
  * @typedef {"file-invalid-type"|"file-too-large"|"file-too-small"|"too-many-files"} ErrorCode
  */
 
-var _excluded$1 = ["children"],
+var _excluded = ["children"],
     _excluded2 = ["open"],
     _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
@@ -1856,9 +1853,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys$2(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; }
+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; }
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -1882,7 +1879,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Dropzone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      params = _objectWithoutProperties(_ref, _excluded$1);
+      params = _objectWithoutProperties(_ref, _excluded);
 
   var _useDropzone = useDropzone(params),
       open = _useDropzone.open,
@@ -1894,7 +1891,7 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, children(_objectSpread$2(_objectSpread$2({}, props), {}, {
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
     open: open
   })));
 });
@@ -2267,7 +2264,7 @@ var initialState$1 = {
 function useDropzone() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$props = _objectSpread$2(_objectSpread$2({}, defaultProps), props),
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       accept = _defaultProps$props.accept,
       disabled = _defaultProps$props.disabled,
       getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
@@ -2692,7 +2689,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties(_ref2, _excluded3);
 
-      return _objectSpread$2(_objectSpread$2(_defineProperty({
+      return _objectSpread(_objectSpread(_defineProperty({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -2731,10 +2728,10 @@ function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread$2(_objectSpread$2({}, inputProps), rest);
+      return _objectSpread(_objectSpread({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
-  return _objectSpread$2(_objectSpread$2({}, state), {}, {
+  return _objectSpread(_objectSpread({}, state), {}, {
     isFocused: isFocused && !disabled,
     getRootProps: getRootProps,
     getInputProps: getInputProps,
@@ -2753,40 +2750,40 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case "focus":
-      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: true
       });
 
     case "blur":
-      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: false
       });
 
     case "openDialog":
-      return _objectSpread$2(_objectSpread$2({}, initialState$1), {}, {
+      return _objectSpread(_objectSpread({}, initialState$1), {}, {
         isFileDialogActive: true
       });
 
     case "closeDialog":
-      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isFileDialogActive: false
       });
 
     case "setDraggedFiles":
-      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isDragActive: action.isDragActive,
         isDragAccept: action.isDragAccept,
         isDragReject: action.isDragReject
       });
 
     case "setFiles":
-      return _objectSpread$2(_objectSpread$2({}, state), {}, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
     case "reset":
-      return _objectSpread$2({}, initialState$1);
+      return _objectSpread({}, initialState$1);
 
     default:
       return state;
@@ -3313,22 +3310,21 @@ var getAttachmentType = function (attachment) {
     return 'unsupported';
 };
 
-var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
-  var className = props.className,
-    Component = props.component,
-    item = props.item,
-    onClickHandler = props.onClickHandler,
-    onSelectHandler = props.onSelectHandler,
-    selected = props.selected,
-    style = props.style;
-  var _useChatContext = icons.useChatContext('SuggestionItem'),
-    themeVersion = _useChatContext.themeVersion;
-  var handleSelect = React.useCallback(function () {
-    return onSelectHandler(item);
-  }, [item, onSelectHandler]);
-  var handleClick = React.useCallback(function (event) {
-    return onClickHandler(event, item);
-  }, [item, onClickHandler]);
+const Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
+  const {
+    className,
+    component: Component,
+    item,
+    onClickHandler,
+    onSelectHandler,
+    selected,
+    style
+  } = props;
+  const {
+    themeVersion
+  } = icons.useChatContext('SuggestionItem');
+  const handleSelect = React.useCallback(() => onSelectHandler(item), [item, onSelectHandler]);
+  const handleClick = React.useCallback(event => onClickHandler(event, item), [item, onClickHandler]);
   if (themeVersion === '2') return /*#__PURE__*/React__default["default"].createElement("li", {
     className: clsx(className, {
       'str-chat__suggestion-item--selected': selected
@@ -30531,43 +30527,38 @@ var renderText = function (text, mentionedUsers, _a) {
     return (React__default["default"].createElement(Markdown, { allowedElements: allowedTagNames, components: icons.__assign(icons.__assign({}, markDownRenderers), customMarkDownRenderers), rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, unwrapDisallowed: true, urlTransform: urlTransform }, newText));
 };
 
-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; }
-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__default["default"](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; }
-var List = function List(_ref) {
-  var className = _ref.className,
-    component = _ref.component,
-    currentTrigger = _ref.currentTrigger,
-    dropdownScroll = _ref.dropdownScroll,
-    getSelectedItem = _ref.getSelectedItem,
-    getTextToReplace = _ref.getTextToReplace,
-    PropHeader = _ref.Header,
-    itemClassName = _ref.itemClassName,
-    itemStyle = _ref.itemStyle,
-    onSelect = _ref.onSelect,
-    selectionEnd = _ref.selectionEnd,
-    style = _ref.style,
-    PropSuggestionItem = _ref.SuggestionItem,
-    propValue = _ref.value,
-    values = _ref.values;
-  var _useComponentContext = icons.useComponentContext('SuggestionList'),
-    AutocompleteSuggestionHeader = _useComponentContext.AutocompleteSuggestionHeader,
-    AutocompleteSuggestionItem = _useComponentContext.AutocompleteSuggestionItem;
-  var _useChatContext = icons.useChatContext('SuggestionList'),
-    themeVersion = _useChatContext.themeVersion;
-  var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item$1;
-  var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
-  var _useState = React.useState(undefined),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    selectedItemIndex = _useState2[0],
-    setSelectedItemIndex = _useState2[1];
-  var itemsRef = [];
-  var isSelected = function isSelected(item) {
-    return selectedItemIndex === values.findIndex(function (value) {
-      return getId(value) === getId(item);
-    });
-  };
-  var getId = function getId(item) {
-    var textToReplace = getTextToReplace(item);
+const List = _ref => {
+  let {
+    className,
+    component,
+    currentTrigger,
+    dropdownScroll,
+    getSelectedItem,
+    getTextToReplace,
+    Header: PropHeader,
+    itemClassName,
+    itemStyle,
+    onSelect,
+    selectionEnd,
+    style,
+    SuggestionItem: PropSuggestionItem,
+    value: propValue,
+    values
+  } = _ref;
+  const {
+    AutocompleteSuggestionHeader,
+    AutocompleteSuggestionItem
+  } = icons.useComponentContext('SuggestionList');
+  const {
+    themeVersion
+  } = icons.useChatContext('SuggestionList');
+  const SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item$1;
+  const SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
+  const [selectedItemIndex, setSelectedItemIndex] = React.useState(undefined);
+  const itemsRef = [];
+  const isSelected = item => selectedItemIndex === values.findIndex(value => getId(value) === getId(item));
+  const getId = item => {
+    const textToReplace = getTextToReplace(item);
     if (textToReplace.key) {
       return textToReplace.key;
     }
@@ -30576,38 +30567,34 @@ var List = function List(_ref) {
     }
     return item.key;
   };
-  var findItemIndex = React.useCallback(function (item) {
-    return values.findIndex(function (value) {
-      return value.id ? value.id === item.id : value.name === item.name;
-    });
-  }, [values]);
-  var modifyText = function modifyText(value) {
+  const findItemIndex = React.useCallback(item => values.findIndex(value => value.id ? value.id === item.id : value.name === item.name), [values]);
+  const modifyText = value => {
     if (!value) return;
     onSelect(getTextToReplace(value));
     if (getSelectedItem) getSelectedItem(value);
   };
-  var handleClick = React.useCallback(function (e, item) {
+  const handleClick = React.useCallback((e, item) => {
     e === null || e === void 0 ? void 0 : e.preventDefault();
-    var index = findItemIndex(item);
+    const index = findItemIndex(item);
     modifyText(values[index]);
   }, [modifyText, findItemIndex]);
-  var selectItem = React.useCallback(function (item) {
-    var index = findItemIndex(item);
+  const selectItem = React.useCallback(item => {
+    const index = findItemIndex(item);
     setSelectedItemIndex(index);
   }, [findItemIndex]);
-  var handleKeyDown = React.useCallback(function (event) {
+  const handleKeyDown = React.useCallback(event => {
     if (event.key === 'ArrowUp') {
-      setSelectedItemIndex(function (prevSelected) {
+      setSelectedItemIndex(prevSelected => {
         if (prevSelected === undefined) return 0;
-        var newIndex = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+        const newIndex = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
         dropdownScroll(itemsRef[newIndex]);
         return newIndex;
       });
     }
     if (event.key === 'ArrowDown') {
-      setSelectedItemIndex(function (prevSelected) {
+      setSelectedItemIndex(prevSelected => {
         if (prevSelected === undefined) return 0;
-        var newIndex = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+        const newIndex = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
         dropdownScroll(itemsRef[newIndex]);
         return newIndex;
       });
@@ -30617,33 +30604,30 @@ var List = function List(_ref) {
     }
     return null;
   }, [selectedItemIndex, values]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     document.addEventListener('keydown', handleKeyDown, false);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, [handleKeyDown]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (values !== null && values !== void 0 && values.length) selectItem(values[0]);
   }, [values]); // eslint-disable-line
 
-  var restructureItem = React.useCallback(function (item) {
-    var matched = item.name || item.id;
-    var textBeforeCursor = propValue.slice(0, selectionEnd);
-    var triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
-    var editedPropValue = escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
-    var parts = matched.split(new RegExp("(".concat(editedPropValue, ")"), 'gi'));
-    var itemNameParts = {
+  const restructureItem = React.useCallback(item => {
+    const matched = item.name || item.id;
+    const textBeforeCursor = propValue.slice(0, selectionEnd);
+    const triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
+    const editedPropValue = escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
+    const parts = matched.split(new RegExp("(".concat(editedPropValue, ")"), 'gi'));
+    const itemNameParts = {
       match: editedPropValue,
-      parts: parts
+      parts
+    };
+    return {
+      ...item,
+      itemNameParts
     };
-    return _objectSpread$1(_objectSpread$1({}, item), {}, {
-      itemNameParts: itemNameParts
-    });
   }, [propValue, selectionEnd, currentTrigger]);
-  var restructuredValues = React.useMemo(function () {
-    return values.map(restructureItem);
-  }, [values, restructureItem]);
+  const restructuredValues = React.useMemo(() => values.map(restructureItem), [values, restructureItem]);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: clsx('rta__list', className),
     style: style
@@ -30652,31 +30636,29 @@ var List = function List(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(SuggestionHeader, {
     currentTrigger: currentTrigger,
     value: propValue
-  })), restructuredValues.map(function (item, i) {
-    return /*#__PURE__*/React__default["default"].createElement(SuggestionItem, {
-      className: itemClassName,
-      component: component,
-      item: item,
-      key: getId(item),
-      onClickHandler: handleClick,
-      onSelectHandler: selectItem,
-      ref: function ref(_ref2) {
-        itemsRef[i] = _ref2;
-      },
-      selected: isSelected(item),
-      style: itemStyle,
-      value: propValue
-    });
-  }));
+  })), restructuredValues.map((item, i) => /*#__PURE__*/React__default["default"].createElement(SuggestionItem, {
+    className: itemClassName,
+    component: component,
+    item: item,
+    key: getId(item),
+    onClickHandler: handleClick,
+    onSelectHandler: selectItem,
+    ref: ref => {
+      itemsRef[i] = ref;
+    },
+    selected: isSelected(item),
+    style: itemStyle,
+    value: propValue
+  })));
 };
 
-var DEFAULT_CARET_POSITION = 'next';
+const DEFAULT_CARET_POSITION = 'next';
 function defaultScrollToItem(container, item) {
   if (!item) return;
-  var itemHeight = parseInt(getComputedStyle(item).getPropertyValue('height'), 10);
-  var containerHight = parseInt(getComputedStyle(container).getPropertyValue('height'), 10) - itemHeight;
-  var actualScrollTop = container.scrollTop;
-  var itemOffsetTop = item.offsetTop;
+  const itemHeight = parseInt(getComputedStyle(item).getPropertyValue('height'), 10);
+  const containerHight = parseInt(getComputedStyle(container).getPropertyValue('height'), 10) - itemHeight;
+  const actualScrollTop = container.scrollTop;
+  const itemOffsetTop = item.offsetTop;
   if (itemOffsetTop < actualScrollTop + containerHight && actualScrollTop < itemOffsetTop) {
     return;
   }
@@ -30684,27 +30666,27 @@ function defaultScrollToItem(container, item) {
   // eslint-disable-next-line
   container.scrollTop = itemOffsetTop;
 }
-var errorMessage = function errorMessage(message) {
-  return console.error("RTA: dataProvider fails: ".concat(message, "\n    \nCheck the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues"));
-};
-var triggerPropsCheck = function triggerPropsCheck(_ref) {
-  var trigger = _ref.trigger;
+const errorMessage = message => console.error("RTA: dataProvider fails: ".concat(message, "\n    \nCheck the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues"));
+const triggerPropsCheck = _ref => {
+  let {
+    trigger
+  } = _ref;
   if (!trigger) return Error('Invalid prop trigger. Prop missing.');
-  var triggers = Object.entries(trigger);
-  for (var i = 0; i < triggers.length; i += 1) {
-    var _triggers$i = _slicedToArray__default["default"](triggers[i], 2),
-      triggerChar = _triggers$i[0],
-      settings = _triggers$i[1];
+  const triggers = Object.entries(trigger);
+  for (let i = 0; i < triggers.length; i += 1) {
+    const [triggerChar, settings] = triggers[i];
     if (typeof triggerChar !== 'string' || triggerChar.length !== 1) {
       return Error('Invalid prop trigger. Keys of the object has to be string / one character.');
     }
 
     // $FlowFixMe
-    var triggerSetting = settings;
-    var callback = triggerSetting.callback,
-      component = triggerSetting.component,
-      dataProvider = triggerSetting.dataProvider,
-      output = triggerSetting.output;
+    const triggerSetting = settings;
+    const {
+      callback,
+      component,
+      dataProvider,
+      output
+    } = triggerSetting;
     if (!reactIs.isValidElementType(component)) {
       return Error('Invalid prop trigger: component should be defined.');
     }
@@ -30819,138 +30801,111 @@ var isSafari = function () {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
 };
 
-var _excluded = ["onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onScroll", "onSelect"];
-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; }
-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__default["default"](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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-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; } }
-var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
-  _inherits__default["default"](ReactTextareaAutocomplete, _React$Component);
-  var _super = _createSuper(ReactTextareaAutocomplete);
-  function ReactTextareaAutocomplete(_props) {
+class ReactTextareaAutocomplete extends React__default["default"].Component {
+  constructor(_props) {
     var _this;
-    _classCallCheck__default["default"](this, ReactTextareaAutocomplete);
-    _this = _super.call(this, _props);
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getSelectionPosition", function () {
-      if (!_this.textareaRef) return null;
+    super(_props);
+    _this = this;
+    _defineProperty__default["default"](this, "getSelectionPosition", () => {
+      if (!this.textareaRef) return null;
       return {
-        selectionEnd: _this.textareaRef.selectionEnd,
-        selectionStart: _this.textareaRef.selectionStart
+        selectionEnd: this.textareaRef.selectionEnd,
+        selectionStart: this.textareaRef.selectionStart
       };
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getSelectedText", function () {
-      if (!_this.textareaRef) return null;
-      var _this$textareaRef = _this.textareaRef,
-        selectionEnd = _this$textareaRef.selectionEnd,
-        selectionStart = _this$textareaRef.selectionStart;
+    _defineProperty__default["default"](this, "getSelectedText", () => {
+      if (!this.textareaRef) return null;
+      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);
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "setCaretPosition", function () {
-      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    _defineProperty__default["default"](this, "setCaretPosition", function () {
+      let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       if (!_this.textareaRef) return;
       _this.textareaRef.focus();
       _this.textareaRef.setSelectionRange(position, position);
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getCaretPosition", function () {
-      if (!_this.textareaRef) return 0;
-      return _this.textareaRef.selectionEnd;
+    _defineProperty__default["default"](this, "getCaretPosition", () => {
+      if (!this.textareaRef) return 0;
+      return this.textareaRef.selectionEnd;
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_defaultShouldSubmit", function (event) {
-      return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
-    });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_handleKeyDown", function (event) {
-      var _this$props$shouldSub = _this.props.shouldSubmit,
-        shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub;
+    _defineProperty__default["default"](this, "_defaultShouldSubmit", event => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing);
+    _defineProperty__default["default"](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) event.preventDefault();
-      if (shouldSubmit !== null && shouldSubmit !== void 0 && shouldSubmit(event)) return _this._onEnter(event);
-      if (event.key === ' ') return _this._onSpace(event);
-      if (event.key === 'Escape') return _this._closeAutocomplete();
+      if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && this.dropdownRef) event.preventDefault();
+      if (shouldSubmit !== null && shouldSubmit !== void 0 && shouldSubmit(event)) return this._onEnter(event);
+      if (event.key === ' ') return this._onSpace(event);
+      if (event.key === 'Escape') return this._closeAutocomplete();
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onEnter", function (event) {
-      if (!_this.textareaRef) return;
-      var trigger = _this.state.currentTrigger;
-      if (!trigger || !_this.state.data) {
+    _defineProperty__default["default"](this, "_onEnter", event => {
+      if (!this.textareaRef) return;
+      const trigger = this.state.currentTrigger;
+      if (!trigger || !this.state.data) {
         // trigger a submit
-        _this._replaceWord();
-        if (_this.textareaRef) {
-          _this.textareaRef.selectionEnd = 0;
+        this._replaceWord();
+        if (this.textareaRef) {
+          this.textareaRef.selectionEnd = 0;
         }
-        _this.props.handleSubmit(event);
-        _this._closeAutocomplete();
+        this.props.handleSubmit(event);
+        this._closeAutocomplete();
       }
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onSpace", function () {
-      if (!_this.props.replaceWord || !_this.textareaRef) return;
+    _defineProperty__default["default"](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();
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_replaceWord", /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
-      var value, lastWordRegex, match, lastWord, spaces, newWord, textBeforeWord, textAfterCaret, newText;
-      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              value = _this.state.value;
-              lastWordRegex = /([^\s]+)(\s*)$/;
-              match = lastWordRegex.exec(value.slice(0, _this.getCaretPosition()));
-              lastWord = match && match[1];
-              if (lastWord) {
-                _context.next = 6;
-                break;
-              }
-              return _context.abrupt("return");
-            case 6:
-              spaces = match[2];
-              _context.next = 9;
-              return _this.props.replaceWord(lastWord);
-            case 9:
-              newWord = _context.sent;
-              if (!(newWord == null)) {
-                _context.next = 12;
-                break;
-              }
-              return _context.abrupt("return");
-            case 12:
-              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);
-              });
-            case 16:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onSelect", function (newToken) {
-      var _this$props = _this.props,
-        closeCommandsList = _this$props.closeCommandsList,
-        closeMentionsList = _this$props.closeMentionsList,
-        onChange = _this$props.onChange,
-        showCommandsList = _this$props.showCommandsList,
-        showMentionsList = _this$props.showMentionsList;
-      var _this$state = _this.state,
-        stateTrigger = _this$state.currentTrigger,
-        selectionEnd = _this$state.selectionEnd,
-        textareaValue = _this$state.value;
-      var currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
+    _defineProperty__default["default"](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);
+      });
+    });
+    _defineProperty__default["default"](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 computeCaretPosition(position, token, startToken) {
+      const computeCaretPosition = (position, token, startToken) => {
         switch (position) {
           case 'start':
             return startToken;
@@ -30964,40 +30919,44 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
             return position;
         }
       };
-      var textToModify = showCommandsList ? '/' : showMentionsList ? '@' : textareaValue.slice(0, selectionEnd);
-      var startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
+      const textToModify = showCommandsList ? '/' : showMentionsList ? '@' : textareaValue.slice(0, selectionEnd);
+      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' ? "".concat(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', {
+        const e = new CustomEvent('change', {
           bubbles: true
         });
-        _this.textareaRef.dispatchEvent(e);
+        this.textareaRef.dispatchEvent(e);
         if (onChange) onChange(e);
-        _this.setCaretPosition(newCaretPosition);
+        this.setCaretPosition(newCaretPosition);
       });
-      _this._closeAutocomplete();
+      this._closeAutocomplete();
       if (showCommandsList) closeCommandsList();
       if (showMentionsList) closeMentionsList();
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getItemOnSelect", function (paramTrigger) {
-      var stateTrigger = _this.state.currentTrigger;
-      var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-      var currentTrigger = paramTrigger || stateTrigger;
+    _defineProperty__default["default"](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');
         }
@@ -31007,20 +30966,23 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         return null;
       };
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getTextToReplace", function (paramTrigger) {
-      var _this$state2 = _this.state,
-        actualToken = _this$state2.actualToken,
-        stateTrigger = _this$state2.currentTrigger;
-      var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-      var currentTrigger = paramTrigger || stateTrigger;
+    _defineProperty__default["default"](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) {
-        if (_typeof__default["default"](item) === 'object' && (!output || typeof output !== 'function')) {
+      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"));
           }
@@ -31047,31 +31009,36 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         };
       };
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getCurrentTriggerSettings", function (paramTrigger) {
-      var stateTrigger = _this.state.currentTrigger;
-      var currentTrigger = paramTrigger || stateTrigger;
+    _defineProperty__default["default"](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];
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getValuesFromProvider", function () {
-      var _this$state3 = _this.state,
-        actualToken = _this$state3.actualToken,
-        currentTrigger = _this$state3.currentTrigger;
-      var triggerSettings = _this._getCurrentTriggerSettings();
+    _defineProperty__default["default"](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({
+      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) return;
+        if (token !== this.state.actualToken) return;
         if (!Array.isArray(data)) {
           throw new Error('Trigger provider has to provide an array!');
         }
@@ -31080,30 +31047,31 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         }
 
         // throw away if we resolved old trigger
-        if (currentTrigger !== _this.state.currentTrigger) return;
+        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
         });
       });
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getSuggestions", function (paramTrigger) {
-      var _this$state4 = _this.state,
-        stateTrigger = _this$state4.currentTrigger,
-        data = _this$state4.data;
-      var currentTrigger = paramTrigger || stateTrigger;
+    _defineProperty__default["default"](this, "_getSuggestions", paramTrigger => {
+      const {
+        currentTrigger: stateTrigger,
+        data
+      } = this.state;
+      const currentTrigger = paramTrigger || stateTrigger;
       if (!currentTrigger || !data || data && !data.length) return null;
       return data;
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_closeAutocomplete", function () {
-      _this.setState({
+    _defineProperty__default["default"](this, "_closeAutocomplete", () => {
+      this.setState({
         currentTrigger: null,
         data: null,
         dataLoading: false,
@@ -31111,57 +31079,61 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         top: null
       });
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_cleanUpProps", function () {
-      var props = _objectSpread({}, _this.props);
-      var notSafe = ['additionalTextareaProps', 'className', 'closeCommandsList', 'closeMentionsList', 'closeOnClickOutside', 'containerClassName', 'containerStyle', 'disableMentions', 'dropdownClassName', 'dropdownStyle', 'grow', 'handleSubmit', 'innerRef', 'itemClassName', 'itemStyle', 'listClassName', 'listStyle', 'loaderClassName', 'loaderStyle', 'loadingComponent', 'minChar', 'movePopupAsYouType', 'onCaretPositionChange', 'onChange', 'ref', 'replaceWord', 'scrollToItem', 'shouldSubmit', 'showCommandsList', 'showMentionsList', 'SuggestionItem', 'SuggestionList', 'trigger', 'value'];
+    _defineProperty__default["default"](this, "_cleanUpProps", () => {
+      const props = {
+        ...this.props
+      };
+      const notSafe = ['additionalTextareaProps', 'className', 'closeCommandsList', 'closeMentionsList', 'closeOnClickOutside', 'containerClassName', 'containerStyle', 'disableMentions', 'dropdownClassName', 'dropdownStyle', 'grow', 'handleSubmit', 'innerRef', 'itemClassName', 'itemStyle', 'listClassName', 'listStyle', 'loaderClassName', 'loaderStyle', 'loadingComponent', 'minChar', 'movePopupAsYouType', 'onCaretPositionChange', 'onChange', 'ref', 'replaceWord', 'scrollToItem', 'shouldSubmit', 'showCommandsList', 'showMentionsList', 'SuggestionItem', 'SuggestionList', 'trigger', 'value'];
 
       // eslint-disable-next-line
-      for (var prop in props) {
+      for (const prop in props) {
         if (notSafe.includes(prop)) delete props[prop];
       }
       return props;
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_isCommand", function (text) {
+    _defineProperty__default["default"](this, "_isCommand", text => {
       if (text[0] !== '/') return false;
-      var tokens = text.split(' ');
+      const tokens = text.split(' ');
       return tokens.length <= 1;
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_changeHandler", function (e) {
-      var _this$props2 = _this.props,
-        minChar = _this$props2.minChar,
-        movePopupAsYouType = _this$props2.movePopupAsYouType,
-        onCaretPositionChange = _this$props2.onCaretPositionChange,
-        onChange = _this$props2.onChange,
-        trigger = _this$props2.trigger;
-      var _this$state5 = _this.state,
-        left = _this$state5.left,
-        top = _this$state5.top;
-      var textarea = e.target;
-      var selectionEnd = textarea.selectionEnd,
-        selectionStart = textarea.selectionStart,
-        value = textarea.value;
+    _defineProperty__default["default"](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
+      if (onCaretPositionChange) onCaretPositionChange(this.getCaretPosition());
+      this.setState({
+        value
       });
-      var currentTrigger;
-      var lastToken;
-      if (_this._isCommand(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".concat(triggerTokens, "]*");
+        const regex = new RegExp("(?!^|\\W)?[".concat(triggerTokens, "]").concat(triggerNorWhitespace, "\\s?").concat(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;
       }
 
       /*
@@ -31169,132 +31141,138 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
        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;
       if (movePopupAsYouType || top === null && left === null ||
       // if we have single char - trigger it means we want to re-position the autocomplete
       lastToken.length === 1) {
-        var _getCaretCoordinates = getCaretCoordinates__default["default"](textarea, selectionEnd),
-          newLeft = _getCaretCoordinates.left,
-          newTop = _getCaretCoordinates.top;
-        _this.setState({
+        const {
+          left: newLeft,
+          top: newTop
+        } = getCaretCoordinates__default["default"](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);
         }
       });
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_selectHandler", function (e) {
-      var _this$props3 = _this.props,
-        onCaretPositionChange = _this$props3.onCaretPositionChange,
-        onSelect = _this$props3.onSelect;
-      if (onCaretPositionChange) onCaretPositionChange(_this.getCaretPosition());
+    _defineProperty__default["default"](this, "_selectHandler", e => {
+      const {
+        onCaretPositionChange,
+        onSelect
+      } = this.props;
+      if (onCaretPositionChange) onCaretPositionChange(this.getCaretPosition());
       if (onSelect) {
         e.persist();
         onSelect(e);
       }
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onClickAndBlurHandler", function (e) {
-      var _this$props4 = _this.props,
-        closeOnClickOutside = _this$props4.closeOnClickOutside,
-        onBlur = _this$props4.onBlur;
+    _defineProperty__default["default"](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) || focusedAwayInSafari) {
+      const focusedAwayInSafari = isSafari() && e.type === 'blur';
+      if (this.dropdownRef && el instanceof Node && this.dropdownRef.contains(el) || focusedAwayInSafari) {
         return;
       }
-      if (closeOnClickOutside) _this._closeAutocomplete();
+      if (closeOnClickOutside) this._closeAutocomplete();
       if (onBlur) {
         e.persist();
         onBlur(e);
       }
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onScrollHandler", function () {
-      return _this._closeAutocomplete();
-    });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_dropdownScroll", function (item) {
-      var scrollToItem = _this.props.scrollToItem;
+    _defineProperty__default["default"](this, "_onScrollHandler", () => this._closeAutocomplete());
+    _defineProperty__default["default"](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);
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getTriggerProps", function () {
-      var _this$props5 = _this.props,
-        showCommandsList = _this$props5.showCommandsList,
-        showMentionsList = _this$props5.showMentionsList,
-        trigger = _this$props5.trigger;
-      var _this$state6 = _this.state,
-        component = _this$state6.component,
-        currentTrigger = _this$state6.currentTrigger,
-        selectionEnd = _this$state6.selectionEnd,
-        value = _this$state6.value;
-      var selectedItem = _this._getItemOnSelect();
-      var suggestionData = _this._getSuggestions();
-      var textToReplace = _this._getTextToReplace();
-      var triggerProps = {
-        component: component,
-        currentTrigger: currentTrigger,
+    _defineProperty__default["default"](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;
-        var getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
-        getCommands === null || getCommands === void 0 ? void 0 : getCommands('', showCommandsList ? '/' : '@', function (data) {
+        let currentCommands;
+        const getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
+        getCommands === null || getCommands === void 0 ? void 0 : 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;
       }
       return triggerProps;
     });
-    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "setDropdownRef", function (element) {
-      _this.dropdownRef = element;
+    _defineProperty__default["default"](this, "setDropdownRef", element => {
+      this.dropdownRef = element;
     });
-    var _this$props6 = _this.props,
-      loadingComponent = _this$props6.loadingComponent,
-      _trigger = _this$props6.trigger,
-      _value = _this$props6.value;
+    const {
+      loadingComponent,
+      trigger: _trigger,
+      value: _value
+    } = this.props;
 
     // TODO: it would be better to have the parent control state...
     // if (value) this.state.value = value;
@@ -31305,7 +31283,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     if (!_trigger) {
       throw new Error('RTA: trigger is not defined');
     }
-    _this.state = {
+    this.state = {
       actualToken: '',
       component: null,
       currentTrigger: null,
@@ -31317,140 +31295,148 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       top: null,
       value: _value || ''
     };
-    return _this;
   }
 
   // FIXME: unused method
-  _createClass__default["default"](ReactTextareaAutocomplete, [{
-    key: "renderSuggestionListContainer",
-    value: function renderSuggestionListContainer() {
-      var _this$props7 = this.props,
-        disableMentions = _this$props7.disableMentions,
-        dropdownClassName = _this$props7.dropdownClassName,
-        dropdownStyle = _this$props7.dropdownStyle,
-        itemClassName = _this$props7.itemClassName,
-        itemStyle = _this$props7.itemStyle,
-        listClassName = _this$props7.listClassName,
-        SuggestionItem = _this$props7.SuggestionItem,
-        _this$props7$Suggesti = _this$props7.SuggestionList,
-        SuggestionList = _this$props7$Suggesti === void 0 ? List : _this$props7$Suggesti;
-      var triggerProps = this.getTriggerProps();
-      if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
-          ref: this.setDropdownRef,
-          style: dropdownStyle
-        }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends__default["default"]({
-          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)));
-      }
+
+  // FIXME: unused method
+
+  /**
+   * isComposing prevents double submissions in Korean and other languages.
+   * starting point for a read:
+   * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
+   * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
+   * @param event React.KeyboardEvent
+   */
+
+  /**
+   * setup to emulate the UNSAFE_componentWillReceiveProps
+   */
+  static getDerivedStateFromProps(props, state) {
+    if (props.value !== state.propsValue || !state.value) {
+      return {
+        propsValue: props.value,
+        value: props.value
+      };
+    } else {
       return null;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props8 = this.props,
-        className = _this$props8.className,
-        containerClassName = _this$props8.containerClassName,
-        containerStyle = _this$props8.containerStyle,
-        style = _this$props8.style;
-      var _ref2 = this.props.additionalTextareaProps || {},
-        _onBlur = _ref2.onBlur,
-        _onChange = _ref2.onChange,
-        _onClick = _ref2.onClick,
-        _onFocus = _ref2.onFocus,
-        _onKeyDown = _ref2.onKeyDown,
-        _onScroll = _ref2.onScroll,
-        _onSelect = _ref2.onSelect,
-        restAdditionalTextareaProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
-      var maxRows = this.props.maxRows;
-      var _this$state7 = this.state,
-        dataLoading = _this$state7.dataLoading,
-        value = _this$state7.value;
-      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
+  }
+  /**
+   * Close autocomplete, also clean up trigger (to avoid slow promises)
+   */
 
+  // The textarea itself is outside the auto-select dropdown.
+
+  renderSuggestionListContainer() {
+    const {
+      disableMentions,
+      dropdownClassName,
+      dropdownStyle,
+      itemClassName,
+      itemStyle,
+      listClassName,
+      SuggestionItem,
+      SuggestionList = List
+    } = this.props;
+    const triggerProps = this.getTriggerProps();
+    if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: clsx('rta', containerClassName, {
-          'rta--loading': dataLoading
-        }),
-        style: containerStyle
-      }, this.renderSuggestionListContainer(), /*#__PURE__*/React__default["default"].createElement(Textarea__default["default"], _extends__default["default"]({
-        "data-testid": "message-input"
-      }, this._cleanUpProps(), {
-        className: clsx('rta__textarea', className),
-        maxRows: maxRows,
-        onBlur: function onBlur(e) {
-          _this2._onClickAndBlurHandler(e);
-          _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
-        },
-        onChange: function onChange(e) {
-          _this2._changeHandler(e);
-          _onChange === null || _onChange === void 0 ? void 0 : _onChange(e);
-        },
-        onClick: function onClick(e) {
-          _this2._onClickAndBlurHandler(e);
-          _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
-        },
-        onFocus: function onFocus(e) {
-          var _this2$props$onFocus, _this2$props;
-          (_this2$props$onFocus = (_this2$props = _this2.props).onFocus) === null || _this2$props$onFocus === void 0 ? void 0 : _this2$props$onFocus.call(_this2$props, e);
-          _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
-        },
-        onKeyDown: function onKeyDown(e) {
-          _this2._handleKeyDown(e);
-          _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-        },
-        onScroll: function onScroll(e) {
-          _this2._onScrollHandler(e);
-          _onScroll === null || _onScroll === void 0 ? void 0 : _onScroll(e);
-        },
-        onSelect: function onSelect(e) {
-          _this2._selectHandler(e);
-          _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(e);
-        },
-        ref: function ref(_ref3) {
-          var _this2$props2;
-          (_this2$props2 = _this2.props) === null || _this2$props2 === void 0 ? void 0 : _this2$props2.innerRef(_ref3);
-          _this2.textareaRef = _ref3;
-        },
-        style: style,
-        value: value
-      }, restAdditionalTextareaProps, {
-        defaultValue: undefined
-      })));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value:
-    /**
-     * setup to emulate the UNSAFE_componentWillReceiveProps
-     */
-    function getDerivedStateFromProps(props, state) {
-      if (props.value !== state.propsValue || !state.value) {
-        return {
-          propsValue: props.value,
-          value: props.value
-        };
-      } else {
-        return null;
-      }
+        className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
+        ref: this.setDropdownRef,
+        style: dropdownStyle
+      }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends__default["default"]({
+        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)));
     }
-    /**
-     * Close autocomplete, also clean up trigger (to avoid slow promises)
-     */
-  }]);
-  return ReactTextareaAutocomplete;
-}(React__default["default"].Component);
+    return null;
+  }
+  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 /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx('rta', containerClassName, {
+        'rta--loading': dataLoading
+      }),
+      style: containerStyle
+    }, this.renderSuggestionListContainer(), /*#__PURE__*/React__default["default"].createElement(Textarea__default["default"], _extends__default["default"]({
+      "data-testid": "message-input"
+    }, this._cleanUpProps(), {
+      className: clsx('rta__textarea', className),
+      maxRows: maxRows,
+      onBlur: e => {
+        this._onClickAndBlurHandler(e);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      },
+      onChange: e => {
+        this._changeHandler(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+      },
+      onClick: e => {
+        this._onClickAndBlurHandler(e);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+      },
+      onFocus: e => {
+        var _this$props$onFocus, _this$props;
+        (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+      },
+      onKeyDown: e => {
+        this._handleKeyDown(e);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+      },
+      onScroll: e => {
+        this._onScrollHandler(e);
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+      },
+      onSelect: e => {
+        this._selectHandler(e);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(e);
+      },
+      ref: ref => {
+        var _this$props2;
+        (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.innerRef(ref);
+        this.textareaRef = ref;
+      },
+      style: style,
+      value: value
+    }, restAdditionalTextareaProps, {
+      defaultValue: undefined
+    })));
+  }
+}
 _defineProperty__default["default"](ReactTextareaAutocomplete, "defaultProps", {
   closeOnClickOutside: true,
   maxRows: 10,
@@ -32574,25 +32560,29 @@ var AttachmentPreviewList = function () {
 var ImagePreviewItem = function (_a) {
     var _b;
     var id = _a.id;
-    var _c = icons.useMessageInputContext('ImagePreviewItem'), imageUploads = _c.imageUploads, removeImage = _c.removeImage, uploadImage = _c.uploadImage;
+    var _c = icons.useComponentContext('ImagePreviewItem').BaseImage, BaseImage$1 = _c === void 0 ? BaseImage : _c;
+    var _d = icons.useMessageInputContext('ImagePreviewItem'), imageUploads = _d.imageUploads, removeImage = _d.removeImage, uploadImage = _d.uploadImage;
+    var _e = React.useState(false), previewError = _e[0], setPreviewError = _e[1];
     var handleRemove = React.useCallback(function (e) {
         e.stopPropagation();
         removeImage(id);
     }, [removeImage, id]);
     var handleRetry = React.useCallback(function () { return uploadImage(id); }, [uploadImage, id]);
+    var handleLoadError = React.useCallback(function () { return setPreviewError(true); }, []);
     var image = imageUploads[id];
-    var state = useFileState(image);
     // do not display scraped attachments
     if (!image || image.og_scrape_url)
         return null;
-    return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image', "data-testid": 'attachment-preview-image' },
-        React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
+    return (React__default["default"].createElement("div", { className: clsx('str-chat__attachment-preview-image', {
+            'str-chat__attachment-preview-image--error': previewError,
+        }), "data-testid": 'attachment-preview-image' },
+        React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: image.state === 'uploading', onClick: handleRemove },
             React__default["default"].createElement(icons.CloseIcon, null)),
-        state.failed && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
+        image.state === 'failed' && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
             React__default["default"].createElement(icons.RetryIcon, null))),
-        state.uploading && (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
+        image.state === 'uploading' && (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
             React__default["default"].createElement(icons.LoadingIndicatorIcon, { size: 17 }))),
-        (image.previewUri || image.url) && (React__default["default"].createElement("img", { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url }))));
+        (image.previewUri || image.url) && (React__default["default"].createElement(BaseImage$1, { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url, title: image.file.name }))));
 };
 var FilePreviewItem = function (_a) {
     var id = _a.id;
@@ -35834,6 +35824,7 @@ var ChannelInner = function (props) {
             AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
             AutocompleteSuggestionList: props.AutocompleteSuggestionList,
             Avatar: props.Avatar,
+            BaseImage: props.BaseImage,
             CooldownTimer: props.CooldownTimer,
             DateSeparator: props.DateSeparator,
             EditMessageInput: props.EditMessageInput,
@@ -36360,7 +36351,8 @@ var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
 var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
 var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs) {
     if (recoveryThrottleIntervalMs === void 0) { recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS; }
-    var _a = icons.useChatContext('usePaginatedChannels'), channels = _a.channels, _b = _a.channelsQueryState, error = _b.error, setError = _b.setError, setQueryInProgress = _b.setQueryInProgress, setChannels = _a.setChannels;
+    var _a = icons.useChatContext('usePaginatedChannels').channelsQueryState, error = _a.error, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
+    var _b = React.useState([]), channels = _b[0], setChannels = _b[1];
     var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
     var lastRecoveryTimestamp = React.useRef();
     var recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
@@ -36440,7 +36432,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     React.useEffect(function () {
         queryChannels('reload');
     }, [filterString, sortString]);
-    // FIXME: state refactor (breaking change) is needed - do not forward `channels` and `setChannel`
     return {
         channels: channels,
         hasNextPage: hasNextPage,
@@ -37182,7 +37173,7 @@ var UnMemoizedChannelList = function (props) {
         'str-chat-channel-list--open': navOpen,
     });
     var showChannelList = !searchActive || (additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.popupResults);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(icons.ChannelListContextProvider, { value: { channels: channels, setChannels: setChannels } },
         React__default["default"].createElement("div", { className: className, ref: channelListRef },
             showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, icons.__assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
             showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
@@ -37195,7 +37186,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.0.0';
+var version = '11.1.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -37205,11 +37196,10 @@ var useChat = function (_a) {
         tDateTimeParser: icons.defaultDateTimeParser,
         userLanguage: 'en',
     }), translators = _e[0], setTranslators = _e[1];
-    var _f = React.useState([]), channels = _f[0], setChannels = _f[1];
-    var _g = React.useState(), channel = _g[0], setChannel = _g[1];
-    var _h = React.useState([]), mutes = _h[0], setMutes = _h[1];
-    var _j = React.useState(initialNavOpen), navOpen = _j[0], setNavOpen = _j[1];
-    var _k = React.useState({}), latestMessageDatesByChannels = _k[0], setLatestMessageDatesByChannels = _k[1];
+    var _f = React.useState(), channel = _f[0], setChannel = _f[1];
+    var _g = React.useState([]), mutes = _g[0], setMutes = _g[1];
+    var _h = React.useState(initialNavOpen), navOpen = _h[0], setNavOpen = _h[1];
+    var _j = React.useState({}), latestMessageDatesByChannels = _j[0], setLatestMessageDatesByChannels = _j[1];
     var clientMutes = ((_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes) || [];
     var closeMobileNav = function () { return setNavOpen(false); };
     var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
@@ -37280,7 +37270,6 @@ var useChat = function (_a) {
     }, [(_c = client.user) === null || _c === void 0 ? void 0 : _c.id]);
     return {
         channel: channel,
-        channels: channels,
         closeMobileNav: closeMobileNav,
         getAppSettings: getAppSettings,
         latestMessageDatesByChannels: latestMessageDatesByChannels,
@@ -37288,14 +37277,13 @@ var useChat = function (_a) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         translators: translators,
     };
 };
 
 var useCreateChatContext = function (value) {
     var _a;
-    var channel = value.channel, channels = value.channels, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, setChannels = value.setChannels, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
     var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
     var channelsQueryError = channelsQueryState.error;
     var channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -37303,7 +37291,6 @@ var useCreateChatContext = function (value) {
     var mutedUsersLength = mutes.length;
     var chatContext = React.useMemo(function () { return ({
         channel: channel,
-        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -37314,7 +37301,6 @@ var useCreateChatContext = function (value) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -37322,12 +37308,10 @@ var useCreateChatContext = function (value) {
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
-        channels,
         clientValues,
         getAppSettings,
         mutedUsersLength,
         navOpen,
-        setChannels,
     ]);
     return chatContext;
 };
@@ -37386,7 +37370,7 @@ var useCustomStyles = function (customStyles) {
  */
 var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
-    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, channels = _e.channels, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, setChannels = _e.setChannels, translators = _e.translators;
+    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     var channelsQueryState = useChannelsQueryState();
     var themeVersion = typeof window !== 'undefined'
         ? (window
@@ -37397,7 +37381,6 @@ var Chat = function (props) {
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
-        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -37408,7 +37391,6 @@ var Chat = function (props) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -38774,11 +38756,14 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
     };
 }
 
-var STATUSES_EXCLUDED_FROM_PREPEND = ['sending', 'failed'];
+var STATUSES_EXCLUDED_FROM_PREPEND = {
+    failed: true,
+    sending: true,
+};
 function usePrependedMessagesCount(messages, hasDateSeparator) {
     var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    var firstMessageId = React.useRef();
-    var earliestMessageId = React.useRef();
+    var firstMessageOnFirstLoadedPage = React.useRef();
+    var previousFirstMessageOnFirstLoadedPage = React.useRef();
     var previousNumItemsPrepended = React.useRef(0);
     var numItemsPrepended = React.useMemo(function () {
         var _a, _b;
@@ -38786,47 +38771,43 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
             previousNumItemsPrepended.current = 0;
             return 0;
         }
-        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
-        // if no new messages were prepended, return early (same amount as before)
-        if (currentFirstMessageId === earliestMessageId.current) {
+        var currentFirstMessage = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex];
+        var noNewMessages = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.id) === ((_a = previousFirstMessageOnFirstLoadedPage.current) === null || _a === void 0 ? void 0 : _a.id);
+        // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)
+        // Optimistic UI update, when sending messages, can lead to a situation, when
+        // the order of the messages changes for a moment. This can happen, when a user
+        // sends multiple messages withing few milliseconds. E.g. we send a message A
+        // then message B. At first we have message array with both messages of status "sending"
+        // then response for message A is received with a new - later - created_at timestamp
+        // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageOnFirstLoadedPage.current
+        // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
+        // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
+        // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
+        // not considered as prepended messages.
+        var firstMsgMovedAfterMessagesInExcludedStatus = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.status) && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status];
+        if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
             return previousNumItemsPrepended.current;
         }
-        if (!firstMessageId.current) {
-            firstMessageId.current = currentFirstMessageId;
+        if (!firstMessageOnFirstLoadedPage.current) {
+            firstMessageOnFirstLoadedPage.current = currentFirstMessage;
         }
-        earliestMessageId.current = currentFirstMessageId;
+        previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;
         // if new messages were prepended, find out how many
         // start with this number because there cannot be fewer prepended items than before
-        var adjustPrependedMessageCount = 0;
-        for (var i = previousNumItemsPrepended.current; i < messages.length; i += 1) {
-            // Optimistic UI update, when sending messages, can lead to a situation, when
-            // the order of the messages changes for a moment. This can happen, when a user
-            // sends multiple messages withing few milliseconds. E.g. we send a message A
-            // then message B. At first we have message array with both messages of status "sending"
-            // then response for message A is received with a new - later - created_at timestamp
-            // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageId.current
-            // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
-            // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
-            // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
-            // not considered as prepended messages.
-            if (((_b = messages[i]) === null || _b === void 0 ? void 0 : _b.status) &&
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                STATUSES_EXCLUDED_FROM_PREPEND.includes(messages[i].status) &&
-                messages[i].id !== firstMessageId.current) {
-                adjustPrependedMessageCount++;
-            }
-            if (messages[i].id === firstMessageId.current) {
-                previousNumItemsPrepended.current = i - adjustPrependedMessageCount;
-                return previousNumItemsPrepended.current;
+        for (var prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) {
+            var messageIsFirstOnFirstLoadedPage = messages[prependedMessageCount].id === ((_b = firstMessageOnFirstLoadedPage.current) === null || _b === void 0 ? void 0 : _b.id);
+            if (messageIsFirstOnFirstLoadedPage) {
+                previousNumItemsPrepended.current = prependedMessageCount;
+                return prependedMessageCount;
             }
         }
         // if no match has found, we have jumped - reset the prepended item count.
-        firstMessageId.current = currentFirstMessageId;
+        firstMessageOnFirstLoadedPage.current = currentFirstMessage;
         previousNumItemsPrepended.current = 0;
         return 0;
         // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
         // that's why the second dependency is necessary
-    }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
+    }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return numItemsPrepended;
 }
 
@@ -39288,6 +39269,8 @@ var generateRandomId = icons.nanoid;
 
 exports.ChannelActionContext = icons.ChannelActionContext;
 exports.ChannelActionProvider = icons.ChannelActionProvider;
+exports.ChannelListContext = icons.ChannelListContext;
+exports.ChannelListContextProvider = icons.ChannelListContextProvider;
 exports.ChannelStateContext = icons.ChannelStateContext;
 exports.ChannelStateProvider = icons.ChannelStateProvider;
 exports.ChatContext = icons.ChatContext;
@@ -39340,6 +39323,7 @@ exports.ptTranslations = icons.ptTranslations;
 exports.ruTranslations = icons.ruTranslations;
 exports.trTranslations = icons.trTranslations;
 exports.useChannelActionContext = icons.useChannelActionContext;
+exports.useChannelListContext = icons.useChannelListContext;
 exports.useChannelStateContext = icons.useChannelStateContext;
 exports.useChatContext = icons.useChatContext;
 exports.useComponentContext = icons.useComponentContext;
@@ -39366,6 +39350,7 @@ exports.Audio = Audio;
 exports.AudioContainer = AudioContainer;
 exports.AutoCompleteTextarea = ReactTextareaAutocomplete;
 exports.Avatar = Avatar;
+exports.BaseImage = BaseImage;
 exports.Card = Card;
 exports.CardAudio = CardAudio;
 exports.CardContainer = CardContainer;