stream-chat-react 12.11.1 → 12.12.0

package/dist/context/ComponentContext.d.ts

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -108,6 +109,28 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
     ReactionsListModal?: React.ComponentType<ReactionsListModalProps<StreamChatGenerics>>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    /** Custom component to display the search UI, defaults to and accepts same props as: [Search](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/Search.tsx) */
+    Search?: React.ComponentType<SearchProps>;
+    /** Custom component to display the UI where the searched string is entered, defaults to and accepts same props as: [SearchBar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchBar/SearchBar.tsx) */
+    SearchBar?: React.ComponentType;
+    /** Custom component for the search UI dedicated to display the results area, defaults to and accepts same props as: [SearchResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResults.tsx) */
+    SearchResults?: React.ComponentType;
+    /** Custom UI component to display header of search results pane, defaults to and accepts same props as: [SearchResultsHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchResultsHeader.tsx) */
+    SearchResultsHeader?: React.ComponentType;
+    /** Custom component to display search results pane before emitting the first search query for a given source, defaults to and accepts same props as: [SearchResultsPresearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsPresearch.tsx) */
+    SearchResultsPresearch?: React.ComponentType<SearchResultsPresearchProps>;
+    /** Custom component to display the search source items results, defaults to and accepts same props as: [SearchSourceResultList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultList.tsx) */
+    SearchSourceResultList?: React.ComponentType<SearchSourceResultListProps>;
+    /** Custom component to indicate the end of the last page for a searched source, defaults to and accepts same props as: [SearchSourceResultListFooter](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListFooter.tsx) */
+    SearchSourceResultListFooter?: React.ComponentType;
+    /** Custom UI component to display search results items for a given search source pane, defaults to and accepts same props as: [SearchSourceResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SourceSearchResults.tsx) */
+    SearchSourceResults?: React.ComponentType;
+    /** Custom component to display the search source results UI with 0 items found, defaults to and accepts same props as: [SearchSourceResultsEmpty](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx) */
+    SearchSourceResultsEmpty?: React.ComponentType;
+    /** Custom component to display the header content for a given search source results, no default component is provided. */
+    SearchSourceResultsHeader?: React.ComponentType;
+    /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceResultsLoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx) */
+    SearchSourceResultsLoadingIndicator?: React.ComponentType;
     /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
     /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */

package/dist/experimental/Search/Search.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+export type SearchProps = {
+    directMessagingChannelType?: string;
+    /** Sets the input element into disabled state */
+    disabled?: boolean;
+    /** Clear search state / results on every click outside the search input, defaults to false */
+    exitSearchOnInputBlur?: boolean;
+    /** Custom placeholder text to be displayed in the search input */
+    placeholder?: string;
+};
+export declare const Search: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ directMessagingChannelType, disabled, exitSearchOnInputBlur, placeholder, }: SearchProps) => React.JSX.Element;

package/dist/experimental/Search/Search.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import React from 'react';
+import { SearchBar as DefaultSearchBar } from './SearchBar/SearchBar';
+import { SearchResults as DefaultSearchResults } from './SearchResults/SearchResults';
+import { SearchContextProvider } from './SearchContext';
+import { useChatContext, useComponentContext } from '../../context';
+import { useStateStore } from '../../store';
+const searchControllerStateSelector = (nextValue) => ({ isActive: nextValue.isActive });
+export const Search = ({ directMessagingChannelType = 'messaging', disabled, exitSearchOnInputBlur, placeholder, }) => {
+    const { SearchBar = DefaultSearchBar, SearchResults = DefaultSearchResults } = useComponentContext();
+    const { searchController } = useChatContext();
+    const { isActive } = useStateStore(searchController.state, searchControllerStateSelector);
+    return (React.createElement(SearchContextProvider, { value: {
+            directMessagingChannelType,
+            disabled,
+            exitSearchOnInputBlur,
+            placeholder,
+            searchController,
+        } },
+        React.createElement("div", { className: clsx('str-chat__search', {
+                'str-chat__search--active': isActive,
+            }), "data-testid": 'search' },
+            React.createElement(SearchBar, null),
+            React.createElement(SearchResults, null))));
+};

package/dist/experimental/Search/SearchBar/SearchBar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SearchBar: () => React.JSX.Element;

package/dist/experimental/Search/SearchBar/SearchBar.js

@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { useSearchContext } from '../SearchContext';
+import { useSearchQueriesInProgress } from '../hooks';
+import { useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchControllerStateSelector = (nextValue) => ({
+    isActive: nextValue.isActive,
+    searchQuery: nextValue.searchQuery,
+});
+export const SearchBar = () => {
+    const { t } = useTranslationContext();
+    const { disabled, exitSearchOnInputBlur, placeholder, searchController } = useSearchContext();
+    const queriesInProgress = useSearchQueriesInProgress(searchController);
+    const [input, setInput] = useState(null);
+    const { isActive, searchQuery } = useStateStore(searchController.state, searchControllerStateSelector);
+    useEffect(() => {
+        if (!input)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                input.blur();
+                searchController.exit();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [searchController, input]);
+    return (React.createElement("div", { className: 'str-chat__search-bar', "data-testid": 'search-bar' },
+        React.createElement("div", { className: clsx('str-chat__search-input--wrapper', {
+                'str-chat__search-input--wrapper-active': isActive,
+            }) },
+            React.createElement("div", { className: 'str-chat__search-input--icon' }),
+            React.createElement("input", { className: 'str-chat__search-input', "data-testid": 'search-input', disabled: disabled, onBlur: () => {
+                    if (exitSearchOnInputBlur)
+                        searchController.exit();
+                }, onChange: (event) => {
+                    if (event.target.value) {
+                        searchController.search(event.target.value);
+                    }
+                    else if (!event.target.value) {
+                        searchController.clear();
+                    }
+                }, onFocus: searchController.activate, placeholder: placeholder ?? t('Search'), ref: setInput, type: 'text', value: searchQuery }),
+            searchQuery && (React.createElement("button", { className: 'str-chat__search-input--clear-button', "data-testid": 'clear-input-button', disabled: queriesInProgress.length > 0, onClick: () => {
+                    searchController.clear();
+                    input?.focus();
+                } },
+                React.createElement("div", { className: 'str-chat__search-input--clear-button-icon' })))),
+        isActive ? (React.createElement("button", { className: clsx('str-chat__search-bar-button str-chat__search-bar-button--exit-search'), "data-testid": 'search-bar-button', onClick: () => {
+                input?.blur();
+                searchController.exit();
+            } }, t('Cancel'))) : null));
+};

package/dist/experimental/Search/SearchBar/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchBar';

package/dist/experimental/Search/SearchBar/index.js

@@ -0,0 +1 @@
+export * from './SearchBar';

package/dist/experimental/Search/SearchContext.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+import type { SearchController } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types';
+export type SearchContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    /** The type of channel to create on user result select, defaults to `messaging` */
+    directMessagingChannelType: string;
+    /** Instance of the search controller that handles the data management */
+    searchController: SearchController<StreamChatGenerics>;
+    /** Sets the input element into disabled state */
+    disabled?: boolean;
+    /** Clear search state / results on every click outside the search input, defaults to true */
+    exitSearchOnInputBlur?: boolean;
+    /** Custom placeholder text to be displayed in the search input */
+    placeholder?: string;
+};
+export declare const SearchContext: React.Context<SearchContextValue<DefaultStreamChatGenerics> | undefined>;
+/**
+ * Context provider for components rendered within the `Search` component
+ */
+export declare const SearchContextProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: PropsWithChildren<{
+    value: SearchContextValue<StreamChatGenerics>;
+}>) => React.JSX.Element;
+export declare const useSearchContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => SearchContextValue<StreamChatGenerics>;

package/dist/experimental/Search/SearchContext.js

@@ -0,0 +1,10 @@
+import React, { createContext, useContext } from 'react';
+export const SearchContext = createContext(undefined);
+/**
+ * Context provider for components rendered within the `Search` component
+ */
+export const SearchContextProvider = ({ children, value, }) => (React.createElement(SearchContext.Provider, { value: value }, children));
+export const useSearchContext = () => {
+    const contextValue = useContext(SearchContext);
+    return contextValue;
+};

package/dist/experimental/Search/SearchResults/SearchResultItem.d.ts

@@ -0,0 +1,19 @@
+import React, { ComponentType } from 'react';
+import type { Channel, MessageResponse, User } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type ChannelSearchResultItemProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    item: Channel<StreamChatGenerics>;
+};
+export declare const ChannelSearchResultItem: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ item, }: ChannelSearchResultItemProps<StreamChatGenerics>) => React.JSX.Element;
+export type ChannelByMessageSearchResultItemProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    item: MessageResponse<StreamChatGenerics>;
+};
+export declare const MessageSearchResultItem: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ item, }: ChannelByMessageSearchResultItemProps<StreamChatGenerics>) => React.JSX.Element | undefined;
+export type UserSearchResultItemProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    item: User<StreamChatGenerics>;
+};
+export declare const UserSearchResultItem: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ item, }: UserSearchResultItemProps<StreamChatGenerics>) => React.JSX.Element;
+export type SearchResultItemComponents = Record<string, ComponentType<{
+    item: any;
+}>>;
+export declare const DefaultSearchResultItems: SearchResultItemComponents;

package/dist/experimental/Search/SearchResults/SearchResultItem.js

@@ -0,0 +1,62 @@
+import uniqBy from 'lodash.uniqby';
+import React, { useCallback, useMemo } from 'react';
+import { useSearchContext } from '../SearchContext';
+import { Avatar } from '../../../components/Avatar';
+import { ChannelPreview } from '../../../components/ChannelPreview';
+import { useChannelListContext, useChatContext } from '../../../context';
+import { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits';
+export const ChannelSearchResultItem = ({ item, }) => {
+    const { setActiveChannel } = useChatContext();
+    const { setChannels } = useChannelListContext();
+    const onSelect = useCallback(() => {
+        setActiveChannel(item);
+        setChannels?.((channels) => uniqBy([item, ...channels], 'cid'));
+    }, [item, setActiveChannel, setChannels]);
+    return (React.createElement(ChannelPreview, { channel: item, className: 'str-chat__search-result', onSelect: onSelect }));
+};
+export const MessageSearchResultItem = ({ item, }) => {
+    const { channel: activeChannel, client, searchController, setActiveChannel, } = useChatContext();
+    const { setChannels } = useChannelListContext();
+    const channel = useMemo(() => {
+        const { channel: channelData } = item;
+        const type = channelData?.type ?? 'unknown';
+        const id = channelData?.id ?? 'unknown';
+        return client.channel(type, id);
+    }, [client, item]);
+    const onSelect = useCallback(async () => {
+        if (!channel)
+            return;
+        await channel.state.loadMessageIntoState(item.id, undefined, DEFAULT_JUMP_TO_PAGE_SIZE);
+        // FIXME: message focus should be handled by yet non-existent msg list controller in client packaged
+        searchController._internalState.partialNext({ focusedMessage: item });
+        setActiveChannel(channel);
+        setChannels?.((channels) => uniqBy([channel, ...channels], 'cid'));
+    }, [channel, item, searchController, setActiveChannel, setChannels]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const getLatestMessagePreview = useCallback(() => item.text, [item]);
+    if (!channel)
+        return;
+    return (React.createElement(ChannelPreview, { active: channel.cid === activeChannel?.cid &&
+            item.id === searchController._internalState.getLatestValue().focusedMessage?.id, channel: channel, className: 'str-chat__search-result', getLatestMessagePreview: getLatestMessagePreview, onSelect: onSelect }));
+};
+export const UserSearchResultItem = ({ item, }) => {
+    const { client, setActiveChannel } = useChatContext();
+    const { setChannels } = useChannelListContext();
+    const { directMessagingChannelType } = useSearchContext();
+    const onClick = useCallback(() => {
+        const newChannel = client.channel(directMessagingChannelType, {
+            members: [client.userID, item.id],
+        });
+        newChannel.watch();
+        setActiveChannel(newChannel);
+        setChannels?.((channels) => uniqBy([newChannel, ...channels], 'cid'));
+    }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
+    return (React.createElement("button", { "aria-label": `Select User Channel: ${item.name || ''}`, className: 'str-chat__search-result', "data-testid": 'search-result-user', onClick: onClick, role: 'option' },
+        React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', image: item.image, name: item.name || item.id, user: item }),
+        React.createElement("div", { className: 'str-chat__search-result--display-name' }, item.name || item.id)));
+};
+export const DefaultSearchResultItems = {
+    channels: ChannelSearchResultItem,
+    messages: MessageSearchResultItem,
+    users: UserSearchResultItem,
+};

package/dist/experimental/Search/SearchResults/SearchResults.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export declare const SearchResults: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | null;

package/dist/experimental/Search/SearchResults/SearchResults.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SearchSourceResults as DefaultSourceSearchResults } from './SearchSourceResults';
+import { SearchResultsHeader as DefaultSearchResultsHeader } from './SearchResultsHeader';
+import { SearchResultsPresearch as DefaultSearchResultsPresearch } from './SearchResultsPresearch';
+import { useSearchContext } from '../SearchContext';
+import { useComponentContext, useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchControllerStateSelector = (nextValue) => ({
+    activeSources: nextValue.sources.filter((s) => s.isActive),
+    isActive: nextValue.isActive,
+    searchQuery: nextValue.searchQuery,
+});
+export const SearchResults = () => {
+    const { t } = useTranslationContext('ResultsContainer');
+    const { SearchResultsHeader = DefaultSearchResultsHeader, SearchResultsPresearch = DefaultSearchResultsPresearch, SearchSourceResults = DefaultSourceSearchResults, } = useComponentContext();
+    const { searchController } = useSearchContext();
+    const { activeSources, isActive, searchQuery } = useStateStore(searchController.state, searchControllerStateSelector);
+    return !isActive ? null : (React.createElement("div", { "aria-label": t('aria/Search results'), className: 'str-chat__search-results' },
+        React.createElement(SearchResultsHeader, null),
+        !searchQuery ? (React.createElement(SearchResultsPresearch, { activeSources: activeSources })) : (activeSources.map((source) => (React.createElement(SearchSourceResults, { key: source.type, searchSource: source }))))));
+};

package/dist/experimental/Search/SearchResults/SearchResultsHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export declare const SearchResultsHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;

package/dist/experimental/Search/SearchResults/SearchResultsHeader.js

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import React from 'react';
+import { useSearchContext } from '../SearchContext';
+import { useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchSourceStateSelector = (nextValue) => ({
+    isActive: nextValue.isActive,
+});
+const SearchSourceFilterButton = ({ source, }) => {
+    const { t } = useTranslationContext();
+    const { searchController } = useSearchContext();
+    const { isActive } = useStateStore(source.state, searchSourceStateSelector);
+    const label = `search-results-header-filter-source-button-label--${source.type}`;
+    return (React.createElement("button", { "aria-label": t('aria/Search results header filter button'), className: clsx('str-chat__search-results-header__filter-source-button', {
+            'str-chat__search-results-header__filter-source-button--active': isActive,
+        }), key: label, onClick: () => {
+            if (source.isActive) {
+                searchController.deactivateSource(source.type);
+            }
+            else {
+                searchController.activateSource(source.type);
+                if (searchController.searchQuery && !source.items?.length)
+                    source.search(searchController.searchQuery);
+            }
+        } }, t(label)));
+};
+export const SearchResultsHeader = () => {
+    const { searchController } = useSearchContext();
+    return (React.createElement("div", { className: 'str-chat__search-results-header', "data-testid": 'search-results-header' },
+        React.createElement("div", { className: 'str-chat__search-results-header__filter-source-buttons', "data-testid": 'filter-source-buttons' }, searchController.sources.map((source) => (React.createElement(SearchSourceFilterButton, { key: `search-source-filter-button-${source.type}`, source: source }))))));
+};

package/dist/experimental/Search/SearchResults/SearchResultsPresearch.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SearchSource } from 'stream-chat';
+export type SearchResultsPresearchProps = {
+    activeSources: SearchSource[];
+};
+export declare const SearchResultsPresearch: () => React.JSX.Element;

package/dist/experimental/Search/SearchResults/SearchResultsPresearch.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useTranslationContext } from '../../../context';
+export const SearchResultsPresearch = () => {
+    const { t } = useTranslationContext();
+    return (React.createElement("div", { className: 'str-chat__search-results-presearch' }, t('Start typing to search')));
+};

package/dist/experimental/Search/SearchResults/SearchSourceResultList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SearchResultItemComponents } from './SearchResultItem';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type SearchSourceResultListProps = {
+    loadMoreDebounceMs?: number;
+    loadMoreThresholdPx?: number;
+    SearchResultItems?: SearchResultItemComponents;
+};
+export declare const SearchSourceResultList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ loadMoreDebounceMs, loadMoreThresholdPx, SearchResultItems, }: SearchSourceResultListProps) => React.JSX.Element | null;

package/dist/experimental/Search/SearchResults/SearchSourceResultList.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DefaultSearchResultItems } from './SearchResultItem';
+import { SearchSourceResultListFooter as DefaultSearchSourceResultListFooter } from './SearchSourceResultListFooter';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
+import { InfiniteScrollPaginator } from '../../../components/InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { useComponentContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchSourceStateSelector = (nextValue) => ({
+    items: nextValue.items,
+});
+export const SearchSourceResultList = ({ loadMoreDebounceMs = 100, loadMoreThresholdPx = 80, SearchResultItems = DefaultSearchResultItems, }) => {
+    const { SearchSourceResultListFooter = DefaultSearchSourceResultListFooter } = useComponentContext();
+    const { searchSource } = useSearchSourceResultsContext();
+    const { items } = useStateStore(searchSource.state, searchSourceStateSelector);
+    const SearchResultItem = SearchResultItems[searchSource.type];
+    if (!SearchResultItem)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__search-source-result-list', "data-testid": 'search-source-result-list' },
+        React.createElement(InfiniteScrollPaginator, { loadNextDebounceMs: loadMoreDebounceMs, loadNextOnScrollToBottom: searchSource.search, threshold: loadMoreThresholdPx },
+            items?.map((item, i) => (React.createElement(SearchResultItem, { item: item, key: `source-search-result-${searchSource.type}-${i}` }))),
+            React.createElement(SearchSourceResultListFooter, null))));
+};

package/dist/experimental/Search/SearchResults/SearchSourceResultListFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export declare const SearchSourceResultListFooter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;

package/dist/experimental/Search/SearchResults/SearchSourceResultListFooter.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchSourceResultsLoadingIndicator as DefaultSearchSourceResultsLoadingIndicator } from './SearchSourceResultsLoadingIndicator';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
+import { useComponentContext, useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchSourceStateSelector = (value) => ({
+    hasNext: value.hasNext,
+    isLoading: value.isLoading,
+});
+export const SearchSourceResultListFooter = () => {
+    const { t } = useTranslationContext();
+    const { SearchSourceResultsLoadingIndicator = DefaultSearchSourceResultsLoadingIndicator, } = useComponentContext();
+    const { searchSource } = useSearchSourceResultsContext();
+    const { hasNext, isLoading } = useStateStore(searchSource.state, searchSourceStateSelector);
+    return (React.createElement("div", { className: 'str-chat__search-source-result-list__footer', "data-testid": 'search-footer' }, isLoading ? (React.createElement(SearchSourceResultsLoadingIndicator, null)) : !hasNext ? (React.createElement("div", { className: 'str-chat__search-source-results---empty' }, t('All results loaded'))) : null));
+};

package/dist/experimental/Search/SearchResults/SearchSourceResults.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SearchSource } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type SearchSourceResultsProps = {
+    searchSource: SearchSource;
+};
+export declare const SearchSourceResults: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ searchSource, }: SearchSourceResultsProps) => React.JSX.Element | null;

package/dist/experimental/Search/SearchResults/SearchSourceResults.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SearchSourceResultList as DefaultSearchSourceResultList } from './SearchSourceResultList';
+import { SearchSourceResultsEmpty as DefaultSearchSourceResultsEmpty } from './SearchSourceResultsEmpty';
+import { SearchSourceResultsHeader as DefaultSearchSourceResultsHeader } from './SearchSourceResultsHeader';
+import { SearchSourceResultsContextProvider } from '../SearchSourceResultsContext';
+import { useComponentContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchSourceStateSelector = (nextValue) => ({
+    isLoading: nextValue.isLoading,
+    items: nextValue.items,
+});
+export const SearchSourceResults = ({ searchSource, }) => {
+    const { SearchSourceResultList = DefaultSearchSourceResultList, SearchSourceResultsEmpty = DefaultSearchSourceResultsEmpty, SearchSourceResultsHeader = DefaultSearchSourceResultsHeader, } = useComponentContext();
+    const { isLoading, items } = useStateStore(searchSource.state, searchSourceStateSelector);
+    if (!items && !isLoading)
+        return null;
+    return (React.createElement(SearchSourceResultsContextProvider, { value: { searchSource } },
+        React.createElement("div", { className: 'str-chat__search-source-results', "data-testid": 'search-source-results' },
+            React.createElement(SearchSourceResultsHeader, null),
+            items?.length || isLoading ? (React.createElement(SearchSourceResultList, null)) : (React.createElement(SearchSourceResultsEmpty, null)))));
+};

package/dist/experimental/Search/SearchResults/SearchSourceResultsEmpty.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SearchSourceResultsEmpty: () => React.JSX.Element;

package/dist/experimental/Search/SearchResults/SearchSourceResultsEmpty.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useTranslationContext } from '../../../context';
+export const SearchSourceResultsEmpty = () => {
+    const { t } = useTranslationContext();
+    return (React.createElement("div", { className: 'str-chat__search-source-results-empty' }, t('No results found')));
+};

package/dist/experimental/Search/SearchResults/SearchSourceResultsHeader.d.ts

@@ -0,0 +1 @@
+export declare const SearchSourceResultsHeader: () => null;

package/dist/experimental/Search/SearchResults/SearchSourceResultsHeader.js

@@ -0,0 +1 @@
+export const SearchSourceResultsHeader = () => null;

package/dist/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SearchSourceResultsLoadingIndicator: () => React.JSX.Element;

package/dist/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useTranslationContext } from '../../../context';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
+export const SearchSourceResultsLoadingIndicator = () => {
+    const { t } = useTranslationContext();
+    const { searchSource } = useSearchSourceResultsContext();
+    return (React.createElement("div", { className: 'str-chat__search-source-results__loading-indicator', "data-testid": 'search-loading-indicator' }, t(`Searching for ${searchSource.type}...`)));
+};

package/dist/experimental/Search/SearchResults/index.d.ts

@@ -0,0 +1,9 @@
+export * from './SearchResultItem';
+export * from './SearchResults';
+export * from './SearchResultsHeader';
+export * from './SearchResultsPresearch';
+export * from './SearchSourceResultsEmpty';
+export * from './SearchSourceResultsLoadingIndicator';
+export * from './SearchSourceResultList';
+export * from './SearchSourceResultListFooter';
+export * from './SearchSourceResults';

package/dist/experimental/Search/SearchResults/index.js

@@ -0,0 +1,9 @@
+export * from './SearchResultItem';
+export * from './SearchResults';
+export * from './SearchResultsHeader';
+export * from './SearchResultsPresearch';
+export * from './SearchSourceResultsEmpty';
+export * from './SearchSourceResultsLoadingIndicator';
+export * from './SearchSourceResultList';
+export * from './SearchSourceResultListFooter';
+export * from './SearchSourceResults';

package/dist/experimental/Search/SearchSourceResultsContext.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+import type { SearchSource } from 'stream-chat';
+export type SearchSourceResultsContextValue = {
+    searchSource: SearchSource;
+};
+export declare const SearchSourceResultsContext: React.Context<SearchSourceResultsContextValue | undefined>;
+/**
+ * Context provider for components rendered within the `SearchSourceResults`
+ */
+export declare const SearchSourceResultsContextProvider: ({ children, value, }: PropsWithChildren<{
+    value: SearchSourceResultsContextValue;
+}>) => React.JSX.Element;
+export declare const useSearchSourceResultsContext: () => SearchSourceResultsContextValue;

package/dist/experimental/Search/SearchSourceResultsContext.js

@@ -0,0 +1,10 @@
+import React, { createContext, useContext } from 'react';
+export const SearchSourceResultsContext = createContext(undefined);
+/**
+ * Context provider for components rendered within the `SearchSourceResults`
+ */
+export const SearchSourceResultsContextProvider = ({ children, value, }) => (React.createElement(SearchSourceResultsContext.Provider, { value: value }, children));
+export const useSearchSourceResultsContext = () => {
+    const contextValue = useContext(SearchSourceResultsContext);
+    return contextValue;
+};

package/dist/experimental/Search/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSearchFocusedMessage';
+export * from './useSearchQueriesInProgress';

package/dist/experimental/Search/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useSearchFocusedMessage';
+export * from './useSearchQueriesInProgress';

package/dist/experimental/Search/hooks/useSearchFocusedMessage.d.ts

@@ -0,0 +1,2 @@
+import type { DefaultStreamChatGenerics } from '../../../types';
+export declare const useSearchFocusedMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => import("stream-chat").MessageResponse<StreamChatGenerics> | undefined;

package/dist/experimental/Search/hooks/useSearchFocusedMessage.js

@@ -0,0 +1,8 @@
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const searchControllerStateSelector = (nextValue) => ({ focusedMessage: nextValue.focusedMessage });
+export const useSearchFocusedMessage = () => {
+    const { searchController } = useChatContext('Channel');
+    const { focusedMessage } = useStateStore(searchController._internalState, searchControllerStateSelector);
+    return focusedMessage;
+};

package/dist/experimental/Search/hooks/useSearchQueriesInProgress.d.ts

@@ -0,0 +1,6 @@
+import type { SearchController } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type UseSearchQueriesInProgressParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    searchController: SearchController<StreamChatGenerics>;
+};
+export declare const useSearchQueriesInProgress: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(searchController: SearchController<StreamChatGenerics>) => string[];

package/dist/experimental/Search/hooks/useSearchQueriesInProgress.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { useStateStore } from '../../../store';
+const searchControllerStateSelector = (value) => ({
+    sources: value.sources,
+});
+export const useSearchQueriesInProgress = (searchController) => {
+    const [queriesInProgress, setQueriesInProgress] = useState([]);
+    const { sources } = useStateStore(searchController.state, searchControllerStateSelector);
+    useEffect(() => {
+        const subscriptions = sources.map((source) => source.state.subscribeWithSelector((value) => ({ isLoading: value.isLoading }), ({ isLoading }) => {
+            setQueriesInProgress((prev) => {
+                if (isLoading)
+                    return prev.concat(source.type);
+                return prev.filter((type) => type !== source.type);
+            });
+        }));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [sources]);
+    return queriesInProgress;
+};

package/dist/experimental/Search/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Search';
+export * from './SearchBar';
+export * from './SearchContext';
+export * from './SearchResults';
+export * from './SearchSourceResultsContext';

package/dist/experimental/Search/index.js

@@ -0,0 +1,5 @@
+export * from './Search';
+export * from './SearchBar';
+export * from './SearchContext';
+export * from './SearchResults';
+export * from './SearchSourceResultsContext';