stream-chat-react 9.4.1 → 10.0.0-theming-v2.1

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

@@ -1,2 +1,2 @@
-export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement>, navOpen: boolean, closeMobileNav?: (() => void) | undefined) => void;
+export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement>, navOpen: boolean, closeMobileNav?: () => void) => void;
 //# sourceMappingURL=useMobileNavigation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMobileNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useMobileNavigation.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,mBACd,MAAM,SAAS,CAAC,cAAc,CAAC,WACtC,OAAO,0BACO,IAAI,sBAoB5B,CAAC"}
+{"version":3,"file":"useMobileNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelList/hooks/useMobileNavigation.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,mBACd,MAAM,SAAS,CAAC,cAAc,CAAC,WACtC,OAAO,mBACC,MAAM,IAAI,SAoB5B,CAAC"}

package/dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.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';
@@ -61,7 +65,7 @@ export var useNotificationAddedToChannelListener = function (setChannels, custom
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
-                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels), 'cid'); });
+                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels, true), 'cid'); });
                         _b.label = 3;
                     case 3: return [2 /*return*/];
                 }

package/dist/components/ChannelList/hooks/useNotificationMessageNewListener.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';
@@ -61,7 +65,7 @@ export var useNotificationMessageNewListener = function (setChannels, customHand
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
-                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels), 'cid'); });
+                        setChannels(function (channels) { return uniqBy(__spreadArray([channel_1], channels, true), 'cid'); });
                         _b.label = 3;
                     case 3: return [2 /*return*/];
                 }

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

@@ -45,10 +45,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, useMemo, useState } from 'react';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
@@ -81,7 +85,7 @@ export var usePaginatedChannels = function (client, filters, sort, options, acti
                     return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
                 case 2:
                     channelQueryResponse = _b.sent();
-                    newChannels = queryType === 'reload' ? channelQueryResponse : __spreadArray(__spreadArray([], channels), channelQueryResponse);
+                    newChannels = queryType === 'reload' ? channelQueryResponse : __spreadArray(__spreadArray([], channels, true), channelQueryResponse, true);
                     setChannels(newChannels);
                     setHasNextPage(channelQueryResponse.length >= newOptions.limit);
                     // Set active channel only on load of first page

package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.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';
@@ -19,7 +23,7 @@ export var useUserPresenceChangedListener = function (setChannels) {
                     newChannel.state.members[event.user.id].user = event.user;
                     return newChannel;
                 });
-                return __spreadArray([], newChannels);
+                return __spreadArray([], newChannels, true);
             });
         };
         client.on('user.presence.changed', handleEvent);

package/dist/components/ChannelList/utils.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 uniqBy from 'lodash.uniqby';
 export var getChannel = function (client, type, id) { return __awaiter(void 0, void 0, void 0, function () {
@@ -62,5 +66,5 @@ export var moveChannelUp = function (_a) {
         return channels;
     // get channel to move up
     var channel = activeChannel || channels[channelIndex];
-    return uniqBy(__spreadArray([channel], channels), 'cid');
+    return uniqBy(__spreadArray([channel], channels, true), 'cid');
 };

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -15,6 +15,8 @@ export declare type ChannelPreviewUIComponentProps<StreamChatGenerics extends De
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** Latest message preview to display, will be a string or JSX element supporting markdown. */
     latestMessage?: string | JSX.Element;
+    /** Custom ChannelPreview click handler function */
+    onSelect?: (event: React.MouseEvent) => void;
     /** Number of unread Messages */
     unread?: number;
 };
@@ -27,7 +29,11 @@ export declare type ChannelPreviewProps<StreamChatGenerics extends DefaultStream
     Avatar?: React.ComponentType<AvatarProps>;
     /** Forces the update of preview component on channel update */
     channelUpdateCount?: number;
+    /** Custom class for the channel preview root */
+    className?: string;
     key?: string;
+    /** Custom ChannelPreview click handler function */
+    onSelect?: (event: React.MouseEvent) => void;
     /** Custom UI component to display the channel preview in the list, defaults to and accepts same props as: [ChannelPreviewMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) */
     Preview?: React.ComponentType<ChannelPreviewUIComponentProps<StreamChatGenerics>>;
     /** Setter for selected Channel */

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAG7E,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JA4F1B,CAAC"}
+{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAG7E,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyE1B,CAAC"}

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -12,17 +12,17 @@ var __assign = (this && this.__assign) || function () {
 import React, { useCallback, useEffect, useState } from 'react';
 import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
-import { getDisplayImage, getDisplayTitle, getLatestMessagePreview } from './utils';
+import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
+import { getLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 export var ChannelPreview = function (props) {
     var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
     var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
     var _c = useTranslationContext('ChannelPreview'), t = _c.t, userLanguage = _c.userLanguage;
-    var _d = useState(getDisplayTitle(channel, client.user)), displayTitle = _d[0], setDisplayTitle = _d[1];
-    var _e = useState(getDisplayImage(channel, client.user)), displayImage = _e[0], setDisplayImage = _e[1];
-    var _f = useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _f[0], setLastMessage = _f[1];
-    var _g = useState(0), unread = _g[0], setUnread = _g[1];
+    var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
+    var _e = useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
+    var _f = useState(0), unread = _f[0], setUnread = _f[1];
     var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
     var muted = useIsChannelMuted(channel).muted;
     useEffect(function () {
@@ -59,22 +59,6 @@ export var ChannelPreview = function (props) {
             channel.off('message.deleted', handleEvent);
         };
     }, [refreshUnreadCount, channelUpdateCount]);
-    useEffect(function () {
-        var handleEvent = function () {
-            setDisplayTitle(function (displayTitle) {
-                var newDisplayTitle = getDisplayTitle(channel, client.user);
-                return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-            });
-            setDisplayImage(function (displayImage) {
-                var newDisplayImage = getDisplayImage(channel, client.user);
-                return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-            });
-        };
-        client.on('user.updated', handleEvent);
-        return function () {
-            client.off('user.updated', handleEvent);
-        };
-    }, []);
     if (!Preview)
         return null;
     var latestMessage = getLatestMessagePreview(channel, t, userLanguage);

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreviewMessenger.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreviewMessenger.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA2DnE;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8JAES,CAAC"}
+{"version":3,"file":"ChannelPreviewMessenger.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreviewMessenger.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAwEnE;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8JAES,CAAC"}

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -1,26 +1,30 @@
 import React, { useRef } from 'react';
+import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
 var UnMemoizedChannelPreviewMessenger = function (props) {
     var _a, _b;
-    var active = props.active, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, channel = props.channel, displayImage = props.displayImage, displayTitle = props.displayTitle, latestMessage = props.latestMessage, setActiveChannel = props.setActiveChannel, unread = props.unread, watchers = props.watchers;
+    var active = props.active, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, channel = props.channel, _d = props.className, customClassName = _d === void 0 ? '' : _d, displayImage = props.displayImage, displayTitle = props.displayTitle, latestMessage = props.latestMessage, customOnSelectChannel = props.onSelect, setActiveChannel = props.setActiveChannel, unread = props.unread, watchers = props.watchers;
     var channelPreviewButton = useRef(null);
-    var activeClass = active ? 'str-chat__channel-preview-messenger--active' : '';
-    var unreadClass = unread && unread >= 1 ? 'str-chat__channel-preview-messenger--unread' : '';
     var avatarName = displayTitle || ((_b = (_a = channel.state.messages[channel.state.messages.length - 1]) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id);
-    var onSelectChannel = function () {
-        if (setActiveChannel) {
+    var onSelectChannel = function (e) {
+        if (customOnSelectChannel) {
+            customOnSelectChannel(e);
+        }
+        else if (setActiveChannel) {
             setActiveChannel(channel, watchers);
         }
         if (channelPreviewButton === null || channelPreviewButton === void 0 ? void 0 : channelPreviewButton.current) {
             channelPreviewButton.current.blur();
         }
     };
-    return (React.createElement("button", { "aria-label": "Select Channel: " + (displayTitle || ''), "aria-selected": active, className: "str-chat__channel-preview-messenger " + unreadClass + " " + activeClass, "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
+    return (React.createElement("button", { "aria-label": "Select Channel: ".concat(displayTitle || ''), "aria-selected": active, className: clsx("str-chat__channel-preview-messenger str-chat__channel-preview", active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
         React.createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
             React.createElement(Avatar, { image: displayImage, name: avatarName, size: 40 })),
-        React.createElement("div", { className: 'str-chat__channel-preview-messenger--right' },
-            React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
-                React.createElement("span", null, displayTitle)),
+        React.createElement("div", { className: 'str-chat__channel-preview-messenger--right str-chat__channel-preview-end' },
+            React.createElement("div", { className: 'str-chat__channel-preview-end-first-row' },
+                React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
+                    React.createElement("span", null, displayTitle)),
+                !!unread && (React.createElement("div", { className: 'str-chat__channel-preview-unread-badge', "data-testid": 'unread-badge' }, unread))),
             React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessage))));
 };
 /**

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.d.ts

@@ -0,0 +1,14 @@
+import type { Channel } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+export declare type ChannelPreviewInfoParams<StreamChatGenerics extends DefaultStreamChatGenerics> = {
+    channel: Channel<StreamChatGenerics>;
+    /** Manually set the image to render, defaults to the Channel image */
+    overrideImage?: string;
+    /** Set title manually */
+    overrideTitle?: string;
+};
+export declare const useChannelPreviewInfo: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewInfoParams<StreamChatGenerics>) => {
+    displayImage: string | undefined;
+    displayTitle: string | undefined;
+};
+//# sourceMappingURL=useChannelPreviewInfo.d.ts.map

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelPreviewInfo.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAItE,oBAAY,wBAAwB,CAAC,kBAAkB,SAAS,yBAAyB,IAAI;IAC3F,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;CAiCjC,CAAC"}

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { getDisplayImage, getDisplayTitle } from '../utils';
+import { useChatContext } from '../../../context';
+export var useChannelPreviewInfo = function (props) {
+    var channel = props.channel, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
+    var client = useChatContext('ChannelPreview').client;
+    var _a = useState(getDisplayTitle(channel, client.user)), displayTitle = _a[0], setDisplayTitle = _a[1];
+    var _b = useState(getDisplayImage(channel, client.user)), displayImage = _b[0], setDisplayImage = _b[1];
+    useEffect(function () {
+        var handleEvent = function () {
+            setDisplayTitle(function (displayTitle) {
+                var newDisplayTitle = getDisplayTitle(channel, client.user);
+                return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
+            });
+            setDisplayImage(function (displayImage) {
+                var newDisplayImage = getDisplayImage(channel, client.user);
+                return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
+            });
+        };
+        client.on('user.updated', handleEvent);
+        return function () {
+            client.off('user.updated', handleEvent);
+        };
+    }, []);
+    return {
+        displayImage: overrideImage || displayImage,
+        displayTitle: overrideTitle || displayTitle,
+    };
+};

package/dist/components/ChannelPreview/utils.js

@@ -5,7 +5,7 @@ export var getLatestMessagePreview = function (channel, t, userLanguage) {
     var _a, _b;
     if (userLanguage === void 0) { userLanguage = 'en'; }
     var latestMessage = channel.state.messages[channel.state.messages.length - 1];
-    var previewTextToRender = ((_a = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) ||
+    var previewTextToRender = ((_a = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
         (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.text);
     if (!latestMessage) {
         return t('Nothing yet...');
@@ -18,7 +18,7 @@ export var getLatestMessagePreview = function (channel, t, userLanguage) {
         return renderedText;
     }
     if (latestMessage.command) {
-        return "/" + latestMessage.command;
+        return "/".concat(latestMessage.command);
     }
     if ((_b = latestMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) {
         return t('🏙 Attachment...');

package/dist/components/ChannelSearch/ChannelSearch.d.ts

@@ -1,49 +1,13 @@
 import React from 'react';
-import { ChannelSearchFunctionParams, SearchInputProps } from './SearchInput';
-import { DropdownContainerProps, SearchResultItemProps } from './SearchResults';
-import { ChannelOrUserResponse } from './utils';
-import type { ChannelFilters, ChannelOptions, ChannelSort, UserFilters, UserOptions, UserSort } from 'stream-chat';
+import { AdditionalSearchInputProps, SearchInputProps } from './SearchInput';
+import { AdditionalSearchResultsProps } from './SearchResults';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare type SearchQueryParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    channelFilters?: {
-        filters?: ChannelFilters<StreamChatGenerics>;
-        options?: ChannelOptions;
-        sort?: ChannelSort<StreamChatGenerics>;
-    };
-    userFilters?: {
-        filters?: UserFilters<StreamChatGenerics>;
-        options?: UserOptions;
-        sort?: UserSort<StreamChatGenerics>;
-    };
-};
-export declare type ChannelSearchProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** The type of channel to create on user result select, defaults to `messaging` */
-    channelType?: string;
-    /** Custom UI component to display all of the search results, defaults to accepts same props as: [DefaultDropdownContainer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/SearchResults.tsx)  */
-    DropdownContainer?: React.ComponentType<DropdownContainerProps<StreamChatGenerics>>;
-    /** Custom handler function to run on search result item selection */
-    onSelectResult?: (result: ChannelOrUserResponse<StreamChatGenerics>) => Promise<void> | void;
-    /** Custom placeholder text to be displayed in the search input */
-    placeholder?: string;
-    /** Display search results as an absolutely positioned popup, defaults to false and shows inline */
-    popupResults?: boolean;
-    /** Custom UI component to display empty search results */
-    SearchEmpty?: React.ComponentType;
-    /** Boolean to search for channels as well as users in the server query, default is false and just searches for users */
-    searchForChannels?: boolean;
-    /** Custom search function to override default */
-    searchFunction?: (params: ChannelSearchFunctionParams<StreamChatGenerics>, event: React.BaseSyntheticEvent) => Promise<void> | void;
+import type { SearchController } from './hooks/useChannelSearch';
+export declare type AdditionalChannelSearchProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = AdditionalSearchInputProps & AdditionalSearchResultsProps<StreamChatGenerics> & {
     /** Custom UI component to display the search text input */
-    SearchInput?: React.ComponentType<SearchInputProps<StreamChatGenerics>>;
-    /** Custom UI component to display the search loading state */
-    SearchLoading?: React.ComponentType;
-    /** Object containing filters/sort/options overrides for user search */
-    searchQueryParams?: SearchQueryParams<StreamChatGenerics>;
-    /** Custom UI component to display a search result list item, defaults to and accepts same props as: [DefaultSearchResultItem](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/SearchResults.tsx) */
-    SearchResultItem?: React.ComponentType<SearchResultItemProps<StreamChatGenerics>>;
-    /** Custom UI component to display the search results header */
-    SearchResultsHeader?: React.ComponentType;
+    SearchInput?: React.ComponentType<SearchInputProps>;
 };
+export declare type ChannelSearchProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = AdditionalChannelSearchProps<StreamChatGenerics> & SearchController<StreamChatGenerics>;
 /**
  * The ChannelSearch component makes a query users call and displays the results in a list.
  * Clicking on a list item will navigate you into a channel with the selected user. It can be used

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelSearch.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelSearch/ChannelSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EACL,2BAA2B,EAE3B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAiB,MAAM,iBAAiB,CAAC;AAE/F,OAAO,EAAE,qBAAqB,EAAa,MAAM,SAAS,CAAC;AAI3D,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACX,QAAQ,EACT,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;QAC7C,OAAO,CAAC,EAAE,cAAc,CAAC;QACzB,IAAI,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;KACxC,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;QACtB,IAAI,CAAC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;KACrC,CAAC;CACH,CAAC;AAEF,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0OAA0O;IAC1O,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpF,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC7F,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,wHAAwH;IACxH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iDAAiD;IACjD,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,EACvD,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAC5B,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACxE,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC1D,4OAA4O;IAC5O,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3C,CAAC;AA4JF;;;;GAIG;AACH,eAAO,MAAM,aAAa,kJAAwE,CAAC"}
+{"version":3,"file":"ChannelSearch.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelSearch/ChannelSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,0BAA0B,EAE1B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,4BAA4B,EAAiB,MAAM,iBAAiB,CAAC;AAE9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,oBAAY,4BAA4B,CACtC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,0BAA0B,GAC5B,4BAA4B,CAAC,kBAAkB,CAAC,GAAG;IACjD,2DAA2D;IAC3D,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACrD,CAAC;AAEJ,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,4BAA4B,CAAC,kBAAkB,CAAC,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAmD5F;;;;GAIG;AACH,eAAO,MAAM,aAAa,kJAAwE,CAAC"}

package/dist/components/ChannelSearch/ChannelSearch.js

@@ -1,167 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        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;
-};
-import React, { useEffect, useRef, useState } from 'react';
-import throttle from 'lodash.throttle';
+import React from 'react';
 import { SearchInput as DefaultSearchInput, } from './SearchInput';
 import { SearchResults } from './SearchResults';
-import { isChannel } from './utils';
-import { useChatContext } from '../../context/ChatContext';
 var UnMemoizedChannelSearch = function (props) {
-    var _a = props.channelType, channelType = _a === void 0 ? 'messaging' : _a, DropdownContainer = props.DropdownContainer, onSelectResult = props.onSelectResult, placeholder = props.placeholder, _b = props.popupResults, popupResults = _b === void 0 ? false : _b, SearchEmpty = props.SearchEmpty, _c = props.searchForChannels, searchForChannels = _c === void 0 ? false : _c, searchFunction = props.searchFunction, _d = props.SearchInput, SearchInput = _d === void 0 ? DefaultSearchInput : _d, SearchLoading = props.SearchLoading, searchQueryParams = props.searchQueryParams, SearchResultItem = props.SearchResultItem, SearchResultsHeader = props.SearchResultsHeader;
-    var _e = useChatContext('ChannelSearch'), client = _e.client, setActiveChannel = _e.setActiveChannel;
-    var _f = useState(''), query = _f[0], setQuery = _f[1];
-    var _g = useState([]), results = _g[0], setResults = _g[1];
-    var _h = useState(false), resultsOpen = _h[0], setResultsOpen = _h[1];
-    var _j = useState(false), searching = _j[0], setSearching = _j[1];
-    var inputRef = useRef(null);
-    var clearState = function () {
-        setQuery('');
-        setResults([]);
-        setResultsOpen(false);
-        setSearching(false);
-    };
-    useEffect(function () {
-        var clickListener = function (event) {
-            var _a;
-            if (resultsOpen && event.target instanceof HTMLElement) {
-                var isInputClick = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
-                if (!isInputClick) {
-                    clearState();
-                }
-            }
-        };
-        document.addEventListener('click', clickListener);
-        return function () { return document.removeEventListener('click', clickListener); };
-    }, [resultsOpen]);
-    var selectResult = function (result) { return __awaiter(void 0, void 0, void 0, function () {
-        var newChannel;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!client.userID)
-                        return [2 /*return*/];
-                    if (!isChannel(result)) return [3 /*break*/, 1];
-                    setActiveChannel(result);
-                    return [3 /*break*/, 3];
-                case 1:
-                    newChannel = client.channel(channelType, { members: [client.userID, result.id] });
-                    return [4 /*yield*/, newChannel.watch()];
-                case 2:
-                    _a.sent();
-                    setActiveChannel(newChannel);
-                    _a.label = 3;
-                case 3:
-                    clearState();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var getChannels = function (text) { return __awaiter(void 0, void 0, void 0, function () {
-        var userResponse, channelResponse, _a, channels, users_1, users, error_1;
-        var _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
-                case 0:
-                    if (!text || searching)
-                        return [2 /*return*/];
-                    setSearching(true);
-                    _h.label = 1;
-                case 1:
-                    _h.trys.push([1, 6, , 7]);
-                    return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options))];
-                case 2:
-                    userResponse = _h.sent();
-                    if (!searchForChannels) return [3 /*break*/, 4];
-                    channelResponse = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
-                    return [4 /*yield*/, Promise.all([channelResponse, userResponse])];
-                case 3:
-                    _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
-                    setResults(__spreadArray(__spreadArray([], channels), users_1));
-                    setResultsOpen(true);
-                    setSearching(false);
-                    return [2 /*return*/];
-                case 4: return [4 /*yield*/, Promise.resolve(userResponse)];
-                case 5:
-                    users = (_h.sent()).users;
-                    setResults(users);
-                    setResultsOpen(true);
-                    return [3 /*break*/, 7];
-                case 6:
-                    error_1 = _h.sent();
-                    clearState();
-                    console.error(error_1);
-                    return [3 /*break*/, 7];
-                case 7:
-                    setSearching(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var getChannelsThrottled = throttle(getChannels, 200);
-    var onSearch = function (event) {
-        event.preventDefault();
-        setQuery(event.target.value);
-        getChannelsThrottled(event.target.value);
-    };
-    var channelSearchParams = {
-        setQuery: setQuery,
-        setResults: setResults,
-        setResultsOpen: setResultsOpen,
-        setSearching: setSearching,
-    };
+    var clearState = props.clearState, SearchResultsList = props.SearchResultsList, inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, _a = props.popupResults, popupResults = _a === void 0 ? false : _a, query = props.query, results = props.results, SearchEmpty = props.SearchEmpty, searching = props.searching, _b = props.SearchInput, SearchInput = _b === void 0 ? DefaultSearchInput : _b, SearchLoading = props.SearchLoading, SearchResultItem = props.SearchResultItem, SearchResultsHeader = props.SearchResultsHeader, selectResult = props.selectResult;
     return (React.createElement("div", { className: 'str-chat__channel-search', "data-testid": 'channel-search' },
-        React.createElement(SearchInput, { channelSearchParams: channelSearchParams, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query, searchFunction: searchFunction }),
-        query && (React.createElement(SearchResults, { DropdownContainer: DropdownContainer, popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, selectResult: onSelectResult || selectResult }))));
+        React.createElement(SearchInput, { clearState: clearState, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query }),
+        query && (React.createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
 };
 /**
  * The ChannelSearch component makes a query users call and displays the results in a list.

package/dist/components/ChannelSearch/SearchBar.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SearchInputProps } from './SearchInput';
+export declare type SearchBarController = {
+    /** Called on search input focus */
+    activateSearch: () => void;
+    /** Clears the search state, removes focus from the search input */
+    exitSearch: () => void;
+    /** Flag determining whether the search input is focused */
+    inputIsFocused: boolean;
+    /** Ref object for the input wrapper in the SearchBar */
+    searchBarRef: React.RefObject<HTMLDivElement>;
+};
+export declare type AdditionalSearchBarProps = {
+    /** Application menu to be displayed  when clicked on MenuIcon */
+    AppMenu?: React.ComponentType;
+    /** Custom icon component used to clear the input value on click. Displayed within the search input wrapper. */
+    ClearInputIcon?: React.ComponentType;
+    /** Custom icon component used to terminate the search UI session on click. */
+    ExitSearchIcon?: React.ComponentType;
+    /** Custom icon component used to invoke context menu. */
+    MenuIcon?: React.ComponentType;
+    /** Custom UI component to display the search text input */
+    SearchInput?: React.ComponentType<SearchInputProps>;
+    /** Custom icon used to indicate search input. */
+    SearchInputIcon?: React.ComponentType;
+};
+export declare type SearchBarProps = AdditionalSearchBarProps & SearchBarController & SearchInputProps;
+export declare const SearchBar: (props: SearchBarProps) => JSX.Element;
+//# sourceMappingURL=SearchBar.d.ts.map