stream-chat-react 11.22.0 → 12.0.0-rc.2

package/dist/components/ChannelSearch/SearchBar.js

@@ -1,73 +1,66 @@
-import { __assign, __rest } from "tslib";
 import React, { useCallback, useEffect, useRef, useState, } from 'react';
 import clsx from 'clsx';
 import { MenuIcon as DefaultMenuIcon, SearchIcon as DefaultSearchInputIcon, ReturnIcon, XIcon, } from './icons';
 import { SearchInput as DefaultSearchInput } from './SearchInput';
-var SearchBarButton = function (_a) {
-    var children = _a.children, className = _a.className, onClick = _a.onClick;
-    return (React.createElement("button", { className: clsx('str-chat__channel-search-bar-button', className), "data-testid": 'search-bar-button', onClick: onClick }, children));
-};
+const SearchBarButton = ({ children, className, onClick, }) => (React.createElement("button", { className: clsx('str-chat__channel-search-bar-button', className), "data-testid": 'search-bar-button', onClick: onClick }, children));
 // todo: add context menu control logic
-export var SearchBar = function (props) {
-    var activateSearch = props.activateSearch, AppMenu = props.AppMenu, _a = props.ClearInputIcon, ClearInputIcon = _a === void 0 ? XIcon : _a, exitSearch = props.exitSearch, _b = props.ExitSearchIcon, ExitSearchIcon = _b === void 0 ? ReturnIcon : _b, inputIsFocused = props.inputIsFocused, _c = props.MenuIcon, MenuIcon = _c === void 0 ? DefaultMenuIcon : _c, searchBarRef = props.searchBarRef, _d = props.SearchInput, SearchInput = _d === void 0 ? DefaultSearchInput : _d, _e = props.SearchInputIcon, SearchInputIcon = _e === void 0 ? DefaultSearchInputIcon : _e, inputProps = __rest(props, ["activateSearch", "AppMenu", "ClearInputIcon", "exitSearch", "ExitSearchIcon", "inputIsFocused", "MenuIcon", "searchBarRef", "SearchInput", "SearchInputIcon"]);
-    var _f = useState(false), menuIsOpen = _f[0], setMenuIsOpen = _f[1];
-    var appMenuRef = useRef(null);
-    useEffect(function () {
+export const SearchBar = (props) => {
+    const { activateSearch, AppMenu, ClearInputIcon = XIcon, exitSearch, ExitSearchIcon = ReturnIcon, inputIsFocused, MenuIcon = DefaultMenuIcon, searchBarRef, SearchInput = DefaultSearchInput, SearchInputIcon = DefaultSearchInputIcon, ...inputProps } = props;
+    const [menuIsOpen, setMenuIsOpen] = useState(false);
+    const appMenuRef = useRef(null);
+    useEffect(() => {
         if (!appMenuRef.current)
             return;
-        var handleKeyDown = function (event) {
+        const handleKeyDown = (event) => {
             if (menuIsOpen && event.key === 'Escape') {
                 setMenuIsOpen(false);
             }
         };
-        var clickListener = function (e) {
-            var _a;
+        const clickListener = (e) => {
             if (!(e.target instanceof HTMLElement) ||
                 !menuIsOpen ||
-                ((_a = appMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+                appMenuRef.current?.contains(e.target))
                 return;
             setMenuIsOpen(false);
         };
         document.addEventListener('keydown', handleKeyDown);
         document.addEventListener('click', clickListener);
-        return function () {
+        return () => {
             document.removeEventListener('keydown', handleKeyDown);
             document.removeEventListener('click', clickListener);
         };
     }, [menuIsOpen]);
-    useEffect(function () {
+    useEffect(() => {
         if (!props.inputRef.current)
             return;
-        var handleFocus = function () {
+        const handleFocus = () => {
             activateSearch();
         };
-        var handleBlur = function (e) {
+        const handleBlur = (e) => {
             e.stopPropagation(); // handle blur/focus state with React state
         };
         props.inputRef.current.addEventListener('focus', handleFocus);
         props.inputRef.current.addEventListener('blur', handleBlur);
-        return function () {
-            var _a, _b;
-            (_a = props.inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', handleFocus);
-            (_b = props.inputRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', handleBlur);
+        return () => {
+            props.inputRef.current?.removeEventListener('focus', handleFocus);
+            props.inputRef.current?.addEventListener('blur', handleBlur);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var handleClearClick = useCallback(function () {
-        var _a;
+    const handleClearClick = useCallback(() => {
         exitSearch();
-        (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputProps.inputRef.current?.focus();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var closeAppMenu = useCallback(function () { return setMenuIsOpen(false); }, []);
+    const closeAppMenu = useCallback(() => setMenuIsOpen(false), []);
     return (React.createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
         inputIsFocused ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--exit-search', onClick: exitSearch },
-            React.createElement(ExitSearchIcon, null))) : AppMenu ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--menu', onClick: function () { return setMenuIsOpen(function (prev) { return !prev; }); } },
+            React.createElement(ExitSearchIcon, null))) : AppMenu ? (React.createElement(SearchBarButton, { className: 'str-chat__channel-search-bar-button--menu', onClick: () => setMenuIsOpen((prev) => !prev) },
             React.createElement(MenuIcon, null))) : null,
         React.createElement("div", { className: clsx('str-chat__channel-search-input--wrapper', inputProps.query && 'str-chat__channel-search-input--wrapper-active') },
             React.createElement("div", { className: 'str-chat__channel-search-input--icon' },
                 React.createElement(SearchInputIcon, null)),
-            React.createElement(SearchInput, __assign({}, inputProps)),
+            React.createElement(SearchInput, { ...inputProps }),
             React.createElement("button", { className: 'str-chat__channel-search-input--clear-button', "data-testid": 'clear-input-button', disabled: !inputProps.query, onClick: handleClearClick },
                 React.createElement(ClearInputIcon, null))),
         menuIsOpen && AppMenu && (React.createElement("div", { ref: appMenuRef },

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

@@ -16,4 +16,3 @@ export type AdditionalSearchInputProps = {
 };
 export type SearchInputProps = AdditionalSearchInputProps & SearchInputController;
 export declare const SearchInput: (props: SearchInputProps) => React.JSX.Element;
-//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/ChannelSearch/SearchInput.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
-export 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.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 }));
+export const SearchInput = (props) => {
+    const { disabled, inputRef, onSearch, placeholder, query } = props;
+    const { t } = useTranslationContext('SearchInput');
+    return (React.createElement("input", { className: 'str-chat__channel-search-input', "data-testid": 'search-input', disabled: disabled, onChange: onSearch, placeholder: placeholder ?? t('Search'), ref: inputRef, type: 'text', value: query }));
 };

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

@@ -31,4 +31,3 @@ export type AdditionalSearchResultsProps<StreamChatGenerics extends DefaultStrea
 };
 export type SearchResultsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = AdditionalSearchResultsProps<StreamChatGenerics> & SearchResultsController<StreamChatGenerics>;
 export declare const SearchResults: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: SearchResultsProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=SearchResults.d.ts.map

package/dist/components/ChannelSearch/SearchResults.js

@@ -4,61 +4,55 @@ import { SearchIcon } from './icons';
 import { ChannelPreview } from '../ChannelPreview';
 import { isChannel } from './utils';
 import { Avatar } from '../Avatar';
-import { useChatContext, useTranslationContext } from '../../context';
-var DefaultSearchEmpty = function () {
-    var t = useTranslationContext('SearchResults').t;
+import { useTranslationContext } from '../../context';
+const DefaultSearchEmpty = () => {
+    const { t } = useTranslationContext('SearchResults');
     return (React.createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
         React.createElement(SearchIcon, null),
         t('No results found')));
 };
-var DefaultSearchResultsHeader = function (_a) {
-    var results = _a.results;
-    var t = useTranslationContext('SearchResultsHeader').t;
+const DefaultSearchResultsHeader = ({ results, }) => {
+    const { t } = useTranslationContext('SearchResultsHeader');
     return (React.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, SearchResultItem = props.SearchResultItem, selectResult = props.selectResult;
-    return (React.createElement(React.Fragment, null, results.map(function (result, index) { return (React.createElement(SearchResultItem, { focusedUser: focusedUser, index: index, key: index, result: result, selectResult: selectResult })); })));
+const DefaultSearchResultsList = (props) => {
+    const { focusedUser, results, SearchResultItem, selectResult } = props;
+    return (React.createElement(React.Fragment, null, results.map((result, index) => (React.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');
+const DefaultSearchResultItem = (props) => {
+    const { focusedUser, index, result, selectResult } = props;
+    const focused = focusedUser === index;
+    const className = clsx('str-chat__channel-search-result', focused && 'str-chat__channel-search-result--focused');
     if (isChannel(result)) {
-        var channel_1 = result;
-        return themeVersion === '2' ? (React.createElement(ChannelPreview, { channel: channel_1, className: className, onSelect: function () { return selectResult(channel_1); } })) : (React.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.createElement("div", { className: 'result-hashtag' }, "#"),
-            React.createElement("p", { className: 'channel-search__result-text' }, (_b = channel_1.data) === null || _b === void 0 ? void 0 : _b.name)));
+        const channel = result;
+        return (React.createElement(ChannelPreview, { channel: channel, className: className, onSelect: () => selectResult(channel) }));
     }
     else {
-        return (React.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.createElement(Avatar, { image: result.image, name: result.name || result.id, size: themeVersion === '2' ? 40 : undefined, user: result }),
+        return (React.createElement("button", { "aria-label": `Select User Channel: ${result.name || ''}`, className: className, "data-testid": 'channel-search-result-user', onClick: () => selectResult(result), role: 'option' },
+            React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', image: result.image, name: result.name || result.id, user: result }),
             React.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 t = useTranslationContext('ResultsContainer').t;
-    return (React.createElement("div", { "aria-label": t('aria/Channel search results'), className: clsx("str-chat__channel-search-container str-chat__channel-search-result-list", popupResults ? 'popup' : 'inline') }, children));
+const ResultsContainer = ({ children, popupResults, }) => {
+    const { t } = useTranslationContext('ResultsContainer');
+    return (React.createElement("div", { "aria-label": t('aria/Channel search results'), className: clsx(`str-chat__channel-search-result-list`, popupResults ? 'popup' : 'inline') }, children));
 };
-export 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 = useState(), focusedResult = _e[0], setFocusedResult = _e[1];
-    var handleKeyDown = useCallback(function (event) {
+export const SearchResults = (props) => {
+    const { popupResults, results, searching, SearchEmpty = DefaultSearchEmpty, SearchResultsHeader = DefaultSearchResultsHeader, SearchLoading, SearchResultItem = DefaultSearchResultItem, SearchResultsList = DefaultSearchResultsList, selectResult, } = props;
+    const { t } = useTranslationContext('SearchResults');
+    const [focusedResult, setFocusedResult] = useState();
+    const handleKeyDown = useCallback((event) => {
         if (event.key === 'ArrowUp') {
-            setFocusedResult(function (prevFocused) {
+            setFocusedResult((prevFocused) => {
                 if (prevFocused === undefined)
                     return 0;
                 return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
             });
         }
         if (event.key === 'ArrowDown') {
-            setFocusedResult(function (prevFocused) {
+            setFocusedResult((prevFocused) => {
                 if (prevFocused === undefined)
                     return 0;
                 return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
@@ -74,9 +68,9 @@ export var SearchResults = function (props) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [focusedResult]);
-    useEffect(function () {
+    useEffect(() => {
         document.addEventListener('keydown', handleKeyDown, false);
-        return function () { return document.removeEventListener('keydown', handleKeyDown); };
+        return () => document.removeEventListener('keydown', handleKeyDown);
     }, [handleKeyDown]);
     if (searching) {
         return (React.createElement(ResultsContainer, { popupResults: popupResults }, SearchLoading ? (React.createElement(SearchLoading, null)) : (React.createElement("div", { className: 'str-chat__channel-search-container-searching', "data-testid": 'search-in-progress-indicator' }, t('Searching...')))));

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

@@ -50,4 +50,3 @@ export type ChannelSearchControllerParams<StreamChatGenerics extends DefaultStre
     setChannels?: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>;
 };
 export declare const useChannelSearch: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelType, clearSearchOnClickOutside, disabled, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs, searchForChannels, searchFunction, searchQueryParams, setChannels, }: ChannelSearchControllerParams<StreamChatGenerics>) => SearchController<StreamChatGenerics>;
-//# sourceMappingURL=useChannelSearch.d.ts.map

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -1,21 +1,19 @@
-import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import debounce from 'lodash.debounce';
 import uniqBy from 'lodash.uniqby';
 import { isChannel } from '../utils';
 import { useChatContext } from '../../../context/ChatContext';
-export 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.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchDebounceIntervalMs, searchDebounceIntervalMs = _e === void 0 ? 300 : _e, _f = _a.searchForChannels, searchForChannels = _f === void 0 ? false : _f, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
-    var _g = useChatContext('useChannelSearch'), client = _g.client, setActiveChannel = _g.setActiveChannel, themeVersion = _g.themeVersion;
-    var _h = useState(false), inputIsFocused = _h[0], setInputIsFocused = _h[1];
-    var _j = useState(''), query = _j[0], setQuery = _j[1];
-    var _k = useState([]), results = _k[0], setResults = _k[1];
-    var _l = useState(false), searching = _l[0], setSearching = _l[1];
-    var searchQueryPromiseInProgress = useRef();
-    var shouldIgnoreQueryResults = useRef(false);
-    var inputRef = useRef(null);
-    var searchBarRef = useRef(null);
-    var clearState = useCallback(function () {
+export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClickOutside = true, disabled = false, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs = 300, searchForChannels = false, searchFunction, searchQueryParams, setChannels, }) => {
+    const { client, setActiveChannel } = useChatContext('useChannelSearch');
+    const [inputIsFocused, setInputIsFocused] = useState(false);
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const searchQueryPromiseInProgress = useRef();
+    const shouldIgnoreQueryResults = useRef(false);
+    const inputRef = useRef(null);
+    const searchBarRef = useRef(null);
+    const clearState = useCallback(() => {
         setQuery('');
         setResults([]);
         setSearching(false);
@@ -23,26 +21,22 @@ export var useChannelSearch = function (_a) {
             shouldIgnoreQueryResults.current = true;
         }
     }, []);
-    var activateSearch = useCallback(function () {
+    const activateSearch = useCallback(() => {
         setInputIsFocused(true);
     }, []);
-    var exitSearch = useCallback(function () {
-        var _a;
+    const exitSearch = useCallback(() => {
         setInputIsFocused(false);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        inputRef.current?.blur();
         clearState();
-        onSearchExit === null || onSearchExit === void 0 ? void 0 : onSearchExit();
+        onSearchExit?.();
     }, [clearState, onSearchExit]);
-    useEffect(function () {
+    useEffect(() => {
         if (disabled)
             return;
-        var clickListener = function (event) {
-            var _a, _b;
+        const clickListener = (event) => {
             if (!(event.target instanceof HTMLElement))
                 return;
-            var isInputClick = themeVersion === '2'
-                ? (_a = searchBarRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)
-                : (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
+            const isInputClick = searchBarRef.current?.contains(event.target);
             if (isInputClick)
                 return;
             if ((inputIsFocused && !query) || clearSearchOnClickOutside) {
@@ -50,125 +44,108 @@ export var useChannelSearch = function (_a) {
             }
         };
         document.addEventListener('click', clickListener);
-        return function () { return document.removeEventListener('click', clickListener); };
+        return () => document.removeEventListener('click', clickListener);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
-    useEffect(function () {
+    useEffect(() => {
         if (!inputRef.current || disabled)
             return;
-        var handleKeyDown = function (event) {
+        const handleKeyDown = (event) => {
             if (event.key === 'Escape')
                 return exitSearch();
         };
         inputRef.current.addEventListener('keydown', handleKeyDown);
-        return function () {
-            var _a;
+        return () => {
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
+            inputRef.current?.removeEventListener('keydown', handleKeyDown);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disabled]);
-    var selectResult = useCallback(function (result) { return __awaiter(void 0, void 0, void 0, function () {
-        var selectedChannel, newChannel;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!client.userID)
-                        return [2 /*return*/];
-                    if (!onSelectResult) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onSelectResult({
-                            setQuery: setQuery,
-                            setResults: setResults,
-                            setSearching: setSearching,
-                        }, result)];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-                case 2:
-                    if (!isChannel(result)) return [3 /*break*/, 3];
-                    setActiveChannel(result);
-                    selectedChannel = result;
-                    return [3 /*break*/, 5];
-                case 3:
-                    newChannel = client.channel(channelType, { members: [client.userID, result.id] });
-                    return [4 /*yield*/, newChannel.watch()];
-                case 4:
-                    _a.sent();
-                    setActiveChannel(newChannel);
-                    selectedChannel = newChannel;
-                    _a.label = 5;
-                case 5:
-                    setChannels === null || setChannels === void 0 ? void 0 : setChannels(function (channels) { return uniqBy(__spreadArray([selectedChannel], channels, true), 'cid'); });
-                    if (clearSearchOnClickOutside) {
-                        exitSearch();
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); }, 
+    const selectResult = useCallback(async (result) => {
+        if (!client.userID)
+            return;
+        if (onSelectResult) {
+            await onSelectResult({
+                setQuery,
+                setResults,
+                setSearching,
+            }, result);
+            return;
+        }
+        let selectedChannel;
+        if (isChannel(result)) {
+            setActiveChannel(result);
+            selectedChannel = result;
+        }
+        else {
+            const newChannel = client.channel(channelType, { members: [client.userID, result.id] });
+            await newChannel.watch();
+            setActiveChannel(newChannel);
+            selectedChannel = newChannel;
+        }
+        setChannels?.((channels) => uniqBy([selectedChannel, ...channels], 'cid'));
+        if (clearSearchOnClickOutside) {
+            exitSearch();
+        }
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
-    var getChannels = useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
-        var results, userQueryPromise, users, channelQueryPromise, _a, channels, users, error_1;
-        var _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
-                case 0:
-                    results = [];
-                    _h.label = 1;
-                case 1:
-                    _h.trys.push([1, 6, , 7]);
-                    userQueryPromise = client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options));
-                    if (!!searchForChannels) return [3 /*break*/, 3];
-                    searchQueryPromiseInProgress.current = userQueryPromise;
-                    return [4 /*yield*/, searchQueryPromiseInProgress.current];
-                case 2:
-                    users = (_h.sent()).users;
-                    results = users;
-                    return [3 /*break*/, 5];
-                case 3:
-                    channelQueryPromise = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
-                    searchQueryPromiseInProgress.current = Promise.all([
-                        channelQueryPromise,
-                        userQueryPromise,
-                    ]);
-                    return [4 /*yield*/, searchQueryPromiseInProgress.current];
-                case 4:
-                    _a = _h.sent(), channels = _a[0], users = _a[1].users;
-                    results = __spreadArray(__spreadArray([], channels, true), users, true);
-                    _h.label = 5;
-                case 5: return [3 /*break*/, 7];
-                case 6:
-                    error_1 = _h.sent();
-                    console.error(error_1);
-                    return [3 /*break*/, 7];
-                case 7:
-                    setSearching(false);
-                    if (!shouldIgnoreQueryResults.current) {
-                        setResults(results);
-                    }
-                    else {
-                        shouldIgnoreQueryResults.current = false;
-                    }
-                    searchQueryPromiseInProgress.current = undefined;
-                    return [2 /*return*/];
+    const getChannels = useCallback(async (text) => {
+        let results = [];
+        try {
+            const userQueryPromise = client.queryUsers(
+            // @ts-expect-error
+            {
+                $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
+                id: { $ne: client.userID },
+                ...searchQueryParams?.userFilters?.filters,
+            }, { id: 1, ...searchQueryParams?.userFilters?.sort }, { limit: 8, ...searchQueryParams?.userFilters?.options });
+            if (!searchForChannels) {
+                searchQueryPromiseInProgress.current = userQueryPromise;
+                const { users } = await searchQueryPromiseInProgress.current;
+                results = users;
             }
-        });
-    }); }, [client, searchForChannels, searchQueryParams]);
+            else {
+                const channelQueryPromise = client.queryChannels(
+                // @ts-expect-error
+                {
+                    name: { $autocomplete: text },
+                    ...searchQueryParams?.channelFilters?.filters,
+                }, searchQueryParams?.channelFilters?.sort || {}, { limit: 5, ...searchQueryParams?.channelFilters?.options });
+                searchQueryPromiseInProgress.current = Promise.all([
+                    channelQueryPromise,
+                    userQueryPromise,
+                ]);
+                const [channels, { users }] = await searchQueryPromiseInProgress.current;
+                results = [...channels, ...users];
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+        setSearching(false);
+        if (!shouldIgnoreQueryResults.current) {
+            setResults(results);
+        }
+        else {
+            shouldIgnoreQueryResults.current = false;
+        }
+        searchQueryPromiseInProgress.current = undefined;
+    }, [client, searchForChannels, searchQueryParams]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [
+    const scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [
         getChannels,
         searchDebounceIntervalMs,
     ]);
-    var onSearch = useCallback(function (event) {
+    const onSearch = useCallback((event) => {
         event.preventDefault();
         if (disabled)
             return;
         if (searchFunction) {
             searchFunction({
-                setQuery: setQuery,
-                setResults: setResults,
-                setSearching: setSearching,
+                setQuery,
+                setResults,
+                setSearching,
             }, event);
         }
         else if (event.target.value) {
@@ -180,19 +157,19 @@ export var useChannelSearch = function (_a) {
             clearState();
             scheduleGetChannels.cancel();
         }
-        onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
+        onSearchCallback?.(event);
     }, [clearState, disabled, scheduleGetChannels, onSearchCallback, searchFunction]);
     return {
-        activateSearch: activateSearch,
-        clearState: clearState,
-        exitSearch: exitSearch,
-        inputIsFocused: inputIsFocused,
-        inputRef: inputRef,
-        onSearch: onSearch,
-        query: query,
-        results: results,
-        searchBarRef: searchBarRef,
-        searching: searching,
-        selectResult: selectResult,
+        activateSearch,
+        clearState,
+        exitSearch,
+        inputIsFocused,
+        inputRef,
+        onSearch,
+        query,
+        results,
+        searchBarRef,
+        searching,
+        selectResult,
     };
 };

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

@@ -4,4 +4,3 @@ export declare const MenuIcon: () => React.JSX.Element;
 export declare const ReturnIcon: () => React.JSX.Element;
 export declare const XIcon: () => React.JSX.Element;
 export declare const SearchIcon: ({ className }: IconProps) => React.JSX.Element;
-//# sourceMappingURL=icons.d.ts.map

package/dist/components/ChannelSearch/icons.js

@@ -1,12 +1,9 @@
 import React from 'react';
-export var MenuIcon = function () { return (React.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.createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
-export var ReturnIcon = function () { return (React.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.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' }))); };
-export var XIcon = function () { return (React.createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-    React.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' }))); };
-export var SearchIcon = function (_a) {
-    var className = _a.className;
-    return (React.createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-        React.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' })));
-};
+export const MenuIcon = () => (React.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.createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' })));
+export const ReturnIcon = () => (React.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.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' })));
+export const XIcon = () => (React.createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+    React.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' })));
+export const SearchIcon = ({ className }) => (React.createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+    React.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' })));

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

@@ -4,4 +4,3 @@ export * from './SearchInput';
 export * from './SearchResults';
 export * from './utils';
 export type { ChannelSearchFunctionParams, ChannelSearchParams } from './hooks/useChannelSearch';
-//# sourceMappingURL=index.d.ts.map

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

@@ -2,4 +2,3 @@ import type { Channel, UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelOrUserResponse<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Channel<StreamChatGenerics> | UserResponse<StreamChatGenerics>;
 export declare const isChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(output: ChannelOrUserResponse<StreamChatGenerics>) => output is Channel<StreamChatGenerics>;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/ChannelSearch/utils.js

@@ -1 +1 @@
-export var isChannel = function (output) { return output.cid != null; };
+export const isChannel = (output) => output.cid != null;