stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

package/dist/components/Channel/channelState.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 export var channelReducer = function (state, action) {
     var _a;
@@ -22,7 +26,7 @@ export var channelReducer = function (state, action) {
         }
         case 'copyMessagesFromChannel': {
             var channel = action.channel, parentId = action.parentId;
-            return __assign(__assign({}, state), { messages: __spreadArray([], channel.state.messages), pinnedMessages: __spreadArray([], channel.state.pinnedMessages), 
+            return __assign(__assign({}, state), { messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), 
                 // copying messages from channel happens with new message - this resets the suppressAutoscroll
                 suppressAutoscroll: false, threadMessages: parentId
                     ? __assign({}, channel.state.threads)[parentId] || []
@@ -30,11 +34,11 @@ export var channelReducer = function (state, action) {
         }
         case 'copyStateFromChannelOnEvent': {
             var channel = action.channel;
-            return __assign(__assign({}, state), { members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages), pinnedMessages: __spreadArray([], channel.state.pinnedMessages), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
+            return __assign(__assign({}, state), { members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
         }
         case 'initStateFromChannel': {
             var channel = action.channel;
-            return __assign(__assign({}, state), { loading: false, members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages), pinnedMessages: __spreadArray([], channel.state.pinnedMessages), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
+            return __assign(__assign({}, state), { loading: false, members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
         }
         case 'jumpToLatestMessage': {
             return __assign(__assign({}, state), { hasMoreNewer: false, highlightedMessageId: undefined, loading: false, suppressAutoscroll: false });
@@ -59,7 +63,7 @@ export var channelReducer = function (state, action) {
         }
         case 'openThread': {
             var channel = action.channel, message = action.message;
-            return __assign(__assign({}, state), { thread: message, threadMessages: message.id ? __assign({}, channel.state.threads)[message.id] || [] : [] });
+            return __assign(__assign({}, state), { thread: message, threadMessages: message.id ? __assign({}, channel.state.threads)[message.id] || [] : [], threadSuppressAutoscroll: false });
         }
         case 'setError': {
             var error = action.error;
@@ -83,7 +87,7 @@ export var channelReducer = function (state, action) {
             return __assign(__assign({}, state), { typing: __assign({}, channel.state.typing) });
         }
         case 'startLoadingThread': {
-            return __assign(__assign({}, state), { threadLoadingMore: true });
+            return __assign(__assign({}, state), { threadLoadingMore: true, threadSuppressAutoscroll: true });
         }
         case 'updateThreadOnEvent': {
             var channel = action.channel, message = action.message;
@@ -110,6 +114,7 @@ export var initialState = {
     threadHasMore: true,
     threadLoadingMore: false,
     threadMessages: [],
+    threadSuppressAutoscroll: false,
     typing: {},
     watcherCount: 0,
     watchers: {},

package/dist/components/Channel/hooks/useChannelContainerClasses.d.ts

@@ -0,0 +1,9 @@
+import type { ChatContextValue } from '../../../context/ChatContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+export declare const useChannelContainerClasses: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customClasses, }: Pick<ChatContextValue, 'customClasses'>) => {
+    channelClass: string;
+    chatClass: string;
+    chatContainerClass: string;
+    windowsEmojiClass: string;
+};
+//# sourceMappingURL=useChannelContainerClasses.d.ts.map

package/dist/components/Channel/hooks/useChannelContainerClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelContainerClasses.d.ts","sourceRoot":"","sources":["../../../../src/components/Channel/hooks/useChannelContainerClasses.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,0BAA0B,yGAIpC,KAAK,gBAAgB,EAAE,eAAe,CAAC;;;;;CAYzC,CAAC"}

package/dist/components/Channel/hooks/useChannelContainerClasses.js

@@ -0,0 +1,14 @@
+import { useChatContext } from '../../../context/ChatContext';
+export var useChannelContainerClasses = function (_a) {
+    var _b, _c, _d;
+    var customClasses = _a.customClasses;
+    var useImageFlagEmojisOnWindows = useChatContext('Channel').useImageFlagEmojisOnWindows;
+    return {
+        channelClass: (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) !== null && _b !== void 0 ? _b : 'str-chat-channel',
+        chatClass: (_c = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _c !== void 0 ? _c : 'str-chat',
+        chatContainerClass: (_d = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chatContainer) !== null && _d !== void 0 ? _d : 'str-chat__container',
+        windowsEmojiClass: useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
+            ? 'str-chat--windows-flags'
+            : '',
+    };
+};

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -23,23 +23,23 @@ export var useCreateChannelStateContext = function (value) {
         : messages
             .map(function (_a) {
             var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, reply_count = _a.reply_count, status = _a.status, updated_at = _a.updated_at, user = _a.user;
-            return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+            return "".concat(deleted_at).concat(latest_reactions ? latest_reactions.map(function (_a) {
                 var type = _a.type;
                 return type;
-            }).join() : '') + pinned + reply_count + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            }).join() : '').concat(pinned).concat(reply_count).concat(status).concat(updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
                 ? updated_at.toISOString()
-                : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
+                : updated_at || '').concat(user === null || user === void 0 ? void 0 : user.updated_at);
         })
             .join();
     var memoizedThreadMessageData = threadMessages
         .map(function (_a) {
         var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, status = _a.status, updated_at = _a.updated_at, user = _a.user;
-        return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+        return "".concat(deleted_at).concat(latest_reactions ? latest_reactions.map(function (_a) {
             var type = _a.type;
             return type;
-        }).join() : '') + pinned + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+        }).join() : '').concat(pinned).concat(status).concat(updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
             ? updated_at.toISOString()
-            : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
+            : updated_at || '').concat(user === null || user === void 0 ? void 0 : user.updated_at);
     })
         .join();
     var channelStateContext = useMemo(function () { return ({

package/dist/components/Channel/utils.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
 import type { Dispatch, SetStateAction } from 'react';
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 export declare const makeAddNotifications: (setNotifications: Dispatch<SetStateAction<ChannelNotifications>>, notificationTimeouts: NodeJS.Timeout[]) => (text: string, type: 'success' | 'error') => void;

package/dist/components/Channel/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Channel/utils.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,eAAO,MAAM,oBAAoB,qBACb,SAAS,eAAe,oBAAoB,CAAC,CAAC,wBAC1C,OAAO,OAAO,EAAE,YAC5B,MAAM,QAAQ,SAAS,GAAG,OAAO,SAkB5C,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Channel/utils.ts"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,eAAO,MAAM,oBAAoB,qBACb,SAAS,eAAe,oBAAoB,CAAC,CAAC,wBAC1C,OAAO,OAAO,EAAE,YAC5B,MAAM,QAAQ,SAAS,GAAG,OAAO,SAkB5C,CAAC"}

package/dist/components/Channel/utils.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { nanoid } from 'nanoid';
 export var makeAddNotifications = function (setNotifications, notificationTimeouts) { return function (text, type) {
@@ -9,7 +13,7 @@ export var makeAddNotifications = function (setNotifications, notificationTimeou
         return;
     }
     var id = nanoid();
-    setNotifications(function (prevNotifications) { return __spreadArray(__spreadArray([], prevNotifications), [{ id: id, text: text, type: type }]); });
+    setNotifications(function (prevNotifications) { return __spreadArray(__spreadArray([], prevNotifications, true), [{ id: id, text: text, type: type }], false); });
     var timeout = setTimeout(function () {
         return setNotifications(function (prevNotifications) {
             return prevNotifications.filter(function (notification) { return notification.id !== id; });

package/dist/components/ChannelHeader/ChannelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelHeader/ChannelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAMjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,4LAA4L;IAC5L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0KAA0K;IAC1K,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuDF;;GAEG;AACH,eAAO,MAAM,aAAa,4FArDjB,kBAAkB,gBAqDuE,CAAC"}
+{"version":3,"file":"ChannelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelHeader/ChannelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAOjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,4LAA4L;IAC5L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0KAA0K;IAC1K,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DF;;GAEG;AACH,eAAO,MAAM,aAAa,4FA3DjB,kBAAkB,gBA2DuE,CAAC"}

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -1,27 +1,32 @@
 import React from 'react';
 import { MenuIcon as DefaultMenuIcon } from './icons';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 var UnMemoizedChannelHeader = function (props) {
-    var _a = props.Avatar, Avatar = _a === void 0 ? DefaultAvatar : _a, _b = props.MenuIcon, MenuIcon = _b === void 0 ? DefaultMenuIcon : _b, propImage = props.image, live = props.live, title = props.title;
+    var _a = props.Avatar, Avatar = _a === void 0 ? DefaultAvatar : _a, _b = props.MenuIcon, MenuIcon = _b === void 0 ? DefaultMenuIcon : _b, overrideImage = props.image, live = props.live, overrideTitle = props.title;
     var _c = useChannelStateContext('ChannelHeader'), channel = _c.channel, watcher_count = _c.watcher_count;
     var openMobileNav = useChatContext('ChannelHeader').openMobileNav;
     var t = useTranslationContext('ChannelHeader').t;
-    var _d = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, channelImage = _d.image, member_count = _d.member_count, name = _d.name, subtitle = _d.subtitle;
-    var image = propImage || channelImage;
-    return (React.createElement("div", { className: 'str-chat__header-livestream' },
+    var _d = useChannelPreviewInfo({
+        channel: channel,
+        overrideImage: overrideImage,
+        overrideTitle: overrideTitle,
+    }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
+    var _e = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, member_count = _e.member_count, subtitle = _e.subtitle;
+    return (React.createElement("div", { className: 'str-chat__header-livestream str-chat__channel-header' },
         React.createElement("button", { "aria-label": 'Menu', className: 'str-chat__header-hamburger', onClick: openMobileNav },
             React.createElement(MenuIcon, null)),
-        image && (React.createElement(Avatar, { image: image, shape: 'rounded', size: (channel === null || channel === void 0 ? void 0 : channel.type) === 'commerce' ? 60 : 40 })),
-        React.createElement("div", { className: 'str-chat__header-livestream-left' },
-            React.createElement("p", { className: 'str-chat__header-livestream-left--title' },
-                title || name,
+        React.createElement(Avatar, { image: displayImage, name: displayTitle, shape: 'rounded', size: (channel === null || channel === void 0 ? void 0 : channel.type) === 'commerce' ? 60 : 40 }),
+        React.createElement("div", { className: 'str-chat__header-livestream-left str-chat__channel-header-end' },
+            React.createElement("p", { className: 'str-chat__header-livestream-left--title str-chat__channel-header-title' },
+                displayTitle,
                 ' ',
                 live && (React.createElement("span", { className: 'str-chat__header-livestream-left--livelabel' }, t('live')))),
             subtitle && React.createElement("p", { className: 'str-chat__header-livestream-left--subtitle' }, subtitle),
-            React.createElement("p", { className: 'str-chat__header-livestream-left--members' },
+            React.createElement("p", { className: 'str-chat__header-livestream-left--members str-chat__channel-header-info' },
                 !live && !!member_count && member_count > 0 && (React.createElement(React.Fragment, null,
                     t('{{ memberCount }} members', {
                         memberCount: member_count,

package/dist/components/ChannelList/ChannelList.d.ts

@@ -2,15 +2,17 @@ import React from 'react';
 import { ChannelListMessengerProps } from './ChannelListMessenger';
 import { AvatarProps } from '../Avatar/Avatar';
 import { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
-import { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
+import { AdditionalChannelSearchProps, ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
+import { ChannelSearchParams } from '../ChannelSearch/hooks/useChannelSearch';
+import { AdditionalSearchBarProps, SearchBarProps } from '../ChannelSearch/SearchBar';
 import { ChatDownProps } from '../ChatDown/ChatDown';
 import { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
 export declare type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Additional props for underlying ChannelSearch component, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
-    additionalChannelSearchProps?: ChannelSearchProps<StreamChatGenerics>;
+    /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
+    additionalChannelSearchProps?: AdditionalChannelSearchProps<StreamChatGenerics> & AdditionalSearchBarProps & ChannelSearchParams<StreamChatGenerics>;
     /**
      * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically
      * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from
@@ -22,7 +24,9 @@ export declare type ChannelListProps<StreamChatGenerics extends DefaultStreamCha
     Avatar?: React.ComponentType<AvatarProps>;
     /** Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
     channelRenderFilterFn?: (channels: Array<Channel<StreamChatGenerics>>) => Array<Channel<StreamChatGenerics>>;
-    /** Custom UI component to display search results, defaults to and accepts same props as: [ChannelSearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/ChannelSearch.tsx) */
+    /** @deprecated: in the future only SearchBar and SearchResults props will be available
+     * Custom UI component to display search results, defaults to and accepts same props as: [ChannelSearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/ChannelSearch.tsx)
+     */
     ChannelSearch?: React.ComponentType<ChannelSearchProps<StreamChatGenerics>>;
     /** Set a channel (with this ID) to active and manually move it to the top of the list */
     customActiveChannel?: string;
@@ -62,6 +66,8 @@ export declare type ChannelListProps<StreamChatGenerics extends DefaultStreamCha
     Preview?: React.ComponentType<ChannelPreviewUIComponentProps<StreamChatGenerics>>;
     /** Function to override the default behavior when rendering channels, so this function is called instead of rendering the Preview directly */
     renderChannels?: (channels: Channel<StreamChatGenerics>[], channelPreview: (item: Channel<StreamChatGenerics>) => React.ReactNode) => React.ReactNode;
+    /** Custom UI component to display the search bar with text input */
+    SearchBar?: React.ComponentType<SearchBarProps>;
     /** If true, sends the list's currently loaded channels to the `List` component as the `loadedChannels` prop */
     sendChannelsToList?: boolean;
     /** Last channel will be set as active channel if true, defaults to true */

package/dist/components/ChannelList/ChannelList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelList.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelList/ChannelList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChannelList.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelList/ChannelList.tsx"],"names":[],"mappings":"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"}

package/dist/components/ChannelList/ChannelList.js

@@ -45,7 +45,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 import { ChannelListMessenger } from './ChannelListMessenger';
 import { useChannelDeletedListener } from './hooks/useChannelDeletedListener';
 import { useChannelHiddenListener } from './hooks/useChannelHiddenListener';
@@ -64,6 +76,9 @@ import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUp } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar/Avatar';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
+import { useChannelSearch } from '../ChannelSearch/hooks/useChannelSearch';
+import { SearchBar as DefaultSearchBar, } from '../ChannelSearch/SearchBar';
+import { SearchResults } from '../ChannelSearch/SearchResults';
 import { ChatDown } from '../ChatDown/ChatDown';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator, } from '../EmptyStateIndicator';
 import { LoadingChannels } from '../Loading/LoadingChannels';
@@ -73,10 +88,11 @@ var DEFAULT_FILTERS = {};
 var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
-    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar = _a === void 0 ? DefaultAvatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch = _b === void 0 ? DefaultChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator = _c === void 0 ? DefaultEmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
-    var _o = useChatContext('ChannelList'), channel = _o.channel, channelsQueryState = _o.channelsQueryState, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
+    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar = _a === void 0 ? DefaultAvatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch = _b === void 0 ? DefaultChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator = _c === void 0 ? DefaultEmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.SearchBar, SearchBar = _h === void 0 ? DefaultSearchBar : _h, _j = props.sendChannelsToList, sendChannelsToList = _j === void 0 ? false : _j, _k = props.setActiveChannelOnMount, setActiveChannelOnMount = _k === void 0 ? true : _k, _l = props.showChannelSearch, showChannelSearch = _l === void 0 ? false : _l, _m = props.sort, sort = _m === void 0 ? DEFAULT_SORT : _m, _o = props.watchers, watchers = _o === void 0 ? {} : _o;
+    var _p = additionalChannelSearchProps || {}, AppMenu = _p.AppMenu, ClearInputIcon = _p.ClearInputIcon, ExitSearchIcon = _p.ExitSearchIcon, MenuIcon = _p.MenuIcon, placeholder = _p.placeholder, popupResults = _p.popupResults, SearchEmpty = _p.SearchEmpty, SearchInput = _p.SearchInput, SearchInputIcon = _p.SearchInputIcon, SearchLoading = _p.SearchLoading, SearchResultItem = _p.SearchResultItem, SearchResultsHeader = _p.SearchResultsHeader, SearchResultsList = _p.SearchResultsList, channelSearchParams = __rest(_p, ["AppMenu", "ClearInputIcon", "ExitSearchIcon", "MenuIcon", "placeholder", "popupResults", "SearchEmpty", "SearchInput", "SearchInputIcon", "SearchLoading", "SearchResultItem", "SearchResultsHeader", "SearchResultsList"]);
+    var _q = useChatContext('ChannelList'), channel = _q.channel, channelsQueryState = _q.channelsQueryState, client = _q.client, closeMobileNav = _q.closeMobileNav, customClasses = _q.customClasses, _r = _q.navOpen, navOpen = _r === void 0 ? false : _r, setActiveChannel = _q.setActiveChannel, theme = _q.theme, themeVersion = _q.themeVersion, useImageFlagEmojisOnWindows = _q.useImageFlagEmojisOnWindows;
     var channelListRef = useRef(null);
-    var _q = useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
+    var _s = useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
     /**
      * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
      * If customActiveChannel prop is absent, then set the first channel in list as active channel.
@@ -121,7 +137,9 @@ var UnMemoizedChannelList = function (props) {
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
     var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var _r = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _r.channels, hasNextPage = _r.hasNextPage, loadNextPage = _r.loadNextPage, setChannels = _r.setChannels;
+    var _t = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _t.channels, hasNextPage = _t.hasNextPage, loadNextPage = _t.loadNextPage, setChannels = _t.setChannels;
+    var channelSearchController = useChannelSearch(__assign({ enabled: showChannelSearch, setChannels: setChannels }, channelSearchParams));
+    var activateSearch = channelSearchController.activateSearch, clearState = channelSearchController.clearState, exitSearch = channelSearchController.exitSearch, inputIsFocused = channelSearchController.inputIsFocused, inputRef = channelSearchController.inputRef, onSearch = channelSearchController.onSearch, query = channelSearchController.query, results = channelSearchController.results, searchBarRef = channelSearchController.searchBarRef, searching = channelSearchController.searching, selectResult = channelSearchController.selectResult;
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -162,18 +180,18 @@ var UnMemoizedChannelList = function (props) {
         };
         return React.createElement(ChannelPreview, __assign({}, previewProps));
     };
-    var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
-    var channelListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) || 'str-chat-channel-list';
-    var navigationClass = navOpen ? 'str-chat-channel-list--open' : '';
-    var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
-        ? 'str-chat--windows-flags'
-        : '';
+    var className = clsx('str-chat__channel-list', theme, (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat', (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) || 'str-chat-channel-list', {
+        'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
+        'str-chat-channel-list--open': navOpen,
+    });
+    var showSearchV2 = themeVersion === '2' && !popupResults;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: chatClass + " " + channelListClass + " " + theme + " " + navigationClass + " " + windowsEmojiClass, ref: channelListRef },
-            showChannelSearch && React.createElement(ChannelSearch, __assign({}, additionalChannelSearchProps)),
-            React.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.createElement(EmptyStateIndicator, { listType: 'channel' })) : (React.createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
+        React.createElement("div", { className: className, ref: channelListRef },
+            showChannelSearch &&
+                (showSearchV2 ? (React.createElement(SearchBar, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInputIcon: SearchInputIcon })) : (React.createElement(ChannelSearch, __assign({ placeholder: placeholder, popupResults: popupResults, SearchEmpty: SearchEmpty, SearchInput: SearchInput, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList }, channelSearchController)))),
+            query && showSearchV2 ? (React.createElement(SearchResults, { results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult })) : (React.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.createElement(EmptyStateIndicator, { listType: 'channel' })) : (React.createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
-                : loadedChannels.map(renderChannel)))))));
+                : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
 };
 /**
  * Renders a preview list of Channels, allowing you to select the Channel you want to open

package/dist/components/ChannelList/hooks/useChannelDeletedListener.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
@@ -16,10 +20,10 @@ export var useChannelDeletedListener = function (setChannels, customHandler) {
                 setChannels(function (channels) {
                     var channelIndex = channels.findIndex(function (channel) { return channel.cid === event.cid; });
                     if (channelIndex < 0)
-                        return __spreadArray([], channels);
+                        return __spreadArray([], channels, true);
                     // Remove the deleted channel from the list.s
                     channels.splice(channelIndex, 1);
-                    return __spreadArray([], channels);
+                    return __spreadArray([], channels, true);
                 });
             }
         };

package/dist/components/ChannelList/hooks/useChannelHiddenListener.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
@@ -16,10 +20,10 @@ export var useChannelHiddenListener = function (setChannels, customHandler) {
                 setChannels(function (channels) {
                     var channelIndex = channels.findIndex(function (channel) { return channel.cid === event.cid; });
                     if (channelIndex < 0)
-                        return __spreadArray([], channels);
+                        return __spreadArray([], channels, true);
                     // Remove the hidden channel from the list.s
                     channels.splice(channelIndex, 1);
-                    return __spreadArray([], channels);
+                    return __spreadArray([], channels, true);
                 });
             }
         };

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.d.ts

@@ -1,4 +1,4 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelTruncatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: (() => void) | undefined) => void;
+export declare const useChannelTruncatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: () => void) => void;
 //# sourceMappingURL=useChannelTruncatedListener.d.ts.map

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelTruncatedListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useChannelTruncatedListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,2BAA2B,wVAOjC,IAAI,oCACW,IAAI,sBAsBzB,CAAC"}
+{"version":3,"file":"useChannelTruncatedListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useChannelTruncatedListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,2BAA2B,wVAOjC,IAAI,6BACK,MAAM,IAAI,SAsBzB,CAAC"}

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
@@ -9,7 +13,7 @@ export var useChannelTruncatedListener = function (setChannels, customHandler, f
     var client = useChatContext('useChannelTruncatedListener').client;
     useEffect(function () {
         var handleEvent = function (event) {
-            setChannels(function (channels) { return __spreadArray([], channels); });
+            setChannels(function (channels) { return __spreadArray([], channels, true); });
             if (customHandler && typeof customHandler === 'function') {
                 customHandler(setChannels, event);
             }

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.d.ts

@@ -1,4 +1,4 @@
 import type { Channel, Event } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useChannelUpdatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: (() => void) | undefined) => void;
+export declare const useChannelUpdatedListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, customHandler?: ((setChannels: import("react").Dispatch<import("react").SetStateAction<Channel<StreamChatGenerics>[]>>, event: Event<StreamChatGenerics>) => void) | undefined, forceUpdate?: () => void) => void;
 //# sourceMappingURL=useChannelUpdatedListener.d.ts.map

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelUpdatedListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useChannelUpdatedListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,yBAAyB,wVAO/B,IAAI,oCACW,IAAI,sBAqCzB,CAAC"}
+{"version":3,"file":"useChannelUpdatedListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useChannelUpdatedListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,yBAAyB,wVAO/B,IAAI,6BACK,MAAM,IAAI,SAqCzB,CAAC"}

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
@@ -26,7 +30,7 @@ export var useChannelUpdatedListener = function (setChannels, customHandler, for
                 if (channelIndex > -1 && event.channel) {
                     var newChannels = channels;
                     newChannels[channelIndex].data = __assign(__assign({}, event.channel), { hidden: (_b = (_a = event.channel) === null || _a === void 0 ? void 0 : _a.hidden) !== null && _b !== void 0 ? _b : (_c = newChannels[channelIndex].data) === null || _c === void 0 ? void 0 : _c.hidden, own_capabilities: (_e = (_d = event.channel) === null || _d === void 0 ? void 0 : _d.own_capabilities) !== null && _e !== void 0 ? _e : (_f = newChannels[channelIndex].data) === null || _f === void 0 ? void 0 : _f.own_capabilities });
-                    return __spreadArray([], newChannels);
+                    return __spreadArray([], newChannels, true);
                 }
                 return channels;
             });

package/dist/components/ChannelList/hooks/useChannelVisibleListener.js

@@ -34,10 +34,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import uniqBy from 'lodash.uniqby';
@@ -59,7 +63,7 @@ export var useChannelVisibleListener = function (setChannels, customHandler) {
                         return [4 /*yield*/, getChannel(client, event.channel_type, event.channel_id)];
                     case 2:
                         channel_1 = _a.sent();
-                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels), 'cid'); });
+                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels, true), 'cid'); });
                         _a.label = 3;
                     case 3: return [2 /*return*/];
                 }

package/dist/components/ChannelList/hooks/useConnectionRecoveredListener.d.ts

@@ -1,3 +1,3 @@
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useConnectionRecoveredListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(forceUpdate?: (() => void) | undefined) => void;
+export declare const useConnectionRecoveredListener: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(forceUpdate?: () => void) => void;
 //# sourceMappingURL=useConnectionRecoveredListener.d.ts.map

package/dist/components/ChannelList/hooks/useConnectionRecoveredListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConnectionRecoveredListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useConnectionRecoveredListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,8BAA8B,0GAGrB,IAAI,sBAiBzB,CAAC"}
+{"version":3,"file":"useConnectionRecoveredListener.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useConnectionRecoveredListener.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,8BAA8B,mGAG3B,MAAM,IAAI,SAiBzB,CAAC"}

package/dist/components/ChannelList/hooks/useMessageNewListener.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect } from 'react';
 import uniqBy from 'lodash.uniqby';
@@ -17,7 +21,7 @@ export var useMessageNewListener = function (setChannels, lockChannelOrder, allo
                 var channelInList = channels.filter(function (channel) { return channel.cid === event.cid; }).length > 0;
                 if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
                     var channel = client.channel(event.channel_type, event.channel_id);
-                    return uniqBy(__spreadArray([channel], channels), 'cid');
+                    return uniqBy(__spreadArray([channel], channels, true), 'cid');
                 }
                 if (!lockChannelOrder)
                     return moveChannelUp({ channels: channels, cid: event.cid || '' });