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

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -1,190 +0,0 @@
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import Textarea from 'react-textarea-autosize';
-import { useMessageComposer } from '../MessageInput';
-import { useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
-import { useStateStore } from '../../store';
-import { SuggestionList as DefaultSuggestionList } from './SuggestionList';
-const textComposerStateSelector = (state) => ({
-    selection: state.selection,
-    suggestions: state.suggestions,
-    text: state.text,
-});
-const searchSourceStateSelector = (state) => ({
-    isLoadingItems: state.isLoading,
-    items: state.items,
-});
-const configStateSelector = (state) => ({
-    enabled: state.text.enabled,
-});
-const messageComposerStateSelector = (state) => ({
-    quotedMessage: state.quotedMessage,
-});
-const attachmentManagerStateSelector = (state) => ({
-    attachments: state.attachments,
-});
-/**
- * isComposing prevents double submissions in Korean and other languages.
- * starting point for a read:
- * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
- * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
- */
-const defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
-export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
-    const { t } = useTranslationContext();
-    const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
-    const { additionalTextareaProps, cooldownRemaining, focus, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
-    const maxRows = maxRowsProp ?? maxRowsContext ?? 1;
-    const minRows = minRowsProp ?? minRowsContext;
-    const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
-    const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
-    const messageComposer = useMessageComposer();
-    const { textComposer } = messageComposer;
-    const { selection, suggestions, text } = useStateStore(textComposer.state, textComposerStateSelector);
-    const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
-    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
-    const { attachments } = useStateStore(messageComposer.attachmentManager.state, attachmentManagerStateSelector);
-    const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
-    const containerRef = useRef(null);
-    const [focusedItemIndex, setFocusedItemIndex] = useState(0);
-    const [isComposing, setIsComposing] = useState(false);
-    const changeHandler = useCallback((e) => {
-        if (onChange) {
-            onChange(e);
-            return;
-        }
-        if (!textareaRef.current)
-            return;
-        textComposer.handleChange({
-            selection: {
-                end: textareaRef.current.selectionEnd,
-                start: textareaRef.current.selectionStart,
-            },
-            text: e.target.value,
-        });
-    }, [onChange, textComposer, textareaRef]);
-    const onCompositionEnd = useCallback(() => {
-        setIsComposing(false);
-    }, []);
-    const onCompositionStart = useCallback(() => {
-        setIsComposing(true);
-    }, []);
-    const keyDownHandler = useCallback((event) => {
-        if (onKeyDown) {
-            onKeyDown(event);
-            return;
-        }
-        if (textComposer.suggestions &&
-            textComposer.suggestions.searchSource.items?.length) {
-            if (event.key === 'Escape')
-                return textComposer.closeSuggestions();
-            const loadedItems = textComposer.suggestions.searchSource.items;
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                textComposer.handleSelect(loadedItems[focusedItemIndex]);
-            }
-            if (event.key === 'ArrowUp') {
-                event.preventDefault();
-                setFocusedItemIndex((prev) => {
-                    let nextIndex = prev - 1;
-                    if (suggestions?.searchSource.hasNext) {
-                        nextIndex = prev;
-                    }
-                    else if (nextIndex < 0) {
-                        nextIndex = loadedItems.length - 1;
-                    }
-                    return nextIndex;
-                });
-            }
-            if (event.key === 'ArrowDown') {
-                event.preventDefault();
-                setFocusedItemIndex((prev) => {
-                    let nextIndex = prev + 1;
-                    if (suggestions?.searchSource.hasNext) {
-                        nextIndex = prev;
-                    }
-                    else if (nextIndex >= loadedItems.length) {
-                        nextIndex = 0;
-                    }
-                    return nextIndex;
-                });
-            }
-        }
-        else if (shouldSubmit(event) &&
-            textareaRef.current &&
-            messageComposer.hasSendableData) {
-            if (event.key === 'Enter') {
-                // prevent adding newline when submitting a message with
-                event.preventDefault();
-            }
-            handleSubmit();
-        }
-    }, [
-        focusedItemIndex,
-        handleSubmit,
-        messageComposer,
-        onKeyDown,
-        shouldSubmit,
-        suggestions,
-        textComposer,
-        textareaRef,
-    ]);
-    const scrollHandler = useCallback((event) => {
-        if (onScroll) {
-            onScroll(event);
-        }
-        else {
-            textComposer.closeSuggestions();
-        }
-    }, [onScroll, textComposer]);
-    const setSelection = useCallback((e) => {
-        onSelect?.(e);
-        textComposer.setSelection({
-            end: e.target.selectionEnd,
-            start: e.target.selectionStart,
-        });
-    }, [onSelect, textComposer]);
-    useEffect(() => {
-        if (textComposer.suggestions) {
-            setFocusedItemIndex(0);
-        }
-    }, [textComposer.suggestions]);
-    useEffect(() => {
-        const textareaIsFocused = textareaRef.current?.matches(':focus');
-        if (!textareaRef.current || textareaIsFocused || !focus)
-            return;
-        textareaRef.current.focus();
-    }, [attachments, focus, quotedMessage, textareaRef]);
-    useLayoutEffect(() => {
-        /**
-         * It is important to perform set text and after that the range
-         * to prevent cursor reset to the end of the textarea if doing it in separate effects.
-         */
-        const textarea = textareaRef.current;
-        if (!textarea || isComposing)
-            return;
-        /**
-         * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
-         * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
-         * it would not be possible to type composed characters (ô).
-         * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
-         * middleware results (e.g. replace characters with emojis)
-         */
-        if (textarea.value !== text) {
-            textarea.value = text;
-        }
-        const length = textarea.value.length;
-        const start = Math.max(0, Math.min(selection.start, length));
-        const end = Math.max(start, Math.min(selection.end, length));
-        if (textarea.selectionStart === start && textarea.selectionEnd === end)
-            return;
-        textarea.setSelectionRange(start, end, 'forward');
-    }, [text, selection.start, selection.end, isComposing, textareaRef]);
-    return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
-            ['rta--loading']: isLoadingItems,
-        }), ref: containerRef },
-        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelection, placeholder: placeholder || t('Type your message'), ref: (ref) => {
-                textareaRef.current = ref;
-            } }),
-        !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
-};

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

@@ -1,2 +0,0 @@
-export * from './SuggestionList';
-export * from './TextareaComposer';

package/dist/components/TextareaComposer/index.js

@@ -1,2 +0,0 @@
-export * from './SuggestionList';
-export * from './TextareaComposer';

package/dist/components/Thread/LegacyThreadContext.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { LocalMessage } from 'stream-chat';
-export declare const LegacyThreadContext: React.Context<{
-    legacyThread: LocalMessage | undefined;
-}>;
-export declare const useLegacyThreadContext: () => {
-    legacyThread: LocalMessage | undefined;
-};

package/dist/components/Thread/LegacyThreadContext.js

@@ -1,3 +0,0 @@
-import React, { useContext } from 'react';
-export const LegacyThreadContext = React.createContext({ legacyThread: undefined });
-export const useLegacyThreadContext = () => useContext(LegacyThreadContext);

package/dist/components/Thread/Thread.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { MessageInputProps } from '../MessageInput';
-import type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
-import type { MessageProps, MessageUIComponentProps } from '../Message/types';
-import type { MessageActionsArray } from '../Message/utils';
-export type ThreadProps = {
-    /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
-    additionalMessageInputProps?: MessageInputProps;
-    /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */
-    additionalMessageListProps?: MessageListProps;
-    /** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */
-    additionalParentMessageProps?: Partial<MessageProps>;
-    /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */
-    additionalVirtualizedMessageListProps?: VirtualizedMessageListProps;
-    /** If true, focuses the `MessageInput` component on opening a thread */
-    autoFocus?: boolean;
-    /** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */
-    enableDateSeparator?: boolean;
-    /** Custom thread input UI component used to override the default `Input` value stored in `ComponentContext` or the [MessageInputSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) default */
-    Input?: React.ComponentType;
-    /** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */
-    Message?: React.ComponentType<MessageUIComponentProps>;
-    /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */
-    messageActions?: MessageActionsArray;
-    /** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */
-    virtualized?: boolean;
-};
-/**
- * The Thread component renders a parent Message with a list of replies
- */
-export declare const Thread: (props: ThreadProps) => React.JSX.Element | null;

package/dist/components/Thread/Thread.js

@@ -1,87 +0,0 @@
-import React, { useEffect } from 'react';
-import clsx from 'clsx';
-import { LegacyThreadContext } from './LegacyThreadContext';
-import { MESSAGE_ACTIONS } from '../Message';
-import { MessageInput, MessageInputFlat } from '../MessageInput';
-import { MessageList, VirtualizedMessageList } from '../MessageList';
-import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
-import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
-import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
-import { useThreadContext } from '../Threads';
-import { useStateStore } from '../../store';
-/**
- * The Thread component renders a parent Message with a list of replies
- */
-export const Thread = (props) => {
-    const { channel, channelConfig, thread } = useChannelStateContext('Thread');
-    const threadInstance = useThreadContext();
-    if (!thread && !threadInstance)
-        return null;
-    if (channelConfig?.replies === false)
-        return null;
-    // the wrapper ensures a key variable is set and the component recreates on thread switch
-    return (
-    // FIXME: TS is having trouble here as at least one of the two would always be defined
-    React.createElement(ThreadInner, { ...props, key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}` }));
-};
-const selector = (nextValue) => ({
-    isLoadingNext: nextValue.pagination.isLoadingNext,
-    isLoadingPrev: nextValue.pagination.isLoadingPrev,
-    parentMessage: nextValue.parentMessage,
-    replies: nextValue.replies,
-});
-const ThreadInner = (props) => {
-    const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
-    const threadInstance = useThreadContext();
-    const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
-    const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
-    const { customClasses } = useChatContext('Thread');
-    const { Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, ThreadInput: ContextInput, VirtualMessage, } = useComponentContext('Thread');
-    const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector) ?? {};
-    const ThreadInput = PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
-    const ThreadMessage = PropMessage || additionalMessageListProps?.Message;
-    const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
-    const MessageUIComponent = ThreadMessage || FallbackMessage;
-    const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
-    useEffect(() => {
-        if (threadInstance)
-            return;
-        if ((thread?.reply_count ?? 0) > 0) {
-            // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
-            loadMoreThread();
-        }
-    }, [thread, loadMoreThread, threadInstance]);
-    const threadProps = threadInstance
-        ? {
-            loadingMore: isLoadingPrev,
-            loadingMoreNewer: isLoadingNext,
-            loadMore: threadInstance.loadPrevPage,
-            loadMoreNewer: threadInstance.loadNextPage,
-            messages: replies,
-        }
-        : {
-            hasMore: threadHasMore,
-            loadingMore: threadLoadingMore,
-            loadMore: loadMoreThread,
-            messages: threadMessages,
-        };
-    const messageAsThread = thread ?? parentMessage;
-    if (!messageAsThread)
-        return null;
-    const threadClass = customClasses?.thread ||
-        clsx('str-chat__thread-container str-chat__thread', {
-            'str-chat__thread--virtualized': virtualized,
-        });
-    const head = (React.createElement(ThreadHead, { key: messageAsThread.id, message: messageAsThread, Message: MessageUIComponent, ...additionalParentMessageProps }));
-    return (
-    // Thread component needs a context which we can use for message composer
-    React.createElement(LegacyThreadContext.Provider, { value: {
-            legacyThread: thread ?? undefined,
-        } },
-        React.createElement("div", { className: threadClass },
-            React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
-            React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized
-                    ? additionalVirtualizedMessageListProps
-                    : additionalMessageListProps) }),
-            React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, isThreadInput: true, parent: thread ?? parentMessage, ...additionalMessageInputProps }))));
-};

package/dist/components/Thread/ThreadHead.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { MessageProps } from '../Message';
-export declare const ThreadHead: (props: MessageProps) => React.JSX.Element;

package/dist/components/Thread/ThreadHead.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Message } from '../Message';
-import { ThreadStart as DefaultThreadStart } from './ThreadStart';
-import { useComponentContext } from '../../context';
-export const ThreadHead = (props) => {
-    const { ThreadStart = DefaultThreadStart } = useComponentContext('ThreadHead');
-    return (React.createElement("div", { className: 'str-chat__parent-message-li' },
-        React.createElement(Message, { initialMessage: true, threadList: true, ...props }),
-        React.createElement(ThreadStart, null)));
-};

package/dist/components/Thread/ThreadHeader.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ChannelPreviewInfoParams } from '../ChannelPreview/hooks/useChannelPreviewInfo';
-import type { LocalMessage } from 'stream-chat';
-export type ThreadHeaderProps = {
-    /** Callback for closing the thread */
-    closeThread: (event?: React.BaseSyntheticEvent) => void;
-    /** The thread parent message */
-    thread: LocalMessage;
-};
-export declare const ThreadHeader: (props: ThreadHeaderProps & Pick<ChannelPreviewInfoParams, 'overrideImage' | 'overrideTitle'>) => React.JSX.Element;

package/dist/components/Thread/ThreadHeader.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
-import { CloseIcon } from './icons';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-export const ThreadHeader = (props) => {
-    const { closeThread, overrideImage, overrideTitle } = props;
-    const { t } = useTranslationContext('ThreadHeader');
-    const { channel } = useChannelStateContext('');
-    const { displayTitle } = useChannelPreviewInfo({
-        channel,
-        overrideImage,
-        overrideTitle,
-    });
-    return (React.createElement("div", { className: 'str-chat__thread-header' },
-        React.createElement("div", { className: 'str-chat__thread-header-details' },
-            React.createElement("div", { className: 'str-chat__thread-header-title' }, t('Thread')),
-            React.createElement("div", { className: 'str-chat__thread-header-subtitle' }, displayTitle)),
-        React.createElement("button", { "aria-label": t('aria/Close thread'), className: 'str-chat__close-thread-button', "data-testid": 'close-button', onClick: closeThread },
-            React.createElement(CloseIcon, null))));
-};

package/dist/components/Thread/ThreadStart.d.ts

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

package/dist/components/Thread/ThreadStart.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-export const ThreadStart = () => {
-    const { thread } = useChannelStateContext('ThreadStart');
-    const { t } = useTranslationContext('ThreadStart');
-    if (!thread?.reply_count)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__thread-start' }, t('replyCount', { count: thread.reply_count })));
-};

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const CloseIcon: ({ title }: {
-    title?: string;
-}) => React.JSX.Element;

package/dist/components/Thread/icons.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context/TranslationContext';
-export const CloseIcon = ({ title }) => {
-    const { t } = useTranslationContext('CloseIcon');
-    return (React.createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("title", null, title ?? t('Close')),
-        React.createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' })));
-};

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

@@ -1,4 +0,0 @@
-export * from './Thread';
-export * from './ThreadHeader';
-export { ThreadStart } from './ThreadStart';
-export { useLegacyThreadContext } from './LegacyThreadContext';

package/dist/components/Thread/index.js

@@ -1,4 +0,0 @@
-export * from './Thread';
-export * from './ThreadHeader';
-export { ThreadStart } from './ThreadStart';
-export { useLegacyThreadContext } from './LegacyThreadContext';

package/dist/components/Threads/ThreadContext.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { Thread } from 'stream-chat';
-export type ThreadContextValue = Thread | undefined;
-export declare const ThreadContext: React.Context<ThreadContextValue>;
-export declare const useThreadContext: () => ThreadContextValue;
-export declare const ThreadProvider: ({ children, thread, }: PropsWithChildren<{
-    thread?: Thread;
-}>) => React.JSX.Element;

package/dist/components/Threads/ThreadContext.js

@@ -1,6 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import { Channel } from '../../components';
-export const ThreadContext = createContext(undefined);
-export const useThreadContext = () => useContext(ThreadContext);
-export const ThreadProvider = ({ children, thread, }) => (React.createElement(ThreadContext.Provider, { value: thread },
-    React.createElement(Channel, { channel: thread?.channel }, children)));

package/dist/components/Threads/ThreadList/ThreadList.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { VirtuosoProps } from 'react-virtuoso';
-import type { Thread } from 'stream-chat';
-type ThreadListProps = {
-    virtuosoProps?: VirtuosoProps<Thread, unknown>;
-};
-export declare const useThreadList: () => void;
-export declare const ThreadList: ({ virtuosoProps }: ThreadListProps) => React.JSX.Element;
-export {};

package/dist/components/Threads/ThreadList/ThreadList.js

@@ -1,41 +0,0 @@
-import React, { useEffect } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';
-import { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from './ThreadListEmptyPlaceholder';
-import { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner } from './ThreadListUnseenThreadsBanner';
-import { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';
-import { useChatContext, useComponentContext } from '../../../context';
-import { useStateStore } from '../../../store';
-const selector = (nextValue) => ({ threads: nextValue.threads });
-const computeItemKey = (_, item) => item.id;
-export const useThreadList = () => {
-    const { client } = useChatContext();
-    useEffect(() => {
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === 'visible') {
-                client.threads.activate();
-            }
-            if (document.visibilityState === 'hidden') {
-                client.threads.deactivate();
-            }
-        };
-        handleVisibilityChange();
-        document.addEventListener('visibilitychange', handleVisibilityChange);
-        return () => {
-            client.threads.deactivate();
-            document.removeEventListener('visibilitychange', handleVisibilityChange);
-        };
-    }, [client]);
-};
-export const ThreadList = ({ virtuosoProps }) => {
-    const { client } = useChatContext();
-    const { ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListItem = DefaultThreadListItem, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
-    const { threads } = useStateStore(client.threads.state, selector);
-    useThreadList();
-    return (React.createElement("div", { className: 'str-chat__thread-list-container' },
-        React.createElement(ThreadListUnseenThreadsBanner, null),
-        React.createElement(Virtuoso, { atBottomStateChange: (atBottom) => atBottom && client.threads.loadNextPage(), className: 'str-chat__thread-list', components: {
-                EmptyPlaceholder: ThreadListEmptyPlaceholder,
-                Footer: ThreadListLoadingIndicator,
-            }, computeItemKey: computeItemKey, data: threads, itemContent: (_, thread) => React.createElement(ThreadListItem, { thread: thread }), ...virtuosoProps })));
-};

package/dist/components/Threads/ThreadList/ThreadListEmptyPlaceholder.d.ts

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

package/dist/components/Threads/ThreadList/ThreadListEmptyPlaceholder.js

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Icon } from '../icons';
-export const ThreadListEmptyPlaceholder = () => (React.createElement("div", { className: 'str-chat__thread-list-empty-placeholder' },
-    React.createElement(Icon.MessageBubble, null),
-    "No threads here yet..."));

package/dist/components/Threads/ThreadList/ThreadListItem.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { Thread } from 'stream-chat';
-import type { ThreadListItemUIProps } from './ThreadListItemUI';
-export type ThreadListItemProps = {
-    thread: Thread;
-    threadListItemUIProps?: ThreadListItemUIProps;
-};
-export declare const useThreadListItemContext: () => Thread | undefined;
-export declare const ThreadListItem: ({ thread, threadListItemUIProps, }: ThreadListItemProps) => React.JSX.Element;

package/dist/components/Threads/ThreadList/ThreadListItem.js

@@ -1,52 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import { useComponentContext } from '../../../context';
-import { ThreadListItemUI as DefaultThreadListItemUI } from './ThreadListItemUI';
-const ThreadListItemContext = createContext(undefined);
-export const useThreadListItemContext = () => useContext(ThreadListItemContext);
-export const ThreadListItem = ({ thread, threadListItemUIProps, }) => {
-    const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();
-    return (React.createElement(ThreadListItemContext.Provider, { value: thread },
-        React.createElement(ThreadListItemUI, { ...threadListItemUIProps })));
-};
-// const App = () => {
-//   const route = useRouter();
-//   return (
-//     <Chat>
-//       {route === '/channels' && (
-//         <Channel>
-//           <MessageList />
-//           <Thread />
-//         </Channel>
-//       )}
-//       {route === '/threads' && (
-//         <Threads>
-//           <ThreadList />
-//           <ThreadProvider>
-//             <Thread />
-//           </ThreadProvider>
-//         </Threads>
-//       )}
-//     </Chat>
-//   );
-// };
-// pre-built layout
-{
-    /*
-  <Chat client={chatClient}>
-    <Views>
-      // has default
-      <ViewSelector onItemPointerDown={} />
-      <View.Chat>
-        <Channel>
-          <MessageList />
-          <MessageInput />
-        </Channel>
-      </View.Chat>
-      <View.Thread> <-- activeThread state
-        <ThreadList /> <-- uses context for click handler
-        <WrappedThread /> <-- ThreadProvider + Channel combo
-      </View.Thread>
-    </Views>
-  </Chat>;
-  */
-}

package/dist/components/Threads/ThreadList/ThreadListItemUI.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { ComponentPropsWithoutRef } from 'react';
-export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'>;
-/**
- * TODO:
- * - maybe hover state? ask design
- */
-export declare const attachmentTypeIconMap: {
-    readonly audio: "🔈";
-    readonly file: "📄";
-    readonly image: "📷";
-    readonly video: "🎥";
-    readonly voiceRecording: "🎙️";
-};
-export declare const ThreadListItemUI: (props: ThreadListItemUIProps) => React.JSX.Element;