stream-chat-react 12.9.0 → 12.11.0

package/dist/components/ChannelList/ChannelList.js

@@ -3,10 +3,10 @@ import clsx from 'clsx';
 import { ChannelListMessenger } from './ChannelListMessenger';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
 import { useMobileNavigation } from './hooks/useMobileNavigation';
-import { usePaginatedChannels } from './hooks/usePaginatedChannels';
+import { usePaginatedChannels, } from './hooks/usePaginatedChannels';
 import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
-import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
+import { ChannelPreview, } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator, } from '../EmptyStateIndicator';
 import { LoadingChannels } from '../Loading/LoadingChannels';
@@ -14,12 +14,12 @@ import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';
 import { NullComponent } from '../UtilityComponents';
 import { ChannelListContextProvider } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
-import { useChannelListShape, usePrepareShapeHandlers } from './hooks/useChannelListShape';
+import { useChannelListShape, usePrepareShapeHandlers, } from './hooks/useChannelListShape';
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 const UnMemoizedChannelList = (props) => {
-    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels = true, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters = {}, getLatestMessagePreview, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
+    const { additionalChannelSearchProps, allowNewMessagesFromUnfilteredChannels = true, Avatar = DefaultAvatar, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters = {}, getLatestMessagePreview, List = ChannelListMessenger, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
     const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
     const channelListRef = useRef(null);
     const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -29,15 +29,18 @@ const UnMemoizedChannelList = (props) => {
      * If customActiveChannel prop is absent, then set the first channel in list as active channel.
      */
     const activeChannelHandler = async (channels, setChannels) => {
-        if (!channels.length || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
+        if (!channels.length ||
+            channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
             return;
         }
         if (customActiveChannel) {
             // FIXME: this is wrong...
             let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
             if (!customActiveChannelObject) {
-                //@ts-expect-error
-                [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
+                //@ts-expect-error valid query
+                [customActiveChannelObject] = await client.queryChannels({
+                    id: customActiveChannel,
+                });
             }
             if (customActiveChannelObject) {
                 setActiveChannel(customActiveChannelObject, watchers);
@@ -70,7 +73,9 @@ const UnMemoizedChannelList = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
-    const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
+    const loadedChannels = channelRenderFilterFn
+        ? channelRenderFilterFn(channels)
+        : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     const { customHandler, defaultHandler } = usePrepareShapeHandlers({
         allowNewMessagesFromUnfilteredChannels,

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

@@ -27,7 +27,7 @@ type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> = BaseParamet
 } & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
 type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelHiddenParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
-type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG> & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
 type HandleChannelTruncatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleUserPresenceChangedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG>;
@@ -36,7 +36,7 @@ export declare const useChannelListShapeDefaults: <SCG extends ExtendableGeneric
     handleChannelHidden: (p: HandleChannelHiddenParameters<SCG>) => void;
     handleChannelTruncated: ({ customHandler, event, setChannels }: HandleChannelTruncatedParameters<SCG>) => void;
     handleChannelUpdated: ({ customHandler, event, setChannels }: HandleChannelUpdatedParameters<SCG>) => void;
-    handleChannelVisible: ({ customHandler, event, setChannels }: HandleChannelVisibleParameters<SCG>) => Promise<void>;
+    handleChannelVisible: ({ customHandler, event, filters, setChannels, sort, }: HandleChannelVisibleParameters<SCG>) => Promise<void>;
     handleMemberUpdated: ({ event, filters, lockChannelOrder, setChannels, sort, }: HandleMemberUpdatedParameters<SCG>) => void;
     handleMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort, }: HandleMessageNewParameters<SCG>) => void;
     handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;

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

@@ -1,6 +1,5 @@
 // const defaults = useChannelListShapeDefaults();
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import uniqBy from 'lodash.uniqby';
 import { extractSortValue, findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
 import { useChatContext } from '../../../context';
 import { getChannel } from '../../../utils';
@@ -77,7 +76,6 @@ export const useChannelListShapeDefaults = () => {
         setChannels((channels) => moveChannelUpwards({
             channels,
             channelToMove: channel,
-            channelToMoveIndexWithinChannels: -1,
             sort,
         }));
     }, [client]);
@@ -103,7 +101,6 @@ export const useChannelListShapeDefaults = () => {
         setChannels((channels) => moveChannelUpwards({
             channels,
             channelToMove: channel,
-            channelToMoveIndexWithinChannels: -1,
             sort,
         }));
     }, [client]);
@@ -114,7 +111,9 @@ export const useChannelListShapeDefaults = () => {
         setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
     }, []);
     const handleMemberUpdated = useCallback(({ event, filters, lockChannelOrder, setChannels, sort, }) => {
-        if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
+        if (!event.member?.user ||
+            event.member.user.id !== client.userID ||
+            !event.channel_type) {
             return;
         }
         const channelType = event.channel_type;
@@ -159,18 +158,27 @@ export const useChannelListShapeDefaults = () => {
     }, [client]);
     const handleChannelDeleted = useCallback((p) => shared(p), []);
     const handleChannelHidden = useCallback((p) => shared(p), []);
-    const handleChannelVisible = useCallback(async ({ customHandler, event, setChannels }) => {
+    const handleChannelVisible = useCallback(async ({ customHandler, event, filters, setChannels, sort, }) => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        if (event.type && event.channel_type && event.channel_id) {
-            const channel = await getChannel({
-                client,
-                id: event.channel_id,
-                type: event.channel_type,
-            });
-            setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        if (!event.channel) {
+            return;
+        }
+        const channel = await getChannel({
+            client,
+            id: event.channel.id,
+            type: event.channel.type,
+        });
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+        if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {
+            return;
         }
+        setChannels((channels) => moveChannelUpwards({
+            channels,
+            channelToMove: channel,
+            sort,
+        }));
     }, [client]);
     const handleChannelTruncated = useCallback(({ customHandler, event, setChannels }) => {
         if (typeof customHandler === 'function') {
@@ -193,7 +201,8 @@ export const useChannelListShapeDefaults = () => {
                 newChannels[channelIndex].data = {
                     ...event.channel,
                     hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
-                    own_capabilities: event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities,
+                    own_capabilities: event.channel?.own_capabilities ??
+                        newChannels[channelIndex].data?.own_capabilities,
                 };
                 return [...newChannels];
             }
@@ -245,8 +254,8 @@ export const useChannelListShapeDefaults = () => {
 };
 export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort, }) => {
     const defaults = useChannelListShapeDefaults();
-    const defaultHandleChannelListShapeRef = useRef();
-    const customHandleChannelListShapeRef = useRef();
+    const defaultHandleChannelListShapeRef = useRef(undefined);
+    const customHandleChannelListShapeRef = useRef(undefined);
     customHandleChannelListShapeRef.current = (event) => {
         // @ts-expect-error can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
         customHandleChannelListShape?.({ defaults, event, setChannels });
@@ -300,16 +309,34 @@ export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels
                 });
                 break;
             case 'channel.hidden':
-                defaults.handleChannelHidden({ customHandler: onChannelHidden, event, setChannels });
+                defaults.handleChannelHidden({
+                    customHandler: onChannelHidden,
+                    event,
+                    setChannels,
+                });
                 break;
             case 'channel.visible':
-                defaults.handleChannelVisible({ customHandler: onChannelVisible, event, setChannels });
+                defaults.handleChannelVisible({
+                    customHandler: onChannelVisible,
+                    event,
+                    filters,
+                    setChannels,
+                    sort,
+                });
                 break;
             case 'channel.truncated':
-                defaults.handleChannelTruncated({ customHandler: onChannelTruncated, event, setChannels });
+                defaults.handleChannelTruncated({
+                    customHandler: onChannelTruncated,
+                    event,
+                    setChannels,
+                });
                 break;
             case 'channel.updated':
-                defaults.handleChannelUpdated({ customHandler: onChannelUpdated, event, setChannels });
+                defaults.handleChannelUpdated({
+                    customHandler: onChannelUpdated,
+                    event,
+                    setChannels,
+                });
                 break;
             case 'user.presence.changed':
                 defaults.handleUserPresenceChanged({ event, setChannels });

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

@@ -11,7 +11,8 @@ export const useChannelUpdatedListener = (setChannels, customHandler, forceUpdat
                     newChannels[channelIndex].data = {
                         ...event.channel,
                         hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
-                        own_capabilities: event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities,
+                        own_capabilities: event.channel?.own_capabilities ??
+                            newChannels[channelIndex].data?.own_capabilities,
                     };
                     return [...newChannels];
                 }

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

@@ -12,7 +12,9 @@ export const useMessageNewListener = (setChannels, customHandler, lockChannelOrd
             else {
                 setChannels((channels) => {
                     const channelInList = channels.filter((channel) => channel.cid === event.cid).length > 0;
-                    if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
+                    if (!channelInList &&
+                        allowNewMessagesFromUnfilteredChannels &&
+                        event.channel_type) {
                         const channel = client.channel(event.channel_type, event.channel_id);
                         return uniqBy([channel, ...channels], 'cid');
                     }

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

@@ -1 +1 @@
-export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement>, navOpen: boolean, closeMobileNav?: () => void) => void;
+export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement | null>, navOpen: boolean, closeMobileNav?: () => void) => void;

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

@@ -9,10 +9,10 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
     const { channelsQueryState: { error, setError, setQueryInProgress }, } = useChatContext('usePaginatedChannels');
     const [channels, setChannels] = useState([]);
     const [hasNextPage, setHasNextPage] = useState(true);
-    const lastRecoveryTimestamp = useRef();
+    const lastRecoveryTimestamp = useRef(undefined);
     const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
         ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
-        : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
+        : (recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS);
     // memoize props
     const filterString = useMemo(() => JSON.stringify(filters), [filters]);
     const sortString = useMemo(() => JSON.stringify(sort), [sort]);
@@ -64,7 +64,9 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
         const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current
             ? now - lastRecoveryTimestamp.current
             : 0;
-        if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) {
+        if (!isFirstRecovery &&
+            timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval &&
+            !error) {
             return;
         }
         lastRecoveryTimestamp.current = now;

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

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
-export function useSelectedChannelState({ channel, stateChangeEventKeys = ['all'], selector, }) {
+export function useSelectedChannelState({ channel, selector, stateChangeEventKeys = ['all'], }) {
     const subscribe = useCallback((onStoreChange) => {
         if (!channel)
             return noop;

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -6,9 +6,9 @@ import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
 import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
+import { useMessageDeliveryStatus, } from './hooks/useMessageDeliveryStatus';
 export const ChannelPreview = (props) => {
-    const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, } = props;
+    const { channel, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, Preview = ChannelPreviewMessenger, } = props;
     const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel, } = useChatContext('ChannelPreview');
     const { t, userLanguage } = useTranslationContext('ChannelPreview');
     const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -5,7 +5,7 @@ import { Avatar as DefaultAvatar } from '../Avatar';
 import { useComponentContext } from '../../context';
 const UnMemoizedChannelPreviewMessenger = (props) => {
     const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, groupChannelDisplayInfo, latestMessagePreview, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
-    const { ChannelPreviewActionButtons = DefaultChannelPreviewActionButtons, } = useComponentContext();
+    const { ChannelPreviewActionButtons = DefaultChannelPreviewActionButtons } = useComponentContext();
     const channelPreviewButton = useRef(null);
     const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
     const onSelectChannel = (e) => {

package/dist/components/ChannelPreview/icons.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 export const Icon = {
     ArchiveBox: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--archive-box', fill: 'currentColor', viewBox: '0 0 512 512', xmlns: 'http://www.w3.org/2000/svg', ...props },

package/dist/components/ChannelPreview/utils.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-export const renderPreviewText = (text) => React.createElement(ReactMarkdown, { skipHtml: true }, text);
+export const renderPreviewText = (text) => (React.createElement(ReactMarkdown, { skipHtml: true }, text));
 const getLatestPollVote = (latestVotesByOption) => {
     let latestVote;
     for (const optionVotes of Object.values(latestVotesByOption)) {
@@ -27,7 +27,7 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en', isMessa
         if (!poll.vote_count) {
             const createdBy = poll.created_by?.id === channel.getClient().userID
                 ? t('You')
-                : poll.created_by?.name ?? t('Poll');
+                : (poll.created_by?.name ?? t('Poll'));
             return t('📊 {{createdBy}} created: {{ pollName}}', {
                 createdBy,
                 pollName: poll.name,
@@ -41,7 +41,7 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en', isMessa
                     pollOptionText: option.text,
                     votedBy: latestVote?.user?.id === channel.getClient().userID
                         ? t('You')
-                        : latestVote.user?.name ?? t('Poll'),
+                        : (latestVote.user?.name ?? t('Poll')),
                 });
             }
         }

package/dist/components/ChannelSearch/ChannelSearch.js

@@ -1,13 +1,15 @@
 import clsx from 'clsx';
 import React from 'react';
-import { useChannelSearch } from './hooks/useChannelSearch';
+import { useChannelSearch, } from './hooks/useChannelSearch';
 import { SearchBar as DefaultSearchBar } from './SearchBar';
 import { SearchInput as DefaultSearchInput, } from './SearchInput';
 import { SearchResults } from './SearchResults';
 const UnMemoizedChannelSearch = (props) => {
-    const { AppMenu, ClearInputIcon, ExitSearchIcon, MenuIcon, placeholder, popupResults = false, SearchBar = DefaultSearchBar, SearchEmpty, SearchInput = DefaultSearchInput, SearchLoading, SearchInputIcon, SearchResultItem, SearchResultsList, SearchResultsHeader, ...channelSearchParams } = props;
+    const { AppMenu, ClearInputIcon, ExitSearchIcon, MenuIcon, placeholder, popupResults = false, SearchBar = DefaultSearchBar, SearchEmpty, SearchInput = DefaultSearchInput, SearchInputIcon, SearchLoading, SearchResultItem, SearchResultsHeader, SearchResultsList, ...channelSearchParams } = props;
     const { activateSearch, clearState, exitSearch, inputIsFocused, inputRef, onSearch, query, results, searchBarRef, searching, selectResult, } = useChannelSearch(channelSearchParams);
-    return (React.createElement("div", { className: clsx('str-chat__channel-search', popupResults ? 'str-chat__channel-search--popup' : 'str-chat__channel-search--inline', {
+    return (React.createElement("div", { className: clsx('str-chat__channel-search', popupResults
+            ? 'str-chat__channel-search--popup'
+            : 'str-chat__channel-search--inline', {
             'str-chat__channel-search--with-results': results.length > 0,
         }), "data-testid": 'channel-search' },
         React.createElement(SearchBar, { 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, SearchInputIcon: SearchInputIcon }),

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

@@ -11,7 +11,7 @@ export type SearchBarController = {
     /** Flag determining whether the search input is focused */
     inputIsFocused: boolean;
     /** Ref object for the input wrapper in the SearchBar */
-    searchBarRef: React.RefObject<HTMLDivElement>;
+    searchBarRef: React.RefObject<HTMLDivElement | null>;
 };
 export type AdditionalSearchBarProps = {
     /** Application menu to be displayed  when clicked on MenuIcon */

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

@@ -2,7 +2,7 @@ import React from 'react';
 export type SearchInputController = {
     /** Clears the channel search state */
     clearState: () => void;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     /** Search input change handler */
     onSearch: React.ChangeEventHandler<HTMLInputElement>;
     /** Current search string */

package/dist/components/ChannelSearch/SearchResults.js

@@ -40,7 +40,7 @@ const ResultsContainer = ({ children, popupResults, }) => {
     return (React.createElement("div", { "aria-label": t('aria/Channel search results'), className: clsx(`str-chat__channel-search-result-list`, popupResults ? 'popup' : 'inline') }, children));
 };
 export const SearchResults = (props) => {
-    const { popupResults, results, searching, SearchEmpty = DefaultSearchEmpty, SearchResultsHeader = DefaultSearchResultsHeader, SearchLoading, SearchResultItem = DefaultSearchResultItem, SearchResultsList = DefaultSearchResultsList, selectResult, } = props;
+    const { popupResults, results, SearchEmpty = DefaultSearchEmpty, searching, SearchLoading, SearchResultItem = DefaultSearchResultItem, SearchResultsHeader = DefaultSearchResultsHeader, SearchResultsList = DefaultSearchResultsList, selectResult, } = props;
     const { t } = useTranslationContext('SearchResults');
     const [focusedResult, setFocusedResult] = useState();
     const handleKeyDown = useCallback((event) => {

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

@@ -38,8 +38,10 @@ export type ChannelSearchParams<StreamChatGenerics extends DefaultStreamChatGene
     onSelectResult?: (params: ChannelSearchFunctionParams<StreamChatGenerics>, result: ChannelOrUserResponse<StreamChatGenerics>) => Promise<void> | void;
     /** The number of milliseconds to debounce the search query. The default interval is 200ms. */
     searchDebounceIntervalMs?: number;
-    /** Boolean to search for channels as well as users in the server query, default is false and just searches for users */
+    /** Boolean to search for channels in the server query, default is false and just searches for users */
     searchForChannels?: boolean;
+    /** Boolean to search for users in the server query, default is true and just searches for users */
+    searchForUsers?: boolean;
     /** Custom search function to override the default implementation */
     searchFunction?: (params: ChannelSearchFunctionParams<StreamChatGenerics>, event: React.BaseSyntheticEvent) => Promise<void> | void;
     /** Object containing filters/sort/options overrides for user / channel search */
@@ -49,4 +51,4 @@ export type ChannelSearchControllerParams<StreamChatGenerics extends DefaultStre
     /** Set the array of channels displayed in the ChannelList */
     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>;
+export declare const useChannelSearch: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelType, clearSearchOnClickOutside, disabled, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs, searchForChannels, searchForUsers, searchFunction, searchQueryParams, setChannels, }: ChannelSearchControllerParams<StreamChatGenerics>) => SearchController<StreamChatGenerics>;

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

@@ -3,13 +3,13 @@ import debounce from 'lodash.debounce';
 import uniqBy from 'lodash.uniqby';
 import { isChannel } from '../utils';
 import { useChatContext } from '../../../context/ChatContext';
-export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClickOutside = true, disabled = false, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs = 300, searchForChannels = false, searchFunction, searchQueryParams, setChannels, }) => {
+export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClickOutside = true, disabled = false, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs = 300, searchForChannels = false, searchForUsers = true, 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 searchQueryPromiseInProgress = useRef(false);
     const shouldIgnoreQueryResults = useRef(false);
     const inputRef = useRef(null);
     const searchBarRef = useRef(null);
@@ -17,9 +17,7 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
         setQuery('');
         setResults([]);
         setSearching(false);
-        if (searchQueryPromiseInProgress.current) {
-            shouldIgnoreQueryResults.current = true;
-        }
+        shouldIgnoreQueryResults.current = searchQueryPromiseInProgress.current;
     }, []);
     const activateSearch = useCallback(() => {
         setInputIsFocused(true);
@@ -45,7 +43,6 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
         };
         document.addEventListener('click', clickListener);
         return () => document.removeEventListener('click', clickListener);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
     useEffect(() => {
         if (!inputRef.current || disabled)
@@ -78,7 +75,9 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
             selectedChannel = result;
         }
         else {
-            const newChannel = client.channel(channelType, { members: [client.userID, result.id] });
+            const newChannel = client.channel(channelType, {
+                members: [client.userID, result.id],
+            });
             await newChannel.watch();
             setActiveChannel(newChannel);
             selectedChannel = newChannel;
@@ -89,34 +88,52 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
+    [
+        clearSearchOnClickOutside,
+        client,
+        exitSearch,
+        onSelectResult,
+        setActiveChannel,
+        setChannels,
+    ]);
     const getChannels = useCallback(async (text) => {
+        if (!searchForChannels && !searchForUsers)
+            return;
         let results = [];
+        const promises = [];
         try {
-            const userQueryPromise = client.queryUsers(
-            // @ts-expect-error
-            {
-                $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
-                ...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.filter((u) => u.id !== client.user?.id);
-            }
-            else {
-                const channelQueryPromise = client.queryChannels(
-                // @ts-expect-error
+            if (searchForChannels) {
+                promises.push(client.queryChannels(
+                // @ts-expect-error valid query
                 {
+                    members: { $in: [client.userID] },
                     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.filter((u) => u.id !== client.user?.id)];
+                }, searchQueryParams?.channelFilters?.sort || {}, { limit: 5, ...searchQueryParams?.channelFilters?.options }));
+            }
+            if (searchForUsers) {
+                promises.push(client.queryUsers(
+                // @ts-expect-error valid query
+                {
+                    $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
+                    ...searchQueryParams?.userFilters?.filters,
+                }, { id: 1, ...searchQueryParams?.userFilters?.sort }, { limit: 8, ...searchQueryParams?.userFilters?.options }));
+            }
+            if (promises.length) {
+                searchQueryPromiseInProgress.current = true;
+                const resolved = await Promise.all(promises);
+                if (searchForChannels && searchForUsers) {
+                    const [channels, { users }] = resolved;
+                    results = [...channels, ...users.filter((u) => u.id !== client.user?.id)];
+                }
+                else if (searchForChannels) {
+                    const [channels] = resolved;
+                    results = [...channels];
+                }
+                else if (searchForUsers) {
+                    const [{ users }] = resolved;
+                    results = [...users.filter((u) => u.id !== client.user?.id)];
+                }
             }
         }
         catch (error) {
@@ -129,13 +146,10 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
         else {
             shouldIgnoreQueryResults.current = false;
         }
-        searchQueryPromiseInProgress.current = undefined;
-    }, [client, searchForChannels, searchQueryParams]);
+        searchQueryPromiseInProgress.current = false;
+    }, [client, searchForChannels, searchForUsers, searchQueryParams]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [
-        getChannels,
-        searchDebounceIntervalMs,
-    ]);
+    const scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [getChannels, searchDebounceIntervalMs]);
     const onSearch = useCallback((event) => {
         event.preventDefault();
         if (disabled)
@@ -147,6 +161,9 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
                 setSearching,
             }, event);
         }
+        else if (!searchForChannels && !searchForUsers) {
+            return;
+        }
         else if (event.target.value) {
             setSearching(true);
             setQuery(event.target.value);
@@ -157,7 +174,15 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
             scheduleGetChannels.cancel();
         }
         onSearchCallback?.(event);
-    }, [clearState, disabled, scheduleGetChannels, onSearchCallback, searchFunction]);
+    }, [
+        clearState,
+        disabled,
+        scheduleGetChannels,
+        onSearchCallback,
+        searchForChannels,
+        searchForUsers,
+        searchFunction,
+    ]);
     return {
         activateSearch,
         clearState,

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

@@ -3,4 +3,4 @@ export * from './SearchBar';
 export * from './SearchInput';
 export * from './SearchResults';
 export * from './utils';
-export type { ChannelSearchFunctionParams, ChannelSearchParams } from './hooks/useChannelSearch';
+export type { ChannelSearchFunctionParams, ChannelSearchParams, } from './hooks/useChannelSearch';

package/dist/components/Chat/hooks/useChat.js

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.9.0-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.11.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();
@@ -50,7 +50,9 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         let userLanguage = client.user?.language;
         if (!userLanguage) {
             const browserLanguage = window.navigator.language.slice(0, 2); // just get language code, not country-specific version
-            userLanguage = isLanguageSupported(browserLanguage) ? browserLanguage : defaultLanguage;
+            userLanguage = isLanguageSupported(browserLanguage)
+                ? browserLanguage
+                : defaultLanguage;
         }
         const streami18n = i18nInstance || new Streami18n({ language: userLanguage });
         streami18n.registerSetLanguageCallback((t) => setTranslators((prevTranslator) => ({ ...prevTranslator, t })));

package/dist/components/Chat/hooks/useCreateChatClient.js

@@ -13,7 +13,9 @@ export const useCreateChatClient = ({ apiKey, options, tokenOrProvider, userData
     useEffect(() => {
         const client = new StreamChat(apiKey, undefined, cachedOptions);
         let didUserConnectInterrupt = false;
-        const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
+        const connectionPromise = client
+            .connectUser(cachedUserData, tokenOrProvider)
+            .then(() => {
             if (!didUserConnectInterrupt)
                 setChatClient(client);
         });

package/dist/components/ChatAutoComplete/ChatAutoComplete.js

@@ -8,7 +8,7 @@ const UnMemoizedChatAutoComplete = (props) => {
     const { AutocompleteSuggestionItem: SuggestionItem, AutocompleteSuggestionList: SuggestionList, } = useComponentContext('ChatAutoComplete');
     const { t } = useTranslationContext('ChatAutoComplete');
     const messageInput = useMessageInputContext('ChatAutoComplete');
-    const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef } = messageInput;
+    const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef, } = messageInput;
     const placeholder = props.placeholder || t('Type your message');
     const emojiReplace = props.wordReplace
         ? (word) => props.wordReplace?.(word, emojiSearchIndex)

package/dist/components/ChatView/ChatView.js

@@ -5,7 +5,6 @@ import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
 import { useChatContext } from '../../context';
 import { useStateStore } from '../../store';
 import clsx from 'clsx';
-const availableChatViews = ['channels', 'threads'];
 const ChatViewContext = createContext({
     activeChatView: 'channels',
     setActiveChatView: () => undefined,