stream-chat-react 13.14.2 → 14.0.0-beta.1

package/dist/components/ChannelPreview/hooks/useIsChannelMuted.d.ts

@@ -1,6 +0,0 @@
-import type { Channel } from 'stream-chat';
-export declare const useIsChannelMuted: (channel: Channel) => {
-    createdAt: Date | null;
-    expiresAt: Date | null;
-    muted: boolean;
-};

package/dist/components/ChannelPreview/hooks/useIsChannelMuted.js

@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useChatContext } from '../../../context/ChatContext';
-export const useIsChannelMuted = (channel) => {
-    const { client } = useChatContext('useIsChannelMuted');
-    const [muted, setMuted] = useState(channel.muteStatus());
-    useEffect(() => {
-        const handleEvent = () => setMuted(channel.muteStatus());
-        client.on('notification.channel_mutes_updated', handleEvent);
-        return () => client.off('notification.channel_mutes_updated', handleEvent);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [muted]);
-    return muted;
-};

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.d.ts

@@ -1,15 +0,0 @@
-import type { Channel, LocalMessage } from 'stream-chat';
-export declare enum MessageDeliveryStatus {
-    SENT = "sent",
-    DELIVERED = "delivered",
-    READ = "read"
-}
-type UseMessageStatusParamsChannelPreviewProps = {
-    channel: Channel;
-    /** The last message received in a channel */
-    lastMessage?: LocalMessage;
-};
-export declare const useMessageDeliveryStatus: ({ channel, lastMessage, }: UseMessageStatusParamsChannelPreviewProps) => {
-    messageDeliveryStatus: MessageDeliveryStatus | undefined;
-};
-export {};

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useChatContext } from '../../../context';
-export var MessageDeliveryStatus;
-(function (MessageDeliveryStatus) {
-    MessageDeliveryStatus["SENT"] = "sent";
-    MessageDeliveryStatus["DELIVERED"] = "delivered";
-    MessageDeliveryStatus["READ"] = "read";
-})(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
-export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
-    const { client } = useChatContext();
-    const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
-    const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
-    useEffect(() => {
-        // empty channel
-        if (!lastMessage) {
-            setMessageDeliveryStatus(undefined);
-        }
-        const lastMessageIsOwn = isOwnMessage(lastMessage);
-        if (!lastMessage?.created_at || !lastMessageIsOwn)
-            return;
-        const msgRef = {
-            msgId: lastMessage.id,
-            timestampMs: lastMessage.created_at.getTime(),
-        };
-        const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
-        const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
-        setMessageDeliveryStatus(readersForMessage.length > 1 ||
-            (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)
-            ? MessageDeliveryStatus.READ
-            : deliveredForMessage.length > 1 ||
-                (deliveredForMessage.length === 1 &&
-                    deliveredForMessage[0].id !== client.user?.id)
-                ? MessageDeliveryStatus.DELIVERED
-                : MessageDeliveryStatus.SENT);
-    }, [channel, client, isOwnMessage, lastMessage]);
-    useEffect(() => {
-        const handleMessageNew = (event) => {
-            // the last message is not mine, so do not show the delivery status
-            if (!isOwnMessage(event.message)) {
-                return setMessageDeliveryStatus(undefined);
-            }
-            return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);
-        };
-        channel.on('message.new', handleMessageNew);
-        return () => {
-            channel.off('message.new', handleMessageNew);
-        };
-    }, [channel, isOwnMessage]);
-    useEffect(() => {
-        if (!isOwnMessage(lastMessage))
-            return;
-        const handleMessageDelivered = (event) => {
-            if (event.user?.id !== client.user?.id &&
-                lastMessage &&
-                lastMessage.id === event.last_delivered_message_id)
-                setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
-        };
-        const handleMarkRead = (event) => {
-            if (event.user?.id !== client.user?.id)
-                setMessageDeliveryStatus(MessageDeliveryStatus.READ);
-        };
-        channel.on('message.delivered', handleMessageDelivered);
-        channel.on('message.read', handleMarkRead);
-        return () => {
-            channel.off('message.delivered', handleMessageDelivered);
-            channel.off('message.read', handleMarkRead);
-        };
-    }, [channel, client, isOwnMessage, lastMessage]);
-    return {
-        messageDeliveryStatus,
-    };
-};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { ComponentPropsWithoutRef } from 'react';
-export declare const Icon: {
-    ArchiveBox: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
-    Pin: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
-};

package/dist/components/ChannelPreview/icons.js

@@ -1,7 +0,0 @@
-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 },
-        React.createElement("path", { d: 'M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z' }))),
-    Pin: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--pin', fill: 'currentColor', viewBox: '0 0 384 512', xmlns: 'http://www.w3.org/2000/svg', ...props },
-        React.createElement("path", { d: 'M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z' }))),
-};

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

@@ -1,5 +0,0 @@
-export * from './ChannelPreview';
-export * from './ChannelPreviewMessenger';
-export * from './ChannelPreviewActionButtons';
-export * from './hooks';
-export * from './utils';

package/dist/components/ChannelPreview/index.js

@@ -1,5 +0,0 @@
-export * from './ChannelPreview';
-export * from './ChannelPreviewMessenger';
-export * from './ChannelPreviewActionButtons';
-export * from './hooks';
-export * from './utils';

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { Channel, UserResponse } from 'stream-chat';
-import type { TranslationContextValue } from '../../context/TranslationContext';
-import type { ChatContextValue } from '../../context';
-export declare const renderPreviewText: (text: string) => React.JSX.Element;
-export declare const getLatestMessagePreview: (channel: Channel, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated']) => ReactNode;
-export type GroupChannelDisplayInfo = {
-    image?: string;
-    name?: string;
-}[];
-export declare const getGroupChannelDisplayInfo: (channel: Channel) => GroupChannelDisplayInfo | undefined;
-export declare const getDisplayTitle: (channel: Channel, currentUser?: UserResponse) => string | undefined;
-export declare const getDisplayImage: (channel: Channel, currentUser?: UserResponse) => string | undefined;

package/dist/components/ChannelPreview/utils.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
-import remarkGfm from 'remark-gfm';
-const remarkPlugins = [
-    htmlToTextPlugin,
-    [remarkGfm, { singleTilde: false }],
-    plusPlusToEmphasis,
-    imageToLink,
-];
-export const renderPreviewText = (text) => (React.createElement(ReactMarkdown, { remarkPlugins: remarkPlugins, skipHtml: true }, text));
-const getLatestPollVote = (latestVotesByOption) => {
-    let latestVote;
-    for (const optionVotes of Object.values(latestVotesByOption)) {
-        optionVotes.forEach((vote) => {
-            if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at))
-                return;
-            latestVote = vote;
-        });
-    }
-    return latestVote;
-};
-export const getLatestMessagePreview = (channel, t, userLanguage = 'en', isMessageAIGenerated) => {
-    const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
-    const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
-        latestMessage?.text;
-    const poll = latestMessage?.poll;
-    if (!latestMessage) {
-        return t('Nothing yet...');
-    }
-    if (latestMessage.deleted_at) {
-        return t('Message deleted');
-    }
-    if (poll) {
-        if (!poll.vote_count) {
-            const createdBy = poll.created_by?.id === channel.getClient().userID
-                ? t('You')
-                : (poll.created_by?.name ?? t('Poll'));
-            return t('📊 {{createdBy}} created: {{ pollName}}', {
-                createdBy,
-                pollName: poll.name,
-            });
-        }
-        else {
-            const latestVote = getLatestPollVote(poll.latest_votes_by_option);
-            const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
-            if (option && latestVote) {
-                return t('📊 {{votedBy}} voted: {{pollOptionText}}', {
-                    pollOptionText: option.text,
-                    votedBy: latestVote?.user?.id === channel.getClient().userID
-                        ? t('You')
-                        : (latestVote.user?.name ?? t('Poll')),
-                });
-            }
-        }
-    }
-    if (previewTextToRender) {
-        return isMessageAIGenerated?.(latestMessage)
-            ? previewTextToRender
-            : renderPreviewText(previewTextToRender);
-    }
-    if (latestMessage.command) {
-        return `/${latestMessage.command}`;
-    }
-    if (latestMessage.attachments?.length) {
-        return t('🏙 Attachment...');
-    }
-    if (latestMessage.shared_location) {
-        return t('📍Shared location');
-    }
-    return t('Empty message...');
-};
-export const getGroupChannelDisplayInfo = (channel) => {
-    const members = Object.values(channel.state.members);
-    if (members.length <= 2)
-        return;
-    const info = [];
-    for (let i = 0; i < members.length; i++) {
-        const { user } = members[i];
-        if (!user?.name && !user?.image)
-            continue;
-        info.push({ image: user.image, name: user.name });
-        if (info.length === 4)
-            break;
-    }
-    return info;
-};
-const getChannelDisplayInfo = (info, channel, currentUser) => {
-    if (channel.data?.[info])
-        return channel.data[info];
-    const members = Object.values(channel.state.members);
-    if (members.length !== 2)
-        return;
-    const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-    return otherMember?.user?.[info];
-};
-export const getDisplayTitle = (channel, currentUser) => getChannelDisplayInfo('name', channel, currentUser);
-export const getDisplayImage = (channel, currentUser) => getChannelDisplayInfo('image', channel, currentUser);

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { ChannelSearchControllerParams } from './hooks/useChannelSearch';
-import type { AdditionalSearchBarProps, SearchBarProps } from './SearchBar';
-import type { AdditionalSearchInputProps, SearchInputProps } from './SearchInput';
-import type { AdditionalSearchResultsProps } from './SearchResults';
-export type AdditionalChannelSearchProps = {
-    /** Custom UI component to display the search bar with text input */
-    SearchBar?: React.ComponentType<SearchBarProps>;
-    /** Custom UI component to display the search text input */
-    SearchInput?: React.ComponentType<SearchInputProps>;
-};
-export type ChannelSearchProps = AdditionalSearchBarProps & AdditionalSearchInputProps & AdditionalSearchResultsProps & AdditionalChannelSearchProps & ChannelSearchControllerParams;
-/**
- * The ChannelSearch component makes a query users call and displays the results in a list.
- * Clicking on a list item will navigate you into a channel with the selected user. It can be used
- * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
- */
-export declare const ChannelSearch: (props: ChannelSearchProps) => React.JSX.Element;

package/dist/components/ChannelSearch/ChannelSearch.js

@@ -1,23 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-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, 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', {
-            '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 }),
-        query && (React.createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
-};
-/**
- * The ChannelSearch component makes a query users call and displays the results in a list.
- * Clicking on a list item will navigate you into a channel with the selected user. It can be used
- * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
- */
-export const ChannelSearch = React.memo(UnMemoizedChannelSearch);

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { SearchInputProps } from './SearchInput';
-export type AppMenuProps = {
-    close?: () => void;
-};
-export type SearchBarController = {
-    /** Called on search input focus */
-    activateSearch: () => void;
-    /** Clears the search state, removes focus from the search input */
-    exitSearch: () => void;
-    /** Flag determining whether the search input is focused */
-    inputIsFocused: boolean;
-    /** Ref object for the input wrapper in the SearchBar */
-    searchBarRef: React.RefObject<HTMLDivElement | null>;
-};
-export type AdditionalSearchBarProps = {
-    /** Application menu to be displayed  when clicked on MenuIcon */
-    AppMenu?: React.ComponentType<AppMenuProps>;
-    /** Custom icon component used to clear the input value on click. Displayed within the search input wrapper. */
-    ClearInputIcon?: React.ComponentType;
-    /** Custom icon component used to terminate the search UI session on click. */
-    ExitSearchIcon?: React.ComponentType;
-    /** Custom icon component used to invoke context menu. */
-    MenuIcon?: React.ComponentType;
-    /** Custom UI component to display the search text input */
-    SearchInput?: React.ComponentType<SearchInputProps>;
-    /** Custom icon used to indicate search input. */
-    SearchInputIcon?: React.ComponentType;
-};
-export type SearchBarProps = AdditionalSearchBarProps & SearchBarController & SearchInputProps;
-export declare const SearchBar: (props: SearchBarProps) => React.JSX.Element;

package/dist/components/ChannelSearch/SearchBar.js

@@ -1,67 +0,0 @@
-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';
-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 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;
-        const handleKeyDown = (event) => {
-            if (menuIsOpen && event.key === 'Escape') {
-                setMenuIsOpen(false);
-            }
-        };
-        const clickListener = (e) => {
-            if (!(e.target instanceof HTMLElement) ||
-                !menuIsOpen ||
-                appMenuRef.current?.contains(e.target))
-                return;
-            setMenuIsOpen(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        document.addEventListener('click', clickListener);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('click', clickListener);
-        };
-    }, [menuIsOpen]);
-    useEffect(() => {
-        if (!props.inputRef.current)
-            return;
-        const input = props.inputRef.current;
-        const handleFocus = () => {
-            activateSearch();
-        };
-        const handleBlur = (e) => {
-            e.stopPropagation(); // handle blur/focus state with React state
-        };
-        input.addEventListener('focus', handleFocus);
-        input.addEventListener('blur', handleBlur);
-        return () => {
-            input.removeEventListener('focus', handleFocus);
-            input.removeEventListener('blur', handleBlur);
-        };
-    }, [activateSearch, props.inputRef]);
-    const handleClearClick = useCallback(() => {
-        exitSearch();
-        inputProps.inputRef.current?.focus();
-    }, [exitSearch, inputProps.inputRef]);
-    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: () => 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, { ...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 },
-            React.createElement(AppMenu, { close: closeAppMenu })))));
-};

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

@@ -1,18 +0,0 @@
-import React from 'react';
-export type SearchInputController = {
-    /** Clears the channel search state */
-    clearState: () => void;
-    inputRef: React.RefObject<HTMLInputElement | null>;
-    /** Search input change handler */
-    onSearch: React.ChangeEventHandler<HTMLInputElement>;
-    /** Current search string */
-    query: string;
-};
-export type AdditionalSearchInputProps = {
-    /** Sets the input element into disabled state */
-    disabled?: boolean;
-    /** Custom placeholder text to be displayed in the search input */
-    placeholder?: string;
-};
-export type SearchInputProps = AdditionalSearchInputProps & SearchInputController;
-export declare const SearchInput: (props: SearchInputProps) => React.JSX.Element;

package/dist/components/ChannelSearch/SearchInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context/TranslationContext';
-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

@@ -1,32 +0,0 @@
-import React from 'react';
-import type { ChannelOrUserResponse } from './utils';
-export type SearchResultsHeaderProps = Pick<SearchResultsProps, 'results'>;
-export type SearchResultsListProps = Required<Pick<SearchResultsProps, 'results' | 'SearchResultItem' | 'selectResult'>> & {
-    focusedUser?: number;
-};
-export type SearchResultItemProps = Pick<SearchResultsProps, 'selectResult'> & {
-    index: number;
-    result: ChannelOrUserResponse;
-    focusedUser?: number;
-};
-export type SearchResultsController = {
-    results: Array<ChannelOrUserResponse>;
-    searching: boolean;
-    selectResult: (result: ChannelOrUserResponse) => Promise<void> | void;
-};
-export type AdditionalSearchResultsProps = {
-    /** Display search results as an absolutely positioned popup, defaults to false and shows inline */
-    popupResults?: boolean;
-    /** Custom UI component to display empty search results */
-    SearchEmpty?: React.ComponentType;
-    /** Custom UI component to display the search loading state */
-    SearchLoading?: React.ComponentType;
-    /** Custom UI component to display a search result list item, defaults to and accepts the same props as: [DefaultSearchResultItem](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/SearchResults.tsx) */
-    SearchResultItem?: React.ComponentType<SearchResultItemProps>;
-    /** Custom UI component to display the search results header */
-    SearchResultsHeader?: React.ComponentType;
-    /** Custom UI component to display all the search results, defaults to and accepts the same props as: [DefaultSearchResultsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/SearchResults.tsx)  */
-    SearchResultsList?: React.ComponentType<SearchResultsListProps>;
-};
-export type SearchResultsProps = AdditionalSearchResultsProps & SearchResultsController;
-export declare const SearchResults: (props: SearchResultsProps) => React.JSX.Element;

package/dist/components/ChannelSearch/SearchResults.js

@@ -1,86 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { SearchIcon } from './icons';
-import { ChannelPreview } from '../ChannelPreview';
-import { isChannel } from './utils';
-import { Avatar } from '../Avatar';
-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')));
-};
-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,
-    })));
-};
-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 })))));
-};
-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)) {
-        const channel = result;
-        return (React.createElement(ChannelPreview, { channel: channel, className: className, onSelect: () => selectResult(channel) }));
-    }
-    else {
-        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)));
-    }
-};
-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 const SearchResults = (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) => {
-        if (event.key === 'ArrowUp') {
-            setFocusedResult((prevFocused) => {
-                if (prevFocused === undefined)
-                    return 0;
-                return prevFocused === 0 ? results.length - 1 : prevFocused - 1;
-            });
-        }
-        if (event.key === 'ArrowDown') {
-            setFocusedResult((prevFocused) => {
-                if (prevFocused === undefined)
-                    return 0;
-                return prevFocused === results.length - 1 ? 0 : prevFocused + 1;
-            });
-        }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            setFocusedResult((prevFocused) => {
-                if (typeof prevFocused !== 'undefined') {
-                    selectResult(results[prevFocused]);
-                    return undefined;
-                }
-                return prevFocused;
-            });
-        }
-    }, [results, selectResult]);
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown, false);
-        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...')))));
-    }
-    if (!results.length) {
-        return (React.createElement(ResultsContainer, { popupResults: popupResults },
-            React.createElement(SearchEmpty, null)));
-    }
-    return (React.createElement(ResultsContainer, { popupResults: popupResults },
-        React.createElement(SearchResultsHeader, { results: results }),
-        React.createElement(SearchResultsList, { focusedUser: focusedResult, results: results, SearchResultItem: SearchResultItem, selectResult: selectResult })));
-};

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

@@ -1,53 +0,0 @@
-import type React from 'react';
-import type { ChannelOrUserResponse } from '../utils';
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, UserFilters, UserOptions, UserSort } from 'stream-chat';
-import type { SearchBarController } from '../SearchBar';
-import type { SearchInputController } from '../SearchInput';
-import type { SearchResultsController } from '../SearchResults';
-export type ChannelSearchFunctionParams = {
-    setQuery: React.Dispatch<React.SetStateAction<string>>;
-    setResults: React.Dispatch<React.SetStateAction<ChannelOrUserResponse[]>>;
-    setSearching: React.Dispatch<React.SetStateAction<boolean>>;
-};
-export type SearchController = SearchInputController & SearchBarController & SearchResultsController;
-export type SearchQueryParams = {
-    channelFilters?: {
-        filters?: ChannelFilters;
-        options?: ChannelOptions;
-        sort?: ChannelSort;
-    };
-    userFilters?: {
-        filters?: UserFilters | ((query: string) => UserFilters);
-        options?: UserOptions;
-        sort?: UserSort;
-    };
-};
-export type ChannelSearchParams = {
-    /** The type of channel to create on user result select, defaults to `messaging` */
-    channelType?: string;
-    /** Clear search state / results on every click outside the search input, defaults to true */
-    clearSearchOnClickOutside?: boolean;
-    /** Disables execution of the search queries, defaults to false */
-    disabled?: boolean;
-    /** Callback invoked with every search input change handler */
-    onSearch?: SearchInputController['onSearch'];
-    /** Callback invoked when the search UI is deactivated */
-    onSearchExit?: () => void;
-    /** Custom handler function to run on search result item selection */
-    onSelectResult?: (params: ChannelSearchFunctionParams, result: ChannelOrUserResponse) => Promise<void> | void;
-    /** The number of milliseconds to debounce the search query. The default interval is 200ms. */
-    searchDebounceIntervalMs?: number;
-    /** 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, event: React.BaseSyntheticEvent) => Promise<void> | void;
-    /** Object containing filters/sort/options overrides for user / channel search */
-    searchQueryParams?: SearchQueryParams;
-};
-export type ChannelSearchControllerParams = ChannelSearchParams & {
-    /** Set the array of channels displayed in the ChannelList */
-    setChannels?: React.Dispatch<React.SetStateAction<Array<Channel>>>;
-};
-export declare const useChannelSearch: ({ channelType, clearSearchOnClickOutside, disabled, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs, searchForChannels, searchForUsers, searchFunction, searchQueryParams, setChannels, }: ChannelSearchControllerParams) => SearchController;