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

package/dist/index.cjs.js

@@ -247,7 +247,7 @@ var UnMemoizedAttachmentActions = function (props) {
     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)); }))));
 };
 /**
@@ -1728,7 +1728,7 @@ var AttachmentActionsContainer = function (_a) {
     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({}, 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({}, 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;
@@ -1752,7 +1752,7 @@ var CardContainer = function (props) {
     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$1, __assign({}, attachment)),
                 React__default["default"].createElement(AttachmentActionsContainer, __assign({}, props)))));
     }
@@ -4565,7 +4565,7 @@ var CustomMessageActionsList = function (props) {
     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) {
@@ -9072,46 +9072,6 @@ function reducer(state, action) {
 
 function noop() {}
 
-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,
-    };
-};
-
 var QuotedMessagePreviewHeader = function () {
     var setQuotedMessage = useChannelActionContext('QuotedMessagePreview').setQuotedMessage;
     var t = useTranslationContext('QuotedMessagePreview').t;
@@ -9212,6 +9172,23 @@ var FilePreviewItem = function (_a) {
             state.uploading && React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))));
 };
 
+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 MessageInputFlat = function () {
     var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -9364,6 +9341,30 @@ var EditMessageForm = function () {
                         React__default["default"].createElement("button", { className: 'str-chat__edit-message-send', type: 'submit' }, t('Send'))))))));
 };
 
+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,
+    };
+};
+
 var useEmojiIndex = function () {
     var _a = useEmojiContext('useEmojiIndex'), emojiConfig = _a.emojiConfig, EmojiIndex = _a.EmojiIndex;
     var emojiData = (emojiConfig || {}).emojiData;
@@ -11191,6 +11192,7 @@ var ChannelInner = function (props) {
             });
         });
     };
+    var clearHighlightedMessageTimeoutId = React.useRef(null);
     var jumpToMessage = function (messageId, messageLimit) {
         if (messageLimit === void 0) { messageLimit = 100; }
         return __awaiter$1(void 0, void 0, void 0, function () {
@@ -11210,7 +11212,11 @@ var ChannelInner = function (props) {
                             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*/];
@@ -12116,149 +12122,34 @@ var ChannelPreview = function (props) {
     return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
 };
 
-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 }));
-};
-
-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' })));
-};
-
 var isChannel = function (output) { return output.cid != null; };
 
-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 })));
-};
-
-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);
-
 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;
@@ -12269,17 +12160,15 @@ var useChannelSearch = function (_a) {
                 : (_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')
@@ -12291,7 +12180,7 @@ var useChannelSearch = function (_a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
         };
     }, []);
-    var selectResult = function (result) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var selectResult = React.useCallback(function (result) { return __awaiter$1(void 0, void 0, void 0, function () {
         var selectedChannel, newChannel;
         return __generator$1(this, function (_a) {
             switch (_a.label) {
@@ -12302,7 +12191,6 @@ var useChannelSearch = function (_a) {
                     return [4 /*yield*/, onSelectResult({
                             setQuery: setQuery,
                             setResults: setResults,
-                            setResultsOpen: setResultsOpen,
                             setSearching: setSearching,
                         }, result)];
                 case 1:
@@ -12324,13 +12212,13 @@ var useChannelSearch = function (_a) {
                 case 5:
                     setChannels(function (channels) { return uniqBy__default["default"](__spreadArray$1([selectedChannel], channels, true), 'cid'); });
                     if (clearSearchOnClickOutside) {
-                        clearState();
+                        exitSearch();
                     }
                     return [2 /*return*/];
             }
         });
-    }); };
-    var getChannels = function (text) { return __awaiter$1(void 0, void 0, void 0, function () {
+    }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult]);
+    var getChannels = React.useCallback(function (text) { return __awaiter$1(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$1(this, function (_h) {
@@ -12351,14 +12239,12 @@ var useChannelSearch = function (_a) {
                 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();
@@ -12370,17 +12256,16 @@ var useChannelSearch = function (_a) {
                     return [2 /*return*/];
             }
         });
-    }); };
+    }); }, [client, searching]);
     var getChannelsThrottled = throttle__default["default"](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);
         }
@@ -12388,7 +12273,8 @@ var useChannelSearch = function (_a) {
             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,
@@ -12404,6 +12290,24 @@ var useChannelSearch = function (_a) {
     };
 };
 
+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' })));
+};
+
+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 }));
+};
+
 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));
@@ -12455,7 +12359,7 @@ var SearchBar = function (props) {
     }, []);
     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 },
@@ -12472,6 +12376,104 @@ var SearchBar = function (props) {
             React__default["default"].createElement(AppMenu, null)))));
 };
 
+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 })));
+};
+
+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(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);
+
 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' }))); };
 
@@ -12518,11 +12520,11 @@ var DEFAULT_FILTERS = {};
 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(_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.
@@ -12567,9 +12569,22 @@ var UnMemoizedChannelList = function (props) {
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
     var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var _t = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _t.channels, hasNextPage = _t.hasNextPage, loadNextPage = _t.loadNextPage, setChannels = _t.setChannels;
-    var channelSearchController = useChannelSearch(__assign({ enabled: showChannelSearch, setChannels: setChannels }, channelSearchParams));
-    var activateSearch = channelSearchController.activateSearch, clearState = channelSearchController.clearState, exitSearch = channelSearchController.exitSearch, inputIsFocused = channelSearchController.inputIsFocused, inputRef = channelSearchController.inputRef, onSearch = channelSearchController.onSearch, query = channelSearchController.query, results = channelSearchController.results, searchBarRef = channelSearchController.searchBarRef, searching = channelSearchController.searching, selectResult = channelSearchController.selectResult;
+    var 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);
@@ -12614,12 +12629,11 @@ var UnMemoizedChannelList = function (props) {
         '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({ 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({ 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); }))))))));
 };
@@ -12628,7 +12642,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.0.0-theming-v2.3';
+var version = '10.0.0';
 
 var useChat = function (_a) {
     var _b, _c;