stream-chat-react 11.0.0-rc.2 → 11.0.0-rc.4

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icons = require('./icons-0801b1e9.js');
+var icons = require('./icons-5ee8c22b.js');
 var React = require('react');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
@@ -111,11 +111,12 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 var UnMemoizedAttachmentActions = function (props) {
     var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
+    var t = icons.useTranslationContext('UnMemoizedAttachmentActions').t;
     var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
     return (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions' },
         React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions-form' },
             React__default["default"].createElement("span", null, text),
-            actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
+            actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text ? t(action.text) : null)); }))));
 };
 /**
  * A component for rendering the actions you can take on an attachment.
@@ -2796,6 +2797,7 @@ function noop() {}
 
 var ImageDropzone = function (_a) {
     var _b = _a.accept, acceptedFiles = _b === void 0 ? [] : _b, children = _a.children, disabled = _a.disabled, handleFiles = _a.handleFiles, maxNumberOfFiles = _a.maxNumberOfFiles, multiple = _a.multiple;
+    var t = icons.useTranslationContext('ImageDropzone').t;
     var handleDrop = React.useCallback(function (accepted) {
         if (!handleFiles) {
             return;
@@ -2830,7 +2832,7 @@ var ImageDropzone = function (_a) {
             React__default["default"].createElement("div", { className: 'rfu-dropzone__inner' },
                 React__default["default"].createElement("svg", { height: '41', viewBox: '0 0 41 41', width: '41', xmlns: 'http://www.w3.org/2000/svg' },
                     React__default["default"].createElement("path", { d: 'M40.517 28.002V3.997c0-2.197-1.808-3.992-4.005-3.992H12.507a4.004 4.004 0 0 0-3.992 3.993v24.004a4.004 4.004 0 0 0 3.992 3.993h24.005c2.197 0 4.005-1.795 4.005-3.993zm-22.002-7.997l4.062 5.42 5.937-7.423 7.998 10H12.507l6.008-7.997zM.517 8.003V36c0 2.198 1.795 4.005 3.993 4.005h27.997V36H4.51V8.002H.517z', fill: '#000', fillRule: 'nonzero' })),
-                React__default["default"].createElement("p", null, "Drag your files here to add to your post"))),
+                React__default["default"].createElement("p", null, t('Drag your files here to add to your post')))),
         children));
 };
 
@@ -3334,7 +3336,7 @@ var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(pro
     style: style
   }, /*#__PURE__*/React__default["default"].createElement("a", {
     href: "",
-    onClick: onClickHandler,
+    onClick: handleClick,
     onFocus: handleSelect,
     onMouseEnter: handleSelect,
     ref: innerRef
@@ -25319,11 +25321,11 @@ var List = function List(_ref) {
   var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
   var _useState = React.useState(undefined),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    selectedItem = _useState2[0],
-    setSelectedItem = _useState2[1];
+    selectedItemIndex = _useState2[0],
+    setSelectedItemIndex = _useState2[1];
   var itemsRef = [];
   var isSelected = function isSelected(item) {
-    return selectedItem === values.findIndex(function (value) {
+    return selectedItemIndex === values.findIndex(function (value) {
       return getId(value) === getId(item);
     });
   };
@@ -25354,32 +25356,30 @@ var List = function List(_ref) {
   }, [modifyText, findItemIndex]);
   var selectItem = React.useCallback(function (item) {
     var index = findItemIndex(item);
-    setSelectedItem(index);
+    setSelectedItemIndex(index);
   }, [findItemIndex]);
   var handleKeyDown = React.useCallback(function (event) {
     if (event.key === 'ArrowUp') {
-      setSelectedItem(function (prevSelected) {
+      setSelectedItemIndex(function (prevSelected) {
         if (prevSelected === undefined) return 0;
-        var newID = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
-        dropdownScroll(itemsRef[newID]);
-        return newID;
+        var newIndex = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+        dropdownScroll(itemsRef[newIndex]);
+        return newIndex;
       });
     }
     if (event.key === 'ArrowDown') {
-      setSelectedItem(function (prevSelected) {
+      setSelectedItemIndex(function (prevSelected) {
         if (prevSelected === undefined) return 0;
-        var newID = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
-        dropdownScroll(itemsRef[newID]);
-        return newID;
+        var newIndex = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+        dropdownScroll(itemsRef[newIndex]);
+        return newIndex;
       });
     }
-    if ((event.key === 'Enter' || event.key === 'Tab') && selectedItem !== undefined) {
-      handleClick(event);
+    if ((event.key === 'Enter' || event.key === 'Tab') && selectedItemIndex !== undefined) {
+      handleClick(event, values[selectedItemIndex]);
     }
     return null;
-  }, [selectedItem, values] // eslint-disable-line
-  );
-
+  }, [selectedItemIndex, values]);
   React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown, false);
     return function () {
@@ -27403,6 +27403,7 @@ var CooldownTimer = function (_a) {
 var useCommandTrigger = function () {
     var themeVersion = icons.useChatContext('useCommandTrigger').themeVersion;
     var channelConfig = icons.useChannelStateContext('useCommandTrigger').channelConfig;
+    var t = icons.useTranslationContext('useCommandTrigger').t;
     var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
     return {
         component: CommandItem,
@@ -27411,7 +27412,7 @@ var useCommandTrigger = function () {
                 return [];
             }
             var selectedCommands = commands.filter(function (command) { var _a; return ((_a = command.name) === null || _a === void 0 ? void 0 : _a.indexOf(query)) !== -1; });
-            // sort alphabetically unless the you're matching the first char
+            // sort alphabetically unless you're matching the first char
             selectedCommands.sort(function (a, b) {
                 var _a, _b;
                 var nameA = (_a = a.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
@@ -27435,8 +27436,23 @@ var useCommandTrigger = function () {
             });
             var result = selectedCommands.slice(0, themeVersion === '2' ? 5 : 10);
             if (onReady)
-                onReady(result.filter(function (result) {
+                onReady(result
+                    .filter(function (result) {
                     return result.name !== undefined;
+                })
+                    .map(function (commandData) {
+                    var translatedCommandData = {
+                        name: commandData.name,
+                    };
+                    if (commandData.args)
+                        translatedCommandData.args = t("".concat(commandData.name, "-command-args"), {
+                            defaultValue: commandData.args,
+                        });
+                    if (commandData.description)
+                        translatedCommandData.description = t("".concat(commandData.name, "-command-description"), {
+                            defaultValue: commandData.description,
+                        });
+                    return translatedCommandData;
                 }), query);
             return result;
         },
@@ -29993,7 +30009,7 @@ var UnMemoizedChannel = function (props) {
 };
 var ChannelInner = function (props) {
     var _a;
-    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _d === void 0 ? LoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannel : _e, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doDeleteMessageRequest = props.doDeleteMessageRequest, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _d === void 0 ? LoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannel : _e, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
     var _h = icons.useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme;
     var t = icons.useTranslationContext('Channel').t;
     var _j = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _j.channelClass, chatClass = _j.chatClass, chatContainerClass = _j.chatContainerClass, windowsEmojiClass = _j.windowsEmojiClass;
@@ -30330,6 +30346,28 @@ var ChannelInner = function (props) {
             }
         });
     }); };
+    var deleteMessage = React.useCallback(function (message) { return icons.__awaiter(void 0, void 0, void 0, function () {
+        var deletedMessage, result;
+        return icons.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(message === null || message === void 0 ? void 0 : message.id)) {
+                        throw new Error('Cannot delete a message - missing message ID.');
+                    }
+                    if (!doDeleteMessageRequest) return [3 /*break*/, 2];
+                    return [4 /*yield*/, doDeleteMessageRequest(message)];
+                case 1:
+                    deletedMessage = _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, client.deleteMessage(message.id)];
+                case 3:
+                    result = _a.sent();
+                    deletedMessage = result.message;
+                    _a.label = 4;
+                case 4: return [2 /*return*/, deletedMessage];
+            }
+        });
+    }); }, [client, doDeleteMessageRequest]);
     var updateMessage = function (updatedMessage) {
         // add the message to the local channel state
         channel.state.addMessageSorted(updatedMessage, true);
@@ -30513,6 +30551,7 @@ var ChannelInner = function (props) {
     var channelActionContextValue = React.useMemo(function () { return ({
         addNotification: addNotification,
         closeThread: closeThread,
+        deleteMessage: deleteMessage,
         dispatch: dispatch,
         editMessage: editMessage,
         jumpToLatestMessage: jumpToLatestMessage,
@@ -30531,6 +30570,7 @@ var ChannelInner = function (props) {
         updateMessage: updateMessage,
     }); }, [
         channel.cid,
+        deleteMessage,
         enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.findURLFn,
         enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.onLinkPreviewDismissed,
         loadMore,
@@ -31074,8 +31114,7 @@ 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').channelsQueryState, error = _a.error, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
-    var _b = React.useState([]), channels = _b[0], setChannels = _b[1];
+    var _a = icons.useChatContext('usePaginatedChannels'), channels = _a.channels, _b = _a.channelsQueryState, error = _b.error, setError = _b.setError, setQueryInProgress = _b.setQueryInProgress, setChannels = _a.setChannels;
     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
@@ -31155,6 +31194,7 @@ 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,
@@ -31756,13 +31796,15 @@ var deprecationAndReplacementWarning = function (pairs, component) {
 };
 
 var UnMemoizedLoadMoreButton = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? 'Load more' : _b, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+    var children = _a.children, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+    var t = icons.useTranslationContext('UnMemoizedLoadMoreButton').t;
+    var childrenOrDefaultString = children !== null && children !== void 0 ? children : t('Load more');
     var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.useEffect(function () {
         deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
     }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
-        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : children)));
+        React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : childrenOrDefaultString)));
 };
 var LoadMoreButton = React__default["default"].memo(UnMemoizedLoadMoreButton);
 
@@ -31897,7 +31939,8 @@ var UnMemoizedChannelList = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         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 === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
+            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
+                    ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress), LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
                 : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
 };
@@ -31906,7 +31949,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.0.0-rc.2';
+var version = '11.0.0-rc.4';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -31916,10 +31959,11 @@ var useChat = function (_a) {
         tDateTimeParser: icons.defaultDateTimeParser,
         userLanguage: 'en',
     }), translators = _e[0], setTranslators = _e[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 _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 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); };
@@ -31990,6 +32034,7 @@ 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,
@@ -31997,13 +32042,14 @@ var useChat = function (_a) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         translators: translators,
     };
 };
 
 var useCreateChatContext = function (value) {
     var _a;
-    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 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 channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
     var channelsQueryError = channelsQueryState.error;
     var channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -32011,6 +32057,7 @@ var useCreateChatContext = function (value) {
     var mutedUsersLength = mutes.length;
     var chatContext = React.useMemo(function () { return ({
         channel: channel,
+        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -32021,6 +32068,7 @@ var useCreateChatContext = function (value) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -32028,17 +32076,19 @@ var useCreateChatContext = function (value) {
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
+        channels,
         clientValues,
         getAppSettings,
         mutedUsersLength,
         navOpen,
+        setChannels,
     ]);
     return chatContext;
 };
 
 var useChannelsQueryState = function () {
     var _a = React.useState(null), error = _a[0], setError = _a[1];
-    var _b = React.useState(null), queryInProgress = _b[0], setQueryInProgress = _b[1];
+    var _b = React.useState('uninitialized'), queryInProgress = _b[0], setQueryInProgress = _b[1];
     return {
         error: error,
         queryInProgress: queryInProgress,
@@ -32090,7 +32140,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, 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 _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 channelsQueryState = useChannelsQueryState();
     var themeVersion = typeof window !== 'undefined'
         ? (window
@@ -32101,6 +32151,7 @@ var Chat = function (props) {
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
+        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -32111,6 +32162,7 @@ var Chat = function (props) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
+        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -32308,11 +32360,11 @@ function useActionHandler(message) {
 var useDeleteHandler = function (message, notifications) {
     if (notifications === void 0) { notifications = {}; }
     var getErrorNotification = notifications.getErrorNotification, notify = notifications.notify;
-    var updateMessage = icons.useChannelActionContext('useDeleteHandler').updateMessage;
+    var _a = icons.useChannelActionContext('useDeleteHandler'), deleteMessage = _a.deleteMessage, updateMessage = _a.updateMessage;
     var client = icons.useChatContext('useDeleteHandler').client;
     var t = icons.useTranslationContext('useDeleteHandler').t;
     return function (event) { return icons.__awaiter(void 0, void 0, void 0, function () {
-        var data, errorMessage;
+        var deletedMessage, errorMessage;
         return icons.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -32323,10 +32375,10 @@ var useDeleteHandler = function (message, notifications) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, client.deleteMessage(message.id)];
+                    return [4 /*yield*/, deleteMessage(message)];
                 case 2:
-                    data = _a.sent();
-                    updateMessage(data.message);
+                    deletedMessage = _a.sent();
+                    updateMessage(deletedMessage);
                     return [3 /*break*/, 4];
                 case 3:
                     _a.sent();

package/dist/scss/MessageInput.scss

@@ -390,3 +390,9 @@
     top: 6px;
   }
 }
+
+.str-chat__message-textarea-angular-host--autocomplete-hidden {
+  mention-list  {
+    display: none;
+  }
+}

package/dist/scss/_base.scss

@@ -105,47 +105,6 @@
   }
 }
 
-/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
-
-$emoji-flag-unicode-range: U+1F1E6-1F1FF;
-
-/* png based woff for most browsers */
-@font-face {
-  font-family: ReplaceFlagEmojiPNG;
-  src: url('#{$assetsPath}/NotoColorEmoji-flags.woff2') format('woff2');
-  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
-  unicode-range: $emoji-flag-unicode-range;
-}
-
-/* svg based for firefox */
-@font-face {
-  font-family: ReplaceFlagEmojiSVG;
-  src: url('#{$assetsPath}/EmojiOneColor.woff2') format('woff2');
-  unicode-range: $emoji-flag-unicode-range;
-}
-
-.str-chat--windows-flags {
-  .str-chat__textarea__textarea,
-  .str-chat__message-text-inner *,
-  .str-chat__emoji-item--entity,
-  .emoji-mart-emoji-native * {
-    font-family: ReplaceFlagEmojiPNG, var(--second-font), sans-serif;
-    font-display: swap;
-  }
-}
-
-@-moz-document url-prefix('') {
-  .str-chat--windows-flags {
-    .str-chat__textarea__textarea,
-    .str-chat__message-text-inner *,
-    .str-chat__emoji-item--entity,
-    .emoji-mart-emoji-native * {
-      font-family: ReplaceFlagEmojiSVG, var(--second-font), sans-serif;
-      font-display: swap;
-    }
-  }
-}
-
 .str-chat-channel-list {
   float: left;
 }

package/dist/scss/index.scss

@@ -3,7 +3,6 @@
 @import './base.scss';
 
 // External dependencies (copied from libraries to rectify built file path discrepancies)
-@import '../vendor/emoji-mart.scss'; // copy from '../../node_modules/emoji-mart/css/emoji-mart.css'
 @import '../vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
 @import '../vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
 @import '../vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'

package/dist/scss/v2/Autocomplete/Autocomplete-layout.scss

@@ -63,3 +63,9 @@
     width: 100%;
   }
 }
+
+.str-chat__message-textarea-angular-host--autocomplete-hidden {
+  mention-list  {
+    display: none;
+  }
+}

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -42,7 +42,7 @@
     flex-grow: 1;
     width: 100%;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     justify-content: center;
 
     .str-chat__file-input-container {

package/dist/scss/v2/_emoji-replacement.scss

@@ -18,6 +18,7 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 }
 
 .str-chat--windows-flags {
+  // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
   .str-chat__textarea__textarea,
   .str-chat__message-text-inner *,
   .str-chat__emoji-item--entity,

package/dist/scss/v2/index.layout.scss

@@ -1,5 +1,4 @@
 @use 'base';
-@use 'emoji-replacement';
 @use 'global-layout-variables';
 
 @use 'Avatar/Avatar-layout';

package/dist/scss/v2/index.scss

@@ -2,7 +2,6 @@
 @use 'palette-variables';
 @use 'global-theme-variables';
 
-@use 'vendor/emoji-mart.scss';
 @use 'vendor/react-image-gallery';
 
 @use 'common/CTAButton/CTAButton-theme';

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.0.0-rc.2";
+export declare const version = "11.0.0-rc.4";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.0.0-rc.2';
+export var version = '11.0.0-rc.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.0.0-rc.2",
+  "version": "11.0.0-rc.4",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -24,9 +24,20 @@
       "require": "./dist/components/Emojis/index.cjs.js",
       "import": "./dist/components/Emojis/index.js",
       "default": "./dist/components/Emojis/index.js"
+    },
+    "./dist/css/*": {
+      "default": "./dist/css/*"
+    },
+    "./dist/scss/*": {
+      "default": "./dist/scss/*"
+    },
+    "./css/*": {
+      "default": "./dist/css/*"
+    },
+    "./scss/*": {
+      "default": "./dist/scss/*"
     }
   },
-  "style": "dist/css/v2/index.css",
   "sideEffects": [
     "*.css"
   ],
@@ -42,7 +53,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.13.0",
+    "@stream-io/stream-chat-css": "^4.0.0-rc.5",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-regex": "^9.2.0",
@@ -151,6 +162,7 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "codecov": "^3.8.1",
+    "conventional-changelog-conventionalcommits": "^7.0.2",
     "core-js": "^3.6.5",
     "css-loader": "^5.0.1",
     "emoji-mart": "^5.5.2",