stream-chat-react 10.0.0-theming-v2.3 → 10.0.0

package/dist/browser.full-bundle.js

@@ -5585,7 +5585,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
         return (React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions' },
             React__default["default"].createElement("div", { className: 'str-chat__message-attachment-actions-form' },
-                React__default["default"].createElement("span", { key: 0 }, text),
+                React__default["default"].createElement("span", null, text),
                 actions.map(function (action) { return (React__default["default"].createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
     };
     /**
@@ -13531,7 +13531,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var actionHandler = _a.actionHandler, attachment = _a.attachment, _c = _a.AttachmentActions, AttachmentActions$1 = _c === void 0 ? AttachmentActions : _c;
         if (!((_b = attachment.actions) === null || _b === void 0 ? void 0 : _b.length))
             return null;
-        return (React__default["default"].createElement(AttachmentActions$1, __assign$8({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
+        return (React__default["default"].createElement(AttachmentActions$1, __assign$8({}, attachment, { actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
     };
     var GalleryContainer = function (_a) {
         var attachment = _a.attachment, _b = _a.Gallery, Gallery$1 = _b === void 0 ? Gallery : _b;
@@ -13555,7 +13555,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var componentType = 'card';
         if (attachment.actions && attachment.actions.length) {
             return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-                React__default["default"].createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
+                React__default["default"].createElement("div", { className: 'str-chat__attachment' },
                     React__default["default"].createElement(Card, __assign$8({}, attachment)),
                     React__default["default"].createElement(AttachmentActionsContainer, __assign$8({}, props)))));
         }
@@ -40891,7 +40891,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var customActionsArray = Object.keys(customMessageActions);
         return (React__default["default"].createElement(React__default["default"].Fragment, null, customActionsArray.map(function (customAction) {
             var customHandler = customMessageActions[customAction];
-            return (React__default["default"].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
+            return (React__default["default"].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
         })));
     };
     var UnMemoizedMessageActionsBox = function (props) {
@@ -45385,46 +45385,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     function noop$1() {}
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
-        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-        var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
-        React.useEffect(function () {
-            var countdownInterval = setInterval(function () {
-                if (seconds > 0) {
-                    setSeconds(seconds - 1);
-                }
-                else {
-                    setCooldownRemaining(0);
-                }
-            }, 1000);
-            return function () { return clearInterval(countdownInterval); };
-        });
-        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
-    };
-    var useCooldownTimer = function () {
-        var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
-        var channel = useChannelStateContext('useCooldownTimer').channel;
-        var _a = (channel.data ||
-            {}), cooldownInterval = _a.cooldown, own_capabilities = _a.own_capabilities;
-        var _b = React.useState(), cooldownRemaining = _b[0], setCooldownRemaining = _b[1];
-        var skipCooldown = !(own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('slow-mode'));
-        React.useEffect(function () {
-            var latestMessageDate = latestMessageDatesByChannels[channel.cid];
-            if (!cooldownInterval || !latestMessageDate) {
-                return;
-            }
-            var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - latestMessageDate.getTime()) / 1000);
-            if (remainingCooldown > 0 && !skipCooldown) {
-                setCooldownRemaining(remainingCooldown);
-            }
-        }, [channel.id, cooldownInterval, latestMessageDatesByChannels[channel.cid]]);
-        return {
-            cooldownInterval: cooldownInterval || 0,
-            cooldownRemaining: cooldownRemaining,
-            setCooldownRemaining: setCooldownRemaining,
-        };
-    };
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var QuotedMessagePreviewHeader = function () {
         var setQuotedMessage = useChannelActionContext('QuotedMessagePreview').setQuotedMessage;
         var t = useTranslationContext('QuotedMessagePreview').t;
@@ -45525,6 +45485,23 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 state.uploading && React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))));
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
+        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
+        var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+        React.useEffect(function () {
+            var countdownInterval = setInterval(function () {
+                if (seconds > 0) {
+                    setSeconds(seconds - 1);
+                }
+                else {
+                    setCooldownRemaining(0);
+                }
+            }, 1000);
+            return function () { return clearInterval(countdownInterval); };
+        });
+        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageInputFlat = function () {
         var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
         var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -45677,6 +45654,30 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                             React__default["default"].createElement("button", { className: 'str-chat__edit-message-send', type: 'submit' }, t('Send'))))))));
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCooldownTimer = function () {
+        var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
+        var channel = useChannelStateContext('useCooldownTimer').channel;
+        var _a = (channel.data ||
+            {}), cooldownInterval = _a.cooldown, own_capabilities = _a.own_capabilities;
+        var _b = React.useState(), cooldownRemaining = _b[0], setCooldownRemaining = _b[1];
+        var skipCooldown = !(own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('slow-mode'));
+        React.useEffect(function () {
+            var latestMessageDate = latestMessageDatesByChannels[channel.cid];
+            if (!cooldownInterval || !latestMessageDate) {
+                return;
+            }
+            var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - latestMessageDate.getTime()) / 1000);
+            if (remainingCooldown > 0 && !skipCooldown) {
+                setCooldownRemaining(remainingCooldown);
+            }
+        }, [channel.id, cooldownInterval, latestMessageDatesByChannels[channel.cid]]);
+        return {
+            cooldownInterval: cooldownInterval || 0,
+            cooldownRemaining: cooldownRemaining,
+            setCooldownRemaining: setCooldownRemaining,
+        };
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useEmojiIndex = function () {
         var _a = useEmojiContext('useEmojiIndex'), emojiConfig = _a.emojiConfig, EmojiIndex = _a.EmojiIndex;
         var emojiData = (emojiConfig || {}).emojiData;
@@ -47512,6 +47513,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 });
             });
         };
+        var clearHighlightedMessageTimeoutId = React.useRef(null);
         var jumpToMessage = function (messageId, messageLimit) {
             if (messageLimit === void 0) { messageLimit = 100; }
             return __awaiter$3(void 0, void 0, void 0, function () {
@@ -47531,7 +47533,11 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                                 highlightedMessageId: messageId,
                                 type: 'jumpToMessageFinished',
                             });
-                            setTimeout(function () {
+                            if (clearHighlightedMessageTimeoutId.current) {
+                                clearTimeout(clearHighlightedMessageTimeoutId.current);
+                            }
+                            clearHighlightedMessageTimeoutId.current = setTimeout(function () {
+                                clearHighlightedMessageTimeoutId.current = null;
                                 dispatch({ type: 'clearHighlightedMessage' });
                             }, 500);
                             return [2 /*return*/];
@@ -48441,151 +48447,34 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         return (React__default["default"].createElement(Preview, __assign$8({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var SearchInput = function (props) {
-        var inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, query = props.query;
-        var t = useTranslationContext('SearchInput').t;
-        return (React__default["default"].createElement("input", { className: 'str-chat__channel-search-input', "data-testid": 'search-input', onChange: onSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('Search'), ref: inputRef, type: 'text', value: query }));
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MenuIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'menu-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
-    var ReturnIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'return-icon', fill: 'none', height: '20', viewBox: '0 0 22 22', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M21.6668 9.66666V12.3333H5.6529L12.9932 19.6736L11.1076 21.5592L0.54834 11L11.1076 0.440765L12.9932 2.32638L5.6529 9.66666H21.6668Z', fill: '#080707' }))); };
-    var XIcon = function () { return (React__default["default"].createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z', fill: '#747881' }))); };
-    var SearchIcon = function (_a) {
-        var className = _a.className;
-        return (React__default["default"].createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("path", { d: 'M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z', fill: '#747881' })));
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var isChannel = function (output) { return output.cid != null; };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DefaultSearchEmpty = function () {
-        var t = useTranslationContext('SearchResults').t;
-        return (React__default["default"].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
-            React__default["default"].createElement(SearchIcon, null),
-            t('No results found')));
-    };
-    var DefaultSearchResultsHeader = function (_a) {
-        var results = _a.results;
-        var t = useTranslationContext('SearchResultsHeader').t;
-        return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-results-header', "data-testid": 'channel-search-results-header' }, t('searchResultsCount', {
-            count: results.length,
-        })));
-    };
-    var DefaultSearchResultsList = function (props) {
-        var focusedUser = props.focusedUser, results = props.results, _a = props.SearchResultItem, SearchResultItem = _a === void 0 ? DefaultSearchResultItem : _a, selectResult = props.selectResult;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, results.map(function (result, index) { return (React__default["default"].createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: selectResult })); })));
-    };
-    var DefaultSearchResultItem = function (props) {
-        var _a, _b;
-        var focusedUser = props.focusedUser, index = props.index, result = props.result, selectResult = props.selectResult;
-        var focused = focusedUser === index;
-        var themeVersion = useChatContext().themeVersion;
-        var className = clsx('str-chat__channel-search-result', focused && 'str-chat__channel-search-result--focused focused');
-        if (isChannel(result)) {
-            var channel_1 = result;
-            return themeVersion === '2' ? (React__default["default"].createElement(ChannelPreview, { channel: channel_1, className: className, onSelect: function () { return selectResult(channel_1); } })) : (React__default["default"].createElement("button", { "aria-label": "Select Channel: ".concat(((_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name) || ''), className: className, "data-testid": 'channel-search-result-channel', onClick: function () { return selectResult(channel_1); }, role: 'option' },
-                React__default["default"].createElement("div", { className: 'result-hashtag' }, "#"),
-                React__default["default"].createElement("p", { className: 'channel-search__result-text' }, (_b = channel_1.data) === null || _b === void 0 ? void 0 : _b.name)));
-        }
-        else {
-            return (React__default["default"].createElement("button", { "aria-label": "Select User Channel: ".concat(result.name || ''), className: className, "data-testid": 'channel-search-result-user', onClick: function () { return selectResult(result); }, role: 'option' },
-                React__default["default"].createElement(Avatar, { image: result.image, name: result.name || result.id, size: themeVersion === '2' ? 40 : undefined, user: result }),
-                React__default["default"].createElement("div", { className: 'str-chat__channel-search-result--display-name' }, result.name || result.id)));
-        }
-    };
-    var ResultsContainer = function (_a) {
-        var children = _a.children, popupResults = _a.popupResults;
-        var containerStyle = popupResults ? 'popup' : 'inline';
-        return (React__default["default"].createElement("div", { "aria-label": 'Channel search results', className: "str-chat__channel-search-container str-chat__channel-search-result-list ".concat(containerStyle) }, children));
-    };
-    var SearchResults = function (props) {
-        var popupResults = props.popupResults, results = props.results, searching = props.searching, _a = props.SearchEmpty, SearchEmpty = _a === void 0 ? DefaultSearchEmpty : _a, _b = props.SearchResultsHeader, SearchResultsHeader = _b === void 0 ? DefaultSearchResultsHeader : _b, SearchLoading = props.SearchLoading, _c = props.SearchResultItem, SearchResultItem = _c === void 0 ? DefaultSearchResultItem : _c, _d = props.SearchResultsList, SearchResultsList = _d === void 0 ? DefaultSearchResultsList : _d, selectResult = props.selectResult;
-        var t = useTranslationContext('SearchResults').t;
-        var _e = React.useState(), focusedResult = _e[0], setFocusedResult = _e[1];
-        var handleKeyDown = React.useCallback(function (event) {
-            if (event.key === 'ArrowUp') {
-                setFocusedResult(function (prevFocused) {
-                    if (prevFocused === undefined)
-                        return 0;
-                    return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
-                });
-            }
-            if (event.key === 'ArrowDown') {
-                setFocusedResult(function (prevFocused) {
-                    if (prevFocused === undefined)
-                        return 0;
-                    return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
-                });
-            }
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                if (focusedResult !== undefined) {
-                    selectResult(results[focusedResult]);
-                    return setFocusedResult(undefined);
-                }
-            }
-        }, [focusedResult]);
-        React.useEffect(function () {
-            document.addEventListener('keydown', handleKeyDown, false);
-            return function () { return document.removeEventListener('keydown', handleKeyDown); };
-        }, [handleKeyDown]);
-        if (searching) {
-            return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults }, SearchLoading ? (React__default["default"].createElement(SearchLoading, null)) : (React__default["default"].createElement("div", { className: 'str-chat__channel-search-container-searching', "data-testid": 'search-in-progress-indicator' }, t('Searching...')))));
-        }
-        if (!results.length) {
-            return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
-                React__default["default"].createElement(SearchEmpty, null)));
-        }
-        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
-            React__default["default"].createElement(SearchResultsHeader, { results: results }),
-            React__default["default"].createElement(SearchResultsList, { focusedUser: focusedResult, results: results, SearchResultItem: SearchResultItem, selectResult: selectResult })));
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedChannelSearch = function (props) {
-        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$1 = _b === void 0 ? SearchInput : _b, SearchLoading = props.SearchLoading, SearchResultItem = props.SearchResultItem, SearchResultsHeader = props.SearchResultsHeader, selectResult = props.selectResult;
-        return (React__default["default"].createElement("div", { className: 'str-chat__channel-search', "data-testid": 'channel-search' },
-            React__default["default"].createElement(SearchInput$1, { clearState: clearState, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query }),
-            query && (React__default["default"].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.
-     * Clicking on a list item will navigate you into a channel with the selected user. It can be used
-     * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
-     */
-    var ChannelSearch = React__default["default"].memo(UnMemoizedChannelSearch);
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChannelSearch = function (_a) {
-        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.enabled, enabled = _d === void 0 ? false : _d, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
+        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
         var _f = useChatContext('useChannelSearch'), client = _f.client, navOpen = _f.navOpen, setActiveChannel = _f.setActiveChannel, themeVersion = _f.themeVersion;
         var _g = React.useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
         var _h = React.useState(''), query = _h[0], setQuery = _h[1];
         var _j = React.useState([]), results = _j[0], setResults = _j[1];
-        var _k = React.useState(false), resultsOpen = _k[0], setResultsOpen = _k[1];
-        var _l = React.useState(false), searching = _l[0], setSearching = _l[1];
+        var _k = React.useState(false), searching = _k[0], setSearching = _k[1];
         var inputRef = React.useRef(null);
         var searchBarRef = React.useRef(null);
-        var clearState = function () {
+        var clearState = React.useCallback(function () {
             setQuery('');
             setResults([]);
-            setResultsOpen(false);
             setSearching(false);
-        };
-        var activateSearch = function () {
+        }, []);
+        var activateSearch = React.useCallback(function () {
             setInputIsFocused(true);
-        };
-        var exitSearch = function () {
+        }, []);
+        var exitSearch = React.useCallback(function () {
             var _a;
             setInputIsFocused(false);
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             clearState();
-        };
+            onSearchExit === null || onSearchExit === void 0 ? void 0 : onSearchExit();
+        }, [clearState, onSearchExit]);
         React.useEffect(function () {
-            if (!enabled)
+            if (disabled)
                 return;
             var clickListener = function (event) {
                 var _a, _b;
@@ -48596,17 +48485,15 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                     : (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
                 if (isInputClick)
                     return;
-                if ((navOpen && inputIsFocused) ||
-                    (resultsOpen && clearSearchOnClickOutside) ||
-                    (inputIsFocused && !query)) {
+                if ((inputIsFocused && (!query || navOpen)) || clearSearchOnClickOutside) {
                     exitSearch();
                 }
             };
             document.addEventListener('click', clickListener);
             return function () { return document.removeEventListener('click', clickListener); };
-        }, [enabled, inputIsFocused, resultsOpen]);
+        }, [disabled, inputIsFocused]);
         React.useEffect(function () {
-            if (!(inputRef.current && enabled))
+            if (!inputRef.current || disabled)
                 return;
             var handleKeyDown = function (event) {
                 if (event.key === 'Escape')
@@ -48618,7 +48505,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
             };
         }, []);
-        var selectResult = function (result) { return __awaiter$3(void 0, void 0, void 0, function () {
+        var selectResult = React.useCallback(function (result) { return __awaiter$3(void 0, void 0, void 0, function () {
             var selectedChannel, newChannel;
             return __generator$3(this, function (_a) {
                 switch (_a.label) {
@@ -48629,7 +48516,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         return [4 /*yield*/, onSelectResult({
                                 setQuery: setQuery,
                                 setResults: setResults,
-                                setResultsOpen: setResultsOpen,
                                 setSearching: setSearching,
                             }, result)];
                     case 1:
@@ -48651,13 +48537,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                     case 5:
                         setChannels(function (channels) { return lodash_uniqby(__spreadArray$1([selectedChannel], channels, true), 'cid'); });
                         if (clearSearchOnClickOutside) {
-                            clearState();
+                            exitSearch();
                         }
                         return [2 /*return*/];
                 }
             });
-        }); };
-        var getChannels = function (text) { return __awaiter$3(void 0, void 0, void 0, function () {
+        }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult]);
+        var getChannels = React.useCallback(function (text) { return __awaiter$3(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$3(this, function (_h) {
@@ -48678,14 +48564,12 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                     case 3:
                         _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
                         setResults(__spreadArray$1(__spreadArray$1([], channels, true), users_1, true));
-                        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();
@@ -48697,17 +48581,16 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         return [2 /*return*/];
                 }
             });
-        }); };
+        }); }, [client, searching]);
         var getChannelsThrottled = lodash_throttle(getChannels, 200);
-        var onSearch = function (event) {
+        var onSearch = React.useCallback(function (event) {
             event.preventDefault();
-            if (!enabled)
+            if (disabled)
                 return;
             if (searchFunction) {
                 searchFunction({
                     setQuery: setQuery,
                     setResults: setResults,
-                    setResultsOpen: setResultsOpen,
                     setSearching: setSearching,
                 }, event);
             }
@@ -48715,7 +48598,8 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 setQuery(event.target.value);
                 getChannelsThrottled(event.target.value);
             }
-        };
+            onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
+        }, [disabled, getChannelsThrottled, searchFunction]);
         return {
             activateSearch: activateSearch,
             clearState: clearState,
@@ -48731,6 +48615,24 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         };
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MenuIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'menu-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
+    var ReturnIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'return-icon', fill: 'none', height: '20', viewBox: '0 0 22 22', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M21.6668 9.66666V12.3333H5.6529L12.9932 19.6736L11.1076 21.5592L0.54834 11L11.1076 0.440765L12.9932 2.32638L5.6529 9.66666H21.6668Z', fill: '#080707' }))); };
+    var XIcon = function () { return (React__default["default"].createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z', fill: '#747881' }))); };
+    var SearchIcon = function (_a) {
+        var className = _a.className;
+        return (React__default["default"].createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("path", { d: 'M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z', fill: '#747881' })));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var SearchInput = function (props) {
+        var disabled = props.disabled, inputRef = props.inputRef, onSearch = props.onSearch, placeholder = props.placeholder, query = props.query;
+        var t = useTranslationContext('SearchInput').t;
+        return (React__default["default"].createElement("input", { className: 'str-chat__channel-search-input', "data-testid": 'search-input', disabled: disabled, onChange: onSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('Search'), ref: inputRef, type: 'text', value: query }));
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var SearchBarButton = function (_a) {
         var children = _a.children, className = _a.className, onClick = _a.onClick;
         return (React__default["default"].createElement("button", { className: clsx('str-chat__channel-search-bar-button', className), "data-testid": 'search-bar-button', onClick: onClick }, children));
@@ -48782,7 +48684,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         }, []);
         var handleClearClick = React.useCallback(function () {
             var _a;
-            inputProps.clearState();
+            exitSearch();
             (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -48799,6 +48701,106 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 React__default["default"].createElement(AppMenu, null)))));
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DefaultSearchEmpty = function () {
+        var t = useTranslationContext('SearchResults').t;
+        return (React__default["default"].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
+            React__default["default"].createElement(SearchIcon, null),
+            t('No results found')));
+    };
+    var DefaultSearchResultsHeader = function (_a) {
+        var results = _a.results;
+        var t = useTranslationContext('SearchResultsHeader').t;
+        return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-results-header', "data-testid": 'channel-search-results-header' }, t('searchResultsCount', {
+            count: results.length,
+        })));
+    };
+    var DefaultSearchResultsList = function (props) {
+        var focusedUser = props.focusedUser, results = props.results, _a = props.SearchResultItem, SearchResultItem = _a === void 0 ? DefaultSearchResultItem : _a, selectResult = props.selectResult;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, results.map(function (result, index) { return (React__default["default"].createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: selectResult })); })));
+    };
+    var DefaultSearchResultItem = function (props) {
+        var _a, _b;
+        var focusedUser = props.focusedUser, index = props.index, result = props.result, selectResult = props.selectResult;
+        var focused = focusedUser === index;
+        var themeVersion = useChatContext().themeVersion;
+        var className = clsx('str-chat__channel-search-result', focused && 'str-chat__channel-search-result--focused focused');
+        if (isChannel(result)) {
+            var channel_1 = result;
+            return themeVersion === '2' ? (React__default["default"].createElement(ChannelPreview, { channel: channel_1, className: className, onSelect: function () { return selectResult(channel_1); } })) : (React__default["default"].createElement("button", { "aria-label": "Select Channel: ".concat(((_a = channel_1.data) === null || _a === void 0 ? void 0 : _a.name) || ''), className: className, "data-testid": 'channel-search-result-channel', onClick: function () { return selectResult(channel_1); }, role: 'option' },
+                React__default["default"].createElement("div", { className: 'result-hashtag' }, "#"),
+                React__default["default"].createElement("p", { className: 'channel-search__result-text' }, (_b = channel_1.data) === null || _b === void 0 ? void 0 : _b.name)));
+        }
+        else {
+            return (React__default["default"].createElement("button", { "aria-label": "Select User Channel: ".concat(result.name || ''), className: className, "data-testid": 'channel-search-result-user', onClick: function () { return selectResult(result); }, role: 'option' },
+                React__default["default"].createElement(Avatar, { image: result.image, name: result.name || result.id, size: themeVersion === '2' ? 40 : undefined, user: result }),
+                React__default["default"].createElement("div", { className: 'str-chat__channel-search-result--display-name' }, result.name || result.id)));
+        }
+    };
+    var ResultsContainer = function (_a) {
+        var children = _a.children, popupResults = _a.popupResults;
+        return (React__default["default"].createElement("div", { "aria-label": 'Channel search results', className: clsx("str-chat__channel-search-container str-chat__channel-search-result-list", popupResults ? 'popup' : 'inline') }, children));
+    };
+    var SearchResults = function (props) {
+        var popupResults = props.popupResults, results = props.results, searching = props.searching, _a = props.SearchEmpty, SearchEmpty = _a === void 0 ? DefaultSearchEmpty : _a, _b = props.SearchResultsHeader, SearchResultsHeader = _b === void 0 ? DefaultSearchResultsHeader : _b, SearchLoading = props.SearchLoading, _c = props.SearchResultItem, SearchResultItem = _c === void 0 ? DefaultSearchResultItem : _c, _d = props.SearchResultsList, SearchResultsList = _d === void 0 ? DefaultSearchResultsList : _d, selectResult = props.selectResult;
+        var t = useTranslationContext('SearchResults').t;
+        var _e = React.useState(), focusedResult = _e[0], setFocusedResult = _e[1];
+        var handleKeyDown = React.useCallback(function (event) {
+            if (event.key === 'ArrowUp') {
+                setFocusedResult(function (prevFocused) {
+                    if (prevFocused === undefined)
+                        return 0;
+                    return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
+                });
+            }
+            if (event.key === 'ArrowDown') {
+                setFocusedResult(function (prevFocused) {
+                    if (prevFocused === undefined)
+                        return 0;
+                    return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
+                });
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (focusedResult !== undefined) {
+                    selectResult(results[focusedResult]);
+                    return setFocusedResult(undefined);
+                }
+            }
+        }, [focusedResult]);
+        React.useEffect(function () {
+            document.addEventListener('keydown', handleKeyDown, false);
+            return function () { return document.removeEventListener('keydown', handleKeyDown); };
+        }, [handleKeyDown]);
+        if (searching) {
+            return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults }, SearchLoading ? (React__default["default"].createElement(SearchLoading, null)) : (React__default["default"].createElement("div", { className: 'str-chat__channel-search-container-searching', "data-testid": 'search-in-progress-indicator' }, t('Searching...')))));
+        }
+        if (!results.length) {
+            return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
+                React__default["default"].createElement(SearchEmpty, null)));
+        }
+        return (React__default["default"].createElement(ResultsContainer, { popupResults: popupResults },
+            React__default["default"].createElement(SearchResultsHeader, { results: results }),
+            React__default["default"].createElement(SearchResultsList, { focusedUser: focusedResult, results: results, SearchResultItem: SearchResultItem, selectResult: selectResult })));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedChannelSearch = function (props) {
+        var AppMenu = props.AppMenu, ClearInputIcon = props.ClearInputIcon, ExitSearchIcon = props.ExitSearchIcon, MenuIcon = props.MenuIcon, placeholder = props.placeholder, _a = props.popupResults, popupResults = _a === void 0 ? false : _a, _b = props.SearchBar, SearchBar$1 = _b === void 0 ? SearchBar : _b, SearchEmpty = props.SearchEmpty, _c = props.SearchInput, SearchInput$1 = _c === void 0 ? SearchInput : _c, SearchLoading = props.SearchLoading, SearchInputIcon = props.SearchInputIcon, SearchResultItem = props.SearchResultItem, SearchResultsList = props.SearchResultsList, SearchResultsHeader = props.SearchResultsHeader, channelSearchParams = __rest$4(props, ["AppMenu", "ClearInputIcon", "ExitSearchIcon", "MenuIcon", "placeholder", "popupResults", "SearchBar", "SearchEmpty", "SearchInput", "SearchLoading", "SearchInputIcon", "SearchResultItem", "SearchResultsList", "SearchResultsHeader"]);
+        var themeVersion = useChatContext('ChannelSearch').themeVersion;
+        var _d = useChannelSearch(channelSearchParams), activateSearch = _d.activateSearch, clearState = _d.clearState, exitSearch = _d.exitSearch, inputIsFocused = _d.inputIsFocused, inputRef = _d.inputRef, onSearch = _d.onSearch, query = _d.query, results = _d.results, searchBarRef = _d.searchBarRef, searching = _d.searching, selectResult = _d.selectResult;
+        var showSearchBarV2 = themeVersion === '2';
+        return (React__default["default"].createElement("div", { className: 'str-chat__channel-search', "data-testid": 'channel-search' },
+            showSearchBarV2 ? (React__default["default"].createElement(SearchBar$1, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, disabled: channelSearchParams.disabled, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInput: SearchInput$1, SearchInputIcon: SearchInputIcon })) : (React__default["default"].createElement(SearchInput$1, { clearState: clearState, disabled: channelSearchParams.disabled, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query })),
+            query && (React__default["default"].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.
+     * Clicking on a list item will navigate you into a channel with the selected user. It can be used
+     * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
+     */
+    var ChannelSearch = React__default["default"].memo(UnMemoizedChannelSearch);
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ChatBubble = function () { return (React__default["default"].createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
         React__default["default"].createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' }))); };
 
@@ -48847,11 +48849,11 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     var DEFAULT_OPTIONS = {};
     var DEFAULT_SORT = {};
     var UnMemoizedChannelList = function (props) {
-        var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _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$1 = _h === void 0 ? SearchBar : _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$4(_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 additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _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 channelListRef = React.useRef(null);
-        var _s = React.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
+        var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
+        var _r = React.useState(false), searchActive = _r[0], setSearchActive = _r[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.
@@ -48896,9 +48898,22 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
          * force a re-render. Incrementing this dummy variable ensures the channel previews update.
          */
         var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-        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$8({ 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 onSearch = React.useCallback(function (event) {
+            var _a;
+            if (!event.target.value) {
+                setSearchActive(false);
+            }
+            else {
+                setSearchActive(true);
+            }
+            (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearch) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps, event);
+        }, []);
+        var onSearchExit = React.useCallback(function () {
+            var _a;
+            setSearchActive(false);
+            (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
+        }, []);
+        var _s = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _s.channels, hasNextPage = _s.hasNextPage, loadNextPage = _s.loadNextPage, setChannels = _s.setChannels;
         var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
         useMobileNavigation(channelListRef, navOpen, closeMobileNav);
         useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -48943,12 +48958,11 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
             'str-chat-channel-list--open': navOpen,
         });
-        var showSearchV2 = themeVersion === '2' && !popupResults;
+        var showChannelList = !searchActive || (additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.popupResults);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("div", { className: className, ref: channelListRef },
-                showChannelSearch &&
-                    (showSearchV2 ? (React__default["default"].createElement(SearchBar$1, { 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__default["default"].createElement(ChannelSearch$1, __assign$8({ placeholder: placeholder, popupResults: popupResults, SearchEmpty: SearchEmpty, SearchInput: SearchInput, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList }, channelSearchController)))),
-                query && showSearchV2 ? (React__default["default"].createElement(SearchResults, { results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult })) : (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
+                showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign$8({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
+                showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
                     ? renderChannels(loadedChannels, renderChannel)
                     : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
     };
@@ -48963,7 +48977,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.0.0-theming-v2.3';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.0.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;